@laerdal/life-react-components 1.0.1-dev.30.full → 1.0.1-dev.35.full

package/dist/js/Dropdown/DropdownButton.js

@@ -11,11 +11,13 @@ var React = _interopRequireWildcard(require("react"));
 
 var _Button = require("../Button");
 
-var _index = require("../icons/index");
+var _DropdownContent = _interopRequireDefault(require("./DropdownContent"));
 
-var _styles = require("../styles");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _CommonStyling = require("./CommonStyling");
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -33,14 +35,30 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  display: inline-block;\n"])));
+
 var DropdownButton = function DropdownButton(_ref) {
-  var list = _ref.list,
+  var items = _ref.items,
       icon = _ref.icon,
-      iconSize = _ref.iconSize,
       disabled = _ref.disabled,
+      onClick = _ref.onClick,
+      _ref$itemsType = _ref.itemsType,
+      itemsType = _ref$itemsType === void 0 ? 'normal' : _ref$itemsType,
+      action = _ref.action,
+      _ref$actionLabel = _ref.actionLabel,
+      actionLabel = _ref$actionLabel === void 0 ? '' : _ref$actionLabel,
       width = _ref.width,
-      iconColor = _ref.iconColor,
-      onClick = _ref.onClick;
+      size = _ref.size,
+      alignLeft = _ref.alignLeft,
+      _ref$multiSelect = _ref.multiSelect,
+      multiSelect = _ref$multiSelect === void 0 ? false : _ref$multiSelect,
+      _ref$scrollable = _ref.scrollable,
+      scrollable = _ref$scrollable === void 0 ? false : _ref$scrollable,
+      _ref$pinTopItem = _ref.pinTopItem,
+      pinTopItem = _ref$pinTopItem === void 0 ? false : _ref$pinTopItem,
+      maxHeight = _ref.maxHeight;
 
   // Globally used variables within the view.
   var _React$useState = React.useState(false),
@@ -48,73 +66,19 @@ var DropdownButton = function DropdownButton(_ref) {
       dropdownOpen = _React$useState2[0],
       setDropdownOpen = _React$useState2[1];
 
-  var dropdownContentRef = React.useRef(null);
-  /**
-   * Adds custom event handler.
-   */
-
-  React.useEffect(function () {
-    document.addEventListener('click', handleClickOutside);
-    return function () {
-      document.removeEventListener('click', handleClickOutside);
-    };
-  });
-  /**
-   * Checks if we have clicked outside the dropdown - then close the dropdown.
-   * @param event - Event handler from the mouse click.
-   */
-
-  var handleClickOutside = function handleClickOutside(event) {
-    if (dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(event.target)) {
-      if (dropdownOpen) {
-        setDropdownOpen(false);
-      }
-    }
-  };
-  /**
-   * Does all required actions when list item was selected.
-   * @param {Object} event - Event handler from the mouse click.
-   * @param {string} id - ID of the clicked list item.
-   */
-
-
-  var clickListItem = function clickListItem(event, id) {
-    // Prevent default actions
-    event.preventDefault(); // Do all required actions
-
-    onClick(id);
-    setDropdownOpen(false);
-  };
-  /**
-   * Retrieves elements for the dropdown list.
-   * @returns Dropdown list elements HTML code.
-   */
+  var _React$useState3 = React.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      selectedValues = _React$useState4[0],
+      setSelectedValues = _React$useState4[1];
 
+  var _React$useState5 = React.useState(null),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      focused = _React$useState6[0],
+      setFocused = _React$useState6[1];
 
-  var getElements = function getElements() {
-    var options = list;
-
-    if (options.length === 0) {
-      return /*#__PURE__*/React.createElement(_CommonStyling.DropdownButton, {
-        disabled: true
-      }, /*#__PURE__*/React.createElement("span", null, "There are no options available"));
-    }
-
-    return options.map(function (item) {
-      return /*#__PURE__*/React.createElement(_CommonStyling.DropdownButton, {
-        type: "button",
-        onClick: function onClick(event) {
-          if (!item.disabled) clickListItem(event, item.id);
-        },
-        key: item.id,
-        disabled: item.disabled,
-        className: item.showDividerAbove ? 'show-divider-above' : ''
-      }, item.icon && /*#__PURE__*/React.createElement("div", {
-        className: "item-content"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "item-label"
-      }, item.label), renderItemIcon(item.icon)), !item.icon && /*#__PURE__*/React.createElement("span", null, item.label));
-    });
+  var handleValueSelect = function handleValueSelect(values) {
+    // Do all required actions
+    onClick(values);
   };
   /**
    * Renders Icon Button dropdown menu.
@@ -130,29 +94,36 @@ var DropdownButton = function DropdownButton(_ref) {
         return setDropdownOpen(!dropdownOpen);
       },
       disabled: disabled
-    }, icon && _index.SystemIcons[icon]({
-      size: iconSize,
-      color: iconColor
-    }));
-  };
-
-  var renderItemIcon = function renderItemIcon(i) {
-    return i && /*#__PURE__*/React.createElement("div", {
-      className: "item-icon"
-    }, _index.SystemIcons[i]({
-      size: '20px',
-      color: _styles.COLORS.neutral_600
-    }));
+    }, icon);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, renderIconButton(), !disabled && /*#__PURE__*/React.createElement(_CommonStyling.DropdownContentStyling, {
-    isButton: false,
-    style: {
-      width: width
+  return /*#__PURE__*/React.createElement(Wrapper, null, renderIconButton(), /*#__PURE__*/React.createElement(_DropdownContent.default, {
+    customizationProps: {
+      itemsType: itemsType,
+      action: action !== null && action !== void 0 ? action : function () {},
+      actionLabel: actionLabel,
+      onValueUpdate: handleValueSelect,
+      multiSelect: multiSelect,
+      scrollable: scrollable,
+      pinTopItem: pinTopItem,
+      maxHeight: maxHeight,
+      items: items
     },
-    ref: dropdownContentRef,
-    className: dropdownOpen ? 'show' : ''
-  }, getElements()));
+    focused: focused,
+    setFocused: setFocused,
+    size: size,
+    width: width,
+    alignLeft: alignLeft,
+    isOpen: dropdownOpen,
+    setIsOpen: setDropdownOpen,
+    hideOnClickOutside: true,
+    filter: "",
+    selectedValues: itemsType == 'normal' ? [] : selectedValues,
+    setSelectedValues: setSelectedValues,
+    messageOnNoResults: "No results",
+    isButton: true,
+    id: "dropdown-content"
+  }));
 };
 
 var _default = DropdownButton;

