@khanacademy/wonder-blocks-dropdown 9.0.0 → 9.1.0

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();
         },
@@ -340,7 +340,7 @@ OptionItem.defaultProps = {
   disabled: false,
   focused: false,
   horizontalRule: "none",
-  onToggle: () => void 0,
+  onToggle: () => undefined,
   role: "option",
   selected: false
 };
@@ -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;
@@ -610,7 +611,7 @@ class DropdownCoreVirtualized extends React.Component {
   }
   setWidth() {
     const rootNode = ReactDOM.findDOMNode(this);
-    const parentNode = rootNode == null ? void 0 : rootNode.parentElement;
+    const parentNode = rootNode == null ? undefined : rootNode.parentElement;
     if (parentNode) {
       const width = parentNode.getBoundingClientRect().width;
       this.setState({
@@ -827,10 +828,10 @@ class DropdownCore extends React.Component {
   }
   constructor(props) {
     super(props);
-    this.popperElement = void 0;
-    this.virtualizedListRef = void 0;
-    this.handleKeyDownDebounced = void 0;
-    this.textSuggestion = void 0;
+    this.popperElement = undefined;
+    this.virtualizedListRef = undefined;
+    this.handleKeyDownDebounced = undefined;
+    this.textSuggestion = undefined;
     this.focusedIndex = -1;
     this.focusedOriginalIndex = -1;
     this.itemsClicked = false;
@@ -1509,7 +1510,7 @@ const _excluded$3 = ["text", "opened"];
 class ActionMenu extends React.Component {
   constructor(...args) {
     super(...args);
-    this.openerElement = void 0;
+    this.openerElement = undefined;
     this.state = {
       opened: false
     };
@@ -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,
@@ -2235,7 +2237,7 @@ const MultiSelect = props => {
       case 1:
         const selectedItem = children.find(option => option.props.value === selectedValues[0]);
         if (selectedItem) {
-          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? void 0 : selectedItem.props);
+          const selectedLabel = getSelectOpenerLabel(showOpenerLabelAsText, selectedItem == null ? undefined : selectedItem.props);
           if (selectedLabel) {
             return selectedLabel;
           } else {
@@ -2543,7 +2545,7 @@ function useListbox({
   const renderList = React.useMemo(() => {
     return options.map((component, index) => {
       const isSingleSelection = selectionType === "single" && typeof selected === "string";
-      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? void 0 : selected.includes(component.props.value)) || false;
+      const isSelected = (isSingleSelection ? selected === component.props.value : selected == null ? undefined : selected.includes(component.props.value)) || false;
       const optionId = id ? `${id}-option-${index}` : `option-${index}`;
       return React.cloneElement(component, {
         key: index,
@@ -2590,19 +2592,19 @@ function useMultipleSelection({
     if (key === "ArrowLeft") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev - 1;
-        return newIndex < 0 ? (selected == null ? void 0 : selected.length) - 1 : newIndex;
+        return newIndex < 0 ? (selected == null ? undefined : selected.length) - 1 : newIndex;
       });
     }
     if (key === "ArrowRight") {
       setFocusedMultiSelectIndex(prev => {
         const newIndex = prev + 1;
-        return newIndex >= (selected == null ? void 0 : selected.length) ? 0 : newIndex;
+        return newIndex >= (selected == null ? undefined : selected.length) ? 0 : newIndex;
       });
     }
     if (inputValue === "" && key === "Backspace") {
       let newSelected = [];
       if (focusedMultiSelectIndex < 0) {
-        newSelected = selected == null ? void 0 : selected.slice(0, -1);
+        newSelected = selected == null ? undefined : selected.slice(0, -1);
       } else {
         newSelected = selected.filter((_, index) => index !== focusedMultiSelectIndex);
       }
@@ -2610,7 +2612,7 @@ function useMultipleSelection({
       setFocusedMultiSelectIndex(-1);
     }
     if (focusedMultiSelectIndex >= 0 && key === "Enter") {
-      const newSelected = selected == null ? void 0 : selected.filter((_, index) => index !== focusedMultiSelectIndex);
+      const newSelected = selected == null ? undefined : selected.filter((_, index) => index !== focusedMultiSelectIndex);
       setSelected(newSelected);
       setFocusedMultiSelectIndex(-1);
     }
@@ -2651,11 +2653,11 @@ function ComboboxLiveRegion({
   const lastSelectedValue = React.useRef(null);
   const [message, setMessage] = React.useState("");
   React.useEffect(() => {
-    if (selected && selected !== (lastSelectedValue == null ? void 0 : lastSelectedValue.current)) {
+    if (selected && selected !== (lastSelectedValue == null ? undefined : 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 selectedLength = (_selected$length = selected == null ? void 0 : selected.length) != null ? _selected$length : 0;
+      const lastSelectedLength = (_lastSelectedValue$cu = lastSelectedValue == null || (_lastSelectedValue$cu2 = lastSelectedValue.current) == null ? undefined : _lastSelectedValue$cu2.length) != null ? _lastSelectedValue$cu : 0;
+      const selectedLength = (_selected$length = selected == null ? undefined : selected.length) != null ? _selected$length : 0;
       if (Array.isArray(selected) && selected.length > 0) {
         const currentLabels = selectedLabels.join(", ");
         const selectedState = selectedLength > lastSelectedLength ? labels.selected(currentLabels) : labels.unselected(currentLabels);
@@ -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);
@@ -2912,7 +2914,7 @@ function Combobox({
     disableSpaceSelection: true,
     selectionType
   });
-  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? void 0 : _renderList$find.props;
+  const itemFromSelected = (_renderList$find = renderList.find(item => item.props.value === selected)) == null ? undefined : _renderList$find.props;
   const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
   const initialValue = typeof value === "string" ? labelFromSelected : "";
   const [inputValue, setInputValue] = React.useState(initialValue);
@@ -2940,16 +2942,16 @@ 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;
-      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? void 0 : _renderList$find2.props;
+      const itemFromSelected = (_renderList$find2 = renderList.find(item => item.props.value === value)) == null ? undefined : _renderList$find2.props;
       const labelFromSelected = itemFromSelected ? getLabel(itemFromSelected) : "";
       updateOpenState(false, labelFromSelected);
     } else if (Array.isArray(value)) {
@@ -3003,20 +3005,20 @@ 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(() => {
     if (Array.isArray(selected)) {
       return selected.map(value => {
         const item = children.find(item => item.props.value === value);
-        return item ? getLabel(item == null ? void 0 : item.props) : "";
+        return item ? getLabel(item == null ? undefined : item.props) : "";
       });
     }
     return [labelFromSelected];
@@ -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 ? undefined : _renderList$focusedIn.id : pillIdPrefix + focusedMultiSelectIndex;
   const controlledWidget = !openState ? undefined : focusedIndex >= 0 ? uniqueId : pillIdPrefix;
   return React.createElement(React.Fragment, null, React.createElement(View, {
     onClick: () => {
@@ -3116,13 +3118,13 @@ function Combobox({
     "aria-label": labels.comboboxButton
   })), openState && React.createElement(DropdownPopper, {
     alignment: "left",
-    referenceElement: rootNodeRef == null ? void 0 : rootNodeRef.current
+    referenceElement: rootNodeRef == null ? undefined : rootNodeRef.current
   }, isReferenceHidden => {
     var _rootNodeRef$current, _rootNodeRef$current2;
     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 ? undefined : _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 ? undefined : _rootNodeRef$current2.offsetWidth
       }],
       testId: testId ? `${testId}-listbox` : undefined,
       "aria-label": labels.listbox,