@fluentui/react-input 9.0.0-beta.7 → 9.0.0-rc.2

package/lib/components/Input/Input.types.d.ts

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-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'>;
-};
-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'
-     */
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * 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.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';
-};
-/**
- * State used in rendering Input.
- */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<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;
-};

package/lib/components/Input/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Input';
-export * from './Input.types';
-export * from './renderInput';
-export * from './useInput';
-export * from './useInputStyles';

package/lib/components/Input/renderInput.d.ts

@@ -1,5 +0,0 @@
-import type { InputState } from './Input.types';
-/**
- * Render the final JSX of Input
- */
-export declare const renderInput_unstable: (state: InputState) => JSX.Element;

package/lib/components/Input/useInput.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { InputProps, InputState } from './Input.types';
-/**
- * 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.Ref<HTMLInputElement>) => InputState;

package/lib/components/Input/useInputStyles.d.ts

@@ -1,11 +0,0 @@
-import type { InputSlots, InputState } from './Input.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-/**
- * @deprecated Use `inputClassNames.root` instead.
- */
-export declare const inputClassName = "fui-Input";
-export declare const inputClassNames: SlotClassNames<InputSlots>;
-/**
- * Apply styling to the Input slots based on the state
- */
-export declare const useInputStyles_unstable: (state: InputState) => InputState;

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
-export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';

package/lib-commonjs/Input.d.ts

@@ -1 +0,0 @@
-export * from './components/Input/index';

package/lib-commonjs/components/Input/Input.d.ts

@@ -1,6 +0,0 @@
-import type { InputProps } from './Input.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * The Input component allows people to enter and edit text.
- */
-export declare const Input: ForwardRefComponent<InputProps>;

package/lib-commonjs/components/Input/Input.types.d.ts

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-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'>;
-};
-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'
-     */
-    appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * 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.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';
-};
-/**
- * State used in rendering Input.
- */
-export declare type InputState = Required<Pick<InputProps, 'appearance' | 'size'>> & ComponentState<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;
-};

package/lib-commonjs/components/Input/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Input';
-export * from './Input.types';
-export * from './renderInput';
-export * from './useInput';
-export * from './useInputStyles';

package/lib-commonjs/components/Input/renderInput.d.ts

@@ -1,5 +0,0 @@
-import type { InputState } from './Input.types';
-/**
- * Render the final JSX of Input
- */
-export declare const renderInput_unstable: (state: InputState) => JSX.Element;

package/lib-commonjs/components/Input/useInput.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import type { InputProps, InputState } from './Input.types';
-/**
- * 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.Ref<HTMLInputElement>) => InputState;

package/lib-commonjs/components/Input/useInputStyles.d.ts

@@ -1,11 +0,0 @@
-import type { InputSlots, InputState } from './Input.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-/**
- * @deprecated Use `inputClassNames.root` instead.
- */
-export declare const inputClassName = "fui-Input";
-export declare const inputClassNames: SlotClassNames<InputSlots>;
-/**
- * Apply styling to the Input slots based on the state
- */
-export declare const useInputStyles_unstable: (state: InputState) => InputState;

package/lib-commonjs/index.d.ts

@@ -1,2 +0,0 @@
-export { Input, inputClassName, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable, } from './Input';
-export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';