@laerdal/life-react-components 5.1.0 → 6.0.0-dev.1

package/dist/Button/DualFunctionButton.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { ButtonProps } from './Button';
-import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
-export interface ButtonOption {
-    label: string;
-}
-export interface DualButtonProps extends ButtonProps {
-    /**
-    * Required. An object containing customization properties for the dropdown.
-    */
-    dropdownCustomizationProps: DropdownCustomizationProps;
-    /**
-    * Optional. An array of strings representing the values in the dropdown menu.
-    */
-    dropdownMenuValues?: string[];
-    /**
-     * Optional. A function to be called when the values in the dropdown menu change.
-     * It should return void, a boolean, or undefined.
-     */
-    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
-}
-declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;
-export default DualFunctionButton;
+import * as React from 'react';
+import { ButtonProps } from './Button';
+import { DropdownCustomizationProps } from '../Dropdown/DropdownContent';
+export interface ButtonOption {
+    label: string;
+}
+export interface DualButtonProps extends ButtonProps {
+    /**
+    * Required. An object containing customization properties for the dropdown.
+    */
+    dropdownCustomizationProps: DropdownCustomizationProps;
+    /**
+    * Optional. An array of strings representing the values in the dropdown menu.
+    */
+    dropdownMenuValues?: string[];
+    /**
+     * Optional. A function to be called when the values in the dropdown menu change.
+     * It should return void, a boolean, or undefined.
+     */
+    setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;
+}
+declare const DualFunctionButton: React.FunctionComponent<DualButtonProps>;
+export default DualFunctionButton;

package/dist/Button/DualFunctionButton.js

@@ -1,10 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 const _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
   _excluded2 = ["loading", "icon", "onClick"];
-var _templateObject;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import * as React from 'react';
@@ -17,7 +15,24 @@ import DropdownContent from '../Dropdown/DropdownContent';
 import styled from 'styled-components';
 import { useClickOutsideRef, useFocusOutsideRef } from '../common';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const DualButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  ", " {\n    min-width: unset;\n    gap: 0px;\n    padding: ", ";\n  }\n\n  .extraMargin {\n    margin-bottom: 4px;\n  }\n"])), ButtonContentContainer, props => props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px');
