@laerdal/life-react-components 3.5.1-dev.10 → 3.5.1-dev.12

package/dist/Dropdown/BasicDropdown.d.ts

@@ -2,40 +2,116 @@ import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
 import { Size, Testable } from '../types';
 export interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'placeholder' | 'tabIndex' | 'onMouseDown' | 'onClick' | 'onKeyDown'> {
+    /**
+    * Required. An array of DropdownItem objects representing the items in the dropdown.
+    */
     list: DropdownItem[];
+    /**
+    * Optional. The type of the items in the dropdown. Can be 'normal', 'checkbox', or 'radio'.
+    */
     itemsType?: 'normal' | 'checkbox' | 'radio';
+    /**
+    * Optional. A function to be called when the action button in the dropdown is clicked.
+    */
     action?: () => void;
+    /**
+    * Optional. The label for the action button in the dropdown.
+    */
     actionLabel?: string;
+    /**
+    * Optional. The variant of the action button in the dropdown. Can be 'primary', 'secondary', 'tertiary', or undefined.
+    */
     actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    /**
+    * Optional. The icon for the action button in the dropdown.
+    */
     actionIcon?: React.ReactNode;
+    /**
+    * Optional. A boolean indicating whether the action button in the dropdown is loading.
+    */
     actionLoading?: boolean;
+    /**
+    * Optional. A boolean indicating whether the action button in the dropdown is disabled.
+    */
     actionDisabled?: boolean;
+    /**
+    * Optional. A boolean indicating whether the top item in the dropdown should be pinned.
+    */
     pinTopItem?: boolean;
+    /**
+    * Optional. A boolean indicating whether the dropdown content is scrollable.
+    */
     scrollable?: boolean;
+    /**
+    * Optional. The maximum height of the dropdown.
+    */
     maxHeight?: string;
     placeholder?: string;
+    /**
+    * Optional. A boolean indicating whether sorting is disabled in the dropdown.
+    */
     disableSorting?: boolean;
+    /**
+     * Optional. The message to be displayed when there are no results in the dropdown.
+     */
     messageOnNoResults?: string;
+    /**
+    * Optional. A boolean indicating whether the dropdown is disabled.
+    */
     disabled?: boolean;
+    /**
+     * Optional. A boolean indicating whether the dropdown is read-only.
+     */
     readOnly?: boolean;
+    /**
+     * Optional. A boolean indicating whether the dropdown is a button.
+     */
     isButton?: boolean;
+    /**
+     * Optional. The validation message to be displayed when the dropdown is active.
+     */
     activeValidationMessage?: string;
+    /**
+     * Optional. The message to be displayed when the dropdown is autofilled.
+     */
     autofilledMessage?: string;
+    /**
+     * Optional. The size of the dropdown. Can be 'Small' or 'Medium'.
+     */
     size?: Size.Small | Size.Medium;
+    /**
+     * Optional. The margin of the dropdown. Can be any valid CSS margin value.
+     */
     margin?: string;
+    /**
+     * Optional. The minimum width of the dropdown.
+     */
     minWidth?: string;
+    /**
+     * Optional. The text overflow behavior of the dropdown. Can be 'ellipsis' or 'default'.
+     */
     textOverflow?: 'ellipsis' | 'default';
+    /**
+   * Optional. The position of the tooltip when dropdown is closed. Can be 'top' or 'bottom'.
+   */
+    overflowTooltipPosition?: 'top' | 'bottom';
 }
-export type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
+export declare type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
+    /** Required. If this flag is set then user can select multiple items. */
     multiSelect: true;
+    /** Required. Selected items. */
     value?: string[];
+    /** Required. Callback handler to call when user selects one of the items. Provides all selected items after last change. */
     onSelect: (value: string[]) => void;
 };
-export type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
+export declare type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
+    /** Required. If this flag is set then user can select multiple items. */
     multiSelect?: false;
+    /** Required. Selected item. */
     value?: string;
+    /** Required. Callback handler to call when user selects one of the items. Provides value of selected item. */
     onSelect: (value: string) => void;
 };
-export type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
+export declare type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
 declare const BasicDropdown: React.ForwardRefExoticComponent<BasicDropdownProps & React.RefAttributes<unknown>>;
 export default BasicDropdown;

package/dist/Dropdown/BasicDropdown.js

