@laerdal/life-react-components 1.2.2-dev.7 → 1.3.0

package/dist/umd/Button/Iconbutton.js

@@ -19,60 +19,10 @@
 
   var _propTypes2 = _interopRequireDefault(_propTypes);
 
-  var React = _interopRequireWildcard(_react);
+  var _react2 = _interopRequireDefault(_react);
 
   var _styledComponents2 = _interopRequireDefault(_styledComponents);
 
-  function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function (nodeInterop) {
-      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-  }
-
-  function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-      return obj;
-    }
-
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-      return {
-        default: obj
-      };
-    }
-
-    var cache = _getRequireWildcardCache(nodeInterop);
-
-    if (cache && cache.has(obj)) {
-      return cache.get(obj);
-    }
-
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-
-    for (var key in obj) {
-      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-
-        if (desc && (desc.get || desc.set)) {
-          Object.defineProperty(newObj, key, desc);
-        } else {
-          newObj[key] = obj[key];
-        }
-      }
-    }
-
-    newObj.default = obj;
-
-    if (cache) {
-      cache.set(obj, newObj);
-    }
-
-    return newObj;
-  }
-
   function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
       default: obj
@@ -257,7 +207,8 @@
   ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
 `;
   ;
-  const IconButton = /*#__PURE__*/React.forwardRef(({
+
+  const IconButton = /*#__PURE__*/_react2.default.forwardRef(({
     id,
     variant,
     shape,
@@ -277,8 +228,9 @@
     type,
     hidden
   }, ref) => {
-    const supressFocusRef = React.useRef(null);
-    const [tabbedHere, setTabbedHere] = React.useState(false);
+    const supressFocusRef = _react2.default.useRef(null);
+
+    const [tabbedHere, setTabbedHere] = _react2.default.useState(false);
 
     const isPressingEnter = e => {
       if (e.key === 'Enter') {
@@ -288,12 +240,16 @@
       }
 
       return false;
-    }; // Let's render button
+    };
+
+    _react2.default.useEffect(() => {
+      !!disabled && setTabbedHere(false);
+    }, [disabled]); // Let's render button
 
 
     switch (variant) {
       case 'secondary':
-        return /*#__PURE__*/React.createElement(StyledSecondaryIconButton, {
+        return /*#__PURE__*/_react2.default.createElement(StyledSecondaryIconButton, {
           id: id,
           type: type ?? 'button',
           "data-testid": id,
@@ -323,11 +279,11 @@
           onKeyPress: onKeyPress,
           hidden: hidden,
           tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/React.createElement("div", null, children));
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
 
       case 'primary':
       default:
-        return /*#__PURE__*/React.createElement(StyledPrimaryIconButton, {
+        return /*#__PURE__*/_react2.default.createElement(StyledPrimaryIconButton, {
           id: id,
           type: type ?? 'button',
           "data-testid": id,
@@ -358,9 +314,10 @@
           onKeyPress: onKeyPress,
           hidden: hidden,
           tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/React.createElement("div", null, children));
+        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
     }
   });
+
   IconButton.propTypes = {
     id: _propTypes2.default.string,
     variant: _propTypes2.default.oneOf(['primary', 'secondary']),

package/dist/umd/Button/Iconbutton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","children","hidden","IconButton","supressFocusRef","React","isPressingEnter","e","type","event","setTabbedHere"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
+{"version":3,"sources":["../../../src/Button/Iconbutton.tsx"],"names":["tabbedHereStyle","css","tabbedHereBackgroundColor","COLORS","primary_500","neutral_600","primary_700","white","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","StyledIconButton","styled","button","BREAKPOINTS","MEDIUM","StyledPrimaryIconButton","primary_800","neutral_200","StyledSecondaryIconButton","primary_20","primary_100","neutral_300","id","variant","shape","action","hideOnLowWidth","isInMobileMenu","disabled","useTransparentBackground","iconColor","unsetIconSize","tabIndex","onKeyPress","children","hidden","IconButton","supressFocusRef","React","isPressingEnter","e","setTabbedHere","type","event"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, { css } from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../styles';\n\ninterface HeaderItemProps {\n  hideOnLowWidth: boolean;\n  inMobileMenu?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  borderRadius?: number;\n  shape?: string;\n  flatEdge?: string;\n  tabbedHere?: boolean;\n  tabbedHereBackgroundColor?: string;\n}\n\nconst tabbedHereStyle = (variant: string, tabbedHereBackgroundColor?: string) => {\n  switch (variant) {\n    case 'secondary':\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;\n          box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.neutral_600};\n        }\n      `;\n    case 'primary':\n    default:\n      return css`\n        div {\n          background-color: ${tabbedHereBackgroundColor || COLORS.primary_700} !important;\n          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n        }\n        div svg path,\n        div svg {\n          fill: ${COLORS.white};\n        }\n      `;\n  }\n};\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px'); \n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n  const radius = getBorderRadius(props);\n  switch(props.flatEdge)\n  {\n      case 'left':\n          return `0px ${radius} ${radius} 0px`;\n      \n      case 'right':\n          return `${radius} 0px 0px ${radius}`;\n\n      case 'none':\n      default:\n          return `${radius}`;\n  }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n\n  display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n  ${BREAKPOINTS.MEDIUM} {\n    display: block;\n  }\n\n  border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n  div {\n    height: 36px;\n    width: 36px;\n    border-radius: ${getBorderRadiusStyle};\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n  &:focus:not(:disabled) {\n    outline: none;\n    div {\n      outline: none;\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      box-shadow: none;\n    }\n  }\n`;\n\nconst StyledPrimaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.white};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.white};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_700};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_800};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.white};\n    }\n  }\n  &:disabled {\n    div {\n      background-color: ${COLORS.neutral_200};\n    }\n    svg {\n      path {\n        fill: ${COLORS.white};\n      }\n      fill: ${COLORS.white};\n    }\n  }\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : '')};\n`;\n\nconst StyledSecondaryIconButton = styled(StyledIconButton)`\n  div {\n    background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n    svg {\n      fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      path {\n        fill: ${(props) => props.iconColor || COLORS.neutral_600};\n      }\n    }\n  }\n  &:hover:not(:disabled) {\n    div {\n      background-color: ${COLORS.primary_20};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_700};\n    }\n  }\n  &:active:not(:disabled) {\n    div {\n      background: ${COLORS.primary_100};\n    }\n    div svg path,\n    div svg {\n      fill: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    div {\n      background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n    }\n    svg {\n      path {\n        fill: ${COLORS.neutral_300};\n      }\n      fill: ${COLORS.neutral_300};\n    }\n  }\n\n  ${(props) => (props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : '')};\n`;\n\ninterface Props {\n  id?: string;\n  variant?: 'primary' | 'secondary';\n  shape?: 'square' | 'circular';\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n  hideOnLowWidth?: boolean;\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\n  isInMobileMenu?: boolean;\n  disabled?: boolean;\n  useTransparentBackground?: boolean;\n  iconColor?: string;\n  unsetIconSize?: boolean;\n  tabIndex?: number;\n  borderRadius?: number;\n  onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n  tabbedHereBackgroundColor?: string;\n  type?: 'submit' | 'reset' | 'button' | undefined;\n  children?: React.ReactNode;\n  hidden?: boolean;\n};\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  id,\n  variant,\n  shape,\n  action,\n  hideOnLowWidth,\n  isInMobileMenu,\n  children,\n  useTransparentBackground,\n  disabled,\n  iconColor,\n  unsetIconSize,\n  tabIndex,\n  flatEdge,\n  borderRadius,\n  onKeyPress,\n  tabbedHereBackgroundColor,\n  type,\n  hidden\n}: Props, ref) => {\n  const supressFocusRef = React.useRef<any>(null);\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\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  React.useEffect(() => {\n    !!disabled && setTabbedHere(false)\n  }, [disabled]);\n\n  // Let's render button\n  switch (variant) {\n    case 'secondary':\n      return (\n        <StyledSecondaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledSecondaryIconButton>\n      );\n    case 'primary':\n    default:\n      return (\n        <StyledPrimaryIconButton\n          id={id}\n          type={type ?? 'button'}\n          data-testid={id}\n          flatEdge={flatEdge}\n          ref={ref}\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => action(event)}\n          onKeyDown={(e: any) => (isPressingEnter(e) ? action() : null)}\n          disabled={disabled}\n          hideOnLowWidth={hideOnLowWidth || false}\n          inMobileMenu={isInMobileMenu}\n          useTransparentBackground={useTransparentBackground}\n          iconColor={iconColor}\n          unsetIconSize={unsetIconSize}\n          tabIndex={tabIndex || 0}\n          borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n          onMouseDown={(e: any) => {\n            if (!disabled && !tabbedHere) supressFocusRef.current = true;\n          }}\n          onFocus={(e: any) => {\n            if (!disabled) {\n              if (!supressFocusRef.current) setTabbedHere(true);\n              else supressFocusRef.current = false;\n            }\n          }}\n          onBlur={() => {\n            setTabbedHere(false);\n          }}\n          tabbedHere={tabbedHere}\n          onKeyPress={onKeyPress}\n          hidden={hidden}\n          tabbedHereBackgroundColor={tabbedHereBackgroundColor}>\n          <div>{children}</div>\n        </StyledPrimaryIconButton>\n      );\n  }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}

