@laerdal/life-react-components 1.9.8-dev.21 → 1.9.8-dev.24

package/dist/ChipsInput/ChipInput.js

@@ -1,12 +1,12 @@
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 
-/**
- * Import React libraries.
+/**
+ * Import React libraries.
  */
 import * as React from 'react';
-/**
- * Import custom components.
+/**
+ * Import custom components.
  */
 
 import { Size } from '../types';
@@ -42,8 +42,8 @@ var ChipInput = function ChipInput(_ref) {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       chipItems = _React$useState6[0],
       setChipItems = _React$useState6[1];
-  /**
-   * Sets initial values for the chips.
+  /**
+   * Sets initial values for the chips.
    */
 
 
@@ -51,8 +51,8 @@ var ChipInput = function ChipInput(_ref) {
     // Let's add initial chip values
     setChips(values);
   }, [values]);
-  /**
-   * Set chip items for chip input field
+  /**
+   * Set chip items for chip input field
    * */
 
   React.useEffect(function () {
@@ -65,9 +65,9 @@ var ChipInput = function ChipInput(_ref) {
       };
     }));
   }, [chips, variants, icon, size]);
-  /**
-   * Adds a chip to the chip list.
-   * @param event - Event handler from the key down event.
+  /**
+   * Adds a chip to the chip list.
+   * @param event - Event handler from the key down event.
    */
 
   var handleInputKeyDown = function handleInputKeyDown(event) {
@@ -78,9 +78,9 @@ var ChipInput = function ChipInput(_ref) {
       setValue('');
     }
   };
-  /**
-   * Removes a specific chip from the chip list.
-   * @param index - Index of the chip that needs to be removed.
+  /**
+   * Removes a specific chip from the chip list.
+   * @param index - Index of the chip that needs to be removed.
    */
 
 
@@ -91,8 +91,8 @@ var ChipInput = function ChipInput(_ref) {
     setChips(newChips);
     onValueChange(newChips);
   };
-  /**
-   * Return Chip Input component.
+  /**
+   * Return Chip Input component.
    */
 
 

package/dist/ChipsInput/ChipInput.js.map

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

package/dist/ChipsInput/ChipInputField.cjs

@@ -80,8 +80,8 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var containerRef = _react.default.useRef(null);
 
   var inputRef = (0, _common.useFocusVisibleRef)([containerRef], ref);
-  /**
-   * Scroll container to last item on change
+  /**
+   * Scroll container to last item on change
    * */
 
   _react.default.useEffect(function () {
@@ -92,8 +92,8 @@ var ChipInputField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       });
     }
   }, [containerRef, inputRef, items]);
