@laerdal/life-react-components 1.10.3-dev.8.full → 1.11.0-dev.1

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","LARGE","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.LARGE} {\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/Label.cjs

@@ -48,12 +48,11 @@ var LabelRowInner = _styledComponents.default.div(_templateObject3 || (_template
 
 
 var InputLabel = function InputLabel(_ref) {
-  var _document$getElementB2;
-
   var inputId = _ref.inputId,
       text = _ref.text,
       size = _ref.size,
-      margin = _ref.margin;
+      margin = _ref.margin,
+      requiredProp = _ref.required;
 
   // Globally used variables within the component
   var _React$useState = React.useState(false),
@@ -66,23 +65,25 @@ var InputLabel = function InputLabel(_ref) {
 
 
   React.useEffect(function () {
-    var _document$getElementB;
-
-    if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
-      setRequired(true);
-    } else {
-      setRequired(false);
-    }
-  }, [(_document$getElementB2 = document.getElementById(inputId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.getAttribute('required')]);
+    if (requiredProp === undefined) {
+      var _document$getElementB;
+
+      if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
+        setRequired(true);
+      } else {
+        setRequired(false);
+      }
+    } else setRequired(Boolean(requiredProp));
+  }, []);
   /**
    * Triggers a click element on a specific element.
    * @param id - ID of the element which needs to be clicked.
    */
 
   var onTriggerClick = function onTriggerClick(id) {
-    var _document$getElementB3;
+    var _document$getElementB2;
 
-    (_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.click();
+    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelRow, {
@@ -107,7 +108,8 @@ var InputLabel = function InputLabel(_ref) {
 InputLabel.propTypes = {
   inputId: _propTypes.default.string.isRequired,
   text: _propTypes.default.string.isRequired,
-  margin: _propTypes.default.string
+  margin: _propTypes.default.string,
+  required: _propTypes.default.bool
 };
 var _default = InputLabel;
 exports.default = _default;

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","React","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,+MACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,+JAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;;AAOA,IAAMC,aAAa,GAAGV,0BAAOO,GAAV,yLAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACG,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;;AAQA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAiD;AAAA;;AAAA,MAA9CC,OAA8C,QAA9CA,OAA8C;AAAA,MAArCC,IAAqC,QAArCA,IAAqC;AAAA,MAA/BL,IAA+B,QAA/BA,IAA+B;AAAA,MAAzBF,MAAyB,QAAzBA,MAAyB;;AACvG;AACA,wBAAgCQ,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOC,QAAP;AAAA,MAAiBC,WAAjB;AAEA;AACF;AACA;;;AACEH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AAAA;;AACpB,QAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,iFAAkCS,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEJ,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,2BAACE,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,CAAD,2DAAC,uBAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,MAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAJ,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,qBAAC,QAAD;AAAU,IAAA,MAAM,EAAElB,MAAlB;AAAA,2BACE,sBAAC,aAAD;AAAe,MAAA,IAAI,EAAEE,IAArB;AAAA,iBACGQ,QAAQ,iBAAI,qBAAC,kBAAD,CAAa,QAAb;AAAsB,QAAA,IAAI,EAAC,MAA3B;AAAkC,QAAA,KAAK,EAAEjB,eAAO0B;AAAhD,QADf,eAEE,qBAAC,KAAD;AAAO,QAAA,OAAO,EAAEb,OAAhB;AAAyB,QAAA,OAAO,EAAE;AAAA,iBAAMU,cAAc,CAACV,OAAD,CAApB;AAAA,SAAlC;AAAiE,QAAA,SAAS,EAAEJ,IAAI,IAAI,EAApF;AAAA,kBACGK;AADH,QAFF;AAAA;AADF,IADF;AAUD,CAhCD;;;AANED,EAAAA,O;AACAC,EAAAA,I;AAEAP,EAAAA,M;;eAqCaK,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.cjs"}
+{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["Label","styled","label","COLORS","neutral_500","BREAKPOINTS","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","requiredProp","required","React","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"mappings":";;;;;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;;;;;;;;;AAEA;AACA,IAAMA,KAAK,GAAGC,0BAAOC,KAAV,+MACP,qCAAoB,CAApB,EAAuBC,eAAOC,WAA9B,CADO,EAGPC,oBAAYC,MAHL,EAIL,oCAAmB,CAAnB,EAAsBH,eAAOC,WAA7B,CAJK,EAQL,qCAAoB,CAApB,EAAuBD,eAAOC,WAA9B,CARK,EAWL,oCAAmB,CAAnB,EAAsBD,eAAOC,WAA7B,CAXK,CAAX;;AAiBA,IAAMG,QAAQ,GAAGN,0BAAOO,GAAV,+JAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACC,MAAN,qBAA0BD,KAAK,CAACC,MAAhC,SAA4C,EAAxD;AAAA,CAJU,CAAd;;AAOA,IAAMC,aAAa,GAAGV,0BAAOO,GAAV,yLAIV,UAACC,KAAD;AAAA,SAAYA,KAAK,CAACG,IAAN,KAAeC,YAAKC,KAApB,GAA4B,KAA5B,GAAoC,KAAhD;AAAA,CAJU,CAAnB,C,CAQA;;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAAkD,OAAyE;AAAA,MAAtEC,OAAsE,QAAtEA,OAAsE;AAAA,MAA7DC,IAA6D,QAA7DA,IAA6D;AAAA,MAAvDL,IAAuD,QAAvDA,IAAuD;AAAA,MAAjDF,MAAiD,QAAjDA,MAAiD;AAAA,MAA/BQ,YAA+B,QAAzCC,QAAyC;;AAC/H;AACA,wBAAgCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAhC;AAAA;AAAA,MAAOF,QAAP;AAAA,MAAiBG,WAAjB;AAEA;AACF;AACA;;;AACEF,EAAAA,KAAK,CAACG,SAAN,CAAgB,YAAM;AACpB,QAAGL,YAAY,KAAKM,SAApB,EACA;AAAA;;AACE,UAAI,0BAAAC,QAAQ,CAACC,cAAT,CAAwBV,OAAxB,iFAAkCW,YAAlC,CAA+C,UAA/C,OAA+D,EAAnE,EAAuE;AACrEL,QAAAA,WAAW,CAAC,IAAD,CAAX;AACD,OAFD,MAEO;AACLA,QAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,KAPD,MASEA,WAAW,CAACM,OAAO,CAACV,YAAD,CAAR,CAAX;AACH,GAXD,EAWG,EAXH;AAYA;AACF;AACA;AACA;;AACE,MAAMW,cAAc,GAAG,SAAjBA,cAAiB,CAACC,EAAD,EAAsB;AAAA;;AAC3C,8BAAAL,QAAQ,CAACC,cAAT,CAAwBI,EAAxB,mFAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,qBAAC,QAAD;AAAU,IAAA,MAAM,EAAErB,MAAlB;AAAA,2BACE,sBAAC,aAAD;AAAe,MAAA,IAAI,EAAEE,IAArB;AAAA,iBACGO,QAAQ,iBAAI,qBAAC,kBAAD,CAAa,QAAb;AAAsB,QAAA,IAAI,EAAC,MAA3B;AAAkC,QAAA,KAAK,EAAEhB,eAAO6B;AAAhD,QADf,eAEE,qBAAC,KAAD;AAAO,QAAA,OAAO,EAAEhB,OAAhB;AAAyB,QAAA,OAAO,EAAE;AAAA,iBAAMa,cAAc,CAACb,OAAD,CAApB;AAAA,SAAlC;AAAiE,QAAA,SAAS,EAAEJ,IAAI,IAAI,EAApF;AAAA,kBACGK;AADH,QAFF;AAAA;AADF,IADF;AAUD,CArCD;;;AAPED,EAAAA,O;AACAC,EAAAA,I;AAEAP,EAAAA,M;AACAS,EAAAA,Q;;eA0CaJ,U","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.cjs"}

package/dist/InputFields/Label.d.ts

@@ -8,6 +8,7 @@ declare type LabelProps = {
     text: string;
     size?: Size.Small | Size.Medium;
     margin?: string;
+    required?: boolean;
 };
 declare const InputLabel: React.FunctionComponent<LabelProps>;
 export default InputLabel;

package/dist/InputFields/Label.js

@@ -33,12 +33,11 @@ var LabelRowInner = styled.div(_templateObject3 || (_templateObject3 = _taggedTe
 }); // Add component-specific types
 
 var InputLabel = function InputLabel(_ref) {
-  var _document$getElementB2;
-
   var inputId = _ref.inputId,
       text = _ref.text,
       size = _ref.size,
-      margin = _ref.margin;
+      margin = _ref.margin,
+      requiredProp = _ref.required;
 
   // Globally used variables within the component
   var _React$useState = React.useState(false),
@@ -51,23 +50,25 @@ var InputLabel = function InputLabel(_ref) {
 
 
   React.useEffect(function () {
-    var _document$getElementB;
+    if (requiredProp === undefined) {
+      var _document$getElementB;
 
-    if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
-      setRequired(true);
-    } else {
-      setRequired(false);
-    }
-  }, [(_document$getElementB2 = document.getElementById(inputId)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.getAttribute('required')]);
+      if (((_document$getElementB = document.getElementById(inputId)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.getAttribute('required')) === '') {
+        setRequired(true);
+      } else {
+        setRequired(false);
+      }
+    } else setRequired(Boolean(requiredProp));
+  }, []);
   /**
    * Triggers a click element on a specific element.
    * @param id - ID of the element which needs to be clicked.
    */
 
   var onTriggerClick = function onTriggerClick(id) {
-    var _document$getElementB3;
+    var _document$getElementB2;
 
-    (_document$getElementB3 = document.getElementById(id)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.click();
+    (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
 
   return /*#__PURE__*/_jsx(LabelRow, {
@@ -92,7 +93,8 @@ var InputLabel = function InputLabel(_ref) {
 InputLabel.propTypes = {
   inputId: _pt.string.isRequired,
   text: _pt.string.isRequired,
-  margin: _pt.string
+  margin: _pt.string,
+  required: _pt.bool
 };
 export default InputLabel;
 //# sourceMappingURL=Label.js.map

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","useState","required","setRequired","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\n      setRequired(true);\n    } else {\n      setRequired(false);\n    }\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}
+{"version":3,"sources":["../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXSStyling","ComponentXXSStyling","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","LabelRowInner","size","Small","InputLabel","inputId","text","requiredProp","required","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"mappings":"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","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"file":"Label.js"}

package/dist/InputFields/QuickSearch.cjs

@@ -124,7 +124,7 @@ var QuickSearch = function QuickSearch(_ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  }); // focus search input on visibility change
+  }, []); // focus search input on visibility change
 
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {

package/dist/InputFields/QuickSearch.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.cjs"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["Wrapper","styled","div","StyledSearchField","COLORS","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","React","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Size","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.cjs"}

package/dist/InputFields/QuickSearch.js

@@ -98,7 +98,7 @@ var QuickSearch = function QuickSearch(_ref) {
     return function () {
       document.removeEventListener('click', handleClickOutside);
     };
-  }); // focus search input on visibility change
+  }, []); // focus search input on visibility change
 
   React.useEffect(function () {
     if (searchFieldVisible !== null && searchFieldVisible !== void 0 && searchFieldVisible.visible) {

package/dist/InputFields/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../src/InputFields/QuickSearch.tsx"],"names":["React","styled","IconButton","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","Search","SearchIcon","Clear","ClearIcon","SearchBarInput","SearchField","StyledSearchField","Wrapper","div","white","neutral_400","primary_800","QuickSearch","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","useState","visible","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","focusVisible","term","neutral_300","neutral_600","Small"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport IconButton from '../Button/Iconbutton';\nimport { SearchIconWrapper, StyledIcon } from './styling';\nimport { Size } from '../types';\nimport { COLORS, LoadingIndicator } from '..';\nimport { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';\nimport SearchBarInput from './components/SearchBarInput';\nimport SearchField, { StyledSearchField } from './components/SearchField';\n\nconst Wrapper = styled.div`\n  width: 100%;\n\n  ${StyledSearchField} {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ${COLORS.white};\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\n    }\n  }\n`;\n\ntype QuickSearchProps = {\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  onKeyDown?: (e: React.KeyboardEvent) => void;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  loading?: boolean;\n};\n\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\n  id,\n  searchTerm,\n  setSearchTerm,\n  enterSearch,\n  removeSearch,\n  placeholder,\n  performSearchLabel,\n  disabled,\n  onKeyDown,\n  size,\n  margin,\n  loading,\n}: QuickSearchProps) => {\n  const searchFieldRef = React.useRef<HTMLDivElement>(null);\n  const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\n\n  const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\n    visible: false,\n  });\n\n  const handleClickOutside = (e: any) => {\n    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (onKeyDown) {\n      onKeyDown(e);\n    }\n    if (e.key === 'Escape') {\n      if (searchFieldVisible?.visible && !searchTerm?.length) {\n        setSearchFieldVisible({ visible: false });\n      }\n    }\n  };\n\n  const handleBlur = (e: any) => {\n    if (!searchTerm && (!e.relatedTarget || !searchFieldRef.current?.contains(e.relatedTarget))) {\n      setSearchFieldVisible({ visible: false });\n    }\n  };\n\n  const handleSearchIconAction = (e: any) => {\n    if (!searchFieldVisible?.visible) {\n      setSearchFieldVisible({\n        visible: !searchFieldVisible.visible,\n        focus: !searchFieldVisible.visible && e?.detail !== 1,\n      });\n    }\n  };\n\n  // set search field visibility on search term change\n  React.useEffect(() => {\n    if (!!searchTerm?.length && !searchFieldVisible?.visible) {\n      setSearchFieldVisible({ visible: true, focus: false });\n    }\n  }, [searchTerm, searchFieldVisible]);\n\n  // register click outside handler\n  React.useEffect(() => {\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('click', handleClickOutside);\n    };\n  }, []);\n\n  // focus search input on visibility change\n  React.useEffect(() => {\n    if (searchFieldVisible?.visible) {\n      searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\n    }\n  }, [searchFieldVisible.visible, searchFieldInputRef]);\n\n  return (\n    <Wrapper>\n      <SearchField\n        ref={searchFieldRef}\n        id={id}\n        size={size}\n        searchTerm={searchTerm}\n        style={{\n          margin: margin,\n        }}\n        onBlur={handleBlur}\n        className={searchFieldVisible?.visible ? 'expanded' : ''}>\n        {searchFieldVisible?.visible && (\n          <SearchBarInput\n            placeholder={disabled ? '' : placeholder}\n            id={id}\n            ref={searchFieldInputRef}\n            disabled={disabled}\n            onKeyDown={handleKeyDown}\n            size={size}\n            setSearchTerm={(term: string) => setSearchTerm(term)}\n            searchTerm={searchTerm}\n            enterSearch={enterSearch}\n            focusParentRefs={[searchFieldRef]}\n          />\n        )}\n        <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\n          <IconButton\n            shouldNotInteract={searchFieldVisible?.visible}\n            id={`${id}_Searchbutton`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            tabIndex={searchFieldVisible?.visible ? -1 : 0}\n            action={handleSearchIconAction}>\n            <SearchIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </SearchIconWrapper>\n        <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm || !searchFieldVisible?.visible}>\n          <IconButton\n            id={`${id}_Clearicon`}\n            variant=\"secondary\"\n            shape=\"circular\"\n            action={(e) => {\n              removeSearch(e);\n              searchFieldInputRef?.current?.focus();\n            }}>\n            <ClearIcon size=\"24px\" color={disabled ? COLORS.neutral_300 : COLORS.neutral_600} />\n          </IconButton>\n        </StyledIcon>\n        {loading && searchFieldVisible?.visible && (\n          <StyledIcon className={size ? size : ''}>\n            <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} />\n          </StyledIcon>\n        )}\n      </SearchField>\n    </Wrapper>\n  );\n};\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/dist/InputFields/ResponsiveComponentWrapper.cjs

@@ -49,10 +49,10 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     };
 
     window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
     };
-  });
+  }, []);
   return size && size === _types.Size.Medium ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXS, {
     children: children
   }) : size && size === _types.Size.Small ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentXXS, {

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO,SAASS,OAAT,GAAmB;AACxBP,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCV,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAON,IAAI,IAAIA,IAAI,KAAKiB,YAAKC,MAAtB,gBACL,qBAAC,mBAAD;AAAA,cAAcnB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKiB,YAAKE,KAAtB,gBACF,qBAAC,oBAAD;AAAA,cAAepB;AAAf,IADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;AAAA,cAAcJ;AAAd,IADc,gBAGd,qBAAC,oBAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;eA6BaD,yB","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.cjs"}
+{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"mappings":";;;;;;;;;;;;;;;AAGA;;AACA;;AAKA;;;;;;;;AATA;AACA;AACA;;AAIA;AACA;AACA;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCC,KAAK,CAACC,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAH,EAAAA,KAAK,CAACI,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBC,oBAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAR,MAAAA,eAAe,CAACG,GAAG,CAACM,OAAL,CAAf;AACD,KAHD;;AAIAL,IAAAA,MAAM,CAACM,gBAAP,CAAwB,QAAxB,EAAkCR,YAAlC;AACA,WAAO;AAAA,aAAME,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC,CAAN;AAAA,KAAP;AACD,GAPD,EAOG,EAPH;AASA,SAAON,IAAI,IAAIA,IAAI,KAAKgB,YAAKC,MAAtB,gBACL,qBAAC,mBAAD;AAAA,cAAclB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKgB,YAAKE,KAAtB,gBACF,qBAAC,oBAAD;AAAA,cAAenB;AAAf,IADE,GAEAI,YAAY,gBACd,qBAAC,mBAAD;AAAA,cAAcJ;AAAd,IADc,gBAGd,qBAAC,oBAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAtBD;;;AAHEA,EAAAA,Q;;eA2BaD,yB","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.cjs"}

package/dist/InputFields/ResponsiveComponentWrapper.js

@@ -31,10 +31,10 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
     };
 
     window.addEventListener('resize', handleResize);
-    return function cleanup() {
-      window.removeEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
     };
-  });
+  }, []);
   return size && size === Size.Medium ? /*#__PURE__*/_jsx(ComponentXS, {
     children: children
   }) : size && size === Size.Small ? /*#__PURE__*/_jsx(ComponentXXS, {

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","cleanup","removeEventListener","Medium","Small"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO,SAASQ,OAAT,GAAmB;AACxBN,MAAAA,MAAM,CAACO,mBAAP,CAA2B,QAA3B,EAAqCT,YAArC;AACD,KAFD;AAGD,GATD;AAWA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,MAAtB,gBACL,KAAC,WAAD;AAAA,cAAchB;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACsB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAejB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAxBD;;;AAHEA,EAAAA,Q;;AA6BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return function cleanup() {\n      window.removeEventListener('resize', handleResize);\n    };\n  });\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}
+{"version":3,"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,YAAtB,EAAoCC,WAApC,QAAuD,WAAvD,C,CAEA;;;;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAAiE,OAAoC;AAAA,MAAjCC,QAAiC,QAAjCA,QAAiC;AAAA,MAAvBC,IAAuB,QAAvBA,IAAuB;;AACzG;AACA,wBAAwCP,KAAK,CAACQ,QAAN,CAAwB,KAAxB,CAAxC;AAAA;AAAA,MAAOC,YAAP;AAAA,MAAqBC,eAArB;;AAEAV,EAAAA,KAAK,CAACW,SAAN,CAAgB,YAAM;AACpB,QAAMC,YAAY,GAAG,SAAfA,YAAe,GAAM;AACzB,UAAMC,GAAG,GAAGC,MAAM,CAACC,UAAP,WAAqBb,WAAW,CAACc,MAAZ,CAAmBC,OAAnB,CAA2B,SAA3B,EAAsC,EAAtC,CAArB,EAAZ;AACAP,MAAAA,eAAe,CAACG,GAAG,CAACK,OAAL,CAAf;AACD,KAHD;;AAIAJ,IAAAA,MAAM,CAACK,gBAAP,CAAwB,QAAxB,EAAkCP,YAAlC;AACA,WAAO;AAAA,aAAME,MAAM,CAACM,mBAAP,CAA2B,QAA3B,EAAqCR,YAArC,CAAN;AAAA,KAAP;AACD,GAPD,EAOG,EAPH;AASA,SAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAtB,gBACL,KAAC,WAAD;AAAA,cAAcf;AAAd,IADK,GAEHC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAtB,gBACF,KAAC,YAAD;AAAA,cAAehB;AAAf,IADE,GAEAG,YAAY,gBACd,KAAC,WAAD;AAAA,cAAcH;AAAd,IADc,gBAGd,KAAC,YAAD;AAAA,cAAeA;AAAf,IAPF;AASD,CAtBD;;;AAHEA,EAAAA,Q;;AA2BF,eAAeD,yBAAf","sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\nimport { Size } from '../types';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\n\n// Add component-specific types\ntype LabelProps = {\n  size?: Size.Small | Size.Medium;\n  children?: any;\n};\n\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\n  // Globally used variables within the component\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\n\n  React.useEffect(() => {\n    const handleResize = () => {\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\n      setIsMediumView(mql.matches);\n    };\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  return size && size === Size.Medium ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : size && size === Size.Small ? (\n    <ComponentXXS>{children}</ComponentXXS>\n  ) : isMediumView ? (\n    <ComponentXS>{children}</ComponentXS>\n  ) : (\n    <ComponentXXS>{children}</ComponentXXS>\n  );\n};\n\nexport default ReponsiveComponentWrapper;\n"],"file":"ResponsiveComponentWrapper.js"}

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: {