@laerdal/life-react-components 1.7.0 → 1.8.0

package/dist/Chips/ChipTypes.d.ts

@@ -11,40 +11,28 @@ export interface InputChipProps extends ChipProps {
     variant: ChipVariant;
     icon?: ChipIcons;
     disableRemove?: boolean;
-    onRemove: () => void;
-    onClick: () => void;
+    onRemove: (e: any) => void;
+    onClick?: () => void;
 }
 export interface FilterChipProps extends ChipProps {
     text: string;
     selected: boolean;
-    onClick: () => void;
+    onClick?: () => void;
 }
 export interface ActionChipProps extends ChipProps {
     text: string;
     icon?: ChipIcons;
-    onClick: () => void;
+    onClick?: () => void;
 }
 export interface ChoiceChipProps extends ChipProps {
     selected: string;
     values: ChipValue[];
-    onClick: (value: ChipValue) => void;
+    onClick?: (value: ChipValue) => void;
 }
 export interface ChipValue {
     value: string;
     label: string;
     size: Size;
 }
-export interface ChipInputProps {
-    values: string[];
-    icon?: ChipIcons;
-    required?: boolean;
-    validationType?: 'error' | 'warning';
-    validationMessage?: string;
-    variants?: ChipVariant[];
-    inputId: string;
-    placeholder?: string;
-    onValueChange: (chips: string[]) => void;
-}
-declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
-declare type ChipVariant = 'normal' | 'warning' | 'error';
-export {};
+export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
+export declare type ChipVariant = 'normal' | 'error';

package/dist/Chips/ChoiceChips.cjs

@@ -60,7 +60,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     // Update selected chip
     setSelectedChip(value.value); // Fire the event
 
