@fluentui/react-combobox 9.3.4 → 9.4.0

package/lib/components/Listbox/Listbox.js

@@ -6,13 +6,11 @@ import { useListboxContextValues } from '../../contexts/useListboxContextValues'
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * Listbox component: a standalone selection control, or the popup in a Combobox
- */
-export const Listbox = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useListbox_unstable(props, ref);
-  const contextValues = useListboxContextValues(state);
-  useListboxStyles_unstable(state);
-  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);
-  return renderListbox_unstable(state, contextValues);
+ */ export const Listbox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useListbox_unstable(props, ref);
+    const contextValues = useListboxContextValues(state);
+    useListboxStyles_unstable(state);
+    useCustomStyleHook_unstable('useListboxStyles_unstable')(state);
+    return renderListbox_unstable(state, contextValues);
 });
 Listbox.displayName = 'Listbox';
-//# sourceMappingURL=Listbox.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../../../src/components/Listbox/Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,mBAAmB,QAAQ;AACpC,SAASC,sBAAsB,QAAQ;AACvC,SAASC,yBAAyB,QAAQ;AAE1C,SAASC,uBAAuB,QAAQ;AAExC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,OAAA,gBAA6CN,KAAA,CAAMO,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACzF,MAAMC,KAAA,GAAQT,mBAAA,CAAoBO,KAAA,EAAOC,GAAA;EACzC,MAAME,aAAA,GAAgBP,uBAAA,CAAwBM,KAAA;EAE9CP,yBAAA,CAA0BO,KAAA;EAE1BL,2BAAA,CAA4B,6BAA6BK,KAAA;EAEzD,OAAOR,sBAAA,CAAuBQ,KAAA,EAAOC,aAAA;AACvC;AAEAL,OAAA,CAAQM,WAAW,GAAG"}
+{"version":3,"sources":["Listbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useListbox_unstable } from './useListbox';\nimport { renderListbox_unstable } from './renderListbox';\nimport { useListboxStyles_unstable } from './useListboxStyles.styles';\nimport type { ListboxProps } from './Listbox.types';\nimport { useListboxContextValues } from '../../contexts/useListboxContextValues';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Listbox component: a standalone selection control, or the popup in a Combobox\n */\nexport const Listbox: ForwardRefComponent<ListboxProps> = React.forwardRef((props, ref) => {\n  const state = useListbox_unstable(props, ref);\n  const contextValues = useListboxContextValues(state);\n\n  useListboxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useListboxStyles_unstable')(state);\n\n  return renderListbox_unstable(state, contextValues);\n});\n\nListbox.displayName = 'Listbox';\n"],"names":["React","useListbox_unstable","renderListbox_unstable","useListboxStyles_unstable","useListboxContextValues","useCustomStyleHook_unstable","Listbox","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,uBAAuB,QAAQ,yCAAyC;AAEjF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,wBAA6CN,MAAMO,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACzF,MAAMC,QAAQT,oBAAoBO,OAAOC;IACzC,MAAME,gBAAgBP,wBAAwBM;IAE9CP,0BAA0BO;IAE1BL,4BAA4B,6BAA6BK;IAEzD,OAAOR,uBAAuBQ,OAAOC;AACvC,GAAG;AAEHL,QAAQM,WAAW,GAAG"}

package/lib/components/Listbox/Listbox.types.js

@@ -1,2 +1 @@
-export {};
-//# sourceMappingURL=Listbox.types.js.map
+export { };

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Listbox/Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"],"mappings":"AAAA"}
+{"version":3,"sources":["Listbox.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { OptionValue, OptionCollectionState } from '../../utils/OptionCollection.types';\nimport { SelectionEvents, SelectionProps, SelectionState } from '../../utils/Selection.types';\nimport type { ListboxContextValue } from '../../contexts/ListboxContext';\n\nexport type ListboxSlots = {\n  /* The root slot, a `<div>` with `role=\"listbox\"` */\n  root: Slot<'div'>;\n};\n\n/**\n * Listbox Props\n */\nexport type ListboxProps = ComponentProps<ListboxSlots> & SelectionProps;\n\n/**\n * State used in rendering Listbox\n */\nexport type ListboxState = ComponentState<ListboxSlots> &\n  OptionCollectionState &\n  Pick<SelectionProps, 'multiselect'> &\n  SelectionState & {\n    /* Option data for the currently highlighted option (not the selected option) */\n    activeOption?: OptionValue;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    selectOption(event: SelectionEvents, option: OptionValue): void;\n\n    setActiveOption(option?: OptionValue): void;\n  };\n\nexport type ListboxContextValues = {\n  listbox: ListboxContextValue;\n};\n"],"names":[],"mappings":"AAAA,WAmCE"}

package/lib/components/Listbox/index.js

@@ -3,4 +3,3 @@ export * from './Listbox.types';
 export * from './renderListbox';
 export * from './useListbox';
 export * from './useListboxStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Listbox/index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Listbox';\nexport * from './Listbox.types';\nexport * from './renderListbox';\nexport * from './useListbox';\nexport * from './useListboxStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,YAAY;AAC1B,cAAc,kBAAkB;AAChC,cAAc,kBAAkB;AAChC,cAAc,eAAe;AAC7B,cAAc,4BAA4B"}

package/lib/components/Listbox/renderListbox.js

@@ -1,16 +1,11 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 import { ListboxContext } from '../../contexts/ListboxContext';
 /**
  * Render the final JSX of Listbox
- */
-export const renderListbox_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(ListboxContext.Provider, {
-    value: contextValues.listbox
-  }, /*#__PURE__*/createElement(slots.root, slotProps.root));
+ */ export const renderListbox_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(ListboxContext.Provider, {
+        value: contextValues.listbox
+    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
 };
-//# sourceMappingURL=renderListbox.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","Provider","value","listbox","root"],"sources":["../../../src/components/Listbox/renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\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) => {\n  const { slots, slotProps } = getSlotsNext<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAE7B,SAASC,cAAc,QAAQ;AAE/B;;;AAGA,OAAO,MAAMC,sBAAA,GAAyBA,CAACC,KAAA,EAAqBC,aAAA,KAAwC;EAClG,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGN,YAAA,CAA2BG,KAAA;EAExD,oBACEJ,aAfJ,CAeKE,cAAA,CAAeM,QAAQ;IAACC,KAAA,EAAOJ,aAAA,CAAcK;kBAC5CV,aAhBN,CAgBOM,KAAA,CAAMK,IAAI,EAAKJ,SAAA,CAAUI,IAAI;AAGpC"}
+{"version":3,"sources":["renderListbox.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\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) => {\n  const { slots, slotProps } = getSlotsNext<ListboxSlots>(state);\n\n  return (\n    <ListboxContext.Provider value={contextValues.listbox}>\n      <slots.root {...slotProps.root} />\n    </ListboxContext.Provider>\n  );\n};\n"],"names":["createElement","getSlotsNext","ListboxContext","renderListbox_unstable","state","contextValues","slots","slotProps","Provider","value","listbox","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,cAAc,QAAQ,gCAAgC;AAE/D;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC,OAAqBC,gBAAwC;IAClG,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAA2BG;IAExD,qBACE,AAfJ,cAeKF,eAAeM,QAAQ;QAACC,OAAOJ,cAAcK,OAAO;qBACnD,AAhBN,cAgBOJ,MAAMK,IAAI,EAAKJ,UAAUI,IAAI;AAGpC,EAAE"}

package/lib/components/Listbox/useListbox.js

@@ -14,93 +14,81 @@ import { ComboboxContext } from '../../contexts/ComboboxContext';
  *
  * @param props - props from this instance of Listbox
  * @param ref - reference to root HTMLElement of Listbox
- */
-export const useListbox_unstable = (props, ref) => {
-  const {
-    multiselect
-  } = props;
-  const optionCollection = useOptionCollection();
-  const {
-    getCount,
-    getOptionAtIndex,
-    getIndexOfId
-  } = optionCollection;
-  const {
-    clearSelection,
-    selectedOptions,
-    selectOption
-  } = useSelection(props);
-  const [activeOption, setActiveOption] = React.useState();
-  // track whether keyboard focus outline should be shown
-  // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
-  const [focusVisible, setFocusVisible] = React.useState(false);
-  const onKeyDown = event => {
-    const action = getDropdownActionFromKey(event, {
-      open: true
-    });
-    const maxIndex = getCount() - 1;
-    const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
-    let newIndex = activeIndex;
-    switch (action) {
-      case 'Select':
-      case 'CloseSelect':
-        activeOption && selectOption(event, activeOption);
-        break;
-      default:
-        newIndex = getIndexFromAction(action, activeIndex, maxIndex);
-    }
-    if (newIndex !== activeIndex) {
-      // prevent default page scroll/keyboard action if the index changed
-      event.preventDefault();
-      setActiveOption(getOptionAtIndex(newIndex));
-      setFocusVisible(true);
-    }
-  };
-  const onMouseOver = event => {
-    setFocusVisible(false);
-  };
-  // get state from parent combobox, if it exists
-  const hasComboboxContext = useHasParentContext(ComboboxContext);
-  const comboboxActiveOption = useContextSelector(ComboboxContext, ctx => ctx.activeOption);
-  const comboboxFocusVisible = useContextSelector(ComboboxContext, ctx => ctx.focusVisible);
-  const comboboxSelectedOptions = useContextSelector(ComboboxContext, ctx => ctx.selectedOptions);
-  const comboboxSelectOption = useContextSelector(ComboboxContext, ctx => ctx.selectOption);
-  const comboboxSetActiveOption = useContextSelector(ComboboxContext, ctx => ctx.setActiveOption);
-  // without a parent combobox context, provide values directly from Listbox
-  const optionContextValues = hasComboboxContext ? {
-    activeOption: comboboxActiveOption,
-    focusVisible: comboboxFocusVisible,
-    selectedOptions: comboboxSelectedOptions,
-    selectOption: comboboxSelectOption,
-    setActiveOption: comboboxSetActiveOption
-  } : {
-    activeOption,
-    focusVisible,
-    selectedOptions,
-    selectOption,
-    setActiveOption
-  };
-  const state = {
-    components: {
-      root: 'div'
-    },
-    root: getNativeElementProps('div', {
-      ref,
-      role: multiselect ? 'menu' : 'listbox',
-      'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
-      'aria-multiselectable': multiselect,
-      tabIndex: 0,
-      ...props
-    }),
-    multiselect,
-    clearSelection,
-    ...optionCollection,
-    ...optionContextValues
-  };
-  const scrollContainerRef = useScrollOptionsIntoView(state);
-  state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);
-  state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
-  state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));
-  return state;
+ */ export const useListbox_unstable = (props, ref)=>{
+    const { multiselect  } = props;
+    const optionCollection = useOptionCollection();
+    const { getCount , getOptionAtIndex , getIndexOfId  } = optionCollection;
+    const { clearSelection , selectedOptions , selectOption  } = useSelection(props);
+    const [activeOption, setActiveOption] = React.useState();
+    // track whether keyboard focus outline should be shown
+    // tabster/keyborg doesn't work here, since the actual keyboard focus target doesn't move
+    const [focusVisible, setFocusVisible] = React.useState(false);
+    const onKeyDown = (event)=>{
+        const action = getDropdownActionFromKey(event, {
+            open: true
+        });
+        const maxIndex = getCount() - 1;
+        const activeIndex = activeOption ? getIndexOfId(activeOption.id) : -1;
+        let newIndex = activeIndex;
+        switch(action){
+            case 'Select':
+            case 'CloseSelect':
+                activeOption && selectOption(event, activeOption);
+                break;
+            default:
+                newIndex = getIndexFromAction(action, activeIndex, maxIndex);
+        }
+        if (newIndex !== activeIndex) {
+            // prevent default page scroll/keyboard action if the index changed
+            event.preventDefault();
+            setActiveOption(getOptionAtIndex(newIndex));
+            setFocusVisible(true);
+        }
+    };
+    const onMouseOver = (event)=>{
+        setFocusVisible(false);
+    };
+    // get state from parent combobox, if it exists
+    const hasComboboxContext = useHasParentContext(ComboboxContext);
+    const comboboxActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.activeOption);
+    const comboboxFocusVisible = useContextSelector(ComboboxContext, (ctx)=>ctx.focusVisible);
+    const comboboxSelectedOptions = useContextSelector(ComboboxContext, (ctx)=>ctx.selectedOptions);
+    const comboboxSelectOption = useContextSelector(ComboboxContext, (ctx)=>ctx.selectOption);
+    const comboboxSetActiveOption = useContextSelector(ComboboxContext, (ctx)=>ctx.setActiveOption);
+    // without a parent combobox context, provide values directly from Listbox
+    const optionContextValues = hasComboboxContext ? {
+        activeOption: comboboxActiveOption,
+        focusVisible: comboboxFocusVisible,
+        selectedOptions: comboboxSelectedOptions,
+        selectOption: comboboxSelectOption,
+        setActiveOption: comboboxSetActiveOption
+    } : {
+        activeOption,
+        focusVisible,
+        selectedOptions,
+        selectOption,
+        setActiveOption
+    };
+    const state = {
+        components: {
+            root: 'div'
+        },
+        root: getNativeElementProps('div', {
+            ref,
+            role: multiselect ? 'menu' : 'listbox',
+            'aria-activedescendant': hasComboboxContext ? undefined : activeOption === null || activeOption === void 0 ? void 0 : activeOption.id,
+            'aria-multiselectable': multiselect,
+            tabIndex: 0,
+            ...props
+        }),
+        multiselect,
+        clearSelection,
+        ...optionCollection,
+        ...optionContextValues
+    };
+    const scrollContainerRef = useScrollOptionsIntoView(state);
+    state.root.ref = useMergedRefs(state.root.ref, scrollContainerRef);
+    state.root.onKeyDown = useEventCallback(mergeCallbacks(state.root.onKeyDown, onKeyDown));
+    state.root.onMouseOver = useEventCallback(mergeCallbacks(state.root.onMouseOver, onMouseOver));
+    return state;
 };
