npm - @fluentui/react-input - Versions diffs - 9.8.2 → 9.8.4 - Mend

@fluentui/react-input 9.8.2 → 9.8.4

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 (14) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,19 +1,43 @@
 # Change Log - @fluentui/react-input
-This log was last generated on Thu, 23 Apr 2026 11:59:23 GMT and should not be manually modified.
+This log was last generated on Wed, 24 Jun 2026 11:03:33 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.8.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.4)
+Wed, 24 Jun 2026 11:03:33 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.3..@fluentui/react-input_v9.8.4)
+### 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.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.3)
+Tue, 26 May 2026 09:40:01 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.2..@fluentui/react-input_v9.8.3)
+### 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.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.2)
-Thu, 23 Apr 2026 11:59:23 GMT
+Thu, 23 Apr 2026 14:21:17 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.1..@fluentui/react-input_v9.8.2)
 ### Patches
-- Bump @fluentui/react-field to v9.5.1 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
-- Bump @fluentui/react-utilities to v9.26.3 ([PR #35996](https://github.com/microsoft/fluentui/pull/35996) by beachball)
+- 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.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.1)

package/lib/components/Input/useInput.js CHANGED Viewed

@@ -11,11 +11,6 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - props from this instance of Input
  * @param ref - reference to `<input>` element of Input
  */ export const useInput_unstable = (props, ref)=>{
-    props = useFieldControlProps_unstable(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = useOverrides();
     var _overrides_inputDefaultAppearance;
     const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
@@ -37,14 +32,18 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
  * @param props - User provided props to the Input component.
  * @param ref - User provided ref to be passed to the Input component.
  */ export const useInputBase_unstable = (props, ref)=>{
-    const { onChange } = props;
+    const fieldControlProps = useFieldControlProps_unstable(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
     const [value, setValue] = useControllableState({
-        state: props.value,
-        defaultState: props.defaultValue,
+        state: fieldControlProps.value,
+        defaultState: fieldControlProps.defaultValue,
         initialState: ''
     });
     const nativeProps = getPartitionedNativeProps({
-        props,
+        props: fieldControlProps,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'onChange',
@@ -59,7 +58,7 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
             contentBefore: 'span',
             contentAfter: 'span'
         },
-        input: slot.always(props.input, {
+        input: slot.always(fieldControlProps.input, {
             defaultProps: {
                 type: 'text',
                 ref,
@@ -67,21 +66,22 @@ import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-co
             },
             elementType: 'input'
         }),
-        contentAfter: slot.optional(props.contentAfter, {
+        contentAfter: slot.optional(fieldControlProps.contentAfter, {
             elementType: 'span'
         }),
-        contentBefore: slot.optional(props.contentBefore, {
+        contentBefore: slot.optional(fieldControlProps.contentBefore, {
             elementType: 'span'
         }),
-        root: slot.always(props.root, {
+        root: slot.always(fieldControlProps.root, {
             defaultProps: nativeProps.root,
             elementType: 'span'
         })
     };
     state.input.value = value;
     state.input.onChange = useEventCallback((ev)=>{
+        var _fieldControlProps_onChange;
         const newValue = ev.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+        (_fieldControlProps_onChange = fieldControlProps.onChange) === null || _fieldControlProps_onChange === void 0 ? void 0 : _fieldControlProps_onChange.call(fieldControlProps, ev, {
             value: newValue
         });
         setValue(newValue);

package/lib/components/Input/useInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Input.\n \n The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n \n @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n /\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n ~~props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n~~ const overrides = useOverrides();\n\n const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' \|\| appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const state = useInputBase_unstable(baseProps, ref);\n\n return {\n size,\n appearance,\n ...state,\n };\n};\n\n/\n Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n \n @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n const { ~~onChange~~ } ~~= props~~;\n\n const [value, setValue] = useControllableState({\n state: ~~props~~.value,\n defaultState: ~~props~~.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: InputBaseState = {\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: slot.always(~~props~~.input, {\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n contentAfter: slot.optional(~~props~~.contentAfter, { elementType: 'span' }),\n contentBefore: slot.optional(~~props~~.contentBefore, { elementType: 'span' }),\n root: slot.always(~~props~~.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","~~supportsLabelFor","supportsRequired","supportsSize","~~overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","~~onChange~~","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;~~IACnDD~~,~~QAAQR,8BAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,~~MAAMC,~~YAAYP~~;~~QAEoBO~~;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,~~GAAGT~~;IAEtG,~~IACEU~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,~~WAAWR~~;IAE/C,OAAO;~~QACLK~~;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,~~CAAChB~~,OAAuBC;IAC3D,~~MAAM~~,~~EAAEgB~~,~~QAAQ~~,~~EAAE~~,~~GAAGjB~~;~~IAErB~~,MAAM,~~CAACkB~~,OAAOC,SAAS,GAAGzB,qBAAqB;~~QAC7CqB~~,~~OAAOf~~,~~MAAMkB~~,KAAK;~~QAClBE~~,~~cAAcpB~~,~~MAAMqB~~,YAAY;~~QAChCC~~,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO;~~QACAwB~~,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,~~MAAMV~~,QAAwB;~~QAC5BW~~,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,~~CAAC/B~~,~~MAAM4B~~,KAAK,EAAE;~~YAC9BI~~,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,~~CAACpC~~,~~MAAM8B~~,YAAY,EAAE;YAAEK,aAAa;QAAO;~~QACtEN~~,eAAejC,KAAKwC,QAAQ,~~CAACpC~~,~~MAAM6B~~,aAAa,EAAE;YAAEM,aAAa;QAAO;~~QACxER~~,MAAM/B,KAAKmC,MAAM,~~CAAC/B~~,~~MAAM2B~~,IAAI,EAAE;~~YAC5BK~~,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;~~IAEApB~~,~~MAAMa~~,KAAK,CAACV,KAAK,GAAGA;~~IACpBH~~,~~MAAMa~~,KAAK,~~CAACX~~,QAAQ,~~GAAGtB~~,~~iBAAiB0C~~,CAAAA;~~QACtC~~,~~MAAMC~~,WAAWD,GAAGE,MAAM,~~CAACrB~~,KAAK;~~QAChCD~~,~~qBAAAA,+BAAAA~~,~~SAAWoB~~,IAAI;~~YAAEnB~~,~~OAAOoB~~;QAAS;~~QACjCnB~~,~~SAASmB~~;IACX;IAEA,~~OAAOvB~~;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Input.\n \n The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n \n @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n /\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const overrides = useOverrides();\n\n const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' \|\| appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const state = useInputBase_unstable(baseProps, ref);\n\n return {\n size,\n appearance,\n ...state,\n };\n};\n\n/\n Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n \n @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n const fieldControlProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n\n const [value, setValue] = useControllableState({\n state: fieldControlProps.value,\n defaultState: fieldControlProps.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props: fieldControlProps,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: InputBaseState = {\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: slot.always(fieldControlProps.input, {\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n contentAfter: slot.optional(fieldControlProps.contentAfter, { elementType: 'span' }),\n contentBefore: slot.optional(fieldControlProps.contentBefore, { elementType: 'span' }),\n root: slot.always(fieldControlProps.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n fieldControlProps.onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","fieldControlProps","supportsLabelFor","supportsRequired","supportsSize","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","onChange","ev","newValue","target"],"mappings":"AAAA;AAGA,SAASA,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,yBAAyB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAEpH,SAASC,yBAAyBC,YAAY,QAAQ,kCAAkC;AAExF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAMC,YAAYJ;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,cAAhCH,+CAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWL;IAE/C,OAAO;QACLE;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACb,OAAuBC;IAC3D,MAAMa,oBAAoBtB,8BAA8BQ,OAAO;QAC7De,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAChB;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGzB,qBAAqB;QAC7CkB,OAAOE,kBAAkBI,KAAK;QAC9BE,cAAcN,kBAAkBO,YAAY;QAC5CC,cAAc;IAChB;IAEA,MAAMC,cAAc9B,0BAA0B;QAC5CO,OAAOc;QACPU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMb,QAAwB;QAC5Bc,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,KAAKmC,MAAM,CAACjB,kBAAkBc,KAAK,EAAE;YAC1CI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,KAAKwC,QAAQ,CAACtB,kBAAkBgB,YAAY,EAAE;YAAEK,aAAa;QAAO;QAClFN,eAAejC,KAAKwC,QAAQ,CAACtB,kBAAkBe,aAAa,EAAE;YAAEM,aAAa;QAAO;QACpFR,MAAM/B,KAAKmC,MAAM,CAACjB,kBAAkBa,IAAI,EAAE;YACxCK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAvB,MAAMgB,KAAK,CAACV,KAAK,GAAGA;IACpBN,MAAMgB,KAAK,CAACS,QAAQ,GAAG1C,iBAAiB2C,CAAAA;YAEtCxB;QADA,MAAMyB,WAAWD,GAAGE,MAAM,CAACtB,KAAK;SAChCJ,8BAAAA,kBAAkBuB,QAAQ,cAA1BvB,kDAAAA,iCAAAA,mBAA6BwB,IAAI;YAAEpB,OAAOqB;QAAS;QACnDpB,SAASoB;IACX;IAEA,OAAO3B;AACT,EAAE"}

package/lib/components/Input/useInputStyles.styles.js CHANGED Viewed

@@ -229,8 +229,6 @@ const useContentStyles = /*#__PURE__*/__styles({
  * Apply styling to the Input slots based on the state
  */
 export const useInputStyles_unstable = state => {
-  'use no memo';
   const {
     size,
     appearance
@@ -241,13 +239,17 @@ export const useInputStyles_unstable = state => {
   const rootStyles = useRootStyles();
   const inputStyles = useInputElementStyles();
   const contentStyles = useContentStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+  // eslint-disable-next-line react-hooks/immutability
   state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
   const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];
   if (state.contentBefore) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
   }
   if (state.contentAfter) {
+    // eslint-disable-next-line react-hooks/immutability
     state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
   }
   return state;

package/lib/components/Input/useInputStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge\n },\n combined: {\n small: tokens.spacingHorizontalS,\n medium: tokens.spacingHorizontalM,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n }\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n // Animation for focus OUT\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 // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1\n },\n medium: {\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge\n },\n outline: {\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0',\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0\n }\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0'\n }\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n },\n // remove the focus border\n '::after': {\n content: 'unset'\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none'\n }\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large\n }\n});\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0,\n borderStyle: 'none',\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none',\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small\n },\n medium: {\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n }\n});\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/*\n Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);\n const contentClasses = [\n useContentClassName(),\n disabled && contentStyles.disabled,\n contentStyles[size]\n ];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n }\n return state;\n};\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge\n },\n combined: {\n small: tokens.spacingHorizontalS,\n medium: tokens.spacingHorizontalM,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n }\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n // Animation for focus OUT\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 // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1\n },\n medium: {\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge\n },\n outline: {\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0',\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0\n }\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0'\n }\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n },\n // remove the focus border\n '::after': {\n content: 'unset'\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none'\n }\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large\n }\n});\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0,\n borderStyle: 'none',\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none',\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small\n },\n medium: {\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n }\n});\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/*\n Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);\n const contentClasses = [\n useContentClassName(),\n disabled && contentStyles.disabled,\n contentStyles[size]\n ];\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,SAAAC,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE,WAAW;EACjBC,KAAK,EAAE,kBAAkB;EACzBC,aAAa,EAAE,0BAA0B;EACzCC,YAAY,EAAE;AAClB,CAAC;AACD;AACA,MAAMC,YAAY,GAAG;EACjBC,KAAK,EAAE,MAAM;EACbC,MAAM,EAAE,MAAM;EACdC,KAAK,EAAE;AACX,CAAC;AACD;AACA;AACA,MAAMC,iBAAiB,GAAG;EACtBR,IAAI,EAAE;IACFK,KAAK,EAAEZ,MAAM,CAACgB,uBAAuB;IACrCH,MAAM,EAAEb,MAAM,CAACiB,uBAAuB;IACtCH,KAAK,EAAEd,MAAM,CAACkB;EAClB,CAAC;EACDV,KAAK,EAAE;IACHI,KAAK,EAAEZ,MAAM,CAACmB,oBAAoB;IAClCN,MAAM,EAAEb,MAAM,CAACmB,oBAAoB;IACnCL,KAAK,EAAEd,MAAM,CAACgB;EAClB,CAAC;EACDI,QAAQ,EAAE;IACNR,KAAK,EAAEZ,MAAM,CAACqB,kBAAkB;IAChCR,MAAM,EAAEb,MAAM,CAACkB,kBAAkB;IACjCJ,KAAK,EAAE,QAAQd,MAAM,CAACkB,kBAAkB,MAAMlB,MAAM,CAACgB,uBAAuB;EAChF;AACJ,CAAC;AACD,MAAMM,gBAAgB,gBAAGpB,aAAA;EAAAqB,CAAA;EAAAC,CAAA;AAAA,CAkExB,CAAC;AACF,MAAMC,aAAa,gBAAGtB,QAAA;EAAAS,KAAA;IAAAc,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAjB,MAAA;EAAAC,KAAA;IAAAY,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,OAAA;EAAAC,kBAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,oBAAA;IAAAlB,MAAA;IAAAI,OAAA;IAAAe,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,iBAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAA/B,MAAA;EAAA;EAAA;IAAAA,MAAA;EAAA;EAAA;IAAAA,MAAA;IAAAgC,MAAA;EAAA;EAAA;IAAAhC,MAAA;IAAAgC,MAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAlC,MAAA;IAAAkB,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAc,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,sBAAA;IAAAC,MAAA;EAAA;EAAAC,qBAAA;IAAAC,MAAA;EAAA;EAAAC,uBAAA;IAAAH,MAAA;EAAA;EAAAI,sBAAA;IAAAF,MAAA;EAAA;EAAAG,sBAAA;IAAAL,MAAA;EAAA;EAAAM,qBAAA;IAAAJ,MAAA;EAAA;AAAA;EAAAK,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAoHrB,CAAC;AACF,MAAMC,iBAAiB,gBAAGlG,aAAA,gjBAoBzB,CAAC;AACF,MAAMmG,qBAAqB,gBAAGlG,QAAA;EAAAS,KAAA;IAAA2E,MAAA;IAAAE,MAAA;EAAA;EAAA5E,MAAA;EAAAC,KAAA;IAAAyE,MAAA;IAAAE,MAAA;EAAA;EAAAH,sBAAA;IAAAC,MAAA;EAAA;EAAAC,qBAAA;IAAAC,MAAA;EAAA;EAAAC,uBAAA;IAAAH,MAAA;EAAA;EAAAI,sBAAA;IAAAF,MAAA;EAAA;EAAAG,sBAAA;IAAAL,MAAA;EAAA;EAAAM,qBAAA;IAAAJ,MAAA;EAAA;EAAAX,QAAA;IAAAwB,MAAA;IAAAzD,MAAA;IAAAkC,OAAA;IAAAwB,MAAA;EAAA;AAAA;EAAAT,CAAA;AAAA,CAqC7B,CAAC;AACF,MAAMU,mBAAmB,gBAAGtG,aAAA,4IAS3B,CAAC;AACF,MAAMuG,gBAAgB,gBAAGtG,QAAA;EAAA2E,QAAA;IAAAwB,MAAA;EAAA;EAAA1F,KAAA;IAAA8F,MAAA;EAAA;EAAA7F,MAAA;EAAAC,KAAA;IAAA4F,MAAA;EAAA;AAAA;EAAAZ,CAAA;AAAA,CAiBxB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAM;IAAEC,IAAI;IAAEC;EAAW,CAAC,GAAGF,KAAK;EAClC,MAAM9B,QAAQ,GAAG8B,KAAK,CAACpG,KAAK,CAACsE,QAAQ;EACrC,MAAMN,OAAO,GAAG,GAAGoC,KAAK,CAACpG,KAAK,CAAC,cAAc,CAAC,EAAE,KAAK,MAAM;EAC3D,MAAMsD,MAAM,GAAGgD,UAAU,CAACC,UAAU,CAAC,QAAQ,CAAC;EAC9C,MAAMC,UAAU,GAAGvF,aAAa,CAAC,CAAC;EAClC,MAAMwF,WAAW,GAAGZ,qBAAqB,CAAC,CAAC;EAC3C,MAAMa,aAAa,GAAGT,gBAAgB,CAAC,CAAC;EACxC;EACAG,KAAK,CAACrG,IAAI,CAAC4G,SAAS,GAAG/G,YAAY,CAACE,eAAe,CAACC,IAAI,EAAEe,gBAAgB,CAAC,CAAC,EAAE0F,UAAU,CAACH,IAAI,CAAC,EAAED,KAAK,CAACnG,aAAa,IAAIuG,UAAU,CAAC,GAAGH,IAAI,mBAAmB,CAAC,EAAED,KAAK,CAAClG,YAAY,IAAIsG,UAAU,CAAC,GAAGH,IAAI,kBAAkB,CAAC,EAAEG,UAAU,CAACF,UAAU,CAAC,EAAE,CAAChC,QAAQ,IAAIgC,UAAU,KAAK,SAAS,IAAIE,UAAU,CAAC7E,kBAAkB,EAAE,CAAC2C,QAAQ,IAAIgC,UAAU,KAAK,WAAW,IAAIE,UAAU,CAACxD,oBAAoB,EAAE,CAACsB,QAAQ,IAAIhB,MAAM,IAAIkD,UAAU,CAAC7C,iBAAiB,EAAEL,MAAM,IAAIkD,UAAU,CAAClD,MAAM,EAAE,CAACgB,QAAQ,IAAIN,OAAO,IAAIwC,UAAU,CAACxC,OAAO,EAAEM,QAAQ,IAAIkC,UAAU,CAAClC,QAAQ,EAAE8B,KAAK,CAACrG,IAAI,CAAC4G,SAAS,CAAC;EAC5jB;EACAP,KAAK,CAACpG,KAAK,CAAC2G,SAAS,GAAG/G,YAAY,CAACE,eAAe,CAACE,KAAK,EAAE4F,iBAAiB,CAAC,CAAC,EAAEa,WAAW,CAACJ,IAAI,CAAC,EAAED,KAAK,CAACnG,aAAa,IAAIwG,WAAW,CAAC,GAAGJ,IAAI,mBAAmB,CAAC,EAAED,KAAK,CAAClG,YAAY,IAAIuG,WAAW,CAAC,GAAGJ,IAAI,kBAAkB,CAAC,EAAE/B,QAAQ,IAAImC,WAAW,CAACnC,QAAQ,EAAE8B,KAAK,CAACpG,KAAK,CAAC2G,SAAS,CAAC;EAC1R,MAAMC,cAAc,GAAG,CACnBZ,mBAAmB,CAAC,CAAC,EACrB1B,QAAQ,IAAIoC,aAAa,CAACpC,QAAQ,EAClCoC,aAAa,CAACL,IAAI,CAAC,CACtB;EACD,IAAID,KAAK,CAACnG,aAAa,EAAE;IACrB;IACAmG,KAAK,CAACnG,aAAa,CAAC0G,SAAS,GAAG/G,YAAY,CAACE,eAAe,CAACG,aAAa,EAAE,GAAG2G,cAAc,EAAER,KAAK,CAACnG,aAAa,CAAC0G,SAAS,CAAC;EACjI;EACA,IAAIP,KAAK,CAAClG,YAAY,EAAE;IACpB;IACAkG,KAAK,CAAClG,YAAY,CAACyG,SAAS,GAAG/G,YAAY,CAACE,eAAe,CAACI,YAAY,EAAE,GAAG0G,cAAc,EAAER,KAAK,CAAClG,YAAY,CAACyG,SAAS,CAAC;EAC9H;EACA,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Input/useInputStyles.styles.raw.js CHANGED Viewed

@@ -306,7 +306,6 @@ const useContentStyles = makeStyles({
 /**
  * Apply styling to the Input slots based on the state
  */ export const useInputStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.input.disabled;
     const invalid = `${state.input['aria-invalid']}` === 'true';
@@ -314,7 +313,9 @@ const useContentStyles = makeStyles({
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
     const contentClasses = [
         useContentClassName(),
@@ -322,9 +323,11 @@ const useContentStyles = makeStyles({
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib/components/Input/useInputStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM,\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge,\n },\n combined: {\n small: tokens.spacingHorizontalS, // SNudge + XXS\n medium: tokens.spacingHorizontalM, // MNudge + XXS\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n },\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\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 ':focus-within::after': {\n // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge,\n },\n outline: {\n // included in rootBaseStyles\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0', // corners look strange if rounded\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0',\n },\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large,\n },\n});\n\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small,\n },\n medium: {\n // Included in useInputClassName\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large,\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useContentClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/*\n Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n 'use no memo';\n\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n useRootClassName(),\n rootStyles[size],\n state.contentBefore && rootStyles[`${size}WithContentBefore`],\n state.contentAfter && rootStyles[`${size}WithContentAfter`],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n inputStyles[size],\n state.contentBefore && inputStyles[`${size}WithContentBefore`],\n state.contentAfter && inputStyles[`${size}WithContentAfter`],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM,\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge,\n },\n combined: {\n small: tokens.spacingHorizontalS, // SNudge + XXS\n medium: tokens.spacingHorizontalM, // MNudge + XXS\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n },\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\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 ':focus-within::after': {\n // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge,\n },\n outline: {\n // included in rootBaseStyles\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0', // corners look strange if rounded\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0',\n },\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large,\n },\n});\n\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small,\n },\n medium: {\n // Included in useInputClassName\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large,\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useContentClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/*\n Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n inputClassNames.root,\n useRootClassName(),\n rootStyles[size],\n state.contentBefore && rootStyles[`${size}WithContentBefore`],\n state.contentAfter && rootStyles[`${size}WithContentAfter`],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n inputStyles[size],\n state.contentBefore && inputStyles[`${size}WithContentBefore`],\n state.contentAfter && inputStyles[`${size}WithContentAfter`],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}

package/lib-commonjs/components/Input/useInput.js CHANGED Viewed

@@ -21,11 +21,6 @@ const _reactfield = require("@fluentui/react-field");
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const useInput_unstable = (props, ref)=>{
-    props = (0, _reactfield.useFieldControlProps_unstable)(props, {
-        supportsLabelFor: true,
-        supportsRequired: true,
-        supportsSize: true
-    });
     const overrides = (0, _reactsharedcontexts.useOverrides_unstable)();
     var _overrides_inputDefaultAppearance;
     const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
@@ -41,14 +36,18 @@ const useInput_unstable = (props, ref)=>{
     };
 };
 const useInputBase_unstable = (props, ref)=>{
-    const { onChange } = props;
+    const fieldControlProps = (0, _reactfield.useFieldControlProps_unstable)(props, {
+        supportsLabelFor: true,
+        supportsRequired: true,
+        supportsSize: true
+    });
     const [value, setValue] = (0, _reactutilities.useControllableState)({
-        state: props.value,
-        defaultState: props.defaultValue,
+        state: fieldControlProps.value,
+        defaultState: fieldControlProps.defaultValue,
         initialState: ''
     });
     const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
-        props,
+        props: fieldControlProps,
         primarySlotTagName: 'input',
         excludedPropNames: [
             'onChange',
@@ -63,7 +62,7 @@ const useInputBase_unstable = (props, ref)=>{
             contentBefore: 'span',
             contentAfter: 'span'
         },
-        input: _reactutilities.slot.always(props.input, {
+        input: _reactutilities.slot.always(fieldControlProps.input, {
             defaultProps: {
                 type: 'text',
                 ref,
@@ -71,21 +70,22 @@ const useInputBase_unstable = (props, ref)=>{
             },
             elementType: 'input'
         }),
-        contentAfter: _reactutilities.slot.optional(props.contentAfter, {
+        contentAfter: _reactutilities.slot.optional(fieldControlProps.contentAfter, {
             elementType: 'span'
         }),
-        contentBefore: _reactutilities.slot.optional(props.contentBefore, {
+        contentBefore: _reactutilities.slot.optional(fieldControlProps.contentBefore, {
             elementType: 'span'
         }),
-        root: _reactutilities.slot.always(props.root, {
+        root: _reactutilities.slot.always(fieldControlProps.root, {
             defaultProps: nativeProps.root,
             elementType: 'span'
         })
     };
     state.input.value = value;
     state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
+        var _fieldControlProps_onChange;
         const newValue = ev.target.value;
-        onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
+        (_fieldControlProps_onChange = fieldControlProps.onChange) === null || _fieldControlProps_onChange === void 0 ? void 0 : _fieldControlProps_onChange.call(fieldControlProps, ev, {
             value: newValue
         });
         setValue(newValue);

package/lib-commonjs/components/Input/useInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Input.\n \n The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n \n @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n /\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n ~~props = useFieldControlProps_unstable(props, { supportsLabelFor: true, supportsRequired: true, supportsSize: true });\n\n~~ const overrides = useOverrides();\n\n const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' \|\| appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const state = useInputBase_unstable(baseProps, ref);\n\n return {\n size,\n appearance,\n ...state,\n };\n};\n\n/\n Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n \n @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n const { ~~onChange~~ } ~~= props~~;\n\n const [value, setValue] = useControllableState({\n state: ~~props~~.value,\n defaultState: ~~props~~.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: InputBaseState = {\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: slot.always(~~props~~.input, {\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n contentAfter: slot.optional(~~props~~.contentAfter, { elementType: 'span' }),\n contentBefore: slot.optional(~~props~~.contentBefore, { elementType: 'span' }),\n root: slot.always(~~props~~.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","~~supportsLabelFor","supportsRequired","supportsSize","~~overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","~~onChange~~","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;~~yBAmDawB~~;eAAAA;;~~IAlCAjB~~,iBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;~~IACnDD~~,~~YAAQR,yCAAAA,EAA8BQ,OAAO;QAAEE,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,~~MAAMC,~~gBAAYP~~,0CAAAA;~~QAEoBO~~;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,~~qCAAAA~~,UAAUG,~~sBAAAA~~,~~AAAsB~~,~~MAAA~~,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,~~GAAGT~~;IAEtG,~~IACEU~~,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,~~WAAWR~~;IAE/C,OAAO;~~QACLK~~;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,~~CAACf~~,OAAuBC;IAC3D,~~MAAM~~,~~EAAEgB~~,~~QAAQ~~,~~EAAE~~,~~GAAGjB~~;~~IAErB~~,MAAM,~~CAACkB~~,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;~~QAC7CqB~~,~~OAAOf~~,~~MAAMkB~~,KAAK;~~QAClBE~~,~~cAAcpB~~,~~MAAMqB~~,YAAY;~~QAChCC~~,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO;~~QACAwB~~,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,~~MAAMV~~,QAAwB;~~QAC5BW~~,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,~~CAAC/B~~,~~MAAM4B~~,KAAK,EAAE;~~YAC9BI~~,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,~~CAACpC~~,~~MAAM8B~~,YAAY,EAAE;YAAEK,aAAa;QAAO;~~QACtEN~~,eAAejC,oBAAAA,CAAKwC,QAAQ,~~CAACpC~~,~~MAAM6B~~,aAAa,EAAE;YAAEM,aAAa;QAAO;~~QACxER~~,MAAM/B,oBAAAA,CAAKmC,MAAM,~~CAAC/B~~,~~MAAM2B~~,IAAI,EAAE;~~YAC5BK~~,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;~~IAEApB~~,~~MAAMa~~,KAAK,CAACV,KAAK,GAAGA;~~IACpBH~~,~~MAAMa~~,KAAK,~~CAACX~~,QAAQ,~~OAAGtB~~,gCAAAA,~~EAAiB0C~~,CAAAA;~~QACtC~~,~~MAAMC~~,WAAWD,GAAGE,MAAM,~~CAACrB~~,KAAK;~~QAChCD~~,~~aAAAA~~,QAAAA,~~aAAAA~~,KAAAA,IAAAA,KAAAA,IAAAA,~~SAAWoB~~,IAAI;~~YAAEnB~~,~~OAAOoB~~;QAAS;~~QACjCnB~~,~~SAASmB~~;IACX;IAEA,~~OAAOvB~~;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types';\nimport { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';\n\n/*\n Create the state required to render Input.\n \n The returned state can be modified with hooks such as useInputStyles_unstable,\n * before being passed to renderInput_unstable.\n \n @param props - props from this instance of Input\n * @param ref - reference to `<input>` element of Input\n /\nexport const useInput_unstable = (props: InputProps, ref: React.Ref<HTMLInputElement>): InputState => {\n const overrides = useOverrides();\n\n const { size = 'medium', appearance = overrides.inputDefaultAppearance ?? 'outline', ...baseProps } = props;\n\n if (\n process.env.NODE_ENV !== 'production' &&\n (appearance === 'filled-darker-shadow' \|\| appearance === 'filled-lighter-shadow')\n ) {\n // eslint-disable-next-line no-console\n console.error(\n \"The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the\" +\n ' future.',\n );\n }\n\n const state = useInputBase_unstable(baseProps, ref);\n\n return {\n size,\n appearance,\n ...state,\n };\n};\n\n/\n Base hook for Input component, which manages state related to controlled/uncontrolled value,\n * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).\n \n @param props - User provided props to the Input component.\n * @param ref - User provided ref to be passed to the Input component.\n */\nexport const useInputBase_unstable = (props: InputBaseProps, ref: React.Ref<HTMLInputElement>): InputBaseState => {\n const fieldControlProps = useFieldControlProps_unstable(props, {\n supportsLabelFor: true,\n supportsRequired: true,\n supportsSize: true,\n });\n\n const [value, setValue] = useControllableState({\n state: fieldControlProps.value,\n defaultState: fieldControlProps.defaultValue,\n initialState: '',\n });\n\n const nativeProps = getPartitionedNativeProps({\n props: fieldControlProps,\n primarySlotTagName: 'input',\n excludedPropNames: ['onChange', 'value', 'defaultValue'],\n });\n\n const state: InputBaseState = {\n components: {\n root: 'span',\n input: 'input',\n contentBefore: 'span',\n contentAfter: 'span',\n },\n input: slot.always(fieldControlProps.input, {\n defaultProps: {\n type: 'text',\n ref,\n ...nativeProps.primary,\n },\n elementType: 'input',\n }),\n contentAfter: slot.optional(fieldControlProps.contentAfter, { elementType: 'span' }),\n contentBefore: slot.optional(fieldControlProps.contentBefore, { elementType: 'span' }),\n root: slot.always(fieldControlProps.root, {\n defaultProps: nativeProps.root,\n elementType: 'span',\n }),\n };\n\n state.input.value = value;\n state.input.onChange = useEventCallback(ev => {\n const newValue = ev.target.value;\n fieldControlProps.onChange?.(ev, { value: newValue });\n setValue(newValue);\n });\n\n return state;\n};\n"],"names":["useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","overrides","size","appearance","inputDefaultAppearance","baseProps","process","env","NODE_ENV","console","error","state","useInputBase_unstable","fieldControlProps","supportsLabelFor","supportsRequired","supportsSize","value","setValue","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","onChange","ev","newValue","target"],"mappings":"AAAA;;;;;;;;;;;;yBAiDaqB;eAAAA;;IAhCAd,iBAAAA;;;;4BAdiC,wBAAwB;gCACkB,4BAA4B;qCAE9D,kCAAkC;AAWjF,0BAA0B,CAACC,OAAmBC;IACnD,MAAMC,gBAAYJ,0CAAAA;QAEoBI;IAAtC,MAAM,EAAEC,OAAO,QAAQ,EAAEC,aAAaF,CAAAA,oCAAAA,UAAUG,sBAAsB,AAAtBA,MAAsB,QAAhCH,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAE,GAAGI,WAAW,GAAGN;IAEtG,IACEO,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,CAAsB,EAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAMC,QAAQC,sBAAsBP,WAAWL;IAE/C,OAAO;QACLE;QACAC;QACA,GAAGQ,KAAK;IACV;AACF,EAAE;AASK,8BAA8B,CAACZ,OAAuBC;IAC3D,MAAMa,wBAAoBtB,yCAAAA,EAA8BQ,OAAO;QAC7De,kBAAkB;QAClBC,kBAAkB;QAClBC,cAAc;IAChB;IAEA,MAAM,CAACC,OAAOC,SAAS,OAAGzB,oCAAAA,EAAqB;QAC7CkB,OAAOE,kBAAkBI,KAAK;QAC9BE,cAAcN,kBAAkBO,YAAY;QAC5CC,cAAc;IAChB;IAEA,MAAMC,kBAAc9B,yCAAAA,EAA0B;QAC5CO,OAAOc;QACPU,oBAAoB;QACpBC,mBAAmB;YAAC;YAAY;YAAS;SAAe;IAC1D;IAEA,MAAMb,QAAwB;QAC5Bc,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOhC,oBAAAA,CAAKmC,MAAM,CAACjB,kBAAkBc,KAAK,EAAE;YAC1CI,cAAc;gBACZC,MAAM;gBACNhC;gBACA,GAAGsB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAclC,oBAAAA,CAAKwC,QAAQ,CAACtB,kBAAkBgB,YAAY,EAAE;YAAEK,aAAa;QAAO;QAClFN,eAAejC,oBAAAA,CAAKwC,QAAQ,CAACtB,kBAAkBe,aAAa,EAAE;YAAEM,aAAa;QAAO;QACpFR,MAAM/B,oBAAAA,CAAKmC,MAAM,CAACjB,kBAAkBa,IAAI,EAAE;YACxCK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAvB,MAAMgB,KAAK,CAACV,KAAK,GAAGA;IACpBN,MAAMgB,KAAK,CAACS,QAAQ,OAAG1C,gCAAAA,EAAiB2C,CAAAA;YAEtCxB;QADA,MAAMyB,WAAWD,GAAGE,MAAM,CAACtB,KAAK;SAChCJ,8BAAAA,kBAAkBuB,QAAAA,AAAQ,MAAA,QAA1BvB,gCAAAA,KAAAA,IAAAA,KAAAA,IAAAA,4BAAAA,IAAAA,CAAAA,mBAA6BwB,IAAI;YAAEpB,OAAOqB;QAAS;QACnDpB,SAASoB;IACX;IAEA,OAAO3B;AACT,EAAE"}

package/lib-commonjs/components/Input/useInputStyles.styles.js CHANGED Viewed

@@ -466,7 +466,6 @@ const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
     ]
 });
 const useInputStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.input.disabled;
     const invalid = `${state.input['aria-invalid']}` === 'true';
@@ -474,7 +473,9 @@ const useInputStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
     const contentClasses = [
         useContentClassName(),
@@ -482,9 +483,11 @@ const useInputStyles_unstable = (state)=>{
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib-commonjs/components/Input/useInputStyles.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge\n },\n combined: {\n small: tokens.spacingHorizontalS,\n medium: tokens.spacingHorizontalM,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n }\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n // Animation for focus OUT\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 // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1\n },\n medium: {\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge\n },\n outline: {\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0',\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0\n }\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0'\n }\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n },\n // remove the focus border\n '::after': {\n content: 'unset'\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none'\n }\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large\n }\n});\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0,\n borderStyle: 'none',\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none',\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small\n },\n medium: {\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n }\n});\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/*\n Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n 'use no memo';\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);\n const contentClasses = [\n useContentClassName(),\n disabled && contentStyles.disabled,\n contentStyles[size]\n ];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n }\n return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}
1	+ {"version":3,"sources":["useInputStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nexport const inputClassNames = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter'\n};\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px'\n};\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge\n },\n combined: {\n small: tokens.spacingHorizontalS,\n medium: tokens.spacingHorizontalM,\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`\n }\n};\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium,\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n // Animation for focus OUT\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 // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed\n },\n ':focus-within': {\n outline: '2px solid transparent'\n }\n});\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1\n },\n medium: {\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge\n },\n outline: {\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n }\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0',\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0\n }\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0'\n }\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke)\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive)\n }\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2)\n }\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText')\n },\n // remove the focus border\n '::after': {\n content: 'unset'\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none'\n }\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large\n }\n});\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0,\n borderStyle: 'none',\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1\n },\n outlineStyle: 'none',\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit'\n});\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small\n },\n medium: {\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled\n }\n }\n});\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3,\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': {\n fontSize: '20px'\n }\n});\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': {\n fontSize: '16px'\n }\n },\n medium: {\n },\n large: {\n '> svg': {\n fontSize: '24px'\n }\n }\n});\n/*\n Apply styling to the Input slots based on the state\n */ export const useInputStyles_unstable = (state)=>{\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);\n const contentClasses = [\n useContentClassName(),\n disabled && contentStyles.disabled,\n contentStyles[size]\n ];\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);\n }\n return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","r","s","useRootStyles","sshi5w","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","i8kkvl","Belr9w4","rmohyg","outline","outlineInteractive","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","Drbcw7","udz0bu","Be8ivqh","ofdepl","underline","De3pzq","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","icvyot","vrafjx","wvpqe5","Eqx8gd","B1piin3","underlineInteractive","d9w3h3","B3778ie","B4j8arr","Bl18szs","Blrzh8d","filled","g2u3we","h3c5rm","B9xav0g","zhjwy3","filledInteractive","q7v0qe","kmh5ft","nagaa4","B1yhkcb","invalid","tvckwq","gk2u95","hhx65j","Bxowmz0","E5pizo","disabled","Bceei9c","Bcq6wej","Jcjdmf","sc4o1m","Bosien3","Bsft5z2","Bduesf4","smallWithContentBefore","uwmqm3","smallWithContentAfter","z189sj","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","d","p","h","a","m","w","useInputClassName","useInputElementStyles","sj55zd","yvdlaj","useContentClassName","useContentStyles","Duoase","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}

package/lib-commonjs/components/Input/useInputStyles.styles.raw.js CHANGED Viewed

@@ -318,7 +318,6 @@ const useContentStyles = (0, _react.makeStyles)({
     }
 });
 const useInputStyles_unstable = (state)=>{
-    'use no memo';
     const { size, appearance } = state;
     const disabled = state.input.disabled;
     const invalid = `${state.input['aria-invalid']}` === 'true';
@@ -326,7 +325,9 @@ const useInputStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const inputStyles = useInputElementStyles();
     const contentStyles = useContentStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(inputClassNames.root, useRootClassName(), rootStyles[size], state.contentBefore && rootStyles[`${size}WithContentBefore`], state.contentAfter && rootStyles[`${size}WithContentAfter`], rootStyles[appearance], !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, filled && rootStyles.filled, !disabled && invalid && rootStyles.invalid, disabled && rootStyles.disabled, state.root.className);
+    // eslint-disable-next-line react-hooks/immutability
     state.input.className = (0, _react.mergeClasses)(inputClassNames.input, useInputClassName(), inputStyles[size], state.contentBefore && inputStyles[`${size}WithContentBefore`], state.contentAfter && inputStyles[`${size}WithContentAfter`], disabled && inputStyles.disabled, state.input.className);
     const contentClasses = [
         useContentClassName(),
@@ -334,9 +335,11 @@ const useInputStyles_unstable = (state)=>{
         contentStyles[size]
     ];
     if (state.contentBefore) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
     }
     if (state.contentAfter) {
+        // eslint-disable-next-line react-hooks/immutability
         state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
     }
     return state;

package/lib-commonjs/components/Input/useInputStyles.styles.raw.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM,\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge,\n },\n combined: {\n small: tokens.spacingHorizontalS, // SNudge + XXS\n medium: tokens.spacingHorizontalM, // MNudge + XXS\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n },\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\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 ':focus-within::after': {\n // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge,\n },\n outline: {\n // included in rootBaseStyles\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0', // corners look strange if rounded\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0',\n },\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large,\n },\n});\n\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small,\n },\n medium: {\n // Included in useInputClassName\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large,\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useContentClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/*\n Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n 'use no memo';\n\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n state.root.className = mergeClasses(\n inputClassNames.root,\n useRootClassName(),\n rootStyles[size],\n state.contentBefore && rootStyles[`${size}WithContentBefore`],\n state.contentAfter && rootStyles[`${size}WithContentAfter`],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n inputStyles[size],\n state.contentBefore && inputStyles[`${size}WithContentBefore`],\n state.contentAfter && inputStyles[`${size}WithContentAfter`],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Input/useInputStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { InputSlots, InputState } from './Input.types';\n\nexport const inputClassNames: SlotClassNames<InputSlots> = {\n root: 'fui-Input',\n input: 'fui-Input__input',\n contentBefore: 'fui-Input__contentBefore',\n contentAfter: 'fui-Input__contentAfter',\n};\n\n// TODO(sharing) should these be shared somewhere?\nconst fieldHeights = {\n small: '24px',\n medium: '32px',\n large: '40px',\n};\n\n// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.\n// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.\nconst horizontalPadding = {\n root: {\n small: tokens.spacingHorizontalSNudge,\n medium: tokens.spacingHorizontalMNudge,\n large: tokens.spacingHorizontalM,\n },\n input: {\n small: tokens.spacingHorizontalXXS,\n medium: tokens.spacingHorizontalXXS,\n large: tokens.spacingHorizontalSNudge,\n },\n combined: {\n small: tokens.spacingHorizontalS, // SNudge + XXS\n medium: tokens.spacingHorizontalM, // MNudge + XXS\n large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`,\n },\n};\n\nconst useRootClassName = makeResetStyles({\n display: 'inline-flex',\n alignItems: 'center',\n flexWrap: 'nowrap',\n gap: tokens.spacingHorizontalXXS,\n borderRadius: tokens.borderRadiusMedium, // used for all but underline\n position: 'relative',\n boxSizing: 'border-box',\n verticalAlign: 'middle',\n\n // size: medium (default)\n minHeight: fieldHeights.medium,\n ...typographyStyles.body1,\n\n // appearance: outline (default)\n backgroundColor: tokens.colorNeutralBackground1,\n border: `1px solid ${tokens.colorNeutralStroke1}`,\n borderBottomColor: tokens.colorNeutralStrokeAccessible,\n\n // This is all for the bottom focus border.\n // It's supposed to be 2px flat all the way across and match the radius of the field's corners.\n '::after': {\n boxSizing: 'border-box',\n content: '\"\"',\n position: 'absolute',\n left: '-1px',\n bottom: '-1px',\n right: '-1px',\n\n // Maintaining the correct corner radius:\n // Use the whole border-radius as the height and only put radii on the bottom corners.\n // (Otherwise the radius would be automatically reduced to fit available space.)\n // max() ensures the focus border still shows up even if someone sets tokens.borderRadiusMedium to 0.\n height: `max(2px, ${tokens.borderRadiusMedium})`,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n borderBottomRightRadius: tokens.borderRadiusMedium,\n\n // Flat 2px border:\n // By default borderBottom will cause little \"horns\" on the ends. The clipPath trims them off.\n // (This could be done without trimming using `background: linear-gradient(...)`, but using\n // borderBottom makes it easier for people to override the color if needed.)\n borderBottom: `2px solid ${tokens.colorCompoundBrandStroke}`,\n clipPath: 'inset(calc(100% - 2px) 0 0 0)',\n\n // Animation for focus OUT\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 ':focus-within::after': {\n // Animation for focus IN\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 ':focus-within:active::after': {\n // This is if the user clicks the field again while it's already focused\n borderBottomColor: tokens.colorCompoundBrandStrokePressed,\n },\n ':focus-within': {\n outline: '2px solid transparent',\n },\n});\n\nconst useRootStyles = makeStyles({\n small: {\n minHeight: fieldHeights.small,\n ...typographyStyles.caption1,\n },\n medium: {\n // included in rootBaseStyles\n },\n large: {\n minHeight: fieldHeights.large,\n ...typographyStyles.body2,\n gap: tokens.spacingHorizontalSNudge,\n },\n outline: {\n // included in rootBaseStyles\n },\n outlineInteractive: {\n ':hover': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Hover),\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1Pressed),\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n },\n underline: {\n backgroundColor: tokens.colorTransparentBackground,\n borderRadius: '0', // corners look strange if rounded\n // border is specified in rootBaseStyles, but we only want a bottom border here\n borderTopStyle: 'none',\n borderRightStyle: 'none',\n borderLeftStyle: 'none',\n // Make the focus underline (::after) match the width of the bottom border\n '::after': {\n left: 0,\n right: 0,\n },\n },\n underlineInteractive: {\n ':hover': {\n borderBottomColor: tokens.colorNeutralStrokeAccessibleHover,\n },\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':active,:focus-within': {\n borderBottomColor: tokens.colorNeutralStrokeAccessiblePressed,\n },\n '::after': {\n // remove rounded corners from focus underline\n borderRadius: '0',\n },\n },\n filled: {\n ...shorthands.borderColor(tokens.colorTransparentStroke),\n },\n filledInteractive: {\n // DO NOT add a space between the selectors! It changes the behavior of make-styles.\n ':hover,:focus-within': {\n // also handles pressed border color (:active)\n ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n },\n },\n invalid: {\n ':not(:focus-within),:hover:not(:focus-within)': {\n ...shorthands.borderColor(tokens.colorPaletteRedBorder2),\n },\n },\n 'filled-darker': {\n backgroundColor: tokens.colorNeutralBackground3,\n },\n 'filled-lighter': {\n backgroundColor: tokens.colorNeutralBackground1,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-darker-shadow': {\n backgroundColor: tokens.colorNeutralBackground3,\n boxShadow: tokens.shadow2,\n },\n // This shadow appearance is deprecated and will be removed in a future release.\n 'filled-lighter-shadow': {\n backgroundColor: tokens.colorNeutralBackground1,\n boxShadow: tokens.shadow2,\n },\n disabled: {\n cursor: 'not-allowed',\n backgroundColor: tokens.colorTransparentBackground,\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n '@media (forced-colors: active)': {\n ...shorthands.borderColor('GrayText'),\n },\n // remove the focus border\n '::after': {\n content: 'unset',\n },\n // remove the focus outline\n ':focus-within': {\n outlineStyle: 'none',\n },\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.root.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.root.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.root.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.root.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.root.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.root.large,\n },\n});\n\nconst useInputClassName = makeResetStyles({\n alignSelf: 'stretch',\n boxSizing: 'border-box',\n flexGrow: 1,\n minWidth: 0, // required to make the input shrink to fit the wrapper\n borderStyle: 'none', // input itself never has a border (this is handled by inputWrapper)\n padding: `0 ${horizontalPadding.combined.medium}`,\n color: tokens.colorNeutralForeground1,\n // Use literal \"transparent\" (not from the theme) to always let the color from the root show through\n backgroundColor: 'transparent',\n\n '::placeholder': {\n color: tokens.colorNeutralForeground4,\n opacity: 1, // browser style override\n },\n\n outlineStyle: 'none', // disable default browser outline\n\n // Inherit typography styles from root\n fontFamily: 'inherit',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n lineHeight: 'inherit',\n});\n\nconst useInputElementStyles = makeStyles({\n small: {\n paddingLeft: horizontalPadding.combined.small,\n paddingRight: horizontalPadding.combined.small,\n },\n medium: {\n // Included in useInputClassName\n },\n large: {\n paddingLeft: horizontalPadding.combined.large,\n paddingRight: horizontalPadding.combined.large,\n },\n smallWithContentBefore: {\n paddingLeft: horizontalPadding.input.small,\n },\n smallWithContentAfter: {\n paddingRight: horizontalPadding.input.small,\n },\n mediumWithContentBefore: {\n paddingLeft: horizontalPadding.input.medium,\n },\n mediumWithContentAfter: {\n paddingRight: horizontalPadding.input.medium,\n },\n largeWithContentBefore: {\n paddingLeft: horizontalPadding.input.large,\n },\n largeWithContentAfter: {\n paddingRight: horizontalPadding.input.large,\n },\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n backgroundColor: tokens.colorTransparentBackground,\n cursor: 'not-allowed',\n '::placeholder': {\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n});\n\nconst useContentClassName = makeResetStyles({\n boxSizing: 'border-box',\n color: tokens.colorNeutralForeground3, // \"icon color\" in design spec\n display: 'flex',\n // special case styling for icons (most common case) to ensure they're centered vertically\n // size: medium (default)\n '> svg': { fontSize: '20px' },\n});\n\nconst useContentStyles = makeStyles({\n disabled: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n // Ensure resizable icons show up with the proper font size\n small: {\n '> svg': { fontSize: '16px' },\n },\n medium: {\n // included in useContentClassName\n },\n large: {\n '> svg': { fontSize: '24px' },\n },\n});\n\n/*\n Apply styling to the Input slots based on the state\n */\nexport const useInputStyles_unstable = (state: InputState): InputState => {\n const { size, appearance } = state;\n const disabled = state.input.disabled;\n const invalid = `${state.input['aria-invalid']}` === 'true';\n const filled = appearance.startsWith('filled');\n\n const rootStyles = useRootStyles();\n const inputStyles = useInputElementStyles();\n const contentStyles = useContentStyles();\n\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(\n inputClassNames.root,\n useRootClassName(),\n rootStyles[size],\n state.contentBefore && rootStyles[`${size}WithContentBefore`],\n state.contentAfter && rootStyles[`${size}WithContentAfter`],\n rootStyles[appearance],\n !disabled && appearance === 'outline' && rootStyles.outlineInteractive,\n !disabled && appearance === 'underline' && rootStyles.underlineInteractive,\n !disabled && filled && rootStyles.filledInteractive,\n filled && rootStyles.filled,\n !disabled && invalid && rootStyles.invalid,\n disabled && rootStyles.disabled,\n state.root.className,\n );\n\n // eslint-disable-next-line react-hooks/immutability\n state.input.className = mergeClasses(\n inputClassNames.input,\n useInputClassName(),\n inputStyles[size],\n state.contentBefore && inputStyles[`${size}WithContentBefore`],\n state.contentAfter && inputStyles[`${size}WithContentAfter`],\n disabled && inputStyles.disabled,\n state.input.className,\n );\n\n const contentClasses = [useContentClassName(), disabled && contentStyles.disabled, contentStyles[size]];\n if (state.contentBefore) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentBefore.className = mergeClasses(\n inputClassNames.contentBefore,\n ...contentClasses,\n state.contentBefore.className,\n );\n }\n if (state.contentAfter) {\n // eslint-disable-next-line react-hooks/immutability\n state.contentAfter.className = mergeClasses(\n inputClassNames.contentAfter,\n ...contentClasses,\n state.contentAfter.className,\n );\n }\n\n return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","shorthands","inputClassNames","root","input","contentBefore","contentAfter","fieldHeights","small","medium","large","horizontalPadding","spacingHorizontalSNudge","spacingHorizontalMNudge","spacingHorizontalM","spacingHorizontalXXS","combined","spacingHorizontalS","useRootClassName","display","alignItems","flexWrap","gap","borderRadius","borderRadiusMedium","position","boxSizing","verticalAlign","minHeight","body1","backgroundColor","colorNeutralBackground1","border","colorNeutralStroke1","borderBottomColor","colorNeutralStrokeAccessible","content","left","bottom","right","height","borderBottomLeftRadius","borderBottomRightRadius","borderBottom","colorCompoundBrandStroke","clipPath","transform","transitionProperty","transitionDuration","durationUltraFast","transitionDelay","curveAccelerateMid","durationNormal","curveDecelerateMid","colorCompoundBrandStrokePressed","outline","useRootStyles","caption1","body2","outlineInteractive","borderColor","colorNeutralStroke1Hover","colorNeutralStrokeAccessibleHover","colorNeutralStroke1Pressed","colorNeutralStrokeAccessiblePressed","underline","colorTransparentBackground","borderTopStyle","borderRightStyle","borderLeftStyle","underlineInteractive","filled","colorTransparentStroke","filledInteractive","colorTransparentStrokeInteractive","invalid","colorPaletteRedBorder2","colorNeutralBackground3","boxShadow","shadow2","disabled","cursor","colorNeutralStrokeDisabled","outlineStyle","smallWithContentBefore","paddingLeft","smallWithContentAfter","paddingRight","mediumWithContentBefore","mediumWithContentAfter","largeWithContentBefore","largeWithContentAfter","useInputClassName","alignSelf","flexGrow","minWidth","borderStyle","padding","color","colorNeutralForeground1","colorNeutralForeground4","opacity","fontFamily","fontSize","fontWeight","lineHeight","useInputElementStyles","colorNeutralForegroundDisabled","useContentClassName","colorNeutralForeground3","useContentStyles","useInputStyles_unstable","state","size","appearance","startsWith","rootStyles","inputStyles","contentStyles","className","contentClasses"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-input",
-  "version": "9.8.2",
+  "version": "9.8.4",
   "description": "Fluent UI React Input component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,11 +12,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-field": "^9.5.1",
-    "@fluentui/react-jsx-runtime": "^9.4.2",
+    "@fluentui/react-field": "^9.5.3",
+    "@fluentui/react-jsx-runtime": "^9.4.4",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.3",
+    "@fluentui/react-utilities": "^9.26.5",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },