@laerdal/life-react-components 2.0.1-dev.9.full → 2.1.0-dev.7

package/dist/Button/DualFunctionButton.cjs

@@ -1,112 +1,80 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _Button = _interopRequireDefault(require("./Button"));
-
 var _SystemIcons = require("../icons/systemicons/SystemIcons");
-
 var _CommonStyling = require("../Dropdown/CommonStyling");
-
 var _nanoid = require("nanoid");
-
 var _types = require("../types");
-
 var _DropdownContent = _interopRequireDefault(require("../Dropdown/DropdownContent"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
-    _excluded2 = ["loading", "icon", "onClick"];
-
+  _excluded2 = ["loading", "icon", "onClick"];
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var ButtonsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
   return props.size == _types.Size.Large ? '4px 18px' : props.size == _types.Size.Medium ? '4px 14px' : '4px 10px';
 });
-
 var DualFunctionButton = function DualFunctionButton(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      testId = _ref.testId,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      dropdownMenuValues = _ref.dropdownMenuValues,
-      setDropdownMenuValues = _ref.setDropdownMenuValues,
-      dropdownCustomizationProps = _ref.dropdownCustomizationProps,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? _types.Size.Medium : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    testId = _ref.testId,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    dropdownMenuValues = _ref.dropdownMenuValues,
+    setDropdownMenuValues = _ref.setDropdownMenuValues,
+    dropdownCustomizationProps = _ref.dropdownCustomizationProps,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's filter out properties that we don't need to render.
   var loading = props.loading,
-      icon = props.icon,
-      onClick = props.onClick,
-      renderProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
-
+    icon = props.icon,
+    onClick = props.onClick,
+    renderProps = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-      activeDescendant = _React$useState4[0],
-      setActiveDescendant = _React$useState4[1];
-
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
   var _React$useState5 = React.useState(null),
-      _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
-      focused = _React$useState6[0],
-      setFocused = _React$useState6[1];
-
+    _React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
+    focused = _React$useState6[0],
+    setFocused = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
-      keyboardNavigated = _React$useState8[0],
-      setKeyboardNavigated = _React$useState8[1];
-
+    _React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
+    keyboardNavigated = _React$useState8[0],
+    setKeyboardNavigated = _React$useState8[1];
   var dropdownContainerRef = React.useRef(null);
-
   var _React$useState9 = React.useState([]),
-      _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
-
+    _React$useState10 = (0, _slicedToArray2.default)(_React$useState9, 2),
+    selectedValues = _React$useState10[0],
+    setSelectedValues = _React$useState10[1];
   var dropdownContentRef = React.useRef(null);
   var dropdownButtonRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
@@ -163,7 +131,6 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }, renderProps), {}, {
       onKeyPress: function onKeyPress(e) {
         if (isOpen) return;
-
         if (e.key === 'Enter' || e.key === ' ') {
           setFocused(0);
           setKeyboardNavigated(true);
@@ -191,7 +158,6 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }))]
   });
 };
-
 DualFunctionButton.propTypes = {
   dropdownMenuValues: _propTypes.default.arrayOf(_propTypes.default.string),
   setDropdownMenuValues: _propTypes.default.func

package/dist/Button/DualFunctionButton.cjs.map

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

package/dist/Button/DualFunctionButton.js

@@ -4,14 +4,10 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 var _excluded = ["children", "variant", "type", "size", "width", "testId", "disabled", "id", "dropdownMenuValues", "setDropdownMenuValues", "dropdownCustomizationProps"],
-    _excluded2 = ["loading", "icon", "onClick"];
-
+  _excluded2 = ["loading", "icon", "onClick"];
 var _templateObject;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import * as React from 'react';
 import Button from './Button';
 import { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';
@@ -26,59 +22,50 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var ButtonsContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ", ";\n  }\n"])), function (props) {
   return props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px';
 });
