@khanacademy/wonder-blocks-dropdown 6.1.2 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 7.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-search-field@4.0.0
+    -   @khanacademy/wonder-blocks-modal@7.0.0
+    -   @khanacademy/wonder-blocks-cell@4.0.2
+    -   @khanacademy/wonder-blocks-clickable@5.0.2
+    -   @khanacademy/wonder-blocks-icon@5.0.2
+    -   @khanacademy/wonder-blocks-layout@3.0.2
+    -   @khanacademy/wonder-blocks-pill@3.0.2
+    -   @khanacademy/wonder-blocks-typography@3.0.2
+
 ## 6.1.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,12 +1,13 @@
 import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
+import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { CompactCell, DetailCell } from '@khanacademy/wonder-blocks-cell';
 import * as tokens from '@khanacademy/wonder-blocks-tokens';
 import { spacing, color, mix, fade, font, border, semanticColor } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
-import { View, addStyle, IDProvider, useOnMountEffect, useUniqueIdWithMock } from '@khanacademy/wonder-blocks-core';
+import { View, addStyle, Id, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -1612,9 +1613,8 @@ class ActionMenu extends React.Component {
       testId,
       id
     } = this.props;
-    return React.createElement(IDProvider, {
-      id: id,
-      scope: "action-menu-opener"
+    return React.createElement(Id, {
+      id: id
     }, uniqueOpenerId => React.createElement(DropdownOpener, {
       id: uniqueOpenerId,
       "aria-controls": dropdownId,
@@ -1646,9 +1646,8 @@ class ActionMenu extends React.Component {
       dropdownId
     } = this.props;
     const items = this.getMenuItems();
-    return React.createElement(IDProvider, {
-      id: dropdownId,
-      scope: "action-menu-dropdown"
+    return React.createElement(Id, {
+      id: dropdownId
     }, uniqueDropdownId => React.createElement(DropdownCore$1, {
       id: uniqueDropdownId,
       role: "menu",
@@ -2099,9 +2098,8 @@ const SingleSelect = props => {
     const items = React.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
-    const dropdownOpener = React.createElement(IDProvider, {
-      id: id,
-      scope: "single-select-opener"
+    const dropdownOpener = React.createElement(Id, {
+      id: id
     }, uniqueOpenerId => {
       return opener ? React.createElement(DropdownOpener, {
         id: uniqueOpenerId,
@@ -2134,9 +2132,8 @@ const SingleSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const items = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
-  return React.createElement(IDProvider, {
-    id: dropdownId,
-    scope: "single-select-dropdown"
+  return React.createElement(Id, {
+    id: dropdownId
   }, uniqueDropdownId => React.createElement(DropdownCore$1, {
     id: uniqueDropdownId,
     role: "listbox",
@@ -2382,9 +2379,8 @@ const MultiSelect = props => {
       noneSelected
     } = labels;
     const menuText = getMenuText(allChildren);
-    const dropdownOpener = React.createElement(IDProvider, {
-      id: id,
-      scope: "multi-select-opener"
+    const dropdownOpener = React.createElement(Id, {
+      id: id
     }, uniqueOpenerId => {
       return opener ? React.createElement(DropdownOpener, {
         id: uniqueOpenerId,
@@ -2423,9 +2419,8 @@ const MultiSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const filteredItems = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
-  return React.createElement(IDProvider, {
-    id: dropdownId,
-    scope: "multi-select-dropdown"
+  return React.createElement(Id, {
+    id: dropdownId
   }, uniqueDropdownId => React.createElement(DropdownCore$1, {
     id: uniqueDropdownId,
     role: "listbox",
@@ -2824,8 +2819,8 @@ function StandaloneListbox(props) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby
   } = props;
-  const ids = useUniqueIdWithMock("listbox");
-  const uniqueId = id != null ? id : ids.get("id");
+  const generatedUniqueId = useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const {
     focusedIndex,
     isListboxFocused,
@@ -2917,8 +2912,8 @@ function Combobox({
   value = ""
 }) {
   var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
-  const ids = useUniqueIdWithMock("combobox");
-  const uniqueId = id != null ? id : ids.get("listbox");
+  const generatedUniqueId = useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React.useRef(null);
   const rootNodeRef = React.useRef(null);
   const [open, setOpen] = React.useState(opened != null ? opened : false);
@@ -3070,7 +3065,8 @@ function Combobox({
       style: styles.iconWrapper
     }, startIconElement);
   };
-  const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
+  const pillIdPrefix = `${uniqueId}-pill-`;
+  const textFieldId = useId();
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React.createElement(React.Fragment, null, React.createElement(View, {
@@ -3099,7 +3095,7 @@ function Combobox({
     testId: testId,
     removeSelectedLabel: labels.removeSelected
   }), maybeRenderStartIcon(), React.createElement(TextField, {
-    id: ids.get("input"),
+    id: textFieldId,
     testId: testId,
     style: styles.combobox,
     value: inputValue,
@@ -3168,7 +3164,7 @@ function Combobox({
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,
-      "aria-labelledby": ids.get("input")
+      "aria-labelledby": textFieldId
     }, renderList));
   }));
 }

package/dist/index.js

@@ -1648,9 +1648,8 @@ class ActionMenu extends React__namespace.Component {
       testId,
       id
     } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: id,
-      scope: "action-menu-opener"
+    return React__namespace.createElement(wonderBlocksCore.Id, {
+      id: id
     }, uniqueOpenerId => React__namespace.createElement(DropdownOpener, {
       id: uniqueOpenerId,
       "aria-controls": dropdownId,
@@ -1682,9 +1681,8 @@ class ActionMenu extends React__namespace.Component {
       dropdownId
     } = this.props;
     const items = this.getMenuItems();
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: dropdownId,
-      scope: "action-menu-dropdown"
+    return React__namespace.createElement(wonderBlocksCore.Id, {
+      id: dropdownId
     }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
       id: uniqueDropdownId,
       role: "menu",
@@ -2135,9 +2133,8 @@ const SingleSelect = props => {
     const items = React__namespace.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
-    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: id,
-      scope: "single-select-opener"
+    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
+      id: id
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
@@ -2170,9 +2167,8 @@ const SingleSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const items = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
-  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-    id: dropdownId,
-    scope: "single-select-dropdown"
+  return React__namespace.createElement(wonderBlocksCore.Id, {
+    id: dropdownId
   }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
     id: uniqueDropdownId,
     role: "listbox",
@@ -2418,9 +2414,8 @@ const MultiSelect = props => {
       noneSelected
     } = labels;
     const menuText = getMenuText(allChildren);
-    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: id,
-      scope: "multi-select-opener"
+    const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
+      id: id
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
@@ -2459,9 +2454,8 @@ const MultiSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const filteredItems = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
-  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-    id: dropdownId,
-    scope: "multi-select-dropdown"
+  return React__namespace.createElement(wonderBlocksCore.Id, {
+    id: dropdownId
   }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
     id: uniqueDropdownId,
     role: "listbox",
@@ -2860,8 +2854,8 @@ function StandaloneListbox(props) {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledby
   } = props;
-  const ids = wonderBlocksCore.useUniqueIdWithMock("listbox");
-  const uniqueId = id != null ? id : ids.get("id");
+  const generatedUniqueId = React.useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const {
     focusedIndex,
     isListboxFocused,
@@ -2953,8 +2947,8 @@ function Combobox({
   value = ""
 }) {
   var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
-  const ids = wonderBlocksCore.useUniqueIdWithMock("combobox");
-  const uniqueId = id != null ? id : ids.get("listbox");
+  const generatedUniqueId = React.useId();
+  const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React__namespace.useRef(null);
   const rootNodeRef = React__namespace.useRef(null);
   const [open, setOpen] = React__namespace.useState(opened != null ? opened : false);
@@ -3106,7 +3100,8 @@ function Combobox({
       style: styles.iconWrapper
     }, startIconElement);
   };
-  const pillIdPrefix = id ? `${id}-pill-` : ids.get("pill");
+  const pillIdPrefix = `${uniqueId}-pill-`;
+  const textFieldId = React.useId();
   const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
@@ -3135,7 +3130,7 @@ function Combobox({
     testId: testId,
     removeSelectedLabel: labels.removeSelected
   }), maybeRenderStartIcon(), React__namespace.createElement(wonderBlocksForm.TextField, {
-    id: ids.get("input"),
+    id: textFieldId,
     testId: testId,
     style: styles.combobox,
     value: inputValue,
@@ -3204,7 +3199,7 @@ function Combobox({
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,
-      "aria-labelledby": ids.get("input")
+      "aria-labelledby": textFieldId
     }, renderList));
   }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "6.1.2",
+  "version": "7.0.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,17 +16,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^4.0.1",
-    "@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-modal": "^6.0.1",
-    "@khanacademy/wonder-blocks-pill": "^3.0.1",
-    "@khanacademy/wonder-blocks-search-field": "^3.1.2",
+    "@khanacademy/wonder-blocks-cell": "^4.0.2",
+    "@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-modal": "^7.0.0",
+    "@khanacademy/wonder-blocks-pill": "^3.0.2",
+    "@khanacademy/wonder-blocks-search-field": "^4.0.0",
     "@khanacademy/wonder-blocks-timing": "^6.0.0",
     "@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",
@@ -40,7 +40,7 @@
     "react-window": "^1.8.10"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^7.0.1",
+    "@khanacademy/wonder-blocks-button": "^7.0.2",
     "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }