@laerdal/life-react-components 3.5.1-dev.17 → 3.5.1-dev.18

package/dist/src/Dropdown/DropdownButton.d.ts

@@ -1,11 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom types.
- */
-import { DropdownButtonProps } from './DropdownButtonTypes';
-export declare const DropdownButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default DropdownButton;

package/dist/src/Dropdown/DropdownButton.js

@@ -1,107 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-/**
- * Import custom components.
- */
-import { IconButton } from '../Button';
-import DropdownContent from './DropdownContent';
-import styled from 'styled-components';
-import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef } from '../common';
-import { DropdownButtonTextArrow, DropdownButtonTextContent, DropdownButtonTextIcon, DropdownButtonTextStyles, DropdownButtonTextWrapper } from './CommonStyling';
-import { SystemIcons } from '../icons';
-export var DropdownButtonContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
-var DropdownButton = React.forwardRef(function (_a, ref) {
-    var items = _a.items, icon = _a.icon, disabled = _a.disabled, onClick = _a.onClick, _b = _a.itemsType, itemsType = _b === void 0 ? 'normal' : _b, action = _a.action, _c = _a.actionLabel, actionLabel = _c === void 0 ? '' : _c, actionVariant = _a.actionVariant, actionIcon = _a.actionIcon, actionLoading = _a.actionLoading, size = _a.size, width = _a.width, alignLeft = _a.alignLeft, _d = _a.multiSelect, multiSelect = _d === void 0 ? false : _d, _e = _a.scrollable, scrollable = _e === void 0 ? false : _e, _f = _a.pinTopItem, pinTopItem = _f === void 0 ? false : _f, maxHeight = _a.maxHeight, className = _a.className, value = _a.value, id = _a.id, dataTestId = _a.dataTestId, rest = __rest(_a, ["items", "icon", "disabled", "onClick", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "size", "width", "alignLeft", "multiSelect", "scrollable", "pinTopItem", "maxHeight", "className", "value", "id", "dataTestId"]);
-    // Globally used variables within the view.
-    var _g = React.useState(false), dropdownOpen = _g[0], setDropdownOpen = _g[1];
-    var _h = React.useState(), activeDescendant = _h[0], setActiveDescendant = _h[1];
-    var _j = React.useState([]), selectedValues = _j[0], setSelectedValues = _j[1];
-    var _k = React.useState(null), focused = _k[0], setFocused = _k[1];
-    var _l = React.useState(false), keyboardNavigated = _l[0], setKeyboardNavigated = _l[1];
-    var dropdownRef = React.useRef(null);
-    var containerRef = useFocusOutsideRef(function () { return setDropdownOpen(false); }, [dropdownRef]);
-    useClickOutsideRef(function () { return setDropdownOpen(false); }, [], containerRef);
-    React.useEffect(function () {
-        !dropdownOpen && setKeyboardNavigated(false);
-    }, [dropdownOpen]);
-    React.useEffect(function () {
-        disabled && setDropdownOpen(false);
-    }, [disabled]);
-    React.useEffect(function () {
-        setSelectedValues(value || []);
-    }, [value]);
-    var handleValueSelect = function (values) {
-        // Do all required actions
-        onClick(values);
-    };
-    /**
-     * Renders Icon Button dropdown menu.
-     * @returns HTML View for the Icon button dropdown menu.
-     */
-    var renderButton = function () {
-        switch (rest.type) {
-            case 'icon':
-                return (React.createElement(IconButton, { ref: ref, variant: "secondary", shape: "circular", role: "button", tooltip: rest.tooltip, id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, action: function (event) {
-                        setDropdownOpen(!dropdownOpen);
-                        if ((event === null || event === void 0 ? void 0 : event.detail) !== 1) {
-                            setKeyboardNavigated(true);
-                        }
-                    }, disabled: disabled }, icon));
-            case 'text':
-                var label = rest.keepLabel || !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length)
-                    ? rest.label
-                    : items.filter(function (a) { return selectedValues.includes(a.value); }).map(function (a) { var _a; return (_a = a.displayLabel) !== null && _a !== void 0 ? _a : a.value; }).join(', ');
-                var cls = "".concat(disabled && 'disabled', " ").concat(dropdownOpen && 'expanded', " ").concat(className);
-                return React.createElement(DropdownButtonTextWrapper, { tabIndex: !disabled ? 0 : -1, className: cls, role: "button", id: id, "data-testid": dataTestId, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, onMouseDown: defaultOnMouseDownHandler, onKeyDown: function (e) {
-                        if (e.key === 'Enter' || e.key === ' ') {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            setDropdownOpen(!dropdownOpen);
-                            setKeyboardNavigated(true);
-                        }
-                    }, onClick: function () { return !disabled && setDropdownOpen(!dropdownOpen); } },
-                    React.createElement(DropdownButtonTextContent, null,
-                        icon && React.createElement(DropdownButtonTextIcon, null, icon),
-                        React.createElement(DropdownButtonTextStyles, null, label),
-                        React.createElement(DropdownButtonTextArrow, null, dropdownOpen
-                            ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px" })
-                            : React.createElement(SystemIcons.ArrowDropDown, { size: "24px" }))));
-        }
-    };
-    return (React.createElement(DropdownButtonContainer, { className: className, ref: containerRef },
-        renderButton(),
-        React.createElement(DropdownContent, { ref: dropdownRef, ariaRolesType: "menu", containerRef: containerRef, customizationProps: {
-                itemsType: itemsType,
-                action: action !== null && action !== void 0 ? action : (function () {
-                }),
-                actionLabel: actionLabel,
-                actionVariant: actionVariant,
-                onValueUpdate: handleValueSelect,
-                multiSelect: multiSelect,
-                actionIcon: actionIcon,
-                actionLoading: actionLoading,
-                scrollable: scrollable,
-                pinTopItem: pinTopItem,
-                maxHeight: maxHeight,
-                items: items
-            }, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, focused: focused, setFocused: setFocused, size: size, width: width, alignLeft: alignLeft, isOpen: dropdownOpen, setIsOpen: setDropdownOpen, outline: keyboardNavigated, filter: "", selectedValues: rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues, setSelectedValues: setSelectedValues, messageOnNoResults: "No results", isButton: true, id: "".concat(id, "_dropdowncontent") })));
-});
-export default DropdownButton;
-var templateObject_1;

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

@@ -1,64 +0,0 @@
-/// <reference types="react" />
-import { Size, Testable } from '../types';
-import { DropdownItem } from './DropdownContent';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-export interface DropdownButtonBaseProps extends Testable {
-    /** Optional. Id of the top level component, button or text wrapper, depending on 'type'. */
-    id?: string;
-    /** Required. Array of items to be shown in the dropdown. */
-    items: DropdownItem[];
-    /** Optional. Currently selected items. */
-    value?: string[];
-    /** Optional. Handler to be called, provides array of values of currently selected items. */
-    onClick: (value: string[]) => void;
-    /** Optional. If disabled user can not interact with the button. */
-    disabled?: boolean;
-    /** Optional. Size of the items in the dropdown content, does not affect button itself. */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /** Optional. Type of the items to be shown in the dropdown. */
-    itemsType?: 'normal' | 'radio' | 'checkbox';
-    /** Optional. Handler of the extra action item to be shown in the dropdown content. */
-    action?: () => void;
-    /** Optional. Label of the extra action item to be shown in the dropdown content. */
-    actionLabel?: string;
-    /** Optional. Icon of the extra action item to be shown in the dropdown content. */
-    actionIcon?: React.ReactNode;
-    /** Optional. Loading state of the extra action item to be shown in the dropdown content. */
-    actionLoading?: boolean;
-    /** Optional. Button variant of the extra action item in the dropdown contnet. */
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    /** Optional. If set, then user can select multiple items in the dropdown. */
-    multiSelect?: boolean;
-    /** Optional. If set, then dropdown content is scrollable. */
-    scrollable?: boolean;
-    /** Optional. Maximum height of the dropdown content container. */
-    maxHeight?: string;
-    /** Optional. If this flag is set, multiselect flag is set and checkbox or radio item types are used, then
-     *  will show extra item in the top that will allow to 'Select all' items. */
-    pinTopItem?: boolean;
-    /** Optional. Custom classname to set on the top level container of the component */
-    className?: string;
-    /** Optional. Icon of the component, is required if type 'icon' is used. */
-    icon?: React.ReactNode;
-    /** Optional. Sets width of the dropdown container. */
-    width?: string;
-    /** Optional. If set, then dropdown content will be aligned with the left edge of the button, otherwise with the right edge. */
-    alignLeft?: boolean;
-}
-export declare type IconDropdownButtonProps = DropdownButtonBaseProps & {
-    /** Icon type of the dropdown button. */
-    type: 'icon';
-    /** Required. Icon to be shown with the component. */
-    icon: React.ReactNode;
-    /** Optional. Tooltip to be shown with the component. */
-    tooltip?: TooltipProps;
-};
-export declare type TextDropdownButtonProps = DropdownButtonBaseProps & {
-    /** Text drodown button type. */
-    type: 'text';
-    /** Optional. Label to be shown with the dropdown button if none of the items in the dropdown is selected. */
-    label?: string;
-    /** Optional. If set to true, then 'label' will be shown even if user selects items in the dropdown. */
-    keepLabel?: boolean;
-};
-export declare type DropdownButtonProps = IconDropdownButtonProps | TextDropdownButtonProps;

package/dist/src/Dropdown/DropdownButtonTypes.js

@@ -1 +0,0 @@
-export {};

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

@@ -1,78 +0,0 @@
-import React from 'react';
-import { Size } from '../types';
-export declare const DropdownContentContainer: import("styled-components").StyledComponent<"div", any, {
-    offsetTop: string;
-    offsetLeft: string;
-    isButton: boolean;
-    alignLeft?: boolean | undefined;
-    size?: Size | undefined;
-    scrollable?: boolean | undefined;
-    maxHeight?: string | undefined;
-}, never>;
-export declare const DropdownContentItemsContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: Size | undefined;
-}, never>;
-export declare const DropdownContentListContainer: import("styled-components").StyledComponent<"div", any, {
-    scrollable?: boolean | undefined;
-    size?: Size | undefined;
-    itemsType?: string | undefined;
-    outline?: boolean | undefined;
-}, never>;
-export interface DropdownItem {
-    /** Required. Value of the DropdownItem. */
-    value: string;
-    /** Optional. Display label to show in the MenuItem. If not provided then 'value' will be used as label. */
-    displayLabel?: string;
-    /** Optional. Note label to be shown under the Display label in the MenuItem. */
-    noteLabel?: string;
-    /**  */
-    suggestion?: boolean;
-    /** Optional. Show dividing line on the top of the item. */
-    showDividerAbove?: boolean;
-    /** Optional. If disabled user can not interact with the item. */
-    disabled?: boolean;
-    /** Optional. If item is locked then user can not interact with the item and 'lock' icon is shown on the right side of the item. */
-    locked?: boolean;
-    /** Optional. Icon to be shown on the left side of the menu item */
-    icon?: React.ReactNode;
-    /**  */
-    customContent?: React.ReactNode;
-}
-export interface DropdownCustomizationProps {
-    itemsType?: 'radio' | 'checkbox' | 'normal';
-    menuContent?: React.ReactNode;
-    scrollable?: boolean;
-    multiSelect?: boolean;
-    maxHeight?: string;
-    actionLabel?: string;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionDisabled?: boolean;
-    action: () => boolean | void | undefined;
-    pinTopItem?: boolean;
-    onValueUpdate: (values: string[]) => boolean | void | undefined;
-    items: DropdownItem[];
-}
-export interface DropdownProps {
-    isButton: boolean;
-    customizationProps: DropdownCustomizationProps;
-    alignLeft?: boolean;
-    isOpen: boolean;
-    setIsOpen: (open: boolean) => void;
-    size?: Size.Small | Size.Medium | Size.Large;
-    id: string;
-    filter: string;
-    width?: string;
-    onActiveDescendantChanged?: (descendantId?: string) => void;
-    selectedValues: string[];
-    setSelectedValues: (val: string[]) => void;
-    messageOnNoResults: string;
-    focused: number | null;
-    setFocused: (focused: number | null) => void;
-    outline?: boolean;
-    containerRef: React.RefObject<HTMLDivElement>;
-    ariaRolesType?: 'input' | 'menu';
-}
-declare const DropdownContent: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLDivElement>>;
-export default DropdownContent;

package/dist/src/Dropdown/DropdownContent.js

