@widergy/energy-ui 3.173.2 → 3.173.4

package/dist/esm/components/UTBodyPlaceholder/index.js

@@ -1,38 +1 @@
-import React from 'react';
-import { objectOf, string } from 'prop-types';
-import UTIcon from '../UTIcon';
-import UTLabel from '../UTLabel';
-import styles from './styles.module.scss';
-import { DEFAULT_TEXTS, SIZES } from './constants';
-const UTBodyPlaceholder = _ref => {
-  var _classNames$bodyPlace, _classNames$icon, _classNames$bodyPlace2, _classNames$bodyPlace3, _classNames$bodyPlace4;
-  let {
-    classNames = {},
-    size = SIZES.L,
-    subtitle = DEFAULT_TEXTS.subtitle,
-    title = DEFAULT_TEXTS.title
-  } = _ref;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.bodyPlaceholder, " ").concat(styles.bodyPlaceholderWidth, " ").concat((_classNames$bodyPlace = classNames.bodyPlaceholder) !== null && _classNames$bodyPlace !== void 0 ? _classNames$bodyPlace : '')
-  }, /*#__PURE__*/React.createElement(UTIcon, {
-    className: "".concat(styles.icon, " ").concat((_classNames$icon = classNames.icon) !== null && _classNames$icon !== void 0 ? _classNames$icon : ''),
-    name: "IconReplace",
-    size: 40
-  }), size === SIZES.L && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(styles.bodyPlaceholderTextContainer, " ").concat((_classNames$bodyPlace2 = classNames.bodyPlaceholderTextContainer) !== null && _classNames$bodyPlace2 !== void 0 ? _classNames$bodyPlace2 : '')
-  }, /*#__PURE__*/React.createElement(UTLabel, {
-    className: "".concat(styles.bodyPlaceholderText, " ").concat((_classNames$bodyPlace3 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace3 !== void 0 ? _classNames$bodyPlace3 : ''),
-    weight: "medium",
-    variant: "subtitle1"
-  }, title), /*#__PURE__*/React.createElement(UTLabel, {
-    className: "".concat(styles.bodyPlaceholderText, " ").concat((_classNames$bodyPlace4 = classNames.bodyPlaceholderText) !== null && _classNames$bodyPlace4 !== void 0 ? _classNames$bodyPlace4 : ''),
-    variant: "small"
-  }, subtitle)));
-};
-UTBodyPlaceholder.propTypes = {
-  classNames: objectOf(string),
-  size: string,
-  subtitle: string,
-  title: string
-};
-export default UTBodyPlaceholder;
+import React from"react";import{objectOf,string}from"prop-types";import UTIcon from"../UTIcon";import UTLabel from"../UTLabel";import styles from"./styles.module.scss";import{DEFAULT_TEXTS,SIZES}from"./constants";const UTBodyPlaceholder=e=>{var t,l,o,a,c;let{classNames:s={},size:r=SIZES.L,subtitle:n=DEFAULT_TEXTS.subtitle,title:i=DEFAULT_TEXTS.title}=e;return React.createElement("div",{className:"".concat(styles.bodyPlaceholder," ").concat(styles.bodyPlaceholderWidth," ").concat(null!==(t=s.bodyPlaceholder)&&void 0!==t?t:"")},React.createElement(UTIcon,{className:"".concat(styles.icon," ").concat(null!==(l=s.icon)&&void 0!==l?l:""),name:"IconReplace",size:40}),r===SIZES.L&&React.createElement("div",{className:"".concat(styles.bodyPlaceholderTextContainer," ").concat(null!==(o=s.bodyPlaceholderTextContainer)&&void 0!==o?o:"")},React.createElement(UTLabel,{className:"".concat(styles.bodyPlaceholderText," ").concat(null!==(a=s.bodyPlaceholderText)&&void 0!==a?a:""),weight:"medium",variant:"subtitle1"},i),React.createElement(UTLabel,{className:"".concat(styles.bodyPlaceholderText," ").concat(null!==(c=s.bodyPlaceholderText)&&void 0!==c?c:""),variant:"small"},n)))};UTBodyPlaceholder.propTypes={classNames:objectOf(string),size:string,subtitle:string,title:string};export default UTBodyPlaceholder;

package/dist/esm/components/UTBreadcrumbs/constants.js

