@fluentui/react-combobox 9.11.8 → 9.13.0

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

@@ -1 +1 @@
-{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, mergeClasses } from '@griffel/react';\nexport const listboxClassNames = {\n  root: 'fui-Listbox'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    De3pzq: \"fxugw4r\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Bf4jedk: \"f3hsy1e\",\n    Bmxbyg5: \"f5zp4f\",\n    Bw0xxkn: 0,\n    oeaueh: 0,\n    Bpd4iqm: 0,\n    Befb4lg: \"f1iepc6i\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f1t35pdg\",\n    Belr9w4: \"fiut8dr\"\n  }\n}, {\n  d: [\".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".f3hsy1e{min-width:160px;}\", \".f5zp4f{overflow-y:auto;}\", [\".f1iepc6i{outline:1px solid var(--colorTransparentStroke);}\", {\n    p: -1\n  }], [\".f1t35pdg{padding:var(--spacingHorizontalXS);}\", {\n    p: -1\n  }], \".fiut8dr{row-gap:var(--spacingHorizontalXXS);}\"]\n});\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useListboxStyles.styles.js.map"],"names":["listboxClassNames","useListboxStyles_unstable","root","useStyles","__styles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IAmCAC,yBAAyB;eAAzBA;;;uBApC0B;AAChC,MAAMD,oBAAoB;IAC/BE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA8D;QAAqC;QAA2B;QAAqC;QAA8B;QAA6B;YAAC;YAA+D;gBAChSC,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAkD;gBACrDA,GAAG,CAAC;YACN;SAAE;QAAE;KAAiD;AACvD;AAIO,MAAMrB,4BAA4BsB,CAAAA;IACvC,MAAMC,SAASrB;IACfoB,MAAMrB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,kBAAkBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACuB,SAAS;IAC7F,OAAOF;AACT,GACA,mDAAmD"}
+{"version":3,"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { 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    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"names":["listboxClassNames","useListboxStyles_unstable","root","useStyles","__styles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bw0xxkn","oeaueh","Bpd4iqm","Befb4lg","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Belr9w4","d","p","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,iBAAiB;eAAjBA;;IAoBIC,yBAAyB;eAAzBA;;;uBArBwB;AAClC,MAAMD,oBAAoB;IAC7BE,MAAM;AACV;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAF,MAAA;QAAAG,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;KAAA;AAAA;AAeX,MAAMrB,4BAA6BsB,CAAAA;IAC1C;IACA,MAAMC,SAASrB;IACfoB,MAAMrB,IAAI,CAACuB,SAAS,GAAGC,IAAAA,mBAAY,EAAC1B,kBAAkBE,IAAI,EAAEsB,OAAOtB,IAAI,EAAEqB,MAAMrB,IAAI,CAACuB,SAAS;IAC7F,OAAOF;AACX"}

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

@@ -1 +1 @@
-{"version":3,"sources":["Option.js"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * Option component: a styled child option of a Combobox\n */ export const Option = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOption_unstable(props, ref);\n    useOptionStyles_unstable(state);\n    useCustomStyleHook_unstable('useOptionStyles_unstable')(state);\n    return renderOption_unstable(state);\n});\nOption.displayName = 'Option';\n"],"names":["Option","React","forwardRef","props","ref","state","useOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","renderOption_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;2BACY;8BACG;uCACG;qCACG;AAGjC,MAAMA,SAAS,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7D,MAAMC,QAAQC,IAAAA,6BAAkB,EAACH,OAAOC;IACxCG,IAAAA,+CAAwB,EAACF;IACzBG,IAAAA,gDAA2B,EAAC,4BAA4BH;IACxD,OAAOI,IAAAA,mCAAqB,EAACJ;AACjC;AACAL,OAAOU,WAAW,GAAG"}
+{"version":3,"sources":["Option.tsx"],"sourcesContent":["import * 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":["Option","React","forwardRef","props","ref","state","useOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","renderOption_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;2BACY;8BACG;uCACG;qCAGG;AAKrC,MAAMA,SAAAA,WAAAA,GAA2CC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQC,IAAAA,6BAAAA,EAAmBH,OAAOC;IAExCG,IAAAA,+CAAAA,EAAyBF;IAEzBG,IAAAA,gDAAAA,EAA4B,4BAA4BH;IAExD,OAAOI,IAAAA,mCAAAA,EAAsBJ;AAC/B;AAEAL,OAAOU,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

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

@@ -1 +1 @@
-{"version":3,"sources":["renderOption.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of Option\n */ export const renderOption_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.checkIcon && /*#__PURE__*/ _jsx(state.checkIcon, {}),\n            state.root.children\n        ]\n    });\n};\n"],"names":["renderOption_unstable","state","assertSlots","_jsxs","root","children","checkIcon","_jsx"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;gCACjB;AAGjB,MAAMA,wBAAwB,CAACC;IACtCC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,SAAS,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,SAAS,EAAE,CAAC;YACxDL,MAAMG,IAAI,CAACC,QAAQ;SACtB;IACL;AACJ"}
+{"version":3,"sources":["renderOption.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  assertSlots<OptionSlots>(state);\n\n  return (\n    <state.root>\n      {state.checkIcon && <state.checkIcon />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["renderOption_unstable","state","assertSlots","_jsxs","root","checkIcon","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,wBAAwB,CAACC;IACpCC,IAAAA,2BAAAA,EAAyBD;IAEzB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,SAAS,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,SAAS,EAAA,CAAA;YACnCJ,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}

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

@@ -1 +1 @@
-{"version":3,"sources":["useOption.js"],"sourcesContent":["import * 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';\nfunction getTextString(text, children) {\n    if (text !== undefined) {\n        return text;\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    // 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    return textString;\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 */ export const useOption_unstable = (props, ref)=>{\n    const { children, disabled, text, value } = props;\n    const optionRef = React.useRef(null);\n    const optionText = getTextString(text, children);\n    const optionValue = value !== null && value !== void 0 ? value : optionText;\n    // use the id if provided, otherwise use a generated id\n    const id = useId('fluent-option', props.id);\n    // data used for context registration & events\n    const optionData = React.useMemo(()=>({\n            id,\n            disabled,\n            text: optionText,\n            value: optionValue\n        }), [\n        id,\n        disabled,\n        optionText,\n        optionValue\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        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    // check icon\n    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);\n    if (multiselect) {\n        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';\n    }\n    const onClick = (event)=>{\n        var _props_onClick;\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n        activeDescendantController.focus(id);\n        // handle selection change\n        selectOption(event, optionData);\n        onOptionClick(event);\n        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);\n    };\n    // register option data with context\n    React.useEffect(()=>{\n        if (id && optionRef.current) {\n            return registerOption(optionData, optionRef.current);\n        }\n    }, [\n        id,\n        optionData,\n        registerOption\n    ]);\n    const semanticProps = multiselect ? {\n        role: 'menuitemcheckbox',\n        'aria-checked': selected\n    } : {\n        role: 'option',\n        'aria-selected': selected\n    };\n    return {\n        components: {\n            root: 'div',\n            checkIcon: 'span'\n        },\n        root: slot.always(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),\n            'aria-disabled': disabled ? 'true' : undefined,\n            id,\n            ...semanticProps,\n            ...props,\n            onClick\n        }), {\n            elementType: 'div'\n        }),\n        checkIcon: slot.optional(props.checkIcon, {\n            renderByDefault: true,\n            defaultProps: {\n                'aria-hidden': 'true',\n                children: CheckIcon\n            },\n            elementType: 'span'\n        }),\n        disabled,\n        multiselect,\n        selected,\n        // no longer used\n        focusVisible: false,\n        active: false\n    };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","_props_onClick","preventDefault","focus","call","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"mappings":"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"}
+{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport { useActiveDescendantContext } from '@fluentui/react-aria';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { useListboxContext_unstable } from '../../contexts/ListboxContext';\nimport type { OptionValue } from '../../utils/OptionCollection.types';\nimport type { OptionProps, OptionState } from './Option.types';\n\nfunction getTextString(text: string | undefined, children: React.ReactNode) {\n  if (text !== undefined) {\n    return text;\n  }\n\n  let textString = '';\n  let hasNonStringChild = false;\n  React.Children.forEach(children, child => {\n    if (typeof child === 'string') {\n      textString += child;\n    } else {\n      hasNonStringChild = true;\n    }\n  });\n\n  // warn if an Option has non-string children and no text prop\n  if (hasNonStringChild) {\n    // eslint-disable-next-line no-console\n    console.warn('Provide a `text` prop to Option components when they contain non-string children.');\n  }\n\n  return textString;\n}\n\n/**\n * Create the state required to render Option.\n *\n * The returned state can be modified with hooks such as useOptionStyles_unstable,\n * before being passed to renderOption_unstable.\n *\n * @param props - props from this instance of Option\n * @param ref - reference to root HTMLElement of Option\n */\nexport const useOption_unstable = (props: OptionProps, ref: React.Ref<HTMLElement>): OptionState => {\n  const { children, disabled, text, value } = props;\n  const optionRef = React.useRef<HTMLElement>(null);\n  const optionText = getTextString(text, children);\n  const optionValue = value ?? optionText;\n\n  // use the id if provided, otherwise use a generated id\n  const id = useId('fluent-option', props.id);\n\n  // data used for context registration & events\n  const optionData = React.useMemo<OptionValue>(\n    () => ({ id, disabled, text: optionText, value: optionValue }),\n    [id, disabled, optionText, optionValue],\n  );\n\n  // context values\n  const { controller: activeDescendantController } = useActiveDescendantContext();\n  const multiselect = useListboxContext_unstable(ctx => ctx.multiselect);\n  const registerOption = useListboxContext_unstable(ctx => ctx.registerOption);\n  const selected = useListboxContext_unstable(ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return optionValue !== undefined && selectedOptions.find(o => o === optionValue) !== undefined;\n  });\n  const selectOption = useListboxContext_unstable(ctx => ctx.selectOption);\n  const onOptionClick = useListboxContext_unstable(ctx => ctx.onOptionClick);\n\n  // check icon\n  let CheckIcon: React.ReactNode = <CheckmarkFilled />;\n  if (multiselect) {\n    CheckIcon = selected ? <Checkmark12Filled /> : '';\n  }\n\n  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (disabled) {\n      event.preventDefault();\n      return;\n    }\n\n    activeDescendantController.focus(id);\n\n    // handle selection change\n    selectOption(event, optionData);\n\n    onOptionClick(event);\n    props.onClick?.(event);\n  };\n\n  // register option data with context\n  React.useEffect(() => {\n    if (id && optionRef.current) {\n      return registerOption(optionData, optionRef.current);\n    }\n  }, [id, optionData, registerOption]);\n\n  const semanticProps = multiselect\n    ? { role: 'menuitemcheckbox', 'aria-checked': selected }\n    : { role: 'option', 'aria-selected': selected };\n\n  return {\n    components: {\n      root: 'div',\n      checkIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, optionRef) as React.Ref<HTMLDivElement>,\n        'aria-disabled': disabled ? ('true' as const) : undefined,\n        id,\n        ...semanticProps,\n        ...props,\n        onClick,\n      }),\n      { elementType: 'div' },\n    ),\n    checkIcon: slot.optional(props.checkIcon, {\n      renderByDefault: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n      elementType: 'span',\n    }),\n    disabled,\n    multiselect,\n    selected,\n    // no longer used\n    focusVisible: false,\n    active: false,\n  };\n};\n"],"names":["useOption_unstable","getTextString","text","children","undefined","textString","hasNonStringChild","React","Children","forEach","child","console","warn","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","useId","optionData","useMemo","controller","activeDescendantController","useActiveDescendantContext","multiselect","useListboxContext_unstable","ctx","registerOption","selected","selectedOptions","find","o","selectOption","onOptionClick","CheckIcon","createElement","CheckmarkFilled","Checkmark12Filled","onClick","event","preventDefault","focus","useEffect","current","semanticProps","role","components","root","checkIcon","slot","always","getIntrinsicElementProps","useMergedRefs","elementType","optional","renderByDefault","defaultProps","focusVisible","active"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAyCaA;;;eAAAA;;;;iEAzCU;gCAC8C;2BAC1B;4BACQ;gCACR;AAI3C,SAASC,cAAcC,IAAwB,EAAEC,QAAyB;IACxE,IAAID,SAASE,WAAW;QACtB,OAAOF;IACT;IAEA,IAAIG,aAAa;IACjB,IAAIC,oBAAoB;IACxBC,OAAMC,QAAQ,CAACC,OAAO,CAACN,UAAUO,CAAAA;QAC/B,IAAI,OAAOA,UAAU,UAAU;YAC7BL,cAAcK;QAChB,OAAO;YACLJ,oBAAoB;QACtB;IACF;IAEA,6DAA6D;IAC7D,IAAIA,mBAAmB;QACrB,sCAAsC;QACtCK,QAAQC,IAAI,CAAC;IACf;IAEA,OAAOP;AACT;AAWO,MAAML,qBAAqB,CAACa,OAAoBC;IACrD,MAAM,EAAEX,QAAQ,EAAEY,QAAQ,EAAEb,IAAI,EAAEc,KAAK,EAAE,GAAGH;IAC5C,MAAMI,YAAYV,OAAMW,MAAM,CAAc;IAC5C,MAAMC,aAAalB,cAAcC,MAAMC;IACvC,MAAMiB,cAAcJ,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASG;IAE7B,uDAAuD;IACvD,MAAME,KAAKC,IAAAA,qBAAAA,EAAM,iBAAiBT,MAAMQ,EAAE;IAE1C,8CAA8C;IAC9C,MAAME,aAAahB,OAAMiB,OAAO,CAC9B,IAAO,CAAA;YAAEH;YAAIN;YAAUb,MAAMiB;YAAYH,OAAOI;QAAY,CAAA,GAC5D;QAACC;QAAIN;QAAUI;QAAYC;KAAY;IAGzC,iBAAiB;IACjB,MAAM,EAAEK,YAAYC,0BAA0B,EAAE,GAAGC,IAAAA,qCAAAA;IACnD,MAAMC,cAAcC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIF,WAAW;IACrE,MAAMG,iBAAiBF,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,cAAc;IAC3E,MAAMC,WAAWH,IAAAA,0CAAAA,EAA2BC,CAAAA;QAC1C,MAAMG,kBAAkBH,IAAIG,eAAe;QAE3C,OAAOb,gBAAgBhB,aAAa6B,gBAAgBC,IAAI,CAACC,CAAAA,IAAKA,MAAMf,iBAAiBhB;IACvF;IACA,MAAMgC,eAAeP,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIM,YAAY;IACvE,MAAMC,gBAAgBR,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIO,aAAa;IAEzE,aAAa;IACb,IAAIC,YAAAA,WAAAA,GAA6B/B,OAAAgC,aAAA,CAACC,2BAAAA,EAAAA;IAClC,IAAIZ,aAAa;QACfU,YAAYN,WAAAA,WAAAA,GAAWzB,OAAAgC,aAAA,CAACE,6BAAAA,EAAAA,QAAuB;IACjD;IAEA,MAAMC,UAAU,CAACC;YAYf9B;QAXA,IAAIE,UAAU;YACZ4B,MAAMC,cAAc;YACpB;QACF;QAEAlB,2BAA2BmB,KAAK,CAACxB;QAEjC,0BAA0B;QAC1Be,aAAaO,OAAOpB;QAEpBc,cAAcM;QACd9B,CAAAA,iBAAAA,MAAM6B,OAAO,AAAPA,MAAO,QAAb7B,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAAA,IAAAA,CAAAA,OAAgB8B;IAClB;IAEA,oCAAoC;IACpCpC,OAAMuC,SAAS,CAAC;QACd,IAAIzB,MAAMJ,UAAU8B,OAAO,EAAE;YAC3B,OAAOhB,eAAeR,YAAYN,UAAU8B,OAAO;QACrD;IACF,GAAG;QAAC1B;QAAIE;QAAYQ;KAAe;IAEnC,MAAMiB,gBAAgBpB,cAClB;QAAEqB,MAAM;QAAoB,gBAAgBjB;IAAS,IACrD;QAAEiB,MAAM;QAAU,iBAAiBjB;IAAS;IAEhD,OAAO;QACLkB,YAAY;YACVC,MAAM;YACNC,WAAW;QACb;QACAD,MAAME,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FzC,KAAK0C,IAAAA,6BAAAA,EAAc1C,KAAKG;YACxB,iBAAiBF,WAAY,SAAmBX;YAChDiB;YACA,GAAG2B,aAAa;YAChB,GAAGnC,KAAK;YACR6B;QACF,IACA;YAAEe,aAAa;QAAM;QAEvBL,WAAWC,oBAAAA,CAAKK,QAAQ,CAAC7C,MAAMuC,SAAS,EAAE;YACxCO,iBAAiB;YACjBC,cAAc;gBACZ,eAAe;gBACfzD,UAAUmC;YACZ;YACAmB,aAAa;QACf;QACA1C;QACAa;QACAI;QACA,iBAAiB;QACjB6B,cAAc;QACdC,QAAQ;IACV;AACF"}

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

@@ -334,6 +334,7 @@ const optionClassNames = {
     ]
 });
 const useOptionStyles_unstable = (state)=>{
+    'use no memo';
     const { disabled, multiselect, selected } = state;
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);

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

@@ -1 +1 @@
-{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { ACTIVEDESCENDANT_FOCUSVISIBLE_ATTRIBUTE } from '@fluentui/react-aria';\nimport { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    Bt984gj: \"f122n59\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    sj55zd: \"f19n0e5\",\n    i8kkvl: \"f1ufnopg\",\n    Bceei9c: \"f1k6fduh\",\n    mc9l5x: \"f22iagw\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bg96gwp: \"f1i3iumi\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"fm5eomj\",\n    qhf8xq: \"f10pi13n\",\n    Jwef8y: \"f1knas48\",\n    Bi91k9c: \"feu1g3u\",\n    zqbkvg: \"fo79ri9\",\n    h82x05: [\"f1osiabc\", \"f1e8le25\"],\n    cqj998: \"f1yusjty\",\n    j3hlsh: [\"f1e8le25\", \"f1osiabc\"],\n    ecr2s2: \"fb40n2d\",\n    lj723h: \"f1g4hkjv\",\n    Btxx2vb: \"f1lnr2zp\",\n    sltcwy: [\"f1ogfk9z\", \"f1g7j8ec\"],\n    dnwvvm: \"fiuf46r\",\n    Blyvkvs: [\"f1g7j8ec\", \"f1ogfk9z\"]\n  },\n  active: {\n    Bowz1zl: \"f11vrvdw\",\n    oxogb1: \"f17hxjb7\",\n    Ix2sn8: \"f1dha69c\",\n    q7v32p: \"f1lm7500\",\n    B7cbj04: 0,\n    Bewtojm: 0,\n    b50fsz: 0,\n    B1wzb3v: 0,\n    Bqwk70n: 0,\n    B37u8z8: 0,\n    avt0cx: 0,\n    f0sref: 0,\n    B9fkznv: 0,\n    Be3o27t: 0,\n    Bertapg: 0,\n    B53xpsf: 0,\n    Bsv72rj: 0,\n    B39dzdd: 0,\n    Btq9bd3: 0,\n    Bqfxd14: 0,\n    atup0s: \"fo7xqb\",\n    Fffuxt: 0,\n    Bttcd12: 0,\n    Beitzug: 0,\n    Bqougee: 0,\n    B86i8pi: \"f1kurthe\",\n    Bhijsxg: \"fwq15dy\",\n    kktds4: \"f1pb3wry\",\n    Bmau3bo: [\"ftjv2f4\", \"f1flhb1f\"],\n    npektv: [\"f1flhb1f\", \"ftjv2f4\"]\n  },\n  disabled: {\n    sj55zd: \"f1s2aq7o\",\n    Jwef8y: \"f9ql6rf\",\n    Bi91k9c: \"fvgxktp\",\n    zqbkvg: \"f185j3qj\",\n    h82x05: [\"f1dligi3\", \"f1vydzie\"],\n    cqj998: \"fjw1di3\",\n    j3hlsh: [\"f1vydzie\", \"f1dligi3\"],\n    ecr2s2: \"fgj9um3\",\n    lj723h: \"f19wldhg\",\n    Btxx2vb: \"f1ss0kt2\",\n    sltcwy: [\"f1t6oli3\", \"fjy9ci8\"],\n    dnwvvm: \"fresaxk\",\n    Blyvkvs: [\"fjy9ci8\", \"f1t6oli3\"],\n    Bbusuzp: \"f1dcs8yz\"\n  },\n  selected: {},\n  checkIcon: {\n    Be2twd7: \"fod5ikn\",\n    Frg6f3: [\"f18b9hdq\", \"fn6qj8t\"],\n    t21cq0: [\"f1xk557c\", \"f1h9en5y\"],\n    Bcdw1i0: \"fd7fpy0\",\n    Bo70h7d: \"fvc9v3g\"\n  },\n  selectedCheck: {\n    Bcdw1i0: \"f1022m68\"\n  },\n  multiselectCheck: {\n    Bgfg5da: 0,\n    B9xav0g: 0,\n    oivjwe: 0,\n    Bn0qgzm: 0,\n    B4g9neb: 0,\n    zhjwy3: 0,\n    wvpqe5: 0,\n    ibv6hh: 0,\n    u1mtju: 0,\n    h3c5rm: 0,\n    vrafjx: 0,\n    Bekrc4i: 0,\n    i8vvqc: 0,\n    g2u3we: 0,\n    icvyot: 0,\n    B4j52fo: 0,\n    irswps: \"f1l3cf7o\",\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"fq9zq91\",\n    B7ck84d: \"f1ewtqcl\",\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bkfmm31: \"f1w9h62z\",\n    Be2twd7: \"f1ugzwwg\",\n    Bqenvij: \"fd461yt\",\n    a9b677: \"fjw5fx7\",\n    Bcdw1i0: \"f1022m68\"\n  },\n  selectedMultiselectCheck: {\n    De3pzq: \"ftywsgz\",\n    sj55zd: \"fqpbvvt\",\n    g2u3we: \"f3xi7mh\",\n    h3c5rm: [\"ftovhe4\", \"f1wczvin\"],\n    B9xav0g: \"f68vbr6\",\n    zhjwy3: [\"f1wczvin\", \"ftovhe4\"]\n  },\n  checkDisabled: {\n    sj55zd: \"f1s2aq7o\",\n    Bbusuzp: \"f1dcs8yz\"\n  },\n  multiselectCheckDisabled: {\n    g2u3we: \"f1r1t4y1\",\n    h3c5rm: [\"fmj8ijw\", \"figx54m\"],\n    B9xav0g: \"f360ss8\",\n    zhjwy3: [\"figx54m\", \"fmj8ijw\"]\n  }\n}, {\n  d: [\".f122n59{align-items:center;}\", [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".f19n0e5{color:var(--colorNeutralForeground1);}\", \".f1ufnopg{column-gap:var(--spacingHorizontalXS);}\", \".f1k6fduh{cursor:pointer;}\", \".f22iagw{display:flex;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", [\".fm5eomj{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalS);}\", {\n    p: -1\n  }], \".f10pi13n{position:relative;}\", \".f11vrvdw[data-activedescendant-focusvisible]::after{content:\\\"\\\";}\", \".f17hxjb7[data-activedescendant-focusvisible]::after{position:absolute;}\", \".f1dha69c[data-activedescendant-focusvisible]::after{pointer-events:none;}\", \".f1lm7500[data-activedescendant-focusvisible]::after{z-index:1;}\", [\".fo7xqb[data-activedescendant-focusvisible]::after{border:2px solid var(--colorStrokeFocus2);}\", {\n    p: -2\n  }], [\".f1kurthe[data-activedescendant-focusvisible]::after{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".fwq15dy[data-activedescendant-focusvisible]::after{top:-2px;}\", \".f1pb3wry[data-activedescendant-focusvisible]::after{bottom:-2px;}\", \".ftjv2f4[data-activedescendant-focusvisible]::after{left:-2px;}\", \".f1flhb1f[data-activedescendant-focusvisible]::after{right:-2px;}\", \".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}\", \".fod5ikn{font-size:var(--fontSizeBase400);}\", \".f18b9hdq{margin-left:calc(var(--spacingHorizontalXXS) * -1);}\", \".fn6qj8t{margin-right:calc(var(--spacingHorizontalXXS) * -1);}\", \".f1xk557c{margin-right:var(--spacingHorizontalXXS);}\", \".f1h9en5y{margin-left:var(--spacingHorizontalXXS);}\", \".fd7fpy0{visibility:hidden;}\", \".fvc9v3g svg{display:block;}\", \".f1022m68{visibility:visible;}\", [\".f1l3cf7o{border:var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);}\", {\n    p: -2\n  }], [\".fq9zq91{border-radius:var(--borderRadiusSmall);}\", {\n    p: -1\n  }], \".f1ewtqcl{box-sizing:border-box;}\", \".f4d9j23{justify-content:center;}\", \".f1w9h62z{fill:currentColor;}\", \".f1ugzwwg{font-size:12px;}\", \".fd461yt{height:16px;}\", \".fjw5fx7{width:16px;}\", \".ftywsgz{background-color:var(--colorCompoundBrandBackground);}\", \".fqpbvvt{color:var(--colorNeutralForegroundInverted);}\", \".f3xi7mh{border-top-color:var(--colorCompoundBrandBackground);}\", \".ftovhe4{border-right-color:var(--colorCompoundBrandBackground);}\", \".f1wczvin{border-left-color:var(--colorCompoundBrandBackground);}\", \".f68vbr6{border-bottom-color:var(--colorCompoundBrandBackground);}\", \".f1r1t4y1{border-top-color:var(--colorNeutralForegroundDisabled);}\", \".fmj8ijw{border-right-color:var(--colorNeutralForegroundDisabled);}\", \".figx54m{border-left-color:var(--colorNeutralForegroundDisabled);}\", \".f360ss8{border-bottom-color:var(--colorNeutralForegroundDisabled);}\"],\n  h: [\".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}\", \".feu1g3u:hover{color:var(--colorNeutralForeground1Hover);}\", \".fo79ri9:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}\", \".f1osiabc:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}\", \".f1e8le25:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}\", \".f1yusjty:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}\", \".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}\", \".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}\", \".f185j3qj:hover .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}\", \".f1dligi3:hover .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}\", \".f1vydzie:hover .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}\", \".fjw1di3:hover .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}\"],\n  a: [\".fb40n2d:active{background-color:var(--colorNeutralBackground1Pressed);}\", \".f1g4hkjv:active{color:var(--colorNeutralForeground1Pressed);}\", \".f1lnr2zp:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForeground1Hover);}\", \".f1ogfk9z:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForeground1Hover);}\", \".f1g7j8ec:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForeground1Hover);}\", \".fiuf46r:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForeground1Hover);}\", \".fgj9um3:active{background-color:var(--colorTransparentBackground);}\", \".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}\", \".f1ss0kt2:active .fui-Option__checkIcon{border-top-color:var(--colorNeutralForegroundDisabled);}\", \".f1t6oli3:active .fui-Option__checkIcon{border-right-color:var(--colorNeutralForegroundDisabled);}\", \".fjy9ci8:active .fui-Option__checkIcon{border-left-color:var(--colorNeutralForegroundDisabled);}\", \".fresaxk:active .fui-Option__checkIcon{border-bottom-color:var(--colorNeutralForegroundDisabled);}\"],\n  m: [[\"@media (forced-colors: active){.f1dcs8yz{color:GrayText;}}\", {\n    m: \"(forced-colors: active)\"\n  }]]\n});\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = state => {\n  const {\n    disabled,\n    multiselect,\n    selected\n  } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n  if (state.checkIcon) {\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//# sourceMappingURL=useOptionStyles.styles.js.map"],"names":["optionClassNames","useOptionStyles_unstable","root","checkIcon","useStyles","__styles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","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","Bbusuzp","selected","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","state","multiselect","styles","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { 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        ':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        ':hover': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackground,\n            color: tokens.colorNeutralForegroundDisabled,\n            [`& .${optionClassNames.checkIcon}`]: shorthands.borderColor(tokens.colorNeutralForegroundDisabled)\n        },\n        '@media (forced-colors: active)': {\n            color: 'GrayText'\n        }\n    },\n    selected: {},\n    checkIcon: {\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    'use no memo';\n    const { disabled, multiselect, selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);\n    if (state.checkIcon) {\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"],"names":["optionClassNames","useOptionStyles_unstable","root","checkIcon","useStyles","__styles","Bt984gj","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","qhf8xq","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","Bbusuzp","selected","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","state","multiselect","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["OptionGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n/**\n * OptionGroup component: allows grouping of Option components within a Combobox\n */ export const OptionGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useOptionGroup_unstable(props, ref);\n    useOptionGroupStyles_unstable(state);\n    useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);\n    return renderOptionGroup_unstable(state);\n});\nOptionGroup.displayName = 'OptionGroup';\n"],"names":["OptionGroup","React","forwardRef","props","ref","state","useOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","renderOptionGroup_unstable","displayName"],"mappings":";;;;+BAOiBA;;;eAAAA;;;;iEAPM;gCACiB;mCACG;4CACG;qCACF;AAGjC,MAAMA,cAAc,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAClE,MAAMC,QAAQC,IAAAA,uCAAuB,EAACH,OAAOC;IAC7CG,IAAAA,yDAA6B,EAACF;IAC9BG,IAAAA,gDAA2B,EAAC,iCAAiCH;IAC7D,OAAOI,IAAAA,6CAA0B,EAACJ;AACtC;AACAL,YAAYU,WAAW,GAAG"}
+{"version":3,"sources":["OptionGroup.tsx"],"sourcesContent":["import * 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":["OptionGroup","React","forwardRef","props","ref","state","useOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","renderOptionGroup_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;gCACiB;mCACG;4CACG;qCAGF;AAKrC,MAAMA,cAAAA,WAAAA,GAAqDC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQC,IAAAA,uCAAAA,EAAwBH,OAAOC;IAE7CG,IAAAA,yDAAAA,EAA8BF;IAE9BG,IAAAA,gDAAAA,EAA4B,iCAAiCH;IAE7D,OAAOI,IAAAA,6CAAAA,EAA2BJ;AACpC;AAEAL,YAAYU,WAAW,GAAG"}

package/lib-commonjs/components/OptionGroup/OptionGroup.types.js

@@ -1,4 +1,6 @@
-"use strict";
+/**
+ * State used in rendering OptionGroup
+ */ "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":""}
+{"version":3,"sources":["OptionGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type OptionGroupSlots = {\n  /** The root group wrapper */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The option group label, displayed as static text before the child options.\n   * If not using label, it's recommended to set `aria-label` directly on the OptionGroup instead.\n   */\n  label?: Slot<'span'>;\n};\n\n/**\n * OptionGroup Props\n */\nexport type OptionGroupProps = ComponentProps<Partial<OptionGroupSlots>>;\n\n/**\n * State used in rendering OptionGroup\n */\nexport type OptionGroupState = ComponentState<OptionGroupSlots>;\n"],"names":[],"rangeMappings":";;","mappings":"AAkBA;;CAEC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}

package/lib-commonjs/components/OptionGroup/renderOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderOptionGroup.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of OptionGroup\n */ export const renderOptionGroup_unstable = (state)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ _jsxs(state.root, {\n        children: [\n            state.label && /*#__PURE__*/ _jsx(state.label, {\n                children: state.label.children\n            }),\n            state.root.children\n        ]\n    });\n};\n"],"names":["renderOptionGroup_unstable","state","assertSlots","_jsxs","root","children","label","_jsx"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;gCACjB;AAGjB,MAAMA,6BAA6B,CAACC;IAC3CC,IAAAA,2BAAW,EAACD;IACZ,OAAO,WAAW,GAAGE,IAAAA,gBAAK,EAACF,MAAMG,IAAI,EAAE;QACnCC,UAAU;YACNJ,MAAMK,KAAK,IAAI,WAAW,GAAGC,IAAAA,eAAI,EAACN,MAAMK,KAAK,EAAE;gBAC3CD,UAAUJ,MAAMK,KAAK,CAACD,QAAQ;YAClC;YACAJ,MAAMG,IAAI,CAACC,QAAQ;SACtB;IACL;AACJ"}
+{"version":3,"sources":["renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { OptionGroupState, OptionGroupSlots } from './OptionGroup.types';\n\n/**\n * Render the final JSX of OptionGroup\n */\nexport const renderOptionGroup_unstable = (state: OptionGroupState) => {\n  assertSlots<OptionGroupSlots>(state);\n\n  return (\n    <state.root>\n      {state.label && <state.label>{state.label.children}</state.label>}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["renderOptionGroup_unstable","state","assertSlots","_jsxs","root","label","_jsx","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,6BAA6B,CAACC;IACzCC,IAAAA,2BAAAA,EAA8BD;IAE9B,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,KAAK,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,KAAK,EAAA;0BAAEJ,MAAMI,KAAK,CAACE,QAAQ;;YACjDN,MAAMG,IAAI,CAACG,QAAQ;;;AAG1B"}

package/lib-commonjs/components/OptionGroup/useOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOptionGroup.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */ export const useOptionGroup_unstable = (props, ref)=>{\n    const labelId = useId('group-label');\n    const { label } = props;\n    return {\n        components: {\n            root: 'div',\n            label: 'span'\n        },\n        root: slot.always(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: ref,\n            role: 'group',\n            'aria-labelledby': label ? labelId : undefined,\n            ...props\n        }), {\n            elementType: 'div'\n        }),\n        label: slot.optional(label, {\n            defaultProps: {\n                id: labelId,\n                role: 'presentation'\n            },\n            elementType: 'span'\n        })\n    };\n};\n"],"names":["useOptionGroup_unstable","props","ref","labelId","useId","label","components","root","slot","always","getIntrinsicElementProps","role","undefined","elementType","optional","defaultProps","id"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;iEAVM;gCAC+B;AAS3C,MAAMA,0BAA0B,CAACC,OAAOC;IAC/C,MAAMC,UAAUC,IAAAA,qBAAK,EAAC;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGJ;IAClB,OAAO;QACHK,YAAY;YACRC,MAAM;YACNF,OAAO;QACX;QACAE,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9C,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLS,MAAM;YACN,mBAAmBN,QAAQF,UAAUS;YACrC,GAAGX,KAAK;QACZ,IAAI;YACAY,aAAa;QACjB;QACAR,OAAOG,oBAAI,CAACM,QAAQ,CAACT,OAAO;YACxBU,cAAc;gBACVC,IAAIb;gBACJQ,MAAM;YACV;YACAE,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { OptionGroupProps, OptionGroupState } from './OptionGroup.types';\n\n/**\n * Create the state required to render OptionGroup.\n *\n * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,\n * before being passed to renderOptionGroup_unstable.\n *\n * @param props - props from this instance of OptionGroup\n * @param ref - reference to root HTMLElement of OptionGroup\n */\nexport const useOptionGroup_unstable = (props: OptionGroupProps, ref: React.Ref<HTMLElement>): OptionGroupState => {\n  const labelId = useId('group-label');\n  const { label } = props;\n\n  return {\n    components: {\n      root: 'div',\n      label: '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: ref as React.Ref<HTMLDivElement>,\n        role: 'group',\n        'aria-labelledby': label ? labelId : undefined,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    label: slot.optional(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n      elementType: 'span',\n    }),\n  };\n};\n"],"names":["useOptionGroup_unstable","props","ref","labelId","useId","label","components","root","slot","always","getIntrinsicElementProps","role","undefined","elementType","optional","defaultProps","id"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAaaA;;;eAAAA;;;;iEAbU;gCAC+B;AAY/C,MAAMA,0BAA0B,CAACC,OAAyBC;IAC/D,MAAMC,UAAUC,IAAAA,qBAAAA,EAAM;IACtB,MAAM,EAAEC,KAAK,EAAE,GAAGJ;IAElB,OAAO;QACLK,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMC,oBAAAA,CAAKC,MAAM,CACfC,IAAAA,wCAAAA,EAAyB,OAAO;YAC9B,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FR,KAAKA;YACLS,MAAM;YACN,mBAAmBN,QAAQF,UAAUS;YACrC,GAAGX,KAAK;QACV,IACA;YAAEY,aAAa;QAAM;QAEvBR,OAAOG,oBAAAA,CAAKM,QAAQ,CAACT,OAAO;YAC1BU,cAAc;gBACZC,IAAIb;gBACJQ,MAAM;YACR;YACAE,aAAa;QACf;IACF;AACF"}

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

@@ -98,6 +98,7 @@ const optionGroupClassNames = {
     ]
 });
 const useOptionGroupStyles_unstable = (state)=>{
+    'use no memo';
     const styles = useStyles();
     state.root.className = (0, _react.mergeClasses)(optionGroupClassNames.root, styles.root, state.root.className);
     if (state.label) {

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

@@ -1 +1 @@
-{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { __styles, 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 */\nconst useStyles = /*#__PURE__*/__styles({\n  root: {\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    Belr9w4: \"fiut8dr\",\n    B8lkq7l: \"f1xxzjds\",\n    eii1in: 0,\n    H93o2g: 0,\n    Gwp8xu: 0,\n    Bd39igo: \"f16cmn8k\",\n    om0q45: \"f5642y\",\n    Hl9o3s: \"ffdf81h\",\n    sl1c2c: 0,\n    z4hxbw: 0,\n    B0i58d9: 0,\n    Bi9x0x4: 0,\n    Bgurq3m: \"f1bsn9kn\"\n  },\n  label: {\n    Beyfa6y: 0,\n    Bbmb7ep: 0,\n    Btl43ni: 0,\n    B7oj6ja: 0,\n    Dimara: \"ft85np5\",\n    sj55zd: \"f11d4kpn\",\n    mc9l5x: \"ftgm304\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"fl43uef\",\n    Bg96gwp: \"fwrc4pm\",\n    Byoj8tv: 0,\n    uwmqm3: 0,\n    z189sj: 0,\n    z8tnut: 0,\n    B0ocmuz: \"f1mpq0zz\"\n  }\n}, {\n  d: [\".f22iagw{display:flex;}\", \".f1vx9l62{flex-direction:column;}\", \".fiut8dr{row-gap:var(--spacingHorizontalXXS);}\", \".f1xxzjds:not(:last-child)::after{content:\\\"\\\";}\", [\".f16cmn8k:not(:last-child)::after{border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);}\", {\n    p: -1\n  }], \".f5642y:not(:last-child)::after{display:block;}\", \".ffdf81h:not(:last-child)::after{padding-bottom:var(--spacingHorizontalXS);}\", [\".f1bsn9kn:not(:last-child)::after{margin:0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);}\", {\n    p: -1\n  }], [\".ft85np5{border-radius:var(--borderRadiusMedium);}\", {\n    p: -1\n  }], \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".ftgm304{display:block;}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".fl43uef{font-weight:var(--fontWeightSemibold);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", [\".f1mpq0zz{padding:var(--spacingHorizontalS) var(--spacingHorizontalSNudge);}\", {\n    p: -1\n  }]]\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = state => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useOptionGroupStyles.styles.js.map"],"names":["optionGroupClassNames","useOptionGroupStyles_unstable","root","label","useStyles","__styles","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","state","styles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IAwDAC,6BAA6B;eAA7BA;;;uBAzD0B;AAChC,MAAMD,wBAAwB;IACnCE,MAAM;IACNC,OAAO;AACT;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCH,MAAM;QACJI,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;IACAjB,OAAO;QACLkB,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRpB,QAAQ;QACRqB,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,QAAQ;QACRC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAA2B;QAAqC;QAAkD;QAAoD;YAAC;YAA6G;gBACtRC,GAAG,CAAC;YACN;SAAE;QAAE;QAAmD;QAAgF;YAAC;YAA+G;gBACrPA,GAAG,CAAC;YACN;SAAE;QAAE;YAAC;YAAsD;gBACzDA,GAAG,CAAC;YACN;SAAE;QAAE;QAAoD;QAA4B;QAA+C;QAAoD;QAAmD;YAAC;YAAgF;gBACzTA,GAAG,CAAC;YACN;SAAE;KAAC;AACL;AAIO,MAAMnC,gCAAgCoC,CAAAA;IAC3C,MAAMC,SAASlC;IACfiC,MAAMnC,IAAI,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBE,IAAI,EAAEoC,OAAOpC,IAAI,EAAEmC,MAAMnC,IAAI,CAACqC,SAAS;IACjG,IAAIF,MAAMlC,KAAK,EAAE;QACfkC,MAAMlC,KAAK,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBG,KAAK,EAAEmC,OAAOnC,KAAK,EAAEkC,MAAMlC,KAAK,CAACoC,SAAS;IACvG;IACA,OAAOF;AACT,GACA,uDAAuD"}
+{"version":3,"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { 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    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n    if (state.label) {\n        state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n    }\n    return state;\n};\n"],"names":["optionGroupClassNames","useOptionGroupStyles_unstable","root","label","useStyles","__styles","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","state","styles","className","mergeClasses"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEaA,qBAAqB;eAArBA;;IA+BIC,6BAA6B;eAA7BA;;;uBAhCwB;AAClC,MAAMD,wBAAwB;IACjCE,MAAM;IACNC,OAAO;AACX;AACA;;CAEA,GAAI,MAAMC,YAAS,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAH,MAAA;QAAAI,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;IAAA;IAAAjB,OAAA;QAAAkB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAApB,QAAA;QAAAqB,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,SAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,QAAA;QAAAC,SAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,GAAA,CAAA;YAAA;SAAA;KAAA;AAAA;AAyBX,MAAMnC,gCAAiCoC,CAAAA;IAC9C;IACA,MAAMC,SAASlC;IACfiC,MAAMnC,IAAI,CAACqC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBE,IAAI,EAAEoC,OAAOpC,IAAI,EAAEmC,MAAMnC,IAAI,CAACqC,SAAS;IACjG,IAAIF,MAAMlC,KAAK,EAAE;QACbkC,MAAMlC,KAAK,CAACoC,SAAS,GAAGC,IAAAA,mBAAY,EAACxC,sBAAsBG,KAAK,EAAEmC,OAAOnC,KAAK,EAAEkC,MAAMlC,KAAK,CAACoC,SAAS;IACzG;IACA,OAAOF;AACX"}

package/lib-commonjs/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ComboboxContext.js"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */ // eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext({\n    activeOption: undefined,\n    appearance: 'outline',\n    focusVisible: false,\n    open: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    },\n    setOpen () {\n    // noop\n    },\n    size: 'medium'\n});\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */ // eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"mappings":";;;;;;;;;;;IAKaA,eAAe;eAAfA;;IAyBAC,gBAAgB;eAAhBA;;;sCA9BiB;AAKvB,MAAMD,kBAAkBE,IAAAA,mCAAa,EAAC;IACzCC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACI,OAAO,IAAIJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC,MAAM;AACV;AAMO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}
+{"version":3,"sources":["ComboboxContext.ts"],"sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ComboboxState } from '../components/Combobox/Combobox.types';\n\n/**\n * Context shared with Combobox, Listbox, & Options\n */\nexport type ComboboxContextValue = Pick<\n  ComboboxState,\n  'activeOption' | 'appearance' | 'focusVisible' | 'open' | 'registerOption' | 'setActiveOption' | 'setOpen' | 'size'\n> & {\n  /**\n   * @deprecated - no longer used\n   */\n  selectedOptions: ComboboxState['selectedOptions'];\n\n  /**\n   * @deprecated - no longer used\n   */\n  selectOption: ComboboxState['selectOption'];\n};\n\n/**\n * @deprecated - use ListboxContext instead\n * @see ListboxContext\n */\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ComboboxContext = createContext<ComboboxContextValue>({\n  activeOption: undefined,\n  appearance: 'outline',\n  focusVisible: false,\n  open: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n  setOpen() {\n    // noop\n  },\n  size: 'medium',\n});\n\n/**\n * @deprecated - render ListboxProvider instead\n * @see ListboxProvider\n * @see useListboxContext_unstable\n */\n// eslint-disable-next-line deprecation/deprecation\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["ComboboxContext","ComboboxProvider","createContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0BaA,eAAAA;eAAAA;;IA2BAC,gBAAAA;eAAAA;;;sCArDiB;AA0BvB,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAAoC;IACjEC,cAAcC;IACdC,YAAY;IACZC,cAAc;IACdC,MAAM;IACNC;QACE,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC,MAAM;AACR;AAQO,MAAMZ,mBAAmBD,gBAAgBc,QAAQ"}

package/lib-commonjs/contexts/ListboxContext.js

@@ -12,11 +12,11 @@ _export(exports, {
     ListboxContext: function() {
         return ListboxContext;
     },
-    useListboxContext_unstable: function() {
-        return useListboxContext_unstable;
-    },
     ListboxProvider: function() {
         return ListboxProvider;
+    },
+    useListboxContext_unstable: function() {
+        return useListboxContext_unstable;
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
@@ -26,6 +26,12 @@ const listboxContextDefaultValue = {
     activeOption: undefined,
     focusVisible: false,
     multiselect: false,
+    getOptionById () {
+        return undefined;
+    },
+    getOptionsMatchingValue () {
+        return [];
+    },
     registerOption () {
         return ()=>undefined;
     },

package/lib-commonjs/contexts/ListboxContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ListboxContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst listboxContextDefaultValue = {\n    activeOption: undefined,\n    focusVisible: false,\n    multiselect: false,\n    registerOption () {\n        return ()=>undefined;\n    },\n    selectedOptions: [],\n    onOptionClick () {\n    // noop\n    },\n    onActiveDescendantChange () {\n    // noop\n    },\n    selectOption () {\n    // noop\n    },\n    setActiveOption () {\n    // noop\n    }\n};\nexport const ListboxContext = createContext(undefined);\nexport const useListboxContext_unstable = (selector)=>useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue)=>selector(ctx));\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","useListboxContext_unstable","ListboxProvider","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"mappings":";;;;;;;;;;;IAuBaA,cAAc;eAAdA;;IACAC,0BAA0B;eAA1BA;;IACAC,eAAe;eAAfA;;;;iEAzBU;sCAC2B;AAClD,MAAMC,6BAA6B;IAC/BC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACI,OAAO,IAAIH;IACf;IACAI,iBAAiB,EAAE;IACnBC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;IACAC;IACA,OAAO;IACP;AACJ;AACO,MAAMb,iBAAiBc,IAAAA,mCAAa,EAACT;AACrC,MAAMJ,6BAA6B,CAACc,WAAWC,IAAAA,wCAAkB,EAAChB,gBAAgB,CAACiB,MAAMd,0BAA0B,GAAGY,SAASE;AAC/H,MAAMf,kBAAkBF,eAAekB,QAAQ"}
+{"version":3,"sources":["ListboxContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { ActiveDescendantChangeEvent } from '@fluentui/react-aria';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'getOptionById'\n  | 'getOptionsMatchingValue'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n> & {\n  onOptionClick: (e: React.MouseEvent<HTMLElement>) => void;\n  onActiveDescendantChange?: (e: ActiveDescendantChangeEvent) => void;\n};\n\nconst listboxContextDefaultValue = {\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  getOptionById() {\n    return undefined;\n  },\n  getOptionsMatchingValue() {\n    return [];\n  },\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  onOptionClick() {\n    // noop\n  },\n  onActiveDescendantChange() {\n    // noop\n  },\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n};\n\nexport const ListboxContext = createContext<ListboxContextValue | undefined>(undefined);\n\nexport const useListboxContext_unstable = <T>(selector: ContextSelector<ListboxContextValue, T>) =>\n  useContextSelector(ListboxContext, (ctx = listboxContextDefaultValue) => selector(ctx));\n\nexport const ListboxProvider = ListboxContext.Provider;\n"],"names":["ListboxContext","ListboxProvider","useListboxContext_unstable","listboxContextDefaultValue","activeOption","undefined","focusVisible","multiselect","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","onOptionClick","onActiveDescendantChange","selectOption","setActiveOption","createContext","selector","useContextSelector","ctx","Provider"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAoDaA,cAAAA;eAAAA;;IAKAC,eAAAA;eAAAA;;IAHAC,0BAAAA;eAAAA;;;;iEAtDU;sCAC4C;AAuBnE,MAAMC,6BAA6B;IACjCC,cAAcC;IACdC,cAAc;IACdC,aAAa;IACbC;QACE,OAAOH;IACT;IACAI;QACE,OAAO,EAAE;IACX;IACAC;QACE,OAAO,IAAML;IACf;IACAM,iBAAiB,EAAE;IACnBC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;IACAC;IACE,OAAO;IACT;AACF;AAEO,MAAMf,iBAAiBgB,IAAAA,mCAAAA,EAA+CX;AAEtE,MAAMH,6BAA6B,CAAIe,WAC5CC,IAAAA,wCAAAA,EAAmBlB,gBAAgB,CAACmB,MAAMhB,0BAA0B,GAAKc,SAASE;AAE7E,MAAMlB,kBAAkBD,eAAeoB,QAAQ"}

package/lib-commonjs/contexts/useComboboxContextValues.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "useComboboxContextValues", {
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 function useComboboxContextValues(state) {
-    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
+    const { appearance, open, getOptionById, getOptionsMatchingValue, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;
     const combobox = {
         activeOption: undefined,
         appearance,
@@ -27,6 +27,8 @@ function useComboboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         registerOption,
         selectedOptions,
         selectOption,

package/lib-commonjs/contexts/useComboboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useComboboxContextValues(state) {\n    const { appearance, open, registerOption, selectedOptions, selectOption, setOpen, size, activeDescendantController, onOptionClick, onActiveDescendantChange } = state;\n    const combobox = {\n        activeOption: undefined,\n        appearance,\n        focusVisible: false,\n        open,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        setOpen,\n        size\n    };\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        registerOption,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>null,\n        onOptionClick,\n        onActiveDescendantChange\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        combobox,\n        activeDescendant,\n        listbox\n    };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,yBAAyBC,KAAK;IAC1C,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,OAAO,EAAEC,IAAI,EAAEC,0BAA0B,EAAEC,aAAa,EAAEC,wBAAwB,EAAE,GAAGV;IAChK,MAAMW,WAAW;QACbC,cAAcC;QACdZ;QACAa,cAAc;QACdZ;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBT;QACAC;IACJ;IACA,MAAMS,UAAU;QACZJ,cAAcC;QACdC,cAAc;QACdX;QACAC;QACAC;QACAU,iBAAiB,IAAI;QACrBN;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYZ;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHG;QACAM;QACAD;IACJ;AACJ"}
+{"version":3,"sources":["useComboboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { ComboboxState } from '../Combobox';\nimport type { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(\n  state: Omit<ComboboxBaseState, 'freeform'> & Pick<ComboboxState, 'activeDescendantController'>,\n): ComboboxBaseContextValues {\n  const {\n    appearance,\n    open,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setOpen,\n    size,\n    activeDescendantController,\n    onOptionClick,\n    onActiveDescendantChange,\n  } = state;\n\n  const combobox = {\n    activeOption: undefined,\n    appearance,\n    focusVisible: false,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    setOpen,\n    size,\n  };\n\n  const listbox = {\n    activeOption: undefined,\n    focusVisible: false,\n    getOptionById,\n    getOptionsMatchingValue,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption: () => null,\n    onOptionClick,\n    onActiveDescendantChange,\n  };\n\n  const activeDescendant = React.useMemo(\n    () => ({\n      controller: activeDescendantController,\n    }),\n    [activeDescendantController],\n  );\n\n  return { combobox, activeDescendant, listbox };\n}\n"],"names":["useComboboxContextValues","state","appearance","open","getOptionById","getOptionsMatchingValue","registerOption","selectedOptions","selectOption","setOpen","size","activeDescendantController","onOptionClick","onActiveDescendantChange","combobox","activeOption","undefined","focusVisible","setActiveOption","listbox","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;;iEAJO;AAIhB,SAASA,yBACdC,KAA8F;IAE9F,MAAM,EACJC,UAAU,EACVC,IAAI,EACJC,aAAa,EACbC,uBAAuB,EACvBC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,OAAO,EACPC,IAAI,EACJC,0BAA0B,EAC1BC,aAAa,EACbC,wBAAwB,EACzB,GAAGZ;IAEJ,MAAMa,WAAW;QACfC,cAAcC;QACdd;QACAe,cAAc;QACdd;QACAG;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBT;QACAC;IACF;IAEA,MAAMS,UAAU;QACdJ,cAAcC;QACdC,cAAc;QACdb;QACAC;QACAC;QACAC;QACAC;QACAU,iBAAiB,IAAM;QACvBN;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYZ;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEG;QAAUM;QAAkBD;IAAQ;AAC/C"}

package/lib-commonjs/contexts/useListboxContextValues.js

@@ -14,7 +14,7 @@ const _reactcontextselector = require("@fluentui/react-context-selector");
 const _ListboxContext = require("./ListboxContext");
 function useListboxContextValues(state) {
     const hasListboxContext = (0, _reactcontextselector.useHasParentContext)(_ListboxContext.ListboxContext);
-    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
+    const { getOptionById, getOptionsMatchingValue, multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;
     // get register/unregister functions from parent combobox context
     const parentRegisterOption = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.registerOption);
     const onOptionClick = (0, _ListboxContext.useListboxContext_unstable)((ctx)=>ctx.onOptionClick);
@@ -23,6 +23,8 @@ function useListboxContextValues(state) {
     const listbox = {
         activeOption: undefined,
         focusVisible: false,
+        getOptionById,
+        getOptionsMatchingValue,
         multiselect,
         registerOption: registerOptionValue,
         selectedOptions,

package/lib-commonjs/contexts/useListboxContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useListboxContextValues.js"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContext, useListboxContext_unstable } from './ListboxContext';\nexport function useListboxContextValues(state) {\n    const hasListboxContext = useHasParentContext(ListboxContext);\n    const { multiselect, registerOption, selectedOptions, selectOption, activeDescendantController } = state;\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    const registerOptionValue = hasListboxContext ? parentRegisterOption : registerOption;\n    const listbox = {\n        activeOption: undefined,\n        focusVisible: false,\n        multiselect,\n        registerOption: registerOptionValue,\n        selectedOptions,\n        selectOption,\n        setActiveOption: ()=>undefined,\n        onOptionClick,\n        onActiveDescendantChange\n    };\n    const activeDescendant = React.useMemo(()=>({\n            controller: activeDescendantController\n        }), [\n        activeDescendantController\n    ]);\n    return {\n        listbox,\n        activeDescendant\n    };\n}\n"],"names":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"mappings":";;;;+BAGgBA;;;eAAAA;;;;iEAHO;sCACa;gCACuB;AACpD,SAASA,wBAAwBC,KAAK;IACzC,MAAMC,oBAAoBC,IAAAA,yCAAmB,EAACC,8BAAc;IAC5D,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,eAAe,EAAEC,YAAY,EAAEC,0BAA0B,EAAE,GAAGR;IACnG,iEAAiE;IACjE,MAAMS,uBAAuBC,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAA0B,EAAC,CAACC,MAAMA,IAAIE,wBAAwB;IAC/F,MAAMC,sBAAsBb,oBAAoBQ,uBAAuBJ;IACvE,MAAMU,UAAU;QACZC,cAAcC;QACdC,cAAc;QACdd;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAIF;QACrBL;QACAC;IACJ;IACA,MAAMO,mBAAmBC,OAAMC,OAAO,CAAC,IAAK,CAAA;YACpCC,YAAYf;QAChB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACHO;QACAK;IACJ;AACJ"}
+{"version":3,"sources":["useListboxContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { 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":["useListboxContextValues","state","hasListboxContext","useHasParentContext","ListboxContext","getOptionById","getOptionsMatchingValue","multiselect","registerOption","selectedOptions","selectOption","activeDescendantController","parentRegisterOption","useListboxContext_unstable","ctx","onOptionClick","onActiveDescendantChange","registerOptionValue","listbox","activeOption","undefined","focusVisible","setActiveOption","activeDescendant","React","useMemo","controller"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;sCACa;gCAEuB;AAEpD,SAASA,wBAAwBC,KAAmB;IACzD,MAAMC,oBAAoBC,IAAAA,yCAAAA,EAAoBC,8BAAAA;IAC9C,MAAM,EACJC,aAAa,EACbC,uBAAuB,EACvBC,WAAW,EACXC,cAAc,EACdC,eAAe,EACfC,YAAY,EACZC,0BAA0B,EAC3B,GAAGV;IAEJ,iEAAiE;IACjE,MAAMW,uBAAuBC,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIN,cAAc;IACjF,MAAMO,gBAAgBF,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIC,aAAa;IACzE,MAAMC,2BAA2BH,IAAAA,0CAAAA,EAA2BC,CAAAA,MAAOA,IAAIE,wBAAwB;IAE/F,MAAMC,sBAAsBf,oBAAoBU,uBAAuBJ;IAEvE,MAAMU,UAAU;QACdC,cAAcC;QACdC,cAAc;QACdhB;QACAC;QACAC;QACAC,gBAAgBS;QAChBR;QACAC;QACAY,iBAAiB,IAAMF;QACvBL;QACAC;IACF;IAEA,MAAMO,mBAAmBC,OAAMC,OAAO,CACpC,IAAO,CAAA;YACLC,YAAYf;QACd,CAAA,GACA;QAACA;KAA2B;IAG9B,OAAO;QAAEO;QAASK;IAAiB;AACrC"}

package/lib-commonjs/hooks/useComboboxFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useComboboxFilter.js"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\nfunction defaultFilter(optionText, query) {\n    if (query === '') {\n        return true;\n    }\n    return optionText.toLowerCase().includes(query.toLowerCase());\n}\nfunction defaultToString(option) {\n    return typeof option === 'string' ? option : option.value;\n}\n/**\n * @internal\n */ export function useComboboxFilter(query, options, config) {\n    const { filter = defaultFilter, noOptionsMessage = \"We couldn't find any matches.\", optionToReactKey = defaultToString, optionToText = defaultToString, renderOption = (option)=>{\n        if (typeof option === 'string') {\n            return /*#__PURE__*/ React.createElement(Option, {\n                key: option\n            }, option);\n        }\n        return /*#__PURE__*/ React.createElement(Option, {\n            ...option,\n            key: optionToReactKey(option),\n            text: optionToText(option),\n            value: option.value\n        }, option.children);\n    } } = config;\n    const filteredOptions = React.useMemo(()=>{\n        const searchValue = query.trim();\n        return options.filter((option)=>filter(optionToText(option), searchValue));\n    }, [\n        options,\n        optionToText,\n        filter,\n        query\n    ]);\n    if (filteredOptions.length === 0) {\n        return [\n            /*#__PURE__*/ React.createElement(Option, {\n                \"aria-disabled\": \"true\",\n                key: \"no-results\",\n                text: \"\"\n            }, noOptionsMessage)\n        ];\n    }\n    return filteredOptions.map((option)=>renderOption(option));\n}\n"],"names":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","map"],"mappings":";;;;+BAaoBA;;;eAAAA;;;;iEAbG;wBACA;AACvB,SAASC,cAAcC,UAAU,EAAEC,KAAK;IACpC,IAAIA,UAAU,IAAI;QACd,OAAO;IACX;IACA,OAAOD,WAAWE,WAAW,GAAGC,QAAQ,CAACF,MAAMC,WAAW;AAC9D;AACA,SAASE,gBAAgBC,MAAM;IAC3B,OAAO,OAAOA,WAAW,WAAWA,SAASA,OAAOC,KAAK;AAC7D;AAGW,SAASR,kBAAkBG,KAAK,EAAEM,OAAO,EAAEC,MAAM;IACxD,MAAM,EAAEC,SAASV,aAAa,EAAEW,mBAAmB,+BAA+B,EAAEC,mBAAmBP,eAAe,EAAEQ,eAAeR,eAAe,EAAES,eAAe,CAACR;QACpK,IAAI,OAAOA,WAAW,UAAU;YAC5B,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;gBAC7CC,KAAKZ;YACT,GAAGA;QACP;QACA,OAAO,WAAW,GAAGS,OAAMC,aAAa,CAACC,cAAM,EAAE;YAC7C,GAAGX,MAAM;YACTY,KAAKN,iBAAiBN;YACtBa,MAAMN,aAAaP;YACnBC,OAAOD,OAAOC,KAAK;QACvB,GAAGD,OAAOc,QAAQ;IACtB,CAAC,EAAE,GAAGX;IACN,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QAClC,MAAMC,cAAcrB,MAAMsB,IAAI;QAC9B,OAAOhB,QAAQE,MAAM,CAAC,CAACJ,SAASI,OAAOG,aAAaP,SAASiB;IACjE,GAAG;QACCf;QACAK;QACAH;QACAR;KACH;IACD,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAC9B,OAAO;YACH,WAAW,GAAGV,OAAMC,aAAa,CAACC,cAAM,EAAE;gBACtC,iBAAiB;gBACjBC,KAAK;gBACLC,MAAM;YACV,GAAGR;SACN;IACL;IACA,OAAOU,gBAAgBK,GAAG,CAAC,CAACpB,SAASQ,aAAaR;AACtD"}
+{"version":3,"sources":["useComboboxFilter.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Option } from '../Option';\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) => JSX.Element;\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) {\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":["useComboboxFilter","defaultFilter","optionText","query","toLowerCase","includes","defaultToString","option","value","options","config","filter","noOptionsMessage","optionToReactKey","optionToText","renderOption","React","createElement","Option","key","text","children","filteredOptions","useMemo","searchValue","trim","length","aria-disabled","map"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAmCgBA;;;eAAAA;;;;iEAnCO;wBACA;AAmBvB,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;AAKO,SAASR,kBACdG,KAAa,EACbM,OAAY,EACZC,MAAkC;IAElC,MAAM,EACJC,SAASV,aAAa,EACtBW,mBAAmB,+BAA+B,EAClDC,mBAAmBP,eAAe,EAClCQ,eAAeR,eAAe,EAE9BS,eAAe,CAACR;QACd,IAAI,OAAOA,WAAW,UAAU;YAC9B,OAAA,WAAA,GAAOS,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOC,KAAKZ;eAASA;QAC/B;QAEA,OAAA,WAAA,GACES,OAAAC,aAAA,CAACC,cAAAA,EAAAA;YAAQ,GAAGX,MAAM;YAAEY,KAAKN,iBAAiBN;YAASa,MAAMN,aAAaP;YAASC,OAAOD,OAAOC,KAAK;WAC/FD,OAAOc,QAAQ;IAGtB,CAAC,EACF,GAAGX;IAEJ,MAAMY,kBAAkBN,OAAMO,OAAO,CAAC;QACpC,MAAMC,cAAcrB,MAAMsB,IAAI;QAE9B,OAAOhB,QAAQE,MAAM,CAACJ,CAAAA,SAAUI,OAAOG,aAAaP,SAASiB;IAC/D,GAAG;QAACf;QAASK;QAAcH;QAAQR;KAAM;IAEzC,IAAImB,gBAAgBI,MAAM,KAAK,GAAG;QAChC,OAAO;0BACLV,OAAAC,aAAA,CAACC,cAAAA,EAAAA;gBAAOS,iBAAc;gBAAOR,KAAI;gBAAaC,MAAK;eAChDR;SAEJ;IACH;IAEA,OAAOU,gBAAgBM,GAAG,CAACrB,CAAAA,SAAUQ,aAAaR;AACpD"}