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

package/CHANGELOG.md

@@ -1,22 +1,119 @@
 # Change Log - @fluentui/react-input
 
-This log was last generated on Thu, 22 Jan 2026 16:12:37 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Jul 2026 17:34:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [9.72.9-experimental.component-base-hooks.20260122-49fc330360.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+## [9.74.3-experimental.esm.20260709-49ee7a20cf.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
-Thu, 22 Jan 2026 16:12:37 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.12..@fluentui/react-input_v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0)
+Thu, 09 Jul 2026 17:34:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.4..@fluentui/react-input_v9.74.3-experimental.esm.20260709-49ee7a20cf.0)
 
 ### Changes
 
-- Release 9.72.9-experimental.component-base-hooks.20260122-49fc330360 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-field to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-jsx-runtime to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-shared-contexts to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-theme to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
-- Bump @fluentui/react-utilities to v9.72.9-experimental.component-base-hooks.20260122-49fc330360.0 ([commit](https://github.com/microsoft/fluentui/commit/373001c3e19d022ef1fcf745ea96375cf4f3aff1) by beachball)
+- Release 9.74.3-experimental.esm.20260709-49ee7a20cf ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-field to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-theme to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+- Bump @fluentui/react-utilities to v9.74.3-experimental.esm.20260709-49ee7a20cf.0 ([commit](https://github.com/microsoft/fluentui/commit/175a26e0c520dd90a54578d1185a3b0b6c446e15) by beachball)
+
+## [9.8.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.4)
+
+Wed, 24 Jun 2026 11:09:45 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 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 #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)
+
+Wed, 01 Apr 2026 15:52:43 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.8.0..@fluentui/react-input_v9.8.1)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
+
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.8.0)
+
+Thu, 26 Mar 2026 08:12:50 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.16..@fluentui/react-input_v9.8.0)
+
+### Minor changes
+
+- feat: add base hooks for Input ([PR #35813](https://github.com/microsoft/fluentui/pull/35813) by dmytrokirpa@microsoft.com)
+
+## [9.7.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.16)
+
+Wed, 11 Mar 2026 09:22:22 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.15..@fluentui/react-input_v9.7.16)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
+
+## [9.7.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.15)
+
+Wed, 25 Feb 2026 13:32:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.14..@fluentui/react-input_v9.7.15)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
+## [9.7.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.14)
+
+Thu, 12 Feb 2026 10:46:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.13..@fluentui/react-input_v9.7.14)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
+## [9.7.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.13)
+
+Thu, 22 Jan 2026 17:06:56 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.7.12..@fluentui/react-input_v9.7.13)
+
+### Patches
+
+- Bump @fluentui/react-field to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
 
 ## [9.7.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.7.12)
 

package/dist/index.d.cts