-
 var DualFunctionButton = function DualFunctionButton(_ref) {
   var _ref$children = _ref.children,
-      children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? Size.Medium : _ref$size,
-      _ref$width = _ref.width,
-      width = _ref$width === void 0 ? 'auto' : _ref$width,
-      testId = _ref.testId,
-      disabled = _ref.disabled,
-      id = _ref.id,
-      dropdownMenuValues = _ref.dropdownMenuValues,
-      setDropdownMenuValues = _ref.setDropdownMenuValues,
-      dropdownCustomizationProps = _ref.dropdownCustomizationProps,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    children = _ref$children === void 0 ? 'Primary Button' : _ref$children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'primary' : _ref$variant,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? Size.Medium : _ref$size,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 'auto' : _ref$width,
+    testId = _ref.testId,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    dropdownMenuValues = _ref.dropdownMenuValues,
+    setDropdownMenuValues = _ref.setDropdownMenuValues,
+    dropdownCustomizationProps = _ref.dropdownCustomizationProps,
+    props = _objectWithoutProperties(_ref, _excluded);
   // Let's filter out properties that we don't need to render.
   var loading = props.loading,
-      icon = props.icon,
-      onClick = props.onClick,
-      renderProps = _objectWithoutProperties(props, _excluded2);
-
+    icon = props.icon,
+    onClick = props.onClick,
+    renderProps = _objectWithoutProperties(props, _excluded2);
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isOpen = _React$useState2[0],
-      setIsOpen = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isOpen = _React$useState2[0],
+    setIsOpen = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      activeDescendant = _React$useState4[0],
-      setActiveDescendant = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeDescendant = _React$useState4[0],
+    setActiveDescendant = _React$useState4[1];
   var _React$useState5 = React.useState(null),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focused = _React$useState6[0],
-      setFocused = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focused = _React$useState6[0],
+    setFocused = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      keyboardNavigated = _React$useState8[0],
-      setKeyboardNavigated = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    keyboardNavigated = _React$useState8[0],
+    setKeyboardNavigated = _React$useState8[1];
   var dropdownContainerRef = React.useRef(null);
-
   var _React$useState9 = React.useState([]),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      selectedValues = _React$useState10[0],
-      setSelectedValues = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    selectedValues = _React$useState10[0],
+    setSelectedValues = _React$useState10[1];
   var dropdownContentRef = React.useRef(null);
   var dropdownButtonRef = useClickOutsideRef(function () {
     return setIsOpen(false);
@@ -135,7 +122,6 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }, renderProps), {}, {
       onKeyPress: function onKeyPress(e) {
         if (isOpen) return;
-
         if (e.key === 'Enter' || e.key === ' ') {
           setFocused(0);
           setKeyboardNavigated(true);
@@ -163,7 +149,6 @@ var DualFunctionButton = function DualFunctionButton(_ref) {
     }))]
   });
 };
