@khanacademy/wonder-blocks-dropdown 2.7.0 → 2.7.3

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.7.3
+
+### Patch Changes
+
+-   d0a76cf5: Add live region to announce the number of options (fixing an iOS issue)
+
+## 2.7.2
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-button@2.11.6
+    -   @khanacademy/wonder-blocks-clickable@2.2.7
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-icon-button@3.4.7
+    -   @khanacademy/wonder-blocks-layout@1.4.10
+    -   @khanacademy/wonder-blocks-modal@2.3.2
+    -   @khanacademy/wonder-blocks-search-field@1.0.5
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
+## 2.7.1
+
+### Patch Changes
+
+-   9c2580e6: Fixed the search field focus bug in dropdowns
+
 ## 2.7.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -35,7 +35,8 @@ const filterableDropdownStyle = {
 };
 const searchInputStyle = {
   margin: Spacing.xSmall_8,
-  marginTop: Spacing.xxxSmall_4
+  marginTop: Spacing.xxxSmall_4,
+  minHeight: "auto"
 };
 const DROPDOWN_ITEM_HEIGHT = 40;
 const MAX_VISIBLE_ITEMS = 9;
@@ -491,6 +492,14 @@ class SearchTextInput extends React.Component {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
+  componentDidMount() {
+    if (this.props.autofocus) {
+      var _this$props$itemRef;
+
+      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
+    }
+  }
+
   render() {
     const {
       labels,
@@ -710,6 +719,7 @@ function DropdownPopper({
 }
 
 const VIRTUALIZE_THRESHOLD = 125;
+const StyledSpan = addStyle("span");
 
 class DropdownCore extends React.Component {
   static sameItemsFocusable(prevItems, currentItems) {
@@ -1102,7 +1112,8 @@ class DropdownCore extends React.Component {
             this.handleClickFocus(0);
             this.focusCurrentItem();
           },
-          style: searchInputStyle
+          style: searchInputStyle,
+          autofocus: this.focusedIndex === 0
         }));
       }
 
@@ -1135,7 +1146,8 @@ class DropdownCore extends React.Component {
           },
           populatedProps: {
             style: searchInputStyle,
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
+            autofocus: this.focusedIndex === 0
           }
         });
       }
@@ -1190,6 +1202,24 @@ class DropdownCore extends React.Component {
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
+  renderLiveRegion() {
+    const {
+      items,
+      open
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    return React.createElement(StyledSpan, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-relevant": "additions text",
+      style: styles$3.srOnly,
+      "data-test-id": "dropdown-live-region"
+    }, open && labels.someSelected(totalItems));
+  }
+
   render() {
     const {
       open,
@@ -1202,7 +1232,7 @@ class DropdownCore extends React.Component {
       onKeyUp: this.handleKeyUp,
       style: [styles$3.menuWrapper, style],
       className: className
-    }, opener, open && this.renderDropdown());
+    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
 
 }
@@ -1210,7 +1240,8 @@ class DropdownCore extends React.Component {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: defaultLabels.noResults
+    noResults: defaultLabels.noResults,
+    someSelected: defaultLabels.someSelected
   },
   light: false
 };
@@ -1238,6 +1269,16 @@ const styles$3 = StyleSheet.create({
     color: Color.offBlack64,
     alignSelf: "center",
     marginTop: Spacing.xxSmall_6
+  },
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
   }
 });
 var DropdownCore$1 = withActionScheduler(DropdownCore);
@@ -2241,7 +2282,8 @@ class MultiSelect extends React.Component {
       searchText
     } = this.state;
     const {
-      noResults
+      noResults,
+      someSelected
     } = this.state.labels;
     const allChildren = React.Children.toArray(children).filter(Boolean);
     const numOptions = allChildren.length;
@@ -2262,7 +2304,8 @@ class MultiSelect extends React.Component {
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
-        noResults
+        noResults,
+        someSelected
       }
     });
   }

package/dist/index.js

@@ -127,7 +127,10 @@ const filterableDropdownStyle = {
 };
 const searchInputStyle = {
   margin: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xSmall_8,
-  marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxxSmall_4
+  marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_0___default.a.xxxSmall_4,
+  // Set `minHeight` to "auto" to stop the search field from having
+  // a height of 0 and being cut off.
+  minHeight: "auto"
 }; // The default item height
 
 const DROPDOWN_ITEM_HEIGHT = 40;
@@ -257,6 +260,23 @@ class SearchTextInput extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     return instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__;
   }
 
