Initial commit

node_modules/@fluentui/react-list/lib/components/List/List.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useList_unstable } from './useList';
+import { renderList_unstable } from './renderList';
+import { useListStyles_unstable } from './useListStyles.styles';
+import { useListContextValues_unstable } from './useListContextValues';
+export const List = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useList_unstable(props, ref);
+    const contextValues = useListContextValues_unstable(state);
+    useListStyles_unstable(state);
+    useCustomStyleHook_unstable('useListStyles_unstable')(state);
+    return renderList_unstable(state, contextValues);
+});
+List.displayName = 'List';

node_modules/@fluentui/react-list/lib/components/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n  const state = useList_unstable(props, ref);\n  const contextValues = useListContextValues_unstable(state);\n\n  useListStyles_unstable(state);\n  useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n  return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

node_modules/@fluentui/react-list/lib/components/List/List.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-list/lib/components/List/List.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type {\n  ComponentProps,\n  ComponentState,\n  Slot,\n  SelectionMode,\n  SelectionItemId,\n  EventHandler,\n  EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n  root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n  selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n  navigationMode?: ListNavigationMode;\n  selectionMode?: SelectionMode;\n  selectedItems?: SelectionItemId[];\n  defaultSelectedItems?: SelectionItemId[];\n  onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n  navigationMode: ListNavigationMode | undefined;\n  selection?: ListSelectionState;\n  listItemRole: string;\n  validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListContextValues = {\n  listContext: ListContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue;\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-list/lib/components/List/index.js

@@ -0,0 +1,4 @@
+export { List } from './List';
+export { renderList_unstable } from './renderList';
+export { useList_unstable } from './useList';
+export { listClassNames, useListStyles_unstable } from './useListStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type {\n  ListContextValue,\n  ListContextValues,\n  ListNavigationMode,\n  ListProps,\n  ListSlots,\n  ListState,\n  OnListSelectionChangeData,\n} from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"rangeMappings":";;;","mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAU9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

node_modules/@fluentui/react-list/lib/components/List/listContext.js

@@ -0,0 +1,11 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const listContextDefaultValue = {
+    navigationMode: undefined,
+    selection: undefined,
+    listItemRole: 'listitem',
+    validateListItem: ()=>{
+    /* noop */ }
+};
+const listContext = createContext(undefined);
+export const ListContextProvider = listContext.Provider;
+export const useListContext_unstable = (selector)=>useContextSelector(listContext, (ctx = listContextDefaultValue)=>selector(ctx));

node_modules/@fluentui/react-list/lib/components/List/listContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListContextValue } from './List.types';\n\nexport const listContextDefaultValue: ListContextValue = {\n  navigationMode: undefined,\n  selection: undefined,\n  listItemRole: 'listitem',\n  validateListItem: () => {\n    /* noop */\n  },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n  useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","listContextDefaultValue","navigationMode","undefined","selection","listItemRole","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx"],"rangeMappings":";;;;;;;;;;","mappings":"AAAA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAIrF,OAAO,MAAMC,0BAA4C;IACvDC,gBAAgBC;IAChBC,WAAWD;IACXE,cAAc;IACdC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcR,cAA4CI;AAEhE,OAAO,MAAMK,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCX,mBAAmBO,aAAa,CAACK,MAAMX,uBAAuB,GAAKU,SAASC,MAAM"}

node_modules/@fluentui/react-list/lib/components/List/renderList.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { ListContextProvider } from './listContext';
+/**
+ * Render the final JSX of List
+ */ export const renderList_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(ListContextProvider, {
+        value: contextValues.listContext,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-list/lib/components/List/renderList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/renderList.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues) => {\n  assertSlots<ListSlots>(state);\n\n  return (\n    <ListContextProvider value={contextValues.listContext}>\n      <state.root />\n    </ListContextProvider>\n  );\n};\n"],"names":["assertSlots","ListContextProvider","renderList_unstable","state","contextValues","value","listContext","root"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,mBAAmB,QAAQ,gBAAgB;AAEpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDJ,YAAuBG;IAEvB,qBACE,KAACF;QAAoBI,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-list/lib/components/List/useList.js

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
+import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
+import { useListSelection } from '../../hooks/useListSelection';
+import { calculateListItemRoleForListRole, calculateListRole, validateGridCellsArePresent, validateProperElementTypes, validateProperRolesAreUsed } from '../../utils';
+const DEFAULT_ROOT_EL_TYPE = 'ul';
+/**
+ * Create the state required to render List.
+ *
+ * The returned state can be modified with hooks such as useListStyles_unstable,
+ * before being passed to renderList_unstable.
+ *
+ * @param props - props from this instance of List
+ * @param ref - reference to root HTMLElement of List
+ */ export const useList_unstable = (props, ref)=>{
+    const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;
+    const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
+    const arrowNavigationAttributes = useArrowNavigationGroup({
+        axis: 'vertical',
+        memorizeCurrent: true
+    });
+    const [selectionState, setSelectionState] = useControllableState({
+        state: selectedItems,
+        defaultState: defaultSelectedItems,
+        initialState: []
+    });
+    const onChange = useEventCallback((e, data)=>{
+        const selectedItemsAsArray = Array.from(data.selectedItems);
+        setSelectionState(selectedItemsAsArray);
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
+            event: e,
+            type: 'change',
+            selectedItems: selectedItemsAsArray
+        });
+    });
+    const selection = useListSelection({
+        onSelectionChange: onChange,
+        selectionMode: selectionMode || 'multiselect',
+        selectedItems: selectionState
+    });
+    const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);
+    const listItemRole = calculateListItemRoleForListRole(listRole);
+    const { findAllFocusable } = useFocusFinders();
+    const validateListItem = useEventCallback((listItemEl)=>{
+        if (process.env.NODE_ENV === 'production') {
+            return;
+        }
+        const itemRole = listItemEl.getAttribute('role') || '';
+        const focusable = findAllFocusable(listItemEl);
+        validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());
+        validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);
+        validateGridCellsArePresent(listRole, listItemEl);
+    });
+    return {
+        components: {
+            root: as
+        },
+        root: slot.always(getIntrinsicElementProps(as, {
+            ref,
+            role: listRole,
+            ...selectionMode && {
+                'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined
+            },
+            ...arrowNavigationAttributes,
+            ...props
+        }), {
+            elementType: as
+        }),
+        listItemRole,
+        validateListItem,
+        navigationMode,
+        // only pass down selection state if its handled internally, otherwise just report the events
+        selection: selectionMode ? selection : undefined
+    };
+};

