@laerdal/life-react-components 1.8.0-dev.7 → 1.8.0-dev.8

package/dist/ChipsInput/ChipInput.js.map

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

package/dist/ChipsInput/ChipInputField.cjs

@@ -53,7 +53,7 @@ var ChipInputEl = _styledComponents.default.input(_templateObject5 || (_template
 
 exports.ChipInputEl = ChipInputEl;
 
-var ChipInputContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.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\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);
+var ChipInputContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n\n\n"])), _styles.COLORS.neutral_400, _styles.COLORS.white, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), ChipInputEl, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputEl, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_600), ChipInputContentContainer, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.warning_500, _styles.COLORS.critical_500, ChipInputContentContainer, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
 
 exports.ChipInputContainer = ChipInputContainer;
 
@@ -68,6 +68,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+      validationType = _ref.validationType,
       validationMessage = _ref.validationMessage,
       loading = _ref.loading,
       onRemoveItem = _ref.onRemoveItem,
@@ -85,7 +86,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
    * */
 
   _react.default.useEffect(function () {
-    if (inputRef.current) {
+    if (inputRef.current && document.activeElement === inputRef.current) {
       inputRef.current.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
@@ -137,7 +138,7 @@ 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' : '');
+  var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
       ref: containerRef,
@@ -154,7 +155,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
             icon: chip === null || chip === void 0 ? void 0 : chip.icon,
             size: size,
             disabled: chip.disabled || disabled,
-            variant: chip.variant || _types.States.Default,
+            variant: chip.variant || 'normal',
             text: chip.label,
             onRemove: function onRemove(e) {
               return handleItemRemove(e, chip, index);
@@ -201,7 +202,14 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
           })]
         })]
       })
-    }), validationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
+        size: "20px",
+        color: _styles.COLORS.critical_500
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
         color: _styles.COLORS.critical_400
@@ -222,6 +230,7 @@ ChipInputField.propTypes = {
   multiLine: _propTypes.default.bool,
   loading: _propTypes.default.bool,
   required: _propTypes.default.bool,
+  validationType: _propTypes.default.oneOf(['error', 'warning']),
   validationMessage: _propTypes.default.string,
   onRemoveItem: _propTypes.default.func.isRequired,
   inputValue: _propTypes.default.string.isRequired,

package/dist/ChipsInput/ChipInputField.cjs.map

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

package/dist/ChipsInput/ChipInputField.d.ts

@@ -15,6 +15,7 @@ export interface ChipInputFieldProps {
     size?: Size.Large | Size.Medium | Size.Small;
     loading?: boolean;
     required?: boolean;
+    validationType?: 'error' | 'warning';
     validationMessage?: string;
     onRemoveItem: (item: ChipItem, index: number) => void;
     inputValue: string;

package/dist/ChipsInput/ChipInputField.js

@@ -4,9 +4,9 @@ import _pt from "prop-types";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 import React from 'react';
-import { Size, States } from '../types';
+import { Size } from '../types';
 import { InputChip } from '../Chips';
-import { ErrorMessage } from '../InputFields/styling';
+import { ErrorMessage, WarningMessage } from '../InputFields/styling';
 import { TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';
 import styled from 'styled-components';
@@ -21,7 +21,7 @@ var Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplate
 export var ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
 export var ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
 export var ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), COLORS.black, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600));
-export var ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.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\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 ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n\n\n"])), COLORS.neutral_400, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ChipInputEl, ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputEl, ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600), ChipInputContentContainer, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.warning_500, COLORS.critical_500, ChipInputContentContainer, COLORS.neutral_100, COLORS.neutral_300);
 export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputId = _ref.inputId,
       items = _ref.items,
@@ -33,6 +33,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       multiLine = _ref$multiLine === void 0 ? true : _ref$multiLine,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? Size.Medium : _ref$size,
+      validationType = _ref.validationType,
       validationMessage = _ref.validationMessage,
       loading = _ref.loading,
       onRemoveItem = _ref.onRemoveItem,
@@ -48,7 +49,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * */
 
   React.useEffect(function () {
-    if (inputRef.current) {
+    if (inputRef.current && document.activeElement === inputRef.current) {
       inputRef.current.scrollIntoView({
         block: 'nearest',
         inline: 'nearest'
@@ -99,7 +100,7 @@ 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' : '');
+  var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationType || '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
       ref: containerRef,
@@ -116,7 +117,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             icon: chip === null || chip === void 0 ? void 0 : chip.icon,
             size: size,
             disabled: chip.disabled || disabled,
-            variant: chip.variant || States.Default,
+            variant: chip.variant || 'normal',
             text: chip.label,
             onRemove: function onRemove(e) {
               return handleItemRemove(e, chip, index);
@@ -163,7 +164,14 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           })]
         })]
       })
