@widergy/energy-ui 3.190.1 → 3.191.0

package/CHANGELOG.md

@@ -1,9 +1,15 @@
-## [3.190.1](https://github.com/widergy/energy-ui/compare/v3.190.0...v3.190.1) (2026-10-01)
+# [3.191.0](https://github.com/widergy/energy-ui/compare/v3.190.1...v3.191.0) (2026-10-02)
 
 
-### Bug Fixes
+### Features
+
+* [OVGC-29] add highlighted variant to UTSidebar options ([#880](https://github.com/widergy/energy-ui/issues/880)) ([8849b37](https://github.com/widergy/energy-ui/commit/8849b37ca5725f9d207a511985380604b94eec41))
+
+## [3.190.1](https://github.com/widergy/energy-ui/compare/v3.190.0...v3.190.1) (2026-10-01)
+
+### Correcciones
 
-* trigger new patch release ([a1041dc](https://github.com/widergy/energy-ui/commit/a1041dcaa62c417f3b37d989877af9e3eef0fcc1))
+* Mejoras internas de la plataforma. [#881](https://github.com/widergy/Energy-UI/pull/881) [#882](https://github.com/widergy/Energy-UI/pull/882) [`49862f1`](https://github.com/widergy/Energy-UI/commit/49862f1) [`a1041dc`](https://github.com/widergy/Energy-UI/commit/a1041dc) [DEV-785](https://widergy.atlassian.net/browse/DEV-785) [AXAG-407](https://widergy.atlassian.net/browse/AXAG-407)
 
 # [3.190.0](https://github.com/widergy/energy-ui/compare/v3.189.0...v3.190.0) (2026-09-29)
 

package/dist/components/UTLabel/constants.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getGradientTokenName=exports.WEIGHTS=exports.VARIANTS_SIZES=exports.VARIANTS_NAMES=exports.VARIANTS_LINE_HEIGHT=exports.VARIANTS=exports.GRADIENT_FALLBACKS=exports.DEFAULT_PROPS=exports.DEFAULT_GRADIENT_FALLBACK=void 0;var _Palette=require("../../constants/Palette");const VARIANTS_NAMES=exports.VARIANTS_NAMES={TITLE1:"title1",TITLE2:"title2",TITLE3:"title3",SUBTITLE1:"subtitle1",SUBTITLE2:"subtitle2",BODY:"body",SMALL:"small",XSMALL:"xsmall",TH:"th",TD:"td"},VARIANTS=exports.VARIANTS={[VARIANTS_NAMES.TITLE1]:"h1",[VARIANTS_NAMES.TITLE2]:"h2",[VARIANTS_NAMES.TITLE3]:"h3",[VARIANTS_NAMES.SUBTITLE1]:"h4",[VARIANTS_NAMES.SUBTITLE2]:"h5",[VARIANTS_NAMES.BODY]:"div",[VARIANTS_NAMES.SMALL]:"div",[VARIANTS_NAMES.XSMALL]:"div",[VARIANTS_NAMES.TH]:"th",[VARIANTS_NAMES.TD]:"td"},VARIANTS_SIZES=exports.VARIANTS_SIZES={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-size-title-1, 1.875rem)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-size-title-2, 1.5rem)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-size-title-3, 1.375rem)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-size-subtitle-1, 1.125rem)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-size-subtitle-2, 1rem)",[VARIANTS_NAMES.BODY]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-size-small, 0.75rem)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-size-xsmall, 0.75rem)",[VARIANTS_NAMES.TH]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.TD]:"var(--UT-label-size-body, 1rem)"},VARIANTS_LINE_HEIGHT=exports.VARIANTS_LINE_HEIGHT={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.BODY]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-lh-small, 1.4)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-lh-xsmall, 1.5)",[VARIANTS_NAMES.TH]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.TD]:"var(--UT-label-lh-body, 1.4)"},WEIGHTS=exports.WEIGHTS={thin:"var(--UT-label-weight-thin, 100)",extralight:"var(--UT-label-weight-extralight, 200)",light:"var(--UT-label-weight-light, 300)",regular:"var(--UT-label-weight-regular, 400)",medium:"var(--UT-label-weight-medium, 500)",semibold:"var(--UT-label-weight-semibold, 600)",bold:"var(--UT-label-weight-bold, 700)",extrabold:"var(--UT-label-weight-extrabold, 800)",black:"var(--UT-label-weight-black, 900)"},DEFAULT_PROPS=exports.DEFAULT_PROPS={colorTheme:_Palette.COLOR_THEMES.dark,field:{},gradient:!1,markdownExtended:!1,markdownRenderers:{},variant:"body",weight:"regular",withMarkdown:!1},getGradientTokenName=e=>"decorative-".concat(e,"-gradient");exports.getGradientTokenName=getGradientTokenName;const GRADIENT_FALLBACKS=exports.GRADIENT_FALLBACKS={[_Palette.COLOR_THEMES.information]:"linear-gradient(88.75deg, #1291FF 0%, #67E8F9 100%)",[_Palette.COLOR_THEMES.warning]:"linear-gradient(88.75deg, #EC6707 0%, #FBCA3A 100%)"},DEFAULT_GRADIENT_FALLBACK=exports.DEFAULT_GRADIENT_FALLBACK=GRADIENT_FALLBACKS[_Palette.COLOR_THEMES.information];
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.getGradientTokenName=exports.WEIGHTS=exports.VARIANTS_SIZES=exports.VARIANTS_NAMES=exports.VARIANTS_LINE_HEIGHT=exports.VARIANTS=exports.GRADIENT_FALLBACKS=exports.DEFAULT_PROPS=exports.DEFAULT_GRADIENT_FALLBACK=void 0;var _Palette=require("../../constants/Palette"),_colorsModule=_interopRequireDefault(require("../../scss/variables/colors.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const VARIANTS_NAMES=exports.VARIANTS_NAMES={TITLE1:"title1",TITLE2:"title2",TITLE3:"title3",SUBTITLE1:"subtitle1",SUBTITLE2:"subtitle2",BODY:"body",SMALL:"small",XSMALL:"xsmall",TH:"th",TD:"td"},VARIANTS=exports.VARIANTS={[VARIANTS_NAMES.TITLE1]:"h1",[VARIANTS_NAMES.TITLE2]:"h2",[VARIANTS_NAMES.TITLE3]:"h3",[VARIANTS_NAMES.SUBTITLE1]:"h4",[VARIANTS_NAMES.SUBTITLE2]:"h5",[VARIANTS_NAMES.BODY]:"div",[VARIANTS_NAMES.SMALL]:"div",[VARIANTS_NAMES.XSMALL]:"div",[VARIANTS_NAMES.TH]:"th",[VARIANTS_NAMES.TD]:"td"},VARIANTS_SIZES=exports.VARIANTS_SIZES={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-size-title-1, 1.875rem)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-size-title-2, 1.5rem)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-size-title-3, 1.375rem)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-size-subtitle-1, 1.125rem)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-size-subtitle-2, 1rem)",[VARIANTS_NAMES.BODY]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-size-small, 0.75rem)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-size-xsmall, 0.75rem)",[VARIANTS_NAMES.TH]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.TD]:"var(--UT-label-size-body, 1rem)"},VARIANTS_LINE_HEIGHT=exports.VARIANTS_LINE_HEIGHT={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.BODY]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-lh-small, 1.4)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-lh-xsmall, 1.5)",[VARIANTS_NAMES.TH]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.TD]:"var(--UT-label-lh-body, 1.4)"},WEIGHTS=exports.WEIGHTS={thin:"var(--UT-label-weight-thin, 100)",extralight:"var(--UT-label-weight-extralight, 200)",light:"var(--UT-label-weight-light, 300)",regular:"var(--UT-label-weight-regular, 400)",medium:"var(--UT-label-weight-medium, 500)",semibold:"var(--UT-label-weight-semibold, 600)",bold:"var(--UT-label-weight-bold, 700)",extrabold:"var(--UT-label-weight-extrabold, 800)",black:"var(--UT-label-weight-black, 900)"},DEFAULT_PROPS=exports.DEFAULT_PROPS={colorTheme:_Palette.COLOR_THEMES.dark,field:{},gradient:!1,markdownExtended:!1,markdownRenderers:{},variant:"body",weight:"regular",withMarkdown:!1},getGradientTokenName=e=>"decorative-".concat(e,"-gradient");exports.getGradientTokenName=getGradientTokenName;const GRADIENT_FALLBACKS=exports.GRADIENT_FALLBACKS={[_Palette.COLOR_THEMES.information]:_colorsModule.default.informationGradient,[_Palette.COLOR_THEMES.warning]:"linear-gradient(88.75deg, #EC6707 0%, #FBCA3A 100%)"},DEFAULT_GRADIENT_FALLBACK=exports.DEFAULT_GRADIENT_FALLBACK=GRADIENT_FALLBACKS[_Palette.COLOR_THEMES.information];

