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

package/dist/Dropdown/DropdownFilter.d.ts

@@ -2,22 +2,39 @@ import * as React from 'react';
 import { DropdownItem } from './DropdownContent';
 import { Size, Testable } from '../types';
 export interface DropdownFilterProps extends Testable, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onSelect' | 'size' | 'list' | 'autoComplete' | 'type' | 'placeholder' | 'onKeyDown' | 'value' | 'onChange' | 'required' | 'tabIndex' | 'disabled' | 'readOnly'> {
+    /** Required. List of items to show in the dropdown. */
     list: DropdownItem[];
+    /** Optional. Placeholder text to show when there is no input and no item was selected */
     placeholder?: string;
+    /** Optional. Currently selected item */
     value?: string;
+    /** Optional. Handler to be called when user selects one of the items. */
     onSelect?: (value: string) => void;
+    /** Optional. Handler to be called when user changes text in the input. */
     onInputChange?: (input: string) => void;
+    /** Optional. If set, then HTML 'required' attribute will be set for the input field */
     required?: boolean;
+    /** Optional. If set, then user will not be able to interact with the input field */
     disabled?: boolean;
+    /** Optional. If set, then 'readonly' HTML attribute will be set to the input field */
     readOnly?: boolean;
+    /** Optional. If set, then loading indicator will be shown in the input field. */
     loading?: boolean;
+    /** Optional. If set, then items in the dropdown will not be filtered depending on the user input */
     disableFiltering?: boolean;
+    /** Optional. If none of the items fits input, then there will be a message shown in the dropdown. */
     messageOnNoResults?: string;
+    /** Optional. Validation error message to be shown under the input field. */
     activeValidationMessage?: string;
+    /** Optional. Informal message to show under the input field. */
     autofilledMessage?: string;
+    /** Optional. Size of the input field */
     size?: Size.Small | Size.Medium;
-    buttonFontSize?: string;
+    /** Optional. Position of the tooltip to show when input is overflowing the input field. */
+    overflowTooltipPosition?: 'top' | 'bottom';
+    /** Optional. Margin of the dropdown container items */
     margin?: string;
+    /** Optional. Sets if dropdown container is scrollable */
     scrollable?: boolean;
 }
 declare const DropdownFilter: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;

package/dist/Dropdown/DropdownFilter.js

