@fluentui/react-combobox 9.16.18 → 9.17.0

package/lib/components/Dropdown/useDropdown.js

@@ -12,29 +12,26 @@ import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useButtonTriggerSlot } from './useButtonTriggerSlot';
 import { optionClassNames } from '../Option/useOptionStyles.styles';
 /**
- * Create the state required to render Dropdown.
- *
- * The returned state can be modified with hooks such as useDropdownStyles_unstable,
- * before being passed to renderDropdown_unstable.
+ * Create the base state required to render Dropdown, without design-only props.
  *
- * @param props - props from this instance of Dropdown
- * @param ref - reference to root HTMLElement of Dropdown
- */ export const useDropdown_unstable = (props, ref)=>{
+ * @param props - props from this instance of Dropdown (without appearance and size)
+ * @param ref - reference to root HTMLButtonElement of Dropdown
+ */ export const useDropdownBase_unstable = (props, ref)=>{
     'use no memo';
     var _state_clearButton;
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
-        supportsLabelFor: true,
-        supportsSize: true
+        supportsLabelFor: true
     });
     const { listboxRef: activeDescendantListboxRef, activeParentRef, controller: activeDescendantController } = useActiveDescendant({
         matchOption: (el)=>el.classList.contains(optionClassNames.root)
     });
