@khanacademy/wonder-blocks-dropdown 2.8.2 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 2.9.0
+
+### Minor Changes
+
+-   3bae2aba: Added `labels` prop to be able to translate some internal texts (already supported by MultiSelect)
+
+### Patch Changes
+
+-   Updated dependencies [3bae2aba]
+    -   @khanacademy/wonder-blocks-icon@1.2.31
+    -   @khanacademy/wonder-blocks-modal@2.3.8
+    -   @khanacademy/wonder-blocks-search-field@1.0.10
+
+## 2.8.3
+
+### Patch Changes
+
+-   Updated dependencies [6ee20af9]
+    -   @khanacademy/wonder-blocks-core@4.4.0
+    -   @khanacademy/wonder-blocks-button@3.0.3
+    -   @khanacademy/wonder-blocks-clickable@2.3.1
+    -   @khanacademy/wonder-blocks-icon@1.2.30
+    -   @khanacademy/wonder-blocks-icon-button@3.4.11
+    -   @khanacademy/wonder-blocks-layout@1.4.11
+    -   @khanacademy/wonder-blocks-modal@2.3.7
+    -   @khanacademy/wonder-blocks-search-field@1.0.9
+    -   @khanacademy/wonder-blocks-typography@1.1.33
+
 ## 2.8.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -902,7 +902,8 @@ class DropdownCore extends React.Component {
       itemRefs: [],
       sameItemsFocusable: false,
       labels: _extends({
-        noResults: defaultLabels.noResults
+        noResults: defaultLabels.noResults,
+        someResults: defaultLabels.someSelected
       }, props.labels)
     };
     this.virtualizedListRef = React.createRef();
@@ -1245,7 +1246,7 @@ class DropdownCore extends React.Component {
       "aria-relevant": "additions text",
       style: styles$3.srOnly,
       "data-test-id": "dropdown-live-region"
-    }, open && labels.someSelected(totalItems));
+    }, open && labels.someResults(totalItems));
   }
 
   render() {
@@ -1271,7 +1272,7 @@ DropdownCore.defaultProps = {
     clearSearch: defaultLabels.clearSearch,
     filter: defaultLabels.filter,
     noResults: defaultLabels.noResults,
-    someSelected: defaultLabels.someSelected
+    someResults: defaultLabels.someSelected
   },
   light: false,
   selectionType: "single"
@@ -1810,7 +1811,7 @@ const _generateStyles = (light, placeholder) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "onChange", "onToggle", "opened", "style", "className"];
+const _excluded$1 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "dropdownStyle", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className"];
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -1963,11 +1964,12 @@ class SingleSelect extends React.Component {
     const {
       alignment,
       children,
+      className,
       dropdownStyle,
       isFilterable,
+      labels,
       light,
-      style,
-      className
+      style
     } = this.props;
     const {
       searchText
@@ -1991,7 +1993,8 @@ class SingleSelect extends React.Component {
       className: className,
       isFilterable: isFilterable,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
-      searchText: isFilterable ? searchText : ""
+      searchText: isFilterable ? searchText : "",
+      labels: labels
     });
   }
 
@@ -1999,7 +2002,13 @@ class SingleSelect extends React.Component {
 SingleSelect.defaultProps = {
   alignment: "left",
   disabled: false,
-  light: false
+  light: false,
+  labels: {
+    clearSearch: defaultLabels.clearSearch,
+    filter: defaultLabels.filter,
+    noResults: defaultLabels.noResults,
+    someResults: defaultLabels.someSelected
+  }
 };
 
 const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"];
@@ -2305,7 +2314,7 @@ class MultiSelect extends React.Component {
         clearSearch,
         filter,
         noResults,
-        someSelected
+        someResults: someSelected
       }
     });
   }

package/dist/index.js

@@ -93,12 +93,6 @@ module.exports = require("react");
 
 /***/ }),
 /* 1 */
