@laerdal/life-react-components 3.5.2-uss.hackathon → 3.5.3

package/dist/umd/Button/DualFunctionButton.js

@@ -1,241 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "./Button", "../icons/systemicons/SystemIcons", "../Dropdown/CommonStyling", "../types", "../Dropdown/DropdownContent", "styled-components"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("./Button"), require("../icons/systemicons/SystemIcons"), require("../Dropdown/CommonStyling"), require("../types"), require("../Dropdown/DropdownContent"), require("styled-components"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.Button, global.SystemIcons, global.CommonStyling, global.types, global.DropdownContent, global.styledComponents);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _Button, _SystemIcons, _CommonStyling, _types, _DropdownContent, _styledComponents) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var React = _interopRequireWildcard(_react);
-
-  var _Button2 = _interopRequireDefault(_Button);
-
-  var _DropdownContent2 = _interopRequireDefault(_DropdownContent);
-
-  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
-    };
-  }
-
-  const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
-        _excluded2 = ["loading", "icon", "onClick"];
-
-  function _extends() {
-    _extends = Object.assign || function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-
-      return target;
-    };
-
-    return _extends.apply(this, arguments);
-  }
-
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-
-    var key, i;
-
-    if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
-    }
-
-    return target;
-  }
-
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-
-    return target;
-  }
-
-  const ButtonsContainer = _styledComponents2.default.div`
-  display: flex;
-  align-items: center;
-
-  button:first-child {
-    margin-right: 2px;
-  }
-
-  div.button-content {
-    gap: 0px;
-    padding: ${props => props.size == _types.Size.Large ? '4px 18px' : props.size == _types.Size.Medium ? '4px 14px' : '4px 10px'};
-  }
-`;
-
-  const DualFunctionButton = _ref => {
-    let {
-      children = 'Primary Button',
-      variant = 'primary',
-      type = 'button',
-      size = _types.Size.Medium,
-      width = 'auto',
-      testId,
-      disabled,
-      id,
-      dropdownMenuValues,
-      setDropdownMenuValues,
-      dropdownCustomizationProps
-    } = _ref,
-        props = _objectWithoutProperties(_ref, _excluded); // Let's filter out properties that we don't need to render.
-
-
-    const {
-      loading,
-      icon,
-      onClick
-    } = props,
-          renderProps = _objectWithoutProperties(props, _excluded2);
-
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [focused, setFocused] = React.useState(null);
-    const dropdownContainerRef = React.useRef(null);
-    const [selectedValues, setSelectedValues] = React.useState([]);
-    return /*#__PURE__*/React.createElement(ButtonsContainer, {
-      ref: dropdownContainerRef,
-      size: size
-    }, /*#__PURE__*/React.createElement(_CommonStyling.Dropdown, {
-      isButton: true,
-      locked: false,
-      disabled: false,
-      margin: ""
-    }, /*#__PURE__*/React.createElement(_Button2.default, _extends({}, renderProps, {
-      onClick: onClick,
-      disabled: disabled,
-      type: type,
-      loading: loading,
-      icon: icon,
-      size: size,
-      width: width,
-      variant: variant,
-      flatEdge: "right"
-    }), children), /*#__PURE__*/React.createElement(_DropdownContent2.default, {
-      customizationProps: dropdownCustomizationProps,
-      filter: "",
-      selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues,
-      setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
-      isButton: true,
-      setIsOpen: setIsOpen,
-      focused: focused,
-      setFocused: setFocused,
-      hideOnClickOutside: true,
-      size: size,
-      isOpen: isOpen,
-      id: id ?? 'dropdownId',
-      messageOnNoResults: "",
-      alignLeft: true
-    })), /*#__PURE__*/React.createElement(_Button2.default, _extends({
-      variant: variant
-    }, renderProps, {
-      disabled: disabled,
-      type: type,
-      size: size,
-      minWidth: 'unset',
-      onClick: () => setIsOpen(!isOpen),
-      icon: isOpen ? /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropUp, {
-        size: "16px"
-      }) : /*#__PURE__*/React.createElement(_SystemIcons.ArrowDropDown, {
-        size: "16px"
-      }),
-      flatEdge: "left"
-    })));
-  };
-
-  DualFunctionButton.propTypes = {
-    dropdownMenuValues: _propTypes2.default.arrayOf(_propTypes2.default.string),
-    setDropdownMenuValues: _propTypes2.default.func
-  };
-  exports.default = DualFunctionButton;
-});
-//# sourceMappingURL=DualFunctionButton.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/Button/DualFunctionButton.tsx"],"names":["ButtonsContainer","styled","div","props","Size","dropdownMenuValues","setDropdownMenuValues","DualFunctionButton","children","variant","type","size","width","dropdownCustomizationProps","onClick","renderProps","React","dropdownContainerRef","id","setIsOpen","isOpen"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport { LoadingIndicator } from '../LoadingIndicator';\r\nimport Button, { ButtonProps } from './Button'\r\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\r\nimport { Dropdown } from '../Dropdown/CommonStyling';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\n\r\nconst ButtonsContainer = styled.div<{ size?: Size }>`\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  button:first-child {\r\n    margin-right: 2px;\r\n  }\r\n\r\n  div.button-content {\r\n    gap: 0px;\r\n    padding: ${ props => props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px' };\r\n  }\r\n`;\r\n\r\nexport interface ButtonOption {\r\n  label: string;\r\n}\r\n\r\nexport interface DualButtonProps extends ButtonProps {\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  dropdownMenuValues?: string[];\r\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\r\n}\r\n\r\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\r\n  children = 'Primary Button',\r\n  variant = 'primary',\r\n  type = 'button',\r\n  size = Size.Medium,\r\n  width = 'auto',\r\n  testId,\r\n  disabled,\r\n  id,\r\n  dropdownMenuValues,\r\n  setDropdownMenuValues,\r\n  dropdownCustomizationProps,\r\n  ...props\r\n}) => {\r\n  // Let's filter out properties that we don't need to render.\r\n  const { loading, icon, onClick, ...renderProps } = props;\r\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n    return <ButtonsContainer ref={dropdownContainerRef} size={size}>\r\n          <Dropdown isButton={true} locked={false} disabled={false} margin=''>\r\n            <Button\r\n            {...renderProps}\r\n            onClick={onClick}\r\n            disabled={disabled}\r\n            type={type}\r\n            loading={loading}\r\n            icon={icon}\r\n            size={size}\r\n            width={width}\r\n            variant={variant}\r\n            flatEdge=\"right\">\r\n                {children}\r\n            </Button>\r\n              <DropdownContent\r\n                    customizationProps={dropdownCustomizationProps}\r\n                    filter=''\r\n                    selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : (dropdownMenuValues ?? selectedValues)}\r\n                    setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\r\n                    isButton={true}\r\n                    setIsOpen={setIsOpen}\r\n                    focused={focused}\r\n                    setFocused={setFocused}\r\n                    hideOnClickOutside={true}\r\n                    size={size}\r\n                    isOpen={isOpen}\r\n                    id={id ?? 'dropdownId'}\r\n                    messageOnNoResults=''\r\n                    alignLeft={true} />\r\n          </Dropdown>\r\n          <Button variant={variant}\r\n          {...renderProps}\r\n          disabled={disabled}\r\n          type={type}\r\n          size={size}\r\n          minWidth={'unset'}\r\n          onClick={() => setIsOpen(!isOpen)}\r\n          icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\"/>}\r\n          flatEdge=\"left\" />\r\n      </ButtonsContainer>;\r\n  };\r\n\r\n\r\nexport default DualFunctionButton;\r\n"],"file":"DualFunctionButton.js"}

