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

package/dist/js/Dropdown/DropdownContent.js

@@ -0,0 +1,476 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DDContainer = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _types = require("../types");
+
+var _CommonStyling = require("./CommonStyling");
+
+var _styles = require("../styles");
+
+var _InputFields = require("../InputFields");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var DDContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: none;\n  position: absolute;\n  background-color: ", ";\n  width: 100%;\n  z-index: 1;\n  margin-top: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n  }\n\n  &.up {\n    top: auto;\n    bottom: 100%;\n  }\n\n  ", "\n\n  ", ";\n\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n  padding: 4px 0;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), _styles.COLORS.white, function (props) {
+  return props.isButton ? '-4px' : '2px';
+}, function (props) {
+  return props.alignLeft ? 'left: 0px;' : '';
+}, function (props) {
+  return props.isButton ? _CommonStyling.ButtonDropdownContentStyling : '';
+}, _styles.COLORS.neutral_100, function (props) {
+  return props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
+}, function (props) {
+  return props.size == _types.Size.Large ? '10px' : props.size == _types.Size.Medium ? '8px' : '6px';
+}, function (props) {
+  return !props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == _types.Size.Large ? '320px' : props.size == _types.Size.Medium ? '280px' : '240px';
+});
+
+exports.DDContainer = DDContainer;
+
+var ListContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n\n  div {\n    padding-top: ", ";\n    padding-bottom: ", ";\n  }\n\n  /* width */\n  ::-webkit-scrollbar {\n    width: 4px;\n    cursor: pointer;\n  }\n\n  /* Track */\n  ::-webkit-scrollbar-track {\n    background: ", ";\n  }\n\n  /* Handle */\n  ::-webkit-scrollbar-thumb {\n    background: ", ";\n    border-radius: 8px;\n  }\n\n  /* Handle on hover */\n  ::-webkit-scrollbar-thumb:hover {\n    background: ", ";\n  }\n"])), function (props) {
+  return props.scrollable ? 'overflow-y: scroll;' : '';
+}, function (props) {
+  return props.itemsType != 'normal' ? 'margin: 2px 6px 0 16px;' : '';
+}, function (props) {
+  return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
+}, function (props) {
+  return props.size == _types.Size.Large ? '8px' : props.size == _types.Size.Medium ? '4px' : '0px';
+}, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_500);
+
+var ItemsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 4px;\n"])));
+
+var TopItemContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n  padding-left: 4px;\n"])), _styles.COLORS.neutral_200);
+
+var ActionButtonContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border-top-style: solid;\n  border-top-color: ", ";\n  border-top-width: 1px;\n  padding: 0px 16px 4px 16px;\n\n  button {\n    width: 100%;\n  }\n"])), _styles.COLORS.neutral_200);
+
+var MAX_MENU_HEIGHT = 240;
+var AVG_OPTION_HEIGHT = 48;
+
+var DropdownContent = function DropdownContent(_ref) {
+  var id = _ref.id,
+      customizationProps = _ref.customizationProps,
+      alignLeft = _ref.alignLeft,
+      isButton = _ref.isButton,
+      size = _ref.size,
+      isOpen = _ref.isOpen,
+      hideOnClickOutside = _ref.hideOnClickOutside,
+      setIsOpen = _ref.setIsOpen,
+      filter = _ref.filter,
+      selectedValues = _ref.selectedValues,
+      setSelectedValues = _ref.setSelectedValues,
+      messageOnNoResults = _ref.messageOnNoResults;
+
+  var _React$useState = _react.default.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      focused = _React$useState2[0],
+      setFocused = _React$useState2[1];
+
+  var _React$useState3 = _react.default.useState(false),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      isUp = _React$useState4[0],
+      setIsUp = _React$useState4[1];
+
+  var dropdownContentRef = _react.default.useRef(null);
+
+  var itemsListRef = _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    determineDropUp();
+  }, [isOpen]);
+
+  var determineDropUp = function determineDropUp() {
+    var options = customizationProps.items;
+    var node = dropdownContentRef.current;
+    if (!node) return;
+    var windowHeight = window.innerHeight;
+    var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
+    var instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;
+    setIsUp(instOffsetWithMenu >= windowHeight);
+  };
+
+  var setNewFocusedElement = function setNewFocusedElement(index) {
+    var newFocusedElement = elRefs[index];
+
+    if (newFocusedElement) {
+      var _newFocusedElement$cu;
+
+      setFocused(index);
+      newFocusedElement === null || newFocusedElement === void 0 ? void 0 : (_newFocusedElement$cu = newFocusedElement.current) === null || _newFocusedElement$cu === void 0 ? void 0 : _newFocusedElement$cu.focus();
+    }
+  };
+
+  var handleKeyDown = function 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++;
+          var newFocusedElement = document.getElementById("".concat(id, "_").concat(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(); */
+      }
+    }
+  };
+
+  var handleClickOutside = function handleClickOutside(e) {
+    if (hideOnClickOutside && dropdownContentRef !== null && dropdownContentRef !== void 0 && dropdownContentRef.current && !dropdownContentRef.current.contains(e.target) && !elRefs.some(function (x) {
+      var _x$current;
+
+      return x === null || x === void 0 ? void 0 : (_x$current = x.current) === null || _x$current === void 0 ? void 0 : _x$current.contains(e.target);
+    })) {
+      if (isOpen) {
+        setIsOpen(false);
+        setFocused(null);
+      }
+    }
+  };
+
+  _react.default.useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('click', handleClickOutside);
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+
+  var scrollPosition = _react.default.useRef(0);
+
+  var handleScroll = function handleScroll() {
+    var _itemsListRef$current;
+
+    scrollPosition.current = (_itemsListRef$current = itemsListRef.current) === null || _itemsListRef$current === void 0 ? void 0 : _itemsListRef$current.scrollTop;
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    var _scrollPosition$curre;
+
+    if (itemsListRef.current) itemsListRef.current.scrollTop = (_scrollPosition$curre = scrollPosition.current) !== null && _scrollPosition$curre !== void 0 ? _scrollPosition$curre : 0;
+  }, [selectedValues]);
+
+  var getFilteredItems = function getFilteredItems() {
+    var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
+    return customizationProps.items.filter(function (x) {
+      var _x$value, _x$displayLabel;
+
+      return (x === null || x === void 0 ? void 0 : (_x$value = x.value) === null || _x$value === void 0 ? void 0 : _x$value.toUpperCase().includes(filtrationString)) || (x === null || x === void 0 ? void 0 : (_x$displayLabel = x.displayLabel) === null || _x$displayLabel === void 0 ? void 0 : _x$displayLabel.toUpperCase().includes(filtrationString));
+    });
+  };
+
+  var getCorrectRef = function getCorrectRef(ref) {
+    switch (customizationProps.itemsType) {
+      case 'normal':
+        return ref || /*#__PURE__*/(0, _react.createRef)();
+
+      default:
+        return ref || /*#__PURE__*/(0, _react.createRef)();
+    }
+  };
+
+  var arrLength = getFilteredItems().length;
+
+  var _React$useState5 = _react.default.useState([]),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      elRefs = _React$useState6[0],
+      setElRefs = _React$useState6[1];
+
+  _react.default.useEffect(function () {
+    setElRefs(function (elRefs) {
+      return Array(arrLength + 1).fill(null).map(function (_, i) {
+        return getCorrectRef(elRefs[i]);
+      });
+    });
+  }, [arrLength, selectedValues]);
+
+  var getTopItem = function getTopItem() {
+    if (!customizationProps.pinTopItem) return;
+    var visibleItems = getFilteredItems();
+    var allSelected = (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.filter(function (x) {
+      return visibleItems.some(function (y) {
+        return y.value == x;
+      });
+    }).length) == visibleItems.length;
+    var showTopItem = false;
+    var suggestions = getFilteredItems().filter(function (x) {
+      return x.suggestion;
+    });
+    if (customizationProps.itemsType == 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0) showTopItem = true;else if (customizationProps.itemsType == 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)) showTopItem = true;else if (customizationProps.itemsType == 'normal' && suggestions.length > 0) showTopItem = true;
+    if (!showTopItem) return;
+    return /*#__PURE__*/_react.default.createElement(TopItemContainer, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
+      ref: elRefs[0],
+      iconPointerEventsTransparent: true,
+      select: function select() {},
+      size: size,
+      id: "".concat(id, "_topitem"),
+      label: selectedValues[0],
+      selected: true
+    }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
+      ref: elRefs[0],
+      select: function select(selected) {
+        if (!customizationProps.multiSelect) return;
+        var newValues = selected ? visibleItems.map(function (x) {
+          return x.value;
+        }) : [];
+        setSelectedValues(newValues);
+        customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues);
+      },
+      iconPointerEventsTransparent: true,
+      semiSelected: customizationProps.multiSelect && !allSelected && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0,
+      size: size,
+      id: "".concat(id, "_checkbox_selectall"),
+      label: customizationProps.multiSelect ? 'Select all' : selectedValues[0],
+      selected: !customizationProps.multiSelect || allSelected
+    }), customizationProps.itemsType == 'normal' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, suggestions.map(function (x) {
+      var _x$displayLabel2;
+
+      return /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+        ref: elRefs[0],
+        type: "button",
+        id: "".concat(id, "_topitem"),
+        onClick: function onClick(e) {
+          customizationProps.onValueUpdate([x.value]);
+          setSelectedValues([x.value]);
+          setIsOpen(false);
+          setFocused(null);
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-content"
+      }, (x === null || x === void 0 ? void 0 : x.icon) && /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-icon"
+      }, x === null || x === void 0 ? void 0 : x.icon), /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-label"
+      }, (_x$displayLabel2 = x === null || x === void 0 ? void 0 : x.displayLabel) !== null && _x$displayLabel2 !== void 0 ? _x$displayLabel2 : x === null || x === void 0 ? void 0 : x.value, (x === null || x === void 0 ? void 0 : x.noteLabel) && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, x.noteLabel))));
+    })));
+  };
+
+  var getElements = function getElements() {
+    if (getFilteredItems().length === 0) {
+      return /*#__PURE__*/_react.default.createElement(ItemsContainer, null, /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+        disabled: true
+      }, /*#__PURE__*/_react.default.createElement("span", null, messageOnNoResults)));
+    }
+
+    var number = 0;
+    return /*#__PURE__*/_react.default.createElement(ItemsContainer, null, getFilteredItems().filter(function (x) {
+      return x && (customizationProps.itemsType != 'normal' || !x.suggestion);
+    }).map(function (item) {
+      var _item$displayLabel;
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, customizationProps.itemsType == 'radio' && /*#__PURE__*/_react.default.createElement(_InputFields.RadioButton, {
+        select: function select(selected) {
+          if (!selected) return;
+          customizationProps.onValueUpdate && customizationProps.onValueUpdate([item.value]);
+          setSelectedValues([item.value]);
+        },
+        ref: elRefs[number + 1],
+        size: size,
+        iconPointerEventsTransparent: true,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        key: "key_".concat(id, "_").concat(number++),
+        id: "".concat(id, "_").concat(number + 1),
+        label: item.value,
+        selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
+      }), customizationProps.itemsType == 'checkbox' && /*#__PURE__*/_react.default.createElement(_InputFields.Checkbox, {
+        select: function select(selected) {
+          var newValue = [];
+
+          if (customizationProps.multiSelect) {
+            if (selected) newValue = [].concat(_toConsumableArray(selectedValues), [item.value]);else newValue = selectedValues.filter(function (x) {
+              return x != item.value;
+            });
+          } else newValue = selected ? [item.value] : [];
+
+          setSelectedValues(newValue);
+          customizationProps.onValueUpdate(newValue);
+        },
+        iconPointerEventsTransparent: true,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        ref: elRefs[number + 1],
+        size: size,
+        key: "key_".concat(id, "_").concat(number++),
+        id: "".concat(id, "_").concat(number + 1),
+        label: item.value,
+        selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value)
+      }), (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && /*#__PURE__*/_react.default.createElement(_CommonStyling.DropdownButton, {
+        type: "button",
+        size: size,
+        disabled: item === null || item === void 0 ? void 0 : item.disabled,
+        ref: elRefs[number + 1],
+        onClick: function onClick(e) {
+          customizationProps.onValueUpdate([item.value]);
+          setSelectedValues([item.value]);
+          setIsOpen(false);
+          setFocused(null);
+        },
+        className: selectedValues !== null && selectedValues !== void 0 && selectedValues.includes(item.value) ? 'active' : '',
+        key: "key_".concat(id, "_").concat(number++),
+        id: "".concat(id, "_").concat(number + 1)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-content"
+      }, item.icon && /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-icon"
+      }, item.icon), /*#__PURE__*/_react.default.createElement("div", {
+        className: "item-label"
+      }, (_item$displayLabel = item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item.value, item.noteLabel && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          fontSize: '12px'
+        }
+      }, item.noteLabel)))));
+    }));
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(DDContainer, {
+    ref: dropdownContentRef,
+    size: size,
+    isButton: isButton,
+    alignLeft: alignLeft,
+    scrollable: customizationProps.scrollable,
+    maxHeight: customizationProps.maxHeight,
+    className: [isOpen && 'show', isUp && 'up'].filter(function (e) {
+      return !!e;
+    }).join(' ')
+  }, /*#__PURE__*/_react.default.createElement(ListContainer, {
+    size: size,
+    itemsType: customizationProps.itemsType,
+    onScroll: handleScroll,
+    ref: itemsListRef,
+    scrollable: customizationProps.scrollable
+  }, customizationProps.pinTopItem && getTopItem(), getElements()), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/_react.default.createElement(ActionButtonContainer, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    width: "100%",
+    variant: "primary",
+    size: size,
+    onClick: function onClick() {
+      return customizationProps.action();
+    }
+  }, customizationProps.actionLabel))));
+  /*  ),
+    {
+      handleClickOutside: () => () => {
+        if (isOpen) {
+          setIsOpen(false);
+          setFocused(null);
+        }
+      },
+    },
+  );
+   return <Wrapped />; */
+};
+
+DropdownContent.propTypes = {
+  isButton: _propTypes.default.bool.isRequired,
+  customizationProps: _propTypes.default.shape({
+    itemsType: _propTypes.default.oneOf(['radio', 'checkbox', 'normal']),
+    scrollable: _propTypes.default.bool,
+    multiSelect: _propTypes.default.bool,
+    maxHeight: _propTypes.default.string,
+    actionLabel: _propTypes.default.string,
+    action: _propTypes.default.func.isRequired,
+    pinTopItem: _propTypes.default.bool,
+    isButton: _propTypes.default.bool.isRequired,
+    onValueUpdate: _propTypes.default.func.isRequired,
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      value: _propTypes.default.string.isRequired,
+      displayLabel: _propTypes.default.string,
+      noteLabel: _propTypes.default.string,
+      suggestion: _propTypes.default.bool,
+      disabled: _propTypes.default.bool,
+      icon: _propTypes.default.node
+    })).isRequired
+  }).isRequired,
+  alignLeft: _propTypes.default.bool,
+  isOpen: _propTypes.default.bool.isRequired,
+  setIsOpen: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string.isRequired,
+  filter: _propTypes.default.string.isRequired,
+  hideOnClickOutside: _propTypes.default.bool.isRequired,
+  selectedValues: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  setSelectedValues: _propTypes.default.func.isRequired,
+  messageOnNoResults: _propTypes.default.string.isRequired
+};
+var _default = DropdownContent;
+exports.default = _default;
+//# sourceMappingURL=DropdownContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/Dropdown/DropdownContent.tsx"],"names":["DDContainer","styled","div","COLORS","white","props","isButton","alignLeft","ButtonDropdownContentStyling","neutral_100","size","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","React","useState","focused","setFocused","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"}