@widergy/energy-ui 3.173.2 → 3.173.4

package/dist/components/UTBreadcrumbs/index.js

@@ -1,221 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _UTMenu = _interopRequireDefault(require("../UTMenu"));
-var _UTButton = _interopRequireDefault(require("../UTButton"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _UTTooltip = _interopRequireDefault(require("../UTTooltip"));
-var _classesUtils = require("../../utils/classesUtils");
-var _testIds = require("../../constants/testIds");
-var _constants = require("./constants");
-var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
-const {
-  breadcrumbs: breadcrumbsIds
-} = _testIds.TEST_IDS;
-const UTBreadcrumbs = _ref => {
-  let {
-    breadcrumbs,
-    classes: themeClasses,
-    classNames,
-    colorTheme = _constants.COLOR_THEMES.DARK,
-    disableMenu = false,
-    elipsis = _constants.DEFAULT_ELIPSIS,
-    elipsisWidthEstimate = _constants.DEFAULT_ELIPSIS_WIDTH_ESTIMATE,
-    firstItemOverflow = false,
-    menuProps = {},
-    onRedirect,
-    onSetAction,
-    separator = _constants.DEFAULT_SEPARATOR
-  } = _ref;
-  const classes = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(themeClasses, classNames), [classNames]);
-  const containerRef = (0, _react.useRef)();
-  const [content, setContent] = (0, _react.useState)(breadcrumbs);
-  const [menu, setMenu] = (0, _react.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]];
-      });
-    }
-  };
-  (0, _react.useEffect)(() => {
-    setContent(breadcrumbs);
-  }, [breadcrumbs]);
-  (0, _react.useEffect)(() => {
-    if (containerRef.current) window.requestAnimationFrame(() => truncate());
-  }, [content]);
-  (0, _react.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.default.createElement("div", {
-    className: _stylesModule.default.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 ? _constants.COMPONENTS_THEME_PROPS[_constants.COLOR_THEMES_MAPPER[buttonColorTheme]] : _constants.COMPONENTS_THEME_PROPS[colorTheme];
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "".concat(_stylesModule.default.section, " ").concat(overflowControl && _stylesModule.default.firstItem),
-      key: "".concat(route, "-").concat(label)
-    }, !route && !menuItems || disableMenu ? /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({
-      className: _stylesModule.default.label,
-      dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(index) : "".concat(breadcrumbsIds.item, ".").concat(index),
-      variant: "small",
-      weight: "medium"
-    }, colorThemesDefinition.label), label) : showTooltip ? /*#__PURE__*/_react.default.createElement(_UTTooltip.default, {
-      content: tooltipLabel,
-      interactive: false,
-      tippyProps: {
-        appendTo: () => document.body,
-        trigger: 'mouseenter',
-        hideOnClick: false
-      }
-    }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_UTButton.default, _extends({
-      classNames: {
-        root: itemClassName,
-        childrenContainer: overflowControl ? _stylesModule.default.buttonContainer : null,
-        text: overflowControl ? _stylesModule.default.ellipsis : isLast && content.length > 1 ? _stylesModule.default.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.default.createElement(_UTButton.default, _extends({
-      classNames: {
-        root: itemClassName,
-        childrenContainer: overflowControl ? _stylesModule.default.buttonContainer : null,
-        text: overflowControl ? _stylesModule.default.ellipsis : isLast && content.length > 1 ? _stylesModule.default.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.default.createElement(_UTLabel.default, _extends({
-      className: classes.separator,
-      variant: "small",
-      weight: "medium"
-    }, colorThemesDefinition.label), separator));
-  }), !disableMenu && /*#__PURE__*/_react.default.createElement(_UTMenu.default, _extends({
-    anchor: menu.anchor,
-    items: menu.items
-  }, menuProps, {
-    onClose: handleCloseMenu
-  })));
-};
-UTBreadcrumbs.propTypes = {
-  breadcrumbs: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
-    label: _propTypes.string,
-    route: _propTypes.string,
-    showTooltip: _propTypes.bool,
-    tooltipLabel: _propTypes.string
-  })),
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  colorTheme: _propTypes.string,
-  disableMenu: _propTypes.bool,
-  elipsis: _propTypes.string,
-  elipsisWidthEstimate: _propTypes.number,
-  firstItemOverflow: _propTypes.bool,
-  onRedirect: _propTypes.func,
-  onSetAction: _propTypes.func,
-  menuProps: _propTypes.object,
-  separator: _propTypes.string
-};
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTBreadcrumbs);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_UTMenu=_interopRequireDefault(require("../UTMenu")),_UTButton=_interopRequireDefault(require("../UTButton")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_UTTooltip=_interopRequireDefault(require("../UTTooltip")),_classesUtils=require("../../utils/classesUtils"),_testIds=require("../../constants/testIds"),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,s=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,n,o={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return o;if(a=t?s:r){if(a.has(e))return a.get(e);a.set(e,o)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((n=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(n.get||n.set)?a(o,t,n):o[t]=e[t]);return o})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var s in r)({}).hasOwnProperty.call(r,s)&&(e[s]=r[s])}return e},_extends.apply(null,arguments)}const{breadcrumbs:breadcrumbsIds}=_testIds.TEST_IDS,UTBreadcrumbs=e=>{let{breadcrumbs:t,classes:r,classNames:s,colorTheme:a=_constants.COLOR_THEMES.DARK,disableMenu:n=!1,elipsis:o=_constants.DEFAULT_ELIPSIS,elipsisWidthEstimate:l=_constants.DEFAULT_ELIPSIS_WIDTH_ESTIMATE,firstItemOverflow:c=!1,menuProps:i={},onRedirect:u,onSetAction:d,separator:p=_constants.DEFAULT_SEPARATOR}=e;const _=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(r,s),[s]),f=(0,_react.useRef)(),[m,T]=(0,_react.useState)(t),[b,y]=(0,_react.useState)({anchor:null,items:[]}),h=()=>{if(!f.current)return;const{offsetWidth:e}=f.current;[...f.current.children].reduce((e,t)=>e+t.offsetWidth,0)>e&&T(e=>{if(e.some(e=>{let{label:t}=e;return t===o}))return e;if(e.length<=2)return e;const t=(e=>{const t=[...e.current.children],{offsetWidth:r}=e.current;let s=1,a=0;const n=r-t[0].offsetWidth-t[t.length-2].offsetWidth-l;return t.slice(1).forEach(e=>{a+=e.offsetWidth,a<=n&&(s+=1)}),s})(f);return[...e.slice(0,t),{label:o,menuItems:e.slice(t,e.length-1)},e[e.length-1]]})};(0,_react.useEffect)(()=>{T(t)},[t]),(0,_react.useEffect)(()=>{f.current&&window.requestAnimationFrame(()=>h())},[m]),(0,_react.useEffect)(()=>(window.addEventListener("resize",h),()=>window.removeEventListener("resize",h)),[]);const E=()=>y({anchor:null,items:[]}),M=(e,r,s)=>{const a=t.findIndex(e=>e.id===s);a!==t.length-1&&(e.setAction&&d(e.setAction,e.params),e.updatedBreadcrumbs&&e.updatedBreadcrumbs(t.slice(0,a+1)),u(r))};return _react.default.createElement("div",{className:_stylesModule.default.breadcrumbs,ref:f},m.map((e,r)=>{let{buttonColorTheme:s,dataTestId:o,itemClassName:l,label:i,menuItems:u,route:d,options:f={},id:b=crypto.randomUUID(),showTooltip:h=!1,tooltipLabel:g=i}=e;const I=e=>{u?y({anchor:e.currentTarget,items:u.map(e=>{let{label:r,route:s,options:a,id:n}=e;return{label:r,onClick:()=>{T(t),E(),M(a,s,n)}}})}):M(f,d,b)},O=r===m.length-1,U=0===r&&c,q=s?_constants.COMPONENTS_THEME_PROPS[_constants.COLOR_THEMES_MAPPER[s]]:_constants.COMPONENTS_THEME_PROPS[a];return _react.default.createElement("div",{className:"".concat(_stylesModule.default.section," ").concat(U&&_stylesModule.default.firstItem),key:"".concat(d,"-").concat(i)},!d&&!u||n?_react.default.createElement(_UTLabel.default,_extends({className:_stylesModule.default.label,dataTestId:o?"".concat(o,".").concat(r):"".concat(breadcrumbsIds.item,".").concat(r),variant:"small",weight:"medium"},q.label),i):h?_react.default.createElement(_UTTooltip.default,{content:g,interactive:!1,tippyProps:{appendTo:()=>document.body,trigger:"mouseenter",hideOnClick:!1}},_react.default.createElement("span",null,_react.default.createElement(_UTButton.default,_extends({classNames:{root:l,childrenContainer:U?_stylesModule.default.buttonContainer:null,text:U?_stylesModule.default.ellipsis:O&&m.length>1?_stylesModule.default.lastBreadcrumb:null},dataTestId:o?"".concat(o,".").concat(r):"".concat(breadcrumbsIds.item,".").concat(r),onClick:I,size:"small",variant:"text"},q.button),"".concat(i)))):_react.default.createElement(_UTButton.default,_extends({classNames:{root:l,childrenContainer:U?_stylesModule.default.buttonContainer:null,text:U?_stylesModule.default.ellipsis:O&&m.length>1?_stylesModule.default.lastBreadcrumb:null},dataTestId:o?"".concat(o,".").concat(r):"".concat(breadcrumbsIds.item,".").concat(r),onClick:I,size:"small",variant:"text"},q.button),"".concat(i)),!O&&_react.default.createElement(_UTLabel.default,_extends({className:_.separator,variant:"small",weight:"medium"},q.label),p))}),!n&&_react.default.createElement(_UTMenu.default,_extends({anchor:b.anchor,items:b.items},i,{onClose:E})))};UTBreadcrumbs.propTypes={breadcrumbs:(0,_propTypes.arrayOf)((0,_propTypes.shape)({label:_propTypes.string,route:_propTypes.string,showTooltip:_propTypes.bool,tooltipLabel:_propTypes.string})),classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),colorTheme:_propTypes.string,disableMenu:_propTypes.bool,elipsis:_propTypes.string,elipsisWidthEstimate:_propTypes.number,firstItemOverflow:_propTypes.bool,onRedirect:_propTypes.func,onSetAction:_propTypes.func,menuProps:_propTypes.object,separator:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTBreadcrumbs);

