npm - @fluentui/react-combobox - Versions diffs - 9.16.6 → 9.16.8 - Mend

@fluentui/react-combobox 9.16.6 → 9.16.8

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.

Files changed (130) hide show

package/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["~~import~~ { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} -1)`} ${tokens.spacingVerticalXS}`,\n },\n },\n\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n },\n});\n\n/*\n Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,OAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,OAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,OAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,OAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,OAAOoB,kBAAkB;QACvCC,OAAOrB,OAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,OAAOwB,eAAe;QAChCC,YAAYzB,OAAO0B,kBAAkB;QACrCC,YAAY3B,OAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,OAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,OAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGjC,aAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,GAAGjC,aAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n root: 'fui-OptionGroup',\n label: 'fui-OptionGroup__label',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'column',\n rowGap: tokens.spacingHorizontalXXS,\n\n '&:not(:last-child)::after': {\n content: '\"\"',\n borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n margin: `0 ${`calc(${tokens.spacingHorizontalXS} -1)`} ${tokens.spacingVerticalXS}`,\n },\n },\n\n label: {\n borderRadius: tokens.borderRadiusMedium,\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`,\n },\n});\n\n/*\n Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n 'use no memo';\n\n const styles = useStyles();\n state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n if (state.label) {\n state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n }\n\n return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","optionGroupClassNames","root","label","useStyles","display","flexDirection","rowGap","spacingHorizontalXXS","content","borderBottom","strokeWidthThin","colorNeutralStroke2","paddingBottom","spacingHorizontalXS","margin","spacingVerticalXS","borderRadius","borderRadiusMedium","color","colorNeutralForeground3","fontSize","fontSizeBase200","fontWeight","fontWeightSemibold","lineHeight","lineHeightBase200","padding","spacingHorizontalS","spacingHorizontalSNudge","useOptionGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,MAAM,QAAQ,wBAAwB;AAE/C,SAASC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BG,MAAM;QACJG,SAAS;QACTC,eAAe;QACfC,QAAQT,OAAOU,oBAAoB;QAEnC,6BAA6B;YAC3BC,SAAS;YACTC,cAAc,GAAGZ,OAAOa,eAAe,CAAC,OAAO,EAAEb,OAAOc,mBAAmB,EAAE;YAC7EP,SAAS;YACTQ,eAAef,OAAOgB,mBAAmB;YACzCC,QAAQ,CAAC,EAAE,EAAE,CAAC,KAAK,EAAEjB,OAAOgB,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAEhB,OAAOkB,iBAAiB,EAAE;QACvF;IACF;IAEAb,OAAO;QACLc,cAAcnB,OAAOoB,kBAAkB;QACvCC,OAAOrB,OAAOsB,uBAAuB;QACrCf,SAAS;QACTgB,UAAUvB,OAAOwB,eAAe;QAChCC,YAAYzB,OAAO0B,kBAAkB;QACrCC,YAAY3B,OAAO4B,iBAAiB;QACpCC,SAAS,GAAG7B,OAAO8B,kBAAkB,CAAC,CAAC,EAAE9B,OAAO+B,uBAAuB,EAAE;IAC3E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAAS5B;IACf2B,MAAM7B,IAAI,CAAC+B,SAAS,GAAGjC,aAAaC,sBAAsBC,IAAI,EAAE8B,OAAO9B,IAAI,EAAE6B,MAAM7B,IAAI,CAAC+B,SAAS;IAEjG,IAAIF,MAAM5B,KAAK,EAAE;QACf4B,MAAM5B,KAAK,CAAC8B,SAAS,GAAGjC,aAAaC,sBAAsBE,KAAK,EAAE6B,OAAO7B,KAAK,EAAE4B,MAAM5B,KAAK,CAAC8B,SAAS;IACvG;IAEA,OAAOF;AACT,EAAE"}

package/lib/contexts/ComboboxContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { createContext } from '@fluentui/react-context-selector';
 /**
  * @deprecated - use ListboxContext instead

package/lib/contexts/ComboboxContext.js.map CHANGED Viewed

	@@ -1 +1 @@
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 @typescript-eslint/no-deprecated\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAqBjE;;;CAGC,GACD,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,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,GAAG;AAEH;;;;CAIC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}
1	+ {"version":3,"sources":["../src/contexts/ComboboxContext.ts"],"sourcesContent":["'use client';\n\nimport { 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 @typescript-eslint/no-deprecated\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA;AAEA,SAASA,aAAa,QAAQ,mCAAmC;AAqBjE;;;CAGC,GACD,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,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,GAAG;AAEH;;;;CAIC,GACD,4DAA4D;AAC5D,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}

package/lib/contexts/ListboxContext.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const listboxContextDefaultValue = {

package/lib/contexts/ListboxContext.js.map CHANGED Viewed

	@@ -1 +1 @@
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>): T =>\n useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAuBtG,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;AAEA,OAAO,MAAMC,iBAAiBf,cAA+CI,WAAW;AAExF,OAAO,MAAMY,6BAA6B,CAAIC,WAC5ChB,mBAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}
1	+ {"version":3,"sources":["../src/contexts/ListboxContext.ts"],"sourcesContent":["'use client';\n\nimport * 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>): T =>\n useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["React","createContext","useContextSelector","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","ListboxContext","useListboxContext_unstable","selector","ctx","ListboxProvider","Provider"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAA0BC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAuBtG,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;AAEA,OAAO,MAAMC,iBAAiBf,cAA+CI,WAAW;AAExF,OAAO,MAAMY,6BAA6B,CAAIC,WAC5ChB,mBAAmBc,gBAAgB,CAACG,MAAMhB,0BAA0B,GAAKe,SAASC,MAAM;AAE1F,OAAO,MAAMC,kBAAkBJ,eAAeK,QAAQ,CAAC"}

package/lib/contexts/useComboboxContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 export function useComboboxContextValues(state) {
     const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;

package/lib/contexts/useComboboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["React","useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,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,mBAAmBrB,MAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}
1	+ {"version":3,"sources":["../src/contexts/useComboboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","useMemo","controller"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,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,mBAAmBrB,MAAMsB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYX;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}

package/lib/contexts/useListboxContextValues.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useHasParentContext } from '@fluentui/react-context-selector';
 import { ListboxContext, useListboxContext_unstable } from './ListboxContext';

package/lib/contexts/useListboxContextValues.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,uBAAuBX,2BAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBb,2BAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,2BAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}
1	+ {"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,uBAAuBX,2BAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBb,2BAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,2BAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

package/lib/hooks/useComboboxFilter.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { Option } from '../Option';
 function defaultFilter(optionText, query) {

package/lib/hooks/useComboboxFilter.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\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) => JSXElement;\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): JSXElement[] {\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":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAoBnC,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;AAEA;;CAEC,GACD,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}
1	+ {"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\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) => JSXElement;\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): JSXElement[] {\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":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAoBnC,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;AAEA;;CAEC,GACD,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}

package/lib/utils/useComboboxBaseState.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';

package/lib/utils/useComboboxBaseState.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}

package/lib/utils/useComboboxPositioning.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';
 import * as React from 'react';
 export function useComboboxPositioning(props) {

package/lib/utils/useComboboxPositioning.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAErH,YAAYC,WAAW,QAAQ;AAE/B,OAAO,SAASC,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,GAAGd,4BAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,GAAGf,eAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}
1	+ {"version":3,"sources":["../src/utils/useComboboxPositioning.ts"],"sourcesContent":["'use client';\n\nimport { 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":["resolvePositioningShorthand","usePositioning","React","useComboboxPositioning","props","positioning","fallbackPositions","popperOptions","position","align","offset","crossAxis","mainAxis","matchTargetSize","autoSize","targetRef","containerRef"],"mappings":"AAAA;AAEA,SAAoCA,2BAA2B,EAAEC,cAAc,QAAQ,8BAA8B;AAErH,YAAYC,WAAW,QAAQ;AAE/B,OAAO,SAASC,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,GAAGd,4BAA4BK,YAAY;IAC7C;IAEA,MAAM,EAAEU,SAAS,EAAEC,YAAY,EAAE,GAAGf,eAAeM;IAEnD,OAAO;QAACS;QAAcD;KAAU;AAClC"}

package/lib/utils/useListboxSlot.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useFieldControlProps_unstable } from '@fluentui/react-field';
 import { mergeCallbacks, useId, useEventCallback, slot, isResolvedShorthand, useMergedRefs } from '@fluentui/react-utilities';

package/lib/utils/useListboxSlot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\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 \| null>\n \| React.RefObject<HTMLButtonElement \| null>\n \| React.RefObject<HTMLButtonElement \| HTMLInputElement \| null>;\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 const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\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":["React","useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,6BAA6B,QAAQ,wBAAwB;AAC9F,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAcrC;;;CAGC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA,MAAMS,oBAAoBxB,8BAA8B;QAAEiB,IAAID;IAAU,GAAwB;QAC9FS,kBAAkB;IACpB;IAEA,qGAAqG;IACrG,IACEN,eACA,CAACA,WAAW,CAAC,aAAa,IAC1B,CAACA,WAAW,CAAC,kBAAkB,IAC/BK,iBAAiB,CAAC,kBAAkB,EACpC;QACAL,WAAW,CAAC,kBAAkB,GAAGK,iBAAiB,CAAC,kBAAkB;IACvE;IAEA;;;GAGC,GACD,MAAME,cAAcvB,iBAClBF,eAAe,CAAC0B;QACdA,MAAMC,cAAc;IACtB,GAAGT,wBAAAA,kCAAAA,YAAaO,WAAW;IAG7B,MAAMG,UAAU1B,iBACdF,eAAe,CAAC0B;YAEdb;QADAa,MAAMC,cAAc;SACpBd,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;IAC3B,GAAGZ,wBAAAA,kCAAAA,YAAaU,OAAO;IAGzB,MAAMG,aAAa1B,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGsB;QAClBb,YAAYO,WAAW,GAAGA;QAC1BP,YAAYU,OAAO,GAAGA;IACxB;IAEA,OAAOV;AACT"}
1	+ {"version":3,"sources":["../src/utils/useListboxSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { type FieldControlProps, useFieldControlProps_unstable } from '@fluentui/react-field';\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 \| null>\n \| React.RefObject<HTMLButtonElement \| null>\n \| React.RefObject<HTMLButtonElement \| HTMLInputElement \| null>;\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 const fieldControlProps = useFieldControlProps_unstable({ id: listboxId } as FieldControlProps, {\n supportsLabelFor: true,\n });\n\n // Use the field's label to provide an accessible name for the listbox if it doesn't already have one\n if (\n listboxSlot &&\n !listboxSlot['aria-label'] &&\n !listboxSlot['aria-labelledby'] &&\n fieldControlProps['aria-labelledby']\n ) {\n listboxSlot['aria-labelledby'] = fieldControlProps['aria-labelledby'];\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":["React","useFieldControlProps_unstable","mergeCallbacks","useId","useEventCallback","slot","isResolvedShorthand","useMergedRefs","Listbox","useListboxSlot","listboxSlotFromProp","ref","options","state","multiselect","triggerRef","defaultProps","listboxId","id","undefined","listboxSlot","optional","renderByDefault","elementType","tabIndex","fieldControlProps","supportsLabelFor","onMouseDown","event","preventDefault","onClick","current","focus","listboxRef"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAAiCC,6BAA6B,QAAQ,wBAAwB;AAC9F,SACEC,cAAc,EACdC,KAAK,EACLC,gBAAgB,EAChBC,IAAI,EACJC,mBAAmB,EACnBC,aAAa,QACR,4BAA4B;AAGnC,SAASC,OAAO,QAAQ,aAAa;AAcrC;;;CAGC,GACD,OAAO,SAASC,eACdC,mBAAqD,EACrDC,GAA8B,EAC9BC,OAA8B;IAE9B,MAAM,EACJC,OAAO,EAAEC,WAAW,EAAE,EACtBC,UAAU,EACVC,YAAY,EACb,GAAGJ;IAEJ,MAAMK,YAAYd,MAChB,kBACAG,oBAAoBI,uBAAuBA,oBAAoBQ,EAAE,GAAGC;IAGtE,MAAMC,cAAcf,KAAKgB,QAAQ,CAACX,qBAAqB;QACrDY,iBAAiB;QACjBC,aAAaf;QACbQ,cAAc;YACZE,IAAID;YACJH;YACAU,UAAUL;YACV,GAAGH,YAAY;QACjB;IACF;IAEA,MAAMS,oBAAoBxB,8BAA8B;QAAEiB,IAAID;IAAU,GAAwB;QAC9FS,kBAAkB;IACpB;IAEA,qGAAqG;IACrG,IACEN,eACA,CAACA,WAAW,CAAC,aAAa,IAC1B,CAACA,WAAW,CAAC,kBAAkB,IAC/BK,iBAAiB,CAAC,kBAAkB,EACpC;QACAL,WAAW,CAAC,kBAAkB,GAAGK,iBAAiB,CAAC,kBAAkB;IACvE;IAEA;;;GAGC,GACD,MAAME,cAAcvB,iBAClBF,eAAe,CAAC0B;QACdA,MAAMC,cAAc;IACtB,GAAGT,wBAAAA,kCAAAA,YAAaO,WAAW;IAG7B,MAAMG,UAAU1B,iBACdF,eAAe,CAAC0B;YAEdb;QADAa,MAAMC,cAAc;SACpBd,sBAAAA,WAAWgB,OAAO,cAAlBhB,0CAAAA,oBAAoBiB,KAAK;IAC3B,GAAGZ,wBAAAA,kCAAAA,YAAaU,OAAO;IAGzB,MAAMG,aAAa1B,cAAca,wBAAAA,kCAAAA,YAAaT,GAAG,EAAEA;IACnD,IAAIS,aAAa;QACfA,YAAYT,GAAG,GAAGsB;QAClBb,YAAYO,WAAW,GAAGA;QAC1BP,YAAYU,OAAO,GAAGA;IACxB;IAEA,OAAOV;AACT"}

package/lib/utils/useOptionCollection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 /**
  * A hook for managing a collection of child Options

package/lib/utils/useOptionCollection.js.map CHANGED Viewed

	@@ -1 +1 @@
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":["React","useOptionCollection","optionsById","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"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,cAAcF,MAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,MAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOZ,YAAYM,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAACjB,YAAYM,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,UAAUvB,YAAYM,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,iBAAiB5B,MAAM6B,WAAW,CAAC,CAACJ;QACxCvB,YAAYM,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMvB,YAAYM,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF,EAAE"}
1	+ {"version":3,"sources":["../src/utils/useOptionCollection.ts"],"sourcesContent":["'use client';\n\nimport * 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":["React","useOptionCollection","optionsById","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"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,sBAAsB;IACjC,MAAMC,cAAcF,MAAMG,MAAM,CAAC,IAAIC;IAErC,MAAMC,gBAAgBL,MAAMM,OAAO,CAAC;QAClC,MAAMC,WAAW,IAAML,YAAYM,OAAO,CAACC,IAAI;QAE/C,oCAAoC;QACpC,MAAMC,mBAAmB,IAAMC;QAC/B,MAAMC,eAAe,IAAM,CAAC;QAE5B,MAAMC,gBAAgB,CAACC;YACrB,OAAOZ,YAAYM,OAAO,CAACO,GAAG,CAACD;QACjC;QACA,MAAME,yBAAyB,CAACC;YAC9B,OAAOC,MAAMC,IAAI,CAACjB,YAAYM,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,UAAUvB,YAAYM,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,iBAAiB5B,MAAM6B,WAAW,CAAC,CAACJ;QACxCvB,YAAYM,OAAO,CAACsB,GAAG,CAACL,OAAOX,EAAE,EAAEW;QAEnC,OAAO,IAAMvB,YAAYM,OAAO,CAACuB,MAAM,CAACN,OAAOX,EAAE;IACnD,GAAG,EAAE;IAEL,OAAO;QACL,GAAGT,aAAa;QAChB2B,SAASd,MAAMC,IAAI,CAACjB,YAAYM,OAAO,CAACY,MAAM;QAC9CQ;IACF;AACF,EAAE"}

package/lib/utils/useSelection.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useControllableState } from '@fluentui/react-utilities';
 export const useSelection = (props)=>{

package/lib/utils/useSelection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["~~import~~ * as React 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 = React.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":["React","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,MAAMa,WAAW,CACpC,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIb,aAAa;YACf,MAAMc,gBAAgBZ,gBAAgBa,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIV,gBAAgBe,KAAK,CAAC,GAAGH;uBAAmBZ,gBAAgBe,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIV;oBAAiBQ,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAV,mBAAmBS;QACnBX,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAElB,iBAAiBU;QAAa;IAC9G,GACA;QAACX;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMkB,iBAAiB,CAACZ;QACtBN,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWpB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEmB;QAAgBd;QAAcL;IAAgB;AACzD,EAAE"}
1	+ {"version":3,"sources":["../src/utils/useSelection.ts"],"sourcesContent":["'use client';\n\nimport * as React 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 = React.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":["React","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","useCallback","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,4BAA4B;AAIjE,OAAO,MAAMC,eAAe,CAACC;IAC3B,MAAM,EAAEC,sBAAsB,EAAEC,WAAW,EAAEC,cAAc,EAAE,GAAGH;IAEhE,MAAM,CAACI,iBAAiBC,mBAAmB,GAAGP,qBAAqB;QACjEQ,OAAON,MAAMI,eAAe;QAC5BG,cAAcN;QACdO,cAAc,EAAE;IAClB;IAEA,MAAMC,eAAeZ,MAAMa,WAAW,CACpC,CAACC,OAAwBC;QACvB,wCAAwC;QACxC,IAAIA,OAAOC,QAAQ,EAAE;YACnB;QACF;QAEA,uDAAuD;QACvD,IAAIC,eAAe;YAACF,OAAOG,KAAK;SAAC;QAEjC,sDAAsD;QACtD,IAAIb,aAAa;YACf,MAAMc,gBAAgBZ,gBAAgBa,SAAS,CAACC,CAAAA,IAAKA,MAAMN,OAAOG,KAAK;YACvE,IAAIC,gBAAgB,CAAC,GAAG;gBACtB,kBAAkB;gBAClBF,eAAe;uBAAIV,gBAAgBe,KAAK,CAAC,GAAGH;uBAAmBZ,gBAAgBe,KAAK,CAACH,gBAAgB;iBAAG;YAC1G,OAAO;gBACL,gBAAgB;gBAChBF,eAAe;uBAAIV;oBAAiBQ,OAAOG,KAAK;iBAAC;YACnD;QACF;QAEAV,mBAAmBS;QACnBX,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaR,OAAOG,KAAK;YAAEM,YAAYT,OAAOU,IAAI;YAAElB,iBAAiBU;QAAa;IAC9G,GACA;QAACX;QAAgBD;QAAaE;QAAiBC;KAAmB;IAGpE,MAAMkB,iBAAiB,CAACZ;QACtBN,mBAAmB,EAAE;QACrBF,2BAAAA,qCAAAA,eAAiBQ,OAAO;YAAES,aAAaI;YAAWH,YAAYG;YAAWpB,iBAAiB,EAAE;QAAC;IAC/F;IAEA,OAAO;QAAEmB;QAAgBd;QAAcL;IAAgB;AACzD,EAAE"}

package/lib/utils/useTriggerSlot.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { useSetKeyboardNavigation } from '@fluentui/react-tabster';
 import { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';

package/lib/utils/useTriggerSlot.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' \| 'getOptionById' \| 'selectOption' \| 'setOpen' \| 'multiselect' \| 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/*\n Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> \| NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> \| React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' \| 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> \| SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement \| HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' \| 'selectOption' \| 'getOptionById' \| 'multiselect' \| 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue \| undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue \| undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/utils/useTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSetKeyboardNavigation } from '@fluentui/react-tabster';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, slot, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../utils/dropdownKeyActions';\nimport type { ComboboxBaseState } from './ComboboxBase.types';\nimport { OptionValue } from './OptionCollection.types';\n\nexport type UseTriggerSlotState = Pick<\n ComboboxBaseState,\n 'open' \| 'getOptionById' \| 'selectOption' \| 'setOpen' \| 'multiselect' \| 'setHasFocus'\n>;\n\ntype UseTriggerSlotOptions = {\n state: UseTriggerSlotState;\n defaultProps: unknown;\n activeDescendantController: ActiveDescendantImperativeRef;\n};\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement>,\n options: UseTriggerSlotOptions & { elementType: 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>>;\n\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>>,\n ref: React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' },\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n\n/*\n Shared trigger behaviour for combobox and dropdown\n * @returns trigger slot with desired behaviour and props\n */\nexport function useTriggerSlot(\n triggerSlotFromProp: NonNullable<Slot<'input'>> \| NonNullable<Slot<'button'>>,\n ref: React.Ref<HTMLButtonElement> \| React.Ref<HTMLInputElement>,\n options: UseTriggerSlotOptions & { elementType: 'input' \| 'button' },\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> \| SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n const {\n state: { open, setOpen, setHasFocus },\n defaultProps,\n elementType,\n activeDescendantController,\n } = options;\n\n const trigger = slot.always(triggerSlotFromProp, {\n defaultProps: {\n type: 'text',\n 'aria-expanded': open,\n role: 'combobox',\n ...(typeof defaultProps === 'object' && defaultProps),\n },\n elementType,\n });\n\n // handle trigger focus/blur\n const triggerRef = React.useRef<HTMLButtonElement \| HTMLInputElement>(null);\n trigger.ref = useMergedRefs(triggerRef, trigger.ref, ref) as React.Ref<HTMLButtonElement & HTMLInputElement>;\n\n // the trigger should open/close the popup on click or blur\n trigger.onBlur = mergeCallbacks((event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n setOpen(event, false);\n setHasFocus(false);\n }, trigger.onBlur);\n\n trigger.onFocus = mergeCallbacks(\n (event: React.FocusEvent<HTMLButtonElement> & React.FocusEvent<HTMLInputElement>) => {\n if (event.target === event.currentTarget) {\n setHasFocus(true);\n }\n },\n trigger.onFocus,\n );\n trigger.onClick = mergeCallbacks(\n (event: React.MouseEvent<HTMLButtonElement> & React.MouseEvent<HTMLInputElement>) => {\n setOpen(event, !open);\n },\n trigger.onClick,\n );\n\n // handle combobox keyboard interaction\n trigger.onKeyDown = mergeCallbacks(\n useTriggerKeydown({ activeDescendantController, ...options.state }),\n trigger.onKeyDown,\n );\n\n return trigger as SlotComponentType<ExtractSlotProps<Slot<'input'>>>;\n}\n\nfunction useTriggerKeydown(\n options: {\n activeDescendantController: ActiveDescendantImperativeRef;\n } & Pick<UseTriggerSlotState, 'setOpen' \| 'selectOption' \| 'getOptionById' \| 'multiselect' \| 'open'>,\n) {\n const { activeDescendantController, getOptionById, setOpen, selectOption, multiselect, open } = options;\n\n const getActiveOption = React.useCallback(() => {\n const activeOptionId = activeDescendantController.active();\n return activeOptionId ? getOptionById(activeOptionId) : undefined;\n }, [activeDescendantController, getOptionById]);\n\n const first = () => {\n activeDescendantController.first();\n };\n\n const last = () => {\n activeDescendantController.last();\n };\n\n const next = (activeOption: OptionValue \| undefined) => {\n if (activeOption) {\n activeDescendantController.next();\n } else {\n activeDescendantController.first();\n }\n };\n\n const previous = (activeOption: OptionValue \| undefined) => {\n if (activeOption) {\n activeDescendantController.prev();\n } else {\n activeDescendantController.first();\n }\n };\n\n const pageUp = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.prev();\n }\n };\n\n const pageDown = () => {\n for (let i = 0; i < 10; i++) {\n activeDescendantController.next();\n }\n };\n\n const setKeyboardNavigation = useSetKeyboardNavigation();\n return useEventCallback((e: React.KeyboardEvent<HTMLInputElement> & React.KeyboardEvent<HTMLButtonElement>) => {\n const action = getDropdownActionFromKey(e, { open, multiselect });\n const activeOption = getActiveOption();\n\n switch (action) {\n case 'First':\n case 'Last':\n case 'Next':\n case 'Previous':\n case 'PageDown':\n case 'PageUp':\n case 'Open':\n case 'Close':\n case 'CloseSelect':\n case 'Select':\n e.preventDefault();\n break;\n }\n\n setKeyboardNavigation(true);\n\n switch (action) {\n case 'First':\n first();\n break;\n case 'Last':\n last();\n break;\n case 'Next':\n next(activeOption);\n break;\n case 'Previous':\n previous(activeOption);\n break;\n case 'PageDown':\n pageDown();\n break;\n case 'PageUp':\n pageUp();\n break;\n case 'Open':\n setOpen(e, true);\n break;\n case 'Close':\n // stop propagation for escape key to avoid dismissing any parent popups\n e.stopPropagation();\n setOpen(e, false);\n break;\n case 'CloseSelect':\n !multiselect && !activeOption?.disabled && setOpen(e, false);\n // fallthrough\n case 'Select':\n activeOption && selectOption(e, activeOption);\n break;\n case 'Tab':\n !multiselect && activeOption && selectOption(e, activeOption);\n break;\n }\n });\n}\n"],"names":["React","useSetKeyboardNavigation","mergeCallbacks","slot","useEventCallback","useMergedRefs","getDropdownActionFromKey","useTriggerSlot","triggerSlotFromProp","ref","options","state","open","setOpen","setHasFocus","defaultProps","elementType","activeDescendantController","trigger","always","type","role","triggerRef","useRef","onBlur","event","onFocus","target","currentTarget","onClick","onKeyDown","useTriggerKeydown","getOptionById","selectOption","multiselect","getActiveOption","useCallback","activeOptionId","active","undefined","first","last","next","activeOption","previous","prev","pageUp","i","pageDown","setKeyboardNavigation","e","action","preventDefault","stopPropagation","disabled"],"mappings":"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"}

package/lib-commonjs/components/Combobox/Combobox.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Combobox/Combobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["~~import~~ * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"~~;;;;+BAYaM;;;;;;;iEAZU~~,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAE/B,0CAA0C;qCAEvC,kCAAkC;AAKvE,~~iBAAMA~~,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Combobox/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useCombobox_unstable } from './useCombobox';\nimport { renderCombobox_unstable } from './renderCombobox';\nimport { useComboboxStyles_unstable } from './useComboboxStyles.styles';\nimport type { ComboboxProps } from './Combobox.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Combobox component: a selection control that allows users to choose from a set of possible options\n */\nexport const Combobox: ForwardRefComponent<ComboboxProps> = React.forwardRef((props, ref) => {\n const state = useCombobox_unstable(props, ref);\n const contextValues = useComboboxContextValues(state);\n\n useComboboxStyles_unstable(state);\n\n useCustomStyleHook_unstable('useComboboxStyles_unstable')(state);\n\n return renderCombobox_unstable(state, contextValues);\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["React","useCombobox_unstable","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Combobox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;0CAE/B,0CAA0C;qCAEvC,kCAAkC;AAKvE,MAAMM,WAAAA,WAAAA,GAA+CN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,YAAQT,iCAAAA,EAAqBO,OAAOC;IAC1C,MAAME,oBAAgBP,kDAAAA,EAAyBM;QAE/CP,mDAAAA,EAA2BO;QAE3BL,gDAAAA,EAA4B,8BAA8BK;IAE1D,WAAOR,uCAAAA,EAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib-commonjs/components/Combobox/useCombobox.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/components/Combobox/useCombobox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n slot,\n useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxOpenEvents, ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/*\n Create the state required to render Combobox.\n \n The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n \n @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n /\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n baseState;\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const { disableAutoFocus = false, freeform, inlinePopup } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children,\n disableAutoFocus,\n },\n });\n\n const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: baseState,\n freeform,\n defaultProps: {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? listbox?.id : undefined,\n ...triggerNativeProps,\n },\n activeDescendantController,\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n const state: ComboboxState = {\n components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n root: rootSlot,\n input: triggerSlot,\n listbox: open \|\| hasFocus ? listbox : undefined,\n clearIcon: slot.optional(props.clearIcon, {\n defaultProps: {\n 'aria-hidden': 'true',\n children: <DismissIcon />,\n },\n elementType: 'span',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n elementType: 'span',\n }),\n showClearIcon,\n activeDescendantController,\n ...baseState,\n };\n\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n element: targetDocument,\n callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n disabled: !open,\n });\n\n / handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown } = state.expandIcon \|\| {};\n\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault();\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] \|\| state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n const onClearIconMouseDown = useEventCallback(\n mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n ev.preventDefault();\n }),\n );\n const onClearIconClick = useEventCallback(\n mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n clearSelection(ev);\n }),\n );\n\n if (state.clearIcon) {\n state.clearIcon.onMouseDown = onClearIconMouseDown;\n state.clearIcon.onClick = onClearIconClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearIcon = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Combobox/useCombobox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport {\n getPartitionedNativeProps,\n mergeCallbacks,\n useEventCallback,\n useId,\n useMergedRefs,\n slot,\n useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { ComboboxOpenEvents, ComboboxProps, ComboboxState } from './Combobox.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useInputTriggerSlot } from './useInputTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\n\n/*\n Create the state required to render Combobox.\n \n The returned state can be modified with hooks such as useComboboxStyles_unstable,\n * before being passed to renderCombobox_unstable.\n \n @param props - props from this instance of Combobox\n * @param ref - reference to root HTMLElement of Combobox\n /\nexport const useCombobox_unstable = (props: ComboboxProps, ref: React.Ref<HTMLInputElement>): ComboboxState => {\n 'use no memo';\n\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n const {\n listboxRef: activeDescendantListboxRef,\n activeParentRef,\n controller: activeDescendantController,\n } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n matchOption: el => el.classList.contains(optionClassNames.root),\n });\n const baseState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });\n\n const { clearable, clearSelection, disabled, multiselect, open, selectedOptions, setOpen, value, hasFocus } =\n baseState;\n const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n const { disableAutoFocus = false, freeform, inlinePopup } = props;\n const comboId = useId('combobox-');\n\n const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['children', 'size'],\n });\n\n const triggerRef = React.useRef<HTMLInputElement>(null);\n\n const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n state: baseState,\n triggerRef,\n defaultProps: {\n children: props.children,\n disableAutoFocus,\n },\n });\n\n const triggerSlot = useInputTriggerSlot(props.input ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n state: baseState,\n freeform,\n defaultProps: {\n type: 'text',\n value: value ?? '',\n 'aria-controls': open ? listbox?.id : undefined,\n ...triggerNativeProps,\n },\n activeDescendantController,\n });\n\n const rootSlot = slot.always(props.root, {\n defaultProps: {\n 'aria-owns': !inlinePopup && open ? listbox?.id : undefined,\n ...rootNativeProps,\n },\n elementType: 'div',\n });\n rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n const showClearIcon = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n const state: ComboboxState = {\n components: { root: 'div', input: 'input', expandIcon: 'span', listbox: Listbox, clearIcon: 'span' },\n root: rootSlot,\n input: triggerSlot,\n listbox: open \|\| hasFocus ? listbox : undefined,\n clearIcon: slot.optional(props.clearIcon, {\n defaultProps: {\n 'aria-hidden': 'true',\n children: <DismissIcon />,\n },\n elementType: 'span',\n renderByDefault: true,\n }),\n expandIcon: slot.optional(props.expandIcon, {\n renderByDefault: true,\n defaultProps: {\n 'aria-disabled': disabled ? 'true' : undefined,\n 'aria-expanded': open,\n children: <ChevronDownIcon />,\n role: 'button',\n },\n elementType: 'span',\n }),\n showClearIcon,\n activeDescendantController,\n ...baseState,\n };\n\n const { targetDocument } = useFluent();\n\n useOnClickOutside({\n element: targetDocument,\n callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n disabled: !open,\n });\n\n / handle open/close + focus change when clicking expandIcon */\n const { onMouseDown: onIconMouseDown } = state.expandIcon \|\| {};\n\n const onExpandIconMouseDown = useEventCallback(\n mergeCallbacks(onIconMouseDown, (event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault();\n state.setOpen(event, !state.open);\n triggerRef.current?.focus();\n }),\n );\n\n if (state.expandIcon) {\n state.expandIcon.onMouseDown = onExpandIconMouseDown;\n\n // If there is no explicit aria-label, calculate default accName attribute for expandIcon button,\n // using the following steps:\n // 1. If there is an aria-label, it is \"Open [aria-label]\"\n // 2. If there is an aria-labelledby, it is \"Open [aria-labelledby target]\" (using aria-labelledby + ids)\n // 3. If there is no aria-label/ledby attr, it falls back to \"Open\"\n // We can't fall back to a label/htmlFor name because of https://github.com/w3c/accname/issues/179\n const hasExpandLabel = state.expandIcon['aria-label'] \|\| state.expandIcon['aria-labelledby'];\n const defaultOpenString = 'Open'; // this is english-only since it is the fallback\n if (!hasExpandLabel) {\n if (props['aria-labelledby']) {\n const chevronId = state.expandIcon.id ?? `${comboId}-chevron`;\n const chevronLabelledBy = `${chevronId} ${state.input['aria-labelledby']}`;\n\n state.expandIcon['aria-label'] = defaultOpenString;\n state.expandIcon.id = chevronId;\n state.expandIcon['aria-labelledby'] = chevronLabelledBy;\n } else if (props['aria-label']) {\n state.expandIcon['aria-label'] = `${defaultOpenString} ${props['aria-label']}`;\n } else {\n state.expandIcon['aria-label'] = defaultOpenString;\n }\n }\n }\n\n const onClearIconMouseDown = useEventCallback(\n mergeCallbacks(state.clearIcon?.onMouseDown, (ev: React.MouseEvent<HTMLSpanElement>) => {\n ev.preventDefault();\n }),\n );\n const onClearIconClick = useEventCallback(\n mergeCallbacks(state.clearIcon?.onClick, (ev: React.MouseEvent<HTMLSpanElement>) => {\n clearSelection(ev);\n }),\n );\n\n if (state.clearIcon) {\n state.clearIcon.onMouseDown = onClearIconMouseDown;\n state.clearIcon.onClick = onClearIconClick;\n }\n\n // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n if (multiselect) {\n state.clearIcon = undefined;\n }\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n React.useEffect(() => {\n if (clearable && multiselect) {\n // eslint-disable-next-line no-console\n console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n }\n }, [clearable, multiselect]);\n }\n\n return state;\n};\n"],"names":["React","useActiveDescendant","useFieldControlProps_unstable","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","getPartitionedNativeProps","mergeCallbacks","useEventCallback","useId","useMergedRefs","slot","useOnClickOutside","useFluent_unstable","useFluent","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useInputTriggerSlot","optionClassNames","useCombobox_unstable","props","ref","state","supportsLabelFor","supportsRequired","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","editable","clearable","clearSelection","disabled","multiselect","open","selectedOptions","setOpen","value","hasFocus","comboboxPopupRef","comboboxTargetRef","disableAutoFocus","freeform","inlinePopup","comboId","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","triggerRef","useRef","listbox","defaultProps","children","triggerSlot","input","type","id","undefined","rootSlot","always","elementType","showClearIcon","length","components","expandIcon","clearIcon","optional","renderByDefault","role","targetDocument","element","callback","event","refs","onMouseDown","onIconMouseDown","onExpandIconMouseDown","preventDefault","current","focus","hasExpandLabel","defaultOpenString","chevronId","chevronLabelledBy","onClearIconMouseDown","ev","onClearIconClick","onClick","process","env","NODE_ENV","useEffect","console","error"],"mappings":"AAAA;;;;;+BAiCasB;;;;;;;iEA/BU,QAAQ;2BACK,uBAAuB;4BACb,wBAAwB;4BACe,wBAAwB;gCAStG,4BAA4B;qCACa,kCAAkC;sCAC7C,mCAAmC;wCACjC,qCAAqC;yBACpD,qBAAqB;gCAEd,6BAA6B;qCACxB,wBAAwB;uCAC3B,mCAAmC;AAW7D,6BAA6B,CAACC,OAAsBC;IACzD;QAsIiBC,kBAKAA;IAzIjB,+CAA+C;IAC/CF,YAAQrB,yCAAAA,EAA8BqB,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAClH,MAAM,EACJC,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,YAAYC,0BAA0B,EACvC,OAAGhC,8BAAAA,EAAsD;QACxDiC,aAAaC,CAAAA,KAAMA,GAAGC,SAAS,CAACC,QAAQ,CAAChB,uCAAAA,CAAiBiB,IAAI;IAChE;IACA,MAAMC,gBAAYvB,0CAAAA,EAAqB;QAAE,GAAGO,KAAK;QAAEiB,UAAU;QAAMP;IAA2B;IAE9F,MAAM,EAAEQ,SAAS,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,WAAW,EAAEC,IAAI,EAAEC,eAAe,EAAEC,OAAO,EAAEC,KAAK,EAAEC,QAAQ,EAAE,GACzGV;IACF,MAAM,CAACW,kBAAkBC,kBAAkB,OAAGlC,8CAAAA,EAAuBM;IACrE,MAAM,EAAE6B,mBAAmB,KAAK,EAAEC,QAAQ,EAAEC,WAAW,EAAE,GAAG/B;IAC5D,MAAMgC,cAAU7C,qBAAAA,EAAM;IAEtB,MAAM,EAAE8C,SAASC,kBAAkB,EAAEnB,MAAMoB,eAAe,EAAE,OAAGnD,yCAAAA,EAA0B;QACvFgB;QACAoC,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;SAAO;IACzC;IAEA,MAAMC,aAAa7D,OAAM8D,MAAM,CAAmB;IAElD,MAAMC,cAAU5C,8BAAAA,EAAeI,MAAMwC,OAAO,MAAEpD,6BAAAA,EAAcuC,kBAAkBpB,6BAA6B;QACzGL,OAAOc;QACPsB;QACAG,cAAc;YACZC,UAAU1C,MAAM0C,QAAQ;YACxBb;QACF;IACF;QAEwC7B;IAAxC,MAAM2C,kBAAc9C,wCAAAA,EAAoBG,CAAAA,eAAAA,MAAM4C,KAAAA,AAAK,MAAA,QAAX5C,iBAAAA,KAAAA,IAAAA,eAAe,CAAC,GAAGZ,iCAAAA,EAAckD,YAAY9B,iBAAiBP,MAAM;QAC1GC,OAAOc;QACPc;QACAW,cAAc;YACZI,MAAM;YACNpB,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAAS;YAChB,iBAAiBH,OAAOkB,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASM,EAAE,GAAGC;YACtC,GAAGb,kBAAkB;QACvB;QACAxB;IACF;IAEA,MAAMsC,WAAW3D,oBAAAA,CAAK4D,MAAM,CAACjD,MAAMe,IAAI,EAAE;QACvC0B,cAAc;YACZ,aAAa,CAACV,eAAeT,OAAOkB,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAASM,EAAE,GAAGC;YAClD,GAAGZ,eAAe;QACpB;QACAe,aAAa;IACf;IACAF,SAAS/C,GAAG,OAAGb,6BAAAA,EAAc4D,SAAS/C,GAAG,EAAE2B;IAE3C,MAAMuB,gBAAgB5B,gBAAgB6B,MAAM,GAAG,KAAK,CAAChC,YAAYF,aAAa,CAACG;IAC/E,MAAMnB,QAAuB;QAC3BmD,YAAY;YAAEtC,MAAM;YAAO6B,OAAO;YAASU,YAAY;YAAQd,SAAS7C,gBAAAA;YAAS4D,WAAW;QAAO;QACnGxC,MAAMiC;QACNJ,OAAOD;QACPH,SAASlB,QAAQI,WAAWc,UAAUO;QACtCQ,WAAWlE,oBAAAA,CAAKmE,QAAQ,CAACxD,MAAMuD,SAAS,EAAE;YACxCd,cAAc;gBACZ,eAAe;gBACfC,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC3D,0BAAAA,EAAAA;YACb;YACAmE,aAAa;YACbO,iBAAiB;QACnB;QACAH,YAAYjE,oBAAAA,CAAKmE,QAAQ,CAACxD,MAAMsD,UAAU,EAAE;YAC1CG,iBAAiB;YACjBhB,cAAc;gBACZ,iBAAiBrB,WAAW,SAAS2B;gBACrC,iBAAiBzB;gBACjBoB,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAAC7D,8BAAAA,EAAAA;gBACX6E,MAAM;YACR;YACAR,aAAa;QACf;QACAC;QACAzC;QACA,GAAGM,SAAS;IACd;IAEA,MAAM,EAAE2C,cAAc,EAAE,OAAGnE,uCAAAA;QAE3BF,iCAAAA,EAAkB;QAChBsE,SAASD;QACTE,UAAUC,CAAAA,QAAStC,QAAQsC,OAAwC;QACnEC,MAAM;YAACzB;YAAYX;YAAkBC;SAAkB;QACvDR,UAAU,CAACE;IACb;IAEA,6DAA6D,GAC7D,MAAM,EAAE0C,aAAaC,eAAe,EAAE,GAAG/D,MAAMoD,UAAU,IAAI,CAAC;IAE9D,MAAMY,4BAAwBhF,gCAAAA,MAC5BD,8BAAAA,EAAegF,iBAAiB,CAACH;YAG/BxB;QAFAwB,MAAMK,cAAc;QACpBjE,MAAMsB,OAAO,CAACsC,OAAO,CAAC5D,MAAMoB,IAAI;SAChCgB,sBAAAA,WAAW8B,OAAO,AAAPA,MAAO,QAAlB9B,wBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,oBAAoB+B,KAAK;IAC3B;IAGF,IAAInE,MAAMoD,UAAU,EAAE;QACpBpD,MAAMoD,UAAU,CAACU,WAAW,GAAGE;QAE/B,iGAAiG;QACjG,6BAA6B;QAC7B,0DAA0D;QAC1D,yGAAyG;QACzG,mEAAmE;QACnE,kGAAkG;QAClG,MAAMI,iBAAiBpE,MAAMoD,UAAU,CAAC,aAAa,IAAIpD,MAAMoD,UAAU,CAAC,kBAAkB;QAC5F,MAAMiB,oBAAoB,QAAQ,gDAAgD;QAClF,IAAI,CAACD,gBAAgB;YACnB,IAAItE,KAAK,CAAC,kBAAkB,EAAE;oBACVE;gBAAlB,MAAMsE,YAAYtE,CAAAA,uBAAAA,MAAMoD,UAAU,CAACR,EAAAA,AAAE,MAAA,QAAnB5C,yBAAAA,KAAAA,IAAAA,uBAAuB,GAAG8B,QAAQ,QAAQ,CAAC;gBAC7D,MAAMyC,oBAAoB,GAAGD,UAAU,CAAC,EAAEtE,MAAM0C,KAAK,CAAC,kBAAkB,EAAE;gBAE1E1C,MAAMoD,UAAU,CAAC,aAAa,GAAGiB;gBACjCrE,MAAMoD,UAAU,CAACR,EAAE,GAAG0B;gBACtBtE,MAAMoD,UAAU,CAAC,kBAAkB,GAAGmB;YACxC,OAAO,IAAIzE,KAAK,CAAC,aAAa,EAAE;gBAC9BE,MAAMoD,UAAU,CAAC,aAAa,GAAG,GAAGiB,kBAAkB,CAAC,EAAEvE,KAAK,CAAC,aAAa,EAAE;YAChF,OAAO;gBACLE,MAAMoD,UAAU,CAAC,aAAa,GAAGiB;YACnC;QACF;IACF;IAEA,MAAMG,2BAAuBxF,gCAAAA,MAC3BD,8BAAAA,EAAAA,CAAeiB,mBAAAA,MAAMqD,SAAAA,AAAS,MAAA,QAAfrD,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAiB8D,WAAW,EAAE,CAACW;QAC5CA,GAAGR,cAAc;IACnB;IAEF,MAAMS,uBAAmB1F,gCAAAA,MACvBD,8BAAAA,EAAAA,CAAeiB,oBAAAA,MAAMqD,SAAS,AAATA,MAAS,QAAfrD,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAiB2E,OAAO,EAAE,CAACF;QACxCxD,eAAewD;IACjB;IAGF,IAAIzE,MAAMqD,SAAS,EAAE;QACnBrD,MAAMqD,SAAS,CAACS,WAAW,GAAGU;QAC9BxE,MAAMqD,SAAS,CAACsB,OAAO,GAAGD;IAC5B;IAEA,gGAAgG;IAChG,IAAIvD,aAAa;QACfnB,MAAMqD,SAAS,GAAGR;IACpB;IAEA,IAAI+B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,kGAAkG;QAClGvG,OAAMwG,SAAS,CAAC;YACd,IAAI/D,aAAaG,aAAa;gBAC5B,sCAAsC;gBACtC6D,QAAQC,KAAK,CAAC,CAAC,iFAAiF,CAAC;YACnG;QACF,GAAG;YAACjE;YAAWG;SAAY;IAC7B;IAEA,OAAOnB;AACT,EAAE"}

package/lib-commonjs/components/Combobox/useComboboxStyles.styles.js CHANGED Viewed

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true