package/dist/components/UTSidebar/components/Option/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_ListItem=_interopRequireDefault(require("@material-ui/core/ListItem")),_ListItemIcon=_interopRequireDefault(require("@material-ui/core/ListItemIcon")),_ListItemText=_interopRequireDefault(require("@material-ui/core/ListItemText")),_ExpandMore=_interopRequireDefault(require("@material-ui/icons/ExpandMore")),_componentUtils=require("../../../../utils/componentUtils"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_types=require("../../types"),_constants=require("./constants"),_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 o=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,c,r={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return r;if(a=t?n:o){if(a.has(e))return a.get(e);a.set(e,r)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((c=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(c.get||c.set)?a(r,t,c):r[t]=e[t]);return r})(e,t)}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)}const Option=e=>{let{classes:t,dataTestId:o,handleClose:n,handleRedirect:a,IconActive:c,IconInactive:r,iconClassName:l,iconProps:p,id:i,isSelected:s,isSelectedGroup:u,label:d,labelAlwaysVisible:_,link:y,location:f,onClick:T,open:m,toggleArrowActive:I,withToggleArrow:g,withTooltip:b}=e;const q=u||(s?s({id:i,link:y},f):y===f),v=b?_UTTooltip.default:_react.Fragment,M=b&&{..._constants.TOOLTIP_CONFIG,content:_react.default.createElement(_UTLabel.default,{className:t.tooltipLabel},d),className:t.tooltip};return _react.default.createElement(v,M,_react.default.createElement(_ListItem.default,{"data-testid":o,className:"\n        ".concat(_stylesModule.default.option,"\n        ").concat(t.option,"\n        ").concat(q&&"".concat(_stylesModule.default.optionSelected," ").concat(t.optionSelected),"\n        ").concat(q&&m&&t.optionSelectedOpened,"\n        ").concat(q&&!u&&!b&&_stylesModule.default.removeEvents,"\n      "),onClick:T||(()=>{a(y),n&&n()})},_react.default.createElement(_ListItemIcon.default,{className:"\n          ".concat(t.optionIconContainer,"\n          ").concat(q&&"".concat(t.optionIconContainerSelected," ").concat(_stylesModule.default.optionIconContainerSelected),"\n          ").concat(_stylesModule.default.optionIconContainer,"\n        ")},r&&((0,_componentUtils.isUTIcon)(r)?_react.default.createElement(_UTIcon.default,_extends({name:r,className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIcon," ").concat(l||"")},(null==p?void 0:p.inactive)||{})):_react.default.createElement(r,{className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIcon," ").concat(l||"")})),c&&((0,_componentUtils.isUTIcon)(c)?_react.default.createElement(_UTIcon.default,_extends({name:c,className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIconSelected," ").concat(t.optionIconSelected," ").concat(l||"")},(null==p?void 0:p.active)||{})):_react.default.createElement(c,{className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIconSelected," ").concat(t.optionIconSelected," ").concat(l||"")}))),_react.default.createElement(_ListItemText.default,{disableTypography:!0,className:"\n          ".concat(t.optionLabel,"\n          ").concat(q&&t.optionLabelSelected,"\n          ").concat(!m&&_stylesModule.default.hidden,"\n        "),primary:d}),!m&&_&&_react.default.createElement(_ListItemText.default,{disableTypography:!0,className:"\n            ".concat(_stylesModule.default.optionLabelBottom,"\n            ").concat(t.optionLabelBottom,"\n            ").concat(q&&t.optionLabelBottomSelected,"\n          "),primary:d}),m&&g&&_react.default.createElement(_ExpandMore.default,{className:"\n            ".concat(_stylesModule.default.toggleArrow,"\n            ").concat(t.toggleArrow,"\n            ").concat(I&&_stylesModule.default.toggleArrowActive,"\n          ")})))};Option.propTypes={classes:_types.classType,dataTestId:_propTypes.string,handleClose:_propTypes.func,handleRedirect:_propTypes.func,IconActive:_types.iconType,IconInactive:_types.iconType,iconClassName:_propTypes.string,iconProps:(0,_propTypes.shape)({active:(0,_propTypes.shape)({colorTheme:_propTypes.string,name:_propTypes.string,shade:_propTypes.string,size:_propTypes.number}),inactive:(0,_propTypes.shape)({colorTheme:_propTypes.string,name:_propTypes.string,shade:_propTypes.string,size:_propTypes.number})}),id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),isSelected:_propTypes.func,isSelectedGroup:_propTypes.bool,label:_propTypes.string,labelAlwaysVisible:_propTypes.bool,link:_propTypes.string,location:_propTypes.string,onClick:_propTypes.func,open:_propTypes.bool,toggleArrowActive:_propTypes.bool,withToggleArrow:_propTypes.bool,withTooltip:_propTypes.bool};var _default=exports.default=(0,_react.memo)(Option);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_ListItem=_interopRequireDefault(require("@material-ui/core/ListItem")),_ListItemIcon=_interopRequireDefault(require("@material-ui/core/ListItemIcon")),_ListItemText=_interopRequireDefault(require("@material-ui/core/ListItemText")),_ExpandMore=_interopRequireDefault(require("@material-ui/icons/ExpandMore")),_componentUtils=require("../../../../utils/componentUtils"),_UTLabel=_interopRequireDefault(require("../../../UTLabel")),_UTTooltip=_interopRequireDefault(require("../../../UTTooltip")),_UTIcon=_interopRequireDefault(require("../../../UTIcon")),_constants=require("../../constants"),_types=require("../../types"),_constants2=require("./constants"),_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 o=new WeakMap,n=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,c,r={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return r;if(a=t?n:o){if(a.has(e))return a.get(e);a.set(e,r)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((c=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(c.get||c.set)?a(r,t,c):r[t]=e[t]);return r})(e,t)}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)}const Option=e=>{let{classes:t,dataTestId:o,handleClose:n,handleRedirect:a,IconActive:c,IconInactive:r,iconClassName:l,iconProps:s,id:i,isSelected:p,isSelectedGroup:u,label:_,labelAlwaysVisible:d,link:y,location:f,onClick:T,open:m,toggleArrowActive:I,variant:g=_constants.DEFAULT_OPTION_PROPS.variant,withToggleArrow:b,withTooltip:h}=e;const v=u||(p?p({id:i,link:y},f):y===f),O=g===_constants.OPTION_VARIANTS.highlighted,q=s||(O?_constants.HIGHLIGHTED_ICON_PROPS:void 0),M=h?_UTTooltip.default:_react.Fragment,L=h&&{..._constants2.TOOLTIP_CONFIG,content:_react.default.createElement(_UTLabel.default,{className:t.tooltipLabel},_),className:t.tooltip};return _react.default.createElement(M,L,_react.default.createElement(_ListItem.default,{"data-testid":o,className:"\n        ".concat(_stylesModule.default.option,"\n        ").concat(t.option,"\n        ").concat(O&&_stylesModule.default.highlighted,"\n        ").concat(v&&"".concat(_stylesModule.default.optionSelected," ").concat(t.optionSelected),"\n        ").concat(v&&m&&t.optionSelectedOpened,"\n        ").concat(v&&!u&&!h&&_stylesModule.default.removeEvents,"\n      "),onClick:T||(()=>{a(y),n&&n()})},_react.default.createElement(_ListItemIcon.default,{className:"\n          ".concat(t.optionIconContainer,"\n          ").concat(v&&"".concat(t.optionIconContainerSelected," ").concat(_stylesModule.default.optionIconContainerSelected),"\n          ").concat(_stylesModule.default.optionIconContainer,"\n        ")},r&&((0,_componentUtils.isUTIcon)(r)?_react.default.createElement(_UTIcon.default,_extends({name:r,className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIcon," ").concat(l||"")},(null==q?void 0:q.inactive)||{})):_react.default.createElement(r,{className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIcon," ").concat(l||"")})),c&&((0,_componentUtils.isUTIcon)(c)?_react.default.createElement(_UTIcon.default,_extends({name:c,className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIconSelected," ").concat(t.optionIconSelected," ").concat(l||"")},(null==q?void 0:q.active)||{})):_react.default.createElement(c,{className:"".concat(t.optionIcon," ").concat(_stylesModule.default.optionIconSelected," ").concat(t.optionIconSelected," ").concat(l||"")}))),_react.default.createElement(_ListItemText.default,{disableTypography:!0,className:"\n          ".concat(t.optionLabel,"\n          ").concat(v&&t.optionLabelSelected,"\n          ").concat(O&&_stylesModule.default.highlightedLabel,"\n          ").concat(!m&&_stylesModule.default.hidden,"\n        "),primary:_}),!m&&d&&_react.default.createElement(_ListItemText.default,{disableTypography:!0,className:"\n            ".concat(_stylesModule.default.optionLabelBottom,"\n            ").concat(t.optionLabelBottom,"\n            ").concat(v&&t.optionLabelBottomSelected,"\n          "),primary:_}),m&&b&&_react.default.createElement(_ExpandMore.default,{className:"\n            ".concat(_stylesModule.default.toggleArrow,"\n            ").concat(t.toggleArrow,"\n            ").concat(I&&_stylesModule.default.toggleArrowActive,"\n          ")})))};Option.propTypes={classes:_types.classType,dataTestId:_propTypes.string,handleClose:_propTypes.func,handleRedirect:_propTypes.func,IconActive:_types.iconType,IconInactive:_types.iconType,iconClassName:_propTypes.string,iconProps:(0,_propTypes.shape)({active:(0,_propTypes.shape)({colorTheme:_propTypes.string,name:_propTypes.string,shade:_propTypes.string,size:_propTypes.number}),inactive:(0,_propTypes.shape)({colorTheme:_propTypes.string,name:_propTypes.string,shade:_propTypes.string,size:_propTypes.number})}),id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),isSelected:_propTypes.func,isSelectedGroup:_propTypes.bool,label:_propTypes.string,labelAlwaysVisible:_propTypes.bool,link:_propTypes.string,location:_propTypes.string,onClick:_propTypes.func,open:_propTypes.bool,toggleArrowActive:_propTypes.bool,variant:(0,_propTypes.oneOf)(Object.values(_constants.OPTION_VARIANTS)),withToggleArrow:_propTypes.bool,withTooltip:_propTypes.bool};var _default=exports.default=(0,_react.memo)(Option);