-//# sourceMappingURL=useListbox.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bpd4iqm","oeaueh","Bw0xxkn","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","d","useListboxStyles_unstable","state","styles","className"],"sources":["../../../src/components/Listbox/useListboxStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { ListboxSlots, ListboxState } from './Listbox.types';\n\nexport const listboxClassNames: SlotClassNames<ListboxSlots> = {\n  root: 'fui-Listbox',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n    minWidth: '160px',\n    overflowY: 'auto',\n    ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n    ...shorthands.padding(tokens.spacingHorizontalXS),\n    rowGap: tokens.spacingHorizontalXXS,\n  },\n});\n\n/**\n * Apply styling to the Listbox slots based on the state\n */\nexport const useListboxStyles_unstable = (state: ListboxState): ListboxState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,iBAAA,GAAkD;EAC7DC,IAAA,EAAM;AACR;AAEA;;;AAGA,MAAMC,SAAA,gBAAYL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAYlB;AAEA;;;AAGA,OAAO,MAAMC,yBAAA,GAA6BC,KAAA,IAAsC;EAC9E,MAAMC,MAAA,GAASlB,SAAA;EACfiB,KAAA,CAAMlB,IAAI,CAACoB,SAAS,GAAGvB,YAAA,CAAaE,iBAAA,CAAkBC,IAAI,EAAEmB,MAAA,CAAOnB,IAAI,EAAEkB,KAAA,CAAMlB,IAAI,CAACoB,SAAS;EAE7F,OAAOF,KAAA;AACT"}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","listboxClassNames","root","useStyles","De3pzq","B7ck84d","mc9l5x","Beiy3e4","Bf4jedk","Bmxbyg5","Bpd4iqm","oeaueh","Bw0xxkn","z8tnut","z189sj","Byoj8tv","uwmqm3","Belr9w4","d","useListboxStyles_unstable","state","styles","className"],"sources":["useListboxStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } 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        ...shorthands.outline('1px', 'solid', tokens.colorTransparentStroke),\n        ...shorthands.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    state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,iBAAiB,GAAG;EAC7BC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAYrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,yBAAyB,GAAIC,KAAK,IAAG;EAClD,MAAMC,MAAM,GAAGlB,SAAS,CAAC,CAAC;EAC1BiB,KAAK,CAAClB,IAAI,CAACoB,SAAS,GAAGvB,YAAY,CAACE,iBAAiB,CAACC,IAAI,EAAEmB,MAAM,CAACnB,IAAI,EAAEkB,KAAK,CAAClB,IAAI,CAACoB,SAAS,CAAC;EAC9F,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/Option/Option.js

