feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-list/lib/utils/calculateListItemRoleForListRole.js

@@ -0,0 +1,16 @@
+/**
+ * Calculate the role for the list item based on the list role.
+ * @param listRole - the role of the list
+ * @returns proper role for the list item
+ */ export const calculateListItemRoleForListRole = (listRole)=>{
+    switch(listRole){
+        case 'list':
+            return 'listitem';
+        case 'listbox':
+            return 'option';
+        case 'grid':
+            return 'row';
+        default:
+            return 'listitem';
+    }
+};

node_modules/@fluentui/react-list/lib/utils/calculateListItemRoleForListRole.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/calculateListItemRoleForListRole.ts"],"sourcesContent":["/**\n * Calculate the role for the list item based on the list role.\n * @param listRole - the role of the list\n * @returns proper role for the list item\n */\nexport const calculateListItemRoleForListRole = (listRole: string): string => {\n  switch (listRole) {\n    case 'list':\n      return 'listitem';\n    case 'listbox':\n      return 'option';\n    case 'grid':\n      return 'row';\n    default:\n      return 'listitem';\n  }\n};\n"],"names":["calculateListItemRoleForListRole","listRole"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF,EAAE"}

node_modules/@fluentui/react-list/lib/utils/calculateListRole.js

@@ -0,0 +1,14 @@
+/**
+ * Calculate the role for the list based on the navigation mode and selectable state
+ * @param navigationMode - the navigation mode of the list
+ * @param selectable - whether the list is selectable
+ * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not
+ */ export const calculateListRole = (navigationMode, selectable)=>{
+    if (navigationMode === 'composite') {
+        return 'grid';
+    } else if (selectable) {
+        return 'listbox';
+    } else {
+        return 'list';
+    }
+};

node_modules/@fluentui/react-list/lib/utils/calculateListRole.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n  navigationMode: ListNavigationMode | undefined,\n  selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n  if (navigationMode === 'composite') {\n    return 'grid';\n  } else if (selectable) {\n    return 'listbox';\n  } else {\n    return 'list';\n  }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED,OAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}

node_modules/@fluentui/react-list/lib/utils/index.js

