@widergy/energy-ui 3.172.1 → 3.172.3

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(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,UTBreadcrumbs=_ref=>{let{breadcrumbs:breadcrumbs,classes:themeClasses,classNames:classNames,colorTheme:colorTheme=COLOR_THEMES.DARK,disableMenu:disableMenu=!1,elipsis:elipsis=DEFAULT_ELIPSIS,elipsisWidthEstimate:elipsisWidthEstimate=DEFAULT_ELIPSIS_WIDTH_ESTIMATE,firstItemOverflow:firstItemOverflow=!1,menuProps:menuProps={},onRedirect:onRedirect,onSetAction:onSetAction,separator:separator=DEFAULT_SEPARATOR}=_ref;const classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]),containerRef=useRef(),[content,setContent]=useState(breadcrumbs),[menu,setMenu]=useState({anchor:null,items:[]}),truncate=()=>{if(!containerRef.current)return;const{offsetWidth:containerWidth}=containerRef.current;[...containerRef.current.children].reduce((total,currentChildren)=>total+currentChildren.offsetWidth,0)>containerWidth&&setContent(prevContent=>{if(prevContent.some(_ref2=>{let{label:label}=_ref2;return label===elipsis}))return prevContent;if(prevContent.length<=2)return prevContent;const itemsBeforeCollapse=(ref=>{const sections=[...ref.current.children],{offsetWidth:containerWidth}=ref.current;let itemsBeforeCollapse=1,accumulatedWidth=0;const availableWidth=containerWidth-sections[0].offsetWidth-sections[sections.length-2].offsetWidth-elipsisWidthEstimate;return sections.slice(1).forEach(section=>{accumulatedWidth+=section.offsetWidth,accumulatedWidth<=availableWidth&&(itemsBeforeCollapse+=1)}),itemsBeforeCollapse})(containerRef);return[...prevContent.slice(0,itemsBeforeCollapse),{label:elipsis,menuItems:prevContent.slice(itemsBeforeCollapse,prevContent.length-1)},prevContent[prevContent.length-1]]})};useEffect(()=>{setContent(breadcrumbs)},[breadcrumbs]),useEffect(()=>{containerRef.current&&window.requestAnimationFrame(()=>truncate())},[content]),useEffect(()=>(window.addEventListener("resize",truncate),()=>window.removeEventListener("resize",truncate)),[]);const handleCloseMenu=()=>setMenu({anchor:null,items:[]}),handleClickOptions=(options,route,id)=>{const indexOfCurrentBreadcrumb=breadcrumbs.findIndex(breadcrumb=>breadcrumb.id===id);indexOfCurrentBreadcrumb!==breadcrumbs.length-1&&(options.setAction&&onSetAction(options.setAction,options.params),options.updatedBreadcrumbs&&options.updatedBreadcrumbs(breadcrumbs.slice(0,indexOfCurrentBreadcrumb+1)),onRedirect(route))};return React.createElement("div",{className:styles.breadcrumbs,ref:containerRef},content.map((_ref3,index)=>{let{buttonColorTheme:buttonColorTheme,dataTestId:dataTestId,itemClassName:itemClassName,label:label,menuItems:menuItems,route:route,options:options={},id:id=crypto.randomUUID(),showTooltip:showTooltip=!1,tooltipLabel:tooltipLabel=label}=_ref3;const handleClick=event=>{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)}}})}):handleClickOptions(options,route,id)},isLast=index===content.length-1,overflowControl=0===index&&firstItemOverflow,colorThemesDefinition=buttonColorTheme?COMPONENTS_THEME_PROPS[COLOR_THEMES_MAPPER[buttonColorTheme]]:COMPONENTS_THEME_PROPS[colorTheme];return React.createElement("div",{className:"".concat(styles.section," ").concat(overflowControl&&styles.firstItem),key:"".concat(route,"-").concat(label)},!route&&!menuItems||disableMenu?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?React.createElement(UTTooltip,{content:tooltipLabel,interactive:!1,tippyProps:{appendTo:()=>document.body,trigger:"mouseenter",hideOnClick:!1}},React.createElement("span",null,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)))):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&&React.createElement(UTLabel,_extends({className:classes.separator,variant:"small",weight:"medium"},colorThemesDefinition.label),separator))}),!disableMenu&&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);

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=_ref=>{var _theme$UTBreadcrumbs;let{theme:theme}=_ref;return{separator:{margin:withImportant((null==theme||null===(_theme$UTBreadcrumbs=theme.UTBreadcrumbs)||void 0===_theme$UTBreadcrumbs||null===(_theme$UTBreadcrumbs=_theme$UTBreadcrumbs.separator)||void 0===_theme$UTBreadcrumbs?void 0:_theme$UTBreadcrumbs.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(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:children,classes:theme,classNames:classNames,colorTheme:colorTheme,count:count,dataTestId:dataTestId,disabled:disabled,fullHeight:fullHeight,fullWidth:fullWidth,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,iconPlacement:iconPlacement,LeftIcon:LeftIcon,leftIconProps:leftIconProps,loading:loading,onClick:onClick,RightIcon:RightIcon,rightIconProps:rightIconProps,size:size,type:type,variant:variant}=_ref;const classes=useMemo(()=>mergeClasses(theme,classNames),[classNames,theme]),{childrenContainer:childrenContainer,circularProgress:circularProgress,icon:icon,text:textClassName,...materialButtonClasses}=classes,{LeftIconComponent:LeftIconComponent,leftIconProps:leftIconBaseProps,RightIconComponent:RightIconComponent,rightIconProps:rightIconBaseProps}=useMemo(()=>getIconProps({className:icon,colorTheme:colorTheme,hideTextOnResponsive:hideTextOnResponsive,Icon:Icon,iconPlacement:iconPlacement,LeftIcon:LeftIcon,RightIcon:RightIcon,size:size,variant:variant}),[colorTheme,hideTextOnResponsive,icon,Icon,iconPlacement,LeftIcon,RightIcon,size,variant]),LeftIconToShow=LeftIconComponent&&React.createElement(LeftIconComponent,_extends({},leftIconBaseProps,leftIconProps)),RightIconToShow=RightIconComponent&&React.createElement(RightIconComponent,_extends({},rightIconBaseProps,rightIconProps)),counterColorTheme=getCounterColorTheme(colorTheme,variant),labelProps=getLabelProps(colorTheme,variant,size),RenderedChildren=React.createElement("div",{className:"".concat(childrenContainer," ").concat(styles["".concat(size,"ChildrenContainer")])},count&&React.createElement(UTBadge,{colorTheme:counterColorTheme},count),LeftIconToShow,null!=children&&!1!==children&&React.createElement(UTLabel,_extends({},labelProps,{className:"".concat(styles.textContainer," ").concat(textClassName)}),children),RightIconToShow);return 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&&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,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/stories/storiesConstants.js

@@ -1,263 +1 @@
-import { joinArgTypes } from 'stories/utils';
-import { VARIANTS_NAMES, SIZES, DEFAULT_PROPS, COLORS_MAPPER } from '../constants';
-
-// Common argTypes used across multiple stories files
-export const COMMON_ARG_TYPES = {
-  children: {
-    control: 'text',
-    description: 'Contenido del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'node'
-      }
-    }
-  },
-  classes: {
-    control: false,
-    description: 'Clases personalizadas para sobrescribir el tema del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  classNames: {
-    control: false,
-    description: 'Clases personalizadas para sobrescribir el tema del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  colorTheme: {
-    control: 'select',
-    description: 'Tema de color del botón.',
-    options: Object.keys(COLORS_MAPPER),
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.colorTheme
-      },
-      type: {
-        summary: joinArgTypes(Object.keys(COLORS_MAPPER))
-      }
-    }
-  },
-  count: {
-    control: 'number',
-    description: 'Número a mostrar en un badge dentro del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'number'
-      }
-    }
-  },
-  dataTestId: {
-    control: 'text',
-    description: 'Identificador de test para el botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón está deshabilitado.',
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.disabled
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  fullHeight: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.',
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.fullHeight
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  fullWidth: {
-    control: 'boolean',
-    description: 'Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.',
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.fullWidth
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  hideTextOnResponsive: {
-    control: 'boolean',
-    description: 'Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.',
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.hideTextOnResponsive
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  LeftIcon: {
-    control: 'text',
-    description: 'Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: joinArgTypes(['string', 'ReactComponent'])
-      }
-    }
-  },
-  leftIconProps: {
-    control: false,
-    description: 'Props adicionales a aplicar al ícono izquierdo.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  loading: {
-    control: 'boolean',
-    description: 'Si es `true`, se muestra un spinner sobre el botón.',
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.loading
-      },
-      type: {
-        summary: 'boolean'
-      }
-    }
-  },
-  onClick: {
-    control: false,
-    description: 'Callback ejecutado cuando se hace clic en el botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'function'
-      }
-    }
-  },
-  RightIcon: {
-    control: 'text',
-    description: 'Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: joinArgTypes(['string', 'ReactComponent'])
-      }
-    }
-  },
-  rightIconProps: {
-    control: false,
-    description: 'Props adicionales a aplicar al ícono derecho.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'object'
-      }
-    }
-  },
-  size: {
-    control: 'inline-radio',
-    description: 'Tamaño del botón.',
-    options: Object.values(SIZES),
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.size
-      },
-      type: {
-        summary: joinArgTypes(Object.values(SIZES))
-      }
-    }
-  },
-  type: {
-    control: 'text',
-    description: 'Atributo HTML type del botón.',
-    table: {
-      defaultValue: {
-        summary: 'undefined'
-      },
-      type: {
-        summary: 'string'
-      }
-    }
-  },
-  variant: {
-    control: 'select',
-    description: 'Variante del botón.',
-    options: Object.values(VARIANTS_NAMES),
-    table: {
-      defaultValue: {
-        summary: DEFAULT_PROPS.variant
-      },
-      type: {
-        summary: joinArgTypes(Object.values(VARIANTS_NAMES))
-      }
-    }
-  }
-};
-
-// Common args used across multiple stories files
-export const COMMON_ARGS = {
-  colorTheme: DEFAULT_PROPS.colorTheme,
-  dataTestId: 'customButtonId',
-  disabled: DEFAULT_PROPS.disabled,
-  fullHeight: DEFAULT_PROPS.fullHeight,
-  fullWidth: DEFAULT_PROPS.fullWidth,
-  hideTextOnResponsive: DEFAULT_PROPS.hideTextOnResponsive,
-  loading: DEFAULT_PROPS.loading,
-  size: DEFAULT_PROPS.size,
-  type: 'button',
-  variant: DEFAULT_PROPS.variant
-};
-
-// Common parameters used across multiple stories files
-export const COMMON_PARAMETERS = {
-  controls: {
-    exclude: ['classes', 'classNames', 'onClick']
-  },
-  docs: {
-    description: {
-      component: 'Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable.'
-    }
-  }
-};
+import{joinArgTypes}from"stories/utils";import{VARIANTS_NAMES,SIZES,DEFAULT_PROPS,COLORS_MAPPER}from"../constants";export const COMMON_ARG_TYPES={children:{control:"text",description:"Contenido del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"node"}}},classes:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},classNames:{control:!1,description:"Clases personalizadas para sobrescribir el tema del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},colorTheme:{control:"select",description:"Tema de color del botón.",options:Object.keys(COLORS_MAPPER),table:{defaultValue:{summary:DEFAULT_PROPS.colorTheme},type:{summary:joinArgTypes(Object.keys(COLORS_MAPPER))}}},count:{control:"number",description:"Número a mostrar en un badge dentro del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"number"}}},dataTestId:{control:"text",description:"Identificador de test para el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},disabled:{control:"boolean",description:"Si es `true`, el botón está deshabilitado.",table:{defaultValue:{summary:DEFAULT_PROPS.disabled},type:{summary:"boolean"}}},fullHeight:{control:"boolean",description:"Si es `true`, el botón ocupa el alto completo de su contenedor padre. Desactiva el `min-height` por tamaño.",table:{defaultValue:{summary:DEFAULT_PROPS.fullHeight},type:{summary:"boolean"}}},fullWidth:{control:"boolean",description:"Si es `true`, el botón ocupa el ancho completo de su contenedor padre. Desactiva el `min-width`.",table:{defaultValue:{summary:DEFAULT_PROPS.fullWidth},type:{summary:"boolean"}}},hideTextOnResponsive:{control:"boolean",description:"Si es `true` y hay ícono, el contenido del botón no se muestra en dispositivos móviles.",table:{defaultValue:{summary:DEFAULT_PROPS.hideTextOnResponsive},type:{summary:"boolean"}}},LeftIcon:{control:"text",description:"Ícono a mostrar al inicio del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:joinArgTypes(["string","ReactComponent"])}}},leftIconProps:{control:!1,description:"Props adicionales a aplicar al ícono izquierdo.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},loading:{control:"boolean",description:"Si es `true`, se muestra un spinner sobre el botón.",table:{defaultValue:{summary:DEFAULT_PROPS.loading},type:{summary:"boolean"}}},onClick:{control:!1,description:"Callback ejecutado cuando se hace clic en el botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"function"}}},RightIcon:{control:"text",description:"Ícono a mostrar al final del botón. Puede ser un nombre de icono de Tabler o un componente personalizado.",table:{defaultValue:{summary:"undefined"},type:{summary:joinArgTypes(["string","ReactComponent"])}}},rightIconProps:{control:!1,description:"Props adicionales a aplicar al ícono derecho.",table:{defaultValue:{summary:"undefined"},type:{summary:"object"}}},size:{control:"inline-radio",description:"Tamaño del botón.",options:Object.values(SIZES),table:{defaultValue:{summary:DEFAULT_PROPS.size},type:{summary:joinArgTypes(Object.values(SIZES))}}},type:{control:"text",description:"Atributo HTML type del botón.",table:{defaultValue:{summary:"undefined"},type:{summary:"string"}}},variant:{control:"select",description:"Variante del botón.",options:Object.values(VARIANTS_NAMES),table:{defaultValue:{summary:DEFAULT_PROPS.variant},type:{summary:joinArgTypes(Object.values(VARIANTS_NAMES))}}}};export const COMMON_ARGS={colorTheme:DEFAULT_PROPS.colorTheme,dataTestId:"customButtonId",disabled:DEFAULT_PROPS.disabled,fullHeight:DEFAULT_PROPS.fullHeight,fullWidth:DEFAULT_PROPS.fullWidth,hideTextOnResponsive:DEFAULT_PROPS.hideTextOnResponsive,loading:DEFAULT_PROPS.loading,size:DEFAULT_PROPS.size,type:"button",variant:DEFAULT_PROPS.variant};export const COMMON_PARAMETERS={controls:{exclude:["classes","classNames","onClick"]},docs:{description:{component:"Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable."}}};