@hazelcast/ui 3.0.1-canary.0 → 3.0.1-canary.2

package/lib/components/AutocompleteFieldFormik.js

@@ -1,42 +1,19 @@
-'use strict';
-
-var React = require('react');
-var formik = require('formik');
-var components_AutocompleteField = require('./AutocompleteField.js');
-var utils_formik = require('../utils/formik.js');
-
-const AutocompleteFieldFormik = ({
-  name,
-  validate,
-  onChange,
-  ...props
-}) => {
-  const [{
-    value,
-    onBlur
-  }, meta, {
-    setValue,
-    setTouched
-  }] = formik.useField({
-    name,
-    validate
-  });
-  const setFormikValue = React.useMemo(() => utils_formik.formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
-  const handleChange = React.useCallback(newValue => {
-    if (onChange) {
-      onChange(newValue);
-    }
-    setFormikValue(newValue);
-  }, [setFormikValue, onChange]);
-  return /*#__PURE__*/React.createElement(components_AutocompleteField.AutocompleteField, {
-    ...props,
-    value: value,
-    onChange: handleChange,
-    name: name,
-    onBlur: onBlur,
-    error: utils_formik.getFieldError(meta)
-  });
+import React, { useCallback, useMemo } from 'react';
+import { useField } from 'formik';
+import { AutocompleteField } from './AutocompleteField';
+import { formikTouchAndUpdate, getFieldError } from '../utils/formik';
+export const AutocompleteFieldFormik = ({ name, validate, onChange, ...props }) => {
+    const [{ value, onBlur }, meta, { setValue, setTouched }] = useField({
+        name,
+        validate,
+    });
+    const setFormikValue = useMemo(() => formikTouchAndUpdate(setValue, setTouched), [setValue, setTouched]);
+    const handleChange = useCallback((newValue) => {
+        if (onChange) {
+            onChange(newValue);
+        }
+        setFormikValue(newValue);
+    }, [setFormikValue, onChange]);
+    return React.createElement(AutocompleteField, { ...props, value: value, onChange: handleChange, name: name, onBlur: onBlur, error: getFieldError(meta) });
 };
-
-exports.AutocompleteFieldFormik = AutocompleteFieldFormik;
-//# sourceMappingURL=AutocompleteFieldFormik.js.map
+//# sourceMappingURL=AutocompleteFieldFormik.js.map

package/lib/components/AutocompleteFieldFormik.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFieldFormik.js","sources":["../../src/components/AutocompleteFieldFormik.tsx"],"sourcesContent":[null],"names":["AutocompleteFieldFormik","name","validate","onChange","props","value","onBlur","meta","setValue","setTouched","useField","setFormikValue","useMemo","formikTouchAndUpdate","handleChange","useCallback","newValue","React","createElement","AutocompleteField","error","getFieldError"],"mappings":";;;;;;;AAWO,MAAMA,uBAAuB,GAAGA,CAAC;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,QAAQ;EAAE,GAAGC;AAAK,CAAgC,KAAkB;AAC5H,EAAA,MAAM,CAAC;IAAEC,KAAK;AAAEC,IAAAA;GAAQ,EAAEC,IAAI,EAAE;IAAEC,QAAQ;AAAEC,IAAAA;GAAY,CAAC,GAAGC,eAAQ,CAAgB;IAClFT,IAAI;AACJC,IAAAA;AACD,GAAA,CAAC;AAEF,EAAA,MAAMS,cAAc,GAAGC,aAAO,CAAC,MAAMC,iCAAoB,CAAgBL,QAAQ,EAAEC,UAAU,CAAC,EAAE,CAACD,QAAQ,EAAEC,UAAU,CAAC,CAAC;AACvH,EAAA,MAAMK,YAAY,GAAGC,iBAAW,CAC7BC,QAAgB,IAAI;AACnB,IAAA,IAAIb,QAAQ,EAAE;MACZA,QAAQ,CAACa,QAAQ,CAAC;AACpB,IAAA;IAEAL,cAAc,CAACK,QAAQ,CAAC;AAC1B,EAAA,CAAC,EACD,CAACL,cAAc,EAAER,QAAQ,CAAC,CAC3B;AAED,EAAA,oBAAOc,KAAA,CAAAC,aAAA,CAACC,8CAAiB,EAAA;AAAA,IAAA,GAAKf,KAAK;AAAEC,IAAAA,KAAK,EAAEA,KAAK;AAAEF,IAAAA,QAAQ,EAAEW,YAAY;AAAEb,IAAAA,IAAI,EAAEA,IAAI;AAAEK,IAAAA,MAAM,EAAEA,MAAM;IAAEc,KAAK,EAAEC,0BAAa,CAACd,IAAI;AAAC,GAAA,CAAI;AACvI;;;;"}
+{"version":3,"file":"AutocompleteFieldFormik.js","sourceRoot":"","sources":["../../src/components/AutocompleteFieldFormik.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAgB,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAEjC,OAAO,EAAE,iBAAiB,EAA0B,MAAM,qBAAqB,CAAA;AAC/E,OAAO,EAAyB,oBAAoB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAO5F,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAgC,EAAgB,EAAE;IAC5H,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC,GAAG,QAAQ,CAAgB;QAClF,IAAI;QACJ,QAAQ;KACT,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,oBAAoB,CAAgB,QAAQ,EAAE,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAA;IACvH,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,QAAgB,EAAE,EAAE;QACnB,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,QAAQ,CAAC,CAAA;QACpB,CAAC;QAED,cAAc,CAAC,QAAQ,CAAC,CAAA;IAC1B,CAAC,EACD,CAAC,cAAc,EAAE,QAAQ,CAAC,CAC3B,CAAA;IAED,OAAO,oBAAC,iBAAiB,OAAK,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,GAAI,CAAA;AACvI,CAAC,CAAA"}

package/lib/components/Badge.js

@@ -1,68 +1,44 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var reactFeather = require('react-feather');
-var components_Icon = require('./Icon.js');
-var Badge_module = require('./Badge.module.scss.js');
-
-const BadgeIcon = {
-  neutral: {
-    icon: reactFeather.Info,
-    ariaLabel: 'Info circle icon'
-  },
-  success: {
-    icon: reactFeather.CheckCircle,
-    ariaLabel: 'Check circle icon'
-  },
-  warning: {
-    icon: reactFeather.AlertTriangle,
-    ariaLabel: 'Warning triangle icon'
-  },
-  info: {
-    icon: reactFeather.Info,
-    ariaLabel: 'Info circle icon'
-  },
-  critical: {
-    icon: reactFeather.AlertCircle,
-    ariaLabel: 'Info critical circle icon'
-  }
+import React from 'react';
+import cn from 'classnames';
+import { AlertTriangle, CheckCircle, AlertCircle, Info } from 'react-feather';
+import { Icon } from './Icon';
+import styles from './Badge.module.scss';
+export const BadgeIcon = {
+    neutral: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    success: {
+        icon: CheckCircle,
+        ariaLabel: 'Check circle icon',
+    },
+    warning: {
+        icon: AlertTriangle,
+        ariaLabel: 'Warning triangle icon',
+    },
+    info: {
+        icon: Info,
+        ariaLabel: 'Info circle icon',
+    },
+    critical: {
+        icon: AlertCircle,
+        ariaLabel: 'Info critical circle icon',
+    },
 };
-const Badge = ({
-  type,
-  content,
-  size = 'normal',
-  className
-}) => {
-  const {
-    icon,
-    ariaLabel
-  } = BadgeIcon[type];
-  return /*#__PURE__*/React.createElement("div", {
-    "data-test": "badge-container",
-    className: cn(Badge_module.default.badge, {
-      // Colors
-      [Badge_module.default.neutral]: type === 'neutral',
-      [Badge_module.default.success]: type === 'success',
-      [Badge_module.default.info]: type === 'info',
-      [Badge_module.default.warning]: type === 'warning',
-      [Badge_module.default.critical]: type === 'critical',
-      // Size
-      [Badge_module.default.normal]: size === 'normal',
-      [Badge_module.default.small]: size === 'small'
-    }, className)
-  }, /*#__PURE__*/React.createElement(components_Icon.Icon, {
-    "data-test": "badge-icon",
-    ariaLabel: ariaLabel,
-    icon: icon,
-    className: Badge_module.default.icon,
-    size: size === 'normal' ? 'medium' : 'small'
-  }), /*#__PURE__*/React.createElement("div", {
-    "data-test": "badge-content",
-    className: Badge_module.default.content
-  }, content));
+export const Badge = ({ type, content, size = 'normal', className }) => {
+    const { icon, ariaLabel } = BadgeIcon[type];
+    return (React.createElement("div", { "data-test": "badge-container", className: cn(styles.badge, {
+            // Colors
+            [styles.neutral]: type === 'neutral',
+            [styles.success]: type === 'success',
+            [styles.info]: type === 'info',
+            [styles.warning]: type === 'warning',
+            [styles.critical]: type === 'critical',
+            // Size
+            [styles.normal]: size === 'normal',
+            [styles.small]: size === 'small',
+        }, className) },
+        React.createElement(Icon, { "data-test": "badge-icon", ariaLabel: ariaLabel, icon: icon, className: styles.icon, size: size === 'normal' ? 'medium' : 'small' }),
+        React.createElement("div", { "data-test": "badge-content", className: styles.content }, content)));
 };
-
-exports.Badge = Badge;
-exports.BadgeIcon = BadgeIcon;
-//# sourceMappingURL=Badge.js.map
+//# sourceMappingURL=Badge.js.map

package/lib/components/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../src/components/Badge.tsx"],"sourcesContent":[null],"names":["BadgeIcon","neutral","icon","Info","ariaLabel","success","CheckCircle","warning","AlertTriangle","info","critical","AlertCircle","Badge","type","content","size","className","React","createElement","cn","styles","badge","normal","small","Icon"],"mappings":";;;;;;;;AAeO,MAAMA,SAAS,GAAgD;AACpEC,EAAAA,OAAO,EAAE;AACPC,IAAAA,IAAI,EAAEC,iBAAI;AACVC,IAAAA,SAAS,EAAE;GACZ;AACDC,EAAAA,OAAO,EAAE;AACPH,IAAAA,IAAI,EAAEI,wBAAW;AACjBF,IAAAA,SAAS,EAAE;GACZ;AACDG,EAAAA,OAAO,EAAE;AACPL,IAAAA,IAAI,EAAEM,0BAAa;AACnBJ,IAAAA,SAAS,EAAE;GACZ;AACDK,EAAAA,IAAI,EAAE;AACJP,IAAAA,IAAI,EAAEC,iBAAI;AACVC,IAAAA,SAAS,EAAE;GACZ;AACDM,EAAAA,QAAQ,EAAE;AACRR,IAAAA,IAAI,EAAES,wBAAW;AACjBP,IAAAA,SAAS,EAAE;AACZ;;AAYI,MAAMQ,KAAK,GAAmBA,CAAC;EAAEC,IAAI;EAAEC,OAAO;AAAEC,EAAAA,IAAI,GAAG,QAAQ;AAAEC,EAAAA;AAAS,CAAE,KAAI;EACrF,MAAM;IAAEd,IAAI;AAAEE,IAAAA;AAAS,GAAE,GAAGJ,SAAS,CAACa,IAAI,CAAC;AAE3C,EAAA,oBACEI,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EACY,iBAAiB;AAC3BF,IAAAA,SAAS,EAAEG,EAAE,CACXC,oBAAM,CAACC,KAAK,EACZ;AACE;AACA,MAAA,CAACD,oBAAM,CAACnB,OAAO,GAAGY,IAAI,KAAK,SAAS;AACpC,MAAA,CAACO,oBAAM,CAACf,OAAO,GAAGQ,IAAI,KAAK,SAAS;AACpC,MAAA,CAACO,oBAAM,CAACX,IAAI,GAAGI,IAAI,KAAK,MAAM;AAC9B,MAAA,CAACO,oBAAM,CAACb,OAAO,GAAGM,IAAI,KAAK,SAAS;AACpC,MAAA,CAACO,oBAAM,CAACV,QAAQ,GAAGG,IAAI,KAAK,UAAU;AACtC;AACA,MAAA,CAACO,oBAAM,CAACE,MAAM,GAAGP,IAAI,KAAK,QAAQ;AAClC,MAAA,CAACK,oBAAM,CAACG,KAAK,GAAGR,IAAI,KAAK;AAC1B,KAAA,EACDC,SAAS;AACV,GAAA,eAEDC,KAAA,CAAAC,aAAA,CAACM,oBAAI,EAAA;AAAA,IAAA,WAAA,EACO,YAAY;AACtBpB,IAAAA,SAAS,EAAEA,SAAS;AACpBF,IAAAA,IAAI,EAAEA,IAAI;IACVc,SAAS,EAAEI,oBAAM,CAAClB,IAAI;AACtBa,IAAAA,IAAI,EAAEA,IAAI,KAAK,QAAQ,GAAG,QAAQ,GAAG;AAAO,GAAA,CAC5C,eACFE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAA,IAAA,WAAA,EAAe,eAAe;IAACF,SAAS,EAAEI,oBAAM,CAACN;GAAO,EACrDA,OAAO,CACJ,CACF;AAEV;;;;;"}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../src/components/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAoB,MAAM,eAAe,CAAA;AAE/F,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,OAAO,MAAM,MAAM,qBAAqB,CAAA;AASxC,MAAM,CAAC,MAAM,SAAS,GAAgD;IACpE,OAAO,EAAE;QACP,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,mBAAmB;KAC/B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,aAAa;QACnB,SAAS,EAAE,uBAAuB;KACnC;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,IAAI;QACV,SAAS,EAAE,kBAAkB;KAC9B;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,2BAA2B;KACvC;CACF,CAAA;AAWD,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IACrF,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC,CAAA;IAE3C,OAAO,CACL,0CACY,iBAAiB,EAC3B,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,KAAK,EACZ;YACE,SAAS;YACT,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,KAAK,MAAM;YAC9B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,IAAI,KAAK,SAAS;YACpC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,KAAK,UAAU;YACtC,OAAO;YACP,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,IAAI,KAAK,QAAQ;YAClC,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV;QAED,oBAAC,IAAI,iBACO,YAAY,EACtB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,MAAM,CAAC,IAAI,EACtB,IAAI,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,GAC5C;QACF,0CAAe,eAAe,EAAC,SAAS,EAAE,MAAM,CAAC,OAAO,IACrD,OAAO,CACJ,CACF,CACP,CAAA;AACH,CAAC,CAAA"}

package/lib/components/Badge.module.scss

@@ -0,0 +1,55 @@
+@use '../../styles/constants' as c;
+
+.badge {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  border-radius: c.$borderRadiusBadge;
+
+  .content {
+    margin-left: c.$grid;
+  }
+
+  // Sizes
+  &.normal {
+    padding: c.$grid * 2 c.$grid * 3;
+
+    .content {
+      @include c.typographyBodyNormal;
+    }
+  }
+
+  &.small {
+    padding: c.$grid c.$grid * 2;
+
+    .content {
+      @include c.typographyBodySmall;
+    }
+  }
+
+  // Themes
+  &.neutral {
+    background-color: c.$colorNeutralLighter;
+    color: c.$colorText;
+  }
+
+  &.success {
+    background-color: c.$colorSuccess;
+    color: c.$colorNeutralWhite;
+  }
+
+  &.info {
+    background-color: c.$colorInfoLight;
+    color: c.$colorText;
+  }
+
+  &.warning {
+    background-color: c.$colorWarningLight;
+    color: c.$colorText;
+  }
+
+  &.critical {
+    background-color: c.$colorError;
+    color: c.$colorNeutralWhite;
+  }
+}

package/lib/components/Button.js

@@ -1,16 +1,13 @@
-'use strict';
-
-var React = require('react');
-var cn = require('classnames');
-var mergeRefs = require('react-merge-refs');
-var reactUid = require('react-uid');
-var components_Icon = require('./Icon.js');
-var components_TruncatedText = require('./TruncatedText.js');
-var components_Tooltip = require('./Tooltip.js');
-var components_Loader = require('./Loader.js');
-var Button_module = require('./Button.module.scss.js');
-
-const capitalizeFirstCharacter = str => `${str[0].toUpperCase()}${str.slice(1)}`;
+import React, { forwardRef } from 'react';
+import cn from 'classnames';
+import mergeRefs from 'react-merge-refs';
+import { useUID } from 'react-uid';
+import { Icon } from './Icon';
+import { TruncatedText } from './TruncatedText';
+import { Tooltip } from './Tooltip';
+import { Loader } from './Loader';
+import styles from './Button.module.scss';
+const capitalizeFirstCharacter = (str) => `${str[0].toUpperCase()}${str.slice(1)}`;
 /**
  * ### Purpose
  * Make it clear what users should do to continue with their main flow by using buttons to highlight the main actions they can take.
@@ -31,107 +28,37 @@ const capitalizeFirstCharacter = str => `${str[0].toUpperCase()}${str.slice(1)}`
  * - **Danger**: Use danger button for potentially destructive actions.
  * - **Transparent**: Use for IconButton and similar use-cases.
  */
-const Button = /*#__PURE__*/React.forwardRef(({
-  component: Component = 'button',
-  className,
-  bodyClassName,
-  outlineClassName,
-  outline = 'outline',
-  children,
-  capitalize = true,
-  // Disabled tooltip
-  disabled,
-  disabledTooltip,
-  disabledTooltipVisible,
-  disabledTooltipPlacement,
-  // Left icon
-  iconLeft,
-  iconLeftAriaLabel,
-  iconLeftColor,
-  iconLeftClassName,
-  // Right icon
-  iconRight,
-  iconRightAriaLabel,
-  iconRightColor,
-  iconRightClassName,
-  rel = 'noopener',
-  target,
-  type = 'button',
-  loading,
-  variant = 'contained',
-  color = 'primary',
-  tooltip,
-  size = 'small',
-  active,
-  truncate = true,
-  iconSize: propIconSize,
-  tooltipColor,
-  ...rest
-}, ref) => {
-  const tooltipId = reactUid.useUID();
-  const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
-  const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
-  const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
-  return /*#__PURE__*/React.createElement(components_Tooltip.Tooltip, {
-    id: tooltipId,
-    color: tooltipColor,
-    content: disabled ? disabledTooltip : tooltip,
-    visible: disabled && disabledTooltipVisible,
-    placement: disabledTooltipPlacement
-  }, tooltipRef => (/*#__PURE__*/React.createElement(Component, {
-    "data-test": "button",
-    className: cn(Button_module.default.button, {
-      [Button_module.default[`color${capitalizeFirstCharacter(color)}`]]: true,
-      [Button_module.default[`variant${capitalizeFirstCharacter(variant)}`]]: true,
-      [Button_module.default.active]: active,
-      [Button_module.default[size]]: size !== 'small'
-    }, className),
-    "aria-describedby": disabled ? tooltipId : undefined,
-    disabled: disabled !== null && disabled !== void 0 ? disabled : loading,
-    rel: Component === 'a' ? relFinal : undefined,
-    target: Component === 'a' ? target : undefined,
-    type: Component === 'button' ? type : undefined,
-    ref: mergeRefs([ref, tooltipRef]),
-    ...rest
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-test": "button-outline",
-    className: cn(Button_module.default.outline, {
-      [Button_module.default.inset]: outline === 'inset'
-    }, outlineClassName)
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn(Button_module.default.body, bodyClassName)
-  }, loading && !loadingAnimationOnRight && /*#__PURE__*/React.createElement(components_Loader.Loader, {
-    className: Button_module.default.iconLeft,
-    size: iconSize
-  }), iconLeft && iconLeftAriaLabel && !loading && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: iconLeft,
-    ariaLabel: iconLeftAriaLabel,
-    "data-test": "button-icon-left",
-    className: cn(Button_module.default.iconLeft, iconLeftClassName),
-    size: iconSize,
-    color: iconLeftColor
-  })), truncate ? (/*#__PURE__*/React.createElement(components_TruncatedText.TruncatedText, {
-    text: capitalize && typeof children === 'string' ? children.toUpperCase() : children,
-    /*
-    If a button is disabled and text is long we don't want to show 2 popups.
-    1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
-    2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
-    the truncated popup -> setting it to undefined will leave the default behaviour.
-    */
-    tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined
-  })) : children, loadingAnimationOnRight && /*#__PURE__*/React.createElement(components_Loader.Loader, {
-    className: Button_module.default.iconRight,
-    size: iconSize
-  }), !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (/*#__PURE__*/React.createElement(components_Icon.Icon, {
-    icon: iconRight,
-    ariaLabel: iconRightAriaLabel,
-    "data-test": "button-icon-right",
-    className: cn(Button_module.default.iconRight, iconRightClassName),
-    size: iconSize,
-    color: iconRightColor
-  }))))));
+export const Button = forwardRef(({ component: Component = 'button', className, bodyClassName, outlineClassName, outline = 'outline', children, capitalize = true, 
+// Disabled tooltip
+disabled, disabledTooltip, disabledTooltipVisible, disabledTooltipPlacement, 
+// Left icon
+iconLeft, iconLeftAriaLabel, iconLeftColor, iconLeftClassName, 
+// Right icon
+iconRight, iconRightAriaLabel, iconRightColor, iconRightClassName, rel = 'noopener', target, type = 'button', loading, variant = 'contained', color = 'primary', tooltip, size = 'small', active, truncate = true, iconSize: propIconSize, tooltipColor, ...rest }, ref) => {
+    const tooltipId = useUID();
+    const iconSize = propIconSize || (size === 'medium' ? 'smallMedium' : 'small');
+    const relFinal = Array.isArray(rel) ? rel.join(' ') : rel;
+    const loadingAnimationOnRight = loading && iconRight && iconRightAriaLabel && !(iconLeft && iconLeftAriaLabel);
+    return (React.createElement(Tooltip, { id: tooltipId, color: tooltipColor, content: disabled ? disabledTooltip : tooltip, visible: disabled && disabledTooltipVisible, placement: disabledTooltipPlacement }, (tooltipRef) => (React.createElement(Component, { "data-test": "button", className: cn(styles.button, {
+            [styles[`color${capitalizeFirstCharacter(color)}`]]: true,
+            [styles[`variant${capitalizeFirstCharacter(variant)}`]]: true,
+            [styles.active]: active,
+            [styles[size]]: size !== 'small',
+        }, className), "aria-describedby": disabled ? tooltipId : undefined, disabled: disabled !== null && disabled !== void 0 ? disabled : loading, rel: Component === 'a' ? relFinal : undefined, target: Component === 'a' ? target : undefined, type: Component === 'button' ? type : undefined, ref: mergeRefs([ref, tooltipRef]), ...rest },
+        React.createElement("span", { "data-test": "button-outline", className: cn(styles.outline, { [styles.inset]: outline === 'inset' }, outlineClassName) }),
+        React.createElement("span", { className: cn(styles.body, bodyClassName) },
+            loading && !loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconLeft, size: iconSize }),
+            iconLeft && iconLeftAriaLabel && !loading && (React.createElement(Icon, { icon: iconLeft, ariaLabel: iconLeftAriaLabel, "data-test": "button-icon-left", className: cn(styles.iconLeft, iconLeftClassName), size: iconSize, color: iconLeftColor })),
+            truncate ? (React.createElement(TruncatedText, { text: capitalize && typeof children === 'string' ? children.toUpperCase() : children, 
+                /*
+                If a button is disabled and text is long we don't want to show 2 popups.
+                1. In case a button is disabled and no `disabledTooltipVisible` is enforced, we just hide truncated popup.
+                2. In case a button is disabled and disabledTooltip is hidden with a false flag, there is a space to show
+                the truncated popup -> setting it to undefined will leave the default behaviour.
+              */
+                tooltipVisible: disabled && disabledTooltipVisible !== false ? false : undefined })) : (children),
+            loadingAnimationOnRight && React.createElement(Loader, { className: styles.iconRight, size: iconSize }),
+            !loadingAnimationOnRight && iconRight && iconRightAriaLabel && (React.createElement(Icon, { icon: iconRight, ariaLabel: iconRightAriaLabel, "data-test": "button-icon-right", className: cn(styles.iconRight, iconRightClassName), size: iconSize, color: iconRightColor })))))));
 });
 Button.displayName = 'Button';