@@ -1,318 +1,161 @@
-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", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "margin", "loading", "onFocus", "overflowTooltipPosition", "onBlur", "dataTestId"];
-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 { DropdownInputFieldStyles, DropdownContainer, DropdownInputField } from './CommonStyling';
-import DropdownContent from './DropdownContent';
-import { Size } from '../types';
-import { AutofilledMessage, ErrorMessage } from '../InputFields';
-import TooltipOverflow from '../Tooltips/TooltipOverflow';
-import { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';
-import { IconButton } from '../Button';
-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 DropdownFilter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var id = _ref.id,
-    list = _ref.list,
-    placeholder = _ref.placeholder,
-    onSelect = _ref.onSelect,
-    onInputChange = _ref.onInputChange,
-    value = _ref.value,
-    required = _ref.required,
-    messageOnNoResults = _ref.messageOnNoResults,
-    disabled = _ref.disabled,
-    readOnly = _ref.readOnly,
-    scrollable = _ref.scrollable,
-    activeValidationMessage = _ref.activeValidationMessage,
-    autofilledMessage = _ref.autofilledMessage,
-    size = _ref.size,
-    disableFiltering = _ref.disableFiltering,
-    margin = _ref.margin,
-    loading = _ref.loading,
-    _onFocus = _ref.onFocus,
-    overflowTooltipPosition = _ref.overflowTooltipPosition,
-    _onBlur = _ref.onBlur,
-    dataTestId = _ref.dataTestId,
-    rest = _objectWithoutProperties(_ref, _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),
-    input = _React$useState4[0],
-    setInput = _React$useState4[1];
-  var _React$useState5 = React.useState(),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    activeDescendant = _React$useState6[0],
-    setActiveDescendant = _React$useState6[1];
-  var _React$useState7 = React.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    restartFilter = _React$useState8[0],
-    setRestartFilter = _React$useState8[1];
-  var _React$useState9 = React.useState(),
-    _React$useState10 = _slicedToArray(_React$useState9, 2),
-    selectedItem = _React$useState10[0],
-    setSelectedItem = _React$useState10[1];
-  var _React$useState11 = React.useState([]),
-    _React$useState12 = _slicedToArray(_React$useState11, 2),
-    selectedValues = _React$useState12[0],
-    setSelectedValues = _React$useState12[1];
-  var _React$useState13 = React.useState(null),
-    _React$useState14 = _slicedToArray(_React$useState13, 2),
-    focused = _React$useState14[0],
-    setFocused = _React$useState14[1];
-  var _React$useState15 = React.useState(false),
-    _React$useState16 = _slicedToArray(_React$useState15, 2),
-    inputFocused = _React$useState16[0],
-    setInputFocused = _React$useState16[1];
-  var _React$useState17 = React.useState(true),
-    _React$useState18 = _slicedToArray(_React$useState17, 2),
-    init = _React$useState18[0],
-    setInit = _React$useState18[1];
-  var styledFieldRef = useFocusVisibleRef();
-  var inputRef = useFocusVisibleRef([styledFieldRef]);
-  var clearButtonRef = React.useRef(null);
-  useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
-  React.useImperativeHandle(ref, function () {
-    return inputRef.current;
-  }, [inputRef]);
-  var containerRef = useClickOutsideRef(function () {
-    return setIsOpen(false);
-  }, [], useFocusOutsideRef(function () {
-    return setIsOpen(false);
-  }));
-  var handleInputKeyDown = function handleInputKeyDown(e) {
-    if (e.key === 'Esc' || e.key === 'Escape') {
-      e.preventDefault();
-    }
-    if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
-      e.preventDefault();
-      if (!isOpen) {
-        setIsOpen(true);
-      }
-    }
-  };
-  React.useEffect(function () {
-    setInit(true);
-    setSelectedValues(!!value ? [value] : []);
-  }, [value]);
-  React.useEffect(function () {
-    if (selectedValues !== null && selectedValues !== void 0 && selectedValues.length) {
-      var _ref2, _item$displayLabel;
-      var val = selectedValues[0];
-      var item = list.find(function (a) {
-        return a.value === val;
-      });
-      setSelectedItem(item);
-      setInput((_ref2 = (_item$displayLabel = item === null || item === void 0 ? void 0 : item.displayLabel) !== null && _item$displayLabel !== void 0 ? _item$displayLabel : item === null || item === void 0 ? void 0 : item.value) !== null && _ref2 !== void 0 ? _ref2 : '');
-      onSelect && !init && onSelect(val);
-    } else {
-      setSelectedItem(undefined);
-      onSelect && !init && onSelect('');
-      setInput('');
-    }
-  }, [selectedValues]);
-  React.useEffect(function () {
-    if (!isOpen) {
-      if (!!selectedItem) {
-        var _ref3, _selectedItem$display;
-        setInput((_ref3 = (_selectedItem$display = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.displayLabel) !== null && _selectedItem$display !== void 0 ? _selectedItem$display : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== null && _ref3 !== void 0 ? _ref3 : '');
-      } else {
-        setInput('');
-      }
-    }
-    setRestartFilter(true);
-  }, [isOpen, selectedItem]);
-  var handleInputClear = function handleInputClear(e) {
-    var _inputRef$current;
-    setInput('');
-    setSelectedValues([]);
-    onSelect && onSelect('');
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
-      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
-    });
-  };
-  var renderInput = function renderInput() {
-    return /*#__PURE__*/_jsxs(DropdownInputFieldStyles, {
-      ref: styledFieldRef,
-      className: size ? size : '',
-      onClick: function onClick(e) {
-        if (!readOnly && !disabled) {
-          e.stopPropagation();
-          setIsOpen(!isOpen);
-          if (isOpen) {
-            var _inputRef$current2;
-            (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.blur();
-          } else {
-            var _inputRef$current3;
-            (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-          }
-        }
-      },
-      disabled: disabled || false,
-      readOnly: readOnly || false,
-      isPlaceholder: !input,
-      showValidationMessage: !!activeValidationMessage,
-      onMouseDown: defaultOnMouseDownHandler,
-      "data-testid": "otherdiv_".concat(id),
-      children: [/*#__PURE__*/_jsx(DropdownInputField, _objectSpread({
-        id: id,
-        ref: inputRef,
-        autoComplete: 'off-' + Math.floor(Math.random() * 999999999999),
-        type: "search",
-        placeholder: inputFocused ? '' : placeholder,
-        onKeyDown: handleInputKeyDown,
-        ellipsis: true,
-        value: input || '',
-        onChange: function onChange(e) {
-          if (!e.target.value) {
-            setSelectedValues([]);
-          }
-          if (!readOnly && !disabled && e.target.value !== input) {
-            setRestartFilter(false);
-            setIsOpen(true);
-            setInput(e.target.value);
-            if (onInputChange) {
-              onInputChange(e.target.value || '');
-            }
-          }
-        },
-        onFocus: function onFocus(e) {
-          setInputFocused(true);
-          _onFocus && _onFocus(e);
-        },
-        onBlur: function onBlur(e) {
-          setInputFocused(false);
-          _onBlur && _onBlur(e);
-        },
-        required: required,
-        tabIndex: disabled || readOnly ? -1 : 0,
-        disabled: disabled || false,
-        "data-testid": dataTestId
-      }, rest)), !isOpen ? /*#__PURE__*/_jsx(TooltipOverflow, {
-        position: overflowTooltipPosition,
-        input: inputRef,
-        withArrow: true,
-        maxWidth: "100%",
-        size: size,
-        align: "end",
-        children: input
-      }) : null, input && !readOnly && !disabled && !loading && /*#__PURE__*/_jsx(IconButton, {
-        action: handleInputClear,
-        ref: clearButtonRef,
-        useTransparentBackground: true,
-        shape: 'circular',
-        style: {
-          marginLeft: '-4px'
-        },
-        variant: 'secondary',
-        children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
-      }), !disabled && !readOnly && loading && /*#__PURE__*/_jsx("div", {
-        style: {
-          marginLeft: '-4xp'
-        },
-        children: /*#__PURE__*/_jsx(LoadingIndicator, {
-          size: Size.Small,
-          color: COLORS.neutral_600
-        })
-      }), /*#__PURE__*/_jsx("div", {
-        className: 'dropdown-arrow',
-        children: isOpen && !readOnly && !disabled ? /*#__PURE__*/_jsx(SystemIcons.ArrowDropUp, {
-          size: "24px",
-          className: size ? size : ''
-        }) : /*#__PURE__*/_jsx(SystemIcons.ArrowDropDown, {
-          size: "24px",
-          className: size ? size : ''
-        })
-      })]
-    });
-  };
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(DropdownContainer, {
-      ref: containerRef,
-      role: "combobox",
-      "aria-multiselectable": true,
-      "aria-controls": "".concat(id, "_dropdowncontent"),
-      "aria-activedescendant": activeDescendant,
-      "aria-expanded": isOpen,
-      disabled: disabled,
-      isButton: false,
-      readOnly: readOnly,
-      className: size ? size : '',
-      margin: margin,
-      children: [renderInput(), !readOnly && !disabled && /*#__PURE__*/_jsx(DropdownContent, {
-        containerRef: containerRef,
-        isOpen: isOpen && !loading,
-        messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
-        selectedValues: selectedValues,
-        setSelectedValues: setSelectedValues,
-        size: size !== null && size !== void 0 ? size : Size.Small,
-        onActiveDescendantChanged: function onActiveDescendantChanged(e) {
-          return setActiveDescendant(e);
-        },
-        focused: focused,
-        ariaRolesType: "input",
-        setFocused: setFocused,
-        outline: false,
-        customizationProps: {
-          itemsType: 'normal',
-          scrollable: scrollable,
-          multiSelect: false,
-          action: function action() {},
-          onValueUpdate: function onValueUpdate(values) {
-            setRestartFilter(true);
-            setInit(false);
-          },
-          items: list
-        },
-        filter: !disableFiltering && !restartFilter ? input || '' : '',
-        setIsOpen: setIsOpen,
-        isButton: false,
-        id: "".concat(id, "_dropdowncontent")
-      })]
-    }), activeValidationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
-      className: size || '',
-      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
-        color: COLORS.critical_400
-      }), /*#__PURE__*/_jsx("span", {
-        children: activeValidationMessage
-      })]
-    }), autofilledMessage && /*#__PURE__*/_jsxs(AutofilledMessage, {
-      className: size || '',
-      children: [/*#__PURE__*/_jsx(SystemIcons.Information, {
-        color: COLORS.neutral_600
-      }), /*#__PURE__*/_jsx("span", {
-        children: autofilledMessage
-      })]
-    })]
-  });
-});
-DropdownFilter.propTypes = {
-  list: _pt.array.isRequired,
-  placeholder: _pt.string,
-  value: _pt.string,
-  onSelect: _pt.func,
-  onInputChange: _pt.func,
-  required: _pt.bool,
-  disabled: _pt.bool,
-  readOnly: _pt.bool,
-  loading: _pt.bool,
-  disableFiltering: _pt.bool,
-  messageOnNoResults: _pt.string,
-  activeValidationMessage: _pt.string,
-  autofilledMessage: _pt.string,
-  overflowTooltipPosition: _pt.oneOf(['top', 'bottom']),
-  margin: _pt.string,
-  scrollable: _pt.bool
-};
-export default DropdownFilter;
-//# sourceMappingURL=DropdownFilter.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 { DropdownInputFieldStyles, DropdownContainer, DropdownInputField } from './CommonStyling';
+import DropdownContent from './DropdownContent';
+import { Size } from '../types';
+import { AutofilledMessage, ErrorMessage } from '../InputFields';
+import TooltipOverflow from '../Tooltips/TooltipOverflow';
+import { defaultOnMouseDownHandler, useActionWithin, useClickOutsideRef, useFocusOutsideRef, useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+var DropdownFilter = React.forwardRef(function (_a, ref) {
+    var id = _a.id, list = _a.list, placeholder = _a.placeholder, onSelect = _a.onSelect, onInputChange = _a.onInputChange, value = _a.value, required = _a.required, messageOnNoResults = _a.messageOnNoResults, disabled = _a.disabled, readOnly = _a.readOnly, scrollable = _a.scrollable, activeValidationMessage = _a.activeValidationMessage, autofilledMessage = _a.autofilledMessage, size = _a.size, disableFiltering = _a.disableFiltering, margin = _a.margin, loading = _a.loading, onFocus = _a.onFocus, overflowTooltipPosition = _a.overflowTooltipPosition, onBlur = _a.onBlur, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "list", "placeholder", "onSelect", "onInputChange", "value", "required", "messageOnNoResults", "disabled", "readOnly", "scrollable", "activeValidationMessage", "autofilledMessage", "size", "disableFiltering", "margin", "loading", "onFocus", "overflowTooltipPosition", "onBlur", "dataTestId"]);
+    var _b = React.useState(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = React.useState(), input = _c[0], setInput = _c[1];
+    var _d = React.useState(), activeDescendant = _d[0], setActiveDescendant = _d[1];
+    var _e = React.useState(false), restartFilter = _e[0], setRestartFilter = _e[1];
+    var _f = React.useState(), selectedItem = _f[0], setSelectedItem = _f[1];
+    var _g = React.useState([]), selectedValues = _g[0], setSelectedValues = _g[1];
+    var _h = React.useState(null), focused = _h[0], setFocused = _h[1];
+    var _j = React.useState(false), inputFocused = _j[0], setInputFocused = _j[1];
+    var _k = React.useState(true), init = _k[0], setInit = _k[1];
+    var styledFieldRef = useFocusVisibleRef();
+    var inputRef = useFocusVisibleRef([styledFieldRef]);
+    var clearButtonRef = React.useRef(null);
+    useActionWithin(styledFieldRef, input && !readOnly && !disabled ? [clearButtonRef] : []);
+    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
+    var containerRef = useClickOutsideRef(function () { return setIsOpen(false); }, [], useFocusOutsideRef(function () { return setIsOpen(false); }));
+    var handleInputKeyDown = function (e) {
+        if (e.key === 'Esc' || e.key === 'Escape') {
+            e.preventDefault();
+        }
+        if (e.key === 'ArrowDown' || e.key === 'Down' || e.key === 'ArrowUp' || e.key === 'Up') {
+            e.preventDefault();
+            if (!isOpen) {
+                setIsOpen(true);
+            }
+        }
+    };
+    React.useEffect(function () {
+        setInit(true);
+        setSelectedValues(!!value ? [value] : []);
+    }, [value]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.length) {
+            var val_1 = selectedValues[0];
+            var item = list.find(function (a) { return a.value === val_1; });
+            setSelectedItem(item);
+            setInput((_b = (_a = item === null || item === void 0 ? void 0 : item.displayLabel) !== null && _a !== void 0 ? _a : item === null || item === void 0 ? void 0 : item.value) !== null && _b !== void 0 ? _b : '');
+            onSelect && !init && onSelect(val_1);
+        }
+        else {
+            setSelectedItem(undefined);
+            onSelect && !init && onSelect('');
+            setInput('');
+        }
+    }, [selectedValues]);
+    React.useEffect(function () {
+        var _a, _b;
+        if (!isOpen) {
+            if (!!selectedItem) {
+                setInput((_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.displayLabel) !== null && _a !== void 0 ? _a : selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value) !== null && _b !== void 0 ? _b : '');
+            }
+            else {
+                setInput('');
+            }
+        }
+        setRestartFilter(true);
+    }, [isOpen, selectedItem]);
+    var handleInputClear = function (e) {
+        var _a;
+        setInput('');
+        setSelectedValues([]);
+        onSelect && onSelect('');
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1 });
+    };
+    var renderInput = function () {
+        return (React.createElement(DropdownInputFieldStyles, { ref: styledFieldRef, className: size ? size : '', 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();
+                    }
+                }
+            }, disabled: disabled || false, readOnly: readOnly || false, isPlaceholder: !input, showValidationMessage: !!activeValidationMessage, onMouseDown: defaultOnMouseDownHandler, "data-testid": "otherdiv_".concat(id) },
+            React.createElement(DropdownInputField, __assign({ id: id, ref: inputRef, autoComplete: 'off-' + Math.floor(Math.random() * 999999999999), type: "search", placeholder: inputFocused ? '' : placeholder, onKeyDown: handleInputKeyDown, ellipsis: true, value: input || '', onChange: function (e) {
+                    if (!e.target.value) {
+                        setSelectedValues([]);
+                    }
+                    if (!readOnly && !disabled && e.target.value !== input) {
+                        setRestartFilter(false);
+                        setIsOpen(true);
+                        setInput(e.target.value);
+                        if (onInputChange) {
+                            onInputChange(e.target.value || '');
+                        }
+                    }
+                }, onFocus: function (e) {
+                    setInputFocused(true);
+                    onFocus && onFocus(e);
+                }, onBlur: function (e) {
+                    setInputFocused(false);
+                    onBlur && onBlur(e);
+                }, required: required, tabIndex: disabled || readOnly ? -1 : 0, disabled: disabled || false, "data-testid": dataTestId }, rest)),
+            !isOpen ? React.createElement(TooltipOverflow, { position: overflowTooltipPosition, input: inputRef, withArrow: true, maxWidth: "100%", size: size, align: 'end' }, input) : null,
+            input && !readOnly && !disabled && !loading && (React.createElement(IconButton, { action: handleInputClear, ref: clearButtonRef, useTransparentBackground: true, shape: 'circular', style: { marginLeft: '-4px' }, variant: 'secondary' },
+                React.createElement(SystemIcons.Clear, null))),
+            !disabled && !readOnly && loading && (React.createElement("div", { style: { marginLeft: '-4xp' } },
+                React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }))),
+            React.createElement("div", { className: 'dropdown-arrow' }, isOpen && !readOnly && !disabled ? React.createElement(SystemIcons.ArrowDropUp, { size: "24px", className: size ? size : '' }) : React.createElement(SystemIcons.ArrowDropDown, { size: "24px", className: size ? size : '' }))));
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DropdownContainer, { ref: containerRef, role: "combobox", "aria-multiselectable": true, "aria-controls": "".concat(id, "_dropdowncontent"), "aria-activedescendant": activeDescendant, "aria-expanded": isOpen, disabled: disabled, isButton: false, readOnly: readOnly, className: size ? size : '', margin: margin },
+            renderInput(),
+            !readOnly && !disabled && (React.createElement(DropdownContent, { containerRef: containerRef, isOpen: isOpen && !loading, messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', selectedValues: selectedValues, setSelectedValues: setSelectedValues, size: size !== null && size !== void 0 ? size : Size.Small, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, focused: focused, ariaRolesType: "input", setFocused: setFocused, outline: false, customizationProps: {
+                    itemsType: 'normal',
+                    scrollable: scrollable,
+                    multiSelect: false,
+                    action: function () { },
+                    onValueUpdate: function (values) {
+                        setRestartFilter(true);
+                        setInit(false);
+                    },
+                    items: list,
+                }, filter: !disableFiltering && !restartFilter ? input || '' : '', setIsOpen: setIsOpen, isButton: false, id: "".concat(id, "_dropdowncontent") }))),
+        activeValidationMessage && (React.createElement(ErrorMessage, { className: size || '' },
+            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
+            React.createElement("span", null, activeValidationMessage))),
+        autofilledMessage && (React.createElement(AutofilledMessage, { className: size || '' },
+            React.createElement(SystemIcons.Information, { color: COLORS.neutral_600 }),
+            React.createElement("span", null, autofilledMessage)))));
+});
+export default DropdownFilter;

