@laerdal/life-react-components 1.0.1-dev.22.full → 1.0.1-dev.29.full

package/dist/umd/Dropdown/DropdownContent.js

@@ -0,0 +1,458 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../Button/Button", "../types", "./CommonStyling", "../styles", "../InputFields"], 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"), require("../InputFields"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.Button, global.types, global.CommonStyling, global.styles, global.InputFields);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _Button, _types, _CommonStyling, _styles, _InputFields) {
+  "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: 100%;
+  z-index: 1;
+  margin-top: ${props => props.isButton ? '-4px' : '2px'};
+
+  &.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: 4px 0;
+
+  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 ListContainer = _styledComponents2.default.div`
+  ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
+  ${props => props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : ''}
+
+  div {
+    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;
+    cursor: pointer;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: ${_styles.COLORS.neutral_100};
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: ${_styles.COLORS.neutral_300};
+    border-radius: 8px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${_styles.COLORS.neutral_500};
+  }
+`;
+  const ItemsContainer = _styledComponents2.default.div`
+  padding: 4px;
+`;
+  const TopItemContainer = _styledComponents2.default.div`
+  border-bottom-style: solid;
+  border-bottom-color: ${_styles.COLORS.neutral_200};
+  border-bottom-width: 1px;
+  margin-right: 22px;
+  padding-left: 4px;
+`;
+  const ActionButtonContainer = _styledComponents2.default.div`
+  border-top-style: solid;
+  border-top-color: ${_styles.COLORS.neutral_200};
+  border-top-width: 1px;
+  padding: 0px 16px 4px 16px;
+
+  button {
+    width: 100%;
+  }
+`;
+  const MAX_MENU_HEIGHT = 240;
+  const AVG_OPTION_HEIGHT = 48;
+
+  const DropdownContent = ({
+    id,
+    customizationProps,
+    alignLeft,
+    isButton,
+    size,
+    isOpen,
+    hideOnClickOutside,
+    setIsOpen,
+    filter,
+    selectedValues,
+    setSelectedValues,
+    messageOnNoResults
+  }) => {
+    const [focused, setFocused] = _react2.default.useState(null);
+
+    const [isUp, setIsUp] = _react2.default.useState(false);
+
+    const dropdownContentRef = _react2.default.useRef(null);
+
+    const itemsListRef = _react2.default.useRef(null);
+
+    _react2.default.useEffect(() => {
+      determineDropUp();
+    }, [isOpen]);
+
+    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 handleKeyDown = e => {
+      if (isOpen) {
+        if (e.keyCode === 38) {
+          e.preventDefault();
+          var focusedNow = focused;
+
+          if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {
+            focusedNow -= 1;
+            setNewFocusedElement(focusedNow);
+          }
+        } else if (e.keyCode === 40) {
+          e.preventDefault();
+          var focusedNow = focused;
+
+          if (focusedNow !== undefined && focusedNow !== null) {
+            focusedNow++;
+          } else {
+            focusedNow = 0;
+          }
+
+          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 {
+            setNewFocusedElement(0);
+          }
+        } else if (e.keyCode === 27) {
+          setIsOpen(false);
+          setNewFocusedElement(0); //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 getFilteredItems = () => {
+      const filtrationString = (filter ?? '').toUpperCase();
+      return customizationProps.items.filter(x => x?.value?.toUpperCase().includes(filtrationString) || x?.displayLabel?.toUpperCase().includes(filtrationString));
+    };
+
+    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])));
+    }, [arrLength, selectedValues]);
+
+    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 = getFilteredItems().filter(x => x.suggestion);
+      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;
+      return /*#__PURE__*/_react2.default.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react2.default.createElement(_InputFields.RadioButton, {
+        ref: elRefs[0],
+        iconPointerEventsTransparent: true,
+        select: () => {},
+        size: size,
+        id: `${id}_topitem`,
+        label: selectedValues[0],
+        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);
+          customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);
+        },
+        iconPointerEventsTransparent: true,
+        semiSelected: customizationProps.multiSelect && !allSelected && selectedValues?.length > 0,
+        size: size,
+        id: `${id}_checkbox_selectall`,
+        label: customizationProps.multiSelect ? 'Select all' : selectedValues[0],
+        selected: !customizationProps.multiSelect || allSelected
+      }), customizationProps.itemsType == 'normal' && /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, suggestions.map(x => /*#__PURE__*/_react2.default.createElement(_CommonStyling.DropdownButton, {
+        ref: elRefs[0],
+        type: "button",
+        id: `${id}_topitem`,
+        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, null, /*#__PURE__*/_react2.default.createElement(_CommonStyling.DropdownButton, {
+          disabled: true
+        }, /*#__PURE__*/_react2.default.createElement("span", null, messageOnNoResults)));
+      }
+
+      let number = 0;
+      return /*#__PURE__*/_react2.default.createElement(ItemsContainer, null, getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {
+        return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react2.default.createElement(_InputFields.RadioButton, {
+          select: selected => {
+            if (!selected) return;
+            customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);
+            setSelectedValues([item.value]);
+          },
+          ref: elRefs[number + 1],
+          size: size,
+          iconPointerEventsTransparent: true,
+          disabled: item?.disabled,
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`,
+          label: item.value,
+          selected: selectedValues?.includes(item.value)
+        }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react2.default.createElement(_InputFields.Checkbox, {
+          select: selected => {
+            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);
+            customizationProps.onValueUpdate(newValue);
+          },
+          iconPointerEventsTransparent: true,
+          disabled: item?.disabled,
+          ref: elRefs[number + 1],
+          size: size,
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`,
+          label: item.value,
+          selected: selectedValues?.includes(item.value)
+        }), (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react2.default.createElement(_CommonStyling.DropdownButton, {
+          type: "button",
+          size: size,
+          disabled: item?.disabled,
+          ref: elRefs[number + 1],
+          onClick: e => {
+            customizationProps.onValueUpdate([item.value]);
+            setSelectedValues([item.value]);
+            setIsOpen(false);
+            setFocused(null);
+          },
+          className: selectedValues?.includes(item.value) ? 'active' : '',
+          key: `key_${id}_${number++}`,
+          id: `${id}_${number + 1}`
+        }, /*#__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("div", null, /*#__PURE__*/_react2.default.createElement(DDContainer, {
+      ref: dropdownContentRef,
+      size: size,
+      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.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_react2.default.createElement(ActionButtonContainer, null, /*#__PURE__*/_react2.default.createElement(_Button2.default, {
+      width: "100%",
+      variant: "primary",
+      size: size,
+      onClick: () => customizationProps.action()
+    }, 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']),
+      scrollable: _propTypes2.default.bool,
+      multiSelect: _propTypes2.default.bool,
+      maxHeight: _propTypes2.default.string,
+      actionLabel: _propTypes2.default.string,
+      action: _propTypes2.default.func.isRequired,
+      pinTopItem: _propTypes2.default.bool,
+      isButton: _propTypes2.default.bool.isRequired,
+      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,
+        disabled: _propTypes2.default.bool,
+        icon: _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,
+    hideOnClickOutside: _propTypes2.default.bool.isRequired,
+    selectedValues: _propTypes2.default.arrayOf(_propTypes2.default.string).isRequired,
+    setSelectedValues: _propTypes2.default.func.isRequired,
+    messageOnNoResults: _propTypes2.default.string.isRequired
+  };
+  exports.default = DropdownContent;
+});
+//# sourceMappingURL=DropdownContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","neutral_100","Size","ListContainer","neutral_300","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","value","displayLabel","noteLabel","suggestion","disabled","icon","itemsType","scrollable","multiSelect","maxHeight","actionLabel","action","pinTopItem","isButton","onValueUpdate","items","customizationProps","alignLeft","isOpen","setIsOpen","id","filter","hideOnClickOutside","selectedValues","setSelectedValues","messageOnNoResults","DropdownContent","React","dropdownContentRef","itemsListRef","determineDropUp","options","node","windowHeight","window","menuHeight","Math","instOffsetWithMenu","setIsUp","setNewFocusedElement","index","newFocusedElement","elRefs","setFocused","handleKeyDown","e","focusedNow","document","handleClickOutside","x","scrollPosition","handleScroll","useLayoutEffect","getFilteredItems","filtrationString","getCorrectRef","ref","arrLength","setElRefs","Array","getTopItem","visibleItems","allSelected","y","showTopItem","suggestions","selected","newValues","fontSize","getElements","number","item","newValue","isUp"],"mappings":"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","sourcesContent":["import React, { useLayoutEffect, useMemo, createRef } from 'react';\nimport styled, { css } from 'styled-components';\nimport { CommonInteractionStyling } from '../common';\nimport Button from '../Button/Button';\nimport { Size } from '../types';\nimport { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Checkbox, RadioButton } from '../InputFields';\n\nexport const DDContainer = styled.div<{ isButton: boolean; alignLeft?: boolean; size?: Size; scrollable?: boolean; maxHeight?: string }>`\n  display: none;\n  position: absolute;\n  background-color: ${COLORS.white};\n  width: 100%;\n  z-index: 1;\n  margin-top: ${props => (props.isButton ? '-4px' : '2px')};\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  ${props => (props.alignLeft ? 'left: 0px;' : '')}\n\n  ${props => (props.isButton ? ButtonDropdownContentStyling : '')};\n\n  border: 1px solid ${COLORS.neutral_100};\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: ${props => (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n  border-radius: ${props => (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px')};\n\n  max-height: ${props => (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px')};\n`;\n\nconst ListContainer = styled.div<{ scrollable?: boolean, size? : Size, itemsType?: string }>`\n  ${props => (props.scrollable ? 'overflow-y: scroll;' : '')}\n  ${props => (props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '')}\n\n  div {\n    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px' };\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ${COLORS.neutral_100};\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ${COLORS.neutral_300};\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ${COLORS.neutral_500};\n  }\n`;\n\nconst ItemsContainer = styled.div`\n  padding: 4px;\n`;\n\n\nconst TopItemContainer = styled.div`\n  border-bottom-style: solid;\n  border-bottom-color: ${COLORS.neutral_200};\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n`;\n\nconst ActionButtonContainer = styled.div`\n  border-top-style: solid;\n  border-top-color: ${COLORS.neutral_200};\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n`;\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nexport interface DropdownItem {\n  value: string;\n  displayLabel?: string;\n  noteLabel?: string;\n  suggestion?: boolean;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n}\n\nexport interface DropdownCustomizationProps {\n  itemsType?: 'radio' | 'checkbox' | 'normal';\n  scrollable?: boolean;\n  multiSelect?: boolean;\n  maxHeight?: string;\n  actionLabel?: string;\n  action: () => void;\n  pinTopItem?: boolean;\n  isButton: boolean;\n  onValueUpdate: (values: string[]) => void;\n  items: DropdownItem[];\n}\n\nexport interface DropdownProps {\n  isButton: boolean;\n  customizationProps: DropdownCustomizationProps;\n  alignLeft?: boolean;\n  isOpen: boolean;\n  setIsOpen: (open: boolean) => void;\n  size?: Size;\n  id: string;\n  filter: string;\n  hideOnClickOutside: boolean;\n  selectedValues: string[];\n  setSelectedValues: (val: string[]) => void;\n  messageOnNoResults: string;\n}\n\nconst DropdownContent: React.FunctionComponent<DropdownProps> = ({\n  id,\n  customizationProps,\n  alignLeft,\n  isButton,\n  size,\n  isOpen,\n  hideOnClickOutside,\n  setIsOpen,\n  filter,\n  selectedValues,\n  setSelectedValues,\n  messageOnNoResults,\n}) => {\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n\n  const itemsListRef = React.useRef<HTMLDivElement>(null);\n  \n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = customizationProps.items;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = elRefs[index];\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement?.current?.focus();\n    }\n  };\n  \n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n\n        //TODO: add onEscapehandler\n        /*\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus(); */\n      }\n    }\n  };\n\n  const handleClickOutside = (e: any) => {\n    if (hideOnClickOutside && dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(x => x?.current?.contains(e.target))) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  const scrollPosition = React.useRef<number | undefined>(0); \n  const handleScroll = () => {\n    scrollPosition.current = itemsListRef.current?.scrollTop;\n  }\n  useLayoutEffect(() => {\n    if (itemsListRef.current) itemsListRef.current.scrollTop = scrollPosition.current ?? 0;\n  }, [selectedValues]);\n\n  const getFilteredItems = () => {\n    const filtrationString = (filter ?? '').toUpperCase();\n    return customizationProps.items.\n      filter(x => x?.value?.toUpperCase().includes(filtrationString) ||x?.displayLabel?.toUpperCase().includes(filtrationString));\n  };\n\n  const getCorrectRef = (ref: React.RefObject<HTMLElement>): React.RefObject<HTMLElement> => {\n    switch(customizationProps.itemsType)\n    {\n      case 'normal':\n        return ref as React.RefObject<HTMLButtonElement> || createRef<HTMLButtonElement>();\n      default:\n        return ref as React.RefObject<HTMLDivElement> || createRef<HTMLDivElement>();\n    }\n  }\n\n  const arrLength = getFilteredItems().length;\n  const [elRefs, setElRefs] = React.useState<React.RefObject<HTMLElement>[]>([]);\n\n  React.useEffect(() => {\n    setElRefs(elRefs => \n      Array(arrLength + 1).fill(null)\n        .map((_, i) => getCorrectRef(elRefs[i])));\n  }, [arrLength, selectedValues]);\n\n\n  const getTopItem = () => {\n    if (!customizationProps.pinTopItem) return;\n    const visibleItems = getFilteredItems();\n    const allSelected = selectedValues?.filter(x => visibleItems.some(y => y.value == x)).length == visibleItems.length;\n    let showTopItem = false;\n    const suggestions = getFilteredItems().filter(x => x.suggestion);\n\n    if (customizationProps.itemsType == 'radio' && selectedValues && selectedValues?.length > 0) showTopItem = true;\n    else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || selectedValues?.length > 0)) showTopItem = true;\n    else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;\n\n    if (!showTopItem) return;\n   \n    return (\n      <TopItemContainer>\n        {customizationProps.itemsType == 'radio' && (\n          <RadioButton\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            iconPointerEventsTransparent={true}\n            select={() => {}} size={size} id={`${id}_topitem`} label={selectedValues[0]} selected={true} />\n        )}\n        {customizationProps.itemsType == 'checkbox' && (\n          <Checkbox\n            ref={elRefs[0] as React.RefObject<HTMLDivElement>}\n            select={(selected: boolean) => {\n              if (!customizationProps.multiSelect) return;\n\n              const newValues = selected ? visibleItems.map(x => x.value) : [];\n              setSelectedValues(newValues);\n              customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);\n            }}\n            iconPointerEventsTransparent={true}\n            semiSelected={customizationProps.multiSelect && !allSelected && selectedValues?.length > 0}\n            size={size}\n            id={`${id}_checkbox_selectall`}\n            label={customizationProps.multiSelect ? 'Select all' : selectedValues[0]}\n            selected={!customizationProps.multiSelect || allSelected}\n          />\n        )}\n        {customizationProps.itemsType == 'normal' && (\n          <>\n          {suggestions.map(x => \n            <DropdownButton ref={elRefs[0] as React.RefObject<HTMLButtonElement>} type=\"button\" id={`${id}_topitem`}\n              onClick={(e: any) => {\n                customizationProps.onValueUpdate([x.value]);\n                setSelectedValues([x.value]);\n                setIsOpen(false);\n                setFocused(null);\n              }}>\n              <div className=\"item-content\">\n                {x?.icon && <div className=\"item-icon\">{x?.icon}</div>}\n                <div className=\"item-label\">\n                  {x?.displayLabel ?? x?.value}\n                  {x?.noteLabel && <div style={{fontSize: '12px'}}>{x.noteLabel}</div>}\n                </div>\n              </div>\n            </DropdownButton>)}\n          </>\n        )}\n      </TopItemContainer>\n    );\n  };\n\n  const getElements = () => {\n    if (getFilteredItems().length === 0) {\n      return (\n        <ItemsContainer>\n          <DropdownButton disabled>\n            <span>{messageOnNoResults}</span>\n          </DropdownButton>\n        </ItemsContainer>\n      );\n    }\n    let number = 0;\n    return (\n      <ItemsContainer>\n        {getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {\n          return (\n            <>\n              {customizationProps.itemsType == 'radio' && (\n                <RadioButton\n                  select={(selected: boolean) => {\n                    if (!selected) return;\n                    customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);\n                    setSelectedValues([item.value]);\n                  }}\n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {customizationProps.itemsType == 'checkbox' && (\n                <Checkbox\n                  select={(selected: boolean) => {\n                    let newValue: string[] = [];\n                    if (customizationProps.multiSelect) {\n                      if (selected) newValue = [...selectedValues, item.value];\n                      else newValue = selectedValues.filter(x => x != item.value);\n                    } else newValue = selected ? [item.value] : [];\n\n                    setSelectedValues(newValue);\n                    customizationProps.onValueUpdate(newValue);\n                  }}\n                  iconPointerEventsTransparent={true}\n                  disabled={item?.disabled} \n                  ref={elRefs[number + 1] as React.RefObject<HTMLDivElement>}\n                  size={size}\n                  key={`key_${id}_${number++}`}\n                  id={`${id}_${number + 1}`}\n                  label={item.value}\n                  selected={selectedValues?.includes(item.value)}\n                />\n              )}\n              {(customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (\n                  <DropdownButton\n                    type=\"button\"\n                    size={size}\n                    disabled={item?.disabled}\n                    ref={elRefs[number + 1] as React.RefObject<HTMLButtonElement>}\n                    onClick={(e: any) => {\n                      customizationProps.onValueUpdate([item.value]);\n                      setSelectedValues([item.value]);\n                      setIsOpen(false);\n                      setFocused(null);\n                    }}\n                    className={selectedValues?.includes(item.value) ? 'active' : ''}\n                    key={`key_${id}_${number++}`}\n                    id={`${id}_${number + 1}`}>\n                      <div className=\"item-content\">\n                        {item.icon && <div className=\"item-icon\">{item.icon}</div>}\n                        <div className=\"item-label\">\n                          {item.displayLabel ?? item.value}\n                          {item.noteLabel && <div style={{fontSize: '12px'}}>{item.noteLabel}</div>}\n                        </div>\n                      </div>\n                  </DropdownButton>\n              )}\n            </>\n          );\n        })}\n      </ItemsContainer>\n    );\n  };\n\n  return <div>\n        <DDContainer\n          ref={dropdownContentRef}\n          size={size}\n          isButton={isButton}\n          alignLeft={alignLeft}\n          scrollable={customizationProps.scrollable}\n          maxHeight={customizationProps.maxHeight}\n          className={[isOpen && 'show', isUp && 'up'].filter(e => !!e).join(' ')}>\n          <ListContainer size={size} itemsType={customizationProps.itemsType} onScroll={handleScroll} ref={itemsListRef} scrollable={customizationProps.scrollable}>\n            {customizationProps.pinTopItem && getTopItem()}\n            {getElements()}\n          </ListContainer>\n          {customizationProps.action && customizationProps.actionLabel && (\n            <ActionButtonContainer>\n              <Button width=\"100%\" variant=\"primary\" size={size} onClick={() => customizationProps.action()}>\n                {customizationProps.actionLabel}\n              </Button>\n            </ActionButtonContainer>\n          )}\n        </DDContainer>\n      </div>;\n  /*  ),\n    {\n      handleClickOutside: () => () => {\n        if (isOpen) {\n          setIsOpen(false);\n          setFocused(null);\n        }\n      },\n    },\n  );\n\n  return <Wrapped />; */\n};\n\nexport default DropdownContent;\n"],"file":"DropdownContent.js"}