Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

1
node_modules/@fluentui/react-list/lib/List.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './components/List/index';

1
node_modules/@fluentui/react-list/lib/List.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/List.ts"],"sourcesContent":["export type {\n ListContextValue,\n ListContextValues,\n ListNavigationMode,\n ListProps,\n ListSlots,\n ListState,\n OnListSelectionChangeData,\n} from './components/List/index';\nexport {\n List,\n listClassNames,\n renderList_unstable,\n useListStyles_unstable,\n useList_unstable,\n} from './components/List/index';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"mappings":"AASA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}

1
node_modules/@fluentui/react-list/lib/ListItem.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { ListItem, listItemClassNames, renderListItem_unstable, useListItemStyles_unstable, useListItem_unstable } from './components/ListItem/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ListItem.ts"],"sourcesContent":["export type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './components/ListItem/index';\nexport {\n ListItem,\n listItemClassNames,\n renderListItem_unstable,\n useListItemStyles_unstable,\n useListItem_unstable,\n} from './components/ListItem/index';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":"AAOA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}

View File

@@ -0,0 +1,15 @@
'use client';
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';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * 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"],"mappings":"AAAA;AAEA,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"}

View File

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

View File

@@ -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 selection?: ListSelectionState;\n validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n navigationMode: ListNavigationMode | undefined;\n listItemRole: string;\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -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';

View File

@@ -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"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAU9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

View File

@@ -0,0 +1,23 @@
'use client';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import * as React from 'react';
export const listContextDefaultValue = {
selection: undefined,
validateListItem: ()=>{
/* noop */ }
};
const listContext = createContext(undefined);
export const ListContextProvider = listContext.Provider;
export const useListContext_unstable = (selector)=>useContextSelector(listContext, (ctx = listContextDefaultValue)=>selector(ctx));
// This is a context that uses the standard, React Context API.
// The reason why this exists is that the Fluent UI Context Provider replaces the
// React Context Provider with a custom one that needs a layout effect to update the context value.
// This results in issues with element/role validation, as the ListItem component has not been updated yet
// when the validation happens.
// https://github.com/microsoft/fluentui/issues/34467
const ListSynchronousContext = React.createContext(undefined);
export const ListSynchronousContextProvider = ListSynchronousContext.Provider;
export const useListSynchronousContext = ()=>React.useContext(ListSynchronousContext) || {
navigationMode: undefined,
listItemRole: 'listitem'
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n selection: undefined,\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\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n React.useContext(ListSynchronousContext) || {\n navigationMode: undefined,\n listItemRole: 'listitem',\n };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,YAAYC,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,yBAAyBX,MAAMF,aAAa,CAA0CK;AAE5F,OAAO,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AAC9E,OAAO,MAAMM,4BAA4B,IACvCb,MAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

View File

@@ -0,0 +1,15 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { ListContextProvider, ListSynchronousContextProvider } 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(ListSynchronousContextProvider, {
value: contextValues.synchronousContext,
children: /*#__PURE__*/ _jsx(state.root, {})
})
});
};

View File

@@ -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 { JSXElement } from '@fluentui/react-utilities';\nimport type { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider, ListSynchronousContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues): JSXElement => {\n assertSlots<ListSlots>(state);\n\n return (\n <ListContextProvider value={contextValues.listContext}>\n <ListSynchronousContextProvider value={contextValues.synchronousContext}>\n <state.root />\n </ListSynchronousContextProvider>\n </ListContextProvider>\n );\n};\n"],"names":["assertSlots","ListContextProvider","ListSynchronousContextProvider","renderList_unstable","state","contextValues","value","listContext","synchronousContext","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,gBAAgB;AAEpF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDL,YAAuBI;IAEvB,qBACE,KAACH;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACL;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,cAAA,KAACJ,MAAMK,IAAI;;;AAInB,EAAE"}

View File

