@khanacademy/wonder-blocks-accordion 2.0.1 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.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-typography@3.0.2
+
 ## 2.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
-import { addStyle, View, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { HeadingSmall, Body } from '@khanacademy/wonder-blocks-typography';
 import caretDown from '@phosphor-icons/core/bold/caret-down-bold.svg';
@@ -316,10 +317,11 @@ const AccordionSection = React.forwardRef(function AccordionSection(props, ref)
     ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
   const [internalExpanded, setInternalExpanded] = React.useState(expanded != null ? expanded : false);
   const controlledMode = expanded !== undefined && onToggle;
-  const ids = useUniqueIdWithMock();
-  const sectionId = id != null ? id : ids.get("accordion-section");
-  const headerId = id ? `${id}-header` : ids.get("accordion-section-header");
-  const sectionContentUniqueId = ids.get("accordion-section-content");
+  const uniqueSectionId = useId();
+  const sectionId = id != null ? id : uniqueSectionId;
+  const uniqueHeaderId = useId();
+  const headerId = id ? `${id}-header` : uniqueHeaderId;
+  const sectionContentUniqueId = useId();
   const sectionStyles = _generateStyles(cornerKind, isFirstSection, isLastSection);
   const handleClick = () => {
     if (controlledMode) {

package/dist/index.js

@@ -345,10 +345,11 @@ const AccordionSection = React__namespace.forwardRef(function AccordionSection(p
     ariaProps = _objectWithoutPropertiesLoose(props, _excluded);
   const [internalExpanded, setInternalExpanded] = React__namespace.useState(expanded != null ? expanded : false);
   const controlledMode = expanded !== undefined && onToggle;
-  const ids = wonderBlocksCore.useUniqueIdWithMock();
-  const sectionId = id != null ? id : ids.get("accordion-section");
-  const headerId = id ? `${id}-header` : ids.get("accordion-section-header");
-  const sectionContentUniqueId = ids.get("accordion-section-content");
+  const uniqueSectionId = React.useId();
+  const sectionId = id != null ? id : uniqueSectionId;
+  const uniqueHeaderId = React.useId();
+  const headerId = id ? `${id}-header` : uniqueHeaderId;
+  const sectionContentUniqueId = React.useId();
   const sectionStyles = _generateStyles(cornerKind, isFirstSection, isLastSection);
   const handleClick = () => {
     if (controlledMode) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-accordion",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "design": "v1",
   "description": "Accordion components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,11 +16,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "^5.0.1",
-    "@khanacademy/wonder-blocks-core": "^9.0.0",
-    "@khanacademy/wonder-blocks-icon": "^5.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-tokens": "^3.0.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.1"
+    "@khanacademy/wonder-blocks-typography": "^3.0.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",