-
-exports.Button = Button;
-//# sourceMappingURL=Button.js.map
+//# sourceMappingURL=Button.js.map

package/lib/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":[null],"names":["capitalizeFirstCharacter","str","toUpperCase","slice","Button","forwardRef","component","Component","className","bodyClassName","outlineClassName","outline","children","capitalize","disabled","disabledTooltip","disabledTooltipVisible","disabledTooltipPlacement","iconLeft","iconLeftAriaLabel","iconLeftColor","iconLeftClassName","iconRight","iconRightAriaLabel","iconRightColor","iconRightClassName","rel","target","type","loading","variant","color","tooltip","size","active","truncate","iconSize","propIconSize","tooltipColor","rest","ref","tooltipId","useUID","relFinal","Array","isArray","join","loadingAnimationOnRight","React","createElement","Tooltip","id","content","visible","placement","tooltipRef","cn","styles","button","undefined","mergeRefs","inset","body","Loader","Icon","icon","ariaLabel","TruncatedText","text","tooltipVisible","displayName"],"mappings":";;;;;;;;;;;;AA4GA,MAAMA,wBAAwB,GAAIC,GAAW,IAAK,GAAGA,GAAG,CAAC,CAAC,CAAC,CAACC,WAAW,EAAE,GAAGD,GAAG,CAACE,KAAK,CAAC,CAAC,CAAC,CAAA,CAAE;AAE1F;;;;;;;;;;;;;;;;;;;AAmBG;AACI,MAAMC,MAAM,gBAAGC,gBAAU,CAC9B,CACE;EACEC,SAAS,EAAEC,SAAS,GAAG,QAAQ;EAC/BC,SAAS;EACTC,aAAa;EACbC,gBAAgB;AAChBC,EAAAA,OAAO,GAAG,SAAS;EACnBC,QAAQ;AACRC,EAAAA,UAAU,GAAG,IAAI;AACjB;EACAC,QAAQ;EACRC,eAAe;EACfC,sBAAsB;EACtBC,wBAAwB;AACxB;EACAC,QAAQ;EACRC,iBAAiB;EACjBC,aAAa;EACbC,iBAAiB;AACjB;EACAC,SAAS;EACTC,kBAAkB;EAClBC,cAAc;EACdC,kBAAkB;AAClBC,EAAAA,GAAG,GAAG,UAAU;EAChBC,MAAM;AACNC,EAAAA,IAAI,GAAG,QAAQ;EACfC,OAAO;AACPC,EAAAA,OAAO,GAAG,WAAW;AACrBC,EAAAA,KAAK,GAAG,SAAS;EACjBC,OAAO;AACPC,EAAAA,IAAI,GAAG,OAAO;EACdC,MAAM;AACNC,EAAAA,QAAQ,GAAG,IAAI;AACfC,EAAAA,QAAQ,EAAEC,YAAY;EACtBC,YAAY;EACZ,GAAGC;AAAI,CACR,EACDC,GAAG,KACD;AACF,EAAA,MAAMC,SAAS,GAAGC,eAAM,EAAE;EAC1B,MAAMN,QAAQ,GAAaC,YAAY,KAAKJ,IAAI,KAAK,QAAQ,GAAG,aAAa,GAAG,OAAO,CAAC;AACxF,EAAA,MAAMU,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACnB,GAAG,CAAC,GAAGA,GAAG,CAACoB,IAAI,CAAC,GAAG,CAAC,GAAGpB,GAAG;AACzD,EAAA,MAAMqB,uBAAuB,GAAGlB,OAAO,IAAIP,SAAS,IAAIC,kBAAkB,IAAI,EAAEL,QAAQ,IAAIC,iBAAiB,CAAC;AAE9G,EAAA,oBACE6B,KAAA,CAAAC,aAAA,CAACC,0BAAO,EAAA;AACNC,IAAAA,EAAE,EAAEV,SAAS;AACbV,IAAAA,KAAK,EAAEO,YAAY;AACnBc,IAAAA,OAAO,EAAEtC,QAAQ,GAAGC,eAAe,GAAGiB,OAAO;IAC7CqB,OAAO,EAAEvC,QAAQ,IAAIE,sBAAsB;AAC3CsC,IAAAA,SAAS,EAAErC;KAETsC,UAAU,kBACVP,oBAACzC,SAAS,EAAA;AAAA,IAAA,WAAA,EACE,QAAQ;AAClBC,IAAAA,SAAS,EAAEgD,EAAE,CACXC,qBAAM,CAACC,MAAM,EACb;MACE,CAACD,qBAAM,CAAC,CAAA,KAAA,EAAQzD,wBAAwB,CAAC+B,KAAK,CAAC,CAAA,CAAE,CAAC,GAAG,IAAI;MACzD,CAAC0B,qBAAM,CAAC,CAAA,OAAA,EAAUzD,wBAAwB,CAAC8B,OAAO,CAAC,CAAA,CAAE,CAAC,GAAG,IAAI;AAC7D,MAAA,CAAC2B,qBAAM,CAACvB,MAAM,GAAGA,MAAM;AACvB,MAAA,CAACuB,qBAAM,CAACxB,IAAI,CAAC,GAAGA,IAAI,KAAK;KAC1B,EACDzB,SAAS,CACV;AAAA,IAAA,kBAAA,EACiBM,QAAQ,GAAG2B,SAAS,GAAGkB,SAAS;AAClD7C,IAAAA,QAAQ,EAAEA,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,MAAA,GAARA,QAAQ,GAAIe,OAAO;AAC7BH,IAAAA,GAAG,EAAEnB,SAAS,KAAK,GAAG,GAAGoC,QAAQ,GAAGgB,SAAS;AAC7ChC,IAAAA,MAAM,EAAEpB,SAAS,KAAK,GAAG,GAAGoB,MAAM,GAAGgC,SAAS;AAC9C/B,IAAAA,IAAI,EAAErB,SAAS,KAAK,QAAQ,GAAGqB,IAAI,GAAG+B,SAAS;IAC/CnB,GAAG,EAAEoB,SAAS,CAAC,CAACpB,GAAG,EAAEe,UAAU,CAAC,CAAC;OAC7BhB;AAAI,GAAA,eAERS,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAA,IAAA,WAAA,EAAgB,gBAAgB;AAACzC,IAAAA,SAAS,EAAEgD,EAAE,CAACC,qBAAM,CAAC9C,OAAO,EAAE;AAAE,MAAA,CAAC8C,qBAAM,CAACI,KAAK,GAAGlD,OAAO,KAAK;AAAO,KAAE,EAAED,gBAAgB;AAAC,GAAA,CAAI,eAC7HsC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMzC,IAAAA,SAAS,EAAEgD,EAAE,CAACC,qBAAM,CAACK,IAAI,EAAErD,aAAa;GAAC,EAC5CoB,OAAO,IAAI,CAACkB,uBAAuB,iBAAIC,KAAA,CAAAC,aAAA,CAACc,wBAAM,EAAA;IAACvD,SAAS,EAAEiD,qBAAM,CAACvC,QAAQ;AAAEe,IAAAA,IAAI,EAAEG;AAAQ,GAAA,CAAI,EAC7FlB,QAAQ,IAAIC,iBAAiB,IAAI,CAACU,OAAO,kBACxCmB,KAAA,CAAAC,aAAA,CAACe,oBAAI,EAAA;AACHC,IAAAA,IAAI,EAAE/C,QAAQ;AACdgD,IAAAA,SAAS,EAAE/C,iBAAiB;AAAA,IAAA,WAAA,EAClB,kBAAkB;IAC5BX,SAAS,EAAEgD,EAAE,CAACC,qBAAM,CAACvC,QAAQ,EAAEG,iBAAiB,CAAC;AACjDY,IAAAA,IAAI,EAAEG,QAAQ;AACdL,IAAAA,KAAK,EAAEX;IACP,CACH,EACAe,QAAQ,iBACPa,KAAA,CAAAC,aAAA,CAACkB,sCAAa,EAAA;AACZC,IAAAA,IAAI,EAAEvD,UAAU,IAAI,OAAOD,QAAQ,KAAK,QAAQ,GAAGA,QAAQ,CAACV,WAAW,EAAE,GAAGU,QAAQ;AACpF;;;;;AAKA;IACAyD,cAAc,EAAEvD,QAAQ,IAAIE,sBAAsB,KAAK,KAAK,GAAG,KAAK,GAAG2C;GAAS,CAChF,IAEF/C,QACD,EACAmC,uBAAuB,iBAAIC,KAAA,CAAAC,aAAA,CAACc,wBAAM,EAAA;IAACvD,SAAS,EAAEiD,qBAAM,CAACnC,SAAS;AAAEW,IAAAA,IAAI,EAAEG;AAAQ,GAAA,CAAI,EAClF,CAACW,uBAAuB,IAAIzB,SAAS,IAAIC,kBAAkB,kBAC1DyB,oBAACgB,oBAAI,EAAA;AACHC,IAAAA,IAAI,EAAE3C,SAAS;AACf4C,IAAAA,SAAS,EAAE3C,kBAAkB;AAAA,IAAA,WAAA,EACnB,mBAAmB;IAC7Bf,SAAS,EAAEgD,EAAE,CAACC,qBAAM,CAACnC,SAAS,EAAEG,kBAAkB,CAAC;AACnDQ,IAAAA,IAAI,EAAEG,QAAQ;AACdL,IAAAA,KAAK,EAAEP;AAAc,GAAA,CACrB,CACH,CACI,CACG,CACb,CACO;AAEd,CAAC;AAGHpB,MAAM,CAACkE,WAAW,GAAG,QAAQ;;;;"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAwB,UAAU,EAAgC,MAAM,OAAO,CAAA;AAC7F,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,SAAS,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,OAAO,EAAE,IAAI,EAAuB,MAAM,QAAQ,CAAA;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,OAAO,EAAgB,MAAM,WAAW,CAAA;AAEjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAGjC,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAgGzC,MAAM,wBAAwB,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAE1F;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EACE,SAAS,EAAE,SAAS,GAAG,QAAQ,EAC/B,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,UAAU,GAAG,IAAI;AACjB,mBAAmB;AACnB,QAAQ,EACR,eAAe,EACf,sBAAsB,EACtB,wBAAwB;AACxB,YAAY;AACZ,QAAQ,EACR,iBAAiB,EACjB,aAAa,EACb,iBAAiB;AACjB,aAAa;AACb,SAAS,EACT,kBAAkB,EAClB,cAAc,EACd,kBAAkB,EAClB,GAAG,GAAG,UAAU,EAChB,MAAM,EACN,IAAI,GAAG,QAAQ,EACf,OAAO,EACP,OAAO,GAAG,WAAW,EACrB,KAAK,GAAG,SAAS,EACjB,OAAO,EACP,IAAI,GAAG,OAAO,EACd,MAAM,EACN,QAAQ,GAAG,IAAI,EACf,QAAQ,EAAE,YAAY,EACtB,YAAY,EACZ,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,MAAM,EAAE,CAAA;IAC1B,MAAM,QAAQ,GAAa,YAAY,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IACxF,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;IACzD,MAAM,uBAAuB,GAAG,OAAO,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAAC,CAAC,QAAQ,IAAI,iBAAiB,CAAC,CAAA;IAE9G,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAE,SAAS,EACb,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,EAC7C,OAAO,EAAE,QAAQ,IAAI,sBAAsB,EAC3C,SAAS,EAAE,wBAAwB,IAElC,CAAC,UAAU,EAAE,EAAE,CAAC,CACf,oBAAC,SAAS,iBACE,QAAQ,EAClB,SAAS,EAAE,EAAE,CACX,MAAM,CAAC,MAAM,EACb;YACE,CAAC,MAAM,CAAC,QAAQ,wBAAwB,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;YACzD,CAAC,MAAM,CAAC,UAAU,wBAAwB,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI;YAC7D,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM;YACvB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,IAAI,KAAK,OAAO;SACjC,EACD,SAAS,CACV,sBACiB,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAClD,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,OAAO,EAC7B,GAAG,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAC7C,MAAM,EAAE,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC9C,IAAI,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC/C,GAAG,EAAE,SAAS,CAAC,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,KAC7B,IAAI;QAER,2CAAgB,gBAAgB,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,OAAO,EAAE,EAAE,gBAAgB,CAAC,GAAI;QAC7H,8BAAM,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,aAAa,CAAC;YAC5C,OAAO,IAAI,CAAC,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,GAAI;YAC7F,QAAQ,IAAI,iBAAiB,IAAI,CAAC,OAAO,IAAI,CAC5C,oBAAC,IAAI,IACH,IAAI,EAAE,QAAQ,EACd,SAAS,EAAE,iBAAiB,eAClB,kBAAkB,EAC5B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,EAAE,iBAAiB,CAAC,EACjD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,aAAa,GACpB,CACH;YACA,QAAQ,CAAC,CAAC,CAAC,CACV,oBAAC,aAAa,IACZ,IAAI,EAAE,UAAU,IAAI,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,QAAQ;gBACpF;;;;;gBAKA;gBACA,cAAc,EAAE,QAAQ,IAAI,sBAAsB,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAChF,CACH,CAAC,CAAC,CAAC,CACF,QAAQ,CACT;YACA,uBAAuB,IAAI,oBAAC,MAAM,IAAC,SAAS,EAAE,MAAM,CAAC,SAAS,EAAE,IAAI,EAAE,QAAQ,GAAI;YAClF,CAAC,uBAAuB,IAAI,SAAS,IAAI,kBAAkB,IAAI,CAC9D,oBAAC,IAAI,IACH,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,kBAAkB,eACnB,mBAAmB,EAC7B,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,EACnD,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,cAAc,GACrB,CACH,CACI,CACG,CACb,CACO,CACX,CAAA;AACH,CAAC,CACF,CAAA;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAA"}