package/dist/components/UTSidebar/components/Option/styles.module.scss

@@ -1,3 +1,5 @@
+@use '../../../../scss/variables/colors.module.scss' as *;
+
 .option {
   cursor: pointer;
   overflow: hidden;
@@ -17,7 +19,9 @@
   &::after {
     content: '';
     position: absolute;
-    transition: background-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, right 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition:
+      background-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      right 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
 }
 
@@ -69,3 +73,11 @@
 .toggleArrowActive {
   transform: rotate(180deg);
 }
+
+.highlighted {
+  background-image: var(--decorative-information-gradient, $information-gradient);
+
+  .highlightedLabel {
+    color: var(--light01, $white);
+  }
+}

package/dist/components/UTSidebar/constants.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SCROLLBAR_OPTIONS=exports.OPTION_VARIANTS=exports.HIGHLIGHTED_ICON_PROPS=exports.DEFAULT_OPTION_PROPS=void 0;var _Palette=require("../../constants/Palette");const OPTION_VARIANTS=exports.OPTION_VARIANTS={default:"default",highlighted:"highlighted"},SCROLLBAR_OPTIONS=exports.SCROLLBAR_OPTIONS={scrollYMarginOffset:1,suppressScrollX:!0},DEFAULT_OPTION_PROPS=exports.DEFAULT_OPTION_PROPS={variant:OPTION_VARIANTS.default},HIGHLIGHTED_ICON_COLOR={colorTheme:_Palette.COLOR_THEMES.light,shade:_Palette.COLOR_SHADES.shade01},HIGHLIGHTED_ICON_PROPS=exports.HIGHLIGHTED_ICON_PROPS={active:HIGHLIGHTED_ICON_COLOR,inactive:HIGHLIGHTED_ICON_COLOR};

package/dist/components/UTSidebar/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_Backdrop=_interopRequireDefault(require("@material-ui/core/Backdrop")),_Drawer=_interopRequireDefault(require("@material-ui/core/Drawer")),_List=_interopRequireDefault(require("@material-ui/core/List")),_reactPerfectScrollbar=_interopRequireDefault(require("react-perfect-scrollbar"));require("react-perfect-scrollbar/dist/css/styles.css");var _array=require("@widergy/web-utils/lib/array"),_useScreenSize=require("../../utils/useScreenSize"),_classesUtils=require("../../utils/classesUtils"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_types=require("./types"),_theme=require("./theme"),_ListOption=_interopRequireDefault(require("./components/ListOption")),_LogosContainer=_interopRequireDefault(require("./components/LogosContainer")),_DynamicIcon=_interopRequireDefault(require("./components/LogosContainer/components/DynamicIcon")),_Option=_interopRequireDefault(require("./components/Option")),_Toggler=_interopRequireDefault(require("./components/Toggler")),_stylesModule=_interopRequireDefault(require("./styles.module.scss"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,o){if("function"==typeof WeakMap)var t=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,o){if(!o&&e&&e.__esModule)return e;var s,l,a={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return a;if(s=o?r:t){if(s.has(e))return s.get(e);s.set(e,a)}for(const o in e)"default"!==o&&{}.hasOwnProperty.call(e,o)&&((l=(s=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,o))&&(l.get||l.set)?s(a,o,l):a[o]=e[o]);return a})(e,o)}function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var r in t)({}).hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},_extends.apply(null,arguments)}const UTSidebar=e=>{let{Background:o,badgeContent:t,BigLogo:r,classes:s,classNames:l,collapsible:a=!0,docked:n,Footer:p,FooterBigLogo:i,FooterSmallLogo:c,handleClose:u,handleOpen:_,handleRedirect:d,isSelected:y,labelAlwaysVisible:g,location:f,open:T,options:m,SmallLogo:b,subtitle:L,title:q,TogglerIconClosed:h,TogglerIconOpen:w,withMouseActions:O,withoutToggler:C,withTooltip:S}=e;const{isTabletOrDesktop:D}=(0,_useScreenSize.useScreenSize)(),M=null!=n?n:D,R=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(s,l),[l]),k=!a||T,B=a&&!C,E=()=>T?u():_();return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Drawer.default,{open:M||T,variant:M?"persistent":"temporary",classes:{root:R.drawerRoot,paper:"\n            ".concat(R.drawer,"\n            ").concat(_stylesModule.default.drawer,"\n            ").concat(k?R.openedDrawer:_stylesModule.default.removeShadow,"\n          ")},ModalProps:{onClose:u},onMouseLeave:()=>O&&u(),onMouseEnter:()=>O&&_()},o&&_react.default.createElement(_DynamicIcon.default,{Icon:o,className:"".concat(_stylesModule.default.background," ").concat(R.background||"")}),(r||b)&&_react.default.createElement(_LogosContainer.default,{badgeClassName:k?R.logoBadgeOpen:R.logoBadgeClose,badgeContent:t,BigLogo:r,SmallLogo:b,bigLogoClassName:R.bigLogo,smallLogoClassName:R.smallLogo,containerClassName:R.logoContainer,showBigLogo:k}),B&&_react.default.createElement(_Toggler.default,{toggleDrawer:E,open:k,classes:R,IconClosed:h,IconOpen:w,title:q,subtitle:L}),_react.default.createElement("div",{className:_stylesModule.default.sidebarContent},_react.default.createElement(_List.default,{className:"".concat(R.list," ").concat(k&&R.listOpened," ").concat(_stylesModule.default.list)},_react.default.createElement(_reactPerfectScrollbar.default,{className:"".concat(!k&&_stylesModule.default.scrollbarClosed," ").concat(R.listScrollbar),options:{suppressScrollX:!0}},m.map(e=>{let{key:o,show:t=!0,options:r,...s}=e;if(!t)return!1;const l=!(0,_array.isEmpty)(r),a=l&&r.filter(e=>e.show);if(l&&(0,_array.isEmpty)(a))return!1;const n=(0,_array.isEmpty)(r)?_Option.default:_ListOption.default;return _react.default.createElement(n,_extends({classes:R,handleClose:u,handleRedirect:d,isSelected:y,key:o,labelAlwaysVisible:g,location:f,open:k,openDrawer:_,options:a,withTooltip:S},s))}))),p&&_react.default.createElement(p,null),i&&c&&_react.default.createElement(_LogosContainer.default,{BigLogo:i,SmallLogo:c,bigLogoClassName:R.footerBigLogo,smallLogoClassName:R.footerSmallLogo,containerClassName:R.footerLogoContainer,showBigLogo:k}))),_react.default.createElement(_Backdrop.default,{open:a&&M&&T,className:_stylesModule.default.backdrop,onClick:E}))};UTSidebar.propTypes={Background:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),badgeContent:_propTypes.string,BigLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),classes:_types.classType,classNames:(0,_propTypes.objectOf)(_propTypes.string),collapsible:_propTypes.bool,docked:_propTypes.bool,Footer:_propTypes.elementType,FooterBigLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),FooterSmallLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),handleClose:_propTypes.func,handleOpen:_propTypes.func,handleRedirect:_propTypes.func,isSelected:_propTypes.func,labelAlwaysVisible:_propTypes.bool,location:_propTypes.string,open:_propTypes.bool,options:_types.optionsType,SmallLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),subtitle:_propTypes.string,title:_propTypes.string,TogglerIconClosed:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),TogglerIconOpen:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),withMouseActions:_propTypes.bool,withoutToggler:_propTypes.bool,withTooltip:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTSidebar);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_propTypes=require("prop-types"),_Backdrop=_interopRequireDefault(require("@material-ui/core/Backdrop")),_Divider=_interopRequireDefault(require("@material-ui/core/Divider")),_Drawer=_interopRequireDefault(require("@material-ui/core/Drawer")),_List=_interopRequireDefault(require("@material-ui/core/List")),_reactPerfectScrollbar=_interopRequireDefault(require("react-perfect-scrollbar"));require("react-perfect-scrollbar/dist/css/styles.css");var _partition=_interopRequireDefault(require("lodash/partition")),_array=require("@widergy/web-utils/lib/array"),_useScreenSize=require("../../utils/useScreenSize"),_classesUtils=require("../../utils/classesUtils"),_WithTheme=_interopRequireDefault(require("../WithTheme")),_types=require("./types"),_constants=require("./constants"),_theme=require("./theme"),_ListOption=_interopRequireDefault(require("./components/ListOption")),_LogosContainer=_interopRequireDefault(require("./components/LogosContainer")),_DynamicIcon=_interopRequireDefault(require("./components/LogosContainer/components/DynamicIcon")),_Option=_interopRequireDefault(require("./components/Option")),_Toggler=_interopRequireDefault(require("./components/Toggler")),_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 o=new WeakMap,r=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var a,l,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(a=t?r:o){if(a.has(e))return a.get(e);a.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((l=(a=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(l.get||l.set)?a(s,t,l):s[t]=e[t]);return s})(e,t)}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 r in o)({}).hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e},_extends.apply(null,arguments)}const UTSidebar=e=>{let{Background:t,badgeContent:o,BigLogo:r,classes:a,classNames:l,collapsible:s=!0,docked:n,Footer:i,FooterBigLogo:p,FooterSmallLogo:c,handleClose:u,handleOpen:_,handleRedirect:d,isSelected:y,labelAlwaysVisible:f,location:g,open:T,options:m,SmallLogo:b,subtitle:q,title:h,TogglerIconClosed:L,TogglerIconOpen:O,withMouseActions:w,withoutToggler:C,withTooltip:D}=e;const{isTabletOrDesktop:S}=(0,_useScreenSize.useScreenSize)(),R=null!=n?n:S,M=(0,_react.useMemo)(()=>(0,_classesUtils.mergeMultipleClassNames)(a,l),[l]),v=!s||T,E=s&&!C,N=()=>T?u():_(),B=e=>{let{key:t,show:o=!0,options:r,...a}=e;if(!o)return null;const l=!(0,_array.isEmpty)(r),s=l&&r.filter(e=>e.show);if(l&&(0,_array.isEmpty)(s))return null;const n=(0,_array.isEmpty)(r)?_Option.default:_ListOption.default;return _react.default.createElement(n,_extends({classes:M,handleClose:u,handleRedirect:d,isSelected:y,key:t,labelAlwaysVisible:f,location:g,open:v,openDrawer:_,options:s,withTooltip:D},a))},[k,I]=(0,_partition.default)(m,e=>{let{variant:t}=e;return t===_constants.OPTION_VARIANTS.highlighted}).map(e=>e.map(B).filter(Boolean)),P=!(0,_array.isEmpty)(k)&&!(0,_array.isEmpty)(I);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Drawer.default,{open:R||T,variant:R?"persistent":"temporary",classes:{root:M.drawerRoot,paper:"\n            ".concat(M.drawer,"\n            ").concat(_stylesModule.default.drawer,"\n            ").concat(v?M.openedDrawer:_stylesModule.default.removeShadow,"\n          ")},ModalProps:{onClose:u},onMouseLeave:()=>w&&u(),onMouseEnter:()=>w&&_()},t&&_react.default.createElement(_DynamicIcon.default,{Icon:t,className:"".concat(_stylesModule.default.background," ").concat(M.background||"")}),(r||b)&&_react.default.createElement(_LogosContainer.default,{badgeClassName:v?M.logoBadgeOpen:M.logoBadgeClose,badgeContent:o,BigLogo:r,SmallLogo:b,bigLogoClassName:M.bigLogo,smallLogoClassName:M.smallLogo,containerClassName:M.logoContainer,showBigLogo:v}),E&&_react.default.createElement(_Toggler.default,{toggleDrawer:N,open:v,classes:M,IconClosed:L,IconOpen:O,title:h,subtitle:q}),_react.default.createElement("div",{className:_stylesModule.default.sidebarContent},_react.default.createElement(_List.default,{className:"".concat(M.list," ").concat(v&&M.listOpened," ").concat(_stylesModule.default.list)},_react.default.createElement(_reactPerfectScrollbar.default,{className:"".concat(!v&&_stylesModule.default.scrollbarClosed," ").concat(M.listScrollbar),options:_constants.SCROLLBAR_OPTIONS},k,P&&_react.default.createElement(_Divider.default,{className:"".concat(_stylesModule.default.optionsDivider," ").concat(M.optionsDivider||"")}),I)),i&&_react.default.createElement(i,null),p&&c&&_react.default.createElement(_LogosContainer.default,{BigLogo:p,SmallLogo:c,bigLogoClassName:M.footerBigLogo,smallLogoClassName:M.footerSmallLogo,containerClassName:M.footerLogoContainer,showBigLogo:v}))),_react.default.createElement(_Backdrop.default,{open:s&&R&&T,className:_stylesModule.default.backdrop,onClick:N}))};UTSidebar.propTypes={Background:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),badgeContent:_propTypes.string,BigLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),classes:_types.classType,classNames:(0,_propTypes.objectOf)(_propTypes.string),collapsible:_propTypes.bool,docked:_propTypes.bool,Footer:_propTypes.elementType,FooterBigLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),FooterSmallLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),handleClose:_propTypes.func,handleOpen:_propTypes.func,handleRedirect:_propTypes.func,isSelected:_propTypes.func,labelAlwaysVisible:_propTypes.bool,location:_propTypes.string,open:_propTypes.bool,options:_types.optionsType,SmallLogo:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),subtitle:_propTypes.string,title:_propTypes.string,TogglerIconClosed:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),TogglerIconOpen:(0,_propTypes.oneOfType)([_types.iconType,_propTypes.string]),withMouseActions:_propTypes.bool,withoutToggler:_propTypes.bool,withTooltip:_propTypes.bool};var _default=exports.default=(0,_WithTheme.default)(_theme.retrieveStyle)(UTSidebar);

