Lago/power-apps-codeapps-blog-part2
Private
Public Access
1
0
Fork 0
Code Activity

feat: Fluent UI Outlook Lite + connections mockup

Browse Source
This commit is contained in:
Lago
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
node_modules/@fluentui/react-combobox/lib/components/Combobox/Combobox.js generated vendored Normal file
View File

@@ -0,0 +1,17 @@
'use client';
import * as React from 'react';
import { useCombobox_unstable } from './useCombobox';
import { renderCombobox_unstable } from './renderCombobox';
import { useComboboxStyles_unstable } from './useComboboxStyles.styles';
import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
/**
* Combobox component: a selection control that allows users to choose from a set of possible options
*/ export const Combobox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useCombobox_unstable(props, ref);
const contextValues = useComboboxContextValues(state);
useComboboxStyles_unstable(state);
useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);
return renderCombobox_unstable(state, contextValues);
});
Combobox.displayName = 'Combobox';

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/Combobox.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * 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":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/Combobox.types.js generated vendored Normal file
View File

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

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/Combobox.types.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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 * Combobox Props without design-only props.\n */\nexport type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;\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/**\n * State used in rendering Combobox, without design-only state.\n */\nexport type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;\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":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

4
node_modules/@fluentui/react-combobox/lib/components/Combobox/index.js generated vendored Normal file
View File

@@ -0,0 +1,4 @@
export { Combobox } from './Combobox';
export { renderCombobox_unstable } from './renderCombobox';
export { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';
export { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n ActiveOptionChangeData,\n BaseComboboxProps,\n BaseComboboxState,\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

31
node_modules/@fluentui/react-combobox/lib/components/Combobox/renderCombobox.js generated vendored Normal file
View File

@@ -0,0 +1,31 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { Portal } from '@fluentui/react-portal';
import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
import { assertSlots } from '@fluentui/react-utilities';
import { ComboboxContext } from '../../contexts/ComboboxContext';
import { ListboxProvider } from '../../contexts/ListboxContext';
/**
* Render the final JSX of Combobox
*/ export const renderCombobox_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(state.root, {
children: /*#__PURE__*/ _jsx(ActiveDescendantContextProvider, {
value: contextValues.activeDescendant,
children: /*#__PURE__*/ _jsx(ListboxProvider, {
value: contextValues.listbox,
children: /*#__PURE__*/ _jsxs(ComboboxContext.Provider, {
value: contextValues.combobox,
children: [
/*#__PURE__*/ _jsx(state.input, {}),
state.clearIcon && /*#__PURE__*/ _jsx(state.clearIcon, {}),
state.expandIcon && /*#__PURE__*/ _jsx(state.expandIcon, {}),
state.listbox && (state.inlinePopup ? /*#__PURE__*/ _jsx(state.listbox, {}) : /*#__PURE__*/ _jsx(Portal, {
mountNode: state.mountNode,
children: /*#__PURE__*/ _jsx(state.listbox, {})
}))
]
})
})
})
});
};

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/renderCombobox.js.map generated vendored Normal file
View File

@@ -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 type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\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":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,eAAe,QAAQ,gCAAgC;AAEhE;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAA0BC;IAChEL,YAA2BI;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACP;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,cAAA,MAACR,gBAAgBS,QAAQ;oBAACH,OAAOF,cAAcM,QAAQ;;sCACrD,KAACP,MAAMQ,KAAK;wBACXR,MAAMS,SAAS,kBAAI,KAACT,MAAMS,SAAS;wBACnCT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,iBAChB,KAACX,MAAMK,OAAO,sBAEd,KAACX;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,cAAA,KAACZ,MAAMK,OAAO;0BAElB;;;;;;AAOd,EAAE"}

206
node_modules/@fluentui/react-combobox/lib/components/Combobox/useCombobox.js generated vendored Normal file
View File

