@fluentui/react-combobox 9.0.0-beta.9 → 9.0.0

package/lib-amd/components/Option/useOption.js

@@ -0,0 +1,117 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-context-selector", "@fluentui/react-icons", "../../contexts/ComboboxContext", "../../contexts/ListboxContext"], function (require, exports, tslib_1, React, react_utilities_1, react_context_selector_1, react_icons_1, ComboboxContext_1, ListboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOption_unstable = void 0;
+    function getTextString(text, children) {
+        if (text !== undefined) {
+            return text;
+        }
+        var textString = '';
+        var hasNonStringChild = false;
+        React.Children.forEach(children, function (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.
+     *
+     * The returned state can be modified with hooks such as useOptionStyles_unstable,
+     * before being passed to renderOption_unstable.
+     *
+     * @param props - props from this instance of Option
+     * @param ref - reference to root HTMLElement of Option
+     */
+    var useOption_unstable = function (props, ref) {
+        var children = props.children, disabled = props.disabled, text = props.text, value = props.value;
+        var optionRef = React.useRef(null);
+        var optionText = getTextString(text, children);
+        var optionValue = value !== null && value !== void 0 ? value : optionText;
+        // use the id if provided, otherwise use a generated id
+        var id = react_utilities_1.useId('fluent-option', props.id);
+        // data used for context registration & events
+        var optionData = React.useMemo(function () { return ({ id: id, disabled: disabled, text: optionText, value: optionValue }); }, [
+            id,
+            disabled,
+            optionText,
+            optionValue,
+        ]);
+        // context values
+        var focusVisible = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) { return ctx.focusVisible; });
+        var multiselect = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) { return ctx.multiselect; });
+        var registerOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) { return ctx.registerOption; });
+        var selected = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) {
+            var selectedOptions = ctx.selectedOptions;
+            return !!optionValue && !!selectedOptions.find(function (o) { return o === optionValue; });
+        });
+        var selectOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) { return ctx.selectOption; });
+        var setActiveOption = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) { return ctx.setActiveOption; });
+        var setOpen = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.setOpen; });
+        // current active option?
+        var active = react_context_selector_1.useContextSelector(ListboxContext_1.ListboxContext, function (ctx) {
+            var _a, _b;
+            return ((_a = ctx.activeOption) === null || _a === void 0 ? void 0 : _a.id) !== undefined && ((_b = ctx.activeOption) === null || _b === void 0 ? void 0 : _b.id) === id;
+        });
+        // check icon
+        var CheckIcon = React.createElement(react_icons_1.CheckmarkFilled, null);
+        if (multiselect) {
+            CheckIcon = selected ? React.createElement(react_icons_1.Checkmark12Filled, null) : '';
+        }
+        var onClick = function (event) {
+            var _a;
+            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);
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+        };
+        // register option data with context
+        React.useEffect(function () {
+            if (id && optionRef.current) {
+                return registerOption(optionData, optionRef.current);
+            }
+        }, [id, optionData, registerOption]);
+        var semanticProps = multiselect
+            ? { role: 'menuitemcheckbox', 'aria-checked': selected }
+            : { role: 'option', 'aria-selected': selected };
+        return {
+            components: {
+                root: 'div',
+                checkIcon: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, optionRef), 'aria-disabled': disabled ? 'true' : undefined, id: id }, semanticProps), props), { onClick: onClick })),
+            checkIcon: react_utilities_1.resolveShorthand(props.checkIcon, {
+                required: true,
+                defaultProps: {
+                    'aria-hidden': 'true',
+                    children: CheckIcon,
+                },
+            }),
+            active: active,
+            disabled: disabled,
+            focusVisible: focusVisible,
+            multiselect: multiselect,
+            selected: selected,
+        };
+    };
+    exports.useOption_unstable = useOption_unstable;
+});
+//# sourceMappingURL=useOption.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOption.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/useOption.tsx"],"names":[],"mappings":"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","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>(() => ({ id, disabled, text: optionText, value: optionValue }), [\n    id,\n    disabled,\n    optionText,\n    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"]}

package/lib-amd/components/Option/useOptionStyles.js

@@ -0,0 +1,73 @@
+define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOptionStyles_unstable = exports.optionClassNames = void 0;
+    exports.optionClassNames = {
+        root: 'fui-Option',
+        checkIcon: 'fui-Option__checkIcon',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ alignItems: 'center' }, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { color: react_theme_1.tokens.colorNeutralForeground1, columnGap: react_theme_1.tokens.spacingHorizontalXS, cursor: 'pointer', display: 'flex', fontFamily: react_theme_1.tokens.fontFamilyBase, fontSize: react_theme_1.tokens.fontSizeBase300, lineHeight: react_theme_1.tokens.lineHeightBase300 }), react_1.shorthands.padding(react_theme_1.tokens.spacingVerticalSNudge, react_theme_1.tokens.spacingHorizontalS)), { position: 'relative', '&:hover': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Hover,
+            }, '&:active': {
+                backgroundColor: react_theme_1.tokens.colorNeutralBackground1Pressed,
+            } }),
+        active: {
+            // taken from @fluentui/react-tabster
+            // cannot use createFocusIndicatorStyle() directly, since we aren't using the :focus selector
+            '::after': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""', position: 'absolute', pointerEvents: 'none', zIndex: 1 }, react_1.shorthands.borderStyle('solid')), react_1.shorthands.borderWidth('2px')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), react_1.shorthands.borderColor(react_theme_1.tokens.colorStrokeFocus2)), { top: '-2px', bottom: '-2px', left: '-2px', right: '-2px' }),
+        },
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            '&:hover': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+            '&:active': {
+                backgroundColor: react_theme_1.tokens.colorTransparentBackground,
+            },
+            '@media (forced-colors: active)': {
+                color: 'GrayText',
+            },
+        },
+        selected: {},
+        checkIcon: {
+            fontSize: react_theme_1.tokens.fontSizeBase400,
+            // Shift icon(s) to the left to give text content extra spacing without needing an extra node
+            // This is done instead of gap since the extra space only exists between icon > content, not icon > icon
+            marginLeft: "calc(" + react_theme_1.tokens.spacingHorizontalXXS + " * -1)",
+            marginRight: react_theme_1.tokens.spacingHorizontalXXS,
+            visibility: 'hidden',
+            '& svg': {
+                display: 'block',
+            },
+        },
+        selectedCheck: {
+            visibility: 'visible',
+        },
+        multiselectCheck: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.border(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusSmall)), { boxSizing: 'border-box', display: 'flex', alignItems: 'center', justifyContent: 'center', fill: 'currentColor', fontSize: '12px', height: '16px', width: '16px', visibility: 'visible' }),
+        selectedMultiselectCheck: tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground, color: react_theme_1.tokens.colorNeutralForegroundInverted }, react_1.shorthands.borderColor(react_theme_1.tokens.colorCompoundBrandBackground)),
+        checkDisabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            '@media (forced-colors: active)': {
+                color: 'GrayText',
+            },
+        },
+    });
+    /**
+     * Apply styling to the Option slots based on the state
+     */
+    var useOptionStyles_unstable = function (state) {
+        var active = state.active, disabled = state.disabled, focusVisible = state.focusVisible, multiselect = state.multiselect, selected = state.selected;
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.optionClassNames.root, styles.root, active && focusVisible && styles.active, disabled && styles.disabled, selected && styles.selected, state.root.className);
+        if (state.checkIcon) {
+            state.checkIcon.className = react_1.mergeClasses(exports.optionClassNames.checkIcon, styles.checkIcon, state.checkIcon.className, multiselect && styles.multiselectCheck, selected && styles.selectedCheck, selected && multiselect && styles.selectedMultiselectCheck, disabled && styles.checkDisabled);
+        }
+        return state;
+    };
+    exports.useOptionStyles_unstable = useOptionStyles_unstable;
+});
+//# sourceMappingURL=useOptionStyles.js.map

package/lib-amd/components/Option/useOptionStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/Option/useOptionStyles.ts"],"names":[],"mappings":"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","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"]}

package/lib-amd/components/OptionGroup/OptionGroup.js

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useOptionGroup", "./renderOptionGroup", "./useOptionGroupStyles"], function (require, exports, React, useOptionGroup_1, renderOptionGroup_1, useOptionGroupStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.OptionGroup = void 0;
+    /**
+     * OptionGroup component: allows grouping of Option components within a Combobox
+     */
+    exports.OptionGroup = React.forwardRef(function (props, ref) {
+        var state = useOptionGroup_1.useOptionGroup_unstable(props, ref);
+        useOptionGroupStyles_1.useOptionGroupStyles_unstable(state);
+        return renderOptionGroup_1.renderOptionGroup_unstable(state);
+    });
+    exports.OptionGroup.displayName = 'OptionGroup';
+});
+//# sourceMappingURL=OptionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useOptionGroup_unstable } from './useOptionGroup';\nimport { renderOptionGroup_unstable } from './renderOptionGroup';\nimport { useOptionGroupStyles_unstable } from './useOptionGroupStyles';\nimport type { OptionGroupProps } from './OptionGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\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  return renderOptionGroup_unstable(state);\n});\n\nOptionGroup.displayName = 'OptionGroup';\n"]}

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

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=OptionGroup.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OptionGroup.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/OptionGroup.types.ts"],"names":[],"mappings":"","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"]}

