@fluentui/react-combobox 9.17.3 → 9.17.5

package/lib/components/Combobox/useInputTriggerSlot.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport type { ComboboxProps } from '../Combobox/Combobox.types';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport type { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    // eslint-disable-next-line react-hooks/immutability\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Combobox/useInputTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport { mergeCallbacks, useEventCallback } from '@fluentui/react-utilities';\nimport type { ExtractSlotProps, Slot, SlotComponentType } from '@fluentui/react-utilities';\nimport { ArrowLeft, ArrowRight } from '@fluentui/keyboard-keys';\nimport type { ComboboxProps } from '../Combobox/Combobox.types';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport type { ComboboxBaseState } from '../../utils/ComboboxBase.types';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UsedComboboxState = UseTriggerSlotState &\n  Pick<ComboboxBaseState, 'value' | 'setValue' | 'selectedOptions' | 'clearSelection' | 'getOptionById'>;\n\ntype UseInputTriggerSlotOptions = {\n  state: UsedComboboxState;\n  freeform: boolean | undefined;\n  defaultProps?: Partial<ComboboxProps>;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useInputTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useInputTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'input'>>,\n  ref: React.Ref<HTMLInputElement>,\n  options: UseInputTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'input'>>> {\n  const {\n    state: {\n      open,\n      value,\n      selectOption,\n      setValue,\n      multiselect,\n      selectedOptions,\n      clearSelection,\n      getOptionById,\n      setOpen,\n    },\n    freeform,\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    // handle selection and updating value if freeform is false\n    if (!open && !freeform) {\n      const activeOptionId = activeDescendantController.active();\n      const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n      // select matching option, if the value fully matches\n      if (value && activeOption && value.trim().toLowerCase() === activeOption?.text.toLowerCase()) {\n        selectOption(event, activeOption);\n      }\n\n      // reset typed value when the input loses focus while collapsed, unless freeform is true\n      setValue(undefined);\n    }\n  };\n\n  const getOptionFromInput = (inputValue: string): OptionValue | undefined => {\n    const searchString = inputValue?.trim().toLowerCase();\n\n    if (!searchString || searchString.length === 0) {\n      activeDescendantController.blur();\n      return;\n    }\n\n    const matcher = (optionText: string) => optionText.toLowerCase().indexOf(searchString) === 0;\n    const match = activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n\n    if (!match) {\n      activeDescendantController.blur();\n      return undefined;\n    }\n\n    return getOptionById(match);\n  };\n\n  // update value and active option based on input\n  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const inputValue = event.target.value;\n    // update uncontrolled value\n    setValue(inputValue);\n\n    // handle updating active option based on input\n    const matchingOption = getOptionFromInput(inputValue);\n\n    // clear selection for single-select if the input value no longer matches the selection\n    if (!multiselect && selectedOptions.length === 1 && (inputValue.length < 1 || !matchingOption)) {\n      clearSelection(event);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'input',\n    activeDescendantController,\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onChange = mergeCallbacks(trigger.onChange, onChange);\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onBlur = mergeCallbacks(trigger.onBlur, onBlur);\n\n  // NVDA and JAWS have bugs that suppress reading the input value text when aria-activedescendant is set\n  // To prevent this, we clear the HTML attribute (but save the state) when a user presses left/right arrows\n  // ref: https://github.com/microsoft/fluentui/issues/26359#issuecomment-1397759888\n  const [hideActiveDescendant, setHideActiveDescendant] = React.useState(false);\n  // save the typing vs. navigating options state, as the space key should behave differently in each case\n  // we do not want to update the combobox when this changes, just save the value between renders\n  const isTyping = React.useRef(false);\n\n  /**\n   * Freeform combobox should not select\n   */\n  const defaultOnKeyDown = trigger.onKeyDown;\n  const onKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (!open && getDropdownActionFromKey(event) === 'Type') {\n      setOpen(event, true);\n    }\n\n    // clear activedescendant when moving the text insertion cursor\n    if (event.key === ArrowLeft || event.key === ArrowRight) {\n      setHideActiveDescendant(true);\n    } else {\n      setHideActiveDescendant(false);\n    }\n\n    // update typing state to true if the user is typing\n    const action = getDropdownActionFromKey(event, { open, multiselect });\n    if (action === 'Type') {\n      isTyping.current = true;\n    }\n    // otherwise, update the typing state to false if opening or navigating dropdown options\n    // other actions, like closing the dropdown, should not impact typing state.\n    else if (\n      (action === 'Open' && event.key !== ' ') ||\n      action === 'Next' ||\n      action === 'Previous' ||\n      action === 'First' ||\n      action === 'Last' ||\n      action === 'PageUp' ||\n      action === 'PageDown'\n    ) {\n      isTyping.current = false;\n    }\n\n    // allow space to insert a character if freeform & the last action was typing, or if the popup is closed\n    if ((isTyping.current || !open) && event.key === ' ') {\n      triggerFromProps?.onKeyDown?.(event);\n      return;\n    }\n\n    defaultOnKeyDown?.(event);\n  });\n\n  // eslint-disable-next-line react-hooks/immutability\n  trigger.onKeyDown = onKeyDown;\n\n  if (hideActiveDescendant) {\n    // eslint-disable-next-line react-hooks/immutability\n    trigger['aria-activedescendant'] = undefined;\n  }\n\n  return trigger;\n}\n"],"names":["React","mergeCallbacks","useEventCallback","ArrowLeft","ArrowRight","useTriggerSlot","getDropdownActionFromKey","useInputTriggerSlot","triggerFromProps","ref","options","state","open","value","selectOption","setValue","multiselect","selectedOptions","clearSelection","getOptionById","setOpen","freeform","defaultProps","activeDescendantController","onBlur","event","activeOptionId","active","activeOption","trim","toLowerCase","text","undefined","getOptionFromInput","inputValue","searchString","length","blur","matcher","optionText","indexOf","match","find","id","option","onChange","target","matchingOption","trigger","elementType","hideActiveDescendant","setHideActiveDescendant","useState","isTyping","useRef","defaultOnKeyDown","onKeyDown","key","action","current"],"mappings":"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"}

package/lib/components/Dropdown/Dropdown.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useDropdown_unstable } from './useDropdown';
-import { renderDropdown_unstable } from './renderDropdown';
-import { useDropdownStyles_unstable } from './useDropdownStyles.styles';
-import { useComboboxContextValues } from '../../contexts/useComboboxContextValues';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useDropdown_unstable } from "./useDropdown.js";
+import { renderDropdown_unstable } from "./renderDropdown.js";
+import { useDropdownStyles_unstable } from "./useDropdownStyles.styles.js";
+import { useComboboxContextValues } from "../../contexts/useComboboxContextValues.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Dropdown component: a selection control that allows users to choose from a set of possible options
  */ export const Dropdown = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAExE,SAASC,wBAAwB,QAAQ,0CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useDropdown_unstable } from './useDropdown';\nimport { renderDropdown_unstable } from './renderDropdown';\nimport { useDropdownStyles_unstable } from './useDropdownStyles.styles';\nimport type { DropdownProps } from './Dropdown.types';\nimport { useComboboxContextValues } from '../../contexts/useComboboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Dropdown component: a selection control that allows users to choose from a set of possible options\n */\nexport const Dropdown: ForwardRefComponent<DropdownProps> = React.forwardRef((props, ref) => {\n  const state = useDropdown_unstable(props, ref);\n  const contextValues = useComboboxContextValues(state);\n\n  useDropdownStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDropdownStyles_unstable')(state);\n\n  return renderDropdown_unstable(state, contextValues);\n});\n\nDropdown.displayName = 'Dropdown';\n"],"names":["React","useDropdown_unstable","renderDropdown_unstable","useDropdownStyles_unstable","useComboboxContextValues","useCustomStyleHook_unstable","Dropdown","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B;AAExE,SAASC,wBAAwB,QAAQ,6CAA0C;AAEnF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,yBAA+CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnF,MAAMC,QAAQT,qBAAqBO,OAAOC;IAC1C,MAAME,gBAAgBP,yBAAyBM;IAE/CP,2BAA2BO;IAE3BL,4BAA4B,8BAA8BK;IAE1D,OAAOR,wBAAwBQ,OAAOC;AACxC,GAAG;AAEHL,SAASM,WAAW,GAAG"}

package/lib/components/Dropdown/index.js

@@ -1,4 +1,4 @@
-export { Dropdown } from './Dropdown';
-export { renderDropdown_unstable } from './renderDropdown';
-export { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';
-export { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';
+export { Dropdown } from "./Dropdown.js";
+export { renderDropdown_unstable } from "./renderDropdown.js";
+export { useDropdownBase_unstable, useDropdown_unstable } from "./useDropdown.js";
+export { dropdownClassNames, useDropdownStyles_unstable } from "./useDropdownStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n  ActiveOptionChangeData,\n  DropdownBaseProps as DropdownBaseHookProps,\n  DropdownBaseState as DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdownBase_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAYtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,gBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}
+{"version":3,"sources":["../src/components/Dropdown/index.ts"],"sourcesContent":["export { Dropdown } from './Dropdown';\nexport type {\n  ActiveOptionChangeData,\n  DropdownBaseProps as DropdownBaseHookProps,\n  DropdownBaseState as DropdownBaseHookState,\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown.types';\nexport { renderDropdown_unstable } from './renderDropdown';\nexport { useDropdownBase_unstable, useDropdown_unstable } from './useDropdown';\nexport { dropdownClassNames, useDropdownStyles_unstable } from './useDropdownStyles.styles';\n"],"names":["Dropdown","renderDropdown_unstable","useDropdownBase_unstable","useDropdown_unstable","dropdownClassNames","useDropdownStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AAYtC,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,wBAAwB,EAAEC,oBAAoB,QAAQ,mBAAgB;AAC/E,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,gCAA6B"}

package/lib/components/Dropdown/renderDropdown.js

@@ -1,9 +1,9 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { Portal } from '@fluentui/react-portal';
-import { assertSlots } from '@fluentui/react-utilities';
-import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
-import { ComboboxContext } from '../../contexts/ComboboxContext';
-import { ListboxContext } from '../../contexts/ListboxContext';
+import { Portal } from "@fluentui/react-portal";
+import { assertSlots } from "@fluentui/react-utilities";
+import { ActiveDescendantContextProvider } from "@fluentui/react-aria";
+import { ComboboxContext } from "../../contexts/ComboboxContext.js";
+import { ListboxContext } from "../../contexts/ListboxContext.js";
 /**
  * Render the final JSX of Dropdown
  */ export const renderDropdown_unstable = (state, contextValues)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues): JSXElement => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\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        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,iCAAiC;AAEjE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}
+{"version":3,"sources":["../src/components/Dropdown/renderDropdown.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport type { DropdownContextValues, DropdownState, DropdownSlots } from './Dropdown.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Dropdown\n */\nexport const renderDropdown_unstable = (state: DropdownState, contextValues: DropdownContextValues): JSXElement => {\n  assertSlots<DropdownSlots>(state);\n\n  return (\n    <state.root>\n      <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n        <ListboxContext.Provider value={contextValues.listbox}>\n          {/*eslint-disable-next-line @typescript-eslint/no-deprecated*/}\n          <ComboboxContext.Provider value={contextValues.combobox}>\n            <state.button>\n              {state.button.children}\n              {state.expandIcon && <state.expandIcon />}\n            </state.button>\n            {state.clearButton && <state.clearButton />}\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        </ListboxContext.Provider>\n      </ActiveDescendantContextProvider>\n    </state.root>\n  );\n};\n"],"names":["Portal","assertSlots","ActiveDescendantContextProvider","ComboboxContext","ListboxContext","renderDropdown_unstable","state","contextValues","root","value","activeDescendant","Provider","listbox","combobox","button","children","expandIcon","clearButton","inlinePopup","mountNode"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AACvE,SAASC,eAAe,QAAQ,oCAAiC;AAEjE,SAASC,cAAc,QAAQ,mCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAsBC;IAC5DN,YAA2BK;IAE3B,qBACE,KAACA,MAAME,IAAI;kBACT,cAAA,KAACN;YAAgCO,OAAOF,cAAcG,gBAAgB;sBACpE,cAAA,KAACN,eAAeO,QAAQ;gBAACF,OAAOF,cAAcK,OAAO;0BAEnD,cAAA,MAACT,gBAAgBQ,QAAQ;oBAACF,OAAOF,cAAcM,QAAQ;;sCACrD,MAACP,MAAMQ,MAAM;;gCACVR,MAAMQ,MAAM,CAACC,QAAQ;gCACrBT,MAAMU,UAAU,kBAAI,KAACV,MAAMU,UAAU;;;wBAEvCV,MAAMW,WAAW,kBAAI,KAACX,MAAMW,WAAW;wBACvCX,MAAMM,OAAO,IACXN,CAAAA,MAAMY,WAAW,iBAChB,KAACZ,MAAMM,OAAO,sBAEd,KAACZ;4BAAOmB,WAAWb,MAAMa,SAAS;sCAChC,cAAA,KAACb,MAAMM,OAAO;0BAElB;;;;;;AAOd,EAAE"}

package/lib/components/Dropdown/useButtonTriggerSlot.js

@@ -1,8 +1,8 @@
 'use client';
-import * as React from 'react';
-import { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';
-import { useTriggerSlot } from '../../utils/useTriggerSlot';
-import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
+import * as React from "react";
+import { useTimeout, mergeCallbacks } from "@fluentui/react-utilities";
+import { useTriggerSlot } from "../../utils/useTriggerSlot.js";
+import { getDropdownActionFromKey } from "../../utils/dropdownKeyActions.js";
 /**
  * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,
  * with the semantics and event handlers needed for the Combobox and Dropdown components.

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  // eslint-disable-next-line react-hooks/immutability, react-hooks/refs\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAIvE,SAASC,cAAc,QAAQ,6BAA6B;AAC5D,SAASC,wBAAwB,QAAQ,iCAAiC;AAQ1E;;;;;;CAMC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,MAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGjB;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,IAAId,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,UAAU1C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA,sEAAsE;IACtE+B,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}
+{"version":3,"sources":["../src/components/Dropdown/useButtonTriggerSlot.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { Slot, ExtractSlotProps, SlotComponentType } from '@fluentui/react-utilities';\nimport type { ActiveDescendantImperativeRef } from '@fluentui/react-aria';\nimport type { UseTriggerSlotState } from '../../utils/useTriggerSlot';\nimport { useTriggerSlot } from '../../utils/useTriggerSlot';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\n\ntype UseButtonTriggerSlotOptions = {\n  state: UseTriggerSlotState;\n  defaultProps: unknown;\n  activeDescendantController: ActiveDescendantImperativeRef;\n};\n\n/**\n * useButtonTriggerSlot returns a tuple of trigger/listbox shorthand,\n * with the semantics and event handlers needed for the Combobox and Dropdown components.\n * The element type of the ref should always match the element type used in the trigger shorthand.\n *\n * @internal\n */\nexport function useButtonTriggerSlot(\n  triggerFromProps: NonNullable<Slot<'button'>>,\n  ref: React.Ref<HTMLButtonElement>,\n  options: UseButtonTriggerSlotOptions,\n): SlotComponentType<ExtractSlotProps<Slot<'button'>>> {\n  const {\n    state: { open, setOpen, getOptionById },\n    defaultProps,\n    activeDescendantController,\n  } = options;\n\n  // jump to matching option based on typing\n  const searchString = React.useRef('');\n  const [setKeyTimeout, clearKeyTimeout] = useTimeout();\n\n  const moveToNextMatchingOption = (\n    matcher: (optionText: string) => boolean,\n    opt: { startFromNext: boolean } = { startFromNext: false },\n  ) => {\n    const { startFromNext } = opt;\n    const activeOptionId = activeDescendantController.active();\n\n    const nextInOrder = activeDescendantController.find(\n      id => {\n        const option = getOptionById(id);\n        return !!option && matcher(option.text);\n      },\n      { startFrom: startFromNext ? activeDescendantController.next({ passive: true }) : activeOptionId },\n    );\n\n    if (nextInOrder) {\n      return nextInOrder;\n    }\n\n    // Cycle back to first match\n    return activeDescendantController.find(id => {\n      const option = getOptionById(id);\n      return !!option && matcher(option.text);\n    });\n  };\n\n  const moveToNextMatchingOptionWithSameCharacterHandling = () => {\n    if (\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current) === 0;\n        },\n        {\n          // Slowly pressing the same key will cycle through options\n          startFromNext: searchString.current.length === 1,\n        },\n      )\n    ) {\n      return;\n    }\n\n    // if there are no direct matches, check if the search is all the same letter, e.g. \"aaa\"\n    if (\n      allCharactersSame(searchString.current) &&\n      moveToNextMatchingOption(\n        optionText => {\n          return optionText.toLocaleLowerCase().indexOf(searchString.current[0]) === 0;\n        },\n        {\n          // if the search is all the same letter, cycle through options starting with that letter\n          startFromNext: true,\n        },\n      )\n    ) {\n      return;\n    }\n\n    activeDescendantController.blur();\n  };\n\n  const onTriggerKeyDown = (ev: React.KeyboardEvent<HTMLButtonElement>) => {\n    // clear timeout, if it exists\n    clearKeyTimeout();\n\n    // if the key was a char key, update search string\n    if (getDropdownActionFromKey(ev) === 'Type') {\n      // update search string\n      searchString.current += ev.key.toLowerCase();\n      setKeyTimeout(() => {\n        searchString.current = '';\n      }, 500);\n\n      if (open) {\n        moveToNextMatchingOptionWithSameCharacterHandling();\n      }\n\n      // update state\n      !open && setOpen(ev, true);\n    }\n  };\n\n  const trigger = useTriggerSlot(triggerFromProps, ref, {\n    state: options.state,\n    defaultProps,\n    elementType: 'button',\n    activeDescendantController,\n  });\n  // eslint-disable-next-line react-hooks/immutability, react-hooks/refs\n  trigger.onKeyDown = mergeCallbacks(onTriggerKeyDown, trigger.onKeyDown);\n\n  return trigger;\n}\n\n/**\n * @returns - whether every character in the string is the same\n */\nfunction allCharactersSame(str: string) {\n  for (let i = 1; i < str.length; i++) {\n    if (str[i] !== str[i - 1]) {\n      return false;\n    }\n  }\n\n  return true;\n}\n"],"names":["React","useTimeout","mergeCallbacks","useTriggerSlot","getDropdownActionFromKey","useButtonTriggerSlot","triggerFromProps","ref","options","state","open","setOpen","getOptionById","defaultProps","activeDescendantController","searchString","useRef","setKeyTimeout","clearKeyTimeout","moveToNextMatchingOption","matcher","opt","startFromNext","activeOptionId","active","nextInOrder","find","id","option","text","startFrom","next","passive","moveToNextMatchingOptionWithSameCharacterHandling","optionText","toLocaleLowerCase","indexOf","current","length","allCharactersSame","blur","onTriggerKeyDown","ev","key","toLowerCase","trigger","elementType","onKeyDown","str","i"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,cAAc,QAAQ,4BAA4B;AAIvE,SAASC,cAAc,QAAQ,gCAA6B;AAC5D,SAASC,wBAAwB,QAAQ,oCAAiC;AAQ1E;;;;;;CAMC,GACD,OAAO,SAASC,qBACdC,gBAA6C,EAC7CC,GAAiC,EACjCC,OAAoC;IAEpC,MAAM,EACJC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,aAAa,EAAE,EACvCC,YAAY,EACZC,0BAA0B,EAC3B,GAAGN;IAEJ,0CAA0C;IAC1C,MAAMO,eAAef,MAAMgB,MAAM,CAAC;IAClC,MAAM,CAACC,eAAeC,gBAAgB,GAAGjB;IAEzC,MAAMkB,2BAA2B,CAC/BC,SACAC,MAAkC;QAAEC,eAAe;IAAM,CAAC;QAE1D,MAAM,EAAEA,aAAa,EAAE,GAAGD;QAC1B,MAAME,iBAAiBT,2BAA2BU,MAAM;QAExD,MAAMC,cAAcX,2BAA2BY,IAAI,CACjDC,CAAAA;YACE,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC,GACA;YAAEC,WAAWR,gBAAgBR,2BAA2BiB,IAAI,CAAC;gBAAEC,SAAS;YAAK,KAAKT;QAAe;QAGnG,IAAIE,aAAa;YACf,OAAOA;QACT;QAEA,4BAA4B;QAC5B,OAAOX,2BAA2BY,IAAI,CAACC,CAAAA;YACrC,MAAMC,SAAShB,cAAce;YAC7B,OAAO,CAAC,CAACC,UAAUR,QAAQQ,OAAOC,IAAI;QACxC;IACF;IAEA,MAAMI,oDAAoD;QACxD,IACEd,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,MAAM;QAC1E,GACA;YACE,0DAA0D;YAC1Df,eAAeP,aAAasB,OAAO,CAACC,MAAM,KAAK;QACjD,IAEF;YACA;QACF;QAEA,yFAAyF;QACzF,IACEC,kBAAkBxB,aAAasB,OAAO,KACtClB,yBACEe,CAAAA;YACE,OAAOA,WAAWC,iBAAiB,GAAGC,OAAO,CAACrB,aAAasB,OAAO,CAAC,EAAE,MAAM;QAC7E,GACA;YACE,wFAAwF;YACxFf,eAAe;QACjB,IAEF;YACA;QACF;QAEAR,2BAA2B0B,IAAI;IACjC;IAEA,MAAMC,mBAAmB,CAACC;QACxB,8BAA8B;QAC9BxB;QAEA,kDAAkD;QAClD,IAAId,yBAAyBsC,QAAQ,QAAQ;YAC3C,uBAAuB;YACvB3B,aAAasB,OAAO,IAAIK,GAAGC,GAAG,CAACC,WAAW;YAC1C3B,cAAc;gBACZF,aAAasB,OAAO,GAAG;YACzB,GAAG;YAEH,IAAI3B,MAAM;gBACRuB;YACF;YAEA,eAAe;YACf,CAACvB,QAAQC,QAAQ+B,IAAI;QACvB;IACF;IAEA,MAAMG,UAAU1C,eAAeG,kBAAkBC,KAAK;QACpDE,OAAOD,QAAQC,KAAK;QACpBI;QACAiC,aAAa;QACbhC;IACF;IACA,sEAAsE;IACtE+B,QAAQE,SAAS,GAAG7C,eAAeuC,kBAAkBI,QAAQE,SAAS;IAEtE,OAAOF;AACT;AAEA;;CAEC,GACD,SAASN,kBAAkBS,GAAW;IACpC,IAAK,IAAIC,IAAI,GAAGA,IAAID,IAAIV,MAAM,EAAEW,IAAK;QACnC,IAAID,GAAG,CAACC,EAAE,KAAKD,GAAG,CAACC,IAAI,EAAE,EAAE;YACzB,OAAO;QACT;IACF;IAEA,OAAO;AACT"}

package/lib/components/Dropdown/useDropdown.js

@@ -1,16 +1,17 @@
 'use client';
-import * as React from 'react';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { useActiveDescendant } from '@fluentui/react-aria';
-import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from '@fluentui/react-icons';
-import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback, useOnClickOutside } from '@fluentui/react-utilities';
-import { useComboboxBaseState } from '../../utils/useComboboxBaseState';
-import { useComboboxPositioning } from '../../utils/useComboboxPositioning';
-import { Listbox } from '../Listbox/Listbox';
-import { useListboxSlot } from '../../utils/useListboxSlot';
-import { useButtonTriggerSlot } from './useButtonTriggerSlot';
-import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
+import * as React from "react";
+import { useFieldContext_unstable, useFieldControlProps_unstable } from "@fluentui/react-field";
+import { useActiveDescendant } from "@fluentui/react-aria";
+import { ChevronDownRegular as ChevronDownIcon, DismissRegular as DismissIcon } from "@fluentui/react-icons";
+import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
+import { getPartitionedNativeProps, mergeCallbacks, useMergedRefs, slot, useEventCallback, useOnClickOutside } from "@fluentui/react-utilities";
+import { useComboboxBaseState } from "../../utils/useComboboxBaseState.js";
+import { useComboboxPositioning } from "../../utils/useComboboxPositioning.js";
+import { Listbox } from "../Listbox/Listbox.js";
+import { useListboxSlot } from "../../utils/useListboxSlot.js";
+import { useButtonTriggerSlot } from "./useButtonTriggerSlot.js";
+import { isComboboxOptionElement } from "../../utils/isComboboxOptionElement.js";
+import { useTabsterEscapeIgnore } from "../../hooks/useTabsterEscapeIgnore.js";
 /**
  * Create the base state required to render Dropdown, without design-only props.
  *
@@ -149,7 +150,9 @@ import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
  * @param props - props from this instance of Dropdown
  * @param ref - reference to root HTMLElement of Dropdown
  */ export const useDropdown_unstable = (props, ref)=>{
-    const { appearance = 'outline', size = 'medium', ...baseProps } = props;
+    const fieldContext = useFieldContext_unstable();
+    var _fieldContext_size;
+    const { appearance = 'outline', size = (_fieldContext_size = fieldContext === null || fieldContext === void 0 ? void 0 : fieldContext.size) !== null && _fieldContext_size !== void 0 ? _fieldContext_size : 'medium', ...baseProps } = props;
     const baseState = useDropdownBase_unstable(baseProps, ref);
     if (baseState.clearButton) {
         var _baseState_clearButton;
@@ -164,6 +167,10 @@ import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
     return {
         ...baseState,
         appearance,
-        size
+        size,
+        button: {
+            ...useTabsterEscapeIgnore(baseState.button, baseState.open),
+            ...baseState.button
+        }
     };
 };

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 { DropdownBaseProps, DropdownBaseState, DropdownProps, DropdownState } from './Dropdown.types';\nimport { useListboxSlot } from '../../utils/useListboxSlot';\nimport { useButtonTriggerSlot } from './useButtonTriggerSlot';\nimport type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\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  // 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: isComboboxOptionElement,\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    // eslint-disable-next-line react-hooks/refs\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  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","isComboboxOptionElement","useDropdownBase_unstable","props","ref","state","supportsLabelFor","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","dropdownInternalState","freeform","appearance","_appearance","size","_size","_freeform","baseState","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","root","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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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdown.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldContext_unstable, 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 type { ComboboxOpenEvents } from '../Combobox/Combobox.types';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\nimport { useTabsterEscapeIgnore } from '../../hooks/useTabsterEscapeIgnore';\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  // 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: isComboboxOptionElement,\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    // eslint-disable-next-line react-hooks/refs\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  const fieldContext = useFieldContext_unstable();\n  const { appearance = 'outline', size = fieldContext?.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    button: {\n      ...useTabsterEscapeIgnore(baseState.button, baseState.open),\n      ...baseState.button,\n    },\n  };\n};\n"],"names":["React","useFieldContext_unstable","useFieldControlProps_unstable","useActiveDescendant","ChevronDownRegular","ChevronDownIcon","DismissRegular","DismissIcon","useFluent_unstable","useFluent","getPartitionedNativeProps","mergeCallbacks","useMergedRefs","slot","useEventCallback","useOnClickOutside","useComboboxBaseState","useComboboxPositioning","Listbox","useListboxSlot","useButtonTriggerSlot","isComboboxOptionElement","useTabsterEscapeIgnore","useDropdownBase_unstable","props","ref","state","supportsLabelFor","listboxRef","activeDescendantListboxRef","activeParentRef","controller","activeDescendantController","matchOption","dropdownInternalState","freeform","appearance","_appearance","size","_size","_freeform","baseState","clearable","clearSelection","disabled","hasFocus","multiselect","open","selectedOptions","setOpen","primary","triggerNativeProps","root","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","fieldContext","baseProps"],"mappings":"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"}

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

@@ -1,9 +1,9 @@
 'use client';
 
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
-import { iconSizes } from '../../utils/internalTokens';
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { __resetStyles, __styles, mergeClasses, shorthands } from "@griffel/react";
+import { iconSizes } from "../../utils/internalTokens.js";
 export const dropdownClassNames = {
   root: 'fui-Dropdown',
   button: 'fui-Dropdown__button',

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

@@ -1 +1 @@
-{"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Br277j9","Btis473","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'inline-flex',\n        minWidth: '250px',\n        position: 'relative',\n        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        display: 'grid',\n        fontFamily: tokens.fontFamilyBase,\n        gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n        justifyContent: 'space-between',\n        textAlign: 'left',\n        width: '100%',\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        gridColumnStart: 'icon',\n        gridColumnEnd: 'end',\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    const { appearance, open, placeholderVisible, showClearButton, size } = state;\n    const invalid = `${state.button['aria-invalid']}` === 'true';\n    const disabled = state.button.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const clearButtonStyle = useBaseClearButtonStyle();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createFocusOutlineStyle","tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","B7ck84d","mc9l5x","Bf4jedk","qhf8xq","ha4doy","Bbr2w1p","Bduesf4","Bpq79vn","li1rpt","Bsft5z2","E3zdtr","Eqx8gd","By385i5","B1piin3","Dlnsje","d9w3h3","B3778ie","B1q35kw","Bw17bha","Bcgy8vk","Bjuhk93","Gjdm7m","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","Bercvud","Br277j9","Btis473","E5pizo","Bxyxcbc","listboxCollapsed","inlineListbox","Bj3rh1h","Bt984gj","De3pzq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","sj55zd","i8kkvl","Bceei9c","Bahqtrf","Budl1dq","Brf1p80","fsow6f","a9b677","Brovlpu","placeholder","small","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","medium","large","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","Bvq3b66","Brahy3i","zoxjo1","an54nd","underline","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","disabled","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledText","hidden","d","p","w","m","t","f","h","a","useIconStyles","icon","Br312pm","Bw0ie65","Bo70h7d","Frg6f3","useBaseClearButtonStyle","r","s","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"sources":["useDropdownStyles.styles.js"],"sourcesContent":["'use client';\nimport { createFocusOutlineStyle } from \"@fluentui/react-tabster\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { iconSizes } from \"../../utils/internalTokens.js\";\nexport const dropdownClassNames = {\n    root: 'fui-Dropdown',\n    button: 'fui-Dropdown__button',\n    clearButton: 'fui-Dropdown__clearButton',\n    expandIcon: 'fui-Dropdown__expandIcon',\n    listbox: 'fui-Dropdown__listbox'\n};\n/**\n * Styles for Dropdown\n */ const useStyles = makeStyles({\n    root: {\n        borderRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'inline-flex',\n        minWidth: '250px',\n        position: 'relative',\n        verticalAlign: 'middle',\n        // windows high contrast mode focus indicator\n        ':focus-within': {\n            outlineWidth: '2px',\n            outlineStyle: 'solid',\n            outlineColor: 'transparent'\n        },\n        // bottom focus border, shared with Input, Select, and SpinButton\n        '::after': {\n            boxSizing: 'border-box',\n            content: '\"\"',\n            position: 'absolute',\n            left: '-1px',\n            bottom: '-1px',\n            right: '-1px',\n            height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n            borderBottomLeftRadius: tokens.borderRadiusMedium,\n            borderBottomRightRadius: tokens.borderRadiusMedium,\n            borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n            clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n            transform: 'scaleX(0)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationUltraFast,\n            transitionDelay: tokens.curveAccelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within::after': {\n            transform: 'scaleX(1)',\n            transitionProperty: 'transform',\n            transitionDuration: tokens.durationNormal,\n            transitionDelay: tokens.curveDecelerateMid,\n            '@media screen and (prefers-reduced-motion: reduce)': {\n                transitionDuration: '0.01ms',\n                transitionDelay: '0.01ms'\n            }\n        },\n        ':focus-within:active::after': {\n            borderBottomColor: tokens.colorCompoundBrandStrokePressed\n        },\n        '@supports selector(:has(*))': {\n            [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n                borderBottomColor: 'initial',\n                transform: 'scaleX(0)'\n            }\n        }\n    },\n    listbox: {\n        boxSizing: 'border-box',\n        boxShadow: `${tokens.shadow16}`,\n        borderRadius: tokens.borderRadiusMedium,\n        maxHeight: '80vh'\n    },\n    listboxCollapsed: {\n        display: 'none'\n    },\n    // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n    // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n    inlineListbox: {\n        zIndex: 1\n    },\n    button: {\n        alignItems: 'center',\n        backgroundColor: tokens.colorTransparentBackground,\n        border: 'none',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXXS,\n        cursor: 'pointer',\n        display: 'grid',\n        fontFamily: tokens.fontFamilyBase,\n        gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n        justifyContent: 'space-between',\n        textAlign: 'left',\n        width: '100%',\n        '&:focus': {\n            outlineStyle: 'none'\n        }\n    },\n    placeholder: {\n        color: tokens.colorNeutralForeground4\n    },\n    // size variants\n    small: {\n        ...typographyStyles.caption1,\n        padding: `3px ${tokens.spacingHorizontalSNudge} 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    medium: {\n        ...typographyStyles.body1,\n        padding: `5px ${tokens.spacingHorizontalMNudge} 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`\n    },\n    large: {\n        columnGap: tokens.spacingHorizontalSNudge,\n        ...typographyStyles.body2,\n        padding: `7px ${tokens.spacingHorizontalM} 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`\n    },\n    // appearance variants\n    outline: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n        borderBottomColor: tokens.colorNeutralStrokeAccessible\n    },\n    outlineInteractive: {\n        '&:hover': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n            borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n        },\n        '&:active': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        },\n        '&:focus-within': {\n            ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n            borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n        }\n    },\n    underline: {\n        backgroundColor: tokens.colorTransparentBackground,\n        borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: '0'\n    },\n    'filled-lighter': {\n        backgroundColor: tokens.colorNeutralBackground1,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    'filled-darker': {\n        backgroundColor: tokens.colorNeutralBackground3,\n        border: `${tokens.strokeWidthThin} solid transparent`\n    },\n    invalid: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n        }\n    },\n    invalidUnderline: {\n        ':not(:focus-within),:hover:not(:focus-within)': {\n            borderBottomColor: tokens.colorPaletteRedBorder2\n        }\n    },\n    disabled: {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.colorTransparentBackground,\n        ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n        '@media (forced-colors: active)': {\n            ...shorthands.borderColor('GrayText')\n        }\n    },\n    disabledText: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed'\n    },\n    hidden: {\n        display: 'none'\n    }\n});\nconst useIconStyles = makeStyles({\n    icon: {\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralStrokeAccessible,\n        display: 'block',\n        fontSize: tokens.fontSizeBase500,\n        gridColumnStart: 'icon',\n        gridColumnEnd: 'end',\n        // the SVG must have display: block for accurate positioning\n        // otherwise an extra inline space is inserted after the svg element\n        '& svg': {\n            display: 'block'\n        }\n    },\n    // icon size variants\n    small: {\n        fontSize: iconSizes.small,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    medium: {\n        fontSize: iconSizes.medium,\n        marginLeft: tokens.spacingHorizontalXXS\n    },\n    large: {\n        fontSize: iconSizes.large,\n        marginLeft: tokens.spacingHorizontalSNudge\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled\n    }\n});\nconst useBaseClearButtonStyle = makeResetStyles({\n    alignSelf: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    cursor: 'pointer',\n    height: 'fit-content',\n    margin: 0,\n    marginRight: tokens.spacingHorizontalMNudge,\n    padding: 0,\n    position: 'relative',\n    ...createFocusOutlineStyle()\n});\n/**\n * Apply styling to the Dropdown slots based on the state\n */ export const useDropdownStyles_unstable = (state)=>{\n    const { appearance, open, placeholderVisible, showClearButton, size } = state;\n    const invalid = `${state.button['aria-invalid']}` === 'true';\n    const disabled = state.button.disabled;\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const clearButtonStyle = useBaseClearButtonStyle();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(dropdownClassNames.root, styles.root, styles[appearance], !disabled && appearance === 'outline' && styles.outlineInteractive, invalid && appearance !== 'underline' && styles.invalid, invalid && appearance === 'underline' && styles.invalidUnderline, disabled && styles.disabled, state.root.className);\n    // eslint-disable-next-line react-hooks/immutability\n    state.button.className = mergeClasses(dropdownClassNames.button, styles.button, styles[size], placeholderVisible && styles.placeholder, disabled && styles.disabledText, state.button.className);\n    if (state.listbox) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.listbox.className = mergeClasses(dropdownClassNames.listbox, styles.listbox, state.inlinePopup && styles.inlineListbox, !open && styles.listboxCollapsed, state.listbox.className);\n    }\n    if (state.expandIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.expandIcon.className = mergeClasses(dropdownClassNames.expandIcon, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, showClearButton && styles.hidden, state.expandIcon.className);\n    }\n    if (state.clearButton) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.clearButton.className = mergeClasses(dropdownClassNames.clearButton, clearButtonStyle, iconStyles.icon, iconStyles[size], disabled && iconStyles.disabled, !showClearButton && styles.hidden, state.clearButton.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Dropdown/useDropdownStyles.styles.raw.js

@@ -1,8 +1,8 @@
 'use client';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { iconSizes } from '../../utils/internalTokens';
+import { createFocusOutlineStyle } from "@fluentui/react-tabster";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { makeResetStyles, makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { iconSizes } from "../../utils/internalTokens.js";
 export const dropdownClassNames = {
     root: 'fui-Dropdown',
     button: 'fui-Dropdown__button',

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  clearButton: 'fui-Dropdown__clearButton',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n\n    '@supports selector(:has(*))': {\n      [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n        borderBottomColor: 'initial',\n        transform: 'scaleX(0)',\n      },\n    },\n  },\n\n  listbox: {\n    boxSizing: 'border-box',\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useBaseClearButtonStyle = makeResetStyles({\n  alignSelf: 'center',\n  backgroundColor: tokens.colorTransparentBackground,\n  border: 'none',\n  cursor: 'pointer',\n  height: 'fit-content',\n  margin: 0,\n  marginRight: tokens.spacingHorizontalMNudge,\n  padding: 0,\n  position: 'relative',\n\n  ...createFocusOutlineStyle(),\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, showClearButton, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const clearButtonStyle = useBaseClearButtonStyle();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearButton && styles.hidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearButton.className = mergeClasses(\n      dropdownClassNames.clearButton,\n      clearButtonStyle,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearButton && styles.hidden,\n      state.clearButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Dropdown/useDropdownStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { iconSizes } from '../../utils/internalTokens';\nimport type { DropdownSlots, DropdownState } from './Dropdown.types';\n\nexport const dropdownClassNames: SlotClassNames<DropdownSlots> = {\n  root: 'fui-Dropdown',\n  button: 'fui-Dropdown__button',\n  clearButton: 'fui-Dropdown__clearButton',\n  expandIcon: 'fui-Dropdown__expandIcon',\n  listbox: 'fui-Dropdown__listbox',\n};\n\n/**\n * Styles for Dropdown\n */\nconst useStyles = makeStyles({\n  root: {\n    borderRadius: tokens.borderRadiusMedium,\n    boxSizing: 'border-box',\n    display: 'inline-flex',\n    minWidth: '250px',\n    position: 'relative',\n    verticalAlign: 'middle',\n\n    // windows high contrast mode focus indicator\n    ':focus-within': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n\n    // bottom focus border, shared with Input, Select, and SpinButton\n    '::after': {\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      left: '-1px',\n      bottom: '-1px',\n      right: '-1px',\n      height: `max(${tokens.strokeWidthThick}, ${tokens.borderRadiusMedium})`,\n      borderBottomLeftRadius: tokens.borderRadiusMedium,\n      borderBottomRightRadius: tokens.borderRadiusMedium,\n      borderBottom: `${tokens.strokeWidthThick} solid ${tokens.colorCompoundBrandStroke}`,\n      clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n    ':focus-within:active::after': {\n      borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n    },\n\n    '@supports selector(:has(*))': {\n      [`:has(.${dropdownClassNames.clearButton}:focus)::after`]: {\n        borderBottomColor: 'initial',\n        transform: 'scaleX(0)',\n      },\n    },\n  },\n\n  listbox: {\n    boxSizing: 'border-box',\n    boxShadow: `${tokens.shadow16}`,\n    borderRadius: tokens.borderRadiusMedium,\n    maxHeight: '80vh',\n  },\n\n  listboxCollapsed: {\n    display: 'none',\n  },\n\n  // When rendering inline, the popupSurface will be rendered under relatively positioned elements such as Input.\n  // This is due to the surface being positioned as absolute, therefore zIndex: 1 ensures that won't happen.\n  inlineListbox: {\n    zIndex: 1,\n  },\n\n  button: {\n    alignItems: 'center',\n    backgroundColor: tokens.colorTransparentBackground,\n    border: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    columnGap: tokens.spacingHorizontalXXS,\n    cursor: 'pointer',\n    display: 'grid',\n    fontFamily: tokens.fontFamilyBase,\n    gridTemplateColumns: '[content] 1fr [icon] auto [end]',\n    justifyContent: 'space-between',\n    textAlign: 'left',\n    width: '100%',\n\n    '&:focus': {\n      outlineStyle: 'none',\n    },\n  },\n\n  placeholder: {\n    color: tokens.colorNeutralForeground4,\n  },\n\n  // size variants\n  small: {\n    ...typographyStyles.caption1,\n    padding: `3px ${\n      tokens.spacingHorizontalSNudge\n    } 3px ${`calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  medium: {\n    ...typographyStyles.body1,\n    padding: `5px ${\n      tokens.spacingHorizontalMNudge\n    } 5px ${`calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`}`,\n  },\n  large: {\n    columnGap: tokens.spacingHorizontalSNudge,\n    ...typographyStyles.body2,\n    padding: `7px ${\n      tokens.spacingHorizontalM\n    } 7px ${`calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`}`,\n  },\n\n  // appearance variants\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke1}`,\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n\n    '&:focus-within': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n    borderRadius: '0',\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n    border: `${tokens.strokeWidthThin} solid transparent`,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n  disabled: {\n    cursor: 'not-allowed',\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n\n  disabledText: {\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n  },\n\n  hidden: {\n    display: 'none',\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    fontSize: tokens.fontSizeBase500,\n    gridColumnStart: 'icon',\n    gridColumnEnd: 'end',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  // icon size variants\n  small: {\n    fontSize: iconSizes.small,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    marginLeft: tokens.spacingHorizontalXXS,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    marginLeft: tokens.spacingHorizontalSNudge,\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n  },\n});\n\nconst useBaseClearButtonStyle = makeResetStyles({\n  alignSelf: 'center',\n  backgroundColor: tokens.colorTransparentBackground,\n  border: 'none',\n  cursor: 'pointer',\n  height: 'fit-content',\n  margin: 0,\n  marginRight: tokens.spacingHorizontalMNudge,\n  padding: 0,\n  position: 'relative',\n\n  ...createFocusOutlineStyle(),\n});\n\n/**\n * Apply styling to the Dropdown slots based on the state\n */\nexport const useDropdownStyles_unstable = (state: DropdownState): DropdownState => {\n  const { appearance, open, placeholderVisible, showClearButton, size } = state;\n  const invalid = `${state.button['aria-invalid']}` === 'true';\n  const disabled = state.button.disabled;\n  const styles = useStyles();\n  const iconStyles = useIconStyles();\n  const clearButtonStyle = useBaseClearButtonStyle();\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    dropdownClassNames.root,\n    styles.root,\n    styles[appearance],\n    !disabled && appearance === 'outline' && styles.outlineInteractive,\n    invalid && appearance !== 'underline' && styles.invalid,\n    invalid && appearance === 'underline' && styles.invalidUnderline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.button.className = mergeClasses(\n    dropdownClassNames.button,\n    styles.button,\n    styles[size],\n    placeholderVisible && styles.placeholder,\n    disabled && styles.disabledText,\n    state.button.className,\n  );\n\n  if (state.listbox) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.listbox.className = mergeClasses(\n      dropdownClassNames.listbox,\n      styles.listbox,\n      state.inlinePopup && styles.inlineListbox,\n      !open && styles.listboxCollapsed,\n      state.listbox.className,\n    );\n  }\n\n  if (state.expandIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.expandIcon.className = mergeClasses(\n      dropdownClassNames.expandIcon,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      showClearButton && styles.hidden,\n      state.expandIcon.className,\n    );\n  }\n\n  if (state.clearButton) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.clearButton.className = mergeClasses(\n      dropdownClassNames.clearButton,\n      clearButtonStyle,\n      iconStyles.icon,\n      iconStyles[size],\n      disabled && iconStyles.disabled,\n      !showClearButton && styles.hidden,\n      state.clearButton.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["createFocusOutlineStyle","tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","iconSizes","dropdownClassNames","root","button","clearButton","expandIcon","listbox","useStyles","borderRadius","borderRadiusMedium","boxSizing","display","minWidth","position","verticalAlign","outlineWidth","outlineStyle","outlineColor","content","left","bottom","right","height","strokeWidthThick","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","borderBottomColor","colorCompoundBrandStrokePressed","boxShadow","shadow16","maxHeight","listboxCollapsed","inlineListbox","zIndex","alignItems","backgroundColor","colorTransparentBackground","border","color","colorNeutralForeground1","columnGap","spacingHorizontalXXS","cursor","fontFamily","fontFamilyBase","gridTemplateColumns","justifyContent","textAlign","width","placeholder","colorNeutralForeground4","small","caption1","padding","spacingHorizontalSNudge","medium","body1","spacingHorizontalMNudge","large","body2","spacingHorizontalM","outline","colorNeutralBackground1","strokeWidthThin","colorNeutralStroke1","colorNeutralStrokeAccessible","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorNeutralBackground3","invalid","colorPaletteRedBorder2","invalidUnderline","disabled","colorNeutralStrokeDisabled","disabledText","colorNeutralForegroundDisabled","hidden","useIconStyles","icon","fontSize","fontSizeBase500","gridColumnStart","gridColumnEnd","marginLeft","useBaseClearButtonStyle","alignSelf","margin","marginRight","useDropdownStyles_unstable","state","appearance","open","placeholderVisible","showClearButton","size","styles","iconStyles","clearButtonStyle","className","inlinePopup"],"mappings":"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"}

package/lib/components/Listbox/Listbox.js

@@ -1,10 +1,10 @@
 'use client';
-import * as React from 'react';
-import { useListbox_unstable } from './useListbox';
-import { renderListbox_unstable } from './renderListbox';
-import { useListboxStyles_unstable } from './useListboxStyles.styles';
-import { useListboxContextValues } from '../../contexts/useListboxContextValues';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useListbox_unstable } from "./useListbox.js";
+import { renderListbox_unstable } from "./renderListbox.js";
+import { useListboxStyles_unstable } from "./useListboxStyles.styles.js";
+import { useListboxContextValues } from "../../contexts/useListboxContextValues.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
  */ export const Listbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,yCAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Listbox/Listbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,yBAAyB,QAAQ,+BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,4CAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

package/lib/components/Listbox/index.js

@@ -1,4 +1,4 @@
-export { Listbox } from './Listbox';
-export { renderListbox_unstable } from './renderListbox';
-export { useListbox_unstable } from './useListbox';
-export { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';
+export { Listbox } from "./Listbox.js";
+export { renderListbox_unstable } from "./renderListbox.js";
+export { useListbox_unstable } from "./useListbox.js";
+export { listboxClassNames, useListboxStyles_unstable } from "./useListboxStyles.styles.js";