@fluentui/react-combobox 9.0.0-beta.19 → 9.0.0-beta.21

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles';\n"]}

package/lib-commonjs/components/Listbox/renderListbox.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderListbox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const ListboxContext_1 = /*#__PURE__*/require("../../contexts/ListboxContext");
 /**
  * Render the final JSX of Listbox
  */
-
-
 const renderListbox_unstable = (state, contextValues) => {
   const {
     slots,
@@ -22,9 +17,9 @@ const renderListbox_unstable = (state, contextValues) => {
   } = react_utilities_1.getSlots(state);
   return React.createElement(ListboxContext_1.ListboxContext.Provider, {
     value: contextValues.listbox
-  }, React.createElement(slots.root, { ...slotProps.root
+  }, React.createElement(slots.root, {
+    ...slotProps.root
   }));
 };
-
 exports.renderListbox_unstable = renderListbox_unstable;
 //# sourceMappingURL=renderListbox.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/renderListbox.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;EACjG,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,gBAAA,CAAA,cAAA,CAAe,QAAhB,EAAwB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAxB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAEA;;;AAGO,MAAMA,sBAAsB,GAAG,CAACC,KAAmB,EAAEC,aAAmC,KAAI;EACjG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeJ,KAAK,CAAC;EAE1D,OACEK,oBAACC,+BAAc,CAACC,QAAQ;IAACC,KAAK,EAAEP,aAAa,CAACQ;EAAO,GACnDJ,oBAACH,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,CACV;AAE9B,CAAC;AARYC,8BAAsB","names":["renderListbox_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","ListboxContext_1","Provider","value","listbox","root","exports"],"sourceRoot":"../src/","sources":["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"]}

package/lib-commonjs/components/Listbox/useListbox.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useListbox_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-
 const dropdownKeyActions_1 = /*#__PURE__*/require("../../utils/dropdownKeyActions");
-
 const useOptionCollection_1 = /*#__PURE__*/require("../../utils/useOptionCollection");
-
 const useScrollOptionsIntoView_1 = /*#__PURE__*/require("../../utils/useScrollOptionsIntoView");
-
 const useSelection_1 = /*#__PURE__*/require("../../utils/useSelection");
-
 const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
 /**
  * Create the state required to render Listbox.
@@ -29,8 +21,6 @@ const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext")
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
  */
-
-
 const useListbox_unstable = (props, ref) => {
   const {
     multiselect
@@ -46,11 +36,10 @@ const useListbox_unstable = (props, ref) => {
     selectedOptions,
     selectOption
   } = useSelection_1.useSelection(props);
-  const [activeOption, setActiveOption] = React.useState(); // track whether keyboard focus outline should be shown
+  const [activeOption, setActiveOption] = React.useState();
+  // track whether keyboard focus outline should be shown
   // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-
   const [focusVisible, setFocusVisible] = React.useState(false);
-
   const onKeyDown = event => {
     const action = dropdownKeyActions_1.getDropdownActionFromKey(event, {
       open: true
@@ -58,17 +47,14 @@ const useListbox_unstable = (props, ref) => {
     const maxIndex = getCount() - 1;
     const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
     let newIndex = activeIndex;
-
     switch (action) {
       case 'Select':
       case 'CloseSelect':
         activeOption && selectOption(event, activeOption);
         break;
-
       default:
         newIndex = dropdownKeyActions_1.getIndexFromAction(action, activeIndex, maxIndex);
     }
-
     if (newIndex !== activeIndex) {
       // prevent default page scroll/keyboard action if the index changed
       event.preventDefault();
@@ -76,19 +62,17 @@ const useListbox_unstable = (props, ref) => {
       setFocusVisible(true);
     }
   };
-
   const onMouseOver = event => {
     setFocusVisible(false);
-  }; // get state from parent combobox, if it exists
-
-
+  };
+  // get state from parent combobox, if it exists
   const hasComboboxContext = react_context_selector_1.useHasParentContext(ComboboxContext_1.ComboboxContext);
   const comboboxActiveOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.activeOption);
   const comboboxFocusVisible = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.focusVisible);
   const comboboxSelectedOptions = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.selectedOptions);
   const comboboxSelectOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.selectOption);
-  const comboboxSetActiveOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.setActiveOption); // without a parent combobox context, provide values directly from Listbox
-
+  const comboboxSetActiveOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.setActiveOption);
+  // without a parent combobox context, provide values directly from Listbox
   const optionContextValues = hasComboboxContext ? {
     activeOption: comboboxActiveOption,
     focusVisible: comboboxFocusVisible,
@@ -125,6 +109,5 @@ const useListbox_unstable = (props, ref) => {
   state.root.onMouseOver = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(state.root.onMouseOver, onMouseOver));
   return state;
 };
-
 exports.useListbox_unstable = useListbox_unstable;
 //# sourceMappingURL=useListbox.js.map

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

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

package/lib-commonjs/components/Listbox/useListboxStyles.js

@@ -4,50 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useListboxStyles_unstable = exports.listboxClassNames = void 0;
-
 const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
 const react_1 = /*#__PURE__*/require("@griffel/react");
-
 exports.listboxClassNames = {
   root: 'fui-Listbox'
 };
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/react_1.__styles({
-  "root": {
-    "E5pizo": "f1hg901r",
-    "B7ck84d": "f1ewtqcl",
-    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
-    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
-    "B7oj6ja": ["f1jar5jt", "fyu767a"],
-    "Btl43ni": ["fyu767a", "f1jar5jt"],
-    "De3pzq": "fxugw4r",
-    "mc9l5x": "f22iagw",
-    "Beiy3e4": "f1vx9l62",
-    "Bf4jedk": "f3hsy1e",
-    "Bmxbyg5": "f5zp4f",
-    "z8tnut": "f1x4af0m",
-    "z189sj": ["f7x41pl", "fruq291"],
-    "Byoj8tv": "fd55psn",
-    "uwmqm3": ["fruq291", "f7x41pl"],
-    "Belr9w4": "fiut8dr"
+  root: {
+    E5pizo: "f1hg901r",
+    B7ck84d: "f1ewtqcl",
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    De3pzq: "fxugw4r",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bf4jedk: "f3hsy1e",
+    Bmxbyg5: "f5zp4f",
+    z8tnut: "f1x4af0m",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "fd55psn",
+    uwmqm3: ["fruq291", "f7x41pl"],
+    Belr9w4: "fiut8dr"
   }
 }, {
-  "d": [".f1hg901r{box-shadow:var(--shadow16);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
+  d: [".f1hg901r{box-shadow:var(--shadow16);}", ".f1ewtqcl{box-sizing:border-box;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f3hsy1e{min-width:160px;}", ".f5zp4f{overflow-y:auto;}", ".f1x4af0m{padding-top:var(--spacingHorizontalXS);}", ".f7x41pl{padding-right:var(--spacingHorizontalXS);}", ".fruq291{padding-left:var(--spacingHorizontalXS);}", ".fd55psn{padding-bottom:var(--spacingHorizontalXS);}", ".fiut8dr{row-gap:var(--spacingHorizontalXXS);}"]
 });
 /**
  * Apply styling to the Listbox slots based on the state
  */
-
-
 const useListboxStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = react_1.mergeClasses(exports.listboxClassNames.root, styles.root, state.root.className);
   return state;
 };
-
 exports.useListboxStyles_unstable = useListboxStyles_unstable;
 //# sourceMappingURL=useListboxStyles.js.map

package/lib-commonjs/components/Listbox/useListboxStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAEA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGa,OAAA,CAAA,iBAAA,GAAkD;EAC7D,IAAI,EAAE;AADuD,CAAlD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAeA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,iBAAA,CAAkB,IAA/B,EAAqC,MAAM,CAAC,IAA5C,EAAkD,KAAK,CAAC,IAAN,CAAW,SAA7D,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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    boxShadow: `${tokens.shadow16}`,\n    boxSizing: 'border-box',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AAEA;AAGaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAa1B;AAEF;;;AAGO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGJ,SAAS,EAAE;EAC1BG,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGJ,oBAAY,CAACH,yBAAiB,CAACC,IAAI,EAAEK,MAAM,CAACL,IAAI,EAAEI,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC;AALYL,iCAAyB","names":["exports","root","useStyles","react_1","useListboxStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxShadow: `${tokens.shadow16}`,\n    boxSizing: 'border-box',\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    backgroundColor: tokens.colorNeutralBackground1,\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\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"]}

package/lib-commonjs/components/Option/Option.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Option = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useOption_1 = /*#__PURE__*/require("./useOption");
-
 const renderOption_1 = /*#__PURE__*/require("./renderOption");
-
 const useOptionStyles_1 = /*#__PURE__*/require("./useOptionStyles");
 /**
  * Option component: a styled child option of a Combobox
  */
-
-
 exports.Option = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOption_1.useOption_unstable(props, ref);
   useOptionStyles_1.useOptionStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/Option.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,cAAM,gBAAqCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGC,8BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE5CG,0CAAwB,CAACF,KAAK,CAAC;EAC/B,OAAOG,oCAAqB,CAACH,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFL,cAAM,CAACS,WAAW,GAAG,QAAQ","names":["exports","React","forwardRef","props","ref","state","useOption_1","useOptionStyles_1","renderOption_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/Option/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Option"), exports);
-
 tslib_1.__exportStar(require("./Option.types"), exports);
-
 tslib_1.__exportStar(require("./renderOption"), exports);
-
 tslib_1.__exportStar(require("./useOption"), exports);
-
 tslib_1.__exportStar(require("./useOptionStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles';\n"]}

package/lib-commonjs/components/Option/renderOption.js

@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderOption_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Option
  */
-
-
 const renderOption_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.checkIcon, { ...slotProps.checkIcon
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.checkIcon, {
+    ...slotProps.checkIcon
   }), slotProps.root.children);
 };
-
 exports.renderOption_unstable = renderOption_unstable;
 //# sourceMappingURL=renderOption.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,SAAP,EAAgB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAhB,CADF,EAEG,SAAS,CAAC,IAAV,CAAe,QAFlB,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAcH,KAAK,CAAC;EAEzD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,SAAS;IAAA,GAAKJ,SAAS,CAACI;EAAS,EAAI,EAC3CJ,SAAS,CAACG,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC;AATYC,6BAAqB","names":["renderOption_unstable","state","slots","slotProps","react_utilities_1","React","root","checkIcon","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkIcon {...slotProps.checkIcon} />\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/Option/useOption.js

@@ -4,24 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useOption_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
 const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
-
 const ListboxContext_1 = /*#__PURE__*/require("../../contexts/ListboxContext");
-
 function getTextString(text, children) {
   if (text !== undefined) {
     return text;
   }
-
   let textString = '';
   let hasNonStringChild = false;
   React.Children.forEach(children, child => {
@@ -30,13 +22,12 @@ function getTextString(text, children) {
     } else {
       hasNonStringChild = true;
     }
-  }); // warn if an Option has non-string children and no text prop
-
+  });
+  // warn if an Option has non-string children and no text prop
   if (hasNonStringChild) {
     // eslint-disable-next-line no-console
     console.warn('Provide a `text` prop to Option components when they contain non-string children.');
   }
-
   return textString;
 }
 /**
@@ -48,8 +39,6 @@ function getTextString(text, children) {
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
  */
-
-
 const useOption_unstable = (props, ref) => {
   const {
     children,
@@ -59,17 +48,17 @@ const useOption_unstable = (props, ref) => {
   } = props;
   const optionRef = React.useRef(null);
   const optionText = getTextString(text, children);
-  const optionValue = value !== null && value !== void 0 ? value : optionText; // use the id if provided, otherwise use a generated id
-
-  const id = react_utilities_1.useId('fluent-option', props.id); // data used for context registration & events
-
+  const optionValue = value !== null && value !== void 0 ? value : optionText;
+  // use the id if provided, otherwise use a generated id
+  const id = react_utilities_1.useId('fluent-option', props.id);
+  // data used for context registration & events
   const optionData = React.useMemo(() => ({
     id,
     disabled,
     text: optionText,
     value: optionValue
-  }), [id, disabled, optionText, optionValue]); // context values
-
+  }), [id, disabled, optionText, optionValue]);
+  // context values
   const focusVisible = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.focusVisible);
   const multiselect = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.multiselect);
   const registerOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.registerOption);
@@ -79,41 +68,34 @@ const useOption_unstable = (props, ref) => {
   });
   const selectOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.selectOption);
   const setActiveOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.setActiveOption);
