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

package/lib/components/Listbox/useListbox.js

@@ -1,10 +1,11 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, mergeCallbacks, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
 import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';
-import { useSelection } from '../../utils/useSelection';
 import { getDropdownActionFromKey, getIndexFromAction } from '../../utils/dropdownKeyActions';
-import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { useOptionCollection } from '../../utils/useOptionCollection';
+import { useScrollOptionsIntoView } from '../../utils/useScrollOptionsIntoView';
+import { useSelection } from '../../utils/useSelection';
+import { ComboboxContext } from '../../contexts/ComboboxContext';
 /**
  * Create the state required to render Listbox.
  *
@@ -14,7 +15,6 @@ import { useOptionCollection } from '../../utils/useOptionCollection';
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
  */
-
 export const useListbox_unstable = (props, ref) => {
   const {
     multiselect
@@ -23,22 +23,17 @@ export const useListbox_unstable = (props, ref) => {
   const {
     getCount,
     getOptionAtIndex,
-    getOptionById,
     getIndexOfId
   } = optionCollection;
   const {
+    clearSelection,
     selectedOptions,
     selectOption
   } = 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 = getDropdownActionFromKey(event, {
       open: true
@@ -46,55 +41,66 @@ export 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 = 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 = useHasParentContext(ComboboxContext);
   const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);
-  const comboboxOnOptionClick = useContextSelector(ComboboxContext, ctx => ctx.onOptionClick);
-  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions); // without a parent combobox context, provide values directly from Listbox
-
+  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);
+  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);
+  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);
+  const comboboxSetActiveOption = useContextSelector(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: 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(state);
+  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);
+  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
+  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));
+  return state;
 };
 //# sourceMappingURL=useListbox.js.map

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

package/lib/components/Listbox/useListboxStyles.js

