@khanacademy/wonder-blocks-dropdown 5.8.1 → 6.1.0

package/dist/index.js

@@ -61,13 +61,12 @@ var xIcon__default = /*#__PURE__*/_interopDefaultLegacy(xIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var Pill__default = /*#__PURE__*/_interopDefaultLegacy(Pill);
 
-const keyCodes = {
-  tab: 9,
-  enter: 13,
-  escape: 27,
-  space: 32,
-  up: 38,
-  down: 40
+const keys = {
+  escape: "Escape",
+  tab: "Tab",
+  space: " ",
+  up: "ArrowUp",
+  down: "ArrowDown"
 };
 const selectDropdownStyle = {
   marginTop: tokens.spacing.xSmall_8,
@@ -531,7 +530,9 @@ class DropdownOpener extends React__namespace.Component {
       opened,
       "aria-controls": ariaControls,
       "aria-haspopup": ariaHasPopUp,
-      id
+      "aria-required": ariaRequired,
+      id,
+      onBlur
     } = this.props;
     const renderedChildren = this.props.children(_extends__default["default"]({}, eventState, {
       text,
@@ -540,16 +541,19 @@ class DropdownOpener extends React__namespace.Component {
     const childrenProps = renderedChildren.props;
     const childrenTestId = this.getTestIdFromProps(childrenProps);
     return React__namespace.cloneElement(renderedChildren, _extends__default["default"]({}, clickableChildrenProps, {
+      "aria-invalid": this.props.error,
       disabled,
       "aria-controls": ariaControls,
       id,
       "aria-expanded": opened ? "true" : "false",
       "aria-haspopup": ariaHasPopUp,
+      "aria-required": ariaRequired,
       onClick: childrenProps.onClick ? e => {
         childrenProps.onClick(e);
         clickableChildrenProps.onClick(e);
       } : clickableChildrenProps.onClick,
-      "data-testid": childrenTestId || testId
+      "data-testid": childrenTestId || testId,
+      onBlur
     }));
   }
   render() {
@@ -861,13 +865,13 @@ class DropdownCore extends React__namespace.Component {
   }
   constructor(props) {
     super(props);
-    this.focusedIndex = void 0;
-    this.focusedOriginalIndex = void 0;
-    this.itemsClicked = void 0;
     this.popperElement = void 0;
     this.virtualizedListRef = void 0;
     this.handleKeyDownDebounced = void 0;
     this.textSuggestion = void 0;
+    this.focusedIndex = -1;
+    this.focusedOriginalIndex = -1;
+    this.itemsClicked = false;
     this.searchFieldRef = React__namespace.createRef();
     this.handleInteract = event => {
       const {
@@ -887,39 +891,39 @@ class DropdownCore extends React__namespace.Component {
         open,
         searchText
       } = this.props;
-      const keyCode = event.which || event.keyCode;
-      if (enableTypeAhead && getStringForKey(event.key)) {
+      const key = event.key;
+      if (enableTypeAhead && getStringForKey(key)) {
         event.stopPropagation();
-        this.textSuggestion += event.key;
+        this.textSuggestion += key;
         this.handleKeyDownDebounced(this.textSuggestion);
       }
       if (!open) {
-        if (keyCode === keyCodes.down) {
+        if (key === keys.down) {
           event.preventDefault();
           onOpenChanged(true);
           return;
         }
         return;
       }
-      switch (keyCode) {
-        case keyCodes.tab:
+      switch (key) {
+        case keys.tab:
           if (this.isSearchFieldFocused() && searchText) {
             return;
           }
           this.restoreTabOrder();
           onOpenChanged(false);
           return;
-        case keyCodes.space:
+        case keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keyCodes.up:
+        case keys.up:
           event.preventDefault();
           this.focusPreviousItem();
           return;
-        case keyCodes.down:
+        case keys.down:
           event.preventDefault();
           this.focusNextItem();
           return;
@@ -930,15 +934,15 @@ class DropdownCore extends React__namespace.Component {
         onOpenChanged,
         open
       } = this.props;
-      const keyCode = event.which || event.keyCode;
-      switch (keyCode) {
-        case keyCodes.space:
+      const key = event.key;
+      switch (key) {
+        case keys.space:
           if (this.isSearchFieldFocused()) {
             return;
           }
           event.preventDefault();
           return;
-        case keyCodes.escape:
+        case keys.escape:
           if (open) {
             event.stopPropagation();
             this.restoreTabOrder();
@@ -1111,18 +1115,37 @@ class DropdownCore extends React__namespace.Component {
   }
   focusCurrentItem(onFocus) {
     const focusedItemRef = this.state.itemRefs[this.focusedIndex];
-    if (focusedItemRef) {
-      if (this.virtualizedListRef.current) {
-        this.virtualizedListRef.current.scrollToItem(focusedItemRef.originalIndex);
+    if (!focusedItemRef) {
+      return;
+    }
+    const {
+      current: virtualizedList
+    } = this.virtualizedListRef;
+    if (virtualizedList) {
+      virtualizedList.scrollToItem(focusedItemRef.originalIndex);
+    }
+    const focusNode = () => {
+      if (!this.props.open) {
+        return;
+      }
+      const currentFocusedItemRef = this.state.itemRefs[this.focusedIndex];
+      const node = ReactDOM__namespace.findDOMNode(currentFocusedItemRef.ref.current);
+      if (!node && this.shouldVirtualizeList()) {
+        this.props.schedule.animationFrame(focusNode);
+        return;
       }
-      const node = ReactDOM__namespace.findDOMNode(focusedItemRef.ref.current);
       if (node) {
         node.focus();
-        this.focusedOriginalIndex = focusedItemRef.originalIndex;
+        this.focusedOriginalIndex = currentFocusedItemRef.originalIndex;
         if (onFocus) {
           onFocus(node);
         }
       }
+    };
+    if (this.shouldVirtualizeList()) {
+      this.props.schedule.animationFrame(focusNode);
+    } else {
+      focusNode();
     }
   }
   focusSearchField() {
@@ -1142,7 +1165,7 @@ class DropdownCore extends React__namespace.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = this.state.itemRefs.length - 1;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex -= 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1153,7 +1176,7 @@ class DropdownCore extends React__namespace.Component {
         return this.focusSearchField();
       }
       this.focusedIndex = 0;
-    } else {
+    } else if (!this.isSearchFieldFocused()) {
       this.focusedIndex += 1;
     }
     this.scheduleToFocusCurrentItem();
@@ -1235,7 +1258,7 @@ class DropdownCore extends React__namespace.Component {
       const focusIndex = focusCounter - 1;
       return _extends__default["default"]({}, item, {
         role: populatedProps.role || itemRole,
-        ref: item.focusable ? this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null : null,
+        ref: item.focusable && this.state.itemRefs[focusIndex] ? this.state.itemRefs[focusIndex].ref : null,
         onClick: () => {
           this.handleItemClick(focusIndex, item);
         }
@@ -1696,7 +1719,7 @@ const styles$5 = aphrodite.StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "aria-required", "onBlur", "onOpenChanged"];
 const StyledButton = wonderBlocksCore.addStyle("button");
 class SelectOpener extends React__namespace.Component {
   constructor(props) {
@@ -1739,7 +1762,9 @@ class SelectOpener extends React__namespace.Component {
         isPlaceholder,
         light,
         open,
-        testId
+        testId,
+        "aria-required": ariaRequired,
+        onBlur
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$2);
     const stateStyles = _generateStyles(light, isPlaceholder, error);
@@ -1748,6 +1773,8 @@ class SelectOpener extends React__namespace.Component {
     return React__namespace.createElement(StyledButton, _extends__default["default"]({}, sharedProps, {
       "aria-disabled": disabled,
       "aria-expanded": open ? "true" : "false",
+      "aria-invalid": error,
+      "aria-required": ariaRequired,
       "aria-haspopup": "listbox",
       "data-testid": testId,
       id: id,
@@ -1755,7 +1782,8 @@ class SelectOpener extends React__namespace.Component {
       type: "button",
       onClick: !disabled ? this.handleClick : undefined,
       onKeyDown: !disabled ? this.handleKeyDown : undefined,
-      onKeyUp: !disabled ? this.handleKeyUp : undefined
+      onKeyUp: !disabled ? this.handleKeyUp : undefined,
+      onBlur: onBlur
     }), React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
       style: styles$4.text
     }, children || "\u00A0"), React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
@@ -1904,117 +1932,206 @@ const _generateStyles = (light, placeholder, error) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "showOpenerLabelAsText", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
-class SingleSelect extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.selectedIndex = void 0;
-    this.handleOpenChanged = opened => {
-      this.setState({
-        open: opened,
-        searchText: ""
-      });
-      if (this.props.onToggle) {
-        this.props.onToggle(opened);
+const defaultErrorMessage = "This field is required.";
+function hasValue(value) {
+  return value ? value.length > 0 : false;
+}
+function useSelectValidation({
+  value,
+  disabled = false,
+  validate,
+  onValidate,
+  required,
+  open
+}) {
+  const [errorMessage, setErrorMessage] = React__namespace.useState(() => validate && hasValue(value) && !disabled && validate(value) || null);
+  const handleValidation = React__namespace.useCallback(newValue => {
+    if (disabled) {
+      return;
+    }
+    if (validate) {
+      const error = newValue !== undefined && validate(newValue) || null;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
       }
-    };
-    this.handleToggle = selectedValue => {
-      if (selectedValue !== this.props.selectedValue) {
-        this.props.onChange(selectedValue);
+      if (error) {
+        return;
       }
-      if (this.state.open && this.state.openerElement) {
-        this.state.openerElement.focus();
+    }
+    if (required) {
+      const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+      const error = hasValue(newValue) ? null : requiredString;
+      setErrorMessage(error);
+      if (onValidate) {
+        onValidate(error);
       }
-      this.setState({
-        open: false
-      });
-      if (this.props.onToggle) {
-        this.props.onToggle(false);
+    }
+  }, [disabled, validate, setErrorMessage, onValidate, required]);
+  wonderBlocksCore.useOnMountEffect(() => {
+    if (hasValue(value)) {
+      handleValidation(value);
+    }
+  });
+  function onOpenerBlurValidation() {
+    if (!open && required && !hasValue(value)) {
+      handleValidation(value);
+    }
+  }
+  const onDropdownClosedValidation = () => {
+    if (required && !hasValue(value)) {
+      handleValidation(value);
+    }
+  };
+  const onSelectionValidation = newValue => {
+    handleValidation(newValue);
+  };
+  const onSelectedValuesChangeValidation = () => {
+    setErrorMessage(null);
+    if (onValidate) {
+      onValidate(null);
+    }
+  };
+  return {
+    errorMessage,
+    onOpenerBlurValidation,
+    onDropdownClosedValidation,
+    onSelectionValidation,
+    onSelectedValuesChangeValidation
+  };
+}
+
+const _excluded$1 = ["children", "error", "id", "opener", "light", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required", "disabled", "dropdownId", "validate", "onValidate", "required", "showOpenerLabelAsText"];
+const SingleSelect = props => {
+  const selectedIndex = React__namespace.useRef(0);
+  const {
+      children,
+      error = false,
+      id,
+      opener,
+      light = false,
+      placeholder,
+      selectedValue,
+      testId,
+      alignment = "left",
+      autoFocus = true,
+      dropdownStyle,
+      enableTypeAhead = true,
+      isFilterable,
+      labels = {
+        clearSearch: defaultLabels.clearSearch,
+        filter: defaultLabels.filter,
+        noResults: defaultLabels.noResults,
+        someResults: defaultLabels.someSelected
+      },
+      onChange,
+      onToggle,
+      opened,
+      style,
+      className,
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired,
+      disabled = false,
+      dropdownId,
+      validate,
+      onValidate,
+      required,
+      showOpenerLabelAsText = true
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded$1);
+  const [open, setOpen] = React__namespace.useState(false);
+  const [searchText, setSearchText] = React__namespace.useState("");
+  const [openerElement, setOpenerElement] = React__namespace.useState();
+  const {
+    errorMessage,
+    onOpenerBlurValidation,
+    onDropdownClosedValidation,
+    onSelectionValidation
+  } = useSelectValidation({
+    value: selectedValue,
+    disabled,
+    validate,
+    onValidate,
+    required,
+    open
+  });
+  const hasError = error || !!errorMessage;
+  React__namespace.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    } else if (typeof opened === "boolean") {
+      setOpen(opened);
+    }
+  }, [disabled, opened]);
+  const handleOpenChanged = opened => {
+    setOpen(opened);
+    setSearchText("");
+    if (onToggle) {
+      onToggle(opened);
+    }
+    if (!opened) {
+      onDropdownClosedValidation();
+    }
+  };
+  const handleToggle = newSelectedValue => {
+    if (newSelectedValue !== selectedValue) {
+      onChange(newSelectedValue);
+    }
+    if (open && openerElement) {
+      openerElement.focus();
+    }
+    setOpen(false);
+    if (onToggle) {
+      onToggle(false);
+    }
+    onSelectionValidation(newSelectedValue);
+  };
+  const mapOptionItemsToDropdownItems = children => {
+    let indexCounter = 0;
+    selectedIndex.current = 0;
+    return children.map(option => {
+      const {
+        disabled,
+        value
+      } = option.props;
+      const selected = selectedValue === value;
+      if (selected) {
+        selectedIndex.current = indexCounter;
       }
-    };
-    this.mapOptionItemsToDropdownItems = children => {
-      let indexCounter = 0;
-      this.selectedIndex = 0;
-      return children.map(option => {
-        const {
-          selectedValue
-        } = this.props;
-        const {
-          disabled,
-          value
-        } = option.props;
-        const selected = selectedValue === value;
-        if (selected) {
-          this.selectedIndex = indexCounter;
-        }
-        if (!disabled) {
-          indexCounter += 1;
+      if (!disabled) {
+        indexCounter += 1;
+      }
+      return {
+        component: option,
+        focusable: !disabled,
+        populatedProps: {
+          onToggle: handleToggle,
+          selected: selected,
+          variant: "check"
         }
-        return {
-          component: option,
-          focusable: !disabled,
-          populatedProps: {
-            onToggle: this.handleToggle,
-            selected: selected,
-            variant: "check"
-          }
-        };
-      });
-    };
-    this.handleSearchTextChanged = searchText => {
-      this.setState({
-        searchText
-      });
-    };
-    this.handleOpenerRef = node => {
-      const openerElement = ReactDOM__namespace.findDOMNode(node);
-      this.setState({
-        openerElement
-      });
-    };
-    this.handleClick = e => {
-      this.handleOpenChanged(!this.state.open);
-    };
-    this.selectedIndex = 0;
-    this.state = {
-      open: false,
-      searchText: ""
-    };
-  }
-  static getDerivedStateFromProps(props, state) {
-    return {
-      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
-    };
-  }
-  filterChildren(children) {
-    const {
-      searchText
-    } = this.state;
+      };
+    });
+  };
+  const filterChildren = children => {
     const lowercasedSearchText = searchText.toLowerCase();
     return children.filter(({
       props
     }) => !searchText || getLabel(props).toLowerCase().indexOf(lowercasedSearchText) > -1);
-  }
-  getMenuItems(children) {
-    const {
-      isFilterable
-    } = this.props;
-    return this.mapOptionItemsToDropdownItems(isFilterable ? this.filterChildren(children) : children);
-  }
-  renderOpener(isDisabled, dropdownId) {
-    const _this$props = this.props,
-      {
-        children,
-        error,
-        id,
-        light,
-        opener,
-        placeholder,
-        selectedValue,
-        testId,
-        showOpenerLabelAsText
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded$1);
+  };
+  const getMenuItems = children => {
+    return mapOptionItemsToDropdownItems(isFilterable ? filterChildren(children) : children);
+  };
+  const handleSearchTextChanged = searchText => {
+    setSearchText(searchText);
+  };
+  const handleOpenerRef = node => {
+    const openerElement = ReactDOM__namespace.findDOMNode(node);
+    setOpenerElement(openerElement);
+  };
+  const handleClick = e => {
+    handleOpenChanged(!open);
+  };
+  const renderOpener = (isDisabled, dropdownId) => {
     const items = React__namespace.Children.toArray(children);
     const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? getSelectOpenerLabel(showOpenerLabelAsText, selectedItem.props) : placeholder;
@@ -2026,202 +2143,160 @@ class SingleSelect extends React__namespace.Component {
         id: uniqueOpenerId,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
-        onClick: this.handleClick,
+        onClick: handleClick,
         disabled: isDisabled,
-        ref: this.handleOpenerRef,
+        ref: handleOpenerRef,
         text: menuText,
-        opened: this.state.open
+        opened: open,
+        error: hasError,
+        onBlur: onOpenerBlurValidation
       }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
         "aria-controls": dropdownId,
         disabled: isDisabled,
         id: uniqueOpenerId,
-        error: error,
+        error: hasError,
         isPlaceholder: !selectedItem,
         light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: this.state.open,
-        ref: this.handleOpenerRef,
-        testId: testId
+        onOpenChanged: handleOpenChanged,
+        open: open,
+        ref: handleOpenerRef,
+        testId: testId,
+        onBlur: onOpenerBlurValidation
       }), menuText);
     });
     return dropdownOpener;
-  }
-  render() {
-    const {
-      alignment,
-      autoFocus,
-      children,
-      className,
+  };
+  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+  const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
+  const items = getMenuItems(allChildren);
+  const isDisabled = numEnabledOptions === 0 || disabled;
+  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+    id: dropdownId,
+    scope: "single-select-dropdown"
+  }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
+    id: uniqueDropdownId,
+    role: "listbox",
+    selectionType: "single",
+    alignment: alignment,
+    autoFocus: autoFocus,
+    enableTypeAhead: enableTypeAhead,
+    dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+    initialFocusedIndex: selectedIndex.current,
+    items: items,
+    light: light,
+    onOpenChanged: handleOpenChanged,
+    open: open,
+    opener: renderOpener(isDisabled, uniqueDropdownId),
+    openerElement: openerElement,
+    style: style,
+    className: className,
+    isFilterable: isFilterable,
+    onSearchTextChanged: isFilterable ? handleSearchTextChanged : undefined,
+    searchText: isFilterable ? searchText : "",
+    labels: labels,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    disabled: isDisabled
+  }));
+};
+
+const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "disabled", "error", "children", "dropdownId", "showOpenerLabelAsText", "validate", "onValidate", "required"];
+const MultiSelect = props => {
+  const {
+      id,
+      light = false,
+      opener,
+      testId,
+      alignment = "left",
       dropdownStyle,
-      enableTypeAhead,
+      implicitAllEnabled,
       isFilterable,
-      labels,
-      light,
+      labels: propLabels,
+      onChange,
+      onToggle,
+      opened,
+      selectedValues = [],
+      shortcuts = false,
       style,
+      className,
       "aria-invalid": ariaInvalid,
       "aria-required": ariaRequired,
-      disabled,
-      dropdownId
-    } = this.props;
-    const {
-      searchText
-    } = this.state;
-    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-    const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
-    const items = this.getMenuItems(allChildren);
-    const isDisabled = numEnabledOptions === 0 || disabled;
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: dropdownId,
-      scope: "single-select-dropdown"
-    }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
-      id: uniqueDropdownId,
-      role: "listbox",
-      selectionType: "single",
-      alignment: alignment,
-      autoFocus: autoFocus,
-      enableTypeAhead: enableTypeAhead,
-      dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-      initialFocusedIndex: this.selectedIndex,
-      items: items,
-      light: light,
-      onOpenChanged: this.handleOpenChanged,
-      open: this.state.open,
-      opener: this.renderOpener(isDisabled, uniqueDropdownId),
-      openerElement: this.state.openerElement,
-      style: style,
-      className: className,
-      isFilterable: isFilterable,
-      onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : undefined,
-      searchText: isFilterable ? searchText : "",
-      labels: labels,
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      disabled: isDisabled
-    }));
-  }
-}
-SingleSelect.defaultProps = {
-  alignment: "left",
-  autoFocus: true,
-  disabled: false,
-  enableTypeAhead: true,
-  error: false,
-  light: false,
-  labels: {
-    clearSearch: defaultLabels.clearSearch,
-    filter: defaultLabels.filter,
-    noResults: defaultLabels.noResults,
-    someResults: defaultLabels.someSelected
-  },
-  showOpenerLabelAsText: true
-};
-
-const _excluded = ["id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required", "showOpenerLabelAsText"];
-class MultiSelect extends React__namespace.Component {
-  constructor(props) {
-    super(props);
-    this.labels = void 0;
-    this.handleOpenChanged = opened => {
-      this.setState({
-        open: opened,
-        searchText: "",
-        lastSelectedValues: this.props.selectedValues
-      });
-      if (this.props.onToggle) {
-        this.props.onToggle(opened);
-      }
-    };
-    this.handleToggle = selectedValue => {
-      const {
-        onChange,
-        selectedValues
-      } = this.props;
-      if (selectedValues.includes(selectedValue)) {
-        const index = selectedValues.indexOf(selectedValue);
-        const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
-        onChange(updatedSelection);
+      disabled = false,
+      error = false,
+      children,
+      dropdownId,
+      showOpenerLabelAsText = true,
+      validate,
+      onValidate,
+      required
+    } = props,
+    sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
+  const labels = _extends__default["default"]({}, defaultLabels, propLabels);
+  const [open, setOpen] = React__namespace.useState(false);
+  const [searchText, setSearchText] = React__namespace.useState("");
+  const [lastSelectedValues, setLastSelectedValues] = React__namespace.useState([]);
+  const [openerElement, setOpenerElement] = React__namespace.useState();
+  const {
+    errorMessage,
+    onOpenerBlurValidation,
+    onDropdownClosedValidation,
+    onSelectionValidation,
+    onSelectedValuesChangeValidation
+  } = useSelectValidation({
+    value: selectedValues,
+    disabled,
+    validate,
+    onValidate,
+    required,
+    open
+  });
+  const hasError = error || !!errorMessage;
+  React__namespace.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    } else if (typeof opened === "boolean") {
+      setOpen(opened);
+    }
+  }, [disabled, opened]);
+  const handleOpenChanged = opened => {
+    setOpen(opened);
+    setSearchText("");
+    setLastSelectedValues(selectedValues);
+    if (onToggle) {
+      onToggle(opened);
+    }
+    if (!opened) {
+      if (lastSelectedValues !== selectedValues) {
+        onSelectionValidation(selectedValues);
       } else {
-        onChange([...selectedValues, selectedValue]);
+        onDropdownClosedValidation();
       }
-    };
-    this.handleSelectAll = () => {
-      const {
-        children,
-        onChange
-      } = this.props;
-      const allChildren = React__namespace.Children.toArray(children);
-      const selected = allChildren.filter(option => !!option && !option.props.disabled).map(option => option.props.value);
-      onChange(selected);
-    };
-    this.handleSelectNone = () => {
-      const {
-        onChange
-      } = this.props;
-      onChange([]);
-    };
-    this.mapOptionItemToDropdownItem = option => {
-      const {
-        selectedValues
-      } = this.props;
-      const {
-        disabled,
-        value
-      } = option.props;
-      return {
-        component: option,
-        focusable: !disabled,
-        populatedProps: {
-          onToggle: this.handleToggle,
-          selected: selectedValues.includes(value),
-          variant: "checkbox"
-        }
-      };
-    };
-    this.handleOpenerRef = node => {
-      const openerElement = ReactDOM__namespace.findDOMNode(node);
-      this.setState({
-        openerElement
-      });
-    };
-    this.handleSearchTextChanged = searchText => {
-      this.setState({
-        searchText
-      });
-    };
-    this.handleClick = e => {
-      this.handleOpenChanged(!this.state.open);
-    };
-    this.state = {
-      open: false,
-      searchText: "",
-      lastSelectedValues: [],
-      labels: _extends__default["default"]({}, defaultLabels, props.labels)
-    };
-    this.labels = _extends__default["default"]({}, defaultLabels, props.labels);
-  }
-  static getDerivedStateFromProps(props, state) {
-    return {
-      open: props.disabled ? false : typeof props.opened === "boolean" ? props.opened : state.open
-    };
-  }
-  componentDidUpdate(prevProps) {
-    if (this.props.labels !== prevProps.labels) {
-      this.setState({
-        labels: _extends__default["default"]({}, this.state.labels, this.props.labels)
-      });
     }
-  }
-  getMenuText(children) {
-    const {
-      implicitAllEnabled,
-      selectedValues,
-      showOpenerLabelAsText
-    } = this.props;
+  };
+  const handleToggle = selectedValue => {
+    if (selectedValues.includes(selectedValue)) {
+      const index = selectedValues.indexOf(selectedValue);
+      const updatedSelection = [...selectedValues.slice(0, index), ...selectedValues.slice(index + 1)];
+      onChange(updatedSelection);
+    } else {
+      onChange([...selectedValues, selectedValue]);
+    }
+    onSelectedValuesChangeValidation();
+  };
+  const handleSelectAll = () => {
+    const allChildren = React__namespace.Children.toArray(children);
+    const selected = allChildren.filter(option => !!option && !option.props.disabled).map(option => option.props.value);
+    onChange(selected);
+  };
+  const handleSelectNone = () => {
+    onChange([]);
+  };
+  const getMenuText = children => {
     const {
       noneSelected,
       someSelected,
       allSelected
-    } = this.state.labels;
+    } = labels;
     const numSelectedAll = children.filter(option => !option.props.disabled).length;
     const noSelectionText = implicitAllEnabled ? allSelected : noneSelected;
     switch (selectedValues.length) {
@@ -2243,24 +2318,20 @@ class MultiSelect extends React__namespace.Component {
       default:
         return someSelected(selectedValues.length);
     }
-  }
-  getShortcuts(numOptions) {
-    const {
-      selectedValues,
-      shortcuts
-    } = this.props;
+  };
+  const getShortcuts = numOptions => {
     const {
       selectAllLabel,
       selectNoneLabel
-    } = this.state.labels;
-    if (shortcuts && !this.state.searchText) {
+    } = labels;
+    if (shortcuts && !searchText) {
       const selectAllDisabled = numOptions === selectedValues.length;
       const selectAll = {
         component: React__namespace.createElement(ActionItem, {
           disabled: selectAllDisabled,
           label: selectAllLabel(numOptions),
           indent: true,
-          onClick: this.handleSelectAll
+          onClick: handleSelectAll
         }),
         focusable: !selectAllDisabled,
         populatedProps: {}
@@ -2271,7 +2342,7 @@ class MultiSelect extends React__namespace.Component {
           disabled: selectNoneDisabled,
           label: selectNoneLabel,
           indent: true,
-          onClick: this.handleSelectNone
+          onClick: handleSelectNone
         }),
         focusable: !selectNoneDisabled,
         populatedProps: {}
@@ -2287,18 +2358,11 @@ class MultiSelect extends React__namespace.Component {
     } else {
       return [];
     }
-  }
-  getMenuItems(children) {
-    const {
-      isFilterable
-    } = this.props;
+  };
+  const getMenuItems = children => {
     if (!isFilterable) {
-      return children.map(this.mapOptionItemToDropdownItem);
+      return children.map(mapOptionItemToDropdownItem);
     }
-    const {
-      searchText,
-      lastSelectedValues
-    } = this.state;
     const lowercasedSearchText = searchText.toLowerCase();
     const filteredChildren = children.filter(({
       props
@@ -2312,7 +2376,7 @@ class MultiSelect extends React__namespace.Component {
         restOfTheChildren.push(child);
       }
     }
-    const lastSelectedItems = lastSelectedChildren.map(this.mapOptionItemToDropdownItem);
+    const lastSelectedItems = lastSelectedChildren.map(mapOptionItemToDropdownItem);
     if (lastSelectedChildren.length && restOfTheChildren.length) {
       lastSelectedItems.push({
         component: React__namespace.createElement(SeparatorItem, {
@@ -2322,116 +2386,109 @@ class MultiSelect extends React__namespace.Component {
         populatedProps: {}
       });
     }
-    return [...lastSelectedItems, ...restOfTheChildren.map(this.mapOptionItemToDropdownItem)];
-  }
-  renderOpener(allChildren, isDisabled, dropdownId) {
-    const _this$props = this.props,
-      {
-        id,
-        light,
-        opener,
-        testId
-      } = _this$props,
-      sharedProps = _objectWithoutPropertiesLoose__default["default"](_this$props, _excluded);
+    return [...lastSelectedItems, ...restOfTheChildren.map(mapOptionItemToDropdownItem)];
+  };
+  const mapOptionItemToDropdownItem = option => {
+    const {
+      disabled,
+      value
+    } = option.props;
+    return {
+      component: option,
+      focusable: !disabled,
+      populatedProps: {
+        onToggle: handleToggle,
+        selected: selectedValues.includes(value),
+        variant: "checkbox"
+      }
+    };
+  };
+  const handleOpenerRef = node => {
+    const openerElement = ReactDOM__namespace.findDOMNode(node);
+    setOpenerElement(openerElement);
+  };
+  const handleSearchTextChanged = searchText => {
+    setSearchText(searchText);
+  };
+  const handleClick = e => {
+    handleOpenChanged(!open);
+  };
+  const renderOpener = (allChildren, isDisabled, dropdownId) => {
     const {
       noneSelected
-    } = this.state.labels;
-    const menuText = this.getMenuText(allChildren);
+    } = labels;
+    const menuText = getMenuText(allChildren);
     const dropdownOpener = React__namespace.createElement(wonderBlocksCore.IDProvider, {
       id: id,
       scope: "multi-select-opener"
     }, uniqueOpenerId => {
       return opener ? React__namespace.createElement(DropdownOpener, {
         id: uniqueOpenerId,
+        error: hasError,
         "aria-controls": dropdownId,
         "aria-haspopup": "listbox",
-        onClick: this.handleClick,
+        onClick: handleClick,
+        onBlur: onOpenerBlurValidation,
         disabled: isDisabled,
-        ref: this.handleOpenerRef,
+        ref: handleOpenerRef,
         text: menuText,
-        opened: this.state.open
+        opened: open
       }, opener) : React__namespace.createElement(SelectOpener, _extends__default["default"]({}, sharedProps, {
+        error: hasError,
         disabled: isDisabled,
         id: uniqueOpenerId,
         "aria-controls": dropdownId,
         isPlaceholder: menuText === noneSelected,
         light: light,
-        onOpenChanged: this.handleOpenChanged,
-        open: this.state.open,
-        ref: this.handleOpenerRef,
+        onOpenChanged: handleOpenChanged,
+        onBlur: onOpenerBlurValidation,
+        open: open,
+        ref: handleOpenerRef,
         testId: testId
       }), menuText);
     });
     return dropdownOpener;
-  }
-  render() {
-    const {
-      alignment,
-      light,
-      style,
-      className,
-      dropdownStyle,
-      children,
-      isFilterable,
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      disabled,
-      dropdownId
-    } = this.props;
-    const {
-      open,
-      searchText
-    } = this.state;
-    const {
+  };
+  const {
+    clearSearch,
+    filter,
+    noResults,
+    someSelected
+  } = labels;
+  const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
+  const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
+  const filteredItems = getMenuItems(allChildren);
+  const isDisabled = numEnabledOptions === 0 || disabled;
+  return React__namespace.createElement(wonderBlocksCore.IDProvider, {
+    id: dropdownId,
+    scope: "multi-select-dropdown"
+  }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
+    id: uniqueDropdownId,
+    role: "listbox",
+    alignment: alignment,
+    dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
+    isFilterable: isFilterable,
+    items: [...getShortcuts(numEnabledOptions), ...filteredItems],
+    light: light,
+    onOpenChanged: handleOpenChanged,
+    open: open,
+    opener: renderOpener(allChildren, isDisabled, uniqueDropdownId),
+    openerElement: openerElement,
+    selectionType: "multi",
+    style: style,
+    className: className,
+    onSearchTextChanged: isFilterable ? handleSearchTextChanged : undefined,
+    searchText: isFilterable ? searchText : "",
+    labels: {
       clearSearch,
       filter,
       noResults,
-      someSelected
-    } = this.state.labels;
-    const allChildren = React__namespace.Children.toArray(children).filter(Boolean);
-    const numEnabledOptions = allChildren.filter(option => !option.props.disabled).length;
-    const filteredItems = this.getMenuItems(allChildren);
-    const isDisabled = numEnabledOptions === 0 || disabled;
-    return React__namespace.createElement(wonderBlocksCore.IDProvider, {
-      id: dropdownId,
-      scope: "multi-select-dropdown"
-    }, uniqueDropdownId => React__namespace.createElement(DropdownCore$1, {
-      id: uniqueDropdownId,
-      role: "listbox",
-      alignment: alignment,
-      dropdownStyle: [isFilterable && filterableDropdownStyle, selectDropdownStyle, dropdownStyle],
-      isFilterable: isFilterable,
-      items: [...this.getShortcuts(numEnabledOptions), ...filteredItems],
-      light: light,
-      onOpenChanged: this.handleOpenChanged,
-      open: open,
-      opener: this.renderOpener(allChildren, isDisabled, uniqueDropdownId),
-      openerElement: this.state.openerElement,
-      selectionType: "multi",
-      style: style,
-      className: className,
-      onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : undefined,
-      searchText: isFilterable ? searchText : "",
-      labels: {
-        clearSearch,
-        filter,
-        noResults,
-        someResults: someSelected
-      },
-      "aria-invalid": ariaInvalid,
-      "aria-required": ariaRequired,
-      disabled: isDisabled
-    }));
-  }
-}
-MultiSelect.defaultProps = {
-  alignment: "left",
-  disabled: false,
-  error: false,
-  light: false,
-  shortcuts: false,
-  selectedValues: [],
-  showOpenerLabelAsText: true
+      someResults: someSelected
+    },
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired,
+    disabled: isDisabled
+  }));
 };
 
 function updateMultipleSelection(previousSelection, value = "") {