-  /**
-   * Remove last cheap on backspace
+  /**
+   * Remove last cheap on backspace
    * */
 
 

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":";;;;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,4GAAb;;AAIA,IAAMC,OAAO,GAAGF,0BAAOC,GAAV,wHAAb;;AAKO,IAAME,mBAAmB,GAAGH,0BAAOC,GAAV,sMAAzB;;;;AASA,IAAMG,yBAAyB,GAAGJ,0BAAOC,GAAV,+fAclC,8BAAiBI,YAAKC,KAAtB,CAdkC,CAA/B;;;;AAyBA,IAAMC,WAAW,GAAGP,0BAAOQ,KAAV,6SAUpB,+BAAkBC,2BAAmBC,OAArC,EAA8C,IAA9C,CAVoB,EAWbC,eAAOC,KAXM,EAclB,+BAAkBH,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CAdkB,CAAjB;;;;AAkBA,IAAMC,kBAAkB,GAAGf,0BAAOC,GAAV,kqCAKCU,eAAOK,WALR,EAMTL,eAAOM,KANE,EAa3B,+BAAkBR,2BAAmBC,OAArC,EAA8CC,eAAOC,KAArD,CAb2B,EAkBzBL,WAlByB,EAmBvB,+BAAkBE,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CAnBuB,EA2BzBP,WA3ByB,EA4BvB,+BAAkBE,2BAAmBI,MAArC,EAA6CF,eAAOG,WAApD,CA5BuB,EAiCzBV,yBAjCyB,EA2CzBc,mBA3CyB,EA+CGP,eAAOQ,WA/CV,EAmDGR,eAAOS,WAnDV,EAyDGT,eAAOU,YAzDV,EA6DzBjB,yBA7DyB,EAkEGO,eAAOW,WAlEV,EAoElBX,eAAOY,WApEW,CAAxB;;;;AA4FA,IAAMC,cAAc,gBAAGC,eAAMC,UAAN,CAC5B,gBAkBEC,GAlBF,EAmBK;AAAA,MAjBDC,OAiBC,QAjBDA,OAiBC;AAAA,MAhBDC,KAgBC,QAhBDA,KAgBC;AAAA,2BAfDC,QAeC;AAAA,MAfDA,QAeC,8BAfU,KAeV;AAAA,MAdDC,WAcC,QAdDA,WAcC;AAAA,MAbDC,cAaC,QAbDA,cAaC;AAAA,4BAZDC,SAYC;AAAA,MAZDA,SAYC,+BAZW,IAYX;AAAA,uBAXDC,IAWC;AAAA,MAXDA,IAWC,0BAXM7B,YAAK8B,MAWX;AAAA,MAVDC,iBAUC,QAVDA,iBAUC;AAAA,MATDC,OASC,QATDA,OASC;AAAA,MARDC,YAQC,QARDA,YAQC;AAAA,MAPDC,kBAOC,QAPDA,kBAOC;AAAA,MANDC,cAMC,QANDA,cAMC;AAAA,MALDC,kBAKC,QALDA,kBAKC;AAAA,MAJDC,UAIC,QAJDA,UAIC;AAAA,MAHDC,QAGC,QAHDA,QAGC;;AACH,MAAMC,YAAY,GAAGnB,eAAMoB,MAAN,CAA6B,IAA7B,CAArB;;AACA,MAAMC,QAAQ,GAAG,gCAAmB,CAACF,YAAD,CAAnB,EAAmCjB,GAAnC,CAAjB;AAEA;AACJ;AACA;;AACIF,iBAAMsB,SAAN,CAAgB,YAAM;AACpB,QAAID,QAAQ,CAACE,OAAT,IAAoBC,QAAQ,CAACC,aAAT,KAA2BJ,QAAQ,CAACE,OAA5D,EAAqE;AACnEF,MAAAA,QAAQ,CAACE,OAAT,CAAiBG,cAAjB,CAAgC;AAC9BC,QAAAA,KAAK,EAAE,SADuB;AAE9BC,QAAAA,MAAM,EAAE;AAFsB,OAAhC;AAID;AACF,GAPD,EAOG,CAACT,YAAD,EAAeE,QAAf,EAAyBjB,KAAzB,CAPH;AASA;AACJ;AACA;;;AACI,MAAMyB,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,CAAD,EAA8C;AAAA;;AACvE,QAAIA,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyB,uBAACV,QAAQ,CAACE,OAAV,8CAAC,kBAAkBS,KAAnB,CAAzB,IAAqD,CAACF,CAAC,CAACG,MAAxD,IAAkE7B,KAAK,CAAC8B,MAAN,GAAe,CAArF,EAAwF;AACtFrB,MAAAA,YAAY,CAACT,KAAK,CAACA,KAAK,CAAC8B,MAAN,GAAe,CAAhB,CAAN,EAA0B9B,KAAK,CAAC8B,MAAN,GAAe,CAAzC,CAAZ;AACD,KAFD,MAEO;AACLnB,MAAAA,cAAc,CAACe,CAAD,CAAd;AACD;AACF,GAND;;AAQA,MAAMK,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAaC,IAAb,EAA6BC,KAA7B,EAA+C;AAAA;;AACtEzB,IAAAA,YAAY,CAACwB,IAAD,EAAOC,KAAP,CAAZ;AACA,0BAAAjB,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAAEC,MAAAA,YAAY,EAAEJ,KAAK,CAACK,MAAN,KAAiB;AAAjC,KAAxB;AACD,GAHD;;AAKA,MAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACZ,CAAD,EAAY;AAAA;;AACnChB,IAAAA,kBAAkB,CAAC,EAAD,CAAlB;AACA,0BAAAO,QAAQ,CAACE,OAAT,0EAAkBgB,KAAlB,CAAwB;AAAEC,MAAAA,YAAY,EAAE,CAAAV,CAAC,SAAD,IAAAA,CAAC,WAAD,YAAAA,CAAC,CAAEW,MAAH,MAAc;AAA9B,KAAxB;AACD,GAHD;;AAKA,MAAME,sBAAsB,GAAG,SAAzBA,sBAAyB,CAACb,CAAD,EAA4B;AACzD,QAAI,CAACX,YAAY,CAACI,OAAd,IAA0BO,CAAC,CAACC,GAAF,KAAU,WAAV,IAAyBD,CAAC,CAACC,GAAF,KAAU,YAAjE,EAAgF;AAEhF,QAAM3B,KAAK,GAAGe,YAAY,CAACI,OAAb,CAAqBqB,gBAArB,CAAsC,gBAAtC,CAAd;AACA,QAAMC,YAAY,GAAGC,KAAK,CAACC,IAAN,CAAW3C,KAAX,EAAkB4C,OAAlB,CAA0BlB,CAAC,CAACmB,MAA5B,CAArB;AACA,QAAMC,SAAS,GAAGpB,CAAC,CAACC,GAAF,KAAU,WAAV,GAAwB,CAAC,CAAzB,GAA6B,CAA/C;AACA,QAAMM,IAAI,GAAGjC,KAAK,CAACyC,YAAY,GAAGK,SAAhB,CAAlB;AACAb,IAAAA,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,KAAN,CAAY;AAAEC,MAAAA,YAAY,EAAE;AAAhB,KAAZ;AAEAxB,IAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,KAAD,CAAxC;AACD,GAVD;;AAYA,MAAMmC,GAAG,aAAM3C,SAAS,GAAG,WAAH,GAAiB,EAAhC,cAAsCG,iBAAiB,GAAG,SAAH,GAAe,EAAtE,cAA4EF,IAA5E,cAAoFG,OAAO,GAAG,SAAH,GAAe,EAA1G,cAAgHP,QAAQ,GAAG,UAAH,GAAgB,EAAxI,CAAT;AAEA,sBACE,sBAAC,OAAD;AAAA,4BACE,qBAAC,kBAAD;AAAoB,MAAA,GAAG,EAAEc,YAAzB;AAAuC,MAAA,SAAS,EAAEwB,sBAAlD;AAA0E,MAAA,OAAO,EAAE;AAAA;;AAAA,eAAM,CAACtC,QAAD,2BAAagB,QAAQ,CAACE,OAAtB,uDAAa,mBAAkBgB,KAAlB,EAAb,CAAN;AAAA,OAAnF;AAAiI,MAAA,SAAS,EAAEY,GAA5I;AAAA,6BACE,sBAAC,yBAAD;AAAA,mBACG/C,KADH,aACGA,KADH,uBACGA,KAAK,CAAEgD,GAAP,CAAW,UAACC,IAAD,EAAiBf,KAAjB;AAAA,8BACV,qBAAC,gBAAD;AAEE,YAAA,IAAI,EAAEe,IAAF,aAAEA,IAAF,uBAAEA,IAAI,CAAEC,IAFd;AAGE,YAAA,IAAI,EAAE7C,IAHR;AAIE,YAAA,QAAQ,EAAE4C,IAAI,CAAChD,QAAL,IAAiBA,QAJ7B;AAKE,YAAA,OAAO,EAAEgD,IAAI,CAACE,OAAL,IAAgBC,cAAOC,OALlC;AAME,YAAA,IAAI,EAAEJ,IAAI,CAACK,KANb;AAOE,YAAA,QAAQ,EAAE,kBAAC5B,CAAD;AAAA,qBAAOK,gBAAgB,CAACL,CAAD,EAAIuB,IAAJ,EAAUf,KAAV,CAAvB;AAAA;AAPZ,4BACeA,KADf,EADU;AAAA,SAAX,CADH,eAYE,sBAAC,mBAAD;AAAA,kCACE,qBAAC,WAAD;AACE,YAAA,GAAG,EAAEjB,QADP;AAEE,YAAA,IAAI,EAAC,MAFP;AAGE,YAAA,EAAE,EAAElB,OAHN;AAIE,YAAA,QAAQ,EAAEe,QAJZ;AAKE,YAAA,QAAQ,EAAEb,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAL5B;AAME,YAAA,KAAK,EAAEY,UANT;AAOE,YAAA,QAAQ,EAAE,kBAACa,CAAD;AAAA,qBAAOhB,kBAAkB,CAACgB,CAAC,CAACmB,MAAF,CAASjB,KAAV,CAAzB;AAAA,aAPZ;AAQE,YAAA,SAAS,EAAEH,kBARb;AASE,YAAA,WAAW,EAAE,CAAAzB,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAE8B,MAAP,MAAkB,CAAlB,GAAsB5B,WAAtB,GAAoCC,cAAc,IAAI,EATrE;AAUE,YAAA,OAAO,EAAE,iBAACuB,CAAD,EAAO;AACdA,cAAAA,CAAC,CAAC6B,eAAF;AACA3C,cAAAA,kBAAkB,IAAIA,kBAAkB,CAAC,IAAD,CAAxC;AACD;AAbH,YADF,EAgBGC,UAAU,IAAI,CAACZ,QAAf,iBACC,qBAAC,kBAAD;AACE,YAAA,MAAM,EAAEqC,gBADV;AAEE,YAAA,GAAG,EAAE,aAACxC,KAAD,EAAS;AACZA,cAAAA,KAAG,SAAH,IAAAA,KAAG,WAAH,YAAAA,KAAG,CAAEwB,cAAL,CAAoB;AAClBC,gBAAAA,KAAK,EAAE,SADW;AAElBC,gBAAAA,MAAM,EAAE;AAFU,eAApB;AAID,aAPH;AAQE,YAAA,wBAAwB,EAAE,IAR5B;AASE,YAAA,KAAK,EAAE,UATT;AAUE,YAAA,KAAK,EAAE;AAAEgC,cAAAA,UAAU,EAAE;AAAd,aAVT;AAWE,YAAA,OAAO,EAAE,WAXX;AAAA,mCAYE,qBAAC,kBAAD,CAAa,KAAb;AAZF,YAjBJ,EAiCGhD,OAAO,iBACN,qBAAC,OAAD;AAAS,YAAA,SAAS,EAAEH,IAApB;AAAA,mCACE,qBAAC,kCAAD;AAAkB,cAAA,IAAI,EAAE7B,YAAKC,KAA7B;AAAoC,cAAA,KAAK,EAAEK,eAAOG;AAAlD;AADF,YAlCJ;AAAA,UAZF;AAAA;AADF,MADF,EAuDGsB,iBAAiB,iBAChB,sBAAC,qBAAD;AAAA,8BACE,qBAAC,6BAAD;AAAkB,QAAA,KAAK,EAAEzB,eAAO2E;AAAhC,QADF,eAEE;AAAA,kBAAOlD;AAAP,QAFF;AAAA,MAxDJ;AAAA,IADF;AAgED,CAvI2B,CAAvB;;;;AAnBLR,EAAAA,O;AACAC,EAAAA,K;AACAC,EAAAA,Q;AACAC,EAAAA,W;AACAC,EAAAA,c;AACAC,EAAAA,S;AAEAI,EAAAA,O;AACAM,EAAAA,Q;AAEAP,EAAAA,iB;AAEAE,EAAAA,Y;AACAI,EAAAA,U;AACAH,EAAAA,kB;AACAC,EAAAA,c;AACAC,EAAAA,kB","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/styling';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\r\nimport styled 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: ${COLORS.black} !important;\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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: 4px 0px;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  background-color: ${COLORS.white};\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  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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 ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\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 ${COLORS.neutral_100};\r\n    outline: none;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps {\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    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\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) => {\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>\r\n        <ChipInputContainer ref={containerRef} onKeyDown={handleContainerKeyDown} onClick={() => !disabled && inputRef.current?.focus()} 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              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\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                  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.neutral_600} />\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <TechnicalWarning color={COLORS.critical_400} />\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\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 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"}