package/dist/Dropdown/index.js

@@ -1,9 +1,8 @@
-export { default as DropdownContent } from './DropdownContent';
-export * from './DropdownContent';
-export { default as DropdownButton } from './DropdownButton';
-export * from './DropdownButton';
-export { default as DropdownFilter } from './DropdownFilter';
-export * from './DropdownFilter';
-export { default as BasicDropdown } from './BasicDropdown';
-export * from './BasicDropdown';
-//# sourceMappingURL=index.js.map
+export { default as DropdownContent } from './DropdownContent';
+export * from './DropdownContent';
+export { default as DropdownButton } from './DropdownButton';
+export * from './DropdownButton';
+export { default as DropdownFilter } from './DropdownFilter';
+export * from './DropdownFilter';
+export { default as BasicDropdown } from './BasicDropdown';
+export * from './BasicDropdown';

package/dist/Footer/Components/FooterBottomLinks.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 interface Link {
     label: string;
     to: string;
@@ -8,5 +8,5 @@ interface FooterLinkProps {
     bottomLinks?: Link[];
     copyrightText?: string;
 }
-declare const FooterBottomLinks: ({ bottomLinks, copyrightText }: FooterLinkProps) => JSX.Element;
+declare const FooterBottomLinks: ({ bottomLinks, copyrightText }: FooterLinkProps) => React.JSX.Element;
 export default FooterBottomLinks;