@fluentui/react-combobox 9.17.3 → 9.17.5

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}
+{"version":3,"sources":["../src/components/Listbox/index.ts"],"sourcesContent":["export { Listbox } from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox.types';\nexport { renderListbox_unstable } from './renderListbox';\nexport { useListbox_unstable } from './useListbox';\nexport { listboxClassNames, useListboxStyles_unstable } from './useListboxStyles.styles';\n"],"names":["Listbox","renderListbox_unstable","useListbox_unstable","listboxClassNames","useListboxStyles_unstable"],"mappings":"AAAA,SAASA,OAAO,QAAQ,eAAY;AAEpC,SAASC,sBAAsB,QAAQ,qBAAkB;AACzD,SAASC,mBAAmB,QAAQ,kBAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,+BAA4B"}

package/lib/components/Listbox/renderListbox.js

@@ -1,7 +1,7 @@
   import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
-import { ActiveDescendantContextProvider } from '@fluentui/react-aria';
-import { ListboxContext } from '../../contexts/ListboxContext';
+import { assertSlots } from "@fluentui/react-utilities";
+import { ActiveDescendantContextProvider } from "@fluentui/react-aria";
+import { ListboxContext } from "../../contexts/ListboxContext.js";
 /**
  * Render the final JSX of Listbox
  */ export const renderListbox_unstable = (state, contextValues)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DL,YAA0BI;IAE1B,qBACE,KAACH;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,cAAA,KAACL,eAAeM,QAAQ;YAACF,OAAOD,cAAcI,OAAO;sBACnD,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}
