@laerdal/life-react-components 3.4.2 → 3.5.0

package/dist/esm/Dropdown/DropdownContent.js

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