@khanacademy/wonder-blocks-dropdown 2.8.2 → 2.9.0

package/src/components/dropdown-core.js

@@ -62,12 +62,10 @@ type Labels = {|
      */
     noResults: string,
     /**
-     * The number total of items available.
-     *
-     * NOTE: We are reusing the same label for both the total number of items
-     * and the number of selected items.
+     * The total number of available options in the dropdown.
+     * These can be all items or only the ones that match the filter.
      */
-    someSelected: (numOptions: number) => string,
+    someResults: (numOptions: number) => string,
 |};
 
 // we need to define a DefaultProps type to allow the HOC expose the default
@@ -253,7 +251,7 @@ class DropdownCore extends React.Component<Props, State> {
             clearSearch: defaultLabels.clearSearch,
             filter: defaultLabels.filter,
             noResults: defaultLabels.noResults,
-            someSelected: defaultLabels.someSelected,
+            someResults: defaultLabels.someSelected,
         },
         light: false,
         selectionType: "single",
@@ -302,6 +300,8 @@ class DropdownCore extends React.Component<Props, State> {
             sameItemsFocusable: false,
             labels: {
                 noResults: defaultLabels.noResults,
+                // In case we are not overriding this from the caller.
+                someResults: defaultLabels.someSelected,
                 ...props.labels,
             },
         };
@@ -945,7 +945,7 @@ class DropdownCore extends React.Component<Props, State> {
                 style={styles.srOnly}
                 data-test-id="dropdown-live-region"
             >
-                {open && labels.someSelected(totalItems)}
+                {open && labels.someResults(totalItems)}
             </StyledSpan>
         );
     }

package/src/components/multi-select.js

@@ -575,7 +575,7 @@ export default class MultiSelect extends React.Component<Props, State> {
                     clearSearch,
                     filter,
                     noResults,
-                    someSelected,
+                    someResults: someSelected,
                 }}
             />
         );

package/src/components/single-select.js

@@ -9,6 +9,7 @@ import DropdownCore from "./dropdown-core.js";
 import DropdownOpener from "./dropdown-opener.js";
 import SelectOpener from "./select-opener.js";
 import {
+    defaultLabels,
     selectDropdownStyle,
     filterableDropdownStyle,
 } from "../util/constants.js";
@@ -16,6 +17,28 @@ import {
 import typeof OptionItem from "./option-item.js";
 import type {DropdownItem, OpenerProps} from "../util/types.js";
 
+export type SingleSelectLabels = {|
+    /**
+     * Label for describing the dismiss icon on the search filter.
+     */
+    clearSearch: string,
+
+    /**
+     * Label for the search placeholder.
+     */
+    filter: string,
+
+    /**
+     * Label for when the filter returns no results.
+     */
+    noResults: string,
+
+    /**
+     * Label for the opening component when there are some items selected.
+     */
+    someResults: (numOptions: number) => string,
+|};
+
 type Props = {|
     ...AriaProps,
 
@@ -108,6 +131,11 @@ type Props = {|
      * top. The items will be filtered by the input.
      */
     isFilterable?: boolean,
+
+    /**
+     * The object containing the custom labels used inside this component.
+     */
+    labels: SingleSelectLabels,
 |};
 
 type State = {|
@@ -130,9 +158,10 @@ type State = {|
 |};
 
 type DefaultProps = {|
-    alignment: $PropertyType<Props, "alignment">,
-    disabled: $PropertyType<Props, "disabled">,
-    light: $PropertyType<Props, "light">,
+    alignment: Props["alignment"],
+    disabled: Props["disabled"],
+    light: Props["light"],
+    labels: Props["labels"],
 |};
 
 /**
@@ -167,6 +196,12 @@ export default class SingleSelect extends React.Component<Props, State> {
         alignment: "left",
         disabled: false,
         light: false,
+        labels: {
+            clearSearch: defaultLabels.clearSearch,
+            filter: defaultLabels.filter,
+            noResults: defaultLabels.noResults,
+            someResults: defaultLabels.someSelected,
+        },
     };
 
     constructor(props: Props) {
@@ -318,6 +353,7 @@ export default class SingleSelect extends React.Component<Props, State> {
             alignment,
             dropdownStyle,
             isFilterable,
+            labels,
             onChange,
             onToggle,
             opened,
@@ -365,11 +401,12 @@ export default class SingleSelect extends React.Component<Props, State> {
         const {
             alignment,
             children,
+            className,
             dropdownStyle,
             isFilterable,
+            labels,
             light,
             style,
-            className,
         } = this.props;
         const {searchText} = this.state;
         const allChildren = React.Children.toArray(children).filter(Boolean);
@@ -400,6 +437,7 @@ export default class SingleSelect extends React.Component<Props, State> {
                     isFilterable ? this.handleSearchTextChanged : null
                 }
                 searchText={isFilterable ? searchText : ""}
+                labels={labels}
             />
         );
     }

package/src/index.js

@@ -7,6 +7,7 @@ import SingleSelect from "./components/single-select.js";
 import MultiSelect from "./components/multi-select.js";
 
 import type {Labels} from "./components/multi-select.js";
+import type {SingleSelectLabels} from "./components/single-select.js";
 
 export {
     ActionItem,
@@ -17,4 +18,4 @@ export {
     MultiSelect,
 };
 
-export type {Labels};
+export type {Labels, SingleSelectLabels};