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

package/dist/src/Chips/ActionChip.js

@@ -0,0 +1,45 @@
+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 libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom styles.
+ */
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
+import { defaultOnMouseDownHandler } from '../common';
+var ActionChip = function (_a) {
+    var icon = _a.icon, text = _a.text, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, disabled = _a.disabled, onClick = _a.onClick, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["icon", "text", "size", "disabled", "onClick", "className", "dataTestId"]);
+    /**
+     * Return Action Chip component.
+     */
+    return (React.createElement(ChipContainer, __assign({ className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " outline ").concat(!!onClick ? 'interactive' : '', " ").concat(className || ''), onClick: function () { return !disabled && onClick && onClick(); }, onMouseDown: defaultOnMouseDownHandler, "data-testid": dataTestId, role: "button", onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick(); }, tabIndex: disabled || !onClick ? -1 : 0 }, rest),
+        React.createElement(ChipContentContainer, null,
+            React.createElement(ChipContent, null,
+                icon &&
+                    React.createElement("div", { className: 'chip-icon icon-left' }, icon),
+                React.createElement("div", null, text)))));
+};
+export default ActionChip;

package/dist/src/Chips/ChipStyles.js

@@ -0,0 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+/**
+ * Import custom style properties.
+ */
+import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
+export var ChipContentContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"], ["\n  display: flex;\n  align-items: center;\n  min-height: 48px;\n  width: max-content;\n"])));
+export var ChipContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n"], ["\n  ", "\n\n  position: relative;\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  min-height: 24px;\n  box-sizing: border-box;\n  border-radius: 24px;\n  padding: 4px 12px;\n\n  .chip-icon {\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n\n    svg {\n      height: 16px;\n      width: 16px;\n    }\n  }\n\n  .icon-left {\n    margin-left: -4px;\n  }\n\n  .icon-right {\n    margin-right: -4px;\n  }\n\n  .action-right {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 48px;\n    width: 48px;\n    right: -8px;\n  }\n\n  &.with-action-right {\n    position: relative;\n    padding-right: 28px;\n  }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
+export var ChipContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"], ["\n  display: inline-block;\n  cursor: pointer;\n  position: relative;\n\n  &.medium {\n    ", " {\n      gap: 6px;\n      padding: 10px 16px;\n\n      ", "\n      .chip-icon {\n        height: 20px;\n        width: 20px;\n\n        svg {\n          height: 20px;\n          width: 20px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 38px;\n\n      .action-right {\n        right: -2px;\n      }\n    }\n  }\n\n  &.large {\n    ", " {\n      gap: 8px;\n      padding: 12px 20px;\n\n      ", "\n      .chip-icon {\n        height: 24px;\n        width: 24px;\n\n        svg {\n          height: 24px;\n          width: 24px;\n        }\n      }\n    }\n\n    .with-action-right {\n      padding-right: 48px;\n\n      .action-right {\n        right: 4px;\n      }\n    }\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.default {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.interactive.default:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n    }\n  }\n\n  &.outline {\n    color: ", ";\n\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n    }\n  }\n\n  &.interactive.outline:hover:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.outline:active:not(.action-within) {\n    ", " {\n      background-color: ", ";\n      border: 2px solid ", ";\n      color: ", ";\n      box-shadow: none;\n    }\n  }\n\n  //account for border\n  &.small.outline:not(.disabled) {\n    ", " {\n      padding: 2px 10px;\n    }\n  }\n\n  &.medium.outline:not(.disabled) {\n    ", " {\n      padding: 8px 14px;\n    }\n  }\n\n  &.large.outline:not(.disabled) {\n    ", " {\n      padding: 10px 18px;\n    }\n  }\n\n  &.invalid {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:hover:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  &.interactive.invalid:active:not(.action-within) {\n    ", " {\n      background: ", ";\n      color: ", ";\n    }\n  }\n\n  .action-right:focus {\n    ", "\n  }\n\n  .action-right:hover .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right:active .chip-icon {\n    background-color: ", ";\n  }\n\n  .action-right.disabled .chip-icon {\n    background-color: transparent;\n    color: ", ";\n  }\n\n  &.invalid {\n    .action-right:hover .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right:active .chip-icon {\n      background-color: ", ";\n      color: ", ";\n    }\n\n    .action-right.disabled .chip-icon {\n      background-color: transparent;\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    ", " {\n      pointer-events: none;\n    }\n\n    ", " {\n      border: none !important;\n      background-color: ", " !important;\n      color: ", " !important;\n    }\n  }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/Chips/ChipTypes.d.ts

@@ -70,4 +70,4 @@ export interface ChipValue extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
     /** Size of the chip. */
     size?: Size;
 }