package/dist/components/UTSidebar/styles.module.scss

@@ -62,3 +62,8 @@
   overflow: hidden;
   width: 100%;
 }
+
+.optionsDivider {
+  flex-shrink: 0;
+  margin: var(--gap-sm, 0.5rem) 0;
+}

package/dist/components/UTSidebar/types.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.subOptionType=exports.optionsType=exports.optionType=exports.iconType=exports.classType=void 0;var _propTypes=require("prop-types");const classType=exports.classType=(0,_propTypes.shape)({background:_propTypes.string,bigLogo:_propTypes.string,closeDrawerContainer:_propTypes.string,closeIcon:_propTypes.string,drawer:_propTypes.string,drawerRoot:_propTypes.string,drawerSubtitle:_propTypes.string,drawerTitle:_propTypes.string,list:_propTypes.string,listOpened:_propTypes.string,logoContainer:_propTypes.string,menuIcon:_propTypes.string,smallLogo:_propTypes.string,selectedMarker:_propTypes.string,selectedMarkerOpened:_propTypes.string,openedDrawer:_propTypes.string,option:_propTypes.string,optionIcon:_propTypes.string,optionIconSelected:_propTypes.string,optionIconContainer:_propTypes.string,optionIconContainerSelected:_propTypes.string,optionLabel:_propTypes.string,optionLabelBottom:_propTypes.string,optionLabelBottomSelected:_propTypes.string,optionLabelSelected:_propTypes.string,optionSelected:_propTypes.string,optionMenu:_propTypes.string,subOption:_propTypes.string,subOptionIcon:_propTypes.string,subOptionIconContainer:_propTypes.string,subOptionLabel:_propTypes.string,subOptionLabelSelected:_propTypes.string,subOptionSelected:_propTypes.string,togglerContainer:_propTypes.string}),iconType=exports.iconType=(0,_propTypes.oneOfType)([_propTypes.func,_propTypes.elementType]),subOptionType=exports.subOptionType=(0,_propTypes.shape)({dataTestId:_propTypes.string,iconClassName:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),key:_propTypes.string,label:_propTypes.string,link:_propTypes.string,onClick:_propTypes.func,show:_propTypes.bool}),optionType=exports.optionType=(0,_propTypes.shape)({iconClassName:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),key:_propTypes.string,IconActive:_propTypes.elementType,IconInactive:_propTypes.elementType,link:_propTypes.string,label:_propTypes.string,onClick:_propTypes.func,show:_propTypes.bool,options:(0,_propTypes.arrayOf)(subOptionType)}),optionsType=exports.optionsType=(0,_propTypes.arrayOf)(optionType);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.subOptionType=exports.optionsType=exports.optionType=exports.iconType=exports.classType=void 0;var _propTypes=require("prop-types"),_constants=require("./constants");const classType=exports.classType=(0,_propTypes.shape)({background:_propTypes.string,bigLogo:_propTypes.string,closeDrawerContainer:_propTypes.string,closeIcon:_propTypes.string,drawer:_propTypes.string,drawerRoot:_propTypes.string,drawerSubtitle:_propTypes.string,drawerTitle:_propTypes.string,list:_propTypes.string,listOpened:_propTypes.string,logoContainer:_propTypes.string,menuIcon:_propTypes.string,smallLogo:_propTypes.string,selectedMarker:_propTypes.string,selectedMarkerOpened:_propTypes.string,openedDrawer:_propTypes.string,option:_propTypes.string,optionIcon:_propTypes.string,optionIconSelected:_propTypes.string,optionIconContainer:_propTypes.string,optionIconContainerSelected:_propTypes.string,optionLabel:_propTypes.string,optionLabelBottom:_propTypes.string,optionLabelBottomSelected:_propTypes.string,optionLabelSelected:_propTypes.string,optionSelected:_propTypes.string,optionMenu:_propTypes.string,optionsDivider:_propTypes.string,subOption:_propTypes.string,subOptionIcon:_propTypes.string,subOptionIconContainer:_propTypes.string,subOptionLabel:_propTypes.string,subOptionLabelSelected:_propTypes.string,subOptionSelected:_propTypes.string,togglerContainer:_propTypes.string}),iconType=exports.iconType=(0,_propTypes.oneOfType)([_propTypes.func,_propTypes.elementType]),subOptionType=exports.subOptionType=(0,_propTypes.shape)({dataTestId:_propTypes.string,iconClassName:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),key:_propTypes.string,label:_propTypes.string,link:_propTypes.string,onClick:_propTypes.func,show:_propTypes.bool}),optionType=exports.optionType=(0,_propTypes.shape)({iconClassName:_propTypes.string,id:(0,_propTypes.oneOfType)([_propTypes.string,(0,_propTypes.arrayOf)(_propTypes.string)]),key:_propTypes.string,IconActive:_propTypes.elementType,IconInactive:_propTypes.elementType,link:_propTypes.string,label:_propTypes.string,onClick:_propTypes.func,show:_propTypes.bool,options:(0,_propTypes.arrayOf)(subOptionType),variant:(0,_propTypes.oneOf)(Object.values(_constants.OPTION_VARIANTS))}),optionsType=exports.optionsType=(0,_propTypes.arrayOf)(optionType);

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

