npm - @fluentui/react-combobox - Versions diffs - 9.1.4 → 9.2.0 - Mend

@fluentui/react-combobox 9.1.4 → 9.2.0

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 (115) hide show

package/lib/components/Listbox/useListbox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","role","undefined","tabIndex","scrollContainerRef"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/Listbox/useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"]}
1	+ {"version":3,"names":["React","getNativeElementProps","mergeCallbacks","useEventCallback","useMergedRefs","useContextSelector","useHasParentContext","getDropdownActionFromKey","getIndexFromAction","useOptionCollection","useScrollOptionsIntoView","useSelection","ComboboxContext","useListbox_unstable","props","ref","multiselect","optionCollection","getCount","getOptionAtIndex","getIndexOfId","clearSelection","selectedOptions","selectOption","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","onKeyDown","event","action","open","maxIndex","activeIndex","id","newIndex","preventDefault","onMouseOver","hasComboboxContext","comboboxActiveOption","ctx","comboboxFocusVisible","comboboxSelectedOptions","comboboxSelectOption","comboboxSetActiveOption","optionContextValues","state","components","root","role","undefined","tabIndex","scrollContainerRef"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/useListbox.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';\nimport { useSelection } from '../../utils/useSelection';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\n\n/*\n Create the state required to render Listbox.\n \n The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n \n @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n const { multiselect } = props;\n const optionCollection = useOptionCollection();\n const { getCount, getOptionAtIndex, getIndexOfId } = optionCollection;\n\n const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\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 const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n const action = getDropdownActionFromKey(event, { open: true });\n const maxIndex = getCount() - 1;\n const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;\n let newIndex = activeIndex;\n\n switch (action) {\n case 'Select':\n case 'CloseSelect':\n activeOption && selectOption(event, activeOption);\n break;\n default:\n newIndex = getIndexFromAction(action, activeIndex, maxIndex);\n }\n\n if (newIndex !== activeIndex) {\n // prevent default page scroll/keyboard action if the index changed\n event.preventDefault();\n setActiveOption(getOptionAtIndex(newIndex));\n setFocusVisible(true);\n }\n };\n\n const onMouseOver = (event: React.MouseEvent<HTMLElement>) => {\n setFocusVisible(false);\n };\n\n // get state from parent combobox, if it exists\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);\n const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);\n const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);\n const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);\n\n // without a parent combobox context, provide values directly from Listbox\n const optionContextValues = hasComboboxContext\n ? {\n activeOption: comboboxActiveOption,\n focusVisible: comboboxFocusVisible,\n selectedOptions: comboboxSelectedOptions,\n selectOption: comboboxSelectOption,\n setActiveOption: comboboxSetActiveOption,\n }\n : {\n activeOption,\n focusVisible,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n const state: ListboxState = {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref,\n role: multiselect ? 'menu' : 'listbox',\n 'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n 'aria-multiselectable': multiselect,\n tabIndex: 0,\n ...props,\n }),\n multiselect,\n clearSelection,\n ...optionCollection,\n ...optionContextValues,\n };\n\n const scrollContainerRef = useScrollOptionsIntoView(state);\n state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);\n\n state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));\n\n return state;\n};\n"],"mappings":"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"}

package/lib/components/Listbox/useListboxStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~,~~SAASA~~,~~MAAM~~,~~QAAQ~~,~~uBAAuB;AAE9C~~,~~mBAAqBC~~,~~YAAY~~,~~EAAEC~~,~~UAAU~~,~~QAAQ~~,~~gBAAgB;AAGrE~~,~~OAAO~~,~~MAAMC~~,~~iBAAiB~~,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC","~~names~~":["~~tokens~~","~~mergeClasses~~","~~shorthands~~","~~listboxClassNames~~","~~root~~","~~useStyles~~","useListboxStyles_unstable","state","styles","className"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding(tokens.spacingHorizontalXS),\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"]}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bpd4iqm","oeaueh","Bw0xxkn","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","d","useListboxStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n root: 'fui-Listbox',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n backgroundColor: tokens.colorNeutralBackground1,\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'column',\n minWidth: '160px',\n overflowY: 'auto',\n ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n ...shorthands.padding(tokens.spacingHorizontalXS),\n rowGap: tokens.spacingHorizontalXXS,\n },\n});\n\n/\n Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n const styles = useStyles();\n state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGlB,SAAS,EAAE;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC"}

package/lib/components/Option/Option.js CHANGED Viewed

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useOption_unstable } from './useOption';
 import { renderOption_unstable } from './renderOption';
 import { useOptionStyles_unstable } from './useOptionStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Option component: a styled child option of a Combobox
  */
 export const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOption_unstable(props, ref);
   useOptionStyles_unstable(state);
+  const {
+    useOptionStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderOption_unstable(state);
 });
 Option.displayName = 'Option';

package/lib/components/Option/Option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGP,kBAAkB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAC/B,OAAON,qBAAqB,CAACM,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","Option","forwardRef","props","ref","state","displayName"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"]}
1	+ {"version":3,"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHooks_unstable","Option","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n const state = useOption_unstable(props, ref);\n\n useOptionStyles_unstable(state);\n\n const { useOptionStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,mBAAmB;AAG5D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGR,kBAAkB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAE5CL,wBAAwB,CAACM,KAAK,CAAC;EAE/B,MAAM;IAAEN,wBAAwB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACpFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,qBAAqB,CAACO,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACM,WAAW,GAAG,QAAQ"}