package/dist/components/UTBreadcrumbs/theme.js

@@ -1,19 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.retrieveStyle = void 0;
-var _classesUtils = require("../../utils/classesUtils");
-const retrieveStyle = _ref => {
-  var _theme$UTBreadcrumbs;
-  let {
-    theme
-  } = _ref;
-  return {
-    separator: {
-      margin: (0, _classesUtils.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')
-    }
-  };
-};
-exports.retrieveStyle = retrieveStyle;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.retrieveStyle=void 0;var _classesUtils=require("../../utils/classesUtils");const retrieveStyle=e=>{var r;let{theme:t}=e;return{separator:{margin:(0,_classesUtils.withImportant)((null==t||null===(r=t.UTBreadcrumbs)||void 0===r||null===(r=r.separator)||void 0===r?void 0:r.margin)||"0 12px")}}};exports.retrieveStyle=retrieveStyle;

package/dist/components/UTButton/constants.js

@@ -1,50 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.VARIANTS_NAMES = exports.SIZES = exports.SHADOW_MAPPER = exports.ICON_PLACEMENTS = exports.DEFAULT_PROPS = exports.COLORS_MAPPER = void 0;
-var _Palette = require("../../constants/Palette");
-const VARIANTS_NAMES = exports.VARIANTS_NAMES = {
-  filled: 'filled',
-  outlined: 'outlined',
-  semitransparent: 'semitransparent',
-  shadow: 'shadow',
-  text: 'text'
-};
-const SIZES = exports.SIZES = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large'
-};
-const ICON_PLACEMENTS = exports.ICON_PLACEMENTS = {
-  left: 'left',
-  right: 'right'
-};
-const DEFAULT_PROPS = exports.DEFAULT_PROPS = {
-  colorTheme: 'secondary',
-  disabled: false,
-  fullHeight: false,
-  fullWidth: false,
-  hideTextOnResponsive: false,
-  iconPlacement: ICON_PLACEMENTS.left,
-  loading: false,
-  size: SIZES.medium,
-  variant: 'filled'
-};
-const COLORS_MAPPER = exports.COLORS_MAPPER = {
-  error: _Palette.COLOR_THEMES.error,
-  gray: _Palette.COLOR_THEMES.gray,
-  negative: _Palette.COLOR_THEMES.negative,
-  primary: _Palette.COLOR_THEMES.accent,
-  secondary: _Palette.COLOR_THEMES.neutral,
-  success: _Palette.COLOR_THEMES.success,
-  light: _Palette.COLOR_THEMES.light
-};
-const SHADOW_MAPPER = exports.SHADOW_MAPPER = {
-  [COLORS_MAPPER.error]: 'semanticError',
-  [COLORS_MAPPER.negative]: 'actionNeutral',
-  [COLORS_MAPPER.primary]: 'actionAccent',
-  [COLORS_MAPPER.secondary]: 'grayscale',
-  [COLORS_MAPPER.gray]: 'grayscale'
-};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.VARIANTS_NAMES=exports.SIZES=exports.SHADOW_MAPPER=exports.ICON_PLACEMENTS=exports.DEFAULT_PROPS=exports.COLORS_MAPPER=void 0;var _Palette=require("../../constants/Palette");const VARIANTS_NAMES=exports.VARIANTS_NAMES={filled:"filled",outlined:"outlined",semitransparent:"semitransparent",shadow:"shadow",text:"text"},SIZES=exports.SIZES={small:"small",medium:"medium",large:"large"},ICON_PLACEMENTS=exports.ICON_PLACEMENTS={left:"left",right:"right"},DEFAULT_PROPS=exports.DEFAULT_PROPS={colorTheme:"secondary",disabled:!1,fullHeight:!1,fullWidth:!1,hideTextOnResponsive:!1,iconPlacement:ICON_PLACEMENTS.left,loading:!1,size:SIZES.medium,variant:"filled"},COLORS_MAPPER=exports.COLORS_MAPPER={error:_Palette.COLOR_THEMES.error,gray:_Palette.COLOR_THEMES.gray,negative:_Palette.COLOR_THEMES.negative,primary:_Palette.COLOR_THEMES.accent,secondary:_Palette.COLOR_THEMES.neutral,success:_Palette.COLOR_THEMES.success,light:_Palette.COLOR_THEMES.light},SHADOW_MAPPER=exports.SHADOW_MAPPER={[COLORS_MAPPER.error]:"semanticError",[COLORS_MAPPER.negative]:"actionNeutral",[COLORS_MAPPER.primary]:"actionAccent",[COLORS_MAPPER.secondary]:"grayscale",[COLORS_MAPPER.gray]:"grayscale"};

