npm - @fluentui/react-select - Versions diffs - 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0 - Mend

@fluentui/react-select 9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 → 9.74.3-experimental.esm.20260709-49ee7a20cf.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,22 +1,111 @@
 # Change Log - @fluentui/react-select
-This log was last generated on Thu, 22 Jan 2026 16:12:45 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:16 GMT and should not be manually modified.
 <!-- Start content -->
-## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
-Thu, 22 Jan 2026 16:12:45 GMT
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.12..@fluentui/react-select_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+Thu, 09 Jul 2026 17:34:16 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.3..@fluentui/react-select_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 ### Changes
-- Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-field to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-theme to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-field to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.3)
+Wed, 24 Jun 2026 11:09:55 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.2..@fluentui/react-select_v9.5.3)
+### Patches
+- fix: move Field control props to base hooks ([PR #36312](https://github.com/microsoft/fluentui/pull/36312) by dmytrokirpa@microsoft.com)
+- fix: remove redundant use no memo directives, and add justification to valid ones ([PR #36224](https://github.com/microsoft/fluentui/pull/36224) by martinhochel@microsoft.com)
+- Bump @fluentui/react-field to v9.5.3 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+- Bump @fluentui/react-utilities to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/a4b871ca80c1f16f35ab4229def4fe02be7f30ea) by beachball)
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.2)
+Tue, 26 May 2026 09:39:37 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.1..@fluentui/react-select_v9.5.2)
+### Patches
+- Bump @fluentui/react-field to v9.5.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.1)
+Thu, 23 Apr 2026 14:21:11 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.5.0..@fluentui/react-select_v9.5.1)
+### Patches
+- Bump @fluentui/react-field to v9.5.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.5.0)
+Wed, 01 Apr 2026 15:52:42 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.16..@fluentui/react-select_v9.5.0)
+### Minor changes
+- feat(react-select): add useSelectBase_unstable hook ([PR #35906](https://github.com/microsoft/fluentui/pull/35906) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+## [9.4.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.16)
+Wed, 11 Mar 2026 09:22:22 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.15..@fluentui/react-select_v9.4.16)
+### Patches
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.15)
+Wed, 25 Feb 2026 13:32:28 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.14..@fluentui/react-select_v9.4.15)
+### Patches
+- Bump @fluentui/react-field to v9.4.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+## [9.4.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.14)
+Thu, 12 Feb 2026 10:46:15 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.13..@fluentui/react-select_v9.4.14)
+### Patches
+- Bump @fluentui/react-field to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+## [9.4.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.13)
+Thu, 22 Jan 2026 17:06:38 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-select_v9.4.12..@fluentui/react-select_v9.4.13)
+### Patches
+- Bump @fluentui/react-field to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
 ## [9.4.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-select_v9.4.12)

package/dist/index.d.cts ADDED Viewed

@@ -0,0 +1,89 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of Select
+ */
+export declare const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
+/**
+ * Select component
+ */
+export declare const Select: ForwardRefComponent<SelectProps>;
+export declare type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
+export declare type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
+export declare const selectClassNames: SlotClassNames<SelectSlots>;
+/**
+ * Data passed to the `onChange` callback when a new option is selected.
+ */
+export declare type SelectOnChangeData = {
+    /**
+     * Updated `<select>` value, taken from either the selected option's value prop or inner text.
+     */
+    value: string;
+};
+export declare type SelectProps = Omit<ComponentProps<Partial<SelectSlots>, 'select'>, 'size' | 'onChange'> & {
+    /**
+     * Controls the colors and borders of the Select.
+     *
+     * @default 'outline'
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter';
+    /**
+     * Called when the user changes the select element's value by selecting an option.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLSelectElement>, data: SelectOnChangeData) => void;
+    /**
+     * Matches the Input sizes
+     *
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+};
+export declare type SelectSlots = {
+    root: NonNullable<Slot<'span'>>;
+    /** Primary slot: the actual `<select>` element */
+    select: NonNullable<Slot<'select'>>;
+    /** the icon, typically a down arrow */
+    icon: Slot<'span'>;
+};
+export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<SelectProps, 'appearance' | 'size'>>;
+/**
+ * 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
+ */
+export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
+/**
+ * Create the base state required to render Select without design-specific props.
+ *
+ * @param props - props from this instance of Select (without appearance/size)
+ * @param ref - reference to the `<select>` element in Select
+ */
+export declare const useSelectBase_unstable: (props: SelectBaseProps, ref: React_2.Ref<HTMLSelectElement>) => SelectBaseState;
+/**
+ * Apply styling to the Select slots based on the state
+ */
+export declare const useSelectStyles_unstable: (state: SelectState) => SelectState;
+export { }

