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

package/dist/ChipsInput/ChipInput.js

@@ -1,99 +1,128 @@
-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;
-};
-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 _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"];
+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 React libraries.
- */
-import * as React from 'react';
+ */
+import * as React from 'react';
+
 /**
  * Import custom components.
- */
-import { Size } from '../types';
-import { ChipInputContainer, ChipInputField } from './ChipInputField';
-var ChipInput = React.forwardRef(function (_a, ref) {
-    var values = _a.values, inputId = _a.inputId, variants = _a.variants, icon = _a.icon, placeholder = _a.placeholder, disabled = _a.disabled, altPlaceholder = _a.altPlaceholder, validationMessage = _a.validationMessage, onValueChange = _a.onValueChange, _b = _a.multiLine, multiLine = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, _d = _a.autoSave, autoSave = _d === void 0 ? false : _d, rest = __rest(_a, ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"]);
-    var _e = React.useState([]), chips = _e[0], setChips = _e[1];
-    var _f = React.useState(''), value = _f[0], setValue = _f[1];
-    var _g = React.useState([]), chipItems = _g[0], setChipItems = _g[1];
-    /**
-     * Sets initial values for the chips.
-     */
-    React.useEffect(function () {
-        // Let's add initial chip values
-        setChips(values);
-    }, [values]);
-    /**
-     * Set chip items for chip input field
-     * */
-    React.useEffect(function () {
-        setChipItems(chips.map(function (chip, index) { return ({
-            label: chip,
-            icon: icon,
-            disabled: false,
-            variant: variants && variants[index],
-        }); }));
-    }, [chips, variants, icon, size]);
-    var handleInputBlur = function (event) {
-        var _a, _b;
-        if (autoSave && value && !((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest("".concat(ChipInputContainer))) === null || _b === void 0 ? void 0 : _b.contains(event.relatedTarget))) {
-            setChips(__spreadArray(__spreadArray([], chips, true), [value], false));
-            onValueChange(__spreadArray(__spreadArray([], chips, true), [value], false));
-            setValue('');
-        }
-    };
-    /**
-     * Adds a chip to the chip list.
-     * @param event - Event handler from the key down event.
-     */
-    var handleInputKeyDown = function (event) {
-        if ((event.key === 'Enter' || event.key === ' ') && value) {
-            event.preventDefault();
-            setChips(__spreadArray(__spreadArray([], chips, true), [value], false));
-            onValueChange(__spreadArray(__spreadArray([], chips, true), [value], false));
-            setValue('');
-        }
-    };
-    /**
-     * Removes a specific chip from the chip list.
-     * @param index - Index of the chip that needs to be removed.
-     */
-    var onRemoveChip = function (index) {
-        var newChips = __spreadArray([], chips, true);
-        newChips.splice(index, 1);
-        setChips(newChips);
-        onValueChange(newChips);
-    };
-    /**
-     * Return Chip Input component.
-     */
-    return (React.createElement(ChipInputField, __assign({ inputId: inputId, ref: ref, items: chipItems, onRemoveItem: function (item, index) { return onRemoveChip(index); }, inputValue: value, onInputValueChange: function (value) { return setValue(value); }, onInputKeyDown: handleInputKeyDown, placeholder: placeholder, altPlaceholder: altPlaceholder, disabled: disabled, validationMessage: validationMessage, multiLine: multiLine, size: size, onBlur: handleInputBlur }, rest)));
-});
-export default ChipInput;
+ */
+import { Size } from '../types';
+import { ChipInputContainer, ChipInputField } from './ChipInputField';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var values = _ref.values,
+    inputId = _ref.inputId,
+    variants = _ref.variants,
+    icon = _ref.icon,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    altPlaceholder = _ref.altPlaceholder,
+    validationMessage = _ref.validationMessage,
+    onValueChange = _ref.onValueChange,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$autoSave = _ref.autoSave,
+    autoSave = _ref$autoSave === void 0 ? false : _ref$autoSave,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React.useState([]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    chips = _React$useState2[0],
+    setChips = _React$useState2[1];
+  var _React$useState3 = React.useState(''),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    value = _React$useState4[0],
+    setValue = _React$useState4[1];
+  var _React$useState5 = React.useState([]),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    chipItems = _React$useState6[0],
+    setChipItems = _React$useState6[1];
+
+  /**
+   * Sets initial values for the chips.
+   */
+  React.useEffect(function () {
+    // Let's add initial chip values
+    setChips(values);
+  }, [values]);
+
+  /**
+   * Set chip items for chip input field
+   * */
+  React.useEffect(function () {
+    setChipItems(chips.map(function (chip, index) {
+      return {
+        label: chip,
+        icon: icon,
+        disabled: false,
+        variant: variants && variants[index]
+      };
+    }));
+  }, [chips, variants, icon, size]);
+  var handleInputBlur = function handleInputBlur(event) {
+    var _event$target, _event$target$closest;
+    if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
+      setChips([].concat(_toConsumableArray(chips), [value]));
+      onValueChange([].concat(_toConsumableArray(chips), [value]));
+      setValue('');
+    }
+  };
+
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
+   */
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    if ((event.key === 'Enter' || event.key === ' ') && value) {
+      event.preventDefault();
+      setChips([].concat(_toConsumableArray(chips), [value]));
+      onValueChange([].concat(_toConsumableArray(chips), [value]));
+      setValue('');
+    }
+  };
+
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
+   */
+  var onRemoveChip = function onRemoveChip(index) {
+    var newChips = _toConsumableArray(chips);
+    newChips.splice(index, 1);
+    setChips(newChips);
+    onValueChange(newChips);
+  };
+
+  /**
+   * Return Chip Input component.
+   */
+  return /*#__PURE__*/_jsx(ChipInputField, _objectSpread({
+    inputId: inputId,
+    ref: ref,
+    items: chipItems,
+    onRemoveItem: function onRemoveItem(item, index) {
+      return onRemoveChip(index);
+    },
+    inputValue: value,
+    onInputValueChange: function onInputValueChange(value) {
+      return setValue(value);
+    },
+    onInputKeyDown: handleInputKeyDown,
+    placeholder: placeholder,
+    altPlaceholder: altPlaceholder,
+    disabled: disabled,
+    validationMessage: validationMessage,
+    multiLine: multiLine,
+    size: size,
+    onBlur: handleInputBlur
+  }, rest));
+});
+export default ChipInput;
+//# sourceMappingURL=ChipInput.js.map

