@khanacademy/wonder-blocks-dropdown 3.0.29 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-dropdown
 
+## 3.1.0
+
+### Minor Changes
+
+-   d1a5796a: Added error prop
+
 ## 3.0.29
 
 ### Patch Changes

package/dist/components/multi-select.d.ts

@@ -3,7 +3,7 @@ import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
-import type { DropdownItem, OpenerProps } from "../util/types";
+import type { DropdownItem, OpenerProps, OptionItemComponentArray } from "../util/types";
 export type Labels = {
     /**
      * Label for describing the dismiss icon on the search filter.
@@ -49,6 +49,10 @@ type DefaultProps = Readonly<{
      * and does not support interaction. Defaults to false.
      */
     disabled: boolean;
+    /**
+     * Whether this component is in an error state. Defaults to false.
+     */
+    error: boolean;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the component is used on a dark background.
@@ -185,14 +189,14 @@ export default class MultiSelect extends React.Component<Props, State> {
     handleToggle: (selectedValue: string) => void;
     handleSelectAll: () => void;
     handleSelectNone: () => void;
-    getMenuText(children: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): string;
-    getShortcuts(numOptions: number): Array<DropdownItem>;
-    getMenuItems(children: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): Array<DropdownItem>;
+    getMenuText(children: OptionItemComponentArray): string;
+    getShortcuts(numOptions: number): DropdownItem[];
+    getMenuItems(children: OptionItemComponentArray): DropdownItem[];
     mapOptionItemToDropdownItem: (option: React.ReactElement<React.ComponentProps<typeof OptionItem>>) => DropdownItem;
     handleOpenerRef: (node?: any) => void;
     handleSearchTextChanged: (searchText: string) => void;
     handleClick: (e: React.SyntheticEvent) => void;
-    renderOpener(allChildren: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
+    renderOpener(allChildren: React.ReactElement<React.ComponentProps<typeof OptionItem>>[]): React.ReactElement<React.ComponentProps<typeof DropdownOpener>> | React.ReactElement<React.ComponentProps<typeof SelectOpener>>;
     render(): React.ReactNode;
 }
 export {};

package/dist/components/select-opener.d.ts

@@ -10,6 +10,10 @@ type SelectOpenerProps = AriaProps & {
      * Default false.
      */
     disabled: boolean;
+    /**
+     * Whether or not the input is in an error state. Defaults to false.
+     */
+    error: boolean;
     /**
      * Auto-populated by parent. Used for accessibility purposes, where the label
      * id should match the field id.
@@ -25,10 +29,6 @@ type SelectOpenerProps = AriaProps & {
      * use when the item is used on a dark background.
      */
     light: boolean;
-    /**
-     * Test ID used for e2e testing.
-     */
-    testId?: string;
     /**
      * Callback for when the SelectOpener is pressed.
      */
@@ -37,9 +37,14 @@ type SelectOpenerProps = AriaProps & {
      * Whether the dropdown is open.
      */
     open: boolean;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
 };
 type DefaultProps = {
     disabled: SelectOpenerProps["disabled"];
+    error: SelectOpenerProps["error"];
     light: SelectOpenerProps["light"];
     isPlaceholder: SelectOpenerProps["isPlaceholder"];
 };

package/dist/components/single-select.d.ts

@@ -3,7 +3,7 @@ import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
 import DropdownOpener from "./dropdown-opener";
 import SelectOpener from "./select-opener";
 import OptionItem from "./option-item";
-import type { DropdownItem, OpenerProps } from "../util/types";
+import type { DropdownItem, OpenerProps, OptionItemComponentArray } from "../util/types";
 export type SingleSelectLabels = {
     /**
      * Label for describing the dismiss icon on the search filter.
@@ -32,6 +32,11 @@ type DefaultProps = Readonly<{
      * Whether to auto focus an option. Defaults to true.
      */
     autoFocus: boolean;
+    /**
+     * Whether this component is disabled. A disabled dropdown may not be opened
+     * and does not support interaction. Defaults to false.
+     */
+    disabled: boolean;
     /**
      * Whether to enable the type-ahead suggestions feature. Defaults to true.
      *
@@ -47,10 +52,9 @@ type DefaultProps = Readonly<{
      */
     enableTypeAhead: boolean;
     /**
-     * Whether this component is disabled. A disabled dropdown may not be opened
-     * and does not support interaction. Defaults to false.
+     * Whether or not the input in is an error state. Defaults to false.
      */
-    disabled: boolean;
+    error: boolean;
     /**
      * Whether to display the "light" version of this component instead, for
      * use when the component is used on a dark background.
@@ -194,9 +198,9 @@ export default class SingleSelect extends React.Component<Props, State> {
     static getDerivedStateFromProps(props: Props, state: State): Partial<State> | null;
     handleOpenChanged: (opened: boolean) => void;
     handleToggle: (selectedValue: string) => void;
-    mapOptionItemsToDropdownItems: (children: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>) => Array<DropdownItem>;
-    filterChildren(children: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>;
-    getMenuItems(children: Array<React.ReactElement<React.ComponentProps<typeof OptionItem>>>): Array<DropdownItem>;
+    mapOptionItemsToDropdownItems: (children: OptionItemComponentArray) => DropdownItem[];
+    filterChildren(children: OptionItemComponentArray): OptionItemComponentArray;
+    getMenuItems(children: OptionItemComponentArray): DropdownItem[];
     handleSearchTextChanged: (searchText: string) => void;
     handleOpenerRef: (node?: any) => void;
     handleClick: (e: React.SyntheticEvent) => void;

package/dist/es/index.js

@@ -7,6 +7,7 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { LabelMedium, LabelLarge } from '@khanacademy/wonder-blocks-typography';
 import { getClickableBehavior, isClientSideUrl, ClickableBehavior } from '@khanacademy/wonder-blocks-clickable';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
+import { tokens } from '@khanacademy/wonder-blocks-theming';
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
 import * as ReactDOM from 'react-dom';
 import SearchField from '@khanacademy/wonder-blocks-search-field';
@@ -40,8 +41,8 @@ const keyCodes = {
   down: 40
 };
 const selectDropdownStyle = {
-  marginTop: Spacing.xSmall_8,
-  marginBottom: Spacing.xSmall_8
+  marginTop: tokens.spacing.xSmall_8,
+  marginBottom: tokens.spacing.xSmall_8
 };
 const filterableDropdownStyle = {
   minHeight: 100
@@ -61,10 +62,10 @@ const defaultLabels = {
 };
 
 const {
-  blue: blue$3,
-  white: white$4,
-  offBlack: offBlack$3,
-  offBlack32: offBlack32$4
+  blue: blue$2,
+  white: white$3,
+  offBlack: offBlack$2,
+  offBlack32: offBlack32$3
 } = Color;
 const StyledAnchor = addStyle("a");
 const StyledButton$2 = addStyle("button");
@@ -139,8 +140,8 @@ ActionItem.defaultProps = {
 ActionItem.__IS_ACTION_ITEM__ = true;
 const styles$8 = StyleSheet.create({
   shared: {
-    background: white$4,
-    color: offBlack$3,
+    background: white$3,
+    color: offBlack$2,
     textDecoration: "none",
     border: "none",
     outline: "none",
@@ -161,15 +162,15 @@ const styles$8 = StyleSheet.create({
     marginLeft: Spacing.medium_16
   },
   focus: {
-    color: white$4,
-    background: blue$3
+    color: white$3,
+    background: blue$2
   },
   active: {
-    color: mix(fade(blue$3, 0.32), white$4),
-    background: mix(offBlack32$4, blue$3)
+    color: mix(fade(blue$2, 0.32), white$3),
+    background: mix(offBlack32$3, blue$2)
   },
   disabled: {
-    color: offBlack32$4,
+    color: offBlack32$3,
     cursor: "default"
   }
 });
@@ -188,9 +189,9 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 const {
-  offBlack: offBlack$2,
-  offBlack32: offBlack32$3,
-  white: white$3
+  offBlack: offBlack$1,
+  offBlack32: offBlack32$2,
+  white: white$2
 } = Color;
 const Check = function Check(props) {
   const {
@@ -203,7 +204,7 @@ const Check = function Check(props) {
   return React.createElement(Icon, {
     icon: icons.check,
     size: "small",
-    color: disabled ? offBlack32$3 : pressed || hovered || focused ? white$3 : offBlack$2,
+    color: disabled ? offBlack32$2 : pressed || hovered || focused ? white$2 : offBlack$1,
     style: [styles$7.bounds, !selected && styles$7.hide]
   });
 };
@@ -221,10 +222,10 @@ const checkboxCheck = {
   small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
 };
 const {
-  blue: blue$2,
-  white: white$2,
-  offBlack16: offBlack16$1,
-  offBlack32: offBlack32$2,
+  blue: blue$1,
+  white: white$1,
+  offBlack16,
+  offBlack32: offBlack32$1,
   offBlack50,
   offWhite
 } = Color;
@@ -236,10 +237,10 @@ const Checkbox = function Checkbox(props) {
     hovered,
     focused
   } = props;
-  const activeBlue = mix(offBlack32$2, blue$2);
+  const activeBlue = mix(offBlack32$1, blue$1);
   const clickInteraction = pressed || hovered || focused;
-  const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$2 : white$2;
-  const checkColor = disabled ? offBlack32$2 : clickInteraction ? pressed ? activeBlue : blue$2 : white$2;
+  const bgColor = disabled ? offWhite : selected && !clickInteraction ? blue$1 : white$1;
+  const checkColor = disabled ? offBlack32$1 : clickInteraction ? pressed ? activeBlue : blue$1 : white$1;
   return React.createElement(View, {
     style: [styles$6.checkbox, (clickInteraction || selected && !disabled) && styles$6.noBorder, disabled && styles$6.disabledCheckbox, {
       backgroundColor: bgColor
@@ -264,7 +265,7 @@ const styles$6 = StyleSheet.create({
     borderWidth: 0
   },
   disabledCheckbox: {
-    borderColor: offBlack16$1,
+    borderColor: offBlack16,
     backgroundColor: offWhite
   },
   disabledCheckFormatting: {
@@ -350,16 +351,16 @@ OptionItem.defaultProps = {
 };
 OptionItem.__IS_OPTION_ITEM__ = true;
 const {
-  blue: blue$1,
-  white: white$1,
-  offBlack: offBlack$1,
-  offBlack32: offBlack32$1
+  blue,
+  white,
+  offBlack,
+  offBlack32
 } = Color;
 const styles$5 = StyleSheet.create({
   itemContainer: {
     flexDirection: "row",
-    background: white$1,
-    color: offBlack$1,
+    background: white,
+    color: offBlack,
     alignItems: "center",
     height: DROPDOWN_ITEM_HEIGHT,
     minHeight: DROPDOWN_ITEM_HEIGHT,
@@ -371,16 +372,16 @@ const styles$5 = StyleSheet.create({
     cursor: "default"
   },
   focus: {
-    color: white$1,
-    background: blue$1
+    color: white,
+    background: blue
   },
   active: {
-    color: mix(fade(blue$1, 0.32), white$1),
-    background: mix(offBlack32$1, blue$1)
+    color: mix(fade(blue, 0.32), white),
+    background: mix(offBlack32, blue)
   },
   disabled: {
-    color: offBlack32$1,
-    background: white$1
+    color: offBlack32,
+    background: white
   },
   label: {
     whiteSpace: "nowrap",
@@ -1109,9 +1110,13 @@ class DropdownCore extends React.Component {
   }
   renderDropdownMenu(listRenderer, isReferenceHidden) {
     const {
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired,
       dropdownStyle,
+      isFilterable,
       light,
-      openerElement
+      openerElement,
+      role
     } = this.props;
     const openerStyle = openerElement && window.getComputedStyle(openerElement);
     const minDropdownWidth = openerStyle ? openerStyle.getPropertyValue("width") : 0;
@@ -1120,9 +1125,11 @@ class DropdownCore extends React.Component {
       onMouseUp: this.handleDropdownMouseUp,
       style: [styles$3.dropdown, light && styles$3.light, isReferenceHidden && styles$3.hidden, dropdownStyle],
       testId: "dropdown-core-container"
-    }, this.props.isFilterable && this.renderSearchField(), React.createElement(View, {
-      role: this.props.role,
-      style: [styles$3.listboxOrMenu, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight)]
+    }, isFilterable && this.renderSearchField(), React.createElement(View, {
+      role: role,
+      style: [styles$3.listboxOrMenu, generateDropdownMenuStyles(minDropdownWidth, maxDropdownHeight)],
+      "aria-invalid": role === "listbox" ? ariaInvalid : undefined,
+      "aria-required": role === "listbox" ? ariaRequired : undefined
     }, listRenderer), this.maybeRenderNoResults());
   }
   renderDropdown() {
@@ -1509,17 +1516,8 @@ const styles$1 = StyleSheet.create({
   }
 });
 
-const _excluded$2 = ["children", "disabled", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
+const _excluded$2 = ["children", "disabled", "error", "id", "isPlaceholder", "light", "open", "testId", "onOpenChanged"];
 const StyledButton = addStyle("button");
-const {
-  blue,
-  white,
-  white50,
-  offBlack,
-  offBlack16,
-  offBlack32,
-  offBlack64
-} = Color;
 class SelectOpener extends React.Component {
   constructor(...args) {
     super(...args);
@@ -1535,6 +1533,7 @@ class SelectOpener extends React.Component {
       {
         children,
         disabled,
+        error,
         id,
         isPlaceholder,
         light,
@@ -1547,13 +1546,13 @@ class SelectOpener extends React.Component {
       disabled: disabled,
       onClick: this.handleClick
     }, (state, childrenProps) => {
-      const stateStyles = _generateStyles(light, isPlaceholder);
+      const stateStyles = _generateStyles(light, isPlaceholder, error);
       const {
         hovered,
         focused,
         pressed
       } = state;
-      const iconColor = light ? disabled || pressed ? "currentColor" : white : disabled ? offBlack32 : offBlack64;
+      const iconColor = light ? disabled || pressed ? "currentColor" : tokens.color.white : disabled ? tokens.color.offBlack32 : tokens.color.offBlack64;
       const style = [styles.shared, stateStyles.default, disabled && stateStyles.disabled, !disabled && (pressed ? stateStyles.active : (hovered || focused) && stateStyles.focus)];
       return React.createElement(StyledButton, _extends({}, sharedProps, {
         "aria-expanded": open ? "true" : "false",
@@ -1580,22 +1579,22 @@ class SelectOpener extends React.Component {
 }
 SelectOpener.defaultProps = {
   disabled: false,
+  error: false,
   light: false,
   isPlaceholder: false
 };
-const buttonRadius = 4;
 const styles = StyleSheet.create({
   shared: {
     position: "relative",
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "space-between",
-    color: offBlack,
+    color: tokens.color.offBlack,
     height: DROPDOWN_ITEM_HEIGHT,
-    paddingLeft: 16,
-    paddingRight: 12,
+    paddingLeft: tokens.spacing.medium_16,
+    paddingRight: tokens.spacing.small_12,
     borderWidth: 0,
-    borderRadius: buttonRadius,
+    borderRadius: tokens.border.radius.medium_4,
     borderStyle: "solid",
     outline: "none",
     textDecoration: "none",
@@ -1604,7 +1603,7 @@ const styles = StyleSheet.create({
     touchAction: "manipulation"
   },
   text: {
-    marginRight: Spacing.xSmall_8,
+    marginRight: tokens.spacing.xSmall_8,
     whiteSpace: "nowrap",
     userSelect: "none",
     overflow: "hidden",
@@ -1614,11 +1613,11 @@ const styles = StyleSheet.create({
     minWidth: 16
   }
 });
-const adjustedPaddingLeft = 16 - 1;
-const adjustedPaddingRight = 12 - 1;
+const adjustedPaddingLeft = tokens.spacing.medium_16 - 1;
+const adjustedPaddingRight = tokens.spacing.small_12 - 1;
 const stateStyles = {};
-const _generateStyles = (light, placeholder) => {
-  const styleKey = `${String(light)}-${String(placeholder)}`;
+const _generateStyles = (light, placeholder, error) => {
+  const styleKey = `${light}-${placeholder}-${error}`;
   if (stateStyles[styleKey]) {
     return stateStyles[styleKey];
   }
@@ -1626,56 +1625,57 @@ const _generateStyles = (light, placeholder) => {
   if (light) {
     newStyles = {
       default: {
-        background: "transparent",
-        color: placeholder ? white50 : white,
-        borderColor: white50,
-        borderWidth: 1
+        background: error ? tokens.color.fadedRed8 : "transparent",
+        color: placeholder ? tokens.color.white50 : tokens.color.white,
+        borderColor: error ? tokens.color.red : tokens.color.white50,
+        borderWidth: tokens.border.width.hairline
       },
       focus: {
-        borderColor: white,
-        borderWidth: 2,
+        borderColor: error ? tokens.color.fadedRed8 : tokens.color.white,
+        borderWidth: tokens.spacing.xxxxSmall_2,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
       },
       active: {
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight,
-        borderColor: mix(fade(blue, 0.32), white),
-        borderWidth: 2,
-        color: placeholder ? mix(fade(white, 0.32), blue) : mix(fade(blue, 0.32), white),
-        backgroundColor: mix(offBlack32, blue)
+        borderColor: error ? tokens.color.red : tokens.color.fadedBlue,
+        borderWidth: tokens.border.width.thin,
+        color: placeholder ? mix(tokens.color.white32, tokens.color.blue) : tokens.color.fadedBlue,
+        backgroundColor: error ? tokens.color.fadedRed : tokens.color.activeBlue
       },
       disabled: {
-        borderColor: mix(fade(white, 0.32), blue),
-        color: mix(fade(white, 0.32), blue),
+        background: "transparent",
+        borderColor: mix(tokens.color.white32, tokens.color.blue),
+        color: mix(tokens.color.white32, tokens.color.blue),
         cursor: "auto"
       }
     };
   } else {
     newStyles = {
       default: {
-        background: white,
-        borderColor: offBlack16,
-        borderWidth: 1,
-        color: placeholder ? offBlack64 : offBlack
+        background: error ? tokens.color.fadedRed8 : tokens.color.white,
+        borderColor: error ? tokens.color.red : tokens.color.offBlack16,
+        borderWidth: tokens.border.width.hairline,
+        color: placeholder ? tokens.color.offBlack64 : tokens.color.offBlack
       },
       focus: {
-        borderColor: blue,
-        borderWidth: 2,
+        borderColor: error ? tokens.color.red : tokens.color.blue,
+        borderWidth: tokens.border.width.thin,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
       },
       active: {
-        background: mix(fade(blue, 0.32), white),
-        borderColor: mix(offBlack32, blue),
-        borderWidth: 2,
+        background: error ? tokens.color.fadedRed : tokens.color.fadedBlue,
+        borderColor: error ? tokens.color.red : tokens.color.activeBlue,
+        borderWidth: tokens.border.width.thin,
         paddingLeft: adjustedPaddingLeft,
         paddingRight: adjustedPaddingRight
       },
       disabled: {
-        background: Color.offWhite,
-        borderColor: offBlack16,
-        color: offBlack64,
+        background: tokens.color.offWhite,
+        borderColor: tokens.color.offBlack16,
+        color: tokens.color.offBlack64,
         cursor: "auto"
       }
     };
@@ -1684,7 +1684,7 @@ const _generateStyles = (light, placeholder) => {
   return stateStyles[styleKey];
 };
 
-const _excluded$1 = ["children", "disabled", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className"];
+const _excluded$1 = ["children", "disabled", "error", "id", "light", "opener", "placeholder", "selectedValue", "testId", "alignment", "autoFocus", "dropdownStyle", "enableTypeAhead", "isFilterable", "labels", "onChange", "onToggle", "opened", "style", "className", "aria-invalid", "aria-required"];
 class SingleSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -1786,6 +1786,7 @@ class SingleSelect extends React.Component {
       {
         children,
         disabled,
+        error,
         id,
         light,
         opener,
@@ -1794,7 +1795,8 @@ class SingleSelect extends React.Component {
         testId
       } = _this$props,
       sharedProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
-    const selectedItem = React.Children.toArray(children).find(option => option.props.value === selectedValue);
+    const items = React.Children.toArray(children);
+    const selectedItem = items.find(option => option.props.value === selectedValue);
     const menuText = selectedItem ? selectedItem.props.label : placeholder;
     const dropdownOpener = opener ? React.createElement(DropdownOpener, {
       onClick: this.handleClick,
@@ -1804,6 +1806,7 @@ class SingleSelect extends React.Component {
     }, opener) : React.createElement(SelectOpener, _extends({}, sharedProps, {
       disabled: numItems === 0 || disabled,
       id: id,
+      error: error,
       isPlaceholder: !selectedItem,
       light: light,
       onOpenChanged: this.handleOpenChanged,
@@ -1824,7 +1827,9 @@ class SingleSelect extends React.Component {
       isFilterable,
       labels,
       light,
-      style
+      style,
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired
     } = this.props;
     const {
       searchText
@@ -1851,7 +1856,9 @@ class SingleSelect extends React.Component {
       isFilterable: isFilterable,
       onSearchTextChanged: isFilterable ? this.handleSearchTextChanged : undefined,
       searchText: isFilterable ? searchText : "",
-      labels: labels
+      labels: labels,
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired
     });
   }
 }
@@ -1860,6 +1867,7 @@ SingleSelect.defaultProps = {
   autoFocus: true,
   disabled: false,
   enableTypeAhead: true,
+  error: false,
   light: false,
   labels: {
     clearSearch: defaultLabels.clearSearch,
@@ -1869,7 +1877,7 @@ SingleSelect.defaultProps = {
   }
 };
 
-const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className"];
+const _excluded = ["disabled", "id", "light", "opener", "testId", "alignment", "dropdownStyle", "implicitAllEnabled", "isFilterable", "labels", "onChange", "onToggle", "opened", "selectedValues", "shortcuts", "style", "className", "aria-invalid", "aria-required"];
 class MultiSelect extends React.Component {
   constructor(props) {
     super(props);
@@ -2106,7 +2114,9 @@ class MultiSelect extends React.Component {
       className,
       dropdownStyle,
       children,
-      isFilterable
+      isFilterable,
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired
     } = this.props;
     const {
       open,
@@ -2143,13 +2153,16 @@ class MultiSelect extends React.Component {
         filter,
         noResults,
         someResults: someSelected
-      }
+      },
+      "aria-invalid": ariaInvalid,
+      "aria-required": ariaRequired
     });
   }
 }
 MultiSelect.defaultProps = {
   alignment: "left",
   disabled: false,
+  error: false,
   light: false,
   shortcuts: false,
   selectedValues: []