@@ -0,0 +1,206 @@
'use client';
import * as React from 'react';
import { useActiveDescendant } from '@fluentui/react-aria';
import { useFieldControlProps_unstable } from '@fluentui/react-field';
import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
import { getPartitionedNativeProps, mergeCallbacks, useEventCallback, useId, useMergedRefs, slot, useOnClickOutside } from '@fluentui/react-utilities';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
import { Listbox } from '../Listbox/Listbox';
import { useListboxSlot } from '../../utils/useListboxSlot';
import { useInputTriggerSlot } from './useInputTriggerSlot';
import { optionClassNames } from '../Option/useOptionStyles.styles';
/**
* Create the base state required to render Combobox, without design-only props.
*
* @param props - props from this instance of Combobox (without appearance and size)
* @param ref - reference to root HTMLInputElement of Combobox
*/ export const useComboboxBase_unstable = (props, ref)=>{
'use no memo';
var _state_clearIcon, _state_clearIcon1;
// Merge props from surrounding <Field>, if any
props = useFieldControlProps_unstable(props, {
supportsLabelFor: true,
supportsRequired: true
});
const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
matchOption: (el)=>el.classList.contains(optionClassNames.root)
});
const comboboxInternalState = useComboboxBaseState({
...props,
editable: true,
activeDescendantController
});
const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;
const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } = baseState;
const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
const { disableAutoFocus = false, freeform, inlinePopup } = props;
const comboId = useId('combobox-');
const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'children'
]
});
const triggerRef = React.useRef(null);
const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
state: comboboxInternalState,
triggerRef,
defaultProps: {
children: props.children,
disableAutoFocus
}
});
var _props_input;
const triggerSlot = useInputTriggerSlot((_props_input = props.input) !== null && _props_input !== void 0 ? _props_input : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
state: comboboxInternalState,
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 = slot.always(props.root, {
defaultProps: {
'aria-owns': !inlinePopup && open ? listbox === null || listbox === void 0 ? void 0 : listbox.id : undefined,
...rootNativeProps
},
elementType: 'div'
});
rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);
const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;
const state = {
components: {
root: 'div',
input: 'input',
expandIcon: 'span',
listbox: Listbox,
clearIcon: 'span'
},
root: rootSlot,
input: triggerSlot,
listbox: open || hasFocus ? listbox : undefined,
clearIcon: slot.optional(props.clearIcon, {
defaultProps: {
'aria-hidden': 'true'
},
elementType: 'span',
renderByDefault: true
}),
expandIcon: slot.optional(props.expandIcon, {
renderByDefault: true,
defaultProps: {
'aria-disabled': disabled ? 'true' : undefined,
'aria-expanded': open,
role: 'button'
},
elementType: 'span'
}),
showClearIcon,
activeDescendantController,
...baseState
};
const { targetDocument } = useFluent();
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 = useEventCallback(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 = useEventCallback(mergeCallbacks((_state_clearIcon = state.clearIcon) === null || _state_clearIcon === void 0 ? void 0 : _state_clearIcon.onMouseDown, (ev)=>{
ev.preventDefault();
}));
const onClearIconClick = useEventCallback(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;
};
/**
* Create the state required to render Combobox.
*
* The returned state can be modified with hooks such as useComboboxStyles_unstable,
* before being passed to renderCombobox_unstable.
*
* @param props - props from this instance of Combobox
* @param ref - reference to root HTMLElement of Combobox
*/ export const useCombobox_unstable = (props, ref)=>{
'use no memo';
const { appearance = 'outline', size = 'medium', ...baseProps } = props;
const baseState = useComboboxBase_unstable(baseProps, ref);
if (baseState.clearIcon) {
var _baseState_clearIcon;
var _children;
(_children = (_baseState_clearIcon = baseState.clearIcon).children) !== null && _children !== void 0 ? _children : _baseState_clearIcon.children = /*#__PURE__*/ React.createElement(DismissIcon, null);
}
if (baseState.expandIcon) {
var _baseState_expandIcon;
var _children1;
(_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronDownIcon, null);
}
return {
...baseState,
appearance,
size
};
};

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/useCombobox.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

411
node_modules/@fluentui/react-combobox/lib/components/Combobox/useComboboxStyles.styles.js generated vendored Normal file
View File

@@ -0,0 +1,411 @@
'use client';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { __styles, mergeClasses, shorthands } from '@griffel/react';
import { iconSizes } from '../../utils/internalTokens';
export 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__*/__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",
wi16st: "fsrmcvb",
ywj3b2: "f1t3k7v9",
umuwi5: "fjw5xc1",
Blcqepd: "f1xdyd5c",
nplu4u: "fatpbeo",
Bioka5o: "fb7uyps",
Bnupc0a: "fx04xgm",
bing71: "f1c7in40",
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: "f1l4zc64",
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
B6oc9vd: "fvs00aa",
ak43y8: ["f1assf6x", "f4ruux4"],
wmxk5l: "f1z0osm6",
B50zh58: ["f4ruux4", "f1assf6x"],
Bvq3b66: "f1b473iu",
Brahy3i: ["f381qr8", "ft4skwv"],
zoxjo1: "f1qzcrsd",
an54nd: ["ft4skwv", "f381qr8"]
},
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"],
Bcq6wej: "f9dbb4x",
Jcjdmf: ["f3qs60o", "f5u9ap2"],
sc4o1m: "fwd1oij",
Bosien3: ["f5u9ap2", "f3qs60o"]
}
}, {
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);}", ".f1b473iu:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f381qr8:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".ft4skwv:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1qzcrsd:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
m: [["@media screen and (prefers-reduced-motion: reduce){.fsrmcvb::after{transition-duration:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media screen and (prefers-reduced-motion: reduce){.f1t3k7v9::after{transition-delay:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media screen and (prefers-reduced-motion: reduce){.fx04xgm:focus-within::after{transition-duration:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media screen and (prefers-reduced-motion: reduce){.f1c7in40:focus-within::after{transition-delay:0.01ms;}}", {
m: "screen and (prefers-reduced-motion: reduce)"
}], ["@media (forced-colors: active){.f9dbb4x{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f3qs60o{border-right-color:GrayText;}.f5u9ap2{border-left-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.fwd1oij{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);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}"],
a: [".fvs00aa:active{border-top-color:var(--colorNeutralStroke1Pressed);}", ".f1assf6x:active{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f4ruux4:active{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1z0osm6:active{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"]
});
const useInputStyles = /*#__PURE__*/__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__*/__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;}"]
});
/**
* Apply styling to the Combobox slots based on the state
*/
export 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 = 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 = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
if (state.listbox) {
state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
}
if (state.clearIcon) {
state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
}
return state;
};

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/useComboboxStyles.styles.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