package/lib-amd/components/OptionGroup/index.js

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./OptionGroup", "./OptionGroup.types", "./renderOptionGroup", "./useOptionGroup", "./useOptionGroupStyles"], function (require, exports, tslib_1, OptionGroup_1, OptionGroup_types_1, renderOptionGroup_1, useOptionGroup_1, useOptionGroupStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(OptionGroup_1, exports);
+    tslib_1.__exportStar(OptionGroup_types_1, exports);
+    tslib_1.__exportStar(renderOptionGroup_1, exports);
+    tslib_1.__exportStar(useOptionGroup_1, exports);
+    tslib_1.__exportStar(useOptionGroupStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B;IAC9B,mDAAoC;IACpC,mDAAoC;IACpC,gDAAiC;IACjC,sDAAuC","sourcesContent":["export * from './OptionGroup';\nexport * from './OptionGroup.types';\nexport * from './renderOptionGroup';\nexport * from './useOptionGroup';\nexport * from './useOptionGroupStyles';\n"]}

package/lib-amd/components/OptionGroup/renderOptionGroup.js

@@ -0,0 +1,16 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.renderOptionGroup_unstable = void 0;
+    /**
+     * Render the final JSX of OptionGroup
+     */
+    var renderOptionGroup_unstable = function (state) {
+        var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
+        return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
+            slots.label && React.createElement(slots.label, tslib_1.__assign({}, slotProps.label), slotProps.label.children),
+            slotProps.root.children));
+    };
+    exports.renderOptionGroup_unstable = renderOptionGroup_unstable;
+});
+//# sourceMappingURL=renderOptionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"renderOptionGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/renderOptionGroup.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,0BAA0B,GAAG,UAAC,KAAuB;QAC1D,IAAA,KAAuB,0BAAQ,CAAmB,KAAK,CAAC,EAAtD,KAAK,WAAA,EAAE,SAAS,eAAsC,CAAC;QAE/D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC3B,KAAK,CAAC,KAAK,IAAI,oBAAC,KAAK,CAAC,KAAK,uBAAK,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,QAAQ,CAAe;YACzF,SAAS,CAAC,IAAI,CAAC,QAAQ,CACb,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,0BAA0B,8BASrC","sourcesContent":["import * as React from 'react';\nimport { getSlots } 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 } = getSlots<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"]}

package/lib-amd/components/OptionGroup/useOptionGroup.js

@@ -0,0 +1,33 @@
+define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOptionGroup_unstable = void 0;
+    /**
+     * Create the state required to render OptionGroup.
+     *
+     * The returned state can be modified with hooks such as useOptionGroupStyles_unstable,
+     * before being passed to renderOptionGroup_unstable.
+     *
+     * @param props - props from this instance of OptionGroup
+     * @param ref - reference to root HTMLElement of OptionGroup
+     */
+    var useOptionGroup_unstable = function (props, ref) {
+        var labelId = react_utilities_1.useId('group-label');
+        var label = props.label;
+        return {
+            components: {
+                root: 'div',
+                label: 'span',
+            },
+            root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref, role: 'group', 'aria-labelledby': label ? labelId : undefined }, props)),
+            label: react_utilities_1.resolveShorthand(label, {
+                defaultProps: {
+                    id: labelId,
+                    role: 'presentation',
+                },
+            }),
+        };
+    };
+    exports.useOptionGroup_unstable = useOptionGroup_unstable;
+});
+//# sourceMappingURL=useOptionGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionGroup.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroup.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,IAAM,OAAO,GAAG,uBAAK,CAAC,aAAa,CAAC,CAAC;QAC7B,IAAA,KAAK,GAAK,KAAK,MAAV,CAAW;QAExB,OAAO;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,KAAK,EAAE,MAAM;aACd;YACD,IAAI,EAAE,uCAAqB,CAAC,KAAK,qBAC/B,GAAG,KAAA,EACH,IAAI,EAAE,OAAO,EACb,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAC3C,KAAK,EACR;YACF,KAAK,EAAE,kCAAgB,CAAC,KAAK,EAAE;gBAC7B,YAAY,EAAE;oBACZ,EAAE,EAAE,OAAO;oBACX,IAAI,EAAE,cAAc;iBACrB;aACF,CAAC;SACH,CAAC;IACJ,CAAC,CAAC;IAtBW,QAAA,uBAAuB,2BAsBlC","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"]}

package/lib-amd/components/OptionGroup/useOptionGroupStyles.js

@@ -0,0 +1,34 @@
+define(["require", "exports", "tslib", "@fluentui/react-theme", "@griffel/react"], function (require, exports, tslib_1, react_theme_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useOptionGroupStyles_unstable = exports.optionGroupClassNames = void 0;
+    exports.optionGroupClassNames = {
+        root: 'fui-OptionGroup',
+        label: 'fui-OptionGroup__label',
+    };
+    /**
+     * Styles for the root slot
+     */
+    var useStyles = react_1.makeStyles({
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            rowGap: react_theme_1.tokens.spacingHorizontalXXS,
+            '&:not(:last-child)::after': tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ content: '""' }, react_1.shorthands.borderBottom(react_theme_1.tokens.strokeWidthThin, 'solid', react_theme_1.tokens.colorNeutralStroke2)), { display: 'block', paddingBottom: react_theme_1.tokens.spacingHorizontalXS }), react_1.shorthands.margin(0, "calc(" + react_theme_1.tokens.spacingHorizontalXS + " * -1)", react_theme_1.tokens.spacingVerticalXS)),
+        },
+        label: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { color: react_theme_1.tokens.colorNeutralForeground3, display: 'block', fontSize: react_theme_1.tokens.fontSizeBase200, fontWeight: react_theme_1.tokens.fontWeightSemibold, lineHeight: react_theme_1.tokens.lineHeightBase200 }), react_1.shorthands.padding(react_theme_1.tokens.spacingHorizontalS, react_theme_1.tokens.spacingHorizontalSNudge)),
+    });
+    /**
+     * Apply styling to the OptionGroup slots based on the state
+     */
+    var useOptionGroupStyles_unstable = function (state) {
+        var styles = useStyles();
+        state.root.className = react_1.mergeClasses(exports.optionGroupClassNames.root, styles.root, state.root.className);
+        if (state.label) {
+            state.label.className = react_1.mergeClasses(exports.optionGroupClassNames.label, styles.label, state.label.className);
+        }
+        return state;
+    };
+    exports.useOptionGroupStyles_unstable = useOptionGroupStyles_unstable;
+});
+//# sourceMappingURL=useOptionGroupStyles.js.map