-    onClick(value);
+    onClick && onClick(value);
   };
 
   var handleKeyDown = function handleKeyDown(e, value) {
@@ -77,7 +77,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     children: values.map(function (value) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
         tabIndex: disabled ? -1 : 0,
-        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline'),
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline', " interactive"),
         onMouseDown: _common.defaultOnMouseDownHandler,
         onClick: function onClick() {
           return !disabled && onSelectChip(value);

package/dist/Chips/ChoiceChips.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,CAACQ,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,CAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'}`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["ChoiceChips","selected","disabled","onClick","values","React","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","defaultOnMouseDownHandler","label"],"mappings":";;;;;;;;;;;;;AAGA;;AAKA;;AAMA;;;;;;;;AAdA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACP,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMS,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAR,IAAAA,OAAO,IAAIA,OAAO,CAACQ,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGP,MAAM,CAACW,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,qBAAC,yBAAD;AAEE,QAAA,QAAQ,EAAET,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKS,KAAK,CAACK,IAAX,cAAmBd,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDK,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,iBAHX;AAIE,QAAA,WAAW,EAAEM,iCAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACf,QAAD,IAAaQ,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACX,QAAD,IAAaU,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,qBAAC,gCAAD;AAAA,iCACE,qBAAC,uBAAD;AAAA,sBACGA,KAAK,CAACO;AADT;AADF;AAPF,SACOP,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;eA4DeX,W","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.cjs"}

package/dist/Chips/ChoiceChips.js

@@ -47,7 +47,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     // Update selected chip
     setSelectedChip(value.value); // Fire the event
 
-    onClick(value);
+    onClick && onClick(value);
   };
 
   var handleKeyDown = function handleKeyDown(e, value) {
@@ -64,7 +64,7 @@ var ChoiceChips = function ChoiceChips(_ref) {
     children: values.map(function (value) {
       return /*#__PURE__*/_jsx(ChipContainer, {
         tabIndex: disabled ? -1 : 0,
-        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline'),
+        className: "".concat(value.size, " ").concat(disabled ? 'disabled' : '', " ").concat(selectedChip === value.value ? 'normal' : 'outline', " interactive"),
         onMouseDown: defaultOnMouseDownHandler,
         onClick: function onClick() {
           return !disabled && onSelectChip(value);

package/dist/Chips/ChoiceChips.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,CAACO,KAAD,CAAP;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,CAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACM;AADT;AADF;AAPF,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'}`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}
+{"version":3,"sources":["../../src/Chips/ChoiceChips.tsx"],"names":["React","ChipContainer","ChipContent","ChipContentContainer","defaultOnMouseDownHandler","ChoiceChips","selected","disabled","onClick","values","useState","selectedChip","setSelectedChip","useEffect","onSelectChip","value","handleKeyDown","e","key","map","size","label"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAAQC,aAAR,EAAuBC,WAAvB,EAAoCC,oBAApC,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;AAEA,IAAMC,WAAqD,GAAG,SAAxDA,WAAwD,OAKwB;AAAA,MAJrBC,QAIqB,QAJrBA,QAIqB;AAAA,MAHrBC,QAGqB,QAHrBA,QAGqB;AAAA,MAFrBC,OAEqB,QAFrBA,OAEqB;AAAA,MADrBC,MACqB,QADrBA,MACqB;;AACpF;AACF;AACA;AACE,wBAAwCT,KAAK,CAACU,QAAN,CAAuB,EAAvB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;AAEA;AACF;AACA;;;AACEZ,EAAAA,KAAK,CAACa,SAAN,CAAgB,YAAM;AACpBD,IAAAA,eAAe,CAACN,QAAD,CAAf;AACD,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA;AACF;AACA;AACA;;AACE,MAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAAsB;AACzC;AACAH,IAAAA,eAAe,CAACG,KAAK,CAACA,KAAP,CAAf,CAFyC,CAIzC;;AACAP,IAAAA,OAAO,IAAIA,OAAO,CAACO,KAAD,CAAlB;AACD,GAND;;AAQA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,CAAD,EAASF,KAAT,EAA8B;AAClD,QAAIE,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBJ,MAAAA,YAAY,CAACC,KAAD,CAAZ;AACD;AACF,GAJD;AAMA;AACF;AACA;;;AACE,sBACE;AAAA,cACGN,MAAM,CAACU,GAAP,CAAW,UAACJ,KAAD;AAAA,0BACV,KAAC,aAAD;AAEE,QAAA,QAAQ,EAAER,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,QAAA,SAAS,YAAKQ,KAAK,CAACK,IAAX,cAAmBb,QAAQ,GAAG,UAAH,GAAgB,EAA3C,cAAiDI,YAAY,KAAKI,KAAK,CAACA,KAAvB,GAA+B,QAA/B,GAA0C,SAA3F,iBAHX;AAIE,QAAA,WAAW,EAAEX,yBAJf;AAKE,QAAA,OAAO,EAAE;AAAA,iBAAM,CAACG,QAAD,IAAaO,YAAY,CAACC,KAAD,CAA/B;AAAA,SALX;AAME,QAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,iBAAI,CAACV,QAAD,IAAaS,aAAa,CAACC,CAAD,EAAIF,KAAJ,CAA9B;AAAA,SANd;AAAA,+BAOE,KAAC,oBAAD;AAAA,iCACE,KAAC,WAAD;AAAA,sBACGA,KAAK,CAACM;AADT;AADF;AAPF,SACON,KAAK,CAACA,KADb,CADU;AAAA,KAAX;AADH,IADF;AAmBD,CA1DD;;AA4DA,eAAeV,WAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {ChipValue, ChoiceChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst ChoiceChips: React.FunctionComponent<ChoiceChipProps> = ({\n                                                                 selected,\n                                                                 disabled,\n                                                                 onClick,\n                                                                 values\n                                                               }: ChoiceChipProps) => {\n  /**\n   * Globally used variables within the component.\n   */\n  const [selectedChip, setSelectedChip] = React.useState<string>('');\n\n  /**\n   * Set the selected value for the chip.\n   */\n  React.useEffect(() => {\n    setSelectedChip(selected);\n  }, [selected]);\n\n  /**\n   * Sets selected chip and fires an event to parent component.\n   * @param value - Chip which was selected.\n   */\n  const onSelectChip = (value: ChipValue) => {\n    // Update selected chip\n    setSelectedChip(value.value);\n\n    // Fire the event\n    onClick && onClick(value);\n  };\n\n  const handleKeyDown = (e: any, value: ChipValue) => {\n    if (e.key === 'Enter') {\n      onSelectChip(value);\n    }\n  };\n\n  /**\n   * Return Choice Chip component.\n   */\n  return (\n    <>\n      {values.map((value: ChipValue) => (\n        <ChipContainer\n          key={value.value}\n          tabIndex={disabled ? -1 : 0}\n          className={`${value.size} ${disabled ? 'disabled' : ''} ${selectedChip === value.value ? 'normal' : 'outline'} interactive`}\n          onMouseDown={defaultOnMouseDownHandler}\n          onClick={() => !disabled && onSelectChip(value)}\n          onKeyDown={e => !disabled && handleKeyDown(e, value)}>\n          <ChipContentContainer>\n            <ChipContent>\n              {value.label}\n            </ChipContent>\n          </ChipContentContainer>\n        </ChipContainer>\n      ))}\n    </>\n  );\n};\n\nexport default ChoiceChips;\n"],"file":"ChoiceChips.js"}

package/dist/Chips/FilterChip.cjs

@@ -44,14 +44,14 @@ var FilterChip = function FilterChip(_ref) {
    */
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline'),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled ? -1 : 0,
       onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
+        return e.key === 'Enter' && !disabled && _onClick && _onClick();
       },
       onMouseDown: _common.defaultOnMouseDownHandler,
       onClick: function onClick() {
-        return _onClick();
+        return !disabled && _onClick && _onClick();
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {

package/dist/Chips/FilterChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,CAAxB;AACe,MAAA,QAAQ,EAAEG,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CADzC;AAEe,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBF,QAAO,EAAhC;AAAA,OAF3B;AAGe,MAAA,WAAW,EAAEG,iCAH5B;AAIe,MAAA,OAAO,EAAE;AAAA,eAAMH,QAAO,EAAb;AAAA,OAJxB;AAAA,6BAKE,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AALF;AADF,IADF;AAgBD,CA5BD;;eA8BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["FilterChip","selected","text","size","disabled","onClick","e","key","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;AAGA;;AAMA;;AAKA;;AAMA;;;;;;;;AApBA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AASA,IAAMA,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,cAA8E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA1G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEG,iCAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACJ,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,qBAAC,kBAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;eA+BeF,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.cjs"}

package/dist/Chips/FilterChip.js

@@ -33,14 +33,14 @@ var FilterChip = function FilterChip(_ref) {
    */
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ChipContainer, {
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline'),
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', " ").concat(selected ? 'normal' : 'outline', " ").concat(!!_onClick ? 'interactive' : ''),
       tabIndex: disabled ? -1 : 0,
       onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
+        return e.key === 'Enter' && !disabled && _onClick && _onClick();
       },
       onMouseDown: defaultOnMouseDownHandler,
       onClick: function onClick() {
-        return _onClick();
+        return !disabled && _onClick && _onClick();
       },
       children: /*#__PURE__*/_jsx(ChipContentContainer, {
         children: /*#__PURE__*/_jsxs(ChipContent, {

package/dist/Chips/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AAAe,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,CAAxB;AACe,MAAA,QAAQ,EAAEG,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CADzC;AAEe,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBF,QAAO,EAAhC;AAAA,OAF3B;AAGe,MAAA,WAAW,EAAEN,yBAH5B;AAIe,MAAA,OAAO,EAAE;AAAA,eAAMM,QAAO,EAAb;AAAA,OAJxB;AAAA,6BAKE,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AALF;AADF,IADF;AAgBD,CA5BD;;AA8BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}
+{"version":3,"sources":["../../src/Chips/FilterChip.tsx"],"names":["React","SystemIcons","ChipContent","ChipContentContainer","ChipContainer","defaultOnMouseDownHandler","FilterChip","selected","text","size","disabled","onClick","e","key"],"mappings":"AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;;AAGA;AACA;AACA;AACA,SAAQC,WAAR,QAA0B,gBAA1B;AAEA;AACA;AACA;;AACA,SAAQC,WAAR,EAAqBC,oBAArB,EAA2CC,aAA3C,QAA+D,cAA/D;AAEA;AACA;AACA;;AAEA,SAAQC,yBAAR,QAAwC,WAAxC;;;;;AAEA,IAAMC,UAAoD,GAAG,SAAvDA,UAAuD,OAMwB;AAAA,MALrBC,QAKqB,QALrBA,QAKqB;AAAA,MAJrBC,IAIqB,QAJrBA,IAIqB;AAAA,MAHrBC,IAGqB,QAHrBA,IAGqB;AAAA,MAFrBC,QAEqB,QAFrBA,QAEqB;AAAA,MADrBC,QACqB,QADrBA,OACqB;;AAGnF;AACF;AACA;AACE,sBACE;AAAA,2BACE,KAAC,aAAD;AACE,MAAA,SAAS,YAAKF,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,cAA2CH,QAAQ,GAAG,QAAH,GAAc,SAAjE,cAA8E,CAAC,CAACI,QAAF,GAAY,aAAZ,GAA4B,EAA1G,CADX;AAEE,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAF5B;AAGE,MAAA,SAAS,EAAE,mBAAAE,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqB,CAACH,QAAtB,IAAkCC,QAAlC,IAA6CA,QAAO,EAAxD;AAAA,OAHd;AAIE,MAAA,WAAW,EAAEN,yBAJf;AAKE,MAAA,OAAO,EAAE;AAAA,eAAM,CAACK,QAAD,IAAaC,QAAb,IAAwBA,QAAO,EAArC;AAAA,OALX;AAAA,6BAME,KAAC,oBAAD;AAAA,+BACE,MAAC,WAAD;AAAA,qBACGJ,QAAQ,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,mCAAuC,KAAC,WAAD,CAAa,aAAb;AAA2B,cAAA,SAAS,EAAE;AAAtC;AAAvC,YADf,eAEE;AAAA,sBAAMC;AAAN,YAFF;AAAA;AADF;AANF;AADF,IADF;AAiBD,CA7BD;;AA+BA,eAAeF,UAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport {Size} from '../types';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons} from '../icons/index';\n\n/**\n * Import custom styles.\n */\nimport {ChipContent, ChipContentContainer, ChipContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {FilterChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst FilterChip: React.FunctionComponent<FilterChipProps> = ({\n                                                                selected,\n                                                                text,\n                                                                size,\n                                                                disabled,\n                                                                onClick\n                                                              }: FilterChipProps) => {\n\n\n  /**\n   * Return Filter Chip component.\n   */\n  return (\n    <>\n      <ChipContainer\n        className={`${size} ${disabled ? 'disabled' : ''} ${selected ? 'normal' : 'outline'} ${!!onClick ? 'interactive' : ''}`}\n        tabIndex={disabled ? -1 : 0}\n        onKeyDown={e => e.key === 'Enter' && !disabled && onClick && onClick()}\n        onMouseDown={defaultOnMouseDownHandler}\n        onClick={() => !disabled && onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent>\n            {selected && <div className={'chip-icon icon-left'}><SystemIcons.CheckComplete className={'icon'}/></div>}\n            <div>{text}</div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default FilterChip;\n"],"file":"FilterChip.js"}

package/dist/Chips/InputChip.cjs

@@ -32,7 +32,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Import custom styles.
  */
-var InputChip = function InputChip(_ref) {
+var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
+
   var icon = _ref.icon,
       text = _ref.text,
       variant = _ref.variant,
@@ -41,7 +43,7 @@ var InputChip = function InputChip(_ref) {
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-  var containerRef = React.useRef(null);
+  var containerRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
   var removeRef = React.useRef(null);
   (0, _common.useActionWithin)(containerRef, [removeRef]);
   /**
@@ -51,7 +53,17 @@ var InputChip = function InputChip(_ref) {
 
   var onRemoveClick = function onRemoveClick(event) {
     !!event && event.stopPropagation();
-    onRemove();
+    onRemove(event);
+  };
+
+  var handleContainerKeyDown = function handleContainerKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      !disabled && _onClick && _onClick();
+    }
+
+    if (event.key === 'Backspace' && !disableRemove) {
+      !disableRemove && onRemove && onRemove(event);
+    }
   };
   /**
    * Return Input Chip component.
@@ -61,14 +73,12 @@ var InputChip = function InputChip(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContainer, {
       ref: containerRef,
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant),
-      tabIndex: disabled ? -1 : 0,
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
+      tabIndex: disabled || !_onClick ? -1 : 0,
       onMouseDown: _common.defaultOnMouseDownHandler,
-      onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
-      },
+      onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
-        return _onClick();
+        return _onClick && _onClick();
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChipStyles.ChipContentContainer, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ChipStyles.ChipContent, {
@@ -89,7 +99,7 @@ var InputChip = function InputChip(_ref) {
               return !disableRemove && onRemoveClick(e);
             },
             onKeyDown: function onKeyDown(e) {
-              return e.key === 'Enter' && onRemoveClick(e);
+              return (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e);
             },
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               className: 'chip-icon',
@@ -102,8 +112,7 @@ var InputChip = function InputChip(_ref) {
       })
     })
   });
-};
-
+});
 var _default = InputChip;
 exports.default = _default;
 //# sourceMappingURL=InputChip.cjs.map

package/dist/Chips/InputChip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","React","useRef","removeRef","onRemoveClick","event","stopPropagation","defaultOnMouseDownHandler","e","key","icons","className"],"mappings":";;;;;;;;;AAGA;;AAKA;;AAOA;;AAMA;;;;;;;;AArBA;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;AASA,IAAMA,SAAkD,GAAG,SAArDA,SAAqD,OASuB;AAAA,MARpBC,IAQoB,QARpBA,IAQoB;AAAA,MAPpBC,IAOoB,QAPpBA,IAOoB;AAAA,MANpBC,OAMoB,QANpBA,OAMoB;AAAA,MALpBC,IAKoB,QALpBA,IAKoB;AAAA,MAJpBC,QAIoB,QAJpBA,QAIoB;AAAA,MAHpBC,QAGoB,QAHpBA,OAGoB;AAAA,MAFpBC,aAEoB,QAFpBA,aAEoB;AAAA,MADpBC,QACoB,QADpBA,QACoB;AAEhF,MAAMC,YAAY,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAArB;AACA,MAAMC,SAAS,GAAGF,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAlB;AAEA,+BAAgBF,YAAhB,EAA8B,CAACG,SAAD,CAA9B;AAEA;AACF;AACA;AACA;;AACE,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD,EAAoE;AACxF,KAAC,CAACA,KAAF,IAAWA,KAAK,CAACC,eAAN,EAAX;AACAP,IAAAA,QAAQ;AACT,GAHD;AAKA;AACF;AACA;;;AACE,sBACE;AAAA,2BACE,qBAAC,yBAAD;AAAe,MAAA,GAAG,EAAEC,YAApB;AACe,MAAA,SAAS,YAAKL,IAAL,cAAaC,QAAQ,GAAG,UAAH,GAAgB,EAArC,eAA4CF,OAA5C,CADxB;AAEe,MAAA,QAAQ,EAAEE,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAFzC;AAGe,MAAA,WAAW,EAAEW,iCAH5B;AAIe,MAAA,SAAS,EAAE,mBAAAC,CAAC;AAAA,eAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBZ,QAAO,EAAhC;AAAA,OAJ3B;AAKe,MAAA,OAAO,EAAE;AAAA,eAAMA,QAAO,EAAb;AAAA,OALxB;AAAA,6BAME,qBAAC,gCAAD;AAAA,+BACE,sBAAC,uBAAD;AAAa,UAAA,SAAS,EAAE,mBAAxB;AAAA,qBACGL,IAAI,iBAAI;AAAK,YAAA,SAAS,EAAE,qBAAhB;AAAA,sBAAwCkB,mBAAMlB,IAAN,EAAY;AAACmB,cAAAA,SAAS,EAAE;AAAZ,aAAZ;AAAxC,YADX,eAGE;AAAA,sBAAMlB;AAAN,YAHF,eAKE;AAAK,YAAA,GAAG,EAAEU,SAAV;AACK,YAAA,SAAS,yBAAkBL,aAAa,GAAG,UAAH,GAAgB,EAA/C,CADd;AAEK,YAAA,QAAQ,EAAEA,aAAa,IAAIF,QAAjB,GAA4B,CAAC,CAA7B,GAAiC,CAFhD;AAGK,YAAA,WAAW,EAAEW,iCAHlB;AAIK,YAAA,OAAO,EAAE,iBAAAC,CAAC;AAAA,qBAAI,CAACV,aAAD,IAAkBM,aAAa,CAACI,CAAD,CAAnC;AAAA,aAJf;AAKK,YAAA,SAAS,EAAE,mBAAAA,CAAC;AAAA,qBAAIA,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBL,aAAa,CAACI,CAAD,CAAtC;AAAA,aALjB;AAAA,mCAME;AAAK,cAAA,SAAS,EAAE,WAAhB;AAAA,qCACE,qBAAC,kBAAD,CAAa,KAAb;AAAmB,gBAAA,SAAS,EAAE;AAA9B;AADF;AANF,YALF;AAAA;AADF;AANF;AADF,IADF;AA6BD,CAzDD;;eA2DejB,S","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = ({\n                                                              icon,\n                                                              text,\n                                                              variant,\n                                                              size,\n                                                              disabled,\n                                                              onClick,\n                                                              disableRemove,\n                                                              onRemove\n                                                            }: InputChipProps) => {\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove();\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant}`}\n                     tabIndex={disabled ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={e => e.key === 'Enter' && onClick()}\n                     onClick={() => onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => e.key === 'Enter' && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n};\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}
+{"version":3,"sources":["../../src/Chips/InputChip.tsx"],"names":["InputChip","React","forwardRef","ref","icon","text","variant","size","disabled","onClick","disableRemove","onRemove","containerRef","useRef","removeRef","onRemoveClick","event","stopPropagation","handleContainerKeyDown","key","defaultOnMouseDownHandler","icons","className","e"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom components.\n */\nimport {SystemIcons, SystemIcons as icons} from '../icons/index';\nimport {IconButton} from '../Button/index';\nimport {Size} from '../types';\n\n/**\n * Import custom styles.\n */\nimport {ChipContainer, ChipContent, ChipContentContainer} from './ChipStyles';\n\n/**\n * Import custom types.\n */\nimport {InputChipProps} from './ChipTypes';\nimport {defaultOnMouseDownHandler, useActionWithin} from '../common';\n\nconst InputChip: React.FunctionComponent<InputChipProps> = React.forwardRef(({\n                                                                               icon,\n                                                                               text,\n                                                                               variant,\n                                                                               size,\n                                                                               disabled,\n                                                                               onClick,\n                                                                               disableRemove,\n                                                                               onRemove\n                                                                             }: InputChipProps, ref) => {\n\n  const containerRef = ref as React.MutableRefObject<HTMLDivElement> ?? React.useRef<HTMLDivElement>(null);\n  const removeRef = React.useRef<HTMLDivElement>(null);\n\n  useActionWithin(containerRef, [removeRef]);\n\n  /**\n   * Calls onRemove action when remove button is clicked.\n   * @param event - Event handler from the button click.\n   */\n  const onRemoveClick = (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent) => {\n    !!event && event.stopPropagation();\n    onRemove(event);\n  };\n\n  const handleContainerKeyDown = (event: React.KeyboardEvent) => {\n    if (event.key === 'Enter' || event.key === ' ') {\n      !disabled && onClick && onClick();\n    }\n    if (event.key === 'Backspace' && !disableRemove) {\n      !disableRemove && onRemove && onRemove(event);\n    }\n  };\n\n  /**\n   * Return Input Chip component.\n   */\n  return (\n    <>\n      <ChipContainer ref={containerRef}\n                     className={`${size} ${disabled ? 'disabled' : ''}  ${variant} ${!!onClick ? 'interactive' : ''}`}\n                     tabIndex={disabled || !onClick ? -1 : 0}\n                     onMouseDown={defaultOnMouseDownHandler}\n                     onKeyDown={handleContainerKeyDown}\n                     onClick={() => onClick && onClick()}>\n        <ChipContentContainer>\n          <ChipContent className={'with-action-right'}>\n            {icon && <div className={'chip-icon icon-left'}>{icons[icon]({className: 'icon'})}</div>}\n\n            <div>{text}</div>\n\n            <div ref={removeRef}\n                 className={`action-right ${disableRemove ? 'disabled' : ''}`}\n                 tabIndex={disableRemove || disabled ? -1 : 0}\n                 onMouseDown={defaultOnMouseDownHandler}\n                 onClick={e => !disableRemove && onRemoveClick(e)}\n                 onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e)}>\n              <div className={'chip-icon'}>\n                <SystemIcons.Close className={'remove'}/>\n              </div>\n            </div>\n          </ChipContent>\n        </ChipContentContainer>\n      </ChipContainer>\n    </>\n  );\n});\n\nexport default InputChip;\n"],"file":"InputChip.cjs"}

package/dist/Chips/InputChip.js

@@ -20,8 +20,9 @@ import { defaultOnMouseDownHandler, useActionWithin } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+var InputChip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref2;
 
-var InputChip = function InputChip(_ref) {
   var icon = _ref.icon,
       text = _ref.text,
       variant = _ref.variant,
@@ -30,7 +31,7 @@ var InputChip = function InputChip(_ref) {
       _onClick = _ref.onClick,
       disableRemove = _ref.disableRemove,
       onRemove = _ref.onRemove;
-  var containerRef = React.useRef(null);
+  var containerRef = (_ref2 = ref) !== null && _ref2 !== void 0 ? _ref2 : React.useRef(null);
   var removeRef = React.useRef(null);
   useActionWithin(containerRef, [removeRef]);
   /**
@@ -40,7 +41,17 @@ var InputChip = function InputChip(_ref) {
 
   var onRemoveClick = function onRemoveClick(event) {
     !!event && event.stopPropagation();
-    onRemove();
+    onRemove(event);
+  };
+
+  var handleContainerKeyDown = function handleContainerKeyDown(event) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      !disabled && _onClick && _onClick();
+    }
+
+    if (event.key === 'Backspace' && !disableRemove) {
+      !disableRemove && onRemove && onRemove(event);
+    }
   };
   /**
    * Return Input Chip component.
@@ -50,14 +61,12 @@ var InputChip = function InputChip(_ref) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(ChipContainer, {
       ref: containerRef,
-      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant),
-      tabIndex: disabled ? -1 : 0,
+      className: "".concat(size, " ").concat(disabled ? 'disabled' : '', "  ").concat(variant, " ").concat(!!_onClick ? 'interactive' : ''),
+      tabIndex: disabled || !_onClick ? -1 : 0,
       onMouseDown: defaultOnMouseDownHandler,
-      onKeyDown: function onKeyDown(e) {
-        return e.key === 'Enter' && _onClick();
-      },
+      onKeyDown: handleContainerKeyDown,
       onClick: function onClick() {
-        return _onClick();
+        return _onClick && _onClick();
       },
       children: /*#__PURE__*/_jsx(ChipContentContainer, {
         children: /*#__PURE__*/_jsxs(ChipContent, {
@@ -78,7 +87,7 @@ var InputChip = function InputChip(_ref) {
               return !disableRemove && onRemoveClick(e);
             },
             onKeyDown: function onKeyDown(e) {
-              return e.key === 'Enter' && onRemoveClick(e);
+              return (e.key === 'Enter' || e.key === ' ') && onRemoveClick(e);
             },
             children: /*#__PURE__*/_jsx("div", {
               className: 'chip-icon',
@@ -91,7 +100,6 @@ var InputChip = function InputChip(_ref) {
       })
     })
   });
-};
-
+});
 export default InputChip;
 //# sourceMappingURL=InputChip.js.map

package/dist/Chips/InputChip.js.map

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

package/dist/Chips/index.cjs

@@ -42,7 +42,7 @@ var _FilterChip = _interopRequireDefault(require("./FilterChip"));
 
 var _ActionChip = _interopRequireDefault(require("./ActionChip"));
 
-var _ChipInput = _interopRequireDefault(require("./ChipInput"));
+var _ChipInput = _interopRequireDefault(require("../ChipsInput/ChipInput"));
 
 var _ChoiceChips = _interopRequireDefault(require("./ChoiceChips"));
 //# sourceMappingURL=index.cjs.map

package/dist/Chips/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as InputChip } from './InputChip';\nexport { default as FilterChip } from './FilterChip';\nexport { default as ActionChip } from './ActionChip';\nexport { default as ChipInput } from './ChipInput';\nexport { default as ChoiceChips } from './ChoiceChips';"],"file":"index.cjs"}
+{"version":3,"sources":["../../src/Chips/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["export { default as InputChip } from './InputChip';\nexport { default as FilterChip } from './FilterChip';\nexport { default as ActionChip } from './ActionChip';\nexport { default as ChipInput } from '../ChipsInput/ChipInput';\nexport { default as ChoiceChips } from './ChoiceChips';\n"],"file":"index.cjs"}

package/dist/Chips/index.d.ts

@@ -1,5 +1,5 @@
 export { default as InputChip } from './InputChip';
 export { default as FilterChip } from './FilterChip';
 export { default as ActionChip } from './ActionChip';
-export { default as ChipInput } from './ChipInput';
+export { default as ChipInput } from '../ChipsInput/ChipInput';
 export { default as ChoiceChips } from './ChoiceChips';

package/dist/Chips/index.js

@@ -1,6 +1,6 @@
 export { default as InputChip } from './InputChip';
 export { default as FilterChip } from './FilterChip';
 export { default as ActionChip } from './ActionChip';
-export { default as ChipInput } from './ChipInput';
+export { default as ChipInput } from '../ChipsInput/ChipInput';
 export { default as ChoiceChips } from './ChoiceChips';
 //# sourceMappingURL=index.js.map

package/dist/Chips/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Chips/index.ts"],"names":["default","InputChip","FilterChip","ActionChip","ChipInput","ChoiceChips"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,cAAtC;AACA,SAASF,OAAO,IAAIG,UAApB,QAAsC,cAAtC;AACA,SAASH,OAAO,IAAII,SAApB,QAAqC,aAArC;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as InputChip } from './InputChip';\nexport { default as FilterChip } from './FilterChip';\nexport { default as ActionChip } from './ActionChip';\nexport { default as ChipInput } from './ChipInput';\nexport { default as ChoiceChips } from './ChoiceChips';"],"file":"index.js"}
+{"version":3,"sources":["../../src/Chips/index.ts"],"names":["default","InputChip","FilterChip","ActionChip","ChipInput","ChoiceChips"],"mappings":"AAAA,SAASA,OAAO,IAAIC,SAApB,QAAqC,aAArC;AACA,SAASD,OAAO,IAAIE,UAApB,QAAsC,cAAtC;AACA,SAASF,OAAO,IAAIG,UAApB,QAAsC,cAAtC;AACA,SAASH,OAAO,IAAII,SAApB,QAAqC,yBAArC;AACA,SAASJ,OAAO,IAAIK,WAApB,QAAuC,eAAvC","sourcesContent":["export { default as InputChip } from './InputChip';\nexport { default as FilterChip } from './FilterChip';\nexport { default as ActionChip } from './ActionChip';\nexport { default as ChipInput } from '../ChipsInput/ChipInput';\nexport { default as ChoiceChips } from './ChoiceChips';\n"],"file":"index.js"}