@khanacademy/wonder-blocks-dropdown 5.3.6 → 5.3.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 5.3.8
+
+### Patch Changes
+
+-   cb95286d: - SingleSelect and MultiSelect: Fixing bug where the components can be opened via keyboard when it is disabled because it has 0 items
+    -   SingleSelect: If all option items are disabled, the SingleSelect is disabled, similar to the behaviour of the MultiSelect
+    -   @khanacademy/wonder-blocks-modal@5.1.5
+    -   @khanacademy/wonder-blocks-search-field@2.2.16
+
+## 5.3.7
+
+### Patch Changes
+
+-   f7ff9a77: SingleSelect and MultiSelect: Disable keyboard interactions to open the select if the `disabled` prop is set to `true`. Prevent select from being in an open state if
+    `disabled` prop is `true`.
+
 ## 5.3.6
 
 ### Patch Changes

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

@@ -77,6 +77,10 @@ declare const _default: React.ComponentType<Readonly<{
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean | undefined;
+    /**
+     * Whether the dropdown and it's interactions should be disabled.
+     */
+    disabled?: boolean | undefined;
     /**
      * Whether this menu should be left-aligned or right-aligned with the
      * opener component. Defaults to left-aligned.

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

@@ -196,7 +196,7 @@ export default class MultiSelect extends React.Component<Props, State> {
     handleOpenerRef: (node?: any) => void;
     handleSearchTextChanged: (searchText: string) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[]): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
+    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[], isDisabled: boolean): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
     render(): React.ReactNode;
 }
 export {};

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

@@ -204,7 +204,7 @@ export default class SingleSelect extends React.Component<Props, State> {
     handleSearchTextChanged: (searchText: string) => void;
     handleOpenerRef: (node?: any) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(numItems: number): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
+    renderOpener(isDisabled: boolean): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
     render(): React.ReactNode;
 }
 export {};

package/dist/es/index.js

@@ -1274,11 +1274,12 @@ class DropdownCore extends React.Component {
       open,
       opener,
       style,
-      className
+      className,
+      disabled
     } = this.props;
     return React.createElement(View, {
-      onKeyDown: this.handleKeyDown,
-      onKeyUp: this.handleKeyUp,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
@@ -1834,7 +1835,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "disabled", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -1913,7 +1914,7 @@ class SingleSelect extends React.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   filterChildren(children) {
@@ -1931,11 +1932,10 @@ class SingleSelect extends React.Component {
     } = this.props;
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
-  renderOpener(numItems) {
+  renderOpener(isDisabled) {
     const _this$props = this.props,
       {
         children,
-        disabled,
         error,
         id,
         light,
@@ -1950,12 +1950,12 @@ class SingleSelect extends React.Component {
     const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
     const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
-      disabled: numItems === 0 || disabled,
+      disabled: isDisabled,
       ref: this.handleOpenerRef,
       text: menuText,
       opened: this.state.open
     }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: numItems === 0 || disabled,
+      disabled: isDisabled,
       id: id,
       error: error,
       isPlaceholder: !selectedItem,
@@ -1980,14 +1980,17 @@ class SingleSelect extends React.Component {
       light,
       style,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       searchText
     } = this.state;
     const allChildren = React.Children.toArray(children).filter(Boolean);
+    const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const items = this.getMenuItems(allChildren);
-    const opener = this.renderOpener(allChildren.length);
+    const isDisabled = numEnabledOptions === 0 || disabled;
+    const opener = this.renderOpener(isDisabled);
     return React.createElement(DropdownCore$1, {
       role: "listbox",
       selectionType: "single",
@@ -2009,7 +2012,8 @@ class SingleSelect extends React.Component {
       searchText: isFilterable ? searchText : "",
       labels: labels,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: isDisabled
     });
   }
 }
@@ -2028,7 +2032,7 @@ SingleSelect.defaultProps = {
   }
 };
 
-const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
+const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
 class MultiSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -2113,7 +2117,7 @@ class MultiSelect extends React.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   componentDidUpdate(prevProps) {
@@ -2235,10 +2239,9 @@ class MultiSelect extends React.Component {
     }
     return [...lastSelectedItems, ...restOfTheChildren.map(this.mapOptionItemToDropdownItem)];
   }
-  renderOpener(allChildren) {
+  renderOpener(allChildren, isDisabled) {
     const _this$props = this.props,
       {
-        disabled,
         id,
         light,
         opener,
@@ -2249,15 +2252,14 @@ class MultiSelect extends React.Component {
       noneSelected
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
-    const numOptions = allChildren.filter(option => !option.props.disabled).length;
     const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
-      disabled: numOptions === 0 || disabled,
+      disabled: isDisabled,
       ref: this.handleOpenerRef,
       text: menuText,
       opened: this.state.open
     }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: numOptions === 0 || disabled,
+      disabled: isDisabled,
       id: id,
       isPlaceholder: menuText === noneSelected,
       light: light,
@@ -2278,7 +2280,8 @@ class MultiSelect extends React.Component {
       children,
       isFilterable,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       open,
@@ -2293,7 +2296,8 @@ class MultiSelect extends React.Component {
     const allChildren = React.Children.toArray(children).filter(Boolean);
     const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const filteredItems = this.getMenuItems(allChildren);
-    const opener = this.renderOpener(allChildren);
+    const isDisabled = numEnabledOptions === 0 || disabled;
+    const opener = this.renderOpener(allChildren, isDisabled);
     return React.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
@@ -2317,7 +2321,8 @@ class MultiSelect extends React.Component {
         someResults: someSelected
       },
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: isDisabled
     });
   }
 }

package/dist/index.js

@@ -1304,11 +1304,12 @@ class DropdownCore extends React__namespace.Component {
       open,
       opener,
       style,
-      className
+      className,
+      disabled
     } = this.props;
     return React__namespace.createElement(wonderBlocksCore.View, {
-      onKeyDown: this.handleKeyDown,
-      onKeyUp: this.handleKeyUp,
+      onKeyDown: !disabled ? this.handleKeyDown : undefined,
+      onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$4.menuWrapper, style],
       className: className
     }, this.renderLiveRegion(), opener, open && this.renderDropdown());
@@ -1864,7 +1865,7 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "disabled", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
+const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
 class SingleSelect extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -1943,7 +1944,7 @@ class SingleSelect extends React__namespace.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   filterChildren(children) {
@@ -1961,11 +1962,10 @@ class SingleSelect extends React__namespace.Component {
     } = this.props;
     return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
   }
-  renderOpener(numItems) {
+  renderOpener(isDisabled) {
     const _this$props = this.props,
       {
         children,
-        disabled,
         error,
         id,
         light,
@@ -1980,12 +1980,12 @@ class SingleSelect extends React__namespace.Component {
     const menuText = selectedItem ? getLabel(selectedItem.props) : placeholder;
     const dropdownOpener = opener ? React__namespace.createElement(DropdownOpener, {
       onClick: this.handleClick,
-      disabled: numItems === 0 || disabled,
+      disabled: isDisabled,
       ref: this.handleOpenerRef,
       text: menuText,
       opened: this.state.open
     }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: numItems === 0 || disabled,
+      disabled: isDisabled,
       id: id,
       error: error,
       isPlaceholder: !selectedItem,
@@ -2010,14 +2010,17 @@ class SingleSelect extends React__namespace.Component {
       light,
       style,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       searchText
     } = this.state;
     const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+    const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const items = this.getMenuItems(allChildren);
-    const opener = this.renderOpener(allChildren.length);
+    const isDisabled = numEnabledOptions === 0 || disabled;
+    const opener = this.renderOpener(isDisabled);
     return React__namespace.createElement(DropdownCore$1, {
       role: "listbox",
       selectionType: "single",
@@ -2039,7 +2042,8 @@ class SingleSelect extends React__namespace.Component {
       searchText: isFilterable ? searchText : "",
       labels: labels,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: isDisabled
     });
   }
 }
@@ -2058,7 +2062,7 @@ SingleSelect.defaultProps = {
   }
 };
 
-const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
+const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
 class MultiSelect extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -2143,7 +2147,7 @@ class MultiSelect extends React__namespace.Component {
   }
   static getDerivedStateFromProps(props, state) {
     return {
-      open: typeof props.opened === "boolean" ? props.opened : state.open
+      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
     };
   }
   componentDidUpdate(prevProps) {
@@ -2265,10 +2269,9 @@ class MultiSelect extends React__namespace.Component {
     }
     return [...lastSelectedItems, ...restOfTheChildren.map(this.mapOptionItemToDropdownItem)];
   }
-  renderOpener(allChildren) {
+  renderOpener(allChildren, isDisabled) {
     const _this$props = this.props,
       {
-        disabled,
         id,
         light,
         opener,
@@ -2279,15 +2282,14 @@ class MultiSelect extends React__namespace.Component {
       noneSelected
     } = this.state.labels;
     const menuText = this.getMenuText(allChildren);
-    const numOptions = allChildren.filter(option => !option.props.disabled).length;
     const dropdownOpener = opener ? React__namespace.createElement(DropdownOpener, {
       onClick: this.handleClick,
-      disabled: numOptions === 0 || disabled,
+      disabled: isDisabled,
       ref: this.handleOpenerRef,
       text: menuText,
       opened: this.state.open
     }, opener) : React__namespace.createElement(SelectOpener, _extends({}, sharedProps, {
-      disabled: numOptions === 0 || disabled,
+      disabled: isDisabled,
       id: id,
       isPlaceholder: menuText === noneSelected,
       light: light,
@@ -2308,7 +2310,8 @@ class MultiSelect extends React__namespace.Component {
       children,
       isFilterable,
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled
     } = this.props;
     const {
       open,
@@ -2323,7 +2326,8 @@ class MultiSelect extends React__namespace.Component {
     const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
     const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
     const filteredItems = this.getMenuItems(allChildren);
-    const opener = this.renderOpener(allChildren);
+    const isDisabled = numEnabledOptions === 0 || disabled;
+    const opener = this.renderOpener(allChildren, isDisabled);
     return React__namespace.createElement(DropdownCore$1, {
       role: "listbox",
       alignment: alignment,
@@ -2347,7 +2351,8 @@ class MultiSelect extends React__namespace.Component {
         someResults: someSelected
       },
       "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired
+      "aria-required": ariaRequired,
+      disabled: isDisabled
     });
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "5.3.6",
+  "version": "5.3.8",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -21,8 +21,8 @@
     "@khanacademy/wonder-blocks-core": "^6.4.1",
     "@khanacademy/wonder-blocks-icon": "^4.1.1",
     "@khanacademy/wonder-blocks-layout": "^2.1.0",
-    "@khanacademy/wonder-blocks-modal": "^5.1.4",
-    "@khanacademy/wonder-blocks-search-field": "^2.2.15",
+    "@khanacademy/wonder-blocks-modal": "^5.1.5",
+    "@khanacademy/wonder-blocks-search-field": "^2.2.16",
     "@khanacademy/wonder-blocks-timing": "^5.0.0",
     "@khanacademy/wonder-blocks-tokens": "^1.3.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.12"

package/src/components/__tests__/dropdown-core.test.tsx

@@ -772,4 +772,80 @@ describe("DropdownCore", () => {
             expect(container).toHaveTextContent("3 items");
         });
     });
+
+    describe("onOpenChanged", () => {
+        it("Should be triggered when the down key is pressed and the menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(1);
+            expect(onOpenMock).toHaveBeenCalledWith(true);
+        });
+
+        it("Should not be triggered when the dropdown is disabled and the down key is pressed and the menu is closed", async () => {
+            // Arrange
+            const onOpenMock = jest.fn();
+
+            render(
+                <DropdownCore
+                    initialFocusedIndex={undefined}
+                    onSearchTextChanged={jest.fn()}
+                    // mock the items (3 options)
+                    items={items}
+                    role="listbox"
+                    open={false}
+                    // mock the opener elements
+                    opener={<button />}
+                    onOpenChanged={onOpenMock}
+                    disabled={true}
+                />,
+            );
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(onOpenMock).toHaveBeenCalledTimes(0);
+        });
+    });
 });

package/src/components/__tests__/multi-select.test.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-constant-condition */
 /* eslint-disable max-lines */
 import * as React from "react";
-import {render, screen, waitFor} from "@testing-library/react";
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
 import {
     userEvent as ue,
     PointerEventsCheckLevel,
@@ -1623,6 +1623,73 @@ describe("MultiSelect", () => {
             // Assert
             expect(multiSelect).not.toHaveAttribute("disabled");
         });
+
+        it("should not be opened if it is disabled and `open` prop is set to true", () => {
+            // Arrange
+
+            // Act
+            doRender(
+                <MultiSelect onChange={jest.fn()} disabled={true} opened={true}>
+                    <OptionItem label="item 1" value="1" />
+                    <OptionItem label="item 2" value="2" />
+                    <OptionItem label="item 3" value="3" />
+                </MultiSelect>,
+            );
+
+            // Assert
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+
+        it("should not be able to open the select using the keyboard if there are no items", async () => {
+            // Arrange
+            doRender(<MultiSelect onChange={jest.fn()} />);
+
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
+
+        it("should not be able to open the select using the keyboard if all items are disabled", async () => {
+            // Arrange
+            doRender(
+                <MultiSelect onChange={jest.fn()}>
+                    <OptionItem label="item 1" value="1" disabled={true} />
+                    <OptionItem label="item 2" value="2" disabled={true} />
+                </MultiSelect>,
+            );
+
+            // Act
+            // Press the button
+            const button = await screen.findByRole("button");
+            // NOTE: we need to use fireEvent here because await userEvent doesn't
+            // support keyUp/Down events and we use these handlers to override
+            // the default behavior of the button.
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyDown(button, {
+                keyCode: 40,
+            });
+            // eslint-disable-next-line testing-library/prefer-user-event
+            fireEvent.keyUp(button, {
+                keyCode: 40,
+            });
+
+            // Assert
+            expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+        });
     });
 
     describe("a11y > Focusable", () => {