package/dist/js/Dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["DropdownButton","list","icon","iconSize","disabled","width","iconColor","onClick","React","useState","dropdownOpen","setDropdownOpen","dropdownContentRef","useRef","useEffect","document","addEventListener","handleClickOutside","removeEventListener","event","current","contains","target","clickListItem","id","preventDefault","getElements","options","length","map","item","showDividerAbove","label","renderItemIcon","renderIconButton","icons","size","color","i","COLORS","neutral_600"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport { SystemIcons as icons } from '../icons/index';\nimport { COLORS } from '../styles';\n\n/**\n * Import custom styles.\n */\nimport { DropdownContentStyling, DropdownButton as DB } from './CommonStyling';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps, Icons } from './DropdownButtonTypes';\n\nconst DropdownButton = ({ list, icon, iconSize, disabled, width, iconColor, onClick }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  /**\n   * Adds custom event handler.\n   */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  /**\n   * Checks if we have clicked outside the dropdown - then close the dropdown.\n   * @param event - Event handler from the mouse click.\n   */\n  const handleClickOutside = (event: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(event.target)) {\n      if (dropdownOpen) {\n        setDropdownOpen(false);\n      }\n    }\n  };\n\n  /**\n   * Does all required actions when list item was selected.\n   * @param {Object} event - Event handler from the mouse click.\n   * @param {string} id - ID of the clicked list item.\n   */\n  const clickListItem = (event: React.MouseEvent, id: string): void => {\n    // Prevent default actions\n    event.preventDefault();\n\n    // Do all required actions\n    onClick(id);\n    setDropdownOpen(false);\n  };\n\n  /**\n   * Retrieves elements for the dropdown list.\n   * @returns Dropdown list elements HTML code.\n   */\n  const getElements = () => {\n    var options = list;\n\n    if (options.length === 0) {\n      return (\n        <DB disabled>\n          <span>There are no options available</span>\n        </DB>\n      );\n    }\n    return options.map((item) => {\n      return (\n        <DB\n          type=\"button\"\n          onClick={(event: React.MouseEvent) => {\n            if (!item.disabled) clickListItem(event, item.id);\n          }}\n          key={item.id}\n          disabled={item.disabled}\n          className={item.showDividerAbove ? 'show-divider-above' : ''}>\n          {item.icon && (\n            <div className=\"item-content\">\n              <div className=\"item-label\">{item.label}</div>\n              {renderItemIcon(item.icon)}\n            </div>\n          )}\n          {!item.icon && <span>{item.label}</span>}\n        </DB>\n      );\n    });\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon && icons[icon]({ size: iconSize, color: iconColor })}\n      </IconButton>\n    );\n  };\n\n  const renderItemIcon = (i: Icons | undefined) => {\n    return i && <div className=\"item-icon\">{icons[i]({ size: '20px', color: COLORS.neutral_600 })}</div>;\n  };\n\n  return (\n    <>\n      {renderIconButton()}\n\n      {!disabled && (\n        <DropdownContentStyling isButton={false} style={{ width }} ref={dropdownContentRef} className={dropdownOpen ? 'show' : ''}>\n          {getElements()}\n        </DropdownContentStyling>\n      )}\n    </>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","width","size","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","handleValueSelect","values","renderIconButton","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport { IconButton } from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport { DropdownButtonProps } from './DropdownButtonTypes';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({ \n  items, \n  icon, \n  disabled,\n  onClick,\n  itemsType = 'normal',\n  action,\n  actionLabel = '',\n  width,\n  size,\n  alignLeft,\n  multiSelect = false,\n  scrollable = false,\n  pinTopItem = false,\n  maxHeight }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderIconButton = () => {\n    return (\n      <IconButton variant=\"secondary\" shape=\"circular\" action={() => setDropdownOpen(!dropdownOpen)} disabled={disabled}>\n        {icon}\n      </IconButton>\n    );\n  };\n\n  return (\n    <Wrapper>\n      {renderIconButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {}),\n          actionLabel: actionLabel,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        hideOnClickOutside={true}\n        filter=''\n        selectedValues={itemsType == 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults='No results'\n        isButton={true}\n        id='dropdown-content'\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.js"}

package/dist/js/Dropdown/DropdownButtonTypes.d.ts

@@ -1,17 +1,18 @@
-export declare type Icons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
+import { Size } from '../types';
+import { DropdownItem } from './DropdownContent';
 export interface DropdownButtonProps {
-    list: DropdownItem[];
-    onClick: (value: string) => void;
-    icon?: Icons;
-    iconSize?: string;
-    iconColor?: string;
+    items: DropdownItem[];
+    onClick: (value: string[]) => void;
+    icon?: React.ReactNode;
     width?: string;
     disabled?: boolean;
-}
-export interface DropdownItem {
-    id: string;
-    label: string;
-    disabled?: boolean;
-    showDividerAbove?: boolean;
-    icon?: Icons;
+    size?: Size;
+    itemsType?: 'normal' | 'radio' | 'checkbox';
+    action?: () => void;
+    actionLabel?: string;
+    multiSelect?: boolean;
+    scrollable?: boolean;
+    pinTopItem?: boolean;
+    alignLeft?: boolean;
+    maxHeight?: string;
 }

package/dist/js/Dropdown/DropdownContent.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { Size } from '../types';
 export declare const DDContainer: import("styled-components").StyledComponent<"div", any, {
     isButton: boolean;
+    width?: string;
     alignLeft?: boolean;
     size?: Size;
     scrollable?: boolean;
@@ -12,6 +13,7 @@ export interface DropdownItem {
     displayLabel?: string;
     noteLabel?: string;
     suggestion?: boolean;
+    showDividerAbove?: boolean;
     disabled?: boolean;
     icon?: React.ReactNode;
 }
@@ -23,7 +25,6 @@ export interface DropdownCustomizationProps {
     actionLabel?: string;
     action: () => void;
     pinTopItem?: boolean;
-    isButton: boolean;
     onValueUpdate: (values: string[]) => void;
     items: DropdownItem[];
 }
@@ -36,10 +37,13 @@ export interface DropdownProps {
     size?: Size;
     id: string;
     filter: string;
+    width?: string;
     hideOnClickOutside: boolean;
     selectedValues: string[];
     setSelectedValues: (val: string[]) => void;
     messageOnNoResults: string;
+    focused: number | null;
+    setFocused: (focused: number | null) => void;
 }
 declare const DropdownContent: React.FunctionComponent<DropdownProps>;
 export default DropdownContent;

package/dist/js/Dropdown/DropdownContent.js

@@ -53,8 +53,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
-var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: 1;\n  margin-top: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
-  return props.isButton ? '-4px' : '2px';
+var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  \n  width: ", ";\n  z-index: 1;\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding-top: 4px;\n  padding-right: 0px;\n  padding-bottom: 4px;\n  padding-left: 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
+  return props.width ? props.width : '100%';
+}, function (props) {
+  return props.isButton ? '-4px' : '4px 0px';
 }, function (props) {
   return props.alignLeft ? 'left: 0px;' : '';
 }, function (props) {
@@ -69,19 +71,19 @@ var DDContainer = _styledComponents.default.div(_templateObject || (_templateObj
 
 exports.DDContainer = DDContainer;
 
-var ListContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  div {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+var ListContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  div {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    margin: 0 6px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
   return props.scrollable ? 'overflow-y: scroll;' : '';
 }, function (props) {
-  return props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '';
+  return props.itemsType != 'normal' ? 'margin-left: 4px;' : '';
 }, function (props) {
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
 }, function (props) {
   return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
-}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_500);
+}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.neutral_500);
 
-var ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 4px;\n"])));
+var ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
 
-var TopItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n"])), _styles.COLORS.neutral_200);
+var TopItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;  \n"])), _styles.COLORS.neutral_200);
 
 var ActionButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200);
 
@@ -96,29 +98,26 @@ var DropdownContent = function DropdownContent(_ref) {
       size = _ref.size,
       isOpen = _ref.isOpen,
       hideOnClickOutside = _ref.hideOnClickOutside,
+      width = _ref.width,
       setIsOpen = _ref.setIsOpen,
       filter = _ref.filter,
+      focused = _ref.focused,
+      setFocused = _ref.setFocused,
       selectedValues = _ref.selectedValues,
       setSelectedValues = _ref.setSelectedValues,
       messageOnNoResults = _ref.messageOnNoResults;
 
-  var _React$useState = _react.default.useState(null),
+  var _React$useState = _react.default.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      focused = _React$useState2[0],
-      setFocused = _React$useState2[1];
-
-  var _React$useState3 = _react.default.useState(false),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      isUp = _React$useState4[0],
-      setIsUp = _React$useState4[1];
+      isUp = _React$useState2[0],
+      setIsUp = _React$useState2[1];
 
   var dropdownContentRef = _react.default.useRef(null);
 
-  var itemsListRef = _react.default.useRef(null);
+  if (!customizationProps.itemsType) customizationProps.itemsType = 'normal';
+  if (!size) size = _types.Size.Small;
 
-  _react.default.useEffect(function () {
-    determineDropUp();
-  }, [isOpen]);
+  var itemsListRef = _react.default.useRef(null);
 
   var determineDropUp = function determineDropUp() {
     var options = customizationProps.items;
@@ -249,10 +248,10 @@ var DropdownContent = function DropdownContent(_ref) {
 
   var arrLength = getFilteredItems().length;
 
-  var _React$useState5 = _react.default.useState([]),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      elRefs = _React$useState6[0],
-      setElRefs = _React$useState6[1];
+  var _React$useState3 = _react.default.useState([]),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      elRefs = _React$useState4[0],
+      setElRefs = _React$useState4[1];
 
   _react.default.useEffect(function () {
     setElRefs(function (elRefs) {
@@ -260,7 +259,36 @@ var DropdownContent = function DropdownContent(_ref) {
         return getCorrectRef(elRefs[i]);
       });
     });
-  }, [arrLength, selectedValues]);
+  }, [isOpen, arrLength, selectedValues]);
+
+  _react.default.useEffect(function () {
+    determineDropUp();
+  }, [isOpen]);
+
+  var haveTopItem = function haveTopItem() {
+    var _getSuggestions;
+
+    if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) return true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) return true;else if (customizationProps.itemsType == 'normal' && ((_getSuggestions = getSuggestions()) === null || _getSuggestions === void 0 ? void 0 : _getSuggestions.length) > 0) return true;
+    return false;
+  };
+
+  var getSuggestions = function getSuggestions() {
+    return getFilteredItems().filter(function (x) {
+      return x.suggestion;
+    });
+  };
+
+  _react.default.useLayoutEffect(function () {
+    if (isOpen && (focused || focused == 0)) {
+      var _newFocusedElement$cu2;
+
+      var focusThis = focused == 0 && !haveTopItem() ? 1 : focused;
+      if (focusThis != focused) setFocused(focusThis);
+      var newFocusedElement = elRefs[focusThis];
+      console.log(newFocusedElement);
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu2 = newFocusedElement.current) === null || _newFocusedElement$cu2 === void 0 ? void 0 : _newFocusedElement$cu2.focus();
+    }
+  }, [isOpen]);
 
   var getTopItem = function getTopItem() {
     if (!customizationProps.pinTopItem) return;
@@ -271,9 +299,7 @@ var DropdownContent = function DropdownContent(_ref) {
       });
     }).length) == visibleItems.length;
     var showTopItem = false;
