@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/ChipsInput/ChipInputField.js

@@ -1,9 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["inputId", "items", "disabled", "placeholder", "altPlaceholder", "multiLine", "size", "validationMessage", "loading", "onRemoveItem", "onInputValueChange", "onInputKeyDown", "onActivationChange", "inputValue", "required", "onBlur"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
@@ -17,12 +15,133 @@ import { useFocusVisibleRef } from '../common';
 import { IconButton } from '../Button';
 import { SystemIcons } from '../icons';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const Loading = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 20px;\n  width: 20px;\n"])));
-export const ChipInputBoundItems = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  flex: 1;\n  min-width: 40px;\n"])));
-export const ChipInputContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 100%;\n  background: transparent;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  column-gap: 8px;\n  margin-right: 6px;\n  padding-right: 10px;\n  padding-left: 16px;\n  flex-wrap: nowrap;\n  overflow-x: scroll;\n  min-height: 48px;\n\n  ", "\n  ::-webkit-scrollbar:horizontal {\n    display: none;\n  }\n\n  .action-right:focus,\n  button:focus {\n    outline-offset: -4px !important;\n  }\n"])), scrollBarStyling(Size.Small));
-export const ChipInputEl = styled.input(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  border: none;\n  outline: none;\n\n  height: 40px;\n  min-width: 40px;\n  display: inline-flex;\n  flex: 1;\n  background: transparent;\n\n  ", "\n  color: ", " !important;\n\n  &::placeholder {\n    ", "\n  }\n"])), ComponentMStyling(ComponentTextStyle.Regular, null), props => COLORS.getColor('black', props.theme), props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)));
-export const ChipInputContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n  margin-bottom: 4px;\n  box-shadow: inset 0 0 0 1px ", ";\n  background-color: ", ";\n  box-sizing: border-box;\n  cursor: text;\n  outline: none;\n  display: flex;\n  align-items: center;\n\n  ", "\n  &.small {\n    padding: 0;\n    min-height: 48px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.medium {\n    padding: 4px 0;\n    min-height: 56px;\n\n    ", "::placeholder {\n      ", "\n    }\n  }\n\n  &.multiline.medium {\n    ", " {\n      max-height: calc(48px * 3);\n      flex-wrap: wrap;\n      overflow-y: auto;\n      overflow-x: unset;\n    }\n  }\n\n  &.focus-visible-within,\n  &:focus {\n    ", "\n  }\n\n  &:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.invalid,\n  &.invalid:hover,\n  &.invalid:focus {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  &.disabled {\n    ", " {\n      pointer-events: none;\n    }\n\n    cursor: not-allowed;\n    box-shadow: inset 0 0 0 1px ", ";\n    outline: none;\n    color: ", " !important;\n  }\n"])), props => COLORS.getColor('neutral_400', props.theme), props => COLORS.getColor('white', props.theme), props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme)), ChipInputEl, props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)), ChipInputEl, props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme)), ChipInputContentContainer, focusStyles, props => COLORS.getColor('primary_700', props.theme), props => COLORS.getColor('primary_800', props.theme), props => COLORS.getColor('critical_500', props.theme), ChipInputContentContainer, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme));
+const Wrapper = styled.div`
+  position: relative;
+`;
+const Loading = styled.div`
+  height: 20px;
+  width: 20px;
+`;
+export const ChipInputBoundItems = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex: 1;
+  min-width: 40px;
+`;
+export const ChipInputContentContainer = styled.div`
+  width: 100%;
+  background: transparent;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  column-gap: 8px;
+  margin-right: 6px;
+  padding-right: 10px;
+  padding-left: 16px;
+  flex-wrap: nowrap;
+  overflow-x: scroll;
+  min-height: 48px;
+
+  ${scrollBarStyling(Size.Small)}
+  ::-webkit-scrollbar:horizontal {
+    display: none;
+  }
+
+  .action-right:focus,
+  button:focus {
+    outline-offset: -4px !important;
+  }
+`;
+export const ChipInputEl = styled.input`
+  border: none;
+  outline: none;
+
+  height: 40px;
+  min-width: 40px;
+  display: inline-flex;
+  flex: 1;
+  background: transparent;
+
+  ${ComponentMStyling(ComponentTextStyle.Regular, null)}
+  color: ${props => COLORS.getColor('black', props.theme)} !important;
+
+  &::placeholder {
+    ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+  }
+`;
+export const ChipInputContainer = styled.div`
+  width: 100%;
+  height: auto;
+  border-radius: 4px;
+  margin-bottom: 4px;
+  box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};
+  background-color: ${props => COLORS.getColor('white', props.theme)};
+  box-sizing: border-box;
+  cursor: text;
+  outline: none;
+  display: flex;
+  align-items: center;
+
+  ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}
+  &.small {
+    padding: 0;
+    min-height: 48px;
+
+    ${ChipInputEl}::placeholder {
+      ${props => ComponentSStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+    }
+  }
+
+  &.medium {
+    padding: 4px 0;
+    min-height: 56px;
+
+    ${ChipInputEl}::placeholder {
+      ${props => ComponentMStyling(ComponentTextStyle.Italic, COLORS.getColor('neutral_600', props.theme))}
+    }
+  }
+
+  &.multiline.medium {
+    ${ChipInputContentContainer} {
+      max-height: calc(48px * 3);
+      flex-wrap: wrap;
+      overflow-y: auto;
+      overflow-x: unset;
+    }
+  }
+
+  &.focus-visible-within,
+  &:focus {
+    ${focusStyles}
+  }
+
+  &:hover {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_700', props.theme)};
+  }
+
+  &:focus-within {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};
+  }
+
+  &.invalid,
+  &.invalid:hover,
+  &.invalid:focus {
+    box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('critical_500', props.theme)};
+  }
+
+  &.disabled {
+    ${ChipInputContentContainer} {
+      pointer-events: none;
+    }
+
+    cursor: not-allowed;
+    box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_100', props.theme)};
+    outline: none;
+    color: ${props => COLORS.getColor('neutral_300', props.theme)} !important;
+  }
+`;
 export const ChipInputField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       inputId,
@@ -64,25 +183,22 @@ export const ChipInputField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
    * Remove last cheap on backspace
    * */
   const handleInputKeyDown = e => {
-    var _inputRef$current;
-    if (e.key === 'Backspace' && !((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.value) && !e.repeat && items.length > 0) {
+    if (e.key === 'Backspace' && !inputRef.current?.value && !e.repeat && items.length > 0) {
       onRemoveItem(items[items.length - 1], items.length - 1);
     } else {
       onInputKeyDown(e);
     }
   };
   const handleItemRemove = (event, item, index) => {
-    var _inputRef$current2;
     onRemoveItem(item, index);
-    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus({
+    inputRef.current?.focus({
       focusVisible: event.detail !== 1
     });
   };
   const handleInputClear = e => {
-    var _inputRef$current3;
     onInputValueChange('');
-    (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 || _inputRef$current3.focus({
-      focusVisible: (e === null || e === void 0 ? void 0 : e.detail) !== 1
+    inputRef.current?.focus({
+      focusVisible: e?.detail !== 1
     });
   };
   const handleContainerKeyDown = e => {
@@ -91,32 +207,29 @@ export const ChipInputField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     const currentIndex = Array.from(items).indexOf(e.target);
     const direction = e.key === 'ArrowLeft' ? -1 : 1;
     const item = items[currentIndex + direction];
-    item === null || item === void 0 || item.focus({
+    item?.focus({
       focusVisible: true
     });
     onActivationChange && onActivationChange(false);
   };
-  const cls = "".concat(multiLine ? 'multiline' : '', " ").concat(validationMessage ? 'invalid' : '', " ").concat(size, " ").concat(loading ? 'loading' : '', " ").concat(disabled ? 'disabled' : '');
+  const cls = `${multiLine ? 'multiline' : ''} ${validationMessage ? 'invalid' : ''} ${size} ${loading ? 'loading' : ''} ${disabled ? 'disabled' : ''}`;
   return /*#__PURE__*/_jsxs(Wrapper, {
     onBlur: onBlur,
     children: [/*#__PURE__*/_jsx(ChipInputContainer, {
       "data-testid": "chip-input-container",
       ref: containerRef,
       onKeyDown: handleContainerKeyDown,
-      onClick: () => {
-        var _inputRef$current4;
-        return !disabled && ((_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.focus());
-      },
+      onClick: () => !disabled && inputRef.current?.focus(),
       className: cls,
       children: /*#__PURE__*/_jsxs(ChipInputContentContainer, {
-        children: [items === null || items === void 0 ? void 0 : items.map((chip, index) => /*#__PURE__*/_jsx(InputChip, {
-          icon: chip === null || chip === void 0 ? void 0 : chip.icon,
+        children: [items?.map((chip, index) => /*#__PURE__*/_jsx(InputChip, {
+          icon: chip?.icon,
           size: size,
           disabled: chip.disabled || disabled,
           variant: chip.variant || States.Default,
           text: chip.label,
           onRemove: e => handleItemRemove(e, chip, index)
-        }, "chip_".concat(index))), /*#__PURE__*/_jsxs(ChipInputBoundItems, {
+        }, `chip_${index}`)), /*#__PURE__*/_jsxs(ChipInputBoundItems, {
           children: [/*#__PURE__*/_jsx(ChipInputEl, _objectSpread({
             ref: inputRef,
             type: "text",
@@ -126,17 +239,17 @@ export const ChipInputField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             value: inputValue,
             onChange: e => onInputValueChange(e.target.value),
             onKeyDown: handleInputKeyDown,
-            placeholder: (items === null || items === void 0 ? void 0 : items.length) === 0 ? placeholder : altPlaceholder || '',
+            placeholder: items?.length === 0 ? placeholder : altPlaceholder || '',
             onClick: e => {
               e.stopPropagation();
               onActivationChange && onActivationChange(true);
             }
           }, rest)), inputValue && !disabled && /*#__PURE__*/_jsx(IconButton, {
-            id: "clear-btn-".concat(inputId),
-            dataTestId: "clear-btn-".concat(inputId),
+            id: `clear-btn-${inputId}`,
+            dataTestId: `clear-btn-${inputId}`,
             action: handleInputClear,
             ref: ref => {
-              ref === null || ref === void 0 || ref.scrollIntoView({
+              ref?.scrollIntoView({
                 block: 'nearest',
                 inline: 'nearest'
               });

package/dist/ChipsInput/ChipInputField.js.map

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

package/dist/ChipsInput/ChipInputTypes.d.ts

@@ -1,64 +1,64 @@
-import { Size } from '../types';
-import { ChipVariant } from '../Chips/ChipTypes';
-import React from "react";
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
-    /**
-     * Required. The ID of the input element.
-     */
-    inputId: string;
-    /**
-    * Required. An array of strings representing the current values (chips) in the input.
-    */
-    values: string[];
-    /**
-    * Optional. An icon to be displayed inside the input.
-    */
-    icon?: React.ReactNode;
-    /**
-    * Optional. An array of ChipVariant objects representing the variants of the chips.
-    */
-    variants?: ChipVariant[];
-    /**
-    * Optional. The placeholder text to be displayed in the input when it is empty and no items available for selecting.
-    */
-    placeholder?: string;
-    /**
-    * Optional. An alternative placeholder text to be displayed in the input when it is empty and there are items to select.
-    */
-    altPlaceholder?: string;
-    /**
-     * Required. A function to be called when the values (chips) change.
-     * It should take an array of strings representing the new values.
-     */
-    onValueChange: (chips: string[]) => void;
-    /**
-    * Optional. A boolean indicating whether the input supports multiple lines.
-    */
-    multiLine?: boolean;
-    /**
-    * Optional. A boolean indicating whether the input is disabled.
-    */
-    disabled?: boolean;
-    /**
-    * Optional. The size of the input. Can be 'Medium' or 'Small'.
-    */
-    size?: Size.Medium | Size.Small;
-    /**
-    * Optional. The validation message to be displayed when the input is in an error state.
-    */
-    validationMessage?: string;
-    /**
-     * Optional. A boolean indicating whether the input is required.
-     */
-    required?: boolean;
-    /**
-     * Optional. A boolean indicating whether the input should automatically save its value.
-     */
-    autoSave?: boolean;
-}
-export interface ChipItem {
-    label: string;
-    icon?: React.ReactNode;
-    disabled?: boolean;
-    variant?: ChipVariant;
-}
+import { Size } from '../types';
+import { ChipVariant } from '../Chips/ChipTypes';
+import React from "react";
+export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'autoSave' | 'list' | 'type' | 'id' | 'required' | 'tabIndex' | 'value' | 'onChange' | 'onKeyDown' | 'placeholder' | 'onClick' | 'disabled' | 'size'> {
+    /**
+     * Required. The ID of the input element.
+     */
+    inputId: string;
+    /**
+    * Required. An array of strings representing the current values (chips) in the input.
+    */
+    values: string[];
+    /**
+    * Optional. An icon to be displayed inside the input.
+    */
+    icon?: React.ReactNode;
+    /**
+    * Optional. An array of ChipVariant objects representing the variants of the chips.
+    */
+    variants?: ChipVariant[];
+    /**
+    * Optional. The placeholder text to be displayed in the input when it is empty and no items available for selecting.
+    */
+    placeholder?: string;
+    /**
+    * Optional. An alternative placeholder text to be displayed in the input when it is empty and there are items to select.
+    */
+    altPlaceholder?: string;
+    /**
+     * Required. A function to be called when the values (chips) change.
+     * It should take an array of strings representing the new values.
+     */
+    onValueChange: (chips: string[]) => void;
+    /**
+    * Optional. A boolean indicating whether the input supports multiple lines.
+    */
+    multiLine?: boolean;
+    /**
+    * Optional. A boolean indicating whether the input is disabled.
+    */
+    disabled?: boolean;
+    /**
+    * Optional. The size of the input. Can be 'Medium' or 'Small'.
+    */
+    size?: Size.Medium | Size.Small;
+    /**
+    * Optional. The validation message to be displayed when the input is in an error state.
+    */
+    validationMessage?: string;
+    /**
+     * Optional. A boolean indicating whether the input is required.
+     */
+    required?: boolean;
+    /**
+     * Optional. A boolean indicating whether the input should automatically save its value.
+     */
+    autoSave?: boolean;
+}
+export interface ChipItem {
+    label: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    variant?: ChipVariant;
+}

package/dist/ChipsInput/index.d.ts

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

package/dist/Dropdown/BasicDropdown.cjs

@@ -20,7 +20,7 @@ var _types = require("../types");
 var _common = require("../common");
 var _styledComponents = require("styled-components");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow"];
+const _excluded = ["id", "list", "placeholder", "messageOnNoResults", "itemsType", "action", "actionLabel", "actionVariant", "actionIcon", "actionLoading", "actionDisabled", "pinTopItem", "scrollable", "maxHeight", "disabled", "readOnly", "isButton", "activeValidationMessage", "autofilledMessage", "size", "margin", "minWidth", "className", "overflowTooltipPosition", "onBlur", "dataTestId", "onSelect", "textOverflow", "dropdownIcon"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -54,7 +54,8 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur,
       dataTestId,
       onSelect,
-      textOverflow = 'ellipsis'
+      textOverflow = 'ellipsis',
+      dropdownIcon
     } = props,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   const theme = (0, _styledComponents.useTheme)();
@@ -90,8 +91,7 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
     //don't close dropdown on item select if have custom action or multiselect
     if (actionLabel || props.multiSelect) return;
     if (keyboardNavigated) {
-      var _styledFieldRef$curre;
-      (_styledFieldRef$curre = styledFieldRef.current) === null || _styledFieldRef$curre === void 0 || _styledFieldRef$curre.focus({
+      styledFieldRef.current?.focus({
         focusVisible: true
       });
     }
@@ -130,13 +130,13 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
       onBlur && onBlur(e);
     }
   };
-  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? " ".concat(className) : '');
+  const cls = (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? ' button ' : '').concat(className ? ` ${className}` : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_CommonStyling.DropdownContainer, {
       ref: containerRef,
       "aria-expanded": isOpen ? true : false,
       "aria-activedescendant": activeDescendant,
-      "aria-controls": "".concat(id, "_dropdowncontent"),
+      "aria-controls": `${id}_dropdowncontent`,
       role: "listbox",
       "aria-multiselectable": props.multiSelect,
       $isButton: isButton || false,
@@ -155,11 +155,9 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
             e.stopPropagation();
             setIsOpen(!isOpen);
             if (isOpen) {
-              var _inputRef$current;
-              (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+              inputRef.current?.blur();
             } else {
-              var _inputRef$current2;
-              (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+              inputRef.current?.focus();
             }
           }
         },
@@ -180,7 +178,7 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
           readOnly: true,
           placeholder: placeholder,
           value: getDisplayItems(),
-          className: size ? "".concat(size, " value") : 'value',
+          className: size ? `${size} value` : 'value',
           tabIndex: -1,
           disabled: disabled || false
         }), !isOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipOverflow.default, {
@@ -200,7 +198,7 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
             "aria-label": "Expanded",
             size: "24px",
             className: size ? size : ''
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {
+          }) : dropdownIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ArrowDropDown, {
             "aria-label": "Collapsed",
             size: "24px",
             className: size ? size : ''
@@ -212,7 +210,7 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
         onActiveDescendantChanged: id => setActiveDescendant(id),
         customizationProps: {
           itemsType: itemsType,
-          action: action !== null && action !== void 0 ? action : () => {},
+          action: action ?? (() => {}),
           actionLabel: actionLabel,
           actionVariant: actionVariant,
           actionDisabled: actionDisabled,
@@ -228,16 +226,16 @@ const BasicDropdown = /*#__PURE__*/React.forwardRef((props, ref) => {
         ariaRolesType: "input",
         focused: focused,
         setFocused: setFocused,
-        size: size !== null && size !== void 0 ? size : _types.Size.Small,
+        size: size ?? _types.Size.Small,
         filter: '',
         isOpen: isOpen,
         setIsOpen: customSetIsOpen,
-        messageOnNoResults: messageOnNoResults !== null && messageOnNoResults !== void 0 ? messageOnNoResults : '',
+        messageOnNoResults: messageOnNoResults ?? '',
         outline: keyboardNavigated,
         isButton: isButton || false,
         selectedValues: props.multiSelect ? props.value || [] : [props.value || ''],
         setSelectedValues: handleValueSelect,
-        id: "".concat(id, "_dropdowncontent")
+        id: `${id}_dropdowncontent`
       })]
     }), activeValidationMessage && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_InputFields.ErrorMessage, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.TechnicalWarning, {
@@ -277,9 +275,9 @@ BasicDropdown.propTypes = {
   minWidth: _propTypes.default.string,
   textOverflow: _propTypes.default.oneOf(['ellipsis', 'default']),
   overflowTooltipPosition: _propTypes.default.oneOf(['top', 'bottom']),
+  dropdownIcon: _propTypes.default.node,
   multiSelect: _propTypes.default.oneOf([false]),
-  value: _propTypes.default.string,
-  onSelect: _propTypes.default.func.isRequired
+  value: _propTypes.default.string
 };
 var _default = exports.default = BasicDropdown;
 //# sourceMappingURL=BasicDropdown.cjs.map