@@ -0,0 +1,140 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { JSXElement } from '@fluentui/react-utilities';
+import type * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * The Input component allows people to enter and edit text.
+ */
+export declare const Input: ForwardRefComponent<InputProps>;
+
+/**
+ * Input props without design-specific props (appearance, size).
+ * Use this when building a base input that is unstyled or uses a custom design system.
+ */
+export declare type InputBaseProps = Omit<InputProps, 'appearance' | 'size'>;
+
+/**
+ * Input state without design-specific state (appearance, size).
+ */
+export declare type InputBaseState = Omit<InputState, 'appearance' | 'size'>;
+
+export declare const inputClassNames: SlotClassNames<InputSlots>;
+
+/**
+ * Data passed to the `onChange` callback when a user changes the input's value.
+ */
+export declare type InputOnChangeData = {
+    /** Updated input value from the user */
+    value: string;
+};
+
+export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & {
+    /** Input can't have children. */
+    children?: never;
+    /**
+     * Size of the input (changes the font size and spacing).
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Controls the colors and borders of the input.
+     * @default 'outline'
+     *
+     * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.
+     */
+    appearance?: 'outline' | 'underline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow';
+    /**
+     * Default value of the input. Provide this if the input should be an uncontrolled component
+     * which tracks its current state internally; otherwise, use `value`.
+     *
+     * (This prop is mutually exclusive with `value`.)
+     */
+    defaultValue?: string;
+    /**
+     * Current value of the input. Provide this if the input is a controlled component where you
+     * are maintaining its current state; otherwise, use `defaultValue`.
+     *
+     * (This prop is mutually exclusive with `defaultValue`.)
+     */
+    value?: string;
+    /**
+     * Called when the user changes the input's value.
+     */
+    onChange?: (ev: React_2.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;
+    /**
+     * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)
+     * based on the type of value the user will enter.
+     *
+     * Note that no custom styling is currently applied for alternative types, and some types may
+     * activate browser-default styling which does not match the Fluent design language.
+     *
+     * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an
+     * `<input>` element instead.)
+     * @default 'text'
+     */
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'date' | 'datetime-local' | 'month' | 'number' | 'time' | 'week';
+};
+
+export declare type InputSlots = {
+    /**
+     * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.
+     * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)
+     *
+     * The root slot receives the `className` and `style` specified directly on the `<Input>`.
+     * All other top-level native props will be applied to the primary slot, `input`.
+     */
+    root: NonNullable<Slot<'span'>>;
+    /**
+     * The actual `<input>` element. `type="text"` will be automatically applied unless overridden.
+     *
+     * This is the "primary" slot, so native props specified directly on the `<Input>` will go here
+     * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will
+     * also go here.
+     */
+    input: NonNullable<Slot<'input'>>;
+    /** Element before the input text, within the input border */
+    contentBefore?: Slot<'span'>;
+    /** Element after the input text, within the input border */
+    contentAfter?: Slot<'span'>;
+};
+
+/**
+ * State used in rendering Input.
+ */
+export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;
+
+/**
+ * Render the final JSX of Input
+ */
+export declare const renderInput_unstable: (state: InputBaseState) => JSXElement;
+
+/**
+ * Create the state required to render Input.
+ *
+ * The returned state can be modified with hooks such as useInputStyles_unstable,
+ * before being passed to renderInput_unstable.
+ *
+ * @param props - props from this instance of Input
+ * @param ref - reference to `<input>` element of Input
+ */
+export declare const useInput_unstable: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState;
+
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @param props - User provided props to the Input component.
+ * @param ref - User provided ref to be passed to the Input component.
+ */
+export declare const useInputBase_unstable: (props: InputBaseProps, ref: React_2.Ref<HTMLInputElement>) => InputBaseState;
+
+/**
+ * Apply styling to the Input slots based on the state
+ */
+export declare const useInputStyles_unstable: (state: InputState) => InputState;
+
+export { }

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import * as React_2 from 'react';
+import type * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -11,6 +11,17 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
  */
 export declare const Input: ForwardRefComponent<InputProps>;
 
+/**
+ * Input props without design-specific props (appearance, size).
+ * Use this when building a base input that is unstyled or uses a custom design system.
+ */
+export declare type InputBaseProps = Omit<InputProps, 'appearance' | 'size'>;
+
+/**
+ * Input state without design-specific state (appearance, size).
+ */
+export declare type InputBaseState = Omit<InputState, 'appearance' | 'size'>;
+
 export declare const inputClassNames: SlotClassNames<InputSlots>;
 
 /**
@@ -99,7 +110,7 @@ export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'
 /**
  * Render the final JSX of Input
  */
-export declare const renderInput_unstable: (state: InputState) => JSXElement;
+export declare const renderInput_unstable: (state: InputBaseState) => JSXElement;
 
 /**
  * Create the state required to render Input.
@@ -112,6 +123,15 @@ export declare const renderInput_unstable: (state: InputState) => JSXElement;
  */
 export declare const useInput_unstable: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState;
 
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @param props - User provided props to the Input component.
+ * @param ref - User provided ref to be passed to the Input component.
+ */
+export declare const useInputBase_unstable: (props: InputBaseProps, ref: React_2.Ref<HTMLInputElement>) => InputBaseState;
+
 /**
  * Apply styling to the Input slots based on the state
  */

package/lib/Input.js

@@ -1 +1 @@
-export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './components/Input/index';
+export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, useInputBase_unstable } from "./components/Input/index.js";

