@fluentui/react-select 9.0.0-beta.8 → 9.0.0

package/lib-amd/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/SelectField.ts"],"names":[],"mappings":";;;IAAA,uCAA+C","sourcesContent":["export * from './components/SelectField/index';\n"]}

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

@@ -0,0 +1,15 @@
+define(["require", "exports", "react", "./useSelect", "./renderSelect", "./useSelectStyles"], function (require, exports, React, useSelect_1, renderSelect_1, useSelectStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.Select = void 0;
+    /**
+     * Select component
+     */
+    exports.Select = React.forwardRef(function (props, ref) {
+        var state = useSelect_1.useSelect_unstable(props, ref);
+        useSelectStyles_1.useSelectStyles_unstable(state);
+        return renderSelect_1.renderSelect_unstable(state);
+    });
+    exports.Select.displayName = 'Select';
+});
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,MAAM,GAAqC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAClF,IAAM,KAAK,GAAG,8BAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE7C,0CAAwB,CAAC,KAAK,CAAC,CAAC;QAChC,OAAO,oCAAqB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,cAAM,CAAC,WAAW,GAAG,QAAQ,CAAC","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/Select.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type SelectSlots = {\n  /*\n   * Wrapper for both the select and icon, renders as a `<span>`.\n   * The `className` and `style` props on `<Select>` are applied to this slot;\n   * All other top-level props are applied to the primary slot, `select`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /** Primary slot: the actual `<select>` element */\n  select: NonNullable<Slot<'select'>>;\n\n  /** the icon, typically a down arrow */\n  icon: Slot<'span'>;\n};\n\nexport type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {\n  /**\n   * Controls the colors and borders of the Select.\n   *\n   * @default 'outline'\n   */\n  appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';\n\n  /**\n   * Called when the user changes the select element's value by selecting an option.\n   */\n  onChange?: (ev: React.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;\n\n  /**\n   * Matches the Input sizes\n   *\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\nexport type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;\n\n/**\n * Data passed to the `onChange` callback when a new option is selected.\n */\nexport type SelectOnChangeData = {\n  /**\n   * Updated `<select>` value, taken from either the selected option's value prop or inner text.\n   */\n  value: string;\n};\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "tslib", "./Select", "./Select.types", "./renderSelect", "./useSelect", "./useSelectStyles"], function (require, exports, tslib_1, Select_1, Select_types_1, renderSelect_1, useSelect_1, useSelectStyles_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(Select_1, exports);
+    tslib_1.__exportStar(Select_types_1, exports);
+    tslib_1.__exportStar(renderSelect_1, exports);
+    tslib_1.__exportStar(useSelect_1, exports);
+    tslib_1.__exportStar(useSelectStyles_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/index.ts"],"names":[],"mappings":";;;IAAA,wCAAyB;IACzB,8CAA+B;IAC/B,8CAA+B;IAC/B,2CAA4B;IAC5B,iDAAkC","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"]}

package/lib-amd/components/Select/renderSelect.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.renderSelect_unstable = void 0;
+    /**
+     * Render the final JSX of Select
+     */
+    var renderSelect_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),
+            React.createElement(slots.select, tslib_1.__assign({}, slotProps.select), slotProps.select.children),
+            React.createElement(slots.icon, tslib_1.__assign({}, slotProps.icon))));
+    };
+    exports.renderSelect_unstable = renderSelect_unstable;
+});
+//# sourceMappingURL=renderSelect.js.map

package/lib-amd/components/Select/renderSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderSelect.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,qBAAqB,GAAG,UAAC,KAAkB;QAChD,IAAA,KAAuB,0BAAQ,CAAc,KAAK,CAAC,EAAjD,KAAK,WAAA,EAAE,SAAS,eAAiC,CAAC;QAC1D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,KAAK,CAAC,MAAM,uBAAK,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAgB;YAC9E,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,EAAI,CACvB,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,qBAAqB,yBAQhC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  const { slots, slotProps } = getSlots<SelectSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n      <slots.icon {...slotProps.icon} />\n    </slots.root>\n  );\n};\n"]}

package/lib-amd/components/Select/useSelect.js

@@ -0,0 +1,51 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "@fluentui/react-icons", "@fluentui/react-shared-contexts"], function (require, exports, tslib_1, React, react_utilities_1, react_icons_1, react_shared_contexts_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSelect_unstable = void 0;
+    /**
+     * Create the state required to render Select.
+     *
+     * The returned state can be modified with hooks such as useSelectStyles,
+     * before being passed to renderSelect.
+     *
+     * @param props - props from this instance of Select
+     * @param ref - reference to the `<select>` element in Select
+     */
+    var useSelect_unstable = function (props, ref) {
+        var _a;
+        var overrides = react_shared_contexts_1.useOverrides_unstable();
+        var defaultValue = props.defaultValue, value = props.value, select = props.select, icon = props.icon, root = props.root, _b = props.appearance, appearance = _b === void 0 ? (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline' : _b, onChange = props.onChange, _c = props.size, size = _c === void 0 ? 'medium' : _c;
+        var nativeProps = react_utilities_1.getPartitionedNativeProps({
+            props: props,
+            primarySlotTagName: 'select',
+            excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],
+        });
+        var state = {
+            size: size,
+            appearance: appearance,
+            components: {
+                root: 'span',
+                select: 'select',
+                icon: 'span',
+            },
+            select: react_utilities_1.resolveShorthand(select, {
+                required: true,
+                defaultProps: tslib_1.__assign({ defaultValue: defaultValue, value: value, ref: ref }, nativeProps.primary),
+            }),
+            icon: react_utilities_1.resolveShorthand(icon, {
+                required: true,
+                defaultProps: { children: React.createElement(react_icons_1.ChevronDownRegular, null) },
+            }),
+            root: react_utilities_1.resolveShorthand(root, {
+                required: true,
+                defaultProps: nativeProps.root,
+            }),
+        };
+        state.select.onChange = react_utilities_1.useEventCallback(function (event) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(event, { value: event.target.value });
+        });
+        return state;
+    };
+    exports.useSelect_unstable = useSelect_unstable;
+});
+//# sourceMappingURL=useSelect.js.map