package/lib-amd/components/OptionGroup/useOptionGroupStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOptionGroupStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts"],"names":[],"mappings":";;;;IAKa,QAAA,qBAAqB,GAAqC;QACrE,IAAI,EAAE,iBAAiB;QACvB,KAAK,EAAE,wBAAwB;KAChC,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,QAAQ;YACvB,MAAM,EAAE,oBAAM,CAAC,oBAAoB;YAEnC,2BAA2B,uDACzB,OAAO,EAAE,IAAI,IACV,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,eAAe,EAAE,OAAO,EAAE,oBAAM,CAAC,mBAAmB,CAAC,KACvF,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,oBAAM,CAAC,mBAAmB,KACtC,kBAAU,CAAC,MAAM,CAAC,CAAC,EAAE,UAAQ,oBAAM,CAAC,mBAAmB,WAAQ,EAAE,oBAAM,CAAC,iBAAiB,CAAC,CAC9F;SACF;QAED,KAAK,yDACA,kBAAU,CAAC,YAAY,CAAC,oBAAM,CAAC,kBAAkB,CAAC,KACrD,KAAK,EAAE,oBAAM,CAAC,uBAAuB,EACrC,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,oBAAM,CAAC,eAAe,EAChC,UAAU,EAAE,oBAAM,CAAC,kBAAkB,EACrC,UAAU,EAAE,oBAAM,CAAC,iBAAiB,KACjC,kBAAU,CAAC,OAAO,CAAC,oBAAM,CAAC,kBAAkB,EAAE,oBAAM,CAAC,uBAAuB,CAAC,CACjF;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAAC,KAAuB;QACnE,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAC3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAEnG,IAAI,KAAK,CAAC,KAAK,EAAE;YACf,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,oBAAY,CAAC,6BAAqB,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;SACxG;QAED,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IATW,QAAA,6BAA6B,iCASxC","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"]}

package/lib-amd/contexts/ComboboxContext.js

@@ -0,0 +1,28 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ComboboxProvider = exports.ComboboxContext = void 0;
+    // eslint-disable-next-line @fluentui/no-context-default-value
+    exports.ComboboxContext = react_context_selector_1.createContext({
+        activeOption: undefined,
+        appearance: 'outline',
+        focusVisible: false,
+        open: false,
+        registerOption: function () {
+            return function () { return undefined; };
+        },
+        selectedOptions: [],
+        selectOption: function () {
+            // noop
+        },
+        setActiveOption: function () {
+            // noop
+        },
+        setOpen: function () {
+            // noop
+        },
+        size: 'medium',
+    });
+    exports.ComboboxProvider = exports.ComboboxContext.Provider;
+});
+//# sourceMappingURL=ComboboxContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/contexts/ComboboxContext.ts"],"names":[],"mappings":";;;;IAoBA,8DAA8D;IACjD,QAAA,eAAe,GAAG,sCAAa,CAAuB;QACjE,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,SAAS;QACrB,YAAY,EAAE,KAAK;QACnB,IAAI,EAAE,KAAK;QACX,cAAc;YACZ,OAAO,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;QACzB,CAAC;QACD,eAAe,EAAE,EAAE;QACnB,YAAY;YACV,OAAO;QACT,CAAC;QACD,eAAe;YACb,OAAO;QACT,CAAC;QACD,OAAO;YACL,OAAO;QACT,CAAC;QACD,IAAI,EAAE,QAAQ;KACf,CAAC,CAAC;IAEU,QAAA,gBAAgB,GAAG,uBAAe,CAAC,QAAQ,CAAC","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"]}

package/lib-amd/contexts/ListboxContext.js

@@ -0,0 +1,23 @@
+define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.ListboxProvider = exports.ListboxContext = void 0;
+    // eslint-disable-next-line @fluentui/no-context-default-value
+    exports.ListboxContext = react_context_selector_1.createContext({
+        activeOption: undefined,
+        focusVisible: false,
+        multiselect: false,
+        registerOption: function () {
+            return function () { return undefined; };
+        },
+        selectedOptions: [],
+        selectOption: function () {
+            // noop
+        },
+        setActiveOption: function () {
+            // noop
+        },
+    });
+    exports.ListboxProvider = exports.ListboxContext.Provider;
+});
+//# sourceMappingURL=ListboxContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListboxContext.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/contexts/ListboxContext.ts"],"names":[],"mappings":";;;;IAiBA,8DAA8D;IACjD,QAAA,cAAc,GAAG,sCAAa,CAAsB;QAC/D,YAAY,EAAE,SAAS;QACvB,YAAY,EAAE,KAAK;QACnB,WAAW,EAAE,KAAK;QAClB,cAAc;YACZ,OAAO,cAAM,OAAA,SAAS,EAAT,CAAS,CAAC;QACzB,CAAC;QACD,eAAe,EAAE,EAAE;QACnB,YAAY;YACV,OAAO;QACT,CAAC;QACD,eAAe;YACb,OAAO;QACT,CAAC;KACF,CAAC,CAAC;IAEU,QAAA,eAAe,GAAG,sBAAc,CAAC,QAAQ,CAAC","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport { ListboxState } from '../components/Listbox/Listbox.types';\n\n/**\n * Context shared with all Listbox Options\n */\nexport type ListboxContextValue = Pick<\n  ListboxState,\n  | 'activeOption'\n  | 'focusVisible'\n  | 'multiselect'\n  | 'registerOption'\n  | 'selectedOptions'\n  | 'selectOption'\n  | 'setActiveOption'\n>;\n\n// eslint-disable-next-line @fluentui/no-context-default-value\nexport const ListboxContext = createContext<ListboxContextValue>({\n  activeOption: undefined,\n  focusVisible: false,\n  multiselect: false,\n  registerOption() {\n    return () => undefined;\n  },\n  selectedOptions: [],\n  selectOption() {\n    // noop\n  },\n  setActiveOption() {\n    // noop\n  },\n});\n\nexport const ListboxProvider = ListboxContext.Provider;\n"]}