@@ -1 +1 @@
-import{COLOR_THEMES}from"../../constants/Palette";export const VARIANTS_NAMES={TITLE1:"title1",TITLE2:"title2",TITLE3:"title3",SUBTITLE1:"subtitle1",SUBTITLE2:"subtitle2",BODY:"body",SMALL:"small",XSMALL:"xsmall",TH:"th",TD:"td"};export const VARIANTS={[VARIANTS_NAMES.TITLE1]:"h1",[VARIANTS_NAMES.TITLE2]:"h2",[VARIANTS_NAMES.TITLE3]:"h3",[VARIANTS_NAMES.SUBTITLE1]:"h4",[VARIANTS_NAMES.SUBTITLE2]:"h5",[VARIANTS_NAMES.BODY]:"div",[VARIANTS_NAMES.SMALL]:"div",[VARIANTS_NAMES.XSMALL]:"div",[VARIANTS_NAMES.TH]:"th",[VARIANTS_NAMES.TD]:"td"};export const VARIANTS_SIZES={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-size-title-1, 1.875rem)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-size-title-2, 1.5rem)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-size-title-3, 1.375rem)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-size-subtitle-1, 1.125rem)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-size-subtitle-2, 1rem)",[VARIANTS_NAMES.BODY]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-size-small, 0.75rem)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-size-xsmall, 0.75rem)",[VARIANTS_NAMES.TH]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.TD]:"var(--UT-label-size-body, 1rem)"};export const VARIANTS_LINE_HEIGHT={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.BODY]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-lh-small, 1.4)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-lh-xsmall, 1.5)",[VARIANTS_NAMES.TH]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.TD]:"var(--UT-label-lh-body, 1.4)"};export const WEIGHTS={thin:"var(--UT-label-weight-thin, 100)",extralight:"var(--UT-label-weight-extralight, 200)",light:"var(--UT-label-weight-light, 300)",regular:"var(--UT-label-weight-regular, 400)",medium:"var(--UT-label-weight-medium, 500)",semibold:"var(--UT-label-weight-semibold, 600)",bold:"var(--UT-label-weight-bold, 700)",extrabold:"var(--UT-label-weight-extrabold, 800)",black:"var(--UT-label-weight-black, 900)"};export const DEFAULT_PROPS={colorTheme:COLOR_THEMES.dark,field:{},gradient:!1,markdownExtended:!1,markdownRenderers:{},variant:"body",weight:"regular",withMarkdown:!1};export const getGradientTokenName=T=>"decorative-".concat(T,"-gradient");export const GRADIENT_FALLBACKS={[COLOR_THEMES.information]:"linear-gradient(88.75deg, #1291FF 0%, #67E8F9 100%)",[COLOR_THEMES.warning]:"linear-gradient(88.75deg, #EC6707 0%, #FBCA3A 100%)"};export const DEFAULT_GRADIENT_FALLBACK=GRADIENT_FALLBACKS[COLOR_THEMES.information];
+import{COLOR_THEMES}from"../../constants/Palette";import Colors from"../../scss/variables/colors.module.scss";export const VARIANTS_NAMES={TITLE1:"title1",TITLE2:"title2",TITLE3:"title3",SUBTITLE1:"subtitle1",SUBTITLE2:"subtitle2",BODY:"body",SMALL:"small",XSMALL:"xsmall",TH:"th",TD:"td"};export const VARIANTS={[VARIANTS_NAMES.TITLE1]:"h1",[VARIANTS_NAMES.TITLE2]:"h2",[VARIANTS_NAMES.TITLE3]:"h3",[VARIANTS_NAMES.SUBTITLE1]:"h4",[VARIANTS_NAMES.SUBTITLE2]:"h5",[VARIANTS_NAMES.BODY]:"div",[VARIANTS_NAMES.SMALL]:"div",[VARIANTS_NAMES.XSMALL]:"div",[VARIANTS_NAMES.TH]:"th",[VARIANTS_NAMES.TD]:"td"};export const VARIANTS_SIZES={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-size-title-1, 1.875rem)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-size-title-2, 1.5rem)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-size-title-3, 1.375rem)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-size-subtitle-1, 1.125rem)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-size-subtitle-2, 1rem)",[VARIANTS_NAMES.BODY]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-size-small, 0.75rem)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-size-xsmall, 0.75rem)",[VARIANTS_NAMES.TH]:"var(--UT-label-size-body, 1rem)",[VARIANTS_NAMES.TD]:"var(--UT-label-size-body, 1rem)"};export const VARIANTS_LINE_HEIGHT={[VARIANTS_NAMES.TITLE1]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE2]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.TITLE3]:"var(--UT-label-lh-heading, 1.2)",[VARIANTS_NAMES.SUBTITLE1]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.SUBTITLE2]:"var(--UT-label-lh-subheading, 1.4)",[VARIANTS_NAMES.BODY]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.SMALL]:"var(--UT-label-lh-small, 1.4)",[VARIANTS_NAMES.XSMALL]:"var(--UT-label-lh-xsmall, 1.5)",[VARIANTS_NAMES.TH]:"var(--UT-label-lh-body, 1.4)",[VARIANTS_NAMES.TD]:"var(--UT-label-lh-body, 1.4)"};export const WEIGHTS={thin:"var(--UT-label-weight-thin, 100)",extralight:"var(--UT-label-weight-extralight, 200)",light:"var(--UT-label-weight-light, 300)",regular:"var(--UT-label-weight-regular, 400)",medium:"var(--UT-label-weight-medium, 500)",semibold:"var(--UT-label-weight-semibold, 600)",bold:"var(--UT-label-weight-bold, 700)",extrabold:"var(--UT-label-weight-extrabold, 800)",black:"var(--UT-label-weight-black, 900)"};export const DEFAULT_PROPS={colorTheme:COLOR_THEMES.dark,field:{},gradient:!1,markdownExtended:!1,markdownRenderers:{},variant:"body",weight:"regular",withMarkdown:!1};export const getGradientTokenName=T=>"decorative-".concat(T,"-gradient");export const GRADIENT_FALLBACKS={[COLOR_THEMES.information]:Colors.informationGradient,[COLOR_THEMES.warning]:"linear-gradient(88.75deg, #EC6707 0%, #FBCA3A 100%)"};export const DEFAULT_GRADIENT_FALLBACK=GRADIENT_FALLBACKS[COLOR_THEMES.information];