+  // TODO(WB-1310): Remove `componentDidMount` autofocus on the search field
+  // after making the search field sticky.
+  componentDidMount() {
+    // We need to re-focus on the text input after it mounts because of
+    // the case in which the dropdown switches between virtualized and
+    // non-virtualized. It can rerender the search field as the user is
+    // typing based on the number of search results, which results
+    // in losing focus on the field so the user can't type anymore.
+    // To work around this issue, this temporary fix auto-focuses on the
+    // search field on mount.
+    if (this.props.autofocus) {
+      var _this$props$itemRef;
+
+      (_this$props$itemRef = this.props.itemRef) == null ? void 0 : _this$props$itemRef.current.focus();
+    }
+  }
+
   render() {
     const {
       labels,
@@ -767,6 +787,7 @@ DropdownOpener.defaultProps = {
  */
 
 const VIRTUALIZE_THRESHOLD = 125;
+const StyledSpan = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__["addStyle"])("span");
 
 /**
  * A core dropdown component that takes an opener and children to display as
@@ -1253,7 +1274,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
             this.focusCurrentItem();
           },
           // apply custom styles
-          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"]
+          style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
+          // TODO(WB-1310): Remove the autofocus prop after making
+          // the search field sticky.
+          // Currently autofocusing on the search field to work
+          // around it losing focus on mount when switching between
+          // virtualized and non-virtualized dropdown filter results.
+          autofocus: this.focusedIndex === 0
         });
       } // Render OptionItem and/or ActionItem elements.
 
@@ -1299,7 +1326,13 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           populatedProps: {
             style: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* searchInputStyle */ "h"],
             // pass the current ref down to the input element
-            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null
+            itemRef: this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
+            // TODO(WB-1310): Remove the autofocus prop after making
+            // the search field sticky.
+            // Currently autofocusing on the search field to work
+            // around it losing focus on mount when switching between
+            // virtualized and non-virtualized dropdown filter results.
+            autofocus: this.focusedIndex === 0
           }
         };
       }
@@ -1369,6 +1402,24 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     }, isReferenceHidden => this.renderDropdownMenu(listRenderer, isReferenceHidden));
   }
 
+  renderLiveRegion() {
+    const {
+      items,
+      open
+    } = this.props;
+    const {
+      labels
+    } = this.state;
+    const totalItems = this.hasSearchBox() ? items.length - 1 : items.length;
+    return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      "aria-relevant": "additions text",
+      style: styles.srOnly,
+      "data-test-id": "dropdown-live-region"
+    }, open && labels.someSelected(totalItems));
+  }
+
   render() {
     const {
       open,
@@ -1381,7 +1432,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onKeyUp: this.handleKeyUp,
       style: [styles.menuWrapper, style],
       className: className
-    }, opener, open && this.renderDropdown());
+    }, this.renderLiveRegion(), opener, open && this.renderDropdown());
   }
 
 }
@@ -1389,7 +1440,8 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 DropdownCore.defaultProps = {
   alignment: "left",
   labels: {
-    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults
+    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].noResults,
+    someSelected: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "e"].someSelected
   },
   light: false
 };
@@ -1418,6 +1470,16 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default.a.offBlack64,
     alignSelf: "center",
     marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxSmall_6
+  },
+  srOnly: {
+    border: 0,
+    clip: "rect(0,0,0,0)",
+    height: 1,
+    margin: -1,
+    overflow: "hidden",
+    padding: 0,
+    position: "absolute",
+    width: 1
   }
 });
 /* harmony default export */ __webpack_exports__["a"] = (Object(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_8__["withActionScheduler"])(DropdownCore));
@@ -2600,7 +2662,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       searchText
     } = this.state;
     const {
-      noResults
+      noResults,
+      someSelected
     } = this.state.labels;
     const allChildren = react__WEBPACK_IMPORTED_MODULE_0__["Children"].toArray(children).filter(Boolean);
     const numOptions = allChildren.length;
@@ -2621,7 +2684,8 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
       searchText: isFilterable ? searchText : "",
       labels: {
-        noResults
+        noResults,
+        someSelected
       }
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.7.0",
+  "version": "2.7.3",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,18 +16,18 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-button": "^2.11.5",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.6",
+    "@khanacademy/wonder-blocks-button": "^2.11.6",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.1",
-    "@khanacademy/wonder-blocks-icon": "^1.2.27",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.6",
-    "@khanacademy/wonder-blocks-layout": "^1.4.9",
-    "@khanacademy/wonder-blocks-modal": "^2.3.1",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.4",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.28",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.7",
+    "@khanacademy/wonder-blocks-layout": "^1.4.10",
+    "@khanacademy/wonder-blocks-modal": "^2.3.2",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.5",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.31"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",