@khanacademy/wonder-blocks-dropdown 9.1.5 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 9.2.0
+
+### Minor Changes
+
+- af828a5: Integrates Announcer for value announcements in SingleSelect and MultiSelect
+
+### Patch Changes
+
+- Updated dependencies [af828a5]
+- Updated dependencies [fe17b20]
+    - @khanacademy/wonder-blocks-announcer@1.0.0
+
 ## 9.1.5
 
 ### Patch Changes

package/dist/es/index.js

@@ -19,6 +19,7 @@ import { Popper } from 'react-popper';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
 import { detectOverflow } from '@popperjs/core';
 import caretDownIcon from '@phosphor-icons/core/bold/caret-down-bold.svg';
+import { announceMessage } from '@khanacademy/wonder-blocks-announcer';
 import caretDownIcon$1 from '@phosphor-icons/core/regular/caret-down.svg';
 import xIcon from '@phosphor-icons/core/regular/x.svg';
 import { TextField } from '@khanacademy/wonder-blocks-form';
@@ -855,7 +856,6 @@ function getSelectOpenerLabel(showOpenerLabelAsText, props) {
 }
 
 const VIRTUALIZE_THRESHOLD = 125;
-const StyledSpan$1 = addStyle("span");
 class DropdownCore extends React.Component {
   static sameItemsFocusable(prevItems, currentItems) {
     if (prevItems.length !== currentItems.length) {
@@ -1357,23 +1357,6 @@ class DropdownCore extends React.Component {
       referenceElement: openerElement
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
-  renderLiveRegion() {
-    const {
-      items,
-      open
-    } = this.props;
-    const {
-      labels
-    } = this.state;
-    const totalItems = items.length;
-    return React.createElement(StyledSpan$1, {
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      "aria-relevant": "additions text",
-      style: styles$6.srOnly,
-      "data-testid": "dropdown-live-region"
-    }, open && labels.someResults(totalItems));
-  }
   render() {
     const {
       open,
@@ -1387,7 +1370,7 @@ class DropdownCore extends React.Component {
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$6.menuWrapper, style],
       className: className
-    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
+    }, opener, open && this.renderDropdown());
   }
 }
 DropdownCore.defaultProps = {
@@ -2137,10 +2120,30 @@ const SingleSelect = props => {
   const handleClick = e => {
     handleOpenChanged(!open);
   };
+  const handleAnnouncement = message => {
+    announceMessage({
+      message
+    });
+  };
+  React.useEffect(() => {
+    const optionItems = React.Children.toArray(children);
+    const selectedItem = optionItems.find(option => option.props.value === selectedValue);
+    if (selectedItem) {
+      const label = getLabel(selectedItem.props);
+      if (label) {
+        handleAnnouncement(label);
+      }
+    }
+  }, [selectedValue, children]);
   const renderOpener = (isDisabled, dropdownId) => {
     const items = React.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
-    const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
+    let menuContent;
+    if (selectedItem) {
+      menuContent = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props);
+    } else {
+      menuContent = placeholder;
+    }
     const dropdownOpener = React.createElement(Id, {
       id: id
     }, uniqueOpenerId => {
@@ -2153,7 +2156,7 @@ const SingleSelect = props => {
         disabled: isDisabled,
         ref: handleOpenerRef,
         role: "combobox",
-        text: menuText,
+        text: menuContent,
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
@@ -2169,7 +2172,7 @@ const SingleSelect = props => {
         ref: handleOpenerRef,
         testId: testId,
         onBlur: onOpenerBlurValidation
-      }), menuText);
+      }), menuContent);
     });
     return dropdownOpener;
   };
