@fluentui/react-combobox 9.2.3 → 9.2.5

package/lib/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Dropdown","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAEhE,SAASC,wBAAwB,QAAQ,yCAAyC;AAElF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,QAAQ,gBAAuCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,oBAAoB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC9C,MAAME,aAAa,GAAGP,wBAAwB,CAACM,KAAK,CAAC;EAErDP,0BAA0B,CAACO,KAAK,CAAC;EAEjC,MAAM;IAAEP,0BAA0B,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACtFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,uBAAuB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFL,QAAQ,CAACO,WAAW,GAAG,UAAU"}
+{"version":3,"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHooks_unstable","Dropdown","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  const { useDropdownStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,oBAAoB,QAAQ;AACrC,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAE3C,SAASC,wBAAwB,QAAQ;AAEzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,QAAA,gBAA+CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EAC3F,MAAMC,KAAA,GAAQT,oBAAA,CAAqBO,KAAA,EAAOC,GAAA;EAC1C,MAAME,aAAA,GAAgBP,wBAAA,CAAyBM,KAAA;EAE/CP,0BAAA,CAA2BO,KAAA;EAE3B,MAAM;IAAEP,0BAAA,EAA4BS;EAAe,CAAE,GAAGP,4BAAA;EACxDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,uBAAA,CAAwBQ,KAAA,EAAOC,aAAA;AACxC;AAEAL,QAAA,CAASO,WAAW,GAAG"}

package/lib/components/Dropdown/Dropdown.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type {\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type DropdownSlots = {\n  /* The root dropdown slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The dropdown arrow icon */\n  expandIcon: Slot<'span'>;\n\n  /* The primary slot, the element with role=\"combobox\" */\n  button: NonNullable<Slot<'button'>>;\n\n  /* The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Dropdown Props\n */\nexport type DropdownProps = ComponentProps<Partial<DropdownSlots>, 'button'> & ComboboxBaseProps;\n\n/**\n * State used in rendering Dropdown\n */\nexport type DropdownState = ComponentState<DropdownSlots> &\n  ComboboxBaseState & {\n    /* Whether the placeholder is currently displayed */\n    placeholderVisible: boolean;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type DropdownContextValues = ComboboxBaseContextValues;\nexport type DropdownOpenEvents = ComboboxBaseOpenEvents;\nexport type DropdownOpenChangeData = ComboboxBaseOpenChangeData;\n"],"mappings":"AAAA"}

package/lib/components/Dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Dropdown/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Dropdown/index.ts"],"sourcesContent":["export * from './Dropdown';\nexport * from './Dropdown.types';\nexport * from './renderDropdown';\nexport * from './useDropdown';\nexport * from './useDropdownStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Dropdown/renderDropdown.js

@@ -10,18 +10,8 @@ export const renderDropdown_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(ComboboxContext.Provider, {
     value: contextValues.combobox
-  }, /*#__PURE__*/React.createElement(slots.button, {
-    ...slotProps.button
-  }, slotProps.button.children, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, {
-    ...slotProps.expandIcon
-  })), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, {
-    ...slotProps.listbox
-  }) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, {
-    ...slotProps.listbox
-  })))));
+  }, /*#__PURE__*/React.createElement(slots.button, slotProps.button, slotProps.button.children, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon)), slots.listbox && (state.inlinePopup ? /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox) : /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(slots.listbox, slotProps.listbox)))));
 };
 //# sourceMappingURL=renderDropdown.js.map

