@laerdal/life-react-components 1.9.9 → 1.10.0

package/dist/Chips/InputChip.js

@@ -17,16 +17,18 @@ import { ChipContainer, ChipContent, ChipContentContainer } from './ChipStyles';
  */
 
 import { defaultOnMouseDownHandler, useActionWithin } from '../common';
+import { Size, States } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref2;
 
   var icon = _ref.icon,
       text = _ref.text,
-      variant = _ref.variant,
-      size = _ref.size,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? States.Default : _ref$variant,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? Size.Medium : _ref$size,
       disabled = _ref.disabled,
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
@@ -58,45 +60,43 @@ var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    */
 
 
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(ChipContainer, {
-      ref: containerRef,
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
-      tabIndex: disabled || !_onClick ? -1 : 0,
-      onMouseDown: defaultOnMouseDownHandler,
-      onKeyDown: handleContainerKeyDown,
-      onClick: function onClick() {
-        return _onClick && _onClick();
-      },
-      children: /*#__PURE__*/_jsx(ChipContentContainer, {
-        children: /*#__PURE__*/_jsxs(ChipContent, {
-          className: 'with-action-right',
-          children: [icon && /*#__PURE__*/_jsx("div", {
-            className: 'chip-icon icon-left',
-            children: icons[icon]({
-              className: 'icon'
+  return /*#__PURE__*/_jsx(ChipContainer, {
+    ref: containerRef,
+    className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
+    tabIndex: disabled || !_onClick ? -1 : 0,
+    onMouseDown: defaultOnMouseDownHandler,
+    onKeyDown: handleContainerKeyDown,
+    onClick: function onClick() {
+      return !disabled && _onClick && _onClick();
+    },
+    children: /*#__PURE__*/_jsx(ChipContentContainer, {
+      children: /*#__PURE__*/_jsxs(ChipContent, {
+        className: 'with-action-right',
+        children: [icon && /*#__PURE__*/_jsx("div", {
+          className: 'chip-icon icon-left',
+          children: icons[icon]({
+            className: 'icon'
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          children: text
+        }), /*#__PURE__*/_jsx("div", {
+          ref: removeRef,
+          className: "action-right ".concat(disableRemove ? 'disabled' : ''),
+          tabIndex: disableRemove || disabled ? -1 : 0,
+          onMouseDown: defaultOnMouseDownHandler,
+          onClick: function onClick(e) {
+            return !disableRemove && !disabled && onRemoveClick(e);
+          },
+          onKeyDown: function onKeyDown(e) {
+            return (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e);
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: 'chip-icon',
+            children: /*#__PURE__*/_jsx(SystemIcons.Close, {
+              className: 'remove'
             })
-          }), /*#__PURE__*/_jsx("div", {
-            children: text
-          }), /*#__PURE__*/_jsx("div", {
-            ref: removeRef,
-            className: "action-right ".concat(disableRemove ? 'disabled' : ''),
-            tabIndex: disableRemove || disabled ? -1 : 0,
-            onMouseDown: defaultOnMouseDownHandler,
-            onClick: function onClick(e) {
-              return !disableRemove && onRemoveClick(e);
-            },
-            onKeyDown: function onKeyDown(e) {
-              return (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e);
-            },
-            children: /*#__PURE__*/_jsx("div", {
-              className: 'chip-icon',
-              children: /*#__PURE__*/_jsx(SystemIcons.Close, {
-                className: 'remove'
-              })
-            })
-          })]
-        })
+          })
+        })]
       })
     })
   });

package/dist/Chips/InputChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","InputChip","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.js"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["React","SystemIcons","icons","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","useActionWithin","Size","States","InputChip","forwardRef","ref","icon","text","variant","Default","size","Medium","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipVariant, InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\nimport {Size, States} from '../types';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant = States.Default,\n                                                                               size = Size.Medium,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <ChipContainer ref={containerRef}\n                   className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                   tabIndex={disabled || !onClick ? -1 : 0}\n                   onMouseDown={defaultOnMouseDownHandler}\n                   onKeyDown={handleContainerKeyDown}\n                   onClick={() => !disabled && onClick && onClick()}>\n      <ChipContentContainer>\n        <ChipContent className={'with-action-right'}>\n          {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n          <div>{text}</div>\n\n          <div ref={removeRef}\n               className={`action-right ${disableRemove ? 'disabled' : ''}`}\n               tabIndex={disableRemove || disabled ? -1 : 0}\n               onMouseDown={defaultOnMouseDownHandler}\n               onClick={e => !disableRemove && !disabled && onRemoveClick(e)}\n               onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && !disableRemove && !disabled && onRemoveClick(e)}>\n            <div className={'chip-icon'}>\n              <SystemIcons.Close className={'remove'}/>\n            </div>\n          </div>\n        </ChipContent>\n      </ChipContentContainer>\n    </ChipContainer>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.js"}

package/dist/ChipsInput/ChipInputField.cjs

@@ -140,6 +140,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -178,6 +179,7 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({

package/dist/ChipsInput/ChipInputField.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","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"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } 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 {\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    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\n        <ChipInputContainer ref={containerRef} onKeyDown={handleContainerKeyDown} onClick={() => !disabled && inputRef.current?.focus()} 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              />\n              {inputValue && !disabled && (\n                <IconButton\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"],"file":"ChipInputField.cjs"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["Wrapper","styled","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Size","Small","ChipInputEl","input","ComponentTextStyle","Regular","COLORS","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","focusStyles","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","React","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","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"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } 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 {\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    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\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              />\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"],"file":"ChipInputField.cjs"}

package/dist/ChipsInput/ChipInputField.js

@@ -102,6 +102,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
   return /*#__PURE__*/_jsxs(Wrapper, {
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
+      "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
@@ -140,6 +141,7 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
               onActivationChange && onActivationChange(true);
             }
           }), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
+            id: "clear-btn",
             action: handleInputClear,
             ref: function ref(_ref2) {
               _ref2 === null || _ref2 === void 0 ? void 0 : _ref2.scrollIntoView({

package/dist/ChipsInput/ChipInputField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","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"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } 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 {\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    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\n        <ChipInputContainer ref={containerRef} onKeyDown={handleContainerKeyDown} onClick={() => !disabled && inputRef.current?.focus()} 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              />\n              {inputValue && !disabled && (\n                <IconButton\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"],"file":"ChipInputField.js"}
+{"version":3,"sources":["../../src/ChipsInput/ChipInputField.tsx"],"names":["React","Size","States","InputChip","ErrorMessage","TechnicalWarning","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","focusStyles","scrollBarStyling","styled","LoadingIndicator","useFocusVisibleRef","IconButton","SystemIcons","Wrapper","div","Loading","ChipInputBoundItems","ChipInputContentContainer","Small","ChipInputEl","input","Regular","black","Italic","neutral_600","ChipInputContainer","neutral_400","white","primary_700","primary_800","critical_500","neutral_100","neutral_300","ChipInputField","forwardRef","ref","inputId","items","disabled","placeholder","altPlaceholder","multiLine","size","Medium","validationMessage","loading","onRemoveItem","onInputValueChange","onInputKeyDown","onActivationChange","inputValue","required","containerRef","useRef","inputRef","useEffect","current","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"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ChipItem } from './ChipInputTypes';\nimport { Size, States } from '../types';\nimport { InputChip } from '../Chips';\nimport { ErrorMessage } from '../InputFields/styling';\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } 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 {\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    },\n    ref,\n  ) => {\n    const containerRef = React.useRef<HTMLDivElement>(null);\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\n\n    /**\n     * Scroll container to last item on change\n     * */\n    React.useEffect(() => {\n      if (inputRef.current && document.activeElement === inputRef.current) {\n        inputRef.current.scrollIntoView({\n          block: 'nearest',\n          inline: 'nearest',\n        });\n      }\n    }, [containerRef, inputRef, items]);\n\n    /**\n     * Remove last cheap on backspace\n     * */\n    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {\n        onRemoveItem(items[items.length - 1], items.length - 1);\n      } else {\n        onInputKeyDown(e);\n      }\n    };\n\n    const handleItemRemove = (event: any, item: ChipItem, index: number) => {\n      onRemoveItem(item, index);\n      inputRef.current?.focus({ focusVisible: event.detail !== 1 } as any);\n    };\n\n    const handleInputClear = (e: any) => {\n      onInputValueChange('');\n      inputRef.current?.focus({ focusVisible: e?.detail !== 1 } as any);\n    };\n\n    const handleContainerKeyDown = (e: React.KeyboardEvent) => {\n      if (!containerRef.current || (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight')) return;\n\n      const items = containerRef.current.querySelectorAll('[tabindex=\"0\"]') as NodeListOf<HTMLElement>;\n      const currentIndex = Array.from(items).indexOf(e.target as any);\n      const direction = e.key === 'ArrowLeft' ? -1 : 1;\n      const item = items[currentIndex + direction];\n      item?.focus({ focusVisible: true } as any);\n\n      onActivationChange && onActivationChange(false);\n    };\n\n    const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;\n\n    return (\n      <Wrapper>\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              />\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"],"file":"ChipInputField.js"}

package/dist/Dropdown/CommonStyling.cjs

@@ -73,7 +73,7 @@ var TextButtonDropdownIcon = _styledComponents.default.div(_templateObject10 ||
 
 exports.TextButtonDropdownIcon = TextButtonDropdownIcon;
 
-var TextButtonDropdownArrow = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n"])));
+var TextButtonDropdownArrow = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
 
 exports.TextButtonDropdownArrow = TextButtonDropdownArrow;
 

package/dist/Dropdown/CommonStyling.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","Regular","neutral_400","BREAKPOINTS","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["Dropdown","styled","div","props","isButton","minWidth","readOnly","disabled","margin","Z_INDEXES","focus","COLORS","primary_600","primary_800","lockedState","css","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","ComponentTextStyle","Italic","InputField","input","black","StyledField","Regular","neutral_400","BREAKPOINTS","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","CommonInteractionStyling","dropdown","focusStyles","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.cjs"}

package/dist/Dropdown/CommonStyling.js

@@ -37,7 +37,7 @@ export var StyledField = styled.div(_templateObject7 || (_templateObject7 = _tag
 export var ButtonDropdownContentStyling = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  min-width: 344px;\n  right: 0;\n"])));
 export var TextButtonDropdownContent = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n"])));
 export var TextButtonDropdownIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
-export var TextButtonDropdownArrow = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n"])));
+export var TextButtonDropdownArrow = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n"])));
 export var TextButtonDropdownText = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  flex: 1\n"])));
 export var TextButtonDropdownWrapper = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ", "\n\n  .expanded {\n    color: ", ";\n\n    ", " {\n      background: ", ";\n    }\n  }\n\n  &:focus {\n    ", "\n  }\n\n  &:hover:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &:active:not(.disabled) {\n    ", " {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ", ";\n  }\n\n}"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.neutral_800, TextButtonDropdownContent, COLORS.neutral_20, focusStyles, TextButtonDropdownContent, COLORS.primary_20, COLORS.primary_700, TextButtonDropdownContent, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300);
 //# sourceMappingURL=CommonStyling.js.map

package/dist/Dropdown/CommonStyling.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}
+{"version":3,"sources":["../../src/Dropdown/CommonStyling.tsx"],"names":["styled","css","CommonInteractionStyling","BREAKPOINTS","COLORS","ComponentTextStyle","focusStyles","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","Z_INDEXES","Dropdown","div","props","isButton","minWidth","readOnly","disabled","margin","focus","primary_600","primary_800","lockedState","neutral_100","neutral_300","neutral_600","disabledState","white","activeValidationMessage","critical_400","placeholderStyling","Italic","InputField","input","black","StyledField","Regular","neutral_400","MEDIUM","isPlaceholder","undefined","primary_200","primary_300","Bold","neutral_800","neutral_20","showValidationMessage","dropdown","ButtonDropdownContentStyling","TextButtonDropdownContent","TextButtonDropdownIcon","TextButtonDropdownArrow","TextButtonDropdownText","TextButtonDropdownWrapper","primary_20","primary_700","primary_100"],"mappings":"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","sourcesContent":["import styled, {css} from 'styled-components';\nimport {CommonInteractionStyling} from '../common';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, focusStyles} from '../styles';\nimport {\n  ComponentMStyling,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles/typography';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles/z-indexes';\n\nexport const Dropdown = styled.div<{ isButton: boolean; readOnly?: boolean; disabled?: boolean; margin?: string; minWidth?: string }>`\n  position: relative;\n  display: inline-block;\n\n  ${(props) => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}\n  ${(props) => (props.readOnly || props.disabled ? 'cursor: not-allowed;' : '')}\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n  .show {\n    display: block;\n  }\n\n  .value {\n    flex-grow: 1;\n  }\n\n  &:focus-within {\n    z-index: ${Z_INDEXES.focus};\n  }\n\n  input:hover + div {\n    color: ${COLORS.primary_600};\n  }\n\n  input:active + div {\n    color: ${COLORS.primary_800};\n  }\n\n\n`;\n\nconst lockedState = css`\n  background-color: ${COLORS.neutral_100};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n  color: ${COLORS.neutral_600};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  input {\n    color: ${COLORS.neutral_600} !important;\n  }\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n`;\n\nconst disabledState = css`\n  background-color: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n  color: ${COLORS.neutral_300};\n  pointer-events: none;\n  cursor: not-allowed;\n\n  .dropdown-arrow {\n    color: ${COLORS.neutral_300} !important;\n  }\n\n  input {\n    color: ${COLORS.neutral_300} !important;\n\n    ::placeholder {\n      color: ${COLORS.neutral_300} !important;\n    }\n  }\n`;\n\nconst activeValidationMessage = css`\n  box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\n`;\n\nconst placeholderStyling = css`\n  ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n`;\n\nexport const InputField = styled.input`\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  flex-grow: 1;\n  display: flex;\n  justify-content: center;\n\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const StyledField = styled.div<{ disabled: boolean; readOnly: boolean; showValidationMessage?: boolean; isPlaceholder?: boolean; fontSize?: string; minWidth?: string }>`\n  ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n\n  padding: 12px 16px;\n  height: 48px;\n  min-width: ${(props) => (props.minWidth ? `${props.minWidth}` : '344px')};\n  width: 100%;\n\n  background: ${COLORS.white};\n  box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n  box-sizing: border-box;\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  position: relative;\n\n  input {\n    font-size: inherit;\n    line-height: inherit;\n    color: inherit;\n  }\n\n  &::placeholder {\n    ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 16px;\n    height: 56px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.small {\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n    padding: 12px 16px;\n    height: 48px;\n\n    &::placeholder {\n      ${ComponentXXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  &.medium {\n    ${ComponentMStyling(ComponentTextStyle.Regular, 'inherit')}\n    height: 56px;\n    padding: 16px;\n\n    &::placeholder {\n      ${ComponentXSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\n    }\n  }\n\n  .dropdown-arrow {\n    pointer-events: none;\n    width: 24px;\n    height: 24px;\n    color: ${(props) => props.isPlaceholder ? COLORS.neutral_600 : undefined};\n  }\n\n  &:focus {\n    outline: 3px solid #ddd;\n  }\n\n  &:focus-within,\n  &.focus-visible-within {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n  }\n\n  &:hover:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_200};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_600};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_600};\n    }\n\n    cursor: pointer;\n  }\n\n  &:active:not(.action-within) {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n\n    input {\n      ::placeholder {\n        color: ${COLORS.primary_800};\n      }\n    }\n\n    .dropdown-arrow {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.button {\n    ${(props) => ComponentSStyling(ComponentTextStyle.Bold, props.disabled ? COLORS.neutral_300 : COLORS.neutral_600)}\n\n    box-sizing: border-box;\n    height: 32px;\n    padding: 0 8px;\n    width: initial;\n    min-width: initial;\n    border: none !important;\n    box-shadow: none;\n    border-radius: 4px;\n\n    &.expanded {\n      color: ${COLORS.neutral_800};\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n\n  ${(props) => (props.disabled ? disabledState : '')}\n  ${(props) => (props.readOnly ? lockedState : '')}\n  ${(props) => (props.showValidationMessage ? activeValidationMessage : '')}\n  ${(props) => (props.isPlaceholder ? placeholderStyling : '')}\n\n  ${CommonInteractionStyling};\n\n  &.focus-visible,\n  &.focus-visible-within {\n    z-index: ${Z_INDEXES.dropdown + 1} !important;\n    ${focusStyles}\n  }\n`;\n\nexport const ButtonDropdownContentStyling = css`\n  min-width: 344px;\n  right: 0;\n`;\n\n\n\nexport const TextButtonDropdownContent = styled.div`\n  display: flex;\n  gap: 4px;\n  align-items: center;\n  box-sizing: border-box;\n  min-width: 64px;\n  min-height: 32px;\n  padding: 4px 8px;\n  border-radius: 4px;\n`;\n\nexport const TextButtonDropdownIcon = styled.div`\n  width: 24px;\n  height: 24px;\n`;\n\nexport const TextButtonDropdownArrow = styled.div`\n  width: 24px;\n  height: 24px;\n\n  svg {\n    pointer-events: none;\n  }\n`;\n\nexport const TextButtonDropdownText = styled.div`\n  flex: 1\n`;\n\nexport const TextButtonDropdownWrapper = styled.div`\n  box-sizing: border-box;\n  min-height: 48px;\n  display: flex;\n  align-items: center;\n  width: fit-content;\n  cursor: pointer;\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n\n  .expanded {\n    color: ${COLORS.neutral_800};\n\n    ${TextButtonDropdownContent} {\n      background: ${COLORS.neutral_20};\n    }\n  }\n\n  &:focus {\n    ${focusStyles}\n  }\n\n  &:hover:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_20};\n      color: ${COLORS.primary_700};\n    }\n  }\n\n  &:active:not(.disabled) {\n    ${TextButtonDropdownContent} {\n      background-color: ${COLORS.primary_100};\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n    color: ${COLORS.neutral_300};\n  }\n\n}`;\n"],"file":"CommonStyling.js"}

package/dist/Dropdown/DropdownButton.cjs

@@ -41,7 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: inline-block;\n"])));
 
-var DropdownButton = function DropdownButton(_ref) {
+var DropdownButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var items = _ref.items,
       icon = _ref.icon,
       disabled = _ref.disabled,
@@ -118,6 +118,7 @@ var DropdownButton = function DropdownButton(_ref) {
     switch (rest.type) {
       case 'icon':
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          ref: ref,
           variant: "secondary",
           shape: "circular",
           action: function action(event) {
@@ -206,8 +207,7 @@ var DropdownButton = function DropdownButton(_ref) {
       id: "dropdown-content"
     })]
   });
-};
-
+});
 var _default = DropdownButton;
 exports.default = _default;
 //# sourceMappingURL=DropdownButton.cjs.map

package/dist/Dropdown/DropdownButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","React","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n};\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}
+{"version":3,"sources":["../../src/Dropdown/DropdownButton.tsx"],"names":["Wrapper","styled","div","DropdownButton","React","forwardRef","ref","items","icon","disabled","onClick","itemsType","action","actionLabel","actionVariant","actionIcon","actionLoading","size","width","alignLeft","multiSelect","scrollable","pinTopItem","maxHeight","className","value","rest","useState","dropdownOpen","setDropdownOpen","selectedValues","setSelectedValues","focused","setFocused","keyboardNavigated","setKeyboardNavigated","containerRef","useEffect","handleValueSelect","values","renderButton","type","event","detail","label","keepLabel","length","filter","a","includes","map","displayLabel","join","cls","defaultOnMouseDownHandler","e","key","preventDefault","stopPropagation","onValueUpdate"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {IconButton} from '../Button';\nimport DropdownContent from './DropdownContent';\nimport styled from 'styled-components';\n\n/**\n * Import custom types.\n */\nimport {DropdownButtonProps} from './DropdownButtonTypes';\nimport {defaultOnMouseDownHandler, useClickOutsideRef, useFocusOutsideRef} from '../common';\nimport {\n  TextButtonDropdownArrow,\n  TextButtonDropdownContent,\n  TextButtonDropdownIcon,\n  TextButtonDropdownText,\n  TextButtonDropdownWrapper\n} from './CommonStyling';\nimport {ArrowDropDown, ArrowDropUp} from '../icons/systemicons/SystemIcons';\n\nconst Wrapper = styled.div`\n  position: relative;\n  display: inline-block;\n`;\n\nconst DropdownButton = React.forwardRef( ({\n                          items,\n                          icon,\n                          disabled,\n                          onClick,\n                          itemsType = 'normal',\n                          action,\n                          actionLabel = '',\n                          actionVariant,\n                          actionIcon,\n                          actionLoading,\n                          size,\n                          width,\n                          alignLeft,\n                          multiSelect = false,\n                          scrollable = false,\n                          pinTopItem = false,\n                          maxHeight,\n                          className,\n                          value,\n                          ...rest\n                        }: DropdownButtonProps, ref: React.Ref<HTMLButtonElement>) => {\n  // Globally used variables within the view.\n  const [dropdownOpen, setDropdownOpen] = React.useState<boolean>(false);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n\n  const containerRef = useClickOutsideRef(() => setDropdownOpen(false), [], useFocusOutsideRef(() => setDropdownOpen(false)));\n\n  React.useEffect(() => {\n    !dropdownOpen && setKeyboardNavigated(false)\n  }, [dropdownOpen]);\n\n  React.useEffect(() => {\n    disabled && setDropdownOpen(false)\n  }, [disabled]);\n\n  React.useEffect(() => {\n    setSelectedValues(value || []);\n  }, [value]);\n\n  const handleValueSelect = (values: string[]) => {\n    // Do all required actions\n    onClick(values);\n  };\n\n  /**\n   * Renders Icon Button dropdown menu.\n   * @returns HTML View for the Icon button dropdown menu.\n   */\n  const renderButton = () => {\n    switch (rest.type) {\n      case 'icon':\n        return (\n          <IconButton ref={ref}\n                      variant=\"secondary\"\n                      shape=\"circular\"\n                      action={(event: any) => {\n                        setDropdownOpen(!dropdownOpen);\n                        if (event?.detail !== 1) {\n                          setKeyboardNavigated(true);\n                        }\n                      }}\n                      disabled={disabled}>\n            {icon}\n          </IconButton>\n        );\n      case 'text':\n        const label = rest.keepLabel || !selectedValues?.length\n          ? rest.label\n          : items.filter(a => selectedValues.includes(a.value)).map(a => a.displayLabel ?? a.value).join(', ');\n        const cls = `${disabled && 'disabled'} ${dropdownOpen && 'expanded'} ${className}`;\n        return <TextButtonDropdownWrapper tabIndex={!disabled ? 0 : -1}\n                                          className={cls}\n                                          onMouseDown={defaultOnMouseDownHandler}\n                                          onKeyDown={e => {\n                                            if (e.key === 'Enter' || e.key === ' ') {\n                                              e.preventDefault();\n                                              e.stopPropagation();\n                                              setDropdownOpen(!dropdownOpen);\n                                              setKeyboardNavigated(true);\n                                            }\n                                          }}\n                                          onClick={() => !disabled && setDropdownOpen(!dropdownOpen)}>\n          <TextButtonDropdownContent>\n            {icon && <TextButtonDropdownIcon>{icon}</TextButtonDropdownIcon>}\n            <TextButtonDropdownText>{label}</TextButtonDropdownText>\n            <TextButtonDropdownArrow>\n              {\n                dropdownOpen\n                  ? <ArrowDropUp size=\"24px\"/>\n                  : <ArrowDropDown size=\"24px\"/>\n              }\n            </TextButtonDropdownArrow>\n          </TextButtonDropdownContent>\n        </TextButtonDropdownWrapper>\n    }\n  };\n\n  return (\n    <Wrapper className={className} ref={containerRef}>\n      {renderButton()}\n      <DropdownContent\n        customizationProps={{\n          itemsType: itemsType,\n          action: action ?? (() => {\n          }),\n          actionLabel: actionLabel,\n          actionVariant: actionVariant,\n          onValueUpdate: handleValueSelect,\n          multiSelect: multiSelect,\n          actionIcon: actionIcon,\n          actionLoading: actionLoading,\n          scrollable: scrollable,\n          pinTopItem: pinTopItem,\n          maxHeight: maxHeight,\n          items: items\n        }}\n        focused={focused}\n        setFocused={setFocused}\n        size={size}\n        width={width}\n        alignLeft={alignLeft}\n        isOpen={dropdownOpen}\n        setIsOpen={setDropdownOpen}\n        outline={keyboardNavigated}\n        filter=\"\"\n        selectedValues={rest.type === 'icon' && itemsType === 'normal' ? [] : selectedValues}\n        setSelectedValues={setSelectedValues}\n        messageOnNoResults=\"No results\"\n        isButton={true}\n        id=\"dropdown-content\"\n      />\n    </Wrapper>\n  );\n});\n\nexport default DropdownButton;\n"],"file":"DropdownButton.cjs"}

package/dist/Dropdown/DropdownButton.d.ts

@@ -1,6 +1,10 @@
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
 /**
  * Import custom types.
  */
 import { DropdownButtonProps } from './DropdownButtonTypes';
-declare const DropdownButton: ({ items, icon, disabled, onClick, itemsType, action, actionLabel, actionVariant, actionIcon, actionLoading, size, width, alignLeft, multiSelect, scrollable, pinTopItem, maxHeight, className, value, ...rest }: DropdownButtonProps) => JSX.Element;
+declare const DropdownButton: React.ForwardRefExoticComponent<DropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export default DropdownButton;