@@ -2177,6 +2180,14 @@ const SingleSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const items = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
+  const {
+    someResults
+  } = labels;
+  React.useEffect(() => {
+    if (open) {
+      handleAnnouncement(someResults(items.length));
+    }
+  }, [items.length, someResults, open]);
   return React.createElement(Id, {
     id: dropdownId
   }, uniqueDropdownId => React.createElement(DropdownCore$1, {
@@ -2236,7 +2247,9 @@ const MultiSelect = props => {
       required
     } = props,
     sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
-  const labels = _extends({}, defaultLabels, propLabels);
+  const labels = React.useMemo(() => {
+    return _extends({}, defaultLabels, propLabels);
+  }, [propLabels]);
   const [open, setOpen] = React.useState(false);
   const [searchText, setSearchText] = React.useState("");
   const [lastSelectedValues, setLastSelectedValues] = React.useState([]);
@@ -2298,7 +2311,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuTextOrNode = children => {
+  const getMenuTextOrNode = React.useCallback(children => {
     const {
       noneSelected,
       someSelected,
@@ -2325,7 +2338,7 @@ const MultiSelect = props => {
       default:
         return someSelected(selectedValues.length);
     }
-  };
+  }, [implicitAllEnabled, labels, selectedValues, showOpenerLabelAsText]);
   const getShortcuts = numOptions => {
     const {
       selectAllLabel,
@@ -2420,11 +2433,34 @@ const MultiSelect = props => {
   const handleClick = e => {
     handleOpenChanged(!open);
   };
+  const handleAnnouncement = message => {
+    announceMessage({
+      message
+    });
+  };
+  const maybeGetOpenerStringValue = React.useCallback((children, openerContent) => {
+    let openerStringValue;
+    if (selectedValues.length === 1) {
+      const selectedItem = children.find(option => option.props.value === selectedValues[0]);
+      openerStringValue = selectedItem ? getLabel(selectedItem == null ? void 0 : selectedItem.props) : undefined;
+    } else if (typeof openerContent === "string") {
+      openerStringValue = openerContent;
+    }
+    return openerStringValue;
+  }, [selectedValues]);
+  React.useEffect(() => {
+    const optionItems = React.Children.toArray(children);
+    const openerContent = getMenuTextOrNode(optionItems);
+    const openerStringValue = maybeGetOpenerStringValue(optionItems, openerContent);
+    if (openerStringValue) {
+      handleAnnouncement(openerStringValue);
+    }
+  }, [children, getMenuTextOrNode, maybeGetOpenerStringValue]);
   const renderOpener = (allChildren, isDisabled, dropdownId) => {
     const {
       noneSelected
     } = labels;
-    const menuContent = getMenuTextOrNode(allChildren);
+    const openerContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React.createElement(Id, {
       id: id
     }, uniqueOpenerId => {
@@ -2439,7 +2475,7 @@ const MultiSelect = props => {
         disabled: isDisabled,
         ref: handleOpenerRef,
         role: "combobox",
-        text: menuContent,
+        text: openerContent,
         opened: open
       }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
         error: hasError,
@@ -2447,13 +2483,13 @@ const MultiSelect = props => {
         id: uniqueOpenerId,
         "aria-label": ariaLabel,
         "aria-controls": dropdownId,
-        isPlaceholder: menuContent === noneSelected,
+        isPlaceholder: openerContent === noneSelected,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
         ref: handleOpenerRef,
         testId: testId
-      }), menuContent);
+      }), openerContent);
     });
     return dropdownOpener;
   };
@@ -2467,6 +2503,11 @@ const MultiSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const filteredItems = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
+  React.useEffect(() => {
+    if (open) {
+      handleAnnouncement(someSelected(filteredItems.length));
+    }
+  }, [filteredItems.length, someSelected, open]);
   return React.createElement(Id, {
     id: dropdownId
   }, uniqueDropdownId => React.createElement(DropdownCore$1, {

package/dist/index.js

@@ -22,6 +22,7 @@ var reactPopper = require('react-popper');
 var wonderBlocksModal = require('@khanacademy/wonder-blocks-modal');
 var core = require('@popperjs/core');
 var caretDownIcon = require('@phosphor-icons/core/bold/caret-down-bold.svg');
+var wonderBlocksAnnouncer = require('@khanacademy/wonder-blocks-announcer');
 var caretDownIcon$1 = require('@phosphor-icons/core/regular/caret-down.svg');
 var xIcon = require('@phosphor-icons/core/regular/x.svg');
 var wonderBlocksForm = require('@khanacademy/wonder-blocks-form');
@@ -890,7 +891,6 @@ function getSelectOpenerLabel(showOpenerLabelAsText, props) {
 }
 
 const VIRTUALIZE_THRESHOLD = 125;
-const StyledSpan$1 = wonderBlocksCore.addStyle("span");
 class DropdownCore extends React__namespace.Component {
   static sameItemsFocusable(prevItems, currentItems) {
     if (prevItems.length !== currentItems.length) {
@@ -1392,23 +1392,6 @@ class DropdownCore extends React__namespace.Component {
       referenceElement: openerElement
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
-  renderLiveRegion() {
-    const {
-      items,
-      open
-    } = this.props;
-    const {
-      labels
-    } = this.state;
-    const totalItems = items.length;
-    return React__namespace.createElement(StyledSpan$1, {
-      "aria-live": "polite",
-      "aria-atomic": "true",
-      "aria-relevant": "additions text",
-      style: styles$6.srOnly,
-      "data-testid": "dropdown-live-region"
-    }, open && labels.someResults(totalItems));
-  }
   render() {
     const {
       open,
@@ -1422,7 +1405,7 @@ class DropdownCore extends React__namespace.Component {
       onKeyUp: !disabled ? this.handleKeyUp : undefined,
       style: [styles$6.menuWrapper, style],
       className: className
-    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
+    }, opener, open && this.renderDropdown());
   }
 }
 DropdownCore.defaultProps = {
@@ -2172,10 +2155,30 @@ const SingleSelect = props => {
   const handleClick = e => {
     handleOpenChanged(!open);
   };
+  const handleAnnouncement = message => {
+    wonderBlocksAnnouncer.announceMessage({
+      message
+    });
+  };
+  React__namespace.useEffect(() => {
+    const optionItems = React__namespace.Children.toArray(children);
+    const selectedItem = optionItems.find(option => option.props.value === selectedValue);
+    if (selectedItem) {
+      const label = getLabel(selectedItem.props);
+      if (label) {
+        handleAnnouncement(label);
+      }
+    }
+  }, [selectedValue, children]);
   const renderOpener = (isDisabled, dropdownId) => {
     const items = React__namespace.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
-    const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
+    let menuContent;
+    if (selectedItem) {
+      menuContent = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props);
+    } else {
+      menuContent = placeholder;
+    }
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
       id: id
     }, uniqueOpenerId => {
@@ -2188,7 +2191,7 @@ const SingleSelect = props => {
         disabled: isDisabled,
         ref: handleOpenerRef,
         role: "combobox",
-        text: menuText,
+        text: menuContent,
         opened: open,
         error: hasError,
         onBlur: onOpenerBlurValidation
@@ -2204,7 +2207,7 @@ const SingleSelect = props => {
         ref: handleOpenerRef,
         testId: testId,
         onBlur: onOpenerBlurValidation
-      }), menuText);
+      }), menuContent);
     });
     return dropdownOpener;
   };
@@ -2212,6 +2215,14 @@ const SingleSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const items = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
+  const {
+    someResults
+  } = labels;
+  React__namespace.useEffect(() => {
+    if (open) {
+      handleAnnouncement(someResults(items.length));
+    }
+  }, [items.length, someResults, open]);
   return React__namespace.createElement(wonderBlocksCore.Id, {
     id: dropdownId
   }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
@@ -2271,7 +2282,9 @@ const MultiSelect = props => {
       required
     } = props,
     sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
-  const labels = _extends__default["default"]({}, defaultLabels, propLabels);
+  const labels = React__namespace.useMemo(() => {
+    return _extends__default["default"]({}, defaultLabels, propLabels);
+  }, [propLabels]);
   const [open, setOpen] = React__namespace.useState(false);
   const [searchText, setSearchText] = React__namespace.useState("");
   const [lastSelectedValues, setLastSelectedValues] = React__namespace.useState([]);
@@ -2333,7 +2346,7 @@ const MultiSelect = props => {
     onChange([]);
     onSelectedValuesChangeValidation();
   };
-  const getMenuTextOrNode = children => {
+  const getMenuTextOrNode = React__namespace.useCallback(children => {
     const {
       noneSelected,
       someSelected,
@@ -2360,7 +2373,7 @@ const MultiSelect = props => {
       default:
         return someSelected(selectedValues.length);
     }
-  };
+  }, [implicitAllEnabled, labels, selectedValues, showOpenerLabelAsText]);
   const getShortcuts = numOptions => {
     const {
       selectAllLabel,
@@ -2455,11 +2468,34 @@ const MultiSelect = props => {
   const handleClick = e => {
     handleOpenChanged(!open);
   };
+  const handleAnnouncement = message => {
+    wonderBlocksAnnouncer.announceMessage({
+      message
+    });
+  };
+  const maybeGetOpenerStringValue = React__namespace.useCallback((children, openerContent) => {
+    let openerStringValue;
+    if (selectedValues.length === 1) {
+      const selectedItem = children.find(option => option.props.value === selectedValues[0]);
+      openerStringValue = selectedItem ? getLabel(selectedItem == null ? void 0 : selectedItem.props) : undefined;
+    } else if (typeof openerContent === "string") {
+      openerStringValue = openerContent;
+    }
+    return openerStringValue;
+  }, [selectedValues]);
+  React__namespace.useEffect(() => {
+    const optionItems = React__namespace.Children.toArray(children);
+    const openerContent = getMenuTextOrNode(optionItems);
+    const openerStringValue = maybeGetOpenerStringValue(optionItems, openerContent);
+    if (openerStringValue) {
+      handleAnnouncement(openerStringValue);
+    }
+  }, [children, getMenuTextOrNode, maybeGetOpenerStringValue]);
   const renderOpener = (allChildren, isDisabled, dropdownId) => {
     const {
       noneSelected
     } = labels;
-    const menuContent = getMenuTextOrNode(allChildren);
+    const openerContent = getMenuTextOrNode(allChildren);
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.Id, {
       id: id
     }, uniqueOpenerId => {
@@ -2474,7 +2510,7 @@ const MultiSelect = props => {
         disabled: isDisabled,
         ref: handleOpenerRef,
         role: "combobox",
-        text: menuContent,
+        text: openerContent,
         opened: open
       }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
         error: hasError,
@@ -2482,13 +2518,13 @@ const MultiSelect = props => {
         id: uniqueOpenerId,
         "aria-label": ariaLabel,
         "aria-controls": dropdownId,
-        isPlaceholder: menuContent === noneSelected,
+        isPlaceholder: openerContent === noneSelected,
         onOpenChanged: handleOpenChanged,
         onBlur: onOpenerBlurValidation,
         open: open,
         ref: handleOpenerRef,
         testId: testId
-      }), menuContent);
+      }), openerContent);
     });
     return dropdownOpener;
   };
@@ -2502,6 +2538,11 @@ const MultiSelect = props => {
   const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
   const filteredItems = getMenuItems(allChildren);
   const isDisabled = numEnabledOptions === 0 || disabled;
+  React__namespace.useEffect(() => {
+    if (open) {
+      handleAnnouncement(someSelected(filteredItems.length));
+    }
+  }, [filteredItems.length, someSelected, open]);
   return React__namespace.createElement(wonderBlocksCore.Id, {
     id: dropdownId
   }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {

package/dist/util/helpers.d.ts

@@ -22,7 +22,7 @@ type OptionItemProps = PropsFor<typeof OptionItem>;
  */
 export declare function getLabel(props: OptionItemProps): string;
 /**
- * Returns the label for the SelectOpener in the SingleSelect and MultiSelect.
+ * Returns the label for the SelectOpener in SingleSelect.
  * If the label is a Node, and `labelAsText` is undefined, returns the label.
  */
 export declare function getSelectOpenerLabel(showOpenerLabelAsText: boolean, props: OptionItemProps): string | JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "9.1.5",
+  "version": "9.2.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
+    "@khanacademy/wonder-blocks-announcer": "1.0.0",
     "@khanacademy/wonder-blocks-cell": "4.1.4",
     "@khanacademy/wonder-blocks-clickable": "6.1.4",
     "@khanacademy/wonder-blocks-core": "12.2.1",
@@ -21,9 +22,9 @@
     "@khanacademy/wonder-blocks-modal": "7.1.4",
     "@khanacademy/wonder-blocks-pill": "3.1.4",
     "@khanacademy/wonder-blocks-search-field": "5.1.4",
-    "@khanacademy/wonder-blocks-timing": "7.0.2",
     "@khanacademy/wonder-blocks-tokens": "5.1.1",
-    "@khanacademy/wonder-blocks-typography": "3.1.3"
+    "@khanacademy/wonder-blocks-typography": "3.1.3",
+    "@khanacademy/wonder-blocks-timing": "7.0.2"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",