package/lib-amd/components/Select/useSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelect.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelect.tsx"],"names":[],"mappings":";;;;IAMA;;;;;;;;OAQG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAkB,EAAE,GAAiC;;QACtF,IAAM,SAAS,GAAG,6CAAY,EAAE,CAAC;QAG/B,IAAA,YAAY,GASV,KAAK,aATK,EACZ,KAAK,GAQH,KAAK,MARF,EACL,MAAM,GAOJ,KAAK,OAPD,EACN,IAAI,GAMF,KAAK,KANH,EACJ,IAAI,GAKF,KAAK,KALH,EACJ,KAIE,KAAK,WAJmD,EAA1D,UAAU,mBAAG,MAAA,SAAS,CAAC,sBAAsB,mCAAI,SAAS,KAAA,EAE1D,QAAQ,GAEN,KAAK,SAFC,EACR,KACE,KAAK,KADQ,EAAf,IAAI,mBAAG,QAAQ,KAAA,CACP;QAEV,IAAM,WAAW,GAAG,2CAAyB,CAAC;YAC5C,KAAK,OAAA;YACL,kBAAkB,EAAE,QAAQ;YAC5B,iBAAiB,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO,CAAC;SAC/E,CAAC,CAAC;QAEH,IAAM,KAAK,GAAgB;YACzB,IAAI,MAAA;YACJ,UAAU,YAAA;YACV,UAAU,EAAE;gBACV,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,QAAQ;gBAChB,IAAI,EAAE,MAAM;aACb;YACD,MAAM,EAAE,kCAAgB,CAAC,MAAM,EAAE;gBAC/B,QAAQ,EAAE,IAAI;gBACd,YAAY,qBACV,YAAY,cAAA,EACZ,KAAK,OAAA,EACL,GAAG,KAAA,IACA,WAAW,CAAC,OAAO,CACvB;aACF,CAAC;YACF,IAAI,EAAE,kCAAgB,CAAC,IAAI,EAAE;gBAC3B,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,EAAE,QAAQ,EAAE,oBAAC,gCAAkB,OAAG,EAAE;aACnD,CAAC;YACF,IAAI,EAAE,kCAAgB,CAAC,IAAI,EAAE;gBAC3B,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE,WAAW,CAAC,IAAI;aAC/B,CAAC;SACH,CAAC;QAEF,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,kCAAgB,CAAC,UAAA,KAAK;YAC5C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,EAAE,EAAE,KAAK,EAAG,KAAK,CAAC,MAA4B,CAAC,KAAK,EAAE,CAAC,CAAC;QAC1E,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IArDW,QAAA,kBAAkB,sBAqD7B","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: resolveShorthand(select, {\n      required: true,\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    icon: resolveShorthand(icon, {\n      required: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n    }),\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"]}

package/lib-amd/components/Select/useSelectStyles.js

@@ -0,0 +1,154 @@
+define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.useSelectStyles_unstable = exports.selectClassNames = void 0;
+    exports.selectClassNames = {
+        root: 'fui-Select',
+        select: 'fui-Select__select',
+        icon: 'fui-Select__icon',
+    };
+    var iconSizes = {
+        small: '16px',
+        medium: '20px',
+        large: '24px',
+    };
+    //TODO: Should fieldHeights be a set of global design tokens or constants?
+    var fieldHeights = {
+        small: '24px',
+        medium: '32px',
+        large: '40px',
+    };
+    /* Since the <select> element must span the full width and cannot have children,
+     * the right padding needs to be calculated from the sum of the following:
+     * 1. Field padding-right
+     * 2. Icon width
+     * 3. Content-icon spacing
+     * 4. Content inner padding
+     */
+    var paddingRight = {
+        small: "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + "\n    + " + iconSizes.small + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
+        medium: "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + "\n    + " + iconSizes.medium + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + "\n    + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
+        large: "calc(" + react_theme_1.tokens.spacingHorizontalM + "\n    + " + iconSizes.large + "\n    + " + react_theme_1.tokens.spacingHorizontalSNudge + "\n    + " + react_theme_1.tokens.spacingHorizontalSNudge + ")",
+    };
+    /* Left padding is calculated from the outer padding + inner content padding values
+     * since <select> can't have additional child content or custom inner layout */
+    var paddingLeft = {
+        small: "calc(" + react_theme_1.tokens.spacingHorizontalSNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
+        medium: "calc(" + react_theme_1.tokens.spacingHorizontalMNudge + " + " + react_theme_1.tokens.spacingHorizontalXXS + ")",
+        large: "calc(" + react_theme_1.tokens.spacingHorizontalM + " + " + react_theme_1.tokens.spacingHorizontalSNudge + ")",
+    };
+    /* end of shared values */
+    var useRootStyles = react_1.makeStyles({
+        base: {
+            alignItems: 'center',
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexWrap: 'nowrap',
+            fontFamily: react_theme_1.tokens.fontFamilyBase,
+            position: 'relative',
+            '&::after': tslib_1.__assign(tslib_1.__assign({ backgroundImage: "linear-gradient(\n        0deg,\n        " + react_theme_1.tokens.colorCompoundBrandStroke + " 0%,\n        " + react_theme_1.tokens.colorCompoundBrandStroke + " 50%,\n        transparent 50%,\n        transparent 100%\n      )" }, react_1.shorthands.borderRadius(0, 0, react_theme_1.tokens.borderRadiusMedium, react_theme_1.tokens.borderRadiusMedium)), { boxSizing: 'border-box', content: '""', height: react_theme_1.tokens.borderRadiusMedium, position: 'absolute', bottom: '0', left: '0', right: '0', transform: 'scaleX(0)', transitionProperty: 'transform', transitionDuration: react_theme_1.tokens.durationUltraFast, transitionDelay: react_theme_1.tokens.curveAccelerateMid, '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                } }),
+            '&:focus-within::after': {
+                transform: 'scaleX(1)',
+                transitionProperty: 'transform',
+                transitionDuration: react_theme_1.tokens.durationNormal,
+                transitionDelay: react_theme_1.tokens.curveDecelerateMid,
+                '@media screen and (prefers-reduced-motion: reduce)': {
+                    transitionDuration: '0.01ms',
+                    transitionDelay: '0.01ms',
+                },
+            },
+        },
+    });
+    var useSelectStyles = react_1.makeStyles({
+        base: tslib_1.__assign(tslib_1.__assign(tslib_1.__assign({ appearance: 'none' }, react_1.shorthands.border('1px', 'solid', 'transparent')), react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)), { boxShadow: 'none', boxSizing: 'border-box', color: react_theme_1.tokens.colorNeutralForeground1, cursor: 'pointer', flexGrow: 1, maxWidth: '100%', paddingBottom: 0, paddingTop: 0, ':focus': {
+                outlineWidth: '2px',
+                outlineStyle: 'solid',
+                outlineColor: 'transparent',
+            } }),
+        disabled: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStrokeDisabled)), { color: react_theme_1.tokens.colorNeutralForegroundDisabled, cursor: 'not-allowed', '@media (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderColor('GrayText')) }),
+        disabledUnderline: tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorTransparentStrokeDisabled, react_theme_1.tokens.colorTransparentStrokeDisabled, react_theme_1.tokens.colorNeutralStrokeDisabled)),
+        small: tslib_1.__assign({ height: fieldHeights.small, paddingLeft: paddingLeft.small, paddingRight: paddingRight.small }, react_theme_1.typographyStyles.caption1),
+        medium: tslib_1.__assign({ height: fieldHeights.medium, paddingLeft: paddingLeft.medium, paddingRight: paddingRight.medium }, react_theme_1.typographyStyles.body1),
+        large: tslib_1.__assign({ height: fieldHeights.large, paddingLeft: paddingLeft.large, paddingRight: paddingRight.large }, react_theme_1.typographyStyles.body2),
+        outline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorNeutralBackground1 }, react_1.shorthands.border('1px', 'solid', react_theme_1.tokens.colorNeutralStroke1)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        outlineInteractive: {
+            '&:hover': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Hover)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+            '&:active': tslib_1.__assign(tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1Pressed)), { borderBottomColor: react_theme_1.tokens.colorNeutralStrokeAccessible }),
+        },
+        underline: tslib_1.__assign(tslib_1.__assign({ backgroundColor: react_theme_1.tokens.colorTransparentBackground }, react_1.shorthands.borderBottom('1px', 'solid', react_theme_1.tokens.colorNeutralStrokeAccessible)), react_1.shorthands.borderRadius(0)),
+        'filled-lighter': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground1,
+        },
+        'filled-darker': {
+            backgroundColor: react_theme_1.tokens.colorNeutralBackground3,
+        },
+        invalid: {
+            ':not(:focus-within),:hover:not(:focus-within)': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorPaletteRedBorder2)),
+        },
+        invalidUnderline: {
+            ':not(:focus-within),:hover:not(:focus-within)': {
+                borderBottomColor: react_theme_1.tokens.colorPaletteRedBorder2,
+            },
+        },
+    });
+    var useIconStyles = react_1.makeStyles({
+        icon: {
+            boxSizing: 'border-box',
+            color: react_theme_1.tokens.colorNeutralStrokeAccessible,
+            display: 'block',
+            position: 'absolute',
+            pointerEvents: 'none',
+            // the SVG must have display: block for accurate positioning
+            // otherwise an extra inline space is inserted after the svg element
+            '& svg': {
+                display: 'block',
+            },
+        },
+        disabled: {
+            color: react_theme_1.tokens.colorNeutralForegroundDisabled,
+            '@media (forced-colors: active)': {
+                color: 'GrayText',
+            },
+        },
+        small: {
+            fontSize: iconSizes.small,
+            height: iconSizes.small,
+            right: react_theme_1.tokens.spacingHorizontalSNudge,
+            width: iconSizes.small,
+        },
+        medium: {
+            fontSize: iconSizes.medium,
+            height: iconSizes.medium,
+            right: react_theme_1.tokens.spacingHorizontalMNudge,
+            width: iconSizes.medium,
+        },
+        large: {
+            fontSize: iconSizes.large,
+            height: iconSizes.large,
+            right: react_theme_1.tokens.spacingHorizontalM,
+            width: iconSizes.large,
+        },
+    });
+    /**
+     * Apply styling to the Select slots based on the state
+     */
+    var useSelectStyles_unstable = function (state) {
+        var size = state.size, appearance = state.appearance;
+        var disabled = state.select.disabled;
+        var invalid = "" + state.select['aria-invalid'] === 'true';
+        var iconStyles = useIconStyles();
+        var rootStyles = useRootStyles();
+        var selectStyles = useSelectStyles();
+        state.root.className = react_1.mergeClasses(exports.selectClassNames.root, rootStyles.base, state.root.className);
+        state.select.className = react_1.mergeClasses(exports.selectClassNames.select, selectStyles.base, selectStyles[size], selectStyles[appearance], !disabled && appearance === 'outline' && selectStyles.outlineInteractive, !disabled && invalid && appearance !== 'underline' && selectStyles.invalid, !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline, disabled && selectStyles.disabled, disabled && appearance === 'underline' && selectStyles.disabledUnderline, state.select.className);
+        if (state.icon) {
+            state.icon.className = react_1.mergeClasses(exports.selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
+        }
+        return state;
+    };
+    exports.useSelectStyles_unstable = useSelectStyles_unstable;
+});
+//# sourceMappingURL=useSelectStyles.js.map