+{"version":3,"sources":["../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ActiveDescendantContextProvider } from '@fluentui/react-aria';\nimport type { ListboxContextValues, ListboxState, ListboxSlots } from './Listbox.types';\nimport { ListboxContext } from '../../contexts/ListboxContext';\n\n/**\n * Render the final JSX of Listbox\n */\nexport const renderListbox_unstable = (state: ListboxState, contextValues: ListboxContextValues): JSXElement => {\n  assertSlots<ListboxSlots>(state);\n\n  return (\n    <ActiveDescendantContextProvider value={contextValues.activeDescendant}>\n      <ListboxContext.Provider value={contextValues.listbox}>\n        <state.root />\n      </ListboxContext.Provider>\n    </ActiveDescendantContextProvider>\n  );\n};\n"],"names":["assertSlots","ActiveDescendantContextProvider","ListboxContext","renderListbox_unstable","state","contextValues","value","activeDescendant","Provider","listbox","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,+BAA+B,QAAQ,uBAAuB;AAEvE,SAASC,cAAc,QAAQ,mCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC;IAC1DL,YAA0BI;IAE1B,qBACE,KAACH;QAAgCK,OAAOD,cAAcE,gBAAgB;kBACpE,cAAA,KAACL,eAAeM,QAAQ;YAACF,OAAOD,cAAcI,OAAO;sBACnD,cAAA,KAACL,MAAMM,IAAI;;;AAInB,EAAE"}

package/lib/components/Listbox/useListbox.js

@@ -1,14 +1,14 @@
 'use client';
-import * as React from 'react';
-import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from '@fluentui/react-utilities';
-import { useHasParentContext } from '@fluentui/react-context-selector';
-import { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from '@fluentui/react-aria';
-import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
-import { useOptionCollection } from '../../utils/useOptionCollection';
-import { useSelection } from '../../utils/useSelection';
-import { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';
-import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
-import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
+import * as React from "react";
+import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, slot, useMergedRefs } from "@fluentui/react-utilities";
+import { useHasParentContext } from "@fluentui/react-context-selector";
+import { useActiveDescendant, useActiveDescendantContext, useHasParentActiveDescendantContext } from "@fluentui/react-aria";
+import { getDropdownActionFromKey } from "../../utils/dropdownKeyActions.js";
+import { useOptionCollection } from "../../utils/useOptionCollection.js";
+import { useSelection } from "../../utils/useSelection.js";
+import { ListboxContext, useListboxContext_unstable } from "../../contexts/ListboxContext.js";
+import { useOnKeyboardNavigationChange } from "@fluentui/react-tabster";
+import { isComboboxOptionElement } from "../../utils/isComboboxOptionElement.js";
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
     activeOption: undefined,

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport {\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  // eslint-disable-next-line react-hooks/immutability\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      // eslint-disable-next-line react-hooks/immutability\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","isComboboxOptionElement","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","el","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","root","always","role","tabIndex","elementType","standalone"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Listbox/useListbox.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  mergeCallbacks,\n  useEventCallback,\n  slot,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport {\n  useActiveDescendant,\n  useActiveDescendantContext,\n  useHasParentActiveDescendantContext,\n} from '@fluentui/react-aria';\nimport type { ListboxProps, ListboxState } from './Listbox.types';\nimport { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';\nimport { useOptionCollection } from '../../utils/useOptionCollection';\nimport { useSelection } from '../../utils/useSelection';\nimport { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';\nimport { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';\n\n// eslint-disable-next-line @typescript-eslint/naming-convention\nconst UNSAFE_noLongerUsed = {\n  activeOption: undefined,\n  focusVisible: false,\n  setActiveOption: () => null,\n};\n\n/**\n * Create the state required to render Listbox.\n *\n * The returned state can be modified with hooks such as useListboxStyles_unstable,\n * before being passed to renderListbox_unstable.\n *\n * @param props - props from this instance of Listbox\n * @param ref - reference to root HTMLElement of Listbox\n */\nexport const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElement>): ListboxState => {\n  const { multiselect, disableAutoFocus = false } = props;\n  const optionCollection = useOptionCollection();\n\n  const {\n    listboxRef: activeDescendantListboxRef,\n    activeParentRef,\n    controller,\n  } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({\n    matchOption: isComboboxOptionElement,\n  });\n\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n  const contextGetOptionById = useListboxContext_unstable(ctx => ctx.getOptionById);\n  const contextGetOptionsMatchingValue = useListboxContext_unstable(ctx => ctx.getOptionsMatchingValue);\n\n  const getOptionById = hasListboxContext ? contextGetOptionById : optionCollection.getOptionById;\n  const getOptionsMatchingValue = hasListboxContext\n    ? contextGetOptionsMatchingValue\n    : optionCollection.getOptionsMatchingValue;\n\n  // eslint-disable-next-line react-hooks/immutability\n  const listenerRef = React.useMemo(() => {\n    let element: HTMLDivElement | null = null;\n\n    const listener = (untypedEvent: Event) => {\n      // Typescript doesn't support custom event types on handler\n      const event = untypedEvent as ActiveDescendantChangeEvent;\n      onActiveDescendantChange?.(event);\n    };\n\n    return (el: HTMLDivElement | null) => {\n      if (!el) {\n        element?.removeEventListener('activedescendantchange', listener);\n        return;\n      }\n\n      // eslint-disable-next-line react-hooks/immutability\n      element = el;\n      element.addEventListener('activedescendantchange', listener);\n    };\n  }, [onActiveDescendantChange]);\n\n  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);\n  useOnKeyboardNavigationChange(setIsNavigatingWithKeyboard);\n\n  const activeDescendantContext = useActiveDescendantContext();\n  const hasParentActiveDescendantContext = useHasParentActiveDescendantContext();\n  const activeDescendantController = hasParentActiveDescendantContext ? activeDescendantContext.controller : controller;\n\n  const { clearSelection, selectedOptions, selectOption } = useSelection(props);\n\n  const onKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    const action = getDropdownActionFromKey(event, { open: true });\n    const activeOptionId = activeDescendantController.active();\n    const activeOption = activeOptionId ? getOptionById(activeOptionId) : null;\n\n    switch (action) {\n      case 'First':\n      case 'Last':\n      case 'Next':\n      case 'Previous':\n      case 'PageDown':\n      case 'PageUp':\n      case 'CloseSelect':\n      case 'Select':\n        event.preventDefault();\n        break;\n    }\n\n    switch (action) {\n      case 'Next':\n        if (activeOption) {\n          activeDescendantController.next();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'Previous':\n        if (activeOption) {\n          activeDescendantController.prev();\n        } else {\n          activeDescendantController.first();\n        }\n        break;\n      case 'PageUp':\n      case 'First':\n        activeDescendantController.first();\n        break;\n      case 'PageDown':\n      case 'Last':\n        activeDescendantController.last();\n        break;\n      case 'Select':\n      case 'CloseSelect':\n        activeOption && selectOption(event, activeOption);\n        break;\n    }\n  };\n\n  // get state from parent combobox, if it exists\n  const contextSelectedOptions = useListboxContext_unstable(ctx => ctx.selectedOptions);\n  const contextSelectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n\n  // without a parent combobox context, provide values directly from Listbox\n  const optionContextValues = hasListboxContext\n    ? {\n        selectedOptions: contextSelectedOptions,\n        selectOption: contextSelectOption,\n        ...UNSAFE_noLongerUsed,\n      }\n    : {\n        selectedOptions,\n        selectOption,\n        ...UNSAFE_noLongerUsed,\n      };\n\n  React.useEffect(() => {\n    // if the listbox has a parent context, that parent context should handle the activedescendant\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    // disable focus-visible attributes until focus is received\n    activeDescendantController.hideFocusVisibleAttributes();\n\n    if (!disableAutoFocus) {\n      // if it is single-select and there is a selected option, start at the selected option\n      if (!multiselect && optionContextValues.selectedOptions.length > 0) {\n        const selectedOption = getOptionsMatchingValue(v => v === optionContextValues.selectedOptions[0]).pop();\n\n        if (selectedOption?.id) {\n          activeDescendantController.focus(selectedOption.id);\n        }\n      }\n\n      // otherwise start at the first option\n      else {\n        activeDescendantController.first();\n      }\n    }\n\n    return () => {\n      activeDescendantController.blur();\n    };\n\n    // this should only be run once in the lifecycle of the Listbox\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  const onFocus = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.showFocusVisibleAttributes();\n\n    if (isNavigatingWithKeyboard) {\n      activeDescendantController.scrollActiveIntoView();\n    }\n  }, [activeDescendantController, hasParentActiveDescendantContext, isNavigatingWithKeyboard]);\n\n  const onBlur = React.useCallback(() => {\n    if (hasParentActiveDescendantContext) {\n      return;\n    }\n\n    activeDescendantController.hideFocusVisibleAttributes();\n  }, [activeDescendantController, hasParentActiveDescendantContext]);\n\n  const state: ListboxState = {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref as React.Ref<HTMLDivElement>, activeParentRef, activeDescendantListboxRef, listenerRef),\n        role: multiselect ? 'menu' : 'listbox',\n        tabIndex: 0,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    standalone: !hasListboxContext,\n    multiselect,\n    clearSelection,\n    activeDescendantController,\n    onActiveDescendantChange,\n    ...optionCollection,\n    ...optionContextValues,\n  };\n\n  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));\n  state.root.onFocus = useEventCallback(mergeCallbacks(state.root.onFocus, onFocus));\n  state.root.onBlur = useEventCallback(mergeCallbacks(state.root.onBlur, onBlur));\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","slot","useMergedRefs","useHasParentContext","useActiveDescendant","useActiveDescendantContext","useHasParentActiveDescendantContext","getDropdownActionFromKey","useOptionCollection","useSelection","ListboxContext","useListboxContext_unstable","useOnKeyboardNavigationChange","isComboboxOptionElement","UNSAFE_noLongerUsed","activeOption","undefined","focusVisible","setActiveOption","useListbox_unstable","props","ref","multiselect","disableAutoFocus","optionCollection","listboxRef","activeDescendantListboxRef","activeParentRef","controller","matchOption","hasListboxContext","onActiveDescendantChange","ctx","contextGetOptionById","getOptionById","contextGetOptionsMatchingValue","getOptionsMatchingValue","listenerRef","useMemo","element","listener","untypedEvent","event","el","removeEventListener","addEventListener","isNavigatingWithKeyboard","setIsNavigatingWithKeyboard","useState","activeDescendantContext","hasParentActiveDescendantContext","activeDescendantController","clearSelection","selectedOptions","selectOption","onKeyDown","action","open","activeOptionId","active","preventDefault","next","first","prev","last","contextSelectedOptions","contextSelectOption","optionContextValues","useEffect","hideFocusVisibleAttributes","length","selectedOption","v","pop","id","focus","blur","onFocus","useCallback","showFocusVisibleAttributes","scrollActiveIntoView","onBlur","state","components","root","always","role","tabIndex","elementType","standalone"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,wBAAwB,EACxBC,cAAc,EACdC,gBAAgB,EAChBC,IAAI,EACJC,aAAa,QACR,4BAA4B;AACnC,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SACEC,mBAAmB,EACnBC,0BAA0B,EAC1BC,mCAAmC,QAC9B,uBAAuB;AAE9B,SAASC,wBAAwB,QAAQ,oCAAiC;AAC1E,SAASC,mBAAmB,QAAQ,qCAAkC;AACtE,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mCAAgC;AAC3F,SAASC,6BAA6B,QAAQ,0BAA0B;AACxE,SAASC,uBAAuB,QAAQ,yCAAsC;AAE9E,gEAAgE;AAChE,MAAMC,sBAAsB;IAC1BC,cAAcC;IACdC,cAAc;IACdC,iBAAiB,IAAM;AACzB;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,WAAW,EAAEC,mBAAmB,KAAK,EAAE,GAAGH;IAClD,MAAMI,mBAAmBhB;IAEzB,MAAM,EACJiB,YAAYC,0BAA0B,EACtCC,eAAe,EACfC,UAAU,EACX,GAAGxB,oBAAsD;QACxDyB,aAAahB;IACf;IAEA,MAAMiB,oBAAoB3B,oBAAoBO;IAC9C,MAAMqB,2BAA2BpB,2BAA2BqB,CAAAA,MAAOA,IAAID,wBAAwB;IAC/F,MAAME,uBAAuBtB,2BAA2BqB,CAAAA,MAAOA,IAAIE,aAAa;IAChF,MAAMC,iCAAiCxB,2BAA2BqB,CAAAA,MAAOA,IAAII,uBAAuB;IAEpG,MAAMF,gBAAgBJ,oBAAoBG,uBAAuBT,iBAAiBU,aAAa;IAC/F,MAAME,0BAA0BN,oBAC5BK,iCACAX,iBAAiBY,uBAAuB;IAE5C,oDAAoD;IACpD,MAAMC,cAAcxC,MAAMyC,OAAO,CAAC;QAChC,IAAIC,UAAiC;QAErC,MAAMC,WAAW,CAACC;YAChB,2DAA2D;YAC3D,MAAMC,QAAQD;YACdV,qCAAAA,+CAAAA,yBAA2BW;QAC7B;QAEA,OAAO,CAACC;YACN,IAAI,CAACA,IAAI;gBACPJ,oBAAAA,8BAAAA,QAASK,mBAAmB,CAAC,0BAA0BJ;gBACvD;YACF;YAEA,oDAAoD;YACpDD,UAAUI;YACVJ,QAAQM,gBAAgB,CAAC,0BAA0BL;QACrD;IACF,GAAG;QAACT;KAAyB;IAE7B,MAAM,CAACe,0BAA0BC,4BAA4B,GAAGlD,MAAMmD,QAAQ,CAAC;IAC/EpC,8BAA8BmC;IAE9B,MAAME,0BAA0B5C;IAChC,MAAM6C,mCAAmC5C;IACzC,MAAM6C,6BAA6BD,mCAAmCD,wBAAwBrB,UAAU,GAAGA;IAE3G,MAAM,EAAEwB,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAE,GAAG7C,aAAaW;IAEvE,MAAMmC,YAAY,CAACb;QACjB,MAAMc,SAASjD,yBAAyBmC,OAAO;YAAEe,MAAM;QAAK;QAC5D,MAAMC,iBAAiBP,2BAA2BQ,MAAM;QACxD,MAAM5C,eAAe2C,iBAAiBxB,cAAcwB,kBAAkB;QAEtE,OAAQF;YACN,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;YACL,KAAK;gBACHd,MAAMkB,cAAc;gBACpB;QACJ;QAEA,OAAQJ;YACN,KAAK;gBACH,IAAIzC,cAAc;oBAChBoC,2BAA2BU,IAAI;gBACjC,OAAO;oBACLV,2BAA2BW,KAAK;gBAClC;gBACA;YACF,KAAK;gBACH,IAAI/C,cAAc;oBAChBoC,2BAA2BY,IAAI;gBACjC,OAAO;oBACLZ,2BAA2BW,KAAK;gBAClC;gBACA;YACF,KAAK;YACL,KAAK;gBACHX,2BAA2BW,KAAK;gBAChC;YACF,KAAK;YACL,KAAK;gBACHX,2BAA2Ba,IAAI;gBAC/B;YACF,KAAK;YACL,KAAK;gBACHjD,gBAAgBuC,aAAaZ,OAAO3B;gBACpC;QACJ;IACF;IAEA,+CAA+C;IAC/C,MAAMkD,yBAAyBtD,2BAA2BqB,CAAAA,MAAOA,IAAIqB,eAAe;IACpF,MAAMa,sBAAsBvD,2BAA2BqB,CAAAA,MAAOA,IAAIsB,YAAY;IAE9E,0EAA0E;IAC1E,MAAMa,sBAAsBrC,oBACxB;QACEuB,iBAAiBY;QACjBX,cAAcY;QACd,GAAGpD,mBAAmB;IACxB,IACA;QACEuC;QACAC;QACA,GAAGxC,mBAAmB;IACxB;IAEJjB,MAAMuE,SAAS,CAAC;QACd,8FAA8F;QAC9F,IAAIlB,kCAAkC;YACpC;QACF;QAEA,2DAA2D;QAC3DC,2BAA2BkB,0BAA0B;QAErD,IAAI,CAAC9C,kBAAkB;YACrB,sFAAsF;YACtF,IAAI,CAACD,eAAe6C,oBAAoBd,eAAe,CAACiB,MAAM,GAAG,GAAG;gBAClE,MAAMC,iBAAiBnC,wBAAwBoC,CAAAA,IAAKA,MAAML,oBAAoBd,eAAe,CAAC,EAAE,EAAEoB,GAAG;gBAErG,IAAIF,2BAAAA,qCAAAA,eAAgBG,EAAE,EAAE;oBACtBvB,2BAA2BwB,KAAK,CAACJ,eAAeG,EAAE;gBACpD;YACF,OAGK;gBACHvB,2BAA2BW,KAAK;YAClC;QACF;QAEA,OAAO;YACLX,2BAA2ByB,IAAI;QACjC;IAEA,+DAA+D;IAC/D,uDAAuD;IACzD,GAAG,EAAE;IAEL,MAAMC,UAAUhF,MAAMiF,WAAW,CAAC;QAChC,IAAI5B,kCAAkC;YACpC;QACF;QAEAC,2BAA2B4B,0BAA0B;QAErD,IAAIjC,0BAA0B;YAC5BK,2BAA2B6B,oBAAoB;QACjD;IACF,GAAG;QAAC7B;QAA4BD;QAAkCJ;KAAyB;IAE3F,MAAMmC,SAASpF,MAAMiF,WAAW,CAAC;QAC/B,IAAI5B,kCAAkC;YACpC;QACF;QAEAC,2BAA2BkB,0BAA0B;IACvD,GAAG;QAAClB;QAA4BD;KAAiC;IAEjE,MAAMgC,QAAsB;QAC1BC,YAAY;YACVC,MAAM;QACR;QACAA,MAAMnF,KAAKoF,MAAM,CACfvF,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FuB,KAAKnB,cAAcmB,KAAkCM,iBAAiBD,4BAA4BW;YAClGiD,MAAMhE,cAAc,SAAS;YAC7BiE,UAAU;YACV,GAAGnE,KAAK;QACV,IACA;YAAEoE,aAAa;QAAM;QAEvBC,YAAY,CAAC3D;QACbR;QACA8B;QACAD;QACApB;QACA,GAAGP,gBAAgB;QACnB,GAAG2C,mBAAmB;IACxB;IAEAe,MAAME,IAAI,CAAC7B,SAAS,GAAGvD,iBAAiBD,eAAemF,MAAME,IAAI,CAAC7B,SAAS,EAAEA;IAC7E2B,MAAME,IAAI,CAACP,OAAO,GAAG7E,iBAAiBD,eAAemF,MAAME,IAAI,CAACP,OAAO,EAAEA;IACzEK,MAAME,IAAI,CAACH,MAAM,GAAGjF,iBAAiBD,eAAemF,MAAME,IAAI,CAACH,MAAM,EAAEA;IAEvE,OAAOC;AACT,EAAE"}

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

@@ -1,7 +1,7 @@
 'use client';
 
-import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { __styles, mergeClasses } from "@griffel/react";
 export const listboxClassNames = {
   root: 'fui-Listbox'
 };

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from \"@fluentui/react-theme\";\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nexport const listboxClassNames = {\n    root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        backgroundColor: tokens.colorNeutralBackground1,\n        boxSizing: 'border-box',\n        display: 'flex',\n        flexDirection: 'column',\n        minWidth: '160px',\n        overflowY: 'auto',\n        outline: `1px solid ${tokens.colorTransparentStroke}`,\n        padding: tokens.spacingHorizontalXS,\n        rowGap: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */ export const useListboxStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGrB,SAAS,CAAC,CAAC;EAC1B;EACAoB,KAAK,CAACrB,IAAI,CAACuB,SAAS,GAAGzB,YAAY,CAACC,iBAAiB,CAACC,IAAI,EAAEsB,MAAM,CAACtB,IAAI,EAAEqB,KAAK,CAACrB,IAAI,CAACuB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Listbox/useListboxStyles.styles.raw.js

@@ -1,6 +1,6 @@
 'use client';
-import { tokens } from '@fluentui/react-theme';
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { makeStyles, mergeClasses } from "@griffel/react";
 export const listboxClassNames = {
     root: 'fui-Listbox'
 };

package/lib/components/Option/Option.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useOption_unstable } from './useOption';
-import { renderOption_unstable } from './renderOption';
-import { useOptionStyles_unstable } from './useOptionStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useOption_unstable } from "./useOption.js";
+import { renderOption_unstable } from "./renderOption.js";
+import { useOptionStyles_unstable } from "./useOptionStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Option component: a styled child option of a Combobox
  */ export const Option = /*#__PURE__*/ React.forwardRef((props, ref)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,2BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Option/Option.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport type { OptionProps } from './Option.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Option component: a styled child option of a Combobox\n */\nexport const Option: ForwardRefComponent<OptionProps> = React.forwardRef((props, ref) => {\n  const state = useOption_unstable(props, ref);\n\n  useOptionStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n\n  return renderOption_unstable(state);\n});\n\nOption.displayName = 'Option';\n"],"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,8BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib/components/Option/index.js

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

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

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

package/lib/components/Option/renderOption.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Option
  */ export const renderOption_unstable = (state)=>{

package/lib/components/Option/useOption.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';
-import { useActiveDescendantContext } from '@fluentui/react-aria';
-import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
-import { useListboxContext_unstable } from '../../contexts/ListboxContext';
+import * as React from "react";
+import { getIntrinsicElementProps, useId, useMergedRefs, slot } from "@fluentui/react-utilities";
+import { useActiveDescendantContext } from "@fluentui/react-aria";
+import { CheckmarkFilled, Checkmark12Filled } from "@fluentui/react-icons";
+import { useListboxContext_unstable } from "../../contexts/ListboxContext.js";
 function getTextString(text, children) {
     if (text !== undefined) {
         return text;

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const state = useOptionBase_unstable(props, ref);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (state.multiselect) {\n    CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n  }\n\n  if (state.checkIcon) {\n    state.checkIcon.children ??= CheckIcon;\n  }\n\n  return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Option/useOption.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const state = useOptionBase_unstable(props, ref);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (state.multiselect) {\n    CheckIcon = state.selected ? <Checkmark12Filled /> : '';\n  }\n\n  if (state.checkIcon) {\n    state.checkIcon.children ??= CheckIcon;\n  }\n\n  return state;\n};\n\n/**\n * Create the base state required to render Option.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOptionBase_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useId","useMergedRefs","slot","useActiveDescendantContext","CheckmarkFilled","Checkmark12Filled","useListboxContext_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","state","useOptionBase_unstable","CheckIcon","multiselect","selected","checkIcon","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","controller","activeDescendantController","ctx","registerOption","selectedOptions","find","o","selectOption","onOptionClick","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","always","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACjG,SAASC,0BAA0B,QAAQ,uBAAuB;AAClE,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,wBAAwB;AAC3E,SAASC,0BAA0B,QAAQ,mCAAgC;AAI3E,SAASC,cAAcC,IAAwB,EAAEC,QAAyB;IACxE,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT;IAEA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBd,MAAMe,QAAQ,CAACC,OAAO,CAACL,UAAUM,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BJ,cAAcI;QAChB,OAAO;YACLH,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCI,QAAQC,IAAI,CAAC;IACf;IAEA,OAAON;AACT;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMO,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,QAAQC,uBAAuBH,OAAOC;IAE5C,aAAa;IACb,IAAIG,0BAA6B,oBAACnB;IAClC,IAAIiB,MAAMG,WAAW,EAAE;QACrBD,YAAYF,MAAMI,QAAQ,iBAAG,oBAACpB,2BAAuB;IACvD;IAEA,IAAIgB,MAAMK,SAAS,EAAE;YACnBL;;QAAAA,cAAAA,mBAAAA,MAAMK,SAAS,EAACjB,yDAAhBY,iBAAgBZ,WAAac;IAC/B;IAEA,OAAOF;AACT,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMC,yBAAyB,CAACH,OAAoBC;IACzD,MAAM,EAAEX,QAAQ,EAAEkB,QAAQ,EAAEnB,IAAI,EAAEoB,KAAK,EAAE,GAAGT;IAC5C,MAAMU,YAAY/B,MAAMgC,MAAM,CAAc;IAC5C,MAAMC,aAAaxB,cAAcC,MAAMC;IACvC,MAAMuB,cAAcJ,kBAAAA,mBAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAME,KAAKjC,MAAM,iBAAiBmB,MAAMc,EAAE;IAE1C,8CAA8C;IAC9C,MAAMC,aAAapC,MAAMqC,OAAO,CAC9B,IAAO,CAAA;YAAEF;YAAIN;YAAUnB,MAAMuB;YAAYH,OAAOI;QAAY,CAAA,GAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEI,YAAYC,0BAA0B,EAAE,GAAGlC;IACnD,MAAMqB,cAAclB,2BAA2BgC,CAAAA,MAAOA,IAAId,WAAW;IACrE,MAAMe,iBAAiBjC,2BAA2BgC,CAAAA,MAAOA,IAAIC,cAAc;IAC3E,MAAMd,WAAWnB,2BAA2BgC,CAAAA;QAC1C,MAAME,kBAAkBF,IAAIE,eAAe;QAE3C,OAAOR,gBAAgBtB,aAAa8B,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMV,iBAAiBtB;IACvF;IACA,MAAMiC,eAAerC,2BAA2BgC,CAAAA,MAAOA,IAAIK,YAAY;IACvE,MAAMC,gBAAgBtC,2BAA2BgC,CAAAA,MAAOA,IAAIM,aAAa;IAEzE,MAAMC,UAAU,CAACC;YAYf3B;QAXA,IAAIQ,UAAU;YACZmB,MAAMC,cAAc;YACpB;QACF;QAEAV,2BAA2BW,KAAK,CAACf;QAEjC,0BAA0B;QAC1BU,aAAaG,OAAOZ;QAEpBU,cAAcE;SACd3B,iBAAAA,MAAM0B,OAAO,cAAb1B,qCAAAA,oBAAAA,OAAgB2B;IAClB;IAEA,oCAAoC;IACpChD,MAAMmD,SAAS,CAAC;QACd,IAAIhB,MAAMJ,UAAUqB,OAAO,EAAE;YAC3B,OAAOX,eAAeL,YAAYL,UAAUqB,OAAO;QACrD;IACF,GAAG;QAACjB;QAAIC;QAAYK;KAAe;IAEnC,MAAMY,gBAAgB3B,cAClB;QAAE4B,MAAM;QAAoB,gBAAgB3B;IAAS,IACrD;QAAE2B,MAAM;QAAU,iBAAiB3B;IAAS;IAEhD,OAAO;QACL4B,YAAY;YACVC,MAAM;YACN5B,WAAW;QACb;QACA4B,MAAMpD,KAAKqD,MAAM,CACfxD,yBAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FqB,KAAKnB,cAAcmB,KAAKS;YACxB,iBAAiBF,WAAY,SAAmBjB;YAChDuB;YACA,GAAGkB,aAAa;YAChB,GAAGhC,KAAK;YACR0B;QACF,IACA;YAAEW,aAAa;QAAM;QAEvB9B,WAAWxB,KAAKuD,QAAQ,CAACtC,MAAMO,SAAS,EAAE;YACxCgC,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;YACjB;YACAH,aAAa;QACf;QACA7B;QACAH;QACAC;QACA,iBAAiB;QACjBmC,cAAc;QACdC,QAAQ;IACV;AACF,EAAE"}

package/lib/components/Option/useOptionStyles.styles.js

@@ -1,8 +1,8 @@
 'use client';
 
-import { tokens } from '@fluentui/react-theme';
-import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from "@fluentui/react-aria";
+import { __styles, mergeClasses, shorthands } from "@griffel/react";
 export const optionClassNames = {
   root: 'fui-Option',
   checkIcon: 'fui-Option__checkIcon'

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","interactive","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative'\n    },\n    interactive: {\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'default',\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        flexShrink: 0,\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: tokens.borderRadiusSmall,\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","interactive","Jwef8y","Bi91k9c","zqbkvg","h82x05","cqj998","j3hlsh","ecr2s2","lj723h","Btxx2vb","sltcwy","dnwvvm","Blyvkvs","active","Bowz1zl","oxogb1","Ix2sn8","q7v32p","B7cbj04","Bewtojm","b50fsz","B1wzb3v","Bqwk70n","B37u8z8","avt0cx","f0sref","B9fkznv","Be3o27t","Bertapg","B53xpsf","Bsv72rj","B39dzdd","Btq9bd3","Bqfxd14","atup0s","Fffuxt","Bttcd12","Beitzug","Bqougee","B86i8pi","Bhijsxg","kktds4","Bmau3bo","npektv","disabled","B7iucu3","selected","Bnnss6s","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","multiselectCheckDisabled","d","p","h","a","m","useOptionStyles_unstable","state","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from \"@fluentui/react-theme\";\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from \"@fluentui/react-aria\";\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nexport const optionClassNames = {\n    root: 'fui-Option',\n    checkIcon: 'fui-Option__checkIcon'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        alignItems: 'center',\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground1,\n        columnGap: tokens.spacingHorizontalXS,\n        cursor: 'pointer',\n        display: 'flex',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        lineHeight: tokens.lineHeightBase300,\n        padding: `${tokens.spacingVerticalSNudge} ${tokens.spacingHorizontalS}`,\n        position: 'relative'\n    },\n    interactive: {\n        ':hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover,\n            color: tokens.colorNeutralForeground1Hover,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        },\n        ':active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed,\n            color: tokens.colorNeutralForeground1Pressed,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForeground1Hover)\n        }\n    },\n    active: {\n        [`[${ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE}]::after`]: {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            border: `2px solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            top: '-2px',\n            bottom: '-2px',\n            left: '-2px',\n            right: '-2px'\n        }\n    },\n    disabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'default',\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\n        flexShrink: 0,\n        fontSize: tokens.fontSizeBase400,\n        // Shift icon(s) to the left to give text content extra spacing without needing an extra node\n        // This is done instead of gap since the extra space only exists between icon > content, not icon > icon\n        marginLeft: `calc(${tokens.spacingHorizontalXXS} * -1)`,\n        marginRight: tokens.spacingHorizontalXXS,\n        visibility: 'hidden',\n        '& svg': {\n            display: 'block'\n        }\n    },\n    selectedCheck: {\n        visibility: 'visible'\n    },\n    multiselectCheck: {\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStrokeAccessible}`,\n        borderRadius: tokens.borderRadiusSmall,\n        boxSizing: 'border-box',\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        fill: 'currentColor',\n        fontSize: '12px',\n        height: '16px',\n        width: '16px',\n        visibility: 'visible'\n    },\n    selectedMultiselectCheck: {\n        backgroundColor: tokens.colorCompoundBrandBackground,\n        color: tokens.colorNeutralForegroundInverted,\n        ...shorthands.borderColor(tokens.colorCompoundBrandBackground)\n    },\n    checkDisabled: {\n        color: tokens.colorNeutralForegroundDisabled,\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    multiselectCheckDisabled: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, !disabled && styles.interactive, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, disabled && multiselect && styles.multiselectCheckDisabled, state.checkIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Option/useOptionStyles.styles.raw.js

@@ -1,7 +1,7 @@
 'use client';
-import { tokens } from '@fluentui/react-theme';
-import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from "@fluentui/react-aria";
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
 export const optionClassNames = {
     root: 'fui-Option',
     checkIcon: 'fui-Option__checkIcon'

package/lib/components/OptionGroup/OptionGroup.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useOptionGroup_unstable } from './useOptionGroup';
-import { renderOptionGroup_unstable } from './renderOptionGroup';
-import { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useOptionGroup_unstable } from "./useOptionGroup.js";
+import { renderOptionGroup_unstable } from "./renderOptionGroup.js";
+import { useOptionGroupStyles_unstable } from "./useOptionGroupStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
  */ export const OptionGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/OptionGroup/OptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/OptionGroup/OptionGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */\nexport const OptionGroup: ForwardRefComponent<OptionGroupProps> = React.forwardRef((props, ref) => {\n  const state = useOptionGroup_unstable(props, ref);\n\n  useOptionGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n\n  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,6BAA6B,QAAQ,mCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/OptionGroup/index.js

@@ -1,4 +1,4 @@
-export { OptionGroup } from './OptionGroup';
-export { renderOptionGroup_unstable } from './renderOptionGroup';
-export { useOptionGroup_unstable } from './useOptionGroup';
-export { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
+export { OptionGroup } from "./OptionGroup.js";
+export { renderOptionGroup_unstable } from "./renderOptionGroup.js";
+export { useOptionGroup_unstable } from "./useOptionGroup.js";
+export { optionGroupClassNames, useOptionGroupStyles_unstable } from "./useOptionGroupStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}
+{"version":3,"sources":["../src/components/OptionGroup/index.ts"],"sourcesContent":["export { OptionGroup } from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\nexport { renderOptionGroup_unstable } from './renderOptionGroup';\nexport { useOptionGroup_unstable } from './useOptionGroup';\nexport { optionGroupClassNames, useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\n"],"names":["OptionGroup","renderOptionGroup_unstable","useOptionGroup_unstable","optionGroupClassNames","useOptionGroupStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,mBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,mCAAgC"}

package/lib/components/OptionGroup/renderOptionGroup.js

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of OptionGroup
  */ export const renderOptionGroup_unstable = (state)=>{

package/lib/components/OptionGroup/useOptionGroup.js

@@ -1,4 +1,4 @@
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import { getIntrinsicElementProps, useId, slot } from "@fluentui/react-utilities";
 /**
  * Create the state required to render OptionGroup.
  *

package/lib/components/OptionGroup/useOptionGroupStyles.styles.js

@@ -1,7 +1,7 @@
 'use client';
 
-import { tokens } from '@fluentui/react-theme';
-import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { __styles, mergeClasses } from "@griffel/react";
 export const optionGroupClassNames = {
   root: 'fui-OptionGroup',
   label: 'fui-OptionGroup__label'

package/lib/components/OptionGroup/useOptionGroupStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,KAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1B;EACAiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;IACb;IACAkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["tokens","__styles","mergeClasses","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","eii1in","H93o2g","Gwp8xu","Bd39igo","om0q45","Hl9o3s","sl1c2c","z4hxbw","B0i58d9","Bi9x0x4","Bgurq3m","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","d","p","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from \"@fluentui/react-theme\";\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nexport const optionGroupClassNames = {\n    root: 'fui-OptionGroup',\n    label: 'fui-OptionGroup__label'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingHorizontalXXS,\n        '&:not(:last-child)::after': {\n            content: '\"\"',\n            borderBottom: `${tokens.strokeWidthThin} solid ${tokens.colorNeutralStroke2}`,\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            margin: `0 ${`calc(${tokens.spacingHorizontalXS} * -1)`} ${tokens.spacingVerticalXS}`\n        }\n    },\n    label: {\n        borderRadius: tokens.borderRadiusMedium,\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        padding: `${tokens.spacingHorizontalS} ${tokens.spacingHorizontalSNudge}`\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAG,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAhB,KAAA;IAAAiB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAApB,MAAA;IAAAqB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGlC,SAAS,CAAC,CAAC;EAC1B;EACAiC,KAAK,CAACnC,IAAI,CAACqC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACC,IAAI,EAAEoC,MAAM,CAACpC,IAAI,EAAEmC,KAAK,CAACnC,IAAI,CAACqC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAClC,KAAK,EAAE;IACb;IACAkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,GAAGvC,YAAY,CAACC,qBAAqB,CAACE,KAAK,EAAEmC,MAAM,CAACnC,KAAK,EAAEkC,KAAK,CAAClC,KAAK,CAACoC,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/OptionGroup/useOptionGroupStyles.styles.raw.js

@@ -1,6 +1,6 @@
 'use client';
-import { tokens } from '@fluentui/react-theme';
-import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from "@fluentui/react-theme";
+import { makeStyles, mergeClasses } from "@griffel/react";
 export const optionGroupClassNames = {
     root: 'fui-OptionGroup',
     label: 'fui-OptionGroup__label'

package/lib/contexts/ComboboxContext.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext } from '@fluentui/react-context-selector';
+import { createContext } from "@fluentui/react-context-selector";
 /**
  * @deprecated - use ListboxContext instead
  * @see ListboxContext

package/lib/contexts/ListboxContext.js

@@ -1,5 +1,5 @@
 'use client';
-import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+import { createContext, useContextSelector } from "@fluentui/react-context-selector";
 const listboxContextDefaultValue = {
     activeOption: undefined,
     focusVisible: false,

package/lib/contexts/useComboboxContextValues.js

@@ -1,5 +1,5 @@
 'use client';
-import * as React from 'react';
+import * as React from "react";
 export function useComboboxContextValues(state) {
     const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {

package/lib/contexts/useListboxContextValues.js

@@ -1,7 +1,7 @@
 'use client';
-import * as React from 'react';
-import { useHasParentContext } from '@fluentui/react-context-selector';
-import { ListboxContext, useListboxContext_unstable } from './ListboxContext';
+import * as React from "react";
+import { useHasParentContext } from "@fluentui/react-context-selector";
+import { ListboxContext, useListboxContext_unstable } from "./ListboxContext.js";
 export function useListboxContextValues(state) {
     const hasListboxContext = useHasParentContext(ListboxContext);
     const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;

package/lib/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const {\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    activeDescendantController,\n  } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,mBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,uBAAuBX,2BAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBb,2BAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,2BAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}
+{"version":3,"sources":["../src/contexts/useListboxContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport type { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasListboxContext = useHasParentContext(ListboxContext);\n  const {\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    activeDescendantController,\n  } = state;\n\n  // get register/unregister functions from parent combobox context\n  const parentRegisterOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n  const onActiveDescendantChange = useListboxContext_unstable(ctx => ctx.onActiveDescendantChange);\n\n  const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => undefined,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { listbox, activeDescendant };\n}\n"],"names":["React","useHasParentContext","ListboxContext","useListboxContext_unstable","useListboxContextValues","state","hasListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","useMemo","controller"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,mCAAmC;AAEvE,SAASC,cAAc,EAAEC,0BAA0B,QAAQ,sBAAmB;AAE9E,OAAO,SAASC,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBL,oBAAoBC;IAC9C,MAAM,EACJK,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGR;IAEJ,iEAAiE;IACjE,MAAMS,uBAAuBX,2BAA2BY,CAAAA,MAAOA,IAAIL,cAAc;IACjF,MAAMM,gBAAgBb,2BAA2BY,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2Bd,2BAA2BY,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBZ,oBAAoBQ,uBAAuBJ;IAEvE,MAAMS,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdf;QACAC;QACAC;QACAC,gBAAgBQ;QAChBP;QACAC;QACAW,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBxB,MAAMyB,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYb;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEM;QAASK;IAAiB;AACrC"}

package/lib/hooks/useComboboxFilter.js

@@ -1,6 +1,6 @@
 'use client';
-import * as React from 'react';
-import { Option } from '../Option';
+import * as React from "react";
+import { Option } from "../Option.js";
 function defaultFilter(optionText, query) {
     if (query === '') {
         return true;

package/lib/hooks/useComboboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,YAAY;AAoBnC,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAEA;;CAEC,GACD,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}
+{"version":3,"sources":["../src/hooks/useComboboxFilter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Option } from '../Option';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\ntype UseComboboxFilterConfig<T extends { children: React.ReactNode; value: string } | string> = {\n  /** Provides a custom filter for the option. */\n  filter?: (optionText: string, query: string) => boolean;\n\n  /** Provides a custom message to display when there are no options. */\n  noOptionsMessage?: React.ReactNode;\n\n  /** Provides a way to map an option object to a React key. By default, \"value\" is used. */\n  optionToReactKey?: (option: T) => string;\n\n  /** Provides a way to map an option object to a text used for search. By default, \"value\" is used. */\n  optionToText?: (option: T) => string;\n\n  /** Provides a custom render for the option. */\n  renderOption?: (option: T) => JSXElement;\n};\n\nfunction defaultFilter(optionText: string, query: string) {\n  if (query === '') {\n    return true;\n  }\n\n  return optionText.toLowerCase().includes(query.toLowerCase());\n}\n\nfunction defaultToString(option: string | { value: string }) {\n  return typeof option === 'string' ? option : option.value;\n}\n\n/**\n * @internal\n */\nexport function useComboboxFilter<T extends { children: React.ReactNode; value: string } | string>(\n  query: string,\n  options: T[],\n  config: UseComboboxFilterConfig<T>,\n): JSXElement[] {\n  const {\n    filter = defaultFilter,\n    noOptionsMessage = \"We couldn't find any matches.\",\n    optionToReactKey = defaultToString,\n    optionToText = defaultToString,\n\n    renderOption = (option: T) => {\n      if (typeof option === 'string') {\n        return <Option key={option}>{option}</Option>;\n      }\n\n      return (\n        <Option {...option} key={optionToReactKey(option)} text={optionToText(option)} value={option.value}>\n          {option.children}\n        </Option>\n      );\n    },\n  } = config;\n\n  const filteredOptions = React.useMemo(() => {\n    const searchValue = query.trim();\n\n    return options.filter(option => filter(optionToText(option), searchValue));\n  }, [options, optionToText, filter, query]);\n\n  if (filteredOptions.length === 0) {\n    return [\n      <Option aria-disabled=\"true\" key=\"no-results\" text=\"\">\n        {noOptionsMessage}\n      </Option>,\n    ];\n  }\n\n  return filteredOptions.map(option => renderOption(option));\n}\n"],"names":["React","Option","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","useComboboxFilter","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,eAAY;AAoBnC,SAASC,cAAcC,UAAkB,EAAEC,KAAa;IACtD,IAAIA,UAAU,IAAI;QAChB,OAAO;IACT;IAEA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC5D;AAEA,SAASE,gBAAgBC,MAAkC;IACzD,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC3D;AAEA;;CAEC,GACD,OAAO,SAASC,kBACdN,KAAa,EACbO,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASX,aAAa,EACtBY,mBAAmB,+BAA+B,EAClDC,mBAAmBR,eAAe,EAClCS,eAAeT,eAAe,EAE9BU,eAAe,CAACT;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,qBAAO,oBAACP;gBAAOiB,KAAKV;eAASA;QAC/B;QAEA,qBACE,oBAACP;YAAQ,GAAGO,MAAM;YAAEU,KAAKH,iBAAiBP;YAASW,MAAMH,aAAaR;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOY,QAAQ;IAGtB,CAAC,EACF,GAAGR;IAEJ,MAAMS,kBAAkBrB,MAAMsB,OAAO,CAAC;QACpC,MAAMC,cAAcnB,MAAMoB,IAAI;QAE9B,OAAOb,QAAQE,MAAM,CAACL,CAAAA,SAAUK,OAAOG,aAAaR,SAASe;IAC/D,GAAG;QAACZ;QAASK;QAAcH;QAAQT;KAAM;IAEzC,IAAIiB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACL,oBAACxB;gBAAOyB,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDL;SAEJ;IACH;IAEA,OAAOO,gBAAgBM,GAAG,CAACnB,CAAAA,SAAUS,aAAaT;AACpD"}

package/lib/hooks/useTabsterEscapeIgnore.js

@@ -0,0 +1,15 @@
+'use client';
+import { useMergedTabsterAttributes_unstable, useTabsterAttributes } from "@fluentui/react-tabster";
+/**
+ * Hook to ignore Escape keydown events for a given element when Tabster is enabled.
+ * @internal
+ */ export function useTabsterEscapeIgnore(props, shouldIgnoreEscape) {
+    const ignoreEscapeKeyAttribute = useTabsterAttributes({
+        focusable: {
+            ignoreKeydown: {
+                Escape: shouldIgnoreEscape
+            }
+        }
+    });
+    return useMergedTabsterAttributes_unstable(ignoreEscapeKeyAttribute, typeof props === 'object' ? props : {});
+}

package/lib/hooks/useTabsterEscapeIgnore.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useTabsterEscapeIgnore.ts"],"sourcesContent":["'use client';\n\nimport {\n  useMergedTabsterAttributes_unstable,\n  useTabsterAttributes,\n  type TabsterDOMAttribute,\n} from '@fluentui/react-tabster';\n\n/**\n * Hook to ignore Escape keydown events for a given element when Tabster is enabled.\n * @internal\n */\nexport function useTabsterEscapeIgnore(props: unknown, shouldIgnoreEscape: boolean): TabsterDOMAttribute {\n  const ignoreEscapeKeyAttribute = useTabsterAttributes({\n    focusable: {\n      ignoreKeydown: { Escape: shouldIgnoreEscape },\n    },\n  });\n\n  return useMergedTabsterAttributes_unstable(ignoreEscapeKeyAttribute, typeof props === 'object' ? props : {});\n}\n"],"names":["useMergedTabsterAttributes_unstable","useTabsterAttributes","useTabsterEscapeIgnore","props","shouldIgnoreEscape","ignoreEscapeKeyAttribute","focusable","ignoreKeydown","Escape"],"mappings":"AAAA;AAEA,SACEA,mCAAmC,EACnCC,oBAAoB,QAEf,0BAA0B;AAEjC;;;CAGC,GACD,OAAO,SAASC,uBAAuBC,KAAc,EAAEC,kBAA2B;IAChF,MAAMC,2BAA2BJ,qBAAqB;QACpDK,WAAW;YACTC,eAAe;gBAAEC,QAAQJ;YAAmB;QAC9C;IACF;IAEA,OAAOJ,oCAAoCK,0BAA0B,OAAOF,UAAU,WAAWA,QAAQ,CAAC;AAC5G"}