Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Listbox", {
enumerable: true,
get: function() {
return Listbox;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useListbox = require("./useListbox");
const _renderListbox = require("./renderListbox");
const _useListboxStylesstyles = require("./useListboxStyles.styles");
const _useListboxContextValues = require("../../contexts/useListboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Listbox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useListbox.useListbox_unstable)(props, ref);
const contextValues = (0, _useListboxContextValues.useListboxContextValues)(state);
(0, _useListboxStylesstyles.useListboxStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListboxStyles_unstable')(state);
return (0, _renderListbox.renderListbox_unstable)(state, contextValues);
});
Listbox.displayName = 'Listbox';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n const state = useListbox_unstable(props, ref);\n const contextValues = useListboxContextValues(state);\n\n useListboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["Listbox","React","forwardRef","props","ref","state","useListbox_unstable","contextValues","useListboxContextValues","useListboxStyles_unstable","useCustomStyleHook_unstable","renderListbox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACa;+BACG;wCACG;yCAEF;qCAEI;AAKrC,MAAMA,UAAAA,WAAAA,GAA6CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQC,IAAAA,+BAAAA,EAAoBH,OAAOC;IACzC,MAAMG,gBAAgBC,IAAAA,gDAAAA,EAAwBH;IAE9CI,IAAAA,iDAAAA,EAA0BJ;IAE1BK,IAAAA,gDAAAA,EAA4B,6BAA6BL;IAEzD,OAAOM,IAAAA,qCAAAA,EAAuBN,OAAOE;AACvC;AAEAP,QAAQY,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n ActiveDescendantChangeEvent,\n ActiveDescendantContextValue,\n ActiveDescendantImperativeRef,\n} from '@fluentui/react-aria';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n /** The root slot, a `<div>` with `role=\"listbox\"` */\n root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> &\n SelectionProps & {\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n };\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n OptionCollectionState &\n Pick<SelectionProps, 'multiselect'> &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.active()\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * @see activeDescendantController.focus(id)\n */\n setActiveOption(option?: OptionValue): void;\n\n // Whether the Listbox renders within a Combobox, Dropdown, or picker, or as a standalone widget\n standalone: boolean;\n\n selectOption(event: SelectionEvents, option: OptionValue): void;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n\n onActiveDescendantChange?: (event: ActiveDescendantChangeEvent) => void;\n };\n\nexport type ListboxContextValues = {\n listbox: ListboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
@@ -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, {
Listbox: function() {
return _Listbox.Listbox;
},
listboxClassNames: function() {
return _useListboxStylesstyles.listboxClassNames;
},
renderListbox_unstable: function() {
return _renderListbox.renderListbox_unstable;
},
useListboxStyles_unstable: function() {
return _useListboxStylesstyles.useListboxStyles_unstable;
},
useListbox_unstable: function() {
return _useListbox.useListbox_unstable;
}
});
const _Listbox = require("./Listbox");
const _renderListbox = require("./renderListbox");
const _useListbox = require("./useListbox");
const _useListboxStylesstyles = require("./useListboxStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,OAAO;eAAPA,gBAAO;;IAIPC,iBAAiB;eAAjBA,yCAAiB;;IAFjBC,sBAAsB;eAAtBA,qCAAsB;;IAEHC,yBAAyB;eAAzBA,iDAAyB;;IAD5CC,mBAAmB;eAAnBA,+BAAmB;;;yBAHJ;+BAEe;4BACH;wCACyB"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderListbox_unstable", {
enumerable: true,
get: function() {
return renderListbox_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderListbox_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {})
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n assertSlots<ListboxSlots>(state);\n\n return (\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxContext.Provider value={contextValues.listbox}>\n <state.root />\n </ListboxContext.Provider>\n </ActiveDescendantContextProvider>\n );\n};\n"],"names":["renderListbox_unstable","state","contextValues","assertSlots","_jsx","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","root"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;4BAVb;gCAE4B;2BACoB;gCAEjB;AAKxB,MAAMA,yBAAyB,CAACC,OAAqBC;IAC1DC,IAAAA,2BAAAA,EAA0BF;IAE1B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACC,0CAAAA,EAAAA;QAAgCC,OAAOJ,cAAcK,gBAAgB;kBACpE,WAAA,GAAAH,IAAAA,eAAA,EAACI,8BAAAA,CAAeC,QAAQ,EAAA;YAACH,OAAOJ,cAAcQ,OAAO;sBACnD,WAAA,GAAAN,IAAAA,eAAA,EAACH,MAAMU,IAAI,EAAA,CAAA;;;AAInB"}
@@ -0,0 +1,198 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListbox_unstable", {
enumerable: true,
get: function() {
return useListbox_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 _reactcontextselector = require("@fluentui/react-context-selector");
const _reactaria = require("@fluentui/react-aria");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
const _useOptionCollection = require("../../utils/useOptionCollection");
const _useSelection = require("../../utils/useSelection");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const _ListboxContext = require("../../contexts/ListboxContext");
const _reacttabster = require("@fluentui/react-tabster");
// eslint-disable-next-line @typescript-eslint/naming-convention
const UNSAFE_noLongerUsed = {
activeOption: undefined,
focusVisible: false,
setActiveOption: ()=>null
};
const useListbox_unstable = (props, ref)=>{
'use no memo';
const { multiselect, disableAutoFocus = false } = props;
const optionCollection = (0, _useOptionCollection.useOptionCollection)();
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
const onActiveDescendantChange = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onActiveDescendantChange);
const contextGetOptionById = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionById);
const contextGetOptionsMatchingValue = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.getOptionsMatchingValue);
const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;
const getOptionsMatchingValue = hasListboxContext ? contextGetOptionsMatchingValue : optionCollection.getOptionsMatchingValue;
const listenerRef = _react.useMemo(()=>{
let element = null;
const listener = (untypedEvent)=>{
// Typescript doesn't support custom event types on handler
const event = untypedEvent;
onActiveDescendantChange === null || onActiveDescendantChange === void 0 ? void 0 : onActiveDescendantChange(event);
};
return (el)=>{
if (!el) {
element === null || element === void 0 ? void 0 : element.removeEventListener('activedescendantchange', listener);
return;
}
element = el;
element.addEventListener('activedescendantchange', listener);
};
}, [
onActiveDescendantChange
]);
const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = _react.useState(false);
(0, _reacttabster.useOnKeyboardNavigationChange)(setIsNavigatingWithKeyboard);
const activeDescendantContext = (0, _reactaria.useActiveDescendantContext)();
const hasParentActiveDescendantContext = (0, _reactaria.useHasParentActiveDescendantContext)();
const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;
const { clearSelection, selectedOptions, selectOption } = (0, _useSelection.useSelection)(props);
const onKeyDown = (event)=>{
const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
open: true
});
const activeOptionId = activeDescendantController.active();
const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
switch(action){
case 'First':
case 'Last':
case 'Next':
case 'Previous':
case 'PageDown':
case 'PageUp':
case 'CloseSelect':
case 'Select':
event.preventDefault();
break;
}
switch(action){
case 'Next':
if (activeOption) {
activeDescendantController.next();
} else {
activeDescendantController.first();
}
break;
case 'Previous':
if (activeOption) {
activeDescendantController.prev();
} else {
activeDescendantController.first();
}
break;
case 'PageUp':
case 'First':
activeDescendantController.first();
break;
case 'PageDown':
case 'Last':
activeDescendantController.last();
break;
case 'Select':
case 'CloseSelect':
activeOption && selectOption(event, activeOption);
break;
}
};
// get state from parent combobox, if it exists
const contextSelectedOptions = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectedOptions);
const contextSelectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
// without a parent combobox context, provide values directly from Listbox
const optionContextValues = hasListboxContext ? {
selectedOptions: contextSelectedOptions,
selectOption: contextSelectOption,
...UNSAFE_noLongerUsed
} : {
selectedOptions,
selectOption,
...UNSAFE_noLongerUsed
};
_react.useEffect(()=>{
// if the listbox has a parent context, that parent context should handle the activedescendant
if (hasParentActiveDescendantContext) {
return;
}
// disable focus-visible attributes until focus is received
activeDescendantController.hideFocusVisibleAttributes();
if (!disableAutoFocus) {
// if it is single-select and there is a selected option, start at the selected option
if (!multiselect && optionContextValues.selectedOptions.length > 0) {
const selectedOption = getOptionsMatchingValue((v)=>v === optionContextValues.selectedOptions[0]).pop();
if (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.id) {
activeDescendantController.focus(selectedOption.id);
}
} else {
activeDescendantController.first();
}
}
return ()=>{
activeDescendantController.blur();
};
// this should only be run once in the lifecycle of the Listbox
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onFocus = _react.useCallback(()=>{
if (hasParentActiveDescendantContext) {
return;
}
activeDescendantController.showFocusVisibleAttributes();
if (isNavigatingWithKeyboard) {
activeDescendantController.scrollActiveIntoView();
}
}, [
activeDescendantController,
hasParentActiveDescendantContext,
isNavigatingWithKeyboard
]);
const onBlur = _react.useCallback(()=>{
if (hasParentActiveDescendantContext) {
return;
}
activeDescendantController.hideFocusVisibleAttributes();
}, [
activeDescendantController,
hasParentActiveDescendantContext
]);
const state = {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
// FIXME:
// `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
// but since it would be a breaking change to fix it, we are casting ref to it's proper type
ref: (0, _reactutilities.useMergedRefs)(ref, activeParentRef, activeDescendantListboxRef, listenerRef),
role: multiselect ? 'menu' : 'listbox',
tabIndex: 0,
...props
}), {
elementType: 'div'
}),
standalone: !hasListboxContext,
multiselect,
clearSelection,
activeDescendantController,
onActiveDescendantChange,
...optionCollection,
...optionContextValues
};
state.root.onKeyDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onKeyDown, onKeyDown));
state.root.onFocus = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onFocus, onFocus));
state.root.onBlur = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(state.root.onBlur, onBlur));
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,72 @@
"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, {
listboxClassNames: function() {
return listboxClassNames;
},
useListboxStyles_unstable: function() {
return useListboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const listboxClassNames = {
root: 'fui-Listbox'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
De3pzq: "fxugw4r",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Bf4jedk: "f3hsy1e",
Bmxbyg5: "f5zp4f",
Bw0xxkn: 0,
oeaueh: 0,
Bpd4iqm: 0,
Befb4lg: "f1iepc6i",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1t35pdg",
Belr9w4: "fiut8dr"
}
}, {
d: [
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".f1ewtqcl{box-sizing:border-box;}",
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".f3hsy1e{min-width:160px;}",
".f5zp4f{overflow-y:auto;}",
[
".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}",
{
p: -1
}
],
[
".f1t35pdg{padding:var(--spacingHorizontalXS);}",
{
p: -1
}
],
".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"
]
});
const useListboxStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listboxClassNames.root, styles.root, state.root.className);
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n outline: `1px solid ${tokens.colorTransparentStroke}`,\n padding: tokens.spacingHorizontalXS,\n rowGap: tokens.spacingHorizontalXXS\n }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n return state;\n};\n"],"names":["listboxClassNames","useListboxStyles_unstable","root","useStyles","__styles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IAoBIC,yBAAyB;eAAzBA;;;uBArBwB;AAClC,MAAMD,oBAAoB;IAC7BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAeX,MAAMrB,4BAA6BsB,CAAAA;IAC1C;IACA,MAAMC,SAASrB;IACfoB,MAAMrB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,kBAAkBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACuB,SAAS;IAC7F,OAAOF;AACX"}