package/dist/esm/components/UTSidebar/components/Option/index.js

@@ -1 +1 @@
-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,{Fragment,memo}from"react";import{arrayOf,string,bool,func,oneOfType,shape,number}from"prop-types";import ListItem from"@material-ui/core/ListItem";import ListItemIcon from"@material-ui/core/ListItemIcon";import ListItemText from"@material-ui/core/ListItemText";import ExpandMoreIcon from"@material-ui/icons/ExpandMore";import{isUTIcon}from"../../../../utils/componentUtils";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import UTIcon from"../../../UTIcon";import{classType,iconType}from"../../types";import{TOOLTIP_CONFIG}from"./constants";import styles from"./styles.module.scss";const Option=e=>{let{classes:t,dataTestId:o,handleClose:n,handleRedirect:c,IconActive:a,IconInactive:i,iconClassName:s,iconProps:l,id:r,isSelected:m,isSelectedGroup:p,label:d,labelAlwaysVisible:I,link:T,location:y,onClick:g,open:b,toggleArrowActive:f,withToggleArrow:u,withTooltip:h}=e;const L=p||(m?m({id:r,link:T},y):T===y),v=h?UTTooltip:Fragment,O=h&&{...TOOLTIP_CONFIG,content:React.createElement(UTLabel,{className:t.tooltipLabel},d),className:t.tooltip};return React.createElement(v,O,React.createElement(ListItem,{"data-testid":o,className:"\n        ".concat(styles.option,"\n        ").concat(t.option,"\n        ").concat(L&&"".concat(styles.optionSelected," ").concat(t.optionSelected),"\n        ").concat(L&&b&&t.optionSelectedOpened,"\n        ").concat(L&&!p&&!h&&styles.removeEvents,"\n      "),onClick:g||(()=>{c(T),n&&n()})},React.createElement(ListItemIcon,{className:"\n          ".concat(t.optionIconContainer,"\n          ").concat(L&&"".concat(t.optionIconContainerSelected," ").concat(styles.optionIconContainerSelected),"\n          ").concat(styles.optionIconContainer,"\n        ")},i&&(isUTIcon(i)?React.createElement(UTIcon,_extends({name:i,className:"".concat(t.optionIcon," ").concat(styles.optionIcon," ").concat(s||"")},(null==l?void 0:l.inactive)||{})):React.createElement(i,{className:"".concat(t.optionIcon," ").concat(styles.optionIcon," ").concat(s||"")})),a&&(isUTIcon(a)?React.createElement(UTIcon,_extends({name:a,className:"".concat(t.optionIcon," ").concat(styles.optionIconSelected," ").concat(t.optionIconSelected," ").concat(s||"")},(null==l?void 0:l.active)||{})):React.createElement(a,{className:"".concat(t.optionIcon," ").concat(styles.optionIconSelected," ").concat(t.optionIconSelected," ").concat(s||"")}))),React.createElement(ListItemText,{disableTypography:!0,className:"\n          ".concat(t.optionLabel,"\n          ").concat(L&&t.optionLabelSelected,"\n          ").concat(!b&&styles.hidden,"\n        "),primary:d}),!b&&I&&React.createElement(ListItemText,{disableTypography:!0,className:"\n            ".concat(styles.optionLabelBottom,"\n            ").concat(t.optionLabelBottom,"\n            ").concat(L&&t.optionLabelBottomSelected,"\n          "),primary:d}),b&&u&&React.createElement(ExpandMoreIcon,{className:"\n            ".concat(styles.toggleArrow,"\n            ").concat(t.toggleArrow,"\n            ").concat(f&&styles.toggleArrowActive,"\n          ")})))};Option.propTypes={classes:classType,dataTestId:string,handleClose:func,handleRedirect:func,IconActive:iconType,IconInactive:iconType,iconClassName:string,iconProps:shape({active:shape({colorTheme:string,name:string,shade:string,size:number}),inactive:shape({colorTheme:string,name:string,shade:string,size:number})}),id:oneOfType([string,arrayOf(string)]),isSelected:func,isSelectedGroup:bool,label:string,labelAlwaysVisible:bool,link:string,location:string,onClick:func,open:bool,toggleArrowActive:bool,withToggleArrow:bool,withTooltip:bool};export default memo(Option);
+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,{Fragment,memo}from"react";import{arrayOf,string,bool,func,oneOf,oneOfType,shape,number}from"prop-types";import ListItem from"@material-ui/core/ListItem";import ListItemIcon from"@material-ui/core/ListItemIcon";import ListItemText from"@material-ui/core/ListItemText";import ExpandMoreIcon from"@material-ui/icons/ExpandMore";import{isUTIcon}from"../../../../utils/componentUtils";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import UTIcon from"../../../UTIcon";import{DEFAULT_OPTION_PROPS,HIGHLIGHTED_ICON_PROPS,OPTION_VARIANTS}from"../../constants";import{classType,iconType}from"../../types";import{TOOLTIP_CONFIG}from"./constants";import styles from"./styles.module.scss";const Option=e=>{let{classes:t,dataTestId:o,handleClose:n,handleRedirect:c,IconActive:a,IconInactive:i,iconClassName:s,iconProps:l,id:r,isSelected:m,isSelectedGroup:p,label:I,labelAlwaysVisible:d,link:T,location:g,onClick:y,open:O,toggleArrowActive:b,variant:f=DEFAULT_OPTION_PROPS.variant,withToggleArrow:h,withTooltip:u}=e;const L=p||(m?m({id:r,link:T},g):T===g),N=f===OPTION_VARIANTS.highlighted,v=l||(N?HIGHLIGHTED_ICON_PROPS:void 0),A=u?UTTooltip:Fragment,S=u&&{...TOOLTIP_CONFIG,content:React.createElement(UTLabel,{className:t.tooltipLabel},I),className:t.tooltip};return React.createElement(A,S,React.createElement(ListItem,{"data-testid":o,className:"\n        ".concat(styles.option,"\n        ").concat(t.option,"\n        ").concat(N&&styles.highlighted,"\n        ").concat(L&&"".concat(styles.optionSelected," ").concat(t.optionSelected),"\n        ").concat(L&&O&&t.optionSelectedOpened,"\n        ").concat(L&&!p&&!u&&styles.removeEvents,"\n      "),onClick:y||(()=>{c(T),n&&n()})},React.createElement(ListItemIcon,{className:"\n          ".concat(t.optionIconContainer,"\n          ").concat(L&&"".concat(t.optionIconContainerSelected," ").concat(styles.optionIconContainerSelected),"\n          ").concat(styles.optionIconContainer,"\n        ")},i&&(isUTIcon(i)?React.createElement(UTIcon,_extends({name:i,className:"".concat(t.optionIcon," ").concat(styles.optionIcon," ").concat(s||"")},(null==v?void 0:v.inactive)||{})):React.createElement(i,{className:"".concat(t.optionIcon," ").concat(styles.optionIcon," ").concat(s||"")})),a&&(isUTIcon(a)?React.createElement(UTIcon,_extends({name:a,className:"".concat(t.optionIcon," ").concat(styles.optionIconSelected," ").concat(t.optionIconSelected," ").concat(s||"")},(null==v?void 0:v.active)||{})):React.createElement(a,{className:"".concat(t.optionIcon," ").concat(styles.optionIconSelected," ").concat(t.optionIconSelected," ").concat(s||"")}))),React.createElement(ListItemText,{disableTypography:!0,className:"\n          ".concat(t.optionLabel,"\n          ").concat(L&&t.optionLabelSelected,"\n          ").concat(N&&styles.highlightedLabel,"\n          ").concat(!O&&styles.hidden,"\n        "),primary:I}),!O&&d&&React.createElement(ListItemText,{disableTypography:!0,className:"\n            ".concat(styles.optionLabelBottom,"\n            ").concat(t.optionLabelBottom,"\n            ").concat(L&&t.optionLabelBottomSelected,"\n          "),primary:I}),O&&h&&React.createElement(ExpandMoreIcon,{className:"\n            ".concat(styles.toggleArrow,"\n            ").concat(t.toggleArrow,"\n            ").concat(b&&styles.toggleArrowActive,"\n          ")})))};Option.propTypes={classes:classType,dataTestId:string,handleClose:func,handleRedirect:func,IconActive:iconType,IconInactive:iconType,iconClassName:string,iconProps:shape({active:shape({colorTheme:string,name:string,shade:string,size:number}),inactive:shape({colorTheme:string,name:string,shade:string,size:number})}),id:oneOfType([string,arrayOf(string)]),isSelected:func,isSelectedGroup:bool,label:string,labelAlwaysVisible:bool,link:string,location:string,onClick:func,open:bool,toggleArrowActive:bool,variant:oneOf(Object.values(OPTION_VARIANTS)),withToggleArrow:bool,withTooltip:bool};export default memo(Option);

