@laerdal/life-react-components 1.10.3-dev.22 → 1.10.3-dev.24.full

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js

@@ -1,6 +1,10 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
+var _excluded = ["placement", "type", "action"],
+    _excluded2 = ["placement", "type", "icon", "menu"],
+    _excluded3 = ["placement", "type", "icon", "action"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
@@ -55,42 +59,66 @@ var MobileMenuHeader = function MobileMenuHeader(_ref) {
   };
 
   var renderItem = function renderItem(item, index) {
-    var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
-
     switch (item.type) {
       case 'profile':
-        return /*#__PURE__*/_jsx(ProfileButton, {
-          onClick: function onClick(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
-          },
-          icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
-          initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
-        }, index);
+        {
+          var _profile$user$firstNa, _profile$user, _profile$user$firstNa2, _profile$user$lastNam, _profile$user2, _profile$user2$lastNa;
+
+          var placement = item.placement,
+              type = item.type,
+              action = item.action,
+              rest = _objectWithoutProperties(item, _excluded);
+
+          return /*#__PURE__*/_jsx(ProfileButton, _objectSpread({
+            onClick: function onClick(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action ? item.action(e === null || e === void 0 ? void 0 : e.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu());
+            },
+            icon: !profile && /*#__PURE__*/_jsx(SystemIcons.User, {}),
+            initials: ((_profile$user$firstNa = profile === null || profile === void 0 ? void 0 : (_profile$user = profile.user) === null || _profile$user === void 0 ? void 0 : (_profile$user$firstNa2 = _profile$user.firstName) === null || _profile$user$firstNa2 === void 0 ? void 0 : _profile$user$firstNa2.charAt(0)) !== null && _profile$user$firstNa !== void 0 ? _profile$user$firstNa : '') + ((_profile$user$lastNam = profile === null || profile === void 0 ? void 0 : (_profile$user2 = profile.user) === null || _profile$user2 === void 0 ? void 0 : (_profile$user2$lastNa = _profile$user2.lastName) === null || _profile$user2$lastNa === void 0 ? void 0 : _profile$user2$lastNa.charAt(0)) !== null && _profile$user$lastNam !== void 0 ? _profile$user$lastNam : '')
+          }, rest), index);
+        }
 
       case 'submenu':
-        return /*#__PURE__*/_jsx(IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            onSubMenuOpen && onSubMenuOpen(item.menu);
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement = item.placement,
+              _type = item.type,
+              icon = item.icon,
+              menu = item.menu,
+              _rest = _objectWithoutProperties(item, _excluded2);
+
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              onSubMenuOpen && onSubMenuOpen(item.menu);
+            }
+          }, _rest), {}, {
+            children: item.icon
+          }), index);
+        }
 
       case 'action':
-        return /*#__PURE__*/_jsx(IconButton, {
-          disabled: item.disabled,
-          variant: 'secondary',
-          shape: 'circular',
-          action: function action(e) {
-            e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
-            item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
-          },
-          children: item.icon
-        }, index);
+        {
+          var _placement2 = item.placement,
+              _type2 = item.type,
+              _icon = item.icon,
+              _action = item.action,
+              _rest2 = _objectWithoutProperties(item, _excluded3);
+
+          return /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+            disabled: item.disabled,
+            variant: 'secondary',
+            shape: 'circular',
+            action: function action(e) {
+              e === null || e === void 0 ? void 0 : e.nativeEvent.stopImmediatePropagation();
+              item.action && item.action(e === null || e === void 0 ? void 0 : e.target) && onClose();
+            }
+          }, _rest2), {}, {
+            children: item.icon
+          }), index);
+        }
     }
   };
 