@@ -1,305 +1,153 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _pt from "prop-types";
-var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"];
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import * as React from 'react';
-import { COLORS } from '../styles';
-import { SystemIcons } from '../icons';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { DropdownContainer, DropdownInputFieldStyles, DropdownInputField } from './CommonStyling';
-import DropdownContent from './DropdownContent';
-import { AutofilledMessage, ErrorMessage } from '../InputFields';
-import TooltipOverflow from '../Tooltips/TooltipOverflow';
-import { Size } from '../types';
-import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
-import { useFocusOutsideRef } from '../common';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var id = props.id,
-    list = props.list,
-    placeholder = props.placeholder,
-    messageOnNoResults = props.messageOnNoResults,
-    _props$itemsType = props.itemsType,
-    itemsType = _props$itemsType === void 0 ? 'normal' : _props$itemsType,
-    action = props.action,
-    actionLabel = props.actionLabel,
-    actionVariant = props.actionVariant,
-    actionIcon = props.actionIcon,
-    actionLoading = props.actionLoading,
-    actionDisabled = props.actionDisabled,
-    pinTopItem = props.pinTopItem,
-    _props$scrollable = props.scrollable,
-    scrollable = _props$scrollable === void 0 ? true : _props$scrollable,
-    maxHeight = props.maxHeight,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    isButton = props.isButton,
-    activeValidationMessage = props.activeValidationMessage,
-    autofilledMessage = props.autofilledMessage,
-    size = props.size,
-    margin = props.margin,
-    minWidth = props.minWidth,
-    className = props.className,
-    overflowTooltipPosition = props.overflowTooltipPosition,
-    onBlur = props.onBlur,
-    dataTestId = props.dataTestId,
-    onSelect = props.onSelect,
-    _props$textOverflow = props.textOverflow,
-    textOverflow = _props$textOverflow === void 0 ? 'ellipsis' : _props$textOverflow,
-    rest = _objectWithoutProperties(props, _excluded);
-  var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isOpen = _React$useState2[0],
-    setIsOpen = _React$useState2[1];
-  var _React$useState3 = React.useState(),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    activeDescendant = _React$useState4[0],
-    setActiveDescendant = _React$useState4[1];
-  var _React$useState5 = React.useState(false),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    isLoading = _React$useState6[0],
-    setIsLoading = _React$useState6[1];
-  var _React$useState7 = React.useState(''),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    input = _React$useState8[0],
-    setInput = _React$useState8[1];
-  var _React$useState9 = React.useState(null),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    focused = _React$useState10[0],
-    setFocused = _React$useState10[1];
-  var _React$useState11 = React.useState(false),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    keyboardNavigated = _React$useState12[0],
-    setKeyboardNavigated = _React$useState12[1];
-  var inputRef = React.useRef(null);
-  var styledFieldRef = useFocusVisibleRef([inputRef]);
-  var dropdownRef = React.useRef(null);
-  var resetDropdown = function resetDropdown() {
-    setIsOpen(false);
-    setFocused(null);
-  };
-  var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
-  useClickOutsideRef(resetDropdown, [], containerRef);
-  var handleKeyDown = function handleKeyDown(e) {
-    if (e.key === 'Enter' || e.key === ' ') {
-      setIsOpen(!isOpen);
-      setKeyboardNavigated(true);
-    }
-  };
-  var handleValueSelect = function handleValueSelect(values) {
-    setInput(values.join(', '));
-    if (props.multiSelect === true) {
-      props.onSelect(values);
-    } else if (props.multiSelect === false || props.multiSelect === undefined) {
-      props.onSelect(values[0]);
-    }
-
-    //don't close dropdown on item select if have custom action or multiselect
-    if (actionLabel || props.multiSelect) return;
-    if (keyboardNavigated) {
-      var _styledFieldRef$curre;
-      (_styledFieldRef$curre = styledFieldRef.current) === null || _styledFieldRef$curre === void 0 ? void 0 : _styledFieldRef$curre.focus({
-        focusVisible: true
-      });
-    }
-    setIsOpen(false);
-    setFocused(null);
-  };
-  React.useEffect(function () {
-    if (props.value) {
-      if (props.multiSelect) {
-        setInput(props.value.join(', '));
-      } else if (props.multiSelect === false || props.multiSelect === undefined) {
-        setInput(props.value);
-      }
-    } else {
-      setInput('');
-    }
-  }, [props.value, props.multiSelect]);
-  React.useEffect(function () {
-    setIsLoading(false);
-  }, [input]);
-  React.useEffect(function () {
-    !isOpen && setKeyboardNavigated(false);
-  }, [isOpen]);
-  React.useImperativeHandle(ref, function () {
-    return inputRef.current;
-  }, [inputRef]);
-  var customSetIsOpen = function customSetIsOpen(isOpen) {
-    setIsOpen(isOpen);
-  };
-  var getDisplayItems = function getDisplayItems() {
-    var values = input.split(',').map(function (val) {
-      return val.trim();
-    });
-    var listDisplayLabels = list.filter(function (item) {
-      return values.includes(item.value);
-    }).map(function (l) {
-      return l.displayLabel;
-    });
-    return listDisplayLabels.join(', ');
-  };
-  var handleBlur = function handleBlur(e) {
-    // @ts-ignore
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      onBlur && onBlur(e);
-    }
-  };
-  var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(DropdownContainer, {
-      ref: containerRef,
-      "aria-expanded": isOpen ? true : false,
-      "aria-activedescendant": activeDescendant,
-      "aria-controls": "".concat(id, "_dropdowncontent"),
-      role: "listbox",
-      "aria-multiselectable": props.multiSelect,
-      isButton: isButton || false,
-      className: size ? size : '',
-      readOnly: readOnly,
-      disabled: disabled,
-      margin: margin,
-      onBlur: handleBlur,
-      minWidth: minWidth,
-      children: [/*#__PURE__*/_jsxs(DropdownInputFieldStyles, _objectSpread(_objectSpread({
-        ref: styledFieldRef,
-        className: cls,
-        onMouseDown: defaultOnMouseDownHandler,
-        onClick: function onClick(e) {
-          if (!readOnly && !disabled) {
-            e.stopPropagation();
-            setIsOpen(!isOpen);
-            if (isOpen) {
-              var _inputRef$current;
-              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.blur();
-            } else {
-              var _inputRef$current2;
-              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-            }
-          }
-        },
-        tabIndex: disabled || readOnly ? -1 : 0,
-        disabled: disabled || false,
-        readOnly: readOnly || false,
-        isPlaceholder: !input,
-        showValidationMessage: !!activeValidationMessage,
-        onKeyDown: handleKeyDown,
-        minWidth: minWidth
-      }, rest), {}, {
-        children: [/*#__PURE__*/_jsx(DropdownInputField, {
-          ref: inputRef,
-          type: "search",
-          ellipsis: textOverflow == 'ellipsis',
-          id: id,
-          "data-testid": dataTestId,
-          readOnly: true,
-          placeholder: placeholder,
-          value: getDisplayItems(),
-          className: size ? "".concat(size, " value") : 'value',
-          tabIndex: -1,
-          disabled: disabled || false
-        }), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
-          position: overflowTooltipPosition,
-          input: inputRef,
-          withArrow: true,
-          maxWidth: "100%",
-          size: size,
-          align: "end",
-          children: getDisplayItems()
-        }) : null, isLoading ? /*#__PURE__*/_jsx(LoadingIndicator, {
-          size: Size.Small,
-          color: COLORS.neutral_600
-        }) : null, /*#__PURE__*/_jsx("div", {
-          className: 'icon dropdown-arrow',
-          children: isOpen ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
-            size: "24px",
-            className: size ? size : ''
-          }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
-            size: "24px",
-            className: size ? size : ''
-          })
-        })]
-      })), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
-        ref: dropdownRef,
-        containerRef: containerRef,
-        onActiveDescendantChanged: function onActiveDescendantChanged(id) {
-          return setActiveDescendant(id);
-        },
-        customizationProps: {
-          itemsType: itemsType,
-          action: action !== null && action !== void 0 ? action : function () {},
-          actionLabel: actionLabel,
-          actionVariant: actionVariant,
-          actionDisabled: actionDisabled,
-          scrollable: scrollable,
-          onValueUpdate: handleValueSelect,
-          items: list,
-          multiSelect: props.multiSelect,
-          pinTopItem: pinTopItem,
-          maxHeight: maxHeight,
-          actionIcon: actionIcon,
-          actionLoading: actionLoading
-        },
-        ariaRolesType: "input",
-        focused: focused,
-        setFocused: setFocused,
-        size: size !== null && size !== void 0 ? size : Size.Small,
-        filter: '',
-        isOpen: isOpen,
-        setIsOpen: customSetIsOpen,
-        messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
-        outline: keyboardNavigated,
-        isButton: isButton || false,
-        selectedValues: props.multiSelect ? props.value || [] : [props.value || ''],
-        setSelectedValues: handleValueSelect,
-        id: "".concat(id, "_dropdowncontent")
-      })]
-    }), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400
-      }), /*#__PURE__*/_jsx("span", {
-        children: activeValidationMessage
-      })]
-    }), autofilledMessage && /*#__PURE__*/_jsxs(AutofilledMessage, {
-      children: [/*#__PURE__*/_jsx(SystemIcons.Information, {
-        color: COLORS.neutral_600
-      }), /*#__PURE__*/_jsx("span", {
-        children: autofilledMessage
-      })]
-    })]
-  });
-});
-BasicDropdown.propTypes = {
-  list: _pt.array.isRequired,
-  itemsType: _pt.oneOf(['normal', 'checkbox', 'radio']),
-  action: _pt.func,
-  actionLabel: _pt.string,
-  actionIcon: _pt.node,
-  actionLoading: _pt.bool,
-  actionDisabled: _pt.bool,
-  pinTopItem: _pt.bool,
-  scrollable: _pt.bool,
-  maxHeight: _pt.string,
-  placeholder: _pt.string,
-  disableSorting: _pt.bool,
-  messageOnNoResults: _pt.string,
-  disabled: _pt.bool,
-  readOnly: _pt.bool,
-  isButton: _pt.bool,
-  activeValidationMessage: _pt.string,
-  autofilledMessage: _pt.string,
-  margin: _pt.string,
-  minWidth: _pt.string,
-  textOverflow: _pt.oneOf(['ellipsis', 'default']),
-  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
-  multiSelect: _pt.oneOf([false]),
-  value: _pt.string,
-  onSelect: _pt.func.isRequired
-};
-export default BasicDropdown;
-//# sourceMappingURL=BasicDropdown.js.map
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 * as React from 'react';
+import { COLORS } from '../styles';
+import { SystemIcons } from '../icons';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { DropdownContainer, DropdownInputFieldStyles, DropdownInputField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import { AutofilledMessage, ErrorMessage } from '../InputFields';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import { Size } from '../types';
+import { defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef } from '../common';
+import { useFocusOutsideRef } from '../common';
+var BasicDropdown = React.forwardRef(function (props, ref) {
+    var id = props.id, list = props.list, placeholder = props.placeholder, messageOnNoResults = props.messageOnNoResults, _a = props.itemsType, itemsType = _a === void 0 ? 'normal' : _a, action = props.action, actionLabel = props.actionLabel, actionVariant = props.actionVariant, actionIcon = props.actionIcon, actionLoading = props.actionLoading, actionDisabled = props.actionDisabled, pinTopItem = props.pinTopItem, _b = props.scrollable, scrollable = _b === void 0 ? true : _b, maxHeight = props.maxHeight, disabled = props.disabled, readOnly = props.readOnly, isButton = props.isButton, activeValidationMessage = props.activeValidationMessage, autofilledMessage = props.autofilledMessage, size = props.size, margin = props.margin, minWidth = props.minWidth, className = props.className, overflowTooltipPosition = props.overflowTooltipPosition, onBlur = props.onBlur, dataTestId = props.dataTestId, onSelect = props.onSelect, _c = props.textOverflow, textOverflow = _c === void 0 ? 'ellipsis' : _c, rest = __rest(props, ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"]);
+    var _d = React.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var _e = React.useState(), activeDescendant = _e[0], setActiveDescendant = _e[1];
+    var _f = React.useState(false), isLoading = _f[0], setIsLoading = _f[1];
+    var _g = React.useState(''), input = _g[0], setInput = _g[1];
+    var _h = React.useState(null), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(false), keyboardNavigated = _j[0], setKeyboardNavigated = _j[1];
+    var inputRef = React.useRef(null);
+    var styledFieldRef = useFocusVisibleRef([inputRef]);
+    var dropdownRef = React.useRef(null);
+    var resetDropdown = function () {
+        setIsOpen(false);
+        setFocused(null);
+    };
+    var containerRef = useFocusOutsideRef(resetDropdown, [dropdownRef]);
+    useClickOutsideRef(resetDropdown, [], containerRef);
+    var handleKeyDown = function (e) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            setIsOpen(!isOpen);
+            setKeyboardNavigated(true);
+        }
+    };
+    var handleValueSelect = function (values) {
+        var _a;
+        setInput(values.join(', '));
+        if (props.multiSelect === true) {
+            props.onSelect(values);
+        }
+        else if (props.multiSelect === false || props.multiSelect === undefined) {
+            props.onSelect(values[0]);
+        }
+        //don't close dropdown on item select if have custom action or multiselect
+        if (actionLabel || props.multiSelect)
+            return;
+        if (keyboardNavigated) {
+            (_a = styledFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: true });
+        }
+        setIsOpen(false);
+        setFocused(null);
+    };
+    React.useEffect(function () {
+        if (props.value) {
+            if (props.multiSelect) {
+                setInput(props.value.join(', '));
+            }
+            else if (props.multiSelect === false || props.multiSelect === undefined) {
+                setInput(props.value);
+            }
+        }
+        else {
+            setInput('');
+        }
+    }, [props.value, props.multiSelect]);
+    React.useEffect(function () {
+        setIsLoading(false);
+    }, [input]);
+    React.useEffect(function () {
+        !isOpen && setKeyboardNavigated(false);
+    }, [isOpen]);
+    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
+    var customSetIsOpen = function (isOpen) {
+        setIsOpen(isOpen);
+    };
+    var getDisplayItems = function () {
+        var values = input.split(',').map(function (val) { return val.trim(); });
+        var listDisplayLabels = list.filter(function (item) { return values.includes(item.value); }).map(function (l) { return l.displayLabel; });
+        return listDisplayLabels.join(', ');
+    };
+    var handleBlur = function (e) {
+        // @ts-ignore
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            onBlur && onBlur(e);
+        }
+    };
+    var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownContainer, { ref: containerRef, "aria-expanded": isOpen ? true : false, "aria-activedescendant": activeDescendant, "aria-controls": "".concat(id, "_dropdowncontent"), role: "listbox", "aria-multiselectable": props.multiSelect, isButton: isButton || false, className: size ? size : '', readOnly: readOnly, disabled: disabled, margin: margin, onBlur: handleBlur, minWidth: minWidth },
+            React.createElement(DropdownInputFieldStyles, __assign({ ref: styledFieldRef, className: cls, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) {
+                    var _a, _b;
+                    if (!readOnly && !disabled) {
+                        e.stopPropagation();
+                        setIsOpen(!isOpen);
+                        if (isOpen) {
+                            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                        }
+                        else {
+                            (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+                        }
+                    }
+                }, tabIndex: disabled || readOnly ? -1 : 0, disabled: disabled || false, readOnly: readOnly || false, isPlaceholder: !input, showValidationMessage: !!activeValidationMessage, onKeyDown: handleKeyDown, minWidth: minWidth }, rest),
+                React.createElement(DropdownInputField, { ref: inputRef, type: "search", ellipsis: textOverflow == 'ellipsis', id: id, "data-testid": dataTestId, readOnly: true, placeholder: placeholder, value: getDisplayItems(), className: size ? "".concat(size, " value") : 'value', tabIndex: -1, disabled: disabled || false }),
+                !isOpen ? React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: inputRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, getDisplayItems()) : null,
+                isLoading ? React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }) : null,
+                React.createElement("div", { className: 'icon dropdown-arrow' }, isOpen ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px", className: size ? size : '' }) :
+                    React.createElement(SystemIcons.ArrowDropDown, { size: "24px", className: size ? size : '' }))),
+            !readOnly && !disabled && (React.createElement(DropdownContent, { ref: dropdownRef, containerRef: containerRef, onActiveDescendantChanged: function (id) { return setActiveDescendant(id); }, customizationProps: {
+                    itemsType: itemsType,
+                    action: action !== null && action !== void 0 ? action : (function () {
+                    }),
+                    actionLabel: actionLabel,
+                    actionVariant: actionVariant,
+                    actionDisabled: actionDisabled,
+                    scrollable: scrollable,
+                    onValueUpdate: handleValueSelect,
+                    items: list,
+                    multiSelect: props.multiSelect,
+                    pinTopItem: pinTopItem,
+                    maxHeight: maxHeight,
+                    actionIcon: actionIcon,
+                    actionLoading: actionLoading,
+                }, ariaRolesType: "input", focused: focused, setFocused: setFocused, size: size !== null && size !== void 0 ? size : Size.Small, filter: '', isOpen: isOpen, setIsOpen: customSetIsOpen, messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', outline: keyboardNavigated, isButton: isButton || false, selectedValues: props.multiSelect ? props.value || [] : [props.value || ''], setSelectedValues: handleValueSelect, id: "".concat(id, "_dropdowncontent") }))),
+        activeValidationMessage && (React.createElement(ErrorMessage, null,
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, activeValidationMessage))),
+        autofilledMessage && (React.createElement(AutofilledMessage, null,
+            React.createElement(SystemIcons.Information, { color: COLORS.neutral_600 }),
+            React.createElement("span", null, autofilledMessage)))));
+});
+export default BasicDropdown;

package/dist/Dropdown/CommonStyling.d.ts

@@ -13,7 +13,6 @@ export declare const DropdownInputFieldStyles: import("styled-components").Style
     readOnly: boolean;
     showValidationMessage?: boolean | undefined;
     isPlaceholder?: boolean | undefined;
-    fontSize?: string | undefined;
     minWidth?: string | undefined;
 }, never>;
 export declare const DropdownContentButtonStyling: import("styled-components").FlattenSimpleInterpolation;