package/dist/ChipsInput/ChipInputField.d.ts

@@ -1,25 +1,25 @@
-import React from 'react';
-import { ChipItem } from './ChipInputTypes';
-import { Size } from '../types';
-export declare const ChipInputBoundItems: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipInputContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export interface ChipInputFieldProps {
-    inputId: string;
-    items: ChipItem[];
-    disabled?: boolean;
-    placeholder?: string;
-    altPlaceholder?: string;
-    multiLine?: boolean;
-    size?: Size.Large | Size.Medium | Size.Small;
-    loading?: boolean;
-    required?: boolean;
-    validationMessage?: string;
-    onRemoveItem: (item: ChipItem, index: number) => void;
-    inputValue: string;
-    onInputValueChange: (value: string) => void;
-    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
-    onActivationChange?: (active: boolean) => void;
-}
-export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;
+import React from 'react';
+import { ChipItem } from './ChipInputTypes';
+import { Size } from '../types';
+export declare const ChipInputBoundItems: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipInputContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipInputEl: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const ChipInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface ChipInputFieldProps {
+    inputId: string;
+    items: ChipItem[];
+    disabled?: boolean;
+    placeholder?: string;
+    altPlaceholder?: string;
+    multiLine?: boolean;
+    size?: Size.Large | Size.Medium | Size.Small;
+    loading?: boolean;
+    required?: boolean;
+    validationMessage?: string;
+    onRemoveItem: (item: ChipItem, index: number) => void;
+    inputValue: string;
+    onInputValueChange: (value: string) => void;
+    onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onActivationChange?: (active: boolean) => void;
+}
+export declare const ChipInputField: React.ForwardRefExoticComponent<ChipInputFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/ChipsInput/ChipInputField.js

