@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.3

package/dist/ChipsInput/ChipInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.cjs","names":["ChipInput","React","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Size","Medium","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"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.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\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                    ref={ref}\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                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}
+{"version":3,"file":"ChipInput.cjs","names":["ChipInput","React","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Size","Medium","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"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.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\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                    ref={ref}\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                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInput.js

@@ -3,65 +3,58 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 /**
  * 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 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var values = _ref.values,
-      inputId = _ref.inputId,
-      variants = _ref.variants,
-      icon = _ref.icon,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      altPlaceholder = _ref.altPlaceholder,
-      validationMessage = _ref.validationMessage,
-      onValueChange = _ref.onValueChange,
-      _ref$multiLine = _ref.multiLine,
-      multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    inputId = _ref.inputId,
+    variants = _ref.variants,
+    icon = _ref.icon,
+    placeholder = _ref.placeholder,
+    disabled = _ref.disabled,
+    altPlaceholder = _ref.altPlaceholder,
+    validationMessage = _ref.validationMessage,
+    onValueChange = _ref.onValueChange,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      chips = _React$useState2[0],
-      setChips = _React$useState2[1];
-
+    _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];
-
+    _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];
+    _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 {
@@ -72,11 +65,11 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       };
     }));
   }, [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();
@@ -85,24 +78,21 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setValue('');
     }
   };
+
   /**
    * Removes a specific chip from the chip list.
    * @param index - Index of the chip that needs to be removed.
    */
-
-
   var onRemoveChip = function onRemoveChip(index) {
     var newChips = _toConsumableArray(chips);
-
     newChips.splice(index, 1);
     setChips(newChips);
     onValueChange(newChips);
   };
+
   /**
    * Return Chip Input component.
    */
-
-
   return /*#__PURE__*/_jsx(ChipInputField, _objectSpread({
     inputId: inputId,
     ref: ref,

package/dist/ChipsInput/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"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.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\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                    ref={ref}\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                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"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.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\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                    ref={ref}\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                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -1,106 +1,70 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ChipInputField = exports.ChipInputEl = exports.ChipInputContentContainer = exports.ChipInputContainer = exports.ChipInputBoundItems = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 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 _excluded = ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 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 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.ChipInputBoundItems = ChipInputBoundItems;
-
 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,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
-
 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\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  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), _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.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,
-      _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,
-      validationMessage = _ref.validationMessage,
-      loading = _ref.loading,
-      onRemoveItem = _ref.onRemoveItem,
-      onInputValueChange = _ref.onInputValueChange,
-      onInputKeyDown = _ref.onInputKeyDown,
-      onActivationChange = _ref.onActivationChange,
-      inputValue = _ref.inputValue,
-      required = _ref.required,
-      onBlur = _ref.onBlur,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    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,
+    validationMessage = _ref.validationMessage,
+    loading = _ref.loading,
+    onRemoveItem = _ref.onRemoveItem,
+    onInputValueChange = _ref.onInputValueChange,
+    onInputKeyDown = _ref.onInputKeyDown,
+    onActivationChange = _ref.onActivationChange,
+    inputValue = _ref.inputValue,
+    required = _ref.required,
+    onBlur = _ref.onBlur,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var containerRef = _react.default.useRef(null);
-
   var inputRef = (0, _common.useFocusVisibleRef)([containerRef]);
-
   _react.default.useImperativeHandle(ref, function () {
     return inputRef.current;
   }, [inputRef]);
+
   /**
    * Scroll container to last item on change
    * */
-
-
   _react.default.useEffect(function () {
     if (inputRef.current && document.activeElement === inputRef.current) {
       inputRef.current.scrollIntoView({
@@ -109,39 +73,32 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       });
     }
   }, [containerRef, inputRef, items]);
+
   /**
    * Remove last cheap on backspace
    * */
-
-
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;
-
     if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
       onRemoveItem(items[items.length - 1], items.length - 1);
     } else {
       onInputKeyDown(e);
     }
   };
-
   var handleItemRemove = function handleItemRemove(event, item, index) {
     var _inputRef$current2;
-
     onRemoveItem(item, index);
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
       focusVisible: event.detail !== 1
     });
   };
-
   var handleInputClear = function handleInputClear(e) {
     var _inputRef$current3;
-
     onInputValueChange('');
     (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
       focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
     });
   };
-
   var handleContainerKeyDown = function handleContainerKeyDown(e) {
     if (!containerRef.current || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
     var items = containerRef.current.querySelectorAll('[tabindex="0"]');
@@ -153,7 +110,6 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     });
     onActivationChange && onActivationChange(false);
   };
-
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     onBlur: onBlur,
@@ -163,7 +119,6 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
         var _inputRef$current4;
-
         return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
       },
       className: cls,
@@ -230,7 +185,6 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     })]
   });
 });