package/lib/components/Dropdown/renderDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlots<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,QAAQ,QAAQ,2BAA2B;AACpD,SAASC,eAAe,QAAQ,gCAAgC;AAGhE;;;AAGA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAgBG,KAAK,CAAC;EAE3D,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,gBAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAe,CAACQ,QAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,gBACrDb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,MAAM;IAAA,GAAKN,SAAS,CAACM;EAAM,GAC/BN,SAAS,CAACM,MAAM,CAACC,QAAQ,EACzBR,KAAK,CAACS,UAAU,iBAAIhB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,UAAU;IAAA,GAAKR,SAAS,CAACQ;EAAU,EAAI,CACtD,EACdT,KAAK,CAACU,OAAO,KACXZ,KAAK,CAACa,WAAW,gBAChBlB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,gBAExCjB,KAAA,CAAAS,aAAA,CAACR,MAAM,qBACLD,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,OAAO;IAAA,GAAKT,SAAS,CAACS;EAAO,EAAI,CAE3C,CAAC,CACqB,CAChB;AAEjB,CAAC"}
+{"version":3,"names":["React","Portal","getSlots","ComboboxContext","renderDropdown_unstable","state","contextValues","slots","slotProps","createElement","root","Provider","value","combobox","button","children","expandIcon","listbox","inlinePopup"],"sources":["../../../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Portal } from '@fluentui/react-portal';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues) => {\n  const { slots, slotProps } = getSlots<DropdownSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <ComboboxContext.Provider value={contextValues.combobox}>\n        <slots.button {...slotProps.button}>\n          {slotProps.button.children}\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n        </slots.button>\n        {slots.listbox &&\n          (state.inlinePopup ? (\n            <slots.listbox {...slotProps.listbox} />\n          ) : (\n            <Portal>\n              <slots.listbox {...slotProps.listbox} />\n            </Portal>\n          ))}\n      </ComboboxContext.Provider>\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,MAAM,QAAQ;AACvB,SAASC,QAAQ,QAAQ;AACzB,SAASC,eAAe,QAAQ;AAGhC;;;AAGA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAsBC,aAAA,KAAyC;EACrG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAwBG,KAAA;EAErD,oBACEL,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BV,KAAA,CAAAS,aAAA,CAACN,eAAA,CAAgBQ,QAAQ;IAACC,KAAA,EAAON,aAAA,CAAcO;kBAC7Cb,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMO,MAAM,EAAKN,SAAA,CAAUM,MAAM,EAC/BN,SAAA,CAAUM,MAAM,CAACC,QAAQ,EACzBR,KAAA,CAAMS,UAAU,iBAAIhB,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMS,UAAU,EAAKR,SAAA,CAAUQ,UAAU,IAEhET,KAAA,CAAMU,OAAO,KACXZ,KAAA,CAAMa,WAAW,gBAChBlB,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMU,OAAO,EAAKT,SAAA,CAAUS,OAAO,iBAEpCjB,KAAA,CAAAS,aAAA,CAACR,MAAA,qBACCD,KAAA,CAAAS,aAAA,CAACF,KAAA,CAAMU,OAAO,EAAKT,SAAA,CAAUS,OAAO,EAEvC,CAAD;AAIV"}

package/lib/components/Dropdown/useDropdown.js

@@ -39,15 +39,14 @@ export const useDropdown_unstable = (props, ref) => {
   const rootRef = React.useRef(null);
   const [popupWidth, setPopupWidth] = React.useState();
   React.useEffect(() => {
-    var _a;
-    const width = open ? `${(_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth}px` : undefined;
+    var _rootRef_current;
+    const width = open ? `${(_rootRef_current = rootRef.current) === null || _rootRef_current === void 0 ? void 0 : _rootRef_current.clientWidth}px` : undefined;
     setPopupWidth(width);
   }, [open]);
   // jump to matching option based on typing
   const searchString = React.useRef('');
   const [setKeyTimeout, clearKeyTimeout] = useTimeout();
   const getNextMatchingOption = () => {
-    var _a;
     // first check for matches for the full searchString
     let matcher = optionText => optionText.toLowerCase().indexOf(searchString.current) === 0;
     let matches = getOptionsMatchingText(matcher);
@@ -75,7 +74,8 @@ export const useDropdown_unstable = (props, ref) => {
       const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);
       return nextMatch !== null && nextMatch !== void 0 ? nextMatch : matches[0];
     }
-    return (_a = matches[0]) !== null && _a !== void 0 ? _a : undefined;
+    var _matches_;
+    return (_matches_ = matches[0]) !== null && _matches_ !== void 0 ? _matches_ : undefined;
   };
   const onTriggerKeyDown = ev => {
     // clear timeout, if it exists

package/lib/components/Dropdown/useDropdown.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","width","_a","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","createElement","placeholderVisible"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["React","ChevronDownRegular","ChevronDownIcon","getPartitionedNativeProps","mergeCallbacks","resolveShorthand","useTimeout","getDropdownActionFromKey","useComboboxBaseState","useComboboxPopup","useTriggerListboxSlots","Listbox","useMergedRefs","useDropdown_unstable","props","ref","baseState","activeOption","getIndexOfId","getOptionsMatchingText","open","setActiveOption","setFocusVisible","setOpen","primary","triggerNativeProps","root","rootNativeProps","primarySlotTagName","excludedPropNames","rootRef","useRef","popupWidth","setPopupWidth","useState","useEffect","_rootRef_current","width","current","clientWidth","undefined","searchString","setKeyTimeout","clearKeyTimeout","getNextMatchingOption","matcher","optionText","toLowerCase","indexOf","matches","startIndex","id","length","letters","split","allSameLetter","every","letter","nextMatch","find","option","_matches_","onTriggerKeyDown","ev","key","nextOption","triggerSlot","listboxSlot","button","required","defaultProps","type","children","value","placeholder","onKeyDown","hasFocus","listbox","style","state","components","expandIcon","inlinePopup","createElement","placeholderVisible"],"sources":["../../../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDownRegular as ChevronDownIcon } from '@fluentui/react-icons';\nimport { getPartitionedNativeProps, mergeCallbacks, resolveShorthand, useTimeout } from '@fluentui/react-utilities';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPopup } from '../../utils/useComboboxPopup';\nimport { useTriggerListboxSlots } from '../../utils/useTriggerListboxSlots';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { Slot } from '@fluentui/react-utilities';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  const baseState = useComboboxBaseState(props);\n  const { activeOption, getIndexOfId, getOptionsMatchingText, open, setActiveOption, setFocusVisible, setOpen } =\n    baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  // set listbox popup width based off the root/trigger width\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [popupWidth, setPopupWidth] = React.useState<string>();\n  React.useEffect(() => {\n    const width = open ? `${rootRef.current?.clientWidth}px` : undefined;\n    setPopupWidth(width);\n  }, [open]);\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const getNextMatchingOption = (): OptionValue | undefined => {\n    // first check for matches for the full searchString\n    let matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString.current) === 0;\n    let matches = getOptionsMatchingText(matcher);\n    let startIndex = activeOption ? getIndexOfId(activeOption.id) : 0;\n\n    // if the dropdown is already open and the searchstring is a single character,\n    // then look after the current activeOption for letters\n    // this is so slowly typing the same letter will cycle through matches\n    if (open && searchString.current.length === 1) {\n      startIndex++;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (!matches.length) {\n      const letters = searchString.current.split('');\n      const allSameLetter = letters.length && letters.every(letter => letter === letters[0]);\n\n      // if the search is all the same letter, cycle through options starting with that letter\n      if (allSameLetter) {\n        startIndex++;\n        matcher = (optionText: string) => optionText.toLowerCase().indexOf(letters[0]) === 0;\n        matches = getOptionsMatchingText(matcher);\n      }\n    }\n\n    // if there is an active option and multiple matches,\n    // return first matching option after the current active option, looping back to the top\n    if (matches.length > 1 && activeOption) {\n      const nextMatch = matches.find(option => getIndexOfId(option.id) >= startIndex);\n      return nextMatch ?? matches[0];\n    }\n\n    return matches[0] ?? undefined;\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      // update state\n      !open && setOpen(ev, true);\n\n      const nextOption = getNextMatchingOption();\n      setActiveOption(nextOption);\n      setFocusVisible(true);\n    }\n  };\n\n  // resolve button and listbox slot props\n  let triggerSlot: Slot<'button'>;\n  let listboxSlot: Slot<typeof Listbox> | undefined;\n\n  triggerSlot = resolveShorthand(props.button, {\n    required: true,\n    defaultProps: {\n      type: 'button',\n      children: baseState.value || props.placeholder,\n      ...triggerNativeProps,\n    },\n  });\n\n  triggerSlot.onKeyDown = mergeCallbacks(onTriggerKeyDown, triggerSlot.onKeyDown);\n\n  listboxSlot =\n    baseState.open || baseState.hasFocus\n      ? resolveShorthand(props.listbox, {\n          required: true,\n          defaultProps: {\n            children: props.children,\n            style: { width: popupWidth },\n          },\n        })\n      : undefined;\n\n  [triggerSlot, listboxSlot] = useComboboxPopup(props, triggerSlot, listboxSlot);\n  [triggerSlot, listboxSlot] = useTriggerListboxSlots(props, baseState, ref, triggerSlot, listboxSlot);\n\n  const state: DropdownState = {\n    components: {\n      root: 'div',\n      button: 'button',\n      expandIcon: 'span',\n      listbox: Listbox,\n    },\n    root: resolveShorthand(props.root, {\n      required: true,\n      defaultProps: {\n        'aria-owns': !props.inlinePopup ? listboxSlot?.id : undefined,\n        children: props.children,\n        ...rootNativeProps,\n      },\n    }),\n    button: triggerSlot,\n    listbox: listboxSlot,\n    expandIcon: resolveShorthand(props.expandIcon, {\n      required: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    ...baseState,\n  };\n\n  state.root.ref = useMergedRefs(state.root.ref, rootRef);\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/Dropdown/useDropdownStyles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["../src/packages/react-components/react-combobox/src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(\n      '3px',\n      tokens.spacingHorizontalSNudge,\n      '3px',\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  medium: {\n    ...typographyStyles.body1,\n    ...shorthands.padding(\n      '5px',\n      tokens.spacingHorizontalMNudge,\n      '5px',\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    ...shorthands.padding(\n      '7px',\n      tokens.spacingHorizontalM,\n      '7px',\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n    ),\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["tokens","typographyStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","expandIcon","listbox","useStyles","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","Bcgy8vk","Bw17bha","B1q35kw","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","df92cz","I188md","umuwi5","Blcqepd","nplu4u","Bioka5o","H713fs","B9ooomg","Bercvud","E5pizo","Bxyxcbc","listboxCollapsed","Bt984gj","De3pzq","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","medium","large","outline","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bjwas2f","Bn1d65q","Bxeuatn","n51gp8","disabledText","d","w","m","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","size","styles","iconStyles","className"],"sources":["../../../src/components/Dropdown/useDropdownStyles.ts"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    minWidth: '250px',\n    position: 'relative',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      ...shorthands.borderBottom(tokens.strokeWidthThick, 'solid', tokens.colorCompoundBrandStroke),\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n  },\n\n  listbox: {\n    boxShadow: `${tokens.shadow16}`,\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.border('0'),\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    ...shorthands.padding(\n      '3px',\n      tokens.spacingHorizontalSNudge,\n      '3px',\n      `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  medium: {\n    ...typographyStyles.body1,\n    ...shorthands.padding(\n      '5px',\n      tokens.spacingHorizontalMNudge,\n      '5px',\n      `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n    ),\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    ...shorthands.padding(\n      '7px',\n      tokens.spacingHorizontalM,\n      '7px',\n      `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n    ),\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', 'transparent'),\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      state.expandIcon.className,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/Listbox/Listbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHooks_unstable","Listbox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,yBAAyB,QAAQ,oBAAoB;AAE9D,SAASC,uBAAuB,QAAQ,wCAAwC;AAEhF,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCN,KAAK,CAACO,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGT,mBAAmB,CAACO,KAAK,EAAEC,GAAG,CAAC;EAC7C,MAAME,aAAa,GAAGP,uBAAuB,CAACM,KAAK,CAAC;EAEpDP,yBAAyB,CAACO,KAAK,CAAC;EAEhC,MAAM;IAAEP,yBAAyB,EAAES;EAAe,CAAE,GAAGP,4BAA4B,EAAE;EACrFO,eAAe,CAACF,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,EAAEC,aAAa,CAAC;AACrD,CAAC,CAAC;AAEFL,OAAO,CAACO,WAAW,GAAG,SAAS"}
+{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHooks_unstable","Listbox","forwardRef","props","ref","state","contextValues","useCustomStyles","displayName"],"sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  const { useListboxStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAE1C,SAASC,uBAAuB,QAAQ;AAExC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,uBAAA,CAAwBM,KAAA;EAE9CP,yBAAA,CAA0BO,KAAA;EAE1B,MAAM;IAAEP,yBAAA,EAA2BS;EAAe,CAAE,GAAGP,4BAAA;EACvDO,eAAA,CAAgBF,KAAA;EAEhB,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQO,WAAW,GAAG"}

package/lib/components/Listbox/Listbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Listbox.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/Listbox.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"],"mappings":"AAAA"}

package/lib/components/Listbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Listbox/renderListbox.js

@@ -11,8 +11,6 @@ export const renderListbox_unstable = (state, contextValues) => {
   } = getSlots(state);
   return /*#__PURE__*/React.createElement(ListboxContext.Provider, {
     value: contextValues.listbox
-  }, /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }));
+  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root));
 };
 //# sourceMappingURL=renderListbox.js.map