package/dist/umd/Dropdown/BasicDropdown.js

@@ -87,6 +87,7 @@
     list,
     placeholder,
     onSelect,
+    setDropdownMenuValues,
     initalValue,
     disableSorting,
     messageOnNoResults,
@@ -107,7 +108,9 @@
     activeValidationMessage,
     autofilledMessage,
     size,
-    margin = '4px 0'
+    margin = '4px 0',
+    dropdownMenuValues,
+    minWidth
   }) => {
     const [isOpen, setIsOpen] = React.useState(false);
     const [isLoading, setIsLoading] = React.useState(false);
@@ -146,11 +149,12 @@
     };
 
     React.useEffect(() => {
-      if (initalValue) {
-        setInput(initalValue);
+      if (initalValue || dropdownMenuValues) {
+        const initValue = dropdownMenuValues ? dropdownMenuValues.join(',') : initalValue ? initalValue : '';
+        setInput(initValue);
         setRestartFilter(true);
       }
-    }, [initalValue]);
+    }, [initalValue, dropdownMenuValues]);
     React.useEffect(() => {
       document.addEventListener('keypress', handleKeyPress);
       return () => {
@@ -176,7 +180,8 @@
       className: size ? size : '',
       locked: locked,
       disabled: disabled,
-      margin: margin
+      margin: margin,
+      minWidth: minWidth
     }, /*#__PURE__*/React.createElement(_CommonStyling.StyledField, {
       ref: styledFieldRef,
       className: (isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : ''),
@@ -190,7 +195,8 @@
       locked: locked || false,
       showValidationMessage: !!activeValidationMessage,
       placeholder: placeholderSearch,
-      isPlaceholder: !input
+      isPlaceholder: !input,
+      minWidth: minWidth
     }, /*#__PURE__*/React.createElement(_CommonStyling.InputField, {
       type: "search",
       readOnly: true,
@@ -242,8 +248,8 @@
       setIsOpen: customSetIsOpen,
       messageOnNoResults: messageOnNoResults ?? '',
       isButton: isButton || false,
-      selectedValues: selectedValues,
-      setSelectedValues: setSelectedValues,
+      selectedValues: dropdownMenuValues ?? selectedValues,
+      setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
       id: `${id}_dropdowncontent`
     })), activeValidationMessage && /*#__PURE__*/React.createElement(_styling.WarningMessage, null, /*#__PURE__*/React.createElement(_SystemIcons.TechnicalWarning, {
       size: "20px",
@@ -269,6 +275,7 @@
     maxHeight: _propTypes2.default.string,
     placeholder: _propTypes2.default.string,
     onSelect: _propTypes2.default.func,
+    setDropdownMenuValues: _propTypes2.default.func,
     initalValue: _propTypes2.default.string,
     disableSorting: _propTypes2.default.bool,
     messageOnNoResults: _propTypes2.default.string,
@@ -277,7 +284,8 @@
     isButton: _propTypes2.default.bool,
     activeValidationMessage: _propTypes2.default.string,
     autofilledMessage: _propTypes2.default.string,
-    margin: _propTypes2.default.string
+    margin: _propTypes2.default.string,
+    dropdownMenuValues: _propTypes2.default.arrayOf(_propTypes2.default.string)
   };
   exports.default = BasicDropdown;
 });

package/dist/umd/Dropdown/BasicDropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue) {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={selectedValues}\n            setSelectedValues={setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}
+{"version":3,"sources":["../../../src/Dropdown/BasicDropdown.tsx"],"names":["id","list","itemsType","action","actionLabel","actionIcon","actionLoading","actionDisabled","pinTopItem","multiSelect","scrollable","maxHeight","placeholder","onSelect","setDropdownMenuValues","initalValue","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","margin","dropdownMenuValues","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","BasicDropdown","minWidth","React","styledFieldRef","handleKeyPress","e","setFocused","setIsOpen","handleValueSelect","values","setRestartFilter","setInput","initValue","document","setIsLoading","customSetIsOpen","isOpen","getDisplayItems","input","val","listDisplayLabels","item","l","size","isLoading","Size","COLORS","neutral_600","actionVariant","onValueUpdate","items","warning_400"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,QAAMyB,eAAe,GAArB,GAAA;AACA,QAAMC,iBAAiB,GAAvB,EAAA;;AAEA,QAAMC,aAAa,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,IAAA;AAAA,IAAA,WAAA;AAAA,IAAA,QAAA;AAAA,IAAA,qBAAA;AAAA,IAAA,WAAA;AAAA,IAAA,cAAA;AAAA,IAAA,kBAAA;AASrBzB,IAAAA,SAAS,GATY,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,WAAA;AAAA,IAAA,aAAA;AAAA,IAAA,UAAA;AAAA,IAAA,aAAA;AAAA,IAAA,cAAA;AAAA,IAAA,UAAA;AAAA,IAAA,WAAA;AAkBrBQ,IAAAA,UAAU,GAlBW,IAAA;AAAA,IAAA,SAAA;AAAA,IAAA,QAAA;AAAA,IAAA,MAAA;AAAA,IAAA,QAAA;AAAA,IAAA,uBAAA;AAAA,IAAA,iBAAA;AAAA,IAAA,IAAA;AA0BrBa,IAAAA,MAAM,GA1Be,OAAA;AAAA,IAAA,kBAAA;AA4BrBK,IAAAA;AA5BqB,GAAD,KA6BK;AACzB,UAAM,CAAA,MAAA,EAAA,SAAA,IAAsBC,KAAK,CAALA,QAAAA,CAA5B,KAA4BA,CAA5B;AACA,UAAM,CAAA,SAAA,EAAA,YAAA,IAA4BA,KAAK,CAALA,QAAAA,CAAlC,KAAkCA,CAAlC;AACA,UAAM,CAAA,KAAA,EAAA,QAAA,IAAoBA,KAAK,CAALA,QAAAA,CAA1B,EAA0BA,CAA1B;AACA,UAAM,CAAA,iBAAA,EAAA,oBAAA,IAA4CA,KAAK,CAALA,QAAAA,CAAuBjB,WAAW,IAApF,EAAkDiB,CAAlD;AACA,UAAM,CAAA,aAAA,EAAA,gBAAA,IAAoCA,KAAK,CAALA,QAAAA,CAA1C,KAA0CA,CAA1C;AACA,UAAM,CAAA,OAAA,EAAA,UAAA,IAAwBA,KAAK,CAALA,QAAAA,CAA9B,IAA8BA,CAA9B;AACA,UAAM,CAAA,cAAA,EAAA,iBAAA,IAAsCA,KAAK,CAALA,QAAAA,CAAyBd,WAAW,GAAG,CAAH,WAAG,CAAH,GAAhF,EAA4Cc,CAA5C;AAEA,UAAMC,cAAc,GAAGD,KAAK,CAALA,MAAAA,CAAvB,IAAuBA,CAAvB;AAEA;AACF;AACA;AACA;AACA;;AAEE,UAAME,cAAc,GAAIC,CAAD,IAAY;AACjC,UAAIF,cAAc,EAAdA,OAAAA,IAA2BA,cAAc,CAAdA,OAAAA,CAAAA,QAAAA,CAAgCE,CAAC,CAAhE,MAA+BF,CAA/B,EAA0E;AACxE,YAAIE,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AACpBC,UAAAA,UAAU,CAAVA,CAAU,CAAVA;AACAC,UAAAA,SAAS,CAAC,CAAVA,MAAS,CAATA;AAFF,SAAA,MAGO,IAAIF,CAAC,CAADA,OAAAA,KAAJ,EAAA,EAAsB;AAC3BC,UAAAA,UAAU,CAAVA,CAAU,CAAVA;AACAC,UAAAA,SAAS,CAAC,CAAVA,MAAS,CAATA;AACD;AACF;AATH,KAAA;;AAYA,UAAMC,iBAAiB,GAAIC,MAAD,IAAsB;AAC9CC,MAAAA,gBAAgB,CAAhBA,IAAgB,CAAhBA;AACAC,MAAAA,QAAQ,CAACF,MAAM,CAANA,IAAAA,CAATE,IAASF,CAAD,CAARE;AACAzB,MAAAA,QAAQ,IAAIA,QAAQ,CAH0B,MAG1B,CAApBA,CAH8C,CAI9C;;AACA,UAAIT,WAAW,IAAf,WAAA,EAAgC;AAEhC8B,MAAAA,SAAS,CAATA,KAAS,CAATA;AACAD,MAAAA,UAAU,CAAVA,IAAU,CAAVA;AARF,KAAA;;AAWAJ,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpB,UAAId,WAAW,IAAf,kBAAA,EAAuC;AACrC,cAAMwB,SAAS,GAAGf,kBAAkB,GAAGA,kBAAkB,CAAlBA,IAAAA,CAAH,GAAGA,CAAH,GAAmCT,WAAW,GAAA,WAAA,GAAlF,EAAA;AACAuB,QAAAA,QAAQ,CAARA,SAAQ,CAARA;AACAD,QAAAA,gBAAgB,CAAhBA,IAAgB,CAAhBA;AACD;AALHR,KAAAA,EAMG,CAAA,WAAA,EANHA,kBAMG,CANHA;AAQAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpBW,MAAAA,QAAQ,CAARA,gBAAAA,CAAAA,UAAAA,EAAAA,cAAAA;AACA,aAAO,MAAM;AACXA,QAAAA,QAAQ,CAARA,mBAAAA,CAAAA,UAAAA,EAAAA,cAAAA;AADF,OAAA;AAFFX,KAAAA;AAOAA,IAAAA,KAAK,CAALA,SAAAA,CAAgB,MAAM;AACpBY,MAAAA,YAAY,CAAZA,KAAY,CAAZA;AADFZ,KAAAA,EAEG,CAFHA,KAEG,CAFHA;;AAIA,UAAMa,eAAe,GAAIC,MAAD,IAAqB;AAC3CT,MAAAA,SAAS,CAATA,MAAS,CAATA;AADF,KAAA;;AAIA,UAAMU,eAAe,GAAG,MAAM;AAC5B,YAAMR,MAAM,GAAGS,KAAK,CAALA,KAAAA,CAAAA,GAAAA,EAAAA,GAAAA,CAAsBC,GAAD,IAASA,GAAG,CAAhD,IAA6CA,EAA9BD,CAAf;AACA,YAAME,iBAAiB,GAAG9C,IAAI,CAAJA,MAAAA,CAAa+C,IAAD,IAAUZ,MAAM,CAANA,QAAAA,CAAgBY,IAAI,CAA1C/C,KAAsBmC,CAAtBnC,EAAAA,GAAAA,CAAwDgD,CAAD,IAAOA,CAAC,CAAzF,YAA0BhD,CAA1B;AACA,aAAO8C,iBAAiB,CAAjBA,IAAAA,CAAP,IAAOA,CAAP;AAHF,KAAA;;AAMA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA;AAAU,MAAA,QAAQ,EAAE3B,QAAQ,IAA5B,KAAA;AAAuC,MAAA,SAAS,EAAE8B,IAAI,GAAA,IAAA,GAAtD,EAAA;AAAoE,MAAA,MAAM,EAA1E,MAAA;AAAoF,MAAA,QAAQ,EAA5F,QAAA;AAAwG,MAAA,MAAM,EAA9G,MAAA;AAAwH,MAAA,QAAQ,EAAEtB;AAAlI,KAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AACE,MAAA,GAAG,EADL,cAAA;AAEE,MAAA,SAAS,EAAE,CAACe,MAAM,GAAA,WAAA,GAAP,EAAA,EAAA,MAAA,CAAmCO,IAAI,GAAA,IAAA,GAAvC,EAAA,EAAA,MAAA,CAA4D9B,QAAQ,GAAA,QAAA,GAFjF,EAEa,CAFb;AAGE,MAAA,OAAO,EAAE,MAAM;AACb,YAAI,CAAA,MAAA,IAAW,CAAf,QAAA,EAA0B;AACxBc,UAAAA,SAAS,CAAC,CAAVA,MAAS,CAATA;AACD;AANL,OAAA;AAQE,MAAA,QAAQ,EAAEhB,QAAQ,IAARA,MAAAA,GAAqB,CAArBA,CAAAA,GARZ,CAAA;AASE,MAAA,QAAQ,EAAEA,QAAQ,IATpB,KAAA;AAUE,MAAA,MAAM,EAAEC,MAAM,IAVhB,KAAA;AAWE,MAAA,qBAAqB,EAAE,CAAC,CAX1B,uBAAA;AAYE,MAAA,WAAW,EAZb,iBAAA;AAaE,MAAA,aAAa,EAAE,CAbjB,KAAA;AAcE,MAAA,QAAQ,EAAES;AAdZ,KAAA,EAAA,aAeE,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,IAAI,EADN,QAAA;AAEE,MAAA,QAAQ,EAFV,IAAA;AAGE,MAAA,WAAW,EAHb,iBAAA;AAIE,MAAA,KAAK,EAAEgB,eAJT,EAAA;AAKE,MAAA,SAAS,EAAEM,IAAI,GAAI,GAAEA,IAAN,QAAA,GALjB,OAAA;AAME,MAAA,OAAO,EAAGlB,CAAD,IAAY;AACnB,YAAI,CAAA,MAAA,IAAW,CAAf,QAAA,EAA0B;AACxBA,UAAAA,CAAC,CAADA,eAAAA;AACAE,UAAAA,SAAS,CAAC,CAAVA,MAAS,CAATA;AACD;AAVL,OAAA;AAYE,MAAA,QAAQ,EAAEhB,QAAQ,IAARA,MAAAA,GAAqB,CAArBA,CAAAA,GAZZ,CAAA;AAaE,MAAA,QAAQ,EAAEA,QAAQ,IAAI;AAbxB,KAAA,CAfF,EA8BGiC,SAAS,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,kCAAA,EAAA;AAAkB,MAAA,IAAI,EAAEC,YAAxB,KAAA;AAAoC,MAAA,KAAK,EAAEC,eAAOC;AAAlD,KAAA,CAAH,GA9BZ,IAAA,EAAA,aA+BE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAK,MAAA,OAAO,EAAE,MAAMpB,SAAS,CAAC,CAA9B,MAA6B,CAA7B;AAAwC,MAAA,SAAS,EAAE;AAAnD,KAAA,EACGS,MAAM,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAjB,MAAA;AAAyB,MAAA,SAAS,EAAEO,IAAI,GAAA,IAAA,GAAU;AAAlD,KAAA,CAAH,GAAA,aAA8D,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA;AAAe,MAAA,IAAI,EAAnB,MAAA;AAA2B,MAAA,SAAS,EAAEA,IAAI,GAAA,IAAA,GAAU;AAApD,KAAA,CADvE,CA/BF,CADF,EAoCG,CAAA,MAAA,IAAW,CAAX,QAAA,IAAA,aACC,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AACE,MAAA,kBAAkB,EAAE;AAClBhD,QAAAA,SAAS,EADS,SAAA;AAElBC,QAAAA,MAAM,EAAEA,MAAM,KAAK,MAAM,CAFP,CAEJ,CAFI;AAGlBC,QAAAA,WAAW,EAHO,WAAA;AAIlBmD,QAAAA,aAAa,EAJK,aAAA;AAKlBhD,QAAAA,cAAc,EALI,cAAA;AAMlBG,QAAAA,UAAU,EANQ,UAAA;AAOlB8C,QAAAA,aAAa,EAPK,iBAAA;AAQlBC,QAAAA,KAAK,EARa,IAAA;AASlBhD,QAAAA,WAAW,EATO,WAAA;AAUlBD,QAAAA,UAAU,EAVQ,UAAA;AAWlBG,QAAAA,SAAS,EAXS,SAAA;AAYlBN,QAAAA,UAAU,EAZQ,UAAA;AAalBC,QAAAA,aAAa,EAAEA;AAbG,OADtB;AAgBE,MAAA,OAAO,EAhBT,OAAA;AAiBE,MAAA,UAAU,EAjBZ,UAAA;AAkBE,MAAA,IAAI,EAAE4C,IAAI,IAAIE,YAlBhB,KAAA;AAmBE,MAAA,MAAM,EAnBR,EAAA;AAoBE,MAAA,kBAAkB,EApBpB,IAAA;AAqBE,MAAA,MAAM,EArBR,MAAA;AAsBE,MAAA,SAAS,EAtBX,eAAA;AAuBE,MAAA,kBAAkB,EAAEnC,kBAAkB,IAvBxC,EAAA;AAwBE,MAAA,QAAQ,EAAEG,QAAQ,IAxBpB,KAAA;AAyBE,MAAA,cAAc,EAAEI,kBAAkB,IAzBpC,cAAA;AA0BE,MAAA,iBAAiB,EAAEV,qBAAqB,GAAA,qBAAA,GA1B1C,iBAAA;AA2BE,MAAA,EAAE,EAAG,GAAEd,EAAG;AA3BZ,KAAA,CArCJ,CADF,EAqEGqB,uBAAuB,IAAA,aACtB,KAAA,CAAA,aAAA,CAAA,uBAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,6BAAA,EAAA;AAAkB,MAAA,IAAI,EAAtB,MAAA;AAA8B,MAAA,KAAK,EAAEgC,eAAOK;AAA5C,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAxEN,uBAwEM,CAFF,CAtEJ,EA2EGpC,iBAAiB,IAAA,aAChB,KAAA,CAAA,aAAA,CAAA,0BAAA,EAAA,IAAA,EAAA,aACE,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAa,MAAA,IAAI,EAAjB,MAAA;AAAyB,MAAA,KAAK,EAAE+B,eAAOC;AAAvC,KAAA,CADF,EAAA,aAEE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EA/ER,iBA+EQ,CAFF,CA5EJ,CADF;AAlGF,GAAA;;;AAjCEtD,IAAAA,E;AACAC,IAAAA,I;AACAC,IAAAA,S,6BAAY,Q,EAAW,U,EAAa,O;AACpCC,IAAAA,M;AACAC,IAAAA,W;AAEAC,IAAAA,U;AACAC,IAAAA,a;AACAC,IAAAA,c;AACAC,IAAAA,U;AACAC,IAAAA,W;AACAC,IAAAA,U;AACAC,IAAAA,S;AACAC,IAAAA,W;AACAC,IAAAA,Q;AACAC,IAAAA,qB;AACAC,IAAAA,W;AACAC,IAAAA,c;AACAC,IAAAA,kB;AACAC,IAAAA,Q;AACAC,IAAAA,M;AACAC,IAAAA,Q;AACAC,IAAAA,uB;AACAC,IAAAA,iB;AAEAC,IAAAA,M;AACAC,IAAAA,kB;;oBA+LF,a","sourcesContent":["import * as React from 'react';\nimport { COLORS } from '../styles';\nimport { ArrowDropDown, ArrowDropUp, Information, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, Dropdown, StyledField, InputField } from './CommonStyling';\nimport DropdownContent, { DropdownItem } from './DropdownContent';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\nimport { Size } from '../types';\n\ninterface DropdownFilterProps {\n  id: string;\n  list: DropdownItem[];\n  itemsType?: 'normal' | 'checkbox' | 'radio';\n  action?: () => void;\n  actionLabel?: string;\n  actionVariant?: 'primary' | 'secondary' | 'tertiary' | undefined;\n  actionIcon?: React.ReactNode;\n  actionLoading?: boolean;\n  actionDisabled?: boolean;\n  pinTopItem?: boolean;\n  multiSelect?: boolean;\n  scrollable?: boolean;\n  maxHeight?: string;\n  placeholder?: string;\n  onSelect?: (value: string[]) => void;\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n  initalValue?: string;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  dropdownMenuValues?: string[];\n  minWidth?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst BasicDropdown = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  setDropdownMenuValues,\n  initalValue,\n  disableSorting,\n  messageOnNoResults,\n  itemsType = 'normal',\n  action,\n  actionLabel,\n  actionVariant,\n  actionIcon,\n  actionLoading,\n  actionDisabled,\n  pinTopItem,\n  multiSelect,\n  scrollable = true,\n  maxHeight,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  margin = '4px 0',\n  dropdownMenuValues,\n  minWidth,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>(initalValue ? [initalValue] : []);\n\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n\n  /*\n  if (!items.includes(input)) {\n    setInput('');\n    setPlaceholderSearch(placeholder || '');\n  } */\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      } else if (e.keyCode === 40) {\n        setFocused(0);\n        setIsOpen(!isOpen);\n      }\n    }\n  };\n\n  const handleValueSelect = (values: string[]) => {\n    setRestartFilter(true);\n    setInput(values.join(', '));\n    onSelect && onSelect(values);\n    //don't close dropdown on item select if have custom action or multiselect\n    if (actionLabel || multiSelect) return;\n\n    setIsOpen(false);\n    setFocused(null);\n  };\n\n  React.useEffect(() => {\n    if (initalValue || dropdownMenuValues) {\n      const initValue = dropdownMenuValues ? dropdownMenuValues!.join(',') : initalValue ? initalValue : '';\n      setInput(initValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue, dropdownMenuValues]);\n\n  React.useEffect(() => {\n    document.addEventListener('keypress', handleKeyPress);\n    return () => {\n      document.removeEventListener('keypress', handleKeyPress);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  const customSetIsOpen = (isOpen: boolean) => {\n    setIsOpen(isOpen);\n  };\n\n  const getDisplayItems = () => {\n    const values = input.split(',').map((val) => val.trim());\n    const listDisplayLabels = list.filter((item) => values.includes(item.value)).map((l) => l.displayLabel);\n    return listDisplayLabels.join(', ');\n  };\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} className={size ? size : ''} locked={locked} disabled={disabled} margin={margin} minWidth={minWidth}>\n        <StyledField\n          ref={styledFieldRef}\n          className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n          onClick={() => {\n            if (!locked || !disabled) {\n              setIsOpen(!isOpen);\n            }\n          }}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n          locked={locked || false}\n          showValidationMessage={!!activeValidationMessage}\n          placeholder={placeholderSearch}\n          isPlaceholder={!input}\n          minWidth={minWidth}>\n          <InputField\n            type=\"search\"\n            readOnly\n            placeholder={placeholderSearch}\n            value={getDisplayItems()}\n            className={size ? `${size} value` : 'value'}\n            onClick={(e: any) => {\n              if (!locked && !disabled) {\n                e.stopPropagation();\n                setIsOpen(!isOpen);\n              }\n            }}\n            tabIndex={disabled || locked ? -1 : 0}\n            disabled={disabled || false}\n          />\n          {isLoading ? <LoadingIndicator size={Size.Small} color={COLORS.neutral_600} /> : null}\n          <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n            {isOpen ? <ArrowDropUp size=\"24px\" className={size ? size : ''} /> : <ArrowDropDown size=\"24px\" className={size ? size : ''} />}\n          </div>\n        </StyledField>\n        {!locked && !disabled && (\n          <DropdownContent\n            customizationProps={{\n              itemsType: itemsType,\n              action: action ?? (() => {}),\n              actionLabel: actionLabel,\n              actionVariant: actionVariant,\n              actionDisabled: actionDisabled,\n              scrollable: scrollable,\n              onValueUpdate: handleValueSelect,\n              items: list,\n              multiSelect: multiSelect,\n              pinTopItem: pinTopItem,\n              maxHeight: maxHeight,\n              actionIcon: actionIcon,\n              actionLoading: actionLoading,\n            }}\n            focused={focused}\n            setFocused={setFocused}\n            size={size ?? Size.Small}\n            filter={''}\n            hideOnClickOutside={true}\n            isOpen={isOpen}\n            setIsOpen={customSetIsOpen}\n            messageOnNoResults={messageOnNoResults ?? ''}\n            isButton={isButton || false}\n            selectedValues={dropdownMenuValues ?? selectedValues}\n            setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n            id={`${id}_dropdowncontent`}\n          />\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage>\n          <TechnicalWarning size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default BasicDropdown;\n"],"file":"BasicDropdown.js"}

package/dist/umd/Dropdown/CommonStyling.js

@@ -1,16 +1,16 @@
 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types"], factory);
+    define(["exports", "styled-components", "../common", "../styles", "../styles/typography", "../types", "../styles/z-indexes"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"));
+    factory(exports, require("styled-components"), require("../common"), require("../styles"), require("../styles/typography"), require("../types"), require("../styles/z-indexes"));
   } else {
     var mod = {
       exports: {}
     };
-    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types);
+    factory(mod.exports, global.styledComponents, global.common, global.styles, global.typography, global.types, global.zIndexes);
     global.undefined = mod.exports;
   }
-})(this, function (exports, _styledComponents, _common, _styles, _typography, _types) {
+})(this, function (exports, _styledComponents, _common, _styles, _typography, _types, _zIndexes) {
   "use strict";
 
   Object.defineProperty(exports, "__esModule", {
@@ -29,7 +29,7 @@
   const Dropdown = exports.Dropdown = _styledComponents2.default.div`
   position: relative;
   display: inline-block;
-  ${props => !props.isButton && 'width: 100%; min-width: 344px;'}
+  ${props => !props.isButton && (props?.minWidth ? `width: 100%; min-width: ${props.minWidth};` : 'width: 100%; min-width: 344px;')}
   ${props => props.locked || props.disabled ? 'cursor: not-allowed;' : ''}
   ${props => props.margin ? `margin: ${props.margin};` : ''}
 
@@ -116,7 +116,7 @@
 
   padding: 12px 16px;
   height: 48px;
-  min-width: 344px;
+  min-width: ${props => props.minWidth ? `${props.minWidth}` : '344px'};
   width: 100%;
 
   background: ${_styles.COLORS.white};
@@ -128,8 +128,8 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  
-  input{
+
+  input {
     font-size: inherit;
     line-height: inherit;
     color: inherit;
@@ -225,7 +225,7 @@
   position: absolute;
   background-color: ${_styles.COLORS.white};
   width: 100%;
-  z-index: 1;
+  z-index: ${_zIndexes.Z_INDEXES.dropdown};
   margin-top: ${props => props.isButton ? '-4px' : '2px'};
 
   &.show {
@@ -276,96 +276,95 @@
 
   const DropdownButtonCSS = exports.DropdownButtonCSS = size => {
     return _styledComponents.css`
-
-  ${size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
-  ${size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+    ${size == _types.Size.Small && (0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+    ${size == _types.Size.Medium && (0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
   ${size == _types.Size.Large && (0, _typography.ComponentLStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
 
   position: relative;
-  text-decoration: none;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  min-height: ${size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px'};
-  background-color: ${_styles.COLORS.white};
-  border: none;
-  cursor: pointer;
-  background: transparent;
-  width: 100%;
-  text-align: left;
-
-  span {
-    margin: auto 0 auto 16px;
-    line-height: 48px;
-  }
-
-  div.item-content {
-    margin: auto 0 auto 16px;
+    text-decoration: none;
     display: flex;
+    flex-direction: row;
     align-items: center;
+    min-height: ${size == _types.Size.Large ? '64px' : size == _types.Size.Medium ? '56px' : '48px'};
+    background-color: ${_styles.COLORS.white};
+    border: none;
+    cursor: pointer;
+    background: transparent;
+    width: 100%;
+    text-align: left;
 
-    div.item-label {
-      flex: 1 0 calc(100% - 40px);
+    span {
+      margin: auto 0 auto 16px;
+      line-height: 48px;
     }
 
-    div.item-icon {
-      margin-right: 6px;
-    }
-    div.item-icon-old {
-      flex: 1 0 40px;
+    div.item-content {
+      margin: auto 0 auto 16px;
       display: flex;
-      justify-content: flex-end;
+      align-items: center;
+
+      div.item-label {
+        flex: 1 0 calc(100% - 40px);
+      }
+
+      div.item-icon {
+        margin-right: 6px;
+      }
+      div.item-icon-old {
+        flex: 1 0 40px;
+        display: flex;
+        justify-content: flex-end;
+      }
     }
-  }
 
-  ${_common.CommonInteractionStyling};
+    ${_common.CommonInteractionStyling};
 
-  &.active {
-    background: ${_styles.COLORS.neutral_20};
+    &.active {
+      background: ${_styles.COLORS.neutral_20};
 
-    &::after {
-      position: absolute;
-      content: ' ';
-      width: 4px;
-      top: 0;
-      bottom: 0;
-      left: 2px;
-      background-color: ${_styles.COLORS.primary_500};
+      &::after {
+        position: absolute;
+        content: ' ';
+        width: 4px;
+        top: 0;
+        bottom: 0;
+        left: 2px;
+        background-color: ${_styles.COLORS.primary_500};
 
-      border-radius: 2px;
+        border-radius: 2px;
+      }
     }
-  }
 
-  &:disabled {
-    background-color: transparent;
-    cursor: not-allowed;
-    color: ${_styles.COLORS.neutral_200}
-  }
+    &:disabled {
+      background-color: transparent;
+      cursor: not-allowed;
+      color: ${_styles.COLORS.neutral_200};
+    }
 
-  &.active:hover {
-    background-color: ${_styles.COLORS.primary_20};
+    &.active:hover {
+      background-color: ${_styles.COLORS.primary_20};
 
-    svg {
-      color: ${_styles.COLORS.primary_600};
-    }
+      svg {
+        color: ${_styles.COLORS.primary_600};
+      }
 
-    &::after {
-      background-color: ${_styles.COLORS.primary_500};
+      &::after {
+        background-color: ${_styles.COLORS.primary_500};
+      }
     }
-  }
 
-  &.active:active {
-    background-color: ${_styles.COLORS.primary_100};
+    &.active:active {
+      background-color: ${_styles.COLORS.primary_100};
 
-    svg {
-      color: ${_styles.COLORS.primary_800};
-    }
+      svg {
+        color: ${_styles.COLORS.primary_800};
+      }
 
-    &::after {
-      background-color: ${_styles.COLORS.primary_500};
+      &::after {
+        background-color: ${_styles.COLORS.primary_500};
+      }
     }
-  }
-`;
+  `;
   };
 
   const ButtonDropdownWrapper = exports.ButtonDropdownWrapper = _styledComponents2.default.div`