package/dist/umd/Button/Iconbutton.js

@@ -1,341 +0,0 @@
-(function (global, factory) {
-  if (typeof define === "function" && define.amd) {
-    define(["exports", "prop-types", "react", "styled-components", "../styles"], factory);
-  } else if (typeof exports !== "undefined") {
-    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../styles"));
-  } else {
-    var mod = {
-      exports: {}
-    };
-    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles);
-    global.undefined = mod.exports;
-  }
-})(this, function (exports, _propTypes, _react, _styledComponents, _styles) {
-  "use strict";
-
-  Object.defineProperty(exports, "__esModule", {
-    value: true
-  });
-
-  var _propTypes2 = _interopRequireDefault(_propTypes);
-
-  var _react2 = _interopRequireDefault(_react);
-
-  var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-  function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-      default: obj
-    };
-  }
-
-  const tabbedHereStyle = (variant, tabbedHereBackgroundColor) => {
-    switch (variant) {
-      case 'secondary':
-        return _styledComponents.css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || 'transparent'} !important;
-          box-shadow: 0px 0px 8px ${_styles.COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
-        }
-        div svg path,
-        div svg {
-          fill: ${_styles.COLORS.neutral_600};
-        }
-      `;
-
-      case 'primary':
-      default:
-        return _styledComponents.css`
-        div {
-          background-color: ${tabbedHereBackgroundColor || _styles.COLORS.primary_700} !important;
-          box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
-        }
-        div svg path,
-        div svg {
-          fill: ${_styles.COLORS.white};
-        }
-      `;
-    }
-  };
-
-  const getBorderRadius = props => props.borderRadius ? `${props.borderRadius}px` : '4px';
-
-  const getBorderRadiusStyle = props => {
-    const radius = getBorderRadius(props);
-
-    switch (props.flatEdge) {
-      case 'left':
-        return `0px ${radius} ${radius} 0px`;
-
-      case 'right':
-        return `${radius} 0px 0px ${radius}`;
-
-      case 'none':
-      default:
-        return `${radius}`;
-    }
-  };
-
-  const StyledIconButton = _styledComponents2.default.button`
-  border-width: 0;
-  cursor: pointer;
-  height: 48px;
-  width: 48px;
-  background: transparent;
-
-  display: ${props => props.hideOnLowWidth ? 'none' : 'block'};
-  ${_styles.BREAKPOINTS.MEDIUM} {
-    display: block;
-  }
-
-  border-radius: ${props => props.borderRadius ? `${props.borderRadius}px` : '4px'};
-  div {
-    height: 36px;
-    width: 36px;
-    border-radius: ${getBorderRadiusStyle};
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    svg {
-      height: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      width: ${props => props.unsetIconSize ? 'unset' : '24px'};
-      padding: 0;
-    }
-  }
-  &:only-child {
-    margin: 0;
-  }
-  &:disabled {
-    cursor: not-allowed;
-  }
-  &:focus:not(:disabled) {
-    outline: none;
-    div {
-      outline: none;
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      box-shadow: none;
-    }
-  }
-`;
-  const StyledPrimaryIconButton = (0, _styledComponents2.default)(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500};
-
-    svg {
-      fill: ${props => props.iconColor || _styles.COLORS.white};
-      path {
-        fill: ${props => props.iconColor || _styles.COLORS.white};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${_styles.COLORS.primary_700};
-    }
-    div svg path,
-    div svg {
-      fill: ${_styles.COLORS.white};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${_styles.COLORS.primary_800};
-    }
-    div svg path,
-    div svg {
-      fill: ${_styles.COLORS.white};
-    }
-  }
-  &:disabled {
-    div {
-      background-color: ${_styles.COLORS.neutral_200};
-    }
-    svg {
-      path {
-        fill: ${_styles.COLORS.white};
-      }
-      fill: ${_styles.COLORS.white};
-    }
-  }
-  ${props => props.tabbedHere ? tabbedHereStyle('primary', props.tabbedHereBackgroundColor) : ''};
-`;
-  const StyledSecondaryIconButton = (0, _styledComponents2.default)(StyledIconButton)`
-  div {
-    background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.white};
-
-    svg {
-      fill: ${props => props.iconColor || _styles.COLORS.neutral_600};
-      path {
-        fill: ${props => props.iconColor || _styles.COLORS.neutral_600};
-      }
-    }
-  }
-  &:hover:not(:disabled) {
-    div {
-      background-color: ${_styles.COLORS.primary_20};
-    }
-    div svg path,
-    div svg {
-      fill: ${_styles.COLORS.primary_700};
-    }
-  }
-  &:active:not(:disabled) {
-    div {
-      background: ${_styles.COLORS.primary_100};
-    }
-    div svg path,
-    div svg {
-      fill: ${_styles.COLORS.primary_800};
-    }
-  }
-
-  &:disabled {
-    div {
-      background-color: ${props => props.useTransparentBackground ? 'transparent' : _styles.COLORS.white};
-    }
-    svg {
-      path {
-        fill: ${_styles.COLORS.neutral_300};
-      }
-      fill: ${_styles.COLORS.neutral_300};
-    }
-  }
-
-  ${props => props.tabbedHere ? tabbedHereStyle('secondary', props.tabbedHereBackgroundColor) : ''};
-`;
-  ;
-
-  const IconButton = /*#__PURE__*/_react2.default.forwardRef(({
-    id,
-    variant,
-    shape,
-    action,
-    hideOnLowWidth,
-    isInMobileMenu,
-    children,
-    useTransparentBackground,
-    disabled,
-    iconColor,
-    unsetIconSize,
-    tabIndex,
-    flatEdge,
-    borderRadius,
-    onKeyPress,
-    tabbedHereBackgroundColor,
-    type,
-    hidden
-  }, ref) => {
-    const supressFocusRef = _react2.default.useRef(null);
-
-    const [tabbedHere, setTabbedHere] = _react2.default.useState(false);
-
-    const isPressingEnter = e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        e.stopPropagation();
-        return true;
-      }
-
-      return false;
-    };
-
-    _react2.default.useEffect(() => {
-      !!disabled && setTabbedHere(false);
-    }, [disabled]); // Let's render button
-
-
-    switch (variant) {
-      case 'secondary':
-        return /*#__PURE__*/_react2.default.createElement(StyledSecondaryIconButton, {
-          id: id,
-          type: type ?? 'button',
-          "data-testid": id,
-          ref: ref,
-          onClick: event => action(event),
-          onKeyDown: e => isPressingEnter(e) ? action() : null,
-          disabled: disabled,
-          hideOnLowWidth: hideOnLowWidth || false,
-          inMobileMenu: isInMobileMenu,
-          useTransparentBackground: useTransparentBackground,
-          iconColor: iconColor,
-          unsetIconSize: unsetIconSize,
-          tabIndex: tabIndex || 0,
-          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-          onMouseDown: e => {
-            if (!disabled && !tabbedHere) supressFocusRef.current = true;
-          },
-          onFocus: e => {
-            if (!disabled) {
-              if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-            }
-          },
-          onBlur: () => {
-            setTabbedHere(false);
-          },
-          tabbedHere: tabbedHere,
-          onKeyPress: onKeyPress,
-          hidden: hidden,
-          tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
-
-      case 'primary':
-      default:
-        return /*#__PURE__*/_react2.default.createElement(StyledPrimaryIconButton, {
-          id: id,
-          type: type ?? 'button',
-          "data-testid": id,
-          flatEdge: flatEdge,
-          ref: ref,
-          onClick: event => action(event),
-          onKeyDown: e => isPressingEnter(e) ? action() : null,
-          disabled: disabled,
-          hideOnLowWidth: hideOnLowWidth || false,
-          inMobileMenu: isInMobileMenu,
-          useTransparentBackground: useTransparentBackground,
-          iconColor: iconColor,
-          unsetIconSize: unsetIconSize,
-          tabIndex: tabIndex || 0,
-          borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-          onMouseDown: e => {
-            if (!disabled && !tabbedHere) supressFocusRef.current = true;
-          },
-          onFocus: e => {
-            if (!disabled) {
-              if (!supressFocusRef.current) setTabbedHere(true);else supressFocusRef.current = false;
-            }
-          },
-          onBlur: () => {
-            setTabbedHere(false);
-          },
-          tabbedHere: tabbedHere,
-          onKeyPress: onKeyPress,
-          hidden: hidden,
-          tabbedHereBackgroundColor: tabbedHereBackgroundColor
-        }, /*#__PURE__*/_react2.default.createElement("div", null, children));
-    }
-  });
-
-  IconButton.propTypes = {
-    id: _propTypes2.default.string,
-    variant: _propTypes2.default.oneOf(['primary', 'secondary']),
-    shape: _propTypes2.default.oneOf(['square', 'circular']),
-    action: _propTypes2.default.func.isRequired,
-    hideOnLowWidth: _propTypes2.default.bool,
-    isInMobileMenu: _propTypes2.default.bool,
-    disabled: _propTypes2.default.bool,
-    useTransparentBackground: _propTypes2.default.bool,
-    iconColor: _propTypes2.default.string,
-    unsetIconSize: _propTypes2.default.bool,
-    tabIndex: _propTypes2.default.number,
-    borderRadius: _propTypes2.default.number,
-    onKeyPress: _propTypes2.default.func,
-    tabbedHereBackgroundColor: _propTypes2.default.string,
-    children: _propTypes2.default.node,
-    hidden: _propTypes2.default.bool
-  };
-  exports.default = IconButton;
-});
-//# sourceMappingURL=Iconbutton.js.map

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

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