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

package/dist/esm/Dropdown/DropdownContent.js

@@ -0,0 +1,424 @@
+import _pt from "prop-types";
+import React, { useLayoutEffect, createRef } from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button';
+import { Size } from '../types';
+import { ButtonDropdownContentStyling, DropdownButton } from './CommonStyling';
+import { COLORS } from '../styles';
+import { Checkbox, RadioButton } from '../InputFields';
+export const DDContainer = styled.div`
+  display: none;
+  position: absolute;
+  background-color: ${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 ? ButtonDropdownContentStyling : ''};
+
+  border: 1px solid ${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 == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'};
+  border-radius: ${props => props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'};
+
+  max-height: ${props => !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'};
+`;
+const ListContainer = styled.div`
+  ${props => props.scrollable ? 'overflow-y: scroll;' : ''}
+  ${props => props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : ''}
+
+  div {
+    padding-top: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};
+    padding-bottom: ${props => props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'};
+  }
+
+  /* width */
+  ::-webkit-scrollbar {
+    width: 4px;
+    cursor: pointer;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: ${COLORS.neutral_100};
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: ${COLORS.neutral_300};
+    border-radius: 8px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: ${COLORS.neutral_500};
+  }
+`;
+const ItemsContainer = styled.div`
+  padding: 4px;
+`;
+const TopItemContainer = styled.div`
+  border-bottom-style: solid;
+  border-bottom-color: ${COLORS.neutral_200};
+  border-bottom-width: 1px;
+  margin-right: 22px;
+  padding-left: 4px;
+`;
+const ActionButtonContainer = styled.div`
+  border-top-style: solid;
+  border-top-color: ${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] = React.useState(null);
+  const [isUp, setIsUp] = React.useState(false);
+  const dropdownContentRef = React.useRef(null);
+  const itemsListRef = React.useRef(null);
+  React.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);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  const scrollPosition = React.useRef(0);
+
+  const handleScroll = () => {
+    scrollPosition.current = itemsListRef.current?.scrollTop;
+  };
+
+  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__*/createRef();
+
+      default:
+        return ref || /*#__PURE__*/createRef();
+    }
+  };
+
+  const arrLength = getFilteredItems().length;
+  const [elRefs, setElRefs] = React.useState([]);
+  React.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__*/React.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/React.createElement(RadioButton, {
+      ref: elRefs[0],
+      iconPointerEventsTransparent: true,
+      select: () => {},
+      size: size,
+      id: `${id}_topitem`,
+      label: selectedValues[0],
+      selected: true
+    }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/React.createElement(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__*/React.createElement(React.Fragment, null, suggestions.map(x => /*#__PURE__*/React.createElement(DropdownButton, {
+      ref: elRefs[0],
+      type: "button",
+      id: `${id}_topitem`,
+      onClick: e => {
+        customizationProps.onValueUpdate([x.value]);
+        setSelectedValues([x.value]);
+        setIsOpen(false);
+        setFocused(null);
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "item-content"
+    }, x?.icon && /*#__PURE__*/React.createElement("div", {
+      className: "item-icon"
+    }, x?.icon), /*#__PURE__*/React.createElement("div", {
+      className: "item-label"
+    }, x?.displayLabel ?? x?.value, x?.noteLabel && /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: '12px'
+      }
+    }, x.noteLabel)))))));
+  };
+
+  const getElements = () => {
+    if (getFilteredItems().length === 0) {
+      return /*#__PURE__*/React.createElement(ItemsContainer, null, /*#__PURE__*/React.createElement(DropdownButton, {
+        disabled: true
+      }, /*#__PURE__*/React.createElement("span", null, messageOnNoResults)));
+    }
+
+    let number = 0;
+    return /*#__PURE__*/React.createElement(ItemsContainer, null, getFilteredItems().filter(x => x && (customizationProps.itemsType != 'normal' || !x.suggestion)).map(item => {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/React.createElement(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__*/React.createElement(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__*/React.createElement(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__*/React.createElement("div", {
+        className: "item-content"
+      }, item.icon && /*#__PURE__*/React.createElement("div", {
+        className: "item-icon"
+      }, item.icon), /*#__PURE__*/React.createElement("div", {
+        className: "item-label"
+      }, item.displayLabel ?? item.value, item.noteLabel && /*#__PURE__*/React.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, item.noteLabel)))));
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.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__*/React.createElement(ListContainer, {
+    size: size,
+    itemsType: customizationProps.itemsType,
+    onScroll: handleScroll,
+    ref: itemsListRef,
+    scrollable: customizationProps.scrollable
+  }, customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/React.createElement(ActionButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
+    width: "100%",
+    variant: "primary",
+    size: size,
+    onClick: () => customizationProps.action()
+  }, customizationProps.actionLabel))));
+  /*  ),
+    {
+      handleClickOutside: () => () => {
+        if (isOpen) {
+          setIsOpen(false);
+          setFocused(null);
+        }
+      },
+    },
+  );
+   return <Wrapped />; */
+};
+
+DropdownContent.propTypes = {
+  isButton: _pt.bool.isRequired,
+  customizationProps: _pt.shape({
+    itemsType: _pt.oneOf(['radio', 'checkbox', 'normal']),
+    scrollable: _pt.bool,
+    multiSelect: _pt.bool,
+    maxHeight: _pt.string,
+    actionLabel: _pt.string,
+    action: _pt.func.isRequired,
+    pinTopItem: _pt.bool,
+    isButton: _pt.bool.isRequired,
+    onValueUpdate: _pt.func.isRequired,
+    items: _pt.arrayOf(_pt.shape({
+      value: _pt.string.isRequired,
+      displayLabel: _pt.string,
+      noteLabel: _pt.string,
+      suggestion: _pt.bool,
+      disabled: _pt.bool,
+      icon: _pt.node
+    })).isRequired
+  }).isRequired,
+  alignLeft: _pt.bool,
+  isOpen: _pt.bool.isRequired,
+  setIsOpen: _pt.func.isRequired,
+  id: _pt.string.isRequired,
+  filter: _pt.string.isRequired,
+  hideOnClickOutside: _pt.bool.isRequired,
+  selectedValues: _pt.arrayOf(_pt.string).isRequired,
+  setSelectedValues: _pt.func.isRequired,
+  messageOnNoResults: _pt.string.isRequired
+};
+export default DropdownContent;
+//# sourceMappingURL=DropdownContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["React","useLayoutEffect","createRef","styled","Button","Size","ButtonDropdownContentStyling","DropdownButton","COLORS","Checkbox","RadioButton","DDContainer","div","white","props","isButton","alignLeft","neutral_100","size","Large","Medium","scrollable","maxHeight","ListContainer","itemsType","neutral_300","neutral_500","ItemsContainer","TopItemContainer","neutral_200","ActionButtonContainer","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownContent","id","customizationProps","isOpen","hideOnClickOutside","setIsOpen","filter","selectedValues","setSelectedValues","messageOnNoResults","focused","setFocused","useState","isUp","setIsUp","dropdownContentRef","useRef","itemsListRef","useEffect","determineDropUp","options","items","node","current","windowHeight","window","innerHeight","menuHeight","Math","min","length","instOffsetWithMenu","getBoundingClientRect","top","setNewFocusedElement","index","newFocusedElement","elRefs","focus","handleKeyDown","e","keyCode","preventDefault","focusedNow","undefined","document","getElementById","handleClickOutside","contains","target","some","x","addEventListener","removeEventListener","scrollPosition","handleScroll","scrollTop","getFilteredItems","filtrationString","toUpperCase","value","includes","displayLabel","getCorrectRef","ref","arrLength","setElRefs","Array","fill","map","_","i","getTopItem","pinTopItem","visibleItems","allSelected","y","showTopItem","suggestions","suggestion","multiSelect","selected","newValues","onValueUpdate","icon","noteLabel","fontSize","getElements","number","item","disabled","newValue","join","action","actionLabel"],"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"}