@fluentui/react-combobox 9.13.9 → 9.13.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +41 -2
- package/lib/Combobox.js.map +1 -1
- package/lib/Dropdown.js.map +1 -1
- package/lib/Listbox.js.map +1 -1
- package/lib/Option.js.map +1 -1
- package/lib/OptionGroup.js.map +1 -1
- package/lib/Selection.js.map +1 -1
- package/lib/components/Combobox/Combobox.js.map +1 -1
- package/lib/components/Combobox/Combobox.types.js.map +1 -1
- package/lib/components/Combobox/index.js.map +1 -1
- package/lib/components/Combobox/renderCombobox.js.map +1 -1
- package/lib/components/Combobox/useCombobox.js.map +1 -1
- package/lib/components/Combobox/useComboboxStyles.styles.js +1 -2
- package/lib/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib/components/Dropdown/index.js.map +1 -1
- package/lib/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
- package/lib/components/Dropdown/useDropdown.js.map +1 -1
- package/lib/components/Dropdown/useDropdownStyles.styles.js +1 -2
- package/lib/components/Listbox/Listbox.js.map +1 -1
- package/lib/components/Listbox/Listbox.types.js.map +1 -1
- package/lib/components/Listbox/index.js.map +1 -1
- package/lib/components/Listbox/renderListbox.js.map +1 -1
- package/lib/components/Listbox/useListbox.js.map +1 -1
- package/lib/components/Listbox/useListboxStyles.styles.js +1 -2
- package/lib/components/Option/Option.js.map +1 -1
- package/lib/components/Option/Option.types.js.map +1 -1
- package/lib/components/Option/index.js.map +1 -1
- package/lib/components/Option/renderOption.js.map +1 -1
- package/lib/components/Option/useOption.js.map +1 -1
- package/lib/components/Option/useOptionStyles.styles.js +1 -2
- package/lib/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib/components/OptionGroup/index.js.map +1 -1
- package/lib/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib/components/OptionGroup/useOptionGroupStyles.styles.js +1 -2
- package/lib/contexts/ComboboxContext.js.map +1 -1
- package/lib/contexts/ListboxContext.js.map +1 -1
- package/lib/contexts/useComboboxContextValues.js.map +1 -1
- package/lib/contexts/useListboxContextValues.js.map +1 -1
- package/lib/hooks/useComboboxFilter.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/ComboboxBase.types.js.map +1 -1
- package/lib/utils/OptionCollection.types.js.map +1 -1
- package/lib/utils/Selection.types.js.map +1 -1
- package/lib/utils/dropdownKeyActions.js.map +1 -1
- package/lib/utils/internalTokens.js.map +1 -1
- package/lib/utils/useComboboxBaseState.js +0 -1
- package/lib/utils/useComboboxBaseState.js.map +1 -1
- package/lib/utils/useComboboxPositioning.js.map +1 -1
- package/lib/utils/useListboxSlot.js.map +1 -1
- package/lib/utils/useOptionCollection.js.map +1 -1
- package/lib/utils/useSelection.js.map +1 -1
- package/lib/utils/useTriggerSlot.js.map +1 -1
- package/lib-commonjs/Combobox.js.map +1 -1
- package/lib-commonjs/Dropdown.js.map +1 -1
- package/lib-commonjs/Listbox.js.map +1 -1
- package/lib-commonjs/Option.js.map +1 -1
- package/lib-commonjs/OptionGroup.js.map +1 -1
- package/lib-commonjs/Selection.js.map +1 -1
- package/lib-commonjs/components/Combobox/Combobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/Combobox.types.js.map +1 -1
- package/lib-commonjs/components/Combobox/index.js.map +1 -1
- package/lib-commonjs/components/Combobox/renderCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useCombobox.js.map +1 -1
- package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js +1 -1
- package/lib-commonjs/components/Combobox/useInputTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/Dropdown.types.js.map +1 -1
- package/lib-commonjs/components/Dropdown/index.js.map +1 -1
- package/lib-commonjs/components/Dropdown/renderDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useButtonTriggerSlot.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdown.js.map +1 -1
- package/lib-commonjs/components/Dropdown/useDropdownStyles.styles.js +1 -1
- package/lib-commonjs/components/Listbox/Listbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/Listbox.types.js.map +1 -1
- package/lib-commonjs/components/Listbox/index.js.map +1 -1
- package/lib-commonjs/components/Listbox/renderListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListbox.js.map +1 -1
- package/lib-commonjs/components/Listbox/useListboxStyles.styles.js +1 -1
- package/lib-commonjs/components/Option/Option.js.map +1 -1
- package/lib-commonjs/components/Option/Option.types.js.map +1 -1
- package/lib-commonjs/components/Option/index.js.map +1 -1
- package/lib-commonjs/components/Option/renderOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOption.js.map +1 -1
- package/lib-commonjs/components/Option/useOptionStyles.styles.js +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/OptionGroup.types.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/index.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map +1 -1
- package/lib-commonjs/components/OptionGroup/useOptionGroupStyles.styles.js +1 -1
- package/lib-commonjs/contexts/ComboboxContext.js.map +1 -1
- package/lib-commonjs/contexts/ListboxContext.js.map +1 -1
- package/lib-commonjs/contexts/useComboboxContextValues.js.map +1 -1
- package/lib-commonjs/contexts/useListboxContextValues.js.map +1 -1
- package/lib-commonjs/hooks/useComboboxFilter.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/ComboboxBase.types.js.map +1 -1
- package/lib-commonjs/utils/OptionCollection.types.js.map +1 -1
- package/lib-commonjs/utils/Selection.types.js.map +1 -1
- package/lib-commonjs/utils/dropdownKeyActions.js.map +1 -1
- package/lib-commonjs/utils/internalTokens.js.map +1 -1
- package/lib-commonjs/utils/useComboboxBaseState.js +0 -1
- package/lib-commonjs/utils/useComboboxBaseState.js.map +1 -1
- package/lib-commonjs/utils/useComboboxPositioning.js.map +1 -1
- package/lib-commonjs/utils/useListboxSlot.js.map +1 -1
- package/lib-commonjs/utils/useOptionCollection.js.map +1 -1
- package/lib-commonjs/utils/useSelection.js.map +1 -1
- package/lib-commonjs/utils/useTriggerSlot.js.map +1 -1
- package/package.json +12 -28
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n activeDescendantController.focus(id);\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: '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: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n 'aria-disabled': disabled ? ('true' as const) : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n disabled,\n multiselect,\n selected,\n // no longer used\n focusVisible: false,\n active: false,\n };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyCaA;;;eAAAA;;;;iEAzCU;gCAC8C;2BAC1B;4BACQ;gCACR;AAI3C,SAASC,cAAcC,IAAwB,EAAEC,QAAyB;IACxE,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT;IAEA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBC,OAAMC,QAAQ,CAACC,OAAO,CAACN,UAAUO,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BL,cAAcK;QAChB,OAAO;YACLJ,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCK,QAAQC,IAAI,CAAC;IACf;IAEA,OAAOP;AACT;AAWO,MAAML,qBAAqB,CAACa,OAAoBC;IACrD,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYV,OAAMW,MAAM,CAAc;IAC5C,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAME,KAAKC,IAAAA,qBAAAA,EAAM,iBAAiBT,MAAMQ,EAAE;IAE1C,8CAA8C;IAC9C,MAAME,aAAahB,OAAMiB,OAAO,CAC9B,IAAO,CAAA;YAAEH;YAAIN;YAAUb,MAAMiB;YAAYH,OAAOI;QAAY,CAAA,GAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEK,YAAYC,0BAA0B,EAAE,GAAGC,IAAAA,qCAAAA;IACnD,MAAMC,cAAcC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIF,WAAW;IACrE,MAAMG,iBAAiBF,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,cAAc;IAC3E,MAAMC,WAAWH,IAAAA,0CAAAA,EAA2BC,CAAAA;QAC1C,MAAMG,kBAAkBH,IAAIG,eAAe;QAE3C,OAAOb,gBAAgBhB,aAAa6B,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMf,iBAAiBhB;IACvF;IACA,MAAMgC,eAAeP,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBR,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,aAAa;IACb,IAAIC,YAAAA,WAAAA,GAA6B/B,OAAAgC,aAAA,CAACC,2BAAAA,EAAAA;IAClC,IAAIZ,aAAa;QACfU,YAAYN,WAAAA,WAAAA,GAAWzB,OAAAgC,aAAA,CAACE,6BAAAA,EAAAA,QAAuB;IACjD;IAEA,MAAMC,UAAU,CAACC;YAYf9B;QAXA,IAAIE,UAAU;YACZ4B,MAAMC,cAAc;YACpB;QACF;QAEAlB,2BAA2BmB,KAAK,CAACxB;QAEjC,0BAA0B;QAC1Be,aAAaO,OAAOpB;QAEpBc,cAAcM;QACd9B,CAAAA,iBAAAA,MAAM6B,OAAO,AAAPA,MAAO,QAAb7B,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgB8B;IAClB;IAEA,oCAAoC;IACpCpC,OAAMuC,SAAS,CAAC;QACd,IAAIzB,MAAMJ,UAAU8B,OAAO,EAAE;YAC3B,OAAOhB,eAAeR,YAAYN,UAAU8B,OAAO;QACrD;IACF,GAAG;QAAC1B;QAAIE;QAAYQ;KAAe;IAEnC,MAAMiB,gBAAgBpB,cAClB;QAAEqB,MAAM;QAAoB,gBAAgBjB;IAAS,IACrD;QAAEiB,MAAM;QAAU,iBAAiBjB;IAAS;IAEhD,OAAO;QACLkB,YAAY;YACVC,MAAM;YACNC,WAAW;QACb;QACAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FzC,KAAK0C,IAAAA,6BAAAA,EAAc1C,KAAKG;YACxB,iBAAiBF,WAAY,SAAmBX;YAChDiB;YACA,GAAG2B,aAAa;YAChB,GAAGnC,KAAK;YACR6B;QACF,IACA;YAAEe,aAAa;QAAM;QAEvBL,WAAWC,oBAAAA,CAAKK,QAAQ,CAAC7C,MAAMuC,SAAS,EAAE;YACxCO,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;gBACfzD,UAAUmC;YACZ;YACAmB,aAAa;QACf;QACA1C;QACAa;QACAI;QACA,iBAAiB;QACjB6B,cAAc;QACdC,QAAQ;IACV;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const { controller: activeDescendantController } = useActiveDescendantContext();\n const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const selected = useListboxContext_unstable(ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n });\n const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n activeDescendantController.focus(id);\n\n // handle selection change\n selectOption(event, optionData);\n\n onOptionClick(event);\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: '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: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n 'aria-disabled': disabled ? ('true' as const) : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n { elementType: 'div' },\n ),\n checkIcon: slot.optional(props.checkIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n elementType: 'span',\n }),\n disabled,\n multiselect,\n selected,\n // no longer used\n focusVisible: false,\n active: false,\n };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -344,4 +344,4 @@ const useOptionStyles_unstable = (state)=>{
|
|
|
344
344
|
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);
|
|
345
345
|
}
|
|
346
346
|
return state;
|
|
347
|
-
};
|
|
347
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
1
|
+
{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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"}
|
|
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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n /**\n * @deprecated - no longer used\n */\n selectedOptions: ComboboxState['selectedOptions'];\n\n /**\n * @deprecated - no longer used\n */\n selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0BaA,eAAAA;eAAAA;;IA2BAC,gBAAAA;eAAAA;;;sCArDiB;AA0BvB,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAAoC;IACjEC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR;AAQO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n ComboboxState,\n 'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n /**\n * @deprecated - no longer used\n */\n selectedOptions: ComboboxState['selectedOptions'];\n\n /**\n * @deprecated - no longer used\n */\n selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n activeOption: undefined,\n appearance: 'outline',\n focusVisible: false,\n open: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n setOpen() {\n // noop\n },\n size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0BaA,eAAAA;eAAAA;;IA2BAC,gBAAAA;eAAAA;;;sCArDiB;AA0BvB,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAAoC;IACjEC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR;AAQO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n | 'activeOption'\n | 'focusVisible'\n | 'getOptionById'\n | 'getOptionsMatchingValue'\n | 'multiselect'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n> & {\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n getOptionById() {\n return undefined;\n },\n getOptionsMatchingValue() {\n return [];\n },\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n onOptionClick() {\n // noop\n },\n onActiveDescendantChange() {\n // noop\n },\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","ListboxProvider","useListboxContext_unstable","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoDaA,cAAAA;eAAAA;;IAKAC,eAAAA;eAAAA;;IAHAC,0BAAAA;eAAAA;;;;iEAtDU;sCAC4C;AAuBnE,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMf,iBAAiBgB,IAAAA,mCAAAA,EAA+CX;AAEtE,MAAMH,6BAA6B,CAAIe,WAC5CC,IAAAA,wCAAAA,EAAmBlB,gBAAgB,CAACmB,MAAMhB,0BAA0B,GAAKc,SAASE;AAE7E,MAAMlB,kBAAkBD,eAAeoB,QAAQ"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n ListboxState,\n | 'activeOption'\n | 'focusVisible'\n | 'getOptionById'\n | 'getOptionsMatchingValue'\n | 'multiselect'\n | 'registerOption'\n | 'selectedOptions'\n | 'selectOption'\n | 'setActiveOption'\n> & {\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n getOptionById() {\n return undefined;\n },\n getOptionsMatchingValue() {\n return [];\n },\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n onOptionClick() {\n // noop\n },\n onActiveDescendantChange() {\n // noop\n },\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","ListboxProvider","useListboxContext_unstable","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoDaA,cAAAA;eAAAA;;IAKAC,eAAAA;eAAAA;;IAHAC,0BAAAA;eAAAA;;;;iEAtDU;sCAC4C;AAuBnE,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMf,iBAAiBgB,IAAAA,mCAAAA,EAA+CX;AAEtE,MAAMH,6BAA6B,CAAIe,WAC5CC,IAAAA,wCAAAA,EAAmBlB,gBAAgB,CAACmB,MAAMhB,0BAA0B,GAAKc,SAASE;AAE7E,MAAMlB,kBAAkBD,eAAeoB,QAAQ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n const {\n appearance,\n open,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setOpen,\n size,\n activeDescendantController,\n onOptionClick,\n onActiveDescendantChange,\n } = state;\n\n const combobox = {\n activeOption: undefined,\n appearance,\n focusVisible: false,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n setOpen,\n size,\n };\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { combobox, activeDescendant, listbox };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;AAIhB,SAASA,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,uBAAuB,EACvBC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGZ;IAEJ,MAAMa,WAAW;QACfC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYZ;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n const {\n appearance,\n open,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setOpen,\n size,\n activeDescendantController,\n onOptionClick,\n onActiveDescendantChange,\n } = state;\n\n const combobox = {\n activeOption: undefined,\n appearance,\n focusVisible: false,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n setOpen,\n size,\n };\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption: () => null,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { combobox, activeDescendant, listbox };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;AAIhB,SAASA,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,uBAAuB,EACvBC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGZ;IAEJ,MAAMa,WAAW;QACfC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYZ;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasListboxContext = useHasParentContext(ListboxContext);\n const {\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption,\n selectedOptions,\n selectOption,\n activeDescendantController,\n } = state;\n\n // get register/unregister functions from parent combobox context\n const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption: () => undefined,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { listbox, activeDescendant };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;sCACa;gCAEuB;AAEpD,SAASA,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBC,IAAAA,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJC,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGV;IAEJ,iEAAiE;IACjE,MAAMW,uBAAuBC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBf,oBAAoBU,uBAAuBJ;IAEvE,MAAMU,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdhB;QACAC;QACAC;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYf;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEO;QAASK;IAAiB;AACrC"}
|
|
1
|
+
{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasListboxContext = useHasParentContext(ListboxContext);\n const {\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption,\n selectedOptions,\n selectOption,\n activeDescendantController,\n } = state;\n\n // get register/unregister functions from parent combobox context\n const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n const listbox = {\n activeOption: undefined,\n focusVisible: false,\n getOptionById,\n getOptionsMatchingValue,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption: () => undefined,\n onOptionClick,\n onActiveDescendantChange,\n };\n\n const activeDescendant = React.useMemo(\n () => ({\n controller: activeDescendantController,\n }),\n [activeDescendantController],\n );\n\n return { listbox, activeDescendant };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;sCACa;gCAEuB;AAEpD,SAASA,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBC,IAAAA,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJC,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGV;IAEJ,iEAAiE;IACjE,MAAMW,uBAAuBC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBf,oBAAoBU,uBAAuBJ;IAEvE,MAAMU,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdhB;QACAC;QACAC;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYf;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEO;QAASK;IAAiB;AACrC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n /** Provides a custom filter for the option. */\n filter?: (optionText: string, query: string) => boolean;\n\n /** Provides a custom message to display when there are no options. */\n noOptionsMessage?: React.ReactNode;\n\n /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n optionToReactKey?: (option: T) => string;\n\n /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n optionToText?: (option: T) => string;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: T) => JSX.Element;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n if (query === '') {\n return true;\n }\n\n return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n query: string,\n options: T[],\n config: UseComboboxFilterConfig<T>,\n) {\n const {\n filter = defaultFilter,\n noOptionsMessage = \"We couldn't find any matches.\",\n optionToReactKey = defaultToString,\n optionToText = defaultToString,\n\n renderOption = (option: T) => {\n if (typeof option === 'string') {\n return <Option key={option}>{option}</Option>;\n }\n\n return (\n <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n {option.children}\n </Option>\n );\n },\n } = config;\n\n const filteredOptions = React.useMemo(() => {\n const searchValue = query.trim();\n\n return options.filter(option => filter(optionToText(option), searchValue));\n }, [options, optionToText, filter, query]);\n\n if (filteredOptions.length === 0) {\n return [\n <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n {noOptionsMessage}\n </Option>,\n ];\n }\n\n return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmCgBA;;;eAAAA;;;;iEAnCO;wBACA;AAmBvB,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAKO,SAASR,kBACdG,KAAa,EACbM,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASV,aAAa,EACtBW,mBAAmB,+BAA+B,EAClDC,mBAAmBP,eAAe,EAClCQ,eAAeR,eAAe,EAE9BS,eAAe,CAACR;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAOS,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOC,KAAKZ;eAASA;QAC/B;QAEA,OAAA,WAAA,GACES,OAAAC,aAAA,CAACC,cAAAA,EAAAA;YAAQ,GAAGX,MAAM;YAAEY,KAAKN,iBAAiBN;YAASa,MAAMN,aAAaP;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOc,QAAQ;IAGtB,CAAC,EACF,GAAGX;IAEJ,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QACpC,MAAMC,cAAcrB,MAAMsB,IAAI;QAE9B,OAAOhB,QAAQE,MAAM,CAACJ,CAAAA,SAAUI,OAAOG,aAAaP,SAASiB;IAC/D,GAAG;QAACf;QAASK;QAAcH;QAAQR;KAAM;IAEzC,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACLV,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOS,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDR;SAEJ;IACH;IAEA,OAAOU,gBAAgBM,GAAG,CAACrB,CAAAA,SAAUQ,aAAaR;AACpD"}
|
|
1
|
+
{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n /** Provides a custom filter for the option. */\n filter?: (optionText: string, query: string) => boolean;\n\n /** Provides a custom message to display when there are no options. */\n noOptionsMessage?: React.ReactNode;\n\n /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n optionToReactKey?: (option: T) => string;\n\n /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n optionToText?: (option: T) => string;\n\n /** Provides a custom render for the option. */\n renderOption?: (option: T) => JSX.Element;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n if (query === '') {\n return true;\n }\n\n return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n query: string,\n options: T[],\n config: UseComboboxFilterConfig<T>,\n) {\n const {\n filter = defaultFilter,\n noOptionsMessage = \"We couldn't find any matches.\",\n optionToReactKey = defaultToString,\n optionToText = defaultToString,\n\n renderOption = (option: T) => {\n if (typeof option === 'string') {\n return <Option key={option}>{option}</Option>;\n }\n\n return (\n <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n {option.children}\n </Option>\n );\n },\n } = config;\n\n const filteredOptions = React.useMemo(() => {\n const searchValue = query.trim();\n\n return options.filter(option => filter(optionToText(option), searchValue));\n }, [options, optionToText, filter, query]);\n\n if (filteredOptions.length === 0) {\n return [\n <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n {noOptionsMessage}\n </Option>,\n ];\n }\n\n return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmCgBA;;;eAAAA;;;;iEAnCO;wBACA;AAmBvB,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAKO,SAASR,kBACdG,KAAa,EACbM,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASV,aAAa,EACtBW,mBAAmB,+BAA+B,EAClDC,mBAAmBP,eAAe,EAClCQ,eAAeR,eAAe,EAE9BS,eAAe,CAACR;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAOS,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOC,KAAKZ;eAASA;QAC/B;QAEA,OAAA,WAAA,GACES,OAAAC,aAAA,CAACC,cAAAA,EAAAA;YAAQ,GAAGX,MAAM;YAAEY,KAAKN,iBAAiBN;YAASa,MAAMN,aAAaP;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOc,QAAQ;IAGtB,CAAC,EACF,GAAGX;IAEJ,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QACpC,MAAMC,cAAcrB,MAAMsB,IAAI;QAE9B,OAAOhB,QAAQE,MAAM,CAACJ,CAAAA,SAAUI,OAAOG,aAAaP,SAASiB;IAC/D,GAAG;QAACf;QAASK;QAAcH;QAAQR;KAAM;IAEzC,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACLV,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOS,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDR;SAEJ;IACH;IAEA,OAAOU,gBAAgBM,GAAG,CAACrB,CAAAA,SAAUQ,aAAaR;AACpD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["Combobox","ComboboxProvider","Dropdown","Listbox","ListboxProvider","Option","OptionGroup","comboboxClassNames","dropdownClassNames","listboxClassNames","optionClassNames","optionGroupClassNames","renderCombobox_unstable","renderDropdown_unstable","renderListbox_unstable","renderOptionGroup_unstable","renderOption_unstable","useButtonTriggerSlot","useComboboxBaseState","useComboboxContextValues","useComboboxFilter","useComboboxStyles_unstable","useCombobox_unstable","useDropdownStyles_unstable","useDropdown_unstable","useInputTriggerSlot","useListboxContextValues","useListboxContext_unstable","useListboxSlot","useListboxStyles_unstable","useListbox_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useOptionStyles_unstable","useOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,mDAAmD;;;;;;;;;;;;IAwBjDA,QAAQ;eAARA,kBAAQ;;IAvBDC,gBAAgB;eAAhBA,iCAAgB;;IAsCvBC,QAAQ;eAARA,kBAAQ;;IA/BRC,OAAO;eAAPA,gBAAO;;IALAC,eAAe;eAAfA,+BAAe;;IAatBC,MAAM;eAANA,cAAM;;IAsCNC,WAAW;eAAXA,wBAAW;;IA7BXC,kBAAkB;eAAlBA,4BAAkB;;IAelBC,kBAAkB;eAAlBA,4BAAkB;;IA/BlBC,iBAAiB;eAAjBA,0BAAiB;;IAQjBC,gBAAgB;eAAhBA,wBAAgB;;IAsChBC,qBAAqB;eAArBA,kCAAqB;;IA7BrBC,uBAAuB;eAAvBA,iCAAuB;;IAevBC,uBAAuB;eAAvBA,iCAAuB;;IA/BvBC,sBAAsB;eAAtBA,+BAAsB;;IA8CtBC,0BAA0B;eAA1BA,uCAA0B;;IAtC1BC,qBAAqB;eAArBA,6BAAqB;;IAiDdC,oBAAoB;eAApBA,0CAAoB;;IADpBC,oBAAoB;eAApBA,0CAAoB;;IA7DpBC,wBAAwB;eAAxBA,kDAAwB;;IA0DxBC,iBAAiB;eAAjBA,oCAAiB;;IApCxBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAcpBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAyBbC,mBAAmB;eAAnBA,wCAAmB;;IA9DnBC,uBAAuB;eAAvBA,gDAAuB;;IAHNC,0BAA0B;eAA1BA,0CAA0B;;IAkE3CC,cAAc;eAAdA,8BAAc;;IA1DrBC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;IA6CnBC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IAvCvBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;iCAnBa;gCAE2B;0CAEnB;yCACD;yBAOjC;wBAQA;0BAQA;0BAeA;6BAeA;mCAI2B;sCAGG;sCACA;qCACD;gCACL"}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["Combobox","ComboboxProvider","Dropdown","Listbox","ListboxProvider","Option","OptionGroup","comboboxClassNames","dropdownClassNames","listboxClassNames","optionClassNames","optionGroupClassNames","renderCombobox_unstable","renderDropdown_unstable","renderListbox_unstable","renderOptionGroup_unstable","renderOption_unstable","useButtonTriggerSlot","useComboboxBaseState","useComboboxContextValues","useComboboxFilter","useComboboxStyles_unstable","useCombobox_unstable","useDropdownStyles_unstable","useDropdown_unstable","useInputTriggerSlot","useListboxContextValues","useListboxContext_unstable","useListboxSlot","useListboxStyles_unstable","useListbox_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useOptionStyles_unstable","useOption_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,mDAAmD;;;;;;;;;;;;IAwBjDA,QAAQ;eAARA,kBAAQ;;IAvBDC,gBAAgB;eAAhBA,iCAAgB;;IAsCvBC,QAAQ;eAARA,kBAAQ;;IA/BRC,OAAO;eAAPA,gBAAO;;IALAC,eAAe;eAAfA,+BAAe;;IAatBC,MAAM;eAANA,cAAM;;IAsCNC,WAAW;eAAXA,wBAAW;;IA7BXC,kBAAkB;eAAlBA,4BAAkB;;IAelBC,kBAAkB;eAAlBA,4BAAkB;;IA/BlBC,iBAAiB;eAAjBA,0BAAiB;;IAQjBC,gBAAgB;eAAhBA,wBAAgB;;IAsChBC,qBAAqB;eAArBA,kCAAqB;;IA7BrBC,uBAAuB;eAAvBA,iCAAuB;;IAevBC,uBAAuB;eAAvBA,iCAAuB;;IA/BvBC,sBAAsB;eAAtBA,+BAAsB;;IA8CtBC,0BAA0B;eAA1BA,uCAA0B;;IAtC1BC,qBAAqB;eAArBA,6BAAqB;;IAiDdC,oBAAoB;eAApBA,0CAAoB;;IADpBC,oBAAoB;eAApBA,0CAAoB;;IA7DpBC,wBAAwB;eAAxBA,kDAAwB;;IA0DxBC,iBAAiB;eAAjBA,oCAAiB;;IApCxBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAcpBC,0BAA0B;eAA1BA,oCAA0B;;IAC1BC,oBAAoB;eAApBA,8BAAoB;;IAyBbC,mBAAmB;eAAnBA,wCAAmB;;IA9DnBC,uBAAuB;eAAvBA,gDAAuB;;IAHNC,0BAA0B;eAA1BA,0CAA0B;;IAkE3CC,cAAc;eAAdA,8BAAc;;IA1DrBC,yBAAyB;eAAzBA,kCAAyB;;IACzBC,mBAAmB;eAAnBA,4BAAmB;;IA6CnBC,6BAA6B;eAA7BA,0CAA6B;;IAC7BC,uBAAuB;eAAvBA,oCAAuB;;IAvCvBC,wBAAwB;eAAxBA,gCAAwB;;IACxBC,kBAAkB;eAAlBA,0BAAkB;;;iCAnBa;gCAE2B;0CAEnB;yCACD;yBAOjC;wBAQA;0BAQA;0BAeA;6BAeA;mCAI2B;sCAGG;sCACA;qCACD;gCACL"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n ignoreNextBlur: React.MutableRefObject<boolean>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/ComboboxBase.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ActiveDescendantChangeEvent, ActiveDescendantContextValue } from '@fluentui/react-aria';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport { EventData, EventHandler } from '@fluentui/react-utilities';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\nimport { PortalProps } from '@fluentui/react-portal';\nimport { ListboxContextValue } from '../contexts/ListboxContext';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps &\n HighlightedOptionProps &\n Pick<PortalProps, 'mountNode'> & {\n /**\n * Controls the colors and borders of the combobox trigger.\n * @default 'outline'\n */\n appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n /**\n * If set, the combobox will show an icon to clear the current value.\n */\n clearable?: boolean;\n\n /**\n * The default open state when open is uncontrolled\n */\n defaultOpen?: boolean;\n\n /**\n * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n */\n defaultValue?: string;\n\n /**\n * Disable auto-focusing on the first item when mounting.\n *\n * @default false\n */\n disableAutoFocus?: boolean;\n\n /**\n * Render the combobox's popup inline in the DOM.\n * This has accessibility benefits, particularly for touch screen readers.\n */\n inlinePopup?: boolean;\n\n /**\n * Callback when the open/closed state of the dropdown changes\n */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n /**\n * Sets the open/closed state of the dropdown.\n * Use together with onOpenChange to fully control the dropdown's visibility\n */\n open?: boolean;\n\n /**\n * If set, the placeholder will show when no value is selected\n */\n placeholder?: string;\n\n /**\n * Configure the positioning of the combobox dropdown.\n * Please refer to the [positioning documentation](https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default#anchor-to-target)\n * for more details.\n *\n * @defaultvalue below\n */\n positioning?: PositioningShorthand;\n\n /**\n * Controls the size of the combobox faceplate\n * @default 'medium'\n */\n size?: 'small' | 'medium' | 'large';\n\n /**\n * The value displayed by the Combobox.\n * Use this with `onOptionSelect` to directly control the displayed value string\n */\n value?: string;\n };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<\n Pick<ComboboxBaseProps, 'appearance' | 'open' | 'clearable' | 'inlinePopup' | 'size'>\n> &\n Pick<ComboboxBaseProps, 'mountNode' | 'placeholder' | 'value' | 'multiselect'> &\n OptionCollectionState &\n SelectionState & {\n /**\n * @deprecated - no longer used internally\n */\n activeOption?: OptionValue;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE for writing styles involving focusVisible\n */\n focusVisible: boolean;\n\n /**\n * @deprecated - no longer used internally\n * Whether the next blur event should be ignored, and the combobox/dropdown will not close.\n */\n ignoreNextBlur: React.MutableRefObject<boolean>;\n\n /**\n * @deprecated - no longer used internally\n */\n setActiveOption: React.Dispatch<React.SetStateAction<OptionValue | undefined>>;\n\n /**\n * @deprecated - no longer used internally and handled automatically be activedescendant utilities\n * @see useSetKeyboardNavigation for imperatively setting focus visible state\n */\n setFocusVisible(focusVisible: boolean): void;\n\n /**\n * whether the combobox/dropdown currently has focus\n */\n hasFocus: boolean;\n\n setHasFocus(hasFocus: boolean): void;\n\n setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n setValue(newValue: string | undefined): void;\n\n onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n disabled: boolean;\n freeform: boolean;\n\n onActiveDescendantChange: (event: ActiveDescendantChangeEvent) => void;\n };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n open: boolean;\n};\n\n/** Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n | React.MouseEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n combobox: ComboboxContextValue;\n activeDescendant: ActiveDescendantContextValue;\n listbox: ListboxContextValue;\n};\n\nexport type ActiveOptionChangeData = EventData<'change', ActiveDescendantChangeEvent> & {\n previousOption: OptionValue | null | undefined;\n nextOption: OptionValue | null | undefined;\n};\n\nexport type HighlightedOptionProps = {\n onActiveOptionChange?: EventHandler<ActiveOptionChangeData>;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OptionCollection.types.ts"],"sourcesContent":["export type OptionValue = {\n /** The disabled state of the option. */\n disabled?: boolean;\n\n /** The `id` attribute of the option. */\n id: string;\n\n /** The `text` string for the option. */\n text: string;\n\n /** The value string of the option. */\n value: string;\n};\n\nexport type OptionCollectionState = {\n /**\n * @deprecated - no longer used internally\n */\n getIndexOfId(id: string): number;\n\n /**\n * @deprecated - no longer used internally\n */\n getOptionAtIndex(index: number): OptionValue | undefined;\n\n /**\n * @deprecated - no longer used internally\n */\n getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];\n\n /** The total number of options in the collection. */\n getCount: () => number;\n\n /** Returns the option data by key. */\n getOptionById(id: string): OptionValue | undefined;\n\n /** Returns an array of options filtered by a value matching function against the option's value string. */\n getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];\n\n /** The unordered option data. */\n options: OptionValue[];\n\n /** A function that child options call to register their values. Returns a function to unregister the option. */\n registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
1
|
+
{"version":3,"sources":["../src/utils/OptionCollection.types.ts"],"sourcesContent":["export type OptionValue = {\n /** The disabled state of the option. */\n disabled?: boolean;\n\n /** The `id` attribute of the option. */\n id: string;\n\n /** The `text` string for the option. */\n text: string;\n\n /** The value string of the option. */\n value: string;\n};\n\nexport type OptionCollectionState = {\n /**\n * @deprecated - no longer used internally\n */\n getIndexOfId(id: string): number;\n\n /**\n * @deprecated - no longer used internally\n */\n getOptionAtIndex(index: number): OptionValue | undefined;\n\n /**\n * @deprecated - no longer used internally\n */\n getOptionsMatchingText(matcher: (text: string) => boolean): OptionValue[];\n\n /** The total number of options in the collection. */\n getCount: () => number;\n\n /** Returns the option data by key. */\n getOptionById(id: string): OptionValue | undefined;\n\n /** Returns an array of options filtered by a value matching function against the option's value string. */\n getOptionsMatchingValue(matcher: (value: string) => boolean): OptionValue[];\n\n /** The unordered option data. */\n options: OptionValue[];\n\n /** A function that child options call to register their values. Returns a function to unregister the option. */\n registerOption: (option: OptionValue, element: HTMLElement) => () => void;\n};\n"],"names":[],"rangeMappings":"","mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Selection.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n /**\n * For an uncontrolled component, sets the initial selection.\n * If this is set, the `defaultValue` prop MUST also be set.\n */\n defaultSelectedOptions?: string[];\n\n /**\n * Sets the selection type to multiselect.\n * Set this to true for multiselect, even if fully controlling selection state.\n * This enables styles and accessibility properties to be set.\n * @default false\n */\n multiselect?: boolean;\n\n /** Callback when an option is selected */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n /**\n * An array of selected option keys.\n * Use this with `onOptionSelect` to directly control the selected option(s)\n * If this is set, the `value` prop MUST also be controlled.\n */\n selectedOptions?: string[];\n};\n\n/** Values returned by the useSelection hook */\nexport type SelectionState = {\n clearSelection: (event: SelectionEvents) => void;\n selectedOptions: string[];\n selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/**\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n optionValue: string | undefined;\n optionText: string | undefined;\n selectedOptions: string[];\n};\n\n/** Possible event types for onOptionSelect */\nexport type SelectionEvents =\n | React.ChangeEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/Selection.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type SelectionProps = {\n /**\n * For an uncontrolled component, sets the initial selection.\n * If this is set, the `defaultValue` prop MUST also be set.\n */\n defaultSelectedOptions?: string[];\n\n /**\n * Sets the selection type to multiselect.\n * Set this to true for multiselect, even if fully controlling selection state.\n * This enables styles and accessibility properties to be set.\n * @default false\n */\n multiselect?: boolean;\n\n /** Callback when an option is selected */\n // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n onOptionSelect?: (event: SelectionEvents, data: OptionOnSelectData) => void;\n\n /**\n * An array of selected option keys.\n * Use this with `onOptionSelect` to directly control the selected option(s)\n * If this is set, the `value` prop MUST also be controlled.\n */\n selectedOptions?: string[];\n};\n\n/** Values returned by the useSelection hook */\nexport type SelectionState = {\n clearSelection: (event: SelectionEvents) => void;\n selectedOptions: string[];\n selectOption: (event: SelectionEvents, option: OptionValue) => void;\n};\n\n/**\n * Data for the onOptionSelect callback.\n * `optionValue` and `optionText` will be undefined if multiple options are modified at once.\n */\nexport type OptionOnSelectData = {\n optionValue: string | undefined;\n optionText: string | undefined;\n selectedOptions: string[];\n};\n\n/** Possible event types for onOptionSelect */\nexport type SelectionEvents =\n | React.ChangeEvent<HTMLElement>\n | React.KeyboardEvent<HTMLElement>\n | React.MouseEvent<HTMLElement>;\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n | 'Close'\n | 'CloseSelect'\n | 'First'\n | 'Last'\n | 'Next'\n | 'None'\n | 'Open'\n | 'PageDown'\n | 'PageUp'\n | 'Previous'\n | 'Select'\n | 'Tab'\n | 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n e: KeyboardEvent | React.KeyboardEvent,\n options: DropdownActionOptions = {},\n): DropdownActions {\n const { open = true, multiselect = false } = options;\n const code = e.key;\n const { altKey, ctrlKey, key, metaKey } = e;\n\n // typing action occurs whether open or closed\n if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n return 'Type';\n }\n\n // handle opening the dropdown if closed\n if (!open) {\n if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n return 'Open';\n }\n\n // if the dropdown is closed and an action did not match the above, do nothing\n return 'None';\n }\n\n // select or close actions\n if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n return 'CloseSelect';\n }\n if (multiselect && code === keys.Space) {\n return 'Select';\n }\n if (code === keys.Escape) {\n return 'Close';\n }\n\n // navigation interactions\n if (code === keys.ArrowDown) {\n return 'Next';\n }\n if (code === keys.ArrowUp) {\n return 'Previous';\n }\n if (code === keys.Home) {\n return 'First';\n }\n if (code === keys.End) {\n return 'Last';\n }\n if (code === keys.PageUp) {\n return 'PageUp';\n }\n if (code === keys.PageDown) {\n return 'PageDown';\n }\n if (code === keys.Tab) {\n return 'Tab';\n }\n\n // if nothing matched, return none\n return 'None';\n}\n"],"names":["getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","keys","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BgBA;;;eAAAA;;;;wEA9BM;iEACC;AA6BhB,SAASA,yBACdC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASM,cAAKC,KAAK,IAAI,CAACL,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASM,cAAKE,SAAS,IAAIR,SAASM,cAAKG,OAAO,IAAIT,SAASM,cAAKI,KAAK,IAAIV,SAASM,cAAKC,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIP,SAAUM,cAAKG,OAAO,IAAIP,UAAWF,SAASM,cAAKI,KAAK,IAAK,CAACX,eAAeC,SAASM,cAAKC,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIR,eAAeC,SAASM,cAAKC,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIP,SAASM,cAAKK,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIX,SAASM,cAAKE,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIR,SAASM,cAAKG,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIT,SAASM,cAAKM,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIZ,SAASM,cAAKO,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIb,SAASM,cAAKQ,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAId,SAASM,cAAKS,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAIf,SAASM,cAAKU,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/**\n * enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n */\nexport type DropdownActions =\n | 'Close'\n | 'CloseSelect'\n | 'First'\n | 'Last'\n | 'Next'\n | 'None'\n | 'Open'\n | 'PageDown'\n | 'PageUp'\n | 'Previous'\n | 'Select'\n | 'Tab'\n | 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n}\n\n/**\n * Converts a keyboard interaction into a defined action\n */\nexport function getDropdownActionFromKey(\n e: KeyboardEvent | React.KeyboardEvent,\n options: DropdownActionOptions = {},\n): DropdownActions {\n const { open = true, multiselect = false } = options;\n const code = e.key;\n const { altKey, ctrlKey, key, metaKey } = e;\n\n // typing action occurs whether open or closed\n if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n return 'Type';\n }\n\n // handle opening the dropdown if closed\n if (!open) {\n if (code === keys.ArrowDown || code === keys.ArrowUp || code === keys.Enter || code === keys.Space) {\n return 'Open';\n }\n\n // if the dropdown is closed and an action did not match the above, do nothing\n return 'None';\n }\n\n // select or close actions\n if ((code === keys.ArrowUp && altKey) || code === keys.Enter || (!multiselect && code === keys.Space)) {\n return 'CloseSelect';\n }\n if (multiselect && code === keys.Space) {\n return 'Select';\n }\n if (code === keys.Escape) {\n return 'Close';\n }\n\n // navigation interactions\n if (code === keys.ArrowDown) {\n return 'Next';\n }\n if (code === keys.ArrowUp) {\n return 'Previous';\n }\n if (code === keys.Home) {\n return 'First';\n }\n if (code === keys.End) {\n return 'Last';\n }\n if (code === keys.PageUp) {\n return 'PageUp';\n }\n if (code === keys.PageDown) {\n return 'PageDown';\n }\n if (code === keys.Tab) {\n return 'Tab';\n }\n\n // if nothing matched, return none\n return 'None';\n}\n"],"names":["getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","keys","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA8BgBA;;;eAAAA;;;;wEA9BM;iEACC;AA6BhB,SAASA,yBACdC,CAAsC,EACtCC,UAAiC,CAAC,CAAC;IAEnC,MAAM,EAAEC,OAAO,IAAI,EAAEC,cAAc,KAAK,EAAE,GAAGF;IAC7C,MAAMG,OAAOJ,EAAEK,GAAG;IAClB,MAAM,EAAEC,MAAM,EAAEC,OAAO,EAAEF,GAAG,EAAEG,OAAO,EAAE,GAAGR;IAE1C,8CAA8C;IAC9C,IAAIK,IAAII,MAAM,KAAK,KAAKL,SAASM,cAAKC,KAAK,IAAI,CAACL,UAAU,CAACC,WAAW,CAACC,SAAS;QAC9E,OAAO;IACT;IAEA,wCAAwC;IACxC,IAAI,CAACN,MAAM;QACT,IAAIE,SAASM,cAAKE,SAAS,IAAIR,SAASM,cAAKG,OAAO,IAAIT,SAASM,cAAKI,KAAK,IAAIV,SAASM,cAAKC,KAAK,EAAE;YAClG,OAAO;QACT;QAEA,8EAA8E;QAC9E,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIP,SAAUM,cAAKG,OAAO,IAAIP,UAAWF,SAASM,cAAKI,KAAK,IAAK,CAACX,eAAeC,SAASM,cAAKC,KAAK,EAAG;QACrG,OAAO;IACT;IACA,IAAIR,eAAeC,SAASM,cAAKC,KAAK,EAAE;QACtC,OAAO;IACT;IACA,IAAIP,SAASM,cAAKK,MAAM,EAAE;QACxB,OAAO;IACT;IAEA,0BAA0B;IAC1B,IAAIX,SAASM,cAAKE,SAAS,EAAE;QAC3B,OAAO;IACT;IACA,IAAIR,SAASM,cAAKG,OAAO,EAAE;QACzB,OAAO;IACT;IACA,IAAIT,SAASM,cAAKM,IAAI,EAAE;QACtB,OAAO;IACT;IACA,IAAIZ,SAASM,cAAKO,GAAG,EAAE;QACrB,OAAO;IACT;IACA,IAAIb,SAASM,cAAKQ,MAAM,EAAE;QACxB,OAAO;IACT;IACA,IAAId,SAASM,cAAKS,QAAQ,EAAE;QAC1B,OAAO;IACT;IACA,IAAIf,SAASM,cAAKU,GAAG,EAAE;QACrB,OAAO;IACT;IAEA,kCAAkC;IAClC,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n"],"names":["iconSizes","small","medium","large"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,YAAY;IACvBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n"],"names":["iconSizes","small","medium","large"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAAaA;;;eAAAA;;;AAAN,MAAMA,YAAY;IACvBC,OAAO;IACPC,QAAQ;IACRC,OAAO;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & {\n children?: React.ReactNode;\n editable?: boolean;\n disabled?: boolean;\n freeform?: boolean;\n activeDescendantController: ActiveDescendantImperativeRef;\n },\n): ComboboxBaseState => {\n 'use no memo';\n\n const {\n appearance = 'outline',\n disableAutoFocus,\n children,\n clearable = false,\n editable = false,\n inlinePopup = false,\n mountNode = undefined,\n multiselect,\n onOpenChange,\n size = 'medium',\n activeDescendantController,\n freeform = false,\n disabled = false,\n onActiveOptionChange = null,\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionsMatchingValue } = optionCollection;\n\n const { getOptionById } = optionCollection;\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n // Keeping some kind of backwards compatible functionality here\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_activeOption = getActiveOption();\n // eslint-disable-next-line @typescript-eslint/naming-convention\n const UNSAFE_setActiveOption = React.useCallback(\n (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n let nextOption: OptionValue | undefined = undefined;\n if (typeof option === 'function') {\n const activeOption = getActiveOption();\n nextOption = option(activeOption);\n }\n\n if (nextOption) {\n activeDescendantController.focus(nextOption.id);\n } else {\n activeDescendantController.blur();\n }\n },\n [activeDescendantController, getActiveOption],\n );\n\n // track whether keyboard focus outline should be shown\n // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n const [focusVisible, setFocusVisible] = React.useState(false);\n\n // track focused state to conditionally render collapsed listbox\n // when the trigger is focused - the listbox should but hidden until the open state is changed\n const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n // calculate value based on props, internal value changes, and selected options\n const isFirstMount = useFirstMount();\n const [controllableValue, setValue] = useControllableState({\n state: props.value,\n initialState: undefined,\n });\n\n const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n // reset any typed value when an option is selected\n const selectOption = React.useCallback(\n (ev: SelectionEvents, option: OptionValue) => {\n ReactDOM.unstable_batchedUpdates(() => {\n setValue(undefined);\n baseSelectOption(ev, option);\n });\n },\n [setValue, baseSelectOption],\n );\n\n const value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n if (disabled) {\n return;\n }\n onOpenChange?.(event, { open: newState });\n ReactDOM.unstable_batchedUpdates(() => {\n if (!newState && !freeform) {\n setValue(undefined);\n }\n setOpenState(newState);\n });\n },\n [onOpenChange, setOpenState, setValue, freeform, disabled],\n );\n\n // update active option based on change in open state\n React.useEffect(() => {\n if (open) {\n // if it is single-select and there is a selected option, start at the selected option\n if (!multiselect && selectedOptions.length > 0) {\n const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n if (selectedOption?.id) {\n activeDescendantController.focus(selectedOption.id);\n }\n }\n } else {\n activeDescendantController.blur();\n }\n // this should only be run in response to changes in the open state\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, activeDescendantController]);\n\n // Fallback focus when children are updated in an open popover results in no item being focused\n React.useEffect(() => {\n if (open && !disableAutoFocus && !activeDescendantController.active()) {\n activeDescendantController.first();\n }\n // this should only be run in response to changes in the open state or children\n }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n const nextOption = optionCollection.getOptionById(event.detail.id);\n onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n });\n\n return {\n ...optionCollection,\n freeform,\n disabled,\n selectOption,\n clearSelection,\n selectedOptions,\n activeOption: UNSAFE_activeOption,\n appearance,\n clearable,\n focusVisible,\n ignoreNextBlur,\n inlinePopup,\n mountNode,\n open,\n hasFocus,\n setActiveOption: UNSAFE_setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n multiselect,\n onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n if (!multiselect) {\n setOpen(e, false);\n }\n }),\n onActiveDescendantChange,\n };\n};\n"],"names":["useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","useOptionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","React","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","useFirstMount","controllableValue","setValue","useControllableState","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","useSelection","ev","ReactDOM","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","useEventCallback","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useComboboxPositioning.ts"],"sourcesContent":["import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","resolvePositioningShorthand","targetRef","containerRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;kCAJuE;iEAEhE;AAEhB,SAASA,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,GAAGC,IAAAA,6CAAAA,EAA4BV,YAAY;IAC7C;IAEA,MAAM,EAAEW,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAAA,EAAeX;IAEnD,OAAO;QAACU;QAAcD;KAAU;AAClC"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["import { PositioningShorthandValue, resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport * as React from 'react';\n\nexport function useComboboxPositioning(props: ComboboxBaseProps): [\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n listboxRef: React.MutableRefObject<any>,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n triggerRef: React.MutableRefObject<any>,\n] {\n const { positioning } = props;\n\n // Set a default set of fallback positions to try if the dropdown does not fit on screen\n const fallbackPositions: PositioningShorthandValue[] = ['above', 'after', 'after-top', 'before', 'before-top'];\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n fallbackPositions,\n matchTargetSize: 'width' as const,\n autoSize: true,\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n return [containerRef, targetRef];\n}\n"],"names":["useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","resolvePositioningShorthand","targetRef","containerRef","usePositioning"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;kCAJuE;iEAEhE;AAEhB,SAASA,uBAAuBC,KAAwB;IAM7D,MAAM,EAAEC,WAAW,EAAE,GAAGD;IAExB,wFAAwF;IACxF,MAAME,oBAAiD;QAAC;QAAS;QAAS;QAAa;QAAU;KAAa;IAE9G,iBAAiB;IACjB,MAAMC,gBAAgB;QACpBC,UAAU;QACVC,OAAO;QACPC,QAAQ;YAAEC,WAAW;YAAGC,UAAU;QAAE;QACpCN;QACAO,iBAAiB;QACjBC,UAAU;QACV,GAAGC,IAAAA,6CAAAA,EAA4BV,YAAY;IAC7C;IAEA,MAAM,EAAEW,SAAS,EAAEC,YAAY,EAAE,GAAGC,IAAAA,gCAAAA,EAAeX;IAEnD,OAAO;QAACU;QAAcD;KAAU;AAClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement>\n | React.RefObject<HTMLButtonElement>\n | React.RefObject<HTMLButtonElement | HTMLInputElement>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","useId","isResolvedShorthand","id","undefined","listboxSlot","slot","optional","renderByDefault","elementType","Listbox","tabIndex","onMouseDown","useEventCallback","mergeCallbacks","event","preventDefault","onClick","current","focus","listboxRef","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BgBA;;;eAAAA;;;;iEA7BO;gCAQhB;yBAGiB;AAkBjB,SAASA,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYC,IAAAA,qBAAAA,EAChB,kBACAC,IAAAA,mCAAAA,EAAoBT,uBAAuBA,oBAAoBU,EAAE,GAAGC;IAGtE,MAAMC,cAAcC,oBAAAA,CAAKC,QAAQ,CAACd,qBAAqB;QACrDe,iBAAiB;QACjBC,aAAaC,gBAAAA;QACbX,cAAc;YACZI,IAAIH;YACJH;YACAc,UAAUP;YACV,GAAGL,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMa,cAAcC,IAAAA,gCAAAA,EAClBC,IAAAA,8BAAAA,EAAe,CAACC;QACdA,MAAMC,cAAc;IACtB,GAAGX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaO,WAAW;IAG7B,MAAMK,UAAUJ,IAAAA,gCAAAA,EACdC,IAAAA,8BAAAA,EAAe,CAACC;YAEdjB;QADAiB,MAAMC,cAAc;QACpBlB,CAAAA,sBAAAA,WAAWoB,OAAO,AAAPA,MAAO,QAAlBpB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBqB,KAAK;IAC3B,GAAGd,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaY,OAAO;IAGzB,MAAMG,aAAaC,IAAAA,6BAAAA,EAAchB,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaX,GAAG,EAAEA;IACnD,IAAIW,aAAa;QACfA,YAAYX,GAAG,GAAG0B;QAClBf,YAAYO,WAAW,GAAGA;QAC1BP,YAAYY,OAAO,GAAGA;IACxB;IAEA,OAAOZ;AACT"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n mergeCallbacks,\n useId,\n useEventCallback,\n slot,\n isResolvedShorthand,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { Listbox } from '../Listbox';\nimport { ListboxProps } from '../Listbox';\n\nexport type UseListboxSlotState = Pick<ComboboxBaseState, 'multiselect'>;\n\ntype UseListboxSlotOptions = {\n state: UseListboxSlotState;\n triggerRef:\n | React.RefObject<HTMLInputElement>\n | React.RefObject<HTMLButtonElement>\n | React.RefObject<HTMLButtonElement | HTMLInputElement>;\n defaultProps?: Partial<ListboxProps>;\n};\n\n/**\n * @internal\n * @returns listbox slot with desired behaviour and props\n */\nexport function useListboxSlot(\n listboxSlotFromProp: Slot<typeof Listbox> | undefined,\n ref: React.Ref<HTMLDivElement>,\n options: UseListboxSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<typeof Listbox>>> | undefined {\n const {\n state: { multiselect },\n triggerRef,\n defaultProps,\n } = options;\n\n const listboxId = useId(\n 'fluent-listbox',\n isResolvedShorthand(listboxSlotFromProp) ? listboxSlotFromProp.id : undefined,\n );\n\n const listboxSlot = slot.optional(listboxSlotFromProp, {\n renderByDefault: true,\n elementType: Listbox,\n defaultProps: {\n id: listboxId,\n multiselect,\n tabIndex: undefined,\n ...defaultProps,\n },\n });\n\n /**\n * Clicking on the listbox should never blur the trigger\n * in a combobox\n */\n const onMouseDown = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n }, listboxSlot?.onMouseDown),\n );\n\n const onClick = useEventCallback(\n mergeCallbacks((event: React.MouseEvent<HTMLDivElement>) => {\n event.preventDefault();\n triggerRef.current?.focus();\n }, listboxSlot?.onClick),\n );\n\n const listboxRef = useMergedRefs(listboxSlot?.ref, ref);\n if (listboxSlot) {\n listboxSlot.ref = listboxRef;\n listboxSlot.onMouseDown = onMouseDown;\n listboxSlot.onClick = onClick;\n }\n\n return listboxSlot;\n}\n"],"names":["useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","useId","isResolvedShorthand","id","undefined","listboxSlot","slot","optional","renderByDefault","elementType","Listbox","tabIndex","onMouseDown","useEventCallback","mergeCallbacks","event","preventDefault","onClick","current","focus","listboxRef","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA6BgBA;;;eAAAA;;;;iEA7BO;gCAQhB;yBAGiB;AAkBjB,SAASA,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYC,IAAAA,qBAAAA,EAChB,kBACAC,IAAAA,mCAAAA,EAAoBT,uBAAuBA,oBAAoBU,EAAE,GAAGC;IAGtE,MAAMC,cAAcC,oBAAAA,CAAKC,QAAQ,CAACd,qBAAqB;QACrDe,iBAAiB;QACjBC,aAAaC,gBAAAA;QACbX,cAAc;YACZI,IAAIH;YACJH;YACAc,UAAUP;YACV,GAAGL,YAAY;QACjB;IACF;IAEA;;;GAGC,GACD,MAAMa,cAAcC,IAAAA,gCAAAA,EAClBC,IAAAA,8BAAAA,EAAe,CAACC;QACdA,MAAMC,cAAc;IACtB,GAAGX,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaO,WAAW;IAG7B,MAAMK,UAAUJ,IAAAA,gCAAAA,EACdC,IAAAA,8BAAAA,EAAe,CAACC;YAEdjB;QADAiB,MAAMC,cAAc;QACpBlB,CAAAA,sBAAAA,WAAWoB,OAAO,AAAPA,MAAO,QAAlBpB,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoBqB,KAAK;IAC3B,GAAGd,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaY,OAAO;IAGzB,MAAMG,aAAaC,IAAAA,6BAAAA,EAAchB,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,YAAaX,GAAG,EAAEA;IACnD,IAAIW,aAAa;QACfA,YAAYX,GAAG,GAAG0B;QAClBf,YAAYO,WAAW,GAAGA;QAC1BP,YAAYY,OAAO,GAAGA;IACxB;IAEA,OAAOZ;AACT"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n const optionsById = React.useRef(new Map<string, OptionValue>());\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => optionsById.current.size;\n\n // index searches are no longer used\n const getOptionAtIndex = () => undefined;\n const getIndexOfId = () => -1;\n\n const getOptionById = (id: string) => {\n return optionsById.current.get(id);\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return Array.from(optionsById.current.values()).filter(({ text }) => matcher(text));\n };\n\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n const matches: OptionValue[] = [];\n for (const option of optionsById.current.values()) {\n if (matcher(option.value)) {\n matches.push(option);\n }\n }\n\n return matches;\n };\n\n return {\n getCount,\n getOptionAtIndex,\n getIndexOfId,\n getOptionById,\n getOptionsMatchingText,\n getOptionsMatchingValue,\n };\n }, []);\n\n const registerOption = React.useCallback((option: OptionValue) => {\n optionsById.current.set(option.id, option);\n\n return () => optionsById.current.delete(option.id);\n }, []);\n\n return {\n ...collectionAPI,\n options: Array.from(optionsById.current.values()),\n registerOption,\n };\n};\n"],"names":["useOptionCollection","optionsById","React","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;AAMhB,MAAMA,sBAAsB;IACjC,MAAMC,cAAcC,OAAMC,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBH,OAAMI,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAMN,YAAYO,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOb,YAAYO,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKL,QAAQK;QAC/E;QAEA,MAAMC,0BAA0B,CAACN;YAC/B,MAAMO,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUxB,YAAYO,OAAO,CAACY,MAAM,GAAI;gBACjD,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACzBF,QAAQG,IAAI,CAACF;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACF;IACF,GAAG,EAAE;IAEL,MAAMK,iBAAiB1B,OAAM2B,WAAW,CAAC,CAACJ;QACxCxB,YAAYO,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMxB,YAAYO,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useOptionCollection.ts"],"sourcesContent":["import * as React from 'react';\nimport type { OptionCollectionState, OptionValue } from './OptionCollection.types';\n\n/**\n * A hook for managing a collection of child Options\n */\nexport const useOptionCollection = (): OptionCollectionState => {\n const optionsById = React.useRef(new Map<string, OptionValue>());\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => optionsById.current.size;\n\n // index searches are no longer used\n const getOptionAtIndex = () => undefined;\n const getIndexOfId = () => -1;\n\n const getOptionById = (id: string) => {\n return optionsById.current.get(id);\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return Array.from(optionsById.current.values()).filter(({ text }) => matcher(text));\n };\n\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n const matches: OptionValue[] = [];\n for (const option of optionsById.current.values()) {\n if (matcher(option.value)) {\n matches.push(option);\n }\n }\n\n return matches;\n };\n\n return {\n getCount,\n getOptionAtIndex,\n getIndexOfId,\n getOptionById,\n getOptionsMatchingText,\n getOptionsMatchingValue,\n };\n }, []);\n\n const registerOption = React.useCallback((option: OptionValue) => {\n optionsById.current.set(option.id, option);\n\n return () => optionsById.current.delete(option.id);\n }, []);\n\n return {\n ...collectionAPI,\n options: Array.from(optionsById.current.values()),\n registerOption,\n };\n};\n"],"names":["useOptionCollection","optionsById","React","useRef","Map","collectionAPI","useMemo","getCount","current","size","getOptionAtIndex","undefined","getIndexOfId","getOptionById","id","get","getOptionsMatchingText","matcher","Array","from","values","filter","text","getOptionsMatchingValue","matches","option","value","push","registerOption","useCallback","set","delete","options"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;AAMhB,MAAMA,sBAAsB;IACjC,MAAMC,cAAcC,OAAMC,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBH,OAAMI,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAMN,YAAYO,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOb,YAAYO,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM,IAAIC,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKL,QAAQK;QAC/E;QAEA,MAAMC,0BAA0B,CAACN;YAC/B,MAAMO,UAAyB,EAAE;YACjC,KAAK,MAAMC,UAAUxB,YAAYO,OAAO,CAACY,MAAM,GAAI;gBACjD,IAAIH,QAAQQ,OAAOC,KAAK,GAAG;oBACzBF,QAAQG,IAAI,CAACF;gBACf;YACF;YAEA,OAAOD;QACT;QAEA,OAAO;YACLjB;YACAG;YACAE;YACAC;YACAG;YACAO;QACF;IACF,GAAG,EAAE;IAEL,MAAMK,iBAAiB1B,OAAM2B,WAAW,CAAC,CAACJ;QACxCxB,YAAYO,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMxB,YAAYO,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAAClB,YAAYO,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = useCallback(\n (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","useControllableState","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;uBALe;gCACS;AAI9B,MAAMA,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGC,IAAAA,oCAAAA,EAAqB;QACjEC,OAAOP,MAAMI,eAAe;QAC5BI,cAAcP;QACdQ,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeC,IAAAA,kBAAAA,EACnB,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAId,aAAa;YACf,MAAMe,gBAAgBb,gBAAgBc,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIX,gBAAgBgB,KAAK,CAAC,GAAGH;uBAAmBb,gBAAgBgB,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIX;oBAAiBS,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAX,mBAAmBU;QACnBZ,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEnB,iBAAiBW;QAAa;IAC9G,GACA;QAACZ;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMmB,iBAAiB,CAACZ;QACtBP,mBAAmB,EAAE;QACrBF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWrB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEoB;QAAgBd;QAAcN;IAAgB;AACzD"}
|
|
1
|
+
{"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = useCallback(\n (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"names":["useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","useControllableState","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;uBALe;gCACS;AAI9B,MAAMA,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGC,IAAAA,oCAAAA,EAAqB;QACjEC,OAAOP,MAAMI,eAAe;QAC5BI,cAAcP;QACdQ,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeC,IAAAA,kBAAAA,EACnB,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAId,aAAa;YACf,MAAMe,gBAAgBb,gBAAgBc,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIX,gBAAgBgB,KAAK,CAAC,GAAGH;uBAAmBb,gBAAgBgB,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIX;oBAAiBS,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAX,mBAAmBU;QACnBZ,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAEnB,iBAAiBW;QAAa;IAC9G,GACA;QAACZ;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMmB,iBAAiB,CAACZ;QACtBP,mBAAmB,EAAE;QACrBF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAiBS,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWrB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEoB;QAAgBd;QAAcN;IAAgB;AACzD"}
|