package/lib/components/Option/renderOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,SAAS;IAAA,GAAKF,SAAS,CAACE;EAAS,EAAI,EAC3CF,SAAS,CAACC,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC","names":["React","getSlots","renderOption_unstable","state","slots","slotProps","root","checkIcon","children"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/*\n Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkIcon {...slotProps.checkIcon} />\n {slotProps.root.children}\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"names":["React","getSlots","renderOption_unstable","state","slots","slotProps","createElement","root","checkIcon","children"],"sources":["../src/packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/*\n Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <slots.checkIcon {...slotProps.checkIcon} />\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,SAAS;IAAA,GAAKH,SAAS,CAACG;EAAS,EAAI,EAC3CH,SAAS,CAACE,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC"}

package/lib/components/Option/useOption.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string \| undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue })~~, [\~~n id~~,\n~~ disabled~~,\n~~ optionText~~,\n~~ optionValue,\n ]);\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"]}
1	+ {"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","_a","activeOption","_b","CheckIcon","createElement","onClick","event","preventDefault","call","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sources":["../src/packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string \| undefined, children: React.ReactNode) {\n if (text !== undefined) {\n return text;\n }\n\n let textString = '';\n let hasNonStringChild = false;\n React.Children.forEach(children, child => {\n if (typeof child === 'string') {\n textString += child;\n } else {\n hasNonStringChild = true;\n }\n });\n\n // warn if an Option has non-string children and no text prop\n if (hasNonStringChild) {\n // eslint-disable-next-line no-console\n console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n }\n\n return textString;\n}\n\n/*\n Create the state required to render Option.\n \n The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n \n @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n const { children, disabled, text, value } = props;\n const optionRef = React.useRef<HTMLElement>(null);\n const optionText = getTextString(text, children);\n const optionValue = value ?? optionText;\n\n // use the id if provided, otherwise use a generated id\n const id = useId('fluent-option', props.id);\n\n // data used for context registration & events\n const optionData = React.useMemo<OptionValue>(\n () => ({ id, disabled, text: optionText, value: optionValue }),\n [id, disabled, optionText, optionValue],\n );\n\n // context values\n const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n const selected = useContextSelector(ListboxContext, ctx => {\n const selectedOptions = ctx.selectedOptions;\n\n return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n });\n const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n // current active option?\n const active = useContextSelector(ListboxContext, ctx => {\n return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n });\n\n // check icon\n let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n if (multiselect) {\n CheckIcon = selected ? <Checkmark12Filled /> : '';\n }\n\n const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n if (disabled) {\n event.preventDefault();\n return;\n }\n\n // clicked option should always become active option\n setActiveOption(optionData);\n\n // close on option click for single-select options in a combobox\n if (!multiselect) {\n setOpen?.(event, false);\n }\n\n // handle selection change\n selectOption(event, optionData);\n\n props.onClick?.(event);\n };\n\n // register option data with context\n React.useEffect(() => {\n if (id && optionRef.current) {\n return registerOption(optionData, optionRef.current);\n }\n }, [id, optionData, registerOption]);\n\n const semanticProps = multiselect\n ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n : { role: 'option', 'aria-selected': selected };\n\n return {\n components: {\n root: 'div',\n checkIcon: 'span',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, optionRef),\n 'aria-disabled': disabled ? 'true' : undefined,\n id,\n ...semanticProps,\n ...props,\n onClick,\n }),\n checkIcon: resolveShorthand(props.checkIcon, {\n required: true,\n defaultProps: {\n 'aria-hidden': 'true',\n children: CheckIcon,\n },\n }),\n active,\n disabled,\n focusVisible,\n multiselect,\n selected,\n };\n};\n"],"mappings":"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"}

package/lib/components/Option/useOptionStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~,~~SAASA~~,~~MAAM~~,~~QAAQ~~,~~uBAAuB;AAE9C~~,~~mBAAqBC~~,~~YAAY~~,~~EAAEC~~,~~UAAU~~,~~QAAQ~~,~~gBAAgB;AAGrE~~,~~OAAO~~,~~MAAMC~~,~~gBAAgB~~,~~GAAgC;EAC3DC~~,~~IAAI~~,~~EAAE~~,~~YAAY;EAClBC~~,~~SAAS~~,~~EAAE;CACZ;AAED;;;AAGA~~,~~MAAMC~~,~~SAAS~~,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,~~EA4GhB;AAEF;;;AAGA~~,~~OAAO~~,~~MAAMC~~,~~wBAAwB~~,~~GAAIC~~,~~KAAkB~~,~~IAAiB;EAC1E~~,~~MAAM;IAAEC~~,~~MAAM;IAAEC~~,~~QAAQ;IAAEC~~,~~YAAY;IAAEC~~,~~WAAW;IAAEC;EAAQ~~,~~CAAE~~,~~GAAGL~~,~~KAAK;EACvE~~,~~MAAMM~~,~~MAAM~~,~~GAAGR~~,~~SAAS~~,~~EAAE;EAC1BE~~,~~KAAK~~,~~CAACJ~~,~~IAAI~~,~~CAACW~~,~~SAAS~~,~~GAAGd~~,~~YAAY~~,~~CACjCE~~,~~gBAAgB~~,~~CAACC~~,~~IAAI~~,~~EACrBU~~,~~MAAM~~,~~CAACV~~,~~IAAI~~,~~EACXK~~,~~MAAM~~,~~IAAIE~~,~~YAAY~~,~~IAAIG~~,~~MAAM~~,~~CAACL~~,~~MAAM~~,~~EACvCC~~,QAAQ,IAAII,MAAM,CAACJ,QAAQ,EAC3BG,QAAQ,IAAIC,MAAM,CAACD,QAAQ,EAC3BL,KAAK,CAACJ,IAAI,CAACW,SAAS,CACrB;EAED,IAAIP,KAAK,CAACH,SAAS,EAAE;IACnBG,KAAK,CAACH,SAAS,CAACU,SAAS,GAAGd,YAAY,CACtCE,gBAAgB,CAACE,SAAS,EAC1BS,MAAM,CAACT,SAAS,EAChBG,KAAK,CAACH,SAAS,CAACU,SAAS,EACzBH,WAAW,IAAIE,MAAM,CAACE,gBAAgB,EACtCH,QAAQ,IAAIC,MAAM,CAACG,aAAa,EAChCJ,QAAQ,IAAID,WAAW,IAAIE,MAAM,CAACI,wBAAwB,EAC1DR,QAAQ,IAAII,MAAM,CAACK,aAAa,CACjC;;EAGH,OAAOX,KAAK;AACd,CAAC","~~names~~":["~~tokens~~","~~mergeClasses~~","~~shorthands~~","~~optionClassNames~~","~~root~~","~~checkIcon~~","~~useStyles~~","~~useOptionStyles_unstable~~","~~state~~","~~active~~","~~disabled~~","~~focusVisible~~","~~multiselect~~","~~selected~~","~~styles~~","~~className~~","~~multiselectCheck~~","~~selectedCheck~~","~~selectedMultiselectCheck~~","~~checkDisabled~~"],"~~sourceRoot~~":"~~../src/~~","sources":["packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/*\n Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"]}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n root: 'fui-Option',\n checkIcon: 'fui-Option__checkIcon',\n};\n\n/*\n Styles for the root slot\n /\nconst useStyles = makeStyles({\n root: {\n alignItems: 'center',\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground1,\n columnGap: tokens.spacingHorizontalXS,\n cursor: 'pointer',\n display: 'flex',\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n lineHeight: tokens.lineHeightBase300,\n ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n position: 'relative',\n\n '&:hover': {\n backgroundColor: tokens.colorNeutralBackground1Hover,\n },\n\n '&:active': {\n backgroundColor: tokens.colorNeutralBackground1Pressed,\n },\n },\n\n active: {\n // taken from @fluentui/react-tabster\n // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n '::after': {\n content: '\"\"',\n position: 'absolute',\n pointerEvents: 'none',\n zIndex: 1,\n\n ...shorthands.borderStyle('solid'),\n ...shorthands.borderWidth('2px'),\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n top: '-2px',\n bottom: '-2px',\n left: '-2px',\n right: '-2px',\n },\n },\n\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '&:hover': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '&:active': {\n backgroundColor: tokens.colorTransparentBackground,\n },\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n\n selected: {},\n\n checkIcon: {\n fontSize: tokens.fontSizeBase400,\n // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n marginLeft: `calc(${tokens.spacingHorizontalXXS} -1)`,\n marginRight: tokens.spacingHorizontalXXS,\n visibility: 'hidden',\n\n '& svg': {\n display: 'block',\n },\n },\n\n selectedCheck: {\n visibility: 'visible',\n },\n\n multiselectCheck: {\n ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n ...shorthands.borderRadius(tokens.borderRadiusSmall),\n boxSizing: 'border-box',\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n\n fill: 'currentColor',\n fontSize: '12px',\n height: '16px',\n width: '16px',\n visibility: 'visible',\n },\n\n selectedMultiselectCheck: {\n backgroundColor: tokens.colorCompoundBrandBackground,\n color: tokens.colorNeutralForegroundInverted,\n ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n },\n\n checkDisabled: {\n color: tokens.colorNeutralForegroundDisabled,\n\n '@media (forced-colors: active)': {\n color: 'GrayText',\n },\n },\n});\n\n/*\n Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n const { active, disabled, focusVisible, multiselect, selected } = state;\n const styles = useStyles();\n state.root.className = mergeClasses(\n optionClassNames.root,\n styles.root,\n active && focusVisible && styles.active,\n disabled && styles.disabled,\n selected && styles.selected,\n state.root.className,\n );\n\n if (state.checkIcon) {\n state.checkIcon.className = mergeClasses(\n optionClassNames.checkIcon,\n styles.checkIcon,\n state.checkIcon.className,\n multiselect && styles.multiselectCheck,\n selected && styles.selectedCheck,\n selected && multiselect && styles.selectedMultiselectCheck,\n disabled && styles.checkDisabled,\n );\n }\n\n return state;\n};\n"],"mappings":"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"}

package/lib/components/OptionGroup/OptionGroup.js CHANGED Viewed

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useOptionGroup_unstable } from './useOptionGroup';
 import { renderOptionGroup_unstable } from './renderOptionGroup';
 import { useOptionGroupStyles_unstable } from './useOptionGroupStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
  */
 export const OptionGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOptionGroup_unstable(props, ref);
   useOptionGroupStyles_unstable(state);
+  const {
+    useOptionGroupStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderOptionGroup_unstable(state);
 });
 OptionGroup.displayName = 'OptionGroup';