package/dist/index.d.ts CHANGED Viewed

@@ -1,21 +1,26 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of Select
  */
-export declare const renderSelect_unstable: (state: SelectState) => JSXElement;
+export declare const renderSelect_unstable: (state: SelectBaseState) => JSXElement;
 /**
  * Select component
  */
 export declare const Select: ForwardRefComponent<SelectProps>;
+export declare type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' | 'size'>;
+export declare type SelectBaseState = DistributiveOmit<SelectState, 'appearance' | 'size'>;
 export declare const selectClassNames: SlotClassNames<SelectSlots>;
 /**
@@ -68,6 +73,14 @@ export declare type SelectState = ComponentState<SelectSlots> & Required<Pick<Se
  */
 export declare const useSelect_unstable: (props: SelectProps, ref: React_2.Ref<HTMLSelectElement>) => SelectState;
+/**
+ * Create the base state required to render Select without design-specific props.
+ *
+ * @param props - props from this instance of Select (without appearance/size)
+ * @param ref - reference to the `<select>` element in Select
+ */
+export declare const useSelectBase_unstable: (props: SelectBaseProps, ref: React_2.Ref<HTMLSelectElement>) => SelectBaseState;
 /**
  * Apply styling to the Select slots based on the state
  */

package/lib/Select.js CHANGED Viewed

	@@ -1 +1 @@
1	- export { Select, renderSelect_unstable, selectClassNames, useSelectStyles_unstable, useSelect_unstable } from './components/Select/index';
1	+ export { Select, renderSelect_unstable, selectClassNames, useSelectStyles_unstable, useSelectBase_unstable, useSelect_unstable } from "./components/Select/index.js";

package/lib/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './components/Select/index';\nexport {\n Select,\n renderSelect_unstable,\n selectClassNames,\n useSelectStyles_unstable,\n useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelect_unstable"],"mappings":"~~AACA~~,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,kBAAkB,QACb~~,4BAA4B~~"}
1	+ {"version":3,"sources":["../src/Select.ts"],"sourcesContent":["export type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './components/Select/index';\nexport {\n Select,\n renderSelect_unstable,\n selectClassNames,\n useSelectStyles_unstable,\n useSelectBase_unstable,\n useSelect_unstable,\n} from './components/Select/index';\n"],"names":["Select","renderSelect_unstable","selectClassNames","useSelectStyles_unstable","useSelectBase_unstable","useSelect_unstable"],"mappings":"AAQA,SACEA,MAAM,EACNC,qBAAqB,EACrBC,gBAAgB,EAChBC,wBAAwB,EACxBC,sBAAsB,EACtBC,kBAAkB,QACb,+BAA4B"}

package/lib/components/Select/Select.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useSelect_unstable } from './useSelect';
-import { renderSelect_unstable } from './renderSelect';
-import { useSelectStyles_unstable } from './useSelectStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useSelect_unstable } from "./useSelect.js";
+import { renderSelect_unstable } from "./renderSelect.js";
+import { useSelectStyles_unstable } from "./useSelectStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * Select component
  */ export const Select = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/Select/Select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,~~cAAc~~;AACjD,SAASC,qBAAqB,QAAQ,~~iBAAiB~~;AACvD,SAASC,wBAAwB,QAAQ,~~2BAA2B~~;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}