@@ -1,33 +1 @@
-export const DEFAULT_SEPARATOR = '/';
-export const DEFAULT_ELIPSIS = '...';
-export const DEFAULT_ELIPSIS_WIDTH_ESTIMATE = 100;
-export const COLOR_THEMES = {
-  DARK: 'dark',
-  LIGHT: 'light'
-};
-export const COMPONENTS_THEME_PROPS = {
-  [COLOR_THEMES.DARK]: {
-    button: {
-      colorTheme: 'secondary'
-    },
-    label: {
-      colorTheme: 'gray'
-    }
-  },
-  [COLOR_THEMES.LIGHT]: {
-    button: {
-      colorTheme: 'negative'
-    },
-    label: {
-      colorTheme: 'negative',
-      shade: '03'
-    }
-  }
-};
-
-// temporary mapper for compatibility with 'buttonColorTheme' attribute  in office-web-edenor
-export const COLOR_THEMES_MAPPER = {
-  negative: COLOR_THEMES.LIGHT,
-  primary: COLOR_THEMES.DARK,
-  secondary: COLOR_THEMES.DARK
-};
+export const DEFAULT_SEPARATOR="/";export const DEFAULT_ELIPSIS="...";export const DEFAULT_ELIPSIS_WIDTH_ESTIMATE=100;export const COLOR_THEMES={DARK:"dark",LIGHT:"light"};export const COMPONENTS_THEME_PROPS={[COLOR_THEMES.DARK]:{button:{colorTheme:"secondary"},label:{colorTheme:"gray"}},[COLOR_THEMES.LIGHT]:{button:{colorTheme:"negative"},label:{colorTheme:"negative",shade:"03"}}};export const COLOR_THEMES_MAPPER={negative:COLOR_THEMES.LIGHT,primary:COLOR_THEMES.DARK,secondary:COLOR_THEMES.DARK};

package/dist/esm/components/UTBreadcrumbs/index.js

