@fluentui/react-input - npm Package Compare versions

Comparing version 0.0.0-nightly63afcc343820220120.1 to 0.0.0-nightly695230dc7220220301.1

CHANGELOG.json

@@ -5,5 +5,5 @@ {
     {
-      "date": "Thu, 20 Jan 2022 04:17:49 GMT",
-      "tag": "@fluentui/react-input_v0.0.0-nightly63afcc343820220120.1",
-      "version": "0.0.0-nightly63afcc343820220120.1",
+      "date": "Tue, 01 Mar 2022 04:14:59 GMT",
+      "tag": "@fluentui/react-input_v0.0.0-nightly695230dc7220220301.1",
+      "version": "0.0.0-nightly695230dc7220220301.1",
       "comments": {
@@ -14,28 +14,37 @@ "prerelease": [
             "package": "@fluentui/react-input",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8",
+            "commit": "be1864c428aedd3bb265318a6cb6cf161ded2472",
             "comment": "Release nightly v9"
           },
           {
-            "author": "[e-mail]",
+            "author": "beachball",
             "package": "@fluentui/react-input",
-            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
-            "comment": "Remove component's shorthandProps array"
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly695230dc7220220301.1",
+            "commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
           },
           {
-            "author": "[e-mail]",
+            "author": "beachball",
             "package": "@fluentui/react-input",
-            "commit": "d61d7925180bc36f13e83c6512c8f3e1885025a2",
-            "comment": "Fix styling issues found in accessibility review"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly695230dc7220220301.1",
+            "commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
           },
           {
-            "author": "[e-mail]",
+            "author": "beachball",
             "package": "@fluentui/react-input",
-            "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8",
-            "comment": "Initial release"
-          },
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly695230dc7220220301.1",
+            "commit": "be1864c428aedd3bb265318a6cb6cf161ded2472"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Mar 2022 02:17:36 GMT",
+      "tag": "@fluentui/react-input_v9.0.0-beta.4",
+      "version": "9.0.0-beta.4",
+      "comments": {
+        "prerelease": [
           {
-            "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": "084d7408855f3e52b67cbca172da1acef9dcb98f",
+            "comment": "fix: Add react-theme as dependency"
           },
@@ -45,10 +54,19 @@ {
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly63afcc343820220120.1",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8"
-          },
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.4",
+            "commit": "0bc1e755543ed69443d5d03e1976c630583242f7"
+          }
+        ]
+      }
+    },
+    {
+      "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": "beachball",
+            "author": "[e-mail]",
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly63afcc343820220120.1",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8"
+            "commit": "1aa9e691fcccd9a64168cea7941c0f1e71fa1d14",
+            "comment": "fix: Source maps contain original source code"
           },
@@ -58,4 +76,4 @@ {
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly63afcc343820220120.1",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8"
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.3",
+            "commit": "3b9c1e931c23173da3d1af0c696cdc58516ce504"
           },
@@ -65,12 +83,13 @@ {
             "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly63afcc343820220120.1",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8"
-          },
-          {
-            "author": "beachball",
-            "package": "@fluentui/react-input",
-            "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly63afcc343820220120.1",
-            "commit": "1f354b562240b78c25d35df7989491f6eca92ef8"
+            "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": [
@@ -84,2 +103,14 @@ {
           {
+            "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]",
@@ -95,3 +126,83 @@ "package": "@fluentui/react-input",
             "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]",
+            "package": "@fluentui/react-input",
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "d61d7925180bc36f13e83c6512c8f3e1885025a2",
+            "comment": "Fix styling issues found in accessibility review"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "c00913d50e2dd15bbfbb0757cefe43b192ff1d7f",
+            "comment": "Bump Fluent UI dependencies to 9.0.0-rc"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "d084da4f0a5501c074d3f278098d5084f891b09c",
+            "comment": "Replace make-styles packages with griffel equivalents."
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "53b01d71e335715fda91b33e3d7bbd9d471d5ed3",
+            "comment": "Refactor component Slot typings"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "ca6ef2bc8ea258de6f3e995731bf73743dfce1f8",
+            "comment": "Initial release"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@fluentui/react-input",
+            "commit": "e0b8e1fa6980077e7b311fd1c72c28d3e4305db0",
+            "comment": "Updating based on changes to composition types."
+          },
+          {
+            "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."
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-input",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.1",
+            "commit": "e6c855f6d9019d6c73668d15fc9bc3a13291a6c8"
+          }
         ]
@@ -98,0 +209,0 @@ }

CHANGELOG.md

 # Change Log - @fluentui/react-input
 
-This log was last generated on Thu, 20 Jan 2022 04:17:49 GMT and should not be manually modified.
+This log was last generated on Tue, 01 Mar 2022 04:14:59 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly63afcc343820220120.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly63afcc343820220120.1)
+## [0.0.0-nightly695230dc7220220301.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v0.0.0-nightly695230dc7220220301.1)
 
-Thu, 20 Jan 2022 04:17:49 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.0..@fluentui/react-input_v0.0.0-nightly63afcc343820220120.1)
+Tue, 01 Mar 2022 04:14:59 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.4..@fluentui/react-input_v0.0.0-nightly695230dc7220220301.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) by email not defined)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by email not defined)
+- Bump @fluentui/react-theme to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly695230dc7220220301.1 ([commit](https://github.com/microsoft/fluentui/commit/be1864c428aedd3bb265318a6cb6cf161ded2472) by beachball)
+
+## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-input_v9.0.0-beta.4)
+
+Tue, 01 Mar 2022 02:17:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-input_v9.0.0-beta.3..@fluentui/react-input_v9.0.0-beta.4)
+
+### Changes
+
+- fix: Add react-theme as dependency ([PR #21825](https://github.com/microsoft/fluentui/pull/21825) by [e-mail])
+- Bump @fluentui/react-utilities to v9.0.0-rc.4 ([PR #21884](https://github.com/microsoft/fluentui/pull/21884) 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-nightly63afcc343820220120.1 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly63afcc343820220120.1 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly63afcc343820220120.1 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly63afcc343820220120.1 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly63afcc343820220120.1 ([commit](https://github.com/microsoft/fluentui/commit/1f354b562240b78c25d35df7989491f6eca92ef8) 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)
 
@@ -25,0 +59,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'>;
 };
@@ -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 { }

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.**
  */
@@ -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

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.d.ts

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

lib-commonjs/components/Input/renderInput.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.renderInput = void 0;
+exports.renderInput_unstable = void 0;
 
@@ -17,3 +17,3 @@ const React = /*#__PURE__*/require("react");
 
-const renderInput = state => {
+const renderInput_unstable = state => {
   const {
@@ -24,9 +24,9 @@ slots,
   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

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

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

lib-commonjs/components/Input/useInput.js

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

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

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

lib-commonjs/components/Input/useInputStyles.js

@@ -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": {
@@ -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": {
@@ -295,3 +295,3 @@ "B7ck84d": "f1ewtqcl",
 
-const useInputStyles = state => {
+const useInputStyles_unstable = state => {
   const {
@@ -306,12 +306,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);
   }
@@ -322,3 +322,3 @@
 
-exports.useInputStyles = useInputStyles;
+exports.useInputStyles_unstable = useInputStyles_unstable;
 //# sourceMappingURL=useInputStyles.js.map

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

 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

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.d.ts

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

lib/components/Input/renderInput.js

@@ -7,3 +7,3 @@ import * as React from 'react';
 
-export const renderInput = state => {
+export const renderInput_unstable = state => {
   const {
@@ -14,7 +14,7 @@ slots,
   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/useInput.d.ts

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

lib/components/Input/useInput.js

@@ -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',

lib/components/Input/useInputStyles.d.ts

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

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

package.json

 {
   "name": "@fluentui/react-input",
-  "version": "0.0.0-nightly63afcc343820220120.1",
+  "version": "0.0.0-nightly695230dc7220220301.1",
   "description": "Fluent UI React Input component",
@@ -29,7 +29,5 @@ "main": "lib-commonjs/index.js",
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightly63afcc343820220120.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightly63afcc343820220120.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightly63afcc343820220120.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly695230dc7220220301.1",
     "@fluentui/scripts": "^1.0.0",
@@ -48,4 +46,5 @@ "@types/enzyme": "3.10.3",
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly63afcc343820220120.1",
-    "@fluentui/react-utilities": "0.0.0-nightly63afcc343820220120.1",
+    "@fluentui/react-theme": "0.0.0-nightly695230dc7220220301.1",
+    "@fluentui/react-utilities": "0.0.0-nightly695230dc7220220301.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
@@ -52,0 +51,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 @@ ```

New alerts

License Policy Violation

License

This 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

License

This 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

206203

increased by21.23%

Dev dependency count

14

decreased by-12.5%

Lines of code

2444

increased by4.31%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@fluentui/react-theme@0.0.0-nightly695230dc7220220301.1

• + Added@griffel/react@1.0.0

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

• + Added@fluentui/react-theme@0.0.0-nightly695230dc7220220301.1(transitive)

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

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

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

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

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

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

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

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

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