-    const baseState = useComboboxBaseState({
+    const dropdownInternalState = useComboboxBaseState({
         ...props,
         activeDescendantController,
         freeform: false
     });
+    const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;
     const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;
     const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({
         props,
@@ -46,7 +43,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
     const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);
     const triggerRef = React.useRef(null);
     const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {
-        state: baseState,
+        state: dropdownInternalState,
         triggerRef,
         defaultProps: {
             children: props.children
@@ -65,7 +62,7 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
     });
     var _props_button;
     const trigger = useButtonTriggerSlot((_props_button = props.button) !== null && _props_button !== void 0 ? _props_button : {}, useMergedRefs(triggerRef, activeParentRef, ref), {
-        state: baseState,
+        state: dropdownInternalState,
         defaultProps: {
             type: 'button',
             // tabster navigation breaks if the button is disabled and tabIndex is 0
@@ -100,7 +97,6 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         clearButton: slot.optional(props.clearButton, {
             defaultProps: {
                 'aria-label': 'Clear selection',
-                children: /*#__PURE__*/ React.createElement(DismissIcon, null),
                 // Safari doesn't allow to focus an element with this
                 // when the element is not visible (display: none) we need to remove it to avoid tabster issues
                 tabIndex: showClearButton ? 0 : undefined,
@@ -111,9 +107,6 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
         }),
         expandIcon: slot.optional(props.expandIcon, {
             renderByDefault: true,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronDownIcon, null)
-            },
             elementType: 'span'
         }),
         placeholderVisible: !baseState.value && !!props.placeholder,
@@ -147,3 +140,31 @@ import { optionClassNames } from '../Option/useOptionStyles.styles';
     }
     return state;
 };
+/**
+ * Create the state required to render Dropdown.
+ *
+ * The returned state can be modified with hooks such as useDropdownStyles_unstable,
+ * before being passed to renderDropdown_unstable.
+ *
+ * @param props - props from this instance of Dropdown
+ * @param ref - reference to root HTMLElement of Dropdown
+ */ export const useDropdown_unstable = (props, ref)=>{
+    'use no memo';
+    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const baseState = useDropdownBase_unstable(baseProps, ref);
+    if (baseState.clearButton) {
+        var _baseState_clearButton;
+        var _children;
+        (_children = (_baseState_clearButton = baseState.clearButton).children) !== null && _children !== void 0 ? _children : _baseState_clearButton.children = /*#__PURE__*/ React.createElement(DismissIcon, null);
+    }
+    if (baseState.expandIcon) {
+        var _baseState_expandIcon;
+        var _children1;
+        (_children1 = (_baseState_expandIcon = baseState.expandIcon).children) !== null && _children1 !== void 0 ? _children1 : _baseState_expandIcon.children = /*#__PURE__*/ React.createElement(ChevronDownIcon, null);
+    }
+    return {
+        ...baseState,
+        appearance,
+        size
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsSize: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const baseState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: baseState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: baseState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: DropdownState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        children: <DismissIcon />,\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        children: <ChevronDownIcon />,\n      },\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdown_unstable","props","ref","state","supportsLabelFor","supportsSize","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","baseState","freeform","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useActiveDescendant } from '@fluentui/react-aria';\nimport { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport {\n  getPartitionedNativeProps,\n  mergeCallbacks,\n  useMergedRefs,\n  slot,\n  useEventCallback,\n  useOnClickOutside,\n} from '@fluentui/react-utilities';\nimport { useComboboxBaseState } from '../../utils/useComboboxBaseState';\nimport { useComboboxPositioning } from '../../utils/useComboboxPositioning';\nimport { Listbox } from '../Listbox/Listbox';\nimport type { DropdownBaseProps, DropdownBaseState, DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport { optionClassNames } from '../Option/useOptionStyles.styles';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\n\n/**\n * Create the base state required to render Dropdown, without design-only props.\n *\n * @param props - props from this instance of Dropdown (without appearance and size)\n * @param ref - reference to root HTMLButtonElement of Dropdown\n */\nexport const useDropdownBase_unstable = (\n  props: DropdownBaseProps,\n  ref: React.Ref<HTMLButtonElement>,\n): DropdownBaseState => {\n  'use no memo';\n\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props, { supportsLabelFor: true });\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller: activeDescendantController,\n  } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({\n    matchOption: el => el.classList.contains(optionClassNames.root),\n  });\n\n  const dropdownInternalState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });\n  const { appearance: _appearance, size: _size, freeform: _freeform, ...baseState } = dropdownInternalState;\n  const { clearable, clearSelection, disabled, hasFocus, multiselect, open, selectedOptions, setOpen } = baseState;\n\n  const { primary: triggerNativeProps, root: rootNativeProps } = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'button',\n    excludedPropNames: ['children'],\n  });\n\n  const [comboboxPopupRef, comboboxTargetRef] = useComboboxPositioning(props);\n\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const listbox = useListboxSlot(props.listbox, useMergedRefs(comboboxPopupRef, activeDescendantListboxRef), {\n    state: dropdownInternalState,\n    triggerRef,\n    defaultProps: {\n      children: props.children,\n    },\n  });\n\n  const { targetDocument } = useFluent();\n\n  useOnClickOutside({\n    element: targetDocument,\n    callback: event => setOpen(event as unknown as ComboboxOpenEvents, false),\n    refs: [triggerRef, comboboxPopupRef, comboboxTargetRef],\n    disabled: !open,\n  });\n\n  const trigger = useButtonTriggerSlot(props.button ?? {}, useMergedRefs(triggerRef, activeParentRef, ref), {\n    state: dropdownInternalState,\n    defaultProps: {\n      type: 'button',\n      // tabster navigation breaks if the button is disabled and tabIndex is 0\n      tabIndex: triggerNativeProps.disabled ? undefined : 0,\n      children: baseState.value || props.placeholder,\n      'aria-controls': open ? listbox?.id : undefined,\n      ...triggerNativeProps,\n    },\n    activeDescendantController,\n  });\n\n  const rootSlot = slot.always(props.root, {\n    defaultProps: {\n      'aria-owns': !props.inlinePopup && open ? listbox?.id : undefined,\n      children: props.children,\n      ...rootNativeProps,\n    },\n    elementType: 'div',\n  });\n  rootSlot.ref = useMergedRefs(rootSlot.ref, comboboxTargetRef);\n\n  const showClearButton = selectedOptions.length > 0 && !disabled && clearable && !multiselect;\n  const state: DropdownBaseState = {\n    components: { root: 'div', button: 'button', clearButton: 'button', expandIcon: 'span', listbox: Listbox },\n    root: rootSlot,\n    button: trigger,\n    listbox: open || hasFocus ? listbox : undefined,\n    clearButton: slot.optional(props.clearButton, {\n      defaultProps: {\n        'aria-label': 'Clear selection',\n        // Safari doesn't allow to focus an element with this\n        // when the element is not visible (display: none) we need to remove it to avoid tabster issues\n        tabIndex: showClearButton ? 0 : undefined,\n        type: 'button',\n      },\n      elementType: 'button',\n      renderByDefault: true,\n    }),\n    expandIcon: slot.optional(props.expandIcon, {\n      renderByDefault: true,\n      elementType: 'span',\n    }),\n    placeholderVisible: !baseState.value && !!props.placeholder,\n    showClearButton,\n    activeDescendantController,\n    ...baseState,\n  };\n\n  const onClearButtonClick = useEventCallback(\n    mergeCallbacks(state.clearButton?.onClick, (ev: React.MouseEvent<HTMLButtonElement>) => {\n      clearSelection(ev);\n      triggerRef.current?.focus();\n    }),\n  );\n\n  if (state.clearButton) {\n    state.clearButton.onClick = onClearButtonClick;\n  }\n\n  // Heads up! We don't support \"clearable\" in multiselect mode, so we should never display a slot\n  if (multiselect) {\n    state.clearButton = undefined;\n  }\n\n  if (process.env.NODE_ENV !== 'production') {\n    // eslint-disable-next-line react-hooks/rules-of-hooks -- \"process.env\" does not change in runtime\n    React.useEffect(() => {\n      if (clearable && multiselect) {\n        // eslint-disable-next-line no-console\n        console.error(`[@fluentui/react-combobox] \"clearable\" prop is not supported in multiselect mode.`);\n      }\n    }, [clearable, multiselect]);\n  }\n\n  return state;\n};\n\n/**\n * Create the state required to render Dropdown.\n *\n * The returned state can be modified with hooks such as useDropdownStyles_unstable,\n * before being passed to renderDropdown_unstable.\n *\n * @param props - props from this instance of Dropdown\n * @param ref - reference to root HTMLElement of Dropdown\n */\nexport const useDropdown_unstable = (props: DropdownProps, ref: React.Ref<HTMLButtonElement>): DropdownState => {\n  'use no memo';\n\n  const { appearance = 'outline', size = 'medium', ...baseProps } = props;\n  const baseState = useDropdownBase_unstable(baseProps, ref);\n\n  if (baseState.clearButton) {\n    baseState.clearButton.children ??= <DismissIcon />;\n  }\n\n  if (baseState.expandIcon) {\n    baseState.expandIcon.children ??= <ChevronDownIcon />;\n  }\n\n  return {\n    ...baseState,\n    appearance,\n    size,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","optionClassNames","useDropdownBase_unstable","props","ref","state","supportsLabelFor","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","el","classList","contains","root","dropdownInternalState","freeform","appearance","_appearance","size","_size","_freeform","baseState","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","rootNativeProps","primarySlotTagName","excludedPropNames","comboboxPopupRef","comboboxTargetRef","triggerRef","useRef","listbox","defaultProps","children","targetDocument","element","callback","event","refs","trigger","button","type","tabIndex","undefined","value","placeholder","id","rootSlot","always","inlinePopup","elementType","showClearButton","length","components","clearButton","expandIcon","optional","renderByDefault","placeholderVisible","onClearButtonClick","onClick","ev","current","focus","process","env","NODE_ENV","useEffect","console","error","useDropdown_unstable","baseProps"],"mappings":"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"}

package/lib/components/Option/index.js

@@ -1,4 +1,4 @@
 export { Option } from './Option';
 export { renderOption_unstable } from './renderOption';
-export { useOption_unstable } from './useOption';
+export { useOption_unstable, useOptionBase_unstable } from './useOption';
 export { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}
+{"version":3,"sources":["../src/components/Option/index.ts"],"sourcesContent":["export { Option } from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option.types';\nexport { renderOption_unstable } from './renderOption';\nexport { useOption_unstable, useOptionBase_unstable } from './useOption';\nexport { optionClassNames, useOptionStyles_unstable } from './useOptionStyles.styles';\n"],"names":["Option","renderOption_unstable","useOption_unstable","useOptionBase_unstable","optionClassNames","useOptionStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,WAAW;AAElC,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,kBAAkB,EAAEC,sBAAsB,QAAQ,cAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,2BAA2B"}

package/lib/components/Option/useOption.js

@@ -33,6 +33,26 @@ function getTextString(text, children) {
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
  */ export const useOption_unstable = (props, ref)=>{
+    'use no memo';
+    const state = useOptionBase_unstable(props, ref);
+    // check icon
+    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
+    if (state.multiselect) {
+        CheckIcon = state.selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';
+    }
+    if (state.checkIcon) {
+        var _state_checkIcon;
+        var _children;
+        (_children = (_state_checkIcon = state.checkIcon).children) !== null && _children !== void 0 ? _children : _state_checkIcon.children = CheckIcon;
+    }
+    return state;
+};
+/**
+ * Create the base state required to render Option.
+ *
+ * @param props - props from this instance of Option
+ * @param ref - reference to root HTMLElement of Option
+ */ export const useOptionBase_unstable = (props, ref)=>{
     const { children, disabled, text, value } = props;
     const optionRef = React.useRef(null);
     const optionText = getTextString(text, children);
@@ -61,11 +81,6 @@ function getTextString(text, children) {
     });
     const selectOption = useListboxContext_unstable((ctx)=>ctx.selectOption);
     const onOptionClick = useListboxContext_unstable((ctx)=>ctx.onOptionClick);
-    // check icon
-    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
-    if (multiselect) {
-        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';
-    }
     const onClick = (event)=>{
         var _props_onClick;
         if (disabled) {
@@ -116,8 +131,7 @@ function getTextString(text, children) {
         checkIcon: slot.optional(props.checkIcon, {
             renderByDefault: true,
             defaultProps: {
-                'aria-hidden': 'true',
-                children: CheckIcon
+                'aria-hidden': 'true'
             },
             elementType: 'span'
         }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\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    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\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: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","multiselect","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACjG,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,wBAAwB;AAC3E,SAASC,0BAA0B,QAAQ,gCAAgC;AAI3E,SAASC,cAAcC,IAAwB,EAAEC,QAAyB;IACxE,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT;IAEA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBd,MAAMe,QAAQ,CAACC,OAAO,CAACL,UAAUM,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMO,qBAAqB,CAACC,OAAoBC;IACrD,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYzB,MAAM0B,MAAM,CAAc;IAC5C,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAME,KAAK3B,MAAM,iBAAiBmB,MAAMQ,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAa9B,MAAM+B,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIN;YAAUb,MAAMiB;YAAYH,OAAOI;QAAY,CAAA,GAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEI,YAAYC,0BAA0B,EAAE,GAAG5B;IACnD,MAAM6B,cAAc1B,2BAA2B2B,CAAAA,MAAOA,IAAID,WAAW;IACrE,MAAME,iBAAiB5B,2BAA2B2B,CAAAA,MAAOA,IAAIC,cAAc;IAC3E,MAAMC,WAAW7B,2BAA2B2B,CAAAA;QAC1C,MAAMG,kBAAkBH,IAAIG,eAAe;QAE3C,OAAOV,gBAAgBhB,aAAa0B,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMZ,iBAAiBhB;IACvF;IACA,MAAM6B,eAAejC,2BAA2B2B,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBlC,2BAA2B2B,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,aAAa;IACb,IAAIC,0BAA6B,oBAACrC;IAClC,IAAI4B,aAAa;QACfS,YAAYN,yBAAW,oBAAC9B,2BAAuB;IACjD;IAEA,MAAMqC,UAAU,CAACC;YAYfxB;QAXA,IAAIE,UAAU;YACZsB,MAAMC,cAAc;YACpB;QACF;QAEAb,2BAA2Bc,KAAK,CAAClB;QAEjC,0BAA0B;QAC1BY,aAAaI,OAAOf;QAEpBY,cAAcG;SACdxB,iBAAAA,MAAMuB,OAAO,cAAbvB,qCAAAA,oBAAAA,OAAgBwB;IAClB;IAEA,oCAAoC;IACpC7C,MAAMgD,SAAS,CAAC;QACd,IAAInB,MAAMJ,UAAUwB,OAAO,EAAE;YAC3B,OAAOb,eAAeN,YAAYL,UAAUwB,OAAO;QACrD;IACF,GAAG;QAACpB;QAAIC;QAAYM;KAAe;IAEnC,MAAMc,gBAAgBhB,cAClB;QAAEiB,MAAM;QAAoB,gBAAgBd;IAAS,IACrD;QAAEc,MAAM;QAAU,iBAAiBd;IAAS;IAEhD,OAAO;QACLe,YAAY;YACVC,MAAM;YACNC,WAAW;QACb;QACAD,MAAMjD,KAAKmD,MAAM,CACftD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKnB,cAAcmB,KAAKG;YACxB,iBAAiBF,WAAY,SAAmBX;YAChDiB;YACA,GAAGqB,aAAa;YAChB,GAAG7B,KAAK;YACRuB;QACF,IACA;YAAEY,aAAa;QAAM;QAEvBF,WAAWlD,KAAKqD,QAAQ,CAACpC,MAAMiC,SAAS,EAAE;YACxCI,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;gBACfhD,UAAUgC;YACZ;YACAa,aAAa;QACf;QACAjC;QACAW;QACAG;QACA,iBAAiB;QACjBuB,cAAc;QACdC,QAAQ;IACV;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } 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  'use no memo';\n\n  const state = useOptionBase_unstable(props, ref);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (state.multiselect) {\n    CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n  }\n\n  if (state.checkIcon) {\n    state.checkIcon.children ??= CheckIcon;\n  }\n\n  return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\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: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}

package/lib/index.js

@@ -4,9 +4,9 @@ export { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxC
 export { useComboboxContextValues } from './contexts/useComboboxContextValues';
 export { useListboxContextValues } from './contexts/useListboxContextValues';
 export { Listbox, listboxClassNames, renderListbox_unstable, useListboxStyles_unstable, useListbox_unstable } from './Listbox';
-export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable } from './Option';
-export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useCombobox_unstable } from './Combobox';
-export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdown_unstable } from './Dropdown';
+export { Option, optionClassNames, renderOption_unstable, useOptionStyles_unstable, useOption_unstable, useOptionBase_unstable } from './Option';
+export { Combobox, comboboxClassNames, renderCombobox_unstable, useComboboxStyles_unstable, useComboboxBase_unstable, useCombobox_unstable } from './Combobox';
+export { Dropdown, dropdownClassNames, renderDropdown_unstable, useDropdownStyles_unstable, useDropdownBase_unstable, useDropdown_unstable } from './Dropdown';
 export { OptionGroup, optionGroupClassNames, renderOptionGroup_unstable, useOptionGroupStyles_unstable, useOptionGroup_unstable } from './OptionGroup';
 export { useComboboxFilter } from './hooks/useComboboxFilter';
 // internals splitting the combobox logic into state hook and slot hooks

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot"],"mappings":"AAAA,4DAA4D;AAC5D,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,4BAA4B;AAExF,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,QACb,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,aAAa;AASpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,4BAA4B;AAE9D,wEAAwE;AACxE,SAASC,oBAAoB,QAAQ,+BAA+B;AACpE,SAASC,oBAAoB,QAAQ,6CAA6C;AAClF,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,cAAc,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider, useListboxContext_unstable } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n  useOptionBase_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useComboboxBase_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdownBase_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownBaseHookProps,\n  DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\nexport type { OptionOnSelectData, SelectionEvents } from './Selection';\n\nexport { useComboboxFilter } from './hooks/useComboboxFilter';\n\n// internals splitting the combobox logic into state hook and slot hooks\nexport { useComboboxBaseState } from './utils/useComboboxBaseState';\nexport { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot';\nexport { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';\nexport { useListboxSlot } from './utils/useListboxSlot';\nexport type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';\n"],"names":["ComboboxProvider","ListboxProvider","useListboxContext_unstable","useComboboxContextValues","useListboxContextValues","Listbox","listboxClassNames","renderListbox_unstable","useListboxStyles_unstable","useListbox_unstable","Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable","Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable","Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable","OptionGroup","optionGroupClassNames","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useOptionGroup_unstable","useComboboxFilter","useComboboxBaseState","useButtonTriggerSlot","useInputTriggerSlot","useListboxSlot"],"mappings":"AAAA,4DAA4D;AAC5D,SAASA,gBAAgB,QAAQ,6BAA6B;AAE9D,SAASC,eAAe,EAAEC,0BAA0B,QAAQ,4BAA4B;AAExF,SAASC,wBAAwB,QAAQ,sCAAsC;AAC/E,SAASC,uBAAuB,QAAQ,qCAAqC;AAC7E,SACEC,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,YAAY;AAEnB,SACEC,MAAM,EACNC,gBAAgB,EAChBC,qBAAqB,EACrBC,wBAAwB,EACxBC,kBAAkB,EAClBC,sBAAsB,QACjB,WAAW;AAElB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,aAAa;AAWpB,SACEC,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,wBAAwB,EACxBC,oBAAoB,QACf,aAAa;AAWpB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,gBAAgB;AAIvB,SAASC,iBAAiB,QAAQ,4BAA4B;AAE9D,wEAAwE;AACxE,SAASC,oBAAoB,QAAQ,+BAA+B;AACpE,SAASC,oBAAoB,QAAQ,6CAA6C;AAClF,SAASC,mBAAmB,QAAQ,4CAA4C;AAChF,SAASC,cAAc,QAAQ,yBAAyB"}

package/lib/utils/useComboboxBaseState.js

@@ -5,8 +5,9 @@ import { useControllableState, useEventCallback, useFirstMount } from '@fluentui
 import { useOptionCollection } from '../utils/useOptionCollection';
 import { useSelection } from '../utils/useSelection';
 /**
- * @internal
  * State shared between Combobox and Dropdown components
+ *
+ * @internal
  */ export const useComboboxBaseState = (props)=>{
     'use no memo';
     const { appearance = 'outline', disableAutoFocus, children, clearable = false, editable = false, inlinePopup = false, mountNode = undefined, multiselect, onOpenChange, size = 'medium', activeDescendantController, freeform = false, disabled = false, onActiveOptionChange = null } = props;

package/lib/utils/useComboboxBaseState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * @internal\n * State shared between Combobox and Dropdown components\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  'use no memo';\n\n  const {\n    appearance = 'outline',\n    disableAutoFocus,\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n    onActiveOptionChange = null,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open && !disableAutoFocus && !activeDescendantController.active()) {\n      activeDescendantController.first();\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n    const nextOption = optionCollection.getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n    onActiveDescendantChange,\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}
+{"version":3,"sources":["../src/utils/useComboboxBaseState.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { useControllableState, useEventCallback, useFirstMount } from '@fluentui/react-utilities';\nimport { ActiveDescendantChangeEvent, ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { useOptionCollection } from '../utils/useOptionCollection';\nimport { OptionValue } from '../utils/OptionCollection.types';\nimport { useSelection } from '../utils/useSelection';\nimport type { ComboboxBaseProps, ComboboxBaseOpenEvents, ComboboxBaseState } from './ComboboxBase.types';\nimport { SelectionEvents } from './Selection.types';\n\n/**\n * State shared between Combobox and Dropdown components\n *\n * @internal\n */\nexport const useComboboxBaseState = (\n  props: ComboboxBaseProps & {\n    children?: React.ReactNode;\n    editable?: boolean;\n    disabled?: boolean;\n    freeform?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  },\n): ComboboxBaseState => {\n  'use no memo';\n\n  const {\n    appearance = 'outline',\n    disableAutoFocus,\n    children,\n    clearable = false,\n    editable = false,\n    inlinePopup = false,\n    mountNode = undefined,\n    multiselect,\n    onOpenChange,\n    size = 'medium',\n    activeDescendantController,\n    freeform = false,\n    disabled = false,\n    onActiveOptionChange = null,\n  } = props;\n\n  const optionCollection = useOptionCollection();\n  const { getOptionsMatchingValue } = optionCollection;\n\n  const { getOptionById } = optionCollection;\n  const getActiveOption = React.useCallback(() => {\n    const activeOptionId = activeDescendantController.active();\n    return activeOptionId ? getOptionById(activeOptionId) : undefined;\n  }, [activeDescendantController, getOptionById]);\n\n  // Keeping some kind of backwards compatible functionality here\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_activeOption = getActiveOption();\n  // eslint-disable-next-line @typescript-eslint/naming-convention\n  const UNSAFE_setActiveOption = React.useCallback(\n    (option: OptionValue | undefined | ((prev: OptionValue | undefined) => OptionValue | undefined)) => {\n      let nextOption: OptionValue | undefined = undefined;\n      if (typeof option === 'function') {\n        const activeOption = getActiveOption();\n        nextOption = option(activeOption);\n      }\n\n      if (nextOption) {\n        activeDescendantController.focus(nextOption.id);\n      } else {\n        activeDescendantController.blur();\n      }\n    },\n    [activeDescendantController, getActiveOption],\n  );\n\n  // track whether keyboard focus outline should be shown\n  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move\n  const [focusVisible, setFocusVisible] = React.useState(false);\n\n  // track focused state to conditionally render collapsed listbox\n  // when the trigger is focused - the listbox should but hidden until the open state is changed\n  const [hasFocus, setHasFocus] = React.useState(false);\n\n  const ignoreNextBlur = React.useRef(false);\n\n  // calculate value based on props, internal value changes, and selected options\n  const isFirstMount = useFirstMount();\n  const [controllableValue, setValue] = useControllableState({\n    state: props.value,\n    initialState: undefined,\n  });\n\n  const { selectedOptions, selectOption: baseSelectOption, clearSelection } = useSelection(props);\n\n  // reset any typed value when an option is selected\n  const selectOption = React.useCallback(\n    (ev: SelectionEvents, option: OptionValue) => {\n      ReactDOM.unstable_batchedUpdates(() => {\n        setValue(undefined);\n        baseSelectOption(ev, option);\n      });\n    },\n    [setValue, baseSelectOption],\n  );\n\n  const value = React.useMemo(() => {\n    // don't compute the value if it is defined through props or setValue,\n    if (controllableValue !== undefined) {\n      return controllableValue;\n    }\n\n    // handle defaultValue here, so it is overridden by selection\n    if (isFirstMount && props.defaultValue !== undefined) {\n      return props.defaultValue;\n    }\n\n    const selectedOptionsText = getOptionsMatchingValue(optionValue => {\n      return selectedOptions.includes(optionValue);\n    }).map(option => option.text);\n\n    if (multiselect) {\n      // editable inputs should not display multiple selected options in the input as text\n      return editable ? '' : selectedOptionsText.join(', ');\n    }\n\n    return selectedOptionsText[0];\n\n    // do not change value after isFirstMount changes,\n    // we do not want to accidentally override defaultValue on a second render\n    // unless another value is intentionally set\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [controllableValue, editable, getOptionsMatchingValue, multiselect, selectedOptions]);\n\n  // Handle open state, which is shared with options in context\n  const [open, setOpenState] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const setOpen = React.useCallback(\n    (event: ComboboxBaseOpenEvents, newState: boolean) => {\n      if (disabled) {\n        return;\n      }\n      onOpenChange?.(event, { open: newState });\n      ReactDOM.unstable_batchedUpdates(() => {\n        if (!newState && !freeform) {\n          setValue(undefined);\n        }\n        setOpenState(newState);\n      });\n    },\n    [onOpenChange, setOpenState, setValue, freeform, disabled],\n  );\n\n  // update active option based on change in open state\n  React.useEffect(() => {\n    if (open) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === selectedOptions[0]).pop();\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n    } else {\n      activeDescendantController.blur();\n    }\n    // this should only be run in response to changes in the open state\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, activeDescendantController]);\n\n  // Fallback focus when children are updated in an open popover results in no item being focused\n  React.useEffect(() => {\n    if (open && !disableAutoFocus && !activeDescendantController.active()) {\n      activeDescendantController.first();\n    }\n    // this should only be run in response to changes in the open state or children\n  }, [open, children, disableAutoFocus, activeDescendantController, getOptionById]);\n\n  const onActiveDescendantChange = useEventCallback((event: ActiveDescendantChangeEvent) => {\n    const previousOption = event.detail.previousId ? optionCollection.getOptionById(event.detail.previousId) : null;\n    const nextOption = optionCollection.getOptionById(event.detail.id);\n    onActiveOptionChange?.(event, { event, type: 'change', previousOption, nextOption });\n  });\n\n  return {\n    ...optionCollection,\n    freeform,\n    disabled,\n    selectOption,\n    clearSelection,\n    selectedOptions,\n    activeOption: UNSAFE_activeOption,\n    appearance,\n    clearable,\n    focusVisible,\n    ignoreNextBlur,\n    inlinePopup,\n    mountNode,\n    open,\n    hasFocus,\n    setActiveOption: UNSAFE_setActiveOption,\n    setFocusVisible,\n    setHasFocus,\n    setOpen,\n    setValue,\n    size,\n    value,\n    multiselect,\n    onOptionClick: useEventCallback((e: React.MouseEvent<HTMLElement>) => {\n      if (!multiselect) {\n        setOpen(e, false);\n      }\n    }),\n    onActiveDescendantChange,\n  };\n};\n"],"names":["React","ReactDOM","useControllableState","useEventCallback","useFirstMount","useOptionCollection","useSelection","useComboboxBaseState","props","appearance","disableAutoFocus","children","clearable","editable","inlinePopup","mountNode","undefined","multiselect","onOpenChange","size","activeDescendantController","freeform","disabled","onActiveOptionChange","optionCollection","getOptionsMatchingValue","getOptionById","getActiveOption","useCallback","activeOptionId","active","UNSAFE_activeOption","UNSAFE_setActiveOption","option","nextOption","activeOption","focus","id","blur","focusVisible","setFocusVisible","useState","hasFocus","setHasFocus","ignoreNextBlur","useRef","isFirstMount","controllableValue","setValue","state","value","initialState","selectedOptions","selectOption","baseSelectOption","clearSelection","ev","unstable_batchedUpdates","useMemo","defaultValue","selectedOptionsText","optionValue","includes","map","text","join","open","setOpenState","defaultState","defaultOpen","setOpen","event","newState","useEffect","length","selectedOption","v","pop","first","onActiveDescendantChange","previousOption","detail","previousId","type","setActiveOption","onOptionClick","e"],"mappings":"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"}

package/lib-commonjs/Combobox.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderCombobox_unstable: function() {
         return _index.renderCombobox_unstable;
     },
+    useComboboxBase_unstable: function() {
+        return _index.useComboboxBase_unstable;
+    },
     useComboboxStyles_unstable: function() {
         return _index.useComboboxStyles_unstable;
     },

package/lib-commonjs/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useCombobox_unstable"],"mappings":";;;;;;;;;;;;eAUEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}
+{"version":3,"sources":["../src/Combobox.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './components/Combobox/index';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useComboboxBase_unstable,\n  useCombobox_unstable,\n} from './components/Combobox/index';\n"],"names":["Combobox","comboboxClassNames","renderCombobox_unstable","useComboboxStyles_unstable","useComboboxBase_unstable","useCombobox_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,8BAA8B"}

package/lib-commonjs/Dropdown.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderDropdown_unstable: function() {
         return _index.renderDropdown_unstable;
     },
+    useDropdownBase_unstable: function() {
+        return _index.useDropdownBase_unstable;
+    },
     useDropdownStyles_unstable: function() {
         return _index.useDropdownStyles_unstable;
     },

package/lib-commonjs/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdown_unstable"],"mappings":";;;;;;;;;;;;eAUEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}
+{"version":3,"sources":["../src/Dropdown.ts"],"sourcesContent":["export type {\n  ActiveOptionChangeData,\n  DropdownBaseHookProps,\n  DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './components/Dropdown/index';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdownBase_unstable,\n  useDropdown_unstable,\n} from './components/Dropdown/index';\n"],"names":["Dropdown","dropdownClassNames","renderDropdown_unstable","useDropdownStyles_unstable","useDropdownBase_unstable","useDropdown_unstable"],"mappings":";;;;;;;;;;;;eAYEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eAEvBE,+BAAwB;;;eADxBD,iCAA0B;;;eAE1BE,2BAAoB;;;uBACf,8BAA8B"}

package/lib-commonjs/Option.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderOption_unstable: function() {
         return _index.renderOption_unstable;
     },
+    useOptionBase_unstable: function() {
+        return _index.useOptionBase_unstable;
+    },
     useOptionStyles_unstable: function() {
         return _index.useOptionStyles_unstable;
     },

package/lib-commonjs/Option.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eACrBC,+BAAwB;;;eACxBC,yBAAkB;;;uBACb,4BAA4B"}
+{"version":3,"sources":["../src/Option.ts"],"sourcesContent":["export type { OptionProps, OptionSlots, OptionState } from './components/Option/index';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n  useOptionBase_unstable,\n} from './components/Option/index';\n"],"names":["Option","optionClassNames","renderOption_unstable","useOptionStyles_unstable","useOption_unstable","useOptionBase_unstable"],"mappings":";;;;;;;;;;;;eAEEA,aAAM;;;eACNC,uBAAgB;;;eAChBC,4BAAqB;;;eAGrBG,6BAAsB;;;eAFtBF,+BAAwB;;;eACxBC,yBAAkB;;;uBAEb,4BAA4B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Combobox/Combobox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type {\n  ActiveOptionChangeData as ComboboxBaseActiveOptionChangeData,\n  ComboboxBaseContextValues,\n  ComboboxBaseOpenChangeData,\n  ComboboxBaseOpenEvents,\n  ComboboxBaseProps,\n  ComboboxBaseState,\n} from '../../utils/ComboboxBase.types';\nimport { Listbox } from '../Listbox/Listbox';\n\nexport type ComboboxSlots = {\n  /** The root combobox slot */\n  root: NonNullable<Slot<'div'>>;\n\n  /** The dropdown arrow icon */\n  expandIcon?: Slot<'span'>;\n\n  /** The dropdown clear icon */\n  clearIcon?: Slot<'span'>;\n\n  /** The primary slot, an input with role=\"combobox\" */\n  input: NonNullable<Slot<'input'>>;\n\n  /** The dropdown listbox slot */\n  listbox?: Slot<typeof Listbox>;\n};\n\n/**\n * Combobox Props\n */\nexport type ComboboxProps = Omit<ComponentProps<Partial<ComboboxSlots>, 'input'>, 'children' | 'size'> &\n  ComboboxBaseProps & {\n    freeform?: boolean;\n    /**\n     * The primary slot, `<input>`, does not support children so we need to explicitly include it here.\n     */\n    children?: React.ReactNode;\n  };\n\n/**\n * Combobox Props without design-only props.\n */\nexport type BaseComboboxProps = DistributiveOmit<ComboboxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxState = ComponentState<ComboboxSlots> &\n  ComboboxBaseState & {\n    showClearIcon?: boolean;\n    activeDescendantController: ActiveDescendantImperativeRef;\n  };\n\n/**\n * State used in rendering Combobox, without design-only state.\n */\nexport type BaseComboboxState = DistributiveOmit<ComboboxState, 'appearance' | 'size'>;\n\n/* Export types defined in ComboboxBase */\nexport type ComboboxContextValues = ComboboxBaseContextValues;\nexport type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;\nexport type ComboboxOpenEvents = ComboboxBaseOpenEvents;\nexport type ActiveOptionChangeData = ComboboxBaseActiveOptionChangeData;\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

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

@@ -18,6 +18,9 @@ _export(exports, {
     renderCombobox_unstable: function() {
         return _renderCombobox.renderCombobox_unstable;
     },
+    useComboboxBase_unstable: function() {
+        return _useCombobox.useComboboxBase_unstable;
+    },
     useComboboxStyles_unstable: function() {
         return _useComboboxStylesstyles.useComboboxStyles_unstable;
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAYRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAXJ,aAAa;gCAUE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}
+{"version":3,"sources":["../src/components/Combobox/index.ts"],"sourcesContent":["export { Combobox } from './Combobox';\nexport type {\n  ActiveOptionChangeData,\n  BaseComboboxProps,\n  BaseComboboxState,\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox.types';\nexport { renderCombobox_unstable } from './renderCombobox';\nexport { useComboboxBase_unstable, useCombobox_unstable } from './useCombobox';\nexport { comboboxClassNames, useComboboxStyles_unstable } from './useComboboxStyles.styles';\n"],"names":["Combobox","renderCombobox_unstable","useComboboxBase_unstable","useCombobox_unstable","comboboxClassNames","useComboboxStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAcRI,2CAAkB;;;eAFlBH,uCAAuB;;;eACvBC,qCAAwB;;;eACJG,mDAA0B;;;eADpBF,iCAAoB;;;0BAb9B,aAAa;gCAYE,mBAAmB;6BACI,gBAAgB;yCAChB,6BAA6B"}

package/lib-commonjs/components/Combobox/renderCombobox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, ComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: ComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,iCAAiC;gCAEjC,gCAAgC;AAKzD,gCAAgC,CAACC,OAAsBC;QAC5DL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,0CAAAA,EAAAA;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,+BAAAA,EAAAA;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,WAAA,OAAA,gBAAA,EAACR,gCAAAA,CAAgBS,QAAQ,EAAA;oBAACH,OAAOF,cAAcM,QAAQ;;0CACrD,eAAA,EAACP,MAAMQ,KAAK,EAAA,CAAA;wBACXR,MAAMS,SAAS,IAAA,WAAA,GAAI,mBAAA,EAACT,MAAMS,SAAS,EAAA,CAAA;wBACnCT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,GAAA,WAAA,OAChB,eAAA,EAACX,MAAMK,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACX,mBAAAA,EAAAA;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACZ,MAAMK,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["../src/components/Combobox/renderCombobox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { Portal } from '@fluentui/react-portal';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { ComboboxContextValues, BaseComboboxState, ComboboxSlots } from './Combobox.types';\nimport { ListboxProvider } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Combobox\n */\nexport const renderCombobox_unstable = (state: BaseComboboxState, contextValues: ComboboxContextValues): JSXElement => {\n  assertSlots<ComboboxSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxProvider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.input />\n            {state.clearIcon && <state.clearIcon />}\n            {state.expandIcon && <state.expandIcon />}\n            {state.listbox &&\n              (state.inlinePopup ? (\n                <state.listbox />\n              ) : (\n                <Portal mountNode={state.mountNode}>\n                  <state.listbox />\n                </Portal>\n              ))}\n            {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          </ComboboxContext.Provider>\n        </ListboxProvider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","ActiveDescendantContextProvider","assertSlots","ComboboxContext","ListboxProvider","renderCombobox_unstable","state","contextValues","root","value","activeDescendant","listbox","Provider","combobox","input","clearIcon","expandIcon","inlinePopup","mountNode"],"mappings":";;;;+BAcaK;;;;;;4BAbb,iCAAiD;6BAC1B,yBAAyB;2BACA,uBAAuB;gCAE3C,4BAA4B;iCAExB,iCAAiC;gCAEjC,gCAAgC;AAKzD,gCAAgC,CAACC,OAA0BC;QAChEL,2BAAAA,EAA2BI;IAE3B,OAAA,WAAA,OACE,eAAA,EAACA,MAAME,IAAI,EAAA;kBACT,WAAA,OAAA,eAAA,EAACP,0CAAAA,EAAAA;YAAgCQ,OAAOF,cAAcG,gBAAgB;sBACpE,WAAA,OAAA,eAAA,EAACN,+BAAAA,EAAAA;gBAAgBK,OAAOF,cAAcI,OAAO;0BAE3C,WAAA,OAAA,gBAAA,EAACR,gCAAAA,CAAgBS,QAAQ,EAAA;oBAACH,OAAOF,cAAcM,QAAQ;;0CACrD,eAAA,EAACP,MAAMQ,KAAK,EAAA,CAAA;wBACXR,MAAMS,SAAS,IAAA,WAAA,GAAI,mBAAA,EAACT,MAAMS,SAAS,EAAA,CAAA;wBACnCT,MAAMU,UAAU,IAAA,WAAA,OAAI,eAAA,EAACV,MAAMU,UAAU,EAAA,CAAA;wBACrCV,MAAMK,OAAO,IACXL,CAAAA,MAAMW,WAAW,GAAA,WAAA,OAChB,eAAA,EAACX,MAAMK,OAAO,EAAA,CAAA,KAAA,WAAA,OAEd,eAAA,EAACX,mBAAAA,EAAAA;4BAAOkB,WAAWZ,MAAMY,SAAS;sCAChC,WAAA,OAAA,eAAA,EAACZ,MAAMK,OAAO,EAAA,CAAA;2BAElB;;;;;;AAOd,EAAE"}