-export type ChipVariant = States.Default | States.Invalid;
+export declare type ChipVariant = States.Default | States.Invalid;

package/dist/src/Chips/ChipTypes.js

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

package/dist/src/Chips/ChoiceChips.js

@@ -0,0 +1,70 @@
+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 libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
+import { defaultOnMouseDownHandler } from '../common';
+import { Size } from '../types';
+var ChoiceChips = function (_a) {
+    var selected = _a.selected, disabled = _a.disabled, onClick = _a.onClick, values = _a.values, dataTestId = _a.dataTestId;
+    /**
+     * Globally used variables within the component.
+     */
+    var _b = React.useState(''), selectedChip = _b[0], setSelectedChip = _b[1];
+    /**
+     * Set the selected value for the chip.
+     */
+    React.useEffect(function () {
+        setSelectedChip(selected);
+    }, [selected]);
+    /**
+     * Sets selected chip and fires an event to parent component.
+     * @param value - Chip which was selected.
+     */
+    var onSelectChip = function (value) {
+        // Update selected chip
+        setSelectedChip(value.value);
+        // Fire the event
+        onClick && onClick(value);
+    };
+    var handleKeyDown = function (e, value) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            onSelectChip(value);
+        }
+    };
+    /**
+     * Return Choice Chip component.
+     */
+    return (React.createElement("div", { role: "radiogroup", "data-testid": dataTestId }, values.map(function (item) {
+        var value = item.value, _a = item.size, size = _a === void 0 ? Size.Medium : _a, label = item.label, className = item.className, rest = __rest(item, ["value", "size", "label", "className"]);
+        return (React.createElement(ChipContainer, __assign({ role: "radio", key: value, tabIndex: disabled ? -1 : 0, className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value ? 'default' : 'outline', " interactive ").concat(className || ''), onMouseDown: defaultOnMouseDownHandler, onClick: function () { return !disabled && onSelectChip(item); }, onKeyDown: function (e) { return !disabled && handleKeyDown(e, item); } }, rest),
+            React.createElement(ChipContentContainer, null,
+                React.createElement(ChipContent, null, label))));
+    })));
+};
+export default ChoiceChips;

package/dist/src/Chips/FilterChip.js

@@ -0,0 +1,49 @@
+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 libraries.
+ */
+import * as React from 'react';
+import { Size } from '../types';
+/**
+ * Import custom components.
+ */
+import { SystemIcons } from '../icons/index';
+/**
+ * Import custom styles.
+ */
+import { ChipContent, ChipContentContainer, ChipContainer } from './ChipStyles';
+import { defaultOnMouseDownHandler } from '../common';
+var FilterChip = function (_a) {
+    var selected = _a.selected, text = _a.text, _b = _a.size, size = _b === void 0 ? Size.Medium : _b, disabled = _a.disabled, onClick = _a.onClick, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["selected", "text", "size", "disabled", "onClick", "className", "dataTestId"]);
+    /**
+     * Return Filter Chip component.
+     */
+    return (React.createElement(ChipContainer, __assign({ role: "checkbox", "data-testid": dataTestId, className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'default' : 'outline', " ").concat(!!onClick ? 'interactive' : '', " ").concat(className || ''), tabIndex: disabled || !onClick ? -1 : 0, onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && !disabled && onClick && onClick(); }, onMouseDown: defaultOnMouseDownHandler, onClick: function () { return !disabled && onClick && onClick(); } }, rest),
+        React.createElement(ChipContentContainer, null,
+            React.createElement(ChipContent, null,
+                selected && React.createElement("div", { className: 'chip-icon icon-left' },
+                    React.createElement(SystemIcons.CheckMark, { className: 'icon' })),
+                React.createElement("div", null, text)))));
+};
+export default FilterChip;

package/dist/src/Chips/InputChip.js