package/lib-amd/contexts/useComboboxContextValues.js

@@ -0,0 +1,23 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useComboboxContextValues = void 0;
+    function useComboboxContextValues(state) {
+        var activeOption = state.activeOption, appearance = state.appearance, focusVisible = state.focusVisible, open = state.open, registerOption = state.registerOption, selectedOptions = state.selectedOptions, selectOption = state.selectOption, setActiveOption = state.setActiveOption, setOpen = state.setOpen, size = state.size;
+        var combobox = {
+            activeOption: activeOption,
+            appearance: appearance,
+            focusVisible: focusVisible,
+            open: open,
+            registerOption: registerOption,
+            selectedOptions: selectedOptions,
+            selectOption: selectOption,
+            setActiveOption: setActiveOption,
+            setOpen: setOpen,
+            size: size,
+        };
+        return { combobox: combobox };
+    }
+    exports.useComboboxContextValues = useComboboxContextValues;
+});
+//# sourceMappingURL=useComboboxContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useComboboxContextValues.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/contexts/useComboboxContextValues.ts"],"names":[],"mappings":";;;;IAEA,SAAgB,wBAAwB,CAAC,KAAwB;QAE7D,IAAA,YAAY,GAUV,KAAK,aAVK,EACZ,UAAU,GASR,KAAK,WATG,EACV,YAAY,GAQV,KAAK,aARK,EACZ,IAAI,GAOF,KAAK,KAPH,EACJ,cAAc,GAMZ,KAAK,eANO,EACd,eAAe,GAKb,KAAK,gBALQ,EACf,YAAY,GAIV,KAAK,aAJK,EACZ,eAAe,GAGb,KAAK,gBAHQ,EACf,OAAO,GAEL,KAAK,QAFA,EACP,IAAI,GACF,KAAK,KADH,CACI;QAEV,IAAM,QAAQ,GAAG;YACf,YAAY,cAAA;YACZ,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,IAAI,MAAA;YACJ,cAAc,gBAAA;YACd,eAAe,iBAAA;YACf,YAAY,cAAA;YACZ,eAAe,iBAAA;YACf,OAAO,SAAA;YACP,IAAI,MAAA;SACL,CAAC;QAEF,OAAO,EAAE,QAAQ,UAAA,EAAE,CAAC;IACtB,CAAC;IA5BD,4DA4BC","sourcesContent":["import { ComboboxBaseContextValues, ComboboxBaseState } from '../utils/ComboboxBase.types';\n\nexport function useComboboxContextValues(state: ComboboxBaseState): ComboboxBaseContextValues {\n  const {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  } = state;\n\n  const combobox = {\n    activeOption,\n    appearance,\n    focusVisible,\n    open,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n    setOpen,\n    size,\n  };\n\n  return { combobox };\n}\n"]}

package/lib-amd/contexts/useListboxContextValues.js

