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, "Combobox", {
enumerable: true,
get: function() {
return Combobox;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useCombobox = require("./useCombobox");
const _renderCombobox = require("./renderCombobox");
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Combobox = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useCombobox.useCombobox_unstable)(props, ref);
const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
(0, _useComboboxStylesstyles.useComboboxStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useComboboxStyles_unstable')(state);
return (0, _renderCombobox.renderCombobox_unstable)(state, contextValues);
});
Combobox.displayName = 'Combobox';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","React","forwardRef","props","ref","state","useCombobox_unstable","contextValues","useComboboxContextValues","useComboboxStyles_unstable","useCustomStyleHook_unstable","renderCombobox_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}
@@ -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"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n /** The root combobox slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearIcon?: Slot<'span'>;\n\n /** The primary slot, an input with role=\"combobox\" */\n input: NonNullable<Slot<'input'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n ComboboxBaseProps & {\n freeform?: boolean;\n /**\n * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n */\n children?: React.ReactNode;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n ComboboxBaseState & {\n showClearIcon?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -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, {
Combobox: function() {
return _Combobox.Combobox;
},
comboboxClassNames: function() {
return _useComboboxStylesstyles.comboboxClassNames;
},
renderCombobox_unstable: function() {
return _renderCombobox.renderCombobox_unstable;
},
useComboboxStyles_unstable: function() {
return _useComboboxStylesstyles.useComboboxStyles_unstable;
},
useCombobox_unstable: function() {
return _useCombobox.useCombobox_unstable;
}
});
const _Combobox = require("./Combobox");
const _renderCombobox = require("./renderCombobox");
const _useCombobox = require("./useCombobox");
const _useComboboxStylesstyles = require("./useComboboxStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n ActiveOptionChangeData,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAYRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAXJ;gCAUe;6BACH;yCAC0B"}
@@ -0,0 +1,39 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderCombobox_unstable", {
enumerable: true,
get: function() {
return renderCombobox_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactportal = require("@fluentui/react-portal");
const _reactaria = require("@fluentui/react-aria");
const _reactutilities = require("@fluentui/react-utilities");
const _ComboboxContext = require("../../contexts/ComboboxContext");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderCombobox_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxProvider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
value: contextValues.combobox,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
state.clearIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearIcon, {}),
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {}),
state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
}))
]
})
})
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues) => {\n assertSlots<ComboboxSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxProvider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.input />\n {state.clearIcon && <state.clearIcon />}\n {state.expandIcon && <state.expandIcon />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxProvider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["renderCombobox_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxProvider","listbox","_jsxs","ComboboxContext","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;4BAZb;6BACuB;2BACyB;gCAEpB;iCACI;gCAEA;AAKzB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,+BAAAA,EAAAA;gBAAgBF,OAAOL,cAAcQ,OAAO;0BAE3C,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBC,QAAQ,EAAA;oBAACN,OAAOL,cAAcY,QAAQ;;sCACrDV,IAAAA,eAAA,EAACH,MAAMc,KAAK,EAAA,CAAA;wBACXd,MAAMe,SAAS,IAAA,WAAA,GAAIZ,IAAAA,eAAA,EAACH,MAAMe,SAAS,EAAA,CAAA;wBACnCf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;wBACrChB,MAAMS,OAAO,IACXT,CAAAA,MAAMiB,WAAW,GAAA,WAAA,GAChBd,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdN,IAAAA,eAAA,EAACe,mBAAAA,EAAAA;4BAAOC,WAAWnB,MAAMmB,SAAS;sCAChC,WAAA,GAAAhB,IAAAA,eAAA,EAACH,MAAMS,OAAO,EAAA,CAAA;;;;;;;AAShC"}
@@ -0,0 +1,186 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useCombobox_unstable", {
enumerable: true,
get: function() {
return useCombobox_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactaria = require("@fluentui/react-aria");
const _reactfield = require("@fluentui/react-field");
const _reacticons = require("@fluentui/react-icons");
const _reactutilities = require("@fluentui/react-utilities");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
const _Listbox = require("../Listbox/Listbox");
const _useListboxSlot = require("../../utils/useListboxSlot");
const _useInputTriggerSlot = require("./useInputTriggerSlot");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const useCombobox_unstable = (props, ref)=>{
'use no memo';
var _state_clearIcon, _state_clearIcon1;
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsRequired: true,
supportsSize: true
});
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const baseState = (0, _useComboboxBaseState.useComboboxBaseState)({
...props,
editable: true,
activeDescendantController
});
const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
const { disableAutoFocus = false, freeform, inlinePopup } = props;
const comboId = (0, _reactutilities.useId)('combobox-');
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'children',
'size'
]
});
const triggerRef = _react.useRef(null);
const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
state: baseState,
triggerRef,
defaultProps: {
children: props.children,
disableAutoFocus
}
});
var _props_input;
const triggerSlot = (0, _useInputTriggerSlot.useInputTriggerSlot)((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
state: baseState,
freeform,
defaultProps: {
type: 'text',
value: value !== null && value !== void 0 ? value : '',
'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...triggerNativeProps
},
activeDescendantController
});
const rootSlot = _reactutilities.slot.always(props.root, {
defaultProps: {
'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...rootNativeProps
},
elementType: 'div'
});
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
const state = {
components: {
root: 'div',
input: 'input',
expandIcon: 'span',
listbox: _Listbox.Listbox,
clearIcon: 'span'
},
root: rootSlot,
input: triggerSlot,
listbox: open || hasFocus ? listbox : undefined,
clearIcon: _reactutilities.slot.optional(props.clearIcon, {
defaultProps: {
'aria-hidden': 'true',
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null)
},
elementType: 'span',
renderByDefault: true
}),
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
renderByDefault: true,
defaultProps: {
'aria-disabled': disabled ? 'true' : undefined,
'aria-expanded': open,
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null),
role: 'button'
},
elementType: 'span'
}),
showClearIcon,
activeDescendantController,
...baseState
};
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
(0, _reactutilities.useOnClickOutside)({
element: targetDocument,
callback: (event)=>setOpen(event, false),
refs: [
triggerRef,
comboboxPopupRef,
comboboxTargetRef
],
disabled: !open
});
/* handle open/close + focus change when clicking expandIcon */ const { onMouseDown: onIconMouseDown } = state.expandIcon || {};
const onExpandIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onIconMouseDown, (event)=>{
var _triggerRef_current;
event.preventDefault();
state.setOpen(event, !state.open);
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
}));
if (state.expandIcon) {
state.expandIcon.onMouseDown = onExpandIconMouseDown;
// If there is no explicit aria-label, calculate default accName attribute for expandIcon button,
// using the following steps:
// 1. If there is an aria-label, it is "Open [aria-label]"
// 2. If there is an aria-labelledby, it is "Open [aria-labelledby target]" (using aria-labelledby + ids)
// 3. If there is no aria-label/ledby attr, it falls back to "Open"
// We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179
const hasExpandLabel = state.expandIcon['aria-label'] || state.expandIcon['aria-labelledby'];
const defaultOpenString = 'Open'; // this is english-only since it is the fallback
if (!hasExpandLabel) {
if (props['aria-labelledby']) {
var _state_expandIcon_id;
const chevronId = (_state_expandIcon_id = state.expandIcon.id) !== null && _state_expandIcon_id !== void 0 ? _state_expandIcon_id : `${comboId}-chevron`;
const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;
state.expandIcon['aria-label'] = defaultOpenString;
state.expandIcon.id = chevronId;
state.expandIcon['aria-labelledby'] = chevronLabelledBy;
} else if (props['aria-label']) {
state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;
} else {
state.expandIcon['aria-label'] = defaultOpenString;
}
}
}
const onClearIconMouseDown = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
ev.preventDefault();
}));
const onClearIconClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearIcon1 = state.clearIcon) === null || _state_clearIcon1 === void 0 ? void 0 : _state_clearIcon1.onClick, (ev)=>{
clearSelection(ev);
}));
if (state.clearIcon) {
state.clearIcon.onMouseDown = onClearIconMouseDown;
state.clearIcon.onClick = onClearIconClick;
}
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
if (multiselect) {
state.clearIcon = undefined;
}
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
_react.useEffect(()=>{
if (clearable && multiselect) {
// eslint-disable-next-line no-console
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
}
}, [
clearable,
multiselect
]);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,694 @@
"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, {
comboboxClassNames: function() {
return comboboxClassNames;
},
useComboboxStyles_unstable: function() {
return useComboboxStyles_unstable;
}
});
const _react = require("@griffel/react");
const comboboxClassNames = {
root: 'fui-Combobox',
input: 'fui-Combobox__input',
expandIcon: 'fui-Combobox__expandIcon',
clearIcon: 'fui-Combobox__clearIcon',
listbox: 'fui-Combobox__listbox'
};
// Matches internal heights for Select and Input, but there are no theme variables for these
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
/**
* Styles for Combobox
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bt984gj: "f122n59",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
B7ck84d: "f1ewtqcl",
i8kkvl: "f14mj54c",
mc9l5x: "fwk3njj",
Budl1dq: "fz17x9o",
Brf1p80: "f1869bpl",
Bf4jedk: "f1exfvgq",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
Bbr2w1p: "f14a1fxs",
Bduesf4: "f3e99gv",
Bpq79vn: "fhljsf7",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
E3zdtr: "f1mdlcz9",
Eqx8gd: [
"f1a7op3",
"f1cjjd47"
],
By385i5: "f1gboi2j",
B1piin3: [
"f1cjjd47",
"f1a7op3"
],
Dlnsje: "f145g4dw",
d9w3h3: [
"f1kp91vd",
"f1ibwz09"
],
B3778ie: [
"f1ibwz09",
"f1kp91vd"
],
B1q35kw: 0,
Bw17bha: 0,
Bcgy8vk: 0,
Bjuhk93: "f1mnjydx",
Gjdm7m: "f13evtba",
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
df92cz: "fv8e3ye",
I188md: "ftb5wc6",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
H713fs: "f1cmft4k",
B9ooomg: "f1x58t8o",
Bercvud: "f1ibeo51"
},
listbox: {
E5pizo: "f1hg901r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bxyxcbc: "fmmk62d",
B7ck84d: "f1ewtqcl"
},
listboxCollapsed: {
mc9l5x: "fjseox"
},
inlineListbox: {
Bj3rh1h: "f19g0ac"
},
small: {
Bqenvij: "frvgh55",
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
medium: {
Bqenvij: "f1d2rq10",
z189sj: [
"f11gcy0p",
"f1ng84yb"
]
},
large: {
i8kkvl: "f1rjii52",
Bqenvij: "fbhnoac",
z189sj: [
"fw5db7e",
"f1uw59to"
]
},
outline: {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: "f1c1zstj",
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fhz96rm"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "flmw63s",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "fqhmt4z",
B50zh58: [
"f4ruux4",
"f1assf6x"
]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f9ez7ne",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
},
"filled-lighter": {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f88035w"
},
"filled-darker": {
De3pzq: "f16xq7d1",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f88035w"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bjwas2f: "fg455y9",
Bn1d65q: [
"f1rvyvqg",
"f14g86mu"
],
Bxeuatn: "f1cwzwz",
n51gp8: [
"f14g86mu",
"f1rvyvqg"
]
}
}, {
d: [
".f122n59{align-items:center;}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
".fwk3njj{display:inline-grid;}",
".fz17x9o{grid-template-columns:1fr auto;}",
".f1869bpl{justify-content:space-between;}",
".f1exfvgq{min-width:250px;}",
".f10pi13n{position:relative;}",
".fmrv4ls{vertical-align:middle;}",
".f1gw3sf2::after{box-sizing:border-box;}",
".f13zj6fq::after{content:\"\";}",
".f1mdlcz9::after{position:absolute;}",
".f1a7op3::after{left:-1px;}",
".f1cjjd47::after{right:-1px;}",
".f1gboi2j::after{bottom:-1px;}",
".f145g4dw::after{height:max(2px, var(--borderRadiusMedium));}",
".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
[
".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
{
p: -1
}
],
".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}",
".f1yk9hq::after{transform:scaleX(0);}",
".fhwpy7i::after{transition-property:transform;}",
".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
".f1hg901r{box-shadow:var(--shadow16);}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fmmk62d{max-height:80vh;}",
".fjseox{display:none;}",
".f19g0ac{z-index:1;}",
".frvgh55{height:24px;}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".f1d2rq10{height:32px;}",
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
".fbhnoac{height:40px;}",
".fw5db7e{padding-right:var(--spacingHorizontalM);}",
".f1uw59to{padding-left:var(--spacingHorizontalM);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -1
}
],
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
[
".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
[
".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}",
{
p: -2
}
],
".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
".fdrzuqr{cursor:not-allowed;}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}"
],
w: [
".f14a1fxs:focus-within{outline-width:2px;}",
".f3e99gv:focus-within{outline-style:solid;}",
".fhljsf7:focus-within{outline-color:transparent;}",
".fjw5xc1:focus-within::after{transform:scaleX(1);}",
".f1xdyd5c:focus-within::after{transition-property:transform;}",
".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
h: [
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
],
a: [
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
]
});
const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
input: {
qb2dma: "f1ub7u0d",
De3pzq: "f1c21dwh",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
sj55zd: "f19n0e5",
Bahqtrf: "fk6fouc",
Brovlpu: "ftqa4ok",
yvdlaj: "fwyc1cq",
B3o7kgh: "f13ta7ih"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fxe2rs",
"f1gflqzi"
]
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fzy81xo",
"f58b53b"
]
},
large: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f1kdav7a",
"footqm6"
]
},
disabled: {
sj55zd: "f1s2aq7o",
De3pzq: "f1c21dwh",
Bceei9c: "fdrzuqr",
yvdlaj: "fahhnxm"
}
}, {
d: [
".f1ub7u0d{align-self:stretch;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fwyc1cq::-webkit-input-placeholder{color:var(--colorNeutralForeground4);}",
".fwyc1cq::-moz-placeholder{color:var(--colorNeutralForeground4);}",
".f13ta7ih::-webkit-input-placeholder{opacity:1;}",
".f13ta7ih::-moz-placeholder{opacity:1;}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".fxe2rs{padding:0 0 0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f1gflqzi{padding:0 calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 0 0;}",
{
p: -1
}
],
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".fzy81xo{padding:0 0 0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f58b53b{padding:0 calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 0 0;}",
{
p: -1
}
],
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f1kdav7a{padding:0 0 0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
{
p: -1
}
],
[
".footqm6{padding:0 calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 0 0;}",
{
p: -1
}
],
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fdrzuqr{cursor:not-allowed;}",
".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
],
f: [
".ftqa4ok:focus{outline-style:none;}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
Bceei9c: "f1k6fduh",
mc9l5x: "ftgm304",
Be2twd7: "f1pp30po",
Bo70h7d: "fvc9v3g"
},
hidden: {
mc9l5x: "fjseox"
},
visuallyHidden: {
Bh84pgu: "f1ekcaio",
Bqenvij: "f1mpe4l3",
jrapky: 0,
Frg6f3: 0,
t21cq0: 0,
B6of3ja: 0,
B74szlk: "f1jlpb2r",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1c5fvqg",
a9b677: "frkrog8",
qhf8xq: "f1euv43f"
},
small: {
Be2twd7: "f4ybsrx",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
medium: {
Be2twd7: "fe5j1ua",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
large: {
Be2twd7: "f1rt2boy",
Frg6f3: [
"f1t5qyk5",
"f1ikr372"
]
},
disabled: {
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr"
}
}, {
d: [
".f1ewtqcl{box-sizing:border-box;}",
".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
".f1k6fduh{cursor:pointer;}",
".ftgm304{display:block;}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".fvc9v3g svg{display:block;}",
".fjseox{display:none;}",
".f1ekcaio{clip:rect(0px, 0px, 0px, 0px);}",
".f1mpe4l3{height:1px;}",
[
".f1jlpb2r{margin:-1px;}",
{
p: -1
}
],
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
[
".f1c5fvqg{padding:0px;}",
{
p: -1
}
],
".frkrog8{width:1px;}",
".f1euv43f{position:absolute;}",
".f4ybsrx{font-size:16px;}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fdrzuqr{cursor:not-allowed;}"
]
});
const useComboboxStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, size, showClearIcon } = state;
const invalid = `${state.input['aria-invalid']}` === 'true';
const disabled = state.input.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const inputStyles = useInputStyles();
state.root.className = (0, _react.mergeClasses)(comboboxClassNames.root, styles.root, styles[appearance], styles[size], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.input.className = (0, _react.mergeClasses)(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
}
if (state.clearIcon) {
state.clearIcon.className = (0, _react.mergeClasses)(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,113 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useInputTriggerSlot", {
enumerable: true,
get: function() {
return useInputTriggerSlot;
}
});
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 _keyboardkeys = require("@fluentui/keyboard-keys");
const _useTriggerSlot = require("../../utils/useTriggerSlot");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
function useInputTriggerSlot(triggerFromProps, ref, options) {
'use no memo';
const { state: { open, value, selectOption, setValue, multiselect, selectedOptions, clearSelection, getOptionById, setOpen }, freeform, defaultProps, activeDescendantController } = options;
const onBlur = (event)=>{
// handle selection and updating value if freeform is false
if (!open && !freeform) {
const activeOptionId = activeDescendantController.active();
const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;
// select matching option, if the value fully matches
if (value && activeOption && value.trim().toLowerCase() === (activeOption === null || activeOption === void 0 ? void 0 : activeOption.text.toLowerCase())) {
selectOption(event, activeOption);
}
// reset typed value when the input loses focus while collapsed, unless freeform is true
setValue(undefined);
}
};
const getOptionFromInput = (inputValue)=>{
const searchString = inputValue === null || inputValue === void 0 ? void 0 : inputValue.trim().toLowerCase();
if (!searchString || searchString.length === 0) {
activeDescendantController.blur();
return;
}
const matcher = (optionText)=>optionText.toLowerCase().indexOf(searchString) === 0;
const match = activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
});
if (!match) {
activeDescendantController.blur();
return undefined;
}
return getOptionById(match);
};
// update value and active option based on input
const onChange = (event)=>{
const inputValue = event.target.value;
// update uncontrolled value
setValue(inputValue);
// handle updating active option based on input
const matchingOption = getOptionFromInput(inputValue);
// clear selection for single-select if the input value no longer matches the selection
if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {
clearSelection(event);
}
};
const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
state: options.state,
defaultProps,
elementType: 'input',
activeDescendantController
});
trigger.onChange = (0, _reactutilities.mergeCallbacks)(trigger.onChange, onChange);
trigger.onBlur = (0, _reactutilities.mergeCallbacks)(trigger.onBlur, onBlur);
// NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set
// To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows
// ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888
const [hideActiveDescendant, setHideActiveDescendant] = _react.useState(false);
// save the typing vs. navigating options state, as the space key should behave differently in each case
// we do not want to update the combobox when this changes, just save the value between renders
const isTyping = _react.useRef(false);
/**
* Freeform combobox should not select
*/ const defaultOnKeyDown = trigger.onKeyDown;
const onKeyDown = (0, _reactutilities.useEventCallback)((event)=>{
if (!open && (0, _dropdownKeyActions.getDropdownActionFromKey)(event) === 'Type') {
setOpen(event, true);
}
// clear activedescendant when moving the text insertion cursor
if (event.key === _keyboardkeys.ArrowLeft || event.key === _keyboardkeys.ArrowRight) {
setHideActiveDescendant(true);
} else {
setHideActiveDescendant(false);
}
// update typing state to true if the user is typing
const action = (0, _dropdownKeyActions.getDropdownActionFromKey)(event, {
open,
multiselect
});
if (action === 'Type') {
isTyping.current = true;
} else if (action === 'Open' && event.key !== ' ' || action === 'Next' || action === 'Previous' || action === 'First' || action === 'Last' || action === 'PageUp' || action === 'PageDown') {
isTyping.current = false;
}
// allow space to insert a character if freeform & the last action was typing, or if the popup is closed
if ((isTyping.current || !open) && event.key === ' ') {
var _triggerFromProps_onKeyDown;
triggerFromProps === null || triggerFromProps === void 0 ? void 0 : (_triggerFromProps_onKeyDown = triggerFromProps.onKeyDown) === null || _triggerFromProps_onKeyDown === void 0 ? void 0 : _triggerFromProps_onKeyDown.call(triggerFromProps, event);
return;
}
defaultOnKeyDown === null || defaultOnKeyDown === void 0 ? void 0 : defaultOnKeyDown(event);
});
trigger.onKeyDown = onKeyDown;
if (hideActiveDescendant) {
trigger['aria-activedescendant'] = undefined;
}
return trigger;
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Dropdown", {
enumerable: true,
get: function() {
return Dropdown;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useDropdown = require("./useDropdown");
const _renderDropdown = require("./renderDropdown");
const _useDropdownStylesstyles = require("./useDropdownStyles.styles");
const _useComboboxContextValues = require("../../contexts/useComboboxContextValues");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Dropdown = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useDropdown.useDropdown_unstable)(props, ref);
const contextValues = (0, _useComboboxContextValues.useComboboxContextValues)(state);
(0, _useDropdownStylesstyles.useDropdownStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDropdownStyles_unstable')(state);
return (0, _renderDropdown.renderDropdown_unstable)(state, contextValues);
});
Dropdown.displayName = 'Dropdown';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n const state = useDropdown_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useDropdownStyles_unstable(state);\n\n useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["Dropdown","React","forwardRef","props","ref","state","useDropdown_unstable","contextValues","useComboboxContextValues","useDropdownStyles_unstable","useCustomStyleHook_unstable","renderDropdown_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;6BACc;gCACG;yCACG;0CAEF;qCAEG;AAKrC,MAAMA,WAAAA,WAAAA,GAA+CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQC,IAAAA,iCAAAA,EAAqBH,OAAOC;IAC1C,MAAMG,gBAAgBC,IAAAA,kDAAAA,EAAyBH;IAE/CI,IAAAA,mDAAAA,EAA2BJ;IAE3BK,IAAAA,gDAAAA,EAA4B,8BAA8BL;IAE1D,OAAOM,IAAAA,uCAAAA,EAAwBN,OAAOE;AACxC;AAEAP,SAASY,WAAW,GAAG"}
@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n ComboboxBaseContextValues,\n ComboboxBaseOpenChangeData,\n ComboboxBaseOpenEvents,\n ComboboxBaseProps,\n ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n /** The root dropdown slot */\n root: NonNullable<Slot<'div'>>;\n\n /** The dropdown arrow icon */\n expandIcon?: Slot<'span'>;\n\n /** The dropdown clear icon */\n clearButton?: Slot<'button'>;\n\n /** The primary slot, the element with role=\"combobox\" */\n button: NonNullable<Slot<'button'>>;\n\n /** The dropdown listbox slot */\n listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n Omit<ComboboxBaseState, 'freeform'> & {\n /** Whether the placeholder is currently displayed */\n placeholderVisible: boolean;\n\n showClearButton?: boolean;\n\n activeDescendantController: ActiveDescendantImperativeRef;\n };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\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, {
Dropdown: function() {
return _Dropdown.Dropdown;
},
dropdownClassNames: function() {
return _useDropdownStylesstyles.dropdownClassNames;
},
renderDropdown_unstable: function() {
return _renderDropdown.renderDropdown_unstable;
},
useDropdownStyles_unstable: function() {
return _useDropdownStylesstyles.useDropdownStyles_unstable;
},
useDropdown_unstable: function() {
return _useDropdown.useDropdown_unstable;
}
});
const _Dropdown = require("./Dropdown");
const _renderDropdown = require("./renderDropdown");
const _useDropdown = require("./useDropdown");
const _useDropdownStylesstyles = require("./useDropdownStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n ActiveOptionChangeData,\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAYRC,kBAAkB;eAAlBA,2CAAkB;;IAFlBC,uBAAuB;eAAvBA,uCAAuB;;IAEHC,0BAA0B;eAA1BA,mDAA0B;;IAD9CC,oBAAoB;eAApBA,iCAAoB;;;0BAXJ;gCAUe;6BACH;yCAC0B"}
@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderDropdown_unstable", {
enumerable: true,
get: function() {
return renderDropdown_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactportal = require("@fluentui/react-portal");
const _reactutilities = require("@fluentui/react-utilities");
const _reactaria = require("@fluentui/react-aria");
const _ComboboxContext = require("../../contexts/ComboboxContext");
const _ListboxContext = require("../../contexts/ListboxContext");
const renderDropdown_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactaria.ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListboxContext.ListboxContext.Provider, {
value: contextValues.listbox,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ComboboxContext.ComboboxContext.Provider, {
value: contextValues.combobox,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(state.button, {
children: [
state.button.children,
state.expandIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.expandIcon, {})
]
}),
state.clearButton && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.clearButton, {}),
state.listbox && (state.inlinePopup ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.listbox, {})
}))
]
})
})
})
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n assertSlots<DropdownSlots>(state);\n\n return (\n <state.root>\n <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n <ListboxContext.Provider value={contextValues.listbox}>\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n <ComboboxContext.Provider value={contextValues.combobox}>\n <state.button>\n {state.button.children}\n {state.expandIcon && <state.expandIcon />}\n </state.button>\n {state.clearButton && <state.clearButton />}\n {state.listbox &&\n (state.inlinePopup ? (\n <state.listbox />\n ) : (\n <Portal mountNode={state.mountNode}>\n <state.listbox />\n </Portal>\n ))}\n {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n </ComboboxContext.Provider>\n </ListboxContext.Provider>\n </ActiveDescendantContextProvider>\n </state.root>\n );\n};\n"],"names":["renderDropdown_unstable","state","contextValues","assertSlots","_jsx","root","ActiveDescendantContextProvider","value","activeDescendant","ListboxContext","Provider","listbox","_jsxs","ComboboxContext","combobox","button","children","expandIcon","clearButton","inlinePopup","Portal","mountNode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;4BAbb;6BAEuB;gCAEK;2BACoB;iCAChB;gCAED;AAKxB,MAAMA,0BAA0B,CAACC,OAAsBC;IAC5DC,IAAAA,2BAAAA,EAA2BF;IAE3B,OAAA,WAAA,GACEG,IAAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;kBACT,WAAA,GAAAD,IAAAA,eAAA,EAACE,0CAAAA,EAAAA;YAAgCC,OAAOL,cAAcM,gBAAgB;sBACpE,WAAA,GAAAJ,IAAAA,eAAA,EAACK,8BAAAA,CAAeC,QAAQ,EAAA;gBAACH,OAAOL,cAAcS,OAAO;0BAEnD,WAAA,GAAAC,IAAAA,gBAAA,EAACC,gCAAAA,CAAgBH,QAAQ,EAAA;oBAACH,OAAOL,cAAcY,QAAQ;;sCACrDF,IAAAA,gBAAA,EAACX,MAAMc,MAAM,EAAA;;gCACVd,MAAMc,MAAM,CAACC,QAAQ;gCACrBf,MAAMgB,UAAU,IAAA,WAAA,GAAIb,IAAAA,eAAA,EAACH,MAAMgB,UAAU,EAAA,CAAA;;;wBAEvChB,MAAMiB,WAAW,IAAA,WAAA,GAAId,IAAAA,eAAA,EAACH,MAAMiB,WAAW,EAAA,CAAA;wBACvCjB,MAAMU,OAAO,IACXV,CAAAA,MAAMkB,WAAW,GAAA,WAAA,GAChBf,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA,KAAA,WAAA,GAEdP,IAAAA,eAAA,EAACgB,mBAAAA,EAAAA;4BAAOC,WAAWpB,MAAMoB,SAAS;sCAChC,WAAA,GAAAjB,IAAAA,eAAA,EAACH,MAAMU,OAAO,EAAA,CAAA;;;;;;;AAShC"}
@@ -0,0 +1,99 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useButtonTriggerSlot", {
enumerable: true,
get: function() {
return useButtonTriggerSlot;
}
});
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 _useTriggerSlot = require("../../utils/useTriggerSlot");
const _dropdownKeyActions = require("../../utils/dropdownKeyActions");
function useButtonTriggerSlot(triggerFromProps, ref, options) {
'use no memo';
const { state: { open, setOpen, getOptionById }, defaultProps, activeDescendantController } = options;
// jump to matching option based on typing
const searchString = _react.useRef('');
const [setKeyTimeout, clearKeyTimeout] = (0, _reactutilities.useTimeout)();
const moveToNextMatchingOption = (matcher, opt = {
startFromNext: false
})=>{
const { startFromNext } = opt;
const activeOptionId = activeDescendantController.active();
const nextInOrder = activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
}, {
startFrom: startFromNext ? activeDescendantController.next({
passive: true
}) : activeOptionId
});
if (nextInOrder) {
return nextInOrder;
}
// Cycle back to first match
return activeDescendantController.find((id)=>{
const option = getOptionById(id);
return !!option && matcher(option.text);
});
};
const moveToNextMatchingOptionWithSameCharacterHandling = ()=>{
if (moveToNextMatchingOption((optionText)=>{
return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;
}, {
// Slowly pressing the same key will cycle through options
startFromNext: searchString.current.length === 1
})) {
return;
}
// if there are no direct matches, check if the search is all the same letter, e.g. "aaa"
if (allCharactersSame(searchString.current) && moveToNextMatchingOption((optionText)=>{
return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;
}, {
// if the search is all the same letter, cycle through options starting with that letter
startFromNext: true
})) {
return;
}
activeDescendantController.blur();
};
const onTriggerKeyDown = (ev)=>{
// clear timeout, if it exists
clearKeyTimeout();
// if the key was a char key, update search string
if ((0, _dropdownKeyActions.getDropdownActionFromKey)(ev) === 'Type') {
// update search string
searchString.current += ev.key.toLowerCase();
setKeyTimeout(()=>{
searchString.current = '';
}, 500);
if (open) {
moveToNextMatchingOptionWithSameCharacterHandling();
}
// update state
!open && setOpen(ev, true);
}
};
const trigger = (0, _useTriggerSlot.useTriggerSlot)(triggerFromProps, ref, {
state: options.state,
defaultProps,
elementType: 'button',
activeDescendantController
});
trigger.onKeyDown = (0, _reactutilities.mergeCallbacks)(onTriggerKeyDown, trigger.onKeyDown);
return trigger;
}
/**
* @returns - whether every character in the string is the same
*/ function allCharactersSame(str) {
for(let i = 1; i < str.length; i++){
if (str[i] !== str[i - 1]) {
return false;
}
}
return true;
}
File diff suppressed because one or more lines are too long
@@ -0,0 +1,151 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useDropdown_unstable", {
enumerable: true,
get: function() {
return useDropdown_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reactaria = require("@fluentui/react-aria");
const _reacticons = require("@fluentui/react-icons");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _useComboboxBaseState = require("../../utils/useComboboxBaseState");
const _useComboboxPositioning = require("../../utils/useComboboxPositioning");
const _Listbox = require("../Listbox/Listbox");
const _useListboxSlot = require("../../utils/useListboxSlot");
const _useButtonTriggerSlot = require("./useButtonTriggerSlot");
const _useOptionStylesstyles = require("../Option/useOptionStyles.styles");
const useDropdown_unstable = (props, ref)=>{
'use no memo';
var _state_clearButton;
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props, {
supportsLabelFor: true,
supportsSize: true
});
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = (0, _reactaria.useActiveDescendant)({
matchOption: (el)=>el.classList.contains(_useOptionStylesstyles.optionClassNames.root)
});
const baseState = (0, _useComboboxBaseState.useComboboxBaseState)({
...props,
activeDescendantController,
freeform: false
});
const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
const { primary: triggerNativeProps, root: rootNativeProps } = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'button',
excludedPropNames: [
'children'
]
});
const [comboboxPopupRef, comboboxTargetRef] = (0, _useComboboxPositioning.useComboboxPositioning)(props);
const triggerRef = _react.useRef(null);
const listbox = (0, _useListboxSlot.useListboxSlot)(props.listbox, (0, _reactutilities.useMergedRefs)(comboboxPopupRef, activeDescendantListboxRef), {
state: baseState,
triggerRef,
defaultProps: {
children: props.children
}
});
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
(0, _reactutilities.useOnClickOutside)({
element: targetDocument,
callback: (event)=>setOpen(event, false),
refs: [
triggerRef,
comboboxPopupRef,
comboboxTargetRef
],
disabled: !open
});
var _props_button;
const trigger = (0, _useButtonTriggerSlot.useButtonTriggerSlot)((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, (0, _reactutilities.useMergedRefs)(triggerRef, activeParentRef, ref), {
state: baseState,
defaultProps: {
type: 'button',
// tabster navigation breaks if the button is disabled and tabIndex is 0
tabIndex: triggerNativeProps.disabled ? undefined : 0,
children: baseState.value || props.placeholder,
'aria-controls': open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...triggerNativeProps
},
activeDescendantController
});
const rootSlot = _reactutilities.slot.always(props.root, {
defaultProps: {
'aria-owns': !props.inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
children: props.children,
...rootNativeProps
},
elementType: 'div'
});
rootSlot.ref = (0, _reactutilities.useMergedRefs)(rootSlot.ref, comboboxTargetRef);
const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
const state = {
components: {
root: 'div',
button: 'button',
clearButton: 'button',
expandIcon: 'span',
listbox: _Listbox.Listbox
},
root: rootSlot,
button: trigger,
listbox: open || hasFocus ? listbox : undefined,
clearButton: _reactutilities.slot.optional(props.clearButton, {
defaultProps: {
'aria-label': 'Clear selection',
children: /*#__PURE__*/ _react.createElement(_reacticons.DismissRegular, null),
// Safari doesn't allow to focus an element with this
// when the element is not visible (display: none) we need to remove it to avoid tabster issues
tabIndex: showClearButton ? 0 : undefined,
type: 'button'
},
elementType: 'button',
renderByDefault: true
}),
expandIcon: _reactutilities.slot.optional(props.expandIcon, {
renderByDefault: true,
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
},
elementType: 'span'
}),
placeholderVisible: !baseState.value && !!props.placeholder,
showClearButton,
activeDescendantController,
...baseState
};
const onClearButtonClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)((_state_clearButton = state.clearButton) === null || _state_clearButton === void 0 ? void 0 : _state_clearButton.onClick, (ev)=>{
var _triggerRef_current;
clearSelection(ev);
(_triggerRef_current = triggerRef.current) === null || _triggerRef_current === void 0 ? void 0 : _triggerRef_current.focus();
}));
if (state.clearButton) {
state.clearButton.onClick = onClearButtonClick;
}
// Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot
if (multiselect) {
state.clearButton = undefined;
}
if (process.env.NODE_ENV !== 'production') {
// eslint-disable-next-line react-hooks/rules-of-hooks -- "process.env" does not change in runtime
_react.useEffect(()=>{
if (clearable && multiselect) {
// eslint-disable-next-line no-console
console.error(`[@fluentui/react-combobox] "clearable" prop is not supported in multiselect mode.`);
}
}, [
clearable,
multiselect
]);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,638 @@
"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, {
dropdownClassNames: function() {
return dropdownClassNames;
},
useDropdownStyles_unstable: function() {
return useDropdownStyles_unstable;
}
});
const _react = require("@griffel/react");
const dropdownClassNames = {
root: 'fui-Dropdown',
button: 'fui-Dropdown__button',
clearButton: 'fui-Dropdown__clearButton',
expandIcon: 'fui-Dropdown__expandIcon',
listbox: 'fui-Dropdown__listbox'
};
/**
* Styles for Dropdown
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
B7ck84d: "f1ewtqcl",
mc9l5x: "ftuwxu6",
Bf4jedk: "f1exfvgq",
qhf8xq: "f10pi13n",
ha4doy: "fmrv4ls",
Bbr2w1p: "f14a1fxs",
Bduesf4: "f3e99gv",
Bpq79vn: "fhljsf7",
li1rpt: "f1gw3sf2",
Bsft5z2: "f13zj6fq",
E3zdtr: "f1mdlcz9",
Eqx8gd: [
"f1a7op3",
"f1cjjd47"
],
By385i5: "f1gboi2j",
B1piin3: [
"f1cjjd47",
"f1a7op3"
],
Dlnsje: "ffyw7fx",
d9w3h3: [
"f1kp91vd",
"f1ibwz09"
],
B3778ie: [
"f1ibwz09",
"f1kp91vd"
],
B1q35kw: 0,
Bw17bha: 0,
Bcgy8vk: 0,
Bjuhk93: "f1mnjydx",
Gjdm7m: "f13evtba",
b1kco5: "f1yk9hq",
Ba2ppi3: "fhwpy7i",
F2fol1: "f14ee0xe",
lck23g: "f1xhbsuh",
df92cz: "fv8e3ye",
I188md: "ftb5wc6",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
H713fs: "f1cmft4k",
B9ooomg: "f1x58t8o",
Bercvud: "f1ibeo51",
Bz04dq9: "f132nw8t",
Budl3uf: "f1htdosj"
},
listbox: {
B7ck84d: "f1ewtqcl",
E5pizo: "f1hg901r",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bxyxcbc: "fmmk62d"
},
listboxCollapsed: {
mc9l5x: "fjseox"
},
inlineListbox: {
Bj3rh1h: "f19g0ac"
},
button: {
Bt984gj: "f122n59",
De3pzq: "f1c21dwh",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
B7ck84d: "f1ewtqcl",
sj55zd: "f19n0e5",
i8kkvl: "f14mj54c",
Bceei9c: "f1k6fduh",
mc9l5x: "f13qh94s",
Bahqtrf: "fk6fouc",
Budl1dq: "f12nh0o2",
Brf1p80: "f1869bpl",
fsow6f: [
"f1o700av",
"fes3tcz"
],
a9b677: "fly5x3f",
Brovlpu: "ftqa4ok"
},
placeholder: {
sj55zd: "fxc4j92"
},
small: {
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"fye6m5k",
"f3cq2dl"
]
},
medium: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f14ev680",
"f58uxzw"
]
},
large: {
i8kkvl: "f1rjii52",
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: [
"f139mn7i",
"f1v3q0m"
]
},
outline: {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: "f1c1zstj",
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fhz96rm"
},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "flmw63s",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
B6oc9vd: "fvs00aa",
ak43y8: [
"f1assf6x",
"f4ruux4"
],
wmxk5l: "fqhmt4z",
B50zh58: [
"f4ruux4",
"f1assf6x"
]
},
underline: {
De3pzq: "f1c21dwh",
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
Bgfg5da: "f9ez7ne",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779"
},
"filled-lighter": {
De3pzq: "fxugw4r",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fs2rfia"
},
"filled-darker": {
De3pzq: "f16xq7d1",
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "fs2rfia"
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
invalidUnderline: {
hhx65j: "f1fgmyf4"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bjwas2f: "fg455y9",
Bn1d65q: [
"f1rvyvqg",
"f14g86mu"
],
Bxeuatn: "f1cwzwz",
n51gp8: [
"f14g86mu",
"f1rvyvqg"
]
},
disabledText: {
sj55zd: "f1s2aq7o",
Bceei9c: "fdrzuqr"
},
hidden: {
mc9l5x: "fjseox"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".ftuwxu6{display:inline-flex;}",
".f1exfvgq{min-width:250px;}",
".f10pi13n{position:relative;}",
".fmrv4ls{vertical-align:middle;}",
".f1gw3sf2::after{box-sizing:border-box;}",
".f13zj6fq::after{content:\"\";}",
".f1mdlcz9::after{position:absolute;}",
".f1a7op3::after{left:-1px;}",
".f1cjjd47::after{right:-1px;}",
".f1gboi2j::after{bottom:-1px;}",
".ffyw7fx::after{height:max(var(--strokeWidthThick), var(--borderRadiusMedium));}",
".f1kp91vd::after{border-bottom-left-radius:var(--borderRadiusMedium);}",
".f1ibwz09::after{border-bottom-right-radius:var(--borderRadiusMedium);}",
[
".f1mnjydx::after{border-bottom:var(--strokeWidthThick) solid var(--colorCompoundBrandStroke);}",
{
p: -1
}
],
".f13evtba::after{clip-path:inset(calc(100% - 2px) 0 0 0);}",
".f1yk9hq::after{transform:scaleX(0);}",
".fhwpy7i::after{transition-property:transform;}",
".f14ee0xe::after{transition-duration:var(--durationUltraFast);}",
".f1xhbsuh::after{transition-delay:var(--curveAccelerateMid);}",
".f1hg901r{box-shadow:var(--shadow16);}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fmmk62d{max-height:80vh;}",
".fjseox{display:none;}",
".f19g0ac{z-index:1;}",
".f122n59{align-items:center;}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
".f1k6fduh{cursor:pointer;}",
".f13qh94s{display:grid;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f12nh0o2{grid-template-columns:[content] 1fr [icon] auto [end];}",
".f1869bpl{justify-content:space-between;}",
".f1o700av{text-align:left;}",
".fes3tcz{text-align:right;}",
".fly5x3f{width:100%;}",
".fxc4j92{color:var(--colorNeutralForeground4);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".fye6m5k{padding:3px var(--spacingHorizontalSNudge) 3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f3cq2dl{padding:3px calc(var(--spacingHorizontalSNudge) + var(--spacingHorizontalXXS)) 3px var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".f14ev680{padding:5px var(--spacingHorizontalMNudge) 5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS));}",
{
p: -1
}
],
[
".f58uxzw{padding:5px calc(var(--spacingHorizontalMNudge) + var(--spacingHorizontalXXS)) 5px var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f139mn7i{padding:7px var(--spacingHorizontalM) 7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
{
p: -1
}
],
[
".f1v3q0m{padding:7px calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge)) 7px var(--spacingHorizontalM);}",
{
p: -1
}
],
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
[
".fhz96rm{border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);}",
{
p: -2
}
],
".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}",
[
".f9ez7ne{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -1
}
],
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
[
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
{
p: -2
}
],
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
[
".fs2rfia{border:var(--strokeWidthThin) solid transparent;}",
{
p: -2
}
],
".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
".fdrzuqr{cursor:not-allowed;}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
],
w: [
".f14a1fxs:focus-within{outline-width:2px;}",
".f3e99gv:focus-within{outline-style:solid;}",
".fhljsf7:focus-within{outline-color:transparent;}",
".fjw5xc1:focus-within::after{transform:scaleX(1);}",
".f1xdyd5c:focus-within::after{transition-property:transform;}",
".fatpbeo:focus-within::after{transition-duration:var(--durationNormal);}",
".fb7uyps:focus-within::after{transition-delay:var(--curveDecelerateMid);}",
".f1ibeo51:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}"
],
m: [
[
"@media screen and (prefers-reduced-motion: reduce){.fv8e3ye::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.ftb5wc6::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1cmft4k:focus-within::after{transition-duration:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media screen and (prefers-reduced-motion: reduce){.f1x58t8o:focus-within::after{transition-delay:0.01ms;}}",
{
m: "screen and (prefers-reduced-motion: reduce)"
}
],
[
"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
t: [
"@supports selector(:has(*)){.f132nw8t:has(.fui-Dropdown__clearButton:focus)::after{border-bottom-color:initial;}}",
"@supports selector(:has(*)){.f1htdosj:has(.fui-Dropdown__clearButton:focus)::after{transform:scaleX(0);}}"
],
f: [
".ftqa4ok:focus{outline-style:none;}"
],
h: [
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".flmw63s:hover{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
],
a: [
".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}",
".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}",
".fqhmt4z:active{border-bottom-color:var(--colorNeutralStrokeAccessible);}"
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
icon: {
B7ck84d: "f1ewtqcl",
sj55zd: "fxkbij4",
mc9l5x: "ftgm304",
Be2twd7: "f1pp30po",
Br312pm: "f12w6cgp",
Bw0ie65: "f8bv1bt",
Bo70h7d: "fvc9v3g"
},
small: {
Be2twd7: "f4ybsrx",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
medium: {
Be2twd7: "fe5j1ua",
Frg6f3: [
"f1h9en5y",
"f1xk557c"
]
},
large: {
Be2twd7: "f1rt2boy",
Frg6f3: [
"f1t5qyk5",
"f1ikr372"
]
},
disabled: {
sj55zd: "f1s2aq7o"
}
}, {
d: [
".f1ewtqcl{box-sizing:border-box;}",
".fxkbij4{color:var(--colorNeutralStrokeAccessible);}",
".ftgm304{display:block;}",
".f1pp30po{font-size:var(--fontSizeBase500);}",
".f12w6cgp{grid-column-start:icon;}",
".f8bv1bt{grid-column-end:end;}",
".fvc9v3g svg{display:block;}",
".f4ybsrx{font-size:16px;}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}",
".f1t5qyk5{margin-left:var(--spacingHorizontalSNudge);}",
".f1ikr372{margin-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}"
]
});
const useBaseClearButtonStyle = /*#__PURE__*/ (0, _react.__resetStyles)("rticfuj", "r1vp6jef", {
r: [
".rticfuj{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-right:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
".rticfuj:focus{outline-style:none;}",
".rticfuj:focus-visible{outline-style:none;}",
".rticfuj[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
".rticfuj[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
".r1vp6jef{align-self:center;background-color:var(--colorTransparentBackground);border:none;cursor:pointer;height:fit-content;margin:0;margin-left:var(--spacingHorizontalMNudge);padding:0;position:relative;}",
".r1vp6jef:focus{outline-style:none;}",
".r1vp6jef:focus-visible{outline-style:none;}",
".r1vp6jef[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
".r1vp6jef[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
],
s: [
"@media (forced-colors: active){.rticfuj[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
"@media (forced-colors: active){.r1vp6jef[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
]
});
const useDropdownStyles_unstable = (state)=>{
'use no memo';
const { appearance, open, placeholderVisible, showClearButton, size } = state;
const invalid = `${state.button['aria-invalid']}` === 'true';
const disabled = state.button.disabled;
const styles = useStyles();
const iconStyles = useIconStyles();
const clearButtonStyle = useBaseClearButtonStyle();
state.root.className = (0, _react.mergeClasses)(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);
state.button.className = (0, _react.mergeClasses)(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);
if (state.listbox) {
state.listbox.className = (0, _react.mergeClasses)(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = (0, _react.mergeClasses)(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);
}
if (state.clearButton) {
state.clearButton.className = (0, _react.mergeClasses)(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -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"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Option", {
enumerable: true,
get: function() {
return Option;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useOption = require("./useOption");
const _renderOption = require("./renderOption");
const _useOptionStylesstyles = require("./useOptionStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Option = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useOption.useOption_unstable)(props, ref);
(0, _useOptionStylesstyles.useOptionStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOptionStyles_unstable')(state);
return (0, _renderOption.renderOption_unstable)(state);
});
Option.displayName = 'Option';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["Option","React","forwardRef","props","ref","state","useOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","renderOption_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AAEAL,OAAOU,WAAW,GAAG"}
@@ -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"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n /** The root option slot, with role=\"option\" */\n root: NonNullable<Slot<'div'>>;\n\n /** The check icon that is visible for selected options */\n checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n /**\n * Sets an option to the `disabled` state.\n * Disabled options cannot be selected, but are still keyboard navigable\n */\n disabled?: boolean;\n\n /**\n * Defines a unique identifier for the option.\n * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n * Defaults to `text` if not provided.\n */\n value?: string;\n} & (\n | {\n /**\n * An optional override the string value of the Option's display text,\n * defaulting to the Option's child content.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text?: string;\n children: string;\n }\n | {\n /**\n * The string value of the Option's display text when the Option's children are not a string.\n * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n * and as the comparison for type-to-find keyboard functionality.\n */\n text: string;\n children?: React.ReactNode;\n }\n );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n Pick<OptionProps, 'disabled'> & {\n /**\n * @deprecated - no longer used internally\n */\n active: boolean;\n\n /**\n * @deprecated - no longer used internally\n */\n focusVisible: boolean;\n\n /** If true, the option is part of a multiselect combobox or listbox */\n multiselect?: boolean;\n\n /** If true, the option is selected */\n selected: boolean;\n };\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEACuB"}
@@ -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, {
Option: function() {
return _Option.Option;
},
optionClassNames: function() {
return _useOptionStylesstyles.optionClassNames;
},
renderOption_unstable: function() {
return _renderOption.renderOption_unstable;
},
useOptionStyles_unstable: function() {
return _useOptionStylesstyles.useOptionStyles_unstable;
},
useOption_unstable: function() {
return _useOption.useOption_unstable;
}
});
const _Option = require("./Option");
const _renderOption = require("./renderOption");
const _useOption = require("./useOption");
const _useOptionStylesstyles = require("./useOptionStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,MAAM;eAANA,cAAM;;IAINC,gBAAgB;eAAhBA,uCAAgB;;IAFhBC,qBAAqB;eAArBA,mCAAqB;;IAEHC,wBAAwB;eAAxBA,+CAAwB;;IAD1CC,kBAAkB;eAAlBA,6BAAkB;;;wBAHJ;8BAEe;2BACH;uCACwB"}
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderOption_unstable", {
enumerable: true,
get: function() {
return renderOption_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderOption_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.checkIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.checkIcon, {}),
state.root.children
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Option/renderOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n assertSlots<OptionSlots>(state);\n\n return (\n <state.root>\n {state.checkIcon && <state.checkIcon />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["renderOption_unstable","state","assertSlots","_jsxs","root","checkIcon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IAEzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}
@@ -0,0 +1,133 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOption_unstable", {
enumerable: true,
get: function() {
return useOption_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 _reactaria = require("@fluentui/react-aria");
const _reacticons = require("@fluentui/react-icons");
const _ListboxContext = require("../../contexts/ListboxContext");
function getTextString(text, children) {
if (text !== undefined) {
return text;
}
let textString = '';
let hasNonStringChild = false;
_react.Children.forEach(children, (child)=>{
if (typeof child === 'string') {
textString += child;
} else {
hasNonStringChild = true;
}
});
// warn if an Option has non-string children and no text prop
if (hasNonStringChild) {
// eslint-disable-next-line no-console
console.warn('Provide a `text` prop to Option components when they contain non-string children.');
}
return textString;
}
const useOption_unstable = (props, ref)=>{
const { children, disabled, text, value } = props;
const optionRef = _react.useRef(null);
const optionText = getTextString(text, children);
const optionValue = value !== null && value !== void 0 ? value : optionText;
// use the id if provided, otherwise use a generated id
const id = (0, _reactutilities.useId)('fluent-option', props.id);
// data used for context registration & events
const optionData = _react.useMemo(()=>({
id,
disabled,
text: optionText,
value: optionValue
}), [
id,
disabled,
optionText,
optionValue
]);
// context values
const { controller: activeDescendantController } = (0, _reactaria.useActiveDescendantContext)();
const multiselect = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.multiselect);
const registerOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
const selected = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>{
const selectedOptions = ctx.selectedOptions;
return optionValue !== undefined && selectedOptions.find((o)=>o === optionValue) !== undefined;
});
const selectOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.selectOption);
const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
// check icon
let CheckIcon = /*#__PURE__*/ _react.createElement(_reacticons.CheckmarkFilled, null);
if (multiselect) {
CheckIcon = selected ? /*#__PURE__*/ _react.createElement(_reacticons.Checkmark12Filled, null) : '';
}
const onClick = (event)=>{
var _props_onClick;
if (disabled) {
event.preventDefault();
return;
}
activeDescendantController.focus(id);
// handle selection change
selectOption(event, optionData);
onOptionClick(event);
(_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
};
// register option data with context
_react.useEffect(()=>{
if (id && optionRef.current) {
return registerOption(optionData, optionRef.current);
}
}, [
id,
optionData,
registerOption
]);
const semanticProps = multiselect ? {
role: 'menuitemcheckbox',
'aria-checked': selected
} : {
role: 'option',
'aria-selected': selected
};
return {
components: {
root: 'div',
checkIcon: 'span'
},
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, optionRef),
'aria-disabled': disabled ? 'true' : undefined,
id,
...semanticProps,
...props,
onClick
}), {
elementType: 'div'
}),
checkIcon: _reactutilities.slot.optional(props.checkIcon, {
renderByDefault: true,
defaultProps: {
'aria-hidden': 'true',
children: CheckIcon
},
elementType: 'span'
}),
disabled,
multiselect,
selected,
// no longer used
focusVisible: false,
active: false
};
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,347 @@
"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, {
optionClassNames: function() {
return optionClassNames;
},
useOptionStyles_unstable: function() {
return useOptionStyles_unstable;
}
});
const _react = require("@griffel/react");
const optionClassNames = {
root: 'fui-Option',
checkIcon: 'fui-Option__checkIcon'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bt984gj: "f122n59",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
sj55zd: "f19n0e5",
i8kkvl: "f1ufnopg",
Bceei9c: "f1k6fduh",
mc9l5x: "f22iagw",
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bg96gwp: "f1i3iumi",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fm5eomj",
qhf8xq: "f10pi13n",
Jwef8y: "f1knas48",
Bi91k9c: "feu1g3u",
zqbkvg: "fo79ri9",
h82x05: [
"f1osiabc",
"f1e8le25"
],
cqj998: "f1yusjty",
j3hlsh: [
"f1e8le25",
"f1osiabc"
],
ecr2s2: "fb40n2d",
lj723h: "f1g4hkjv",
Btxx2vb: "f1lnr2zp",
sltcwy: [
"f1ogfk9z",
"f1g7j8ec"
],
dnwvvm: "fiuf46r",
Blyvkvs: [
"f1g7j8ec",
"f1ogfk9z"
]
},
active: {
Bowz1zl: "f11vrvdw",
oxogb1: "f17hxjb7",
Ix2sn8: "f1dha69c",
q7v32p: "f1lm7500",
B7cbj04: 0,
Bewtojm: 0,
b50fsz: 0,
B1wzb3v: 0,
Bqwk70n: 0,
B37u8z8: 0,
avt0cx: 0,
f0sref: 0,
B9fkznv: 0,
Be3o27t: 0,
Bertapg: 0,
B53xpsf: 0,
Bsv72rj: 0,
B39dzdd: 0,
Btq9bd3: 0,
Bqfxd14: 0,
atup0s: "fo7xqb",
Fffuxt: 0,
Bttcd12: 0,
Beitzug: 0,
Bqougee: 0,
B86i8pi: "f1kurthe",
Bhijsxg: "fwq15dy",
kktds4: "f1pb3wry",
Bmau3bo: [
"ftjv2f4",
"f1flhb1f"
],
npektv: [
"f1flhb1f",
"ftjv2f4"
]
},
disabled: {
sj55zd: "f1s2aq7o",
Jwef8y: "f9ql6rf",
Bi91k9c: "fvgxktp",
zqbkvg: "f185j3qj",
h82x05: [
"f1dligi3",
"f1vydzie"
],
cqj998: "fjw1di3",
j3hlsh: [
"f1vydzie",
"f1dligi3"
],
ecr2s2: "fgj9um3",
lj723h: "f19wldhg",
Btxx2vb: "f1ss0kt2",
sltcwy: [
"f1t6oli3",
"fjy9ci8"
],
dnwvvm: "fresaxk",
Blyvkvs: [
"fjy9ci8",
"f1t6oli3"
],
Bbusuzp: "f1dcs8yz"
},
selected: {},
checkIcon: {
Bnnss6s: "fi64zpg",
Be2twd7: "fod5ikn",
Frg6f3: [
"f18b9hdq",
"fn6qj8t"
],
t21cq0: [
"f1xk557c",
"f1h9en5y"
],
Bcdw1i0: "fd7fpy0",
Bo70h7d: "fvc9v3g"
},
selectedCheck: {
Bcdw1i0: "f1022m68"
},
multiselectCheck: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f1l3cf7o",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fq9zq91",
B7ck84d: "f1ewtqcl",
mc9l5x: "f22iagw",
Bt984gj: "f122n59",
Brf1p80: "f4d9j23",
Bkfmm31: "f1w9h62z",
Be2twd7: "f1ugzwwg",
Bqenvij: "fd461yt",
a9b677: "fjw5fx7",
Bcdw1i0: "f1022m68"
},
selectedMultiselectCheck: {
De3pzq: "ftywsgz",
sj55zd: "fqpbvvt",
g2u3we: "f3xi7mh",
h3c5rm: [
"ftovhe4",
"f1wczvin"
],
B9xav0g: "f68vbr6",
zhjwy3: [
"f1wczvin",
"ftovhe4"
]
},
checkDisabled: {
sj55zd: "f1s2aq7o",
Bbusuzp: "f1dcs8yz"
},
multiselectCheckDisabled: {
g2u3we: "f1r1t4y1",
h3c5rm: [
"fmj8ijw",
"figx54m"
],
B9xav0g: "f360ss8",
zhjwy3: [
"figx54m",
"fmj8ijw"
]
}
}, {
d: [
".f122n59{align-items:center;}",
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f19n0e5{color:var(--colorNeutralForeground1);}",
".f1ufnopg{column-gap:var(--spacingHorizontalXS);}",
".f1k6fduh{cursor:pointer;}",
".f22iagw{display:flex;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}",
{
p: -1
}
],
".f10pi13n{position:relative;}",
".f11vrvdw[data-activedescendant-focusvisible]::after{content:\"\";}",
".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}",
".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}",
".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}",
[
".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}",
{
p: -2
}
],
[
".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}",
".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}",
".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}",
".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".fi64zpg{flex-shrink:0;}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}",
".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}",
".f1xk557c{margin-right:var(--spacingHorizontalXXS);}",
".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}",
".fd7fpy0{visibility:hidden;}",
".fvc9v3g svg{display:block;}",
".f1022m68{visibility:visible;}",
[
".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}",
{
p: -2
}
],
[
".fq9zq91{border-radius:var(--borderRadiusSmall);}",
{
p: -1
}
],
".f1ewtqcl{box-sizing:border-box;}",
".f4d9j23{justify-content:center;}",
".f1w9h62z{fill:currentColor;}",
".f1ugzwwg{font-size:12px;}",
".fd461yt{height:16px;}",
".fjw5fx7{width:16px;}",
".ftywsgz{background-color:var(--colorCompoundBrandBackground);}",
".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}",
".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}",
".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}",
".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}",
".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}",
".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}",
".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}",
".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
h: [
".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}",
".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}",
".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}",
".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
a: [
".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}",
".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}",
".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}",
".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}",
".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}",
".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}",
".fgj9um3:active{background-color:var(--colorTransparentBackground);}",
".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}",
".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}",
".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}",
".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}",
".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}"
],
m: [
[
"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useOptionStyles_unstable = (state)=>{
'use no memo';
const { disabled, multiselect, selected } = state;
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
if (state.checkIcon) {
state.checkIcon.className = (0, _react.mergeClasses)(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);
}
return state;
};
File diff suppressed because one or more lines are too long
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OptionGroup", {
enumerable: true,
get: function() {
return OptionGroup;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useOptionGroup = require("./useOptionGroup");
const _renderOptionGroup = require("./renderOptionGroup");
const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const OptionGroup = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useOptionGroup.useOptionGroup_unstable)(props, ref);
(0, _useOptionGroupStylesstyles.useOptionGroupStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useOptionGroupStyles_unstable')(state);
return (0, _renderOptionGroup.renderOptionGroup_unstable)(state);
});
OptionGroup.displayName = 'OptionGroup';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n\n useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["OptionGroup","React","forwardRef","props","ref","state","useOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","renderOptionGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACiB;mCACG;4CACG;qCAGF;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAE9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
/**
* State used in rendering OptionGroup
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n /** The root group wrapper */\n root: NonNullable<Slot<'div'>>;\n\n /**\n * The option group label, displayed as static text before the child options.\n * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n */\n label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAkBA;;CAEC"}
@@ -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, {
OptionGroup: function() {
return _OptionGroup.OptionGroup;
},
optionGroupClassNames: function() {
return _useOptionGroupStylesstyles.optionGroupClassNames;
},
renderOptionGroup_unstable: function() {
return _renderOptionGroup.renderOptionGroup_unstable;
},
useOptionGroupStyles_unstable: function() {
return _useOptionGroupStylesstyles.useOptionGroupStyles_unstable;
},
useOptionGroup_unstable: function() {
return _useOptionGroup.useOptionGroup_unstable;
}
});
const _OptionGroup = require("./OptionGroup");
const _renderOptionGroup = require("./renderOptionGroup");
const _useOptionGroup = require("./useOptionGroup");
const _useOptionGroupStylesstyles = require("./useOptionGroupStyles.styles");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,WAAW;eAAXA,wBAAW;;IAIXC,qBAAqB;eAArBA,iDAAqB;;IAFrBC,0BAA0B;eAA1BA,6CAA0B;;IAEHC,6BAA6B;eAA7BA,yDAA6B;;IADpDC,uBAAuB;eAAvBA,uCAAuB;;;6BAHJ;mCAEe;gCACH;4CAC6B"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderOptionGroup_unstable", {
enumerable: true,
get: function() {
return renderOptionGroup_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderOptionGroup_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.label && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.label, {
children: state.label.children
}),
state.root.children
]
});
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n assertSlots<OptionGroupSlots>(state);\n\n return (\n <state.root>\n {state.label && <state.label>{state.label.children}</state.label>}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["renderOptionGroup_unstable","state","assertSlots","_jsxs","root","label","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,KAAK,EAAA;0BAAEJ,MAAMI,KAAK,CAACE,QAAQ;;YACjDN,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}
@@ -0,0 +1,41 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOptionGroup_unstable", {
enumerable: true,
get: function() {
return useOptionGroup_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 useOptionGroup_unstable = (props, ref)=>{
const labelId = (0, _reactutilities.useId)('group-label');
const { label } = props;
return {
components: {
root: 'div',
label: 'span'
},
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: ref,
role: 'group',
'aria-labelledby': label ? labelId : undefined,
...props
}), {
elementType: 'div'
}),
label: _reactutilities.slot.optional(label, {
defaultProps: {
id: labelId,
role: 'presentation'
},
elementType: 'span'
})
};
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: ref as React.Ref<HTMLDivElement>,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n { elementType: 'div' },\n ),\n label: slot.optional(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n elementType: 'span',\n }),\n };\n};\n"],"names":["useOptionGroup_unstable","props","ref","labelId","useId","label","components","root","slot","always","getIntrinsicElementProps","role","undefined","elementType","optional","defaultProps","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCAC+B;AAY/C,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,UAAUC,IAAAA,qBAAAA,EAAM;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGJ;IAElB,OAAO;QACLK,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLS,MAAM;YACN,mBAAmBN,QAAQF,UAAUS;YACrC,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBR,OAAOG,oBAAAA,CAAKM,QAAQ,CAACT,OAAO;YAC1BU,cAAc;gBACZC,IAAIb;gBACJQ,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF"}
@@ -0,0 +1,108 @@
"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, {
optionGroupClassNames: function() {
return optionGroupClassNames;
},
useOptionGroupStyles_unstable: function() {
return useOptionGroupStyles_unstable;
}
});
const _react = require("@griffel/react");
const optionGroupClassNames = {
root: 'fui-OptionGroup',
label: 'fui-OptionGroup__label'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
mc9l5x: "f22iagw",
Beiy3e4: "f1vx9l62",
Belr9w4: "fiut8dr",
B8lkq7l: "f1xxzjds",
eii1in: 0,
H93o2g: 0,
Gwp8xu: 0,
Bd39igo: "f16cmn8k",
om0q45: "f5642y",
Hl9o3s: "ffdf81h",
sl1c2c: 0,
z4hxbw: 0,
B0i58d9: 0,
Bi9x0x4: 0,
Bgurq3m: "f1bsn9kn"
},
label: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
sj55zd: "f11d4kpn",
mc9l5x: "ftgm304",
Be2twd7: "fy9rknc",
Bhrd7zp: "fl43uef",
Bg96gwp: "fwrc4pm",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1mpq0zz"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1vx9l62{flex-direction:column;}",
".fiut8dr{row-gap:var(--spacingHorizontalXXS);}",
".f1xxzjds:not(:last-child)::after{content:\"\";}",
[
".f16cmn8k:not(:last-child)::after{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}",
{
p: -1
}
],
".f5642y:not(:last-child)::after{display:block;}",
".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}",
[
".f1bsn9kn:not(:last-child)::after{margin:0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);}",
{
p: -1
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f11d4kpn{color:var(--colorNeutralForeground3);}",
".ftgm304{display:block;}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
[
".f1mpq0zz{padding:var(--spacingHorizontalS) var(--spacingHorizontalSNudge);}",
{
p: -1
}
]
]
});
const useOptionGroupStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
if (state.label) {
state.label.className = (0, _react.mergeClasses)(optionGroupClassNames.label, styles.label, state.label.className);
}
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n }\n },\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n return state;\n};\n"],"names":["optionGroupClassNames","useOptionGroupStyles_unstable","root","label","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IA+BIC,6BAA6B;eAA7BA;;;uBAhCwB;AAClC,MAAMD,wBAAwB;IACjCE,MAAM;IACNC,OAAO;AACX;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAjB,OAAA;QAAAkB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAApB,QAAA;QAAAqB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAyBX,MAAMnC,gCAAiCoC,CAAAA;IAC9C;IACA,MAAMC,SAASlC;IACfiC,MAAMnC,IAAI,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBE,IAAI,EAAEoC,OAAOpC,IAAI,EAAEmC,MAAMnC,IAAI,CAACqC,SAAS;IACjG,IAAIF,MAAMlC,KAAK,EAAE;QACbkC,MAAMlC,KAAK,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBG,KAAK,EAAEmC,OAAOnC,KAAK,EAAEkC,MAAMlC,KAAK,CAACoC,SAAS;IACzG;IACA,OAAOF;AACX"}