@@ -5,12 +5,10 @@ import { useOptionStyles_unstable } from './useOptionStyles.styles';
 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) => {
-  const state = useOption_unstable(props, ref);
-  useOptionStyles_unstable(state);
-  useCustomStyleHook_unstable('useOptionStyles_unstable')(state);
-  return renderOption_unstable(state);
+ */ export const Option = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOption_unstable(props, ref);
+    useOptionStyles_unstable(state);
+    useCustomStyleHook_unstable('useOptionStyles_unstable')(state);
+    return renderOption_unstable(state);
 });
 Option.displayName = 'Option';
-//# sourceMappingURL=Option.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/Option/Option.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useOption_unstable } from './useOption';\nimport { renderOption_unstable } from './renderOption';\nimport { useOptionStyles_unstable } from './useOptionStyles.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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,qBAAqB,QAAQ;AACtC,SAASC,wBAAwB,QAAQ;AAGzC,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,MAAA,gBAA2CL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACvF,MAAMC,KAAA,GAAQR,kBAAA,CAAmBM,KAAA,EAAOC,GAAA;EAExCL,wBAAA,CAAyBM,KAAA;EAEzBL,2BAAA,CAA4B,4BAA4BK,KAAA;EAExD,OAAOP,qBAAA,CAAsBO,KAAA;AAC/B;AAEAJ,MAAA,CAAOK,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":["React","useOption_unstable","renderOption_unstable","useOptionStyles_unstable","useCustomStyleHook_unstable","Option","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,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,MAAQ;IACvF,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

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

