@fluentui/react-input - npm Package Compare versions

Comparing version 0.0.0-nightly6a6e258c4020220125.1 to 0.0.0-nightly6faffd280a20220221.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Tue, 25 Jan 2022 04:17:18 GMT",
-      "tag": "@fluentui/react-input_v0.0.0-nightly6a6e258c4020220125.1",
-      "version": "0.0.0-nightly6a6e258c4020220125.1",
+      "date": "Mon, 21 Feb 2022 04:15:28 GMT",
+      "tag": "@fluentui/react-input_v0.0.0-nightly6faffd280a20220221.1",
+      "version": "0.0.0-nightly6faffd280a20220221.1",
       "comments": {
@@ -14,6 +14,98 @@ "prerelease": [
             "package": "@fluentui/react-input",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd",
             "comment": "Release nightly v9"
           },
           {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly6faffd280a20220221.1",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly6faffd280a20220221.1",
+            "commit": "01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd"
+          }
+        ]
+      }
+    },
+    {
+      "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": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
+            "comment": "fix: Source maps contain original source code"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "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": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "4bd15194a66379b165043141c266faa0c1ea1502",
+            "comment": "document how to import preview components"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "a15d363937fad523e90350458ec3e44fe7199dc0",
+            "comment": "Move Storybook stories to Preview Components section"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "d757e76e91527fb821c3e1707db48f1745bf44ca",
+            "comment": "Rmoved config with just-scripts"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "96d9c93544464bcc5ec36b7c5d724b77ae499c73",
+            "comment": "Update docs description"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "c0d4e63ee58e60e2c6674efbacc0783cd520984e",
+            "comment": "Updates components with nullRender changes"
+          }
+        ],
+        "prerelease": [
+          {
             "author": "[e-mail]",
@@ -37,36 +129,36 @@ "package": "@fluentui/react-input",
           {
-            "author": "[e-mail]",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8",
-            "comment": "Initial release"
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI dependencies to 9.0.0-rc"
           },
           {
-            "author": "[e-mail]",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "commit": "9f5e897597cb3de56c32fe750d45c9d2a1ea838a",
-            "comment": "Replacing use of functions in makeStyles with direct use of tokens and removing old version of stories."
+            "commit": "d084da4f0a5501c074d3f278098d5084f891b09c",
+            "comment": "Replace make-styles packages with griffel equivalents."
           },
           {
-            "author": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly6a6e258c4020220125.1",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
+            "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
+            "comment": "Refactor component Slot typings"
           },
           {
-            "author": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly6a6e258c4020220125.1",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
+            "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8",
+            "comment": "Initial release"
           },
           {
-            "author": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly6a6e258c4020220125.1",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
+            "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
+            "comment": "Updating based on changes to composition types."
           },
           {
-            "author": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly6a6e258c4020220125.1",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
+            "commit": "9f5e897597cb3de56c32fe750d45c9d2a1ea838a",
+            "comment": "Replacing use of functions in makeStyles with direct use of tokens and removing old version of stories."
           },
@@ -76,24 +168,10 @@ {
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly6a6e258c4020220125.1",
-            "commit": "1d41ec351a6d5902e871c87fcbaacf8db8ecb40d"
-          }
-        ],
-        "none": [
-          {
-            "author": "[e-mail]",
-            "package": "@fluentui/react-input",
-            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
-            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
           },
           {
-            "author": "[e-mail]",
+            "author": "beachball",
             "package": "@fluentui/react-input",
-            "commit": "d757e76e91527fb821c3e1707db48f1745bf44ca",
-            "comment": "Rmoved config with just-scripts"
-          },
-          {
-            "author": "[e-mail]",
-            "package": "@fluentui/react-input",
-            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
-            "comment": "chore: use storybook runner for all vNext packages"
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
           }
@@ -100,0 +178,0 @@ ]

CHANGELOG.md

 # Change Log - @fluentui/react-input
 
-This log was last generated on Tue, 25 Jan 2022 04:17:18 GMT and should not be manually modified.
+This log was last generated on Mon, 21 Feb 2022 04:15:28 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly6a6e258c4020220125.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly6a6e258c4020220125.1)
+## [0.0.0-nightly6faffd280a20220221.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly6faffd280a20220221.1)
 