-/***/ (function(module, exports) {
-
-module.exports = require("@khanacademy/wonder-blocks-color");
-
-/***/ }),
-/* 2 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -151,6 +145,12 @@ const defaultLabels = {
   allSelected: "All items"
 };
 
+/***/ }),
+/* 2 */
+/***/ (function(module, exports) {
+
+module.exports = require("@khanacademy/wonder-blocks-color");
+
 /***/ }),
 /* 3 */
 /***/ (function(module, exports) {
@@ -202,7 +202,7 @@ module.exports = _extends, module.exports.__esModule = true, module.exports["def
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
@@ -287,7 +287,7 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router_dom__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(17);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_6__);
@@ -297,7 +297,7 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1);
 
 
 
@@ -452,7 +452,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
@@ -462,7 +462,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(11);
 /* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
 /* harmony import */ var _check_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(26);
 /* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(27);
 
@@ -690,7 +690,7 @@ DropdownOpener.defaultProps = {
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(20);
 /* harmony import */ var react_window__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_window__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
@@ -704,7 +704,7 @@ DropdownOpener.defaultProps = {
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_9__);
 /* harmony import */ var _dropdown_core_virtualized_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(29);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(7);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(1);
 /* harmony import */ var _dropdown_popper_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(31);
 /* harmony import */ var _util_helpers_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(21);
 /* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(16);
@@ -1001,6 +1001,8 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       sameItemsFocusable: false,
       labels: {
         noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
+        // In case we are not overriding this from the caller.
+        someResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].someSelected,
         ...props.labels
       }
     };
@@ -1431,7 +1433,7 @@ class DropdownCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       "aria-relevant": "additions text",
       style: styles.srOnly,
       "data-test-id": "dropdown-live-region"
-    }, open && labels.someSelected(totalItems));
+    }, open && labels.someResults(totalItems));
   }
 
   render() {
@@ -1457,7 +1459,7 @@ DropdownCore.defaultProps = {
     clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].clearSearch,
     filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].filter,
     noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].noResults,
-    someSelected: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].someSelected
+    someResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_12__[/* defaultLabels */ "d"].someSelected
   },
   light: false,
   selectionType: "single"
@@ -1519,7 +1521,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return generateDropdownMenuStyles; });
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
+/* harmony import */ var _constants_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
 /* harmony import */ var _components_separator_item_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(7);
 
 
@@ -1590,7 +1592,7 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(17);
 /* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(react_router__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
@@ -1602,7 +1604,7 @@ module.exports = require("@khanacademy/wonder-blocks-timing");
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_8__);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(1);
 
 
 
@@ -2108,7 +2110,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_3__["StyleSheet"].create({
 /* harmony import */ var _dropdown_core_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(15);
 /* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(14);
 /* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(19);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
 
 
 
@@ -2286,6 +2288,7 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
       alignment,
       dropdownStyle,
       isFilterable,
+      labels,
       onChange,
       onToggle,
       opened,
@@ -2321,11 +2324,12 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
     const {
       alignment,
       children,
+      className,
       dropdownStyle,
       isFilterable,
+      labels,
       light,
-      style,
-      className
+      style
     } = this.props;
     const {
       searchText
@@ -2349,7 +2353,8 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
       className: className,
       isFilterable: isFilterable,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : null,
-      searchText: isFilterable ? searchText : ""
+      searchText: isFilterable ? searchText : "",
+      labels: labels
     });
   }
 
@@ -2357,7 +2362,13 @@ class SingleSelect extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
 SingleSelect.defaultProps = {
   alignment: "left",
   disabled: false,
-  light: false
+  light: false,
+  labels: {
+    clearSearch: _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* defaultLabels */ "d"].clearSearch,
+    filter: _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* defaultLabels */ "d"].filter,
+    noResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* defaultLabels */ "d"].noResults,
+    someResults: _util_constants_js__WEBPACK_IMPORTED_MODULE_6__[/* defaultLabels */ "d"].someSelected
+  }
 };
 
 /***/ }),
@@ -2377,7 +2388,7 @@ SingleSelect.defaultProps = {
 /* harmony import */ var _dropdown_opener_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(14);
 /* harmony import */ var _select_opener_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(19);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(7);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(1);
 
 
 
@@ -2748,7 +2759,7 @@ class MultiSelect extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
         clearSearch,
         filter,
         noResults,
-        someSelected
+        someResults: someSelected
       }
     });
   }
