Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
+2058
View File
File diff suppressed because it is too large Load Diff
+15
View File
@@ -0,0 +1,15 @@
@fluentui/react-input
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
+35
View File
@@ -0,0 +1,35 @@
# @fluentui/react-input
**React Input components for [Fluent UI React](https://react.fluentui.dev)**
Inputs give people a way to enter and edit text.
### Usage
Import Input:
```js
import { Input } from '@fluentui/react-components';
```
#### Examples
```jsx
<Input defaultValue="Hello, World!" />
<Input value={value} onChange={onInputChange} />
```
See [Fluent UI Storybook](https://react.fluentui.dev/) for more detailed usage examples.
Alternatively, run Storybook locally with:
1. `yarn start`
2. Select `react-input` from the list.
### Specification
See [Spec.md](./Spec.md)
### Upgrade Guide
If you're upgrading to Fluent UI v9 see the upgrade guide in [Storybook](https://react.fluentui.dev/) under Concepts > Upgrading.
+121
View File
@@ -0,0 +1,121 @@
/// <reference types="react" />
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import * 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>;
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: InputState) => JSX.Element;
/**
* 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;
/**
* Apply styling to the Input slots based on the state
*/
export declare const useInputStyles_unstable: (state: InputState) => InputState;
export { }
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Input: function() {
return _index.Input;
},
inputClassNames: function() {
return _index.inputClassNames;
},
renderInput_unstable: function() {
return _index.renderInput_unstable;
},
useInputStyles_unstable: function() {
return _index.useInputStyles_unstable;
},
useInput_unstable: function() {
return _index.useInput_unstable;
}
});
const _index = require("./components/Input/index");
+1
View File
@@ -0,0 +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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAEEA,KAAK;eAALA,YAAK;;IACLC,eAAe;eAAfA,sBAAe;;IACfC,oBAAoB;eAApBA,2BAAoB;;IACpBC,uBAAuB;eAAvBA,8BAAuB;;IACvBC,iBAAiB;eAAjBA,wBAAiB;;;uBACZ"}
@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Input", {
enumerable: true,
get: function() {
return Input;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useInput = require("./useInput");
const _renderInput = require("./renderInput");
const _useInputStylesstyles = require("./useInputStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const Input = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useInput.useInput_unstable)(props, ref);
(0, _useInputStylesstyles.useInputStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useInputStyles_unstable')(state);
return (0, _renderInput.renderInput_unstable)(state);
});
Input.displayName = 'Input';
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * 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":["Input","React","forwardRef","props","ref","state","useInput_unstable","useInputStyles_unstable","useCustomStyleHook_unstable","renderInput_unstable","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAWaA;;;eAAAA;;;;iEAXU;0BACW;6BACG;sCACG;qCAGI;AAKrC,MAAMA,QAAAA,WAAAA,GAAyCC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQC,IAAAA,2BAAAA,EAAkBH,OAAOC;IAEvCG,IAAAA,6CAAAA,EAAwBF;IAExBG,IAAAA,gDAAAA,EAA4B,2BAA2BH;IAEvD,OAAOI,IAAAA,iCAAAA,EAAqBJ;AAC9B;AAEAL,MAAMU,WAAW,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +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":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Input: function() {
return _Input.Input;
},
inputClassNames: function() {
return _useInputStylesstyles.inputClassNames;
},
renderInput_unstable: function() {
return _renderInput.renderInput_unstable;
},
useInputStyles_unstable: function() {
return _useInputStylesstyles.useInputStyles_unstable;
},
useInput_unstable: function() {
return _useInput.useInput_unstable;
}
});
const _Input = require("./Input");
const _renderInput = require("./renderInput");
const _useInput = require("./useInput");
const _useInputStylesstyles = require("./useInputStyles.styles");
@@ -0,0 +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","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAILC,eAAe;eAAfA,qCAAe;;IAFfC,oBAAoB;eAApBA,iCAAoB;;IAEHC,uBAAuB;eAAvBA,6CAAuB;;IADxCC,iBAAiB;eAAjBA,2BAAiB;;;uBAHJ;6BAEe;0BACH;sCACuB"}
@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderInput_unstable", {
enumerable: true,
get: function() {
return renderInput_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderInput_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.contentBefore && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.contentBefore, {}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(state.input, {}),
state.contentAfter && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.contentAfter, {})
]
});
};
@@ -0,0 +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 { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\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":["renderInput_unstable","state","assertSlots","_jsxs","root","contentBefore","_jsx","input","contentAfter"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;4BARb;gCAE4B;AAMrB,MAAMA,uBAAuB,CAACC;IACnCC,IAAAA,2BAAAA,EAAwBD;IACxB,OAAA,WAAA,GACEE,IAAAA,gBAAA,EAACF,MAAMG,IAAI,EAAA;;YACRH,MAAMI,aAAa,IAAA,WAAA,GAAIC,IAAAA,eAAA,EAACL,MAAMI,aAAa,EAAA,CAAA;0BAC5CC,IAAAA,eAAA,EAACL,MAAMM,KAAK,EAAA,CAAA;YACXN,MAAMO,YAAY,IAAA,WAAA,GAAIF,IAAAA,eAAA,EAACL,MAAMO,YAAY,EAAA,CAAA;;;AAGhD"}
@@ -0,0 +1,81 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useInput_unstable", {
enumerable: true,
get: function() {
return useInput_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
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', onChange } = 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 [value, setValue] = (0, _reactutilities.useControllableState)({
state: props.value,
defaultState: props.defaultValue,
initialState: ''
});
const nativeProps = (0, _reactutilities.getPartitionedNativeProps)({
props,
primarySlotTagName: 'input',
excludedPropNames: [
'size',
'onChange',
'value',
'defaultValue'
]
});
const state = {
size,
appearance,
components: {
root: 'span',
input: 'input',
contentBefore: 'span',
contentAfter: 'span'
},
input: _reactutilities.slot.always(props.input, {
defaultProps: {
type: 'text',
ref,
...nativeProps.primary
},
elementType: 'input'
}),
contentAfter: _reactutilities.slot.optional(props.contentAfter, {
elementType: 'span'
}),
contentBefore: _reactutilities.slot.optional(props.contentBefore, {
elementType: 'span'
}),
root: _reactutilities.slot.always(props.root, {
defaultProps: nativeProps.root,
elementType: 'span'
})
};
state.input.value = value;
state.input.onChange = (0, _reactutilities.useEventCallback)((ev)=>{
const newValue = ev.target.value;
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
value: newValue
});
setValue(newValue);
});
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["import * 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":["useInput_unstable","props","ref","useFieldControlProps_unstable","supportsLabelFor","supportsRequired","supportsSize","overrides","useOverrides","size","appearance","inputDefaultAppearance","onChange","process","env","NODE_ENV","console","error","value","setValue","useControllableState","state","defaultState","defaultValue","initialState","nativeProps","getPartitionedNativeProps","primarySlotTagName","excludedPropNames","components","root","input","contentBefore","contentAfter","slot","always","defaultProps","type","primary","elementType","optional","useEventCallback","ev","newValue","target"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAeaA;;;eAAAA;;;;iEAfU;4BACuB;gCAC0C;qCAElC;AAW/C,MAAMA,oBAAoB,CAACC,OAAmBC;IACnDD,QAAQE,IAAAA,yCAAAA,EAA8BF,OAAO;QAAEG,kBAAkB;QAAMC,kBAAkB;QAAMC,cAAc;IAAK;IAElH,MAAMC,YAAYC,IAAAA,0CAAAA;QAEoBD;IAAtC,MAAM,EAAEE,OAAO,QAAQ,EAAEC,aAAaH,CAAAA,oCAAAA,UAAUI,sBAAsB,AAAtBA,MAAsB,QAAhCJ,sCAAAA,KAAAA,IAAAA,oCAAoC,SAAS,EAAEK,QAAQ,EAAE,GAAGX;IAElG,IACEY,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACxBL,CAAAA,eAAe,0BAA0BA,eAAe,uBAAA,GACzD;QACA,sCAAsC;QACtCM,QAAQC,KAAK,CACX,iHACE;IAEN;IAEA,MAAM,CAACC,OAAOC,SAAS,GAAGC,IAAAA,oCAAAA,EAAqB;QAC7CC,OAAOpB,MAAMiB,KAAK;QAClBI,cAAcrB,MAAMsB,YAAY;QAChCC,cAAc;IAChB;IAEA,MAAMC,cAAcC,IAAAA,yCAAAA,EAA0B;QAC5CzB;QACA0B,oBAAoB;QACpBC,mBAAmB;YAAC;YAAQ;YAAY;YAAS;SAAe;IAClE;IAEA,MAAMP,QAAoB;QACxBZ;QACAC;QACAmB,YAAY;YACVC,MAAM;YACNC,OAAO;YACPC,eAAe;YACfC,cAAc;QAChB;QACAF,OAAOG,oBAAAA,CAAKC,MAAM,CAAClC,MAAM8B,KAAK,EAAE;YAC9BK,cAAc;gBACZC,MAAM;gBACNnC;gBACA,GAAGuB,YAAYa,OAAO;YACxB;YACAC,aAAa;QACf;QACAN,cAAcC,oBAAAA,CAAKM,QAAQ,CAACvC,MAAMgC,YAAY,EAAE;YAAEM,aAAa;QAAO;QACtEP,eAAeE,oBAAAA,CAAKM,QAAQ,CAACvC,MAAM+B,aAAa,EAAE;YAAEO,aAAa;QAAO;QACxET,MAAMI,oBAAAA,CAAKC,MAAM,CAAClC,MAAM6B,IAAI,EAAE;YAC5BM,cAAcX,YAAYK,IAAI;YAC9BS,aAAa;QACf;IACF;IAEAlB,MAAMU,KAAK,CAACb,KAAK,GAAGA;IACpBG,MAAMU,KAAK,CAACnB,QAAQ,GAAG6B,IAAAA,gCAAAA,EAAiBC,CAAAA;QACtC,MAAMC,WAAWD,GAAGE,MAAM,CAAC1B,KAAK;QAChCN,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAW8B,IAAI;YAAExB,OAAOyB;QAAS;QACjCxB,SAASwB;IACX;IAEA,OAAOtB;AACT"}
@@ -0,0 +1,490 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
inputClassNames: function() {
return inputClassNames;
},
useInputStyles_unstable: function() {
return useInputStyles_unstable;
}
});
const _reacttheme = require("@fluentui/react-theme");
const _react = require("@griffel/react");
const inputClassNames = {
root: 'fui-Input',
input: 'fui-Input__input',
contentBefore: 'fui-Input__contentBefore',
contentAfter: 'fui-Input__contentAfter'
};
// TODO(sharing) should these be shared somewhere?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
const horizontalPadding = {
root: {
small: _reacttheme.tokens.spacingHorizontalSNudge,
medium: _reacttheme.tokens.spacingHorizontalMNudge,
large: _reacttheme.tokens.spacingHorizontalM
},
input: {
small: _reacttheme.tokens.spacingHorizontalXXS,
medium: _reacttheme.tokens.spacingHorizontalXXS,
large: _reacttheme.tokens.spacingHorizontalSNudge
},
combined: {
small: _reacttheme.tokens.spacingHorizontalS,
medium: _reacttheme.tokens.spacingHorizontalM,
large: `calc(${_reacttheme.tokens.spacingHorizontalM} + ${_reacttheme.tokens.spacingHorizontalSNudge})`
}
};
const useRootClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1oeeo9n", "r9sxh5", {
r: [
".r1oeeo9n{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}",
".r1oeeo9n::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
".r1oeeo9n:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
".r1oeeo9n:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".r1oeeo9n:focus-within{outline:2px solid transparent;}",
".r9sxh5{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}",
".r9sxh5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}",
".r9sxh5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}",
".r9sxh5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}",
".r9sxh5:focus-within{outline:2px solid transparent;}"
],
s: [
"@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r9sxh5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}",
"@media screen and (prefers-reduced-motion: reduce){.r9sxh5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"
]
});
const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
sshi5w: "f1pha7fy",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
medium: {},
large: {
sshi5w: "f1w5jphr",
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1eyhf9v"
},
outline: {},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: [
"f1ub3y4t",
"f1m52nbi"
],
oetu4i: "f1l4zc64",
gg5e9n: [
"f1m52nbi",
"f1ub3y4t"
],
Drbcw7: "f8vnjqi",
udz0bu: [
"fz1etlk",
"f1hc16gm"
],
Be8ivqh: "f1klwx88",
ofdepl: [
"f1hc16gm",
"fz1etlk"
]
},
underline: {
De3pzq: "f1c21dwh",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779",
icvyot: "f1ern45e",
vrafjx: [
"f1n71otn",
"f1deefiw"
],
wvpqe5: [
"f1deefiw",
"f1n71otn"
],
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
B1piin3: [
"f15yvnhg",
"f1n6gb5g"
]
},
underlineInteractive: {
oetu4i: "f1l4zc64",
Be8ivqh: "f1klwx88",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "f2ale1x"
},
filled: {
g2u3we: "fghlq4f",
h3c5rm: [
"f1gn591s",
"fjscplz"
],
B9xav0g: "fb073pr",
zhjwy3: [
"fjscplz",
"f1gn591s"
]
},
filledInteractive: {
q7v0qe: "ftmjh5b",
kmh5ft: [
"f17blpuu",
"fsrcdbj"
],
nagaa4: "f1tpwn32",
B1yhkcb: [
"fsrcdbj",
"f17blpuu"
]
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: [
"fcee079",
"fmyw78r"
],
hhx65j: "f1fgmyf4",
Bxowmz0: [
"fmyw78r",
"fcee079"
]
},
"filled-darker": {
De3pzq: "f16xq7d1"
},
"filled-lighter": {
De3pzq: "fxugw4r"
},
"filled-darker-shadow": {
De3pzq: "f16xq7d1",
E5pizo: "fyed02w"
},
"filled-lighter-shadow": {
De3pzq: "fxugw4r",
E5pizo: "fyed02w"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: [
"f15xbau",
"fy0fskl"
],
B9xav0g: "f4ikngz",
zhjwy3: [
"fy0fskl",
"f15xbau"
],
Bjwas2f: "fg455y9",
Bn1d65q: [
"f1rvyvqg",
"f14g86mu"
],
Bxeuatn: "f1cwzwz",
n51gp8: [
"f14g86mu",
"f1rvyvqg"
],
Bsft5z2: "fhr9occ",
Bduesf4: "f99w1ws"
},
smallWithContentBefore: {
uwmqm3: [
"fk8j09s",
"fdw0yi8"
]
},
smallWithContentAfter: {
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
mediumWithContentBefore: {
uwmqm3: [
"f1ng84yb",
"f11gcy0p"
]
},
mediumWithContentAfter: {
z189sj: [
"f11gcy0p",
"f1ng84yb"
]
},
largeWithContentBefore: {
uwmqm3: [
"f1uw59to",
"fw5db7e"
]
},
largeWithContentAfter: {
z189sj: [
"fw5db7e",
"f1uw59to"
]
}
}, {
d: [
".f1pha7fy{min-height:24px;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fy9rknc{font-size:var(--fontSizeBase200);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".fwrc4pm{line-height:var(--lineHeightBase200);}",
".f1w5jphr{min-height:40px;}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
[
".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
[
".fokr779{border-radius:0;}",
{
p: -1
}
],
".f1ern45e{border-top-style:none;}",
".f1n71otn{border-right-style:none;}",
".f1deefiw{border-left-style:none;}",
".f1n6gb5g::after{left:0;}",
".f15yvnhg::after{right:0;}",
[
".f2ale1x::after{border-radius:0;}",
{
p: -1
}
],
".fghlq4f{border-top-color:var(--colorTransparentStroke);}",
".f1gn591s{border-right-color:var(--colorTransparentStroke);}",
".fjscplz{border-left-color:var(--colorTransparentStroke);}",
".fb073pr{border-bottom-color:var(--colorTransparentStroke);}",
".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}",
".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}",
".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}",
".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}",
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
".fyed02w{box-shadow:var(--shadow2);}",
".fdrzuqr{cursor:not-allowed;}",
".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}",
".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}",
".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}",
".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}",
".fhr9occ::after{content:unset;}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}",
".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}",
".f1uw59to{padding-left:var(--spacingHorizontalM);}",
".fw5db7e{padding-right:var(--spacingHorizontalM);}"
],
h: [
".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}",
".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}",
".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}",
".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}",
".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}",
".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}",
".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}",
".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"
],
a: [
".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}",
".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}",
".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}",
".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"
],
m: [
[
"@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}",
{
m: "(forced-colors: active)"
}
]
],
w: [
".f99w1ws:focus-within{outline-style:none;}"
]
});
const useInputClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r12stul0", null, [
".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}",
".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}",
".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"
]);
const useInputElementStyles = /*#__PURE__*/ (0, _react.__styles)({
small: {
uwmqm3: [
"f1f5gg8d",
"f1vdfbxk"
],
z189sj: [
"f1vdfbxk",
"f1f5gg8d"
]
},
medium: {},
large: {
uwmqm3: [
"fnphzt9",
"flt1dlf"
],
z189sj: [
"flt1dlf",
"fnphzt9"
]
},
smallWithContentBefore: {
uwmqm3: [
"fgiv446",
"ffczdla"
]
},
smallWithContentAfter: {
z189sj: [
"ffczdla",
"fgiv446"
]
},
mediumWithContentBefore: {
uwmqm3: [
"fgiv446",
"ffczdla"
]
},
mediumWithContentAfter: {
z189sj: [
"ffczdla",
"fgiv446"
]
},
largeWithContentBefore: {
uwmqm3: [
"fk8j09s",
"fdw0yi8"
]
},
largeWithContentAfter: {
z189sj: [
"fdw0yi8",
"fk8j09s"
]
},
disabled: {
sj55zd: "f1s2aq7o",
De3pzq: "f1c21dwh",
Bceei9c: "fdrzuqr",
yvdlaj: "fahhnxm"
}
}, {
d: [
".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}",
".fgiv446{padding-left:var(--spacingHorizontalXXS);}",
".ffczdla{padding-right:var(--spacingHorizontalXXS);}",
".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}",
".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".fdrzuqr{cursor:not-allowed;}",
".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}",
".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"
]
});
const useContentClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1572tok", null, [
".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}",
".r1572tok>svg{font-size:20px;}"
]);
const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
disabled: {
sj55zd: "f1s2aq7o"
},
small: {
Duoase: "f3qv9w"
},
medium: {},
large: {
Duoase: "f16u2scb"
}
}, {
d: [
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f3qv9w>svg{font-size:16px;}",
".f16u2scb>svg{font-size:24px;}"
]
});
const useInputStyles_unstable = (state)=>{
'use no memo';
const { size, appearance } = state;
const disabled = state.input.disabled;
const invalid = `${state.input['aria-invalid']}` === 'true';
const filled = appearance.startsWith('filled');
const rootStyles = useRootStyles();
const inputStyles = useInputElementStyles();
const contentStyles = useContentStyles();
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);
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(),
disabled && contentStyles.disabled,
contentStyles[size]
];
if (state.contentBefore) {
state.contentBefore.className = (0, _react.mergeClasses)(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
}
if (state.contentAfter) {
state.contentAfter.className = (0, _react.mergeClasses)(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
}
return state;
};
File diff suppressed because one or more lines are too long
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Input: function() {
return _Input.Input;
},
inputClassNames: function() {
return _Input.inputClassNames;
},
renderInput_unstable: function() {
return _Input.renderInput_unstable;
},
useInputStyles_unstable: function() {
return _Input.useInputStyles_unstable;
},
useInput_unstable: function() {
return _Input.useInput_unstable;
}
});
const _Input = require("./Input");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,eAAe;eAAfA,sBAAe;;IAAEC,oBAAoB;eAApBA,2BAAoB;;IAAEC,uBAAuB;eAAvBA,8BAAuB;;IAAEC,iBAAiB;eAAjBA,wBAAiB;;;uBAAQ"}
+1
View File
@@ -0,0 +1 @@
export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './components/Input/index';
+1
View File
@@ -0,0 +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"],"rangeMappings":"","mappings":"AACA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+14
View File
@@ -0,0 +1,14 @@
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';
/**
* The Input component allows people to enter and edit text.
*/ export const Input = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useInput_unstable(props, ref);
useInputStyles_unstable(state);
useCustomStyleHook_unstable('useInputStyles_unstable')(state);
return renderInput_unstable(state);
});
Input.displayName = 'Input';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,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"}
@@ -0,0 +1 @@
import * as React from 'react';
@@ -0,0 +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"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+4
View File
@@ -0,0 +1,4 @@
export { Input } from './Input';
export { renderInput_unstable } from './renderInput';
export { useInput_unstable } from './useInput';
export { inputClassNames, useInputStyles_unstable } from './useInputStyles.styles';
+1
View File
@@ -0,0 +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"],"rangeMappings":";;;","mappings":"AAAA,SAASA,KAAK,QAAQ,UAAU;AAEhC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+14
View File
@@ -0,0 +1,14 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of Input
*/ export const renderInput_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.contentBefore && /*#__PURE__*/ _jsx(state.contentBefore, {}),
/*#__PURE__*/ _jsx(state.input, {}),
state.contentAfter && /*#__PURE__*/ _jsx(state.contentAfter, {})
]
});
};
@@ -0,0 +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 { InputSlots, InputState } from './Input.types';\n\n/**\n * Render the final JSX of Input\n */\nexport const renderInput_unstable = (state: InputState) => {\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"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;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"}
+78
View File
@@ -0,0 +1,78 @@
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';
/**
* 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 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;
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 [value, setValue] = useControllableState({
state: props.value,
defaultState: props.defaultValue,
initialState: ''
});
const nativeProps = getPartitionedNativeProps({
props,
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, {
defaultProps: {
type: 'text',
ref,
...nativeProps.primary
},
elementType: 'input'
}),
contentAfter: slot.optional(props.contentAfter, {
elementType: 'span'
}),
contentBefore: slot.optional(props.contentBefore, {
elementType: 'span'
}),
root: slot.always(props.root, {
defaultProps: nativeProps.root,
elementType: 'span'
})
};
state.input.value = value;
state.input.onChange = useEventCallback((ev)=>{
const newValue = ev.target.value;
onChange === null || onChange === void 0 ? void 0 : onChange(ev, {
value: newValue
});
setValue(newValue);
});
return state;
};
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Input/useInput.ts"],"sourcesContent":["import * 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}
@@ -0,0 +1,252 @@
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',
contentBefore: 'fui-Input__contentBefore',
contentAfter: 'fui-Input__contentAfter'
};
// TODO(sharing) should these be shared somewhere?
const fieldHeights = {
small: '24px',
medium: '32px',
large: '40px'
};
// With no contentBefore or contentAfter, the input slot uses combined padding to increase its hit target.
// If there is contentBefore or contentAfter, then the root and input slots use their individual padding.
const horizontalPadding = {
root: {
small: tokens.spacingHorizontalSNudge,
medium: tokens.spacingHorizontalMNudge,
large: tokens.spacingHorizontalM
},
input: {
small: tokens.spacingHorizontalXXS,
medium: tokens.spacingHorizontalXXS,
large: tokens.spacingHorizontalSNudge
},
combined: {
small: tokens.spacingHorizontalS,
medium: tokens.spacingHorizontalM,
large: `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`
}
};
const useRootClassName = /*#__PURE__*/__resetStyles("r1oeeo9n", "r9sxh5", {
r: [".r1oeeo9n{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r1oeeo9n::after{box-sizing:border-box;content:\"\";position:absolute;left:-1px;bottom:-1px;right:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r1oeeo9n:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r1oeeo9n:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r1oeeo9n:focus-within{outline:2px solid transparent;}", ".r9sxh5{display:inline-flex;align-items:center;flex-wrap:nowrap;gap:var(--spacingHorizontalXXS);border-radius:var(--borderRadiusMedium);position:relative;box-sizing:border-box;vertical-align:middle;min-height:32px;font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase300);background-color:var(--colorNeutralBackground1);border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".r9sxh5::after{box-sizing:border-box;content:\"\";position:absolute;right:-1px;bottom:-1px;left:-1px;height:max(2px, var(--borderRadiusMedium));border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-bottom:2px solid var(--colorCompoundBrandStroke);clip-path:inset(calc(100% - 2px) 0 0 0);transform:scaleX(0);transition-property:transform;transition-duration:var(--durationUltraFast);transition-delay:var(--curveAccelerateMid);}", ".r9sxh5:focus-within::after{transform:scaleX(1);transition-property:transform;transition-duration:var(--durationNormal);transition-delay:var(--curveDecelerateMid);}", ".r9sxh5:focus-within:active::after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".r9sxh5:focus-within{outline:2px solid transparent;}"],
s: ["@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r1oeeo9n:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r9sxh5::after{transition-duration:0.01ms;transition-delay:0.01ms;}}", "@media screen and (prefers-reduced-motion: reduce){.r9sxh5:focus-within::after{transition-duration:0.01ms;transition-delay:0.01ms;}}"]
});
const useRootStyles = /*#__PURE__*/__styles({
small: {
sshi5w: "f1pha7fy",
Bahqtrf: "fk6fouc",
Be2twd7: "fy9rknc",
Bhrd7zp: "figsok6",
Bg96gwp: "fwrc4pm"
},
medium: {},
large: {
sshi5w: "f1w5jphr",
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k",
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1eyhf9v"
},
outline: {},
outlineInteractive: {
Bgoe8wy: "fvcxoqz",
Bwzppfd: ["f1ub3y4t", "f1m52nbi"],
oetu4i: "f1l4zc64",
gg5e9n: ["f1m52nbi", "f1ub3y4t"],
Drbcw7: "f8vnjqi",
udz0bu: ["fz1etlk", "f1hc16gm"],
Be8ivqh: "f1klwx88",
ofdepl: ["f1hc16gm", "fz1etlk"]
},
underline: {
De3pzq: "f1c21dwh",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "fokr779",
icvyot: "f1ern45e",
vrafjx: ["f1n71otn", "f1deefiw"],
wvpqe5: ["f1deefiw", "f1n71otn"],
Eqx8gd: ["f1n6gb5g", "f15yvnhg"],
B1piin3: ["f15yvnhg", "f1n6gb5g"]
},
underlineInteractive: {
oetu4i: "f1l4zc64",
Be8ivqh: "f1klwx88",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "f2ale1x"
},
filled: {
g2u3we: "fghlq4f",
h3c5rm: ["f1gn591s", "fjscplz"],
B9xav0g: "fb073pr",
zhjwy3: ["fjscplz", "f1gn591s"]
},
filledInteractive: {
q7v0qe: "ftmjh5b",
kmh5ft: ["f17blpuu", "fsrcdbj"],
nagaa4: "f1tpwn32",
B1yhkcb: ["fsrcdbj", "f17blpuu"]
},
invalid: {
tvckwq: "fs4k3qj",
gk2u95: ["fcee079", "fmyw78r"],
hhx65j: "f1fgmyf4",
Bxowmz0: ["fmyw78r", "fcee079"]
},
"filled-darker": {
De3pzq: "f16xq7d1"
},
"filled-lighter": {
De3pzq: "fxugw4r"
},
"filled-darker-shadow": {
De3pzq: "f16xq7d1",
E5pizo: "fyed02w"
},
"filled-lighter-shadow": {
De3pzq: "fxugw4r",
E5pizo: "fyed02w"
},
disabled: {
Bceei9c: "fdrzuqr",
De3pzq: "f1c21dwh",
g2u3we: "f1jj8ep1",
h3c5rm: ["f15xbau", "fy0fskl"],
B9xav0g: "f4ikngz",
zhjwy3: ["fy0fskl", "f15xbau"],
Bjwas2f: "fg455y9",
Bn1d65q: ["f1rvyvqg", "f14g86mu"],
Bxeuatn: "f1cwzwz",
n51gp8: ["f14g86mu", "f1rvyvqg"],
Bsft5z2: "fhr9occ",
Bduesf4: "f99w1ws"
},
smallWithContentBefore: {
uwmqm3: ["fk8j09s", "fdw0yi8"]
},
smallWithContentAfter: {
z189sj: ["fdw0yi8", "fk8j09s"]
},
mediumWithContentBefore: {
uwmqm3: ["f1ng84yb", "f11gcy0p"]
},
mediumWithContentAfter: {
z189sj: ["f11gcy0p", "f1ng84yb"]
},
largeWithContentBefore: {
uwmqm3: ["f1uw59to", "fw5db7e"]
},
largeWithContentAfter: {
z189sj: ["fw5db7e", "f1uw59to"]
}
}, {
d: [".f1pha7fy{min-height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1w5jphr{min-height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", [".f1eyhf9v{gap:var(--spacingHorizontalSNudge);}", {
p: -1
}], ".f1c21dwh{background-color:var(--colorTransparentBackground);}", [".fokr779{border-radius:0;}", {
p: -1
}], ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1n6gb5g::after{left:0;}", ".f15yvnhg::after{right:0;}", [".f2ale1x::after{border-radius:0;}", {
p: -1
}], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".fs4k3qj:not(:focus-within),.fs4k3qj:hover:not(:focus-within){border-top-color:var(--colorPaletteRedBorder2);}", ".fcee079:not(:focus-within),.fcee079:hover:not(:focus-within){border-right-color:var(--colorPaletteRedBorder2);}", ".fmyw78r:not(:focus-within),.fmyw78r:hover:not(:focus-within){border-left-color:var(--colorPaletteRedBorder2);}", ".f1fgmyf4:not(:focus-within),.f1fgmyf4:hover:not(:focus-within){border-bottom-color:var(--colorPaletteRedBorder2);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fyed02w{box-shadow:var(--shadow2);}", ".fdrzuqr{cursor:not-allowed;}", ".f1jj8ep1{border-top-color:var(--colorNeutralStrokeDisabled);}", ".f15xbau{border-right-color:var(--colorNeutralStrokeDisabled);}", ".fy0fskl{border-left-color:var(--colorNeutralStrokeDisabled);}", ".f4ikngz{border-bottom-color:var(--colorNeutralStrokeDisabled);}", ".fhr9occ::after{content:unset;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}"],
h: [".fvcxoqz:hover{border-top-color:var(--colorNeutralStroke1Hover);}", ".f1ub3y4t:hover{border-right-color:var(--colorNeutralStroke1Hover);}", ".f1m52nbi:hover{border-left-color:var(--colorNeutralStroke1Hover);}", ".f1l4zc64:hover{border-bottom-color:var(--colorNeutralStrokeAccessibleHover);}", ".ftmjh5b:hover,.ftmjh5b:focus-within{border-top-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,.f17blpuu:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}"],
a: [".f8vnjqi:active,.f8vnjqi:focus-within{border-top-color:var(--colorNeutralStroke1Pressed);}", ".fz1etlk:active,.fz1etlk:focus-within{border-right-color:var(--colorNeutralStroke1Pressed);}", ".f1hc16gm:active,.f1hc16gm:focus-within{border-left-color:var(--colorNeutralStroke1Pressed);}", ".f1klwx88:active,.f1klwx88:focus-within{border-bottom-color:var(--colorNeutralStrokeAccessiblePressed);}"],
m: [["@media (forced-colors: active){.fg455y9{border-top-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f14g86mu{border-left-color:GrayText;}.f1rvyvqg{border-right-color:GrayText;}}", {
m: "(forced-colors: active)"
}], ["@media (forced-colors: active){.f1cwzwz{border-bottom-color:GrayText;}}", {
m: "(forced-colors: active)"
}]],
w: [".f99w1ws:focus-within{outline-style:none;}"]
});
const useInputClassName = /*#__PURE__*/__resetStyles("r12stul0", null, [".r12stul0{align-self:stretch;box-sizing:border-box;flex-grow:1;min-width:0;border-style:none;padding:0 var(--spacingHorizontalM);color:var(--colorNeutralForeground1);background-color:transparent;outline-style:none;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;}", ".r12stul0::-webkit-input-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r12stul0::-moz-placeholder{color:var(--colorNeutralForeground4);opacity:1;}", ".r12stul0::placeholder{color:var(--colorNeutralForeground4);opacity:1;}"]);
const useInputElementStyles = /*#__PURE__*/__styles({
small: {
uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
z189sj: ["f1vdfbxk", "f1f5gg8d"]
},
medium: {},
large: {
uwmqm3: ["fnphzt9", "flt1dlf"],
z189sj: ["flt1dlf", "fnphzt9"]
},
smallWithContentBefore: {
uwmqm3: ["fgiv446", "ffczdla"]
},
smallWithContentAfter: {
z189sj: ["ffczdla", "fgiv446"]
},
mediumWithContentBefore: {
uwmqm3: ["fgiv446", "ffczdla"]
},
mediumWithContentAfter: {
z189sj: ["ffczdla", "fgiv446"]
},
largeWithContentBefore: {
uwmqm3: ["fk8j09s", "fdw0yi8"]
},
largeWithContentAfter: {
z189sj: ["fdw0yi8", "fk8j09s"]
},
disabled: {
sj55zd: "f1s2aq7o",
De3pzq: "f1c21dwh",
Bceei9c: "fdrzuqr",
yvdlaj: "fahhnxm"
}
}, {
d: [".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".fnphzt9{padding-left:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".flt1dlf{padding-right:calc(var(--spacingHorizontalM) + var(--spacingHorizontalSNudge));}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".fdrzuqr{cursor:not-allowed;}", ".fahhnxm::-webkit-input-placeholder{color:var(--colorNeutralForegroundDisabled);}", ".fahhnxm::-moz-placeholder{color:var(--colorNeutralForegroundDisabled);}"]
});
const useContentClassName = /*#__PURE__*/__resetStyles("r1572tok", null, [".r1572tok{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;}", ".r1572tok>svg{font-size:20px;}"]);
const useContentStyles = /*#__PURE__*/__styles({
disabled: {
sj55zd: "f1s2aq7o"
},
small: {
Duoase: "f3qv9w"
},
medium: {},
large: {
Duoase: "f16u2scb"
}
}, {
d: [".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
});
/**
* 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';
const filled = appearance.startsWith('filled');
const rootStyles = useRootStyles();
const inputStyles = useInputElementStyles();
const contentStyles = useContentStyles();
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);
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) {
state.contentBefore.className = mergeClasses(inputClassNames.contentBefore, ...contentClasses, state.contentBefore.className);
}
if (state.contentAfter) {
state.contentAfter.className = mergeClasses(inputClassNames.contentAfter, ...contentClasses, state.contentAfter.className);
}
return state;
};
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input';\nexport type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input';\n"],"names":["Input","inputClassNames","renderInput_unstable","useInputStyles_unstable","useInput_unstable"],"rangeMappings":"","mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU"}
+57
View File
@@ -0,0 +1,57 @@
{
"name": "@fluentui/react-input",
"version": "9.5.0",
"description": "Fluent UI React Input component",
"main": "lib-commonjs/index.js",
"module": "lib/index.js",
"typings": "./dist/index.d.ts",
"sideEffects": false,
"repository": {
"type": "git",
"url": "https://github.com/microsoft/fluentui"
},
"license": "MIT",
"devDependencies": {
"@fluentui/eslint-plugin": "*",
"@fluentui/react-conformance": "*",
"@fluentui/react-conformance-griffel": "*",
"@fluentui/react-text": "*",
"@fluentui/scripts-api-extractor": "*"
},
"dependencies": {
"@fluentui/react-field": "^9.2.0",
"@fluentui/react-jsx-runtime": "^9.0.50",
"@fluentui/react-shared-contexts": "^9.21.2",
"@fluentui/react-theme": "^9.1.24",
"@fluentui/react-utilities": "^9.18.20",
"@griffel/react": "^1.5.22",
"@swc/helpers": "^0.5.1"
},
"peerDependencies": {
"@types/react": ">=16.14.0 <19.0.0",
"@types/react-dom": ">=16.9.0 <19.0.0",
"react": ">=16.14.0 <19.0.0",
"react-dom": ">=16.14.0 <19.0.0"
},
"beachball": {
"disallowedChangeTypes": [
"major",
"prerelease"
]
},
"exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./lib-commonjs/index.js",
"import": "./lib/index.js",
"require": "./lib-commonjs/index.js"
},
"./package.json": "./package.json"
},
"files": [
"*.md",
"dist/*.d.ts",
"lib",
"lib-commonjs"
]
}