@@ -1,2 +1 @@
 import * as React from 'react';
-//# sourceMappingURL=Option.types.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React"],"sources":["../../../src/components/Option/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    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"],"mappings":"AACA,YAAYA,KAAA,MAAW"}
+{"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    /* If true, this is the currently highlighted option */\n    active: boolean;\n\n    // Whether the keyboard focus outline style should be visible\n    focusVisible: boolean;\n\n    /* If true, the option is part of a multiselect combobox or listbox */\n    multiselect?: boolean;\n\n    /* If true, the option is selected */\n    selected: boolean;\n  };\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

package/lib/components/Option/index.js

@@ -3,4 +3,3 @@ export * from './Option.types';
 export * from './renderOption';
 export * from './useOption';
 export * from './useOptionStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/Option/index.ts"],"sourcesContent":["export * from './Option';\nexport * from './Option.types';\nexport * from './renderOption';\nexport * from './useOption';\nexport * from './useOptionStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"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":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,2BAA2B"}

package/lib/components/Option/renderOption.js

@@ -1,13 +1,8 @@
-/** @jsxRuntime classic */ /** @jsx createElement */import { createElement } from '@fluentui/react-jsx-runtime';
+/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
 import { getSlotsNext } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Option
- */
-export const renderOption_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
+ */ export const renderOption_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.checkIcon && /*#__PURE__*/ createElement(slots.checkIcon, slotProps.checkIcon), slotProps.root.children);
 };