package/lib/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type { InputOnChangeData, InputProps, InputSlots, InputState } from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Input.ts"],"sourcesContent":["export type {\n  InputOnChangeData,\n  InputProps,\n  InputSlots,\n  InputState,\n  InputBaseProps,\n  InputBaseState,\n} from './components/Input/index';\nexport {\n  Input,\n  inputClassNames,\n  renderInput_unstable,\n  useInputStyles_unstable,\n  useInput_unstable,\n  useInputBase_unstable,\n} from './components/Input/index';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable","useInputBase_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,8BAA2B"}

package/lib/components/Input/Input.js

@@ -1,9 +1,9 @@
 'use client';
-import * as React from 'react';
-import { useInput_unstable } from './useInput';
-import { renderInput_unstable } from './renderInput';
-import { useInputStyles_unstable } from './useInputStyles.styles';
-import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from "react";
+import { useInput_unstable } from "./useInput.js";
+import { renderInput_unstable } from "./renderInput.js";
+import { useInputStyles_unstable } from "./useInputStyles.styles.js";
+import { useCustomStyleHook_unstable } from "@fluentui/react-shared-contexts";
 /**
  * The Input component allows people to enter and edit text.
  */ export const Input = /*#__PURE__*/ React.forwardRef((props, ref)=>{

package/lib/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,0BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useInput_unstable } from './useInput';\nimport { renderInput_unstable } from './renderInput';\nimport { useInputStyles_unstable } from './useInputStyles.styles';\nimport type { InputProps } from './Input.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The Input component allows people to enter and edit text.\n */\nexport const Input: ForwardRefComponent<InputProps> = React.forwardRef((props, ref) => {\n  const state = useInput_unstable(props, ref);\n\n  useInputStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useInputStyles_unstable')(state);\n\n  return renderInput_unstable(state);\n});\n\nInput.displayName = 'Input';\n"],"names":["React","useInput_unstable","renderInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","Input","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ,gBAAa;AAC/C,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,6BAA0B;AAGlE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IAEvCL,wBAAwBM;IAExBL,4BAA4B,2BAA2BK;IAEvD,OAAOP,qBAAqBO;AAC9B,GAAG;AAEHJ,MAAMK,WAAW,GAAG"}

package/lib/components/Input/Input.types.js

@@ -1 +1,3 @@
-import * as React from 'react';
+/**
+ * Data passed to the `onChange` callback when a user changes the input's value.
+ */ export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/Input.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type InputSlots = {\n  /**\n   * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n   * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Input>`.\n   * All other top-level native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n   *\n   * This is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n   * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will\n   * also go here.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /** Element before the input text, within the input border */\n  contentBefore?: Slot<'span'>;\n\n  /** Element after the input text, within the input border */\n  contentAfter?: Slot<'span'>;\n};\n\nexport type InputProps = Omit<\n  ComponentProps<Partial<InputSlots>, 'input'>,\n  // `children` is unsupported. The rest of these native props have customized definitions.\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> & {\n  /** Input can't have children. */\n  children?: never;\n\n  /**\n   * Size of the input (changes the font size and spacing).\n   * @default 'medium'\n   */\n  // This name overlaps with the native `size` prop, but that prop isn't very useful in practice\n  // (we could add `htmlSize` for the native functionality if someone needs it)\n  // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Controls the colors and borders of the input.\n   * @default 'outline'\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?:\n    | 'outline'\n    | 'underline'\n    | 'filled-darker'\n    | 'filled-lighter'\n    | 'filled-darker-shadow'\n    | 'filled-lighter-shadow';\n\n  /**\n   * Default value of the input. Provide this if the input should be an uncontrolled component\n   * which tracks its current state internally; otherwise, use `value`.\n   *\n   * (This prop is mutually exclusive with `value`.)\n   */\n  defaultValue?: string;\n\n  /**\n   * Current value of the input. Provide this if the input is a controlled component where you\n   * are maintaining its current state; otherwise, use `defaultValue`.\n   *\n   * (This prop is mutually exclusive with `defaultValue`.)\n   */\n  value?: string;\n\n  /**\n   * Called when the user changes the input's value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;\n\n  /**\n   * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\n   * based on the type of value the user will enter.\n   *\n   * Note that no custom styling is currently applied for alternative types, and some types may\n   * activate browser-default styling which does not match the Fluent design language.\n   *\n   * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n   * `<input>` element instead.)\n   * @default 'text'\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'datetime-local'\n    | 'month'\n    | 'number'\n    | 'time'\n    | 'week';\n};\n\n/**\n * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;\n\n/**\n * Data passed to the `onChange` callback when a user changes the input's value.\n */\nexport type InputOnChangeData = {\n  /** Updated input value from the user */\n  value: string;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Input/Input.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type InputSlots = {\n  /**\n   * Wrapper element which visually appears to be the input and is used for borders, focus styling, etc.\n   * (A wrapper is needed to properly position `contentBefore` and `contentAfter` relative to `input`.)\n   *\n   * The root slot receives the `className` and `style` specified directly on the `<Input>`.\n   * All other top-level native props will be applied to the primary slot, `input`.\n   */\n  root: NonNullable<Slot<'span'>>;\n\n  /**\n   * The actual `<input>` element. `type=\"text\"` will be automatically applied unless overridden.\n   *\n   * This is the \"primary\" slot, so native props specified directly on the `<Input>` will go here\n   * (except `className` and `style`, which go to the `root` slot). The top-level `ref` will\n   * also go here.\n   */\n  input: NonNullable<Slot<'input'>>;\n\n  /** Element before the input text, within the input border */\n  contentBefore?: Slot<'span'>;\n\n  /** Element after the input text, within the input border */\n  contentAfter?: Slot<'span'>;\n};\n\nexport type InputProps = Omit<\n  ComponentProps<Partial<InputSlots>, 'input'>,\n  // `children` is unsupported. The rest of these native props have customized definitions.\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> & {\n  /** Input can't have children. */\n  children?: never;\n\n  /**\n   * Size of the input (changes the font size and spacing).\n   * @default 'medium'\n   */\n  // This name overlaps with the native `size` prop, but that prop isn't very useful in practice\n  // (we could add `htmlSize` for the native functionality if someone needs it)\n  // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/size\n  size?: 'small' | 'medium' | 'large';\n\n  /**\n   * Controls the colors and borders of the input.\n   * @default 'outline'\n   *\n   * Note: 'filled-darker-shadow' and 'filled-lighter-shadow' are deprecated and will be removed in the future.\n   */\n  appearance?:\n    | 'outline'\n    | 'underline'\n    | 'filled-darker'\n    | 'filled-lighter'\n    | 'filled-darker-shadow'\n    | 'filled-lighter-shadow';\n\n  /**\n   * Default value of the input. Provide this if the input should be an uncontrolled component\n   * which tracks its current state internally; otherwise, use `value`.\n   *\n   * (This prop is mutually exclusive with `value`.)\n   */\n  defaultValue?: string;\n\n  /**\n   * Current value of the input. Provide this if the input is a controlled component where you\n   * are maintaining its current state; otherwise, use `defaultValue`.\n   *\n   * (This prop is mutually exclusive with `defaultValue`.)\n   */\n  value?: string;\n\n  /**\n   * Called when the user changes the input's value.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n  onChange?: (ev: React.ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void;\n\n  /**\n   * An input can have different text-based [types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types)\n   * based on the type of value the user will enter.\n   *\n   * Note that no custom styling is currently applied for alternative types, and some types may\n   * activate browser-default styling which does not match the Fluent design language.\n   *\n   * (For non-text-based types such as `button` or `checkbox`, use the appropriate component or an\n   * `<input>` element instead.)\n   * @default 'text'\n   */\n  type?:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'url'\n    | 'date'\n    | 'datetime-local'\n    | 'month'\n    | 'number'\n    | 'time'\n    | 'week';\n};\n\n/**\n * Input props without design-specific props (appearance, size).\n * Use this when building a base input that is unstyled or uses a custom design system.\n */\nexport type InputBaseProps = Omit<InputProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering Input.\n */\nexport type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<InputSlots>;\n\n/**\n * Input state without design-specific state (appearance, size).\n */\nexport type InputBaseState = Omit<InputState, 'appearance' | 'size'>;\n\n/**\n * Data passed to the `onChange` callback when a user changes the input's value.\n */\nexport type InputOnChangeData = {\n  /** Updated input value from the user */\n  value: string;\n};\n"],"names":[],"mappings":"AA4HA;;CAEC,GACD,WAGE"}