@@ -6,33 +6,29 @@ export const listboxClassNames = {
 /**
  * Styles for the root slot
  */
-
 const useStyles = /*#__PURE__*/__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
  */
-
-
 export const useListboxStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Listbox/useListboxStyles.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,QAAuB,uBAAvB;AAEA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,OAAO,MAAM,iBAAiB,GAAiC;EAC7D,IAAI,EAAE;AADuD,CAAxD;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAcA;;AAEG;;;AACH,OAAO,MAAM,yBAAyB,GAAI,KAAD,IAAsC;EAC7E,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,iBAAiB,CAAC,IAAnB,EAAyB,MAAM,CAAC,IAAhC,EAAsC,KAAK,CAAC,IAAN,CAAW,SAAjD,CAAnC;EAEA,OAAO,KAAP;AACD,CALM","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,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,mBAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AAGrE,OAAO,MAAMC,iBAAiB,GAAiC;EAC7DC,IAAI,EAAE;CACP;AAED;;;AAGA,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAYhB;AAEF;;;AAGA,OAAO,MAAMC,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,MAAM,GAAGH,SAAS,EAAE;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAE9F,OAAOF,KAAK;AACd,CAAC","names":["tokens","mergeClasses","shorthands","listboxClassNames","root","useStyles","useListboxStyles_unstable","state","styles","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Listbox/useListboxStyles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"]}

package/lib/components/Option/Option.js

@@ -5,7 +5,6 @@ import { useOptionStyles_unstable } from './useOptionStyles';
 /**
  * Option component: a styled child option of a Combobox
  */
-
 export const Option = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useOption_unstable(props, ref);
   useOptionStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/Option.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAIA;;AAEG;;AACH,OAAO,MAAM,MAAM,gBAAqC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,EAAQ,GAAR,CAAhC;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,CAA5B;AACD,CALuD,CAAjD;AAOP,MAAM,CAAC,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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,aAAa;AAChD,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SAASC,wBAAwB,QAAQ,mBAAmB;AAI5D;;;AAGA,OAAO,MAAMC,MAAM,gBAAqCJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGP,kBAAkB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE5CJ,wBAAwB,CAACK,KAAK,CAAC;EAC/B,OAAON,qBAAqB,CAACM,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFJ,MAAM,CAACK,WAAW,GAAG,QAAQ","names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","Option","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"]}

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

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

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

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

package/lib/components/Option/renderOption.js

@@ -3,14 +3,15 @@ import { getSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Option
  */
-
 export const renderOption_unstable = state => {
   const {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }, /*#__PURE__*/React.createElement(slots.checkIcon, { ...slotProps.checkIcon
+  return /*#__PURE__*/React.createElement(slots.root, {
+    ...slotProps.root
+  }, /*#__PURE__*/React.createElement(slots.checkIcon, {
+    ...slotProps.checkIcon
   }), slotProps.root.children);
 };
 //# sourceMappingURL=renderOption.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/renderOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,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","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,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAcE,KAAK,CAAC;EAEzD,oBACEH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,gBAC5BN,oBAACI,KAAK,CAACG,SAAS;IAAA,GAAKF,SAAS,CAACE;EAAS,EAAI,EAC3CF,SAAS,CAACC,IAAI,CAACE,QAAQ,CACb;AAEjB,CAAC","names":["React","getSlots","renderOption_unstable","state","slots","slotProps","root","checkIcon","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/renderOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlots<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.checkIcon {...slotProps.checkIcon} />\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"]}

package/lib/components/Option/useOption.js

@@ -1,21 +1,28 @@
 import * as React from 'react';
 import { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';
 import { useContextSelector } from '@fluentui/react-context-selector';
-import { CheckmarkFilled, CheckboxUncheckedFilled, CheckboxCheckedFilled } from '@fluentui/react-icons';
-import { ListboxContext } from '../../contexts/ListboxContext'; // TODO: refine this more
-
-function getValueString(value, children) {
-  if (value) {
-    return value;
+import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
+import { ComboboxContext } from '../../contexts/ComboboxContext';
+import { ListboxContext } from '../../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.
@@ -26,67 +33,75 @@ function getValueString(value, children) {
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
  */
-
-
 export 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 = 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 = useContextSelector(ListboxContext, ctx => ctx.focusVisible);
   const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);
-  const onOptionClick = useContextSelector(ListboxContext, ctx => ctx.onOptionClick);
   const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);
   const selected = useContextSelector(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 = useId('fluent-option');
-  const id = React.useMemo(() => {
-    return props.id || defaultId;
-  }, [props.id, defaultId]); // current active option?
-
+  });
+  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);
+  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);
+  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);
+  // current active option?
   const active = useContextSelector(ListboxContext, ctx => {
     var _a, _b;
-
     return ((_a = ctx.activeOption) === null || _a === void 0 ? void 0 : _a.id) !== undefined && ((_b = ctx.activeOption) === null || _b === void 0 ? void 0 : _b.id) === id;
-  }); // check icon
-
+  });
+  // check icon
   let CheckIcon = /*#__PURE__*/React.createElement(CheckmarkFilled, null);
-
   if (multiselect) {
-    CheckIcon = selected ? /*#__PURE__*/React.createElement(CheckboxCheckedFilled, null) : /*#__PURE__*/React.createElement(CheckboxUncheckedFilled, null);
+    CheckIcon = selected ? /*#__PURE__*/React.createElement(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',
@@ -94,10 +109,9 @@ export const useOption_unstable = (props, ref) => {
     },
     root: getNativeElementProps('div', {
       ref: useMergedRefs(ref, optionRef),
-      role: 'option',
       'aria-disabled': disabled ? 'true' : undefined,
-      'aria-selected': `${selected}`,
       id,
+      ...semanticProps,
       ...props,
       onClick
     }),
@@ -110,6 +124,7 @@ export const useOption_unstable = (props, ref) => {
     }),
     active,
     disabled,
+    focusVisible,
     multiselect,
     selected
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Option/useOption.tsx"],"names":[],"mappings":"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","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 { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionProps, OptionState } from './Option.types';\n\n// TODO: refine this more\nfunction getValueString(value: string | undefined, children: React.ReactNode) {\n  if (value) {\n    return value;\n  }\n\n  let valueString = '';\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      valueString += child;\n    }\n  });\n  return valueString;\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 { disabled, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionValue = getValueString(value, props.children);\n\n  // context values\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const onOptionClick = useContextSelector(ListboxContext, ctx => ctx.onOptionClick);\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\n  // use the id if provided, otherwise use a generated id\n  const defaultId = useId('fluent-option');\n  const id = React.useMemo(() => {\n    return props.id || defaultId;\n  }, [props.id, defaultId]);\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    onOptionClick(event, { id, disabled, value: optionValue });\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption({ id, disabled, value: optionValue }, optionRef.current);\n    }\n  }, [registerOption, id, disabled, optionValue]);\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      role: 'option',\n      'aria-disabled': disabled ? 'true' : undefined,\n      'aria-selected': `${selected}`,\n      id,\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    multiselect,\n    selected,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,aAAa,QAAQ,2BAA2B;AACzG,SAASC,kBAAkB,QAAQ,kCAAkC;AACrE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,uBAAuB;AAC1E,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,cAAc,QAAQ,+BAA+B;AAI9D,SAASC,aAAa,CAACC,IAAwB,EAAEC,QAAyB;EACxE,IAAID,IAAI,KAAKE,SAAS,EAAE;IACtB,OAAOF,IAAI;;EAGb,IAAIG,UAAU,GAAG,EAAE;EACnB,IAAIC,iBAAiB,GAAG,KAAK;EAC7Bf,KAAK,CAACgB,QAAQ,CAACC,OAAO,CAACL,QAAQ,EAAEM,KAAK,IAAG;IACvC,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC7BJ,UAAU,IAAII,KAAK;KACpB,MAAM;MACLH,iBAAiB,GAAG,IAAI;;EAE5B,CAAC,CAAC;EAEF;EACA,IAAIA,iBAAiB,EAAE;IACrB;IACAI,OAAO,CAACC,IAAI,CAAC,mFAAmF,CAAC;;EAGnG,OAAON,UAAU;AACnB;AAEA;;;;;;;;;AASA,OAAO,MAAMO,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAA2B,KAAiB;EACjG,MAAM;IAAEX,QAAQ;IAAEY,QAAQ;IAAEb,IAAI;IAAEc;EAAK,CAAE,GAAGH,KAAK;EACjD,MAAMI,SAAS,GAAG1B,KAAK,CAAC2B,MAAM,CAAc,IAAI,CAAC;EACjD,MAAMC,UAAU,GAAGlB,aAAa,CAACC,IAAI,EAAEC,QAAQ,CAAC;EAChD,MAAMiB,WAAW,GAAGJ,KAAK,aAALA,KAAK,cAALA,KAAK,GAAIG,UAAU;EAEvC;EACA,MAAME,EAAE,GAAG3B,KAAK,CAAC,eAAe,EAAEmB,KAAK,CAACQ,EAAE,CAAC;EAE3C;EACA,MAAMC,UAAU,GAAG/B,KAAK,CAACgC,OAAO,CAAc,OAAO;IAAEF,EAAE;IAAEN,QAAQ;IAAEb,IAAI,EAAEiB,UAAU;IAAEH,KAAK,EAAEI;EAAW,CAAE,CAAC,EAAE,CAC5GC,EAAE,EACFN,QAAQ,EACRI,UAAU,EACVC,WAAW,CACZ,CAAC;EAEF;EACA,MAAMI,YAAY,GAAG5B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACD,YAAY,CAAC;EAChF,MAAME,WAAW,GAAG9B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACC,WAAW,CAAC;EAC9E,MAAMC,cAAc,GAAG/B,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAC;EACpF,MAAMC,QAAQ,GAAGhC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAG;IACxD,MAAMI,eAAe,GAAGJ,GAAG,CAACI,eAAe;IAE3C,OAAO,CAAC,CAACT,WAAW,IAAI,CAAC,CAACS,eAAe,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,KAAKX,WAAW,CAAC;EACxE,CAAC,CAAC;EACF,MAAMY,YAAY,GAAGpC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACO,YAAY,CAAC;EAChF,MAAMC,eAAe,GAAGrC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAIA,GAAG,CAACQ,eAAe,CAAC;EACtF,MAAMC,OAAO,GAAGtC,kBAAkB,CAACG,eAAe,EAAE0B,GAAG,IAAIA,GAAG,CAACS,OAAO,CAAC;EAEvE;EACA,MAAMC,MAAM,GAAGvC,kBAAkB,CAACI,cAAc,EAAEyB,GAAG,IAAG;;IACtD,OAAO,UAAG,CAACW,YAAY,0CAAEf,EAAE,MAAKjB,SAAS,IAAI,UAAG,CAACgC,YAAY,0CAAEf,EAAE,MAAKA,EAAE;EAC1E,CAAC,CAAC;EAEF;EACA,IAAIgB,SAAS,gBAAoB9C,oBAACM,eAAe,OAAG;EACpD,IAAI6B,WAAW,EAAE;IACfW,SAAS,GAAGT,QAAQ,gBAAGrC,oBAACO,iBAAiB,OAAG,GAAG,EAAE;;EAGnD,MAAMwC,OAAO,GAAIC,KAAuC,IAAI;;IAC1D,IAAIxB,QAAQ,EAAE;MACZwB,KAAK,CAACC,cAAc,EAAE;MACtB;;IAGF;IACAP,eAAe,CAACX,UAAU,CAAC;IAE3B;IACA,IAAI,CAACI,WAAW,EAAE;MAChBQ,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAGK,KAAK,EAAE,KAAK,CAAC;;IAGzB;IACAP,YAAY,CAACO,KAAK,EAAEjB,UAAU,CAAC;IAE/B,WAAK,CAACgB,OAAO,+CAAbzB,KAAK,EAAW0B,KAAK,CAAC;EACxB,CAAC;EAED;EACAhD,KAAK,CAACkD,SAAS,CAAC,MAAK;IACnB,IAAIpB,EAAE,IAAIJ,SAAS,CAACyB,OAAO,EAAE;MAC3B,OAAOf,cAAc,CAACL,UAAU,EAAEL,SAAS,CAACyB,OAAO,CAAC;;EAExD,CAAC,EAAE,CAACrB,EAAE,EAAEC,UAAU,EAAEK,cAAc,CAAC,CAAC;EAEpC,MAAMgB,aAAa,GAAGjB,WAAW,GAC7B;IAAEkB,IAAI,EAAE,kBAAkB;IAAE,cAAc,EAAEhB;EAAQ,CAAE,GACtD;IAAEgB,IAAI,EAAE,QAAQ;IAAE,eAAe,EAAEhB;EAAQ,CAAE;EAEjD,OAAO;IACLiB,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXC,SAAS,EAAE;KACZ;IACDD,IAAI,EAAEtD,qBAAqB,CAAC,KAAK,EAAE;MACjCsB,GAAG,EAAEnB,aAAa,CAACmB,GAAG,EAAEG,SAAS,CAAC;MAClC,eAAe,EAAEF,QAAQ,GAAG,MAAM,GAAGX,SAAS;MAC9CiB,EAAE;MACF,GAAGsB,aAAa;MAChB,GAAG9B,KAAK;MACRyB;KACD,CAAC;IACFS,SAAS,EAAEtD,gBAAgB,CAACoB,KAAK,CAACkC,SAAS,EAAE;MAC3CC,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZ,aAAa,EAAE,MAAM;QACrB9C,QAAQ,EAAEkC;;KAEb,CAAC;IACFF,MAAM;IACNpB,QAAQ;IACRS,YAAY;IACZE,WAAW;IACXE;GACD;AACH,CAAC","names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sourceRoot":"../src/","sources":["packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    optionValue,\n  ]);\n\n  // context values\n  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"]}