@khanacademy/wonder-blocks-tooltip 3.0.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-tooltip
 
+## 4.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-modal@7.0.0
+    -   @khanacademy/wonder-blocks-layout@3.0.2
+    -   @khanacademy/wonder-blocks-typography@3.0.2
+
 ## 3.0.1
 
 ### Patch Changes

package/dist/components/tooltip-anchor.d.ts

@@ -3,7 +3,6 @@
  * positioning and displaying tooltips.
  */
 import * as React from "react";
-import type { IIdentifierFactory } from "@khanacademy/wonder-blocks-core";
 import type { IActiveTrackerSubscriber } from "../util/active-tracker";
 type Props = {
     /**
@@ -43,9 +42,9 @@ type Props = {
      */
     onActiveChanged: (active: boolean) => unknown;
     /**
-     * Optional unique id factory.
+     * Optional unique id.
      */
-    ids?: IIdentifierFactory;
+    id?: string | undefined;
 };
 type DefaultProps = {
     forceAnchorFocusivity: Props["forceAnchorFocusivity"];
@@ -79,7 +78,7 @@ export default class TooltipAnchor extends React.Component<Props, State> impleme
     _handleMouseLeave: () => void;
     _handleKeyUp: (e: KeyboardEvent) => void;
     _renderAnchorableChildren(): React.ReactElement<any>;
-    _renderAccessibleChildren(ids: IIdentifierFactory): React.ReactNode;
+    _renderAccessibleChildren(uniqueId: string): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/tooltip.d.ts

@@ -18,7 +18,6 @@
  *                     callout to the anchor content)
  */
 import * as React from "react";
-import { IIdentifierFactory } from "@khanacademy/wonder-blocks-core";
 import type { Typography } from "@khanacademy/wonder-blocks-typography";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
 import { color } from "@khanacademy/wonder-blocks-tokens";
@@ -158,12 +157,11 @@ export default class Tooltip extends React.Component<Props, State> {
      */
     static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
     state: State;
-    static ariaContentId: string;
     _updateAnchorElement(ref?: Element | null): void;
     _renderBubbleContent(): React.ReactElement<React.ComponentProps<typeof TooltipContent>>;
-    _renderPopper(ids?: IIdentifierFactory): React.ReactNode;
+    _renderPopper(bubbleId: string): React.ReactNode;
     _getHost(): Element | null | undefined;
-    _renderTooltipAnchor(ids?: IIdentifierFactory): React.ReactNode;
+    _renderTooltipAnchor(uniqueId: string): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { Text as Text$1, View, UniqueIDProvider } from '@khanacademy/wonder-blocks-core';
+import { Text as Text$1, View, Id } from '@khanacademy/wonder-blocks-core';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { StyleSheet, css } from 'aphrodite';
 import { spacing, color } from '@khanacademy/wonder-blocks-tokens';
@@ -193,15 +193,15 @@ class TooltipAnchor extends React.Component {
     } = this.props;
     return typeof children === "string" ? React.createElement(Text$1, null, children) : children;
   }
-  _renderAccessibleChildren(ids) {
+  _renderAccessibleChildren(uniqueId) {
     const anchorableChildren = this._renderAnchorableChildren();
     return React.cloneElement(anchorableChildren, {
-      "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
+      "aria-describedby": `${uniqueId}-${TooltipAnchor.ariaContentId}`
     });
   }
   render() {
-    if (this.props.ids) {
-      return this._renderAccessibleChildren(this.props.ids);
+    if (this.props.id) {
+      return this._renderAccessibleChildren(this.props.id);
     }
     return this._renderAnchorableChildren();
   }
@@ -809,16 +809,9 @@ class Tooltip extends React.Component {
       return content;
     }
   }
-  _renderPopper(ids) {
-    const {
-      id,
-      backgroundColor
-    } = this.props;
-    const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-    if (!bubbleId) {
-      throw new Error("Did not get an identifier factory nor a id prop");
-    }
+  _renderPopper(bubbleId) {
     const {
+      backgroundColor,
       placement
     } = this.props;
     return React.createElement(TooltipPopper, {
@@ -846,7 +839,7 @@ class Tooltip extends React.Component {
     } = this.state;
     return maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
   }
-  _renderTooltipAnchor(ids) {
+  _renderTooltipAnchor(uniqueId) {
     const {
       autoUpdate,
       children,
@@ -865,27 +858,21 @@ class Tooltip extends React.Component {
       onActiveChanged: active => this.setState({
         active
       }),
-      ids: ids
-    }, children), shouldBeVisible && ReactDOM.createPortal(this._renderPopper(ids), popperHost));
+      id: `${uniqueId}-anchor`
+    }, children), shouldBeVisible && ReactDOM.createPortal(this._renderPopper(uniqueId), popperHost));
   }
   render() {
     const {
       id
     } = this.props;
-    if (id) {
-      return this._renderTooltipAnchor();
-    } else {
-      return React.createElement(UniqueIDProvider, {
-        scope: "tooltip",
-        mockOnFirstRender: true
-      }, ids => this._renderTooltipAnchor(ids));
-    }
+    return React.createElement(Id, {
+      id: id
+    }, uniqueId => this._renderTooltipAnchor(uniqueId));
   }
 }
 Tooltip.defaultProps = {
   forceAnchorFocusivity: true,
   placement: "top"
 };
