diff --git a/change/@fluentui-react-input-e2a5a63e-40cf-40e8-a33f-b83b14c0058b.json b/change/@fluentui-react-input-e2a5a63e-40cf-40e8-a33f-b83b14c0058b.json new file mode 100644 index 00000000000000..24c73c90f153fe --- /dev/null +++ b/change/@fluentui-react-input-e2a5a63e-40cf-40e8-a33f-b83b14c0058b.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add base hooks for Input", + "packageName": "@fluentui/react-input", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-input/library/src/components/Input/Input.types.ts b/packages/react-components/react-input/library/src/components/Input/Input.types.ts index 2afe13a355f8c4..3b91de4697c812 100644 --- a/packages/react-components/react-input/library/src/components/Input/Input.types.ts +++ b/packages/react-components/react-input/library/src/components/Input/Input.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities'; export type InputSlots = { /** @@ -106,11 +106,22 @@ export type InputProps = Omit< | 'week'; }; +/** + * 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 type InputBaseProps = DistributiveOmit; + /** * State used in rendering Input. */ export type InputState = Required> & ComponentState; +/** + * Input state without design-specific state (appearance, size). + */ +export type InputBaseState = DistributiveOmit; + /** * Data passed to the `onChange` callback when a user changes the input's value. */ diff --git a/packages/react-components/react-input/library/src/components/Input/index.ts b/packages/react-components/react-input/library/src/components/Input/index.ts index d4ee29a7f63653..f1d4e289e499ab 100644 --- a/packages/react-components/react-input/library/src/components/Input/index.ts +++ b/packages/react-components/react-input/library/src/components/Input/index.ts @@ -1,5 +1,12 @@ export { Input } from './Input'; -export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input.types'; +export type { + InputBaseProps, + InputBaseState, + InputOnChangeData, + InputProps, + InputSlots, + InputState, +} from './Input.types'; export { renderInput_unstable } from './renderInput'; -export { useInput_unstable } from './useInput'; +export { useInput_unstable, useInputBase_unstable } from './useInput'; export { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles'; diff --git a/packages/react-components/react-input/library/src/components/Input/useInput.ts b/packages/react-components/react-input/library/src/components/Input/useInput.ts index 3436ec5f1333d4..d93522375ee81a 100644 --- a/packages/react-components/react-input/library/src/components/Input/useInput.ts +++ b/packages/react-components/react-input/library/src/components/Input/useInput.ts @@ -3,7 +3,7 @@ import * as React from 'react'; import { useFieldControlProps_unstable } from '@fluentui/react-field'; import { getPartitionedNativeProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities'; -import type { InputProps, InputState } from './Input.types'; +import type { InputBaseProps, InputBaseState, InputProps, InputState } from './Input.types'; import { useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts'; /** @@ -20,7 +20,7 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref): InputBaseState => { + const { onChange } = props; + const [value, setValue] = useControllableState({ state: props.value, defaultState: props.defaultValue, @@ -42,12 +61,10 @@ export const useInput_unstable = (props: InputProps, ref: React.Ref