@@ -43,8 +43,8 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       required = _ref.required;
   var containerRef = React.useRef(null);
   var inputRef = useFocusVisibleRef([containerRef], ref);
-  /**
-   * Scroll container to last item on change
+  /**
+   * Scroll container to last item on change
    * */
 
   React.useEffect(function () {
@@ -55,8 +55,8 @@ export var ChipInputField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       });
     }
   }, [containerRef, inputRef, items]);
-  /**
-   * Remove last cheap on backspace
+  /**
+   * Remove last cheap on backspace
    * */
 
   var handleInputKeyDown = function handleInputKeyDown(e) {

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';\r\nimport { ChipItem } from './ChipInputTypes';\r\nimport { Size, States } from '../types';\r\nimport { InputChip } from '../Chips';\r\nimport { ErrorMessage } from '../InputFields/styling';\r\nimport { TechnicalWarning } from '../icons/systemicons/SystemIcons';\r\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, focusStyles, scrollBarStyling } from '../styles';\r\nimport styled 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: ${COLORS.black} !important;\r\n\r\n  &::placeholder {\r\n    ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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: 4px 0px;\r\n  box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n  background-color: ${COLORS.white};\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  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  &.small {\r\n    padding: 0;\r\n    min-height: 48px;\r\n\r\n    ${ChipInputEl}::placeholder {\r\n      ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_600)}\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 ${COLORS.primary_700};\r\n  }\r\n\r\n  &:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  &.invalid,\r\n  &.invalid:hover,\r\n  &.invalid:focus {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\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 ${COLORS.neutral_100};\r\n    outline: none;\r\n    color: ${COLORS.neutral_300} !important;\r\n  }\r\n`;\r\n\r\nexport interface ChipInputFieldProps {\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    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    const inputRef = useFocusVisibleRef([containerRef], ref as any);\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) => {\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>\r\n        <ChipInputContainer ref={containerRef} onKeyDown={handleContainerKeyDown} onClick={() => !disabled && inputRef.current?.focus()} 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              />\r\n              {inputValue && !disabled && (\r\n                <IconButton\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                  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.neutral_600} />\r\n                </Loading>\r\n              )}\r\n            </ChipInputBoundItems>\r\n          </ChipInputContentContainer>\r\n        </ChipInputContainer>\r\n        {validationMessage && (\r\n          <ErrorMessage>\r\n            <TechnicalWarning color={COLORS.critical_400} />\r\n            <span>{validationMessage}</span>\r\n          </ErrorMessage>\r\n        )}\r\n      </Wrapper>\r\n    );\r\n  },\r\n);\r\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 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"}

package/dist/ChipsInput/ChipInputTypes.d.ts

@@ -1,22 +1,22 @@
-import { Size } from '../types';
-import { ChipIcons, ChipVariant } from '../Chips/ChipTypes';
-export interface ChipInputProps {
-    inputId: string;
-    values: string[];
-    icon?: ChipIcons;
-    variants?: ChipVariant[];
-    placeholder?: string;
-    altPlaceholder?: string;
-    onValueChange: (chips: string[]) => void;
-    multiLine?: boolean;
-    disabled?: boolean;
-    size?: Size.Medium | Size.Small;
-    validationMessage?: string;
-    required?: boolean;
-}
-export interface ChipItem {
-    label: string;
-    icon?: ChipIcons;
-    disabled?: boolean;
-    variant?: ChipVariant;
-}
+import { Size } from '../types';
+import { ChipIcons, ChipVariant } from '../Chips/ChipTypes';
+export interface ChipInputProps {
+    inputId: string;
+    values: string[];
+    icon?: ChipIcons;
+    variants?: ChipVariant[];
+    placeholder?: string;
+    altPlaceholder?: string;
+    onValueChange: (chips: string[]) => void;
+    multiLine?: boolean;
+    disabled?: boolean;
+    size?: Size.Medium | Size.Small;
+    validationMessage?: string;
+    required?: boolean;
+}
+export interface ChipItem {
+    label: string;
+    icon?: ChipIcons;
+    disabled?: boolean;
+    variant?: ChipVariant;
+}

package/dist/ChipsInput/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ChipDropdownInput';\r\n"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/ChipsInput/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ChipDropdownInput';\n"],"file":"index.cjs"}

package/dist/ChipsInput/index.d.ts

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

package/dist/ChipsInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ChipsInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAd","sourcesContent":["export * from './ChipDropdownInput';\r\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/ChipsInput/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAd","sourcesContent":["export * from './ChipDropdownInput';\n"],"file":"index.js"}

package/dist/Dropdown/BasicDropdown.cjs.map

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

package/dist/Dropdown/BasicDropdown.d.ts

@@ -1,42 +1,42 @@
-import * as React from 'react';
-import { DropdownItem } from './DropdownContent';
-import { Size } from '../types';
-interface BasicDropdownCommonProps {
-    id: string;
-    list: DropdownItem[];
-    itemsType?: 'normal' | 'checkbox' | 'radio';
-    action?: () => void;
-    actionLabel?: string;
-    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
-    actionIcon?: React.ReactNode;
-    actionLoading?: boolean;
-    actionDisabled?: boolean;
-    pinTopItem?: boolean;
-    scrollable?: boolean;
-    maxHeight?: string;
-    placeholder?: string;
-    disableSorting?: boolean;
-    messageOnNoResults?: string;
-    disabled?: boolean;
-    readOnly?: boolean;
-    isButton?: boolean;
-    activeValidationMessage?: string;
-    autofilledMessage?: string;
-    size?: Size.Small | Size.Medium;
-    margin?: string;
-    minWidth?: string;
-    onBlur?: (event: React.FocusEvent) => void;
-}
-declare type DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {
-    multiSelect: true;
-    value?: string[];
-    onSelect: (value: string[]) => void;
-};
-declare type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
-    multiSelect?: false;
-    value?: string;
-    onSelect: (value: string) => void;
-};
-declare type DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;
-declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
-export default BasicDropdown;
+import * as React from 'react';
+import { DropdownItem } from './DropdownContent';
+import { Size } from '../types';
+interface BasicDropdownCommonProps {
+    id: string;
+    list: DropdownItem[];
+    itemsType?: 'normal' | 'checkbox' | 'radio';
+    action?: () => void;
+    actionLabel?: string;
+    actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;
+    actionIcon?: React.ReactNode;
+    actionLoading?: boolean;
+    actionDisabled?: boolean;
+    pinTopItem?: boolean;
+    scrollable?: boolean;
+    maxHeight?: string;
+    placeholder?: string;
+    disableSorting?: boolean;
+    messageOnNoResults?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    isButton?: boolean;
+    activeValidationMessage?: string;
+    autofilledMessage?: string;
+    size?: Size.Small | Size.Medium;
+    margin?: string;
+    minWidth?: string;
+    onBlur?: (event: React.FocusEvent) => void;
+}
+declare type DropdownFilterMultiSelectProps = BasicDropdownCommonProps & {
+    multiSelect: true;
+    value?: string[];
+    onSelect: (value: string[]) => void;
+};
+declare type DropdownFilterSingleSelectProps = BasicDropdownCommonProps & {
+    multiSelect?: false;
+    value?: string;
+    onSelect: (value: string) => void;
+};
+declare type DropdownFilterProps = DropdownFilterMultiSelectProps | DropdownFilterSingleSelectProps;
+declare const BasicDropdown: React.ForwardRefExoticComponent<DropdownFilterProps & React.RefAttributes<unknown>>;
+export default BasicDropdown;