package/lib/components/Listbox/renderListbox.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","listbox","root"],"sources":["../src/packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAEpD,SAASC,cAAc,QAAQ,+BAA+B;AAE9D;;;AAGA,OAAO,MAAMC,sBAAsB,GAAGA,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGN,QAAQ,CAAeG,KAAK,CAAC;EAE1D,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,cAAc,CAACO,QAAQ;IAACC,KAAK,EAAEL,aAAa,CAACM;EAAO,gBACnDX,KAAA,CAAAQ,aAAA,CAACF,KAAK,CAACM,IAAI;IAAA,GAAKL,SAAS,CAACK;EAAI,EAAI,CACV;AAE9B,CAAC"}
+{"version":3,"names":["React","getSlots","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","createElement","Provider","value","listbox","root"],"sources":["../../../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues) => {\n  const { slots, slotProps } = getSlots<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAEzB,SAASC,cAAc,QAAQ;AAE/B;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,QAAA,CAAuBG,KAAA;EAEpD,oBACEJ,KAAA,CAAAQ,aAAA,CAACN,cAAA,CAAeO,QAAQ;IAACC,KAAA,EAAOL,aAAA,CAAcM;kBAC5CX,KAAA,CAAAQ,aAAA,CAACF,KAAA,CAAMM,IAAI,EAAKL,SAAA,CAAUK,IAAI;AAGpC"}

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

@@ -1 +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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"}
+{"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/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

@@ -1 +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"}
+{"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/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;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,iBAAA,GAAkD;EAC7DC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYL,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,EAYlB;AAEA;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAsC;EAC9E,MAAMC,MAAA,GAASlB,SAAA;EACfiB,KAAA,CAAMlB,IAAI,CAACoB,SAAS,GAAGvB,YAAA,CAAaE,iBAAA,CAAkBC,IAAI,EAAEmB,MAAA,CAAOnB,IAAI,EAAEkB,KAAA,CAAMlB,IAAI,CAACoB,SAAS;EAE7F,OAAOF,KAAA;AACT"}

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

@@ -1 +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"}
+{"version":3,"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHooks_unstable","Option","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../../../src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\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,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,4BAA4B,QAAQ;AAE7C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzB,MAAM;IAAEN,wBAAA,EAA0BO;EAAe,CAAE,GAAGN,4BAAA;EACtDM,eAAA,CAAgBD,KAAA;EAEhB,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOM,WAAW,GAAG"}

package/lib/components/Option/Option.types.js

@@ -1,2 +1,2 @@
-export {};
+import * as React from 'react';
 //# sourceMappingURL=Option.types.js.map

package/lib/components/Option/Option.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Option.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/Option.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /* The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /*\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"]}
+{"version":3,"names":["React"],"sources":["../../../src/components/Option/Option.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type OptionSlots = {\n  /* The root option slot, with role=\"option\" */\n  root: NonNullable<Slot<'div'>>;\n\n  /* The check icon that is visible for selected options */\n  checkIcon: Slot<'span'>;\n};\n\n/**\n * Option Props\n */\nexport type OptionProps = ComponentProps<Partial<OptionSlots>> & {\n  /**\n   * Sets an option to the `disabled` state.\n   * Disabled options cannot be selected, but are still keyboard navigable\n   */\n  disabled?: boolean;\n\n  /*\n   * Defines a unique identifier for the option.\n   * Use this to control selectedOptions, or to get the option value in the onOptionSelect callback.\n   * Defaults to `text` if not provided.\n   */\n  value?: string;\n} & (\n    | {\n        /**\n         * An optional override the string value of the Option's display text,\n         * defaulting to the Option's child content.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text?: string;\n        children: string;\n      }\n    | {\n        /**\n         * The string value of the Option's display text when the Option's children are not a string.\n         * This is used as the Dropdown button's or Combobox input's value when the option is selected,\n         * and as the comparison for type-to-find keyboard functionality.\n         */\n        text: string;\n        children?: React.ReactNode;\n      }\n  );\n\n/**\n * State used in rendering Option\n */\nexport type OptionState = ComponentState<OptionSlots> &\n  Pick<OptionProps, 'disabled'> & {\n    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"],"mappings":"AACA,YAAYA,KAAA,MAAW"}

package/lib/components/Option/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"]}
+{"version":3,"names":[],"sources":["../../../src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}

package/lib/components/Option/renderOption.js

@@ -8,10 +8,6 @@ export const renderOption_unstable = state => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, {
-    ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.checkIcon, {
-    ...slotProps.checkIcon
-  }), slotProps.root.children);
+  return /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
 };
 //# sourceMappingURL=renderOption.js.map

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

@@ -1 +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"}
+{"version":3,"names":["React","getSlots","renderOption_unstable","state","slots","slotProps","createElement","root","checkIcon","children"],"sources":["../../../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,YAAYA,KAAA,MAAW;AACvB,SAASC,QAAQ,QAAQ;AAGzB;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,QAAA,CAAsBE,KAAA;EAEnD,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMG,IAAI,EAAKF,SAAA,CAAUE,IAAI,eAC5BP,KAAA,CAAAM,aAAA,CAACF,KAAA,CAAMI,SAAS,EAAKH,SAAA,CAAUG,SAAS,GACvCH,SAAA,CAAUE,IAAI,CAACE,QAAQ;AAG9B"}

package/lib/components/Option/useOption.js

@@ -65,8 +65,8 @@ export const useOption_unstable = (props, ref) => {
   const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);
   // current active option?
   const active = useContextSelector(ListboxContext, ctx => {
-    var _a, _b;
-    return ((_a = ctx.activeOption) === null || _a === void 0 ? void 0 : _a.id) !== undefined && ((_b = ctx.activeOption) === null || _b === void 0 ? void 0 : _b.id) === id;
+    var _ctx_activeOption, _ctx_activeOption1;
+    return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;
   });
   // check icon
   let CheckIcon = /*#__PURE__*/React.createElement(CheckmarkFilled, null);
@@ -74,7 +74,7 @@ export const useOption_unstable = (props, ref) => {
     CheckIcon = selected ? /*#__PURE__*/React.createElement(Checkmark12Filled, null) : '';
   }
   const onClick = event => {
-    var _a;
+    var _props_onClick;
     if (disabled) {
       event.preventDefault();
       return;
@@ -87,7 +87,7 @@ export const useOption_unstable = (props, ref) => {
     }
     // handle selection change
     selectOption(event, optionData);
-    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
   };
   // register option data with context
   React.useEffect(() => {

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

@@ -1 +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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"}
+{"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","_ctx_activeOption","_ctx_activeOption1","activeOption","CheckIcon","createElement","onClick","event","_props_onClick","preventDefault","call","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sources":["../../../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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"}