package/dist/esm/components/UTSidebar/components/Option/styles.module.scss

@@ -1,3 +1,5 @@
+@use '../../../../scss/variables/colors.module.scss' as *;
+
 .option {
   cursor: pointer;
   overflow: hidden;
@@ -17,7 +19,9 @@
   &::after {
     content: '';
     position: absolute;
-    transition: background-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, right 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    transition:
+      background-color 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      right 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   }
 }
 
@@ -69,3 +73,11 @@
 .toggleArrowActive {
   transform: rotate(180deg);
 }
+
+.highlighted {
+  background-image: var(--decorative-information-gradient, $information-gradient);
+
+  .highlightedLabel {
+    color: var(--light01, $white);
+  }
+}

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

@@ -0,0 +1 @@
+import{COLOR_SHADES,COLOR_THEMES}from"../../constants/Palette";export const OPTION_VARIANTS={default:"default",highlighted:"highlighted"};export const SCROLLBAR_OPTIONS={scrollYMarginOffset:1,suppressScrollX:!0};export const DEFAULT_OPTION_PROPS={variant:OPTION_VARIANTS.default};const HIGHLIGHTED_ICON_COLOR={colorTheme:COLOR_THEMES.light,shade:COLOR_SHADES.shade01};export const HIGHLIGHTED_ICON_PROPS={active:HIGHLIGHTED_ICON_COLOR,inactive:HIGHLIGHTED_ICON_COLOR};

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

@@ -1 +1 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var s in t)({}).hasOwnProperty.call(t,s)&&(e[s]=t[s])}return e},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{bool,elementType,func,objectOf,oneOfType,string}from"prop-types";import Backdrop from"@material-ui/core/Backdrop";import Drawer from"@material-ui/core/Drawer";import List from"@material-ui/core/List";import ScrollBar from"react-perfect-scrollbar";import"react-perfect-scrollbar/dist/css/styles.css";import{isEmpty}from"@widergy/web-utils/lib/array";import{useScreenSize}from"../../utils/useScreenSize";import{mergeMultipleClassNames}from"../../utils/classesUtils";import WithTheme from"../WithTheme";import{classType,iconType,optionsType}from"./types";import{retrieveStyle}from"./theme";import ListOption from"./components/ListOption";import LogosContainer from"./components/LogosContainer";import DynamicIcon from"./components/LogosContainer/components/DynamicIcon";import Option from"./components/Option";import Toggler from"./components/Toggler";import styles from"./styles.module.scss";const UTSidebar=e=>{let{Background:o,badgeContent:t,BigLogo:s,classes:n,classNames:r,collapsible:l=!0,docked:a,Footer:i,FooterBigLogo:c,FooterSmallLogo:p,handleClose:m,handleOpen:g,handleRedirect:d,isSelected:y,labelAlwaysVisible:f,location:u,open:b,options:T,SmallLogo:L,subtitle:C,title:h,TogglerIconClosed:w,TogglerIconOpen:O,withMouseActions:S,withoutToggler:B,withTooltip:R}=e;const{isTabletOrDesktop:E}=useScreenSize(),N=null!=a?a:E,k=useMemo(()=>mergeMultipleClassNames(n,r),[r]),D=!l||b,I=l&&!B,v=()=>b?m():g();return React.createElement(React.Fragment,null,React.createElement(Drawer,{open:N||b,variant:N?"persistent":"temporary",classes:{root:k.drawerRoot,paper:"\n            ".concat(k.drawer,"\n            ").concat(styles.drawer,"\n            ").concat(D?k.openedDrawer:styles.removeShadow,"\n          ")},ModalProps:{onClose:m},onMouseLeave:()=>S&&m(),onMouseEnter:()=>S&&g()},o&&React.createElement(DynamicIcon,{Icon:o,className:"".concat(styles.background," ").concat(k.background||"")}),(s||L)&&React.createElement(LogosContainer,{badgeClassName:D?k.logoBadgeOpen:k.logoBadgeClose,badgeContent:t,BigLogo:s,SmallLogo:L,bigLogoClassName:k.bigLogo,smallLogoClassName:k.smallLogo,containerClassName:k.logoContainer,showBigLogo:D}),I&&React.createElement(Toggler,{toggleDrawer:v,open:D,classes:k,IconClosed:w,IconOpen:O,title:h,subtitle:C}),React.createElement("div",{className:styles.sidebarContent},React.createElement(List,{className:"".concat(k.list," ").concat(D&&k.listOpened," ").concat(styles.list)},React.createElement(ScrollBar,{className:"".concat(!D&&styles.scrollbarClosed," ").concat(k.listScrollbar),options:{suppressScrollX:!0}},T.map(e=>{let{key:o,show:t=!0,options:s,...n}=e;if(!t)return!1;const r=!isEmpty(s),l=r&&s.filter(e=>e.show);if(r&&isEmpty(l))return!1;const a=isEmpty(s)?Option:ListOption;return React.createElement(a,_extends({classes:k,handleClose:m,handleRedirect:d,isSelected:y,key:o,labelAlwaysVisible:f,location:u,open:D,openDrawer:g,options:l,withTooltip:R},n))}))),i&&React.createElement(i,null),c&&p&&React.createElement(LogosContainer,{BigLogo:c,SmallLogo:p,bigLogoClassName:k.footerBigLogo,smallLogoClassName:k.footerSmallLogo,containerClassName:k.footerLogoContainer,showBigLogo:D}))),React.createElement(Backdrop,{open:l&&N&&b,className:styles.backdrop,onClick:v}))};UTSidebar.propTypes={Background:oneOfType([iconType,string]),badgeContent:string,BigLogo:oneOfType([iconType,string]),classes:classType,classNames:objectOf(string),collapsible:bool,docked:bool,Footer:elementType,FooterBigLogo:oneOfType([iconType,string]),FooterSmallLogo:oneOfType([iconType,string]),handleClose:func,handleOpen:func,handleRedirect:func,isSelected:func,labelAlwaysVisible:bool,location:string,open:bool,options:optionsType,SmallLogo:oneOfType([iconType,string]),subtitle:string,title:string,TogglerIconClosed:oneOfType([iconType,string]),TogglerIconOpen:oneOfType([iconType,string]),withMouseActions:bool,withoutToggler:bool,withTooltip:bool};export default WithTheme(retrieveStyle)(UTSidebar);
+function _extends(){return _extends=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var t=arguments[o];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},_extends.apply(null,arguments)}import React,{useMemo}from"react";import{bool,elementType,func,objectOf,oneOfType,string}from"prop-types";import Backdrop from"@material-ui/core/Backdrop";import Divider from"@material-ui/core/Divider";import Drawer from"@material-ui/core/Drawer";import List from"@material-ui/core/List";import ScrollBar from"react-perfect-scrollbar";import"react-perfect-scrollbar/dist/css/styles.css";import partition from"lodash/partition";import{isEmpty}from"@widergy/web-utils/lib/array";import{useScreenSize}from"../../utils/useScreenSize";import{mergeMultipleClassNames}from"../../utils/classesUtils";import WithTheme from"../WithTheme";import{classType,iconType,optionsType}from"./types";import{OPTION_VARIANTS,SCROLLBAR_OPTIONS}from"./constants";import{retrieveStyle}from"./theme";import ListOption from"./components/ListOption";import LogosContainer from"./components/LogosContainer";import DynamicIcon from"./components/LogosContainer/components/DynamicIcon";import Option from"./components/Option";import Toggler from"./components/Toggler";import styles from"./styles.module.scss";const UTSidebar=e=>{let{Background:o,badgeContent:t,BigLogo:n,classes:r,classNames:s,collapsible:l=!0,docked:a,Footer:i,FooterBigLogo:c,FooterSmallLogo:p,handleClose:m,handleOpen:g,handleRedirect:d,isSelected:y,labelAlwaysVisible:f,location:u,open:T,options:b,SmallLogo:L,subtitle:O,title:h,TogglerIconClosed:C,TogglerIconOpen:S,withMouseActions:w,withoutToggler:R,withTooltip:N}=e;const{isTabletOrDesktop:B}=useScreenSize(),E=null!=a?a:B,I=useMemo(()=>mergeMultipleClassNames(r,s),[s]),v=!l||T,D=l&&!R,k=()=>T?m():g(),A=e=>{let{key:o,show:t=!0,options:n,...r}=e;if(!t)return null;const s=!isEmpty(n),l=s&&n.filter(e=>e.show);if(s&&isEmpty(l))return null;const a=isEmpty(n)?Option:ListOption;return React.createElement(a,_extends({classes:I,handleClose:m,handleRedirect:d,isSelected:y,key:o,labelAlwaysVisible:f,location:u,open:v,openDrawer:g,options:l,withTooltip:N},r))},[M,_]=partition(b,e=>{let{variant:o}=e;return o===OPTION_VARIANTS.highlighted}).map(e=>e.map(A).filter(Boolean)),F=!isEmpty(M)&&!isEmpty(_);return React.createElement(React.Fragment,null,React.createElement(Drawer,{open:E||T,variant:E?"persistent":"temporary",classes:{root:I.drawerRoot,paper:"\n            ".concat(I.drawer,"\n            ").concat(styles.drawer,"\n            ").concat(v?I.openedDrawer:styles.removeShadow,"\n          ")},ModalProps:{onClose:m},onMouseLeave:()=>w&&m(),onMouseEnter:()=>w&&g()},o&&React.createElement(DynamicIcon,{Icon:o,className:"".concat(styles.background," ").concat(I.background||"")}),(n||L)&&React.createElement(LogosContainer,{badgeClassName:v?I.logoBadgeOpen:I.logoBadgeClose,badgeContent:t,BigLogo:n,SmallLogo:L,bigLogoClassName:I.bigLogo,smallLogoClassName:I.smallLogo,containerClassName:I.logoContainer,showBigLogo:v}),D&&React.createElement(Toggler,{toggleDrawer:k,open:v,classes:I,IconClosed:C,IconOpen:S,title:h,subtitle:O}),React.createElement("div",{className:styles.sidebarContent},React.createElement(List,{className:"".concat(I.list," ").concat(v&&I.listOpened," ").concat(styles.list)},React.createElement(ScrollBar,{className:"".concat(!v&&styles.scrollbarClosed," ").concat(I.listScrollbar),options:SCROLLBAR_OPTIONS},M,F&&React.createElement(Divider,{className:"".concat(styles.optionsDivider," ").concat(I.optionsDivider||"")}),_)),i&&React.createElement(i,null),c&&p&&React.createElement(LogosContainer,{BigLogo:c,SmallLogo:p,bigLogoClassName:I.footerBigLogo,smallLogoClassName:I.footerSmallLogo,containerClassName:I.footerLogoContainer,showBigLogo:v}))),React.createElement(Backdrop,{open:l&&E&&T,className:styles.backdrop,onClick:k}))};UTSidebar.propTypes={Background:oneOfType([iconType,string]),badgeContent:string,BigLogo:oneOfType([iconType,string]),classes:classType,classNames:objectOf(string),collapsible:bool,docked:bool,Footer:elementType,FooterBigLogo:oneOfType([iconType,string]),FooterSmallLogo:oneOfType([iconType,string]),handleClose:func,handleOpen:func,handleRedirect:func,isSelected:func,labelAlwaysVisible:bool,location:string,open:bool,options:optionsType,SmallLogo:oneOfType([iconType,string]),subtitle:string,title:string,TogglerIconClosed:oneOfType([iconType,string]),TogglerIconOpen:oneOfType([iconType,string]),withMouseActions:bool,withoutToggler:bool,withTooltip:bool};export default WithTheme(retrieveStyle)(UTSidebar);

