@fluentui/react-combobox 9.3.4 → 9.4.1

package/lib/components/Option/useOption.js

@@ -5,24 +5,24 @@ import { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';
 import { ComboboxContext } from '../../contexts/ComboboxContext';
 import { ListboxContext } from '../../contexts/ListboxContext';
 function getTextString(text, children) {
-  if (text !== undefined) {
-    return text;
-  }
-  let textString = '';
-  let hasNonStringChild = false;
-  React.Children.forEach(children, child => {
-    if (typeof child === 'string') {
-      textString += child;
-    } else {
-      hasNonStringChild = true;
+    if (text !== undefined) {
+        return text;
     }
-  });
-  // warn if an Option has non-string children and no text prop
-  if (hasNonStringChild) {
-    // eslint-disable-next-line no-console
-    console.warn('Provide a `text` prop to Option components when they contain non-string children.');
-  }
-  return textString;
+    let textString = '';
+    let hasNonStringChild = false;
+    React.Children.forEach(children, (child)=>{
+        if (typeof child === 'string') {
+            textString += child;
+        } else {
+            hasNonStringChild = true;
+        }
+    });
+    // warn if an Option has non-string children and no text prop
+    if (hasNonStringChild) {
+        // eslint-disable-next-line no-console
+        console.warn('Provide a `text` prop to Option components when they contain non-string children.');
+    }
+    return textString;
 }
 /**
  * Create the state required to render Option.
@@ -32,101 +32,103 @@ function getTextString(text, children) {
  *
  * @param props - props from this instance of Option
  * @param ref - reference to root HTMLElement of Option
- */
-export const useOption_unstable = (props, ref) => {
-  const {
-    children,
-    disabled,
-    text,
-    value
-  } = props;
-  const optionRef = React.useRef(null);
-  const optionText = getTextString(text, children);
-  const optionValue = value !== null && value !== void 0 ? value : optionText;
-  // use the id if provided, otherwise use a generated id
-  const id = useId('fluent-option', props.id);
-  // data used for context registration & events
-  const optionData = React.useMemo(() => ({
-    id,
-    disabled,
-    text: optionText,
-    value: optionValue
-  }), [id, disabled, optionText, optionValue]);
-  // context values
-  const focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);
-  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);
-  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);
-  const selected = useContextSelector(ListboxContext, ctx => {
-    const selectedOptions = ctx.selectedOptions;
-    return !!optionValue && !!selectedOptions.find(o => o === optionValue);
-  });
-  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);
-  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);
-  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);
-  // current active option?
-  const active = useContextSelector(ListboxContext, ctx => {
-    var _ctx_activeOption, _ctx_activeOption1;
-    return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;
-  });
-  // check icon
-  let CheckIcon = /*#__PURE__*/React.createElement(CheckmarkFilled, null);
-  if (multiselect) {
-    CheckIcon = selected ? /*#__PURE__*/React.createElement(Checkmark12Filled, null) : '';
-  }
-  const onClick = event => {
-    var _props_onClick;
-    if (disabled) {
-      event.preventDefault();
-      return;
-    }
-    // clicked option should always become active option
-    setActiveOption(optionData);
-    // close on option click for single-select options in a combobox
-    if (!multiselect) {
-      setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
-    }
-    // handle selection change
-    selectOption(event, optionData);
-    (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
-  };
-  // register option data with context
-  React.useEffect(() => {
-    if (id && optionRef.current) {
-      return registerOption(optionData, optionRef.current);
+ */ export const useOption_unstable = (props, ref)=>{
+    const { children , disabled , text , value  } = props;
+    const optionRef = React.useRef(null);
+    const optionText = getTextString(text, children);
+    const optionValue = value !== null && value !== void 0 ? value : optionText;
+    // use the id if provided, otherwise use a generated id
+    const id = useId('fluent-option', props.id);
+    // data used for context registration & events
+    const optionData = React.useMemo(()=>({
+            id,
+            disabled,
+            text: optionText,
+            value: optionValue
+        }), [
+        id,
+        disabled,
+        optionText,
+        optionValue
+    ]);
+    // context values
+    const focusVisible = useContextSelector(ListboxContext, (ctx)=>ctx.focusVisible);
+    const multiselect = useContextSelector(ListboxContext, (ctx)=>ctx.multiselect);
+    const registerOption = useContextSelector(ListboxContext, (ctx)=>ctx.registerOption);
+    const selected = useContextSelector(ListboxContext, (ctx)=>{
+        const selectedOptions = ctx.selectedOptions;
+        return !!optionValue && !!selectedOptions.find((o)=>o === optionValue);
+    });
+    const selectOption = useContextSelector(ListboxContext, (ctx)=>ctx.selectOption);
+    const setActiveOption = useContextSelector(ListboxContext, (ctx)=>ctx.setActiveOption);
+    const setOpen = useContextSelector(ComboboxContext, (ctx)=>ctx.setOpen);
+    // current active option?
+    const active = useContextSelector(ListboxContext, (ctx)=>{
+        var _ctx_activeOption, _ctx_activeOption1;
+        return ((_ctx_activeOption = ctx.activeOption) === null || _ctx_activeOption === void 0 ? void 0 : _ctx_activeOption.id) !== undefined && ((_ctx_activeOption1 = ctx.activeOption) === null || _ctx_activeOption1 === void 0 ? void 0 : _ctx_activeOption1.id) === id;
+    });
+    // check icon
+    let CheckIcon = /*#__PURE__*/ React.createElement(CheckmarkFilled, null);
+    if (multiselect) {
+        CheckIcon = selected ? /*#__PURE__*/ React.createElement(Checkmark12Filled, null) : '';
     }
-  }, [id, optionData, registerOption]);
-  const semanticProps = multiselect ? {
-    role: 'menuitemcheckbox',
-    'aria-checked': selected
-  } : {
-    role: 'option',
-    'aria-selected': selected
-  };
-  return {
-    components: {
-      root: 'div',
-      checkIcon: 'span'
-    },
-    root: getNativeElementProps('div', {
-      ref: useMergedRefs(ref, optionRef),
-      'aria-disabled': disabled ? 'true' : undefined,
-      id,
-      ...semanticProps,
-      ...props,
-      onClick
-    }),
-    checkIcon: resolveShorthand(props.checkIcon, {
-      required: true,
-      defaultProps: {
-        'aria-hidden': 'true',
-        children: CheckIcon
-      }
-    }),
-    active,
-    disabled,
-    focusVisible,
-    multiselect,
-    selected
-  };
+    const onClick = (event)=>{
+        var _props_onClick;
+        if (disabled) {
+            event.preventDefault();
+            return;
+        }
+        // clicked option should always become active option
+        setActiveOption(optionData);
+        // close on option click for single-select options in a combobox
+        if (!multiselect) {
+            setOpen === null || setOpen === void 0 ? void 0 : setOpen(event, false);
+        }
+        // handle selection change
+        selectOption(event, optionData);
+        (_props_onClick = props.onClick) === null || _props_onClick === void 0 ? void 0 : _props_onClick.call(props, event);
+    };
+    // register option data with context
+    React.useEffect(()=>{
+        if (id && optionRef.current) {
+            return registerOption(optionData, optionRef.current);
+        }
+    }, [
+        id,
+        optionData,
+        registerOption
+    ]);
+    const semanticProps = multiselect ? {
+        role: 'menuitemcheckbox',
+        'aria-checked': selected
+    } : {
+        role: 'option',
+        'aria-selected': selected
+    };
+    return {
+        components: {
+            root: 'div',
+            checkIcon: 'span'
+        },
+        root: getNativeElementProps('div', {
+            ref: useMergedRefs(ref, optionRef),
+            'aria-disabled': disabled ? 'true' : undefined,
+            id,
+            ...semanticProps,
+            ...props,
+            onClick
+        }),
+        checkIcon: resolveShorthand(props.checkIcon, {
+            required: true,
+            defaultProps: {
+                'aria-hidden': 'true',
+                children: CheckIcon
+            }
+        }),
+        active,
+        disabled,
+        focusVisible,
+        multiselect,
+        selected
+    };
 };
-//# sourceMappingURL=useOption.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","_ctx_activeOption","_ctx_activeOption1","activeOption","CheckIcon","createElement","onClick","event","_props_onClick","preventDefault","call","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"sources":["../../../src/components/Option/useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } 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 focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\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    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\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: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"],"mappings":"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"}
+{"version":3,"sources":["useOption.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport { CheckmarkFilled, Checkmark12Filled } from '@fluentui/react-icons';\nimport { ComboboxContext } from '../../contexts/ComboboxContext';\nimport { ListboxContext } 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 focusVisible = useContextSelector(ListboxContext, ctx => ctx.focusVisible);\n  const multiselect = useContextSelector(ListboxContext, ctx => ctx.multiselect);\n  const registerOption = useContextSelector(ListboxContext, ctx => ctx.registerOption);\n  const selected = useContextSelector(ListboxContext, ctx => {\n    const selectedOptions = ctx.selectedOptions;\n\n    return !!optionValue && !!selectedOptions.find(o => o === optionValue);\n  });\n  const selectOption = useContextSelector(ListboxContext, ctx => ctx.selectOption);\n  const setActiveOption = useContextSelector(ListboxContext, ctx => ctx.setActiveOption);\n  const setOpen = useContextSelector(ComboboxContext, ctx => ctx.setOpen);\n\n  // current active option?\n  const active = useContextSelector(ListboxContext, ctx => {\n    return ctx.activeOption?.id !== undefined && ctx.activeOption?.id === id;\n  });\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    // clicked option should always become active option\n    setActiveOption(optionData);\n\n    // close on option click for single-select options in a combobox\n    if (!multiselect) {\n      setOpen?.(event, false);\n    }\n\n    // handle selection change\n    selectOption(event, optionData);\n\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: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, optionRef),\n      'aria-disabled': disabled ? 'true' : undefined,\n      id,\n      ...semanticProps,\n      ...props,\n      onClick,\n    }),\n    checkIcon: resolveShorthand(props.checkIcon, {\n      required: true,\n      defaultProps: {\n        'aria-hidden': 'true',\n        children: CheckIcon,\n      },\n    }),\n    active,\n    disabled,\n    focusVisible,\n    multiselect,\n    selected,\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useId","useMergedRefs","useContextSelector","CheckmarkFilled","Checkmark12Filled","ComboboxContext","ListboxContext","getTextString","text","children","undefined","textString","hasNonStringChild","Children","forEach","child","console","warn","useOption_unstable","props","ref","disabled","value","optionRef","useRef","optionText","optionValue","id","optionData","useMemo","focusVisible","ctx","multiselect","registerOption","selected","selectedOptions","find","o","selectOption","setActiveOption","setOpen","active","activeOption","CheckIcon","onClick","event","preventDefault","useEffect","current","semanticProps","role","components","root","checkIcon","required","defaultProps"],"mappings":"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"}

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

@@ -135,7 +135,7 @@ export const useOptionStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
   if (state.checkIcon) {
-    state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, state.checkIcon.className, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled);
+    state.checkIcon.className = mergeClasses(optionClassNames.checkIcon, styles.checkIcon, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled, state.checkIcon.className);
   }
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["../../../src/components/Option/useOptionStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionSlots, OptionState } from './Option.types';\n\nexport const optionClassNames: SlotClassNames<OptionSlots> = {\n  root: 'fui-Option',\n  checkIcon: 'fui-Option__checkIcon',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    alignItems: 'center',\n    ...shorthands.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    ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n    position: 'relative',\n\n    '&:hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorNeutralBackground1Pressed,\n    },\n  },\n\n  active: {\n    // taken from @fluentui/react-tabster\n    // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n    '::after': {\n      content: '\"\"',\n      position: 'absolute',\n      pointerEvents: 'none',\n      zIndex: 1,\n\n      ...shorthands.borderStyle('solid'),\n      ...shorthands.borderWidth('2px'),\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      ...shorthands.borderColor(tokens.colorStrokeFocus2),\n\n      top: '-2px',\n      bottom: '-2px',\n      left: '-2px',\n      right: '-2px',\n    },\n  },\n\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '&:hover': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '&:active': {\n      backgroundColor: tokens.colorTransparentBackground,\n    },\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n\n  selected: {},\n\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\n    '& svg': {\n      display: 'block',\n    },\n  },\n\n  selectedCheck: {\n    visibility: 'visible',\n  },\n\n  multiselectCheck: {\n    ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(tokens.borderRadiusSmall),\n    boxSizing: 'border-box',\n\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n\n    fill: 'currentColor',\n    fontSize: '12px',\n    height: '16px',\n    width: '16px',\n    visibility: 'visible',\n  },\n\n  selectedMultiselectCheck: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    color: tokens.colorNeutralForegroundInverted,\n    ...shorthands.borderColor(tokens.colorCompoundBrandBackground),\n  },\n\n  checkDisabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n});\n\n/**\n * Apply styling to the Option slots based on the state\n */\nexport const useOptionStyles_unstable = (state: OptionState): OptionState => {\n  const { active, disabled, focusVisible, multiselect, selected } = state;\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    optionClassNames.root,\n    styles.root,\n    active && focusVisible && styles.active,\n    disabled && styles.disabled,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.checkIcon) {\n    state.checkIcon.className = mergeClasses(\n      optionClassNames.checkIcon,\n      styles.checkIcon,\n      state.checkIcon.className,\n      multiselect && styles.multiselectCheck,\n      selected && styles.selectedCheck,\n      selected && multiselect && styles.selectedMultiselectCheck,\n      disabled && styles.checkDisabled,\n    );\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,gBAAA,GAAgD;EAC3DC,IAAA,EAAM;EACNC,SAAA,EAAW;AACb;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAvC,MAAA;IAAAY,MAAA;IAAAC,MAAA;IAAA2B,OAAA;EAAA;EAAAC,QAAA;EAAAhD,SAAA;IAAAY,OAAA;IAAAqC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,aAAA;IAAAF,OAAA;EAAA;EAAAG,gBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA/D,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA6D,OAAA;IAAAzD,MAAA;IAAAR,OAAA;IAAAkE,OAAA;IAAAC,OAAA;IAAAzD,OAAA;IAAA0D,OAAA;IAAAC,MAAA;IAAApB,OAAA;EAAA;EAAAqB,wBAAA;IAAAC,MAAA;IAAAlE,MAAA;IAAAwD,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAQ,aAAA;IAAAnE,MAAA;IAAAwC,OAAA;EAAA;AAAA;EAAA4B,CAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,EA4GlB;AAEA;;;AAGA,OAAO,MAAMC,wBAAA,GAA4BC,KAAA,IAAoC;EAC3E,MAAM;IAAE3D,MAAA;IAAQyB,QAAA;IAAUmC,YAAA;IAAcC,WAAA;IAAalC;EAAQ,CAAE,GAAGgC,KAAA;EAClE,MAAMG,MAAA,GAASlF,SAAA;EACf+E,KAAA,CAAMjF,IAAI,CAACqF,SAAS,GAAGxF,YAAA,CACrBE,gBAAA,CAAiBC,IAAI,EACrBoF,MAAA,CAAOpF,IAAI,EACXsB,MAAA,IAAU4D,YAAA,IAAgBE,MAAA,CAAO9D,MAAM,EACvCyB,QAAA,IAAYqC,MAAA,CAAOrC,QAAQ,EAC3BE,QAAA,IAAYmC,MAAA,CAAOnC,QAAQ,EAC3BgC,KAAA,CAAMjF,IAAI,CAACqF,SAAS;EAGtB,IAAIJ,KAAA,CAAMhF,SAAS,EAAE;IACnBgF,KAAA,CAAMhF,SAAS,CAACoF,SAAS,GAAGxF,YAAA,CAC1BE,gBAAA,CAAiBE,SAAS,EAC1BmF,MAAA,CAAOnF,SAAS,EAChBgF,KAAA,CAAMhF,SAAS,CAACoF,SAAS,EACzBF,WAAA,IAAeC,MAAA,CAAO7B,gBAAgB,EACtCN,QAAA,IAAYmC,MAAA,CAAO9B,aAAa,EAChCL,QAAA,IAAYkC,WAAA,IAAeC,MAAA,CAAOX,wBAAwB,EAC1D1B,QAAA,IAAYqC,MAAA,CAAOT,aAAa;EAEpC;EAEA,OAAOM,KAAA;AACT"}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionClassNames","root","checkIcon","useStyles","Bt984gj","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","i8kkvl","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","qhf8xq","Jwef8y","ecr2s2","active","Bsft5z2","E3zdtr","B80jsxd","t2ki1e","Bm2nyyq","Barhvk9","Bw17bha","vfts7","xrcqlc","Ihftqj","Bcgy8vk","Bhxzhr1","B3778ie","d9w3h3","Bl18szs","B4j8arr","B0n5ga8","s924m2","B1q35kw","Gp14am","bn5sak","By385i5","Eqx8gd","B1piin3","disabled","Bbusuzp","selected","Frg6f3","t21cq0","Bcdw1i0","Bo70h7d","selectedCheck","multiselectCheck","B4j52fo","Bekrc4i","Bn0qgzm","ibv6hh","icvyot","vrafjx","oivjwe","wvpqe5","g2u3we","h3c5rm","B9xav0g","zhjwy3","B7ck84d","Brf1p80","Bkfmm31","Bqenvij","a9b677","selectedMultiselectCheck","De3pzq","checkDisabled","d","h","a","m","useOptionStyles_unstable","state","focusVisible","multiselect","styles","className"],"sources":["useOptionStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\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        ...shorthands.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        ...shorthands.padding(tokens.spacingVerticalSNudge, tokens.spacingHorizontalS),\n        position: 'relative',\n        '&:hover': {\n            backgroundColor: tokens.colorNeutralBackground1Hover\n        },\n        '&:active': {\n            backgroundColor: tokens.colorNeutralBackground1Pressed\n        }\n    },\n    active: {\n        // taken from @fluentui/react-tabster\n        // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector\n        '::after': {\n            content: '\"\"',\n            position: 'absolute',\n            pointerEvents: 'none',\n            zIndex: 1,\n            ...shorthands.borderStyle('solid'),\n            ...shorthands.borderWidth('2px'),\n            ...shorthands.borderRadius(tokens.borderRadiusMedium),\n            ...shorthands.borderColor(tokens.colorStrokeFocus2),\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        },\n        '&:active': {\n            backgroundColor: tokens.colorTransparentBackground\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        ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStrokeAccessible),\n        ...shorthands.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});\n/**\n * Apply styling to the Option slots based on the state\n */ export const useOptionStyles_unstable = (state)=>{\n    const { active , disabled , focusVisible , multiselect , selected  } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(optionClassNames.root, styles.root, active && focusVisible && 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, state.checkIcon.className);\n    }\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/OptionGroup/OptionGroup.js

@@ -5,12 +5,10 @@ import { useOptionGroupStyles_unstable } from './useOptionGroupStyles.styles';
 import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 /**
  * OptionGroup component: allows grouping of Option components within a Combobox
- */
-export const OptionGroup = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useOptionGroup_unstable(props, ref);
-  useOptionGroupStyles_unstable(state);
-  useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);
-  return renderOptionGroup_unstable(state);
+ */ export const OptionGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useOptionGroup_unstable(props, ref);
+    useOptionGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useOptionGroupStyles_unstable')(state);
+    return renderOptionGroup_unstable(state);
 });
 OptionGroup.displayName = 'OptionGroup';
