@khanacademy/wonder-blocks-dropdown 9.0.0 → 9.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Khan Academy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/es/index.js

@@ -96,10 +96,10 @@ class ActionItem extends React.Component {
     const labelComponent = typeof label === "string" ? React.createElement(LabelMedium, {
       lang: lang,
       style: styles$c.label
-    }, label) : React.cloneElement(label, _extends({
+    }, label) : (React.cloneElement(label, _extends({
       lang,
       style: styles$c.label
-    }, label.props));
+    }, label.props)));
     return React.createElement(CompactCell, {
       disabled: disabled,
       horizontalRule: horizontalRule,
@@ -232,7 +232,7 @@ const styles$a = StyleSheet.create({
 });
 
 const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
-const StyledListItem = addStyle("li");
+const StyledLi = addStyle("li");
 class OptionItem extends React.Component {
   constructor(...args) {
     super(...args);
@@ -320,7 +320,7 @@ class OptionItem extends React.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React.createElement(StyledListItem, {
+      return React.createElement(StyledLi, {
         onMouseDown: e => {
           e.preventDefault();
         },
@@ -455,10 +455,11 @@ class SeparatorItem extends React.Component {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
   render() {
-    return React.createElement(View, {
-      style: [styles$8.separator, this.props.style],
-      "aria-hidden": "true"
-    });
+    return (React.createElement(View, {
+        style: [styles$8.separator, this.props.style],
+        "aria-hidden": "true"
+      })
+    );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
@@ -1736,6 +1737,7 @@ class SelectOpener extends React.Component {
       "data-testid": testId,
       id: id,
       role: "combobox",
+      type: "button",
       style: style,
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
@@ -2654,7 +2656,7 @@ function ComboboxLiveRegion({
     if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
       var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
       let newMessage = "";
-      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null ? void 0 : (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
       const selectedLength = (_selected$length = selected == null ? void 0 : selected.length) != null ? _selected$length : 0;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
@@ -2809,7 +2811,7 @@ function StandaloneListbox(props) {
   });
   React.useEffect(() => {
     if (selected && selected !== value) {
-      onChange == null ? void 0 : onChange(selected);
+      onChange == null || onChange(selected);
     }
   }, [onChange, selected, value]);
   return React.createElement(View, {
@@ -2881,7 +2883,7 @@ function Combobox({
   testId,
   value = ""
 }) {
-  var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
+  var _renderList$find, _renderList$focusedIn;
   const generatedUniqueId = useId();
   const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React.useRef(null);
@@ -2940,12 +2942,12 @@ function Combobox({
       }
       setCurrentOptions(children);
     }
-    onToggle == null ? void 0 : onToggle(newState);
+    onToggle == null || onToggle(newState);
   }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selectionType, setFocusedIndex]);
   const handleChange = React.useCallback(value => {
     if (value !== valueState) {
       setSelectedValue(value);
-      onChange == null ? void 0 : onChange(value);
+      onChange == null || onChange(value);
     }
     if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
@@ -3003,13 +3005,13 @@ function Combobox({
     e.stopPropagation();
     setInputValue("");
     setSelected("");
-    onChange == null ? void 0 : onChange("");
-    (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+    onChange == null || onChange("");
+    (_comboboxRef$current = comboboxRef.current) == null || _comboboxRef$current.focus();
   }, [onChange, setSelected]);
   React.useEffect(() => {
     if (openState) {
       var _comboboxRef$current2;
-      (_comboboxRef$current2 = comboboxRef.current) == null ? void 0 : _comboboxRef$current2.focus();
+      (_comboboxRef$current2 = comboboxRef.current) == null || _comboboxRef$current2.focus();
     }
   }, [openState]);
   const selectedLabels = React.useMemo(() => {
@@ -3037,7 +3039,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = useId();
-  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
+  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React.createElement(React.Fragment, null, React.createElement(View, {
     onClick: () => {
@@ -3122,7 +3124,7 @@ function Combobox({
     return React.createElement(React.Fragment, null, renderList.length === 0 ? React.createElement(DetailCell, {
       title: labels.noItems,
       style: [styles.listbox, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
       }],
       horizontalRule: "none"
     }) : React.createElement(Listbox, {
@@ -3130,7 +3132,7 @@ function Combobox({
       tabIndex: -1,
       selectionType: selectionType,
       style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,

package/dist/index.js

@@ -131,10 +131,10 @@ class ActionItem extends React__namespace.Component {
     const labelComponent = typeof label === "string" ? React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       lang: lang,
       style: styles$c.label
-    }, label) : React__namespace.cloneElement(label, _extends__default["default"]({
+    }, label) : (React__namespace.cloneElement(label, _extends__default["default"]({
       lang,
       style: styles$c.label
-    }, label.props));
+    }, label.props)));
     return React__namespace.createElement(wonderBlocksCell.CompactCell, {
       disabled: disabled,
       horizontalRule: horizontalRule,
@@ -267,7 +267,7 @@ const styles$a = aphrodite.StyleSheet.create({
 });
 
 const _excluded$5 = ["disabled", "label", "selected", "testId", "leftAccessory", "horizontalRule", "parentComponent", "rightAccessory", "style", "subtitle1", "subtitle2", "value", "onClick", "onToggle", "variant", "role"];
-const StyledListItem = wonderBlocksCore.addStyle("li");
+const StyledLi = wonderBlocksCore.addStyle("li");
 class OptionItem extends React__namespace.Component {
   constructor(...args) {
     super(...args);
@@ -355,7 +355,7 @@ class OptionItem extends React__namespace.Component {
       selected
     } = this.props;
     if (parentComponent === "listbox") {
-      return React__namespace.createElement(StyledListItem, {
+      return React__namespace.createElement(StyledLi, {
         onMouseDown: e => {
           e.preventDefault();
         },
@@ -490,10 +490,11 @@ class SeparatorItem extends React__namespace.Component {
     return instance && instance.type && instance.type.__IS_SEPARATOR_ITEM__;
   }
   render() {
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      style: [styles$8.separator, this.props.style],
-      "aria-hidden": "true"
-    });
+    return (React__namespace.createElement(wonderBlocksCore.View, {
+        style: [styles$8.separator, this.props.style],
+        "aria-hidden": "true"
+      })
+    );
   }
 }
 SeparatorItem.__IS_SEPARATOR_ITEM__ = true;
@@ -1771,6 +1772,7 @@ class SelectOpener extends React__namespace.Component {
       "data-testid": testId,
       id: id,
       role: "combobox",
+      type: "button",
       style: style,
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
@@ -2689,7 +2691,7 @@ function ComboboxLiveRegion({
     if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
       var _lastSelectedValue$cu, _lastSelectedValue$cu2, _selected$length;
       let newMessage = "";
-      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null ? void 0 : (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? void 0 : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
       const selectedLength = (_selected$length = selected == null ? void 0 : selected.length) != null ? _selected$length : 0;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
@@ -2844,7 +2846,7 @@ function StandaloneListbox(props) {
   });
   React__namespace.useEffect(() => {
     if (selected && selected !== value) {
-      onChange == null ? void 0 : onChange(selected);
+      onChange == null || onChange(selected);
     }
   }, [onChange, selected, value]);
   return React__namespace.createElement(wonderBlocksCore.View, {
@@ -2916,7 +2918,7 @@ function Combobox({
   testId,
   value = ""
 }) {
-  var _renderList$find, _renderList$focusedIn, _renderList$focusedIn2;
+  var _renderList$find, _renderList$focusedIn;
   const generatedUniqueId = React.useId();
   const uniqueId = id != null ? id : generatedUniqueId;
   const comboboxRef = React__namespace.useRef(null);
@@ -2975,12 +2977,12 @@ function Combobox({
       }
       setCurrentOptions(children);
     }
-    onToggle == null ? void 0 : onToggle(newState);
+    onToggle == null || onToggle(newState);
   }, [children, disabled, isControlled, labelFromSelected, onToggle, openState, selectionType, setFocusedIndex]);
   const handleChange = React__namespace.useCallback(value => {
     if (value !== valueState) {
       setSelectedValue(value);
-      onChange == null ? void 0 : onChange(value);
+      onChange == null || onChange(value);
     }
     if (selectionType === "single" && typeof value === "string") {
       var _renderList$find2;
@@ -3038,13 +3040,13 @@ function Combobox({
     e.stopPropagation();
     setInputValue("");
     setSelected("");
-    onChange == null ? void 0 : onChange("");
-    (_comboboxRef$current = comboboxRef.current) == null ? void 0 : _comboboxRef$current.focus();
+    onChange == null || onChange("");
+    (_comboboxRef$current = comboboxRef.current) == null || _comboboxRef$current.focus();
   }, [onChange, setSelected]);
   React__namespace.useEffect(() => {
     if (openState) {
       var _comboboxRef$current2;
-      (_comboboxRef$current2 = comboboxRef.current) == null ? void 0 : _comboboxRef$current2.focus();
+      (_comboboxRef$current2 = comboboxRef.current) == null || _comboboxRef$current2.focus();
     }
   }, [openState]);
   const selectedLabels = React__namespace.useMemo(() => {
@@ -3072,7 +3074,7 @@ function Combobox({
   };
   const pillIdPrefix = `${uniqueId}-pill-`;
   const textFieldId = React.useId();
-  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null ? void 0 : (_renderList$focusedIn2 = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn2.id : pillIdPrefix + focusedMultiSelectIndex;
+  const currentActiveDescendant = !openState ? undefined : focusedIndex >= 0 ? (_renderList$focusedIn = renderList[focusedIndex]) == null || (_renderList$focusedIn = _renderList$focusedIn.props) == null ? void 0 : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksCore.View, {
     onClick: () => {
@@ -3157,7 +3159,7 @@ function Combobox({
     return React__namespace.createElement(React__namespace.Fragment, null, renderList.length === 0 ? React__namespace.createElement(wonderBlocksCell.DetailCell, {
       title: labels.noItems,
       style: [styles.listbox, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current.offsetWidth
       }],
       horizontalRule: "none"
     }) : React__namespace.createElement(Listbox, {
@@ -3165,7 +3167,7 @@ function Combobox({
       tabIndex: -1,
       selectionType: selectionType,
       style: [styles.listbox, isReferenceHidden && styles.hidden, {
-        minWidth: rootNodeRef == null ? void 0 : (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
+        minWidth: rootNodeRef == null || (_rootNodeRef$current2 = rootNodeRef.current) == null ? void 0 : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,

package/package.json

@@ -1,33 +1,29 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "9.0.0",
+  "version": "9.1.1",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
   "module": "dist/es/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
-  },
   "author": "",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-cell": "^4.0.8",
-    "@khanacademy/wonder-blocks-clickable": "^6.0.0",
-    "@khanacademy/wonder-blocks-core": "^12.0.0",
-    "@khanacademy/wonder-blocks-icon": "^5.0.6",
-    "@khanacademy/wonder-blocks-layout": "^3.0.8",
-    "@khanacademy/wonder-blocks-modal": "^7.0.7",
-    "@khanacademy/wonder-blocks-pill": "^3.0.8",
-    "@khanacademy/wonder-blocks-search-field": "^5.0.3",
-    "@khanacademy/wonder-blocks-timing": "^6.0.1",
-    "@khanacademy/wonder-blocks-tokens": "^4.1.0",
-    "@khanacademy/wonder-blocks-typography": "^3.0.6"
+    "@babel/runtime": "^7.24.5",
+    "@khanacademy/wonder-blocks-cell": "4.1.1",
+    "@khanacademy/wonder-blocks-clickable": "6.1.1",
+    "@khanacademy/wonder-blocks-core": "12.1.1",
+    "@khanacademy/wonder-blocks-icon": "5.1.1",
+    "@khanacademy/wonder-blocks-layout": "3.1.1",
+    "@khanacademy/wonder-blocks-modal": "7.1.1",
+    "@khanacademy/wonder-blocks-pill": "3.1.1",
+    "@khanacademy/wonder-blocks-search-field": "5.1.1",
+    "@khanacademy/wonder-blocks-timing": "7.0.1",
+    "@khanacademy/wonder-blocks-tokens": "4.2.1",
+    "@khanacademy/wonder-blocks-typography": "3.1.1"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",
@@ -38,10 +34,12 @@
     "react-popper": "^2.0.0",
     "react-router": "5.3.4",
     "react-router-dom": "5.3.4",
-    "react-window": "^1.8.10"
+    "react-window": "^1.8.11"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^7.0.8",
-    "@khanacademy/wb-dev-build-settings": "^2.0.0"
+    "@khanacademy/wb-dev-build-settings": "2.1.1"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
 }