@khanacademy/wonder-blocks-dropdown 3.1.10 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 4.0.0
+
+### Major Changes
+
+-   860d9ef9: Allow custom `ActionItem` components by using Cell internally.
+
+    -   Removed `ClickableBehavior` from `ActionItem` and replaced it with
+        `CompactCell` (which internally uses `Clickable`).
+    -   Removed `skipClientNav` from `ActionItem` as it is no longer used/needed.
+
+### Patch Changes
+
+-   Updated dependencies [860d9ef9]
+    -   @khanacademy/wonder-blocks-cell@3.1.0
+    -   @khanacademy/wonder-blocks-modal@4.0.38
+    -   @khanacademy/wonder-blocks-search-field@2.1.25
+
 ## 3.1.10
 
 ### Patch Changes

package/dist/components/action-item.d.ts

@@ -1,10 +1,12 @@
 import * as React from "react";
-import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import { CompactCell } from "@khanacademy/wonder-blocks-cell";
+import type { PropsFor, StyleType } from "@khanacademy/wonder-blocks-core";
+type CompactCellProps = PropsFor<typeof CompactCell>;
 type ActionProps = {
     /**
      * Display text of the action item.
      */
-    label: string;
+    label: string | CompactCellProps["title"];
     /**
      * Whether this action item is disabled.
      */
@@ -23,22 +25,9 @@ type ActionProps = {
     /**
      * A target destination window for a link to open in.
      *
-     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     * TODO(WB-1262): only allow this prop when `href` is also set.
      */
     target?: "_blank";
-    /**
-     * Whether to avoid using client-side navigation.
-     *
-     * If the URL passed to href is local to the client-side, e.g.
-     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
-     * component which handles the client-side navigation. You can set
-     * `skipClientNav` to true avoid using client-side nav entirely.
-     *
-     * NOTE: All URLs containing a protocol are considered external, e.g.
-     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
-     * page reload.
-     */
-    skipClientNav?: boolean;
     /**
      * Test ID used for e2e testing.
      */
@@ -73,9 +62,26 @@ type ActionProps = {
      * @ignore
      */
     style?: StyleType;
+    /**
+     * Inherited from WB Cell.
+     */
+    /**
+     * Adds a horizontal rule at the bottom of the cell that can be used to
+     * separate items within ActionMenu instances. Defaults to `none`.
+     */
+    horizontalRule?: CompactCellProps["horizontalRule"];
+    /**
+     * Optional left accessory to display in the `ActionItem` element.
+     */
+    leftAccessory?: CompactCellProps["leftAccessory"];
+    /**
+     * Optional right accessory to display in the `ActionItem` element.
+     */
+    rightAccessory?: CompactCellProps["rightAccessory"];
 };
 type DefaultProps = {
     disabled: ActionProps["disabled"];
+    horizontalRule: ActionProps["horizontalRule"];
     indent: ActionProps["indent"];
     role: ActionProps["role"];
 };
@@ -88,7 +94,6 @@ export default class ActionItem extends React.Component<ActionProps> {
     static isClassOf(instance: React.ReactElement<any>): boolean;
     static defaultProps: DefaultProps;
     static __IS_ACTION_ITEM__: boolean;
-    renderClickableBehavior(router: any): React.ReactNode;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import { Link } from 'react-router-dom';
-import { __RouterContext } from 'react-router';
+import { CompactCell } from '@khanacademy/wonder-blocks-cell';
 import Color, { mix, fade, SemanticColor } from '@khanacademy/wonder-blocks-color';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, LabelLarge } from '@khanacademy/wonder-blocks-typography';
-import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
-import { addStyle, View } from '@khanacademy/wonder-blocks-core';
 import { tokens } from '@khanacademy/wonder-blocks-theming';
+import { View, addStyle } from '@khanacademy/wonder-blocks-core';
+import { getClickableBehavior, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import * as ReactDOM from 'react-dom';
@@ -18,6 +17,7 @@ import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
+import { __RouterContext } from 'react-router';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -69,111 +69,91 @@ const {
   offBlack: offBlack$2,
   offBlack32: offBlack32$3
 } = Color;
-const StyledAnchor = addStyle("a");
-const StyledButton$2 = addStyle("button");
-const StyledLink = addStyle(Link);
 class ActionItem extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
   }
-  renderClickableBehavior(router) {
+  render() {
     const {
-      skipClientNav,
       disabled,
+      horizontalRule,
       href,
       target,
       indent,
       label,
       lang,
+      leftAccessory,
+      rightAccessory,
       onClick,
       role,
       style,
       testId
     } = this.props;
-    const ClickableBehavior = getClickableBehavior(href, skipClientNav, router);
-    return React.createElement(ClickableBehavior, {
+    const defaultStyle = [styles$8.wrapper, style];
+    const labelComponent = typeof label === "string" ? React.createElement(LabelMedium, {
+      lang: lang,
+      style: styles$8.label
+    }, label) : React.cloneElement(label, _extends({
+      lang,
+      style: styles$8.label
+    }, label.props));
+    return React.createElement(CompactCell, {
       disabled: disabled,
-      onClick: onClick,
-      href: href,
+      horizontalRule: horizontalRule,
+      rootStyle: defaultStyle,
+      leftAccessory: leftAccessory,
+      rightAccessory: rightAccessory,
+      style: [styles$8.shared, indent && styles$8.indent],
       role: role,
-      target: target
-    }, (state, childrenProps) => {
-      const {
-        pressed,
-        hovered,
-        focused
-      } = state;
-      const defaultStyle = [styles$8.shared, disabled && styles$8.disabled, !disabled && (pressed ? styles$8.active : (hovered || focused) && styles$8.focus), style];
-      const props = _extends({
-        "data-test-id": testId,
-        disabled,
-        role,
-        style: [defaultStyle]
-      }, childrenProps);
-      const children = React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-        lang: lang,
-        style: [indent && styles$8.indent, styles$8.label]
-      }, label));
-      if (href && !disabled) {
-        return router && !skipClientNav && isClientSideUrl(href) ? React.createElement(StyledLink, _extends({}, props, {
-          to: href
-        }), children) : React.createElement(StyledAnchor, _extends({}, props, {
-          href: href,
-          target: target
-        }), children);
-      } else {
-        return React.createElement(StyledButton$2, _extends({
-          type: "button"
-        }, props, {
-          disabled: disabled
-        }), children);
-      }
+      testId: testId,
+      title: labelComponent,
+      href: href,
+      target: target,
+      onClick: onClick
     });
   }
-  render() {
-    return React.createElement(__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
 }
 ActionItem.defaultProps = {
   disabled: false,
+  horizontalRule: "none",
   indent: false,
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
 const styles$8 = StyleSheet.create({
+  wrapper: {
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    touchAction: "manipulation",
+    ":focus": {
+      borderRadius: Spacing.xxxSmall_4,
+      outline: `${Spacing.xxxxSmall_2}px solid ${Color.blue}`,
+      outlineOffset: -Spacing.xxxxSmall_2
+    },
+    [":hover[aria-disabled=false]"]: {
+      color: white$3,
+      background: blue$2
+    },
+    ["@media not (hover: hover)"]: {
+      [":hover[aria-disabled=false]"]: {
+        color: white$3,
+        background: offBlack$2
+      }
+    },
+    [":active[aria-disabled=false]"]: {
+      color: mix(fade(blue$2, 0.32), white$3),
+      background: mix(offBlack32$3, blue$2)
+    }
+  },
   shared: {
-    background: white$3,
-    color: offBlack$2,
-    textDecoration: "none",
-    border: "none",
-    outline: "none",
-    flexDirection: "row",
-    alignItems: "center",
-    display: "flex",
-    height: DROPDOWN_ITEM_HEIGHT,
     minHeight: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: Spacing.medium_16,
-    paddingRight: Spacing.medium_16,
-    touchAction: "manipulation"
+    height: DROPDOWN_ITEM_HEIGHT
   },
   label: {
     whiteSpace: "nowrap",
     userSelect: "none"
   },
   indent: {
-    marginLeft: Spacing.medium_16
-  },
-  focus: {
-    color: white$3,
-    background: blue$2
-  },
-  active: {
-    color: mix(fade(blue$2, 0.32), white$3),
-    background: mix(offBlack32$3, blue$2)
-  },
-  disabled: {
-    color: offBlack32$3,
-    cursor: "default"
+    paddingLeft: Spacing.medium_16 * 2
   }
 });
 

package/dist/index.js

@@ -4,14 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var aphrodite = require('aphrodite');
-var reactRouterDom = require('react-router-dom');
-var reactRouter = require('react-router');
+var wonderBlocksCell = require('@khanacademy/wonder-blocks-cell');
 var Color = require('@khanacademy/wonder-blocks-color');
 var Spacing = require('@khanacademy/wonder-blocks-spacing');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
-var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
+var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var wonderBlocksClickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
 var checkIcon = require('@phosphor-icons/core/bold/check-bold.svg');
 var ReactDOM = require('react-dom');
@@ -22,6 +21,7 @@ var reactPopper = require('react-popper');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
+var reactRouter = require('react-router');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -101,111 +101,91 @@ const {
   offBlack: offBlack$2,
   offBlack32: offBlack32$3
 } = Color__default["default"];
-const StyledAnchor = wonderBlocksCore.addStyle("a");
-const StyledButton$2 = wonderBlocksCore.addStyle("button");
-const StyledLink = wonderBlocksCore.addStyle(reactRouterDom.Link);
 class ActionItem extends React__namespace.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_ACTION_ITEM__;
   }
-  renderClickableBehavior(router) {
+  render() {
     const {
-      skipClientNav,
       disabled,
+      horizontalRule,
       href,
       target,
       indent,
       label,
       lang,
+      leftAccessory,
+      rightAccessory,
       onClick,
       role,
       style,
       testId
     } = this.props;
-    const ClickableBehavior = wonderBlocksClickable.getClickableBehavior(href, skipClientNav, router);
-    return React__namespace.createElement(ClickableBehavior, {
+    const defaultStyle = [styles$8.wrapper, style];
+    const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
+      lang: lang,
+      style: styles$8.label
+    }, label) : React__namespace.cloneElement(label, _extends({
+      lang,
+      style: styles$8.label
+    }, label.props));
+    return React__namespace.createElement(wonderBlocksCell.CompactCell, {
       disabled: disabled,
-      onClick: onClick,
-      href: href,
+      horizontalRule: horizontalRule,
+      rootStyle: defaultStyle,
+      leftAccessory: leftAccessory,
+      rightAccessory: rightAccessory,
+      style: [styles$8.shared, indent && styles$8.indent],
       role: role,
-      target: target
-    }, (state, childrenProps) => {
-      const {
-        pressed,
-        hovered,
-        focused
-      } = state;
-      const defaultStyle = [styles$8.shared, disabled && styles$8.disabled, !disabled && (pressed ? styles$8.active : (hovered || focused) && styles$8.focus), style];
-      const props = _extends({
-        "data-test-id": testId,
-        disabled,
-        role,
-        style: [defaultStyle]
-      }, childrenProps);
-      const children = React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-        lang: lang,
-        style: [indent && styles$8.indent, styles$8.label]
-      }, label));
-      if (href && !disabled) {
-        return router && !skipClientNav && wonderBlocksClickable.isClientSideUrl(href) ? React__namespace.createElement(StyledLink, _extends({}, props, {
-          to: href
-        }), children) : React__namespace.createElement(StyledAnchor, _extends({}, props, {
-          href: href,
-          target: target
-        }), children);
-      } else {
-        return React__namespace.createElement(StyledButton$2, _extends({
-          type: "button"
-        }, props, {
-          disabled: disabled
-        }), children);
-      }
+      testId: testId,
+      title: labelComponent,
+      href: href,
+      target: target,
+      onClick: onClick
     });
   }
-  render() {
-    return React__namespace.createElement(reactRouter.__RouterContext.Consumer, null, router => this.renderClickableBehavior(router));
-  }
 }
 ActionItem.defaultProps = {
   disabled: false,
+  horizontalRule: "none",
   indent: false,
   role: "menuitem"
 };
 ActionItem.__IS_ACTION_ITEM__ = true;
 const styles$8 = aphrodite.StyleSheet.create({
+  wrapper: {
+    minHeight: DROPDOWN_ITEM_HEIGHT,
+    touchAction: "manipulation",
+    ":focus": {
+      borderRadius: Spacing__default["default"].xxxSmall_4,
+      outline: `${Spacing__default["default"].xxxxSmall_2}px solid ${Color__default["default"].blue}`,
+      outlineOffset: -Spacing__default["default"].xxxxSmall_2
+    },
+    [":hover[aria-disabled=false]"]: {
+      color: white$3,
+      background: blue$2
+    },
+    ["@media not (hover: hover)"]: {
+      [":hover[aria-disabled=false]"]: {
+        color: white$3,
+        background: offBlack$2
+      }
+    },
+    [":active[aria-disabled=false]"]: {
+      color: Color.mix(Color.fade(blue$2, 0.32), white$3),
+      background: Color.mix(offBlack32$3, blue$2)
+    }
+  },
   shared: {
-    background: white$3,
-    color: offBlack$2,
-    textDecoration: "none",
-    border: "none",
-    outline: "none",
-    flexDirection: "row",
-    alignItems: "center",
-    display: "flex",
-    height: DROPDOWN_ITEM_HEIGHT,
     minHeight: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: Spacing__default["default"].medium_16,
-    paddingRight: Spacing__default["default"].medium_16,
-    touchAction: "manipulation"
+    height: DROPDOWN_ITEM_HEIGHT
   },
   label: {
     whiteSpace: "nowrap",
     userSelect: "none"
   },
   indent: {
-    marginLeft: Spacing__default["default"].medium_16
-  },
-  focus: {
-    color: white$3,
-    background: blue$2
-  },
-  active: {
-    color: Color.mix(Color.fade(blue$2, 0.32), white$3),
-    background: Color.mix(offBlack32$3, blue$2)
-  },
-  disabled: {
-    color: offBlack32$3,
-    cursor: "default"
+    paddingLeft: Spacing__default["default"].medium_16 * 2
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "3.1.10",
+  "version": "4.0.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,13 +16,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
+    "@khanacademy/wonder-blocks-cell": "^3.1.0",
     "@khanacademy/wonder-blocks-clickable": "^4.0.11",
     "@khanacademy/wonder-blocks-color": "^3.0.0",
     "@khanacademy/wonder-blocks-core": "^6.3.0",
     "@khanacademy/wonder-blocks-icon": "^4.0.0",
     "@khanacademy/wonder-blocks-layout": "^2.0.24",
-    "@khanacademy/wonder-blocks-modal": "^4.0.37",
-    "@khanacademy/wonder-blocks-search-field": "^2.1.24",
+    "@khanacademy/wonder-blocks-modal": "^4.0.38",
+    "@khanacademy/wonder-blocks-search-field": "^2.1.25",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
     "@khanacademy/wonder-blocks-theming": "1.2.1",
     "@khanacademy/wonder-blocks-timing": "^4.0.2",

package/src/components/__tests__/action-item.test.tsx

@@ -2,6 +2,10 @@ import * as React from "react";
 import {render, screen} from "@testing-library/react";
 import * as ReactRouterDOM from "react-router-dom";
 
+import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
+
+import plusIcon from "@phosphor-icons/core/regular/plus.svg";
 import ActionItem from "../action-item";
 
 jest.mock("react-router-dom", () => ({
@@ -18,7 +22,10 @@ describe("ActionItem", () => {
         render(<ActionItem href="/foo" label="Example" disabled={true} />);
 
         // Assert
-        expect(screen.getByRole("menuitem")).toBeDisabled();
+        expect(screen.getByRole("menuitem")).toHaveAttribute(
+            "aria-disabled",
+            "true",
+        );
     });
 
     it("should render an anchor if there's no router", () => {
@@ -56,4 +63,33 @@ describe("ActionItem", () => {
         // Assert
         expect(screen.getByText("Español")).toHaveAttribute("lang", "es");
     });
+
+    it("should allow passing an accessory", () => {
+        // Arrange
+
+        // Act
+        render(
+            <ActionItem
+                label="ActionItem"
+                leftAccessory={<PhosphorIcon icon={plusIcon} role="img" />}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByRole("img")).toBeInTheDocument();
+    });
+
+    it("should allow passing a custom label", () => {
+        // Arrange
+
+        // Act
+        render(
+            <ActionItem
+                label={<HeadingSmall>A heading as an item</HeadingSmall>}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByRole("heading")).toBeInTheDocument();
+    });
 });