package/lib-amd/components/Select/useSelectStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/Select/useSelectStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\nexport const selectClassNames: SlotClassNames<SelectSlots> = {\n  root: 'fui-Select',\n  select: 'fui-Select__select',\n  icon: 'fui-Select__icon',\n};\n\nconst iconSizes = {\n  small: '16px',\n  medium: '20px',\n  large: '24px',\n};\n\n//TODO: Should fieldHeights be a set of global design tokens or constants?\nconst fieldHeights = {\n  small: '24px',\n  medium: '32px',\n  large: '40px',\n};\n\n/* Since the <select> element must span the full width and cannot have children,\n * the right padding needs to be calculated from the sum of the following:\n * 1. Field padding-right\n * 2. Icon width\n * 3. Content-icon spacing\n * 4. Content inner padding\n */\nconst paddingRight = {\n  small: `calc(${tokens.spacingHorizontalSNudge}\n    + ${iconSizes.small}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge}\n    + ${iconSizes.medium}\n    + ${tokens.spacingHorizontalXXS}\n    + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM}\n    + ${iconSizes.large}\n    + ${tokens.spacingHorizontalSNudge}\n    + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* Left padding is calculated from the outer padding + inner content padding values\n * since <select> can't have additional child content or custom inner layout */\nconst paddingLeft = {\n  small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n  medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n  large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n};\n\n/* end of shared values */\n\nconst useRootStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexWrap: 'nowrap',\n    fontFamily: tokens.fontFamilyBase,\n    position: 'relative',\n\n    '&::after': {\n      backgroundImage: `linear-gradient(\n        0deg,\n        ${tokens.colorCompoundBrandStroke} 0%,\n        ${tokens.colorCompoundBrandStroke} 50%,\n        transparent 50%,\n        transparent 100%\n      )`,\n      ...shorthands.borderRadius(0, 0, tokens.borderRadiusMedium, tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      height: tokens.borderRadiusMedium,\n      position: 'absolute',\n      bottom: '0',\n      left: '0',\n      right: '0',\n      transform: 'scaleX(0)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationUltraFast,\n      transitionDelay: tokens.curveAccelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n\n    '&:focus-within::after': {\n      transform: 'scaleX(1)',\n      transitionProperty: 'transform',\n      transitionDuration: tokens.durationNormal,\n      transitionDelay: tokens.curveDecelerateMid,\n\n      '@media screen and (prefers-reduced-motion: reduce)': {\n        transitionDuration: '0.01ms',\n        transitionDelay: '0.01ms',\n      },\n    },\n  },\n});\n\nconst useSelectStyles = makeStyles({\n  base: {\n    appearance: 'none',\n    ...shorthands.border('1px', 'solid', 'transparent'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    boxShadow: 'none',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground1,\n    cursor: 'pointer',\n    flexGrow: 1,\n    maxWidth: '100%',\n    paddingBottom: 0,\n    paddingTop: 0,\n\n    ':focus': {\n      outlineWidth: '2px',\n      outlineStyle: 'solid',\n      outlineColor: 'transparent',\n    },\n  },\n  disabled: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n    '@media (forced-colors: active)': {\n      ...shorthands.borderColor('GrayText'),\n    },\n  },\n  disabledUnderline: {\n    ...shorthands.borderColor(\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorTransparentStrokeDisabled,\n      tokens.colorNeutralStrokeDisabled,\n    ),\n  },\n\n  small: {\n    height: fieldHeights.small,\n    paddingLeft: paddingLeft.small,\n    paddingRight: paddingRight.small,\n    ...typographyStyles.caption1,\n  },\n  medium: {\n    height: fieldHeights.medium,\n    paddingLeft: paddingLeft.medium,\n    paddingRight: paddingRight.medium,\n    ...typographyStyles.body1,\n  },\n  large: {\n    height: fieldHeights.large,\n    paddingLeft: paddingLeft.large,\n    paddingRight: paddingRight.large,\n    ...typographyStyles.body2,\n  },\n  outline: {\n    backgroundColor: tokens.colorNeutralBackground1,\n    ...shorthands.border('1px', 'solid', tokens.colorNeutralStroke1),\n    borderBottomColor: tokens.colorNeutralStrokeAccessible,\n  },\n  outlineInteractive: {\n    '&:hover': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n\n    '&:active': {\n      ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n      borderBottomColor: tokens.colorNeutralStrokeAccessible,\n    },\n  },\n  underline: {\n    backgroundColor: tokens.colorTransparentBackground,\n    ...shorthands.borderBottom('1px', 'solid', tokens.colorNeutralStrokeAccessible),\n    ...shorthands.borderRadius(0),\n  },\n  'filled-lighter': {\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  'filled-darker': {\n    backgroundColor: tokens.colorNeutralBackground3,\n  },\n  invalid: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n    },\n  },\n  invalidUnderline: {\n    ':not(:focus-within),:hover:not(:focus-within)': {\n      borderBottomColor: tokens.colorPaletteRedBorder2,\n    },\n  },\n});\n\nconst useIconStyles = makeStyles({\n  icon: {\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralStrokeAccessible,\n    display: 'block',\n    position: 'absolute',\n    pointerEvents: 'none',\n\n    // the SVG must have display: block for accurate positioning\n    // otherwise an extra inline space is inserted after the svg element\n    '& svg': {\n      display: 'block',\n    },\n  },\n  disabled: {\n    color: tokens.colorNeutralForegroundDisabled,\n    '@media (forced-colors: active)': {\n      color: 'GrayText',\n    },\n  },\n  small: {\n    fontSize: iconSizes.small,\n    height: iconSizes.small,\n    right: tokens.spacingHorizontalSNudge,\n    width: iconSizes.small,\n  },\n  medium: {\n    fontSize: iconSizes.medium,\n    height: iconSizes.medium,\n    right: tokens.spacingHorizontalMNudge,\n    width: iconSizes.medium,\n  },\n  large: {\n    fontSize: iconSizes.large,\n    height: iconSizes.large,\n    right: tokens.spacingHorizontalM,\n    width: iconSizes.large,\n  },\n});\n\n/**\n * Apply styling to the Select slots based on the state\n */\nexport const useSelectStyles_unstable = (state: SelectState): SelectState => {\n  const { size, appearance } = state;\n  const disabled = state.select.disabled;\n  const invalid = `${state.select['aria-invalid']}` === 'true';\n\n  const iconStyles = useIconStyles();\n  const rootStyles = useRootStyles();\n  const selectStyles = useSelectStyles();\n\n  state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n\n  state.select.className = mergeClasses(\n    selectClassNames.select,\n    selectStyles.base,\n    selectStyles[size],\n    selectStyles[appearance],\n    !disabled && appearance === 'outline' && selectStyles.outlineInteractive,\n    !disabled && invalid && appearance !== 'underline' && selectStyles.invalid,\n    !disabled && invalid && appearance === 'underline' && selectStyles.invalidUnderline,\n    disabled && selectStyles.disabled,\n    disabled && appearance === 'underline' && selectStyles.disabledUnderline,\n    state.select.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      selectClassNames.icon,\n      iconStyles.icon,\n      disabled && iconStyles.disabled,\n      iconStyles[size],\n      state.icon.className,\n    );\n  }\n\n  return state;\n};\n"]}

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

@@ -0,0 +1,10 @@
+define(["require", "exports", "@fluentui/react-field", "../../Select"], function (require, exports, react_field_1, Select_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SelectField = exports.selectFieldClassNames = void 0;
+    /** @deprecated Use Field with Select: `<Field><Select /></Field>` */
+    exports.selectFieldClassNames = react_field_1.getDeprecatedFieldClassNames(Select_1.selectClassNames.root);
+    /** @deprecated Use Field with Select: `<Field><Select /></Field>` */
+    exports.SelectField = react_field_1.makeDeprecatedField(Select_1.Select);
+});
+//# sourceMappingURL=SelectField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";;;;IAOA,qEAAqE;IACxD,QAAA,qBAAqB,GAAG,0CAA4B,CAAC,yBAAgB,CAAC,IAAI,CAAC,CAAC;IACzF,qEAAqE;IACxD,QAAA,WAAW,GAA0C,iCAAmB,CAAC,eAAM,CAAC,CAAC","sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Select, selectClassNames, SelectProps } from '../../Select';\n\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport type SelectFieldProps = DeprecatedFieldProps<SelectProps>;\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const selectFieldClassNames = getDeprecatedFieldClassNames(selectClassNames.root);\n/** @deprecated Use Field with Select: `<Field><Select /></Field>` */\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = makeDeprecatedField(Select);\n"]}

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

