@fluentui/react-combobox 9.0.0-beta.8 → 9.0.0

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

@@ -1 +1 @@
-{"version":3,"sources":["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,20 +4,14 @@ 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 useSelection_1 = /*#__PURE__*/require("../../utils/useSelection");
-
 const dropdownKeyActions_1 = /*#__PURE__*/require("../../utils/dropdownKeyActions");
-
-const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
-
 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.
  *
@@ -27,8 +21,6 @@ const useOptionCollection_1 = /*#__PURE__*/require("../../utils/useOptionCollect
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
  */
-
-
 const useListbox_unstable = (props, ref) => {
   const {
     multiselect
@@ -37,22 +29,17 @@ const useListbox_unstable = (props, ref) => {
   const {
     getCount,
     getOptionAtIndex,
-    getOptionById,
     getIndexOfId
   } = optionCollection;
   const {
+    clearSelection,
     selectedOptions,
     selectOption
   } = useSelection_1.useSelection(props);
   const [activeOption, setActiveOption] = React.useState();
-
-  const onOptionClick = (event, option) => {
-    // clicked option should always become active option
-    setActiveOption(getOptionById(option.id)); // handle selection change
-
-    selectOption(event, option);
-  };
-
+  // 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
@@ -60,57 +47,67 @@ 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();
       setActiveOption(getOptionAtIndex(newIndex));
+      setFocusVisible(true);
     }
-  }; // get state from parent combobox, if it exists
-
-
+  };
+  const onMouseOver = event => {
+    setFocusVisible(false);
+  };
+  // 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 comboboxOnOptionClick = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.onOptionClick);
-  const comboboxSelectedOptions = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, ctx => ctx.selectedOptions); // without a parent combobox context, provide values directly from Listbox
-
+  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 optionContextValues = hasComboboxContext ? {
     activeOption: comboboxActiveOption,
-    onOptionClick: comboboxOnOptionClick,
-    selectedOptions: comboboxSelectedOptions
+    focusVisible: comboboxFocusVisible,
+    selectedOptions: comboboxSelectedOptions,
+    selectOption: comboboxSelectOption,
+    setActiveOption: comboboxSetActiveOption
   } : {
     activeOption,
-    onOptionClick,
-    selectedOptions
+    focusVisible,
+    selectedOptions,
+    selectOption,
+    setActiveOption
   };
-  return {
+  const state = {
     components: {
       root: 'div'
     },
     root: react_utilities_1.getNativeElementProps('div', {
       ref,
-      role: 'listbox',
+      role: multiselect ? 'menu' : 'listbox',
       'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
       'aria-multiselectable': multiselect,
       tabIndex: 0,
-      onKeyDown,
       ...props
     }),
     multiselect,
+    clearSelection,
     ...optionCollection,
     ...optionContextValues
   };
+  const scrollContainerRef = useScrollOptionsIntoView_1.useScrollOptionsIntoView(state);
+  state.root.ref = react_utilities_1.useMergedRefs(state.root.ref, scrollContainerRef);
+  state.root.onKeyDown = react_utilities_1.useEventCallback(react_utilities_1.mergeCallbacks(state.root.onKeyDown, onKeyDown));
+  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":["components/Listbox/useListbox.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { useSelection } from '../../utils/useSelection';\nimport { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { OptionValue } from '../../utils/OptionCollection.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, getOptionById, getIndexOfId } = optionCollection;\n\n  const { selectedOptions, selectOption } = useSelection(props);\n\n  const [activeOption, setActiveOption] = React.useState<OptionValue | undefined>();\n\n  const onOptionClick = (event: React.MouseEvent<HTMLElement>, option: OptionValue) => {\n    // clicked option should always become active option\n    setActiveOption(getOptionById(option.id));\n\n    // handle selection change\n    selectOption(event, option);\n  };\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    }\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 comboboxOnOptionClick = useContextSelector(ComboboxContext, ctx => ctx.onOptionClick);\n  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasComboboxContext\n    ? {\n        activeOption: comboboxActiveOption,\n        onOptionClick: comboboxOnOptionClick,\n        selectedOptions: comboboxSelectedOptions,\n      }\n    : {\n        activeOption,\n        onOptionClick,\n        selectedOptions,\n      };\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      role: 'listbox',\n      'aria-activedescendant': hasComboboxContext ? undefined : activeOption?.id,\n      'aria-multiselectable': multiselect,\n      tabIndex: 0,\n      onKeyDown,\n      ...props,\n    }),\n    multiselect,\n    ...optionCollection,\n    ...optionContextValues,\n  };\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,49 +4,41 @@ 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",
-    "z8tnut": "f1x4af0m",
-    "z189sj": ["f7x41pl", "fruq291"],
-    "Byoj8tv": "fd55psn",
-    "uwmqm3": ["fruq291", "f7x41pl"],
-    "Belr9w4": "fiut8dr"
+  root: {
+    De3pzq: "fxugw4r",
+    B7ck84d: "f1ewtqcl",
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Bf4jedk: "f3hsy1e",
+    Bmxbyg5: "f5zp4f",
+    Bpd4iqm: "fpvhumw",
+    oeaueh: "f1yog68k",
+    Bw0xxkn: "f13sgyd8",
+    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;}", ".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: [".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1ewtqcl{box-sizing:border-box;}", ".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;}", ".fpvhumw{outline-width:1px;}", ".f1yog68k{outline-style:solid;}", ".f13sgyd8{outline-color:var(--colorTransparentStroke);}", ".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":["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;EAAA;AAAA;EAAA;AAAA,EAAlB;AAcA;;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    ...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;EAAA;AAAA;EAAA;AAAA,EAY1B;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    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"]}

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":["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":["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":["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,30 +4,31 @@ 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 ListboxContext_1 = /*#__PURE__*/require("../../contexts/ListboxContext"); // TODO: refine this more
-
-
-function getValueString(value, children) {
-  if (value) {
-    return value;
+const ComboboxContext_1 = /*#__PURE__*/require("../../contexts/ComboboxContext");
+const ListboxContext_1 = /*#__PURE__*/require("../../contexts/ListboxContext");
+function getTextString(text, children) {
+  if (text !== undefined) {
+    return text;
   }
-
-  let valueString = '';
+  let textString = '';
+  let hasNonStringChild = false;
   React.Children.forEach(children, child => {
     if (typeof child === 'string') {
-      valueString += child;
+      textString += child;
+    } else {
+      hasNonStringChild = true;
     }
   });
-  return valueString;
+  // 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;
 }
 /**
  * Create the state required to render Option.
@@ -38,67 +39,75 @@ function getValueString(value, children) {
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
  */
-
-
 const useOption_unstable = (props, ref) => {
   const {
+    children,
     disabled,
+    text,
     value
   } = props;
   const optionRef = React.useRef(null);
-  const optionValue = getValueString(value, props.children); // context values
-
+  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 optionData = React.useMemo(() => ({
+    id,
+    disabled,
+    text: optionText,
+    value: optionValue
+  }), [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 onOptionClick = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.onOptionClick);
   const registerOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => ctx.registerOption);
   const selected = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, ctx => {
     const selectedOptions = ctx.selectedOptions;
     return !!optionValue && !!selectedOptions.find(o => o === optionValue);
-  }); // use the id if provided, otherwise use a generated id
-
-  const defaultId = react_utilities_1.useId('fluent-option');
-  const id = React.useMemo(() => {
-    return props.id || defaultId;
-  }, [props.id, defaultId]); // current active option?
-
+  });
+  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 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);
+    CheckIcon = selected ? React.createElement(react_icons_1.Checkmark12Filled, null) : '';
   }
-
   const onClick = event => {
     var _a;
-
     if (disabled) {
       event.preventDefault();
       return;
     }
-
-    onOptionClick(event, {
-      id,
-      disabled,
-      value: optionValue
-    });
+    // 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
+    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({
-        id,
-        disabled,
-        value: optionValue
-      }, optionRef.current);
+      return registerOption(optionData, optionRef.current);
     }
-  }, [registerOption, id, disabled, optionValue]);
+  }, [id, optionData, registerOption]);
+  const semanticProps = multiselect ? {
+    role: 'menuitemcheckbox',
+    'aria-checked': selected
+  } : {
+    role: 'option',
+    'aria-selected': selected
+  };
   return {
     components: {
       root: 'div',
@@ -106,10 +115,9 @@ const useOption_unstable = (props, ref) => {
     },
     root: react_utilities_1.getNativeElementProps('div', {
       ref: react_utilities_1.useMergedRefs(ref, optionRef),
-      role: 'option',
       'aria-disabled': disabled ? 'true' : undefined,
-      'aria-selected': `${selected}`,
       id,
+      ...semanticProps,
       ...props,
       onClick
     }),
@@ -122,10 +130,10 @@ const useOption_unstable = (props, ref) => {
     }),
     active,
     disabled,
+    focusVisible,
     multiselect,
     selected
   };
 };
-
 exports.useOption_unstable = useOption_unstable;
 //# sourceMappingURL=useOption.js.map