-
 DualFunctionButton.propTypes = {
   dropdownMenuValues: _pt.arrayOf(_pt.string),
   setDropdownMenuValues: _pt.func

package/dist/Button/DualFunctionButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":";;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAoC,UAApC;AACA,SAASC,aAAT,EAAwBC,WAAxB,QAA2C,kCAA3C;AACA,SAASC,QAAT,QAAyB,2BAAzB;AACA,SAASC,MAAT,QAAuB,QAAvB;AACA,SAASC,IAAT,QAAqB,UAArB;AACA,OAAOC,eAAP,MAA4D,6BAA5D;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,kBAA7B,QAAuD,WAAvD;;;AAEA,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV,2OAUP,UAACC,KAAD;EAAA,OAAYA,KAAK,CAACC,IAAN,IAAcR,IAAI,CAACS,KAAnB,GAA2B,UAA3B,GAAwCF,KAAK,CAACC,IAAN,IAAcR,IAAI,CAACU,MAAnB,GAA4B,UAA5B,GAAyC,UAA7F;AAAA,CAVO,CAAtB;;AAwBA,IAAMC,kBAA4D,GAAG,SAA/DA,kBAA+D,OAa/D;EAAA,yBAZJC,QAYI;EAAA,IAZJA,QAYI,8BAZO,gBAYP;EAAA,wBAXJC,OAWI;EAAA,IAXJA,OAWI,6BAXM,SAWN;EAAA,qBAVJC,IAUI;EAAA,IAVJA,IAUI,0BAVG,QAUH;EAAA,qBATJN,IASI;EAAA,IATJA,IASI,0BATGR,IAAI,CAACU,MASR;EAAA,sBARJK,KAQI;EAAA,IARJA,KAQI,2BARI,MAQJ;EAAA,IAPJC,MAOI,QAPJA,MAOI;EAAA,IANJC,QAMI,QANJA,QAMI;EAAA,IALJC,EAKI,QALJA,EAKI;EAAA,IAJJC,kBAII,QAJJA,kBAII;EAAA,IAHJC,qBAGI,QAHJA,qBAGI;EAAA,IAFJC,0BAEI,QAFJA,0BAEI;EAAA,IADDd,KACC;;EACJ;EACA,IAAQe,OAAR,GAAmDf,KAAnD,CAAQe,OAAR;EAAA,IAAiBC,IAAjB,GAAmDhB,KAAnD,CAAiBgB,IAAjB;EAAA,IAAuBC,OAAvB,GAAmDjB,KAAnD,CAAuBiB,OAAvB;EAAA,IAAmCC,WAAnC,4BAAmDlB,KAAnD;;EACA,sBAA4Bb,KAAK,CAACgC,QAAN,CAAwB,KAAxB,CAA5B;EAAA;EAAA,IAAOC,MAAP;EAAA,IAAeC,SAAf;;EACA,uBAAgDlC,KAAK,CAACgC,QAAN,EAAhD;EAAA;EAAA,IAAOG,gBAAP;EAAA,IAAyBC,mBAAzB;;EACA,uBAA8BpC,KAAK,CAACgC,QAAN,CAA8B,IAA9B,CAA9B;EAAA;EAAA,IAAOK,OAAP;EAAA,IAAgBC,UAAhB;;EACA,uBAAkDtC,KAAK,CAACgC,QAAN,CAAwB,KAAxB,CAAlD;EAAA;EAAA,IAAOO,iBAAP;EAAA,IAA0BC,oBAA1B;;EACA,IAAMC,oBAAoB,GAAGzC,KAAK,CAAC0C,MAAN,CAA6B,IAA7B,CAA7B;;EACA,uBAA4C1C,KAAK,CAACgC,QAAN,CAAyB,EAAzB,CAA5C;EAAA;EAAA,IAAOW,cAAP;EAAA,IAAuBC,iBAAvB;;EAEA,IAAMC,kBAAkB,GAAG7C,KAAK,CAAC0C,MAAN,CAA6B,IAA7B,CAA3B;EACA,IAAMI,iBAAiB,GAAGrC,kBAAkB,CAC1C;IAAA,OAAMyB,SAAS,CAAC,KAAD,CAAf;EAAA,CAD0C,EAE1C,CAACO,oBAAD,CAF0C,EAG1C/B,kBAAkB,CAAC;IAAA,OAAMwB,SAAS,CAAC,KAAD,CAAf;EAAA,CAAD,EAAyB,CAACW,kBAAD,CAAzB,CAHwB,CAA5C;EAMA,IAAME,iBAAiB,GAAGvB,EAAE,GAAGA,EAAE,GAAG,kBAAR,GAA6BnB,MAAM,EAA/D;EAEAL,KAAK,CAACgD,SAAN,CAAgB,YAAM;IACpB,CAACf,MAAD,IAAWO,oBAAoB,CAAC,KAAD,CAA/B;EACD,CAFD,EAEG,CAACP,MAAD,CAFH;EAIA,oBACE,MAAC,gBAAD;IAAkB,GAAG,EAAEQ,oBAAvB;IAA6C,IAAI,EAAE3B,IAAnD;IAAA,wBACE,MAAC,QAAD;MAAU,QAAQ,EAAE,IAApB;MAA0B,QAAQ,EAAE,KAApC;MAA2C,QAAQ,EAAE,KAArD;MAA4D,MAAM,EAAC,EAAnE;MAAA,wBACE,KAAC,MAAD,kCAAYiB,WAAZ;QAAyB,OAAO,EAAED,OAAlC;QAA2C,QAAQ,EAAEP,QAArD;QAA+D,IAAI,EAAEH,IAArE;QAA2E,OAAO,EAAEQ,OAApF;QAA6F,IAAI,EAAEC,IAAnG;QAAyG,IAAI,EAAEf,IAA/G;QAAqH,KAAK,EAAEO,KAA5H;QAAmI,OAAO,EAAEF,OAA5I;QAAqJ,QAAQ,EAAC,OAA9J;QAAA,UACGD;MADH,GADF,eAIE,KAAC,eAAD;QACE,YAAY,EAAEuB,oBADhB;QAEE,kBAAkB,EAAEd,0BAFtB;QAGE,MAAM,EAAC,EAHT;QAIE,GAAG,EAAEkB,kBAJP;QAKE,cAAc,EAAElB,0BAA0B,CAACsB,SAA3B,IAAwC,QAAxC,GAAmD,EAAnD,GAAwDxB,kBAAxD,aAAwDA,kBAAxD,cAAwDA,kBAAxD,GAA8EkB,cALhG;QAME,iBAAiB,EAAEjB,qBAAqB,GAAGA,qBAAH,GAA2BkB,iBANrE;QAOE,QAAQ,EAAE,IAPZ;QAQE,SAAS,EAAEV,SARb;QASE,OAAO,EAAEG,OATX;QAUE,yBAAyB,EAAE,mCAACa,CAAD;UAAA,OAAOd,mBAAmB,CAACc,CAAD,CAA1B;QAAA,CAV7B;QAWE,UAAU,EAAEZ,UAXd;QAYE,IAAI,EAAExB,IAZR;QAaE,OAAO,EAAEyB,iBAbX;QAcE,MAAM,EAAEN,MAdV;QAeE,EAAE,EAAEc,iBAfN;QAgBE,kBAAkB,EAAC,EAhBrB;QAiBE,SAAS,EAAE,IAjBb;QAkBE,aAAa,EAAC;MAlBhB,EAJF;IAAA,EADF,eA0BE,KAAC,MAAD;MACE,OAAO,EAAE5B;IADX,GAEMY,WAFN;MAGE,UAAU,EAAE,oBAACmB,CAAD,EAAY;QACtB,IAAIjB,MAAJ,EAAY;;QAEZ,IAAIiB,CAAC,CAACC,GAAF,KAAU,OAAV,IAAqBD,CAAC,CAACC,GAAF,KAAU,GAAnC,EAAwC;UACtCb,UAAU,CAAC,CAAD,CAAV;UACAE,oBAAoB,CAAC,IAAD,CAApB;QACD;MACF,CAVH;MAWE,MAAM,EAAE,mBAXV;MAYE,GAAG,EAAEM,iBAZP;MAaE,yBAAuBX,gBAbzB;MAcE,IAAI,EAAC,QAdP;MAeE,iBAAeY,iBAfjB;MAgBE,QAAQ,EAAExB,QAhBZ;MAiBE,IAAI,EAAEH,IAjBR;MAkBE,IAAI,EAAEN,IAlBR;MAmBE,QAAQ,EAAE,OAnBZ;MAoBE,OAAO,EAAE,iBAACoC,CAAD,EAAO;QACdA,CAAC,CAACE,eAAF;QACAlB,SAAS,CAAC,CAACD,MAAF,CAAT;MACD,CAvBH;MAwBE,IAAI,EAAEA,MAAM,gBAAG,KAAC,WAAD;QAAa,IAAI,EAAC;MAAlB,EAAH,gBAAiC,KAAC,aAAD;QAAe,IAAI,EAAC;MAApB,EAxB/C;MAyBE,QAAQ,EAAC;IAzBX,GA1BF;EAAA,EADF;AAwDD,CA5FD;;;EAJER,kB;EACAC,qB;;AAiGF,eAAeT,kBAAf"}
+{"version":3,"file":"DualFunctionButton.js","names":["React","Button","ArrowDropDown","ArrowDropUp","Dropdown","nanoid","Size","DropdownContent","styled","useClickOutsideRef","useFocusOutsideRef","ButtonsContainer","div","props","size","Large","Medium","DualFunctionButton","children","variant","type","width","testId","disabled","id","dropdownMenuValues","setDropdownMenuValues","dropdownCustomizationProps","loading","icon","onClick","renderProps","useState","isOpen","setIsOpen","activeDescendant","setActiveDescendant","focused","setFocused","keyboardNavigated","setKeyboardNavigated","dropdownContainerRef","useRef","selectedValues","setSelectedValues","dropdownContentRef","dropdownButtonRef","dropdownContentId","useEffect","itemsType","e","key","stopPropagation"],"sources":["../../src/Button/DualFunctionButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport Button, { ButtonProps } from './Button';\nimport { ArrowDropDown, ArrowDropUp } from '../icons/systemicons/SystemIcons';\nimport { Dropdown } from '../Dropdown/CommonStyling';\nimport { nanoid } from 'nanoid';\nimport { Size } from '../types';\nimport DropdownContent, { DropdownCustomizationProps } from '../Dropdown/DropdownContent';\nimport styled from 'styled-components';\nimport { useClickOutsideRef, useFocusOutsideRef } from '../common';\n\nconst ButtonsContainer = styled.div<{ size?: Size }>`\n  display: flex;\n  align-items: center;\n\n  button:first-child {\n    margin-right: 2px;\n  }\n\n  div.button-content {\n    gap: 0px;\n    padding: ${(props) => (props.size == Size.Large ? '4px 18px' : props.size == Size.Medium ? '4px 14px' : '4px 10px')};\n  }\n`;\n\nexport interface ButtonOption {\n  label: string;\n}\n\nexport interface DualButtonProps extends ButtonProps {\n  dropdownCustomizationProps: DropdownCustomizationProps;\n  dropdownMenuValues?: string[];\n  setDropdownMenuValues?: (values: string[]) => void | boolean | undefined;\n}\n\nconst DualFunctionButton: React.FunctionComponent<DualButtonProps> = ({\n  children = 'Primary Button',\n  variant = 'primary',\n  type = 'button',\n  size = Size.Medium,\n  width = 'auto',\n  testId,\n  disabled,\n  id,\n  dropdownMenuValues,\n  setDropdownMenuValues,\n  dropdownCustomizationProps,\n  ...props\n}) => {\n  // Let's filter out properties that we don't need to render.\n  const { loading, icon, onClick, ...renderProps } = props;\n  const [isOpen, setIsOpen] = React.useState<boolean>(false);\n  const [activeDescendant, setActiveDescendant] = React.useState<string>();\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [keyboardNavigated, setKeyboardNavigated] = React.useState<boolean>(false);\n  const dropdownContainerRef = React.useRef<HTMLDivElement>(null);\n  const [selectedValues, setSelectedValues] = React.useState<string[]>([]);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const dropdownButtonRef = useClickOutsideRef(\n    () => setIsOpen(false),\n    [dropdownContainerRef],\n    useFocusOutsideRef(() => setIsOpen(false), [dropdownContentRef]),\n  );\n  \n  const dropdownContentId = id ? id + '_dropdownContent' : nanoid();\n\n  React.useEffect(() => {\n    !isOpen && setKeyboardNavigated(false);\n  }, [isOpen]);\n\n  return (\n    <ButtonsContainer ref={dropdownContainerRef} size={size}>\n      <Dropdown isButton={true} readOnly={false} disabled={false} margin=\"\">\n        <Button {...renderProps} onClick={onClick} disabled={disabled} type={type} loading={loading} icon={icon} size={size} width={width} variant={variant} flatEdge=\"right\">\n          {children}\n        </Button>\n        <DropdownContent\n          containerRef={dropdownContainerRef}\n          customizationProps={dropdownCustomizationProps}\n          filter=\"\"\n          ref={dropdownContentRef}\n          selectedValues={dropdownCustomizationProps.itemsType == 'normal' ? [] : dropdownMenuValues ?? selectedValues}\n          setSelectedValues={setDropdownMenuValues ? setDropdownMenuValues : setSelectedValues}\n          isButton={true}\n          setIsOpen={setIsOpen}\n          focused={focused}\n          onActiveDescendantChanged={(e) => setActiveDescendant(e)}\n          setFocused={setFocused}\n          size={size}\n          outline={keyboardNavigated}\n          isOpen={isOpen}\n          id={dropdownContentId}\n          messageOnNoResults=\"\"\n          alignLeft={true}\n          ariaRolesType=\"menu\"\n        />\n      </Dropdown>\n      <Button\n        variant={variant}\n        {...renderProps}\n        onKeyPress={(e: any) => {\n          if (isOpen) return;\n\n          if (e.key === 'Enter' || e.key === ' ') {\n            setFocused(0);\n            setKeyboardNavigated(true);\n          }\n        }}\n        testId={'options_toggleBtn'}\n        ref={dropdownButtonRef}\n        aria-activedescendant={activeDescendant}\n        role=\"button\"\n        aria-controls={dropdownContentId}\n        disabled={disabled}\n        type={type}\n        size={size}\n        minWidth={'unset'}\n        onClick={(e) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n        }}\n        icon={isOpen ? <ArrowDropUp size=\"16px\" /> : <ArrowDropDown size=\"16px\" />}\n        flatEdge=\"left\"\n      />\n    </ButtonsContainer>\n  );\n};\n\nexport default DualFunctionButton;\n"],"mappings":"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"}

package/dist/Button/Iconbutton.cjs

@@ -1,62 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.StyledIconButton = exports.IconButtonContent = 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"));
-
 var _styles = require("../styles");
-
 var _common = require("../common");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
-var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus"];
-
+var _excluded = ["id", "variant", "shape", "action", "hideOnLowWidth", "isInMobileMenu", "children", "useTransparentBackground", "shouldNotInteract", "disabled", "iconColor", "unsetIconSize", "tabIndex", "flatEdge", "borderRadius", "focusBackgroundColor", "type", "hidden", "invertFocus", "focusOnClick"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var getBorderRadius = function getBorderRadius(props) {
   return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
 };
-
 var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
   var radius = getBorderRadius(props);
-
   switch (props.flatEdge) {
     case 'left':
       return "0px ".concat(radius, " ").concat(radius, " 0px");
-
     case 'right':
       return "".concat(radius, " 0px 0px ").concat(radius);
-
     case 'none':
     default:
       return "".concat(radius);
   }
 };
-
 var IconButtonContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
-
 exports.IconButtonContent = IconButtonContent;
-
 var StyledIconButton = _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\n  display: ", ";\n  ", " {\n    display: block;\n  }\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"])), function (props) {
   return props.hideOnLowWidth ? 'none' : 'block';
 }, _styles.BREAKPOINTS.MEDIUM, function (props) {
@@ -68,7 +46,6 @@ var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_te
 }, function (props) {
   return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
 });