-    }), validationMessage && /*#__PURE__*/_jsxs(ErrorMessage, {
+    }), validationMessage && validationType === 'warning' ? /*#__PURE__*/_jsxs(WarningMessage, {
+      children: [/*#__PURE__*/_jsx(TechnicalWarning, {
+        size: "20px",
+        color: COLORS.critical_500
+      }), /*#__PURE__*/_jsx("span", {
+        children: validationMessage
+      })]
+    }) : validationType === 'error' && /*#__PURE__*/_jsxs(ErrorMessage, {
       children: [/*#__PURE__*/_jsx(TechnicalWarning, {
         size: "20px",
         color: COLORS.critical_400
@@ -182,6 +190,7 @@ ChipInputField.propTypes = {
   multiLine: _pt.bool,
   loading: _pt.bool,
   required: _pt.bool,
+  validationType: _pt.oneOf(['error', 'warning']),
   validationMessage: _pt.string,
   onRemoveItem: _pt.func.isRequired,
   inputValue: _pt.string.isRequired,

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","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","containerRef","useRef","inputRef","useEffect","current","scrollIntoView","block","inline","handleInputKeyDown","e","key","value","repeat","length","handleItemRemove","event","item","index","focus","focusVisible","detail","handleInputClear","handleContainerKeyDown","querySelectorAll","currentIndex","Array","from","indexOf","target","direction","cls","map","chip","icon","variant","Default","label","stopPropagation","marginLeft","critical_400"],"mappings":"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","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\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.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\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  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                                                                                         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                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.scrollIntoView({\n        block: 'nearest',\n        inline: 'nearest',\n      });\n    }\n  }, [containerRef, inputRef, items]);\n\n  /**\n   * Remove last cheap on backspace\n   * */\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n      onRemoveItem(items[items.length - 1], items.length - 1);\n    } else {\n      onInputKeyDown(e);\n    }\n  };\n\n  const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n    onRemoveItem(item, index);\n    inputRef.current?.focus({focusVisible: event.detail !== 1} as any);\n  };\n\n  const handleInputClear = (e: any) => {\n    onInputValueChange('');\n    inputRef.current?.focus({focusVisible: e?.detail !== 1} as any)\n  };\n\n\n  const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n    if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n    const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n    const currentIndex = Array.from(items).indexOf(e.target as any);\n    const direction = e.key === 'ArrowLeft' ? -1 : 1;\n    const item = items[currentIndex + direction];\n    item?.focus({focusVisible: true} as any);\n\n    onActivationChange && onActivationChange(false);\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer 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 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          <ChipInputBoundItems>\n            <ChipInputEl 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            {\n              inputValue && !disabled &&\n              <IconButton action={handleInputClear}\n                          ref={(ref) => {\n                            ref?.scrollIntoView({\n                              block: 'nearest',\n                              inline: 'nearest',\n                            });\n                          }}\n                          useTransparentBackground={true}\n                          shape={'circular'}\n                          style={{marginLeft: '-8px'}}\n                          variant={'secondary'}>\n                <SystemIcons.Clear/>\n              </IconButton>\n            }\n\n            {loading &&\n              <Loading className={size}>\n                <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n              </Loading>\n            }\n          </ChipInputBoundItems>\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n      {\n        validationMessage &&\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      }\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.js"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","InputChip","ErrorMessage","WarningMessage","TechnicalWarning","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","warning_500","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationType","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","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","label","stopPropagation","marginLeft","critical_400"],"mappings":";;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAAQC,IAAR,QAAmB,UAAnB;AACA,SAAQC,SAAR,QAAwB,UAAxB;AACA,SAAQC,YAAR,EAAsBC,cAAtB,QAA2C,wBAA3C;AACA,SAAQC,gBAAR,QAA+B,kCAA/B;AACA,SACEC,MADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,WALF,EAMEC,gBANF,QAOO,WAPP;AAQA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,gBAAR,QAA+B,qBAA/B;AACA,SAAyBC,kBAAzB,QAAkD,WAAlD;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,SAAQC,WAAR,QAA0B,UAA1B;;;AAEA,IAAMC,OAAO,GAAGL,MAAM,CAACM,GAAV,8FAAb;AAIA,IAAMC,OAAO,GAAGP,MAAM,CAACM,GAAV,0GAAb;AAMA,OAAO,IAAME,mBAAmB,GAAGR,MAAM,CAACM,GAAV,wLAAzB;AASP,OAAO,IAAMG,yBAAyB,GAAGT,MAAM,CAACM,GAAV,8eAclCP,gBAAgB,CAACV,IAAI,CAACqB,KAAN,CAdkB,CAA/B;AAyBP,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAV,+RAUpBjB,iBAAiB,CAACE,kBAAkB,CAACgB,OAApB,EAA6B,IAA7B,CAVG,EAWbnB,MAAM,CAACoB,KAXM,EAclBnB,iBAAiB,CAACE,kBAAkB,CAACkB,MAApB,EAA4BrB,MAAM,CAACsB,WAAnC,CAdC,CAAjB;AAkBP,OAAO,IAAMC,kBAAkB,GAAGjB,MAAM,CAACM,GAAV,kuCAICZ,MAAM,CAACwB,WAJR,EAKTxB,MAAM,CAACyB,KALE,EAY3BxB,iBAAiB,CAACE,kBAAkB,CAACgB,OAApB,EAA6BnB,MAAM,CAACoB,KAApC,CAZU,EAiBzBH,WAjByB,EAkBvBf,iBAAiB,CAACC,kBAAkB,CAACkB,MAApB,EAA4BrB,MAAM,CAACsB,WAAnC,CAlBM,EA0BzBL,WA1ByB,EA2BvBhB,iBAAiB,CAACE,kBAAkB,CAACkB,MAApB,EAA4BrB,MAAM,CAACsB,WAAnC,CA3BM,EAiCzBP,yBAjCyB,EA0CzBX,WA1CyB,EA8CGJ,MAAM,CAAC0B,WA9CV,EAkDG1B,MAAM,CAAC2B,WAlDV,EAwDG3B,MAAM,CAAC4B,WAxDV,EA8DG5B,MAAM,CAAC6B,YA9DV,EAkEzBd,yBAlEyB,EAuEGf,MAAM,CAAC8B,WAvEV,EAyElB9B,MAAM,CAAC+B,WAzEW,CAAxB;AAqGP,OAAO,IAAMC,cAAc,gBAAGtC,KAAK,CAACuC,UAAN,CAAwD,gBAiBIC,GAjBJ,EAiBY;AAAA,MAhBTC,OAgBS,QAhBTA,OAgBS;AAAA,MAfTC,KAeS,QAfTA,KAeS;AAAA,2BAdTC,QAcS;AAAA,MAdTA,QAcS,8BAdE,KAcF;AAAA,MAbTC,WAaS,QAbTA,WAaS;AAAA,MAZTC,cAYS,QAZTA,cAYS;AAAA,4BAXTC,SAWS;AAAA,MAXTA,SAWS,+BAXG,IAWH;AAAA,uBAVTC,IAUS;AAAA,MAVTA,IAUS,0BAVF9C,IAAI,CAAC+C,MAUH;AAAA,MATTC,cASS,QATTA,cASS;AAAA,MARTC,iBAQS,QARTA,iBAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTC,YAMS,QANTA,YAMS;AAAA,MALTC,kBAKS,QALTA,kBAKS;AAAA,MAJTC,cAIS,QAJTA,cAIS;AAAA,MAHTC,kBAGS,QAHTA,kBAGS;AAAA,MAFTC,UAES,QAFTA,UAES;AAAA,MADTC,QACS,QADTA,QACS;AAChG,MAAMC,YAAY,GAAG1D,KAAK,CAAC2D,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,QAAQ,GAAG9C,kBAAkB,CAAC,CAAC4C,YAAD,CAAD,EAAiBlB,GAAjB,CAAnC;AAEA;AACF;AACA;;AACExC,EAAAA,KAAK,CAAC6D,SAAN,CAAgB,YAAM;AACpB,QAAID,QAAQ,CAACE,OAAT,IAAoBC,QAAQ,CAACC,aAAT,KAA2BJ,QAAQ,CAACE,OAA5D,EAAqE;AACnEF,MAAAA,QAAQ,CAACE,OAAT,CAAiBG,cAAjB,CAAgC;AAC9BC,QAAAA,KAAK,EAAE,SADuB;AAE9BC,QAAAA,MAAM,EAAE;AAFsB,OAAhC;AAID;AACF,GAPD,EAOG,CAACT,YAAD,EAAeE,QAAf,EAAyBlB,KAAzB,CAPH;AASA;AACF;AACA;;AACE,MAAM0B,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAA8C;AAAA;;AACvE,QAAIA,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyB,uBAACV,QAAQ,CAACE,OAAV,8CAAC,kBAAkBS,KAAnB,CAAzB,IAAqD,CAACF,CAAC,CAACG,MAAxD,IAAkE9B,KAAK,CAAC+B,MAAN,GAAe,CAArF,EAAwF;AACtFrB,MAAAA,YAAY,CAACV,KAAK,CAACA,KAAK,CAAC+B,MAAN,GAAe,CAAhB,CAAN,EAA0B/B,KAAK,CAAC+B,MAAN,GAAe,CAAzC,CAAZ;AACD,KAFD,MAEO;AACLnB,MAAAA,cAAc,CAACe,CAAD,CAAd;AACD;AACF,GAND;;AAQA,MAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAaC,IAAb,EAA6BC,KAA7B,EAA+C;AAAA;;AACtEzB,IAAAA,YAAY,CAACwB,IAAD,EAAOC,KAAP,CAAZ;AACA,0BAAAjB,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAACC,MAAAA,YAAY,EAAEJ,KAAK,CAACK,MAAN,KAAiB;AAAhC,KAAxB;AACD,GAHD;;AAKA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACZ,CAAD,EAAY;AAAA;;AACnChB,IAAAA,kBAAkB,CAAC,EAAD,CAAlB;AACA,0BAAAO,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAACC,MAAAA,YAAY,EAAE,CAAAV,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEW,MAAH,MAAc;AAA7B,KAAxB;AACD,GAHD;;AAKA,MAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,CAAD,EAA4B;AACzD,QAAI,CAACX,YAAY,CAACI,OAAd,IAA0BO,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyBD,CAAC,CAACC,GAAF,KAAU,YAAjE,EAAgF;AAEhF,QAAM5B,KAAK,GAAGgB,YAAY,CAACI,OAAb,CAAqBqB,gBAArB,CAAsC,gBAAtC,CAAd;AACA,QAAMC,YAAY,GAAGC,KAAK,CAACC,IAAN,CAAW5C,KAAX,EAAkB6C,OAAlB,CAA0BlB,CAAC,CAACmB,MAA5B,CAArB;AACA,QAAMC,SAAS,GAAGpB,CAAC,CAACC,GAAF,KAAU,WAAV,GAAwB,CAAC,CAAzB,GAA6B,CAA/C;AACA,QAAMM,IAAI,GAAGlC,KAAK,CAAC0C,YAAY,GAAGK,SAAhB,CAAlB;AACAb,IAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,KAAN,CAAY;AAACC,MAAAA,YAAY,EAAE;AAAf,KAAZ;AAEAxB,IAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,KAAD,CAAxC;AACD,GAVD;;AAYA,MAAMmC,GAAG,aAAM5C,SAAS,GAAG,WAAH,GAAiB,EAAhC,cAAsCG,cAAc,IAAI,EAAxD,cAA8DF,IAA9D,cAAsEI,OAAO,GAAG,SAAH,GAAe,EAA5F,cAAkGR,QAAQ,GAAG,UAAH,GAAgB,EAA1H,CAAT;AAEA,sBACE,MAAC,OAAD;AAAA,4BACE,KAAC,kBAAD;AAAoB,MAAA,GAAG,EAAEe,YAAzB;AACoB,MAAA,SAAS,EAAEwB,sBAD/B;AAEoB,MAAA,OAAO,EAAE;AAAA;;AAAA,eAAM,CAACvC,QAAD,2BAAaiB,QAAQ,CAACE,OAAtB,uDAAa,mBAAkBgB,KAAlB,EAAb,CAAN;AAAA,OAF7B;AAGoB,MAAA,SAAS,EAAEY,GAH/B;AAAA,6BAIE,MAAC,yBAAD;AAAA,mBACGhD,KADH,aACGA,KADH,uBACGA,KAAK,CAAEiD,GAAP,CAAW,UAACC,IAAD,EAAiBf,KAAjB;AAAA,8BACV,KAAC,SAAD;AACW,YAAA,IAAI,EAAEe,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,IADvB;AAEW,YAAA,IAAI,EAAE9C,IAFjB;AAGW,YAAA,QAAQ,EAAE6C,IAAI,CAACjD,QAAL,IAAiBA,QAHtC;AAIW,YAAA,OAAO,EAAEiD,IAAI,CAACE,OAAL,IAAgB,QAJpC;AAKW,YAAA,IAAI,EAAEF,IAAI,CAACG,KALtB;AAMW,YAAA,QAAQ,EAAE,kBAAC1B,CAAD;AAAA,qBAAOK,gBAAgB,CAACL,CAAD,EAAIuB,IAAJ,EAAUf,KAAV,CAAvB;AAAA;AANrB,4BAAwBA,KAAxB,EADU;AAAA,SAAX,CADH,eAUE,MAAC,mBAAD;AAAA,kCACE,KAAC,WAAD;AAAa,YAAA,GAAG,EAAEjB,QAAlB;AACa,YAAA,IAAI,EAAC,MADlB;AAEa,YAAA,EAAE,EAAEnB,OAFjB;AAGa,YAAA,QAAQ,EAAEgB,QAHvB;AAIa,YAAA,QAAQ,EAAEd,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAJvC;AAKa,YAAA,KAAK,EAAEa,UALpB;AAMa,YAAA,QAAQ,EAAE,kBAAAa,CAAC;AAAA,qBAAIhB,kBAAkB,CAACgB,CAAC,CAACmB,MAAF,CAASjB,KAAV,CAAtB;AAAA,aANxB;AAOa,YAAA,SAAS,EAAEH,kBAPxB;AAQa,YAAA,WAAW,EAAE,CAAA1B,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAE+B,MAAP,MAAkB,CAAlB,GAAsB7B,WAAtB,GAAqCC,cAAc,IAAI,EARjF;AASa,YAAA,OAAO,EAAE,iBAAAwB,CAAC,EAAI;AACZA,cAAAA,CAAC,CAAC2B,eAAF;AACAzC,cAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,IAAD,CAAxC;AACD;AAZd,YADF,EAeIC,UAAU,IAAI,CAACb,QAAf,iBACA,KAAC,UAAD;AAAY,YAAA,MAAM,EAAEsC,gBAApB;AACY,YAAA,GAAG,EAAE,aAACzC,KAAD,EAAS;AACZA,cAAAA,KAAG,SAAH,IAAAA,KAAG,WAAH,YAAAA,KAAG,CAAEyB,cAAL,CAAoB;AAClBC,gBAAAA,KAAK,EAAE,SADW;AAElBC,gBAAAA,MAAM,EAAE;AAFU,eAApB;AAID,aANb;AAOY,YAAA,wBAAwB,EAAE,IAPtC;AAQY,YAAA,KAAK,EAAE,UARnB;AASY,YAAA,KAAK,EAAE;AAAC8B,cAAAA,UAAU,EAAE;AAAb,aATnB;AAUY,YAAA,OAAO,EAAE,WAVrB;AAAA,mCAWE,KAAC,WAAD,CAAa,KAAb;AAXF,YAhBJ,EA+BG9C,OAAO,iBACN,KAAC,OAAD;AAAS,YAAA,SAAS,EAAEJ,IAApB;AAAA,mCACE,KAAC,gBAAD;AAAkB,cAAA,IAAI,EAAE9C,IAAI,CAACqB,KAA7B;AAAoC,cAAA,KAAK,EAAEhB,MAAM,CAACsB;AAAlD;AADF,YAhCJ;AAAA,UAVF;AAAA;AAJF,MADF,EAuDGsB,iBAAiB,IAAID,cAAc,KAAK,SAAxC,gBACC,MAAC,cAAD;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAE3C,MAAM,CAAC6B;AAA5C,QADF,eAEE;AAAA,kBAAOe;AAAP,QAFF;AAAA,MADD,GAMCD,cAAc,KAAK,OAAnB,iBACE,MAAC,YAAD;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,IAAI,EAAC,MAAvB;AAA8B,QAAA,KAAK,EAAE3C,MAAM,CAAC4F;AAA5C,QADF,eAEE;AAAA,kBAAOhD;AAAP,QAFF;AAAA,MA9DN;AAAA,IADF;AAuED,CA3I6B,CAAvB;;AApBLT,EAAAA,O;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,S;AAEAK,EAAAA,O;AACAM,EAAAA,Q;AAEAR,EAAAA,c,aAAiB,O,EAAU,S;AAC3BC,EAAAA,iB;AAEAE,EAAAA,Y;AACAI,EAAAA,U;AACAH,EAAAA,kB;AACAC,EAAAA,c;AACAC,EAAAA,kB","sourcesContent":["import React from 'react';\nimport {ChipItem} from './ChipInputTypes';\nimport {Size} from '../types';\nimport {InputChip} from '../Chips';\nimport {ErrorMessage, WarningMessage} from '../InputFields/styling';\nimport {TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {\n  COLORS,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  focusStyles,\n  scrollBarStyling\n} from '../styles';\nimport styled from 'styled-components';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {useActionWithin, useFocusVisibleRef} from '../common';\nimport {IconButton} from '../Button';\nimport {SystemIcons} from '../icons';\n\nconst Wrapper = styled.div`\n  position: relative;\n`;\n\nconst Loading = styled.div`\n  height: 20px;\n  width: 20px;\n`;\n\n\nexport const ChipInputBoundItems = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n`;\n\nexport const ChipInputContentContainer = styled.div`\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ${scrollBarStyling(Size.Small)}\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus, button:focus {\n    outline-offset: -4px !important;\n  }\n`;\n\n\nexport const ChipInputEl = styled.input`\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n  color: ${COLORS.black} !important;\n\n  &::placeholder {\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n`;\n\nexport const ChipInputContainer = styled.div`\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ${ChipInputEl}::placeholder {\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n\n  &.multiline.medium {\n    ${ChipInputContentContainer} {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within, :focus {\n    ${focusStyles}\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n  }\n\n  &.warning,\n  &.warning:hover,\n  &.warning:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.warning_500};\n  }\n\n  &.error,\n  &.error:hover,\n  &.error:focus {\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\n  }\n\n  &.disabled {\n    ${ChipInputContentContainer} {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\n    outline: none;\n    color: ${COLORS.neutral_300} !important;\n  }\n\n\n`;\n\n\nexport interface ChipInputFieldProps {\n  inputId: string;\n  items: ChipItem[];\n  disabled?: boolean;\n  placeholder?: string;\n  altPlaceholder?: string;\n  multiLine?: boolean;\n  size?: Size.Large | Size.Medium | Size.Small;\n  loading?: boolean;\n  required?: boolean;\n\n  validationType?: 'error' | 'warning';\n  validationMessage?: string;\n\n  onRemoveItem: (item: ChipItem, index: number) => void;\n  inputValue: string;\n  onInputValueChange: (value: string) => void;\n  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;\n  onActivationChange?: (active: boolean) => void;\n}\n\nexport const ChipInputField = React.forwardRef<HTMLInputElement, ChipInputFieldProps>(({\n                                                                                         inputId,\n                                                                                         items,\n                                                                                         disabled = false,\n                                                                                         placeholder,\n                                                                                         altPlaceholder,\n                                                                                         multiLine = true,\n                                                                                         size = Size.Medium,\n                                                                                         validationType,\n                                                                                         validationMessage,\n                                                                                         loading,\n                                                                                         onRemoveItem,\n                                                                                         onInputValueChange,\n                                                                                         onInputKeyDown,\n                                                                                         onActivationChange,\n                                                                                         inputValue,\n                                                                                         required\n                                                                                       }, ref) => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n  /**\n   * Scroll container to last item on change\n   * */\n  React.useEffect(() => {\n    if (inputRef.current && 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) => {\n    if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n    const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n    const currentIndex = Array.from(items).indexOf(e.target as any);\n    const direction = e.key === 'ArrowLeft' ? -1 : 1;\n    const item = items[currentIndex + direction];\n    item?.focus({focusVisible: true} as any);\n\n    onActivationChange && onActivationChange(false);\n  };\n\n  const cls = `${multiLine ? 'multiline' : ''} ${validationType || ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n  return (\n    <Wrapper>\n      <ChipInputContainer ref={containerRef}\n                          onKeyDown={handleContainerKeyDown}\n                          onClick={() => !disabled && inputRef.current?.focus()}\n                          className={cls}>\n        <ChipInputContentContainer>\n          {items?.map((chip: ChipItem, index: number) => (\n            <InputChip key={`chip_${index}`}\n                       icon={chip?.icon}\n                       size={size}\n                       disabled={chip.disabled || disabled}\n                       variant={chip.variant || 'normal'}\n                       text={chip.label}\n                       onRemove={(e) => handleItemRemove(e, chip, index)}/>\n          ))}\n          <ChipInputBoundItems>\n            <ChipInputEl ref={inputRef}\n                         type=\"text\"\n                         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            {\n              inputValue && !disabled &&\n              <IconButton action={handleInputClear}\n                          ref={(ref) => {\n                            ref?.scrollIntoView({\n                              block: 'nearest',\n                              inline: 'nearest',\n                            });\n                          }}\n                          useTransparentBackground={true}\n                          shape={'circular'}\n                          style={{marginLeft: '-8px'}}\n                          variant={'secondary'}>\n                <SystemIcons.Clear/>\n              </IconButton>\n            }\n\n            {loading &&\n              <Loading className={size}>\n                <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/>\n              </Loading>\n            }\n          </ChipInputBoundItems>\n        </ChipInputContentContainer>\n      </ChipInputContainer>\n\n      {validationMessage && validationType === 'warning' ? (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_500}/>\n          <span>{validationMessage}</span>\n        </WarningMessage>\n      ) : (\n        validationType === 'error' && (\n          <ErrorMessage>\n            <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n            <span>{validationMessage}</span>\n          </ErrorMessage>\n        )\n      )}\n    </Wrapper>\n  );\n});\n"],"file":"ChipInputField.js"}

package/dist/ChipsInput/ChipInputTypes.d.ts

@@ -11,6 +11,7 @@ export interface ChipInputProps {
     multiLine?: boolean;
     disabled?: boolean;
     size?: Size.Medium | Size.Small;
+    validationType?: 'error' | 'warning';
     validationMessage?: string;
     required?: boolean;
 }

package/dist/Dropdown/BasicDropdown.cjs

@@ -60,7 +60,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       scrollable = _ref$scrollable === void 0 ? true : _ref$scrollable,
       maxHeight = _ref.maxHeight,
       disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
+      locked = _ref.locked,
       isButton = _ref.isButton,
       activeValidationMessage = _ref.activeValidationMessage,
       autofilledMessage = _ref.autofilledMessage,
@@ -170,7 +170,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
       ref: containerRef,
       isButton: isButton || false,
       className: size ? size : '',
-      readOnly: readOnly,
+      locked: locked,
       disabled: disabled,
       margin: margin,
       minWidth: minWidth,
@@ -179,7 +179,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
         className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick(e) {
-          if (!readOnly && !disabled) {
+          if (!locked && !disabled) {
             e.stopPropagation();
             setIsOpen(!isOpen);
 
@@ -194,9 +194,9 @@ var BasicDropdown = function BasicDropdown(_ref) {
             }
           }
         },
-        tabIndex: disabled || readOnly ? -1 : 0,
+        tabIndex: disabled || locked ? -1 : 0,
         disabled: disabled || false,
-        readOnly: readOnly || false,
+        locked: locked || false,
         isPlaceholder: !input,
         placeholder: placeholder,
         showValidationMessage: !!activeValidationMessage,
@@ -224,7 +224,7 @@ var BasicDropdown = function BasicDropdown(_ref) {
             className: size ? size : ''
           })
         })]