@@ -0,0 +1,76 @@
'use client';
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
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,21 @@
'use client';
import * as React from 'react';
export function useListContextValues_unstable(state) {
const { selection, navigationMode, listItemRole, validateListItem } = state;
const listContext = {
selection,
navigationMode,
validateListItem
};
const synchronousContext = React.useMemo(()=>({
listItemRole,
navigationMode
}), [
listItemRole,
navigationMode
]);
return {
listContext,
synchronousContext
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { 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 navigationMode,\n validateListItem,\n };\n\n const synchronousContext = React.useMemo(\n () => ({\n listItemRole,\n navigationMode,\n }),\n [listItemRole, navigationMode],\n );\n\n return {\n listContext,\n synchronousContext,\n };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","synchronousContext","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,MAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;QACF,CAAA,GACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}

View File

@@ -0,0 +1,17 @@
'use client';
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;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { 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,YAAY;;AACZ,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":[]}

View File

@@ -0,0 +1,19 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
export const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = makeResetStyles({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: '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;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,13 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useListItem_unstable } from './useListItem';
import { renderListItem_unstable } from './renderListItem';
import { useListItemStyles_unstable } from './useListItemStyles.styles';
export const ListItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useListItem_unstable(props, ref);
useListItemStyles_unstable(state);
useCustomStyleHook_unstable('useListItemStyles_unstable')(state);
return renderListItem_unstable(state);
});
ListItem.displayName = 'ListItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement | HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering ListItem
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: ListItemValue;\n onAction?: EventHandler<ListItemActionEventData>;\n disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable: boolean;\n navigable: boolean;\n disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}

View File

@@ -0,0 +1,4 @@
export { ListItem } from './ListItem';
export { renderListItem_unstable } from './renderListItem';
export { useListItem_unstable } from './useListItem';
export { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of ListItem
*/ export const renderListItem_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
state.root.children
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/renderListItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ListItemState, ListItemSlots } from './ListItem.types';\n\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState): JSXElement => {\n assertSlots<ListItemSlots>(state);\n\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderListItem_unstable","state","root","checkmark","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,191 @@
'use client';
import * as React from 'react';
import { GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys, useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from '@fluentui/react-tabster';
import { elementContains, getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
import { useListSynchronousContext, useListContext_unstable } from '../List/listContext';
import { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
import { Checkbox } from '@fluentui/react-checkbox';
import { createListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
const DEFAULT_ROOT_EL_TYPE = 'li';
/**
* Create the state required to render ListItem.
*
* The returned state can be modified with hooks such as useListItemStyles_unstable,
* before being passed to renderListItem_unstable.
*
* @param props - props from this instance of ListItem
* @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem
*/ export const useListItem_unstable = (props, ref)=>{
const id = useId('listItem');
const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;
const toggleItem = useListContext_unstable((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
});
const { navigationMode, listItemRole } = useListSynchronousContext();
const isSelectionModeEnabled = useListContext_unstable((ctx)=>!!ctx.selection);
var _useListContext_unstable;
const isSelected = (_useListContext_unstable = useListContext_unstable((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
})) !== null && _useListContext_unstable !== void 0 ? _useListContext_unstable : false;
const validateListItem = useListContext_unstable((ctx)=>ctx.validateListItem);
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
const finalListItemRole = role || listItemRole;
const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);
const rootRef = React.useRef(null);
const checkmarkRef = React.useRef(null);
const handleAction = useEventCallback((event)=>{
onAction === null || onAction === void 0 ? void 0 : onAction(event, {
event,
value,
type: ListItemActionEventName
});
if (event.defaultPrevented) {
return;
}
if (isSelectionModeEnabled && !disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(event.detail.originalEvent, value);
}
});
React.useEffect(()=>{
if (rootRef.current) {
validateListItem(rootRef.current);
}
}, [
validateListItem
]);
const triggerAction = (e)=>{
const actionEvent = createListItemActionEvent(e);
handleAction(actionEvent);
e.target.dispatchEvent(actionEvent);
};
const focusableGroupAttrs = useFocusableGroup({
ignoreDefaultKeydown: {
Enter: true
},
tabBehavior: 'limited-trap-focus'
});
const handleClick = useEventCallback((e)=>{
onClick === null || onClick === void 0 ? void 0 : onClick(e);
if (e.defaultPrevented) {
return;
}
const isFromCheckbox = elementContains(checkmarkRef.current, e.target);
if (isFromCheckbox) {
return;
}
triggerAction(e);
});
const handleKeyDown = useEventCallback((e)=>{
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
if (e.defaultPrevented) {
return;
}
// If the event is fired from an element inside the list item
if (e.target !== e.currentTarget) {
if (focusableItems) {
// If the items are focusable, we need to handle the arrow keys to move focus to them
switch(e.key){
// If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself
// The ArrowLeft will only trigger if the target element is the leftmost, otherwise the
// arrowNavigationAttributes handles it and prevents it from bubbling here.
case ArrowLeft:
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Escape
}));
break;
case ArrowDown:
case ArrowUp:
e.preventDefault();
// Press ESC on the original target to get focus to the parent group (List)
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Escape
}));
// Now dispatch the original key to move up or down in the list
e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({
key: MoverKeys[e.key]
}));
}
return;
}
return;
}
switch(e.key){
case Space:
// we have to prevent default here otherwise the space key will scroll the page
e.preventDefault();
// Space always toggles selection (if enabled)
if (isSelectionModeEnabled) {
if (!disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
}
} else {
triggerAction(e);
}
break;
case Enter:
triggerAction(e);
break;
case ArrowRight:
if (navigationMode === 'composite') {
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Enter
}));
}
break;
}
});
const onCheckboxChange = useEventCallback((e, data)=>{
if (!isSelectionModeEnabled || e.defaultPrevented) {
return;
}
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
});
const arrowNavigationAttributes = useArrowNavigationGroup({
axis: 'horizontal'
});
const tabsterAttributes = useMergedTabsterAttributes_unstable(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
const root = slot.always(getIntrinsicElementProps(as, {
ref: useMergedRefs(rootRef, ref),
tabIndex: focusableItems ? 0 : undefined,
role: finalListItemRole,
id: String(value),
...isSelectionModeEnabled && {
'aria-selected': isSelected,
'aria-disabled': disabledSelection && !onAction || undefined
},
...props,
...tabsterAttributes,
onKeyDown: handleKeyDown,
onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined
}), {
elementType: as
});
const checkmark = slot.optional(props.checkmark, {
defaultProps: {
checked: isSelected,
tabIndex: -1,
disabled: disabledSelection
},
renderByDefault: isSelectionModeEnabled,
elementType: Checkbox
});
const mergedCheckmarkRef = useMergedRefs(checkmark === null || checkmark === void 0 ? void 0 : checkmark.ref, checkmarkRef);
if (checkmark) {
checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);
checkmark.ref = mergedCheckmarkRef;
}
const state = {
components: {
root: as,
checkmark: Checkbox
},
root,
checkmark,
disabled: disabledSelection && !onAction,
selectable: isSelectionModeEnabled,
navigable: focusableItems
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,53 @@
'use client';
import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = /*#__PURE__*/__resetStyles("rikgcmv", null, [".rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;}", ".rikgcmv[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"]);
const useCheckmarkBaseStyles = /*#__PURE__*/__styles({
root: {
qb2dma: "f7nlbp4",
Bpb5tq4: 0,
Biccaaf: 0,
Gaeyjg: 0,
ldoezw: 0,
B6gmeee: "f1bgo3o3"
}
}, {
d: [".f7nlbp4{align-self:center;}", [".f1bgo3o3 .fui-Checkbox__indicator{margin:4px;}", {
p: -1
}]]
});
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
rootClickableOrSelectable: {
mc9l5x: "f22iagw",
Bceei9c: "f1k6fduh"
},
disabled: {
Bceei9c: "f158kwzp"
}
}, {
d: [".f22iagw{display:flex;}", ".f1k6fduh{cursor:pointer;}", ".f158kwzp{cursor:default;}"]
});
/**
* Apply styling to the ListItem slots based on the state
*/
export const useListItemStyles_unstable = state => {
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,gBAAGP,aAAA,mOAWzB,CAAC;AACF,MAAMQ,sBAAsB,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAO9B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGlB,QAAA;EAAAmB,yBAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;EAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;IACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,52 @@
'use client';
import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = makeResetStyles({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none',
...createCustomFocusIndicatorStyle({
outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
borderRadius: tokens.borderRadiusMedium
}, {
selector: 'focus'
})
});
const useCheckmarkBaseStyles = makeStyles({
root: {
alignSelf: 'center',
'& .fui-Checkbox__indicator': {
margin: '4px'
}
}
});
/**
* Styles for the root slot
*/ const useStyles = makeStyles({
rootClickableOrSelectable: {
display: 'flex',
cursor: 'pointer'
},
disabled: {
cursor: 'default'
}
});
/**
* Apply styling to the ListItem slots based on the state
*/ export const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,mBAAmBC,IAAI,EACvBsB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,GAAG7B,aAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,9 @@
import * as React from 'react';
export const ListItemActionEventName = 'ListItemAction';
export const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
cancelable: true,
bubbles: true,
detail: {
originalEvent
}
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n cancelable: true,\n bubbles: true,\n detail: { originalEvent },\n });\n"],"names":["React","ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA0B,iBAAiB;AAQxD,OAAO,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}