-  const setOpen = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.setOpen); // current active option?
-
+  const setOpen = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.setOpen);
+  // current active option?
   const active = react_context_selector_1.useContextSelector(ListboxContext_1.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;
-  }); // check icon
-
+  });
+  // check icon
   let CheckIcon = React.createElement(react_icons_1.CheckmarkFilled, null);
-
   if (multiselect) {
     CheckIcon = selected ? React.createElement(react_icons_1.CheckboxCheckedFilled, null) : React.createElement(react_icons_1.CheckboxUncheckedFilled, null);
   }
-
   const onClick = event => {
     var _a;
-
     if (disabled) {
       event.preventDefault();
       return;
-    } // clicked option should always become active option
-
-
-    setActiveOption(optionData); // close on option click for single-select options in a combobox
-
+    }
+    // clicked option should always become active option
+    setActiveOption(optionData);
+    // close on option click for single-select options in a combobox
     if (!multiselect) {
       setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
-    } // handle selection change
-
-
+    }
+    // handle selection change
     selectOption(event, optionData);
     (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
-  }; // register option data with context
-
-
+  };
+  // register option data with context
   React.useEffect(() => {
     if (id && optionRef.current) {
       return registerOption(optionData, optionRef.current);
@@ -153,6 +135,5 @@ const useOption_unstable = (props, ref) => {
     selected
   };
 };
-
 exports.useOption_unstable = useOption_unstable;
 //# sourceMappingURL=useOption.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,gCAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,+BAAA,CAAA;;AAIA,SAAS,aAAT,CAAuB,IAAvB,EAAiD,QAAjD,EAA0E;EACxE,IAAI,IAAI,KAAK,SAAb,EAAwB;IACtB,OAAO,IAAP;EACD;;EAED,IAAI,UAAU,GAAG,EAAjB;EACA,IAAI,iBAAiB,GAAG,KAAxB;EACA,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,EAAiC,KAAK,IAAG;IACvC,IAAI,OAAO,KAAP,KAAiB,QAArB,EAA+B;MAC7B,UAAU,IAAI,KAAd;IACD,CAFD,MAEO;MACL,iBAAiB,GAAG,IAApB;IACD;EACF,CAND,EAPwE,CAexE;;EACA,IAAI,iBAAJ,EAAuB;IACrB;IACA,OAAO,CAAC,IAAR,CAAa,mFAAb;EACD;;EAED,OAAO,UAAP;AACD;AAED;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAiE;EACjG,MAAM;IAAE,QAAF;IAAY,QAAZ;IAAsB,IAAtB;IAA4B;EAA5B,IAAsC,KAA5C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAA0B,IAA1B,CAAlB;EACA,MAAM,UAAU,GAAG,aAAa,CAAC,IAAD,EAAO,QAAP,CAAhC;EACA,MAAM,WAAW,GAAG,KAAK,KAAA,IAAL,IAAA,KAAK,KAAA,KAAA,CAAL,GAAA,KAAA,GAAS,UAA7B,CAJiG,CAMjG;;EACA,MAAM,EAAE,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,KAAK,CAAC,EAA7B,CAAX,CAPiG,CASjG;;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,OAAN,CAA2B,OAAO;IAAE,EAAF;IAAM,QAAN;IAAgB,IAAI,EAAE,UAAtB;IAAkC,KAAK,EAAE;EAAzC,CAAP,CAA3B,EAA2F,CAC5G,EAD4G,EAE5G,QAF4G,EAG5G,UAH4G,EAI5G,WAJ4G,CAA3F,CAAnB,CAViG,CAiBjG;;EACA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,WAAW,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,WAA9C,CAApB;EACA,MAAM,cAAc,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,cAA9C,CAAvB;EACA,MAAM,QAAQ,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;IACxD,MAAM,eAAe,GAAG,GAAG,CAAC,eAA5B;IAEA,OAAO,CAAC,CAAC,WAAF,IAAiB,CAAC,CAAC,eAAe,CAAC,IAAhB,CAAqB,CAAC,IAAI,CAAC,KAAK,WAAhC,CAA1B;EACD,CAJgB,CAAjB;EAKA,MAAM,YAAY,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,YAA9C,CAArB;EACA,MAAM,eAAe,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAI,GAAG,CAAC,eAA9C,CAAxB;EACA,MAAM,OAAO,GAAG,wBAAA,CAAA,kBAAA,CAAmB,iBAAA,CAAA,eAAnB,EAAoC,GAAG,IAAI,GAAG,CAAC,OAA/C,CAAhB,CA5BiG,CA8BjG;;EACA,MAAM,MAAM,GAAG,wBAAA,CAAA,kBAAA,CAAmB,gBAAA,CAAA,cAAnB,EAAmC,GAAG,IAAG;;;IACtD,OAAO,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,SAAzB,IAAsC,CAAA,CAAA,EAAA,GAAA,GAAG,CAAC,YAAJ,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,EAAlB,MAAyB,EAAtE;EACD,CAFc,CAAf,CA/BiG,CAmCjG;;EACA,IAAI,SAAS,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,eAAD,EAAgB,IAAhB,CAAhB;;EACA,IAAI,WAAJ,EAAiB;IACf,SAAS,GAAG,QAAQ,GAAG,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,qBAAD,EAAsB,IAAtB,CAAH,GAA+B,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,uBAAD,EAAwB,IAAxB,CAAnD;EACD;;EAED,MAAM,OAAO,GAAI,KAAD,IAA4C;;;IAC1D,IAAI,QAAJ,EAAc;MACZ,KAAK,CAAC,cAAN;MACA;IACD,CAJyD,CAM1D;;;IACA,eAAe,CAAC,UAAD,CAAf,CAP0D,CAS1D;;IACA,IAAI,CAAC,WAAL,EAAkB;MAChB,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAG,KAAH,EAAU,KAAV,CAAP;IACD,CAZyD,CAc1D;;;IACA,YAAY,CAAC,KAAD,EAAQ,UAAR,CAAZ;IAEA,CAAA,EAAA,GAAA,KAAK,CAAC,OAAN,MAAa,IAAb,IAAa,EAAA,KAAA,KAAA,CAAb,GAAa,KAAA,CAAb,GAAa,EAAA,CAAA,IAAA,CAAb,KAAa,EAAG,KAAH,CAAb;EACD,CAlBD,CAzCiG,CA6DjG;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,EAAE,IAAI,SAAS,CAAC,OAApB,EAA6B;MAC3B,OAAO,cAAc,CAAC,UAAD,EAAa,SAAS,CAAC,OAAvB,CAArB;IACD;EACF,CAJD,EAIG,CAAC,EAAD,EAAK,UAAL,EAAiB,cAAjB,CAJH;EAMA,MAAM,aAAa,GAAG,WAAW,GAC7B;IAAE,IAAI,EAAE,kBAAR;IAA4B,gBAAgB;EAA5C,CAD6B,GAE7B;IAAE,IAAI,EAAE,QAAR;IAAkB,iBAAiB;EAAnC,CAFJ;EAIA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,SAAS,EAAE;IAFD,CADP;IAKL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,SAAnB,CAD4B;MAEjC,iBAAiB,QAAQ,GAAG,MAAH,GAAY,SAFJ;MAGjC,EAHiC;MAIjC,GAAG,aAJ8B;MAKjC,GAAG,KAL8B;MAMjC;IANiC,CAA7B,CALD;IAaL,SAAS,EAAE,iBAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC;MAC3C,QAAQ,EAAE,IADiC;MAE3C,YAAY,EAAE;QACZ,eAAe,MADH;QAEZ,QAAQ,EAAE;MAFE;IAF6B,CAAlC,CAbN;IAoBL,MApBK;IAqBL,QArBK;IAsBL,YAtBK;IAuBL,WAvBK;IAwBL;EAxBK,CAAP;AA0BD,CAlGM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\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"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"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","names":["getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","react_utilities_1","optionData","useMemo","focusVisible","react_context_selector_1","ListboxContext_1","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","ComboboxContext_1","active","activeOption","CheckIcon","react_icons_1","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <CheckboxCheckedFilled /> : <CheckboxUncheckedFilled />;\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"]}