@@ -0,0 +1,6 @@
+define(["require", "exports", "tslib", "./SelectField"], function (require, exports, tslib_1, SelectField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(SelectField_1, exports);
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-select/src/components/SelectField/index.ts"],"names":[],"mappings":";;;IAAA,6CAA8B","sourcesContent":["export * from './SelectField';\n"]}

package/lib-amd/index.js

@@ -0,0 +1,13 @@
+define(["require", "exports", "./Select", "./SelectField"], function (require, exports, Select_1, SelectField_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.selectFieldClassNames = exports.SelectField_unstable = exports.useSelect_unstable = exports.useSelectStyles_unstable = exports.renderSelect_unstable = exports.selectClassNames = exports.Select = void 0;
+    Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return Select_1.Select; } });
+    Object.defineProperty(exports, "selectClassNames", { enumerable: true, get: function () { return Select_1.selectClassNames; } });
+    Object.defineProperty(exports, "renderSelect_unstable", { enumerable: true, get: function () { return Select_1.renderSelect_unstable; } });
+    Object.defineProperty(exports, "useSelectStyles_unstable", { enumerable: true, get: function () { return Select_1.useSelectStyles_unstable; } });
+    Object.defineProperty(exports, "useSelect_unstable", { enumerable: true, get: function () { return Select_1.useSelect_unstable; } });
+    Object.defineProperty(exports, "SelectField_unstable", { enumerable: true, get: function () { return SelectField_1.SelectField; } });
+    Object.defineProperty(exports, "selectFieldClassNames", { enumerable: true, get: function () { return SelectField_1.selectFieldClassNames; } });
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-select/src/index.ts"],"names":[],"mappings":";;;;IACE,gGAAA,MAAM,OAAA;IACN,0GAAA,gBAAgB,OAAA;IAChB,+GAAA,qBAAqB,OAAA;IACrB,kHAAA,wBAAwB,OAAA;IACxB,4GAAA,kBAAkB,OAAA;IAKX,mHAAA,WAAW,OAAwB;IAAE,oHAAA,qBAAqB,OAAA","sourcesContent":["export {\n  Select,\n  selectClassNames,\n  renderSelect_unstable,\n  useSelectStyles_unstable,\n  useSelect_unstable,\n} from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField';\n"]}

package/lib-commonjs/Select.js

@@ -3,8 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./components/Select/index"), exports);
 //# sourceMappingURL=Select.js.map

package/lib-commonjs/Select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Select.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Select/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/Select.ts"],"sourcesContent":["export * from './components/Select/index';\n"]}

package/lib-commonjs/SelectField.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./components/SelectField/index"), exports);
+//# sourceMappingURL=SelectField.js.map

package/lib-commonjs/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/SelectField.ts"],"sourcesContent":["export * from './components/SelectField/index';\n"]}

package/lib-commonjs/components/Select/Select.js

@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Select = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const useSelect_1 = /*#__PURE__*/require("./useSelect");
-
 const renderSelect_1 = /*#__PURE__*/require("./renderSelect");
-
 const useSelectStyles_1 = /*#__PURE__*/require("./useSelectStyles");
 /**
  * Select component
  */
-
-
 exports.Select = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useSelect_1.useSelect_unstable(props, ref);
   useSelectStyles_1.useSelectStyles_unstable(state);

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/Select.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,MAAA,gBAA2C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACtF,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,EAA0B,GAA1B,CAAd;EAEA,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,CAAP;AACD,CALuD,CAA3C;AAOb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,cAAM,gBAAqCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACtF,MAAMC,KAAK,GAAGC,8BAAkB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE5CG,0CAAwB,CAACF,KAAK,CAAC;EAC/B,OAAOG,oCAAqB,CAACH,KAAK,CAAC;AACrC,CAAC,CAAC;AAEFL,cAAM,CAACS,WAAW,GAAG,QAAQ","names":["exports","React","forwardRef","props","ref","state","useSelect_1","useSelectStyles_1","renderSelect_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Select component\n */\nexport const Select: ForwardRefComponent<SelectProps> = React.forwardRef((props, ref) => {\n  const state = useSelect_unstable(props, ref);\n\n  useSelectStyles_unstable(state);\n  return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}

package/lib-commonjs/components/Select/index.js

@@ -3,16 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
 const tslib_1 = /*#__PURE__*/require("tslib");
-
 tslib_1.__exportStar(require("./Select"), exports);
-
 tslib_1.__exportStar(require("./Select.types"), exports);
-
 tslib_1.__exportStar(require("./renderSelect"), exports);
-
 tslib_1.__exportStar(require("./useSelect"), exports);
-
 tslib_1.__exportStar(require("./useSelectStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/index.ts"],"sourcesContent":["export * from './Select';\nexport * from './Select.types';\nexport * from './renderSelect';\nexport * from './useSelect';\nexport * from './useSelectStyles';\n"]}

package/lib-commonjs/components/Select/renderSelect.js

@@ -4,25 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderSelect_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Select
  */
-
-
 const renderSelect_unstable = state => {
   const {
     slots,
     slotProps
   } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, React.createElement(slots.select, { ...slotProps.select
-  }, slotProps.select.children), React.createElement(slots.icon, { ...slotProps.icon
+  return React.createElement(slots.root, {
+    ...slotProps.root
+  }, React.createElement(slots.select, {
+    ...slotProps.select
+  }, slotProps.select.children), React.createElement(slots.icon, {
+    ...slotProps.icon
   }));
 };
-
 exports.renderSelect_unstable = renderSelect_unstable;
 //# sourceMappingURL=renderSelect.js.map

package/lib-commonjs/components/Select/renderSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/renderSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAAuB;EAC1D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,MAAP,EAAa,EAAA,GAAK,SAAS,CAAC;EAAf,CAAb,EAAqC,SAAS,CAAC,MAAV,CAAiB,QAAtD,CADF,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAFF,CADF;AAMD,CARM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  const { slots, slotProps } = getSlots<SelectSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n      <slots.icon {...slotProps.icon} />\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,qBAAqB,GAAIC,KAAkB,IAAI;EAC1D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAcH,KAAK,CAAC;EACzD,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC5BD,oBAACH,KAAK,CAACK,MAAM;IAAA,GAAKJ,SAAS,CAACI;EAAM,GAAGJ,SAAS,CAACI,MAAM,CAACC,QAAQ,CAAgB,EAC9EH,oBAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,EAAI,CACvB;AAEjB,CAAC;AARYC,6BAAqB","names":["renderSelect_unstable","state","slots","slotProps","react_utilities_1","React","root","select","children","icon","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/renderSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { SelectSlots, SelectState } from './Select.types';\n\n/**\n * Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectState) => {\n  const { slots, slotProps } = getSlots<SelectSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      <slots.select {...slotProps.select}>{slotProps.select.children}</slots.select>\n      <slots.icon {...slotProps.icon} />\n    </slots.root>\n  );\n};\n"]}

package/lib-commonjs/components/Select/useSelect.js

@@ -4,12 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useSelect_unstable = void 0;
-
 const React = /*#__PURE__*/require("react");
-
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
 const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * Create the state required to render Select.
  *
@@ -19,16 +17,16 @@ const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
  * @param props - props from this instance of Select
  * @param ref - reference to the `<select>` element in Select
  */
-
-
 const useSelect_unstable = (props, ref) => {
+  var _a;
+  const overrides = react_shared_contexts_1.useOverrides_unstable();
   const {
     defaultValue,
     value,
     select,
     icon,
     root,
-    appearance = 'outline',
+    appearance = (_a = overrides.inputDefaultAppearance) !== null && _a !== void 0 ? _a : 'outline',
     onChange,
     size = 'medium'
   } = props;
@@ -72,6 +70,5 @@ const useSelect_unstable = (props, ref) => {
   });
   return state;
 };
-
 exports.useSelect_unstable = useSelect_unstable;
 //# sourceMappingURL=useSelect.js.map

package/lib-commonjs/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Select/useSelect.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,kBAAkB,GAAG,CAAC,KAAD,EAAqB,GAArB,KAAuE;EACvG,MAAM;IACJ,YADI;IAEJ,KAFI;IAGJ,MAHI;IAIJ,IAJI;IAKJ,IALI;IAMJ,UAAU,GAAG,SANT;IAQJ,QARI;IASJ,IAAI,GAAG;EATH,IAUF,KAVJ;EAYA,MAAM,WAAW,GAAG,iBAAA,CAAA,yBAAA,CAA0B;IAC5C,KAD4C;IAE5C,kBAAkB,EAAE,QAFwB;IAG5C,iBAAiB,EAAE,CAAC,YAAD,EAAe,cAAf,EAA+B,UAA/B,EAA2C,MAA3C,EAAmD,OAAnD;EAHyB,CAA1B,CAApB;EAMA,MAAM,KAAK,GAAgB;IACzB,IADyB;IAEzB,UAFyB;IAGzB,UAAU,EAAE;MACV,IAAI,EAAE,MADI;MAEV,MAAM,EAAE,QAFE;MAGV,IAAI,EAAE;IAHI,CAHa;IAQzB,MAAM,EAAE,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,EAAyB;MAC/B,QAAQ,EAAE,IADqB;MAE/B,YAAY,EAAE;QACZ,YADY;QAEZ,KAFY;QAGZ,GAHY;QAIZ,GAAG,WAAW,CAAC;MAJH;IAFiB,CAAzB,CARiB;IAiBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE;QAAE,QAAQ,EAAE,KAAA,CAAA,aAAA,CAAC,aAAA,CAAA,kBAAD,EAAmB,IAAnB;MAAZ;IAFa,CAAvB,CAjBmB;IAqBzB,IAAI,EAAE,iBAAA,CAAA,gBAAA,CAAiB,IAAjB,EAAuB;MAC3B,QAAQ,EAAE,IADiB;MAE3B,YAAY,EAAE,WAAW,CAAC;IAFC,CAAvB;EArBmB,CAA3B;EA2BA,KAAK,CAAC,MAAN,CAAa,QAAb,GAAwB,iBAAA,CAAA,gBAAA,CAAiB,KAAK,IAAG;IAC/C,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAQ,KAAA,CAAR,GAAA,QAAQ,CAAG,KAAH,EAAU;MAAE,KAAK,EAAG,KAAK,CAAC,MAAN,CAAmC;IAA7C,CAAV,CAAR;EACD,CAFuB,CAAxB;EAIA,OAAO,KAAP;AACD,CAnDM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: resolveShorthand(select, {\n      required: true,\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    icon: resolveShorthand(icon, {\n      required: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n    }),\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAEA;AAEA;;;;;;;;;AASO,MAAMA,kBAAkB,GAAG,CAACC,KAAkB,EAAEC,GAAiC,KAAiB;;EACvG,MAAMC,SAAS,GAAGC,6CAAY,EAAE;EAEhC,MAAM;IACJC,YAAY;IACZC,KAAK;IACLC,MAAM;IACNC,IAAI;IACJC,IAAI;IACJC,UAAU,GAAG,eAAS,CAACC,sBAAsB,mCAAI,SAAS;IAE1DC,QAAQ;IACRC,IAAI,GAAG;EAAQ,CAChB,GAAGZ,KAAK;EAET,MAAMa,WAAW,GAAGC,2CAAyB,CAAC;IAC5Cd,KAAK;IACLe,kBAAkB,EAAE,QAAQ;IAC5BC,iBAAiB,EAAE,CAAC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,EAAE,OAAO;GAC9E,CAAC;EAEF,MAAMC,KAAK,GAAgB;IACzBL,IAAI;IACJH,UAAU;IACVS,UAAU,EAAE;MACVV,IAAI,EAAE,MAAM;MACZF,MAAM,EAAE,QAAQ;MAChBC,IAAI,EAAE;KACP;IACDD,MAAM,EAAEQ,kCAAgB,CAACR,MAAM,EAAE;MAC/Ba,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZhB,YAAY;QACZC,KAAK;QACLJ,GAAG;QACH,GAAGY,WAAW,CAACQ;;KAElB,CAAC;IACFd,IAAI,EAAEO,kCAAgB,CAACP,IAAI,EAAE;MAC3BY,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QAAEE,QAAQ,EAAEC,oBAACC,gCAAkB;MAAG;KACjD,CAAC;IACFhB,IAAI,EAAEM,kCAAgB,CAACN,IAAI,EAAE;MAC3BW,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAEP,WAAW,CAACL;KAC3B;GACF;EAEDS,KAAK,CAACX,MAAM,CAACK,QAAQ,GAAGG,kCAAgB,CAACW,KAAK,IAAG;IAC/Cd,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAGc,KAAK,EAAE;MAAEpB,KAAK,EAAGoB,KAAK,CAACC,MAA4B,CAACrB;IAAK,CAAE,CAAC;EACzE,CAAC,CAAC;EAEF,OAAOY,KAAK;AACd,CAAC;AArDYU,0BAAkB","names":["useSelect_unstable","props","ref","overrides","react_shared_contexts_1","defaultValue","value","select","icon","root","appearance","inputDefaultAppearance","onChange","size","nativeProps","react_utilities_1","primarySlotTagName","excludedPropNames","state","components","required","defaultProps","primary","children","React","react_icons_1","event","target","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-select/src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getPartitionedNativeProps, resolveShorthand, useEventCallback } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectProps, SelectState } from './Select.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render Select.\n *\n * The returned state can be modified with hooks such as useSelectStyles,\n * before being passed to renderSelect.\n *\n * @param props - props from this instance of Select\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelect_unstable = (props: SelectProps, ref: React.Ref<HTMLSelectElement>): SelectState => {\n  const overrides = useOverrides();\n\n  const {\n    defaultValue,\n    value,\n    select,\n    icon,\n    root,\n    appearance = overrides.inputDefaultAppearance ?? 'outline',\n\n    onChange,\n    size = 'medium',\n  } = props;\n\n  const nativeProps = getPartitionedNativeProps({\n    props,\n    primarySlotTagName: 'select',\n    excludedPropNames: ['appearance', 'defaultValue', 'onChange', 'size', 'value'],\n  });\n\n  const state: SelectState = {\n    size,\n    appearance,\n    components: {\n      root: 'span',\n      select: 'select',\n      icon: 'span',\n    },\n    select: resolveShorthand(select, {\n      required: true,\n      defaultProps: {\n        defaultValue,\n        value,\n        ref,\n        ...nativeProps.primary,\n      },\n    }),\n    icon: resolveShorthand(icon, {\n      required: true,\n      defaultProps: { children: <ChevronDownRegular /> },\n    }),\n    root: resolveShorthand(root, {\n      required: true,\n      defaultProps: nativeProps.root,\n    }),\n  };\n\n  state.select.onChange = useEventCallback(event => {\n    onChange?.(event, { value: (event.target as HTMLSelectElement).value });\n  });\n\n  return state;\n};\n"]}