package/dist/ChipsInput/ChipInputField.js

@@ -1,114 +1,195 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 React from 'react';
-import { Size, States } from '../types';
-import { InputChip } from '../Chips';
-import { ErrorMessage } from '../InputFields';
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
-import styled from 'styled-components';
-import { LoadingIndicator } from '../LoadingIndicator';
-import { useFocusVisibleRef } from '../common';
-import { IconButton } from '../Button';
-import { SystemIcons } from '../icons';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n"], ["\n  position: relative;\n"])));
-var Loading = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 20px;\n  width: 20px;\n"], ["\n  height: 20px;\n  width: 20px;\n"])));
-export var ChipInputBoundItems = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
-export var ChipInputContentContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"], ["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
-export var ChipInputEl = styled.input(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"], ["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var ChipInputContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"], ["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
-export var ChipInputField = React.forwardRef(function (_a, ref) {
-    var inputId = _a.inputId, items = _a.items, _b = _a.disabled, disabled = _b === void 0 ? false : _b, placeholder = _a.placeholder, altPlaceholder = _a.altPlaceholder, _c = _a.multiLine, multiLine = _c === void 0 ? true : _c, _d = _a.size, size = _d === void 0 ? Size.Medium : _d, validationMessage = _a.validationMessage, loading = _a.loading, onRemoveItem = _a.onRemoveItem, onInputValueChange = _a.onInputValueChange, onInputKeyDown = _a.onInputKeyDown, onActivationChange = _a.onActivationChange, inputValue = _a.inputValue, required = _a.required, onBlur = _a.onBlur, rest = __rest(_a, ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"]);
-    var containerRef = React.useRef(null);
-    var inputRef = useFocusVisibleRef([containerRef]);
-    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
-    /**
-     * Scroll container to last item on change
-     * */
-    React.useEffect(function () {
-        if (inputRef.current && document.activeElement === inputRef.current) {
-            inputRef.current.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-            });
-        }
-    }, [containerRef, inputRef, items]);
-    /**
-     * Remove last cheap on backspace
-     * */
-    var handleInputKeyDown = function (e) {
-        var _a;
-        if (e.key === 'Backspace' && !((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value) && !e.repeat && items.length > 0) {
-            onRemoveItem(items[items.length - 1], items.length - 1);
-        }
-        else {
-            onInputKeyDown(e);
-        }
-    };
-    var handleItemRemove = function (event, item, index) {
-        var _a;
-        onRemoveItem(item, index);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: event.detail !== 1 });
-    };
-    var handleInputClear = function (e) {
-        var _a;
-        onInputValueChange('');
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1 });
-    };
-    var handleContainerKeyDown = function (e) {
-        if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight'))
-            return;
-        var items = containerRef.current.querySelectorAll('[tabindex="0"]');
-        var currentIndex = Array.from(items).indexOf(e.target);
-        var direction = e.key === 'ArrowLeft' ? -1 : 1;
-        var item = items[currentIndex + direction];
-        item === null || item === void 0 ? void 0 : item.focus({ focusVisible: true });
-        onActivationChange && onActivationChange(false);
-    };
-    var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
-    return (React.createElement(Wrapper, { onBlur: onBlur },
-        React.createElement(ChipInputContainer, { "data-testid": "chip-input-container", ref: containerRef, onKeyDown: handleContainerKeyDown, onClick: function () { var _a; return !disabled && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus()); }, className: cls },
-            React.createElement(ChipInputContentContainer, null, items === null || items === void 0 ? void 0 :
-                items.map(function (chip, index) { return (React.createElement(InputChip, { key: "chip_".concat(index), icon: chip === null || chip === void 0 ? void 0 : chip.icon, size: size, disabled: chip.disabled || disabled, variant: chip.variant || States.Default, text: chip.label, onRemove: function (e) { return handleItemRemove(e, chip, index); } })); }),
-                React.createElement(ChipInputBoundItems, null,
-                    React.createElement(ChipInputEl, __assign({ ref: inputRef, type: "text", id: inputId, required: required, tabIndex: disabled ? -1 : 0, value: inputValue, onChange: function (e) { return onInputValueChange(e.target.value); }, onKeyDown: handleInputKeyDown, placeholder: (items === null || items === void 0 ? void 0 : items.length) === 0 ? placeholder : altPlaceholder || '', onClick: function (e) {
-                            e.stopPropagation();
-                            onActivationChange && onActivationChange(true);
-                        } }, rest)),
-                    inputValue && !disabled && (React.createElement(IconButton, { id: "clear-btn-".concat(inputId), dataTestId: "clear-btn-".concat(inputId), action: handleInputClear, ref: function (ref) {
-                            ref === null || ref === void 0 ? void 0 : ref.scrollIntoView({
-                                block: 'nearest',
-                                inline: 'nearest',
-                            });
-                        }, useTransparentBackground: true, shape: 'circular', style: { marginLeft: '-8px' }, focusOnClick: true, variant: 'secondary' },
-                        React.createElement(SystemIcons.Clear, null))),
-                    loading && (React.createElement(Loading, { className: size },
-                        React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 })))))),
-        validationMessage && (React.createElement(ErrorMessage, null,
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage)))));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+var _excluded = ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 React from 'react';
+import { Size, States } from '../types';
+import { InputChip } from '../Chips';
+import { ErrorMessage } from '../InputFields';
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
+import styled from 'styled-components';
+import { LoadingIndicator } from '../LoadingIndicator';
+import { useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n"])));
+export var ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
+export var ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
+export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var inputId = _ref.inputId,
+    items = _ref.items,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    placeholder = _ref.placeholder,
+    altPlaceholder = _ref.altPlaceholder,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    validationMessage = _ref.validationMessage,
+    loading = _ref.loading,
+    onRemoveItem = _ref.onRemoveItem,
+    onInputValueChange = _ref.onInputValueChange,
+    onInputKeyDown = _ref.onInputKeyDown,
+    onActivationChange = _ref.onActivationChange,
+    inputValue = _ref.inputValue,
+    required = _ref.required,
+    onBlur = _ref.onBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var containerRef = React.useRef(null);
+  var inputRef = useFocusVisibleRef([containerRef]);
+  React.useImperativeHandle(ref, function () {
+    return inputRef.current;
+  }, [inputRef]);
+
+  /**
+   * Scroll container to last item on change
+   * */
+  React.useEffect(function () {
+    if (inputRef.current && document.activeElement === inputRef.current) {
+      inputRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [containerRef, inputRef, items]);
+
+  /**
+   * Remove last cheap on backspace
+   * */
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    var _inputRef$current;
+    if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
+      onRemoveItem(items[items.length - 1], items.length - 1);
+    } else {
+      onInputKeyDown(e);
+    }
+  };
+  var handleItemRemove = function handleItemRemove(event, item, index) {
+    var _inputRef$current2;
+    onRemoveItem(item, index);
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
+      focusVisible: event.detail !== 1
+    });
+  };
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current3;
+    onInputValueChange('');
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+  var handleContainerKeyDown = function handleContainerKeyDown(e) {
+    if (!containerRef.current || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    var items = containerRef.current.querySelectorAll('[tabindex="0"]');
+    var currentIndex = Array.from(items).indexOf(e.target);
+    var direction = e.key === 'ArrowLeft' ? -1 : 1;
+    var item = items[currentIndex + direction];
+    item === null || item === void 0 ? void 0 : item.focus({
+      focusVisible: true
+    });
+    onActivationChange && onActivationChange(false);
+  };
+  var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    onBlur: onBlur,
+    children: [/*#__PURE__*/_jsx(ChipInputContainer, {
+      "data-testid": "chip-input-container",
+      ref: containerRef,
+      onKeyDown: handleContainerKeyDown,
+      onClick: function onClick() {
+        var _inputRef$current4;
+        return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
+      },
+      className: cls,
+      children: /*#__PURE__*/_jsxs(ChipInputContentContainer, {
+        children: [items === null || items === void 0 ? void 0 : items.map(function (chip, index) {
+          return /*#__PURE__*/_jsx(InputChip, {
+            icon: chip === null || chip === void 0 ? void 0 : chip.icon,
+            size: size,
+            disabled: chip.disabled || disabled,
+            variant: chip.variant || States.Default,
+            text: chip.label,
+            onRemove: function onRemove(e) {
+              return handleItemRemove(e, chip, index);
+            }
+          }, "chip_".concat(index));
+        }), /*#__PURE__*/_jsxs(ChipInputBoundItems, {
+          children: [/*#__PURE__*/_jsx(ChipInputEl, _objectSpread({
+            ref: inputRef,
+            type: "text",
+            id: inputId,
+            required: required,
+            tabIndex: disabled ? -1 : 0,
+            value: inputValue,
+            onChange: function onChange(e) {
+              return onInputValueChange(e.target.value);
+            },
+            onKeyDown: handleInputKeyDown,
+            placeholder: (items === null || items === void 0 ? void 0 : items.length) === 0 ? placeholder : altPlaceholder || '',
+            onClick: function onClick(e) {
+              e.stopPropagation();
+              onActivationChange && onActivationChange(true);
+            }
+          }, rest)), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+            id: "clear-btn-".concat(inputId),
+            dataTestId: "clear-btn-".concat(inputId),
+            action: handleInputClear,
+            ref: function ref(_ref2) {
+              _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+              });
+            },
+            useTransparentBackground: true,
+            shape: 'circular',
+            style: {
+              marginLeft: '-8px'
+            },
+            focusOnClick: true,
+            variant: 'secondary',
+            children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
+          }), loading && /*#__PURE__*/_jsx(Loading, {
+            className: size,
+            children: /*#__PURE__*/_jsx(LoadingIndicator, {
+              size: Size.Small,
+              color: COLORS.neutral_600
+            })
+          })]
+        })]
+      })
+    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(SystemIcons.TechnicalWarning, {
+        color: COLORS.critical_400
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+});
+ChipInputField.propTypes = {
+  inputId: _pt.string.isRequired,
+  items: _pt.array.isRequired,
+  disabled: _pt.bool,
+  placeholder: _pt.string,
+  altPlaceholder: _pt.string,
+  multiLine: _pt.bool,
+  loading: _pt.bool,
+  required: _pt.bool,
+  validationMessage: _pt.string,
+  onRemoveItem: _pt.func.isRequired,
+  inputValue: _pt.string.isRequired,
+  onInputValueChange: _pt.func.isRequired,
+  onInputKeyDown: _pt.func.isRequired,
+  onActivationChange: _pt.func
+};
+//# sourceMappingURL=ChipInputField.js.map

