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

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "List", {
enumerable: true,
get: function() {
return List;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useList = require("./useList");
const _renderList = require("./renderList");
const _useListStylesstyles = require("./useListStyles.styles");
const _useListContextValues = require("./useListContextValues");
const List = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useList.useList_unstable)(props, ref);
const contextValues = (0, _useListContextValues.useListContextValues_unstable)(state);
(0, _useListStylesstyles.useListStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListStyles_unstable')(state);
return (0, _renderList.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;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;yBAC7C,YAAY;4BACT,eAAe;qCACZ,yBAAyB;sCAElB,yBAAyB;AAEhE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQR,yBAAAA,EAAiBM,OAAOC;IACtC,MAAME,oBAAgBN,mDAAAA,EAA8BK;QAEpDN,2CAAAA,EAAuBM;QACvBT,gDAAAA,EAA4B,0BAA0BS;IAEtD,WAAOP,+BAAAA,EAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("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":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
List: function() {
return _List.List;
},
listClassNames: function() {
return _useListStylesstyles.listClassNames;
},
renderList_unstable: function() {
return _renderList.renderList_unstable;
},
useListStyles_unstable: function() {
return _useListStylesstyles.useListStyles_unstable;
},
useList_unstable: function() {
return _useList.useList_unstable;
}
});
const _List = require("./List");
const _renderList = require("./renderList");
const _useList = require("./useList");
const _useListStylesstyles = require("./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":";;;;;;;;;;;;eAASA,UAAI;;;eAYJG,mCAAc;;;eAFdF,+BAAmB;;;eAEHG,2CAAsB;;;eADtCF,yBAAgB;;;sBAXJ,SAAS;4BAUM,eAAe;yBAClB,YAAY;qCACU,yBAAyB"}

View File

@@ -0,0 +1,51 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ListContextProvider: function() {
return ListContextProvider;
},
ListSynchronousContextProvider: function() {
return ListSynchronousContextProvider;
},
listContextDefaultValue: function() {
return listContextDefaultValue;
},
useListContext_unstable: function() {
return useListContext_unstable;
},
useListSynchronousContext: function() {
return useListSynchronousContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactcontextselector = require("@fluentui/react-context-selector");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const listContextDefaultValue = {
selection: undefined,
validateListItem: ()=>{
/* noop */ }
};
const listContext = (0, _reactcontextselector.createContext)(undefined);
const ListContextProvider = listContext.Provider;
const useListContext_unstable = (selector)=>(0, _reactcontextselector.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 = /*#__PURE__*/ _react.createContext(undefined);
const ListSynchronousContextProvider = ListSynchronousContext.Provider;
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;;;;;;;;;;;;uBAgBaQ;eAAAA;;kCAaAM;;;2BAtBAX;;;2BAWAO;;;IAYAK,yBAAAA;;;;;sCA5BqC,mCAAmC;iEAG9D,QAAQ;AAExB,MAAMZ,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,kBAAcP,mCAAAA,EAA4CK;AAEzD,4BAA4BE,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,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,uCAAyBX,OAAMF,aAAa,CAA0CK;AAErF,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AACvE,kCAAkC,IACvCP,OAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderList_unstable", {
enumerable: true,
get: function() {
return renderList_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _listContext = require("./listContext");
const renderList_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_listContext.ListContextProvider, {
value: contextValues.listContext,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_listContext.ListSynchronousContextProvider, {
value: contextValues.synchronousContext,
children: /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAWaG;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;6BAGY,gBAAgB;AAK7E,4BAA4B,CAACC,OAAkBC;QACpDL,2BAAAA,EAAuBI;IAEvB,OAAA,WAAA,OACE,eAAA,EAACH,gCAAAA,EAAAA;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACL,2CAAAA,EAAAA;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

View File

@@ -0,0 +1,79 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useList_unstable", {
enumerable: true,
get: function() {
return useList_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _reacttabster = require("@fluentui/react-tabster");
const _useListSelection = require("../../hooks/useListSelection");
const _utils = require("../../utils");
const DEFAULT_ROOT_EL_TYPE = 'ul';
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 = (0, _reacttabster.useArrowNavigationGroup)({
axis: 'vertical',
memorizeCurrent: true
});
const [selectionState, setSelectionState] = (0, _reactutilities.useControllableState)({
state: selectedItems,
defaultState: defaultSelectedItems,
initialState: []
});
const onChange = (0, _reactutilities.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 = (0, _useListSelection.useListSelection)({
onSelectionChange: onChange,
selectionMode: selectionMode || 'multiselect',
selectedItems: selectionState
});
const listRole = props.role || (0, _utils.calculateListRole)(navigationMode, !!selectionMode);
const listItemRole = (0, _utils.calculateListItemRoleForListRole)(listRole);
const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
const validateListItem = (0, _reactutilities.useEventCallback)((listItemEl)=>{
if (process.env.NODE_ENV === 'production') {
return;
}
const itemRole = listItemEl.getAttribute('role') || '';
const focusable = findAllFocusable(listItemEl);
(0, _utils.validateProperElementTypes)(as, listItemEl.tagName.toLocaleLowerCase());
(0, _utils.validateProperRolesAreUsed)(listRole, itemRole, !!selectionMode, focusable.length > 0);
(0, _utils.validateGridCellsArePresent)(listRole, listItemEl);
});
return {
components: {
root: as
},
root: _reactutilities.slot.always((0, _reactutilities.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,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListContextValues_unstable", {
enumerable: true,
get: function() {
return useListContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,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,OAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;SACF,CAAA,EACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listClassNames: function() {
return listClassNames;
},
useListStyles_unstable: function() {
return useListStyles_unstable;
}
});
const _react = require("@griffel/react");
const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1m6yby2", null, [
".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"
]);
const useListStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;kBAEe;;;0BAWY;;;;uBAZO,gBAAgB;AACvD,MAAME,iBAAiB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AAGS,MAAMK,0BAA0BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;IACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC1F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listClassNames: function() {
return listClassNames;
},
useListStyles_unstable: function() {
return useListStyles_unstable;
}
});
const _react = require("@griffel/react");
const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none'
});
const useListStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = (0, _react.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;;;;;;;;;;;;kBAMaE;;;0BAcAO;;;;uBAjBiC,iBAAiB;AAGxD,MAAMP,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAKO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ListItem", {
enumerable: true,
get: function() {
return ListItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useListItem = require("./useListItem");
const _renderListItem = require("./renderListItem");
const _useListItemStylesstyles = require("./useListItemStyles.styles");
const ListItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useListItem.useListItem_unstable)(props, ref);
(0, _useListItemStylesstyles.useListItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListItemStyles_unstable')(state);
return (0, _renderListItem.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;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;6BACzC,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;AAGjE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,YAAQP,iCAAAA,EAAqBK,OAAOC;QAE1CJ,mDAAAA,EAA2BK;QAC3BR,gDAAAA,EAA4B,8BAA8BQ;IAC1D,WAAON,uCAAAA,EAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ListItem
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

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,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ListItem: function() {
return _ListItem.ListItem;
},
listItemClassNames: function() {
return _useListItemStylesstyles.listItemClassNames;
},
renderListItem_unstable: function() {
return _renderListItem.renderListItem_unstable;
},
useListItemStyles_unstable: function() {
return _useListItemStylesstyles.useListItemStyles_unstable;
},
useListItem_unstable: function() {
return _useListItem.useListItem_unstable;
}
});
const _ListItem = require("./ListItem");
const _renderListItem = require("./renderListItem");
const _useListItem = require("./useListItem");
const _useListItemStylesstyles = require("./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":";;;;;;;;;;;;eAASA,kBAAQ;;;eAURG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BATJ,aAAa;gCAQE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

View File

@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderListItem_unstable", {
enumerable: true,
get: function() {
return renderListItem_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderListItem_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.checkmark && /*#__PURE__*/ (0, _jsxruntime.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":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,194 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListItem_unstable", {
enumerable: true,
get: function() {
return useListItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _listContext = require("../List/listContext");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reactcheckbox = require("@fluentui/react-checkbox");
const _ListItemActionEvent = require("../../events/ListItemActionEvent");
const DEFAULT_ROOT_EL_TYPE = 'li';
const useListItem_unstable = (props, ref)=>{
const id = (0, _reactutilities.useId)('listItem');
const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;
const toggleItem = (0, _listContext.useListContext_unstable)((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
});
const { navigationMode, listItemRole } = (0, _listContext.useListSynchronousContext)();
const isSelectionModeEnabled = (0, _listContext.useListContext_unstable)((ctx)=>!!ctx.selection);
var _useListContext_unstable;
const isSelected = (_useListContext_unstable = (0, _listContext.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 = (0, _listContext.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 = (0, _reactutilities.useEventCallback)((event)=>{
onAction === null || onAction === void 0 ? void 0 : onAction(event, {
event,
value,
type: _ListItemActionEvent.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 = (0, _ListItemActionEvent.createListItemActionEvent)(e);
handleAction(actionEvent);
e.target.dispatchEvent(actionEvent);
};
const focusableGroupAttrs = (0, _reacttabster.useFocusableGroup)({
ignoreDefaultKeydown: {
Enter: true
},
tabBehavior: 'limited-trap-focus'
});
const handleClick = (0, _reactutilities.useEventCallback)((e)=>{
onClick === null || onClick === void 0 ? void 0 : onClick(e);
if (e.defaultPrevented) {
return;
}
const isFromCheckbox = (0, _reactutilities.elementContains)(checkmarkRef.current, e.target);
if (isFromCheckbox) {
return;
}
triggerAction(e);
});
const handleKeyDown = (0, _reactutilities.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 _keyboardkeys.ArrowLeft:
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Escape
}));
break;
case _keyboardkeys.ArrowDown:
case _keyboardkeys.ArrowUp:
e.preventDefault();
// Press ESC on the original target to get focus to the parent group (List)
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Escape
}));
// Now dispatch the original key to move up or down in the list
e.currentTarget.dispatchEvent(new _reacttabster.MoverMoveFocusEvent({
key: _reacttabster.MoverKeys[e.key]
}));
}
return;
}
return;
}
switch(e.key){
case _keyboardkeys.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 _keyboardkeys.Enter:
triggerAction(e);
break;
case _keyboardkeys.ArrowRight:
if (navigationMode === 'composite') {
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Enter
}));
}
break;
}
});
const onCheckboxChange = (0, _reactutilities.useEventCallback)((e, data)=>{
if (!isSelectionModeEnabled || e.defaultPrevented) {
return;
}
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
});
const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
axis: 'horizontal'
});
const tabsterAttributes = (0, _reacttabster.useMergedTabsterAttributes_unstable)(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
ref: (0, _reactutilities.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 = _reactutilities.slot.optional(props.checkmark, {
defaultProps: {
checked: isSelected,
tabIndex: -1,
disabled: disabledSelection
},
renderByDefault: isSelectionModeEnabled,
elementType: _reactcheckbox.Checkbox
});
const mergedCheckmarkRef = (0, _reactutilities.useMergedRefs)(checkmark === null || checkmark === void 0 ? void 0 : checkmark.ref, checkmarkRef);
if (checkmark) {
checkmark.onChange = (0, _reactutilities.mergeCallbacks)(checkmark.onChange, onCheckboxChange);
checkmark.ref = mergedCheckmarkRef;
}
const state = {
components: {
root: as,
checkmark: _reactcheckbox.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,76 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listItemClassNames: function() {
return listItemClassNames;
},
useListItemStyles_unstable: function() {
return useListItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__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__*/ (0, _react.__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__*/ (0, _react.__styles)({
rootClickableOrSelectable: {
mc9l5x: "f22iagw",
Bceei9c: "f1k6fduh"
},
disabled: {
Bceei9c: "f158kwzp"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1k6fduh{cursor:pointer;}",
".f158kwzp{cursor:default;}"
]
});
const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAqCY;eAA1BkB;;;uBAxCyC,gBAAgB;AAGnE,2BAA2B;IAC9BjB,IAAI,EAAE,cAAc;IACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF,MAAMQ,sBAAsB,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAO9B,CAAC;AACF;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,yBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,oCAAoCQ,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;IACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAAA,AAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;IAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;QACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;IAC/H;IACA,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,68 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
listItemClassNames: function() {
return listItemClassNames;
},
useListItemStyles_unstable: function() {
return useListItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none',
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium
}, {
selector: 'focus'
})
});
const useCheckmarkBaseStyles = (0, _react.makeStyles)({
root: {
alignSelf: 'center',
'& .fui-Checkbox__indicator': {
margin: '4px'
}
}
});
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
rootClickableOrSelectable: {
display: 'flex',
cursor: 'pointer'
},
disabled: {
cursor: 'default'
}
});
const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = (0, _react.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;;;;;;;;;;;;IAQaK,kBAAAA;;;IA2CAqB,0BAAAA;;;;uBAhD6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DpB,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGT,6CAAAA,EACD;QACEU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,6BAAyBnB,iBAAAA,EAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,gBAAYrB,iBAAAA,EAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACG;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBsB,gBACCD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAAA,AAAQ,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,OAAG7B,mBAAAA,EAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}