@@ -0,0 +1,5 @@
+export { calculateListRole } from './calculateListRole';
+export { validateProperElementTypes } from './validateProperElementTypes';
+export { validateProperRolesAreUsed } from './validateProperRolesAreUsed';
+export { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';
+export { validateGridCellsArePresent } from './validateGridCellsArePresent';

node_modules/@fluentui/react-list/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { calculateListRole } from './calculateListRole';\nexport { validateProperElementTypes } from './validateProperElementTypes';\nexport { validateProperRolesAreUsed } from './validateProperRolesAreUsed';\nexport { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';\nexport { validateGridCellsArePresent } from './validateGridCellsArePresent';\n"],"names":["calculateListRole","validateProperElementTypes","validateProperRolesAreUsed","calculateListItemRoleForListRole","validateGridCellsArePresent"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,0BAA0B,QAAQ,+BAA+B;AAC1E,SAASC,gCAAgC,QAAQ,qCAAqC;AACtF,SAASC,2BAA2B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-list/lib/utils/validateGridCellsArePresent.js

@@ -0,0 +1,16 @@
+/**
+ * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.
+ * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.
+ * @param listRole - The role of the list
+ * @param listItemEl - The list item element
+ * @returns
+ */ export const validateGridCellsArePresent = (listRole, listItemEl)=>{
+    if (listRole !== 'grid') {
+        return;
+    }
+    const gridCells = listItemEl.querySelectorAll(':scope > [role="gridcell"]');
+    if (gridCells.length === 0) {
+        //eslint-disable-next-line no-console
+        console.warn(`@fluentui/react-list [useList]:\nList items in List with "grid" role (which is automatically assigned when navigationMode is set to "composite") must contain at least one "gridcell" as direct child of <ListItem /> for proper screen reader support.`, `Ideally, each focus target should be in it's own "gridcell", which is a direct child of <ListItem />.\n`);
+    }
+};

node_modules/@fluentui/react-list/lib/utils/validateGridCellsArePresent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/validateGridCellsArePresent.ts"],"sourcesContent":["/**\n * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.\n * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.\n * @param listRole - The role of the list\n * @param listItemEl - The list item element\n * @returns\n */\nexport const validateGridCellsArePresent = (listRole: string, listItemEl: HTMLElement): void => {\n  if (listRole !== 'grid') {\n    return;\n  }\n\n  const gridCells = listItemEl.querySelectorAll(':scope > [role=\"gridcell\"]');\n  if (gridCells.length === 0) {\n    //eslint-disable-next-line no-console\n    console.warn(\n      `@fluentui/react-list [useList]:\\nList items in List with \"grid\" role (which is automatically assigned when navigationMode is set to \"composite\") must contain at least one \"gridcell\" as direct child of <ListItem /> for proper screen reader support.`,\n      `Ideally, each focus target should be in it's own \"gridcell\", which is a direct child of <ListItem />.\\n`,\n    );\n  }\n};\n"],"names":["validateGridCellsArePresent","listRole","listItemEl","gridCells","querySelectorAll","length","console","warn"],"mappings":"AAAA;;;;;;CAMC,GACD,OAAO,MAAMA,8BAA8B,CAACC,UAAkBC;IAC5D,IAAID,aAAa,QAAQ;QACvB;IACF;IAEA,MAAME,YAAYD,WAAWE,gBAAgB,CAAC;IAC9C,IAAID,UAAUE,MAAM,KAAK,GAAG;QAC1B,qCAAqC;QACrCC,QAAQC,IAAI,CACV,CAAC,uPAAuP,CAAC,EACzP,CAAC,uGAAuG,CAAC;IAE7G;AACF,EAAE"}

node_modules/@fluentui/react-list/lib/utils/validateProperElementTypes.js

@@ -0,0 +1,12 @@
+/**
+ * Validates that the List and ListItem elements are compatible
+ * @param listRenderedAs - the type of the parent element
+ * @param listItemRenderedAs - the type of the child element
+ */ export function validateProperElementTypes(listRenderedAs, listItemRenderedAs) {
+    if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {
+        throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');
+    }
+    if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {
+        throw new Error('ListItem cannot be rendered as a li when its parent is a div.');
+    }
+}

node_modules/@fluentui/react-list/lib/utils/validateProperElementTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/validateProperElementTypes.ts"],"sourcesContent":["/**\n * Validates that the List and ListItem elements are compatible\n * @param listRenderedAs - the type of the parent element\n * @param listItemRenderedAs - the type of the child element\n */\nexport function validateProperElementTypes(listRenderedAs?: string, listItemRenderedAs?: string): void {\n  if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {\n    throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n  }\n  if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {\n    throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n  }\n}\n"],"names":["validateProperElementTypes","listRenderedAs","listItemRenderedAs","Error"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,SAASA,2BAA2BC,cAAuB,EAAEC,kBAA2B;IAC7F,IAAIA,uBAAuB,SAASD,mBAAmB,OAAO;QAC5D,MAAM,IAAIE,MAAM;IAClB;IACA,IAAID,uBAAuB,QAAQD,mBAAmB,OAAO;QAC3D,MAAM,IAAIE,MAAM;IAClB;AACF"}

node_modules/@fluentui/react-list/lib/utils/validateProperRolesAreUsed.js

@@ -0,0 +1,36 @@
+/**
+ * Validate that the proper roles are used for the given combination of roles and states.
+ * If the roles are invalid and we're not running in production mode, an warning will be logged to the console.
+ *
+ * @param role - the role of the list
+ * @param listItemRole - the role of the list item
+ * @param hasSelection - whether the list has selection enabled
+ * @param hasFocusableChildren - whether the list has focusable children
+ * @returns
+ */ export const validateProperRolesAreUsed = (role, listItemRole, hasSelection, hasFocusableChildren)=>{
+    // Explode when the pair of roles is invalid
+    if (role === 'list' && listItemRole !== 'listitem') {
+        throw new Error('When the List role is "list", ListItem role must be "listitem".');
+    }
+    if (role === 'listbox' && listItemRole !== 'option') {
+        throw new Error('When the List role is "listbox", ListItem role must be "option".');
+    }
+    if (role === 'grid' && listItemRole !== 'row') {
+        throw new Error('When the List role is "grid", ListItem role must be "row".');
+    }
+    const expectedRole = (()=>{
+        if (hasFocusableChildren) {
+            return 'grid';
+        } else {
+            if (hasSelection) {
+                return 'listbox';
+            } else {
+                return 'list';
+            }
+        }
+    })();
+    if (role !== expectedRole) {
+        /* eslint-disable-next-line no-console */ console.warn(`@fluentui/react-list [useList]:\nThe role "${role}" does not match the expected role "${expectedRole}".\nPlease use the "navigationMode" property for automatic role assignment and keyboard navigation.\nIf you are using this role intentionally, make sure to verify screen reader support.
+    `);
+    }
+};

node_modules/@fluentui/react-list/lib/utils/validateProperRolesAreUsed.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/validateProperRolesAreUsed.ts"],"sourcesContent":["/**\n * Validate that the proper roles are used for the given combination of roles and states.\n * If the roles are invalid and we're not running in production mode, an warning will be logged to the console.\n *\n * @param role - the role of the list\n * @param listItemRole - the role of the list item\n * @param hasSelection - whether the list has selection enabled\n * @param hasFocusableChildren - whether the list has focusable children\n * @returns\n */\nexport const validateProperRolesAreUsed = (\n  role: string,\n  listItemRole: string,\n  hasSelection: boolean,\n  hasFocusableChildren: boolean,\n): void => {\n  // Explode when the pair of roles is invalid\n  if (role === 'list' && listItemRole !== 'listitem') {\n    throw new Error('When the List role is \"list\", ListItem role must be \"listitem\".');\n  }\n  if (role === 'listbox' && listItemRole !== 'option') {\n    throw new Error('When the List role is \"listbox\", ListItem role must be \"option\".');\n  }\n  if (role === 'grid' && listItemRole !== 'row') {\n    throw new Error('When the List role is \"grid\", ListItem role must be \"row\".');\n  }\n\n  const expectedRole = (() => {\n    if (hasFocusableChildren) {\n      return 'grid';\n    } else {\n      if (hasSelection) {\n        return 'listbox';\n      } else {\n        return 'list';\n      }\n    }\n  })();\n\n  if (role !== expectedRole) {\n    /* eslint-disable-next-line no-console */\n    console.warn(`@fluentui/react-list [useList]:\\nThe role \"${role}\" does not match the expected role \"${expectedRole}\".\\nPlease use the \"navigationMode\" property for automatic role assignment and keyboard navigation.\\nIf you are using this role intentionally, make sure to verify screen reader support.\n    `);\n  }\n};\n"],"names":["validateProperRolesAreUsed","role","listItemRole","hasSelection","hasFocusableChildren","Error","expectedRole","console","warn"],"mappings":"AAAA;;;;;;;;;CASC,GACD,OAAO,MAAMA,6BAA6B,CACxCC,MACAC,cACAC,cACAC;IAEA,4CAA4C;IAC5C,IAAIH,SAAS,UAAUC,iBAAiB,YAAY;QAClD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,aAAaC,iBAAiB,UAAU;QACnD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,UAAUC,iBAAiB,OAAO;QAC7C,MAAM,IAAIG,MAAM;IAClB;IAEA,MAAMC,eAAe,AAAC,CAAA;QACpB,IAAIF,sBAAsB;YACxB,OAAO;QACT,OAAO;YACL,IAAID,cAAc;gBAChB,OAAO;YACT,OAAO;gBACL,OAAO;YACT;QACF;IACF,CAAA;IAEA,IAAIF,SAASK,cAAc;QACzB,uCAAuC,GACvCC,QAAQC,IAAI,CAAC,CAAC,2CAA2C,EAAEP,KAAK,oCAAoC,EAAEK,aAAa;IACnH,CAAC;IACH;AACF,EAAE"}