@laerdal/life-react-components 1.7.0-dev.9 → 1.8.0

package/dist/ChipsInput/ChipInputField.cjs

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ChipInputField = exports.ChipInputEl = exports.ChipInputContentContainer = exports.ChipInputContainer = void 0;
+exports.ChipInputField = exports.ChipInputEl = exports.ChipInputContentContainer = exports.ChipInputContainer = exports.ChipInputBoundItems = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
@@ -29,26 +29,34 @@ 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 _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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  position: absolute;\n  height: 20px;\n\n  &.small {\n    right: 8px;\n    bottom: 14px;\n  }\n\n  &.medium {\n    bottom: 18px;\n  }\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\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus {\n    outline-offset: -4px;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
+var ChipInputBoundItems = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
 
-exports.ChipInputContentContainer = ChipInputContentContainer;
+exports.ChipInputBoundItems = ChipInputBoundItems;
 
-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);
+var ChipInputContentContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (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.ChipInputContainer = ChipInputContainer;
+exports.ChipInputContentContainer = ChipInputContentContainer;
 
-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);
+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\n  &::placeholder {\n    ", "\n  }\n"])), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.black, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600));
 
 exports.ChipInputEl = ChipInputEl;
 
+var ChipInputContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (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    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :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), ChipInputEl, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputEl, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), 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 ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
       items = _ref.items,
@@ -66,7 +74,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       onRemoveItem = _ref.onRemoveItem,
       onInputValueChange = _ref.onInputValueChange,
       onInputKeyDown = _ref.onInputKeyDown,
-      onActivation = _ref.onActivation,
+      onActivationChange = _ref.onActivationChange,
       inputValue = _ref.inputValue;
 
   var containerRef = _react.default.useRef(null);
@@ -77,11 +85,13 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
    * */
 
   _react.default.useEffect(function () {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-      containerRef.current.scrollLeft = containerRef.current.scrollWidth;
+    if (inputRef.current) {
+      inputRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
     }
-  }, [containerRef, items]);
+  }, [containerRef, inputRef, items]);
   /**
    * Remove last cheap on backspace
    * */
@@ -90,13 +100,41 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;
 
-    if (e.key === 'Backspace' && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
-      e.stopPropagation();
+    if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
       onRemoveItem(items[items.length - 1], items.length - 1);
-      return;
+    } else {
+      onInputKeyDown(e);
     }
+  };
+
+  var handleItemRemove = function handleItemRemove(event, item, index) {
+    var _inputRef$current2;
 
-    onInputKeyDown(e);
+    onRemoveItem(item, index);
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
+      focusVisible: event.detail !== 1
+    });
+  };
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current3;
+
+    onInputValueChange('');
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+
+  var handleContainerKeyDown = function handleContainerKeyDown(e) {
+    if (!containerRef.current || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    var items = containerRef.current.querySelectorAll('[tabindex="0"]');
+    var currentIndex = Array.from(items).indexOf(e.target);
+    var direction = e.key === 'ArrowLeft' ? -1 : 1;
+    var item = items[currentIndex + direction];
+    item === null || item === void 0 ? void 0 : item.focus({
+      focusVisible: true
+    });
+    onActivationChange && onActivationChange(false);
   };
 
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
@@ -104,18 +142,11 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
       ref: containerRef,
       id: inputId,
-      tabIndex: disabled ? -1 : 0,
-      onKeyDown: function onKeyDown(e) {
-        var _inputRef$current2;
-
-        return e.key === 'Enter' && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
-          focusVisible: true
-        }));
-      },
+      onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
-        var _inputRef$current3;
+        var _inputRef$current4;
 