@@ -2778,7 +2789,7 @@ module.exports = require("react-router-dom");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(9);
 /* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_3__);
@@ -2835,7 +2846,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_3__);
@@ -2939,7 +2950,7 @@ module.exports = require("@khanacademy/wonder-blocks-search-field");
 /* harmony import */ var _khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_timing__WEBPACK_IMPORTED_MODULE_3__);
 /* harmony import */ var _dropdown_core_virtualized_item_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(30);
 /* harmony import */ var _separator_item_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(1);
 /* harmony import */ var _util_dropdown_menu_styles_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(16);
 
 
@@ -3273,7 +3284,7 @@ module.exports = require("@khanacademy/wonder-blocks-modal");
 /* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(10);
 /* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(1);
+/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
 /* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_4__);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(5);
 /* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_5__);
@@ -3283,7 +3294,7 @@ module.exports = require("@khanacademy/wonder-blocks-modal");
 /* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(35);
 /* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_8__);
-/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(2);
+/* harmony import */ var _util_constants_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(1);
 
 
 

package/docs.md

@@ -1,12 +1,5 @@
-Dropdowns consist of an opener and the part that contains the items. The latter
-component is portalled to a place in the DOM that prevents is from being clipped
-by an overflow: auto container. This would be either as a child of `body` or the
-modal launcher portal if the dropdown is used in a modal.
+Documentation for `@khanacademy/wonder-blocks-dropdown` is now in Storybook.
 
-Clicking the opener should open and close the dropdown. It is also possible to
-close the dropdown by clicking elsewhere on the page.
-
-For keyboard use, use space/down key to open the menu and up/down arrow keys for
-item navigation. Space may be used for selection on option items. The tab or
-escape key may be used to close the menu (tab would also shift focus to the next
-element on the page).
+Visit the [Storybook
+Dropdown](https://khan.github.io/wonder-blocks/?path=/docs/dropdown) docs on
+GitHub Pages.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.8.2",
+  "version": "2.9.0",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,18 +16,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-button": "^3.0.2",
-    "@khanacademy/wonder-blocks-clickable": "^2.3.0",
+    "@khanacademy/wonder-blocks-clickable": "^2.3.1",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
-    "@khanacademy/wonder-blocks-core": "^4.3.2",
-    "@khanacademy/wonder-blocks-icon": "^1.2.29",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.10",
-    "@khanacademy/wonder-blocks-layout": "^1.4.10",
-    "@khanacademy/wonder-blocks-modal": "^2.3.6",
-    "@khanacademy/wonder-blocks-search-field": "^1.0.8",
+    "@khanacademy/wonder-blocks-core": "^4.4.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.31",
+    "@khanacademy/wonder-blocks-layout": "^1.4.11",
+    "@khanacademy/wonder-blocks-modal": "^2.3.8",
+    "@khanacademy/wonder-blocks-search-field": "^1.0.10",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
     "@khanacademy/wonder-blocks-timing": "^2.1.0",
-    "@khanacademy/wonder-blocks-typography": "^1.1.32"
+    "@khanacademy/wonder-blocks-typography": "^1.1.33"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -40,6 +38,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
+    "@khanacademy/wonder-blocks-button": "^3.0.4",
     "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/__docs__/single-select.stories.js

@@ -17,6 +17,9 @@ import {
     OptionItem,
     SeparatorItem,
 } from "@khanacademy/wonder-blocks-dropdown";
+
+import type {SingleSelectLabels} from "@khanacademy/wonder-blocks-dropdown";
+
 import ComponentInfo from "../../../../../.storybook/components/component-info.js";
 import {name, version} from "../../../package.json";
 import singleSelectArgtypes from "./base-select.argtypes.js";
@@ -462,3 +465,54 @@ CustomOpener.parameters = {
         },
     },
 };