package/lib/components/Input/index.js

@@ -1,4 +1,4 @@
-export { Input } from './Input';
-export { renderInput_unstable } from './renderInput';
-export { useInput_unstable } from './useInput';
-export { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';
+export { Input } from "./Input.js";
+export { renderInput_unstable } from "./renderInput.js";
+export { useInput_unstable, useInputBase_unstable } from "./useInput.js";
+export { inputClassNames, useInputStyles_unstable } from "./useInputStyles.styles.js";

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","inputClassNames","useInputStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Input/index.ts"],"sourcesContent":["export { Input } from './Input';\nexport type {\n  InputBaseProps,\n  InputBaseState,\n  InputOnChangeData,\n  InputProps,\n  InputSlots,\n  InputState,\n} from './Input.types';\nexport { renderInput_unstable } from './renderInput';\nexport { useInput_unstable, useInputBase_unstable } from './useInput';\nexport { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';\n"],"names":["Input","renderInput_unstable","useInput_unstable","useInputBase_unstable","inputClassNames","useInputStyles_unstable"],"mappings":"AAAA,SAASA,KAAK,QAAQ,aAAU;AAShC,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,gBAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,6BAA0B"}

package/lib/components/Input/renderInput.js

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

package/lib/components/Input/renderInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState): JSXElement => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IACxB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;;;AAGhD,EAAE"}
+{"version":3,"sources":["../src/components/Input/renderInput.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { InputBaseState, InputSlots } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputBaseState): JSXElement => {\n  assertSlots<InputSlots>(state);\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && <state.contentAfter />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderInput_unstable","state","root","contentBefore","input","contentAfter"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC;IACnCF,YAAwBE;IACxB,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBAAI,KAACJ,MAAMI,YAAY;;;AAGhD,EAAE"}

package/lib/components/Input/useInput.js

@@ -1,8 +1,7 @@
 'use client';
-import * as React from 'react';
-import { useFieldControlProps_unstable } from '@fluentui/react-field';
-import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
-import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
+import { useFieldControlProps_unstable } from "@fluentui/react-field";
+import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from "@fluentui/react-utilities";
+import { useOverrides_unstable as useOverrides } from "@fluentui/react-shared-contexts";
 /**
  * Create the state required to render Input.
  *
@@ -12,43 +11,54 @@ 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', onChange } = props;
+    const { size = 'medium', appearance = (_overrides_inputDefaultAppearance = overrides.inputDefaultAppearance) !== null && _overrides_inputDefaultAppearance !== void 0 ? _overrides_inputDefaultAppearance : 'outline', ...baseProps } = props;
     if (process.env.NODE_ENV !== 'production' && (appearance === 'filled-darker-shadow' || appearance === 'filled-lighter-shadow')) {
         // eslint-disable-next-line no-console
         console.error("The 'filled-darker-shadow' and 'filled-lighter-shadow' appearances are deprecated and will be removed in the" + ' future.');
     }
+    const state = useInputBase_unstable(baseProps, ref);
+    return {
+        size,
+        appearance,
+        ...state
+    };
+};
+/**
+ * Base hook for Input component, which manages state related to controlled/uncontrolled value,
+ * slot structure, and onChange handling. This hook excludes design-specific props (appearance, size).
+ *
+ * @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 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: [
-            'size',
             'onChange',
             'value',
             'defaultValue'
         ]
     });
     const state = {
-        size,
-        appearance,
         components: {
             root: 'span',
             input: 'input',
             contentBefore: 'span',
             contentAfter: 'span'
         },
-        input: slot.always(props.input, {
+        input: slot.always(fieldControlProps.input, {
             defaultProps: {
                 type: 'text',
                 ref,
@@ -56,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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { 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', onChange } = 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 [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: ['size', 'onChange', 'value', 'defaultValue'],\n  });\n\n  const state: InputState = {\n    size,\n    appearance,\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":["React","useFieldControlProps_unstable","getPartitionedNativeProps","useControllableState","useEventCallback","slot","useOverrides_unstable","useOverrides","useInput_unstable","props","ref","supportsLabelFor","supportsRequired","supportsSize","overrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","state","defaultState","defaultValue","initialState","nativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","always","defaultProps","type","primary","elementType","optional","ev","newValue","target"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,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,EAAEI,QAAQ,EAAE,GAAGT;IAElG,IACEU,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAsB,GAC/E;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGtB,qBAAqB;QAC7CuB,OAAOjB,MAAMe,KAAK;QAClBG,cAAclB,MAAMmB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAc5B,0BAA0B;QAC5CO;QACAsB,oBAAoB;QACpBC,mBAAmB;YAAC;YAAQ;YAAY;YAAS;SAAe;IAClE;IAEA,MAAMN,QAAoB;QACxBX;QACAC;QACAiB,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAO9B,KAAKiC,MAAM,CAAC7B,MAAM0B,KAAK,EAAE;YAC9BI,cAAc;gBACZC,MAAM;gBACN9B;gBACA,GAAGoB,YAAYW,OAAO;YACxB;YACAC,aAAa;QACf;QACAL,cAAchC,KAAKsC,QAAQ,CAAClC,MAAM4B,YAAY,EAAE;YAAEK,aAAa;QAAO;QACtEN,eAAe/B,KAAKsC,QAAQ,CAAClC,MAAM2B,aAAa,EAAE;YAAEM,aAAa;QAAO;QACxER,MAAM7B,KAAKiC,MAAM,CAAC7B,MAAMyB,IAAI,EAAE;YAC5BK,cAAcT,YAAYI,IAAI;YAC9BQ,aAAa;QACf;IACF;IAEAhB,MAAMS,KAAK,CAACX,KAAK,GAAGA;IACpBE,MAAMS,KAAK,CAACjB,QAAQ,GAAGd,iBAAiBwC,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAACtB,KAAK;QAChCN,qBAAAA,+BAAAA,SAAW0B,IAAI;YAAEpB,OAAOqB;QAAS;QACjCpB,SAASoB;IACX;IAEA,OAAOnB;AACT,EAAE"}
+{"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

@@ -1,7 +1,7 @@
 'use client';
 
-import { tokens, typographyStyles } from '@fluentui/react-theme';
-import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from "@fluentui/react-theme";
+import { __resetStyles, __styles, mergeClasses, shorthands } from "@griffel/react";
 export const inputClassNames = {
   root: 'fui-Input',
   input: 'fui-Input__input',
@@ -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;