-//# sourceMappingURL=renderOption.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderOption_unstable","state","slots","slotProps","root","checkIcon","children"],"sources":["../../../src/components/Option/renderOption.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlotsNext<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkIcon && <slots.checkIcon {...slotProps.checkIcon} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,2BACA,yBAEA,SAASA,aAAa,QAAQ;AAE9B,SAASC,YAAY,QAAQ;AAG7B;;;AAGA,OAAO,MAAMC,qBAAA,GAAyBC,KAAA,IAAuB;EAC3D,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA0BE,KAAA;EAEvD,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,SAAS,iBAAIP,aAf1B,CAe2BI,KAAA,CAAMG,SAAS,EAAKF,SAAA,CAAUE,SAAS,GAC3DF,SAAA,CAAUC,IAAI,CAACE,QAAQ;AAG9B"}
+{"version":3,"sources":["renderOption.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { OptionState, OptionSlots } from './Option.types';\n\n/**\n * Render the final JSX of Option\n */\nexport const renderOption_unstable = (state: OptionState) => {\n  const { slots, slotProps } = getSlotsNext<OptionSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.checkIcon && <slots.checkIcon {...slotProps.checkIcon} />}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderOption_unstable","state","slots","slotProps","root","checkIcon","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAAuB;IAC3D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA0BE;IAEvD,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,SAAS,kBAAI,AAf1B,cAe2BH,MAAMG,SAAS,EAAKF,UAAUE,SAAS,GAC3DF,UAAUC,IAAI,CAACE,QAAQ;AAG9B,EAAE"}