package/lib/components/OptionGroup/OptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/*\n OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"]}
1	+ {"version":3,"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHooks_unstable","OptionGroup","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/*\n OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n const state = useOptionGroup_unstable(props, ref);\n\n useOptionGroupStyles_unstable(state);\n\n const { useOptionGroupStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAGtE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EAEpC,MAAM;IAAEN,6BAA6B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,0BAA0B,CAACO,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACM,WAAW,GAAG,aAAa"}

package/lib/components/OptionGroup/renderOptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAC3BF,KAAK,CAACG,KAAK,iBAAIP,oBAACI,KAAK,CAACG,KAAK;IAAA,GAAKF,SAAS,CAACE;EAAK,GAAGF,SAAS,CAACE,KAAK,CAACC,QAAQ,CAAe,EACzFH,SAAS,CAACC,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC","names":["React","getSlots","renderOptionGroup_unstable","state","slots","slotProps","root","label","children"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/*\n Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n const { slots, slotProps } = getSlots<OptionGroupSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n {slotProps.root.children}\n </slots.root>\n );\n};\n"]}
1	+ {"version":3,"names":["React","getSlots","renderOptionGroup_unstable","state","slots","slotProps","createElement","root","label","children"],"sources":["../src/packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/*\n Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n const { slots, slotProps } = getSlots<OptionGroupSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n {slotProps.root.children}\n </slots.root>\n );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAE9D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,GAAGH,SAAS,CAACG,KAAK,CAACC,QAAQ,CAAe,EACzFJ,SAAS,CAACE,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC"}

package/lib/components/OptionGroup/useOptionGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,OAAO,GAAGJ,KAAK,CAAC,aAAa,CAAC;EACpC,MAAM;IAAEK;EAAK,CAAE,GAAGH,KAAK;EAEvB,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,KAAK,EAAE;KACR;IACDE,IAAI,EAAET,qBAAqB,CAAC,KAAK,EAAE;MACjCK,GAAG;MACHK,IAAI,EAAE,OAAO;MACb,iBAAiB,EAAEH,KAAK,GAAGD,OAAO,GAAGK,SAAS;MAC9C,GAAGP;KACJ,CAAC;IACFG,KAAK,EAAEN,gBAAgB,CAACM,KAAK,EAAE;MAC7BK,YAAY,EAAE;QACZC,EAAE,EAAEP,OAAO;QACXI,IAAI,EAAE;;KAET;GACF;AACH,CAAC","names":["getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n label: resolveShorthand(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n }),\n };\n};\n"]}
1	+ {"version":3,"names":["getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"sources":["../src/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/*\n Create the state required to render OptionGroup.\n \n The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n \n @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n const labelId = useId('group-label');\n const { label } = props;\n\n return {\n components: {\n root: 'div',\n label: 'span',\n },\n root: getNativeElementProps('div', {\n ref,\n role: 'group',\n 'aria-labelledby': label ? labelId : undefined,\n ...props,\n }),\n label: resolveShorthand(label, {\n defaultProps: {\n id: labelId,\n role: 'presentation',\n },\n }),\n };\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH,MAAMC,OAAO,GAAGJ,KAAK,CAAC,aAAa,CAAC;EACpC,MAAM;IAAEK;EAAK,CAAE,GAAGH,KAAK;EAEvB,OAAO;IACLI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXF,KAAK,EAAE;KACR;IACDE,IAAI,EAAET,qBAAqB,CAAC,KAAK,EAAE;MACjCK,GAAG;MACHK,IAAI,EAAE,OAAO;MACb,iBAAiB,EAAEH,KAAK,GAAGD,OAAO,GAAGK,SAAS;MAC9C,GAAGP;KACJ,CAAC;IACFG,KAAK,EAAEN,gBAAgB,CAACM,KAAK,EAAE;MAC7BK,YAAY,EAAE;QACZC,EAAE,EAAEP,OAAO;QACXI,IAAI,EAAE;;KAET;GACF;AACH,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"~~mappings~~":"~~AAAA~~,~~SAASA~~,~~MAAM~~,~~QAAQ~~,~~uBAAuB;AAE9C~~,~~mBAAqBC~~,~~YAAY~~,~~EAAEC~~,~~UAAU~~,~~QAAQ~~,~~gBAAgB;AAGrE~~,~~OAAO~~,~~MAAMC~~,~~qBAAqB~~,~~GAAqC;EACrEC~~,~~IAAI~~,~~EAAE~~,~~iBAAiB;EACvBC~~,~~KAAK~~,~~EAAE;CACR;AAED;;;AAGA~~,~~MAAMC~~,~~SAAS~~,~~gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA~~,~~EAwBhB;AAEF;;;AAGA~~,~~OAAO~~,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGT,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAElG,IAAIF,KAAK,CAACH,KAAK,EAAE;IACfG,KAAK,CAACH,KAAK,CAACK,SAAS,GAAGT,YAAY,CAACE,qBAAqB,CAACE,KAAK,EAAEI,MAAM,CAACJ,KAAK,EAAEG,KAAK,CAACH,KAAK,CAACK,SAAS,CAAC;;EAGxG,OAAOF,KAAK;AACd,CAAC","~~names~~":["~~tokens~~","~~mergeClasses~~","~~shorthands~~","~~optionGroupClassNames~~","~~root~~","~~label~~","~~useStyles~~","useOptionGroupStyles_unstable","state","styles","className"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} -1)`, tokens.spacingVerticalXS),\n },\n },\n\n label: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.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 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"]}
1	+ {"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","Gwp8xu","H93o2g","eii1in","om0q45","Hl9o3s","Bi9x0x4","B0i58d9","sl1c2c","z4hxbw","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","d","useOptionGroupStyles_unstable","state","styles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } 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 ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n display: 'block',\n paddingBottom: tokens.spacingHorizontalXS,\n ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} -1)`, tokens.spacingVerticalXS),\n },\n },\n\n label: {\n ...shorthands.borderRadius(tokens.borderRadiusMedium),\n color: tokens.colorNeutralForeground3,\n display: 'block',\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightSemibold,\n lineHeight: tokens.lineHeightBase200,\n ...shorthands.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 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"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,qBAAqB,GAAqC;EACrEC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;CACR;AAED;;;AAGA,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAd,KAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAwBhB;AAEF;;;AAGA,OAAO,MAAMC,6BAA6B,GAAIC,KAAuB,IAAsB;EACzF,MAAMC,MAAM,GAAG7B,SAAS,EAAE;EAC1B4B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAE+B,MAAM,CAAC/B,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,CAAC;EAElG,IAAIF,KAAK,CAAC7B,KAAK,EAAE;IACf6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACE,KAAK,EAAE8B,MAAM,CAAC9B,KAAK,EAAE6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,CAAC;;EAGxG,OAAOF,KAAK;AACd,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAoBhE;AACA,OAAO,MAAMC,eAAe,gBAAGD,aAAa,CAAuB;EACjEE,YAAY,EAAEC,SAAS;EACvBC,UAAU,EAAE,SAAS;EACrBC,YAAY,EAAE,KAAK;EACnBC,IAAI,EAAE,KAAK;EACXC,cAAc;IACZ,OAAO,MAAMJ,SAAS;EACxB,CAAC;EACDK,eAAe,EAAE,EAAE;EACnBC,YAAY;IACV;EAAA,CACD;EACDC,eAAe;IACb;EAAA,CACD;EACDC,OAAO;IACL;EAAA,CACD;EACDC,IAAI,EAAE;CACP,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGZ,eAAe,CAACa,QAAQ","names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/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'\n \| 'appearance'\n \| 'focusVisible'\n \| 'open'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n \| 'setOpen'\n \| 'size'\n>;\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\nexport const ComboboxProvider = ComboboxContext.Provider;\n"]}
1	+ {"version":3,"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"sources":["../src/packages/react-components/react-combobox/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'\n \| 'appearance'\n \| 'focusVisible'\n \| 'open'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n \| 'setOpen'\n \| 'size'\n>;\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\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAoBhE;AACA,OAAO,MAAMC,eAAe,gBAAGD,aAAa,CAAuB;EACjEE,YAAY,EAAEC,SAAS;EACvBC,UAAU,EAAE,SAAS;EACrBC,YAAY,EAAE,KAAK;EACnBC,IAAI,EAAE,KAAK;EACXC,cAAcA,CAAA;IACZ,OAAO,MAAMJ,SAAS;EACxB,CAAC;EACDK,eAAe,EAAE,EAAE;EACnBC,YAAYA,CAAA;IACV;EAAA,CACD;EACDC,eAAeA,CAAA;IACb;EAAA,CACD;EACDC,OAAOA,CAAA;IACL;EAAA,CACD;EACDC,IAAI,EAAE;CACP,CAAC;AAEF,OAAO,MAAMC,gBAAgB,GAAGZ,eAAe,CAACa,QAAQ"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAiBhE;AACA,OAAO,MAAMC,cAAc,gBAAGD,aAAa,CAAsB;EAC/DE,YAAY,EAAEC,SAAS;EACvBC,YAAY,EAAE,KAAK;EACnBC,WAAW,EAAE,KAAK;EAClBC,cAAc;IACZ,OAAO,MAAMH,SAAS;EACxB,CAAC;EACDI,eAAe,EAAE,EAAE;EACnBC,YAAY;IACV;EAAA,CACD;EACDC,eAAe;IACb;EAAA;CAEH,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAGT,cAAc,CAACU,QAAQ","names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/contexts/ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\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 \| 'multiselect'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"]}
1	+ {"version":3,"names":["createContext","ListboxContext","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","ListboxProvider","Provider"],"sources":["../src/packages/react-components/react-combobox/src/contexts/ListboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\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 \| 'multiselect'\n \| 'registerOption'\n \| 'selectedOptions'\n \| 'selectOption'\n \| 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n activeOption: undefined,\n focusVisible: false,\n multiselect: false,\n registerOption() {\n return () => undefined;\n },\n selectedOptions: [],\n selectOption() {\n // noop\n },\n setActiveOption() {\n // noop\n },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kCAAkC;AAiBhE;AACA,OAAO,MAAMC,cAAc,gBAAGD,aAAa,CAAsB;EAC/DE,YAAY,EAAEC,SAAS;EACvBC,YAAY,EAAE,KAAK;EACnBC,WAAW,EAAE,KAAK;EAClBC,cAAcA,CAAA;IACZ,OAAO,MAAMH,SAAS;EACxB,CAAC;EACDI,eAAe,EAAE,EAAE;EACnBC,YAAYA,CAAA;IACV;EAAA,CACD;EACDC,eAAeA,CAAA;IACb;EAAA;CAEH,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAGT,cAAc,CAACU,QAAQ"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAEA,OAAM,SAAUA,wBAAwB,CAACC,KAAwB;EAC/D,MAAM;IACJC,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;EAAI,CACL,GAAGV,KAAK;EAET,MAAMW,QAAQ,GAAG;IACfV,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB","names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"]}
1	+ {"version":3,"names":["useComboboxContextValues","state","activeOption","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","combobox"],"sources":["../src/packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts"],"sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n const {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n } = state;\n\n const combobox = {\n activeOption,\n appearance,\n focusVisible,\n open,\n registerOption,\n selectedOptions,\n selectOption,\n setActiveOption,\n setOpen,\n size,\n };\n\n return { combobox };\n}\n"],"mappings":"AAEA,OAAM,SAAUA,wBAAwBA,CAACC,KAAwB;EAC/D,MAAM;IACJC,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;EAAI,CACL,GAAGV,KAAK;EAET,MAAMW,QAAQ,GAAG;IACfV,YAAY;IACZC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC,eAAe;IACfC,OAAO;IACPC;GACD;EAED,OAAO;IAAEC;EAAQ,CAAE;AACrB"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,kCAAkC;AAE1F,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,OAAM,SAAUC,uBAAuB,CAACC,KAAmB;EACzD,MAAMC,kBAAkB,GAAGJ,mBAAmB,CAACC,eAAe,CAAC;EAC/D,MAAM;IACJI,YAAY;IACZC,YAAY;IACZC,WAAW;IACXC,cAAc;IACdC,eAAe;IACfC,YAAY;IACZC;EAAe,CAChB,GAAGR,KAAK;EAET;EACA,MAAMS,sBAAsB,GAAGb,kBAAkB,CAACE,eAAe,EAAEY,GAAG,IAAIA,GAAG,CAACL,cAAc,CAAC;EAE7F,MAAMM,mBAAmB,GAAGV,kBAAkB,GAAGQ,sBAAsB,GAAGJ,cAAc;EAExF,MAAMO,OAAO,GAAG;IACdV,YAAY;IACZC,YAAY;IACZC,WAAW;IACXC,cAAc,EAAEM,mBAAmB;IACnCL,eAAe;IACfC,YAAY;IACZC;GACD;EAED,OAAO;IAAEI;EAAO,CAAE;AACpB","names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const {\n activeOption~~,\n~~ focusVisible~~,\n~~ multiselect~~,\n~~ registerOption~~,\n~~ selectedOptions~~,\n~~ selectOption~~,\n~~ setActiveOption~~,\n~~ } = state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"]}
1	+ {"version":3,"names":["useContextSelector","useHasParentContext","ComboboxContext","useListboxContextValues","state","hasComboboxContext","activeOption","focusVisible","multiselect","registerOption","selectedOptions","selectOption","setActiveOption","comboboxRegisterOption","ctx","registerOptionValue","listbox"],"sources":["../src/packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts"],"sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n const hasComboboxContext = useHasParentContext(ComboboxContext);\n const { activeOption, focusVisible, multiselect, registerOption, selectedOptions, selectOption, setActiveOption } =\n state;\n\n // get register/unregister functions from parent combobox context\n const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n const listbox = {\n activeOption,\n focusVisible,\n multiselect,\n registerOption: registerOptionValue,\n selectedOptions,\n selectOption,\n setActiveOption,\n };\n\n return { listbox };\n}\n"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,mBAAmB,QAAQ,kCAAkC;AAE1F,SAASC,eAAe,QAAQ,mBAAmB;AAEnD,OAAM,SAAUC,uBAAuBA,CAACC,KAAmB;EACzD,MAAMC,kBAAkB,GAAGJ,mBAAmB,CAACC,eAAe,CAAC;EAC/D,MAAM;IAAEI,YAAY;IAAEC,YAAY;IAAEC,WAAW;IAAEC,cAAc;IAAEC,eAAe;IAAEC,YAAY;IAAEC;EAAe,CAAE,GAC/GR,KAAK;EAEP;EACA,MAAMS,sBAAsB,GAAGb,kBAAkB,CAACE,eAAe,EAAEY,GAAG,IAAIA,GAAG,CAACL,cAAc,CAAC;EAE7F,MAAMM,mBAAmB,GAAGV,kBAAkB,GAAGQ,sBAAsB,GAAGJ,cAAc;EAExF,MAAMO,OAAO,GAAG;IACdV,YAAY;IACZC,YAAY;IACZC,WAAW;IACXC,cAAc,EAAEM,mBAAmB;IACnCL,eAAe;IACfC,YAAY;IACZC;GACD;EAED,OAAO;IAAEI;EAAO,CAAE;AACpB"}

package/lib/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}
1	+ {"version":3,"names":["ComboboxProvider","ListboxProvider","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","ComboboxField","ComboboxField_unstable","comboboxFieldClassNames"],"sources":["../src/packages/react-components/react-combobox/src/index.ts"],"sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n Listbox,\n listboxClassNames,\n renderListbox_unstable,\n useListboxStyles_unstable,\n useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n Option,\n optionClassNames,\n renderOption_unstable,\n useOptionStyles_unstable,\n useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n Combobox,\n comboboxClassNames,\n renderCombobox_unstable,\n useComboboxStyles_unstable,\n useCombobox_unstable,\n} from './Combobox';\nexport type {\n ComboboxContextValues,\n ComboboxOpenChangeData,\n ComboboxOpenEvents,\n ComboboxProps,\n ComboboxSlots,\n ComboboxState,\n} from './Combobox';\nexport {\n Dropdown,\n dropdownClassNames,\n renderDropdown_unstable,\n useDropdownStyles_unstable,\n useDropdown_unstable,\n} from './Dropdown';\nexport type {\n DropdownContextValues,\n DropdownOpenChangeData,\n DropdownOpenEvents,\n DropdownProps,\n DropdownSlots,\n DropdownState,\n} from './Dropdown';\nexport {\n OptionGroup,\n optionGroupClassNames,\n renderOptionGroup_unstable,\n useOptionGroupStyles_unstable,\n useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAE7D,SAASC,eAAe,QAAQ,2BAA2B;AAE3D,SAASC,wBAAwB,QAAQ,qCAAqC;AAC9E,SAASC,uBAAuB,QAAQ,oCAAoC;AAC5E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW;AAElB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,UAAU;AAEjB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,YAAY;AASnB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,IAAI,MAAM,yBAAyB;AA2B/C;;;AAGA,OAAM,SAAUC,wBAAwB,CACtCC,CAAsC,EACtCC,UAAiC,EAAE;EAEnC,MAAM;IAAEC,IAAI,GAAG,IAAI;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGF,OAAO;EACpD,MAAMG,IAAI,GAAGJ,CAAC,CAACK,GAAG;EAClB,MAAM;IAAEC,MAAM;IAAEC,OAAO;IAAEF,GAAG;IAAEG;EAAO,CAAE,GAAGR,CAAC;EAE3C;EACA,IAAIK,GAAG,CAACI,MAAM,KAAK,CAAC,IAAIL,IAAI,KAAKN,IAAI,CAACY,KAAK,IAAI,CAACJ,MAAM,IAAI,CAACC,OAAO,IAAI,CAACC,OAAO,EAAE;IAC9E,OAAO,MAAM;;EAGf;EACA,IAAI,CAACN,IAAI,EAAE;IACT,IAAIE,IAAI,KAAKN,IAAI,CAACa,SAAS,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIR,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAIT,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;MAClG,OAAO,MAAM;;IAGf;IACA,OAAO,MAAM;;EAGf;EACA,IAAKN,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIN,MAAM,IAAKF,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAK,CAACV,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAM,EAAE;IACrG,OAAO,aAAa;;EAEtB,IAAIP,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;IACtC,OAAO,QAAQ;;EAEjB,IAAIN,IAAI,KAAKN,IAAI,CAACgB,MAAM,EAAE;IACxB,OAAO,OAAO;;EAGhB;EACA,IAAIV,IAAI,KAAKN,IAAI,CAACa,SAAS,EAAE;IAC3B,OAAO,MAAM;;EAEf,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,EAAE;IACzB,OAAO,UAAU;;EAEnB,IAAIR,IAAI,KAAKN,IAAI,CAACiB,IAAI,EAAE;IACtB,OAAO,OAAO;;EAEhB,IAAIX,IAAI,KAAKN,IAAI,CAACkB,GAAG,EAAE;IACrB,OAAO,MAAM;;EAEf,IAAIZ,IAAI,KAAKN,IAAI,CAACmB,MAAM,EAAE;IACxB,OAAO,QAAQ;;EAEjB,IAAIb,IAAI,KAAKN,IAAI,CAACoB,QAAQ,EAAE;IAC1B,OAAO,UAAU;;EAEnB,IAAId,IAAI,KAAKN,IAAI,CAACqB,GAAG,EAAE;IACrB,OAAO,KAAK;;EAGd;EACA,OAAO,MAAM;AACf;AAEA;;;AAGA,OAAM,SAAUC,kBAAkB,CAACC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB;EAChG,QAAQF,MAAM;IACZ,KAAK,MAAM;MACT,OAAOG,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,CAAC,CAAC;MAC3C;IACF,KAAK,UAAU;MACb,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,CAAC,CAAC;IACtC,KAAK,OAAO;MACV,OAAO,CAAC;IACV,KAAK,MAAM;MACT,OAAOC,QAAQ;IACjB,KAAK,UAAU;MACb,OAAOC,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,EAAE,CAAC;IAC9C,KAAK,QAAQ;MACX,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,EAAE,CAAC;IACvC;MACE,OAAOA,YAAY;EAAC;AAE1B","names":["keys","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/*\n enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n /\nexport type DropdownActions =\n \| 'Close'\n \| 'CloseSelect'\n \| 'First'\n \| 'Last'\n \| 'Next'\n \| 'None'\n \| 'Open'\n \| 'PageDown'\n \| 'PageUp'\n \| 'Previous'\n \| 'Select'\n \| 'Tab'\n \| 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n}\n\n/\n Converts a keyboard interaction into a defined action\n /\nexport function getDropdownActionFromKey(\n e: KeyboardEvent \| React.KeyboardEvent,\n options: DropdownActionOptions = {},\n): DropdownActions {\n const { open = true, multiselect = false } = options;\n const code = e.key;\n const { altKey, ctrlKey, key, metaKey } = e;\n\n // typing action occurs whether open or closed\n if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n return 'Type';\n }\n\n // handle opening the dropdown if closed\n if (!open) {\n if (code === keys.ArrowDown \|\| code === keys.ArrowUp \|\| code === keys.Enter \|\| code === keys.Space) {\n return 'Open';\n }\n\n // if the dropdown is closed and an action did not match the above, do nothing\n return 'None';\n }\n\n // select or close actions\n if ((code === keys.ArrowUp && altKey) \|\| code === keys.Enter \|\| (!multiselect && code === keys.Space)) {\n return 'CloseSelect';\n }\n if (multiselect && code === keys.Space) {\n return 'Select';\n }\n if (code === keys.Escape) {\n return 'Close';\n }\n\n // navigation interactions\n if (code === keys.ArrowDown) {\n return 'Next';\n }\n if (code === keys.ArrowUp) {\n return 'Previous';\n }\n if (code === keys.Home) {\n return 'First';\n }\n if (code === keys.End) {\n return 'Last';\n }\n if (code === keys.PageUp) {\n return 'PageUp';\n }\n if (code === keys.PageDown) {\n return 'PageDown';\n }\n if (code === keys.Tab) {\n return 'Tab';\n }\n\n // if nothing matched, return none\n return 'None';\n}\n\n/\n Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n switch (action) {\n case 'Next':\n return Math.min(maxIndex, currentIndex + 1);\n break;\n case 'Previous':\n return Math.max(0, currentIndex - 1);\n case 'First':\n return 0;\n case 'Last':\n return maxIndex;\n case 'PageDown':\n return Math.min(maxIndex, currentIndex + 10);\n case 'PageUp':\n return Math.max(0, currentIndex - 10);\n default:\n return currentIndex;\n }\n}\n"]}
1	+ {"version":3,"names":["keys","getDropdownActionFromKey","e","options","open","multiselect","code","key","altKey","ctrlKey","metaKey","length","Space","ArrowDown","ArrowUp","Enter","Escape","Home","End","PageUp","PageDown","Tab","getIndexFromAction","action","currentIndex","maxIndex","Math","min","max"],"sources":["../src/packages/react-components/react-combobox/src/utils/dropdownKeyActions.ts"],"sourcesContent":["import * as keys from '@fluentui/keyboard-keys';\nimport * as React from 'react';\n\n/*\n enum of actions available in any type of managed dropdown control\n * e.g. combobox, select, datepicker, menu\n /\nexport type DropdownActions =\n \| 'Close'\n \| 'CloseSelect'\n \| 'First'\n \| 'Last'\n \| 'Next'\n \| 'None'\n \| 'Open'\n \| 'PageDown'\n \| 'PageUp'\n \| 'Previous'\n \| 'Select'\n \| 'Tab'\n \| 'Type';\n\nexport interface DropdownActionOptions {\n open?: boolean;\n multiselect?: boolean;\n}\n\n/\n Converts a keyboard interaction into a defined action\n /\nexport function getDropdownActionFromKey(\n e: KeyboardEvent \| React.KeyboardEvent,\n options: DropdownActionOptions = {},\n): DropdownActions {\n const { open = true, multiselect = false } = options;\n const code = e.key;\n const { altKey, ctrlKey, key, metaKey } = e;\n\n // typing action occurs whether open or closed\n if (key.length === 1 && code !== keys.Space && !altKey && !ctrlKey && !metaKey) {\n return 'Type';\n }\n\n // handle opening the dropdown if closed\n if (!open) {\n if (code === keys.ArrowDown \|\| code === keys.ArrowUp \|\| code === keys.Enter \|\| code === keys.Space) {\n return 'Open';\n }\n\n // if the dropdown is closed and an action did not match the above, do nothing\n return 'None';\n }\n\n // select or close actions\n if ((code === keys.ArrowUp && altKey) \|\| code === keys.Enter \|\| (!multiselect && code === keys.Space)) {\n return 'CloseSelect';\n }\n if (multiselect && code === keys.Space) {\n return 'Select';\n }\n if (code === keys.Escape) {\n return 'Close';\n }\n\n // navigation interactions\n if (code === keys.ArrowDown) {\n return 'Next';\n }\n if (code === keys.ArrowUp) {\n return 'Previous';\n }\n if (code === keys.Home) {\n return 'First';\n }\n if (code === keys.End) {\n return 'Last';\n }\n if (code === keys.PageUp) {\n return 'PageUp';\n }\n if (code === keys.PageDown) {\n return 'PageDown';\n }\n if (code === keys.Tab) {\n return 'Tab';\n }\n\n // if nothing matched, return none\n return 'None';\n}\n\n/\n Returns the requested option index from an action\n */\nexport function getIndexFromAction(action: DropdownActions, currentIndex: number, maxIndex: number): number {\n switch (action) {\n case 'Next':\n return Math.min(maxIndex, currentIndex + 1);\n break;\n case 'Previous':\n return Math.max(0, currentIndex - 1);\n case 'First':\n return 0;\n case 'Last':\n return maxIndex;\n case 'PageDown':\n return Math.min(maxIndex, currentIndex + 10);\n case 'PageUp':\n return Math.max(0, currentIndex - 10);\n default:\n return currentIndex;\n }\n}\n"],"mappings":"AAAA,OAAO,KAAKA,IAAI,MAAM,yBAAyB;AA2B/C;;;AAGA,OAAM,SAAUC,wBAAwBA,CACtCC,CAAsC,EACtCC,OAAA,GAAiC,EAAE;EAEnC,MAAM;IAAEC,IAAI,GAAG,IAAI;IAAEC,WAAW,GAAG;EAAK,CAAE,GAAGF,OAAO;EACpD,MAAMG,IAAI,GAAGJ,CAAC,CAACK,GAAG;EAClB,MAAM;IAAEC,MAAM;IAAEC,OAAO;IAAEF,GAAG;IAAEG;EAAO,CAAE,GAAGR,CAAC;EAE3C;EACA,IAAIK,GAAG,CAACI,MAAM,KAAK,CAAC,IAAIL,IAAI,KAAKN,IAAI,CAACY,KAAK,IAAI,CAACJ,MAAM,IAAI,CAACC,OAAO,IAAI,CAACC,OAAO,EAAE;IAC9E,OAAO,MAAM;;EAGf;EACA,IAAI,CAACN,IAAI,EAAE;IACT,IAAIE,IAAI,KAAKN,IAAI,CAACa,SAAS,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIR,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAIT,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;MAClG,OAAO,MAAM;;IAGf;IACA,OAAO,MAAM;;EAGf;EACA,IAAKN,IAAI,KAAKN,IAAI,CAACc,OAAO,IAAIN,MAAM,IAAKF,IAAI,KAAKN,IAAI,CAACe,KAAK,IAAK,CAACV,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAM,EAAE;IACrG,OAAO,aAAa;;EAEtB,IAAIP,WAAW,IAAIC,IAAI,KAAKN,IAAI,CAACY,KAAK,EAAE;IACtC,OAAO,QAAQ;;EAEjB,IAAIN,IAAI,KAAKN,IAAI,CAACgB,MAAM,EAAE;IACxB,OAAO,OAAO;;EAGhB;EACA,IAAIV,IAAI,KAAKN,IAAI,CAACa,SAAS,EAAE;IAC3B,OAAO,MAAM;;EAEf,IAAIP,IAAI,KAAKN,IAAI,CAACc,OAAO,EAAE;IACzB,OAAO,UAAU;;EAEnB,IAAIR,IAAI,KAAKN,IAAI,CAACiB,IAAI,EAAE;IACtB,OAAO,OAAO;;EAEhB,IAAIX,IAAI,KAAKN,IAAI,CAACkB,GAAG,EAAE;IACrB,OAAO,MAAM;;EAEf,IAAIZ,IAAI,KAAKN,IAAI,CAACmB,MAAM,EAAE;IACxB,OAAO,QAAQ;;EAEjB,IAAIb,IAAI,KAAKN,IAAI,CAACoB,QAAQ,EAAE;IAC1B,OAAO,UAAU;;EAEnB,IAAId,IAAI,KAAKN,IAAI,CAACqB,GAAG,EAAE;IACrB,OAAO,KAAK;;EAGd;EACA,OAAO,MAAM;AACf;AAEA;;;AAGA,OAAM,SAAUC,kBAAkBA,CAACC,MAAuB,EAAEC,YAAoB,EAAEC,QAAgB;EAChG,QAAQF,MAAM;IACZ,KAAK,MAAM;MACT,OAAOG,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,CAAC,CAAC;MAC3C;IACF,KAAK,UAAU;MACb,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,CAAC,CAAC;IACtC,KAAK,OAAO;MACV,OAAO,CAAC;IACV,KAAK,MAAM;MACT,OAAOC,QAAQ;IACjB,KAAK,UAAU;MACb,OAAOC,IAAI,CAACC,GAAG,CAACF,QAAQ,EAAED,YAAY,GAAG,EAAE,CAAC;IAC9C,KAAK,QAAQ;MACX,OAAOE,IAAI,CAACE,GAAG,CAAC,CAAC,EAAEJ,YAAY,GAAG,EAAE,CAAC;IACvC;MACE,OAAOA,YAAY;EAAC;AAE1B"}

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

	@@ -1 +1 @@