@@ -0,0 +1,71 @@
+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 libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+import { SystemIcons } from '../icons/index';
+/**
+ * Import custom styles.
+ */
+import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
+import { defaultOnMouseDownHandler, useActionWithin } from '../common';
+import { Size, States } from '../types';
+var InputChip = React.forwardRef(function (_a, ref) {
+    var _b;
+    var icon = _a.icon, text = _a.text, _c = _a.variant, variant = _c === void 0 ? States.Default : _c, _d = _a.size, size = _d === void 0 ? Size.Medium : _d, disabled = _a.disabled, onClick = _a.onClick, disableRemove = _a.disableRemove, dataTestId = _a.dataTestId, onRemove = _a.onRemove, className = _a.className, rest = __rest(_a, ["icon", "text", "variant", "size", "disabled", "onClick", "disableRemove", "dataTestId", "onRemove", "className"]);
+    var containerRef = (_b = ref) !== null && _b !== void 0 ? _b : React.useRef(null);
+    var removeRef = React.useRef(null);
+    useActionWithin(containerRef, [removeRef]);
+    /**
+     * Calls onRemove action when remove button is clicked.
+     * @param event - Event handler from the button click.
+     */
+    var onRemoveClick = function (event) {
+        !!event && event.stopPropagation();
+        onRemove(event);
+    };
+    var handleContainerKeyDown = function (event) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            !disabled && onClick && onClick();
+        }
+        if (event.key === 'Backspace' && !disableRemove) {
+            !disableRemove && onRemove && onRemove(event);
+        }
+    };
+    /**
+     * Return Input Chip component.
+     */
+    return (React.createElement(ChipContainer, __assign({ ref: containerRef, role: "button", "data-testid": dataTestId, "aria-roledescription": 'Removable filter', className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!onClick ? 'interactive' : '', " ").concat(className || ''), tabIndex: disabled || !onClick ? -1 : 0, onMouseDown: defaultOnMouseDownHandler, onKeyDown: handleContainerKeyDown, onClick: function () { return !disabled && onClick && onClick(); } }, rest),
+        React.createElement(ChipContentContainer, null,
+            React.createElement(ChipContent, { className: 'with-action-right' },
+                icon && React.createElement("div", { className: 'chip-icon icon-left' }, icon),
+                React.createElement("div", null, text),
+                React.createElement("div", { ref: removeRef, className: "action-right ".concat(disableRemove ? 'disabled' : ''), tabIndex: disableRemove || disabled ? -1 : 0, onMouseDown: defaultOnMouseDownHandler, onClick: function (e) { return !disableRemove && !disabled && onRemoveClick(e); }, onKeyDown: function (e) { return (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e); } },
+                    React.createElement("div", { className: 'chip-icon' },
+                        React.createElement(SystemIcons.Close, { className: 'remove' })))))));
+});
+export default InputChip;

package/dist/src/Chips/index.js

@@ -0,0 +1,6 @@
+export { default as InputChip } from './InputChip';
+export { default as FilterChip } from './FilterChip';
+export { default as ActionChip } from './ActionChip';
+export { default as ChipInput } from '../ChipsInput/ChipInput';
+export { default as ChoiceChips } from './ChoiceChips';
+export * from './ChipStyles';

package/dist/src/ChipsInput/ChipDropdownInput.js