package/dist/components/UTButton/index.js

@@ -1,123 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _propTypes = require("prop-types");
-var _Button = _interopRequireDefault(require("@material-ui/core/Button"));
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
-var _componentUtils = require("../../utils/componentUtils");
-var _classesUtils = require("../../utils/classesUtils");
-var _UTBadge = _interopRequireDefault(require("../UTBadge"));
-var _UTLabel = _interopRequireDefault(require("../UTLabel"));
-var _WithTheme = _interopRequireDefault(require("../WithTheme"));
-var _utils = require("./utils");
-var _constants = require("./constants");
-var _theme = require("./theme");
-var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-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); }
-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 = (0, _react.useMemo)(() => (0, _classesUtils.mergeClasses)(theme, classNames), [classNames, theme]);
-  const {
-    childrenContainer,
-    circularProgress,
-    icon,
-    text: textClassName,
-    ...materialButtonClasses
-  } = classes;
-  const {
-    LeftIconComponent,
-    leftIconProps: leftIconBaseProps,
-    RightIconComponent,
-    rightIconProps: rightIconBaseProps
-  } = (0, _react.useMemo)(() => (0, _utils.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.default.createElement(LeftIconComponent, _extends({}, leftIconBaseProps, leftIconProps));
-  const RightIconToShow = RightIconComponent && /*#__PURE__*/_react.default.createElement(RightIconComponent, _extends({}, rightIconBaseProps, rightIconProps));
-  const counterColorTheme = (0, _utils.getCounterColorTheme)(colorTheme, variant);
-  const labelProps = (0, _utils.getLabelProps)(colorTheme, variant, size);
-  const RenderedChildren = /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(childrenContainer, " ").concat(_stylesModule.default["".concat(size, "ChildrenContainer")])
-  }, count && /*#__PURE__*/_react.default.createElement(_UTBadge.default, {
-    colorTheme: counterColorTheme
-  }, count), LeftIconToShow, children !== null && children !== undefined && children !== false && /*#__PURE__*/_react.default.createElement(_UTLabel.default, _extends({}, labelProps, {
-    className: "".concat(_stylesModule.default.textContainer, " ").concat(textClassName)
-  }), children), RightIconToShow);
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    classes: materialButtonClasses,
-    className: "\n        ".concat(_stylesModule.default["padding".concat((0, _componentUtils.capitalize)(size))], "\n        ").concat(fullHeight && _stylesModule.default.fullHeight, "\n        ").concat(fullWidth && _stylesModule.default.fullWidth, "\n        ").concat(hideTextOnResponsive && _stylesModule.default.hideTextOnResponsive, "\n        ").concat(!hideTextOnResponsive && !children && _stylesModule.default.noChildren, "\n      "),
-    "data-testid": dataTestId,
-    disabled: disabled || loading,
-    onClick: onClick,
-    type: type
-  }, RenderedChildren, loading && /*#__PURE__*/_react.default.createElement(_CircularProgress.default, {
-    size: 24,
-    className: "".concat(_stylesModule.default.loading, " ").concat(circularProgress)
-  }));
-};
-UTButton.defaultProps = _constants.DEFAULT_PROPS;
-UTButton.propTypes = {
-  classes: (0, _propTypes.objectOf)(_propTypes.string),
-  classNames: (0, _propTypes.objectOf)(_propTypes.string),
-  colorTheme: _propTypes.string,
-  count: _propTypes.number,
-  dataTestId: _propTypes.string,
-  disabled: _propTypes.bool,
-  fullHeight: _propTypes.bool,
-  fullWidth: _propTypes.bool,
-  hideTextOnResponsive: _propTypes.bool,
-  /**
-   * @deprecated Use LeftIcon or RightIcon instead.
-   */
-  Icon: _propTypes.elementType,
-  /**
-   * @deprecated Use LeftIcon or RightIcon instead.
-   */
-  iconPlacement: _propTypes.string,
-  LeftIcon: _propTypes.elementType,
-  leftIconProps: _propTypes.object,
-  loading: _propTypes.bool,
-  onClick: _propTypes.func,
-  RightIcon: _propTypes.elementType,
-  rightIconProps: _propTypes.object,
-  size: _propTypes.string,
-  type: _propTypes.string,
-  variant: _propTypes.string
-};
-var _default = exports.default = (0, _WithTheme.default)(_theme.retrieveStyle)(UTButton);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_Button=_interopRequireDefault(require("@material-ui/core/Button")),_CircularProgress=_interopRequireDefault(require("@material-ui/core/CircularProgress")),_componentUtils=require("../../utils/componentUtils"),_classesUtils=require("../../utils/classesUtils"),_UTBadge=_interopRequireDefault(require("../UTBadge")),_UTLabel=_interopRequireDefault(require("../UTLabel")),_WithTheme=_interopRequireDefault(require("../WithTheme")),_utils=require("./utils"),_constants=require("./constants"),_theme=require("./theme"),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,o=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,s,l={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return l;if(n=t?o:r){if(n.has(e))return n.get(e);n.set(e,l)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((s=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(s.get||s.set)?n(l,t,s):l[t]=e[t]);return l})(e,t)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)({}).hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},_extends.apply(null,arguments)}const UTButton=e=>{let{children:t,classes:r,classNames:o,colorTheme:n,count:s,dataTestId:l,disabled:a,fullHeight:i,fullWidth:c,hideTextOnResponsive:p,Icon:u,iconPlacement:_,LeftIcon:d,leftIconProps:f,loading:T,onClick:y,RightIcon:m,rightIconProps:g,size:h,type:b,variant:q}=e;const P=(0,_react.useMemo)(()=>(0,_classesUtils.mergeClasses)(r,o),[o,r]),{childrenContainer:I,circularProgress:R,icon:v,text:M,...U}=P,{LeftIconComponent:C,leftIconProps:x,RightIconComponent:O,rightIconProps:W}=(0,_react.useMemo)(()=>(0,_utils.getIconProps)({className:v,colorTheme:n,hideTextOnResponsive:p,Icon:u,iconPlacement:_,LeftIcon:d,RightIcon:m,size:h,variant:q}),[n,p,v,u,_,d,m,h,q]),j=C&&_react.default.createElement(C,_extends({},x,f)),B=O&&_react.default.createElement(O,_extends({},W,g)),D=(0,_utils.getCounterColorTheme)(n,q),L=(0,_utils.getLabelProps)(n,q,h),E=_react.default.createElement("div",{className:"".concat(I," ").concat(_stylesModule.default["".concat(h,"ChildrenContainer")])},s&&_react.default.createElement(_UTBadge.default,{colorTheme:D},s),j,null!=t&&!1!==t&&_react.default.createElement(_UTLabel.default,_extends({},L,{className:"".concat(_stylesModule.default.textContainer," ").concat(M)}),t),B);return _react.default.createElement(_Button.default,{classes:U,className:"\n        ".concat(_stylesModule.default["padding".concat((0,_componentUtils.capitalize)(h))],"\n        ").concat(i&&_stylesModule.default.fullHeight,"\n        ").concat(c&&_stylesModule.default.fullWidth,"\n        ").concat(p&&_stylesModule.default.hideTextOnResponsive,"\n        ").concat(!p&&!t&&_stylesModule.default.noChildren,"\n      "),"data-testid":l,disabled:a||T,onClick:y,type:b},E,T&&_react.default.createElement(_CircularProgress.default,{size:24,className:"".concat(_stylesModule.default.loading," ").concat(R)}))};UTButton.defaultProps=_constants.DEFAULT_PROPS,UTButton.propTypes={classes:(0,_propTypes.objectOf)(_propTypes.string),classNames:(0,_propTypes.objectOf)(_propTypes.string),colorTheme:_propTypes.string,count:_propTypes.number,dataTestId:_propTypes.string,disabled:_propTypes.bool,fullHeight:_propTypes.bool,fullWidth:_propTypes.bool,hideTextOnResponsive:_propTypes.bool,Icon:_propTypes.elementType,iconPlacement:_propTypes.string,LeftIcon:_propTypes.elementType,leftIconProps:_propTypes.object,loading:_propTypes.bool,onClick:_propTypes.func,RightIcon:_propTypes.elementType,rightIconProps:_propTypes.object,size:_propTypes.string,type:_propTypes.string,variant:_propTypes.string};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTButton);

