@laerdal/life-react-components 3.0.1-dev.9 → 3.1.0

package/dist/ChipsInput/ChipInput.js

@@ -5,13 +5,13 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"];
 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 React libraries.
  */
 import * as React from 'react';
 
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 import { Size } from '../types';
 import { ChipInputContainer, ChipInputField } from './ChipInputField';
@@ -46,16 +46,16 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     chipItems = _React$useState6[0],
     setChipItems = _React$useState6[1];
 
-  /**
-   * Sets initial values for the chips.
+  /**
+   * 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
+  /**
+   * Set chip items for chip input field
    * */
   React.useEffect(function () {
     setChipItems(chips.map(function (chip, index) {
@@ -76,9 +76,9 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
 
-  /**
-   * Adds a chip to the chip list.
-   * @param event - Event handler from the key down event.
+  /**
+   * 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) {
@@ -89,9 +89,9 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   };
 
-  /**
-   * Removes a specific chip from the chip list.
-   * @param index - Index of the chip that needs to be removed.
+  /**
+   * 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);
@@ -100,8 +100,8 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onValueChange(newChips);
   };
 
-  /**
-   * Return Chip Input component.
+  /**
+   * Return Chip Input component.
    */
   return /*#__PURE__*/_jsx(ChipInputField, _objectSpread({
     inputId: inputId,

package/dist/ChipsInput/ChipInput.js.map

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

package/dist/ChipsInput/ChipInputField.cjs

@@ -61,8 +61,8 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     return inputRef.current;
   }, [inputRef]);
 
-  /**
-   * Scroll container to last item on change
+  /**
+   * Scroll container to last item on change
    * */
   _react.default.useEffect(function () {
     if (inputRef.current && document.activeElement === inputRef.current) {
@@ -73,8 +73,8 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     }
   }, [containerRef, inputRef, items]);
 
-  /**
-   * Remove last cheap on backspace
+  /**
+   * Remove last cheap on backspace
    * */
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;

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';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${COLORS.black} !important;\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  :focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n    outline: none;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\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';\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-bottom: 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  &.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-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\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                  focusOnClick={true}\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            <SystemIcons.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.d.ts

@@ -1,25 +1,25 @@
-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 ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
-    inputId: string;
-    items: ChipItem[];
-    disabled?: boolean;
-    placeholder?: string;
-    altPlaceholder?: string;
-    multiLine?: boolean;
-    size?: Size.Large | Size.Medium | Size.Small;
-    loading?: boolean;
-    required?: boolean;
-    validationMessage?: string;
-    onRemoveItem: (item: ChipItem, index: number) => void;
-    inputValue: string;
-    onInputValueChange: (value: string) => void;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onActivationChange?: (active: boolean) => void;
-}
-export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;
+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 ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
+    inputId: string;
+    items: ChipItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    altPlaceholder?: string;
+    multiLine?: boolean;
+    size?: Size.Large | Size.Medium | Size.Small;
+    loading?: boolean;
+    required?: boolean;
+    validationMessage?: string;
+    onRemoveItem: (item: ChipItem, index: number) => void;
+    inputValue: string;
+    onInputValueChange: (value: string) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onActivationChange?: (active: boolean) => void;
+}
+export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/ChipsInput/ChipInputField.js

@@ -51,8 +51,8 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return inputRef.current;
   }, [inputRef]);
 
-  /**
-   * Scroll container to last item on change
+  /**
+   * Scroll container to last item on change
    * */
   React.useEffect(function () {
     if (inputRef.current && document.activeElement === inputRef.current) {
@@ -63,8 +63,8 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [containerRef, inputRef, items]);
 
-  /**
-   * Remove last cheap on backspace
+  /**
+   * Remove last cheap on backspace
    * */
   var handleInputKeyDown = function handleInputKeyDown(e) {
     var _inputRef$current;

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","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","Default","label","stopPropagation","marginLeft","critical_400"],"sources":["../../src/ChipsInput/ChipInputField.tsx"],"sourcesContent":["import React from 'react';\r\nimport {ChipItem} from './ChipInputTypes';\r\nimport {Size, States} from '../types';\r\nimport {InputChip} from '../Chips';\r\nimport {ErrorMessage} from '../InputFields';\r\nimport {\r\n  COLORS,\r\n  ComponentMStyling,\r\n  ComponentSStyling,\r\n  ComponentTextStyle,\r\n  focusStyles,\r\n  scrollBarStyling\r\n} from '../styles';\r\nimport styled from 'styled-components';\r\nimport {LoadingIndicator} from '../LoadingIndicator';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {IconButton} from '../Button';\r\nimport {SystemIcons} from '../icons';\r\n\r\nconst Wrapper = styled.div`\r\n  position: relative;\r\n`;\r\n\r\nconst Loading = styled.div`\r\n  height: 20px;\r\n  width: 20px;\r\n`;\r\n\r\nexport const ChipInputBoundItems = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  gap: 8px;\r\n  flex: 1;\r\n  min-width: 40px;\r\n`;\r\n\r\nexport const ChipInputContentContainer = styled.div`\r\n  width: 100%;\r\n  background: transparent;\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  column-gap: 8px;\r\n  margin-right: 6px;\r\n  padding-right: 10px;\r\n  padding-left: 16px;\r\n  flex-wrap: nowrap;\r\n  overflow-x: scroll;\r\n  min-height: 48px;\r\n\r\n  ${scrollBarStyling(Size.Small)}\r\n  ::-webkit-scrollbar:horizontal {\r\n    display: none;\r\n  }\r\n\r\n  .action-right:focus,\r\n  button:focus {\r\n    outline-offset: -4px !important;\r\n  }\r\n`;\r\n\r\nexport const ChipInputEl = styled.input`\r\n  border: none;\r\n  outline: none;\r\n\r\n  height: 40px;\r\n  min-width: 40px;\r\n  display: inline-flex;\r\n  flex: 1;\r\n  background: transparent;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\r\n  color: ${COLORS.black} !important;\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n  }\r\n`;\r\n\r\nexport const ChipInputContainer = styled.div`\r\n  width: 100%;\r\n  height: auto;\r\n  border-radius: 4px;\r\n  margin-bottom: 4px;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  background-color: ${COLORS.white};\r\n  box-sizing: border-box;\r\n  cursor: text;\r\n  outline: none;\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    padding: 4px 0;\r\n    min-height: 56px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\r\n    }\r\n  }\r\n\r\n  &.multiline.medium {\r\n    ${ChipInputContentContainer} {\r\n      max-height: calc(48px * 3);\r\n      flex-wrap: wrap;\r\n      overflow-y: auto;\r\n      overflow-x: unset;\r\n    }\r\n  }\r\n\r\n  &.focus-visible-within,\r\n  :focus {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  &.disabled {\r\n    ${ChipInputContentContainer} {\r\n      pointer-events: none;\r\n    }\r\n\r\n    cursor: not-allowed;\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n    outline: none;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,  'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  items: ChipItem[];\r\n  disabled?: boolean;\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n  multiLine?: boolean;\r\n  size?: Size.Large | Size.Medium | Size.Small;\r\n  loading?: boolean;\r\n  required?: boolean;\r\n\r\n  validationMessage?: string;\r\n\r\n  onRemoveItem: (item: ChipItem, index: number) => void;\r\n  inputValue: string;\r\n  onInputValueChange: (value: string) => void;\r\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\r\n  onActivationChange?: (active: boolean) => void;\r\n}\r\n\r\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(\r\n  (\r\n    {\r\n      inputId,\r\n      items,\r\n      disabled = false,\r\n      placeholder,\r\n      altPlaceholder,\r\n      multiLine = true,\r\n      size = Size.Medium,\r\n      validationMessage,\r\n      loading,\r\n      onRemoveItem,\r\n      onInputValueChange,\r\n      onInputKeyDown,\r\n      onActivationChange,\r\n      inputValue,\r\n      required,\r\n      onBlur,\r\n      ...rest\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef]);\r\n    \r\n    React.useImperativeHandle(ref, () => inputRef.current, [inputRef])\r\n\r\n    /**\r\n     * Scroll container to last item on change\r\n     * */\r\n    React.useEffect(() => {\r\n      if (inputRef.current && document.activeElement === inputRef.current) {\r\n        inputRef.current.scrollIntoView({\r\n          block: 'nearest',\r\n          inline: 'nearest',\r\n        });\r\n      }\r\n    }, [containerRef, inputRef, items]);\r\n\r\n    /**\r\n     * Remove last cheap on backspace\r\n     * */\r\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\r\n        onRemoveItem(items[items.length - 1], items.length - 1);\r\n      } else {\r\n        onInputKeyDown(e);\r\n      }\r\n    };\r\n\r\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\r\n      onRemoveItem(item, index);\r\n      inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\r\n    };\r\n\r\n    const handleInputClear = (e: any) => {\r\n      onInputValueChange('');\r\n      inputRef.current?.focus({focusVisible: e?.detail !== 1} as any);\r\n    };\r\n\r\n    const handleContainerKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\r\n\r\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\r\n      const currentIndex = Array.from(items).indexOf(e.target as any);\r\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\r\n      const item = items[currentIndex + direction];\r\n      item?.focus({focusVisible: true} as any);\r\n\r\n      onActivationChange && onActivationChange(false);\r\n    };\r\n\r\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\r\n\r\n    return (\r\n      <Wrapper onBlur={onBlur}>\r\n        <ChipInputContainer\r\n          data-testid=\"chip-input-container\"\r\n          ref={containerRef}\r\n          onKeyDown={handleContainerKeyDown}\r\n          onClick={() => !disabled && inputRef.current?.focus()}\r\n          className={cls}>\r\n          <ChipInputContentContainer>\r\n            {items?.map((chip: ChipItem, index: number) => (\r\n              <InputChip\r\n                key={`chip_${index}`}\r\n                icon={chip?.icon}\r\n                size={size}\r\n                disabled={chip.disabled || disabled}\r\n                variant={chip.variant || States.Default}\r\n                text={chip.label}\r\n                onRemove={(e) => handleItemRemove(e, chip, index)}\r\n              />\r\n            ))}\r\n            <ChipInputBoundItems>\r\n              <ChipInputEl\r\n                ref={inputRef}\r\n                type=\"text\"\r\n                id={inputId}\r\n                required={required}\r\n                tabIndex={disabled ? -1 : 0}\r\n                value={inputValue}\r\n                onChange={(e) => onInputValueChange(e.target.value)}\r\n                onKeyDown={handleInputKeyDown}\r\n                placeholder={items?.length === 0 ? placeholder : altPlaceholder || ''}\r\n                onClick={(e) => {\r\n                  e.stopPropagation();\r\n                  onActivationChange && onActivationChange(true);\r\n                }}\r\n                {...rest}\r\n              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\r\n                  id={`clear-btn-${inputId}`}\r\n                  dataTestId={`clear-btn-${inputId}`}\r\n                  action={handleInputClear}\r\n                  ref={(ref) => {\r\n                    ref?.scrollIntoView({\r\n                      block: 'nearest',\r\n                      inline: 'nearest',\r\n                    });\r\n                  }}\r\n                  useTransparentBackground={true}\r\n                  shape={'circular'}\r\n                  style={{marginLeft: '-8px'}}\r\n                  focusOnClick={true}\r\n                  variant={'secondary'}>\r\n                  <SystemIcons.Clear/>\r\n                </IconButton>\r\n              )}\r\n\r\n              {loading && (\r\n                <Loading className={size}>\r\n                  <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\n"],"mappings":"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"}
+{"version":3,"file":"ChipInputField.js","names":["React","Size","States","InputChip","ErrorMessage","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","onBlur","rest","containerRef","useRef","inputRef","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","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';\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-bottom: 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  &.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-${inputId}`}\n                  dataTestId={`clear-btn-${inputId}`}\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                  focusOnClick={true}\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            <SystemIcons.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/ChipInputTypes.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputTypes.cjs","names":[],"sources":["../../src/ChipsInput/ChipInputTypes.ts"],"sourcesContent":["import {Size} from '../types';\r\nimport {ChipVariant} from '../Chips/ChipTypes';\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  values: string[];\r\n  icon?: React.ReactNode;\r\n  variants?: ChipVariant[];\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n\r\n  onValueChange: (chips: string[]) => void;\r\n  multiLine?: boolean;\r\n  disabled?: boolean;\r\n  size?: Size.Medium | Size.Small;\r\n\r\n  validationMessage?: string;\r\n\r\n  required?: boolean;\r\n\r\n  autoSave?: boolean;\r\n}\r\n\r\n\r\nexport interface ChipItem {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  disabled?: boolean;\r\n  variant?: ChipVariant;\r\n}\r\n\r\n"],"mappings":""}
+{"version":3,"file":"ChipInputTypes.cjs","names":[],"sources":["../../src/ChipsInput/ChipInputTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {ChipVariant} from '../Chips/ChipTypes';\nimport React from \"react\";\n\n\nexport interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  values: string[];\n  icon?: React.ReactNode;\n  variants?: ChipVariant[];\n  placeholder?: string;\n  altPlaceholder?: string;\n\n  onValueChange: (chips: string[]) => void;\n  multiLine?: boolean;\n  disabled?: boolean;\n  size?: Size.Medium | Size.Small;\n\n  validationMessage?: string;\n\n  required?: boolean;\n\n  autoSave?: boolean;\n}\n\n\nexport interface ChipItem {\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  variant?: ChipVariant;\n}\n\n"],"mappings":""}

package/dist/ChipsInput/ChipInputTypes.d.ts

@@ -1,24 +1,24 @@
-import { Size } from '../types';
-import { ChipVariant } from '../Chips/ChipTypes';
-import React from "react";
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
-    inputId: string;
-    values: string[];
-    icon?: React.ReactNode;
-    variants?: ChipVariant[];
-    placeholder?: string;
-    altPlaceholder?: string;
-    onValueChange: (chips: string[]) => void;
-    multiLine?: boolean;
-    disabled?: boolean;
-    size?: Size.Medium | Size.Small;
-    validationMessage?: string;
-    required?: boolean;
-    autoSave?: boolean;
-}
-export interface ChipItem {
-    label: string;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-    variant?: ChipVariant;
-}
+import { Size } from '../types';
+import { ChipVariant } from '../Chips/ChipTypes';
+import React from "react";
+export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
+    inputId: string;
+    values: string[];
+    icon?: React.ReactNode;
+    variants?: ChipVariant[];
+    placeholder?: string;
+    altPlaceholder?: string;
+    onValueChange: (chips: string[]) => void;
+    multiLine?: boolean;
+    disabled?: boolean;
+    size?: Size.Medium | Size.Small;
+    validationMessage?: string;
+    required?: boolean;
+    autoSave?: boolean;
+}
+export interface ChipItem {
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    variant?: ChipVariant;
+}

package/dist/ChipsInput/ChipInputTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInputTypes.js","names":[],"sources":["../../src/ChipsInput/ChipInputTypes.ts"],"sourcesContent":["import {Size} from '../types';\r\nimport {ChipVariant} from '../Chips/ChipTypes';\r\nimport React from \"react\";\r\n\r\n\r\nexport interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\r\n  inputId: string;\r\n  values: string[];\r\n  icon?: React.ReactNode;\r\n  variants?: ChipVariant[];\r\n  placeholder?: string;\r\n  altPlaceholder?: string;\r\n\r\n  onValueChange: (chips: string[]) => void;\r\n  multiLine?: boolean;\r\n  disabled?: boolean;\r\n  size?: Size.Medium | Size.Small;\r\n\r\n  validationMessage?: string;\r\n\r\n  required?: boolean;\r\n\r\n  autoSave?: boolean;\r\n}\r\n\r\n\r\nexport interface ChipItem {\r\n  label: string;\r\n  icon?: React.ReactNode;\r\n  disabled?: boolean;\r\n  variant?: ChipVariant;\r\n}\r\n\r\n"],"mappings":""}
+{"version":3,"file":"ChipInputTypes.js","names":[],"sources":["../../src/ChipsInput/ChipInputTypes.ts"],"sourcesContent":["import {Size} from '../types';\nimport {ChipVariant} from '../Chips/ChipTypes';\nimport React from \"react\";\n\n\nexport interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {\n  inputId: string;\n  values: string[];\n  icon?: React.ReactNode;\n  variants?: ChipVariant[];\n  placeholder?: string;\n  altPlaceholder?: string;\n\n  onValueChange: (chips: string[]) => void;\n  multiLine?: boolean;\n  disabled?: boolean;\n  size?: Size.Medium | Size.Small;\n\n  validationMessage?: string;\n\n  required?: boolean;\n\n  autoSave?: boolean;\n}\n\n\nexport interface ChipItem {\n  label: string;\n  icon?: React.ReactNode;\n  disabled?: boolean;\n  variant?: ChipVariant;\n}\n\n"],"mappings":""}

package/dist/ChipsInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/ChipsInput/index.ts"],"sourcesContent":["export * from './ChipDropdownInput';\r\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/ChipsInput/index.ts"],"sourcesContent":["export * from './ChipDropdownInput';\n"],"mappings":";;;;;AAAA;AAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}