+
+/**
+ * Custom labels
+ */
+const translatedItems = [
+    <OptionItem label="Banano" value="banano" />,
+    <OptionItem label="Fresa" value="fresa" disabled />,
+    <OptionItem label="Pera" value="pera" />,
+    <OptionItem label="Naranja" value="naranja" />,
+    <OptionItem label="Sandia" value="sandia" />,
+    <OptionItem label="Manzana" value="manzana" />,
+    <OptionItem label="Uva" value="uva" />,
+    <OptionItem label="Limon" value="limon" />,
+    <OptionItem label="Mango" value="mango" />,
+];
+
+export const CustomLabels: StoryComponentType = () => {
+    const [value, setValue] = React.useState(null);
+    const [opened, setOpened] = React.useState(true);
+
+    const translatedLabels: $Shape<SingleSelectLabels> = {
+        clearSearch: "Limpiar busqueda",
+        filter: "Filtrar",
+        noResults: "Sin resultados",
+        someResults: (numResults) => `${numResults} frutas`,
+    };
+
+    return (
+        <View style={styles.wrapper}>
+            <SingleSelect
+                isFilterable={true}
+                onChange={setValue}
+                selectedValue={value}
+                labels={translatedLabels}
+                opened={opened}
+                onToggle={setOpened}
+                placeholder="Selecciona una fruta"
+            >
+                {translatedItems}
+            </SingleSelect>
+        </View>
+    );
+};
+
+CustomLabels.parameters = {
+    docs: {
+        description: {
+            story: "This example illustrates how you can pass custom labels to the `SingleSelect` component.",
+        },
+    },
+};

package/src/components/__tests__/single-select.test.js

@@ -5,6 +5,7 @@ import userEvent from "@testing-library/user-event";
 
 import OptionItem from "../option-item.js";
 import SingleSelect from "../single-select.js";
+import type {SingleSelectLabels} from "../single-select.js";
 
 describe("SingleSelect", () => {
     const onChange = jest.fn();
@@ -457,6 +458,7 @@ describe("SingleSelect", () => {
             // Arrange
             render(
                 <SingleSelect
+                    light={true}
                     onChange={onChange}
                     isFilterable={true}
                     placeholder="Choose"
@@ -715,4 +717,97 @@ describe("SingleSelect", () => {
             expect(liveRegionText).toEqual("1 items");
         });
     });
+
+    describe("Custom labels", () => {
+        const translatedItems = [
+            <OptionItem label="Banano" value="banano" />,
+            <OptionItem label="Fresa" value="fresa" disabled />,
+            <OptionItem label="Pera" value="pera" />,
+            <OptionItem label="Naranja" value="naranja" />,
+            <OptionItem label="Sandia" value="sandia" />,
+            <OptionItem label="Manzana" value="manzana" />,
+            <OptionItem label="Uva" value="uva" />,
+            <OptionItem label="Limon" value="limon" />,
+            <OptionItem label="Mango" value="mango" />,
+        ];
+
+        it("passes the custom label to the search input field", () => {
+            // Arrange
+            const labels: $Shape<SingleSelectLabels> = {
+                filter: "Filtrar",
+            };
+
+            // Act
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    placeholder="Escoge una fruta"
+                    isFilterable={true}
+                    opened={true}
+                    labels={labels}
+                >
+                    {translatedItems}
+                </SingleSelect>,
+            );
+
+            // Assert
+            expect(screen.getByPlaceholderText("Filtrar")).toBeInTheDocument();
+        });
+
+        it("passes the custom label to the dismiss filter icon", () => {
+            // Arrange
+            const labels: $Shape<SingleSelectLabels> = {
+                clearSearch: "Limpiar busqueda",
+                filter: "Filtrar",
+            };
+
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    placeholder="Escoge una fruta"
+                    isFilterable={true}
+                    opened={true}
+                    labels={labels}
+                >
+                    {translatedItems}
+                </SingleSelect>,
+            );
+
+            // Act
+            // Add text to the filter input to display the dismiss icon button.
+            userEvent.type(screen.getByPlaceholderText("Filtrar"), "m");
+
+            // Assert
+            expect(
+                screen.getByLabelText("Limpiar busqueda"),
+            ).toBeInTheDocument();
+        });
+
+        it("passes the custom label to the no results label", () => {
+            // Arrange
+            const labels: $Shape<SingleSelectLabels> = {
+                filter: "Filtrar",
+                noResults: "No hay resultados",
+            };
+
+            render(
+                <SingleSelect
+                    onChange={onChange}
+                    placeholder="Escoge una fruta"
+                    isFilterable={true}
+                    opened={true}
+                    labels={labels}
+                >
+                    {translatedItems}
+                </SingleSelect>,
+            );
+
+            // Act
+            // Add text to the filter input with a random word.
+            userEvent.type(screen.getByPlaceholderText("Filtrar"), "invalid");
+
+            // Assert
+            expect(screen.getByText("No hay resultados")).toBeInTheDocument();
+        });
+    });
 });