-//# sourceMappingURL=OptionGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"sources":["../../../src/components/OptionGroup/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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,uBAAuB,QAAQ;AACxC,SAASC,0BAA0B,QAAQ;AAC3C,SAASC,6BAA6B,QAAQ;AAG9C,SAASC,2BAA2B,QAAQ;AAE5C;;;AAGA,OAAO,MAAMC,WAAA,gBAAqDL,KAAA,CAAMM,UAAU,CAAC,CAACC,KAAA,EAAOC,GAAA,KAAQ;EACjG,MAAMC,KAAA,GAAQR,uBAAA,CAAwBM,KAAA,EAAOC,GAAA;EAE7CL,6BAAA,CAA8BM,KAAA;EAE9BL,2BAAA,CAA4B,iCAAiCK,KAAA;EAE7D,OAAOP,0BAAA,CAA2BO,KAAA;AACpC;AAEAJ,WAAA,CAAYK,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":["React","useOptionGroup_unstable","renderOptionGroup_unstable","useOptionGroupStyles_unstable","useCustomStyleHook_unstable","OptionGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAG9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjG,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAE9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/OptionGroup/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"],"mappings":"AAAA"}
+{"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":[],"mappings":"AAAA,WAqBgE"}

package/lib/components/OptionGroup/index.js

