@laerdal/life-react-components 1.7.0-dev.2 → 1.7.0-dev.20.full

package/dist/ChipsInput/ChipInput.js

@@ -0,0 +1,122 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom components.
+ */
+
+import { Size } from '../types';
+import { ChipInputField } from './ChipInputField';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var ChipInput = function ChipInput(_ref) {
+  var values = _ref.values,
+      inputId = _ref.inputId,
+      variants = _ref.variants,
+      icon = _ref.icon,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      altPlaceholder = _ref.altPlaceholder,
+      validationType = _ref.validationType,
+      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;
+
+  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]);
+  /**
+   * 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, {
+    inputId: inputId,
+    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,
+    validationType: validationType,
+    disabled: disabled,
+    validationMessage: validationMessage,
+    multiLine: multiLine,
+    size: size
+  });
+};
+
+export default ChipInput;
+//# sourceMappingURL=ChipInput.js.map

package/dist/ChipsInput/ChipInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ChipsInput/ChipInput.tsx"],"names":["React","Size","ChipInputField","ChipInput","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationType","validationMessage","onValueChange","multiLine","size","Medium","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types';\nimport {ChipInputField} from './ChipInputField';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\n\n\nconst ChipInput: React.FunctionComponent<ChipInputProps> = ({\n                                                              values,\n                                                              inputId,\n                                                              variants,\n                                                              icon,\n                                                              placeholder,\n                                                              disabled,\n                                                              altPlaceholder,\n                                                              validationType,\n                                                              validationMessage,\n                                                              onValueChange,\n                                                              multiLine = true,\n                                                              size = Size.Medium,\n                                                            }: ChipInputProps) => {\n\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [chipItems, setChipItems] = React.useState<ChipItem[]>([]);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Set chip items for chip input field\n   * */\n  React.useEffect(() => {\n    setChipItems(chips.map((chip, index) => ({\n      label: chip,\n      icon: icon,\n      disabled: false,\n      variant: variants && variants[index],\n    })));\n  }, [chips, variants, icon, size]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      event.preventDefault();\n\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const onRemoveChip = (index: number): void => {\n    const newChips = [...chips];\n    newChips.splice(index, 1);\n\n    setChips(newChips);\n    onValueChange(newChips);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <ChipInputField inputId={inputId}\n                    items={chipItems}\n                    onRemoveItem={(item, index) => onRemoveChip(index)}\n                    inputValue={value}\n                    onInputValueChange={value => setValue(value)}\n                    onInputKeyDown={handleInputKeyDown}\n                    placeholder={placeholder}\n                    altPlaceholder={altPlaceholder}\n                    validationType={validationType}\n                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n    />\n  );\n};\n\nexport default ChipInput;\n"],"file":"ChipInput.js"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -0,0 +1,211 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChipInputField = exports.ChipInputEl = exports.ChipInputContentContainer = exports.ChipInputContainer = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _types = require("../types");
+
+var _Chips = require("../Chips");
+
+var _styling = require("../InputFields/styling");
+
+var _SystemIcons = require("../icons/systemicons/SystemIcons");
+
+var _styles = require("../styles");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _LoadingIndicator = require("../LoadingIndicator");
+
+var _common = require("../common");
+
+var _Button = require("../Button");
+
+var _icons = require("../icons");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
+
+var Loading = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 20px;\n  width: 20px;\n"])));
+
+var ChipInputContentContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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, button:focus {\n    outline-offset: -4px !important;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+
+exports.ChipInputContentContainer = ChipInputContentContainer;
+
+var ChipInputContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: auto;\n  border-radius: 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\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\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, :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  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error: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\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), ChipInputContentContainer, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.warning_500, _styles.COLORS.critical_500, ChipInputContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
+
+exports.ChipInputContainer = ChipInputContainer;
+
+var ChipInputEl = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.black);
+
+exports.ChipInputEl = ChipInputEl;
+
+var ChipInputField = /*#__PURE__*/_react.default.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 ? _types.Size.Medium : _ref$size,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      loading = _ref.loading,
+      onRemoveItem = _ref.onRemoveItem,
+      onInputValueChange = _ref.onInputValueChange,
+      onInputKeyDown = _ref.onInputKeyDown,
+      onActivation = _ref.onActivation,
+      inputValue = _ref.inputValue;
+
+  var containerRef = _react.default.useRef(null);
+
+  var inputRef = (0, _common.useFocusVisibleRef)([containerRef], ref);
+
+  var clearButtonRef = _react.default.useRef(null);
+  /**
+   * Scroll container to last item on change
+   * */
+
+
+  _react.default.useEffect(function () {
+    if (containerRef.current) {
+      inputRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [containerRef, inputRef, items]);
+  /**
+   * Remove last cheap on backspace
+   * */
+
+
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    onInputKeyDown(e);
+  };
+
+  var handleItemRemove = function handleItemRemove(event, item, index) {
+    var _inputRef$current;
+
+    onRemoveItem(item, index);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+      focusVisible: event.detail !== 1
+    });
+  };
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current2;
+
+    onInputValueChange('');
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+
+  var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
+      ref: containerRef,
+      id: inputId,
+      onClick: function onClick() {
+        var _inputRef$current3;
+
+        return !disabled && ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus());
+      },
+      className: cls,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipInputContentContainer, {
+        children: [items === null || items === void 0 ? void 0 : items.map(function (chip, index) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chips.InputChip, {
+            icon: chip === null || chip === void 0 ? void 0 : chip.icon,
+            size: size,
+            disabled: chip.disabled || disabled,
+            variant: chip.variant || 'normal',
+            text: chip.label,
+            onRemove: function onRemove(e) {
+              return handleItemRemove(e, chip, index);
+            }
+          }, "chip_".concat(index));
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputEl, {
+          ref: inputRef,
+          type: "text",
+          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();
+            onActivation && onActivation();
+          }
+        }), inputValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          action: handleInputClear,
+          ref: clearButtonRef,
+          useTransparentBackground: true,
+          shape: 'circular',
+          style: {
+            marginLeft: '-8px'
+          },
+          variant: 'secondary',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
+        }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {
+          className: size,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
+            size: _types.Size.Small,
+            color: _styles.COLORS.neutral_600
+          })
+        })]
+      })
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_500
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_400
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    })]
+  });
+});
+
+exports.ChipInputField = ChipInputField;
+ChipInputField.propTypes = {
+  inputId: _propTypes.default.string.isRequired,
+  items: _propTypes.default.array.isRequired,
+  disabled: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  altPlaceholder: _propTypes.default.string,
+  multiLine: _propTypes.default.bool,
+  loading: _propTypes.default.bool,
+  validationType: _propTypes.default.oneOf(['error', 'warning']),
+  validationMessage: _propTypes.default.string,
+  onRemoveItem: _propTypes.default.func.isRequired,
+  inputValue: _propTypes.default.string.isRequired,
+  onInputValueChange: _propTypes.default.func.isRequired,
+  onInputKeyDown: _propTypes.default.func.isRequired,
+  onActivation: _propTypes.default.func
+};
+//# sourceMappingURL=ChipInputField.cjs.map

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputContentContainer","Size","Small","ChipInputContainer","COLORS","neutral_400","white","ComponentTextStyle","Regular","black","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputEl","input","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivation","inputValue","containerRef","useRef","inputRef","clearButtonRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","cls","map","chip","icon","variant","label","target","value","length","stopPropagation","marginLeft","neutral_600","critical_400"],"mappings":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,4GAAb;;AAIA,IAAMC,OAAO,GAAGF,0BAAOC,GAAV,wHAAb;;AAMO,IAAME,yBAAyB,GAAGH,0BAAOC,GAAV,4fAclC,8BAAiBG,YAAKC,KAAtB,CAdkC,CAA/B;;;;AAwBA,IAAMC,kBAAkB,GAAGN,0BAAOC,GAAV,opCAICM,eAAOC,WAJR,EAKTD,eAAOE,KALE,EAY3B,+BAAkBC,2BAAmBC,OAArC,EAA8CJ,eAAOK,KAArD,CAZ2B,EAyBzBT,yBAzByB,EAkCzBU,mBAlCyB,EAsCGN,eAAOO,WAtCV,EA0CGP,eAAOQ,WA1CV,EAgDGR,eAAOS,WAhDV,EAsDGT,eAAOU,YAtDV,EA0DzBd,yBA1DyB,EA+DGI,eAAOW,WA/DV,EAiElBX,eAAOY,WAjEW,CAAxB;;;;AAuEA,IAAMC,WAAW,GAAGpB,0BAAOqB,KAAV,wQAUpB,+BAAkBX,2BAAmBC,OAArC,EAA8C,IAA9C,CAVoB,EAWbJ,eAAOK,KAXM,CAAjB;;;;AAmCA,IAAMU,cAAc,gBAAGC,eAAMC,UAAN,CAAwD,gBAgBIC,GAhBJ,EAgBY;AAAA,MAfTC,OAeS,QAfTA,OAeS;AAAA,MAdTC,KAcS,QAdTA,KAcS;AAAA,2BAbTC,QAaS;AAAA,MAbTA,QAaS,8BAbE,KAaF;AAAA,MAZTC,WAYS,QAZTA,WAYS;AAAA,MAXTC,cAWS,QAXTA,cAWS;AAAA,4BAVTC,SAUS;AAAA,MAVTA,SAUS,+BAVG,IAUH;AAAA,uBATTC,IASS;AAAA,MATTA,IASS,0BATF5B,YAAK6B,MASH;AAAA,MARTC,cAQS,QARTA,cAQS;AAAA,MAPTC,iBAOS,QAPTA,iBAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTC,YAKS,QALTA,YAKS;AAAA,MAJTC,kBAIS,QAJTA,kBAIS;AAAA,MAHTC,cAGS,QAHTA,cAGS;AAAA,MAFTC,YAES,QAFTA,YAES;AAAA,MADTC,UACS,QADTA,UACS;;AAChG,MAAMC,YAAY,GAAGnB,eAAMoB,MAAN,CAA6B,IAA7B,CAArB;;AACA,MAAMC,QAAQ,GAAG,gCAAmB,CAACF,YAAD,CAAnB,EAAmCjB,GAAnC,CAAjB;;AAEA,MAAMoB,cAAc,GAAGtB,eAAMoB,MAAN,CAAgC,IAAhC,CAAvB;AAEA;AACF;AACA;;;AACEpB,iBAAMuB,SAAN,CAAgB,YAAM;AACpB,QAAIJ,YAAY,CAACK,OAAjB,EAA0B;AACxBH,MAAAA,QAAQ,CAACG,OAAT,CAAiBC,cAAjB,CAAgC;AAC9BC,QAAAA,KAAK,EAAE,SADuB;AAE9BC,QAAAA,MAAM,EAAE;AAFsB,OAAhC;AAID;AACF,GAPD,EAOG,CAACR,YAAD,EAAeE,QAAf,EAAyBjB,KAAzB,CAPH;AASA;AACF;AACA;;;AACE,MAAMwB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAA8C;AACvEb,IAAAA,cAAc,CAACa,CAAD,CAAd;AACD,GAFD;;AAIA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAaC,IAAb,EAA6BC,KAA7B,EAA+C;AAAA;;AACtEnB,IAAAA,YAAY,CAACkB,IAAD,EAAOC,KAAP,CAAZ;AACA,yBAAAZ,QAAQ,CAACG,OAAT,wEAAkBU,KAAlB,CAAwB;AAACC,MAAAA,YAAY,EAAEJ,KAAK,CAACK,MAAN,KAAiB;AAAhC,KAAxB;AACD,GAHD;;AAKA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACR,CAAD,EAAY;AAAA;;AACnCd,IAAAA,kBAAkB,CAAC,EAAD,CAAlB;AACA,0BAAAM,QAAQ,CAACG,OAAT,0EAAkBU,KAAlB,CAAwB;AAACC,MAAAA,YAAY,EAAE,CAAAN,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEO,MAAH,MAAc;AAA7B,KAAxB;AACD,GAHD;;AAKA,MAAME,GAAG,aAAM9B,SAAS,GAAG,WAAH,GAAiB,EAAhC,cAAsCG,cAAc,IAAI,EAAxD,cAA8DF,IAA9D,cAAsEI,OAAO,GAAG,SAAH,GAAe,EAA5F,cAAkGR,QAAQ,GAAG,UAAH,GAAgB,EAA1H,CAAT;AAEA,sBACE,sBAAC,OAAD;AAAA,4BACE,qBAAC,kBAAD;AAAoB,MAAA,GAAG,EAAEc,YAAzB;AACoB,MAAA,EAAE,EAAEhB,OADxB;AAEoB,MAAA,OAAO,EAAE;AAAA;;AAAA,eAAM,CAACE,QAAD,2BAAagB,QAAQ,CAACG,OAAtB,uDAAa,mBAAkBU,KAAlB,EAAb,CAAN;AAAA,OAF7B;AAGoB,MAAA,SAAS,EAAEI,GAH/B;AAAA,6BAIE,sBAAC,yBAAD;AAAA,mBACGlC,KADH,aACGA,KADH,uBACGA,KAAK,CAAEmC,GAAP,CAAW,UAACC,IAAD,EAAiBP,KAAjB;AAAA,8BACV,qBAAC,gBAAD;AACW,YAAA,IAAI,EAAEO,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,IADvB;AAEW,YAAA,IAAI,EAAEhC,IAFjB;AAGW,YAAA,QAAQ,EAAE+B,IAAI,CAACnC,QAAL,IAAiBA,QAHtC;AAIW,YAAA,OAAO,EAAEmC,IAAI,CAACE,OAAL,IAAgB,QAJpC;AAKW,YAAA,IAAI,EAAEF,IAAI,CAACG,KALtB;AAMW,YAAA,QAAQ,EAAE,kBAACd,CAAD;AAAA,qBAAOC,gBAAgB,CAACD,CAAD,EAAIW,IAAJ,EAAUP,KAAV,CAAvB;AAAA;AANrB,4BAAwBA,KAAxB,EADU;AAAA,SAAX,CADH,eAWE,qBAAC,WAAD;AAAa,UAAA,GAAG,EAAEZ,QAAlB;AACa,UAAA,IAAI,EAAC,MADlB;AAEa,UAAA,QAAQ,EAAEhB,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAFvC;AAGa,UAAA,KAAK,EAAEa,UAHpB;AAIa,UAAA,QAAQ,EAAE,kBAAAW,CAAC;AAAA,mBAAId,kBAAkB,CAACc,CAAC,CAACe,MAAF,CAASC,KAAV,CAAtB;AAAA,WAJxB;AAKa,UAAA,SAAS,EAAEjB,kBALxB;AAMa,UAAA,WAAW,EAAE,CAAAxB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAE0C,MAAP,MAAkB,CAAlB,GAAsBxC,WAAtB,GAAqCC,cAAc,IAAI,EANjF;AAOa,UAAA,OAAO,EAAE,iBAAAsB,CAAC,EAAI;AACZA,YAAAA,CAAC,CAACkB,eAAF;AACA9B,YAAAA,YAAY,IAAIA,YAAY,EAA5B;AACD;AAVd,UAXF,EAuBIC,UAAU,IAAI,CAACb,QAAf,iBACA,qBAAC,kBAAD;AAAY,UAAA,MAAM,EAAEgC,gBAApB;AACY,UAAA,GAAG,EAAEf,cADjB;AAEY,UAAA,wBAAwB,EAAE,IAFtC;AAGY,UAAA,KAAK,EAAE,UAHnB;AAIY,UAAA,KAAK,EAAE;AAAC0B,YAAAA,UAAU,EAAE;AAAb,WAJnB;AAKY,UAAA,OAAO,EAAE,WALrB;AAAA,iCAME,qBAAC,kBAAD,CAAa,KAAb;AANF,UAxBJ,EAkCGnC,OAAO,iBACN,qBAAC,OAAD;AAAS,UAAA,SAAS,EAAEJ,IAApB;AAAA,iCACE,qBAAC,kCAAD;AAAkB,YAAA,IAAI,EAAE5B,YAAKC,KAA7B;AAAoC,YAAA,KAAK,EAAEE,eAAOiE;AAAlD;AADF,UAnCJ;AAAA;AAJF,MADF,EAgDGrC,iBAAiB,IAAID,cAAc,KAAK,SAAxC,gBACC,sBAAC,uBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAE3B,eAAOU;AAA5C,QADF,eAEE;AAAA,kBAAOkB;AAAP,QAFF;AAAA,MADD,GAMCD,cAAc,KAAK,OAAnB,iBACE,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAE3B,eAAOkE;AAA5C,QADF,eAEE;AAAA,kBAAOtC;AAAP,QAFF;AAAA,MAvDN;AAAA,IADF;AAgED,CArH6B,CAAvB;;;;AAnBLT,EAAAA,O;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,S;AAEAK,EAAAA,O;AAEAF,EAAAA,c,4BAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AAEAE,EAAAA,Y;AACAI,EAAAA,U;AACAH,EAAAA,kB;AACAC,EAAAA,c;AACAC,EAAAA,Y","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\n\nexport const ChipInputContentContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\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, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n\n\n`;\n\nexport const ChipInputEl = styled.input`\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  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivation?: () => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n                                                                                         inputId,\n                                                                                         items,\n                                                                                         disabled = false,\n                                                                                         placeholder,\n                                                                                         altPlaceholder,\n                                                                                         multiLine = true,\n                                                                                         size = Size.Medium,\n                                                                                         validationType,\n                                                                                         validationMessage,\n                                                                                         loading,\n                                                                                         onRemoveItem,\n                                                                                         onInputValueChange,\n                                                                                         onInputKeyDown,\n                                                                                         onActivation,\n                                                                                         inputValue\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (containerRef.current) {\n      inputRef.current.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }, [containerRef, inputRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onInputKeyDown(e);\n  };\n\n  const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n    onRemoveItem(item, index);\n    inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n  };\n\n  const handleInputClear = (e: any) => {\n    onInputValueChange('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer ref={containerRef}\n                          id={inputId}\n                          onClick={() => !disabled && inputRef.current?.focus()}\n                          className={cls}>\n        <ChipInputContentContainer>\n          {items?.map((chip: ChipItem, index: number) => (\n            <InputChip key={`chip_${index}`}\n                       icon={chip?.icon}\n                       size={size}\n                       disabled={chip.disabled || disabled}\n                       variant={chip.variant || 'normal'}\n                       text={chip.label}\n                       onRemove={(e) => handleItemRemove(e, chip, index)}/>\n          ))}\n\n          <ChipInputEl ref={inputRef}\n                       type=\"text\"\n                       tabIndex={disabled ? -1 : 0}\n                       value={inputValue}\n                       onChange={e => onInputValueChange(e.target.value)}\n                       onKeyDown={handleInputKeyDown}\n                       placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n                       onClick={e => {\n                         e.stopPropagation();\n                         onActivation && onActivation();\n                       }}/>\n          {\n            inputValue && !disabled &&\n            <IconButton action={handleInputClear}\n                        ref={clearButtonRef}\n                        useTransparentBackground={true}\n                        shape={'circular'}\n                        style={{marginLeft: '-8px'}}\n                        variant={'secondary'}>\n              <SystemIcons.Clear/>\n            </IconButton>\n          }\n\n          {loading &&\n            <Loading className={size}>\n              <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n            </Loading>\n          }\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.cjs"}