-Tue, 25 Jan 2022 04:17:18 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v0.0.0-nightly6a6e258c4020220125.1)
+Mon, 21 Feb 2022 04:15:28 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.3..@fluentui/react-input_v0.0.0-nightly6faffd280a20220221.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) by email not defined)
+- Bump @fluentui/react-utilities to v0.0.0-nightly6faffd280a20220221.1 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly6faffd280a20220221.1 ([commit](https://github.com/microsoft/fluentui/commit/01ee61722cce4da8e5deb9a2ab00f4e27fc01cfd) 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 [e-mail])
+- 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 [e-mail])
 - Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by [e-mail])
 - Fix styling issues found in accessibility review ([PR #21205](https://github.com/microsoft/fluentui/pull/21205) by [e-mail])
+- Bump Fluent UI dependencies to 9.0.0-rc ([PR #21623](https://github.com/microsoft/fluentui/pull/21623) by [e-mail])
+- Replace make-styles packages with griffel equivalents. ([PR #21431](https://github.com/microsoft/fluentui/pull/21431) by [e-mail])
+- Refactor component Slot typings ([PR #21518](https://github.com/microsoft/fluentui/pull/21518) by [e-mail])
 - Initial release ([PR #21142](https://github.com/microsoft/fluentui/pull/21142) by [e-mail])
+- Updating based on changes to composition types. ([PR #20891](https://github.com/microsoft/fluentui/pull/20891) by [e-mail])
 - 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 [e-mail])
-- Bump @fluentui/react-make-styles to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly6a6e258c4020220125.1 ([commit](https://github.com/microsoft/fluentui/commit/1d41ec351a6d5902e871c87fcbaacf8db8ecb40d) 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)
 
@@ -26,0 +48,0 @@ ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.0)

dist/react-input.d.ts

 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'>;
 };
@@ -99,0 +97,0 @@

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

@@ -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>;

lib-commonjs/components/Input/Input.js

@@ -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.**
  */
@@ -21,0 +19,0 @@

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

 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;

lib-commonjs/components/Input/renderInput.js

@@ -22,5 +22,5 @@ "use strict";
   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
   }));
@@ -27,0 +27,0 @@ };

lib-commonjs/components/Input/useInputStyles.js

@@ -8,3 +8,3 @@ "use strict";
 
-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": {
@@ -230,3 +230,3 @@ "mc9l5x": "f22iagw",
 
-const useInputElementStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useInputElementStyles = /*#__PURE__*/react_1.__styles({
   "base": {
@@ -277,3 +277,3 @@ "B7ck84d": "f1ewtqcl",
 
-const useContentStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useContentStyles = /*#__PURE__*/react_1.__styles({
   "base": {
@@ -305,12 +305,12 @@ "B7ck84d": "f1ewtqcl",
   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);
   }
@@ -317,0 +317,0 @@

lib/components/Input/Input.d.ts

@@ -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>;

lib/components/Input/Input.js

@@ -7,4 +7,2 @@ import * as React from 'react';
  * 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.**
  */
@@ -11,0 +9,0 @@

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

 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;

lib/components/Input/renderInput.js

@@ -13,7 +13,7 @@ import * as React from 'react';
   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

lib/components/Input/useInputStyles.js

@@ -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';
@@ -3,0 +3,0 @@ export const inputClassName = 'fui-Input'; // TODO(sharing) use theme values once available

package.json

 {
   "name": "@fluentui/react-input",
-  "version": "0.0.0-nightly6a6e258c4020220125.1",
+  "version": "0.0.0-nightly6faffd280a20220221.1",
   "description": "Fluent UI React Input component",
@@ -29,7 +29,5 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly6faffd280a20220221.1",
     "@fluentui/scripts": "^1.0.0",
@@ -48,4 +46,4 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly6a6e258c4020220125.1",
-    "@fluentui/react-utilities": "0.0.0-nightly6a6e258c4020220125.1",
+    "@fluentui/react-utilities": "0.0.0-nightly6faffd280a20220221.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
@@ -52,0 +50,0 @@ },

Spec-variants.md

@@ -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 @@ ```

No alert changes

Improved metrics

Total package byte prevSize

204462

increased by19.55%

Dev dependency count

14

decreased by-12.5%

Lines of code

2417

increased by2.89%

Dependency changes

• + Added@griffel/react@1.0.0

• + Added@fluentui/keyboard-keys@0.0.0-nightly6faffd280a20220221.1(transitive)

• + Added@fluentui/react-utilities@0.0.0-nightly6faffd280a20220221.1(transitive)

• + Added@griffel/react@1.0.0(transitive)

• - Removed@fluentui/react-make-styles@0.0.0-nightly6a6e258c4020220125.1

• - Removed@fluentui/keyboard-keys@0.0.0-nightly6a6e258c4020220125.1(transitive)

• - Removed@fluentui/react-make-styles@0.0.0-nightly6a6e258c4020220125.1(transitive)

• - Removed@fluentui/react-shared-contexts@0.0.0-nightly6a6e258c4020220125.1(transitive)

• - Removed@fluentui/react-theme@0.0.0-nightly6a6e258c4020220125.1(transitive)

• - Removed@fluentui/react-utilities@0.0.0-nightly6a6e258c4020220125.1(transitive)

• Updated@fluentui/react-utilities@0.0.0-nightly6faffd280a20220221.1