@khanacademy/wonder-blocks-dropdown 4.0.0 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.0.0
+
+### Major Changes
+
+-   56a896c6: Allow custom OptionItem elements (internally using cell components)
+
+### Patch Changes
+
+-   70e846cb: Allow changing the popper's height to accomodate for the viewport size
+-   Updated dependencies [56a896c6]
+-   Updated dependencies [23ab9f8c]
+-   Updated dependencies [6df21f71]
+    -   @khanacademy/wonder-blocks-cell@3.2.0
+    -   @khanacademy/wonder-blocks-icon@4.0.1
+    -   @khanacademy/wonder-blocks-core@6.3.1
+    -   @khanacademy/wonder-blocks-search-field@2.1.26
+    -   @khanacademy/wonder-blocks-clickable@4.0.12
+    -   @khanacademy/wonder-blocks-layout@2.0.25
+    -   @khanacademy/wonder-blocks-modal@4.0.39
+    -   @khanacademy/wonder-blocks-typography@2.1.10
+
 ## 4.0.0
 
 ### Major Changes

package/dist/components/check.d.ts

@@ -8,12 +8,6 @@ type CheckProps = {
     disabled: boolean;
     /** Whether option item is selected. */
     selected: boolean;
-    /** Whether option item is pressed. */
-    pressed: boolean;
-    /** Whether option item is hovered. */
-    hovered: boolean;
-    /** Whether option item is focused. */
-    focused: boolean;
 };
 /**
  * The check component used by OptionItem.

package/dist/components/checkbox.d.ts

@@ -8,12 +8,6 @@ type CheckProps = {
     disabled: boolean;
     /** Whether option item is selected. */
     selected: boolean;
-    /** Whether option item is pressed. */
-    pressed: boolean;
-    /** Whether option item is hovered. */
-    hovered: boolean;
-    /** Whether option item is focused. */
-    focused: boolean;
 };
 /**
  * The checkbox component used by OptionItem.

package/dist/components/dropdown-opener.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
 import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
-import type { OpenerProps } from "../util/types";
+import type { OpenerProps, OptionLabel } from "../util/types";
 type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * The child function that returns the anchor the Dropdown will be activated
@@ -26,7 +26,7 @@ type Props = Partial<Omit<AriaProps, "aria-disabled">> & {
     /**
      * Text for the opener that can be passed to the child as an argument.
      */