1	- {"version":3,"~~mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR","~~names":["iconSizes","small","medium","large"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n"]}
1	+ {"version":3,"names":["iconSizes","small","medium","large"],"sources":["../src/packages/react-components/react-combobox/src/utils/internalTokens.ts"],"sourcesContent":["export const iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px',\n};\n"],"mappings":"AAAA,OAAO,MAAMA,SAAS,GAAG;EACvBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;CACR"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/*\n State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n children,\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\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 const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\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 value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state or children\n React.useEffect(() => {\n if (open && !activeOption) {\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 selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, children]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"]}
1	+ {"version":3,"names":["React","useControllableState","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","children","editable","inlinePopup","multiselect","onOpenChange","size","optionCollection","getOptionAtIndex","getOptionsMatchingValue","activeOption","setActiveOption","useState","focusVisible","setFocusVisible","hasFocus","setHasFocus","ignoreNextBlur","useRef","selectionState","selectedOptions","isFirstMount","controllableValue","setValue","state","value","initialState","undefined","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","option","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","useCallback","event","newState","useEffect","length","selectedOption","v","pop"],"sources":["../src/packages/react-components/react-combobox/src/utils/useComboboxBaseState.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useFirstMount } from '@fluentui/react-utilities';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\n\n/*\n State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n props: ComboboxBaseProps & { children?: React.ReactNode; editable?: boolean },\n): ComboboxBaseState => {\n const {\n appearance = 'outline',\n children,\n editable = false,\n inlinePopup = false,\n multiselect,\n onOpenChange,\n size = 'medium',\n } = props;\n\n const optionCollection = useOptionCollection();\n const { getOptionAtIndex, getOptionsMatchingValue } = optionCollection;\n\n const [activeOption, setActiveOption] = React.useState<OptionValue \| undefined>();\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 const [hasFocus, setHasFocus] = React.useState(false);\n\n const ignoreNextBlur = React.useRef(false);\n\n const selectionState = useSelection(props);\n const { selectedOptions } = selectionState;\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 value = React.useMemo(() => {\n // don't compute the value if it is defined through props or setValue,\n if (controllableValue !== undefined) {\n return controllableValue;\n }\n\n // handle defaultValue here, so it is overridden by selection\n if (isFirstMount && props.defaultValue !== undefined) {\n return props.defaultValue;\n }\n\n const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n return selectedOptions.includes(optionValue);\n }).map(option => option.text);\n\n if (multiselect) {\n // editable inputs should not display multiple selected options in the input as text\n return editable ? '' : selectedOptionsText.join(', ');\n }\n\n return selectedOptionsText[0];\n\n // do not change value after isFirstMount changes,\n // we do not want to accidentally override defaultValue on a second render\n // unless another value is intentionally set\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [controllableValue, editable, getOptionsMatchingValue, multiselect, props.defaultValue, selectedOptions]);\n\n // Handle open state, which is shared with options in context\n const [open, setOpenState] = useControllableState({\n state: props.open,\n defaultState: props.defaultOpen,\n initialState: false,\n });\n\n const setOpen = React.useCallback(\n (event: ComboboxBaseOpenEvents, newState: boolean) => {\n onOpenChange?.(event, { open: newState });\n setOpenState(newState);\n },\n [onOpenChange, setOpenState],\n );\n\n // update active option based on change in open state or children\n React.useEffect(() => {\n if (open && !activeOption) {\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 selectedOption && setActiveOption(selectedOption);\n }\n // default to starting at the first option\n else {\n setActiveOption(getOptionAtIndex(0));\n }\n } else if (!open) {\n // reset the active option when closing\n setActiveOption(undefined);\n }\n // this should only be run in response to changes in the open state or children\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [open, children]);\n\n return {\n ...optionCollection,\n ...selectionState,\n activeOption,\n appearance,\n focusVisible,\n hasFocus,\n ignoreNextBlur,\n inlinePopup,\n open,\n setActiveOption,\n setFocusVisible,\n setHasFocus,\n setOpen,\n setValue,\n size,\n value,\n };\n};\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,6BAA6B;AACzF,SAAiCC,aAAa,QAAQ,2BAA2B;AAejF,OAAM,SAAUC,gBAAgB,CAC9BC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD;EAKzD,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAK;EAE7B;EACA,MAAMI,aAAa,GAAG;IACpBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,OAAgB;IACvBC,MAAM,EAAE;MAAEC,SAAS,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAC,CAAE;IACrC,GAAGb,2BAA2B,CAACO,WAAW;GAC3C;EAED,MAAM;IAAEO,SAAS;IAAEC;EAAY,CAAE,GAAGd,cAAc,CAACO,aAAa,CAAC;EAEjE,MAAMQ,UAAU,GAAGd,aAAa,CAACI,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEW,GAAG,EAAEF,YAAY,CAAC;EACrE,MAAMG,OAAO,GAAGZ,gBAAgB,IAAI;IAAE,GAAGA,gBAAgB;IAAEW,GAAG,EAAED;EAAU,CAAE;EAE5E,OAAO,CAAC;IAAE,GAAGX,gBAAgB;IAAEY,GAAG,EAAEf,aAAa,CAACG,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEY,GAAG,EAAEH,SAAS;EAAC,CAAE,EAAEI,OAAO,CAAC;AACjG","names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { positioning } = props;\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"]}
1	+ {"version":3,"names":["resolvePositioningShorthand","usePositioning","useMergedRefs","useComboboxPopup","props","triggerShorthand","listboxShorthand","positioning","popperOptions","position","align","offset","crossAxis","mainAxis","targetRef","containerRef","listboxRef","ref","listbox"],"sources":["../src/packages/react-components/react-combobox/src/utils/useComboboxPopup.ts"],"sourcesContent":["import { resolvePositioningShorthand, usePositioning } from '@fluentui/react-positioning';\nimport { ExtractSlotProps, Slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { ComboboxBaseProps } from './ComboboxBase.types';\nimport { Listbox } from '../components/Listbox/Listbox';\n\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'button'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'button'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'input'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [trigger: ExtractSlotProps<Slot<'input'>>, listbox?: ExtractSlotProps<Slot<typeof Listbox>>];\n\nexport function useComboboxPopup(\n props: ComboboxBaseProps,\n triggerShorthand?: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listboxShorthand?: ExtractSlotProps<Slot<typeof Listbox>>,\n): [\n trigger: ExtractSlotProps<Slot<'input'>> \| ExtractSlotProps<Slot<'button'>>,\n listbox?: ExtractSlotProps<Slot<typeof Listbox>>,\n] {\n const { positioning } = props;\n\n // popper options\n const popperOptions = {\n position: 'below' as const,\n align: 'start' as const,\n offset: { crossAxis: 0, mainAxis: 2 },\n ...resolvePositioningShorthand(positioning),\n };\n\n const { targetRef, containerRef } = usePositioning(popperOptions);\n\n const listboxRef = useMergedRefs(listboxShorthand?.ref, containerRef);\n const listbox = listboxShorthand && { ...listboxShorthand, ref: listboxRef };\n\n return [{ ...triggerShorthand, ref: useMergedRefs(triggerShorthand?.ref, targetRef) }, listbox];\n}\n"],"mappings":"AAAA,SAASA,2BAA2B,EAAEC,cAAc,QAAQ,6BAA6B;AACzF,SAAiCC,aAAa,QAAQ,2BAA2B;AAejF,OAAM,SAAUC,gBAAgBA,CAC9BC,KAAwB,EACxBC,gBAAqF,EACrFC,gBAAyD;EAKzD,MAAM;IAAEC;EAAW,CAAE,GAAGH,KAAK;EAE7B;EACA,MAAMI,aAAa,GAAG;IACpBC,QAAQ,EAAE,OAAgB;IAC1BC,KAAK,EAAE,OAAgB;IACvBC,MAAM,EAAE;MAAEC,SAAS,EAAE,CAAC;MAAEC,QAAQ,EAAE;IAAC,CAAE;IACrC,GAAGb,2BAA2B,CAACO,WAAW;GAC3C;EAED,MAAM;IAAEO,SAAS;IAAEC;EAAY,CAAE,GAAGd,cAAc,CAACO,aAAa,CAAC;EAEjE,MAAMQ,UAAU,GAAGd,aAAa,CAACI,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEW,GAAG,EAAEF,YAAY,CAAC;EACrE,MAAMG,OAAO,GAAGZ,gBAAgB,IAAI;IAAE,GAAGA,gBAAgB;IAAEW,GAAG,EAAED;EAAU,CAAE;EAE5E,OAAO,CAAC;IAAE,GAAGX,gBAAgB;IAAEY,GAAG,EAAEf,aAAa,CAACG,gBAAgB,aAAhBA,gBAAgB,uBAAhBA,gBAAgB,CAAEY,GAAG,EAAEH,SAAS;EAAC,CAAE,EAAEI,OAAO,CAAC;AACjG"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"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","names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/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 nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => nodes.current.length;\n const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n const getOptionById = (id: string) => {\n const item = nodes.current.find(node => node.option.id === id);\n return item?.option;\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n };\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\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, element: HTMLElement) => {\n const index = nodes.current.findIndex(node => {\n if (!node.element \|\| !element) {\n return false;\n }\n\n if (node.option.id === option.id) {\n return true;\n }\n\n // use the DOM method compareDocumentPosition to order the current node against registered nodes\n // eslint-disable-next-line no-bitwise\n return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n });\n\n // do not register the option if it already exists\n if (nodes.current[index]?.option.id !== option.id) {\n const newItem = {\n element,\n option,\n };\n\n // If an index is not found we will push the element to the end.\n if (index === -1) {\n nodes.current = [...nodes.current, newItem];\n } else {\n nodes.current.splice(index, 0, newItem);\n }\n }\n\n // return the unregister function\n return () => {\n nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n };\n }, []);\n\n return {\n ...collectionAPI,\n options: nodes.current.map(node => node.option),\n registerOption,\n };\n};\n"]}
1	+ {"version":3,"names":["React","useOptionCollection","nodes","useRef","collectionAPI","useMemo","getCount","current","length","getOptionAtIndex","index","_a","option","getIndexOfId","id","findIndex","node","getOptionById","item","find","getOptionsMatchingText","matcher","filter","text","map","getOptionsMatchingValue","value","registerOption","useCallback","element","compareDocumentPosition","Node","DOCUMENT_POSITION_PRECEDING","newItem","splice","options"],"sources":["../src/packages/react-components/react-combobox/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 nodes = React.useRef<{ option: OptionValue; element: HTMLElement }[]>([]);\n\n const collectionAPI = React.useMemo(() => {\n const getCount = () => nodes.current.length;\n const getOptionAtIndex = (index: number) => nodes.current[index]?.option;\n const getIndexOfId = (id: string) => nodes.current.findIndex(node => node.option.id === id);\n const getOptionById = (id: string) => {\n const item = nodes.current.find(node => node.option.id === id);\n return item?.option;\n };\n const getOptionsMatchingText = (matcher: (text: string) => boolean) => {\n return nodes.current.filter(node => matcher(node.option.text)).map(node => node.option);\n };\n const getOptionsMatchingValue = (matcher: (value: string) => boolean) => {\n return nodes.current.filter(node => matcher(node.option.value)).map(node => node.option);\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, element: HTMLElement) => {\n const index = nodes.current.findIndex(node => {\n if (!node.element \|\| !element) {\n return false;\n }\n\n if (node.option.id === option.id) {\n return true;\n }\n\n // use the DOM method compareDocumentPosition to order the current node against registered nodes\n // eslint-disable-next-line no-bitwise\n return node.element.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_PRECEDING;\n });\n\n // do not register the option if it already exists\n if (nodes.current[index]?.option.id !== option.id) {\n const newItem = {\n element,\n option,\n };\n\n // If an index is not found we will push the element to the end.\n if (index === -1) {\n nodes.current = [...nodes.current, newItem];\n } else {\n nodes.current.splice(index, 0, newItem);\n }\n }\n\n // return the unregister function\n return () => {\n nodes.current = nodes.current.filter(node => node.option.id !== option.id);\n };\n }, []);\n\n return {\n ...collectionAPI,\n options: nodes.current.map(node => node.option),\n registerOption,\n };\n};\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,2BAA2B;AAGrD,OAAM,SAAUC,wBAAwB,CAACC,KAAmB;EAC1D,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAK;EAC9B,MAAME,kBAAkB,GAAGL,KAAK,CAACM,MAAM,CAAiB,IAAI,CAAC;EAE7DN,KAAK,CAACO,SAAS,CAAC,MAAK;IACnB,IAAIF,kBAAkB,CAACG,OAAO,IAAIJ,YAAY,IAAIH,SAAS,EAAE,EAAE;MAC7D,MAAMQ,mBAAmB,GAAGJ,kBAAkB,CAACG,OAAO,CAACE,aAAa,CAAC,IAAIN,YAAY,CAACO,EAAE,EAAE,CAAgB;MAE1G,IAAI,CAACF,mBAAmB,EAAE;QACxB;;MAGF,MAAM;QAAEG,YAAY;QAAEC;MAAS,CAAE,GAAGJ,mBAAmB;MACvD,MAAM;QAAEG,YAAY,EAAEE,kBAAkB;QAAEC;MAAS,CAAE,GAAGV,kBAAkB,CAACG,OAAO;MAElF,MAAMQ,OAAO,GAAGH,SAAS,GAAGE,SAAS;MACrC,MAAME,OAAO,GAAGJ,SAAS,GAAGD,YAAY,GAAGG,SAAS,GAAGD,kBAAkB;MAEzE;MACA;MACA,MAAMI,MAAM,GAAG,CAAC;MAEhB,IAAIF,OAAO,EAAE;QACXX,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGK,MAAM,CAAC;OAC3D,MAAM,IAAID,OAAO,EAAE;QAClBZ,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGC,kBAAkB,GAAGF,YAAY,GAAGM,MAAM,CAAC;;;EAGpG,CAAC,EAAE,CAACd,YAAY,CAAC,CAAC;EAElB,OAAOC,kBAAkB;AAC3B","names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n const { activeOption } = state;\n const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (scrollContainerRef.current && activeOption && canUseDOM()) {\n const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n if (!activeOptionElement) {\n return;\n }\n\n const { offsetHeight, offsetTop } = activeOptionElement;\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n // add a small buffer for general visual nicety\n // it looks slightly better if the option has some space from the top/bottom while arrowing\n const buffer = 2;\n\n if (isAbove) {\n scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n } else if (isBelow) {\n scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n }\n }\n }, [activeOption]);\n\n return scrollContainerRef;\n}\n"]}
1	+ {"version":3,"names":["React","canUseDOM","useScrollOptionsIntoView","state","activeOption","scrollContainerRef","useRef","useEffect","current","activeOptionElement","querySelector","id","offsetHeight","offsetTop","parentOffsetHeight","scrollTop","isAbove","isBelow","buffer","scrollTo"],"sources":["../src/packages/react-components/react-combobox/src/utils/useScrollOptionsIntoView.ts"],"sourcesContent":["import * as React from 'react';\nimport { canUseDOM } from '@fluentui/react-utilities';\nimport { ListboxState } from '../Listbox';\n\nexport function useScrollOptionsIntoView(state: ListboxState): React.Ref<HTMLDivElement> {\n const { activeOption } = state;\n const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n if (scrollContainerRef.current && activeOption && canUseDOM()) {\n const activeOptionElement = scrollContainerRef.current.querySelector(`#${activeOption.id}`) as HTMLElement;\n\n if (!activeOptionElement) {\n return;\n }\n\n const { offsetHeight, offsetTop } = activeOptionElement;\n const { offsetHeight: parentOffsetHeight, scrollTop } = scrollContainerRef.current;\n\n const isAbove = offsetTop < scrollTop;\n const isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n\n // add a small buffer for general visual nicety\n // it looks slightly better if the option has some space from the top/bottom while arrowing\n const buffer = 2;\n\n if (isAbove) {\n scrollContainerRef.current.scrollTo(0, offsetTop - buffer);\n } else if (isBelow) {\n scrollContainerRef.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight + buffer);\n }\n }\n }, [activeOption]);\n\n return scrollContainerRef;\n}\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,SAAS,QAAQ,2BAA2B;AAGrD,OAAM,SAAUC,wBAAwBA,CAACC,KAAmB;EAC1D,MAAM;IAAEC;EAAY,CAAE,GAAGD,KAAK;EAC9B,MAAME,kBAAkB,GAAGL,KAAK,CAACM,MAAM,CAAiB,IAAI,CAAC;EAE7DN,KAAK,CAACO,SAAS,CAAC,MAAK;IACnB,IAAIF,kBAAkB,CAACG,OAAO,IAAIJ,YAAY,IAAIH,SAAS,EAAE,EAAE;MAC7D,MAAMQ,mBAAmB,GAAGJ,kBAAkB,CAACG,OAAO,CAACE,aAAa,CAAC,IAAIN,YAAY,CAACO,EAAE,EAAE,CAAgB;MAE1G,IAAI,CAACF,mBAAmB,EAAE;QACxB;;MAGF,MAAM;QAAEG,YAAY;QAAEC;MAAS,CAAE,GAAGJ,mBAAmB;MACvD,MAAM;QAAEG,YAAY,EAAEE,kBAAkB;QAAEC;MAAS,CAAE,GAAGV,kBAAkB,CAACG,OAAO;MAElF,MAAMQ,OAAO,GAAGH,SAAS,GAAGE,SAAS;MACrC,MAAME,OAAO,GAAGJ,SAAS,GAAGD,YAAY,GAAGG,SAAS,GAAGD,kBAAkB;MAEzE;MACA;MACA,MAAMI,MAAM,GAAG,CAAC;MAEhB,IAAIF,OAAO,EAAE;QACXX,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGK,MAAM,CAAC;OAC3D,MAAM,IAAID,OAAO,EAAE;QAClBZ,kBAAkB,CAACG,OAAO,CAACW,QAAQ,CAAC,CAAC,EAAEN,SAAS,GAAGC,kBAAkB,GAAGF,YAAY,GAAGM,MAAM,CAAC;;;EAGpG,CAAC,EAAE,CAACd,YAAY,CAAC,CAAC;EAElB,OAAOC,kBAAkB;AAC3B"}

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

	@@ -1 +1 @@
1	- {"version":3,"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGZ,WAAW,CAC9B,CAACa,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACV,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMiB,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC","names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"~~sourceRoot~~":"../src/~~","sources":["~~packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = useCallback(\n (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"]}
1	+ {"version":3,"names":["useCallback","useControllableState","useSelection","props","defaultSelectedOptions","multiselect","onOptionSelect","selectedOptions","setSelectedOptions","state","defaultState","initialState","selectOption","event","option","disabled","newSelection","value","selectedIndex","findIndex","o","slice","optionValue","optionText","text","clearSelection","undefined"],"sources":["../src/packages/react-components/react-combobox/src/utils/useSelection.ts"],"sourcesContent":["import { useCallback } from 'react';\nimport { useControllableState } from '@fluentui/react-utilities';\nimport { OptionValue } from './OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from './Selection.types';\n\nexport const useSelection = (props: SelectionProps): SelectionState => {\n const { defaultSelectedOptions, multiselect, onOptionSelect } = props;\n\n const [selectedOptions, setSelectedOptions] = useControllableState({\n state: props.selectedOptions,\n defaultState: defaultSelectedOptions,\n initialState: [],\n });\n\n const selectOption = useCallback(\n (event: SelectionEvents, option: OptionValue) => {\n // if the option is disabled, do nothing\n if (option.disabled) {\n return;\n }\n\n // for single-select, always return the selected option\n let newSelection = [option.value];\n\n // toggle selected state of the option for multiselect\n if (multiselect) {\n const selectedIndex = selectedOptions.findIndex(o => o === option.value);\n if (selectedIndex > -1) {\n // deselect option\n newSelection = [...selectedOptions.slice(0, selectedIndex), ...selectedOptions.slice(selectedIndex + 1)];\n } else {\n // select option\n newSelection = [...selectedOptions, option.value];\n }\n }\n\n setSelectedOptions(newSelection);\n onOptionSelect?.(event, { optionValue: option.value, optionText: option.text, selectedOptions: newSelection });\n },\n [onOptionSelect, multiselect, selectedOptions, setSelectedOptions],\n );\n\n const clearSelection = (event: SelectionEvents) => {\n setSelectedOptions([]);\n onOptionSelect?.(event, { optionValue: undefined, optionText: undefined, selectedOptions: [] });\n };\n\n return { clearSelection, selectOption, selectedOptions };\n};\n"],"mappings":"AAAA,SAASA,WAAW,QAAQ,OAAO;AACnC,SAASC,oBAAoB,QAAQ,2BAA2B;AAIhE,OAAO,MAAMC,YAAY,GAAIC,KAAqB,IAAoB;EACpE,MAAM;IAAEC,sBAAsB;IAAEC,WAAW;IAAEC;EAAc,CAAE,GAAGH,KAAK;EAErE,MAAM,CAACI,eAAe,EAAEC,kBAAkB,CAAC,GAAGP,oBAAoB,CAAC;IACjEQ,KAAK,EAAEN,KAAK,CAACI,eAAe;IAC5BG,YAAY,EAAEN,sBAAsB;IACpCO,YAAY,EAAE;GACf,CAAC;EAEF,MAAMC,YAAY,GAAGZ,WAAW,CAC9B,CAACa,KAAsB,EAAEC,MAAmB,KAAI;IAC9C;IACA,IAAIA,MAAM,CAACC,QAAQ,EAAE;MACnB;;IAGF;IACA,IAAIC,YAAY,GAAG,CAACF,MAAM,CAACG,KAAK,CAAC;IAEjC;IACA,IAAIZ,WAAW,EAAE;MACf,MAAMa,aAAa,GAAGX,eAAe,CAACY,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAKN,MAAM,CAACG,KAAK,CAAC;MACxE,IAAIC,aAAa,GAAG,CAAC,CAAC,EAAE;QACtB;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,CAACc,KAAK,CAAC,CAAC,EAAEH,aAAa,CAAC,EAAE,GAAGX,eAAe,CAACc,KAAK,CAACH,aAAa,GAAG,CAAC,CAAC,CAAC;OACzG,MAAM;QACL;QACAF,YAAY,GAAG,CAAC,GAAGT,eAAe,EAAEO,MAAM,CAACG,KAAK,CAAC;;;IAIrDT,kBAAkB,CAACQ,YAAY,CAAC;IAChCV,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAER,MAAM,CAACG,KAAK;MAAEM,UAAU,EAAET,MAAM,CAACU,IAAI;MAAEjB,eAAe,EAAES;IAAY,CAAE,CAAC;EAChH,CAAC,EACD,CAACV,cAAc,EAAED,WAAW,EAAEE,eAAe,EAAEC,kBAAkB,CAAC,CACnE;EAED,MAAMiB,cAAc,GAAIZ,KAAsB,IAAI;IAChDL,kBAAkB,CAAC,EAAE,CAAC;IACtBF,cAAc,aAAdA,cAAc,uBAAdA,cAAc,CAAGO,KAAK,EAAE;MAAES,WAAW,EAAEI,SAAS;MAAEH,UAAU,EAAEG,SAAS;MAAEnB,eAAe,EAAE;IAAE,CAAE,CAAC;EACjG,CAAC;EAED,OAAO;IAAEkB,cAAc;IAAEb,YAAY;IAAEL;EAAe,CAAE;AAC1D,CAAC"}