@khanacademy/wonder-blocks-form 5.0.2 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-form
 
+## 6.0.0
+
+### Major Changes
+
+-   56d961f1: - Migrate Wonder Blocks components off old id providers and onto new `Id` component
+
+### Patch Changes
+
+-   b6009b77: Deprecate the ID provider and unique ID utilities
+-   Updated dependencies [b6009b77]
+-   Updated dependencies [897686bc]
+-   Updated dependencies [56d961f1]
+    -   @khanacademy/wonder-blocks-core@10.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.2
+    -   @khanacademy/wonder-blocks-icon@5.0.2
+    -   @khanacademy/wonder-blocks-layout@3.0.2
+    -   @khanacademy/wonder-blocks-typography@3.0.2
+
 ## 5.0.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,8 +1,9 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
+import { useId } from 'react';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import { StyleSheet } from 'aphrodite';
-import { addStyle, UniqueIDProvider, View, useOnMountEffect, IDProvider, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import { addStyle, Id, View, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
@@ -368,12 +369,10 @@ const ChoiceInternal = React.forwardRef(function ChoiceInternal(props, ref) {
     }, description);
   };
   const ChoiceCore = getChoiceCoreComponent();
-  return React.createElement(UniqueIDProvider, {
-    mockOnFirstRender: true,
-    scope: "choice"
-  }, ids => {
-    const uniqueId = id || ids.get("main");
-    const descriptionId = description ? ids.get("description") : undefined;
+  return React.createElement(Id, {
+    id: id
+  }, uniqueId => {
+    const descriptionId = description ? `${uniqueId}-description` : undefined;
     return React.createElement(View, {
       style: style,
       className: className
@@ -713,9 +712,8 @@ const TextField = props => {
     const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
-  return React.createElement(IDProvider, {
-    id: id,
-    scope: "text-field"
+  return React.createElement(Id, {
+    id: id
   }, uniqueId => React.createElement(StyledInput, _extends({
     style: [getStyles(), style],
     id: uniqueId,
@@ -999,9 +997,8 @@ class LabeledTextField extends React.Component {
         name
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-    return React.createElement(IDProvider, {
-      id: id,
-      scope: "labeled-text-field"
+    return React.createElement(Id, {
+      id: id
     }, uniqueId => React.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
@@ -1094,8 +1091,8 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     instantValidation
   });
   const hasError = error || !!errorMessage;
-  const ids = useUniqueIdWithMock("text-area");
-  const uniqueId = id != null ? id : ids.get("id");
+  const generatedUniqueId = useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const handleChange = event => {
     const newValue = event.target.value;
     onChangeValidation(newValue);

package/dist/index.js

@@ -398,12 +398,10 @@ const ChoiceInternal = React__namespace.forwardRef(function ChoiceInternal(props
     }, description);
   };
   const ChoiceCore = getChoiceCoreComponent();
-  return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-    mockOnFirstRender: true,
-    scope: "choice"
-  }, ids => {
-    const uniqueId = id || ids.get("main");
-    const descriptionId = description ? ids.get("description") : undefined;
+  return React__namespace.createElement(wonderBlocksCore.Id, {
+    id: id
+  }, uniqueId => {
+    const descriptionId = description ? `${uniqueId}-description` : undefined;
     return React__namespace.createElement(wonderBlocksCore.View, {
       style: style,
       className: className
@@ -743,9 +741,8 @@ const TextField = props => {
     const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
-  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-    id: id,
-    scope: "text-field"
+  return React__namespace.createElement(wonderBlocksCore.Id, {
+    id: id
   }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
     style: [getStyles(), style],
     id: uniqueId,
@@ -1029,9 +1026,8 @@ class LabeledTextField extends React__namespace.Component {
         name
       } = _this$props,
       otherProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: id,
-      scope: "labeled-text-field"
+    return React__namespace.createElement(wonderBlocksCore.Id, {
+      id: id
     }, uniqueId => React__namespace.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
@@ -1124,8 +1120,8 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     instantValidation
   });
   const hasError = error || !!errorMessage;
-  const ids = wonderBlocksCore.useUniqueIdWithMock("text-area");
-  const uniqueId = id != null ? id : ids.get("id");
+  const generatedUniqueId = React.useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const handleChange = event => {
     const newValue = event.target.value;
     onChangeValidation(newValue);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^5.0.1",
-    "@khanacademy/wonder-blocks-core": "^9.0.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.1",
-    "@khanacademy/wonder-blocks-layout": "^3.0.1",
+    "@khanacademy/wonder-blocks-clickable": "^5.0.2",
+    "@khanacademy/wonder-blocks-core": "^10.0.0",
+    "@khanacademy/wonder-blocks-icon": "^5.0.2",
+    "@khanacademy/wonder-blocks-layout": "^3.0.2",
     "@khanacademy/wonder-blocks-tokens": "^3.0.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.1"
+    "@khanacademy/wonder-blocks-typography": "^3.0.2"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",