256
node_modules/@fluentui/react-combobox/lib/components/Combobox/useComboboxStyles.styles.raw.js generated vendored Normal file
View File

@@ -0,0 +1,256 @@
'use client';
import { tokens, typographyStyles } from '@fluentui/react-theme';
import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
import { iconSizes } from '../../utils/internalTokens';
export 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 = makeStyles({
root: {
alignItems: 'center',
borderRadius: tokens.borderRadiusMedium,
boxSizing: 'border-box',
columnGap: tokens.spacingHorizontalXXS,
display: 'inline-grid',
gridTemplateColumns: '1fr auto',
justifyContent: 'space-between',
minWidth: '250px',
position: 'relative',
verticalAlign: 'middle',
// windows high contrast mode focus indicator
':focus-within': {
outlineWidth: '2px',
outlineStyle: 'solid',
outlineColor: 'transparent'
},
// bottom focus border, shared with Input, Select, and SpinButton
'::after': {
boxSizing: 'border-box',
content: '""',
position: 'absolute',
left: '-1px',
bottom: '-1px',
right: '-1px',
height: `max(2px, ${tokens.borderRadiusMedium})`,
borderBottomLeftRadius: tokens.borderRadiusMedium,
borderBottomRightRadius: tokens.borderRadiusMedium,
borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,
clipPath: 'inset(calc(100% - 2px) 0 0 0)',
transform: 'scaleX(0)',
transitionProperty: 'transform',
transitionDuration: tokens.durationUltraFast,
transitionDelay: tokens.curveAccelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within::after': {
transform: 'scaleX(1)',
transitionProperty: 'transform',
transitionDuration: tokens.durationNormal,
transitionDelay: tokens.curveDecelerateMid,
'@media screen and (prefers-reduced-motion: reduce)': {
transitionDuration: '0.01ms',
transitionDelay: '0.01ms'
}
},
':focus-within:active::after': {
borderBottomColor: tokens.colorCompoundBrandStrokePressed
}
},
listbox: {
boxShadow: `${tokens.shadow16}`,
borderRadius: tokens.borderRadiusMedium,
maxHeight: '80vh',
boxSizing: 'border-box'
},
listboxCollapsed: {
display: 'none'
},
// When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.
// This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.
inlineListbox: {
zIndex: 1
},
// size variants
small: {
height: fieldHeights.small,
paddingRight: tokens.spacingHorizontalSNudge
},
medium: {
height: fieldHeights.medium,
paddingRight: tokens.spacingHorizontalMNudge
},
large: {
columnGap: tokens.spacingHorizontalSNudge,
height: fieldHeights.large,
paddingRight: tokens.spacingHorizontalM
},
// appearance variants
outline: {
backgroundColor: tokens.colorNeutralBackground1,
border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,
borderBottomColor: tokens.colorNeutralStrokeAccessible
},
outlineInteractive: {
'&:hover': {
...shorthands.borderColor(tokens.colorNeutralStroke1Hover),
borderBottomColor: tokens.colorNeutralStrokeAccessibleHover
},
'&:active': {
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
},
'&:focus-within': {
...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),
borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed
}
},
underline: {
backgroundColor: tokens.colorTransparentBackground,
borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,
borderRadius: '0'
},
'filled-lighter': {
backgroundColor: tokens.colorNeutralBackground1,
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
},
'filled-darker': {
backgroundColor: tokens.colorNeutralBackground3,
border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`
},
invalid: {
':not(:focus-within),:hover:not(:focus-within)': {
...shorthands.borderColor(tokens.colorPaletteRedBorder2)
}
},
invalidUnderline: {
':not(:focus-within),:hover:not(:focus-within)': {
borderBottomColor: tokens.colorPaletteRedBorder2
}
},
disabled: {
cursor: 'not-allowed',
backgroundColor: tokens.colorTransparentBackground,
...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
'@media (forced-colors: active)': {
...shorthands.borderColor('GrayText')
}
}
});
const useInputStyles = makeStyles({
input: {
alignSelf: 'stretch',
backgroundColor: tokens.colorTransparentBackground,
border: 'none',
color: tokens.colorNeutralForeground1,
fontFamily: tokens.fontFamilyBase,
'&:focus': {
outlineStyle: 'none'
},
'&::placeholder': {
color: tokens.colorNeutralForeground4,
opacity: 1
}
},
// size variants
small: {
...typographyStyles.caption1,
padding: `0 0 0 ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`
},
medium: {
...typographyStyles.body1,
padding: `0 0 0 ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`
},
large: {
...typographyStyles.body2,
padding: `0 0 0 ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`
},
disabled: {
color: tokens.colorNeutralForegroundDisabled,
backgroundColor: tokens.colorTransparentBackground,
cursor: 'not-allowed',
'::placeholder': {
color: tokens.colorNeutralForegroundDisabled
}
}
});
const useIconStyles = makeStyles({
icon: {
boxSizing: 'border-box',
color: tokens.colorNeutralStrokeAccessible,
cursor: 'pointer',
display: 'block',
fontSize: tokens.fontSizeBase500,
// the SVG must have display: block for accurate positioning
// otherwise an extra inline space is inserted after the svg element
'& svg': {
display: 'block'
}
},
hidden: {
display: 'none'
},
visuallyHidden: {
clip: 'rect(0px, 0px, 0px, 0px)',
height: '1px',
margin: '-1px',
overflow: 'hidden',
padding: '0px',
width: '1px',
position: 'absolute'
},
// icon size variants
small: {
fontSize: iconSizes.small,
marginLeft: tokens.spacingHorizontalXXS
},
medium: {
fontSize: iconSizes.medium,
marginLeft: tokens.spacingHorizontalXXS
},
large: {
fontSize: iconSizes.large,
marginLeft: tokens.spacingHorizontalSNudge
},
disabled: {
color: tokens.colorNeutralForegroundDisabled,
cursor: 'not-allowed'
}
});
/**
* Apply styling to the Combobox slots based on the state
*/ export 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 = 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 = mergeClasses(comboboxClassNames.input, inputStyles.input, inputStyles[size], disabled && inputStyles.disabled, state.input.className);
if (state.listbox) {
state.listbox.className = mergeClasses(comboboxClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);
}
if (state.expandIcon) {
state.expandIcon.className = mergeClasses(comboboxClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearIcon && iconStyles.visuallyHidden, state.expandIcon.className);
}
if (state.clearIcon) {
state.clearIcon.className = mergeClasses(comboboxClassNames.clearIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearIcon && iconStyles.hidden, state.clearIcon.className);
}
return state;
};

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/useComboboxStyles.styles.raw.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

109
node_modules/@fluentui/react-combobox/lib/components/Combobox/useInputTriggerSlot.js generated vendored Normal file
View File

@@ -0,0 +1,109 @@
'use client';
import * as React from 'react';
import { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';
import { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';
import { useTriggerSlot } from '../../utils/useTriggerSlot';
import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
/**
* useInputTriggerSlot returns a tuple of trigger/listbox shorthand,
* with the semantics and event handlers needed for the Combobox and Dropdown components.
* The element type of the ref should always match the element type used in the trigger shorthand.
*
* @internal
*/ export 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 = useTriggerSlot(triggerFromProps, ref, {
state: options.state,
defaultProps,
elementType: 'input',
activeDescendantController
});
trigger.onChange = mergeCallbacks(trigger.onChange, onChange);
trigger.onBlur = 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 = useEventCallback((event)=>{
if (!open && getDropdownActionFromKey(event) === 'Type') {
setOpen(event, true);
}
// clear activedescendant when moving the text insertion cursor
if (event.key === ArrowLeft || event.key === ArrowRight) {
setHideActiveDescendant(true);
} else {
setHideActiveDescendant(false);
}
// update typing state to true if the user is typing
const action = 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;
}

1
node_modules/@fluentui/react-combobox/lib/components/Combobox/useInputTriggerSlot.js.map generated vendored Normal file
View File

File diff suppressed because one or more lines are too long