package/dist/ChipsInput/ChipInputTypes.js

@@ -1 +1,2 @@
-export {};
+export {};
+//# sourceMappingURL=ChipInputTypes.js.map

package/dist/ChipsInput/index.js

@@ -1,2 +1,3 @@
-export * from './ChipDropdownInput';
-export * from './ChipInputField';
+export * from './ChipDropdownInput';
+export * from './ChipInputField';
+//# sourceMappingURL=index.js.map

package/dist/Dropdown/BasicDropdown.d.ts

@@ -96,7 +96,7 @@ export interface BasicDropdownCommonProps extends Testable, Omit<React.HTMLAttri
    */
     overflowTooltipPosition?: 'top' | 'bottom';
 }
-export declare type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
+export type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
     /** Required. If this flag is set then user can select multiple items. */
     multiSelect: true;
     /** Required. Selected items. */
@@ -104,7 +104,7 @@ export declare type BasicDropdownMultiSelectProps = BasicDropdownCommonProps & {
     /** Required. Callback handler to call when user selects one of the items. Provides all selected items after last change. */
     onSelect: (value: string[]) => void;
 };
-export declare type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
+export type BasucDropdownSingleSelectProps = BasicDropdownCommonProps & {
     /** Required. If this flag is set then user can select multiple items. */
     multiSelect?: false;
     /** Required. Selected item. */
@@ -112,6 +112,6 @@ export declare type BasucDropdownSingleSelectProps = BasicDropdownCommonProps &
     /** Required. Callback handler to call when user selects one of the items. Provides value of selected item. */
     onSelect: (value: string) => void;
 };
-export declare type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
+export type BasicDropdownProps = BasucDropdownSingleSelectProps | BasicDropdownMultiSelectProps;
 declare const BasicDropdown: React.ForwardRefExoticComponent<BasicDropdownProps & React.RefAttributes<unknown>>;
 export default BasicDropdown;