@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.4.full

package/dist/umd/Dropdown/DropdownButtonTypes.js

@@ -0,0 +1,20 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports);
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+});
+//# sourceMappingURL=DropdownButtonTypes.js.map

package/dist/umd/Dropdown/DropdownButtonTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"DropdownButtonTypes.js"}

package/dist/umd/Dropdown/DropdownContent.js

@@ -0,0 +1,591 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../Button/Button", "../types", "./CommonStyling", "../styles/typography", "../styles", "../InputFields", "../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../Button/Button"), require("../types"), require("./CommonStyling"), require("../styles/typography"), require("../styles"), require("../InputFields"), require("../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.types, global.CommonStyling, global.typography, global.styles, global.InputFields, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _types, _CommonStyling, _typography, _styles, _InputFields, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+  exports.DDContainer = undefined;
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var _react2 = _interopRequireDefault(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _Button2 = _interopRequireDefault(_Button);
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const DDContainer = exports.DDContainer = _styledComponents2.default.div`
+  display: none;
+  position: absolute;
+  background-color: ${_styles.COLORS.white};
+
+  width: ${props => props.width ? props.width : '100%'};
+  z-index: ${_zIndexes.Z_INDEXES.dropdown};
+  margin: ${props => props.isButton ? '-4px' : '4px 0px'};
+
+  &.show {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &.up {
+    top: auto;
+    bottom: 100%;
+  }
+
+  ${props => props.alignLeft ? 'left: 0px;' : ''}
+
+  ${props => props.isButton ? _CommonStyling.ButtonDropdownContentStyling : ''};
+
+  border: 1px solid ${_styles.COLORS.neutral_100};
+  box-sizing: border-box;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  padding-top: 4px;
+  padding-right: 0px;
+  padding-bottom: 4px;
+  padding-left: 0px;
+
+  min-width: ${props => props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px'};
+  border-radius: ${props => props.size == _types.Size.Large ? '10px' : props.size == _types.Size.Medium ? '8px' : '6px'};
+
+  max-height: ${props => !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px'};
+`;
+  const ItemsContainer = _styledComponents2.default.div`
+  > *:hover {
+    z-index: ${_zIndexes.Z_INDEXES.hover};
+  }
+  > *:active,
+  > *.active{
+    z-index: ${_zIndexes.Z_INDEXES.active};
+  }
+  > *:focus {
+    z-index: ${_zIndexes.Z_INDEXES.focus};
+  }
+  
+  button.dropdownButton {
+    ${props => (0, _CommonStyling.DropdownButtonCSS)(props.size)}
+  }`;
+  const ListContainer = _styledComponents2.default.div`
+  ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
+  ${props => props.itemsType != 'normal' ? 'margin-left: 4px;' : ''}
+
+
+  div.divider  {
+    display: block;
+    width: calc(100% - 40px);
+    margin-left: 16px;
+    border-top: 1px solid #e5e5e5;
+    position: absolute;
+    top: 0px;
+  }
+
+  ${ItemsContainer} {
+    padding-top: ${props => props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px'};
+    padding-bottom: ${props => props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px'};
+  }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 4px;
+    margin: 0 6px;
+    cursor: pointer;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: ${_styles.COLORS.neutral_100};
+    border-radius: 8px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: ${_styles.COLORS.neutral_600};
+    border-radius: 8px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${_styles.COLORS.neutral_500};
+  }
+`;
+  const MenuContentContainer = _styledComponents2.default.div`
+  h1, h2, h3 {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    ${props => props.size == _types.Size.Large && (0, _typography.ComponentXLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500)}
+    ${props => props.size == _types.Size.Medium && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500)}
+    ${props => (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_500)}
+    padding: ${props => props.size == _types.Size.Small || !props.size ? '10px 16px 6px' : props.size == _types.Size.Medium ? '16px 24px 8px' : '16px 32px 8px'};
+  }
+
+  p {
+    margin-block-start: 0px;
+    margin-block-end: 0px;
+    ${props => props.size == _types.Size.Large && (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500)}
+    ${props => props.size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500)}
+    ${props => (props.size == _types.Size.Small || !props.size) && (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.neutral_500)}
+    padding: ${props => props.size == _types.Size.Small || !props.size ? '8px 16px' : props.size == _types.Size.Medium ? '12px 24px' : '16px 32px'};
+  }
+`;
+  const DividerContainer = _styledComponents2.default.div`
+  position: relative;
+
+  margin-top: ${props => props.size == _types.Size.Large ? '16px' : props.size == _types.Size.Medium ? '12px' : props.size == _types.Size.Small || !props.size ? '8px' : '6px'};
+
+  div.divider {
+    width: 100%;
+    margin: 0px;
+  }
+`;
+  const TopItemContainer = _styledComponents2.default.div`
+  border-bottom-style: solid;
+  border-bottom-color: ${_styles.COLORS.neutral_200};
+  border-bottom-width: 1px;
+  margin-right: 22px;
+
+  button {
+    ${props => (0, _CommonStyling.DropdownButtonCSS)(props.size)}
+  }
+`;
+  const ActionButtonContainer = _styledComponents2.default.div`
+  border-top-style: solid;
+  border-top-color: ${_styles.COLORS.neutral_200};
+  border-top-width: 1px;
+  
+  padding: ${props => props.size == _types.Size.Small || !props.size ? '0px 16px' : '8px 16px'};
+
+  button {
+    width: 100%;
+  }
+`;
+  const MAX_MENU_HEIGHT = 240;
+  const AVG_OPTION_HEIGHT = 48;
+
+  const DropdownContent = ({
+    id,
+    customizationProps,
+    alignLeft,
+    isButton,
+    size,
+    isOpen,
+    hideOnClickOutside,
+    width,
+    setIsOpen,
+    filter,
+    focused,
+    setFocused,
+    selectedValues,
+    setSelectedValues,
+    messageOnNoResults
+  }) => {
+    const [isUp, setIsUp] = _react2.default.useState(false);
+
+    const dropdownContentRef = _react2.default.useRef(null);
+
+    if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
+    if (!size) size = _types.Size.Small;
+
+    const itemsListRef = _react2.default.useRef(null);
+
+    const determineDropUp = () => {
+      const options = customizationProps.items;
+      const node = dropdownContentRef.current;
+      if (!node) return;
+      const windowHeight = window.innerHeight;
+      const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+      const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
+      setIsUp(instOffsetWithMenu >= windowHeight);
+    };
+
+    const setNewFocusedElement = index => {
+      const newFocusedElement = elRefs[index];
+
+      if (newFocusedElement) {
+        setFocused(index);
+        newFocusedElement?.current?.focus();
+      }
+    };
+
+    const getFilteredItems = () => {
+      const filtrationString = (filter ?? '').toUpperCase();
+      return customizationProps.items.filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));
+    };
+
+    const handleKeyDown = e => {
+      if (isOpen) {
+        if (e.keyCode === 38) {
+          e.preventDefault();
+          var focusedNow = focused;
+
+          if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
+            const filtered = getFilteredItems();
+            if (focusedNow == 1 && haveTopItem()) focusedNow = 0;else {
+              for (let i = focusedNow - 1; i > 0; i--) {
+                if (!filtered[i - 1]?.disabled) {
+                  focusedNow = i;
+                  break;
+                }
+              }
+            }
+            setNewFocusedElement(focusedNow);
+          }
+        } else if (e.keyCode === 40) {
+          e.preventDefault();
+          var focusedNow = focused;
+
+          if (focusedNow !== undefined && focusedNow !== null) {
+            const filtered = getFilteredItems();
+
+            for (let i = focusedNow + 1; i <= filtered.length; i++) {
+              if (!filtered[i - 1]?.disabled) {
+                focusedNow = i;
+                break;
+              }
+            }
+          } else {
+            focusedNow = haveTopItem() ? 0 : 1;
+          }
+
+          setNewFocusedElement(focusedNow);
+        } else if (e.keyCode === 9) {
+          e.preventDefault();
+          var focusedNow = focused;
+
+          if (focusedNow !== undefined && focusedNow !== null) {
+            focusedNow++;
+            const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);
+
+            if (!newFocusedElement) {
+              setNewFocusedElement(0);
+            } else {
+              setNewFocusedElement(focusedNow);
+            }
+          } else {
+            setFocused(null);
+          }
+        } else if (e.keyCode === 27) {
+          setIsOpen(false);
+          setFocused(null); //TODO: add onEscapehandler
+
+          /*
+          if (!list.includes(input)) {
+            setInput('');
+            setPlaceholderSearch(placeholder || '');
+          }
+          styledFieldRef.current?.focus(); */
+        }
+      }
+    };
+
+    const handleClickOutside = e => {
+      if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {
+        if (isOpen) {
+          setIsOpen(false);
+          setFocused(null);
+        }
+      }
+    };
+
+    _react2.default.useEffect(() => {
+      document.addEventListener('keydown', handleKeyDown);
+      document.addEventListener('click', handleClickOutside);
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+        document.removeEventListener('click', handleClickOutside);
+      };
+    });
+
+    const scrollPosition = _react2.default.useRef(0);
+
+    const handleScroll = () => {
+      scrollPosition.current = itemsListRef.current?.scrollTop;
+    };
+
+    (0, _react.useLayoutEffect)(() => {
+      if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;
+    }, [selectedValues]);
+
+    const getCorrectRef = ref => {
+      switch (customizationProps.itemsType) {
+        case 'normal':
+          return ref || /*#__PURE__*/(0, _react.createRef)();
+
+        default:
+          return ref || /*#__PURE__*/(0, _react.createRef)();
+      }
+    };
+
+    const arrLength = getFilteredItems().length;
+
+    const [elRefs, setElRefs] = _react2.default.useState([]);
+
+    _react2.default.useEffect(() => {
+      setElRefs(elRefs => Array(arrLength + 1).fill(null).map((_, i) => getCorrectRef(elRefs[i])));
+    }, [isOpen, arrLength, selectedValues]);
+
+    _react2.default.useEffect(() => {
+      determineDropUp();
+    }, [isOpen]);
+
+    const haveTopItem = () => {
+      if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) return true;else if (customizationProps.itemsType == 'normal' && getSuggestions()?.length > 0) return true;
+      return false;
+    };
+
+    const getSuggestions = () => {
+      return getFilteredItems().filter(x => x.suggestion);
+    };
+
+    _react2.default.useLayoutEffect(() => {
+      if (isOpen && (focused || focused == 0)) {
+        const focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+        if (focusThis != focused) setFocused(focusThis);
+        const newFocusedElement = elRefs[focusThis];
+        newFocusedElement?.current?.focus();
+      } else setFocused(null); //if the dropdown is closed, we don't to keep saved the focused item
+
+    }, [isOpen]);
+
+    const handleItemClick = (selected, item) => {
+      let newValue = [];
+
+      if (customizationProps.multiSelect) {
+        if (selected) newValue = [...selectedValues, item.value];else newValue = selectedValues.filter(x => x != item.value);
+      } else newValue = selected ? [item.value] : [];
+
+      setSelectedValues(newValue);
+      if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) setIsOpen(false);
+    };
+
+    const getTopItem = () => {
+      if (!customizationProps.pinTopItem) return;
+      const visibleItems = getFilteredItems();
+      const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;
+      let showTopItem = false;
+      const suggestions = getSuggestions();
+      const displayLabel = selectedValues[0] ? customizationProps.items?.find(c => c.value === selectedValues[0])?.displayLabel : undefined;
+      if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
+      if (!showTopItem) return;
+      const selectedFirst = selectedValues.length > 0 ? visibleItems.find(x => x.value == selectedValues[0]) : null;
+      return /*#__PURE__*/_react2.default.createElement(TopItemContainer, {
+        size: size
+      }, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react2.default.createElement(_InputFields.RadioButton, {
+        ref: elRefs[0],
+        iconPointerEventsTransparent: true,
+        select: () => {},
+        label: selectedFirst?.displayLabel ?? selectedFirst?.value,
+        size: size,
+        id: `${id}_topitem`,
+        selected: true
+      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react2.default.createElement(_InputFields.Checkbox, {
+        ref: elRefs[0],
+        select: selected => {
+          if (!customizationProps.multiSelect) return;
+          const newValues = selected ? visibleItems.map(x => x.value) : [];
+          setSelectedValues(newValues);
+          if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues)) setIsOpen(false);
+        },
+        iconPointerEventsTransparent: true,
+        semiSelected: customizationProps.multiSelect && !allSelected && selectedValues?.length > 0,
+        size: size,
+        id: `${id}_checkbox_selectall`,
+        label: customizationProps.multiSelect ? 'Select all' : selectedFirst?.displayLabel ?? selectedFirst?.value,
+        selected: !customizationProps.multiSelect || allSelected
+      }), customizationProps.itemsType == 'normal' && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, suggestions.map(x => /*#__PURE__*/_react2.default.createElement("button", {
+        ref: elRefs[0],
+        type: "button",
+        id: `${id}_topitem`,
+        key: `${id}_topitem_${x.value}`,
+        onClick: e => {
+          customizationProps.onValueUpdate([x.value]);
+          setSelectedValues([x.value]);
+          setIsOpen(false);
+          setFocused(null);
+        }
+      }, /*#__PURE__*/_react2.default.createElement("div", {
+        className: "item-content"
+      }, x?.icon && /*#__PURE__*/_react2.default.createElement("div", {
+        className: "item-icon"
+      }, x?.icon), /*#__PURE__*/_react2.default.createElement("div", {
+        className: "item-label"
+      }, x?.displayLabel ?? x?.value, x?.noteLabel && /*#__PURE__*/_react2.default.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, x.noteLabel)))))));
+    };
+
+    const getElements = () => {
+      if (getFilteredItems().length === 0) {
+        return /*#__PURE__*/_react2.default.createElement(ItemsContainer, {
+          size: size
+        }, /*#__PURE__*/_react2.default.createElement("button", {
+          className: "dropdownButton",
+          disabled: true
+        }, /*#__PURE__*/_react2.default.createElement("span", null, messageOnNoResults)));
+      }
+
+      let number = 0;
+      return /*#__PURE__*/_react2.default.createElement(ItemsContainer, {
+        size: size
+      }, getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {
+        return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, {
+          key: `key_${id}_${item.value}`
+        }, item.customContent, !item.customContent && customizationProps.itemsType == 'radio' && /*#__PURE__*/_react2.default.createElement(_InputFields.RadioButton, {
+          select: selected => handleItemClick(selected, item),
+          ref: elRefs[number + 1],
+          size: size,
+          iconPointerEventsTransparent: true,
+          disabled: item?.disabled,
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`,
+          label: item.displayLabel ?? item.value,
+          selected: selectedValues?.includes(item.value)
+        }), !item.customContent && customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react2.default.createElement(_InputFields.Checkbox, {
+          select: selected => handleItemClick(selected, item),
+          iconPointerEventsTransparent: true,
+          disabled: item?.disabled,
+          ref: elRefs[number + 1],
+          size: size,
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`,
+          label: item.displayLabel ?? item.value,
+          selected: selectedValues?.includes(item.value)
+        }), !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react2.default.createElement("button", {
+          type: "button",
+          disabled: item?.disabled,
+          ref: elRefs[number + 1],
+          onClick: e => {
+            customizationProps.onValueUpdate([item.value]);
+            setSelectedValues([item.value]);
+            setIsOpen(false);
+            setFocused(null);
+          },
+          className: 'dropdownButton ' + (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues?.includes(item.value) ? 'active' : ''),
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`
+        }, item.showDividerAbove && /*#__PURE__*/_react2.default.createElement("div", {
+          className: "divider"
+        }), /*#__PURE__*/_react2.default.createElement("div", {
+          className: "item-content"
+        }, item.icon && /*#__PURE__*/_react2.default.createElement("div", {
+          className: "item-icon"
+        }, item.icon), /*#__PURE__*/_react2.default.createElement("div", {
+          className: "item-label"
+        }, item.displayLabel ?? item.value, item.noteLabel && /*#__PURE__*/_react2.default.createElement("div", {
+          style: {
+            fontSize: '12px'
+          }
+        }, item.noteLabel)))));
+      }));
+    };
+
+    return /*#__PURE__*/_react2.default.createElement(DDContainer, {
+      ref: dropdownContentRef,
+      size: size,
+      width: width,
+      isButton: isButton,
+      alignLeft: alignLeft,
+      scrollable: customizationProps.scrollable,
+      maxHeight: customizationProps.maxHeight,
+      className: [isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')
+    }, /*#__PURE__*/_react2.default.createElement(ListContainer, {
+      size: size,
+      itemsType: customizationProps.itemsType,
+      onScroll: handleScroll,
+      ref: itemsListRef,
+      scrollable: customizationProps.scrollable
+    }, customizationProps.menuContent && /*#__PURE__*/_react2.default.createElement(MenuContentContainer, {
+      size: size
+    }, customizationProps.menuContent, /*#__PURE__*/_react2.default.createElement(DividerContainer, {
+      size: size
+    }, /*#__PURE__*/_react2.default.createElement("div", {
+      className: "divider"
+    }))), customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_react2.default.createElement(ActionButtonContainer, {
+      size: size
+    }, /*#__PURE__*/_react2.default.createElement(_Button2.default, {
+      width: "100%",
+      icon: customizationProps.actionIcon,
+      loading: customizationProps.actionLoading,
+      disabled: customizationProps.actionDisabled,
+      variant: customizationProps.actionVariant ?? 'primary',
+      size: size,
+      onClick: () => {
+        if (customizationProps.action()) //closing the dropdown if action returns 'true'
+          setIsOpen(false);
+      }
+    }, customizationProps.actionLabel)));
+    /*  ),
+      {
+        handleClickOutside: () => () => {
+          if (isOpen) {
+            setIsOpen(false);
+            setFocused(null);
+          }
+        },
+      },
+    );
+     return <Wrapped />; */
+  };
+
+  DropdownContent.propTypes = {
+    isButton: _propTypes2.default.bool.isRequired,
+    customizationProps: _propTypes2.default.shape({
+      itemsType: _propTypes2.default.oneOf(['radio', 'checkbox', 'normal']),
+      menuContent: _propTypes2.default.node,
+      scrollable: _propTypes2.default.bool,
+      multiSelect: _propTypes2.default.bool,
+      maxHeight: _propTypes2.default.string,
+      actionLabel: _propTypes2.default.string,
+      actionIcon: _propTypes2.default.node,
+      actionLoading: _propTypes2.default.bool,
+      actionDisabled: _propTypes2.default.bool,
+      action: _propTypes2.default.func.isRequired,
+      pinTopItem: _propTypes2.default.bool,
+      onValueUpdate: _propTypes2.default.func.isRequired,
+      items: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+        value: _propTypes2.default.string.isRequired,
+        displayLabel: _propTypes2.default.string,
+        noteLabel: _propTypes2.default.string,
+        suggestion: _propTypes2.default.bool,
+        showDividerAbove: _propTypes2.default.bool,
+        disabled: _propTypes2.default.bool,
+        icon: _propTypes2.default.node,
+        customContent: _propTypes2.default.node
+      })).isRequired
+    }).isRequired,
+    alignLeft: _propTypes2.default.bool,
+    isOpen: _propTypes2.default.bool.isRequired,
+    setIsOpen: _propTypes2.default.func.isRequired,
+    id: _propTypes2.default.string.isRequired,
+    filter: _propTypes2.default.string.isRequired,
+    width: _propTypes2.default.string,
+    hideOnClickOutside: _propTypes2.default.bool.isRequired,
+    selectedValues: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
+    setSelectedValues: _propTypes2.default.func.isRequired,
+    messageOnNoResults: _propTypes2.default.string.isRequired,
+    focused: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.oneOf([null])]),
+    setFocused: _propTypes2.default.func.isRequired
+  };
+  exports.default = DropdownContent;
+});
+//# sourceMappingURL=DropdownContent.js.map