package/dist/components/UTButton/theme.js

@@ -1,144 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.variantsColorTheme = exports.retrieveStyle = void 0;
-var _classesUtils = require("../../utils/classesUtils");
-var _shadowUtils = require("../../utils/shadowUtils");
-var _constants = require("./constants");
-const variantsColorTheme = (theme, colorTheme, variant) => {
-  var _theme$Palette, _theme$Palette$shadow;
-  const actionColorName = _constants.COLORS_MAPPER[colorTheme] || _constants.COLORS_MAPPER[_constants.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[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
-  const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
-  const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
-  const lightTheme = actionPaletteColors[_constants.COLORS_MAPPER.light];
-  const definition = {
-    [_constants.VARIANTS_NAMES.filled]: {
-      backgroundColor: actionTheme['04'],
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    },
-    [_constants.VARIANTS_NAMES.semitransparent]: {
-      backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(lightTheme['04']),
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.text]: {
-      border: '1px solid transparent',
-      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: 'none'
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: 'none'
-      }
-    },
-    [_constants.VARIANTS_NAMES.shadow]: {
-      backgroundColor: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
-      boxShadow: (0, _shadowUtils.getShadow)({
-        color: shadowTheme,
-        level: 1
-      }),
-      border: '1px solid transparent',
-      fill: actionTheme['05'],
-      '&:hover': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      },
-      '&:active': {
-        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
-        boxShadow: (0, _shadowUtils.getShadow)({
-          color: shadowTheme,
-          level: 2
-        })
-      }
-    }
-  };
-  const disabledStyle = {
-    opacity: (0, _classesUtils.withImportant)(0.5),
-    '&.MuiButton-root:hover.Mui-disabled': {
-      backgroundColor: (definition[variant] || definition[_constants.DEFAULT_PROPS.variant]).backgroundColor
-    }
-  };
-  return {
-    ...(definition[variant] || definition[_constants.DEFAULT_PROPS.variant]),
-    disabled: disabledStyle
-  };
-};
-exports.variantsColorTheme = variantsColorTheme;
-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'
-    }
-  };
-};
-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
-    }
-  };
-};
-exports.retrieveStyle = retrieveStyle;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.variantsColorTheme=exports.retrieveStyle=void 0;var _classesUtils=require("../../utils/classesUtils"),_shadowUtils=require("../../utils/shadowUtils"),_constants=require("./constants");const variantsColorTheme=(o,t,r)=>{var a,s;const e=_constants.COLORS_MAPPER[t]||_constants.COLORS_MAPPER[_constants.DEFAULT_PROPS.colorTheme],n=(null===(a=o.Palette)||void 0===a?void 0:a.actions)||o.Palette,l=n[e],c=(null===(s=o.Palette.shadows)||void 0===s?void 0:s[_constants.SHADOW_MAPPER[e]])||"transparent",i=n[_constants.COLORS_MAPPER.negative],d=n[_constants.COLORS_MAPPER.secondary],_=n[_constants.COLORS_MAPPER.light],P={[_constants.VARIANTS_NAMES.filled]:{backgroundColor:l["04"],border:"1px solid transparent",fill:t===_constants.COLORS_MAPPER.negative?d["05"]:i["05"],"&:hover":{backgroundColor:t===_constants.COLORS_MAPPER.gray?l["05"]:l["03"],boxShadow:(0,_shadowUtils.getShadow)({color:c,level:2})},"&:active":{backgroundColor:t===_constants.COLORS_MAPPER.gray?l["04"]:l["05"],boxShadow:(0,_shadowUtils.getShadow)({color:c,level:2})}},[_constants.VARIANTS_NAMES.semitransparent]:{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["03"]:l["01"],border:"1px solid transparent",fill:t===_constants.COLORS_MAPPER.gray?l["04"]:l["05"],"&:hover":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["04"]:l["02"],boxShadow:"none"},"&:active":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["05"]:l["03"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.outlined]:{border:"1px solid ".concat(_["04"]),fill:t===_constants.COLORS_MAPPER.gray?l["04"]:l["05"],"&:hover":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["03"]:l["01"],boxShadow:"none"},"&:active":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["04"]:l["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.text]:{border:"1px solid transparent",fill:t===_constants.COLORS_MAPPER.gray?l["04"]:l["05"],"&:hover":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["03"]:l["01"],boxShadow:"none"},"&:active":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["04"]:l["02"],boxShadow:"none"}},[_constants.VARIANTS_NAMES.shadow]:{backgroundColor:t===_constants.COLORS_MAPPER.negative?d["05"]:i["05"],boxShadow:(0,_shadowUtils.getShadow)({color:c,level:1}),border:"1px solid transparent",fill:l["05"],"&:hover":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["03"]:l["01"],boxShadow:(0,_shadowUtils.getShadow)({color:c,level:2})},"&:active":{backgroundColor:t===_constants.COLORS_MAPPER.gray?_["04"]:l["02"],boxShadow:(0,_shadowUtils.getShadow)({color:c,level:2})}}},S={opacity:(0,_classesUtils.withImportant)(.5),"&.MuiButton-root:hover.Mui-disabled":{backgroundColor:(P[r]||P[_constants.DEFAULT_PROPS.variant]).backgroundColor}};return{...P[r]||P[_constants.DEFAULT_PROPS.variant],disabled:S}};exports.variantsColorTheme=variantsColorTheme;const baseButtonTheme=o=>{var t;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===(t=o.UTButton)||void 0===t||null===(t=t.circularProgress)||void 0===t?void 0:t.color)||"484848"}}},retrieveStyle=o=>{let{colorTheme:t,variant:r,theme:a}=o;const s=baseButtonTheme(a),e=variantsColorTheme(a,t,r);return{...s,disabled:e.disabled,root:{...s.root,...e}}};exports.retrieveStyle=retrieveStyle;