-    var suggestions = getFilteredItems().filter(function (x) {
-      return x.suggestion;
-    });
+    var suggestions = getSuggestions();
     if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
     if (!showTopItem) return;
     return /*#__PURE__*/_react.default.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
@@ -386,10 +412,12 @@ var DropdownContent = function DropdownContent(_ref) {
           setIsOpen(false);
           setFocused(null);
         },
-        className: selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : '',
+        className: (item.showDividerAbove ? 'show-divider-above' : '') + ' ' + (selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : ''),
         key: "key_".concat(id, "_").concat(number++),
         id: "".concat(id, "_").concat(number + 1)
-      }, /*#__PURE__*/_react.default.createElement("div", {
+      }, item.showDividerAbove && /*#__PURE__*/_react.default.createElement("div", {
+        className: "divider"
+      }), /*#__PURE__*/_react.default.createElement("div", {
         className: "item-content"
       }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
         className: "item-icon"
@@ -403,9 +431,10 @@ var DropdownContent = function DropdownContent(_ref) {
     }));
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DDContainer, {
+  return /*#__PURE__*/_react.default.createElement(DDContainer, {
     ref: dropdownContentRef,
     size: size,
+    width: width,
     isButton: isButton,
     alignLeft: alignLeft,
     scrollable: customizationProps.scrollable,
@@ -426,7 +455,7 @@ var DropdownContent = function DropdownContent(_ref) {
     onClick: function onClick() {
       return customizationProps.action();
     }
-  }, customizationProps.actionLabel))));
+  }, customizationProps.actionLabel)));
   /*  ),
     {
       handleClickOutside: () => () => {
@@ -450,13 +479,13 @@ DropdownContent.propTypes = {
     actionLabel: _propTypes.default.string,
     action: _propTypes.default.func.isRequired,
     pinTopItem: _propTypes.default.bool,
-    isButton: _propTypes.default.bool.isRequired,
     onValueUpdate: _propTypes.default.func.isRequired,
     items: _propTypes.default.arrayOf(_propTypes.default.shape({
       value: _propTypes.default.string.isRequired,
       displayLabel: _propTypes.default.string,
       noteLabel: _propTypes.default.string,
       suggestion: _propTypes.default.bool,
+      showDividerAbove: _propTypes.default.bool,
       disabled: _propTypes.default.bool,
       icon: _propTypes.default.node
     })).isRequired
@@ -466,10 +495,13 @@ DropdownContent.propTypes = {
   setIsOpen: _propTypes.default.func.isRequired,
   id: _propTypes.default.string.isRequired,
   filter: _propTypes.default.string.isRequired,
+  width: _propTypes.default.string,
   hideOnClickOutside: _propTypes.default.bool.isRequired,
   selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
   setSelectedValues: _propTypes.default.func.isRequired,
-  messageOnNoResults: _propTypes.default.string.isRequired
+  messageOnNoResults: _propTypes.default.string.isRequired,
+  focused: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.oneOf([null])]),
+  setFocused: _propTypes.default.func.isRequired
 };
 var _default = DropdownContent;
 exports.default = _default;