+const DualButtonsContainer = styled.div`
+  display: flex;
+  align-items: center;
+
+  button:first-child {
+    margin-right: 2px;
+  }
+
+  ${ButtonContentContainer} {
+    min-width: unset;
+    gap: 0px;
+    padding: ${props => props.$size == Size.Large ? '4px 18px' : props.$size == Size.Medium ? '4px 14px' : '4px 10px'};
+  }
+
+  .extraMargin {
+    margin-bottom: 4px;
+  }
+`;
 const DualFunctionButton = _ref => {
   let {
       children = 'Primary Button',
@@ -77,7 +92,7 @@ const DualFunctionButton = _ref => {
         customizationProps: dropdownCustomizationProps,
         filter: "",
         ref: dropdownContentRef,
-        selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues !== null && dropdownMenuValues !== void 0 ? dropdownMenuValues : selectedValues,
+        selectedValues: dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues,
         setSelectedValues: setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues,
         isButton: true,
         setIsOpen: setIsOpen,

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ButtonContentContainer","SystemIcons","DropdownContainer","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","jsx","_jsx","jsxs","_jsxs","DualButtonsContainer","div","_templateObject","_taggedTemplateLiteral","props","$size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties","_excluded","loading","icon","onClick","renderProps","_excluded2","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","ref","$isButton","$readOnly","$disabled","margin","_objectSpread","flatEdge","containerRef","customizationProps","filter","itemsType","isButton","Small","onActiveDescendantChanged","e","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","ArrowDropUp","ArrowDropDown","propTypes","_pt","arrayOf","string","func"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = 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  ${ButtonContentContainer} {\r\n    min-width: unset;\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  .extraMargin {\r\n    margin-bottom: 4px;\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  /**\r\n  * Required. An object containing customization properties for the dropdown.\r\n  */\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  /**\r\n  * Optional. An array of strings representing the values in the dropdown menu.\r\n  */\r\n  dropdownMenuValues?: string[];\r\n  /**\r\n   * Optional. A function to be called when the values in the dropdown menu change.\r\n   * It should return void, a boolean, or undefined.\r\n   */\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: 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 [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n  const dropdownButtonRef = useClickOutsideRef(\r\n    () => setIsOpen(false),\r\n    [dropdownContainerRef],\r\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n  );\r\n  \r\n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n  React.useEffect(() => {\r\n    !isOpen && setKeyboardNavigated(false);\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <DualButtonsContainer $size={size}>\r\n      <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n          {children}\r\n        </Button>\r\n        <DropdownContent\r\n          containerRef={dropdownContainerRef}\r\n          customizationProps={dropdownCustomizationProps}\r\n          filter=\"\"\r\n          ref={dropdownContentRef}\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          width={size == Size.Small ? '280px' : '360px'}\r\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n          setFocused={setFocused}\r\n          size={size}\r\n          outline={keyboardNavigated}\r\n          isOpen={isOpen}\r\n          id={dropdownContentId}\r\n          messageOnNoResults=\"\"\r\n          alignLeft={true}\r\n          ariaRolesType=\"menu\"\r\n        />\r\n      </DropdownContainer>\r\n      <Button\r\n        variant={variant}\r\n        {...renderProps}\r\n        onKeyPress={(e: any) => {\r\n          if (isOpen) return;\r\n\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            setFocused(0);\r\n            setKeyboardNavigated(true);\r\n          }\r\n        }}\r\n        className=\"extraMargin\"\r\n        testId={'options_toggleBtn'}\r\n        ref={dropdownButtonRef}\r\n        aria-activedescendant={activeDescendant}\r\n        role=\"button\"\r\n        aria-controls={dropdownContentId}\r\n        disabled={disabled}\r\n        type={type}\r\n        size={size}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n        flatEdge=\"left\"\r\n      />\r\n    </DualButtonsContainer>\r\n  );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ButtonContentContainer","SystemIcons","DropdownContainer","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","jsx","_jsx","jsxs","_jsxs","DualButtonsContainer","div","props","$size","Large","Medium","DualFunctionButton","_ref","children","variant","type","size","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","_objectWithoutProperties","_excluded","loading","icon","onClick","renderProps","_excluded2","isOpen","setIsOpen","useState","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","ref","$isButton","$readOnly","$disabled","margin","_objectSpread","flatEdge","containerRef","customizationProps","filter","itemsType","isButton","Small","onActiveDescendantChanged","e","outline","messageOnNoResults","alignLeft","ariaRolesType","onKeyPress","key","className","role","stopPropagation","ArrowDropUp","ArrowDropDown","propTypes","_pt","arrayOf","string","func"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport Button, { ButtonContentContainer, ButtonProps } from './Button';\r\nimport { SystemIcons } from '../icons';\r\nimport { DropdownContainer } from '../Dropdown/CommonStyling';\r\nimport { nanoid } from 'nanoid';\r\nimport { Size } from '../types';\r\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\r\nimport styled from 'styled-components';\r\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\r\n\r\nconst DualButtonsContainer = 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  ${ButtonContentContainer} {\r\n    min-width: unset;\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  .extraMargin {\r\n    margin-bottom: 4px;\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  /**\r\n  * Required. An object containing customization properties for the dropdown.\r\n  */\r\n  dropdownCustomizationProps: DropdownCustomizationProps;\r\n  /**\r\n  * Optional. An array of strings representing the values in the dropdown menu.\r\n  */\r\n  dropdownMenuValues?: string[];\r\n  /**\r\n   * Optional. A function to be called when the values in the dropdown menu change.\r\n   * It should return void, a boolean, or undefined.\r\n   */\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: 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 [activeDescendant, setActiveDescendant] = React.useState<string>();\r\n  const [focused, setFocused] = React.useState<number | null>(null);\r\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\r\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\r\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\r\n\r\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\r\n  const dropdownButtonRef = useClickOutsideRef(\r\n    () => setIsOpen(false),\r\n    [dropdownContainerRef],\r\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\r\n  );\r\n  \r\n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\r\n\r\n  React.useEffect(() => {\r\n    !isOpen && setKeyboardNavigated(false);\r\n  }, [isOpen]);\r\n\r\n  return (\r\n    <DualButtonsContainer $size={size}>\r\n      <DropdownContainer ref={dropdownContainerRef} $isButton={true} $readOnly={false} $disabled={false} margin=\"\">\r\n        <Button {...renderProps} testId={testId} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\r\n          {children}\r\n        </Button>\r\n        <DropdownContent\r\n          containerRef={dropdownContainerRef}\r\n          customizationProps={dropdownCustomizationProps}\r\n          filter=\"\"\r\n          ref={dropdownContentRef}\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          width={size == Size.Small ? '280px' : '360px'}\r\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\r\n          setFocused={setFocused}\r\n          size={size}\r\n          outline={keyboardNavigated}\r\n          isOpen={isOpen}\r\n          id={dropdownContentId}\r\n          messageOnNoResults=\"\"\r\n          alignLeft={true}\r\n          ariaRolesType=\"menu\"\r\n        />\r\n      </DropdownContainer>\r\n      <Button\r\n        variant={variant}\r\n        {...renderProps}\r\n        onKeyPress={(e: any) => {\r\n          if (isOpen) return;\r\n\r\n          if (e.key === 'Enter' || e.key === ' ') {\r\n            setFocused(0);\r\n            setKeyboardNavigated(true);\r\n          }\r\n        }}\r\n        className=\"extraMargin\"\r\n        testId={'options_toggleBtn'}\r\n        ref={dropdownButtonRef}\r\n        aria-activedescendant={activeDescendant}\r\n        role=\"button\"\r\n        aria-controls={dropdownContentId}\r\n        disabled={disabled}\r\n        type={type}\r\n        size={size}\r\n        onClick={(e) => {\r\n          e.stopPropagation();\r\n          setIsOpen(!isOpen);\r\n        }}\r\n        icon={ isOpen ? <SystemIcons.ArrowDropUp aria-hidden=\"true\" size=\"16px\" /> \r\n        : <SystemIcons.ArrowDropDown aria-hidden=\"true\" size=\"16px\" /> }\r\n        flatEdge=\"left\"\r\n      />\r\n    </DualButtonsContainer>\r\n  );\r\n};\r\n\r\nexport default DualFunctionButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.cjs

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.IconButtonStyledSecondary = exports.IconButtonStyledPrimary = exports.IconButtonStyled = exports.IconButtonContentStyles = exports.IconButton = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -16,26 +15,144 @@ var _common = require("../common");
 var _TooltipWrapper = _interopRequireDefault(require("../Tooltips/TooltipWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["id", "variant", "shape", "action", "children", "useTransparentBackground", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "type", "hidden", "invertFocus", "dataTestId", "focusOnClick", "tooltip"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-const getBorderRadius = borderRadius => borderRadius ? "".concat(borderRadius, "px") : '4px';
+const getBorderRadius = borderRadius => borderRadius ? `${borderRadius}px` : '4px';
 const getBorderRadiusStyle = (flatEdge, borderRadius) => {
   const radius = getBorderRadius(borderRadius);
   switch (flatEdge) {
     case 'left':
-      return "0px ".concat(radius, " ").concat(radius, " 0px");
+      return `0px ${radius} ${radius} 0px`;
     case 'right':
-      return "".concat(radius, " 0px 0px ").concat(radius);
+      return `${radius} 0px 0px ${radius}`;
     case 'none':
     default:
-      return "".concat(radius);
+      return `${radius}`;
   }
 };
-const IconButtonContentStyles = exports.IconButtonContentStyles = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-const IconButtonStyled = exports.IconButtonStyled = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-width: 0;\n  cursor: pointer;\n  height: 48px;\n  width: 48px;\n  background: transparent;\n  position: relative;\n  display: block;\n\n  border-radius: ", ";\n  ", " {\n    height: 36px;\n    width: 36px;\n    border-radius: ", ";\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    svg {\n      height: ", ";\n      width: ", ";\n      padding: 0;\n    }\n  }\n  &:only-child {\n    margin: 0;\n  }\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus {\n    ", "\n  }\n"])), props => props.$borderRadius ? "".concat(props.$borderRadius, "px") : '4px', IconButtonContentStyles, props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius), props => props.$unsetIconSize ? 'unset' : '24px', props => props.$unsetIconSize ? 'unset' : '24px', props => props.$invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles);
-const IconButtonStyledPrimary = exports.IconButtonStyledPrimary = (0, _styledComponents.default)(IconButtonStyled)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n  &:hover:not(:disabled),\n  &.hover-state {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme), props => props.$iconColor || _styles.COLORS.getColor('white', props.theme), props => props.$iconColor || _styles.COLORS.getColor('white', props.theme), IconButtonContentStyles, props => _styles.COLORS.getColor('primary_700', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => _styles.COLORS.getColor('white', props.theme), IconButtonContentStyles, props => _styles.COLORS.getColor('primary_800', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => _styles.COLORS.getColor('white', props.theme), IconButtonContentStyles, props => _styles.COLORS.getColor('neutral_200', props.theme), props => _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('white', props.theme));
-const IconButtonStyledSecondary = exports.IconButtonStyledSecondary = (0, _styledComponents.default)(IconButtonStyled)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", " {\n    background-color: ", ";\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n\n  &:hover:not(:disabled) {\n    ", " {\n      background-color: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n  &:active:not(:disabled),\n  &.active-state {\n    ", " {\n      background: ", ";\n    }\n    ", " svg path,\n    ", " svg {\n      fill: ", ";\n    }\n  }\n\n  &:disabled {\n    ", " {\n      background-color: ", ";\n    }\n    svg {\n      path {\n        fill: ", ";\n      }\n      fill: ", ";\n    }\n  }\n"])), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme), props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme), props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme), IconButtonContentStyles, props => _styles.COLORS.getColor('primary_20', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => _styles.COLORS.getColor('primary_700', props.theme), IconButtonContentStyles, props => _styles.COLORS.getColor('primary_100', props.theme), IconButtonContentStyles, IconButtonContentStyles, props => _styles.COLORS.getColor('primary_800', props.theme), IconButtonContentStyles, props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme), props => _styles.COLORS.getColor('neutral_300', props.theme));
+const IconButtonContentStyles = exports.IconButtonContentStyles = _styledComponents.default.div``;
+const IconButtonStyled = exports.IconButtonStyled = _styledComponents.default.button`
+  border-width: 0;
+  cursor: pointer;
+  height: 48px;
+  width: 48px;
+  background: transparent;
+  position: relative;
+  display: block;
+
+  border-radius: ${props => props.$borderRadius ? `${props.$borderRadius}px` : '4px'};
+  ${IconButtonContentStyles} {
+    height: 36px;
+    width: 36px;
+    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};
+    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 {
+    ${props => props.$invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles}
+  }
+`;
+const IconButtonStyledPrimary = exports.IconButtonStyledPrimary = (0, _styledComponents.default)(IconButtonStyled)`
+  ${IconButtonContentStyles} {
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('primary_500', props.theme)};
+
+    svg {
+      fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+      path {
+        fill: ${props => props.$iconColor || _styles.COLORS.getColor('white', props.theme)};
+      }
+    }
+  }
+  &:hover:not(:disabled),
+  &.hover-state {
+    ${IconButtonContentStyles} {
+      background-color: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+  }
+  &:active:not(:disabled),
+  &.active-state {
+    ${IconButtonContentStyles} {
+      background: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+  }
+  &:disabled {
+    ${IconButtonContentStyles} {
+      background-color: ${props => _styles.COLORS.getColor('neutral_200', props.theme)};
+    }
+    svg {
+      path {
+        fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+      }
+      fill: ${props => _styles.COLORS.getColor('white', props.theme)};
+    }
+  }
+`;
+const IconButtonStyledSecondary = exports.IconButtonStyledSecondary = (0, _styledComponents.default)(IconButtonStyled)`
+  ${IconButtonContentStyles} {
+    background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+
+    svg {
+      fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+      path {
+        fill: ${props => props.$iconColor || _styles.COLORS.getColor('neutral_600', props.theme)};
+      }
+    }
+  }
+
+
+  &:hover:not(:disabled) {
+    ${IconButtonContentStyles} {
+      background-color: ${props => _styles.COLORS.getColor('primary_20', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => _styles.COLORS.getColor('primary_700', props.theme)};
+    }
+  }
+  &:active:not(:disabled),
+  &.active-state {
+    ${IconButtonContentStyles} {
+      background: ${props => _styles.COLORS.getColor('primary_100', props.theme)};
+    }
+    ${IconButtonContentStyles} svg path,
+    ${IconButtonContentStyles} svg {
+      fill: ${props => _styles.COLORS.getColor('primary_800', props.theme)};
+    }
+  }
+
+  &:disabled {
+    ${IconButtonContentStyles} {
+      background-color: ${props => props.$useTransparentBackground ? 'transparent' : _styles.COLORS.getColor('white', props.theme)};
+    }
+    svg {
+      path {
+        fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+      }
+      fill: ${props => _styles.COLORS.getColor('neutral_300', props.theme)};
+    }
+  }
+`;
 const IconButton = exports.IconButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
       id,
@@ -69,7 +186,7 @@ const IconButton = exports.IconButton = /*#__PURE__*/_react.default.forwardRef((
     }
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonVariant, _objectSpread(_objectSpread({
       id: id,
-      type: type !== null && type !== void 0 ? type : 'button',
+      type: type ?? 'button',
       "data-testid": dataTestId,
       $flatEdge: flatEdge,
       ref: ref,

package/dist/Button/Iconbutton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","borderRadius","concat","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","exports","styled","div","_taggedTemplateLiteral2","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","$useTransparentBackground","COLORS","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\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  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\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\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\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\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\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      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Iconbutton.cjs","names":["_react","_interopRequireDefault","require","_styledComponents","_styles","_common","_TooltipWrapper","_jsxRuntime","_excluded","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","default","getOwnPropertyDescriptors","defineProperties","defineProperty","getBorderRadius","borderRadius","getBorderRadiusStyle","flatEdge","radius","IconButtonContentStyles","exports","styled","div","IconButtonStyled","button","props","$borderRadius","$flatEdge","$unsetIconSize","$invertFocus","invertedFocusStyles","focusStyles","IconButtonStyledPrimary","$useTransparentBackground","COLORS","getColor","theme","$iconColor","IconButtonStyledSecondary","IconButton","React","forwardRef","_ref","ref","id","variant","shape","action","children","useTransparentBackground","disabled","iconColor","unsetIconSize","tabIndex","type","hidden","invertFocus","dataTestId","focusOnClick","tooltip","rest","_objectWithoutProperties2","render","ButtonVariant","jsx","onClick","event","stopPropagation","onMouseDown","defaultOnMouseDownHandler","undefined","propTypes","_propTypes","oneOf","func","isRequired","bool","string","number","node","_default"],"sources":["../../src/Button/Iconbutton.tsx"],"sourcesContent":["import React from 'react';\r\nimport styled from 'styled-components';\r\n\r\nimport { BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles } from '../styles';\r\nimport { defaultOnMouseDownHandler } from '../common';\r\nimport { Testable } from '../types';\r\nimport {TooltipProps} from \"../Tooltips/TooltipTypes\";\r\nimport TooltipWrapper from \"../Tooltips/TooltipWrapper\";\r\n\r\nexport interface HeaderItemProps {\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  invertFocus?: boolean;\r\n  shouldNotInteract?: boolean;\r\n}\r\n\r\nconst getBorderRadius = (borderRadius?: number) => (borderRadius ? `${borderRadius}px` : '4px');\r\n\r\nconst getBorderRadiusStyle = ( flatEdge?: string, borderRadius?: number ) => {\r\n  const radius = getBorderRadius(borderRadius);\r\n  switch (flatEdge) {\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\nexport const IconButtonContentStyles = styled.div``;\r\n\r\nexport const IconButtonStyled = styled.button<{$borderRadius?: number; $flatEdge?: string; $unsetIconSize?: boolean;\r\n              $invertFocus?: boolean; $useTransparentBackground?: boolean; $iconColor?: string;}>`\r\n  border-width: 0;\r\n  cursor: pointer;\r\n  height: 48px;\r\n  width: 48px;\r\n  background: transparent;\r\n  position: relative;\r\n  display: block;\r\n\r\n  border-radius: ${(props) => (props.$borderRadius ? `${props.$borderRadius}px` : '4px')};\r\n  ${IconButtonContentStyles} {\r\n    height: 36px;\r\n    width: 36px;\r\n    border-radius: ${props => getBorderRadiusStyle(props.$flatEdge, props.$borderRadius)};\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\r\n  &:focus {\r\n    ${(props) => (props.$invertFocus ? invertedFocusStyles : focusStyles)}\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledPrimary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('primary_500', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('white', props.theme)};\r\n      }\r\n    }\r\n  }\r\n  &:hover:not(:disabled),\r\n  &.hover-state {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('neutral_200', props.theme)};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('white', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('white', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const IconButtonStyledSecondary = styled(IconButtonStyled)`\r\n  ${IconButtonContentStyles} {\r\n    background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n\r\n    svg {\r\n      fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      path {\r\n        fill: ${(props) => props.$iconColor || COLORS.getColor('neutral_600', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n\r\n  &:hover:not(:disabled) {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_700', props.theme)};\r\n    }\r\n  }\r\n  &:active:not(:disabled),\r\n  &.active-state {\r\n    ${IconButtonContentStyles} {\r\n      background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n    }\r\n    ${IconButtonContentStyles} svg path,\r\n    ${IconButtonContentStyles} svg {\r\n      fill: ${props => COLORS.getColor('primary_800', props.theme)};\r\n    }\r\n  }\r\n\r\n  &:disabled {\r\n    ${IconButtonContentStyles} {\r\n      background-color: ${(props) => (props.$useTransparentBackground ? 'transparent' : COLORS.getColor('white', props.theme))};\r\n    }\r\n    svg {\r\n      path {\r\n        fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n      }\r\n      fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n  }\r\n`;\r\n\r\nexport interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,  'onClick' | 'onMouseDown'> {\r\n  /** Variant of the button. Defaults to 'primary' */\r\n  variant?: 'primary' | 'secondary';\r\n  /** Shape of the button. Defaults to 'square' */\r\n  shape?: 'square' | 'circular';\r\n  /** Action that will get executed when button is clicked. */\r\n  action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n  /** Allows removing rounded corners on one of the edges of the button. */\r\n  flatEdge?: 'right' | 'left' | 'none' | undefined;\r\n  /** If set background filling color of the button will be transparent. */\r\n  useTransparentBackground?: boolean;\r\n  /** Custom fill color for SVG icon. */\r\n  iconColor?: string;\r\n  /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */\r\n  unsetIconSize?: boolean;\r\n  /** Sets border radius of the button.  */\r\n  borderRadius?: number;\r\n  /** Content (icon) to show in the button. */\r\n  children?: React.ReactNode;\r\n  /** Invert color scheme of focus framing. */\r\n  invertFocus?: boolean;\r\n  /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */\r\n  focusOnClick?: boolean;\r\n  /** Details of the tooltip to show. */\r\n  tooltip?: Omit<TooltipProps, 'tabIndex'>;\r\n}\r\n\r\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\r\n  (\r\n    {\r\n      id,\r\n      variant,\r\n      shape,\r\n      action,\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      type,\r\n      hidden,\r\n      invertFocus,\r\n      dataTestId,\r\n      focusOnClick,\r\n      tooltip,\r\n      ...rest\r\n    }: IconButtonProps,\r\n    ref,\r\n  ) => {\r\n\r\n    const render = () => {\r\n      // Let's render button\r\n\r\n      let ButtonVariant = IconButtonStyledPrimary;\r\n      switch (variant) {\r\n        case 'secondary':\r\n          ButtonVariant = IconButtonStyledSecondary;\r\n          break;\r\n      }\r\n\r\n      return <ButtonVariant\r\n          id={id}\r\n          type={type ?? 'button'}\r\n          data-testid={dataTestId}\r\n          $flatEdge={flatEdge}\r\n          ref={ref}\r\n          onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\r\n            event.stopPropagation();\r\n            action(event);\r\n          }}\r\n          disabled={disabled}\r\n          $useTransparentBackground={useTransparentBackground}\r\n          $iconColor={iconColor}\r\n          $unsetIconSize={unsetIconSize}\r\n          tabIndex={tabIndex}\r\n          $borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\r\n          onMouseDown={!focusOnClick ? defaultOnMouseDownHandler : undefined}\r\n          hidden={hidden}\r\n          $invertFocus={invertFocus}\r\n          {...rest}>\r\n          <IconButtonContentStyles>{children}</IconButtonContentStyles>\r\n        </ButtonVariant>;\r\n      }\r\n\r\n    return !tooltip\r\n      ? render()\r\n      : (\r\n        <TooltipWrapper {...tooltip}>\r\n          {render()}\r\n        </TooltipWrapper>\r\n      );\r\n  },\r\n);\r\n\r\nexport default IconButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Button/Iconbutton.d.ts

@@ -1,71 +1,67 @@
-import React from 'react';
-import { Testable } from '../types';
-import { TooltipProps } from "../Tooltips/TooltipTypes";
-export interface HeaderItemProps {
-    inMobileMenu?: boolean;
-    useTransparentBackground?: boolean;
-    iconColor?: string;
-    unsetIconSize?: boolean;
-    borderRadius?: number;
-    shape?: string;
-    flatEdge?: string;
-    invertFocus?: boolean;
-    shouldNotInteract?: boolean;
-}
-export declare const IconButtonContentStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
-    $borderRadius?: number | undefined;
-    $flatEdge?: string | undefined;
-    $unsetIconSize?: boolean | undefined;
-    $invertFocus?: boolean | undefined;
-    $useTransparentBackground?: boolean | undefined;
-    $iconColor?: string | undefined;
-}>> & string;
-export declare const IconButtonStyledPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
-    $borderRadius?: number | undefined;
-    $flatEdge?: string | undefined;
-    $unsetIconSize?: boolean | undefined;
-    $invertFocus?: boolean | undefined;
-    $useTransparentBackground?: boolean | undefined;
-    $iconColor?: string | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
-export declare const IconButtonStyledSecondary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
-    $borderRadius?: number | undefined;
-    $flatEdge?: string | undefined;
-    $unsetIconSize?: boolean | undefined;
-    $invertFocus?: boolean | undefined;
-    $useTransparentBackground?: boolean | undefined;
-    $iconColor?: string | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
-}, never>> & string;
-export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
-    /** Variant of the button. Defaults to 'primary' */
-    variant?: 'primary' | 'secondary';
-    /** Shape of the button. Defaults to 'square' */
-    shape?: 'square' | 'circular';
-    /** Action that will get executed when button is clicked. */
-    action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Allows removing rounded corners on one of the edges of the button. */
-    flatEdge?: 'right' | 'left' | 'none' | undefined;
-    /** If set background filling color of the button will be transparent. */
-    useTransparentBackground?: boolean;
-    /** Custom fill color for SVG icon. */
-    iconColor?: string;
-    /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */
-    unsetIconSize?: boolean;
-    /** Sets border radius of the button.  */
-    borderRadius?: number;
-    /** Content (icon) to show in the button. */
-    children?: React.ReactNode;
-    /** Invert color scheme of focus framing. */
-    invertFocus?: boolean;
-    /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */
-    focusOnClick?: boolean;
-    /** Details of the tooltip to show. */
-    tooltip?: Omit<TooltipProps, 'tabIndex'>;
-}
-export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export default IconButton;
+import React from 'react';
+import { Testable } from '../types';
+import { TooltipProps } from "../Tooltips/TooltipTypes";
+export interface HeaderItemProps {
+    inMobileMenu?: boolean;
+    useTransparentBackground?: boolean;
+    iconColor?: string;
+    unsetIconSize?: boolean;
+    borderRadius?: number;
+    shape?: string;
+    flatEdge?: string;
+    invertFocus?: boolean;
+    shouldNotInteract?: boolean;
+}
+export declare const IconButtonContentStyles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconButtonStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $borderRadius?: number;
+    $flatEdge?: string;
+    $unsetIconSize?: boolean;
+    $invertFocus?: boolean;
+    $useTransparentBackground?: boolean;
+    $iconColor?: string;
+}>> & string;
+export declare const IconButtonStyledPrimary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
+    $borderRadius?: number;
+    $flatEdge?: string;
+    $unsetIconSize?: boolean;
+    $invertFocus?: boolean;
+    $useTransparentBackground?: boolean;
+    $iconColor?: string;
+}, never>> & string;
+export declare const IconButtonStyledSecondary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "$borderRadius" | "$flatEdge" | "$unsetIconSize" | "$invertFocus" | "$useTransparentBackground" | "$iconColor"> & {
+    $borderRadius?: number;
+    $flatEdge?: string;
+    $unsetIconSize?: boolean;
+    $invertFocus?: boolean;
+    $useTransparentBackground?: boolean;
+    $iconColor?: string;
+}, never>> & string;
+export interface IconButtonProps extends Testable, Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onMouseDown'> {
+    /** Variant of the button. Defaults to 'primary' */
+    variant?: 'primary' | 'secondary';
+    /** Shape of the button. Defaults to 'square' */
+    shape?: 'square' | 'circular';
+    /** Action that will get executed when button is clicked. */
+    action: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Allows removing rounded corners on one of the edges of the button. */
+    flatEdge?: 'right' | 'left' | 'none' | undefined;
+    /** If set background filling color of the button will be transparent. */
+    useTransparentBackground?: boolean;
+    /** Custom fill color for SVG icon. */
+    iconColor?: string;
+    /** If set then the width and height of SVG icon will be set to 'unset', otherwise will be set to '24px' */
+    unsetIconSize?: boolean;
+    /** Sets border radius of the button.  */
+    borderRadius?: number;
+    /** Content (icon) to show in the button. */
+    children?: React.ReactNode;
+    /** Invert color scheme of focus framing. */
+    invertFocus?: boolean;
+    /** If this flag is set, then blurs current focus, as a result will focus current IconButton when user clicks it. */
+    focusOnClick?: boolean;
+    /** Details of the tooltip to show. */
+    tooltip?: Omit<TooltipProps, 'tabIndex'>;
+}
+export declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export default IconButton;