@@ -1,339 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import React from 'react';
-import styled from 'styled-components';
-import Button from '../Button/Button';
-import { Size } from '../types';
-import { DropdownContentButtonStyling } from './CommonStyling';
-import { ComponentLStyling, ComponentXLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';
-import { COLORS, scrollBarStyling } from '../styles';
-import { Checkbox, RadioButton } from '../InputFields';
-import { Z_INDEXES } from '../styles/z-indexes';
-import MenuItem from '../MenuItem/MenuItem';
-var MAX_MENU_HEIGHT = 240;
-var AVG_OPTION_HEIGHT = 48;
-var OFFSET_BEFORE_SHOW = 1000000;
-export var DropdownContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\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 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"], ["\n  display: none;\n  pointer-events: auto;\n  position: absolute;\n  background-color: ", ";\n\n  z-index: ", ";\n  margin: ", ";\n\n  &.show {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    &.down,\n    &.up {\n      ", "\n    }\n  }\n\n  transform: translate(-", "px, -", "px);\n\n  &.outline:focus:after {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    outline: 4px solid black;\n    outline-offset: 2px;\n    border-radius: 2px;\n  }\n\n  &:focus {\n    outline: none;\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 0px;\n\n  min-width: ", ";\n  border-radius: ", ";\n\n  max-height: ", ";\n"])), COLORS.white, Z_INDEXES.dropdown, function (props) { return (props.isButton ? '-4px' : '4px 0px'); }, function (props) { return "transform: translate(".concat(props.offsetLeft, ", ").concat(props.offsetTop, ");"); }, OFFSET_BEFORE_SHOW, OFFSET_BEFORE_SHOW, function (props) { return (props.isButton ? DropdownContentButtonStyling : ''); }, COLORS.neutral_100, function (props) { return (props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); }, function (props) { return (props.size == Size.Large ? '10px' : props.size == Size.Medium ? '8px' : '6px'); }, function (props) { return (!props.scrollable ? 'auto' : props.maxHeight ? props.maxHeight : props.size == Size.Large ? '320px' : props.size == Size.Medium ? '280px' : '240px'); });
-export var DropdownContentItemsContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"], ["\n  > *:hover {\n    z-index: ", ";\n  }\n\n  > *:active,\n  > *.active {\n    z-index: ", ";\n  }\n\n  > *:focus {\n    z-index: ", ";\n  }\n"])), Z_INDEXES.hover, Z_INDEXES.active, Z_INDEXES.focus);
-export var DropdownContentListContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"], ["\n  ", "\n  ", "\n  ", "\n  ", "\n  div.divider {\n    display: block;\n    width: calc(100% - 40px);\n    margin-left: 16px;\n    border-top: 1px solid #e5e5e5;\n    position: absolute;\n    top: 0px;\n  }\n\n  ", " {\n    padding-top: ", ";\n    padding-bottom: ", ";\n\n    word-break: break-word;\n  }\n\n  *:focus {\n    outline: none !important;\n  }\n\n  ", "\n"])), function (props) { return (props.scrollable ? 'overflow-y: scroll;' : ''); }, function (props) { return (props.scrollable ? 'margin-right: 6px;' : ''); }, function (props) { return (props.scrollable ? 'padding-right: 6px;' : ''); }, function (props) { return (props.itemsType != 'normal' ? 'margin-left: 4px;' : ''); }, DropdownContentItemsContainer, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, function (props) { return (props.size == Size.Large ? '8px' : props.size == Size.Medium ? '4px' : '0px'); }, scrollBarStyling(Size.Small));
-var DropdownContentMenuContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"], ["\n  h1,\n  h2,\n  h3 {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n\n  p {\n    margin-block-start: 0px;\n    margin-block-end: 0px;\n    ", "\n    ", "\n    ", "\n    padding: ", ";\n  }\n"])), function (props) { return props.size == Size.Large && ComponentXLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '10px 16px 6px' : props.size == Size.Medium ? '16px 24px 8px' : '16px 32px 8px'); }, function (props) { return props.size == Size.Large && ComponentLStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return props.size == Size.Medium && ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size) && ComponentSStyling(ComponentTextStyle.Regular, COLORS.neutral_500); }, function (props) { return (props.size == Size.Small || !props.size ? '8px 16px' : props.size == Size.Medium ? '12px 24px' : '16px 32px'); });
-var DividerContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"], ["\n  position: relative;\n\n  margin-top: ", ";\n\n  div.divider {\n    width: 100%;\n    margin: 0px;\n  }\n"])), function (props) { return (props.size == Size.Large ? '16px' : props.size == Size.Medium ? '12px' : props.size == Size.Small || !props.size ? '8px' : '6px'); });
-var DropdownContentTopItemContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"], ["\n  border-bottom-style: solid;\n  border-bottom-color: ", ";\n  border-bottom-width: 1px;\n  margin-right: 22px;\n"])), COLORS.neutral_200);
-var DropdownContentActionButtonContainer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"], ["\n  ", "\n  ", "\n\n  padding: ", ";\n\n  button {\n    width: 100%;\n  }\n"])), function (props) { return (props.scrollable ? "border-top: 1px solid  ".concat(COLORS.neutral_200, ";") : ''); }, function (props) { return (props.scrollable ? 'margin-top: 4px;' : ''); }, function (props) { return (props.size === Size.Small || !props.size ? '4px 16px 0px' : props.size === Size.Medium ? '12px 16px 8px' : '16px 16px 12px'); });
-var Overlay = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: ", ";\n"])), Z_INDEXES.modal);
-var DropdownContent = React.forwardRef(function (_a, ref) {
-    var _b, _c;
-    var id = _a.id, customizationProps = _a.customizationProps, alignLeft = _a.alignLeft, isButton = _a.isButton, size = _a.size, isOpen = _a.isOpen, width = _a.width, setIsOpen = _a.setIsOpen, filter = _a.filter, focused = _a.focused, setFocused = _a.setFocused, selectedValues = _a.selectedValues, setSelectedValues = _a.setSelectedValues, messageOnNoResults = _a.messageOnNoResults, outline = _a.outline, containerRef = _a.containerRef, onActiveDescendantChanged = _a.onActiveDescendantChanged, _d = _a.ariaRolesType, ariaRolesType = _d === void 0 ? 'menu' : _d;
-    var _e = React.useState(false), isUp = _e[0], setIsUp = _e[1];
-    var _f = React.useState(false), locationDefined = _f[0], setLocationDefined = _f[1];
-    var _g = React.useState({ top: '0', left: '0' }), offset = _g[0], setOffset = _g[1];
-    var dropdownContentRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
-    if (!customizationProps.itemsType)
-        customizationProps.itemsType = 'normal';
-    if (!size)
-        size = Size.Small;
-    var itemsListRef = React.useRef(null);
-    var actionButtonRef = React.useRef(null);
-    var determineDropUp = function () {
-        var options = customizationProps.items;
-        var rect = containerRef.current.getBoundingClientRect();
-        var windowHeight = window.innerHeight;
-        var menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);
-        var instOffsetWithMenu = rect.top + rect.height + menuHeight;
-        var up = instOffsetWithMenu >= windowHeight;
-        setOffset({
-            top: up ? "calc(-100% - ".concat(rect.height, "px ").concat(isButton ? '' : '- 8px', ")") : '0',
-            left: alignLeft ? "calc(-".concat(rect.width, "px)") : "calc(-100%)",
-        });
-        setIsUp(up);
-        setLocationDefined(true);
-    };
-    var setNewFocusedElement = function (index) {
-        var _a, _b, _c, _d;
-        if (outline)
-            (_a = dropdownContentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        var newFocusedElement = elRefs[index];
-        if (onActiveDescendantChanged)
-            onActiveDescendantChanged(index == 0 ? "".concat(id, "_topitem") : "".concat(id, "_").concat(index));
-        var oldFocusedElement = focused || focused === 0 ? elRefs[focused] : null;
-        if (newFocusedElement && newFocusedElement !== oldFocusedElement) {
-            setFocused(index);
-            (_b = oldFocusedElement === null || oldFocusedElement === void 0 ? void 0 : oldFocusedElement.current) === null || _b === void 0 ? void 0 : _b.classList.remove('dropdown-hover');
-            (_c = newFocusedElement.current) === null || _c === void 0 ? void 0 : _c.classList.add('dropdown-hover');
-            (_d = newFocusedElement.current) === null || _d === void 0 ? void 0 : _d.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        }
-    };
-    var getFilteredItems = function () {
-        var filtrationString = (filter !== null && filter !== void 0 ? filter : '').toUpperCase();
-        return customizationProps.items.filter(function (x) { var _a, _b; return ((_a = x === null || x === void 0 ? void 0 : x.value) === null || _a === void 0 ? void 0 : _a.toUpperCase().includes(filtrationString)) || ((_b = x === null || x === void 0 ? void 0 : x.displayLabel) === null || _b === void 0 ? void 0 : _b.toUpperCase().includes(filtrationString)); });
-    };
-    var findNextActiveIndex = function (index, direction, items) {
-        var _a;
-        for (var i = index + direction; i > 0 && i <= items.length; i += direction) {
-            if (!((_a = items[i - 1]) === null || _a === void 0 ? void 0 : _a.disabled)) {
-                return i;
-            }
-        }
-        return index;
-    };
-    var handleKeyDown = function (e) {
-        var _a;
-        if (isOpen) {
-            if (e.key === 'ArrowUp' || e.key === 'Up') {
-                e.preventDefault();
-                var focusedNow = focused || focused === 0 ? focused : arrLength + 1;
-                if (!!focusedNow) {
-                    focusedNow = focusedNow === 1 && haveTopItem() ? 0 : findNextActiveIndex(focusedNow, -1, getFilteredItems());
-                    setNewFocusedElement(focusedNow);
-                }
-            }
-            else if (e.key === 'ArrowDown' || e.key === 'Down') {
-                e.preventDefault();
-                var focusedNow = focused;
-                focusedNow = !!focusedNow || focusedNow === 0 ? findNextActiveIndex(focusedNow, 1, getFilteredItems()) : haveTopItem() ? 0 : 1;
-                setNewFocusedElement(focusedNow);
-            }
-            else if (e.key === 'Escape' || e.key === 'Esc') {
-                setIsOpen(false);
-                setFocused(null);
-                if (onActiveDescendantChanged)
-                    onActiveDescendantChanged(undefined);
-            }
-            else if ((e.key === 'Enter' || e.key === ' ') && focused !== null && e.target !== (actionButtonRef === null || actionButtonRef === void 0 ? void 0 : actionButtonRef.current)) {
-                e.preventDefault();
-                var focusedElement = elRefs[focused];
-                if (focusedElement) {
-                    (_a = focusedElement.current) === null || _a === void 0 ? void 0 : _a.click();
-                }
-                if (onActiveDescendantChanged)
-                    onActiveDescendantChanged(undefined);
-            }
-        }
-    };
-    React.useEffect(function () {
-        document.addEventListener('keydown', handleKeyDown);
-        return function () {
-            document.removeEventListener('keydown', handleKeyDown);
-        };
-    }, []);
-    var scrollPosition = React.useRef(0);
-    var handleScroll = function () {
-        var _a;
-        scrollPosition.current = (_a = itemsListRef.current) === null || _a === void 0 ? void 0 : _a.scrollTop;
-    };
-    React.useLayoutEffect(function () {
-        var _a;
-        if (itemsListRef.current)
-            itemsListRef.current.scrollTop = (_a = scrollPosition.current) !== null && _a !== void 0 ? _a : 0;
-    }, [selectedValues]);
-    var getCorrectRef = function (ref) {
-        switch (customizationProps.itemsType) {
-            case 'normal':
-                return ref || React.createRef();
-            default:
-                return ref || React.createRef();
-        }
-    };
-    var arrLength = getFilteredItems().length;
-    var _h = React.useState([]), elRefs = _h[0], setElRefs = _h[1];
-    React.useEffect(function () {
-        if ((elRefs === null || elRefs === void 0 ? void 0 : elRefs.length) !== arrLength) {
-            setFocused(null);
-        }
-        setElRefs(function (elRefs) {
-            return Array(arrLength + 1)
-                .fill(null)
-                .map(function (_, i) { return getCorrectRef(elRefs[i]); });
-        });
-    }, [isOpen, arrLength]);
-    React.useLayoutEffect(function () {
-        isOpen && !locationDefined && determineDropUp();
-    }, [isOpen, locationDefined]);
-    var haveTopItem = function () {
-        var _a;
-        if (!customizationProps.pinTopItem)
-            return false;
-        if (customizationProps.itemsType === 'radio' && selectedValues && (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0)
-            return true;
-        else if (customizationProps.itemsType === 'checkbox' && (customizationProps.multiSelect || (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) > 0))
-            return true;
-        else if (customizationProps.itemsType === 'normal' && ((_a = getSuggestions()) === null || _a === void 0 ? void 0 : _a.length) > 0)
-            return true;
-        return false;
-    };
-    var getSuggestions = function () {
-        return getFilteredItems().filter(function (x) { return x.suggestion; });
-    };
-    /**
-     * when dropdown opens set correct position of focused item
-     * */
-    React.useLayoutEffect(function () {
-        if (isOpen && (focused || focused === 0)) {
-            setNewFocusedElement(focused === 0 && !haveTopItem() ? 1 : focused);
-        }
-    }, [isOpen, focused]);
-    /**
-     * Reset dropdown content state on close
-     * */
-    React.useEffect(function () {
-        var _a, _b, _c, _d, _e;
-        if (!isOpen) {
-            setLocationDefined(false);
-            for (var _i = 0, elRefs_1 = elRefs; _i < elRefs_1.length; _i++) {
-                var elRef = elRefs_1[_i];
-                (_a = elRef.current) === null || _a === void 0 ? void 0 : _a.classList.remove('dropdown-hover');
-            }
-            setFocused(null);
-            if (onActiveDescendantChanged)
-                onActiveDescendantChanged(undefined);
-            (_b = dropdownContentRef.current) === null || _b === void 0 ? void 0 : _b.classList.remove('outline');
-            (_c = dropdownContentRef.current) === null || _c === void 0 ? void 0 : _c.blur();
-        }
-        else {
-            if (outline) {
-                (_d = dropdownContentRef.current) === null || _d === void 0 ? void 0 : _d.classList.add('outline');
-                (_e = dropdownContentRef.current) === null || _e === void 0 ? void 0 : _e.focus();
-            }
-        }
-    }, [isOpen, dropdownContentRef, focused, outline]);
-    /**
-     * Scroll item container to top when dropdown opens
-     * */
-    React.useEffect(function () {
-        if (isOpen && itemsListRef.current) {
-            itemsListRef.current.scrollTop = 0;
-        }
-    }, [isOpen]);
-    React.useEffect(function () {
-        if (isOpen) {
-            var observer_1 = new IntersectionObserver(function (entries) {
-                var _a;
-                if (!entries[0].isIntersecting) {
-                    setIsOpen(false);
-                    //@ts-ignore
-                    (_a = document === null || document === void 0 ? void 0 : document.activeElement) === null || _a === void 0 ? void 0 : _a.blur();
-                }
-            }, { threshold: [0], rootMargin: '8px' });
-            observer_1.observe(containerRef.current);
-            calculateOffset();
-            window.addEventListener('scroll', calculateOffset, true);
-            window.addEventListener('resize', calculateOffset);
-            return function () {
-                observer_1.disconnect();
-                window.removeEventListener('scroll', calculateOffset, true);
-                window.removeEventListener('resize', calculateOffset);
-            };
-        }
-        return function () { };
-    }, [isOpen]);
-    var handleItemClick = function (selected, item) {
-        var newValue = [];
-        if (customizationProps.multiSelect) {
-            if (selected)
-                newValue = __spreadArray(__spreadArray([], selectedValues, true), [item.value], false);
-            else
-                newValue = selectedValues.filter(function (x) { return x != item.value; });
-        }
-        else
-            newValue = selected ? [item.value] : [];
-        setSelectedValues(newValue);
-        if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValue)) {
-            setIsOpen(false);
-        }
-    };
-    var getTopItem = function () {
-        var _a, _b, _c, _d;
-        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 = getSuggestions();
-        var displayLabel = selectedValues[0] ? (_b = (_a = customizationProps.items) === null || _a === void 0 ? void 0 : _a.find(function (c) { return c.value === selectedValues[0]; })) === null || _b === void 0 ? void 0 : _b.displayLabel : undefined;
-        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;
-        var selectedFirst = selectedValues.length > 0 ? visibleItems.find(function (x) { return x.value == selectedValues[0]; }) : null;
-        return (React.createElement(DropdownContentTopItemContainer, { size: size },
-            customizationProps.itemsType === 'radio' && (React.createElement(RadioButton, { ref: elRefs[0], role: 'menuitemradio', iconPointerEventsTransparent: true, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function () { }, label: (_c = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _c !== void 0 ? _c : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, size: size, id: "".concat(id, "_topitem"), selected: true })),
-            customizationProps.itemsType === 'checkbox' && (React.createElement(Checkbox, { ref: elRefs[0], role: 'menuitemcheckbox', tabIndexVal: -1, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), select: function (selected) {
-                    if (!customizationProps.multiSelect)
-                        return;
-                    var newValues = selected ? visibleItems.map(function (x) { return x.value; }) : [];
-                    setSelectedValues(newValues);
-                    if (customizationProps.onValueUpdate && customizationProps.onValueUpdate(newValues))
-                        setIsOpen(false);
-                }, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, 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' : (_d = selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.displayLabel) !== null && _d !== void 0 ? _d : selectedFirst === null || selectedFirst === void 0 ? void 0 : selectedFirst.value, selected: !customizationProps.multiSelect || allSelected })),
-            customizationProps.itemsType === 'normal' && (React.createElement(React.Fragment, null, suggestions.map(function (x) { return (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "".concat(id, "_topitem_").concat(x.value), item: x, size: size, active: false, tabIndex: -1, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_topitem")); }, className: "".concat(focused === 0 ? 'dropdown-hover' : ''), ref: elRefs[0], id: "".concat(id, "_topitem"), onClickHandler: function (e) {
-                    e.stopPropagation();
-                    customizationProps.onValueUpdate([x.value]);
-                    setSelectedValues([x.value]);
-                    setIsOpen(false);
-                    setFocused(null);
-                } })); })))));
-    };
-    var getElements = function (messageOnNoResults, size) {
-        if (getFilteredItems().length === 0) {
-            return React.createElement(MenuItem, { item: { value: messageOnNoResults, disabled: true }, size: size, id: "noResultsFound", active: false, onClickHandler: function (e) { } });
-        }
-        return (React.createElement(DropdownContentItemsContainer, { size: size }, getFilteredItems()
-            .filter(function (x) { return x && (customizationProps.itemsType != 'normal' || !x.suggestion); })
-            .map(function (item, index) {
-            var _a, _b;
-            return (React.createElement(React.Fragment, { key: "key_".concat(id, "_").concat(item.value) },
-                item.customContent,
-                !item.customContent && customizationProps.itemsType == 'radio' && (React.createElement(RadioButton, { role: 'menuitemradio', select: function (selected) { return handleItemClick(selected, item); }, ref: elRefs[index + 1], size: size, tabIndexVal: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_a = item.displayLabel) !== null && _a !== void 0 ? _a : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
-                !item.customContent && customizationProps.itemsType == 'checkbox' && (React.createElement(Checkbox, { role: 'menuitemcheckbox', select: function (selected) { return handleItemClick(selected, item); }, iconPointerEventsTransparent: true, disabled: item === null || item === void 0 ? void 0 : item.disabled, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), ref: elRefs[index + 1], size: size, tabIndexVal: -1, key: "key_".concat(id, "_").concat(index + 1), onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, id: "".concat(id, "_").concat(index + 1), label: (_b = item.displayLabel) !== null && _b !== void 0 ? _b : item.value, selected: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value) })),
-                !item.customContent && (customizationProps.itemsType == 'normal' || !customizationProps.itemsType) && (React.createElement(MenuItem, { role: ariaRolesType == 'input' ? 'option' : 'menu', key: "key_".concat(id, "_").concat(index + 1), id: "".concat(id, "_").concat(index + 1), item: item, tabIndex: -1, className: "".concat(index + 1 === focused ? 'dropdown-hover' : ''), size: size, onFocus: function (e) { return onActiveDescendantChanged && onActiveDescendantChanged("".concat(id, "_").concat(index + 1)); }, active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(item.value), ref: elRefs[index + 1], onClickHandler: function (e) {
-                        e.stopPropagation();
-                        customizationProps.onValueUpdate([item.value]);
-                        setSelectedValues([item.value]);
-                        setIsOpen(false);
-                        setFocused(null);
-                    } }))));
-        })));
-    };
-    var calculateOffset = function () {
-        var _a;
-        var rect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (rect) {
-            dropdownContentRef.current.style.left = "".concat(rect.x + rect.width, "px");
-            dropdownContentRef.current.style.top = "".concat(rect.y + rect.height, "px");
-            dropdownContentRef.current.style.width = width !== null && width !== void 0 ? width : "".concat(rect.width, "px");
-        }
-        determineDropUp();
-    };
-    var cls = "".concat(isOpen ? 'show' : '', " ").concat(isOpen && outline ? 'outline' : '', " ").concat(locationDefined ? (isUp ? 'up' : 'down') : '');
-    return (React.createElement(Overlay, null,
-        React.createElement(DropdownContentContainer, { role: ariaRolesType == "menu" ? "menu" : "optionlist", ref: dropdownContentRef, size: size, offsetTop: offset.top, id: id, offsetLeft: offset.left, tabIndex: -1, isButton: isButton, alignLeft: alignLeft, scrollable: customizationProps.scrollable, maxHeight: customizationProps.maxHeight, className: cls },
-            React.createElement(DropdownContentListContainer, { role: "group", size: size, itemsType: customizationProps.itemsType, onScroll: handleScroll, ref: itemsListRef, outline: outline, scrollable: customizationProps.scrollable },
-                customizationProps.menuContent && (React.createElement(DropdownContentMenuContentContainer, { size: size },
-                    customizationProps.menuContent,
-                    React.createElement(DividerContainer, { size: size },
-                        React.createElement("div", { className: "divider" })))),
-                customizationProps.pinTopItem && getTopItem(),
-                getElements(messageOnNoResults, size)),
-            customizationProps.action && customizationProps.actionLabel && (React.createElement(DropdownContentActionButtonContainer, { size: size, scrollable: customizationProps.scrollable },
-                React.createElement(Button, { width: "100%", role: "menuitem", icon: customizationProps.actionIcon, ref: actionButtonRef, loading: customizationProps.actionLoading, disabled: customizationProps.actionDisabled, variant: (_c = customizationProps.actionVariant) !== null && _c !== void 0 ? _c : 'primary', size: size, onClick: function () { return customizationProps.action() && setIsOpen(false); } }, customizationProps.actionLabel))))));
-});
-export default DropdownContent;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;