package/dist/GlobalNavigationBar/mobile/MobileMenuHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","placement","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile':\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}/>\n      case 'submenu':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}>\n          {item.icon}\n        </IconButton>\n      case 'action':\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}>\n          {item.icon}\n        </IconButton>\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}
+{"version":3,"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenuHeader.tsx"],"names":["React","styled","Breakpoints","IconButton","SystemIcons","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","ProfileButton","MobileMenuHeaderActions","div","MobileMenuHeaderLabel","Bold","neutral_600","SMALL","MobileMenuHeaderWrapper","MEDIUM","MobileMenuHeader","onGoBack","onClose","label","profile","buttons","onSubMenuOpen","buildProfileSubMenu","type","header","user","firstName","lastName","note","email","link","action","signOut","icon","disabled","items","sections","map","a","undefined","renderItem","item","index","placement","rest","e","nativeEvent","stopImmediatePropagation","target","charAt","menu","filter","marginLeft"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  MobileMenuButtonTypes,\n  MenuNavigationItemTypeGroup,\n  ProfileMenu, MenuNavigationCustomSubMenu\n} from '../types';\nimport styled from 'styled-components';\nimport Breakpoints from '../../styles/breakpoints';\nimport {IconButton} from '../../Button';\nimport {SystemIcons} from '../../icons';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling} from '../../styles';\nimport {ProfileButton} from '../../ProfileButton';\n\nexport const MobileMenuHeaderActions = styled.div`\n  flex: 1;\n  justify-content: flex-end;\n  display: flex;\n  flex-direction: row;\n`;\nconst MobileMenuHeaderLabel = styled.div`\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nexport const MobileMenuHeaderWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 0 4px;\n\n  ${Breakpoints.SMALL} {\n    padding: 4px 8px;\n  }\n\n  ${Breakpoints.MEDIUM} {\n    display: none;\n  }\n`\n\ninterface MobileMenuHeaderProps {\n  onGoBack?: () => void;\n  onClose: () => void;\n  label?: string;\n\n  profile?: ProfileMenu\n  buttons?: MobileMenuButtonTypes[];\n\n  onSubMenuOpen?: (item?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => void;\n}\n\n\nconst MobileMenuHeader: React.FunctionComponent<MobileMenuHeaderProps> = ({\n                                                                            onGoBack,\n                                                                            onClose,\n                                                                            label,\n                                                                            profile,\n                                                                            buttons,\n                                                                            onSubMenuOpen\n                                                                          }) => {\n\n  const buildProfileSubMenu = () => !!profile ? {\n    type: 'group',\n    label: profile.label,\n    header: {\n      header: profile.user.firstName + ' ' + profile.user.lastName,\n      note: profile.user.email,\n      link: profile.user.link\n    },\n    action: {\n      label: profile.signOut?.label,\n      action: profile.signOut?.action,\n      icon: profile.signOut?.icon,\n      disabled: profile.signOut?.disabled\n    },\n    items: profile.sections.map(a => ({...a, type: 'section'}))\n  } as MenuNavigationItemTypeGroup : undefined\n\n  const renderItem = (item: MobileMenuButtonTypes, index: number) => {\n    switch (item.type) {\n      case 'profile': {\n        const {placement, type, action, ...rest} = item;\n        return <ProfileButton key={index}\n                              onClick={e => {\n                                e?.nativeEvent.stopImmediatePropagation();\n                                item.action ? item.action(e?.target) && onClose() : onSubMenuOpen && onSubMenuOpen(buildProfileSubMenu())\n                              }}\n                              icon={!profile && <SystemIcons.User/>}\n                              initials={(profile?.user?.firstName?.charAt(0) ?? '') + (profile?.user?.lastName?.charAt(0) ?? '')}\n                              {...rest}/>\n      }\n      case 'submenu': {\n        const {placement, type, icon, menu, ...rest} = item;\n\n        return <IconButton key={index}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             onSubMenuOpen && onSubMenuOpen(item.menu)\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n      case 'action': {\n        const {placement, type, icon, action, ...rest} = item;\n        return <IconButton key={index}\n                           disabled={item.disabled}\n                           variant={'secondary'}\n                           shape={'circular'}\n                           action={e => {\n                             e?.nativeEvent.stopImmediatePropagation();\n                             item.action && item.action(e?.target) && onClose();\n                           }}\n                           {...rest}>\n          {item.icon}\n        </IconButton>\n      }\n    }\n  }\n\n  return (\n    <MobileMenuHeaderWrapper>\n      {\n        onGoBack &&\n        <IconButton action={e => {\n          e?.nativeEvent.stopImmediatePropagation();\n          onGoBack();\n        }}\n                    variant={'secondary'}\n                    shape={'circular'}>\n          <SystemIcons.ArrowLineLeft/>\n        </IconButton>\n      }\n      {\n        buttons?.filter(a => a.placement === 'left').map(renderItem)\n      }\n      {\n        label &&\n        <MobileMenuHeaderLabel>{label}</MobileMenuHeaderLabel>\n      }\n      <MobileMenuHeaderActions>\n        {\n          buttons?.filter(a => a.placement !== 'left').map(renderItem)\n        }\n\n        {\n          onClose &&\n          <div style={{marginLeft: '8px'}}>\n            <IconButton variant={'secondary'}\n                        action={e => {\n                          e?.nativeEvent.stopImmediatePropagation();\n                          onClose();\n                        }}\n                        shape={'circular'}>\n              <SystemIcons.Close/>\n            </IconButton>\n          </div>\n        }\n      </MobileMenuHeaderActions>\n\n    </MobileMenuHeaderWrapper>\n  )\n};\n\n\nexport default MobileMenuHeader;\n"],"file":"MobileMenuHeader.js"}

package/dist/GlobalNavigationBar/types.d.ts

@@ -1,5 +1,8 @@
 import React from 'react';
 import { HyperlinkProps } from '../HyperLink/HyperLink';
+import { IconButtonProps } from '../Button/Iconbutton';
+import { ProfileButtonProps } from '../ProfileButton/ProfileButton';
+import { NavLinkProps } from 'react-router-dom';
 export interface MenuHyperLinkProps extends Pick<HyperlinkProps, 'id' | 'href' | 'onClick' | 'target'> {
     label: string;
     icon?: React.ReactElement;
@@ -32,30 +35,26 @@ export interface ProfileMenu {
     sections: MenuNavigationSection[];
     signOut?: MenuButton;
 }
-export interface MenuIconSubMenuButton {
+export interface MenuIconSubMenuButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'submenu';
     icon: React.ReactNode;
     menu: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuIconButton {
+export interface MenuIconButton extends Omit<IconButtonProps, 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'action';
     icon: React.ReactNode;
     action: (button?: EventTarget) => boolean | void;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuProfileButton {
+export interface MenuProfileButton extends Omit<ProfileButtonProps, 'type' | 'onClick' | 'initials' | 'hideOnLowWidth' | 'icon' | 'portraitSrc'> {
     type: 'profile';
     action?: (button?: EventTarget) => boolean | void;
     placement?: 'left' | 'right';
-    disabled?: boolean;
 }
-export interface MenuSwitcherButton {
+export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type' | 'action' | 'shape' | 'variant' | 'hideOnLowWidth' | 'flatEdge' | 'isInMobileMenu' | 'useTransparentBackground' | 'shouldNotInteract' | 'iconColor' | 'unsetIconSize' | 'borderRadius' | 'focusBackgroundColor' | 'children' | 'invertFocus'> {
     type: 'switcher';
     placement?: 'left' | 'right';
-    disabled?: boolean;
     action?: (button?: EventTarget) => boolean | void;
 }
 export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
@@ -89,11 +88,11 @@ export declare type MenuNavigationItem = {
     exact?: boolean;
     disabled?: boolean;
     external?: boolean;
-    action?: () => void;
+    action?: (e: React.MouseEvent) => void;
     label: string;
     note?: string;
     pinned?: boolean;
-};
+} & Omit<NavLinkProps, 'onClick' | 'to' | 'exact' | 'onMouseDown'>;
 export interface MenuNavigationSection<T = MenuNavigationItem> {
     divider?: boolean;
     pinned?: boolean;

package/dist/InputFields/SearchBar.cjs

@@ -156,6 +156,7 @@ var SearchBar = function SearchBar(_ref) {
         })]
       }), showDropdown && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.DropdownContent, {
         id: 'search',
+        containerRef: containerRef,
         size: size,
         isButton: false,
         customizationProps: {

package/dist/InputFields/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'} \n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.cjs"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["ClearIconWrapper","styled","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","React","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","COLORS","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.cjs"}

package/dist/InputFields/SearchBar.js

@@ -135,6 +135,7 @@ var SearchBar = function SearchBar(_ref) {
         })]
       }), showDropdown && /*#__PURE__*/_jsx(DropdownContent, {
         id: 'search',
+        containerRef: containerRef,
         size: size,
         isButton: false,
         customizationProps: {

package/dist/InputFields/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'} \n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}
+{"version":3,"sources":["../../src/InputFields/SearchBar.tsx"],"names":["React","COLORS","Search","SearchIcon","Clear","ClearIcon","TechnicalWarning","ErrorMessage","InputWrapper","SearchIconWrapper","IconButton","SearchBarInput","SearchField","styled","DropdownContent","useClickOutsideRef","ClearIconWrapper","div","SearchBar","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","validationMessage","onKeyDown","size","margin","showDropdown","dropdownButtonIcon","dropdownButtonLabel","dropdownButtonVariant","dropdownButtonAction","searchList","addToSearchList","dropdownScrollable","containerRef","useRef","useState","isOpen","setIsOpen","dropdownRef","isPressingEnter","e","key","preventDefault","stopPropagation","enteredSearchTerm","value","target","dropdownAction","term","concat","items","action","actionLabel","actionIcon","actionVariant","onValueUpdate","scrollable","pinTopItem","critical_400"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,MAAR,QAAqB,iBAArB;AACA,SAAQC,MAAM,IAAIC,UAAlB,EAA8BC,KAAK,IAAIC,SAAvC,EAAkDC,gBAAlD,QAAyE,kCAAzE;AACA,SAAQC,YAAR,EAAsBC,YAAtB,EAAoCC,iBAApC,QAA4D,WAA5D;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,cAAP,MAA2B,6BAA3B;AACA,OAAOC,WAAP,MAAwB,0BAAxB;AAEA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,eAAT,QAA8C,aAA9C;AACA,SAASC,kBAAT,QAAmC,WAAnC;;;;AAyBA,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV,qKAAtB;;AASA,IAAMC,SAAiD,GAAG,SAApDA,SAAoD,OAqBO;AAAA,MApBJC,EAoBI,QApBJA,EAoBI;AAAA,MAnBJC,UAmBI,QAnBJA,UAmBI;AAAA,MAlBJC,cAkBI,QAlBJA,aAkBI;AAAA,MAjBJC,WAiBI,QAjBJA,WAiBI;AAAA,MAhBJC,YAgBI,QAhBJA,YAgBI;AAAA,MAfJC,WAeI,QAfJA,WAeI;AAAA,MAdJC,kBAcI,QAdJA,kBAcI;AAAA,MAbJC,QAaI,QAbJA,QAaI;AAAA,MAZJC,iBAYI,QAZJA,iBAYI;AAAA,MAXJC,SAWI,QAXJA,SAWI;AAAA,MAVJC,IAUI,QAVJA,IAUI;AAAA,yBATJC,MASI;AAAA,MATJA,MASI,4BATK,OASL;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,kBAOI,QAPJA,kBAOI;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,qBAKI,QALJA,qBAKI;AAAA,MAJJC,oBAII,QAJJA,oBAII;AAAA,6BAHJC,UAGI;AAAA,MAHJA,UAGI,gCAHO,EAGP;AAAA,MAFJC,eAEI,QAFJA,eAEI;AAAA,MADJC,kBACI,QADJA,kBACI;AAC/D,MAAMC,YAAY,GAAGvC,KAAK,CAACwC,MAAN,CAAkB,IAAlB,CAArB;;AAEA,wBAA4BxC,KAAK,CAACyC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AACA,MAAMC,WAAW,GAAG7B,kBAAkB,CAAC;AAAA,WAAI4B,SAAS,CAAC,KAAD,CAAb;AAAA,GAAD,EAAuB,CAACJ,YAAD,CAAvB,CAAtC;;AAEA,MAAMM,eAAe,GAAG,SAAlBA,eAAkB,CAACC,CAAD,EAAY;AAClC,QAAIA,CAAC,CAACC,GAAF,KAAU,OAAd,EAAuB;AACrBD,MAAAA,CAAC,CAACE,cAAF;AACAF,MAAAA,CAAC,CAACG,eAAF;AACA,aAAO,IAAP;AACD;;AACD,WAAO,KAAP;AACD,GAPD;;AASA,MAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,CAACJ,CAAD,EAAY;AACpCT,IAAAA,eAAe,IAAIA,eAAe,CAAC;AAACc,MAAAA,KAAK,EAACL,CAAC,CAACM,MAAF,CAASD;AAAhB,KAAD,CAAlC;AACA7B,IAAAA,WAAW,CAACwB,CAAD,CAAX;AACD,GAHD;;AAKA,MAAMO,cAAc,GAAG,SAAjBA,cAAiB,GAAM;AAC3B,QAAGlB,oBAAH,EACEA,oBAAoB;AACvB,GAHD;;AAKA,sBACE;AAAA,4BACE,MAAC,YAAD;AACE,MAAA,QAAQ,EAAET,QADZ;AAEE,MAAA,MAAM,EAAEI,MAFV;AAAA,8BAGE,MAAC,WAAD;AAAa,QAAA,EAAE,EAAE,IAAjB;AAAuB,QAAA,IAAI,EAAED,IAA7B;AACa,QAAA,GAAG,EAAEU,YADlB;AAEa,QAAA,UAAU,EAAEnB,UAFzB;AAGa,QAAA,QAAQ,EAAEM,QAHvB;AAIa,QAAA,iBAAiB,EAAEC,iBAJhC;AAAA,gCAKE,KAAC,cAAD;AACE,UAAA,WAAW,EAAED,QAAQ,GAAG,EAAH,GAAQF,WAD/B;AAEE,UAAA,EAAE,EAAEL,EAFN;AAGE,UAAA,IAAI,EAAEU,IAHR;AAIE,UAAA,QAAQ,EAAEH,QAJZ;AAKE,UAAA,aAAa,EAAE,uBAAC4B,IAAD;AAAA,mBAAkBjC,cAAa,CAACiC,IAAD,CAA/B;AAAA,WALjB;AAME,UAAA,UAAU,EAAElC,UANd;AAOE,UAAA,SAAS,EAAEQ,SAPb;AAQE,UAAA,WAAW,EAAEsB,iBARf;AASE,UAAA,eAAe,EAAE,CAACX,YAAD,CATnB;AAUE,UAAA,OAAO,EAAE;AAAA,mBAAII,SAAS,CAAC,CAACD,MAAF,CAAb;AAAA,WAVX;AAWE,UAAA,GAAG,EAAEE;AAXP,UALF,eAkBE,KAAC,iBAAD;AAAmB,UAAA,SAAS,EAAEf,IAAI,GAAGA,IAAH,GAAU,EAA5C;AAAgD,wBAAYJ,kBAA5D;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKN,EAAL,YAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEG,WAHpB;AAIY,YAAA,QAAQ,EAAEI,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBxB,WAAW,CAACwB,CAAD,CAAhC,GAAsC,IAAnD;AAAA,aALxB;AAAA,mCAME,KAAC,UAAD;AAAY,cAAA,IAAI,EAAC;AAAjB;AANF;AADF,UAlBF,eA4BE,KAAC,gBAAD;AAAkB,UAAA,SAAS,EAAE,CAACjB,IAAI,GAAGA,IAAH,GAAU,EAAf,EAAmB0B,MAAnB,CAA0B,CAACnC,UAAD,GAAc,SAAd,GAA0B,EAApD,CAA7B;AAAA,iCACE,KAAC,UAAD;AAAY,YAAA,EAAE,YAAKD,EAAL,WAAd;AACY,YAAA,OAAO,EAAC,WADpB;AAEY,YAAA,KAAK,EAAC,UAFlB;AAGY,YAAA,MAAM,EAAEI,YAHpB;AAIY,YAAA,QAAQ,EAAEG,QAJtB;AAKY,YAAA,UAAU,EAAE,oBAACoB,CAAD;AAAA,qBAAaD,eAAe,CAACC,CAAD,CAAf,GAAqBvB,YAAY,CAACuB,CAAD,CAAjC,GAAuC,IAApD;AAAA,aALxB;AAAA,mCAME,KAAC,SAAD;AAAW,cAAA,IAAI,EAAC;AAAhB;AANF;AADF,UA5BF;AAAA,QAHF,EA2CCf,YAAY,iBAAI,KAAC,eAAD;AAAiB,QAAA,EAAE,EAAE,QAArB;AACiB,QAAA,YAAY,EAAEQ,YAD/B;AAEb,QAAA,IAAI,EAAEV,IAFO;AAGb,QAAA,QAAQ,EAAE,KAHG;AAIb,QAAA,kBAAkB,EAAE;AAClB2B,UAAAA,KAAK,EAACpB,UADY;AAElBqB,UAAAA,MAAM,EAAEJ,cAFU;AAGlBK,UAAAA,WAAW,EAAEzB,mBAHK;AAIlB0B,UAAAA,UAAU,EAAE3B,kBAJM;AAKlB4B,UAAAA,aAAa,EAAE1B,qBALG;AAMlB2B,UAAAA,aAAa,EAAC,uBAACf,CAAD,EAAK,CAAE,CANH;AAOlBgB,UAAAA,UAAU,EAAExB,kBAPM;AAQlByB,UAAAA,UAAU,EAAE;AARM,SAJP;AAcb,QAAA,MAAM,EAAErB,MAdK;AAeb,QAAA,SAAS,EAAEC,SAfE;AAgBb,QAAA,MAAM,EAAE,EAhBK;AAiBb,QAAA,cAAc,EAAEvB,UAAU,GAAG,CAACA,UAAD,CAAH,GAAkB,EAjB/B;AAkBb,QAAA,iBAAiB,EAAE,2BAAC0B,CAAD;AAAA,iBAAKzB,cAAa,CAACyB,CAAC,CAAC,CAAD,CAAF,CAAlB;AAAA,SAlBN;AAmBb,QAAA,kBAAkB,EAAE,EAnBP;AAoBb,QAAA,OAAO,EAAE,IApBI;AAqBb,QAAA,UAAU,EAAE,sBAAI,CAAE;AArBL,QA3CjB;AAAA,MADF,EAqEGnB,iBAAiB,iBAChB,MAAC,YAAD;AAAc,MAAA,SAAS,EAAEE,IAAI,IAAI,EAAjC;AAAA,8BACE,KAAC,gBAAD;AAAkB,QAAA,KAAK,EAAE5B,MAAM,CAAC+D,YAAhC;AAA8C,QAAA,SAAS,EAAEnC,IAAI,IAAI;AAAjE,QADF,eAEE;AAAA,kBAAOF;AAAP,QAFF;AAAA,MAtEJ;AAAA,IADF;AA8ED,CA5HD;;;AA/BER,EAAAA,E;AACAC,EAAAA,U;AACAC,EAAAA,a;AACAC,EAAAA,W;AACAC,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,kB;AACAC,EAAAA,Q;AACAC,EAAAA,iB;AACAC,EAAAA,S;AAEAE,EAAAA,M;AACAC,EAAAA,Y;AACAC,EAAAA,kB;AACAC,EAAAA,mB;AACAC,EAAAA,qB,aAAwB,S,EAAY,W,EAAc,U;AAClDC,EAAAA,oB;AACAC,EAAAA,U;AACAC,EAAAA,e;AACAC,EAAAA,kB;;AA0IF,eAAepB,SAAf","sourcesContent":["import React from 'react';\nimport {COLORS} from '../styles/index';\nimport {Search as SearchIcon, Clear as ClearIcon, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {ErrorMessage, InputWrapper, SearchIconWrapper} from './styling';\nimport {IconButton} from '../Button';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField from './components/SearchField';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport { DropdownContent, DropdownItem } from '../Dropdown';\nimport { useClickOutsideRef } from '../common';\n\ntype SeachBarProps = {\n  id: string;\n  searchTerm?: string;\n  setSearchTerm: (term: string) => void;\n  enterSearch: (e: any) => void;\n  removeSearch: (e: any) => void;\n  placeholder?: string;\n  performSearchLabel?: string;\n  disabled?: boolean;\n  validationMessage?: string;\n  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  showDropdown?: boolean;\n  dropdownButtonIcon?: React.ReactNode;\n  dropdownButtonLabel?: string;\n  dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';\n  dropdownButtonAction?: () => boolean | void | undefined;\n  searchList?: DropdownItem[];\n  addToSearchList?: (e: DropdownItem) => void;\n  dropdownScrollable?: boolean;\n};\n\nconst ClearIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n`;\n\nconst SearchBar: React.FunctionComponent<SeachBarProps> = ({\n                                                             id,\n                                                             searchTerm,\n                                                             setSearchTerm,\n                                                             enterSearch,\n                                                             removeSearch,\n                                                             placeholder,\n                                                             performSearchLabel,\n                                                             disabled,\n                                                             validationMessage,\n                                                             onKeyDown,\n                                                             size,\n                                                             margin = '4px 0',\n                                                             showDropdown,\n                                                             dropdownButtonIcon,\n                                                             dropdownButtonLabel,\n                                                             dropdownButtonVariant,\n                                                             dropdownButtonAction,\n                                                             searchList=[],\n                                                             addToSearchList,\n                                                             dropdownScrollable\n                                                           }) => {\n  const containerRef = React.useRef<any>(null);\n\n  const [isOpen, setIsOpen] = React.useState(false);\n  const dropdownRef = useClickOutsideRef(()=>setIsOpen(false), [containerRef]);\n\n  const isPressingEnter = (e: any) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      e.stopPropagation();\n      return true;\n    }\n    return false;\n  };\n\n  const enteredSearchTerm = (e: any) => {\n    addToSearchList && addToSearchList({value:e.target.value});\n    enterSearch(e);\n  }\n\n  const dropdownAction = () => {\n    if(dropdownButtonAction)\n      dropdownButtonAction();    \n  }\n\n  return (\n    <>\n      <InputWrapper\n        disabled={disabled}\n        margin={margin}>\n        <SearchField id={'id'} size={size}\n                     ref={containerRef}\n                     searchTerm={searchTerm}\n                     disabled={disabled}\n                     validationMessage={validationMessage}>\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            size={size}\n            disabled={disabled}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            onKeyDown={onKeyDown}\n            enterSearch={enteredSearchTerm}\n            focusParentRefs={[containerRef]}\n            onClick={()=>setIsOpen(!isOpen)}\n            ref={dropdownRef}\n          />\n          <SearchIconWrapper className={size ? size : ''} aria-label={performSearchLabel}>\n            <IconButton id={`${id}_Search`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={enterSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? enterSearch(e) : null)}>\n              <SearchIcon size=\"24px\"/>\n            </IconButton>\n          </SearchIconWrapper>\n          <ClearIconWrapper className={(size ? size : '').concat(!searchTerm ? ' hidden' : '')}>\n            <IconButton id={`${id}_Clear`}\n                        variant=\"secondary\"\n                        shape=\"circular\"\n                        action={removeSearch}\n                        disabled={disabled}\n                        onKeyPress={(e: any) => (isPressingEnter(e) ? removeSearch(e) : null)}>\n              <ClearIcon size=\"24px\"/>\n            </IconButton>\n          </ClearIconWrapper>\n        </SearchField>\n\n      {showDropdown && <DropdownContent id={'search'}\n                                        containerRef={containerRef}\n          size={size}\n          isButton={false}\n          customizationProps={{\n            items:searchList,\n            action: dropdownAction,\n            actionLabel: dropdownButtonLabel,\n            actionIcon: dropdownButtonIcon,\n            actionVariant: dropdownButtonVariant,\n            onValueUpdate:(e)=>{},\n            scrollable: dropdownScrollable,\n            pinTopItem: true\n          }}\n          isOpen={isOpen}\n          setIsOpen={setIsOpen}\n          filter={''}\n          selectedValues={searchTerm ? [searchTerm] : []}\n          setSelectedValues={(e)=>setSearchTerm(e[0])}\n          messageOnNoResults={''}\n          focused={null}\n          setFocused={()=>{}}\n        />}\n\n      </InputWrapper>\n      {validationMessage && (\n        <ErrorMessage className={size || ''}>\n          <TechnicalWarning color={COLORS.critical_400} className={size || ''}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default SearchBar;\n"],"file":"SearchBar.js"}

package/dist/List/ListRow.cjs

@@ -51,7 +51,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
+var Row = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), _styles.COLORS.neutral_100, _styles.COLORS.neutral_600, _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _styles.Z_INDEXES.active, _styles.focusStyles, _styles.COLORS.neutral_300, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentLStyling)(_styles.ComponentTextStyle.Regular, null), (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600, (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Regular, null), _styles.COLORS.neutral_600);
 
 var RightIcon = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
 

package/dist/List/ListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}
+{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["Row","styled","div","COLORS","neutral_100","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_300","ComponentTextStyle","Regular","RightIcon","ListRow","size","Size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","React","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","defaultOnMouseDownHandler","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.cjs"}

package/dist/List/ListRow.js

@@ -25,7 +25,7 @@ import { IconButton } from '../Button';
 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 Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n  position: relative;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600);
+var Row = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n\n  color: ", ";\n  background-color: ", ";\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ", ";\n    color: ", ";\n    z-index: ", ";\n  }\n\n  &.interactive:focus {\n    ", "\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ", ";\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ", "\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ", "\n  }\n\n  .list-item-note {\n    color: ", ";\n    word-break: initial;\n    ", "\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ", ";\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n"])), COLORS.neutral_100, COLORS.neutral_600, COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, COLORS.neutral_300, ComponentSStyling(ComponentTextStyle.Regular, null), ComponentMStyling(ComponentTextStyle.Regular, null), ComponentLStyling(ComponentTextStyle.Regular, null), ComponentXXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600, ComponentXSStyling(ComponentTextStyle.Regular, null), COLORS.neutral_600);
 var RightIcon = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
 
 var ListRow = function ListRow(_ref) {

package/dist/List/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n  position: relative;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}
+{"version":3,"sources":["../../src/List/ListRow.tsx"],"names":["React","styled","COLORS","ComponentTextStyle","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXSStyling","ComponentXXSStyling","TooltipWrapper","DropdownButton","SystemIcons","Size","Z_INDEXES","defaultOnMouseDownHandler","IconButton","Row","div","neutral_100","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_300","Regular","RightIcon","ListRow","size","Medium","variant","icon","mainText","secondaryText","dropdown","note","noteTooltip","disabled","action","rightSideIcon","rightSideAction","rightSideIconDisabled","className","rest","useState","inAction","setInAction","handleKeyDown","e","key","rowClassName","concat","Large","Small","XSmall"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\n\nimport {\n  ComponentLStyling,\n  ComponentMStyling,\n  ComponentSStyling,\n  ComponentXSStyling,\n  ComponentXXSStyling\n} from '../styles';\nimport {DropdownButtonProps} from '../Dropdown/DropdownButtonTypes';\nimport {TooltipWrapper} from '../Tooltips';\nimport {DropdownButton} from '../Dropdown';\nimport {SystemIcons} from '../icons';\nimport {Size} from '../types';\nimport {Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\nimport { IconButton } from '../Button';\n\nconst Row = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  border-bottom: 1px solid ${COLORS.neutral_100};\n  box-sizing: border-box;\n\n  color: ${COLORS.neutral_600};\n  background-color: ${COLORS.white};\n\n\n  cursor: default;\n\n  &.interactive {\n    cursor: pointer;\n  }\n\n  &.interactive.disabled {\n    cursor: not-allowed;\n  }\n\n  &.interactive:hover:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n    z-index: ${Z_INDEXES.hover};\n  }\n\n  &.interactive:active:not(.in-action):not(.disabled) {\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n    z-index: ${Z_INDEXES.active};\n  }\n\n  &.interactive:focus {\n    ${focusStyles}\n  }\n\n  &.disabled {\n    .list-item-icon, .list-item-content, .list-item-note, .list-item-actions {\n      color: ${COLORS.neutral_300};\n    }\n  }\n\n\n  &.small {\n    min-height: 48px;\n    padding: 0 8px;\n\n    .list-item-icon {\n      margin-right: 8px;\n    }\n\n    .list-item-main-text {\n      ${ComponentSStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -8px;\n    }\n  }\n\n  &.medium {\n    min-height: 56px;\n    padding: 0 12px;\n\n    .list-item-icon {\n      margin-right: 12px;\n    }\n\n    .list-item-main-text {\n      ${ComponentMStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -12px;\n    }\n  }\n\n  &.large {\n    min-height: 64px;\n    padding: 0 16px;\n\n    .list-item-icon {\n      margin-right: 16px;\n    }\n\n    .list-item-main-text {\n      ${ComponentLStyling(ComponentTextStyle.Regular, null)}\n    }\n\n    .list-item-actions {\n      margin-right: -16px;\n    }\n  }\n\n  &.overlay {\n    padding: 0 4px;\n\n    .list-item-actions {\n      margin-right: -4px;\n    }\n  }\n\n  .list-item-icon {\n    width: 24px;\n    height: 24px;\n\n    svg {\n      width: 24px;\n      height: 24px;\n    }\n  }\n\n  .list-item-content {\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .list-item-main-text {\n  }\n\n  .list-item-secondary-text {\n    ${ComponentXXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note {\n    color: ${COLORS.neutral_600};\n    word-break: initial;\n    ${ComponentXSStyling(ComponentTextStyle.Regular, null)}\n  }\n\n  .list-item-note.with-tooltip {\n    cursor: pointer;\n\n    > div {\n      text-decoration-line: underline;\n      text-decoration-style: dashed;\n      text-underline-offset: 1px;\n      text-decoration-thickness: 1px;\n    }\n  }\n\n  .list-item-actions {\n    color: ${COLORS.neutral_600};\n    display: flex;\n    align-items: center;\n\n    button div {\n      background-color: transparent;\n    }\n  }\n`;\n\nconst RightIcon = styled.div``;\n\n\ntype Props = Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'onMouseDown' | 'onKeyDown'> & {\n  size?: Size;\n  variant?: 'normal' | 'overlay';\n  icon?: React.ReactNode;\n  mainText: string;\n  secondaryText?: string;\n  dropdown?: Pick<DropdownButtonProps, 'items' | 'onClick' | 'disabled' | 'width'>;\n  note?: string;\n  noteTooltip?: string;\n  disabled?: boolean;\n  action?: () => void;\n  rightSideIcon?: React.ReactNode;\n  rightSideAction?: () => void;\n  rightSideIconDisabled?: boolean;\n};\n\nconst ListRow: React.FunctionComponent<Props> = ({\n                                                   size = Size.Medium,\n                                                   variant = 'normal',\n                                                   icon,\n                                                   mainText,\n                                                   secondaryText,\n                                                   dropdown,\n                                                   note,\n                                                   noteTooltip,\n                                                   disabled = false,\n                                                   action,\n                                                   rightSideIcon,\n                                                   rightSideAction,\n                                                   rightSideIconDisabled,\n                                                   className,\n                                                   ...rest\n                                                 }: Props) => {\n\n  const [inAction, setInAction] = React.useState<Boolean>(false);\n\n  const handleKeyDown = (e: any) => {\n    if (e.key === 'Enter') {\n      action && action()\n    }\n  }\n\n  const rowClassName = (inAction ? 'in-action ' : '')\n    .concat(disabled ? 'disabled ' : '')\n    .concat(!!action ? 'interactive ' : '')\n    .concat('list-item-row ')\n    .concat(`${variant} `)\n    .concat(`${size}`)\n    .concat(className ? ` ${className}` : '');\n\n  return (\n    <Row tabIndex={!action || disabled ? -1 : 0}\n         className={rowClassName}\n         onMouseDown={defaultOnMouseDownHandler}\n         onKeyDown={(e) => !disabled && handleKeyDown(e)}\n         onClick={e => {\n           !disabled && action && action();\n         }}\n         data-hj-suppress\n         {...rest}>\n      {\n        !!icon &&\n        <div className={'list-item-icon'}>{icon}</div>\n      }\n      <div className={'list-item-content'}>\n        <div className={'list-item-main-text'}>{mainText}</div>\n        {!!secondaryText && <div className={'list-item-secondary-text'}>{secondaryText}</div>}\n      </div>\n      {\n        !!note &&\n        <>\n          {\n            !!noteTooltip &&\n            <div className={'list-item-note with-tooltip'}>\n              <TooltipWrapper label={noteTooltip}\n                              size={size === Size.Large ? Size.Medium : size === Size.Small ? Size.XSmall : Size.Small}\n                              position={'top'}\n                              tabIndex={disabled ? -1 : 0}\n                              withArrow={true}>\n                {note}\n              </TooltipWrapper>\n            </div>\n          }\n          {\n            !noteTooltip &&\n            <div className={'list-item-note'}>\n              {note}\n            </div>\n          }\n        </>\n      }\n      {\n        !!dropdown &&\n        <div className={'list-item-actions'}\n             onMouseEnter={() => setInAction(!dropdown?.disabled)}\n             onMouseLeave={() => setInAction(false)}>\n          <DropdownButton {...dropdown}\n                          type={'icon'}\n                          disabled={disabled || dropdown.disabled}\n                          icon={variant === 'overlay'\n                            ? <SystemIcons.ArrowDropDown/>\n                            : <SystemIcons.MoreVertical/>}\n          />\n        </div>\n      }\n      {\n        !!rightSideIcon &&\n        <RightIcon className={'list-item-actions'}>\n          <IconButton action={() => !!rightSideAction && rightSideAction()} variant='secondary' shape='circular' disabled={disabled || rightSideIconDisabled}>\n            {rightSideIcon}\n          </IconButton>\n        </RightIcon>\n      }\n    </Row>\n  );\n};\n\nexport default ListRow;\n\n"],"file":"ListRow.js"}

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,0BAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,oBAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,SAAOS,WAnBA,EAsBjBT,SAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTf,cAMS,QANTA,cAMS;AAAA,MALTgB,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEQ,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEP,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO6B,KAD1D;AAAA,gBAEGV;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEb,cAAxC;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB;AAP5B,OAQgBoB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEQ,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAET;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCjB,EAAAA,c;;eAiIaQ,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
+{"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","ProfileButtonContainer","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;AAWA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWO,IAAMC,sBAAsB,GAAGJ,0BAAOC,GAAV,8vBAM/BI,mCAN+B,EAOpB,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPe,EAS7BC,oBAAYC,MATiB,EAkB3BC,6BAlB2B,EAmBPR,SAAOS,WAnBA,EAsBjBT,SAAOU,WAtBU,EA6B3Bb,eA7B2B,EAqC3BA,eArC2B,CAA5B;;;;AA6CP,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAWIC,GAXJ,EAWY;AAAA,MAVTC,WAUS,QAVTA,WAUS;AAAA,MATTC,IASS,QATTA,IASS;AAAA,MARTC,QAQS,QARTA,QAQS;AAAA,MAPTC,OAOS,QAPTA,OAOS;AAAA,MANTf,cAMS,QANTA,cAMS;AAAA,MALTgB,QAKS,QALTA,QAKS;AAAA,MAJTC,mBAIS,QAJTA,mBAIS;AAAA,MAHTC,SAGS,QAHTA,SAGS;AAAA,MAFTC,QAES,QAFTA,QAES;AAAA,MADNC,IACM;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGT,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEQ,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEP,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO6B,KAD1D;AAAA,gBAEGV;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,sBAAD;AAAwB,IAAA,cAAc,EAAEb,cAAxC;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB;AAP5B,OAQgBoB,IARhB;AAAA,iBASGC,UAAU,EATb,EAUGJ,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEQ,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAET;AAA7C;AADF,QAXJ;AAAA;AADF,IADF;AAoBD,CAjDqB,CAAtB;;AAnFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAE,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCjB,EAAAA,c;;eAiIaQ,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\nexport type ProfileButtonProps = {\n  portraitSrc?: string;\n  icon?: React.ReactNode;\n  initials?: string;\n  onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  notificationVariant?: 'positive' | 'critical';\n  hideOnLowWidth?: boolean;\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\n\nconst PortraitOverlay = styled.div`\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ${COLORS.black};\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n`;\n\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ${StyledPrimaryIconButton} {\n    display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n    ${BREAKPOINTS.MEDIUM} {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ${IconButtonContent} {\n        background-color: ${COLORS.neutral_100};\n\n        svg, svg path {\n          fill: ${COLORS.neutral_300};\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ${PortraitOverlay} {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ${PortraitOverlay} {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n`;\n\nconst NotificationContainer = styled.div`\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n                                                                                 portraitSrc,\n                                                                                 icon,\n                                                                                 initials,\n                                                                                 onClick,\n                                                                                 hideOnLowWidth,\n                                                                                 disabled,\n                                                                                 notificationVariant,\n                                                                                 className,\n                                                                                 tabIndex,\n                                                                                 ...rest\n                                                                               }, ref) => {\n  const renderIcon = () => {\n    return (\n      (portraitSrc && (\n        <ImageWrapper>\n          <img src={portraitSrc}/>\n          <PortraitOverlay/>\n        </ImageWrapper>\n      )) ||\n      (initials && (\n        <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n                    color={disabled ? COLORS.neutral_300 : COLORS.white}>\n          {initials}\n        </ComponentS>\n      )) || <>{icon}</>\n    );\n  };\n\n  return (\n    <ProfileButtonContainer hideOnLowWidth={hideOnLowWidth}>\n      <IconButton ref={ref}\n                  className={className}\n                  disabled={disabled}\n                  action={onClick}\n                  variant=\"primary\"\n                  tabIndex={tabIndex}\n                  shape=\"circular\"\n                  hideOnLowWidth={hideOnLowWidth}\n                  {...rest}>\n        {renderIcon()}\n        {notificationVariant && (\n          <NotificationContainer>\n            <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n          </NotificationContainer>\n        )}\n      </IconButton>\n    </ProfileButtonContainer>\n  );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}