-Tooltip.ariaContentId = "aria-content";
 
 export { TooltipContent, TooltipPopper, TooltipTail, Tooltip as default };

package/dist/index.js

@@ -221,15 +221,15 @@ class TooltipAnchor extends React__namespace.Component {
     } = this.props;
     return typeof children === "string" ? React__namespace.createElement(wonderBlocksCore.Text, null, children) : children;
   }
-  _renderAccessibleChildren(ids) {
+  _renderAccessibleChildren(uniqueId) {
     const anchorableChildren = this._renderAnchorableChildren();
     return React__namespace.cloneElement(anchorableChildren, {
-      "aria-describedby": ids.get(TooltipAnchor.ariaContentId)
+      "aria-describedby": `${uniqueId}-${TooltipAnchor.ariaContentId}`
     });
   }
   render() {
-    if (this.props.ids) {
-      return this._renderAccessibleChildren(this.props.ids);
+    if (this.props.id) {
+      return this._renderAccessibleChildren(this.props.id);
     }
     return this._renderAnchorableChildren();
   }
@@ -837,16 +837,9 @@ class Tooltip extends React__namespace.Component {
       return content;
     }
   }
-  _renderPopper(ids) {
-    const {
-      id,
-      backgroundColor
-    } = this.props;
-    const bubbleId = ids ? ids.get(Tooltip.ariaContentId) : id;
-    if (!bubbleId) {
-      throw new Error("Did not get an identifier factory nor a id prop");
-    }
+  _renderPopper(bubbleId) {
     const {
+      backgroundColor,
       placement
     } = this.props;
     return React__namespace.createElement(TooltipPopper, {
@@ -874,7 +867,7 @@ class Tooltip extends React__namespace.Component {
     } = this.state;
     return wonderBlocksModal.maybeGetPortalMountedModalHostElement(anchorElement) || document.body;
   }
-  _renderTooltipAnchor(ids) {
+  _renderTooltipAnchor(uniqueId) {
     const {
       autoUpdate,
       children,
@@ -893,28 +886,22 @@ class Tooltip extends React__namespace.Component {
       onActiveChanged: active => this.setState({
         active
       }),
-      ids: ids
-    }, children), shouldBeVisible && ReactDOM__namespace.createPortal(this._renderPopper(ids), popperHost));
+      id: `${uniqueId}-anchor`
+    }, children), shouldBeVisible && ReactDOM__namespace.createPortal(this._renderPopper(uniqueId), popperHost));
   }
   render() {
     const {
       id
     } = this.props;
-    if (id) {
-      return this._renderTooltipAnchor();
-    } else {
-      return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-        scope: "tooltip",
-        mockOnFirstRender: true
-      }, ids => this._renderTooltipAnchor(ids));
-    }
+    return React__namespace.createElement(wonderBlocksCore.Id, {
+      id: id
+    }, uniqueId => this._renderTooltipAnchor(uniqueId));
   }
 }
 Tooltip.defaultProps = {
   forceAnchorFocusivity: true,
   placement: "top"
 };
-Tooltip.ariaContentId = "aria-content";
 
 exports.TooltipContent = TooltipContent;
 exports.TooltipPopper = TooltipPopper;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tooltip",
-  "version": "3.0.1",
+  "version": "4.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,11 +16,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^9.0.0",
-    "@khanacademy/wonder-blocks-layout": "^3.0.1",
-    "@khanacademy/wonder-blocks-modal": "^6.0.1",
+    "@khanacademy/wonder-blocks-core": "^10.0.0",
+    "@khanacademy/wonder-blocks-layout": "^3.0.2",
+    "@khanacademy/wonder-blocks-modal": "^7.0.0",
     "@khanacademy/wonder-blocks-tokens": "^3.0.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.1"
+    "@khanacademy/wonder-blocks-typography": "^3.0.2"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",