-      }), !readOnly && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
+      }), !locked && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropdownContent.default, {
         customizationProps: {
           itemsType: itemsType,
           action: action !== null && action !== void 0 ? action : function () {},
@@ -253,10 +253,10 @@ var BasicDropdown = function BasicDropdown(_ref) {
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         id: "".concat(id, "_dropdowncontent")
       })]
-    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.ErrorMessage, {
+    }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.WarningMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SystemIcons.TechnicalWarning, {
         size: "20px",
-        color: _styles.COLORS.critical_400
+        color: _styles.COLORS.warning_400
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
         children: activeValidationMessage
       })]
@@ -291,7 +291,7 @@ BasicDropdown.propTypes = {
   disableSorting: _propTypes.default.bool,
   messageOnNoResults: _propTypes.default.string,
   disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool,
+  locked: _propTypes.default.bool,
   isButton: _propTypes.default.bool,
   activeValidationMessage: _propTypes.default.string,
   autofilledMessage: _propTypes.default.string,

package/dist/Dropdown/BasicDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","readOnly","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","current","focus","focusVisible","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","critical_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, ErrorMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst BasicDropdown = ({\n                         id,\n                         list,\n                         placeholder,\n                         onSelect,\n                         setDropdownMenuValues,\n                         initalValue,\n                         disableSorting,\n                         messageOnNoResults,\n                         itemsType = 'normal',\n                         action,\n                         actionLabel,\n                         actionVariant,\n                         actionIcon,\n                         actionLoading,\n                         actionDisabled,\n                         pinTopItem,\n                         multiSelect,\n                         scrollable = true,\n                         maxHeight,\n                         disabled,\n                         readOnly,\n                         isButton,\n                         activeValidationMessage,\n                         autofilledMessage,\n                         size,\n                         margin = '4px 0',\n                         dropdownMenuValues,\n                         minWidth,\n                       }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false)\n  }, [isOpen]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} isButton={isButton || false} className={size ? size : ''} readOnly={readOnly}\n                disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!readOnly && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || readOnly ? -1 : 0}\n          disabled={disabled || false}\n          readOnly={readOnly || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!readOnly && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400}/>\n          <span>{activeValidationMessage}</span>\n        </ErrorMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}
+{"version":3,"sources":["../../src/Dropdown/BasicDropdown.tsx"],"names":["BasicDropdown","id","list","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","margin","dropdownMenuValues","minWidth","React","useState","isOpen","setIsOpen","isLoading","setIsLoading","input","setInput","focused","setFocused","selectedValues","setSelectedValues","keyboardNavigated","setKeyboardNavigated","inputRef","useRef","styledFieldRef","resetDropdown","containerRef","handleKeyDown","e","key","handleValueSelect","values","join","current","focus","focusVisible","useEffect","initValue","customSetIsOpen","getDisplayItems","split","map","val","trim","listDisplayLabels","filter","item","includes","value","l","displayLabel","concat","defaultOnMouseDownHandler","stopPropagation","blur","Size","Small","COLORS","neutral_600","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {COLORS} from '../styles';\nimport {ArrowDropDown, ArrowDropUp, Information, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {LoadingIndicator} from '../LoadingIndicator';\nimport {Dropdown, StyledField, InputField} from './CommonStyling';\nimport DropdownContent, {DropdownItem} from './DropdownContent';\nimport {AutofilledMessage, WarningMessage} from '../InputFields/styling';\nimport {Size} from '../types';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusVisibleRef} from '../common';\nimport {useFocusOutsideRef} from '../common';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst BasicDropdown = ({\n                         id,\n                         list,\n                         placeholder,\n                         onSelect,\n                         setDropdownMenuValues,\n                         initalValue,\n                         disableSorting,\n                         messageOnNoResults,\n                         itemsType = 'normal',\n                         action,\n                         actionLabel,\n                         actionVariant,\n                         actionIcon,\n                         actionLoading,\n                         actionDisabled,\n                         pinTopItem,\n                         multiSelect,\n                         scrollable = true,\n                         maxHeight,\n                         disabled,\n                         locked,\n                         isButton,\n                         activeValidationMessage,\n                         autofilledMessage,\n                         size,\n                         margin = '4px 0',\n                         dropdownMenuValues,\n                         minWidth,\n                       }: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const styledFieldRef = useFocusVisibleRef([inputRef]);\n  const resetDropdown = () => {\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  const containerRef = useClickOutsideRef(resetDropdown, [], useFocusOutsideRef(resetDropdown));\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      setIsOpen(!isOpen);\n      setKeyboardNavigated(true);\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    if (keyboardNavigated) {\n      styledFieldRef.current?.focus({focusVisible: true} as any);\n    }\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setSelectedValues([initValue]);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false)\n  }, [isOpen]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown ref={containerRef} isButton={isButton || false} className={size ? size : ''} locked={locked}\n                disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={(e) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n              if (isOpen) {\n                inputRef.current?.blur();\n              } else {\n                inputRef.current?.focus();\n              }\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          isPlaceholder={!input}\n          placeholder={placeholder}\n          showValidationMessage={!!activeValidationMessage}\n          onKeyDown={handleKeyDown}\n          minWidth={minWidth}>\n          <InputField\n            ref={inputRef}\n            type=\"search\"\n            readOnly\n            placeholder={placeholder}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            tabIndex={-1}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600}/> : null}\n          <div className={'icon dropdown-arrow'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''}/> :\n              <ArrowDropDown size=\"24px\" className={size ? size : ''}/>}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {\n              }),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            outline={keyboardNavigated}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400}/>\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600}/>\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.cjs"}

package/dist/Dropdown/BasicDropdown.d.ts

@@ -22,7 +22,7 @@ interface DropdownFilterProps {
     disableSorting?: boolean;
     messageOnNoResults?: string;
     disabled?: boolean;
-    readOnly?: boolean;
+    locked?: boolean;
     isButton?: boolean;
     activeValidationMessage?: string;
     autofilledMessage?: string;
@@ -31,5 +31,5 @@ interface DropdownFilterProps {
     dropdownMenuValues?: string[];
     minWidth?: string;
 }
-declare const BasicDropdown: ({ id, list, placeholder, onSelect, setDropdownMenuValues, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, readOnly, isButton, activeValidationMessage, autofilledMessage, size, margin, dropdownMenuValues, minWidth, }: DropdownFilterProps) => JSX.Element;
+declare const BasicDropdown: ({ id, list, placeholder, onSelect, setDropdownMenuValues, initalValue, disableSorting, messageOnNoResults, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, actionDisabled, pinTopItem, multiSelect, scrollable, maxHeight, disabled, locked, isButton, activeValidationMessage, autofilledMessage, size, margin, dropdownMenuValues, minWidth, }: DropdownFilterProps) => JSX.Element;
 export default BasicDropdown;