1	+ {"version":3,"sources":["../src/components/Select/Select.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSelect_unstable } from './useSelect';\nimport { renderSelect_unstable } from './renderSelect';\nimport { useSelectStyles_unstable } from './useSelectStyles.styles';\nimport type { SelectProps } from './Select.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\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\n useCustomStyleHook_unstable('useSelectStyles_unstable')(state);\n\n return renderSelect_unstable(state);\n});\n\nSelect.displayName = 'Select';\n"],"names":["React","useSelect_unstable","renderSelect_unstable","useSelectStyles_unstable","useCustomStyleHook_unstable","Select","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,iBAAc;AACjD,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,wBAAwB,QAAQ,8BAA2B;AAGpE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,uBAA2CL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/E,MAAMC,QAAQR,mBAAmBM,OAAOC;IAExCL,yBAAyBM;IAEzBL,4BAA4B,4BAA4BK;IAExD,OAAOP,sBAAsBO;AAC/B,GAAG;AAEHJ,OAAOK,WAAW,GAAG"}

package/lib/components/Select/Select.types.js CHANGED Viewed

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when a new option is selected.
+ */ export { };

package/lib/components/Select/Select.types.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Select/Select.types.ts"],"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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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"],"names":[~~"React"~~],"mappings":"~~AAAA~~,~~YAAYA~~,~~WAAW,QAAQ~~"}
1	+ {"version":3,"sources":["../src/components/Select/Select.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, DistributiveOmit, 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 // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\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\nexport type SelectBaseProps = DistributiveOmit<SelectProps, 'appearance' \| 'size'>;\nexport type SelectBaseState = DistributiveOmit<SelectState, '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"],"names":[],"mappings":"AA6CA;;CAEC,GACD,WAKE"}

package/lib/components/Select/index.js CHANGED Viewed

@@ -1,4 +1,4 @@
-export { Select } from './Select';
-export { renderSelect_unstable } from './renderSelect';
-export { useSelect_unstable } from './useSelect';
-export { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';
+export { Select } from "./Select.js";
+export { renderSelect_unstable } from "./renderSelect.js";
+export { useSelectBase_unstable, useSelect_unstable } from "./useSelect.js";
+export { selectClassNames, useSelectStyles_unstable } from "./useSelectStyles.styles.js";

package/lib/components/Select/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,~~WAAW~~;~~AAElC~~,SAASC,qBAAqB,QAAQ,~~iBAAiB~~;AACvD,SAASC,kBAAkB,QAAQ,~~cAAc~~;~~AACjD~~,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,~~2BAA2B~~"}
1	+ {"version":3,"sources":["../src/components/Select/index.ts"],"sourcesContent":["export { Select } from './Select';\nexport type {\n SelectBaseProps,\n SelectBaseState,\n SelectOnChangeData,\n SelectProps,\n SelectSlots,\n SelectState,\n} from './Select.types';\nexport { renderSelect_unstable } from './renderSelect';\nexport { useSelectBase_unstable, useSelect_unstable } from './useSelect';\nexport { selectClassNames, useSelectStyles_unstable } from './useSelectStyles.styles';\n"],"names":["Select","renderSelect_unstable","useSelectBase_unstable","useSelect_unstable","selectClassNames","useSelectStyles_unstable"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAW;AASlC,SAASC,qBAAqB,QAAQ,oBAAiB;AACvD,SAASC,sBAAsB,EAAEC,kBAAkB,QAAQ,iBAAc;AACzE,SAASC,gBAAgB,EAAEC,wBAAwB,QAAQ,8BAA2B"}

package/lib/components/Select/renderSelect.js CHANGED Viewed

@@ -1,5 +1,5 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { assertSlots } from '@fluentui/react-utilities';
+import { assertSlots } from "@fluentui/react-utilities";
 /**
  * Render the final JSX of Select
  */ export const renderSelect_unstable = (state)=>{

package/lib/components/Select/renderSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } 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~~): JSXElement => {\n assertSlots<SelectSlots>(state);\n return (\n <state.root>\n <state.select>{state.select.children}</state.select>\n {state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}
1	+ {"version":3,"sources":["../src/components/Select/renderSelect.tsx"],"sourcesContent":["/** @jsxRuntime automatic /\n/* @jsxImportSource @fluentui/react-jsx-runtime /\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SelectBaseState, SelectSlots } from './Select.types';\n\n/\n Render the final JSX of Select\n */\nexport const renderSelect_unstable = (state: SelectBaseState): JSXElement => {\n assertSlots<SelectSlots>(state);\n return (\n <state.root>\n <state.select>{state.select.children}</state.select>\n {state.icon && <state.icon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderSelect_unstable","state","root","select","children","icon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpCF,YAAyBE;IACzB,qBACE,MAACA,MAAMC,IAAI;;0BACT,KAACD,MAAME,MAAM;0BAAEF,MAAME,MAAM,CAACC,QAAQ;;YACnCH,MAAMI,IAAI,kBAAI,KAACJ,MAAMI,IAAI;;;AAGhC,EAAE"}

package/lib/components/Select/useSelect.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';
-import { ChevronDownRegular } from '@fluentui/react-icons';
-import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useFieldControlProps_unstable } from "@fluentui/react-field";
+import { getPartitionedNativeProps, useEventCallback, slot } from "@fluentui/react-utilities";
+import { ChevronDownRegular } from "@fluentui/react-icons";
+import { useOverrides_unstable as useOverrides } from "@fluentui/react-shared-contexts";
 /**
  * Create the state required to render Select.
  *
@@ -13,29 +13,43 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - props from this instance of Select
  * @param ref - reference to the `<select>` element in Select
  */ export const useSelect_unstable = (props, ref)=>{
+    const overrides = useOverrides();
+    var _overrides_inputDefaultAppearance;
+    const { appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', size = 'medium', ...baseProps } = props;
+    const state = useSelectBase_unstable(baseProps, ref);
+    if (state.icon) {
+        var _state_icon;
+        var _children;
+        (_children = (_state_icon = state.icon).children) !== null && _children !== void 0 ? _children : _state_icon.children = /*#__PURE__*/ React.createElement(ChevronDownRegular, null);
+    }
+    return {
+        ...state,
+        appearance,
+        size
+    };
+};
+/**
+ * Create the base state required to render Select without design-specific props.
+ *
+ * @param props - props from this instance of Select (without appearance/size)
+ * @param ref - reference to the `<select>` element in Select
+ */ export const useSelectBase_unstable = (props, ref)=>{
     // Merge props from surrounding <Field>, if any
     props = useFieldControlProps_unstable(props, {
         supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
+        supportsRequired: true
     });
-    const overrides = useOverrides();
-    var _overrides_inputDefaultAppearance;
-    const { defaultValue, value, select, icon, root, appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', onChange, size = 'medium' } = props;
+    const { defaultValue, value, select, icon, root, onChange } = props;
     const nativeProps = getPartitionedNativeProps({
         props,
         primarySlotTagName: 'select',
         excludedPropNames: [
-            'appearance',
             'defaultValue',
             'onChange',
-            'size',
             'value'
         ]
     });
     const state = {
-        size,
-        appearance,
         components: {
             root: 'span',
             select: 'select',
@@ -52,9 +66,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
         }),
         icon: slot.optional(icon, {
             renderByDefault: true,
-            defaultProps: {
-                children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
-            },
             elementType: 'span'
         }),
         root: slot.always(root, {

package/lib/components/Select/useSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } 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 // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, ~~supportsSize: true~~ });\n\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: slot.always(select, {\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n elementType: 'select',\n }),\n icon: slot.optional(icon, {\n renderByDefault: true,\n ~~defaultProps: { children: <ChevronDownRegular /> },\n~~ elementType: 'span',\n }),\n root: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","~~supportsLabelFor~~","~~supportsRequired~~","~~supportsSize~~","~~overrides~~","~~defaultValue~~","~~value~~","~~select~~","icon","~~root~~","~~appearance~~","~~inputDefaultAppearance~~","~~onChange~~","~~size~~","nativeProps","primarySlotTagName","excludedPropNames","~~state","~~components","always","defaultProps","primary","elementType","optional","renderByDefault","~~children","~~event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;~~QAAEE~~,kBAAkB;QAAMC,kBAAkB;~~QAAMC,cAAc;~~IAAK;~~IAElH~~,~~MAAMC,YAAYP;QAQHO;IANf,~~MAAM,~~EACJC~~,YAAY,~~EACZC~~,KAAK,~~EACLC~~,MAAM,~~EACNC~~,IAAI,~~EACJC~~,IAAI,~~EACJC~~,~~aAAaN,CAAAA,oCAAAA,UAAUO,sBAAsB,cAAhCP,+CAAAA,oCAAoC,SAAS,EAE1DQ,~~QAAQ,~~EACRC~~,~~OAAO,QAAQ,EAChB,GAAGd~~;~~IAEJ~~,~~MAAMe~~,~~cAActB~~,0BAA0B;QAC5CO;~~QACAgB~~,oBAAoB;QACpBC,mBAAmB;YAAC;~~YAAc;~~YAAgB;YAAY;~~YAAQ;~~SAAQ;~~IAChF~~;IAEA,~~MAAMC~~,~~QAAqB~~;~~QACzBJ;QACAH;QACAQ~~,YAAY;~~YACVT~~,MAAM;~~YACNF~~,QAAQ;~~YACRC~~,MAAM;QACR;~~QACAD~~,~~QAAQb~~,~~KAAKyB~~,MAAM,~~CAACZ~~,QAAQ;~~YAC1Ba~~,cAAc;~~gBACZf~~;gBACAC;~~gBACAN~~;gBACA,~~GAAGc~~,~~YAAYO~~,OAAO;YACxB;YACAC,aAAa;QACf;~~QACAd~~,MAAMd,~~KAAK6B~~,QAAQ,~~CAACf~~,MAAM;~~YACxBgB~~,iBAAiB;~~YACjBJ~~,~~cAAc;gBAAEK,wBAAU,oBAAC9B;YAAsB;YACjD2B,~~aAAa;QACf;~~QACAb~~,~~MAAMf~~,~~KAAKyB~~,MAAM,~~CAACV~~,MAAM;~~YACtBW~~,~~cAAcN~~,~~YAAYL~~,IAAI;~~YAC9Ba~~,aAAa;QACf;IACF;~~IAEAL~~,~~MAAMV~~,MAAM,~~CAACK~~,QAAQ,~~GAAGnB~~,~~iBAAiBiC~~,CAAAA;~~QACvCd~~,qBAAAA,+BAAAA,~~SAAWc~~,OAAO;~~YAAEpB~~,OAAO,~~AAACoB~~,MAAMC,MAAM,~~CAAuBrB~~,KAAK;QAAC;IACvE;IAEA,~~OAAOW~~;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Select/useSelect.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport type { SelectBaseProps, SelectBaseState, 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 { appearance = overrides.inputDefaultAppearance ?? 'outline', size = 'medium', ...baseProps } = props;\n\n const state = useSelectBase_unstable(baseProps, ref);\n\n if (state.icon) {\n state.icon.children ??= <ChevronDownRegular />;\n }\n\n return { ...state, appearance, size };\n};\n\n/\n Create the base state required to render Select without design-specific props.\n \n @param props - props from this instance of Select (without appearance/size)\n * @param ref - reference to the `<select>` element in Select\n */\nexport const useSelectBase_unstable = (props: SelectBaseProps, ref: React.Ref<HTMLSelectElement>): SelectBaseState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true });\n\n const { defaultValue, value, select, icon, root, onChange } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'select',\n excludedPropNames: ['defaultValue', 'onChange', 'value'],\n });\n\n const state: SelectBaseState = {\n components: {\n root: 'span',\n select: 'select',\n icon: 'span',\n },\n select: slot.always(select, {\n defaultProps: {\n defaultValue,\n value,\n ref,\n ...nativeProps.primary,\n },\n elementType: 'select',\n }),\n icon: slot.optional(icon, {\n renderByDefault: true,\n elementType: 'span',\n }),\n root: slot.always(root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\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"],"names":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useEventCallback","slot","ChevronDownRegular","useOverrides_unstable","useOverrides","useSelect_unstable","props","ref","overrides","appearance","inputDefaultAppearance","size","baseProps","state","useSelectBase_unstable","icon","children","supportsLabelFor","supportsRequired","defaultValue","value","select","root","onChange","nativeProps","primarySlotTagName","excludedPropNames","components","always","defaultProps","primary","elementType","optional","renderByDefault","event","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAC9F,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,qBAAqB,CAACC,OAAoBC;IACrD,MAAMC,YAAYJ;QAEGI;IAArB,MAAM,EAAEC,aAAaD,CAAAA,oCAAAA,UAAUE,sBAAsB,cAAhCF,+CAAAA,oCAAoC,SAAS,EAAEG,OAAO,QAAQ,EAAE,GAAGC,WAAW,GAAGN;IAEtG,MAAMO,QAAQC,uBAAuBF,WAAWL;IAEhD,IAAIM,MAAME,IAAI,EAAE;YACdF;;QAAAA,cAAAA,cAAAA,MAAME,IAAI,EAACC,yDAAXH,YAAWG,yBAAa,oBAACd;IAC3B;IAEA,OAAO;QAAE,GAAGW,KAAK;QAAEJ;QAAYE;IAAK;AACtC,EAAE;AAEF;;;;;CAKC,GACD,OAAO,MAAMG,yBAAyB,CAACR,OAAwBC;IAC7D,+CAA+C;IAC/CD,QAAQR,8BAA8BQ,OAAO;QAAEW,kBAAkB;QAAMC,kBAAkB;IAAK;IAE9F,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,MAAM,EAAEN,IAAI,EAAEO,IAAI,EAAEC,QAAQ,EAAE,GAAGjB;IAE9D,MAAMkB,cAAczB,0BAA0B;QAC5CO;QACAmB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAgB;YAAY;SAAQ;IAC1D;IAEA,MAAMb,QAAyB;QAC7Bc,YAAY;YACVL,MAAM;YACND,QAAQ;YACRN,MAAM;QACR;QACAM,QAAQpB,KAAK2B,MAAM,CAACP,QAAQ;YAC1BQ,cAAc;gBACZV;gBACAC;gBACAb;gBACA,GAAGiB,YAAYM,OAAO;YACxB;YACAC,aAAa;QACf;QACAhB,MAAMd,KAAK+B,QAAQ,CAACjB,MAAM;YACxBkB,iBAAiB;YACjBF,aAAa;QACf;QACAT,MAAMrB,KAAK2B,MAAM,CAACN,MAAM;YACtBO,cAAcL,YAAYF,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMQ,MAAM,CAACE,QAAQ,GAAGvB,iBAAiBkC,CAAAA;QACvCX,qBAAAA,+BAAAA,SAAWW,OAAO;YAAEd,OAAO,AAACc,MAAMC,MAAM,CAAuBf,KAAK;QAAC;IACvE;IAEA,OAAOP;AACT,EAAE"}

package/lib/components/Select/useSelectStyles.styles.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use client';
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __styles, mergeClasses, shorthands } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
 export const selectClassNames = {
   root: 'fui-Select',
   select: 'fui-Select__select',
@@ -301,8 +301,6 @@ const useIconStyles = /*#__PURE__*/__styles({
  * Apply styling to the Select slots based on the state
  */
 export const useSelectStyles_unstable = state => {
-  'use no memo';
   const {
     size,
     appearance
@@ -312,9 +310,12 @@ export const useSelectStyles_unstable = state => {
   const iconStyles = useIconStyles();
   const rootStyles = useRootStyles();
   const selectStyles = useSelectStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.select.className = mergeClasses(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) {
+    // eslint-disable-next-line react-hooks/immutability
     state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
   }
   return state;

package/lib/components/Select/useSelectStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const selectClassNames = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\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/* 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 / const 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/ 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 / const paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/ end of shared values / const 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 '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n 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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n }\n }\n});\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n border: '1px solid transparent',\n 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 ':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(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\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 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 '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n '& option': {\n // The transparent select bg means the option background must be set so the text is visible in dark themes\n backgroundColor: tokens.colorNeutralBackground1\n }\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});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\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 Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n state.select.className = mergeClasses(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);\n if (state.icon) {\n state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","selectClassNames","root","select","icon","iconSizes","small","medium","large","fieldHeights","paddingRight","spacingHorizontalSNudge","spacingHorizontalXXS","spacingHorizontalMNudge","spacingHorizontalM","paddingLeft","useRootStyles","base","Bt984gj","B7ck84d","mc9l5x","Eh141a","Bahqtrf","qhf8xq","h62rwi","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","li1rpt","Bsft5z2","Dlnsje","E3zdtr","By385i5","Eqx8gd","B1piin3","b1kco5","Ba2ppi3","F2fol1","lck23g","wi16st","ywj3b2","umuwi5","Blcqepd","nplu4u","Bioka5o","Bnupc0a","bing71","d","p","m","w","useSelectStyles","Bowrso0","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","E5pizo","sj55zd","Bceei9c","Bh6795r","B2u0y6b","Byoj8tv","z8tnut","B3aqqti","Brovlpu","Bxa1mx5","disabled","De3pzq","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","disabledUnderline","Bqenvij","uwmqm3","z189sj","Be2twd7","Bhrd7zp","Bg96gwp","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","B6oc9vd","ak43y8","wmxk5l","B50zh58","underline","C8i20h","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","invalidUnderline","f","h","a","useIconStyles","Bkecrkj","Bo70h7d","B7iucu3","j35jbq","a9b677","useSelectStyles_unstable","state","size","appearance","iconStyles","rootStyles","selectStyles","className"],"sources":["useSelectStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from \"@griffel/react\";\nimport { tokens, typographyStyles } from \"@fluentui/react-theme\";\nexport const selectClassNames = {\n root: 'fui-Select',\n select: 'fui-Select__select',\n icon: 'fui-Select__icon'\n};\nconst iconSizes = {\n small: '16px',\n medium: '20px',\n large: '24px'\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/* 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 / const 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/ 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 / const paddingLeft = {\n small: `calc(${tokens.spacingHorizontalSNudge} + ${tokens.spacingHorizontalXXS})`,\n medium: `calc(${tokens.spacingHorizontalMNudge} + ${tokens.spacingHorizontalXXS})`,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n};\n/ end of shared values / const 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 '&::after': {\n backgroundImage: `linear-gradient(\n 0deg,\n ${tokens.colorCompoundBrandStroke} 0%,\n ${tokens.colorCompoundBrandStroke} 50%,\n transparent 50%,\n transparent 100%\n )`,\n 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 '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n },\n '&:focus-within::after': {\n transform: 'scaleX(1)',\n transitionProperty: 'transform',\n transitionDuration: tokens.durationNormal,\n transitionDelay: tokens.curveDecelerateMid,\n '@media screen and (prefers-reduced-motion: reduce)': {\n transitionDuration: '0.01ms',\n transitionDelay: '0.01ms'\n }\n }\n }\n});\nconst useSelectStyles = makeStyles({\n base: {\n appearance: 'none',\n border: '1px solid transparent',\n 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 ':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(tokens.colorTransparentStrokeDisabled, tokens.colorTransparentStrokeDisabled, tokens.colorNeutralStrokeDisabled)\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 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 '&:active': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessible\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderBottom: `1px solid ${tokens.colorNeutralStrokeAccessible}`,\n borderRadius: '0',\n '& option': {\n // The transparent select bg means the option background must be set so the text is visible in dark themes\n backgroundColor: tokens.colorNeutralBackground1\n }\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});\nconst useIconStyles = makeStyles({\n icon: {\n boxSizing: 'border-box',\n color: tokens.colorNeutralStrokeAccessible,\n display: 'block',\n position: 'absolute',\n pointerEvents: 'none',\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 Apply styling to the Select slots based on the state\n */ export const useSelectStyles_unstable = (state)=>{\n const { size, appearance } = state;\n const disabled = state.select.disabled;\n const invalid = `${state.select['aria-invalid']}` === 'true';\n const iconStyles = useIconStyles();\n const rootStyles = useRootStyles();\n const selectStyles = useSelectStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.select.className = mergeClasses(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);\n if (state.icon) {\n // eslint-disable-next-line react-hooks/immutability\n state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Select/useSelectStyles.styles.raw.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use client';
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses, shorthands } from "@griffel/react";
+import { tokens, typographyStyles } from "@fluentui/react-theme";
 export const selectClassNames = {
     root: 'fui-Select',
     select: 'fui-Select__select',
@@ -219,16 +219,18 @@ const useIconStyles = makeStyles({
 /**
  * Apply styling to the Select slots based on the state
  */ export const useSelectStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.select.disabled;
     const invalid = `${state.select['aria-invalid']}` === 'true';
     const iconStyles = useIconStyles();
     const rootStyles = useRootStyles();
     const selectStyles = useSelectStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(selectClassNames.root, rootStyles.base, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.select.className = mergeClasses(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) {
+        // eslint-disable-next-line react-hooks/immutability
         state.icon.className = mergeClasses(selectClassNames.icon, iconStyles.icon, disabled && iconStyles.disabled, iconStyles[size], state.icon.className);
     }
     return state;