-        return !disabled && ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus());
+        return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
       },
       className: cls,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipInputContentContainer, {
@@ -126,35 +157,49 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
             disabled: chip.disabled || disabled,
             variant: chip.variant || 'normal',
             text: chip.label,
-            onRemove: function onRemove() {
-              return onRemoveItem(chip, index);
+            onRemove: function onRemove(e) {
+              return handleItemRemove(e, chip, index);
             }
           }, "chip_".concat(index));
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputEl, {
-          ref: inputRef,
-          type: "text",
-          tabIndex: -1,
-          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();
-          },
-          onFocus: function onFocus(e) {
-            return onActivation && onActivation();
-          }
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ChipInputBoundItems, {
+          children: [/*#__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();
+              onActivationChange && onActivationChange(true);
+            }
+          }), inputValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            action: handleInputClear,
+            ref: function ref(_ref2) {
+              _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+              });
+            },
+            useTransparentBackground: true,
+            shape: 'circular',
+            style: {
+              marginLeft: '-8px'
+            },
+            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
+            })
+          })]
         })]
       })
-    }), 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",
@@ -188,6 +233,6 @@ ChipInputField.propTypes = {
   inputValue: _propTypes.default.string.isRequired,
   onInputValueChange: _propTypes.default.func.isRequired,
   onInputKeyDown: _propTypes.default.func.isRequired,
-  onActivation: _propTypes.default.func
+  onActivationChange: _propTypes.default.func
 };
 //# sourceMappingURL=ChipInputField.cjs.map

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +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","useEffect","current","scrollTop","scrollHeight","scrollLeft","scrollWidth","handleInputKeyDown","e","key","value","stopPropagation","length","cls","focus","focusVisible","map","chip","index","icon","variant","label","target","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 {useFocusVisibleRef} from '../common';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  position: absolute;\n  height: 20px;\n\n  &.small {\n    right: 8px;\n    bottom: 14px;\n  }\n\n  &.medium {\n    bottom: 18px;\n  }\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\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus {\n    outline-offset: -4px;\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  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (containerRef.current) {\n      containerRef.current!.scrollTop = containerRef.current!.scrollHeight;\n      containerRef.current!.scrollLeft = containerRef.current!.scrollWidth;\n    }\n  }, [containerRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && inputRef?.current?.value === '') {\n      e.stopPropagation();\n      onRemoveItem(items[items.length - 1], items.length - 1);\n      return;\n    }\n\n    onInputKeyDown(e);\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                          tabIndex={disabled ? -1 : 0}\n                          onKeyDown={e => e.key === 'Enter' && inputRef.current?.focus({focusVisible: true})}\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={() => onRemoveItem(chip, index)}/>\n          ))}\n\n          <ChipInputEl ref={inputRef}\n                       type=\"text\"\n                       tabIndex={-1}\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                       onFocus={e => onActivation && onActivation()}/>\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n      {loading &&\n        <Loading className={size}>\n          <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n        </Loading>\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"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","label","stopPropagation","marginLeft","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 {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} 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 ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\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\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  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\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\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  onActivationChange?: (active: boolean) => 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                                                                                         onActivationChange,\n                                                                                         inputValue\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (inputRef.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    if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n      onRemoveItem(items[items.length - 1], items.length - 1);\n    } else {\n      onInputKeyDown(e);\n    }\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 handleContainerKeyDown = (e: React.KeyboardEvent) => {\n    if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n    const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n    const currentIndex = Array.from(items).indexOf(e.target as any);\n    const direction = e.key === 'ArrowLeft' ? -1 : 1;\n    const item = items[currentIndex + direction];\n    item?.focus({focusVisible: true} as any);\n\n    onActivationChange && onActivationChange(false);\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                          onKeyDown={handleContainerKeyDown}\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          <ChipInputBoundItems>\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                           onActivationChange && onActivationChange(true);\n                         }}/>\n            {\n              inputValue && !disabled &&\n              <IconButton action={handleInputClear}\n                          ref={(ref) => {\n                            ref?.scrollIntoView({\n                              block: 'nearest',\n                              inline: 'nearest',\n                            });\n                          }}\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          </ChipInputBoundItems>\n        </ChipInputContentContainer>\n      </ChipInputContainer>\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

@@ -1,9 +1,10 @@
 import React from 'react';
 import { ChipItem } from './ChipInputTypes';
 import { Size } from '../types';
+export declare const ChipInputBoundItems: import("styled-components").StyledComponent<"div", any, {}, never>;
 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 declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface ChipInputFieldProps {
     inputId: string;
     items: ChipItem[];
@@ -19,6 +20,6 @@ export interface ChipInputFieldProps {
     inputValue: string;
     onInputValueChange: (value: string) => void;
     onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onActivation?: () => void;
+    onActivationChange?: (active: boolean) => void;
 }
 export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/ChipsInput/ChipInputField.js

@@ -1,24 +1,27 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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 { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
 import styled from 'styled-components';
 import { LoadingIndicator } from '../LoadingIndicator';
 import { useFocusVisibleRef } from '../common';
+import { IconButton } from '../Button';
+import { SystemIcons } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  height: 20px;\n\n  &.small {\n    right: 8px;\n    bottom: 14px;\n  }\n\n  &.medium {\n    bottom: 18px;\n  }\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\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus {\n    outline-offset: -4px;\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);
+var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n"])));
+export var ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
+export var ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
+export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
+export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\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), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.warning_500, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
 export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
       items = _ref.items,
@@ -36,7 +39,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onRemoveItem = _ref.onRemoveItem,
       onInputValueChange = _ref.onInputValueChange,
       onInputKeyDown = _ref.onInputKeyDown,
-      onActivation = _ref.onActivation,
+      onActivationChange = _ref.onActivationChange,
       inputValue = _ref.inputValue;
   var containerRef = React.useRef(null);
   var inputRef = useFocusVisibleRef([containerRef], ref);
@@ -45,11 +48,13 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * */
 
   React.useEffect(function () {
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-      containerRef.current.scrollLeft = containerRef.current.scrollWidth;
+    if (inputRef.current) {
+      inputRef.current.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
     }
-  }, [containerRef, items]);
+  }, [containerRef, inputRef, items]);
   /**
    * Remove last cheap on backspace
    * */