1
node_modules/@fluentui/react-list/lib/hooks/index.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { useListSelection } from './useListSelection';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB"}

1
node_modules/@fluentui/react-list/lib/hooks/types.js generated vendored Normal file
View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,42 @@
'use client';
import { useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';
import * as React from 'react';
export function useListSelection(options = {
selectionMode: 'multiselect'
}) {
const { selectionMode, defaultSelectedItems, onSelectionChange } = options;
const [selectedItems, setSelectedItems] = useControllableState({
state: options.selectedItems,
defaultState: defaultSelectedItems,
initialState: []
});
const [selected, selectionMethods] = useSelection({
selectionMode,
defaultSelectedItems,
selectedItems,
onSelectionChange: (e, data)=>{
setSelectedItems(data.selectedItems);
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, data);
}
});
const toggleItem = useEventCallback((e, itemId)=>selectionMethods.toggleItem(e, itemId));
const toggleAllItems = useEventCallback((e, itemIds)=>{
selectionMethods.toggleAllItems(e, itemIds);
});
const deselectItem = useEventCallback((e, itemId)=>selectionMethods.deselectItem(e, itemId));
const selectItem = useEventCallback((e, itemId)=>selectionMethods.selectItem(e, itemId));
const clearSelection = useEventCallback((e)=>selectionMethods.clearItems(e));
const selectedArray = React.useMemo(()=>Array.from(selected), [
selected
]);
return {
selectedItems: selectedArray,
toggleItem,
toggleAllItems,
deselectItem,
selectItem,
setSelectedItems,
isSelected: (id)=>selectionMethods.isSelected(id),
clearSelection
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n const [selectedItems, setSelectedItems] = useControllableState({\n state: options.selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange: (e, data) => {\n setSelectedItems(data.selectedItems);\n onSelectionChange?.(e, data);\n },\n });\n\n const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n selectionMethods.toggleItem(e, itemId),\n );\n\n const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n selectionMethods.toggleAllItems(e, itemIds);\n });\n\n const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.deselectItem(e, itemId),\n );\n\n const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.selectItem(e, itemId),\n );\n\n const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n return {\n selectedItems: selectedArray,\n toggleItem,\n toggleAllItems,\n deselectItem,\n selectItem,\n setSelectedItems,\n isSelected: (id: string | number) => selectionMethods.isSelected(id),\n clearSelection,\n };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;AAEA,SAA8BA,oBAAoB,EAAEC,gBAAgB,EAAEC,YAAY,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAG/B,OAAO,SAASC,iBAAiBC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,qBAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,GAAGb,aAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,8BAAAA,wCAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,aAA+CjB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,iBAAuDnB,iBAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,eAAmDrB,iBAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,aAA+CtB,iBAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,iBAAuDvB,iBAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,MAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}

2
node_modules/@fluentui/react-list/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,2 @@
export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';
export { ListItem, listItemClassNames, renderListItem_unstable, useListItemStyles_unstable, useListItem_unstable } from './ListItem';

1
node_modules/@fluentui/react-list/lib/index.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\n\nexport type { ListProps, ListSlots, ListState } from './List';\nexport {\n ListItem,\n listItemClassNames,\n renderListItem_unstable,\n useListItemStyles_unstable,\n useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":"AAAA,SAASA,IAAI,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,EAAEC,gBAAgB,QAAQ,SAAS;AAG7G,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa"}

View File

@@ -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';
}
};

View File

@@ -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"}

View File

@@ -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';
}
};

View File

@@ -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"}

5
node_modules/@fluentui/react-list/lib/utils/index.js generated vendored Normal file
View File

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

View File

@@ -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"}

View File

@@ -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`);
}
};

View File

@@ -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"}

View File

@@ -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.');
}
}

View File

@@ -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"}

View File

@@ -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.
`);
}
};

View File

@@ -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"}