package/dist/ChipsInput/index.d.ts

@@ -1 +1 @@
-export * from './ChipDropdownInput';
+export * from './ChipDropdownInput';

package/dist/ChipsInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ChipsInput/index.ts"],"sourcesContent":["export * from './ChipDropdownInput';\r\n"],"mappings":"AAAA,cAAc,qBAAqB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ChipsInput/index.ts"],"sourcesContent":["export * from './ChipDropdownInput';\n"],"mappings":"AAAA,cAAc,qBAAqB"}

package/dist/Dropdown/BasicDropdown.cjs

@@ -21,7 +21,7 @@ var _TooltipOverflow = _interopRequireDefault(require("../Tooltips/TooltipOverfl
 var _types = require("../types");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "onBlur", "dataTestId", "onSelect", "textOverflow"];
+var _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -52,6 +52,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     margin = props.margin,
     minWidth = props.minWidth,
     className = props.className,
+    overflowTooltipPosition = props.overflowTooltipPosition,
     onBlur = props.onBlur,
     dataTestId = props.dataTestId,
     onSelect = props.onSelect,
@@ -158,7 +159,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   var cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.Dropdown, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.DropdownContainer, {
       ref: containerRef,
       "aria-expanded": isOpen ? true : false,
       "aria-activedescendant": activeDescendant,
@@ -172,7 +173,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       margin: margin,
       onBlur: handleBlur,
       minWidth: minWidth,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.StyledField, _objectSpread(_objectSpread({
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.DropdownInputFieldStyles, _objectSpread(_objectSpread({
         ref: styledFieldRef,
         className: cls,
         onMouseDown: _common.defaultOnMouseDownHandler,
@@ -198,7 +199,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
         onKeyDown: handleKeyDown,
         minWidth: minWidth
       }, rest), {}, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.InputField, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CommonStyling.DropdownInputField, {
           ref: inputRef,
           type: "search",
           ellipsis: textOverflow == 'ellipsis',
@@ -211,12 +212,12 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           tabIndex: -1,
           disabled: disabled || false
         }), !isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
+          position: overflowTooltipPosition,
           input: inputRef,
           withArrow: true,
           maxWidth: "100%",
           size: size,
           align: "end",
-          position: "bottom",
           children: getDisplayItems()
         }) : null, isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoadingIndicator.LoadingIndicator, {
           size: _types.Size.Small,
@@ -281,7 +282,7 @@ var BasicDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
     })]
   });
 });
-BasicDropdown.propTypes = (0, _defineProperty2.default)({
+BasicDropdown.propTypes = {
   list: _propTypes.default.array.isRequired,
   itemsType: _propTypes.default.oneOf(['normal', 'checkbox', 'radio']),
   action: _propTypes.default.func,
@@ -303,10 +304,11 @@ BasicDropdown.propTypes = (0, _defineProperty2.default)({
   margin: _propTypes.default.string,
   minWidth: _propTypes.default.string,
   textOverflow: _propTypes.default.oneOf(['ellipsis', 'default']),
+  overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
   multiSelect: _propTypes.default.oneOf([false]),
   value: _propTypes.default.string,
   onSelect: _propTypes.default.func.isRequired
-}, "list", _propTypes.default.array.isRequired);
+};
 var _default = BasicDropdown;
 exports.default = _default;
 //# sourceMappingURL=BasicDropdown.cjs.map