package/dist/esm/components/UTSidebar/styles.module.scss

@@ -62,3 +62,8 @@
   overflow: hidden;
   width: 100%;
 }
+
+.optionsDivider {
+  flex-shrink: 0;
+  margin: var(--gap-sm, 0.5rem) 0;
+}

package/dist/esm/components/UTSidebar/types.js

@@ -1 +1 @@
-import{arrayOf,elementType,shape,string,oneOfType,func,bool}from"prop-types";export const classType=shape({background:string,bigLogo:string,closeDrawerContainer:string,closeIcon:string,drawer:string,drawerRoot:string,drawerSubtitle:string,drawerTitle:string,list:string,listOpened:string,logoContainer:string,menuIcon:string,smallLogo:string,selectedMarker:string,selectedMarkerOpened:string,openedDrawer:string,option:string,optionIcon:string,optionIconSelected:string,optionIconContainer:string,optionIconContainerSelected:string,optionLabel:string,optionLabelBottom:string,optionLabelBottomSelected:string,optionLabelSelected:string,optionSelected:string,optionMenu:string,subOption:string,subOptionIcon:string,subOptionIconContainer:string,subOptionLabel:string,subOptionLabelSelected:string,subOptionSelected:string,togglerContainer:string});export const iconType=oneOfType([func,elementType]);export const subOptionType=shape({dataTestId:string,iconClassName:string,id:oneOfType([string,arrayOf(string)]),key:string,label:string,link:string,onClick:func,show:bool});export const optionType=shape({iconClassName:string,id:oneOfType([string,arrayOf(string)]),key:string,IconActive:elementType,IconInactive:elementType,link:string,label:string,onClick:func,show:bool,options:arrayOf(subOptionType)});export const optionsType=arrayOf(optionType);
+import{arrayOf,elementType,shape,string,oneOf,oneOfType,func,bool}from"prop-types";import{OPTION_VARIANTS}from"./constants";export const classType=shape({background:string,bigLogo:string,closeDrawerContainer:string,closeIcon:string,drawer:string,drawerRoot:string,drawerSubtitle:string,drawerTitle:string,list:string,listOpened:string,logoContainer:string,menuIcon:string,smallLogo:string,selectedMarker:string,selectedMarkerOpened:string,openedDrawer:string,option:string,optionIcon:string,optionIconSelected:string,optionIconContainer:string,optionIconContainerSelected:string,optionLabel:string,optionLabelBottom:string,optionLabelBottomSelected:string,optionLabelSelected:string,optionSelected:string,optionMenu:string,optionsDivider:string,subOption:string,subOptionIcon:string,subOptionIconContainer:string,subOptionLabel:string,subOptionLabelSelected:string,subOptionSelected:string,togglerContainer:string});export const iconType=oneOfType([func,elementType]);export const subOptionType=shape({dataTestId:string,iconClassName:string,id:oneOfType([string,arrayOf(string)]),key:string,label:string,link:string,onClick:func,show:bool});export const optionType=shape({iconClassName:string,id:oneOfType([string,arrayOf(string)]),key:string,IconActive:elementType,IconInactive:elementType,link:string,label:string,onClick:func,show:bool,options:arrayOf(subOptionType),variant:oneOf(Object.values(OPTION_VARIANTS))});export const optionsType=arrayOf(optionType);

package/dist/esm/scss/variables/colors.module.scss

@@ -57,6 +57,9 @@ $usage-indicator-gray: #C3C3C3;
 $error-red: #F44336;
 $card-background: #FAFAFA;
 $default-background-form: #F4F5F7;
+$information-gradient-start: #1291FF;
+$information-gradient-end: #67E8F9;
+$information-gradient: linear-gradient(88.75deg, $information-gradient-start 0%, $information-gradient-end 100%);
 
 // sass-lint:disable no-misspelled-properties
 // sass-lint:disable property-sort-order
@@ -99,4 +102,5 @@ $default-background-form: #F4F5F7;
   imageRadioBackground: $image-radio-background;
   imageRadioBackgroundHover: $image-radio-background-hover;
   ratingStarSelected: $rating-star-selected;
+  informationGradient: $information-gradient;
 }

package/dist/scss/variables/colors.module.scss

@@ -57,6 +57,9 @@ $usage-indicator-gray: #C3C3C3;
 $error-red: #F44336;
 $card-background: #FAFAFA;
 $default-background-form: #F4F5F7;
+$information-gradient-start: #1291FF;
+$information-gradient-end: #67E8F9;
+$information-gradient: linear-gradient(88.75deg, $information-gradient-start 0%, $information-gradient-end 100%);
 
 // sass-lint:disable no-misspelled-properties
 // sass-lint:disable property-sort-order
@@ -99,4 +102,5 @@ $default-background-form: #F4F5F7;
   imageRadioBackground: $image-radio-background;
   imageRadioBackgroundHover: $image-radio-background-hover;
   ratingStarSelected: $rating-star-selected;
+  informationGradient: $information-gradient;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.190.1",
+  "version": "3.191.0",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",