-    text: string;
+    text: OptionLabel;
 };
 type DefaultProps = {
     disabled: Props["disabled"];

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

@@ -1,12 +1,19 @@
 import * as React from "react";
-import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import Check from "./check";
 import Checkbox from "./checkbox";
+import { CellProps, OptionLabel } from "../util/types";
 type OptionProps = AriaProps & {
     /**
      * Display text of the option item.
      */
-    label: string;
+    label: OptionLabel;
+    /**
+     * Optional text to use as the label. If not provided, label will be used.
+     * This is useful for cases where the label is a complex component and you
+     * want to display a simpler string in the menu.
+     */
+    labelAsText?: string;
     /**
      * Value of the item, used as a key of sorts for the parent to manage its
      * items, because label/display text may be identical for some selects. This
@@ -52,9 +59,34 @@ type OptionProps = AriaProps & {
      * @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: CellProps["horizontalRule"];
+    /**
+     * Optional left accessory to display in the `OptionItem` element.
+     */
+    leftAccessory?: CellProps["leftAccessory"];
+    /**
+     * Optional right accessory to display in the `OptionItem` element.
+     */
+    rightAccessory?: CellProps["rightAccessory"];
+    /**
+     * Optional subtitle to display before the label.
+     */
+    subtitle1?: CellProps["subtitle1"];
+    /**
+     * Optional subtitle to display after the label.
+     */
+    subtitle2?: CellProps["subtitle2"];
 };
 type DefaultProps = {
     disabled: OptionProps["disabled"];
+    horizontalRule: OptionProps["horizontalRule"];
     onToggle: OptionProps["onToggle"];
     role: OptionProps["role"];
     selected: OptionProps["selected"];

package/dist/components/select-opener.d.ts

@@ -1,10 +1,11 @@
 import * as React from "react";
 import type { AriaProps } from "@khanacademy/wonder-blocks-core";
+import { OptionLabel } from "../util/types";
 type SelectOpenerProps = AriaProps & {
     /**
      * Display text in the SelectOpener.
      */
-    children: string;
+    children: OptionLabel;
     /**
      * Whether the SelectOpener is disabled. If disabled, disallows interaction.
      * Default false.

package/dist/es/index.js

@@ -1,21 +1,22 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import { CompactCell } from '@khanacademy/wonder-blocks-cell';
+import { CompactCell, DetailCell } 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 { LabelMedium, LabelSmall, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { tokens } from '@khanacademy/wonder-blocks-theming';
 import { View, addStyle } from '@khanacademy/wonder-blocks-core';
-import { getClickableBehavior, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
+import { Strut } from '@khanacademy/wonder-blocks-layout';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
 import * as ReactDOM from 'react-dom';
+import { ClickableBehavior, getClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import SearchField from '@khanacademy/wonder-blocks-search-field';
 import { withActionScheduler } from '@khanacademy/wonder-blocks-timing';
 import { VariableSizeList } from 'react-window';
 import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
-import { Strut } from '@khanacademy/wonder-blocks-layout';
+import { detectOverflow } from '@popperjs/core';
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
 import { __RouterContext } from 'react-router';
 
@@ -59,15 +60,15 @@ const defaultLabels = {
   selectNoneLabel: "Select none",
   selectAllLabel: numOptions => `Select all (${numOptions})`,
   noneSelected: "0 items",
-  someSelected: numSelectedValues => `${numSelectedValues} items`,
+  someSelected: numSelectedValues => numSelectedValues === 1 ? "1 item" : `${numSelectedValues} items`,
   allSelected: "All items"
 };
 
 const {
-  blue: blue$2,
-  white: white$3,
-  offBlack: offBlack$2,
-  offBlack32: offBlack32$3
+  blue: blue$1,
+  white: white$1,
+  offBlack: offBlack$1,
+  offBlack32: offBlack32$1
 } = Color;
 class ActionItem extends React.Component {
   static isClassOf(instance) {
@@ -130,18 +131,18 @@ const styles$8 = StyleSheet.create({
       outlineOffset: -Spacing.xxxxSmall_2
     },
     [":hover[aria-disabled=false]"]: {
-      color: white$3,
-      background: blue$2
+      color: white$1,
+      background: blue$1
     },
     ["@media not (hover: hover)"]: {
       [":hover[aria-disabled=false]"]: {
-        color: white$3,
-        background: offBlack$2
+        color: white$1,
+        background: offBlack$1
       }
     },
     [":active[aria-disabled=false]"]: {
-      color: mix(fade(blue$2, 0.32), white$3),
-      background: mix(offBlack32$3, blue$2)
+      color: mix(fade(blue$1, 0.32), white$1),
+      background: mix(offBlack32$1, blue$1)
     }
   },
   shared: {
@@ -170,30 +171,22 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-const {
-  offBlack: offBlack$1,
-  offBlack32: offBlack32$2,
-  white: white$2
-} = Color;
 const Check = function Check(props) {
   const {
-    disabled,
-    selected,
-    pressed,
-    hovered,
-    focused
+    selected
   } = props;
   return React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
-    color: disabled ? offBlack32$2 : pressed || hovered || focused ? white$2 : offBlack$1,
     style: [styles$7.bounds, !selected && styles$7.hide]
   });
 };
 const styles$7 = StyleSheet.create({
   bounds: {
-    minHeight: 16,
-    minWidth: 16
+    alignSelf: "center",
+    height: Spacing.medium_16,
+    minHeight: Spacing.medium_16,
+    minWidth: Spacing.medium_16
   },
   hide: {
     visibility: "hidden"
@@ -201,33 +194,22 @@ const styles$7 = StyleSheet.create({
 });
 
 const {
-  blue: blue$1,
-  white: white$1,
   offBlack16,
-  offBlack32: offBlack32$1,
   offBlack50,
   offWhite
 } = Color;
 const Checkbox = function Checkbox(props) {
   const {
     disabled,
-    selected,
-    pressed,
-    hovered,
-    focused
+    selected
   } = props;
-  const activeBlue = mix(offBlack32$1, blue$1);
-  const clickInteraction = pressed || hovered || focused;
-  const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$1 : white$1;
-  const checkColor = disabled ? offBlack32$1 : clickInteraction ? pressed ? activeBlue : blue$1 : white$1;
   return React.createElement(View, {
-    style: [styles$6.checkbox, (clickInteraction || selected && !disabled) && styles$6.noBorder, disabled && styles$6.disabledCheckbox, {
-      backgroundColor: bgColor
-    }]
+    className: "checkbox",
+    style: [styles$6.checkbox, selected && !disabled && styles$6.noBorder, disabled && styles$6.disabledCheckbox]
   }, selected && React.createElement(PhosphorIcon, {
     icon: checkIcon,
     size: "small",
-    color: checkColor,
+    className: "check",
     style: [{
       width: Spacing.small_12,
       height: Spacing.small_12,
@@ -237,8 +219,10 @@ const Checkbox = function Checkbox(props) {
 };
 const styles$6 = StyleSheet.create({
   checkbox: {
-    minHeight: 16,
-    minWidth: 16,
+    alignSelf: "center",
+    minHeight: Spacing.medium_16,
+    minWidth: Spacing.medium_16,
+    height: Spacing.medium_16,
     borderRadius: 3,
     borderWidth: 1,
     borderStyle: "solid",
@@ -258,7 +242,7 @@ const styles$6 = StyleSheet.create({
   }
 });
 
-const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "value", "onClick", "onToggle", "variant"];
+const _excluded$5 = ["disabled", "label", "role", "selected", "testId", "style", "leftAccessory", "horizontalRule", "rightAccessory", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant"];
 class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
@@ -292,42 +276,54 @@ class OptionItem extends React.Component {
         role,
         selected,
         testId,
-        style
+        style,
+        leftAccessory,
+        horizontalRule,
+        rightAccessory,
+        subtitle1,
+        subtitle2
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$5);
-    const ClickableBehavior = getClickableBehavior();
     const CheckComponent = this.getCheckComponent();
-    return React.createElement(ClickableBehavior, {
+    const defaultStyle = [styles$5.item, style];
+    return React.createElement(DetailCell, _extends({
       disabled: disabled,
-      onClick: this.handleClick,
+      horizontalRule: horizontalRule,
+      rootStyle: defaultStyle,
+      style: styles$5.itemContainer,
+      "aria-selected": selected ? "true" : "false",
       role: role,
-      tabIndex: 0
-    }, (state, childrenProps) => {
-      const {
-        pressed,
-        hovered,
-        focused
-      } = state;
-      const defaultStyle = [styles$5.itemContainer, pressed ? styles$5.active : (hovered || focused) && styles$5.focus, disabled && styles$5.disabled, style];
-      return React.createElement(View, _extends({}, sharedProps, {
-        testId: testId,
-        style: defaultStyle,
-        "aria-selected": selected ? "true" : "false",
-        role: role
-      }, childrenProps), React.createElement(CheckComponent, {
+      testId: testId,
+      leftAccessory: React.createElement(React.Fragment, null, leftAccessory ? React.createElement(View, {
+        style: {
+          flexDirection: "row"
+        }
+      }, React.createElement(CheckComponent, {
+        disabled: disabled,
+        selected: selected
+      }), React.createElement(Strut, {
+        size: Spacing.xSmall_8
+      }), leftAccessory) : React.createElement(CheckComponent, {
         disabled: disabled,
-        selected: selected,
-        pressed: pressed,
-        hovered: hovered,
-        focused: focused
-      }), React.createElement(LabelMedium, {
+        selected: selected
+      })),
+      rightAccessory: rightAccessory,
+      subtitle1: subtitle1 ? React.createElement(LabelSmall, {
+        className: "subtitle"
+      }, subtitle1) : undefined,
+      title: React.createElement(LabelMedium, {
         style: styles$5.label
-      }, label));
-    });
+      }, label),
+      subtitle2: subtitle2 ? React.createElement(LabelSmall, {
+        className: "subtitle"
+      }, subtitle2) : undefined,
+      onClick: this.handleClick
+    }, sharedProps));
   }
 }
 OptionItem.defaultProps = {
   disabled: false,
+  horizontalRule: "none",
   onToggle: () => void 0,
   role: "option",
   selected: false
@@ -339,37 +335,67 @@ const {
   offBlack,
   offBlack32
 } = Color;
+const activeBlue = mix(offBlack32, blue);
 const styles$5 = StyleSheet.create({
+  item: {
+    minHeight: "unset",
+    paddingBlock: Spacing.xxxxSmall_2,
+    ":focus": {
+      borderRadius: Spacing.xxxSmall_4,
+      outline: `${Spacing.xxxxSmall_2}px solid ${Color.blue}`,
+      outlineOffset: -Spacing.xxxxSmall_2
+    },
+    ":focus-visible": {
+      overflow: "visible"
+    },
+    [":hover[aria-disabled=false]"]: {
+      color: white,
+      background: blue
+    },
+    ["@media not (hover: hover)"]: {
+      [":hover[aria-disabled=false]"]: {
+        color: white,
+        background: offBlack
+      }
+    },
+    [":active[aria-disabled=false]"]: {
+      color: mix(fade(blue, 0.32), white),
+      background: activeBlue
+    },
+    [":hover[aria-disabled=false] .checkbox"]: {
+      background: white
+    },
+    [":hover[aria-disabled=false] .check"]: {
+      color: blue
+    },
+    [":active[aria-disabled=false] .check"]: {
+      color: activeBlue
+    },
+    [":is([aria-selected=true]) .checkbox"]: {
+      background: blue
+    },
+    [":is([aria-selected=true]) .check"]: {
+      color: white
+    },
+    [":is([aria-disabled=false]) .subtitle"]: {
+      color: Color.offBlack64
+    },
+    [":hover[aria-disabled=false] .subtitle"]: {
+      color: Color.offWhite
+    },
+    [":active[aria-disabled=false] .subtitle"]: {
+      color: mix(fade(blue, 0.16), white)
+    }
+  },
   itemContainer: {
-    flexDirection: "row",
-    background: white,
-    color: offBlack,
-    alignItems: "center",
-    height: DROPDOWN_ITEM_HEIGHT,
-    minHeight: DROPDOWN_ITEM_HEIGHT,
-    border: 0,
-    outline: 0,
-    paddingLeft: Spacing.xSmall_8,
+    minHeight: "unset",
+    padding: Spacing.xSmall_8,
     paddingRight: Spacing.medium_16,
-    whiteSpace: "nowrap",
-    cursor: "default"
-  },
-  focus: {
-    color: white,
-    background: blue
-  },
-  active: {
-    color: mix(fade(blue, 0.32), white),
-    background: mix(offBlack32, blue)
-  },
-  disabled: {
-    color: offBlack32,
-    background: white
+    whiteSpace: "nowrap"
   },
   label: {
     whiteSpace: "nowrap",
     userSelect: "none",
-    marginLeft: Spacing.xSmall_8,
     overflow: "hidden",
     textOverflow: "ellipsis"
   },
@@ -479,15 +505,6 @@ function getDropdownMenuHeight(items, initialHeight = 0) {
     }
   }, initialHeight);
 }
-function generateDropdownMenuStyles(minWidth, maxHeight) {
-  const styles = StyleSheet.create({
-    dropdownMenu: {
-      minWidth,
-      maxHeight
-    }
-  });
-  return styles.dropdownMenu;
-}
 
 class DropdownCoreVirtualized extends React.Component {
   constructor(props) {
@@ -590,6 +607,39 @@ class DropdownCoreVirtualized extends React.Component {
 }
 var DropdownCoreVirtualized$1 = withActionScheduler(DropdownCoreVirtualized);
 
+function modifyMaxHeight({
+  state,
+  options
+}) {
+  const overflow = detectOverflow(state, options);
+  const {
+    y
+  } = state.modifiersData.preventOverflow || {
+    x: 0,
+    y: 0
+  };
+  const {
+    height
+  } = state.rects.popper;
+  const [basePlacement] = state.placement.split("-");
+  const heightProp = basePlacement === "top" ? "top" : "bottom";
+  const maxHeight = height - overflow[heightProp] - y;
+  state.styles.popper = _extends({}, state.styles.popper, {
+    maxHeight: `${maxHeight}px`,
+    ["--popper-max-height"]: `${maxHeight}px`
+  });
+}
+const maxHeightModifier = {
+  name: "maxHeight",
+  enabled: true,
+  phase: "main",
+  options: {
+    padding: DROPDOWN_ITEM_HEIGHT
+  },
+  requiresIfExists: ["offset", "preventOverflow", "flip"],
+  fn: modifyMaxHeight
+};
+
 const modifiers = [{
   name: "preventOverflow",
   options: {
@@ -597,7 +647,7 @@ const modifiers = [{
     altAxis: true,
     tether: false
   }
-}];
+}, maxHeightModifier];
 const DropdownPopper = function DropdownPopper({
   children,
   alignment = "left",
@@ -652,6 +702,18 @@ function debounce(callback, wait) {
     timeout = setTimeout(later, wait);
   };
 }
+function isString(x) {
+  return typeof x === "string";
+}
+function getLabel(props) {
+  if (isString(props.label)) {
+    return props.label;
+  }
+  if (isString(props.labelAsText)) {
+    return props.labelAsText;
+  }
+  return "";
+}
 
 const VIRTUALIZE_THRESHOLD = 125;
 const StyledSpan = addStyle("span");
@@ -783,12 +845,14 @@ class DropdownCore extends React.Component {
       const foundIndex = this.props.items.filter(item => item.focusable).findIndex(({
         component
       }) => {
-        var _component$props;
         if (SeparatorItem.isClassOf(component)) {
           return false;
         }
-        const label = (_component$props = component.props) == null ? void 0 : _component$props.label.toLowerCase();
-        return label.startsWith(key.toLowerCase());
+        if (OptionItem.isClassOf(component)) {
+          const optionItemProps = component.props;
+          return getLabel(optionItemProps).toLowerCase().startsWith(key.toLowerCase());
+        }
+        return false;
       });
       if (foundIndex >= 0) {
         const isClosed = !this.props.open;
@@ -1103,14 +1167,15 @@ class DropdownCore extends React.Component {
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
-    const maxDropdownHeight = getDropdownMenuHeight(this.props.items);
     return React.createElement(View, {
       onMouseUp: this.handleDropdownMouseUp,
       style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, dropdownStyle],
       testId: "dropdown-core-container"
     }, isFilterable && this.renderSearchField(), React.createElement(View, {
       role: role,
-      style: [styles$3.listboxOrMenu, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight)],
+      style: [styles$3.listboxOrMenu, {
+        minWidth: minDropdownWidth
+      }],
       "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
       "aria-required": role === "listbox" ? ariaRequired : undefined
     }, listRenderer), this.maybeRenderNoResults());
@@ -1184,7 +1249,8 @@ const styles$3 = StyleSheet.create({
     paddingTop: Spacing.xxxSmall_4,
     paddingBottom: Spacing.xxxSmall_4,
     border: `solid 1px ${Color.offBlack16}`,
-    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`
+    boxShadow: `0px 8px 8px 0px ${fade(Color.offBlack, 0.1)}`,
+    maxHeight: "var(--popper-max-height)"
   },
   light: {
     border: "none"
@@ -1204,7 +1270,8 @@ const styles$3 = StyleSheet.create({
   searchInputStyle: {
     margin: Spacing.xSmall_8,
     marginTop: Spacing.xxxSmall_4,
-    minHeight: "auto"
+    minHeight: "auto",
+    position: "sticky"
   },
   srOnly: {
     border: 0,
@@ -1757,7 +1824,7 @@ class SingleSelect extends React.Component {
     const lowercasedSearchText = searchText.toLowerCase();
     return children.filter(({
       props
-    }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
+    }) => !searchText || getLabel(props).indexOf(lowercasedSearchText) > -1);
   }
   getMenuItems(children) {
     const {
@@ -1781,7 +1848,7 @@ class SingleSelect extends React.Component {
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
     const items = React.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
-    const menuText = selectedItem ? selectedItem.props.label : placeholder;
+    const menuText = selectedItem ? getLabel(selectedItem.props) || defaultLabels.someSelected(1) : placeholder;
     const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
       disabled: numItems === 0 || disabled,
@@ -1971,7 +2038,15 @@ class MultiSelect extends React.Component {
         return noSelectionText;
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
-        return selectedItem ? selectedItem.props.label : noSelectionText;
+        if (selectedItem) {
+          const selectedLabel = getLabel(selectedItem == null ? void 0 : selectedItem.props);
+          if (selectedLabel) {
+            return selectedLabel;
+          } else {
+            return someSelected(1);
+          }
+        }
+        return noSelectionText;
       case children.length:
         return allSelected;
       default:
@@ -2036,7 +2111,7 @@ class MultiSelect extends React.Component {
     const lowercasedSearchText = searchText.toLowerCase();
     const filteredChildren = children.filter(({
       props
-    }) => !searchText || props.label.toLowerCase().indexOf(lowercasedSearchText) > -1);
+    }) => !searchText || getLabel(props).toLowerCase().indexOf(lowercasedSearchText) > -1);
     const lastSelectedChildren = [];
     const restOfTheChildren = [];
     for (const child of filteredChildren) {