node_modules/@fluentui/react-list/lib/components/List/useListContextValues.js

@@ -0,0 +1,12 @@
+export function useListContextValues_unstable(state) {
+    const { selection, navigationMode, listItemRole, validateListItem } = state;
+    const listContext = {
+        selection,
+        listItemRole,
+        navigationMode,
+        validateListItem
+    };
+    return {
+        listContext
+    };
+}

node_modules/@fluentui/react-list/lib/components/List/useListContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["import { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n  const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n  const listContext = {\n    selection,\n    listItemRole,\n    navigationMode,\n    validateListItem,\n  };\n\n  return {\n    listContext,\n  };\n}\n"],"names":["useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext"],"rangeMappings":";;;;;;;;;;;","mappings":"AAEA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAE;QACAD;QACAE;IACF;IAEA,OAAO;QACLC;IACF;AACF"}

node_modules/@fluentui/react-list/lib/components/List/useListStyles.styles.js

@@ -0,0 +1,15 @@
+import { __resetStyles, mergeClasses } from '@griffel/react';
+export const listClassNames = {
+  root: 'fui-List'
+};
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1m6yby2", null, [".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"]);
+/**
+ * Apply styling to the List slots based on the state
+ */
+export const useListStyles_unstable = state => {
+  'use no memo';
+
+  const rootStyles = useRootBaseStyles();
+  state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-list/lib/components/List/useListStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"sources":["useListStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n    root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n    padding: 0,\n    margin: 0,\n    textIndent: 0,\n    listStyleType: 'none'\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n    'use no memo';\n    const rootStyles = useRootBaseStyles();\n    state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;EACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC1F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}