@@ -57,13 +62,41 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;
 
-    if (e.key === 'Backspace' && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) === '') {
-      e.stopPropagation();
+    if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
       onRemoveItem(items[items.length - 1], items.length - 1);
-      return;
+    } else {
+      onInputKeyDown(e);
     }
+  };
+
+  var handleItemRemove = function handleItemRemove(event, item, index) {
+    var _inputRef$current2;
+
+    onRemoveItem(item, index);
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
+      focusVisible: event.detail !== 1
+    });
+  };
+
+  var handleInputClear = function handleInputClear(e) {
+    var _inputRef$current3;
 
-    onInputKeyDown(e);
+    onInputValueChange('');
+    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
+      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    });
+  };
+
+  var handleContainerKeyDown = function handleContainerKeyDown(e) {
+    if (!containerRef.current || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
+    var items = containerRef.current.querySelectorAll('[tabindex="0"]');
+    var currentIndex = Array.from(items).indexOf(e.target);
+    var direction = e.key === 'ArrowLeft' ? -1 : 1;
+    var item = items[currentIndex + direction];
+    item === null || item === void 0 ? void 0 : item.focus({
+      focusVisible: true
+    });
+    onActivationChange && onActivationChange(false);
   };
 
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
@@ -71,18 +104,11 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
       ref: containerRef,
       id: inputId,
-      tabIndex: disabled ? -1 : 0,
-      onKeyDown: function onKeyDown(e) {
-        var _inputRef$current2;
-
-        return e.key === 'Enter' && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
-          focusVisible: true
-        }));
-      },
+      onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
-        var _inputRef$current3;
+        var _inputRef$current4;
 
-        return !disabled && ((_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus());
+        return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
       },
       className: cls,
       children: /*#__PURE__*/_jsxs(ChipInputContentContainer, {
@@ -93,35 +119,49 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             disabled: chip.disabled || disabled,
             variant: chip.variant || 'normal',
             text: chip.label,
-            onRemove: function onRemove() {
-              return onRemoveItem(chip, index);
+            onRemove: function onRemove(e) {
+              return handleItemRemove(e, chip, index);
             }
           }, "chip_".concat(index));
-        }), /*#__PURE__*/_jsx(ChipInputEl, {
-          ref: inputRef,
-          type: "text",
-          tabIndex: -1,
-          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();
-          },
-          onFocus: function onFocus(e) {
-            return onActivation && onActivation();
-          }
+        }), /*#__PURE__*/_jsxs(ChipInputBoundItems, {
+          children: [/*#__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();
+              onActivationChange && onActivationChange(true);
+            }
+          }), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+            action: handleInputClear,
+            ref: function ref(_ref2) {
+              _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({
+                block: 'nearest',
+                inline: 'nearest'
+              });
+            },
+            useTransparentBackground: true,
+            shape: 'circular',
+            style: {
+              marginLeft: '-8px'
+            },
+            variant: 'secondary',
+            children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
+          }), loading && /*#__PURE__*/_jsx(Loading, {
+            className: size,
+            children: /*#__PURE__*/_jsx(LoadingIndicator, {
+              size: Size.Small,
+              color: COLORS.neutral_600
+            })
+          })]
         })]
       })
-    }), 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",
@@ -153,6 +193,6 @@ ChipInputField.propTypes = {
   inputValue: _pt.string.isRequired,
   onInputValueChange: _pt.func.isRequired,
   onInputKeyDown: _pt.func.isRequired,
-  onActivation: _pt.func
+  onActivationChange: _pt.func
 };
 //# sourceMappingURL=ChipInputField.js.map