Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@fluentui/react-input
Advanced tools
@fluentui/react-input - npm Package Compare versions
Comparing version 0.0.0-nightly3bc051736320220112.1 to 0.0.0-nightly43b133e62020220224.1
@@ -5,5 +5,5 @@ { | ||
| { | ||
| "date": "Wed, 12 Jan 2022 04:19:43 GMT", | ||
| "tag": "@fluentui/react-input_v0.0.0-nightly3bc051736320220112.1", | ||
| "version": "0.0.0-nightly3bc051736320220112.1", | ||
| "date": "Thu, 24 Feb 2022 04:13:25 GMT", | ||
| "tag": "@fluentui/react-input_v0.0.0-nightly43b133e62020220224.1", | ||
| "version": "0.0.0-nightly43b133e62020220224.1", | ||
| "comments": { | ||
@@ -14,22 +14,22 @@ "prerelease": [ | ||
| "package": "@fluentui/react-input", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d", | ||
| "commit": "27a2c814edc7e5d9bb79037b2fabfff4a516ab8c", | ||
| "comment": "Release nightly v9" | ||
| }, | ||
| { | ||
| "author": "elcraig@microsoft.com", | ||
| "author": "olfedias@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "d61d7925180bc36f13e83c6512c8f3e1885025a2", | ||
| "comment": "Fix styling issues found in accessibility review" | ||
| "commit": "084d7408855f3e52b67cbca172da1acef9dcb98f", | ||
| "comment": "fix: Add react-theme as dependency" | ||
| }, | ||
| { | ||
| "author": "elcraig@microsoft.com", | ||
| "author": "beachball", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8", | ||
| "comment": "Initial release" | ||
| "comment": "Bump @fluentui/react-theme to v0.0.0-nightly43b133e62020220224.1", | ||
| "commit": "27a2c814edc7e5d9bb79037b2fabfff4a516ab8c" | ||
| }, | ||
| { | ||
| "author": "Humberto.Morimoto@microsoft.com", | ||
| "author": "beachball", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "9f5e897597cb3de56c32fe750d45c9d2a1ea838a", | ||
| "comment": "Replacing use of functions in makeStyles with direct use of tokens and removing old version of stories." | ||
| "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly43b133e62020220224.1", | ||
| "commit": "27a2c814edc7e5d9bb79037b2fabfff4a516ab8c" | ||
| }, | ||
@@ -39,4 +39,19 @@ { | ||
| "package": "@fluentui/react-input", | ||
| "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly3bc051736320220112.1", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d" | ||
| "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly43b133e62020220224.1", | ||
| "commit": "27a2c814edc7e5d9bb79037b2fabfff4a516ab8c" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "date": "Fri, 18 Feb 2022 13:35:32 GMT", | ||
| "tag": "@fluentui/react-input_v9.0.0-beta.3", | ||
| "version": "9.0.0-beta.3", | ||
| "comments": { | ||
| "prerelease": [ | ||
| { | ||
| "author": "lingfangao@hotmail.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14", | ||
| "comment": "fix: Source maps contain original source code" | ||
| }, | ||
@@ -46,4 +61,4 @@ { | ||
| "package": "@fluentui/react-input", | ||
| "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly3bc051736320220112.1", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d" | ||
| "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3", | ||
| "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504" | ||
| }, | ||
@@ -53,10 +68,117 @@ { | ||
| "package": "@fluentui/react-input", | ||
| "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly3bc051736320220112.1", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d" | ||
| "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3", | ||
| "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504" | ||
| } | ||
| ] | ||
| } | ||
| }, | ||
| { | ||
| "date": "Thu, 10 Feb 2022 08:51:17 GMT", | ||
| "tag": "@fluentui/react-input_v9.0.0-beta.1", | ||
| "version": "9.0.0-beta.1", | ||
| "comments": { | ||
| "none": [ | ||
| { | ||
| "author": "olfedias@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "c061e98be4b4a718c72a144a1f60bb5515824612", | ||
| "comment": "remove inline-style-expand-shorthand from tsconfigs" | ||
| }, | ||
| { | ||
| "author": "me@levithomason.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "4bd15194a66379b165043141c266faa0c1ea1502", | ||
| "comment": "document how to import preview components" | ||
| }, | ||
| { | ||
| "author": "me@levithomason.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "a15d363937fad523e90350458ec3e44fe7199dc0", | ||
| "comment": "Move Storybook stories to Preview Components section" | ||
| }, | ||
| { | ||
| "author": "tkrasniqi@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "d757e76e91527fb821c3e1707db48f1745bf44ca", | ||
| "comment": "Rmoved config with just-scripts" | ||
| }, | ||
| { | ||
| "author": "martinhochel@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "8dfa712156b70414205b87b5b6d099367b0c297d", | ||
| "comment": "chore: use storybook runner for all vNext packages" | ||
| }, | ||
| { | ||
| "author": "elcraig@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "96d9c93544464bcc5ec36b7c5d724b77ae499c73", | ||
| "comment": "Update docs description" | ||
| }, | ||
| { | ||
| "author": "bsunderhus@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "c0d4e63ee58e60e2c6674efbacc0783cd520984e", | ||
| "comment": "Updates components with nullRender changes" | ||
| } | ||
| ], | ||
| "prerelease": [ | ||
| { | ||
| "author": "behowell@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95", | ||
| "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet" | ||
| }, | ||
| { | ||
| "author": "behowell@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5", | ||
| "comment": "Remove component's shorthandProps array" | ||
| }, | ||
| { | ||
| "author": "elcraig@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "d61d7925180bc36f13e83c6512c8f3e1885025a2", | ||
| "comment": "Fix styling issues found in accessibility review" | ||
| }, | ||
| { | ||
| "author": "lingfangao@hotmail.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f", | ||
| "comment": "Bump Fluent UI dependencies to 9.0.0-rc" | ||
| }, | ||
| { | ||
| "author": "olfedias@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "d084da4f0a5501c074d3f278098d5084f891b09c", | ||
| "comment": "Replace make-styles packages with griffel equivalents." | ||
| }, | ||
| { | ||
| "author": "behowell@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3", | ||
| "comment": "Refactor component Slot typings" | ||
| }, | ||
| { | ||
| "author": "elcraig@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8", | ||
| "comment": "Initial release" | ||
| }, | ||
| { | ||
| "author": "Humberto.Morimoto@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0", | ||
| "comment": "Updating based on changes to composition types." | ||
| }, | ||
| { | ||
| "author": "Humberto.Morimoto@microsoft.com", | ||
| "package": "@fluentui/react-input", | ||
| "commit": "9f5e897597cb3de56c32fe750d45c9d2a1ea838a", | ||
| "comment": "Replacing use of functions in makeStyles with direct use of tokens and removing old version of stories." | ||
| }, | ||
| { | ||
| "author": "beachball", | ||
| "package": "@fluentui/react-input", | ||
| "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly3bc051736320220112.1", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d" | ||
| "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1", | ||
| "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8" | ||
| }, | ||
@@ -66,4 +188,4 @@ { | ||
| "package": "@fluentui/react-input", | ||
| "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly3bc051736320220112.1", | ||
| "commit": "480c16821614e08014fbc10b62ebbf1964c0058d" | ||
| "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1", | ||
| "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8" | ||
| } | ||
@@ -70,0 +192,0 @@ ] |
| # Change Log - @fluentui/react-input | ||
| This log was last generated on Wed, 12 Jan 2022 04:19:43 GMT and should not be manually modified. | ||
| This log was last generated on Thu, 24 Feb 2022 04:13:25 GMT and should not be manually modified. | ||
| <!-- Start content --> | ||
| ## [0.0.0-nightly3bc051736320220112.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly3bc051736320220112.1) | ||
| ## [0.0.0-nightly43b133e62020220224.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly43b133e62020220224.1) | ||
| Wed, 12 Jan 2022 04:19:43 GMT | ||
| [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v0.0.0-nightly3bc051736320220112.1) | ||
| Thu, 24 Feb 2022 04:13:25 GMT | ||
| [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.3..@fluentui/react-input_v0.0.0-nightly43b133e62020220224.1) | ||
| ### Changes | ||
| - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by email not defined) | ||
| - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/27a2c814edc7e5d9bb79037b2fabfff4a516ab8c) by email not defined) | ||
| - fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by olfedias@microsoft.com) | ||
| - Bump @fluentui/react-theme to v0.0.0-nightly43b133e62020220224.1 ([commit](https://github.com/microsoft/fluentui/commit/27a2c814edc7e5d9bb79037b2fabfff4a516ab8c) by beachball) | ||
| - Bump @fluentui/react-utilities to v0.0.0-nightly43b133e62020220224.1 ([commit](https://github.com/microsoft/fluentui/commit/27a2c814edc7e5d9bb79037b2fabfff4a516ab8c) by beachball) | ||
| - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly43b133e62020220224.1 ([commit](https://github.com/microsoft/fluentui/commit/27a2c814edc7e5d9bb79037b2fabfff4a516ab8c) by beachball) | ||
| ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.3) | ||
| Fri, 18 Feb 2022 13:35:32 GMT | ||
| [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.1..@fluentui/react-input_v9.0.0-beta.3) | ||
| ### Changes | ||
| - fix: Source maps contain original source code ([PR #21690](https://github.com/microsoft/fluentui/pull/21690) by lingfangao@hotmail.com) | ||
| - Bump @fluentui/react-utilities to v9.0.0-rc.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball) | ||
| - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.3 ([PR #21800](https://github.com/microsoft/fluentui/pull/21800) by beachball) | ||
| ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.1) | ||
| Thu, 10 Feb 2022 08:51:17 GMT | ||
| [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v9.0.0-beta.1) | ||
| ### Changes | ||
| - BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com) | ||
| - Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com) | ||
| - Fix styling issues found in accessibility review ([PR #21205](https://github.com/microsoft/fluentui/pull/21205) by elcraig@microsoft.com) | ||
| - Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by lingfangao@hotmail.com) | ||
| - Replace make-styles packages with griffel equivalents. ([PR #21431](https://github.com/microsoft/fluentui/pull/21431) by olfedias@microsoft.com) | ||
| - Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by behowell@microsoft.com) | ||
| - Initial release ([PR #21142](https://github.com/microsoft/fluentui/pull/21142) by elcraig@microsoft.com) | ||
| - Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by Humberto.Morimoto@microsoft.com) | ||
| - Replacing use of functions in makeStyles with direct use of tokens and removing old version of stories. ([PR #21045](https://github.com/microsoft/fluentui/pull/21045) by Humberto.Morimoto@microsoft.com) | ||
| - Bump @fluentui/react-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball) | ||
| - Bump @fluentui/react-utilities to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball) | ||
| - Bump @fluentui/babel-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball) | ||
| - Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball) | ||
| - Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly3bc051736320220112.1 ([commit](https://github.com/microsoft/fluentui/commit/480c16821614e08014fbc10b62ebbf1964c0058d) by beachball) | ||
| - Bump @fluentui/react-utilities to v9.0.0-rc.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball) | ||
| - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1 ([commit](https://github.com/microsoft/fluentui/commit/e6c855f6d9019d6c73668d15fc9bc3a13291a6c8) by beachball) | ||
@@ -24,0 +50,0 @@ ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0) |
| import type { ComponentProps } from '@fluentui/react-utilities'; | ||
| import type { ComponentState } from '@fluentui/react-utilities'; | ||
| import type { ForwardRefComponent } from '@fluentui/react-utilities'; | ||
| import type { IntrinsicShorthandProps } from '@fluentui/react-utilities'; | ||
| import * as React_2 from 'react'; | ||
| import type { Slot } from '@fluentui/react-utilities'; | ||
| /** | ||
| * The Input component allows people to enter and edit text. | ||
| * | ||
| * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.** | ||
| */ | ||
@@ -24,3 +22,3 @@ export declare const Input: ForwardRefComponent<InputProps>; | ||
| export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| /** Input can't have children. */ | ||
@@ -83,3 +81,3 @@ children?: never; | ||
| */ | ||
| root: IntrinsicShorthandProps<'span'>; | ||
| root: NonNullable<Slot<'span'>>; | ||
| /** | ||
@@ -92,7 +90,7 @@ * The actual `<input>` element. `type="text"` will be automatically applied unless overridden. | ||
| */ | ||
| input: IntrinsicShorthandProps<'input'>; | ||
| input: NonNullable<Slot<'input'>>; | ||
| /** Element before the input text, within the input border */ | ||
| contentBefore?: IntrinsicShorthandProps<'span'>; | ||
| contentBefore?: Slot<'span'>; | ||
| /** Element after the input text, within the input border */ | ||
| contentAfter?: IntrinsicShorthandProps<'span'>; | ||
| contentAfter?: Slot<'span'>; | ||
| }; | ||
@@ -108,3 +106,3 @@ | ||
| */ | ||
| export declare const renderInput: (state: InputState) => JSX.Element; | ||
| export declare const renderInput_unstable: (state: InputState) => JSX.Element; | ||
@@ -114,4 +112,4 @@ /** | ||
| * | ||
| * The returned state can be modified with hooks such as useInputStyles, | ||
| * before being passed to renderInput. | ||
| * The returned state can be modified with hooks such as useInputStyles_unstable, | ||
| * before being passed to renderInput_unstable. | ||
| * | ||
@@ -121,3 +119,3 @@ * @param props - props from this instance of Input | ||
| */ | ||
| export declare const useInput: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState; | ||
| export declare const useInput_unstable: (props: InputProps, ref: React_2.Ref<HTMLInputElement>) => InputState; | ||
@@ -127,4 +125,4 @@ /** | ||
| */ | ||
| export declare const useInputStyles: (state: InputState) => InputState; | ||
| export declare const useInputStyles_unstable: (state: InputState) => InputState; | ||
| export { } |
@@ -5,5 +5,3 @@ import type { InputProps } from './Input.types'; | ||
| * The Input component allows people to enter and edit text. | ||
| * | ||
| * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.** | ||
| */ | ||
| export declare const Input: ForwardRefComponent<InputProps>; |
@@ -17,4 +17,2 @@ "use strict"; | ||
| * The Input component allows people to enter and edit text. | ||
| * | ||
| * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.** | ||
| */ | ||
@@ -24,7 +22,7 @@ | ||
| exports.Input = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
| const state = useInput_1.useInput(props, ref); | ||
| useInputStyles_1.useInputStyles(state); | ||
| return renderInput_1.renderInput(state); | ||
| const state = useInput_1.useInput_unstable(props, ref); | ||
| useInputStyles_1.useInputStyles_unstable(state); | ||
| return renderInput_1.renderInput_unstable(state); | ||
| }); | ||
| exports.Input.displayName = 'Input'; | ||
| //# sourceMappingURL=Input.js.map |
| import * as React from 'react'; | ||
| import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities'; | ||
| import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; | ||
| export declare type InputSlots = { | ||
@@ -11,3 +11,3 @@ /** | ||
| */ | ||
| root: IntrinsicShorthandProps<'span'>; | ||
| root: NonNullable<Slot<'span'>>; | ||
| /** | ||
@@ -20,9 +20,9 @@ * The actual `<input>` element. `type="text"` will be automatically applied unless overridden. | ||
| */ | ||
| input: IntrinsicShorthandProps<'input'>; | ||
| input: NonNullable<Slot<'input'>>; | ||
| /** Element before the input text, within the input border */ | ||
| contentBefore?: IntrinsicShorthandProps<'span'>; | ||
| contentBefore?: Slot<'span'>; | ||
| /** Element after the input text, within the input border */ | ||
| contentAfter?: IntrinsicShorthandProps<'span'>; | ||
| contentAfter?: Slot<'span'>; | ||
| }; | ||
| export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| /** Input can't have children. */ | ||
@@ -29,0 +29,0 @@ children?: never; |
@@ -5,2 +5,2 @@ import type { InputState } from './Input.types'; | ||
| */ | ||
| export declare const renderInput: (state: InputState) => JSX.Element; | ||
| export declare const renderInput_unstable: (state: InputState) => JSX.Element; |
@@ -6,3 +6,3 @@ "use strict"; | ||
| }); | ||
| exports.renderInput = void 0; | ||
| exports.renderInput_unstable = void 0; | ||
@@ -17,15 +17,15 @@ const React = /*#__PURE__*/require("react"); | ||
| const renderInput = state => { | ||
| const renderInput_unstable = state => { | ||
| const { | ||
| slots, | ||
| slotProps | ||
| } = react_utilities_1.getSlots(state, ['input', 'contentBefore', 'contentAfter', 'root']); | ||
| } = react_utilities_1.getSlots(state); | ||
| return React.createElement(slots.root, { ...slotProps.root | ||
| }, React.createElement(slots.contentBefore, { ...slotProps.contentBefore | ||
| }, slots.contentBefore && React.createElement(slots.contentBefore, { ...slotProps.contentBefore | ||
| }), React.createElement(slots.input, { ...slotProps.input | ||
| }), React.createElement(slots.contentAfter, { ...slotProps.contentAfter | ||
| }), slots.contentAfter && React.createElement(slots.contentAfter, { ...slotProps.contentAfter | ||
| })); | ||
| }; | ||
| exports.renderInput = renderInput; | ||
| exports.renderInput_unstable = renderInput_unstable; | ||
| //# sourceMappingURL=renderInput.js.map |
@@ -6,4 +6,4 @@ import * as React from 'react'; | ||
| * | ||
| * The returned state can be modified with hooks such as useInputStyles, | ||
| * before being passed to renderInput. | ||
| * The returned state can be modified with hooks such as useInputStyles_unstable, | ||
| * before being passed to renderInput_unstable. | ||
| * | ||
@@ -13,2 +13,2 @@ * @param props - props from this instance of Input | ||
| */ | ||
| export declare const useInput: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState; | ||
| export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState; |
@@ -6,3 +6,3 @@ "use strict"; | ||
| }); | ||
| exports.useInput = void 0; | ||
| exports.useInput_unstable = void 0; | ||
@@ -13,4 +13,4 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); | ||
| * | ||
| * The returned state can be modified with hooks such as useInputStyles, | ||
| * before being passed to renderInput. | ||
| * The returned state can be modified with hooks such as useInputStyles_unstable, | ||
| * before being passed to renderInput_unstable. | ||
| * | ||
@@ -22,3 +22,3 @@ * @param props - props from this instance of Input | ||
| const useInput = (props, ref) => { | ||
| const useInput_unstable = (props, ref) => { | ||
| const { | ||
@@ -76,3 +76,3 @@ size = 'medium', | ||
| exports.useInput = useInput; | ||
| exports.useInput_unstable = useInput_unstable; | ||
| //# sourceMappingURL=useInput.js.map |
@@ -6,2 +6,2 @@ import type { InputState } from './Input.types'; | ||
| */ | ||
| export declare const useInputStyles: (state: InputState) => InputState; | ||
| export declare const useInputStyles_unstable: (state: InputState) => InputState; |
@@ -6,5 +6,5 @@ "use strict"; | ||
| }); | ||
| exports.useInputStyles = exports.inputClassName = void 0; | ||
| exports.useInputStyles_unstable = exports.inputClassName = void 0; | ||
| const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles"); | ||
| const react_1 = /*#__PURE__*/require("@griffel/react"); | ||
@@ -53,3 +53,3 @@ const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme"); | ||
| const useRootStyles = /*#__PURE__*/react_make_styles_1.__styles({ | ||
| const useRootStyles = /*#__PURE__*/react_1.__styles({ | ||
| "base": { | ||
@@ -223,3 +223,3 @@ "mc9l5x": "f22iagw", | ||
| }, { | ||
| "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:-webkit-max(2px, var(--borderRadiusMedium));height:-moz-max(2px, var(--borderRadiusMedium));height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".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);}"], | ||
| "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".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);}"], | ||
| "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv:focus-within:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"], | ||
@@ -231,3 +231,3 @@ "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,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"], | ||
| const useInputElementStyles = /*#__PURE__*/react_make_styles_1.__styles({ | ||
| const useInputElementStyles = /*#__PURE__*/react_1.__styles({ | ||
| "base": { | ||
@@ -278,3 +278,3 @@ "B7ck84d": "f1ewtqcl", | ||
| const useContentStyles = /*#__PURE__*/react_make_styles_1.__styles({ | ||
| const useContentStyles = /*#__PURE__*/react_1.__styles({ | ||
| "base": { | ||
@@ -296,3 +296,3 @@ "B7ck84d": "f1ewtqcl", | ||
| const useInputStyles = state => { | ||
| const useInputStyles_unstable = state => { | ||
| const { | ||
@@ -307,12 +307,12 @@ size, | ||
| const contentStyles = useContentStyles(); | ||
| state.root.className = react_make_styles_1.mergeClasses(exports.inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className); | ||
| state.input.className = react_make_styles_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className); | ||
| state.root.className = react_1.mergeClasses(exports.inputClassName, rootStyles.base, rootStyles[size], rootStyles[appearance], !disabled && rootStyles.interactive, !disabled && appearance === 'outline' && rootStyles.outlineInteractive, !disabled && appearance === 'underline' && rootStyles.underlineInteractive, !disabled && filled && rootStyles.filledInteractive, state.inline && rootStyles.inline, filled && rootStyles.filled, disabled && rootStyles.disabled, state.root.className); | ||
| state.input.className = react_1.mergeClasses(inputStyles.base, inputStyles[size], disabled && inputStyles.disabled, state.input.className); | ||
| const contentClasses = [contentStyles.base, disabled && contentStyles.disabled]; | ||
| if (state.contentBefore) { | ||
| state.contentBefore.className = react_make_styles_1.mergeClasses(...contentClasses, state.contentBefore.className); | ||
| state.contentBefore.className = react_1.mergeClasses(...contentClasses, state.contentBefore.className); | ||
| } | ||
| if (state.contentAfter) { | ||
| state.contentAfter.className = react_make_styles_1.mergeClasses(...contentClasses, state.contentAfter.className); | ||
| state.contentAfter.className = react_1.mergeClasses(...contentClasses, state.contentAfter.className); | ||
| } | ||
@@ -323,3 +323,3 @@ | ||
| exports.useInputStyles = useInputStyles; | ||
| exports.useInputStyles_unstable = useInputStyles_unstable; | ||
| //# sourceMappingURL=useInputStyles.js.map |
@@ -5,5 +5,3 @@ import type { InputProps } from './Input.types'; | ||
| * The Input component allows people to enter and edit text. | ||
| * | ||
| * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.** | ||
| */ | ||
| export declare const Input: ForwardRefComponent<InputProps>; |
| import * as React from 'react'; | ||
| import { useInput } from './useInput'; | ||
| import { renderInput } from './renderInput'; | ||
| import { useInputStyles } from './useInputStyles'; | ||
| import { useInput_unstable } from './useInput'; | ||
| import { renderInput_unstable } from './renderInput'; | ||
| import { useInputStyles_unstable } from './useInputStyles'; | ||
| /** | ||
| * The Input component allows people to enter and edit text. | ||
| * | ||
| * ⚠️ **This component is still in alpha (unstable) status. APIs may change before the final release.** | ||
| */ | ||
| export const Input = /*#__PURE__*/React.forwardRef((props, ref) => { | ||
| const state = useInput(props, ref); | ||
| useInputStyles(state); | ||
| return renderInput(state); | ||
| const state = useInput_unstable(props, ref); | ||
| useInputStyles_unstable(state); | ||
| return renderInput_unstable(state); | ||
| }); | ||
| Input.displayName = 'Input'; | ||
| //# sourceMappingURL=Input.js.map |
| import * as React from 'react'; | ||
| import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities'; | ||
| import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; | ||
| export declare type InputSlots = { | ||
@@ -11,3 +11,3 @@ /** | ||
| */ | ||
| root: IntrinsicShorthandProps<'span'>; | ||
| root: NonNullable<Slot<'span'>>; | ||
| /** | ||
@@ -20,9 +20,9 @@ * The actual `<input>` element. `type="text"` will be automatically applied unless overridden. | ||
| */ | ||
| input: IntrinsicShorthandProps<'input'>; | ||
| input: NonNullable<Slot<'input'>>; | ||
| /** Element before the input text, within the input border */ | ||
| contentBefore?: IntrinsicShorthandProps<'span'>; | ||
| contentBefore?: Slot<'span'>; | ||
| /** Element after the input text, within the input border */ | ||
| contentAfter?: IntrinsicShorthandProps<'span'>; | ||
| contentAfter?: Slot<'span'>; | ||
| }; | ||
| export declare type InputProps = Omit<ComponentProps<InputSlots, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| export declare type InputProps = Omit<ComponentProps<Partial<InputSlots>, 'input'>, 'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'> & { | ||
| /** Input can't have children. */ | ||
@@ -29,0 +29,0 @@ children?: never; |
@@ -5,2 +5,2 @@ import type { InputState } from './Input.types'; | ||
| */ | ||
| export declare const renderInput: (state: InputState) => JSX.Element; | ||
| export declare const renderInput_unstable: (state: InputState) => JSX.Element; |
@@ -7,13 +7,13 @@ import * as React from 'react'; | ||
| export const renderInput = state => { | ||
| export const renderInput_unstable = state => { | ||
| const { | ||
| slots, | ||
| slotProps | ||
| } = getSlots(state, ['input', 'contentBefore', 'contentAfter', 'root']); | ||
| } = getSlots(state); | ||
| return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root | ||
| }, /*#__PURE__*/React.createElement(slots.contentBefore, { ...slotProps.contentBefore | ||
| }, slots.contentBefore && /*#__PURE__*/React.createElement(slots.contentBefore, { ...slotProps.contentBefore | ||
| }), /*#__PURE__*/React.createElement(slots.input, { ...slotProps.input | ||
| }), /*#__PURE__*/React.createElement(slots.contentAfter, { ...slotProps.contentAfter | ||
| }), slots.contentAfter && /*#__PURE__*/React.createElement(slots.contentAfter, { ...slotProps.contentAfter | ||
| })); | ||
| }; | ||
| //# sourceMappingURL=renderInput.js.map |
@@ -6,4 +6,4 @@ import * as React from 'react'; | ||
| * | ||
| * The returned state can be modified with hooks such as useInputStyles, | ||
| * before being passed to renderInput. | ||
| * The returned state can be modified with hooks such as useInputStyles_unstable, | ||
| * before being passed to renderInput_unstable. | ||
| * | ||
@@ -13,2 +13,2 @@ * @param props - props from this instance of Input | ||
| */ | ||
| export declare const useInput: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState; | ||
| export declare const useInput_unstable: (props: InputProps, ref: React.Ref<HTMLInputElement>) => InputState; |
@@ -5,4 +5,4 @@ import { getPartitionedNativeProps, resolveShorthand, useControllableState, useEventCallback } from '@fluentui/react-utilities'; | ||
| * | ||
| * The returned state can be modified with hooks such as useInputStyles, | ||
| * before being passed to renderInput. | ||
| * The returned state can be modified with hooks such as useInputStyles_unstable, | ||
| * before being passed to renderInput_unstable. | ||
| * | ||
@@ -13,3 +13,3 @@ * @param props - props from this instance of Input | ||
| export const useInput = (props, ref) => { | ||
| export const useInput_unstable = (props, ref) => { | ||
| const { | ||
@@ -16,0 +16,0 @@ size = 'medium', |
@@ -6,2 +6,2 @@ import type { InputState } from './Input.types'; | ||
| */ | ||
| export declare const useInputStyles: (state: InputState) => InputState; | ||
| export declare const useInputStyles_unstable: (state: InputState) => InputState; |
@@ -1,2 +0,2 @@ | ||
| import { __styles, mergeClasses, shorthands } from '@fluentui/react-make-styles'; | ||
| import { __styles, mergeClasses, shorthands } from '@griffel/react'; | ||
| import { tokens } from '@fluentui/react-theme'; | ||
@@ -212,3 +212,3 @@ export const inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available | ||
| }, { | ||
| "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:-webkit-max(2px, var(--borderRadiusMedium));height:-moz-max(2px, var(--borderRadiusMedium));height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".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);}"], | ||
| "d": [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".flvyvdh{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}", ".fbi42co{row-gap:2px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f10pi13n{position:relative;}", ".f1ewtqcl{box-sizing:border-box;}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f383sj6:after{left:-1px;}", ".fpmdmpy:after{right:-1px;}", ".fqmzrrm:after{bottom:-1px;}", ".f1iv82i4:after{height:max(2px, var(--borderRadiusMedium));}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1gw3il9:after{border-bottom-width:2px;}", ".fd0py6g:after{border-bottom-style:solid;}", ".f1ta67ae:after{border-bottom-color:var(--colorCompoundBrandStroke);}", ".fabrkco:after{-webkit-clip-path:inset(calc(100% - 2px) 0 0 0);clip-path:inset(calc(100% - 2px) 0 0 0);}", ".f1lmmjng:after{-webkit-transform:scaleX(0);-moz-transform:scaleX(0);-ms-transform:scaleX(0);transform:scaleX(0);}", ".fopw4to:after{transition-property:transform;}", ".f1dw3w9y:after{transition-duration:0.05s;}", ".f1n2ytmg:after{transition-delay:cubic-bezier(0.7,0,1,0.5);}", ".f1pha7fy{min-height:24px;}", ".f1g0x7ka{padding-top:0;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1qch9an{padding-bottom:0;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1nxs5xn{min-height:32px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1w5jphr{min-height:40px;}", ".f11qrl6u{padding-right:12px;}", ".fjlbh76{padding-left:12px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1y3hx6l{row-gap:6px;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f5ogflp{border-top-width:1px;}", ".f1hqa2wf{border-right-width:1px;}", ".finvdd3{border-left-width:1px;}", ".f1f09k3d{border-bottom-width:1px;}", ".fzkkow9{border-top-style:solid;}", ".fcdblym{border-right-style:solid;}", ".fjik90z{border-left-style:solid;}", ".fg706s2{border-bottom-style:solid;}", ".fj3muxo{border-top-color:var(--colorNeutralStroke1);}", ".f1akhkt{border-right-color:var(--colorNeutralStroke1);}", ".f1lxtadh{border-left-color:var(--colorNeutralStroke1);}", ".f1c1zstj{border-bottom-color:var(--colorNeutralStrokeAccessible);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1krrbdw{border-bottom-right-radius:0;}", ".f1deotkl{border-bottom-left-radius:0;}", ".f10ostut{border-top-right-radius:0;}", ".f1ozlkrg{border-top-left-radius:0;}", ".fqvcdsd:after{border-bottom-right-radius:0;}", ".f9cg6ix:after{border-bottom-left-radius:0;}", ".f1pvm60u:after{border-top-right-radius:0;}", ".f179ivkp:after{border-top-left-radius:0;}", ".fyed02w{box-shadow:var(--shadow2);}", ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", ".f16xq7d1{background-color:var(--colorNeutralBackground3);}", ".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);}"], | ||
| "w": [".fnqdfvx:focus-within:after{-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}", ".fbqc2tv:focus-within:after{transition-property:transform;}", ".fvvig05:focus-within:after{transition-duration:0.2s;}", ".f1nwpqpa:focus-within:after{transition-delay:cubic-bezier(0.1,0.9,0.2,1);}", ".f1e6xsgv:focus-within:active:after{border-bottom-color:var(--colorCompoundBrandStrokePressed);}", ".f14a1fxs:focus-within{outline-width:2px;}", ".f3e99gv:focus-within{outline-style:solid;}", ".fhljsf7:focus-within{outline-color:transparent;}"], | ||
@@ -283,3 +283,3 @@ "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,:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f1tpwn32:hover,.f1tpwn32:focus-within{border-bottom-color:var(--colorTransparentStrokeInteractive);}", ".fsrcdbj:hover,.fsrcdbj:focus-within{border-left-color:var(--colorTransparentStrokeInteractive);}", ".f17blpuu:hover,:focus-within{border-right-color:var(--colorTransparentStrokeInteractive);}"], | ||
| export const useInputStyles = state => { | ||
| export const useInputStyles_unstable = state => { | ||
| const { | ||
@@ -286,0 +286,0 @@ size, |
| { | ||
| "name": "@fluentui/react-input", | ||
| "version": "0.0.0-nightly3bc051736320220112.1", | ||
| "version": "0.0.0-nightly43b133e62020220224.1", | ||
| "description": "Fluent UI React Input component", | ||
@@ -25,12 +25,9 @@ "main": "lib-commonjs/index.js", | ||
| "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-input/src && yarn docs", | ||
| "build-storybook": "just-scripts storybook:build", | ||
| "storybook": "start-storybook", | ||
| "storybook": "node ../../scripts/storybook/runner", | ||
| "type-check": "tsc -b tsconfig.json" | ||
| }, | ||
| "devDependencies": { | ||
| "@fluentui/babel-make-styles": "0.0.0-nightly3bc051736320220112.1", | ||
| "@fluentui/eslint-plugin": "*", | ||
| "@fluentui/jest-serializer-make-styles": "0.0.0-nightly3bc051736320220112.1", | ||
| "@fluentui/react-conformance": "*", | ||
| "@fluentui/react-conformance-make-styles": "0.0.0-nightly3bc051736320220112.1", | ||
| "@fluentui/react-conformance-griffel": "0.0.0-nightly43b133e62020220224.1", | ||
| "@fluentui/scripts": "^1.0.0", | ||
@@ -49,4 +46,5 @@ "@types/enzyme": "3.10.3", | ||
| "dependencies": { | ||
| "@fluentui/react-make-styles": "0.0.0-nightly3bc051736320220112.1", | ||
| "@fluentui/react-utilities": "0.0.0-nightly3bc051736320220112.1", | ||
| "@fluentui/react-theme": "0.0.0-nightly43b133e62020220224.1", | ||
| "@fluentui/react-utilities": "0.0.0-nightly43b133e62020220224.1", | ||
| "@griffel/react": "1.0.0", | ||
| "tslib": "^2.1.0" | ||
@@ -53,0 +51,0 @@ }, |
@@ -41,4 +41,4 @@ # Input Variants | ||
| > = { | ||
| root: ObjectShorthandProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; | ||
| input: ObjectShorthandProps<TInputAttributes, TInput>; | ||
| root: ComponentSlotProps<React.HTMLAttributes<HTMLElement>, HTMLElement>; | ||
| input: ComponentSlotProps<TInputAttributes, TInput>; | ||
| }; | ||
@@ -45,0 +45,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.25%
205344
- Dev dependency count
- decreased by-12.5%
14
- Lines of code
- increased by4.83%
2429
Worsened metrics
- Dependency count
- increased by14.29%
8
Dependency changes
+ Added@fluentui/react-theme@0.0.0-nightly43b133e62020220224.1
+ Added@griffel/react@1.0.0
+ Added@fluentui/keyboard-keys@0.0.0-nightly43b133e62020220224.1(transitive)
+ Added@fluentui/react-theme@0.0.0-nightly43b133e62020220224.1(transitive)
+ Added@fluentui/react-utilities@0.0.0-nightly43b133e62020220224.1(transitive)
+ Added@griffel/core@1.0.7(transitive)
+ Added@griffel/react@1.0.0(transitive)
- Removed@fluentui/react-make-styles@0.0.0-nightly3bc051736320220112.1
- Removed@fluentui/keyboard-keys@0.0.0-nightly3bc051736320220112.1(transitive)
- Removed@fluentui/make-styles@0.0.0-nightly3bc051736320220112.1(transitive)
- Removed@fluentui/react-make-styles@0.0.0-nightly3bc051736320220112.1(transitive)
- Removed@fluentui/react-shared-contexts@0.0.0-nightly3bc051736320220112.1(transitive)
- Removed@fluentui/react-theme@0.0.0-nightly3bc051736320220112.1(transitive)
- Removed@fluentui/react-utilities@0.0.0-nightly3bc051736320220112.1(transitive)
Updated@fluentui/react-utilities@0.0.0-nightly43b133e62020220224.1