-
 exports.StyledIconButton = StyledIconButton;
 var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_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"])), IconButtonContent, function (props) {
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
@@ -90,29 +67,28 @@ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)
   return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
 }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.StyledSecondaryIconButton = StyledSecondaryIconButton;
-
 var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
-      variant = _ref.variant,
-      shape = _ref.shape,
-      action = _ref.action,
-      hideOnLowWidth = _ref.hideOnLowWidth,
-      isInMobileMenu = _ref.isInMobileMenu,
-      children = _ref.children,
-      useTransparentBackground = _ref.useTransparentBackground,
-      shouldNotInteract = _ref.shouldNotInteract,
-      disabled = _ref.disabled,
-      iconColor = _ref.iconColor,
-      unsetIconSize = _ref.unsetIconSize,
-      tabIndex = _ref.tabIndex,
-      flatEdge = _ref.flatEdge,
-      borderRadius = _ref.borderRadius,
-      focusBackgroundColor = _ref.focusBackgroundColor,
-      type = _ref.type,
-      hidden = _ref.hidden,
-      invertFocus = _ref.invertFocus,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    variant = _ref.variant,
+    shape = _ref.shape,
+    action = _ref.action,
+    hideOnLowWidth = _ref.hideOnLowWidth,
+    isInMobileMenu = _ref.isInMobileMenu,
+    children = _ref.children,
+    useTransparentBackground = _ref.useTransparentBackground,
+    shouldNotInteract = _ref.shouldNotInteract,
+    disabled = _ref.disabled,
+    iconColor = _ref.iconColor,
+    unsetIconSize = _ref.unsetIconSize,
+    tabIndex = _ref.tabIndex,
+    flatEdge = _ref.flatEdge,
+    borderRadius = _ref.borderRadius,
+    focusBackgroundColor = _ref.focusBackgroundColor,
+    type = _ref.type,
+    hidden = _ref.hidden,
+    invertFocus = _ref.invertFocus,
+    focusOnClick = _ref.focusOnClick,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Let's render button
   switch (variant) {
     case 'secondary':
@@ -134,7 +110,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -143,7 +119,6 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
           children: children
         })
       }));
-
     case 'primary':
     default:
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledPrimaryIconButton, _objectSpread(_objectSpread({
@@ -164,7 +139,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
         unsetIconSize: unsetIconSize,
         tabIndex: tabIndex,
         borderRadius: borderRadius || shape === 'circular' ? 18 : 0,
-        onMouseDown: _common.defaultOnMouseDownHandler,
+        onMouseDown: !focusOnClick ? _common.defaultOnMouseDownHandler : undefined,
         hidden: hidden,
         invertFocus: invertFocus,
         focusBackgroundColor: focusBackgroundColor
@@ -175,7 +150,6 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       }));
   }
 });
-
 IconButton.propTypes = {
   variant: _propTypes.default.oneOf(['primary', 'secondary']),
   shape: _propTypes.default.oneOf(['square', 'circular']),
@@ -189,7 +163,8 @@ IconButton.propTypes = {
   borderRadius: _propTypes.default.number,
   focusBackgroundColor: _propTypes.default.string,
   children: _propTypes.default.node,
-  invertFocus: _propTypes.default.bool
+  invertFocus: _propTypes.default.bool,
+  focusOnClick: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;