@@ -3,4 +3,3 @@ export * from './OptionGroup.types';
 export * from './renderOptionGroup';
 export * from './useOptionGroup';
 export * from './useOptionGroupStyles.styles';
-//# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../../src/components/OptionGroup/index.ts"],"sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles.styles';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc"}
+{"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":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/OptionGroup/renderOptionGroup.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 OptionGroup
- */
-export const renderOptionGroup_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = getSlotsNext(state);
-  return /*#__PURE__*/createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/createElement(slots.label, slotProps.label, slotProps.label.children), slotProps.root.children);
+ */ export const renderOptionGroup_unstable = (state)=>{
+    const { slots , slotProps  } = getSlotsNext(state);
+    return /*#__PURE__*/ createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/ createElement(slots.label, slotProps.label, slotProps.label.children), slotProps.root.children);
 };
-//# sourceMappingURL=renderOptionGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["createElement","getSlotsNext","renderOptionGroup_unstable","state","slots","slotProps","root","label","children"],"sources":["../../../src/components/OptionGroup/renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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  const { slots, slotProps } = getSlotsNext<OptionGroupSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\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,0BAAA,GAA8BC,KAAA,IAA4B;EACrE,MAAM;IAAEC,KAAA;IAAOC;EAAS,CAAE,GAAGJ,YAAA,CAA+BE,KAAA;EAE5D,oBACEH,aAdJ,CAcKI,KAAA,CAAME,IAAI,EAAKD,SAAA,CAAUC,IAAI,EAC3BF,KAAA,CAAMG,KAAK,iBAAIP,aAftB,CAeuBI,KAAA,CAAMG,KAAK,EAAKF,SAAA,CAAUE,KAAK,EAAGF,SAAA,CAAUE,KAAK,CAACC,QAAQ,GAC1EH,SAAA,CAAUC,IAAI,CAACE,QAAQ;AAG9B"}
+{"version":3,"sources":["renderOptionGroup.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { getSlotsNext } 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  const { slots, slotProps } = getSlotsNext<OptionGroupSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label}>{slotProps.label.children}</slots.label>}\n      {slotProps.root.children}\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","renderOptionGroup_unstable","state","slots","slotProps","root","label","children"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC,QAA4B;IACrE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA+BE;IAE5D,qBACE,AAdJ,cAcKC,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,KAAK,kBAAI,AAftB,cAeuBH,MAAMG,KAAK,EAAKF,UAAUE,KAAK,EAAGF,UAAUE,KAAK,CAACC,QAAQ,GAC1EH,UAAUC,IAAI,CAACE,QAAQ;AAG9B,EAAE"}

package/lib/components/OptionGroup/useOptionGroup.js

@@ -8,29 +8,25 @@ import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-
  *
  * @param props - props from this instance of OptionGroup
  * @param ref - reference to root HTMLElement of OptionGroup
- */
-export const useOptionGroup_unstable = (props, ref) => {
-  const labelId = useId('group-label');
-  const {
-    label
-  } = props;
-  return {
-    components: {
-      root: 'div',
-      label: 'span'
-    },
-    root: getNativeElementProps('div', {
-      ref,
-      role: 'group',
-      'aria-labelledby': label ? labelId : undefined,
-      ...props
-    }),
-    label: resolveShorthand(label, {
-      defaultProps: {
-        id: labelId,
-        role: 'presentation'
-      }
-    })
-  };
+ */ export const useOptionGroup_unstable = (props, ref)=>{
+    const labelId = useId('group-label');
+    const { label  } = props;
+    return {
+        components: {
+            root: 'div',
+            label: 'span'
+        },
+        root: getNativeElementProps('div', {
+            ref,
+            role: 'group',
+            'aria-labelledby': label ? labelId : undefined,
+            ...props
+        }),
+        label: resolveShorthand(label, {
+            defaultProps: {
+                id: labelId,
+                role: 'presentation'
+            }
+        })
+    };
 };
-//# sourceMappingURL=useOptionGroup.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"sources":["../../../src/components/OptionGroup/useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      'aria-labelledby': label ? labelId : undefined,\n      ...props,\n    }),\n    label: resolveShorthand(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n    }),\n  };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ;AAG/D;;;;;;;;;AASA,OAAO,MAAMC,uBAAA,GAA0BA,CAACC,KAAA,EAAyBC,GAAA,KAAkD;EACjH,MAAMC,OAAA,GAAUJ,KAAA,CAAM;EACtB,MAAM;IAAEK;EAAK,CAAE,GAAGH,KAAA;EAElB,OAAO;IACLI,UAAA,EAAY;MACVC,IAAA,EAAM;MACNF,KAAA,EAAO;IACT;IACAE,IAAA,EAAMT,qBAAA,CAAsB,OAAO;MACjCK,GAAA;MACAK,IAAA,EAAM;MACN,mBAAmBH,KAAA,GAAQD,OAAA,GAAUK,SAAS;MAC9C,GAAGP;IACL;IACAG,KAAA,EAAON,gBAAA,CAAiBM,KAAA,EAAO;MAC7BK,YAAA,EAAc;QACZC,EAAA,EAAIP,OAAA;QACJI,IAAA,EAAM;MACR;IACF;EACF;AACF"}
+{"version":3,"sources":["useOptionGroup.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } 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: getNativeElementProps('div', {\n      ref,\n      role: 'group',\n      'aria-labelledby': label ? labelId : undefined,\n      ...props,\n    }),\n    label: resolveShorthand(label, {\n      defaultProps: {\n        id: labelId,\n        role: 'presentation',\n      },\n    }),\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useId","useOptionGroup_unstable","props","ref","labelId","label","components","root","role","undefined","defaultProps","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAG3F;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CAACC,OAAyBC,MAAkD;IACjH,MAAMC,UAAUJ,MAAM;IACtB,MAAM,EAAEK,MAAK,EAAE,GAAGH;IAElB,OAAO;QACLI,YAAY;YACVC,MAAM;YACNF,OAAO;QACT;QACAE,MAAMT,sBAAsB,OAAO;YACjCK;YACAK,MAAM;YACN,mBAAmBH,QAAQD,UAAUK,SAAS;YAC9C,GAAGP,KAAK;QACV;QACAG,OAAON,iBAAiBM,OAAO;YAC7BK,cAAc;gBACZC,IAAIP;gBACJI,MAAM;YACR;QACF;IACF;AACF,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","Gwp8xu","H93o2g","eii1in","om0q45","Hl9o3s","Bi9x0x4","B0i58d9","sl1c2c","z4hxbw","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","d","useOptionGroupStyles_unstable","state","styles","className"],"sources":["../../../src/components/OptionGroup/useOptionGroupStyles.styles.ts"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';\n\nexport const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {\n  root: 'fui-OptionGroup',\n  label: 'fui-OptionGroup__label',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingHorizontalXXS,\n\n    '&:not(:last-child)::after': {\n      content: '\"\"',\n      ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n      display: 'block',\n      paddingBottom: tokens.spacingHorizontalXS,\n      ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS),\n    },\n  },\n\n  label: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    color: tokens.colorNeutralForeground3,\n    display: 'block',\n    fontSize: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightSemibold,\n    lineHeight: tokens.lineHeightBase200,\n    ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge),\n  },\n});\n\n/**\n * Apply styling to the OptionGroup slots based on the state\n */\nexport const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);\n\n  if (state.label) {\n    state.label.className = mergeClasses(optionGroupClassNames.label, styles.label, state.label.className);\n  }\n\n  return state;\n};\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ;AAEvB,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ;AAGrD,OAAO,MAAMC,qBAAA,GAA0D;EACrEC,IAAA,EAAM;EACNC,KAAA,EAAO;AACT;AAEA;;;AAGA,MAAMC,SAAA,gBAAYN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAd,KAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAwBlB;AAEA;;;AAGA,OAAO,MAAMC,6BAAA,GAAiCC,KAAA,IAA8C;EAC1F,MAAMC,MAAA,GAAS7B,SAAA;EACf4B,KAAA,CAAM9B,IAAI,CAACgC,SAAS,GAAGnC,YAAA,CAAaE,qBAAA,CAAsBC,IAAI,EAAE+B,MAAA,CAAO/B,IAAI,EAAE8B,KAAA,CAAM9B,IAAI,CAACgC,SAAS;EAEjG,IAAIF,KAAA,CAAM7B,KAAK,EAAE;IACf6B,KAAA,CAAM7B,KAAK,CAAC+B,SAAS,GAAGnC,YAAA,CAAaE,qBAAA,CAAsBE,KAAK,EAAE8B,MAAA,CAAO9B,KAAK,EAAE6B,KAAA,CAAM7B,KAAK,CAAC+B,SAAS;EACvG;EAEA,OAAOF,KAAA;AACT"}
+{"version":3,"names":["tokens","__styles","mergeClasses","shorthands","optionGroupClassNames","root","label","useStyles","mc9l5x","Beiy3e4","Belr9w4","B8lkq7l","Gwp8xu","H93o2g","eii1in","om0q45","Hl9o3s","Bi9x0x4","B0i58d9","sl1c2c","z4hxbw","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","sj55zd","Be2twd7","Bhrd7zp","Bg96gwp","z8tnut","z189sj","Byoj8tv","uwmqm3","d","useOptionGroupStyles_unstable","state","styles","className"],"sources":["useOptionGroupStyles.styles.js"],"sourcesContent":["import { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } 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            ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2),\n            display: 'block',\n            paddingBottom: tokens.spacingHorizontalXS,\n            ...shorthands.margin(0, `calc(${tokens.spacingHorizontalXS} * -1)`, tokens.spacingVerticalXS)\n        }\n    },\n    label: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        color: tokens.colorNeutralForeground3,\n        display: 'block',\n        fontSize: tokens.fontSizeBase200,\n        fontWeight: tokens.fontWeightSemibold,\n        lineHeight: tokens.lineHeightBase200,\n        ...shorthands.padding(tokens.spacingHorizontalS, tokens.spacingHorizontalSNudge)\n    }\n});\n/**\n * Apply styling to the OptionGroup slots based on the state\n */ export const useOptionGroupStyles_unstable = (state)=>{\n    const styles = useStyles();\n    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"],"mappings":"AAAA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAAAC,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGN,QAAA;EAAAI,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAd,KAAA;IAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAjB,MAAA;IAAAkB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAG7B,SAAS,CAAC,CAAC;EAC1B4B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACC,IAAI,EAAE+B,MAAM,CAAC/B,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACgC,SAAS,CAAC;EAClG,IAAIF,KAAK,CAAC7B,KAAK,EAAE;IACb6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,GAAGnC,YAAY,CAACE,qBAAqB,CAACE,KAAK,EAAE8B,MAAM,CAAC9B,KAAK,EAAE6B,KAAK,CAAC7B,KAAK,CAAC+B,SAAS,CAAC;EAC1G;EACA,OAAOF,KAAK;AAChB,CAAC"}

package/lib/contexts/ComboboxContext.js

@@ -1,24 +1,23 @@
 import { createContext } from '@fluentui/react-context-selector';
 // eslint-disable-next-line @fluentui/no-context-default-value
-export const ComboboxContext = /*#__PURE__*/createContext({
-  activeOption: undefined,
-  appearance: 'outline',
-  focusVisible: false,
-  open: false,
-  registerOption() {
-    return () => undefined;
-  },
-  selectedOptions: [],
-  selectOption() {
+export const ComboboxContext = createContext({
+    activeOption: undefined,
+    appearance: 'outline',
+    focusVisible: false,
+    open: false,
+    registerOption () {
+        return ()=>undefined;
+    },
+    selectedOptions: [],
+    selectOption () {
     // noop
-  },
-  setActiveOption() {
+    },
+    setActiveOption () {
     // noop
-  },
-  setOpen() {
+    },
+    setOpen () {
     // noop
-  },
-  size: 'medium'
+    },
+    size: 'medium'
 });
 export const ComboboxProvider = ComboboxContext.Provider;
-//# sourceMappingURL=ComboboxContext.js.map

package/lib/contexts/ComboboxContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"sources":["../../src/contexts/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'\n  | 'appearance'\n  | 'focusVisible'\n  | 'open'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setOpen'\n  | 'size'\n>;\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\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ;AAoB9B;AACA,OAAO,MAAMC,eAAA,gBAAkBD,aAAA,CAAoC;EACjEE,YAAA,EAAcC,SAAA;EACdC,UAAA,EAAY;EACZC,YAAA,EAAc,KAAK;EACnBC,IAAA,EAAM,KAAK;EACXC,eAAA,EAAiB;IACf,OAAO,MAAMJ,SAAA;EACf;EACAK,eAAA,EAAiB,EAAE;EACnBC,aAAA,EAAe;IACb;EAAA,CACF;EACAC,gBAAA,EAAkB;IAChB;EAAA,CACF;EACAC,QAAA,EAAU;IACR;EAAA,CACF;EACAC,IAAA,EAAM;AACR;AAEA,OAAO,MAAMC,gBAAA,GAAmBZ,eAAA,CAAgBa,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'\n  | 'appearance'\n  | 'focusVisible'\n  | 'open'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n  | 'setOpen'\n  | 'size'\n>;\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\nexport const ComboboxProvider = ComboboxContext.Provider;\n"],"names":["createContext","ComboboxContext","activeOption","undefined","appearance","focusVisible","open","registerOption","selectedOptions","selectOption","setActiveOption","setOpen","size","ComboboxProvider","Provider"],"mappings":"AAAA,SAASA,aAAa,QAAQ,mCAAmC;AAoBjE,8DAA8D;AAC9D,OAAO,MAAMC,kBAAkBD,cAAoC;IACjEE,cAAcC;IACdC,YAAY;IACZC,cAAc,KAAK;IACnBC,MAAM,KAAK;IACXC,kBAAiB;QACf,OAAO,IAAMJ;IACf;IACAK,iBAAiB,EAAE;IACnBC,gBAAe;IACb,OAAO;IACT;IACAC,mBAAkB;IAChB,OAAO;IACT;IACAC,WAAU;IACR,OAAO;IACT;IACAC,MAAM;AACR,GAAG;AAEH,OAAO,MAAMC,mBAAmBZ,gBAAgBa,QAAQ,CAAC"}