@@ -0,0 +1,230 @@
+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;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+/**
+ * Import custom components.
+ */
+import { ChipInputContainer, ChipInputField } from './ChipInputField';
+import { Size, States } from '../types';
+import { DropdownContent } from '../Dropdown';
+import { useClickOutsideRef, useFocusOutsideRef } from '../common';
+import { Z_INDEXES } from '../styles';
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ", " {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ", " !important;\n    }\n  }\n"], ["\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ", " {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ", " !important;\n    }\n  }\n"])), ChipInputContainer, Z_INDEXES.dropdown + 1);
+export var ChipDropdownInput = React.forwardRef(function (_a, ref) {
+    var list = _a.list, onInputChange = _a.onInputChange, disableSorting = _a.disableSorting, messageOnNoResults = _a.messageOnNoResults, values = _a.values, inputId = _a.inputId, variants = _a.variants, placeholder = _a.placeholder, validationMessage = _a.validationMessage, onValueChange = _a.onValueChange, suggestion = _a.suggestion, loading = _a.loading, maxSelectedItems = _a.maxSelectedItems, _b = _a.multiLine, multiLine = _b === void 0 ? true : _b, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, icon = _a.icon, disableFiltering = _a.disableFiltering, disabled = _a.disabled, altPlaceholder = _a.altPlaceholder, required = _a.required, rest = __rest(_a, ["list", "onInputChange", "disableSorting", "messageOnNoResults", "values", "inputId", "variants", "placeholder", "validationMessage", "onValueChange", "suggestion", "loading", "maxSelectedItems", "multiLine", "size", "icon", "disableFiltering", "disabled", "altPlaceholder", "required"]);
+    // Initiate states
+    var _d = React.useState([]), givenList = _d[0], setGivenList = _d[1];
+    var _e = React.useState([]), chips = _e[0], setChips = _e[1];
+    var _f = React.useState(), activeDescendant = _f[0], setActiveDescendant = _f[1];
+    var _g = React.useState(''), value = _g[0], setValue = _g[1];
+    var _h = React.useState(false), restartFilter = _h[0], setRestartFilter = _h[1];
+    var _j = React.useState(), filteredList = _j[0], setFilteredList = _j[1];
+    var _k = React.useState(false), dropdownIsOpen = _k[0], setDropdownIsOpen = _k[1];
+    var _l = React.useState([]), dropdownList = _l[0], setDropdownList = _l[1];
+    var _m = React.useState(''), dropdownValue = _m[0], setDropdownValue = _m[1];
+    var _o = React.useState(null), focused = _o[0], setFocused = _o[1];
+    var containerRef = useClickOutsideRef(function () { return setDropdownIsOpen(false); }, [], useFocusOutsideRef(function () { return setDropdownIsOpen(false); }));
+    var inputRef = React.useRef();
+    React.useImperativeHandle(ref, function () { return inputRef.current; }, [inputRef]);
+    /**
+     * Sets initial values for the chips.
+     */
+    React.useEffect(function () {
+        var list = values.map(function (a) { return chips.find(function (b) { return b.value === a; }) || givenList.find(function (b) { return b.value === a; }) || {
+            label: a,
+            value: a,
+            icon: icon
+        }; })
+            .map(function (a, index) { return (__assign(__assign({}, a), { variant: a.variant || (variants && variants[index]) || States.Default })); })
+            .map(function (a, index) { return (__assign(__assign({}, a), { icon: a.icon || icon })); });
+        setChips(list);
+    }, [values, variants, icon, givenList]);
+    /**
+     * Convert string[] to List[] if necessary
+     */
+    React.useEffect(function () {
+        if (typeof list[0] === 'string') {
+            var newList = list.map(function (e) { return ({ label: e, value: e }); });
+            setGivenList(newList);
+        }
+        else {
+            setGivenList(list);
+        }
+    }, [list]);
+    /**
+     * filter and sort list if remoteOperations is false
+     * */
+    React.useEffect(function () {
+        var options = __spreadArray([], givenList, true);
+        if (!disableFiltering) {
+            if (!restartFilter && value !== '') {
+                options = options.filter(function (option) {
+                    var _a;
+                    return option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||
+                        (option.secondaryLabel && ((_a = option.secondaryLabel) === null || _a === void 0 ? void 0 : _a.toUpperCase().indexOf(value.toUpperCase())) !== -1);
+                });
+            }
+        }
+        if (!disableSorting) {
+            options = options.sort();
+        }
+        suggestion && options.push(suggestion);
+        options = options.filter(function (o) { return !chips.find(function (a) { return a.value === o.value; }); });
+        setFilteredList(options);
+    }, [value, givenList, chips, disableFiltering, disableSorting]);
+    /**
+     * if there is only one active item in dropdown mark it as focused
+     * */
+    React.useEffect(function () {
+        if (dropdownIsOpen && !!value && (dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) { return !a.disabled; }).length) === 1) {
+            setDropdownValue(dropdownList.find(function (a) { return !a.disabled; }).value);
+        }
+        else {
+            setDropdownValue('');
+        }
+    }, [dropdownList, dropdownIsOpen, value]);
+    var handleClickOutside = function (e) {
+        var _a;
+        if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+            if (dropdownIsOpen) {
+                setDropdownIsOpen(false);
+                if (!givenList.find(function (e) { return e.value === value; })) {
+                    setValue('');
+                }
+            }
+        }
+    };
+    /**
+     * register click outside event listener
+     * */
+    React.useEffect(function () {
+        document.addEventListener('click', handleClickOutside);
+        return function () {
+            document.removeEventListener('click', handleClickOutside);
+        };
+    }, []);
+    /**
+     * update dropdown items when filtered list changes
+     * */
+    React.useEffect(function () {
+        var _a;
+        setDropdownList((_a = filteredList === null || filteredList === void 0 ? void 0 : filteredList.map(function (x) {
+            var _a;
+            return ({
+                value: x.value,
+                displayLabel: x.label,
+                noteLabel: x.secondaryLabel,
+                icon: ((_a = x.icon) !== null && _a !== void 0 ? _a : icon),
+                disabled: x.disabled,
+            });
+        })) !== null && _a !== void 0 ? _a : []);
+    }, [filteredList]);
+    var addChip = function (newChip) {
+        var newList = __spreadArray(__spreadArray([], chips, true), [newChip], false);
+        // Let's add the chip
+        setChips(newList);
+        onValueChange(newList.map(function (a) { return a.value; }));
+        setValue('');
+    };
+    var handleInputValueChange = function (value) {
+        setValue(value);
+        setRestartFilter(false);
+        setDropdownIsOpen(true);
+        onInputChange && onInputChange(value);
+    };
+    /**
+     * Add chip from dropdown
+     * */
+    var handleValueUpdate = function (values) {
+        var _a;
+        var item = filteredList === null || filteredList === void 0 ? void 0 : filteredList.find(function (a) { return a.value === values[0]; });
+        item && addChip(item);
+        setRestartFilter(true);
+        (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    /**
+     * Adds a chip to the chip list.
+     * @param event - Event handler from the key down event.
+     */
+    var handleInputKeyDown = function (event) {
+        // Let's trigger only on enter, comma and space key press
+        if ((event.key === 'Enter' || event.key === ' ') && value) {
+            if ((dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.filter(function (a) { return !a.disabled; }).length) === 1) {
+                handleValueUpdate([dropdownList.find(function (a) { return !a.disabled; }).value]);
+                event.stopPropagation();
+            }
+        }
+        if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!(dropdownList === null || dropdownList === void 0 ? void 0 : dropdownList.length)) {
+            setDropdownIsOpen(true);
+        }
+    };
+    /**
+     * Removes a specific chip from the chip list.
+     * @param index - Index of the chip that needs to be removed.
+     */
+    var handleOnChipRemoved = function (index) {
+        // Let's copy the chips
+        var newChips = __spreadArray([], chips, true);
+        // Let's delete the chip
+        // If necessary, let's replace it with a different chip
+        newChips.splice(index, 1);
+        // Let's update the chip list
+        setChips(__spreadArray([], newChips, true));
+        onValueChange(newChips.map(function (e) { return e.value; }));
+    };
+    return (React.createElement(Wrapper, { ref: containerRef },
+        React.createElement(ChipInputField, __assign({ inputId: inputId, ref: inputRef, items: chips, required: required, inputValue: value, role: "combobox", "aria-activedescendant": activeDescendant, size: size, placeholder: placeholder, altPlaceholder: altPlaceholder, disabled: disabled, multiLine: multiLine, validationMessage: validationMessage, loading: loading, onRemoveItem: function (chip, index) { return handleOnChipRemoved(index); }, onInputValueChange: handleInputValueChange, onInputKeyDown: handleInputKeyDown, onActivationChange: function (value) { return setDropdownIsOpen(value); } }, rest)),
+        React.createElement(DropdownContent, { containerRef: containerRef, customizationProps: {
+                action: function () {
+                },
+                pinTopItem: true,
+                itemsType: 'normal',
+                scrollable: true,
+                actionLabel: '',
+                multiSelect: false,
+                onValueUpdate: handleValueUpdate,
+                items: dropdownList,
+            }, ariaRolesType: "input", focused: focused, setFocused: setFocused, onActiveDescendantChanged: function (e) { return setActiveDescendant(e); }, selectedValues: [dropdownValue], messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '', setSelectedValues: function () {
+            }, isOpen: (!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen, setIsOpen: setDropdownIsOpen, filter: '', isButton: false, id: "".concat(inputId, "_dropdowncontent") })));
+});
+var templateObject_1;

package/dist/src/ChipsInput/ChipInput.js

@@ -0,0 +1,99 @@
+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 React libraries.
+ */
+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;