@laerdal/life-react-components 6.0.0-dev.8.full → 6.0.1

package/dist/ChipsInput/ChipInputField.cjs

@@ -89,14 +89,20 @@ const ChipInputContainer = exports.ChipInputContainer = _styledComponents.defaul
   border-radius: 4px;
   margin-bottom: 4px;
   box-shadow: inset 0 0 0 1px ${props => _styles.COLORS.getColor('neutral_400', props.theme)};
-  background-color: ${props => _styles.COLORS.getColor('white', props.theme)};
+  background-color: ${props => _styles.COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   cursor: text;
   outline: none;
   display: flex;
   align-items: center;
 
-  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme))}
+  ${props => (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
     padding: 0;
     min-height: 48px;

package/dist/ChipsInput/ChipInputField.cjs.map

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

package/dist/ChipsInput/ChipInputField.js

@@ -80,14 +80,20 @@ export const ChipInputContainer = styled.div`
   border-radius: 4px;
   margin-bottom: 4px;
   box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
-  background-color: ${props => COLORS.getColor('white', props.theme)};
+  background-color: ${props => COLORS.generateToken({
+  componentType: 'bg-surface',
+  defaultVariant: 'default'
+}, props.theme)};
   box-sizing: border-box;
   cursor: text;
   outline: none;
   display: flex;
   align-items: center;
 
-  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.generateToken({
+  componentType: 'text',
+  defaultVariant: 'default'
+}, props.theme))}
   &.small {
     padding: 0;
     min-height: 48px;

package/dist/ChipsInput/ChipInputField.js.map

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

package/dist/ChipsInput/__tests__/ChipDropdownInput.test.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {act, fireEvent, render, RenderResult} from '../../test-utils';
+import {ChipDropdownInput} from '../..';
+import '../../../jest.setup';
+
+const list = ['Contact', 'About', 'Base', 'Blog', 'Custom', 'Support', 'Tools'];
+
+
+
+describe('<ChipDropdownInput />', () => {
+  it('Renders with no default values and no items available', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipDropdownInput inputId="test_chip" list={[]} values={[]} onValueChange={(input) => {
+        }} placeholder="Search" altPlaceholder="" messageOnNoResults="No results found"/>,
+      );
+    });
+    //check correct placeholder displayed
+    expect(componentResult!.getByPlaceholderText('Search') as HTMLInputElement).toBeTruthy();
+    //check chip input with provided id rendered
+    expect(componentResult!.container.querySelector('input[id="test_chip"]')).toBeTruthy();
+    //check no initial value displayed
+    expect((componentResult!.getByPlaceholderText('Search') as HTMLInputElement).value).toBe('');
+  });
+
+  it('Renders with default values and items available', async () => {
+    let componentResult: RenderResult;
+    await act(async () => {
+      componentResult = render(
+        <ChipDropdownInput
+          inputId="test_chip"
+          list={list}
+          values={['Support']}
+          onValueChange={(input) => {
+          }}
+          placeholder="Search"
+          altPlaceholder="Type to search"
+          messageOnNoResults="No results found"
+        />,
+      );
+    });
+    //check alt placeholder displayed when list values
+    expect(componentResult!.getByPlaceholderText('Type to search') as HTMLInputElement).toBeTruthy();
+    //check correct initial value displayed
+    expect(componentResult!.getByText('Support')).toBeTruthy();
+  });
+
+  it('Renders dropdown on input click', async () => {
+    const wrapper = render(
+      <ChipDropdownInput
+        inputId="test_chip"
+        list={list}
+        values={['Support']}
+        onValueChange={(input) => {
+        }}
+        placeholder="Search"
+        altPlaceholder="Type to search"
+        messageOnNoResults="No results found"
+      />,
+    );
+
+    act(() => {
+      fireEvent.click(wrapper.getByPlaceholderText('Type to search'));
+    });
+
+    expect(wrapper.container.querySelector('.show')).toBeInTheDocument();
+  });
+
+  it('Renders dropdown and items are filtered by search criteria', () => {
+    const changeMock = jest.fn();
+
+    const wrapper = render(
+      <ChipDropdownInput
+        inputId="test_chip"
+        list={list}
+        values={[]}
+        onValueChange={changeMock}
+        placeholder="Search"
+        altPlaceholder="Type to search"
+        messageOnNoResults="No results found"
+      />,
+    );
+
+    act(() => {
+      fireEvent.change(wrapper.getByPlaceholderText('Search'), {target: {value: 'b'}});
+    });
+
+    list.filter((item) => item.toLowerCase().includes('b')).forEach((item) => {
+      expect(wrapper.queryByText(item)).toBeInTheDocument();
+    });
+
+    list.filter((item) => !item.toLowerCase().includes('b')).forEach((item) => {
+      expect(wrapper.queryByText(item)).not.toBeInTheDocument();
+    });
+  });
+});

package/dist/ChipsInput/__tests__/ChipInputFields.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import { act, fireEvent, render, RenderResult } from '../../test-utils';
+import { ChipInput, Size } from '../..';
+import '../../../jest.setup';
+
+const list = ['Contact', 'About', 'Base', 'Blog', 'Custom', 'Support', 'Tools'];
+
+
+
+describe('<ChipInput />', () => {
+  it('Render component correctly', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Medium} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+    //check correct placeholder displayed
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).toBeTruthy();
+    //check chip input with provided id rendered
+    expect(componentResult!.container.querySelector('input[id="utest"]')).toBeTruthy();
+  });
+
+  it('Render component with correct size', async () => {
+    let componentResult: RenderResult;
+
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //check element has correct class size present
+    expect(componentResult!.getByTestId('chip-input-container')).toHaveClass('small');
+  });
+
+  it('Test component focused on click', async () => {
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={() => {}} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //check focus not present
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).not.toHaveFocus();
+
+    //trigger click for chip input
+    fireEvent.click(componentResult!.getByTestId('chip-input-container'));
+
+    //check focus present
+    expect(componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement).toHaveFocus();
+  });
+
+  it('Test component callbacks', async () => {
+    const onValueChange = jest.fn();
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={onValueChange} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+
+    //mock scrollIntoView otherwise test will fail when selecting an item
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    const inputElem = componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement;
+
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //trigger click for chip input
+    fireEvent.click(componentResult!.getByTestId('chip-input-container'));
+
+    //trigger value change
+    fireEvent.change(inputElem, { target: { value: list[1] } });
+
+    //pressing enter will automatically select the found item
+    fireEvent.keyDown(inputElem, { key: 'Enter', code: 'Enter', charCode: 13 });
+
+    expect(onValueChange).toHaveBeenCalledTimes(1);
+
+    //two items present, default and the new selected one
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(2);
+
+    //pressing on the x button, the item will be removed from selection
+    const removeItemElem = componentResult!.getByTestId('chip-input-container').querySelector('div.chip-icon') as HTMLDivElement;
+
+    fireEvent.click(removeItemElem);
+
+    //change callback should be called
+    expect(onValueChange).toHaveBeenCalledTimes(2);
+    //only one item should be present at the moment
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+
+    //expect that on pressing backspace the added item will be deleted
+    fireEvent.keyDown(inputElem, { key: 'Backspace', charCode: 8 });
+
+    //no item should be present at the moment
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(0);
+  });
+
+  it('Test component chips are removed when clear all button toggled', async () => {
+    const onValueChange = jest.fn();
+    let componentResult: RenderResult;
+
+    //initial values are determined by using multiple hooks (useEffect)
+    //in order to be sure we get the last rendered version of the component, we need to wait for it
+    await act(async () => {
+      componentResult = render(
+        <ChipInput size={Size.Small} inputId="utest" values={[list[0]]} onValueChange={onValueChange} placeholder="Plchd label" altPlaceholder="Alt plchd label" />,
+      );
+    });
+
+    //check element wrapper component rendered
+    expect(componentResult!.getByTestId('chip-input-container')).toBeTruthy();
+
+    //one item present, the default one
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+    const input = componentResult!.getByPlaceholderText('Alt plchd label') as HTMLInputElement;
+
+    const mockInputData = 'mock data';
+    //trigger value change
+    fireEvent.change(input, { target: { value: mockInputData } });
+
+    expect(input).toHaveValue(mockInputData);
+
+    //expect clear button to be displayed
+    expect(componentResult!.getByTestId('clear-btn-utest')).toBeTruthy();
+
+    //press on clear button
+    fireEvent.click(componentResult!.getByTestId('clear-btn-utest'));
+
+    //expect input to have no value
+    expect(input).toHaveValue('');
+
+    //one chip selected
+    expect(componentResult!.container.querySelectorAll('.chip-icon')).toHaveLength(1);
+  });
+});

package/dist/Dropdown/DropdownContent.cjs

@@ -8,7 +8,7 @@ exports.default = exports.DropdownContentListContainer = exports.DropdownContent
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
+var _TextButton = _interopRequireDefault(require("../Button/TextButton"));
 var _types = require("../types");
 var _CommonStyling = require("./CommonStyling");
 var _typography = require("../styles/typography");
@@ -579,7 +579,7 @@ const DropdownContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }), customizationProps.action && customizationProps.actionLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownContentActionButtonContainer, {
         $size: size,
         $scrollable: customizationProps.scrollable,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextButton.default, {
           width: "100%",
           role: "menuitem",
           icon: customizationProps.actionIcon,