-
 exports.ChipInputField = ChipInputField;
 ChipInputField.propTypes = {
   inputId: _propTypes.default.string.isRequired,

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","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","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} 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 {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\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,\n  button:focus {\n    outline-offset: -4px !important;\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  margin: 4px 0px;\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  &.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,\n  :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  &.invalid,\n  &.invalid:hover,\n  &.invalid: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\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\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  required?: boolean;\n\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  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === 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<HTMLDivElement>) => {\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' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\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                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  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        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"ChipInputField.cjs","names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","scrollBarStyling","Size","Small","ChipInputEl","input","ComponentMStyling","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","ComponentSStyling","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","useFocusVisibleRef","useImperativeHandle","current","useEffect","document","activeElement","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","States","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size, States} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage} 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 {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\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,\n  button:focus {\n    outline-offset: -4px !important;\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  margin: 4px 0px;\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  &.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,\n  :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  &.invalid,\n  &.invalid:hover,\n  &.invalid: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\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\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  required?: boolean;\n\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  (\n    {\n      inputId,\n      items,\n      disabled = false,\n      placeholder,\n      altPlaceholder,\n      multiLine = true,\n      size = Size.Medium,\n      validationMessage,\n      loading,\n      onRemoveItem,\n      onInputValueChange,\n      onInputKeyDown,\n      onActivationChange,\n      inputValue,\n      required,\n      onBlur,\n      ...rest\n    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef]);\n    \n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === 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<HTMLDivElement>) => {\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' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper onBlur={onBlur}>\n        <ChipInputContainer\n          data-testid=\"chip-input-container\"\n          ref={containerRef}\n          onKeyDown={handleContainerKeyDown}\n          onClick={() => !disabled && inputRef.current?.focus()}\n          className={cls}>\n          <ChipInputContentContainer>\n            {items?.map((chip: ChipItem, index: number) => (\n              <InputChip\n                key={`chip_${index}`}\n                icon={chip?.icon}\n                size={size}\n                disabled={chip.disabled || disabled}\n                variant={chip.variant || States.Default}\n                text={chip.label}\n                onRemove={(e) => handleItemRemove(e, chip, index)}\n              />\n            ))}\n            <ChipInputBoundItems>\n              <ChipInputEl\n                ref={inputRef}\n                type=\"text\"\n                id={inputId}\n                required={required}\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                {...rest}\n              />\n              {inputValue && !disabled && (\n                <IconButton\n                  id=\"clear-btn\"\n                  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        {validationMessage && (\n          <ErrorMessage>\n            <TechnicalWarning color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )}\n      </Wrapper>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInputField.js

@@ -3,13 +3,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { Size, States } from '../types';
 import { InputChip } from '../Chips';
@@ -31,35 +27,34 @@ export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _t
 export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin: 4px 0px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
 export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
-      items = _ref.items,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      placeholder = _ref.placeholder,
-      altPlaceholder = _ref.altPlaceholder,
-      _ref$multiLine = _ref.multiLine,
-      multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      validationMessage = _ref.validationMessage,
-      loading = _ref.loading,
-      onRemoveItem = _ref.onRemoveItem,
-      onInputValueChange = _ref.onInputValueChange,
-      onInputKeyDown = _ref.onInputKeyDown,
-      onActivationChange = _ref.onActivationChange,
-      inputValue = _ref.inputValue,
-      required = _ref.required,
-      onBlur = _ref.onBlur,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    items = _ref.items,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    placeholder = _ref.placeholder,
+    altPlaceholder = _ref.altPlaceholder,
+    _ref$multiLine = _ref.multiLine,
+    multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    validationMessage = _ref.validationMessage,
+    loading = _ref.loading,
+    onRemoveItem = _ref.onRemoveItem,
+    onInputValueChange = _ref.onInputValueChange,
+    onInputKeyDown = _ref.onInputKeyDown,
+    onActivationChange = _ref.onActivationChange,
+    inputValue = _ref.inputValue,
+    required = _ref.required,
+    onBlur = _ref.onBlur,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var containerRef = React.useRef(null);
   var inputRef = useFocusVisibleRef([containerRef]);
   React.useImperativeHandle(ref, function () {
     return inputRef.current;
   }, [inputRef]);
+
   /**
    * Scroll container to last item on change
    * */
-
   React.useEffect(function () {
     if (inputRef.current && document.activeElement === inputRef.current) {
       inputRef.current.scrollIntoView({
@@ -68,38 +63,32 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
   }, [containerRef, inputRef, items]);
+
   /**
    * Remove last cheap on backspace
    * */
-
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;
-
     if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
       onRemoveItem(items[items.length - 1], items.length - 1);
     } else {
       onInputKeyDown(e);
     }
   };
-
   var handleItemRemove = function handleItemRemove(event, item, index) {
     var _inputRef$current2;
-
     onRemoveItem(item, index);
     (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus({
       focusVisible: event.detail !== 1
     });
   };
-
   var handleInputClear = function handleInputClear(e) {
     var _inputRef$current3;
-
     onInputValueChange('');
     (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus({
       focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
     });
   };
-
   var handleContainerKeyDown = function handleContainerKeyDown(e) {
     if (!containerRef.current || e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return;
     var items = containerRef.current.querySelectorAll('[tabindex="0"]');
@@ -111,7 +100,6 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     });
     onActivationChange && onActivationChange(false);
   };
-
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsxs(Wrapper, {
     onBlur: onBlur,
@@ -121,7 +109,6 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
         var _inputRef$current4;
-
         return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
       },
       className: cls,