@@ -1,213 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { object, arrayOf, bool, func, number, objectOf, shape, string } from 'prop-types';
-import WithTheme from '../WithTheme';
-import UTMenu from '../UTMenu';
-import UTButton from '../UTButton';
-import UTLabel from '../UTLabel';
-import UTTooltip from '../UTTooltip';
-import { mergeClasses } from '../../utils/classesUtils';
-import { TEST_IDS } from '../../constants/testIds';
-import { COLOR_THEMES, COLOR_THEMES_MAPPER, COMPONENTS_THEME_PROPS, DEFAULT_ELIPSIS, DEFAULT_SEPARATOR, DEFAULT_ELIPSIS_WIDTH_ESTIMATE } from './constants';
-import { retrieveStyle } from './theme';
-import styles from './styles.module.scss';
-const {
-  breadcrumbs: breadcrumbsIds
-} = TEST_IDS;
-const UTBreadcrumbs = _ref => {
-  let {
-    breadcrumbs,
-    classes: themeClasses,
-    classNames,
-    colorTheme = COLOR_THEMES.DARK,
-    disableMenu = false,
-    elipsis = DEFAULT_ELIPSIS,
-    elipsisWidthEstimate = DEFAULT_ELIPSIS_WIDTH_ESTIMATE,
-    firstItemOverflow = false,
-    menuProps = {},
-    onRedirect,
-    onSetAction,
-    separator = DEFAULT_SEPARATOR
-  } = _ref;
-  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
-  const containerRef = useRef();
-  const [content, setContent] = useState(breadcrumbs);
-  const [menu, setMenu] = useState({
-    anchor: null,
-    items: []
-  });
-  const getSectionsTotalWidth = ref => [...ref.current.children].reduce((total, currentChildren) => total + currentChildren.offsetWidth, 0);
-  const getItemsBeforeCollapse = ref => {
-    const sections = [...ref.current.children];
-    const {
-      offsetWidth: containerWidth
-    } = ref.current;
-    let itemsBeforeCollapse = 1;
-    let accumulatedWidth = 0;
-    const firstItemWidth = sections[0].offsetWidth;
-    const lastItemWidth = sections[sections.length - 2].offsetWidth;
-    const availableWidth = containerWidth - firstItemWidth - lastItemWidth - elipsisWidthEstimate;
-    sections.slice(1).forEach(section => {
-      accumulatedWidth += section.offsetWidth;
-      if (accumulatedWidth <= availableWidth) itemsBeforeCollapse += 1;
-    });
-    return itemsBeforeCollapse;
-  };
-  const truncate = () => {
-    if (!containerRef.current) return;
-    const {
-      offsetWidth: containerWidth
-    } = containerRef.current;
-    const childrenTotalWidth = getSectionsTotalWidth(containerRef);
-    if (childrenTotalWidth > containerWidth) {
-      setContent(prevContent => {
-        const isCollapsed = prevContent.some(_ref2 => {
-          let {
-            label
-          } = _ref2;
-          return label === elipsis;
-        });
-        if (isCollapsed) return prevContent;
-        if (prevContent.length <= 2) return prevContent;
-        const itemsBeforeCollapse = getItemsBeforeCollapse(containerRef);
-        return [...prevContent.slice(0, itemsBeforeCollapse), {
-          label: elipsis,
-          menuItems: prevContent.slice(itemsBeforeCollapse, prevContent.length - 1)
-        }, prevContent[prevContent.length - 1]];
-      });
-    }
-  };
-  useEffect(() => {
-    setContent(breadcrumbs);
-  }, [breadcrumbs]);
-  useEffect(() => {
-    if (containerRef.current) window.requestAnimationFrame(() => truncate());
-  }, [content]);
-  useEffect(() => {
-    window.addEventListener('resize', truncate);
-    return () => window.removeEventListener('resize', truncate);
-  }, []);
-  const handleCloseMenu = () => setMenu({
-    anchor: null,
-    items: []
-  });
-  const handleClickOptions = (options, route, id) => {
-    const indexOfCurrentBreadcrumb = breadcrumbs.findIndex(breadcrumb => breadcrumb.id === id);
-    if (indexOfCurrentBreadcrumb !== breadcrumbs.length - 1) {
-      if (options.setAction) {
-        onSetAction(options.setAction, options.params);
-      }
-      if (options.updatedBreadcrumbs) {
-        options.updatedBreadcrumbs(breadcrumbs.slice(0, indexOfCurrentBreadcrumb + 1));
-      }
-      onRedirect(route);
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.breadcrumbs,
-    ref: containerRef
-  }, content.map((_ref3, index) => {
-    let {
-      buttonColorTheme,
-      dataTestId,
-      itemClassName,
-      label,
-      menuItems,
-      route,
-      options = {},
-      id = crypto.randomUUID(),
-      showTooltip = false,
-      tooltipLabel = label
-    } = _ref3;
-    const handleClick = event => {
-      if (menuItems) setMenu({
-        anchor: event.currentTarget,
-        items: menuItems.map(_ref4 => {
-          let {
-            label: menuItemLabel,
-            route: menuItemRoute,
-            options: menuItemOptions,
-            id: menuItemId
-          } = _ref4;
-          return {
-            label: menuItemLabel,
-            onClick: () => {
-              setContent(breadcrumbs);
-              handleCloseMenu();
-              handleClickOptions(menuItemOptions, menuItemRoute, menuItemId);
-            }
-          };
-        })
-      });else handleClickOptions(options, route, id);
-    };
-    const isLast = index === content.length - 1;
-    const overflowControl = index === 0 && firstItemOverflow;
-    const colorThemesDefinition = buttonColorTheme ? COMPONENTS_THEME_PROPS[COLOR_THEMES_MAPPER[buttonColorTheme]] : COMPONENTS_THEME_PROPS[colorTheme];
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(styles.section, " ").concat(overflowControl && styles.firstItem),
-      key: "".concat(route, "-").concat(label)
-    }, !route && !menuItems || disableMenu ? /*#__PURE__*/React.createElement(UTLabel, _extends({
-      className: styles.label,
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
-      variant: "small",
-      weight: "medium"
-    }, colorThemesDefinition.label), label) : showTooltip ? /*#__PURE__*/React.createElement(UTTooltip, {
-      content: tooltipLabel,
-      interactive: false,
-      tippyProps: {
-        appendTo: () => document.body,
-        trigger: 'mouseenter',
-        hideOnClick: false
-      }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(UTButton, _extends({
-      classNames: {
-        root: itemClassName,
-        childrenContainer: overflowControl ? styles.buttonContainer : null,
-        text: overflowControl ? styles.ellipsis : isLast && content.length > 1 ? styles.lastBreadcrumb : null
-      },
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
-      onClick: handleClick,
-      size: "small",
-      variant: "text"
-    }, colorThemesDefinition.button), "".concat(label)))) : /*#__PURE__*/React.createElement(UTButton, _extends({
-      classNames: {
-        root: itemClassName,
-        childrenContainer: overflowControl ? styles.buttonContainer : null,
-        text: overflowControl ? styles.ellipsis : isLast && content.length > 1 ? styles.lastBreadcrumb : null
-      },
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
-      onClick: handleClick,
-      size: "small",
-      variant: "text"
-    }, colorThemesDefinition.button), "".concat(label)), !isLast && /*#__PURE__*/React.createElement(UTLabel, _extends({
-      className: classes.separator,
-      variant: "small",
-      weight: "medium"
-    }, colorThemesDefinition.label), separator));
-  }), !disableMenu && /*#__PURE__*/React.createElement(UTMenu, _extends({
-    anchor: menu.anchor,
-    items: menu.items
-  }, menuProps, {
-    onClose: handleCloseMenu
-  })));
-};
-UTBreadcrumbs.propTypes = {
-  breadcrumbs: arrayOf(shape({
-    label: string,
-    route: string,
-    showTooltip: bool,
-    tooltipLabel: string
-  })),
-  classes: objectOf(string),
-  classNames: objectOf(string),
-  colorTheme: string,
-  disableMenu: bool,
-  elipsis: string,
-  elipsisWidthEstimate: number,
-  firstItemOverflow: bool,
-  onRedirect: func,
-  onSetAction: func,
-  menuProps: object,
-  separator: string
-};
-export default WithTheme(retrieveStyle)(UTBreadcrumbs);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var s=arguments[t];for(var r in s)({}).hasOwnProperty.call(s,r)&&(e[r]=s[r])}return e},_extends.apply(null,arguments)}import React,{useEffect,useRef,useState,useMemo}from"react";import{object,arrayOf,bool,func,number,objectOf,shape,string}from"prop-types";import WithTheme from"../WithTheme";import UTMenu from"../UTMenu";import UTButton from"../UTButton";import UTLabel from"../UTLabel";import UTTooltip from"../UTTooltip";import{mergeClasses}from"../../utils/classesUtils";import{TEST_IDS}from"../../constants/testIds";import{COLOR_THEMES,COLOR_THEMES_MAPPER,COMPONENTS_THEME_PROPS,DEFAULT_ELIPSIS,DEFAULT_SEPARATOR,DEFAULT_ELIPSIS_WIDTH_ESTIMATE}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const{breadcrumbs:breadcrumbsIds}=TEST_IDS,UTBreadcrumbs=e=>{let{breadcrumbs:t,classes:s,classNames:r,colorTheme:n=COLOR_THEMES.DARK,disableMenu:o=!1,elipsis:a=DEFAULT_ELIPSIS,elipsisWidthEstimate:c=DEFAULT_ELIPSIS_WIDTH_ESTIMATE,firstItemOverflow:l=!1,menuProps:i={},onRedirect:m,onSetAction:u,separator:d=DEFAULT_SEPARATOR}=e;const T=useMemo(()=>mergeClasses(s,r),[r]),b=useRef(),[f,p]=useState(t),[E,h]=useState({anchor:null,items:[]}),S=()=>{if(!b.current)return;const{offsetWidth:e}=b.current;[...b.current.children].reduce((e,t)=>e+t.offsetWidth,0)>e&&p(e=>{if(e.some(e=>{let{label:t}=e;return t===a}))return e;if(e.length<=2)return e;const t=(e=>{const t=[...e.current.children],{offsetWidth:s}=e.current;let r=1,n=0;const o=s-t[0].offsetWidth-t[t.length-2].offsetWidth-c;return t.slice(1).forEach(e=>{n+=e.offsetWidth,n<=o&&(r+=1)}),r})(b);return[...e.slice(0,t),{label:a,menuItems:e.slice(t,e.length-1)},e[e.length-1]]})};useEffect(()=>{p(t)},[t]),useEffect(()=>{b.current&&window.requestAnimationFrame(()=>S())},[f]),useEffect(()=>(window.addEventListener("resize",S),()=>window.removeEventListener("resize",S)),[]);const _=()=>h({anchor:null,items:[]}),I=(e,s,r)=>{const n=t.findIndex(e=>e.id===r);n!==t.length-1&&(e.setAction&&u(e.setAction,e.params),e.updatedBreadcrumbs&&e.updatedBreadcrumbs(t.slice(0,n+1)),m(s))};return React.createElement("div",{className:styles.breadcrumbs,ref:b},f.map((e,s)=>{let{buttonColorTheme:r,dataTestId:a,itemClassName:c,label:i,menuItems:m,route:u,options:b={},id:E=crypto.randomUUID(),showTooltip:S=!1,tooltipLabel:O=i}=e;const R=e=>{m?h({anchor:e.currentTarget,items:m.map(e=>{let{label:s,route:r,options:n,id:o}=e;return{label:s,onClick:()=>{p(t),_(),I(n,r,o)}}})}):I(b,u,E)},g=s===f.length-1,U=0===s&&l,y=r?COMPONENTS_THEME_PROPS[COLOR_THEMES_MAPPER[r]]:COMPONENTS_THEME_PROPS[n];return React.createElement("div",{className:"".concat(styles.section," ").concat(U&&styles.firstItem),key:"".concat(u,"-").concat(i)},!u&&!m||o?React.createElement(UTLabel,_extends({className:styles.label,dataTestId:a?"".concat(a,".").concat(s):"".concat(breadcrumbsIds.item,".").concat(s),variant:"small",weight:"medium"},y.label),i):S?React.createElement(UTTooltip,{content:O,interactive:!1,tippyProps:{appendTo:()=>document.body,trigger:"mouseenter",hideOnClick:!1}},React.createElement("span",null,React.createElement(UTButton,_extends({classNames:{root:c,childrenContainer:U?styles.buttonContainer:null,text:U?styles.ellipsis:g&&f.length>1?styles.lastBreadcrumb:null},dataTestId:a?"".concat(a,".").concat(s):"".concat(breadcrumbsIds.item,".").concat(s),onClick:R,size:"small",variant:"text"},y.button),"".concat(i)))):React.createElement(UTButton,_extends({classNames:{root:c,childrenContainer:U?styles.buttonContainer:null,text:U?styles.ellipsis:g&&f.length>1?styles.lastBreadcrumb:null},dataTestId:a?"".concat(a,".").concat(s):"".concat(breadcrumbsIds.item,".").concat(s),onClick:R,size:"small",variant:"text"},y.button),"".concat(i)),!g&&React.createElement(UTLabel,_extends({className:T.separator,variant:"small",weight:"medium"},y.label),d))}),!o&&React.createElement(UTMenu,_extends({anchor:E.anchor,items:E.items},i,{onClose:_})))};UTBreadcrumbs.propTypes={breadcrumbs:arrayOf(shape({label:string,route:string,showTooltip:bool,tooltipLabel:string})),classes:objectOf(string),classNames:objectOf(string),colorTheme:string,disableMenu:bool,elipsis:string,elipsisWidthEstimate:number,firstItemOverflow:bool,onRedirect:func,onSetAction:func,menuProps:object,separator:string};export default WithTheme(retrieveStyle)(UTBreadcrumbs);

package/dist/esm/components/UTBreadcrumbs/theme.js

@@ -1,12 +1 @@
-import { withImportant } from '../../utils/classesUtils';
-export const retrieveStyle = _ref => {
-  var _theme$UTBreadcrumbs;
-  let {
-    theme
-  } = _ref;
-  return {
-    separator: {
-      margin: withImportant((theme === null || theme === void 0 || (_theme$UTBreadcrumbs = theme.UTBreadcrumbs) === null || _theme$UTBreadcrumbs === void 0 || (_theme$UTBreadcrumbs = _theme$UTBreadcrumbs.separator) === null || _theme$UTBreadcrumbs === void 0 ? void 0 : _theme$UTBreadcrumbs.margin) || '0 12px')
-    }
-  };
-};
+import{withImportant}from"../../utils/classesUtils";export const retrieveStyle=r=>{var t;let{theme:e}=r;return{separator:{margin:withImportant((null==e||null===(t=e.UTBreadcrumbs)||void 0===t||null===(t=t.separator)||void 0===t?void 0:t.margin)||"0 12px")}}};

package/dist/esm/components/UTButton/constants.js

@@ -1,44 +1 @@
-import { COLOR_THEMES } from '../../constants/Palette';
-export const VARIANTS_NAMES = {
-  filled: 'filled',
-  outlined: 'outlined',
-  semitransparent: 'semitransparent',
-  shadow: 'shadow',
-  text: 'text'
-};
-export const SIZES = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-export const ICON_PLACEMENTS = {
-  left: 'left',
-  right: 'right'
-};
-export const DEFAULT_PROPS = {
-  colorTheme: 'secondary',
-  disabled: false,
-  fullHeight: false,
-  fullWidth: false,
-  hideTextOnResponsive: false,
-  iconPlacement: ICON_PLACEMENTS.left,
-  loading: false,
-  size: SIZES.medium,
-  variant: 'filled'
-};
-export const COLORS_MAPPER = {
-  error: COLOR_THEMES.error,
-  gray: COLOR_THEMES.gray,
-  negative: COLOR_THEMES.negative,
-  primary: COLOR_THEMES.accent,
-  secondary: COLOR_THEMES.neutral,
-  success: COLOR_THEMES.success,
-  light: COLOR_THEMES.light
-};
-export const SHADOW_MAPPER = {
-  [COLORS_MAPPER.error]: 'semanticError',
-  [COLORS_MAPPER.negative]: 'actionNeutral',
-  [COLORS_MAPPER.primary]: 'actionAccent',
-  [COLORS_MAPPER.secondary]: 'grayscale',
-  [COLORS_MAPPER.gray]: 'grayscale'
-};
+import{COLOR_THEMES}from"../../constants/Palette";export const VARIANTS_NAMES={filled:"filled",outlined:"outlined",semitransparent:"semitransparent",shadow:"shadow",text:"text"};export const SIZES={small:"small",medium:"medium",large:"large"};export const ICON_PLACEMENTS={left:"left",right:"right"};export const DEFAULT_PROPS={colorTheme:"secondary",disabled:!1,fullHeight:!1,fullWidth:!1,hideTextOnResponsive:!1,iconPlacement:ICON_PLACEMENTS.left,loading:!1,size:SIZES.medium,variant:"filled"};export const COLORS_MAPPER={error:COLOR_THEMES.error,gray:COLOR_THEMES.gray,negative:COLOR_THEMES.negative,primary:COLOR_THEMES.accent,secondary:COLOR_THEMES.neutral,success:COLOR_THEMES.success,light:COLOR_THEMES.light};export const SHADOW_MAPPER={[COLORS_MAPPER.error]:"semanticError",[COLORS_MAPPER.negative]:"actionNeutral",[COLORS_MAPPER.primary]:"actionAccent",[COLORS_MAPPER.secondary]:"grayscale",[COLORS_MAPPER.gray]:"grayscale"};

package/dist/esm/components/UTButton/index.js

@@ -1,115 +1 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useMemo } from 'react';
-import { bool, func, elementType, object, objectOf, string, number } from 'prop-types';
-import Button from '@material-ui/core/Button';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { capitalize } from '../../utils/componentUtils';
-import { mergeClasses } from '../../utils/classesUtils';
-import UTBadge from '../UTBadge';
-import UTLabel from '../UTLabel';
-import WithTheme from '../WithTheme';
-import { getCounterColorTheme, getIconProps, getLabelProps } from './utils';
-import { DEFAULT_PROPS } from './constants';
-import { retrieveStyle } from './theme';
-import styles from './styles.module.scss';
-const UTButton = _ref => {
-  let {
-    children,
-    classes: theme,
-    classNames,
-    colorTheme,
-    count,
-    dataTestId,
-    disabled,
-    fullHeight,
-    fullWidth,
-    hideTextOnResponsive,
-    Icon,
-    iconPlacement,
-    LeftIcon,
-    leftIconProps,
-    loading,
-    onClick,
-    RightIcon,
-    rightIconProps,
-    size,
-    type,
-    variant
-  } = _ref;
-  const classes = useMemo(() => mergeClasses(theme, classNames), [classNames, theme]);
-  const {
-    childrenContainer,
-    circularProgress,
-    icon,
-    text: textClassName,
-    ...materialButtonClasses
-  } = classes;
-  const {
-    LeftIconComponent,
-    leftIconProps: leftIconBaseProps,
-    RightIconComponent,
-    rightIconProps: rightIconBaseProps
-  } = useMemo(() => getIconProps({
-    className: icon,
-    colorTheme,
-    hideTextOnResponsive,
-    Icon,
-    iconPlacement,
-    LeftIcon,
-    RightIcon,
-    size,
-    variant
-  }), [colorTheme, hideTextOnResponsive, icon, Icon, iconPlacement, LeftIcon, RightIcon, size, variant]);
-  const LeftIconToShow = LeftIconComponent && /*#__PURE__*/React.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
-  const RightIconToShow = RightIconComponent && /*#__PURE__*/React.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
-  const counterColorTheme = getCounterColorTheme(colorTheme, variant);
-  const labelProps = getLabelProps(colorTheme, variant, size);
-  const RenderedChildren = /*#__PURE__*/React.createElement("div", {
-    className: "".concat(childrenContainer, " ").concat(styles["".concat(size, "ChildrenContainer")])
-  }, count && /*#__PURE__*/React.createElement(UTBadge, {
-    colorTheme: counterColorTheme
-  }, count), LeftIconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/React.createElement(UTLabel, _extends({}, labelProps, {
-    className: "".concat(styles.textContainer, " ").concat(textClassName)
-  }), children), RightIconToShow);
-  return /*#__PURE__*/React.createElement(Button, {
-    classes: materialButtonClasses,
-    className: "\n        ".concat(styles["padding".concat(capitalize(size))], "\n        ").concat(fullHeight && styles.fullHeight, "\n        ").concat(fullWidth && styles.fullWidth, "\n        ").concat(hideTextOnResponsive && styles.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && styles.noChildren, "\n      "),
-    "data-testid": dataTestId,
-    disabled: disabled || loading,
-    onClick: onClick,
-    type: type
-  }, RenderedChildren, loading && /*#__PURE__*/React.createElement(CircularProgress, {
-    size: 24,
-    className: "".concat(styles.loading, " ").concat(circularProgress)
-  }));
-};
-UTButton.defaultProps = DEFAULT_PROPS;
-UTButton.propTypes = {
-  classes: objectOf(string),
-  classNames: objectOf(string),
-  colorTheme: string,
-  count: number,
-  dataTestId: string,
-  disabled: bool,
-  fullHeight: bool,
-  fullWidth: bool,
-  hideTextOnResponsive: bool,
-  /**
-   * @deprecated Use LeftIcon or RightIcon instead.
-   */
-  Icon: elementType,
-  /**
-   * @deprecated Use LeftIcon or RightIcon instead.
-   */
-  iconPlacement: string,
-  LeftIcon: elementType,
-  leftIconProps: object,
-  loading: bool,
-  onClick: func,
-  RightIcon: elementType,
-  rightIconProps: object,
-  size: string,
-  type: string,
-  variant: string
-};
-export default WithTheme(retrieveStyle)(UTButton);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var n in o)({}).hasOwnProperty.call(o,n)&&(e[n]=o[n])}return e},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{bool,func,elementType,object,objectOf,string,number}from"prop-types";import Button from"@material-ui/core/Button";import CircularProgress from"@material-ui/core/CircularProgress";import{capitalize}from"../../utils/componentUtils";import{mergeClasses}from"../../utils/classesUtils";import UTBadge from"../UTBadge";import UTLabel from"../UTLabel";import WithTheme from"../WithTheme";import{getCounterColorTheme,getIconProps,getLabelProps}from"./utils";import{DEFAULT_PROPS}from"./constants";import{retrieveStyle}from"./theme";import styles from"./styles.module.scss";const UTButton=e=>{let{children:t,classes:o,classNames:n,colorTheme:s,count:r,dataTestId:c,disabled:l,fullHeight:a,fullWidth:i,hideTextOnResponsive:m,Icon:p,iconPlacement:u,LeftIcon:d,leftIconProps:g,loading:f,onClick:h,RightIcon:T,rightIconProps:b,size:y,type:P,variant:I}=e;const C=useMemo(()=>mergeClasses(o,n),[n,o]),{childrenContainer:R,circularProgress:U,icon:v,text:x,...O}=C,{LeftIconComponent:L,leftIconProps:B,RightIconComponent:E,rightIconProps:j}=useMemo(()=>getIconProps({className:v,colorTheme:s,hideTextOnResponsive:m,Icon:p,iconPlacement:u,LeftIcon:d,RightIcon:T,size:y,variant:I}),[s,m,v,p,u,d,T,y,I]),_=L&&React.createElement(L,_extends({},B,g)),N=E&&React.createElement(E,_extends({},j,b)),z=getCounterColorTheme(s,I),W=getLabelProps(s,I,y),S=React.createElement("div",{className:"".concat(R," ").concat(styles["".concat(y,"ChildrenContainer")])},r&&React.createElement(UTBadge,{colorTheme:z},r),_,null!=t&&!1!==t&&React.createElement(UTLabel,_extends({},W,{className:"".concat(styles.textContainer," ").concat(x)}),t),N);return React.createElement(Button,{classes:O,className:"\n        ".concat(styles["padding".concat(capitalize(y))],"\n        ").concat(a&&styles.fullHeight,"\n        ").concat(i&&styles.fullWidth,"\n        ").concat(m&&styles.hideTextOnResponsive,"\n        ").concat(!m&&!t&&styles.noChildren,"\n      "),"data-testid":c,disabled:l||f,onClick:h,type:P},S,f&&React.createElement(CircularProgress,{size:24,className:"".concat(styles.loading," ").concat(U)}))};UTButton.defaultProps=DEFAULT_PROPS,UTButton.propTypes={classes:objectOf(string),classNames:objectOf(string),colorTheme:string,count:number,dataTestId:string,disabled:bool,fullHeight:bool,fullWidth:bool,hideTextOnResponsive:bool,Icon:elementType,iconPlacement:string,LeftIcon:elementType,leftIconProps:object,loading:bool,onClick:func,RightIcon:elementType,rightIconProps:object,size:string,type:string,variant:string};export default WithTheme(retrieveStyle)(UTButton);

package/dist/esm/components/UTButton/theme.js

@@ -1,136 +1 @@
-import { withImportant } from '../../utils/classesUtils';
-import { getShadow } from '../../utils/shadowUtils';
-import { COLORS_MAPPER, DEFAULT_PROPS, SHADOW_MAPPER, VARIANTS_NAMES } from './constants';
-export const variantsColorTheme = (theme, colorTheme, variant) => {
-  var _theme$Palette, _theme$Palette$shadow;
-  const actionColorName = COLORS_MAPPER[colorTheme] || COLORS_MAPPER[DEFAULT_PROPS.colorTheme];
-  const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const actionTheme = actionPaletteColors[actionColorName];
-  const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[SHADOW_MAPPER[actionColorName]]) || 'transparent';
-  const negativeTheme = actionPaletteColors[COLORS_MAPPER.negative];
-  const neutralTheme = actionPaletteColors[COLORS_MAPPER.secondary];
-  const lightTheme = actionPaletteColors[COLORS_MAPPER.light];
-  const definition = {
-    [VARIANTS_NAMES.filled]: {
-      backgroundColor: actionTheme['04'],
-      border: '1px solid transparent',
-      fill: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
-        boxShadow: getShadow({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-        boxShadow: getShadow({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    },
-    [VARIANTS_NAMES.semitransparent]: {
-      backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-      border: '1px solid transparent',
-      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
-        boxShadow: 'none'
-      }
-    },
-    [VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(lightTheme['04']),
-      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [VARIANTS_NAMES.text]: {
-      border: '1px solid transparent',
-      fill: colorTheme === COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [VARIANTS_NAMES.shadow]: {
-      backgroundColor: colorTheme === COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      boxShadow: getShadow({
-        color: shadowTheme,
-        level: 1
-      }),
-      border: '1px solid transparent',
-      fill: actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: getShadow({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: getShadow({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    }
-  };
-  const disabledStyle = {
-    opacity: withImportant(0.5),
-    '&.MuiButton-root:hover.Mui-disabled': {
-      backgroundColor: (definition[variant] || definition[DEFAULT_PROPS.variant]).backgroundColor
-    }
-  };
-  return {
-    ...(definition[variant] || definition[DEFAULT_PROPS.variant]),
-    disabled: disabledStyle
-  };
-};
-const baseButtonTheme = theme => {
-  var _theme$UTButton;
-  return {
-    root: {
-      borderRadius: 'var(--UT-button-radius, 0.25rem)',
-      boxShadow: 'none',
-      minWidth: 'auto',
-      textTransform: 'none',
-      transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms'
-    },
-    circularProgress: {
-      color: ((_theme$UTButton = theme.UTButton) === null || _theme$UTButton === void 0 || (_theme$UTButton = _theme$UTButton.circularProgress) === null || _theme$UTButton === void 0 ? void 0 : _theme$UTButton.color) || '484848'
-    }
-  };
-};
-export const retrieveStyle = _ref => {
-  let {
-    colorTheme,
-    variant,
-    theme
-  } = _ref;
-  const baseTheme = baseButtonTheme(theme);
-  const variantTheme = variantsColorTheme(theme, colorTheme, variant);
-  return {
-    ...baseTheme,
-    disabled: variantTheme.disabled,
-    root: {
-      ...baseTheme.root,
-      ...variantTheme
-    }
-  };
-};
+import{withImportant}from"../../utils/classesUtils";import{getShadow}from"../../utils/shadowUtils";import{COLORS_MAPPER,DEFAULT_PROPS,SHADOW_MAPPER,VARIANTS_NAMES}from"./constants";export const variantsColorTheme=(o,r,a)=>{var e,t;const l=COLORS_MAPPER[r]||COLORS_MAPPER[DEFAULT_PROPS.colorTheme],n=(null===(e=o.Palette)||void 0===e?void 0:e.actions)||o.Palette,d=n[l],i=(null===(t=o.Palette.shadows)||void 0===t?void 0:t[SHADOW_MAPPER[l]])||"transparent",P=n[COLORS_MAPPER.negative],c=n[COLORS_MAPPER.secondary],s=n[COLORS_MAPPER.light],S={[VARIANTS_NAMES.filled]:{backgroundColor:d["04"],border:"1px solid transparent",fill:r===COLORS_MAPPER.negative?c["05"]:P["05"],"&:hover":{backgroundColor:r===COLORS_MAPPER.gray?d["05"]:d["03"],boxShadow:getShadow({color:i,level:2})},"&:active":{backgroundColor:r===COLORS_MAPPER.gray?d["04"]:d["05"],boxShadow:getShadow({color:i,level:2})}},[VARIANTS_NAMES.semitransparent]:{backgroundColor:r===COLORS_MAPPER.gray?s["03"]:d["01"],border:"1px solid transparent",fill:r===COLORS_MAPPER.gray?d["04"]:d["05"],"&:hover":{backgroundColor:r===COLORS_MAPPER.gray?s["04"]:d["02"],boxShadow:"none"},"&:active":{backgroundColor:r===COLORS_MAPPER.gray?s["05"]:d["03"],boxShadow:"none"}},[VARIANTS_NAMES.outlined]:{border:"1px solid ".concat(s["04"]),fill:r===COLORS_MAPPER.gray?d["04"]:d["05"],"&:hover":{backgroundColor:r===COLORS_MAPPER.gray?s["03"]:d["01"],boxShadow:"none"},"&:active":{backgroundColor:r===COLORS_MAPPER.gray?s["04"]:d["02"],boxShadow:"none"}},[VARIANTS_NAMES.text]:{border:"1px solid transparent",fill:r===COLORS_MAPPER.gray?d["04"]:d["05"],"&:hover":{backgroundColor:r===COLORS_MAPPER.gray?s["03"]:d["01"],boxShadow:"none"},"&:active":{backgroundColor:r===COLORS_MAPPER.gray?s["04"]:d["02"],boxShadow:"none"}},[VARIANTS_NAMES.shadow]:{backgroundColor:r===COLORS_MAPPER.negative?c["05"]:P["05"],boxShadow:getShadow({color:i,level:1}),border:"1px solid transparent",fill:d["05"],"&:hover":{backgroundColor:r===COLORS_MAPPER.gray?s["03"]:d["01"],boxShadow:getShadow({color:i,level:2})},"&:active":{backgroundColor:r===COLORS_MAPPER.gray?s["04"]:d["02"],boxShadow:getShadow({color:i,level:2})}}},R={opacity:withImportant(.5),"&.MuiButton-root:hover.Mui-disabled":{backgroundColor:(S[a]||S[DEFAULT_PROPS.variant]).backgroundColor}};return{...S[a]||S[DEFAULT_PROPS.variant],disabled:R}};const baseButtonTheme=o=>{var r;return{root:{borderRadius:"var(--UT-button-radius, 0.25rem)",boxShadow:"none",minWidth:"auto",textTransform:"none",transition:"background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms"},circularProgress:{color:(null===(r=o.UTButton)||void 0===r||null===(r=r.circularProgress)||void 0===r?void 0:r.color)||"484848"}}};export const retrieveStyle=o=>{let{colorTheme:r,variant:a,theme:e}=o;const t=baseButtonTheme(e),l=variantsColorTheme(e,r,a);return{...t,disabled:l.disabled,root:{...t.root,...l}}};