@@ -0,0 +1,24 @@
+define(["require", "exports", "@fluentui/react-context-selector", "./ComboboxContext"], function (require, exports, react_context_selector_1, ComboboxContext_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useListboxContextValues = void 0;
+    function useListboxContextValues(state) {
+        var hasComboboxContext = react_context_selector_1.useHasParentContext(ComboboxContext_1.ComboboxContext);
+        var activeOption = state.activeOption, focusVisible = state.focusVisible, multiselect = state.multiselect, registerOption = state.registerOption, selectedOptions = state.selectedOptions, selectOption = state.selectOption, setActiveOption = state.setActiveOption;
+        // get register/unregister functions from parent combobox context
+        var comboboxRegisterOption = react_context_selector_1.useContextSelector(ComboboxContext_1.ComboboxContext, function (ctx) { return ctx.registerOption; });
+        var registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;
+        var listbox = {
+            activeOption: activeOption,
+            focusVisible: focusVisible,
+            multiselect: multiselect,
+            registerOption: registerOptionValue,
+            selectedOptions: selectedOptions,
+            selectOption: selectOption,
+            setActiveOption: setActiveOption,
+        };
+        return { listbox: listbox };
+    }
+    exports.useListboxContextValues = useListboxContextValues;
+});
+//# sourceMappingURL=useListboxContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useListboxContextValues.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/contexts/useListboxContextValues.ts"],"names":[],"mappings":";;;;IAIA,SAAgB,uBAAuB,CAAC,KAAmB;QACzD,IAAM,kBAAkB,GAAG,4CAAmB,CAAC,iCAAe,CAAC,CAAC;QAE9D,IAAA,YAAY,GAOV,KAAK,aAPK,EACZ,YAAY,GAMV,KAAK,aANK,EACZ,WAAW,GAKT,KAAK,YALI,EACX,cAAc,GAIZ,KAAK,eAJO,EACd,eAAe,GAGb,KAAK,gBAHQ,EACf,YAAY,GAEV,KAAK,aAFK,EACZ,eAAe,GACb,KAAK,gBADQ,CACP;QAEV,iEAAiE;QACjE,IAAM,sBAAsB,GAAG,2CAAkB,CAAC,iCAAe,EAAE,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,cAAc,EAAlB,CAAkB,CAAC,CAAC;QAE9F,IAAM,mBAAmB,GAAG,kBAAkB,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,cAAc,CAAC;QAEzF,IAAM,OAAO,GAAG;YACd,YAAY,cAAA;YACZ,YAAY,cAAA;YACZ,WAAW,aAAA;YACX,cAAc,EAAE,mBAAmB;YACnC,eAAe,iBAAA;YACf,YAAY,cAAA;YACZ,eAAe,iBAAA;SAChB,CAAC;QAEF,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;IACrB,CAAC;IA5BD,0DA4BC","sourcesContent":["import { useContextSelector, useHasParentContext } from '@fluentui/react-context-selector';\nimport { ListboxContextValues, ListboxState } from '../components/Listbox/Listbox.types';\nimport { ComboboxContext } from './ComboboxContext';\n\nexport function useListboxContextValues(state: ListboxState): ListboxContextValues {\n  const hasComboboxContext = useHasParentContext(ComboboxContext);\n  const {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n  } = state;\n\n  // get register/unregister functions from parent combobox context\n  const comboboxRegisterOption = useContextSelector(ComboboxContext, ctx => ctx.registerOption);\n\n  const registerOptionValue = hasComboboxContext ? comboboxRegisterOption : registerOption;\n\n  const listbox = {\n    activeOption,\n    focusVisible,\n    multiselect,\n    registerOption: registerOptionValue,\n    selectedOptions,\n    selectOption,\n    setActiveOption,\n  };\n\n  return { listbox };\n}\n"]}

package/lib-amd/index.js