package/dist/ChipsInput/ChipInputField.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ChipItem } from './ChipInputTypes';
+import { Size } from '../types';
+export declare const ChipInputContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
+export interface ChipInputFieldProps {
+    inputId: string;
+    items: ChipItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    altPlaceholder?: string;
+    multiLine?: boolean;
+    size?: Size.Large | Size.Medium | Size.Small;
+    loading?: boolean;
+    validationType?: 'error' | 'warning';
+    validationMessage?: string;
+    onRemoveItem: (item: ChipItem, index: number) => void;
+    inputValue: string;
+    onInputValueChange: (value: string) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onActivation?: () => void;
+}
+export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/ChipsInput/ChipInputField.js

@@ -0,0 +1,172 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+import _pt from "prop-types";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import React from 'react';
+import { Size } from '../types';
+import { InputChip } from '../Chips';
+import { ErrorMessage, WarningMessage } from '../InputFields/styling';
+import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
+import { COLORS, ComponentMStyling, 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 ChipInputContentContainer = styled.div(_templateObject3 || (_templateObject3 = _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, button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
+export var ChipInputContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 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\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\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, :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  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error: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\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.warning_500, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
+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"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black);
+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,
+      validationType = _ref.validationType,
+      validationMessage = _ref.validationMessage,
+      loading = _ref.loading,
+      onRemoveItem = _ref.onRemoveItem,
+      onInputValueChange = _ref.onInputValueChange,
+      onInputKeyDown = _ref.onInputKeyDown,
+      onActivation = _ref.onActivation,
+      inputValue = _ref.inputValue;
+  var containerRef = React.useRef(null);
+  var inputRef = useFocusVisibleRef([containerRef], ref);
+  var clearButtonRef = React.useRef(null);
+  /**
+   * Scroll container to last item on change
+   * */
+
+  React.useEffect(function () {
+    if (containerRef.current) {
+      inputRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
+  }, [containerRef, inputRef, items]);
+  /**
+   * Remove last cheap on backspace
+   * */
+
+  var handleInputKeyDown = function handleInputKeyDown(e) {
+    onInputKeyDown(e);
+  };
+
+  var handleItemRemove = function handleItemRemove(event, item, index) {
+    var _inputRef$current;
+
+    onRemoveItem(item, index);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus({
+      focusVisible: event.detail !== 1
+    });
+  };
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current2;
+
+    onInputValueChange('');
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+
+  var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
+  return /*#__PURE__*/_jsxs(Wrapper, {
+    children: [/*#__PURE__*/_jsx(ChipInputContainer, {
+      ref: containerRef,
+      id: inputId,
+      onClick: function onClick() {
+        var _inputRef$current3;
+
+        return !disabled && ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.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 || 'normal',
+            text: chip.label,
+            onRemove: function onRemove(e) {
+              return handleItemRemove(e, chip, index);
+            }
+          }, "chip_".concat(index));
+        }), /*#__PURE__*/_jsx(ChipInputEl, {
+          ref: inputRef,
+          type: "text",
+          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();
+            onActivation && onActivation();
+          }
+        }), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+          action: handleInputClear,
+          ref: clearButtonRef,
+          useTransparentBackground: true,
+          shape: 'circular',
+          style: {
+            marginLeft: '-8px'
+          },
+          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 && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        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,
+  validationType: _pt.oneOf(['error', 'warning']),
+  validationMessage: _pt.string,
+  onRemoveItem: _pt.func.isRequired,
+  inputValue: _pt.string.isRequired,
+  onInputValueChange: _pt.func.isRequired,
+  onInputKeyDown: _pt.func.isRequired,
+  onActivation: _pt.func
+};
+//# sourceMappingURL=ChipInputField.js.map

package/dist/ChipsInput/ChipInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputContentContainer","Small","ChipInputContainer","neutral_400","white","Regular","black","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputEl","input","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivation","inputValue","containerRef","useRef","inputRef","clearButtonRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","cls","map","chip","icon","variant","label","target","value","length","stopPropagation","marginLeft","neutral_600","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {COLORS, ComponentMStyling, ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\n\nexport const ChipInputContentContainer = styled.div`\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  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\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, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n\n\n`;\n\nexport const ChipInputEl = styled.input`\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  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivation?: () => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n                                                                                         inputId,\n                                                                                         items,\n                                                                                         disabled = false,\n                                                                                         placeholder,\n                                                                                         altPlaceholder,\n                                                                                         multiLine = true,\n                                                                                         size = Size.Medium,\n                                                                                         validationType,\n                                                                                         validationMessage,\n                                                                                         loading,\n                                                                                         onRemoveItem,\n                                                                                         onInputValueChange,\n                                                                                         onInputKeyDown,\n                                                                                         onActivation,\n                                                                                         inputValue\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  const clearButtonRef = React.useRef<HTMLButtonElement>(null);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (containerRef.current) {\n      inputRef.current.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }, [containerRef, inputRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    onInputKeyDown(e);\n  };\n\n  const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n    onRemoveItem(item, index);\n    inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n  };\n\n  const handleInputClear = (e: any) => {\n    onInputValueChange('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer ref={containerRef}\n                          id={inputId}\n                          onClick={() => !disabled && inputRef.current?.focus()}\n                          className={cls}>\n        <ChipInputContentContainer>\n          {items?.map((chip: ChipItem, index: number) => (\n            <InputChip key={`chip_${index}`}\n                       icon={chip?.icon}\n                       size={size}\n                       disabled={chip.disabled || disabled}\n                       variant={chip.variant || 'normal'}\n                       text={chip.label}\n                       onRemove={(e) => handleItemRemove(e, chip, index)}/>\n          ))}\n\n          <ChipInputEl ref={inputRef}\n                       type=\"text\"\n                       tabIndex={disabled ? -1 : 0}\n                       value={inputValue}\n                       onChange={e => onInputValueChange(e.target.value)}\n                       onKeyDown={handleInputKeyDown}\n                       placeholder={items?.length === 0 ? placeholder : (altPlaceholder || '')}\n                       onClick={e => {\n                         e.stopPropagation();\n                         onActivation && onActivation();\n                       }}/>\n          {\n            inputValue && !disabled &&\n            <IconButton action={handleInputClear}\n                        ref={clearButtonRef}\n                        useTransparentBackground={true}\n                        shape={'circular'}\n                        style={{marginLeft: '-8px'}}\n                        variant={'secondary'}>\n              <SystemIcons.Clear/>\n            </IconButton>\n          }\n\n          {loading &&\n            <Loading className={size}>\n              <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n            </Loading>\n          }\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.js"}

package/dist/ChipsInput/ChipInputTypes.cjs

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=ChipInputTypes.cjs.map

package/dist/ChipsInput/ChipInputTypes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"ChipInputTypes.cjs"}