@laerdal/life-react-components 2.0.1-dev.20.full → 2.0.1-dev.22

package/dist/Button/Iconbutton.cjs

@@ -14,7 +14,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("../styles");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
+var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -87,6 +87,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
+    focusOnClick = _ref.focusOnClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's render button
   switch (variant) {
@@ -109,7 +110,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -138,7 +139,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -162,7 +163,8 @@ IconButton.propTypes = {
   borderRadius: _propTypes.default.number,
   focusBackgroundColor: _propTypes.default.string,
   children: _propTypes.default.node,
-  invertFocus: _propTypes.default.bool
+  invertFocus: _propTypes.default.bool,
+  focusOnClick: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation","defaultOnMouseDownHandler"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.cjs","names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","focusOnClick","rest","event","stopPropagation","defaultOnMouseDownHandler","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n  focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      focusOnClick,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.d.ts

@@ -31,6 +31,7 @@ export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLBut
     focusBackgroundColor?: string;
     children?: React.ReactNode;
     invertFocus?: boolean;
+    focusOnClick?: boolean;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default IconButton;

package/dist/Button/Iconbutton.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
+var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -76,6 +76,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     type = _ref.type,
     hidden = _ref.hidden,
     invertFocus = _ref.invertFocus,
+    focusOnClick = _ref.focusOnClick,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Let's render button
   switch (variant) {
@@ -98,7 +99,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -127,7 +128,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -151,7 +152,8 @@ IconButton.propTypes = {
   borderRadius: _pt.number,
   focusBackgroundColor: _pt.string,
   children: _pt.node,
-  invertFocus: _pt.bool
+  invertFocus: _pt.bool,
+  focusOnClick: _pt.bool
 };
 export default IconButton;
 //# sourceMappingURL=Iconbutton.js.map

package/dist/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","rest","event","stopPropagation"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={defaultOnMouseDownHandler}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}
+{"version":3,"file":"Iconbutton.js","names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","shouldNotInteract","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","focusBackgroundColor","type","hidden","focusOnClick","rest","event","stopPropagation","undefined"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\nimport styled, { css, CSSProperties } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\nimport { defaultOnMouseDownHandler } from '../common';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  focusBackgroundColor?: string;\n  invertFocus?: boolean;\n  shouldNotInteract?: boolean;\n}\n\nconst getBorderRadius = (props: HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props: HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch (props.flatEdge) {\n    case 'left':\n      return `0px ${radius} ${radius} 0px`;\n\n    case 'right':\n      return `${radius} 0px 0px ${radius}`;\n\n    case 'none':\n    default:\n      return `${radius}`;\n  }\n};\n\nexport const IconButtonContent = styled.div``;\n\nexport const StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  ${IconButtonContent} {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ${(props) => (props.invertFocus ? invertedFocusStyles : focusStyles)}\n  }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_700};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_800};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n  ${IconButtonContent} {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n\n  pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\n\n  &:hover:not(:disabled) {\n    ${IconButtonContent} {\n      background-color: ${COLORS.primary_20};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ${IconButtonContent} {\n      background: ${COLORS.primary_100};\n    }\n    ${IconButtonContent} svg path,\n    ${IconButtonContent} svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    ${IconButtonContent} {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n`;\n\nexport interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  shouldNotInteract?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  focusBackgroundColor?: string;\n  children?: React.ReactNode;\n  invertFocus?: boolean;\n  focusOnClick?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  (\n    {\n      id,\n      variant,\n      shape,\n      action,\n      hideOnLowWidth,\n      isInMobileMenu,\n      children,\n      useTransparentBackground,\n      shouldNotInteract,\n      disabled,\n      iconColor,\n      unsetIconSize,\n      tabIndex,\n      flatEdge,\n      borderRadius,\n      focusBackgroundColor,\n      type,\n      hidden,\n      invertFocus,\n      focusOnClick,\n      ...rest\n    }: IconButtonProps,\n    ref,\n  ) => {\n    // Let's render button\n    switch (variant) {\n      case 'secondary':\n        return (\n          <StyledSecondaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            shouldNotInteract={shouldNotInteract}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledSecondaryIconButton>\n        );\n      case 'primary':\n      default:\n        return (\n          <StyledPrimaryIconButton\n            id={id}\n            type={type ?? 'button'}\n            data-testid={id}\n            flatEdge={flatEdge}\n            ref={ref}\n            onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n              event.stopPropagation();\n              action(event);\n            }}\n            disabled={disabled}\n            hideOnLowWidth={hideOnLowWidth || false}\n            inMobileMenu={isInMobileMenu}\n            useTransparentBackground={useTransparentBackground}\n            iconColor={iconColor}\n            unsetIconSize={unsetIconSize}\n            tabIndex={tabIndex}\n            borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n            onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\n            hidden={hidden}\n            invertFocus={invertFocus}\n            focusBackgroundColor={focusBackgroundColor}\n            {...rest}>\n            <IconButtonContent>{children}</IconButtonContent>\n          </StyledPrimaryIconButton>\n        );\n    }\n  },\n);\n\nexport default IconButton;\n"],"mappings":"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"}

package/dist/ChipsInput/ChipDropdownInput.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ChipDropdownInput.cjs","names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","React","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","useClickOutsideRef","useFocusOutsideRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","States","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\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 handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"ChipDropdownInput.cjs","names":["Wrapper","styled","div","ChipInputContainer","Z_INDEXES","dropdown","ChipDropdownInput","React","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","useClickOutsideRef","useFocusOutsideRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","States","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","SystemIcons","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\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 handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/ChipsInput/ChipDropdownInput.d.ts

@@ -7,7 +7,7 @@ interface ListItem extends ChipItem {
     secondaryLabel?: string;
     value: string;
 }
-interface ChipDropdownInputProps extends ChipInputProps {
+interface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {
     list: ListItem[] | string[];
     onInputChange?: (input: string) => void;
     messageOnNoResults?: string;

package/dist/ChipsInput/ChipDropdownInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipDropdownInput.js","names":["React","styled","ChipInputContainer","ChipInputField","Size","States","DropdownContent","SystemIcons","useClickOutsideRef","useFocusOutsideRef","Z_INDEXES","Wrapper","div","dropdown","ChipDropdownInput","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends ChipInputProps {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\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 handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"ChipDropdownInput.js","names":["React","styled","ChipInputContainer","ChipInputField","Size","States","DropdownContent","SystemIcons","useClickOutsideRef","useFocusOutsideRef","Z_INDEXES","Wrapper","div","dropdown","ChipDropdownInput","forwardRef","ref","list","onInputChange","disableSorting","messageOnNoResults","values","inputId","variants","placeholder","validationMessage","onValueChange","suggestion","loading","maxSelectedItems","multiLine","size","Medium","icon","disableFiltering","disabled","altPlaceholder","required","rest","useState","givenList","setGivenList","chips","setChips","activeDescendant","setActiveDescendant","value","setValue","restartFilter","setRestartFilter","filteredList","setFilteredList","dropdownIsOpen","setDropdownIsOpen","dropdownList","setDropdownList","dropdownValue","setDropdownValue","focused","setFocused","containerRef","inputRef","useRef","useImperativeHandle","current","useEffect","map","a","find","b","label","index","variant","Default","newList","e","options","filter","option","toUpperCase","indexOf","secondaryLabel","sort","push","o","length","handleClickOutside","contains","target","document","addEventListener","removeEventListener","x","displayLabel","noteLabel","addChip","newChip","handleInputValueChange","handleValueUpdate","item","focus","handleInputKeyDown","event","key","stopPropagation","handleOnChipRemoved","newChips","splice","chip","action","pinTopItem","itemsType","scrollable","actionLabel","multiSelect","onValueUpdate","items"],"sources":["../../src/ChipsInput/ChipDropdownInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom components.\n */\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {Size, States} from '../types';\nimport {DropdownContent, DropdownItem} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\nimport {useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {Z_INDEXES} from '../styles';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n  width: 100%;\n\n  ${ChipInputContainer} {\n    position: relative;\n\n    &:focus, &.focus-visible-within {\n      z-index: ${Z_INDEXES.dropdown + 1} !important;\n    }\n  }\n`;\n\n\ninterface ListItem extends ChipItem {\n  secondaryLabel?: string;\n  value: string;\n}\n\ninterface ChipDropdownInputProps extends Omit<ChipInputProps, 'autoSave'> {\n  list: ListItem[] | string[];\n  onInputChange?: (input: string) => void;\n  messageOnNoResults?: string;\n  suggestion?: ListItem;\n  loading?: boolean;\n  maxSelectedItems?: number;\n  disableSorting?: boolean;\n  disableFiltering?: boolean;\n}\n\nexport const ChipDropdownInput = React.forwardRef<HTMLInputElement | undefined, ChipDropdownInputProps>(({\n                                                                                               list,\n                                                                                               onInputChange,\n                                                                                               disableSorting,\n                                                                                               messageOnNoResults,\n                                                                                               values,\n                                                                                               inputId,\n                                                                                               variants,\n                                                                                               placeholder,\n                                                                                               validationMessage,\n                                                                                               onValueChange,\n                                                                                               suggestion,\n                                                                                               loading,\n                                                                                               maxSelectedItems,\n                                                                                               multiLine = true,\n                                                                                               size = Size.Medium,\n                                                                                               icon,\n                                                                                               disableFiltering,\n                                                                                               disabled,\n                                                                                               altPlaceholder,\n                                                                                               required,\n                                                                                               ...rest\n                                                                                             }: ChipDropdownInputProps, ref) => {\n  // Initiate states\n  const [givenList, setGivenList] = React.useState<ListItem[]>([]);\n  const [chips, setChips] = React.useState<ListItem[]>([]);\n\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [value, setValue] = React.useState<string>('');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [filteredList, setFilteredList] = React.useState<ListItem[]>();\n\n  const [dropdownIsOpen, setDropdownIsOpen] = React.useState<boolean>(false);\n  const [dropdownList, setDropdownList] = React.useState<DropdownItem[]>([]);\n  const [dropdownValue, setDropdownValue] = React.useState<string>('');\n\n  const [focused, setFocused] = React.useState<number | null>(null);\n\n  const containerRef = useClickOutsideRef(() => setDropdownIsOpen(false), [], useFocusOutsideRef(() => setDropdownIsOpen(false)));\n  const inputRef = React.useRef<any>();\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n\n    const list =\n      values.map((a) => chips.find(b => b.value === a) || givenList.find(b => b.value === a) || {\n        label: a,\n        value: a,\n        icon: icon\n      })\n        .map((a, index) => ({...a, variant: a.variant || (variants && variants[index]) || States.Default}))\n        .map((a, index) => ({...a, icon: a.icon || icon}));\n\n    setChips(list);\n  }, [values, variants, icon, givenList]);\n\n  /**\n   * Convert string[] to List[] if necessary\n   */\n  React.useEffect(() => {\n    if (typeof list[0] === 'string') {\n      const newList: ListItem[] = (list as string[]).map((e: string) => ({label: e, value: e}));\n      setGivenList(newList);\n    } else {\n      setGivenList(list as ListItem[]);\n    }\n  }, [list]);\n\n  /**\n   * filter and sort list if remoteOperations is false\n   * */\n  React.useEffect(() => {\n    let options = [...givenList];\n    if (!disableFiltering) {\n      if (!restartFilter && value !== '') {\n        options = options.filter((option) => option.label.toUpperCase().indexOf(value.toUpperCase()) !== -1 ||\n          (option.secondaryLabel && option.secondaryLabel?.toUpperCase().indexOf(value.toUpperCase()) !== -1));\n      }\n    }\n\n    if (!disableSorting) {\n      options = options.sort();\n    }\n\n    suggestion && options.push(suggestion);\n\n    options = options.filter((o) => !chips.find(a => a.value === o.value));\n    setFilteredList(options);\n  }, [value, givenList, chips, disableFiltering, disableSorting]);\n\n  /**\n   * if there is only one active item in dropdown mark it as focused\n   * */\n  React.useEffect(() => {\n    if (dropdownIsOpen && !!value && dropdownList?.filter(a => !a.disabled).length === 1) {\n      setDropdownValue(dropdownList.find(a => !a.disabled)!.value);\n    } else {\n      setDropdownValue('');\n    }\n  }, [dropdownList, dropdownIsOpen, value]);\n\n  const handleClickOutside = (e: any) => {\n    if (!containerRef.current?.contains(e.target)) {\n      if (dropdownIsOpen) {\n        setDropdownIsOpen(false);\n        if (!givenList.find((e) => e.value === value)) {\n          setValue('');\n        }\n      }\n    }\n  };\n\n  /**\n   * register click outside event listener\n   * */\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  /**\n   * update dropdown items when filtered list changes\n   * */\n  React.useEffect(() => {\n    setDropdownList(filteredList?.map(x => ({\n      value: x.value,\n      displayLabel: x.label,\n      noteLabel: x.secondaryLabel,\n      icon: (x.icon ?? icon) && SystemIcons[(x.icon || icon)!]({}),\n      disabled: x.disabled,\n    })) ?? []);\n  }, [filteredList]);\n\n  const addChip = (newChip: ListItem) => {\n    const newList = [...chips, newChip];\n    // Let's add the chip\n    setChips(newList);\n    onValueChange(newList.map(a => a.value));\n\n    setValue('');\n  };\n\n  const handleInputValueChange = (value: string) => {\n    setValue(value);\n    setRestartFilter(false);\n    setDropdownIsOpen(true);\n    onInputChange && onInputChange(value);\n  }\n\n  /**\n   * Add chip from dropdown\n   * */\n  const handleValueUpdate = (values: string[]) => {\n    const item = filteredList?.find(a => a.value === values[0]);\n    item && addChip(item);\n    setRestartFilter(true);\n    inputRef?.current?.focus();\n  }\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    // Let's trigger only on enter, comma and space key press\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      if (dropdownList?.filter(a => !a.disabled).length === 1) {\n        handleValueUpdate([dropdownList!.find(a => !a.disabled)!.value]);\n        event.stopPropagation();\n      }\n    }\n\n    if ((event.key === 'ArrowDown' || event.key === 'Down' || event.key === 'ArrowUp' || event.key === 'Up') && !!dropdownList?.length) {\n      setDropdownIsOpen(true);\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 handleOnChipRemoved = (index: number): void => {\n    // Let's copy the chips\n    const newChips = [...chips];\n\n    // Let's delete the chip\n    // If necessary, let's replace it with a different chip\n    newChips.splice(index, 1);\n\n    // Let's update the chip list\n    setChips([...newChips]);\n    onValueChange(newChips.map((e) => e.value));\n  };\n\n  return (\n    <Wrapper ref={containerRef}>\n      <ChipInputField inputId={inputId}\n                      ref={inputRef}\n                      items={chips}\n                      required={required}\n                      inputValue={value}\n                      role=\"combobox\"\n                      aria-activedescendant={activeDescendant}\n                      size={size}\n                      placeholder={placeholder}\n                      altPlaceholder={altPlaceholder}\n                      disabled={disabled}\n                      multiLine={multiLine}\n                      validationMessage={validationMessage}\n                      loading={loading}\n                      onRemoveItem={(chip, index) => handleOnChipRemoved(index)}\n                      onInputValueChange={handleInputValueChange}\n                      onInputKeyDown={handleInputKeyDown}\n                      onActivationChange={(value) => setDropdownIsOpen(value)}\n                      {...rest}/>\n      <DropdownContent\n        containerRef={containerRef}\n        customizationProps={{\n          action: () => {\n          },\n          pinTopItem: true,\n\n          itemsType: 'normal',\n          scrollable: true,\n          actionLabel: '',\n          multiSelect: false,\n          onValueUpdate: handleValueUpdate,\n          items: dropdownList,\n        }}\n        ariaRolesType=\"input\"\n        focused={focused}\n        setFocused={setFocused}\n        onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n        selectedValues={[dropdownValue]}\n        messageOnNoResults={messageOnNoResults ?? ''}\n        setSelectedValues={() => {\n        }}\n        isOpen={(!maxSelectedItems || (!!maxSelectedItems && chips.length < maxSelectedItems)) && dropdownIsOpen}\n        setIsOpen={setDropdownIsOpen}\n        filter={''}\n        isButton={false}\n        id={`${inputId}_dropdowncontent`}/>\n\n    </Wrapper>\n  );\n});\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInput.cjs

@@ -14,7 +14,7 @@ var React = _interopRequireWildcard(require("react"));
 var _types = require("../types");
 var _ChipInputField = require("./ChipInputField");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size"];
+var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -33,6 +33,8 @@ var ChipInput = /*#__PURE__*/React.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,
+    _ref$autoSave = _ref.autoSave,
+    autoSave = _ref$autoSave === void 0 ? false : _ref$autoSave,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _React$useState = React.useState([]),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -68,6 +70,15 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       };
     }));
   }, [chips, variants, icon, size]);
+  var handleInputBlur = function handleInputBlur(event) {
+    var _event$target, _event$target$closest;
+    console.log(event);
+    if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(_ChipInputField.ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
+      setChips([].concat((0, _toConsumableArray2.default)(chips), [value]));
+      onValueChange([].concat((0, _toConsumableArray2.default)(chips), [value]));
+      setValue('');
+    }
+  };
 
   /**
    * Adds a chip to the chip list.
@@ -113,7 +124,8 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     validationMessage: validationMessage,
     multiLine: multiLine,
-    size: size
+    size: size,
+    onBlur: handleInputBlur
   }, rest));
 });
 var _default = ChipInput;

package/dist/ChipsInput/ChipInput.cjs.map

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

package/dist/ChipsInput/ChipInput.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size"];
+var _excluded = ["values", "inputId", "variants", "icon", "placeholder", "disabled", "altPlaceholder", "validationMessage", "onValueChange", "multiLine", "size", "autoSave"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -14,7 +14,7 @@ import * as React from 'react';
  * Import custom components.
  */
 import { Size } from '../types';
-import { ChipInputField } from './ChipInputField';
+import { ChipInputContainer, ChipInputField } from './ChipInputField';
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var values = _ref.values,
@@ -30,6 +30,8 @@ var ChipInput = /*#__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,
+    _ref$autoSave = _ref.autoSave,
+    autoSave = _ref$autoSave === void 0 ? false : _ref$autoSave,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState([]),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -65,6 +67,15 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       };
     }));
   }, [chips, variants, icon, size]);
+  var handleInputBlur = function handleInputBlur(event) {
+    var _event$target, _event$target$closest;
+    console.log(event);
+    if (autoSave && value && !((_event$target = event.target) !== null && _event$target !== void 0 && (_event$target$closest = _event$target.closest("".concat(ChipInputContainer))) !== null && _event$target$closest !== void 0 && _event$target$closest.contains(event.relatedTarget))) {
+      setChips([].concat(_toConsumableArray(chips), [value]));
+      onValueChange([].concat(_toConsumableArray(chips), [value]));
+      setValue('');
+    }
+  };
 
   /**
    * Adds a chip to the chip list.
@@ -110,7 +121,8 @@ var ChipInput = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     disabled: disabled,
     validationMessage: validationMessage,
     multiLine: multiLine,
-    size: size
+    size: size,
+    onBlur: handleInputBlur
   }, rest));
 });
 export default ChipInput;

package/dist/ChipsInput/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputKeyDown","event","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types';\nimport {ChipInputField} from './ChipInputField';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\n\n\nconst ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\n\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [chipItems, setChipItems] = React.useState<ChipItem[]>([]);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Set chip items for chip input field\n   * */\n  React.useEffect(() => {\n    setChipItems(chips.map((chip, index) => ({\n      label: chip,\n      icon: icon,\n      disabled: false,\n      variant: variants && variants[index],\n    })));\n  }, [chips, variants, icon, size]);\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      event.preventDefault();\n\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const onRemoveChip = (index: number): void => {\n    const newChips = [...chips];\n    newChips.splice(index, 1);\n\n    setChips(newChips);\n    onValueChange(newChips);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <ChipInputField inputId={inputId}\n                    ref={ref}\n                    items={chipItems}\n                    onRemoveItem={(item, index) => onRemoveChip(index)}\n                    inputValue={value}\n                    onInputValueChange={value => setValue(value)}\n                    onInputKeyDown={handleInputKeyDown}\n                    placeholder={placeholder}\n                    altPlaceholder={altPlaceholder}\n                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA,SAAQC,IAAI,QAAO,UAAU;AAC7B,SAAQC,cAAc,QAAO,kBAAkB;AAAC;AAIhD,IAAMC,SAAS,gBAAGH,KAAK,CAACI,UAAU,CAAmC,gBAaoBC,GAAG,EAAK;EAAA,IAZzBC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;IACPC,QAAQ,QAARA,QAAQ;IACRC,IAAI,QAAJA,IAAI;IACJC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRC,cAAc,QAAdA,cAAc;IACdC,iBAAiB,QAAjBA,iBAAiB;IACjBC,aAAa,QAAbA,aAAa;IAAA,sBACbC,SAAS;IAATA,SAAS,+BAAG,IAAI;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAGf,IAAI,CAACgB,MAAM;IACfC,IAAI;EAG7E,sBAA0BlB,KAAK,CAACmB,QAAQ,CAAW,EAAE,CAAC;IAAA;IAA/CC,KAAK;IAAEC,QAAQ;EACtB,uBAA0BrB,KAAK,CAACmB,QAAQ,CAAS,EAAE,CAAC;IAAA;IAA7CG,KAAK;IAAEC,QAAQ;EACtB,uBAAkCvB,KAAK,CAACmB,QAAQ,CAAa,EAAE,CAAC;IAAA;IAAzDK,SAAS;IAAEC,YAAY;;EAE9B;AACF;AACA;EACEzB,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpB;IACAL,QAAQ,CAACf,MAAM,CAAC;EAClB,CAAC,EAAE,CAACA,MAAM,CAAC,CAAC;;EAEZ;AACF;AACA;EACEN,KAAK,CAAC0B,SAAS,CAAC,YAAM;IACpBD,YAAY,CAACL,KAAK,CAACO,GAAG,CAAC,UAACC,IAAI,EAAEC,KAAK;MAAA,OAAM;QACvCC,KAAK,EAAEF,IAAI;QACXnB,IAAI,EAAEA,IAAI;QACVE,QAAQ,EAAE,KAAK;QACfoB,OAAO,EAAEvB,QAAQ,IAAIA,QAAQ,CAACqB,KAAK;MACrC,CAAC;IAAA,CAAC,CAAC,CAAC;EACN,CAAC,EAAE,CAACT,KAAK,EAAEZ,QAAQ,EAAEC,IAAI,EAAEO,IAAI,CAAC,CAAC;;EAEjC;AACF;AACA;AACA;EACE,IAAMgB,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,KAA4C,EAAW;IACjF,IAAI,CAACA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,KAAKZ,KAAK,EAAE;MACzDW,KAAK,CAACE,cAAc,EAAE;MAEtBd,QAAQ,8BAAKD,KAAK,IAAEE,KAAK,GAAE;MAC3BR,aAAa,8BAAKM,KAAK,IAAEE,KAAK,GAAE;MAEhCC,QAAQ,CAAC,EAAE,CAAC;IACd;EACF,CAAC;;EAED;AACF;AACA;AACA;EACE,IAAMa,YAAY,GAAG,SAAfA,YAAY,CAAIP,KAAa,EAAW;IAC5C,IAAMQ,QAAQ,sBAAOjB,KAAK,CAAC;IAC3BiB,QAAQ,CAACC,MAAM,CAACT,KAAK,EAAE,CAAC,CAAC;IAEzBR,QAAQ,CAACgB,QAAQ,CAAC;IAClBvB,aAAa,CAACuB,QAAQ,CAAC;EACzB,CAAC;;EAED;AACF;AACA;EACE,oBACE,KAAC,cAAc;IAAC,OAAO,EAAE9B,OAAQ;IACjB,GAAG,EAAEF,GAAI;IACT,KAAK,EAAEmB,SAAU;IACjB,YAAY,EAAE,sBAACe,IAAI,EAAEV,KAAK;MAAA,OAAKO,YAAY,CAACP,KAAK,CAAC;IAAA,CAAC;IACnD,UAAU,EAAEP,KAAM;IAClB,kBAAkB,EAAE,4BAAAA,KAAK;MAAA,OAAIC,QAAQ,CAACD,KAAK,CAAC;IAAA,CAAC;IAC7C,cAAc,EAAEU,kBAAmB;IACnC,WAAW,EAAEtB,WAAY;IACzB,cAAc,EAAEE,cAAe;IAC/B,QAAQ,EAAED,QAAS;IACnB,iBAAiB,EAAEE,iBAAkB;IACrC,SAAS,EAAEE,SAAU;IACrB,IAAI,EAAEC;EAAK,GACPE,IAAI,EACtB;AAEN,CAAC,CAAC;AAEF,eAAef,SAAS"}
+{"version":3,"file":"ChipInput.js","names":["React","Size","ChipInputContainer","ChipInputField","ChipInput","forwardRef","ref","values","inputId","variants","icon","placeholder","disabled","altPlaceholder","validationMessage","onValueChange","multiLine","size","Medium","autoSave","rest","useState","chips","setChips","value","setValue","chipItems","setChipItems","useEffect","map","chip","index","label","variant","handleInputBlur","event","console","log","target","closest","contains","relatedTarget","handleInputKeyDown","key","preventDefault","onRemoveChip","newChips","splice","item"],"sources":["../../src/ChipsInput/ChipInput.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {Size} from '../types';\nimport {ChipInputContainer, ChipInputField} from './ChipInputField';\nimport {ChipInputProps, ChipItem} from './ChipInputTypes';\n\n\nconst ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(({\n                                                                        values,\n                                                                        inputId,\n                                                                        variants,\n                                                                        icon,\n                                                                        placeholder,\n                                                                        disabled,\n                                                                        altPlaceholder,\n                                                                        validationMessage,\n                                                                        onValueChange,\n                                                                        multiLine = true,\n                                                                        size = Size.Medium,\n                                                                        autoSave = false,\n                                                                        ...rest\n                                                                      }: ChipInputProps, ref) => {\n\n  const [chips, setChips] = React.useState<string[]>([]);\n  const [value, setValue] = React.useState<string>('');\n  const [chipItems, setChipItems] = React.useState<ChipItem[]>([]);\n\n  /**\n   * Sets initial values for the chips.\n   */\n  React.useEffect(() => {\n    // Let's add initial chip values\n    setChips(values);\n  }, [values]);\n\n  /**\n   * Set chip items for chip input field\n   * */\n  React.useEffect(() => {\n    setChipItems(chips.map((chip, index) => ({\n      label: chip,\n      icon: icon,\n      disabled: false,\n      variant: variants && variants[index],\n    })));\n  }, [chips, variants, icon, size]);\n\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    console.log(event);\n    if (autoSave && value && !event.target?.closest(`${ChipInputContainer}`)?.contains(event.relatedTarget as Node)) {\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      setValue('');\n    }\n  };\n\n  /**\n   * Adds a chip to the chip list.\n   * @param event - Event handler from the key down event.\n   */\n  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n    if ((event.key === 'Enter' || event.key === ' ') && value) {\n      event.preventDefault();\n\n      setChips([...chips, value]);\n      onValueChange([...chips, value]);\n\n      setValue('');\n    }\n  };\n\n  /**\n   * Removes a specific chip from the chip list.\n   * @param index - Index of the chip that needs to be removed.\n   */\n  const onRemoveChip = (index: number): void => {\n    const newChips = [...chips];\n    newChips.splice(index, 1);\n\n    setChips(newChips);\n    onValueChange(newChips);\n  };\n\n  /**\n   * Return Chip Input component.\n   */\n  return (\n    <ChipInputField inputId={inputId}\n                    ref={ref}\n                    items={chipItems}\n                    onRemoveItem={(item, index) => onRemoveChip(index)}\n                    inputValue={value}\n                    onInputValueChange={value => setValue(value)}\n                    onInputKeyDown={handleInputKeyDown}\n                    placeholder={placeholder}\n                    altPlaceholder={altPlaceholder}\n                    disabled={disabled}\n                    validationMessage={validationMessage}\n                    multiLine={multiLine}\n                    size={size}\n                    onBlur={handleInputBlur}\n                    {...rest}\n    />\n  );\n});\n\nexport default ChipInput;\n"],"mappings":"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"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -165,6 +165,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
             style: {
               marginLeft: '-8px'
             },
+            focusOnClick: true,
             variant: 'secondary',
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Clear, {})
           }), loading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Loading, {

package/dist/ChipsInput/ChipInputField.cjs.map

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

package/dist/ChipsInput/ChipInputField.js

@@ -155,6 +155,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
             style: {
               marginLeft: '-8px'
             },
+            focusOnClick: true,
             variant: 'secondary',
             children: /*#__PURE__*/_jsx(SystemIcons.Clear, {})
           }), loading && /*#__PURE__*/_jsx(Loading, {

package/dist/ChipsInput/ChipInputField.js.map

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

package/dist/ChipsInput/ChipInputTypes.cjs.map

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

package/dist/ChipsInput/ChipInputTypes.d.ts

@@ -1,7 +1,7 @@
 import { Size } from '../types';
 import { ChipIcons, ChipVariant } from '../Chips/ChipTypes';
 import React from "react";
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
+export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
     inputId: string;
     values: string[];
     icon?: ChipIcons;
@@ -14,6 +14,7 @@ export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
     size?: Size.Medium | Size.Small;
     validationMessage?: string;
     required?: boolean;
+    autoSave?: boolean;
 }
 export interface ChipItem {
     label: string;

package/dist/ChipsInput/ChipInputTypes.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "2.0.1-dev.20.full",
+  "version": "2.0.1-dev.22",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],