@@ -0,0 +1,37 @@
+define(["require", "exports", "./contexts/ComboboxContext", "./contexts/ListboxContext", "./contexts/useComboboxContextValues", "./contexts/useListboxContextValues", "./Listbox", "./Option", "./Combobox", "./Dropdown", "./OptionGroup", "./ComboboxField"], function (require, exports, ComboboxContext_1, ListboxContext_1, useComboboxContextValues_1, useListboxContextValues_1, Listbox_1, Option_1, Combobox_1, Dropdown_1, OptionGroup_1, ComboboxField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.comboboxFieldClassNames = exports.ComboboxField_unstable = exports.useOptionGroup_unstable = exports.useOptionGroupStyles_unstable = exports.renderOptionGroup_unstable = exports.optionGroupClassNames = exports.OptionGroup = exports.useDropdown_unstable = exports.useDropdownStyles_unstable = exports.renderDropdown_unstable = exports.dropdownClassNames = exports.Dropdown = exports.useCombobox_unstable = exports.useComboboxStyles_unstable = exports.renderCombobox_unstable = exports.comboboxClassNames = exports.Combobox = exports.useOption_unstable = exports.useOptionStyles_unstable = exports.renderOption_unstable = exports.optionClassNames = exports.Option = exports.useListbox_unstable = exports.useListboxStyles_unstable = exports.renderListbox_unstable = exports.listboxClassNames = exports.Listbox = exports.useListboxContextValues = exports.useComboboxContextValues = exports.ListboxProvider = exports.ComboboxProvider = void 0;
+    Object.defineProperty(exports, "ComboboxProvider", { enumerable: true, get: function () { return ComboboxContext_1.ComboboxProvider; } });
+    Object.defineProperty(exports, "ListboxProvider", { enumerable: true, get: function () { return ListboxContext_1.ListboxProvider; } });
+    Object.defineProperty(exports, "useComboboxContextValues", { enumerable: true, get: function () { return useComboboxContextValues_1.useComboboxContextValues; } });
+    Object.defineProperty(exports, "useListboxContextValues", { enumerable: true, get: function () { return useListboxContextValues_1.useListboxContextValues; } });
+    Object.defineProperty(exports, "Listbox", { enumerable: true, get: function () { return Listbox_1.Listbox; } });
+    Object.defineProperty(exports, "listboxClassNames", { enumerable: true, get: function () { return Listbox_1.listboxClassNames; } });
+    Object.defineProperty(exports, "renderListbox_unstable", { enumerable: true, get: function () { return Listbox_1.renderListbox_unstable; } });
+    Object.defineProperty(exports, "useListboxStyles_unstable", { enumerable: true, get: function () { return Listbox_1.useListboxStyles_unstable; } });
+    Object.defineProperty(exports, "useListbox_unstable", { enumerable: true, get: function () { return Listbox_1.useListbox_unstable; } });
+    Object.defineProperty(exports, "Option", { enumerable: true, get: function () { return Option_1.Option; } });
+    Object.defineProperty(exports, "optionClassNames", { enumerable: true, get: function () { return Option_1.optionClassNames; } });
+    Object.defineProperty(exports, "renderOption_unstable", { enumerable: true, get: function () { return Option_1.renderOption_unstable; } });
+    Object.defineProperty(exports, "useOptionStyles_unstable", { enumerable: true, get: function () { return Option_1.useOptionStyles_unstable; } });
+    Object.defineProperty(exports, "useOption_unstable", { enumerable: true, get: function () { return Option_1.useOption_unstable; } });
+    Object.defineProperty(exports, "Combobox", { enumerable: true, get: function () { return Combobox_1.Combobox; } });
+    Object.defineProperty(exports, "comboboxClassNames", { enumerable: true, get: function () { return Combobox_1.comboboxClassNames; } });
+    Object.defineProperty(exports, "renderCombobox_unstable", { enumerable: true, get: function () { return Combobox_1.renderCombobox_unstable; } });
+    Object.defineProperty(exports, "useComboboxStyles_unstable", { enumerable: true, get: function () { return Combobox_1.useComboboxStyles_unstable; } });
+    Object.defineProperty(exports, "useCombobox_unstable", { enumerable: true, get: function () { return Combobox_1.useCombobox_unstable; } });
+    Object.defineProperty(exports, "Dropdown", { enumerable: true, get: function () { return Dropdown_1.Dropdown; } });
+    Object.defineProperty(exports, "dropdownClassNames", { enumerable: true, get: function () { return Dropdown_1.dropdownClassNames; } });
+    Object.defineProperty(exports, "renderDropdown_unstable", { enumerable: true, get: function () { return Dropdown_1.renderDropdown_unstable; } });
+    Object.defineProperty(exports, "useDropdownStyles_unstable", { enumerable: true, get: function () { return Dropdown_1.useDropdownStyles_unstable; } });
+    Object.defineProperty(exports, "useDropdown_unstable", { enumerable: true, get: function () { return Dropdown_1.useDropdown_unstable; } });
+    Object.defineProperty(exports, "OptionGroup", { enumerable: true, get: function () { return OptionGroup_1.OptionGroup; } });
+    Object.defineProperty(exports, "optionGroupClassNames", { enumerable: true, get: function () { return OptionGroup_1.optionGroupClassNames; } });
+    Object.defineProperty(exports, "renderOptionGroup_unstable", { enumerable: true, get: function () { return OptionGroup_1.renderOptionGroup_unstable; } });
+    Object.defineProperty(exports, "useOptionGroupStyles_unstable", { enumerable: true, get: function () { return OptionGroup_1.useOptionGroupStyles_unstable; } });
+    Object.defineProperty(exports, "useOptionGroup_unstable", { enumerable: true, get: function () { return OptionGroup_1.useOptionGroup_unstable; } });
+    Object.defineProperty(exports, "ComboboxField_unstable", { enumerable: true, get: function () { return ComboboxField_1.ComboboxField; } });
+    Object.defineProperty(exports, "comboboxFieldClassNames", { enumerable: true, get: function () { return ComboboxField_1.comboboxFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-combobox/src/index.ts"],"names":[],"mappings":";;;;IAAS,mHAAA,gBAAgB,OAAA;IAEhB,iHAAA,eAAe,OAAA;IAEf,oIAAA,wBAAwB,OAAA;IACxB,kIAAA,uBAAuB,OAAA;IAE9B,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,iHAAA,sBAAsB,OAAA;IACtB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA;IAInB,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAIlB,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,mHAAA,uBAAuB,OAAA;IACvB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAWpB,oGAAA,QAAQ,OAAA;IACR,8GAAA,kBAAkB,OAAA;IAClB,mHAAA,uBAAuB,OAAA;IACvB,sHAAA,0BAA0B,OAAA;IAC1B,gHAAA,oBAAoB,OAAA;IAWpB,0GAAA,WAAW,OAAA;IACX,oHAAA,qBAAqB,OAAA;IACrB,yHAAA,0BAA0B,OAAA;IAC1B,4HAAA,6BAA6B,OAAA;IAC7B,sHAAA,uBAAuB,OAAA;IAKhB,uHAAA,aAAa,OAA0B;IAAE,wHAAA,uBAAuB,OAAA","sourcesContent":["export { ComboboxProvider } from './contexts/ComboboxContext';\nexport type { ComboboxContextValue } from './contexts/ComboboxContext';\nexport { ListboxProvider } from './contexts/ListboxContext';\nexport type { ListboxContextValue } from './contexts/ListboxContext';\nexport { useComboboxContextValues } from './contexts/useComboboxContextValues';\nexport { useListboxContextValues } from './contexts/useListboxContextValues';\nexport {\n  Listbox,\n  listboxClassNames,\n  renderListbox_unstable,\n  useListboxStyles_unstable,\n  useListbox_unstable,\n} from './Listbox';\nexport type { ListboxContextValues, ListboxProps, ListboxSlots, ListboxState } from './Listbox';\nexport {\n  Option,\n  optionClassNames,\n  renderOption_unstable,\n  useOptionStyles_unstable,\n  useOption_unstable,\n} from './Option';\nexport type { OptionProps, OptionSlots, OptionState } from './Option';\nexport {\n  Combobox,\n  comboboxClassNames,\n  renderCombobox_unstable,\n  useComboboxStyles_unstable,\n  useCombobox_unstable,\n} from './Combobox';\nexport type {\n  ComboboxContextValues,\n  ComboboxOpenChangeData,\n  ComboboxOpenEvents,\n  ComboboxProps,\n  ComboboxSlots,\n  ComboboxState,\n} from './Combobox';\nexport {\n  Dropdown,\n  dropdownClassNames,\n  renderDropdown_unstable,\n  useDropdownStyles_unstable,\n  useDropdown_unstable,\n} from './Dropdown';\nexport type {\n  DropdownContextValues,\n  DropdownOpenChangeData,\n  DropdownOpenEvents,\n  DropdownProps,\n  DropdownSlots,\n  DropdownState,\n} from './Dropdown';\nexport {\n  OptionGroup,\n  optionGroupClassNames,\n  renderOptionGroup_unstable,\n  useOptionGroupStyles_unstable,\n  useOptionGroup_unstable,\n} from './OptionGroup';\nexport type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField';\n"]}

package/lib-amd/utils/ComboboxBase.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=ComboboxBase.types.js.map

package/lib-amd/utils/ComboboxBase.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboboxBase.types.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-combobox/src/utils/ComboboxBase.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { PositioningShorthand } from '@fluentui/react-positioning';\nimport type { ComboboxContextValue } from '../contexts/ComboboxContext';\nimport type { OptionValue, OptionCollectionState } from '../utils/OptionCollection.types';\nimport { SelectionProps, SelectionState } from '../utils/Selection.types';\n\n/**\n * ComboboxBase Props\n * Shared types between Combobox and Dropdown components\n */\nexport type ComboboxBaseProps = SelectionProps & {\n  /**\n   * Controls the colors and borders of the combobox trigger.\n   * @default 'outline'\n   */\n  appearance?: 'filled-darker' | 'filled-lighter' | 'outline' | 'underline';\n\n  /**\n   * The default open state when open is uncontrolled\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * The default value displayed in the trigger input or button when the combobox's value is uncontrolled\n   */\n  defaultValue?: string;\n\n  /**\n   * Render the combobox's popup inline in the DOM.\n   * This has accessibility benefits, particularly for touch screen readers.\n   */\n  inlinePopup?: boolean;\n\n  /**\n   * Callback when the open/closed state of the dropdown changes\n   */\n  onOpenChange?: (e: ComboboxBaseOpenEvents, data: ComboboxBaseOpenChangeData) => void;\n\n  /**\n   * Sets the open/closed state of the dropdown.\n   * Use together with onOpenChange to fully control the dropdown's visibility\n   */\n  open?: boolean;\n\n  /**\n   * If set, the placeholder will show when no value is selected\n   */\n  placeholder?: string;\n\n  /**\n   * Configure the positioning of the combobox dropdown\n   *\n   * @defaultvalue below\n   */\n  positioning?: PositioningShorthand;\n\n  /**\n   * Controls the size of the combobox faceplate\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * The value displayed by the Combobox.\n   * Use this with `onOptionSelect` to directly control the displayed value string\n   */\n  value?: string;\n};\n\n/**\n * State used in rendering Combobox\n */\nexport type ComboboxBaseState = Required<Pick<ComboboxBaseProps, 'appearance' | 'open' | 'inlinePopup' | 'size'>> &\n  Pick<ComboboxBaseProps, 'placeholder' | 'value' | 'multiselect'> &\n  OptionCollectionState &\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    // whether the combobox/dropdown currently has focus\n    hasFocus: boolean;\n\n    /* Whether the next blur event should be ignored, and the combobox/dropdown will not close.*/\n    ignoreNextBlur: React.MutableRefObject<boolean>;\n\n    setActiveOption(option?: OptionValue): void;\n\n    setFocusVisible(focusVisible: boolean): void;\n\n    setHasFocus(hasFocus: boolean): void;\n\n    setOpen(event: ComboboxBaseOpenEvents, newState: boolean): void;\n\n    setValue(newValue: string | undefined): void;\n  };\n\n/**\n * Data for the Combobox onOpenChange event.\n */\nexport type ComboboxBaseOpenChangeData = {\n  open: boolean;\n};\n\n/* Possible event types for onOpen */\nexport type ComboboxBaseOpenEvents =\n  | React.MouseEvent<HTMLElement>\n  | React.KeyboardEvent<HTMLElement>\n  | React.FocusEvent<HTMLElement>;\n\nexport type ComboboxBaseContextValues = {\n  combobox: ComboboxContextValue;\n};\n"]}

package/lib-amd/utils/OptionCollection.types.js

@@ -0,0 +1,5 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+});
+//# sourceMappingURL=OptionCollection.types.js.map