@widergy/energy-ui 3.158.1 → 3.160.0

package/dist/esm/components/UTShortcutPanel/stories/utils.js

@@ -0,0 +1,166 @@
+import { ID_CONSTANTS } from '../../../constants/testIds';
+import constants from './constants.json';
+const {
+  CLIENT_FILTER,
+  COLLAPSE_BUTTON,
+  COLLAPSE_BUTTON_TOOLTIP,
+  CUSTOM_SEARCH_ACTION,
+  DELETE_BUTTON,
+  DELETE_BUTTON_TOOLTIP,
+  EDIT_BUTTON,
+  EDIT_BUTTON_TOOLTIP,
+  EXPANDED_PANEL_CONTENT_CATEGORY,
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY,
+  EXPAND_BUTTON,
+  PERSISTENT_FILTER,
+  POPPER,
+  SEARCH_BUTTON,
+  SEARCH_BUTTON_TOOLTIP,
+  SEARCH_FIELD,
+  USER_FILTER
+} = ID_CONSTANTS;
+const {
+  MISC
+} = constants;
+const {
+  INDEX_PLACEHOLDER
+} = MISC;
+
+/**
+ * @fileoverview Utility functions for UTShortcutPanel stories
+ * @module UTShortcutPanel/stories/utils
+ */
+
+/**
+ * Formats a test ID string by replacing template placeholders with actual values
+ *
+ * @function testIdQuickFormat
+ * @param {string} testId - The test ID string containing placeholders in the format {{key}}
+ * @param {Object} replaceOptions - An object containing key-value pairs for replacement
+ * @returns {string} The formatted test ID with placeholders replaced by actual values
+ *
+ * @example
+ * testIdQuickFormat('filter.{{category}}.{{index}}', { category: 'energy', index: '0' })
+ * // Returns: 'filter.energy.0'
+ */
+const testIdQuickFormat = (testId, replaceOptions) => {
+  const idElementsArray = testId.split('.');
+  Object.entries(replaceOptions).forEach(_ref => {
+    let [key, value] = _ref;
+    if (idElementsArray.includes("{{".concat(key, "}}"))) {
+      const keyIndex = idElementsArray.indexOf("{{".concat(key, "}}"));
+      idElementsArray.splice(keyIndex, 1, value);
+    }
+  });
+  const finalId = idElementsArray.join('.');
+  return finalId;
+};
+
+/**
+ * Creates a promise that resolves after a specified delay
+ *
+ * @function delay
+ * @param {number} ms - The number of milliseconds to delay
+ * @returns {Promise<void>} A promise that resolves after the specified delay
+ *
+ * @example
+ * await delay(1000);
+ */
+
+export const delay = ms => new Promise(resolve => {
+  setTimeout(resolve, ms);
+});
+
+/**
+ * Creates a flattened collection of test IDs based on categories and ID templates.
+ * For each category and ID template, generates IDs with filter indices. If all generated
+ * IDs for a template are identical (no {{index}} placeholder), returns a single ID string;
+ * otherwise returns an array of indexed IDs.
+ *
+ * @function createExistingIds
+ * @param {Array<Object>} categories - Array of category objects, each containing:
+ * @param {Object<string, string>} idsList - Object containing ID template strings with placeholders
+ *   (e.g., {{category}}, {{index}})
+ * @returns {Array<string|Array<string>>} Flattened array containing single ID strings
+ *
+ * @example
+ * const categories = [
+ *   { category: 'energy', filters: [{}, {}] },
+ *   { category: 'water', filters: [{}] }
+ * ];
+ * const idsList = {
+ *   checkbox: 'filter.{{category}}.checkbox.{{index}}',
+ *   label: 'filter.{{category}}.label'
+ * };
+ * createExistingIds(categories, idsList)
+ * // Returns: [
+ * //   'filter.energy.label',
+ * //   'filter.water.checkbox.0',
+ * //   'filter.water.label'
+ * // ]
+ */
+export const createExistingIds = (categories, idsList) => {
+  const test = categories.map(_ref2 => {
+    let {
+      category,
+      filters
+    } = _ref2;
+    return Object.values(idsList).map(value => {
+      if (!value.includes(INDEX_PLACEHOLDER)) {
+        return testIdQuickFormat(value, {
+          category
+        });
+      }
+      const clientIdsWithIndex = [...filters].filter(_ref3 => {
+        let {
+          pinned
+        } = _ref3;
+        return pinned;
+      }).map((_, i) => value.includes(CLIENT_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      const userIdsWithIndex = [...filters].filter(_ref4 => {
+        let {
+          pinned
+        } = _ref4;
+        return !pinned;
+      }).map((_, i) => value.includes(USER_FILTER) ? testIdQuickFormat(value, {
+        category,
+        index: i
+      }) : false);
+      return [...clientIdsWithIndex, ...userIdsWithIndex];
+    });
+  }).flat(Infinity).filter(Boolean);
+  return test;
+};
+
+/**
+ * Determines if a test ID belongs to an item that requires hovering to be visible or interactive.
+ * This includes tooltips, poppers, and certain buttons that appear on hover.
+ *
+ * @function idBelongsToHoverableItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item requires hovering, false otherwise
+ */
+export const idBelongsToHoverableItem = item => item.includes(POPPER) || item.includes(DELETE_BUTTON) || item.includes(EDIT_BUTTON) || item.includes(COLLAPSE_BUTTON) || item.includes(SEARCH_BUTTON) || item.includes(DELETE_BUTTON_TOOLTIP) || item.includes(EDIT_BUTTON_TOOLTIP) || item.includes(COLLAPSE_BUTTON_TOOLTIP) || item.includes(SEARCH_BUTTON_TOOLTIP) || item.includes(CUSTOM_SEARCH_ACTION) || item.includes(COLLAPSE_BUTTON) && item.includes(EXPANDED_PANEL_CONTENT_CATEGORY);
+
+/**
+ * Determines if a test ID belongs to a collapsed item that needs to be expanded.
+ * Specifically checks for expand button elements.
+ *
+ * @function idBelongsToCollapsedItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is an expand button, false otherwise
+ */
+export const idBelongsToCollapsedItem = item => item.includes(EXPAND_BUTTON);
+
+/**
+ * Determines if a test ID belongs to an item that is not in its initial/start state.
+ * Currently checks for search field elements which may not be visible initially.
+ *
+ * @function idBelongsToNonStartItem
+ * @param {string} item - The test ID string to check
+ * @returns {boolean} True if the item is not in start state, false otherwise
+ */
+export const idBelongsToNonStartItem = item => item.includes(SEARCH_FIELD) || item.includes(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY) || item.includes(PERSISTENT_FILTER);

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

@@ -0,0 +1,243 @@
+@keyframes slideInFromRight {
+  0% {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+%actionsContainer {
+  animation-fill-mode: forwards;
+  display: none;
+}
+
+%animatedActionsContainer {
+  animation: slideInFromRight 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: flex;
+  grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+}
+
+%textWithEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filterGroupingContainer {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 0;
+  height: 100%;
+  position: relative;
+  width: 100%;
+
+  .panelRoot {
+    &Right {
+      order: 1 !important;
+    }
+
+    &Left {
+      order: -1 !important;
+    }
+  }
+
+  .paper {
+    align-items: center;
+    box-shadow: none !important;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: flex-start;
+    order: 2 !important;
+    overflow: hidden !important;
+    padding: var(--padding-lg, 24px) 0;
+    position: relative !important;
+    transition: width 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
+    width: var(--UT-shortcutPanel-width-collapsed, 56px);
+
+    &Open {
+      padding: 0;
+      width: var(--UT-shortcutPanel-width, 256px);
+    }
+
+    .expandedPanelContent {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: 0 var(--UT-shortcutPanel-padding, 16px);
+      position: relative;
+      width: 100%;
+
+      .expandedPanelContentHeader {
+        align-items: center;
+        display: flex;
+        grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+        justify-content: space-between;
+        position: sticky;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+        height: var(--UT-shortcutPanel-header-height);
+
+        .expandedPanelContentTitle {
+          @extend %textWithEllipsis;
+        }
+
+        .expandedPanelContentActions {
+          display: flex;
+          flex-wrap: nowrap;
+          grid-gap: var(--UT-shortcutPanel-header-gap, 8px);
+
+          .expandedPanelContentActionsContainer {
+            @extend %actionsContainer;
+          }
+        }
+        
+        &:hover,
+        &[data-test-hover="true"] {
+          .expandedPanelContentActionsContainer {
+            @extend %animatedActionsContainer;
+          }
+        }
+        
+      }
+
+      .expandedPanelContentCategory {
+        padding: var(--UT-shortcutPanel-category-padding, 8px) 0;
+
+        .expandedPanelContentCategoryHeader {
+          align-items: center;
+          border-radius: var(--radius-sm, 4px);
+          display: flex;
+          grid-gap: var(--UT-shortcutPanel-category-gap, 8px);
+          padding: var(--UT-shortcutPanel-category-padding, 8px);
+          height: var(--UT-shortcutPanel-category-height);
+
+          svg {
+            transition: transform 0.3s ease-in-out;
+          }
+
+          .collapsedCategoryIcon {
+            transform: rotate(-90deg);
+          }
+
+          .expandedPanelContentCategoryHeaderAvatar {
+            border-radius: var(--radius-md, 8px);
+          }
+
+          .expandedPanelContentCategoryHeaderLabel {
+            text-transform: uppercase;
+          }
+        }
+
+        .expandedPanelContentCategoryHeaderNoCollapsible {
+          pointer-events: none;
+        }
+
+        .expandedPanelContentUserFiltersExpanded {
+          max-height: 1000px;
+          opacity: 1;
+          overflow: hidden;
+          transition: max-height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+                      opacity 0.2s ease-in-out;
+        }
+
+        .expandedPanelContentUserFiltersCollapsed {
+          max-height: 0;
+          opacity: 0;
+          overflow: hidden;
+          transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+                      opacity 0.2s ease-in-out;
+        }
+
+        .expandedPanelContentCategoryEmpty {
+          align-items: center;
+          border-radius: var(--radius-md, 8px);
+          display: flex;
+          flex-direction: column;
+          grid-gap: var(--gap-xs);
+          justify-content: center;
+          padding: var(--padding-md);
+
+          .expandedPanelContentCategoryEmptyText {
+            align-items: center;
+            display: flex;
+            flex-direction: column;
+            grid-gap: var(--gap-xs);
+            justify-content: center;
+          }
+        }
+
+        .expandedPanelContentCategoryItem {
+          align-items: center;
+          border-radius: var(--radius-sm);
+          box-sizing: border-box;
+          display: flex;
+          grid-gap: var(--gap-sm);
+          justify-content: space-between;
+          min-height: var(--UT-shortcutPanel-item-height);
+          padding: 0 var(--padding-xs);
+          width: 100%;
+          
+          .expandedPanelContentCategoryItemTitleContainer {
+            align-items: center;
+            display: flex;
+            flex-grow: 1;
+            grid-gap: var(--UT-shortcutPanel-item-gap, 8px);
+            overflow: hidden;
+
+            .hoverableContainer {
+            flex-grow: 1;
+              overflow: hidden; 
+            }
+          }
+
+          .expandedPanelContentCategoryItemTitleLabel {
+            @extend %textWithEllipsis;
+          }
+
+          .expandedPanelContentCategoryItemActionsContainer {
+            @extend %actionsContainer;
+          }
+
+          .expandedPanelContentCategoryItemTitleContainerSelected {
+            cursor: default;
+          }
+          
+          &:hover,
+        &[data-test-hover="true"] {
+            .expandedPanelContentCategoryItemActionsContainer {
+              @extend %animatedActionsContainer;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.popper {
+  max-width: var(--size-overlay-lg, 272px);
+  z-index: 1300;
+
+  &Right {
+    left: calc(-1 * var(--gap-xs)) !important;
+  }
+
+  &Left {
+    left: var(--gap-xs) !important;
+  }
+
+  .expandedPanelContentPopperContent {
+    align-items: flex-start;
+    border-radius: var(--radius-xs);
+    display: flex;
+    flex-direction: column;
+    grid-gap: var(--gap-xs);
+    justify-content: center;
+    padding: var(--padding-md);
+  }
+}

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

@@ -0,0 +1,47 @@
+import get from 'lodash/get';
+import { PANEL_POSITIONS } from './constants';
+export const retrieveStyle = _ref => {
+  let {
+    theme,
+    position
+  } = _ref;
+  return {
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
+    },
+    expandedPanelContentCategoryEmpty: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryEmpty', 'backgroundColor'], "".concat(theme.Palette.light['03']))
+    },
+    expandedPanelContentCategoryHeader: {
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItem: {
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItem', 'backgroundColor', '&:hover'], "".concat(theme.Palette.light['04']))
+      }
+    },
+    expandedPanelContentCategoryItemSelected: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor'], "".concat(theme.Palette.accent['01'])),
+      '&:hover': {
+        backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryItemSelected', 'backgroundColor', '&:hover'], "".concat(theme.Palette.accent['01'], " !important"))
+      }
+    },
+    expandedPanelContentHeader: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentCategory', 'expandedPanelContentCategoryHeader', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    expandedPanelContentPopperContent: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'expandedPanelContent', 'expandedPanelContentPopperContent', 'backgroundColor'], "".concat(theme.Palette.light['01']))
+    },
+    paper: {
+      backgroundColor: get(theme, ['UTShortcutPanel', 'closedPanelBar', 'backgroundColor'], "".concat(theme.Palette.light['01'], " !important")),
+      borderRight: position === PANEL_POSITIONS.LEFT ? get(theme, ['UTShortcutPanel', 'borderRight'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none',
+      borderLeft: position === PANEL_POSITIONS.RIGHT ? get(theme, ['UTShortcutPanel', 'borderLeft'], "1px solid ".concat(theme.Palette.light['04'], " !important")) : 'none'
+    },
+    perfectScrollbar: {
+      width: get(theme, ['UTShortcutPanel', 'perfectScrollbar', 'width'], '100%')
+    }
+  };
+};

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

@@ -0,0 +1,45 @@
+import { arrayOf, bool, func, number, objectOf, shape, string } from 'prop-types';
+export const customSearchActionType = shape({
+  dataTestId: string,
+  Icon: string,
+  onClick: func,
+  size: string
+});
+export const refType = shape({
+  current: shape({
+    popperInstance: shape({
+      update: func
+    })
+  })
+});
+export const filterParamsType = shape({
+  key: string,
+  values: arrayOf(string)
+});
+export const filtersType = arrayOf(shape({
+  backoffice_user_id: string,
+  category: string,
+  description: string,
+  filter_params: arrayOf(filterParamsType),
+  id: number,
+  name: string,
+  order: number,
+  pinned: bool,
+  visible: bool
+}));
+export const categoryType = shape({
+  category: string,
+  filters: filtersType,
+  id: number,
+  name: string
+});
+export const categoriesType = arrayOf(categoryType);
+export const avatarPaletteType = shape({
+  backgroundColor: string,
+  color: string,
+  colorTheme: string
+});
+export const categoryConfigType = objectOf(shape({
+  avatarPalette: avatarPaletteType,
+  icon: string
+}));

package/dist/esm/components/UTShortcutPanel/utils.js

@@ -0,0 +1,20 @@
+/**
+ * Handles animation-end-event by updating Tippy popper instances.
+ *
+ * This function updates the popper instances for both the search button and collapse button
+ * Tippy tooltips after an animation completes. This ensures that the tooltip positions are
+ * recalculated and properly aligned after any layout changes caused by the animation.
+ *
+ * @param {React.MutableRefObject} searchButtonTippyRef - Reference to the search button's Tippy instance
+ * @param {React.MutableRefObject} collapseButtonTippyRef - Reference to the collapse button's Tippy instance
+ * @returns {void}
+ */
+export const handleAnimationEnd = (searchButtonTippyRef, collapseButtonTippyRef) => {
+  var _searchButtonTippyRef, _collapseButtonTippyR;
+  if ((_searchButtonTippyRef = searchButtonTippyRef.current) !== null && _searchButtonTippyRef !== void 0 && _searchButtonTippyRef.popperInstance) {
+    searchButtonTippyRef.current.popperInstance.update();
+  }
+  if ((_collapseButtonTippyR = collapseButtonTippyRef.current) !== null && _collapseButtonTippyR !== void 0 && _collapseButtonTippyR.popperInstance) {
+    collapseButtonTippyRef.current.popperInstance.update();
+  }
+};

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

@@ -0,0 +1,87 @@
+import React, { memo, useState, useRef, useMemo, useEffect } from 'react';
+import { arrayOf, bool, elementType, func, object, objectOf, string } from 'prop-types';
+import { subOptionType } from '../../types';
+import Option from '../Option';
+import styles from './styles.module.scss';
+const ListOption = _ref => {
+  let {
+    classes,
+    handleClose,
+    handleRedirect,
+    IconActive,
+    IconInactive,
+    iconProps,
+    label,
+    labelAlwaysVisible,
+    location,
+    open,
+    openDrawer,
+    options
+  } = _ref;
+  const [openMenu, setOpenMenu] = useState(false);
+  const optionRef = useRef();
+  useEffect(() => {
+    if (!open) setOpenMenu(false);
+  }, [open]);
+  const toogleMenu = () => {
+    if (!open) {
+      openDrawer();
+      setOpenMenu(true);
+    } else setOpenMenu(!openMenu);
+  };
+  const optionHeight = useMemo(() => {
+    if (!openMenu || !open || !(optionRef !== null && optionRef !== void 0 && optionRef.current)) return 0;
+    const {
+      marginTop,
+      marginBottom
+    } = window.getComputedStyle(optionRef.current);
+    const margin = parseFloat(marginTop) + parseFloat(marginBottom);
+    return options.length * (optionRef.current.clientHeight + margin);
+  }, [openMenu, open]);
+  const hasSelectedItem = useMemo(() => options.some(opt => opt.link === location), [location, options]);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Option, {
+    classes: classes,
+    IconActive: IconActive,
+    IconInactive: IconInactive,
+    iconProps: iconProps,
+    isSelectedGroup: hasSelectedItem && (!open || !openMenu),
+    label: label,
+    labelAlwaysVisible: labelAlwaysVisible,
+    location: location,
+    onClick: toogleMenu,
+    open: open,
+    optionRef: optionRef,
+    toggleArrowActive: openMenu,
+    withToggleArrow: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles.optionMenu,
+    style: {
+      height: optionHeight
+    }
+  }, options.map(op => /*#__PURE__*/React.createElement(Option, {
+    classes: classes,
+    handleClose: handleClose,
+    handleRedirect: handleRedirect,
+    key: op.key,
+    label: op.label,
+    labelAlwaysVisible: labelAlwaysVisible,
+    link: op.link,
+    location: location,
+    open: open
+  }))));
+};
+ListOption.propTypes = {
+  classes: objectOf(string),
+  handleClose: func,
+  handleRedirect: func,
+  IconActive: elementType,
+  IconInactive: elementType,
+  iconProps: object,
+  label: string,
+  labelAlwaysVisible: bool,
+  location: string,
+  open: bool,
+  openDrawer: func,
+  options: arrayOf(subOptionType)
+};
+export default /*#__PURE__*/memo(ListOption);

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

@@ -0,0 +1,4 @@
+.optionMenu {
+  overflow: hidden;
+  transition: height 0.3s;
+}

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

@@ -0,0 +1,20 @@
+import React, { memo } from 'react';
+import { elementType, func, oneOfType, string } from 'prop-types';
+const DynamicIcon = _ref => {
+  let {
+    className,
+    Icon
+  } = _ref;
+  return typeof Icon === 'string' ? /*#__PURE__*/React.createElement("img", {
+    src: Icon,
+    alt: "",
+    className: className
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    className: className
+  });
+};
+DynamicIcon.propTypes = {
+  className: string,
+  Icon: oneOfType([elementType, func, string])
+};
+export default /*#__PURE__*/memo(DynamicIcon);

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

@@ -0,0 +1,39 @@
+import React, { memo } from 'react';
+import { bool, elementType, string } from 'prop-types';
+import UTLabel from '../../../UTLabel';
+import DynamicIcon from './components/DynamicIcon';
+import styles from './styles.module.scss';
+const LogosContainer = _ref => {
+  let {
+    badgeClassName,
+    badgeContent,
+    BigLogo,
+    bigLogoClassName,
+    containerClassName,
+    SmallLogo,
+    smallLogoClassName,
+    showBigLogo
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(containerClassName, " ").concat(styles.logoContainer)
+  }, BigLogo && /*#__PURE__*/React.createElement(DynamicIcon, {
+    Icon: BigLogo,
+    className: "".concat(bigLogoClassName, " ").concat(styles.logo, " ").concat(showBigLogo && styles.visibleIcon)
+  }), SmallLogo && /*#__PURE__*/React.createElement(DynamicIcon, {
+    Icon: SmallLogo,
+    className: "".concat(smallLogoClassName, " ").concat(styles.logo, " ").concat(!showBigLogo && styles.visibleIcon)
+  }), badgeContent && /*#__PURE__*/React.createElement(UTLabel, {
+    className: badgeClassName
+  }, badgeContent));
+};
+LogosContainer.propTypes = {
+  badgeClassName: string,
+  badgeContent: string,
+  BigLogo: elementType,
+  bigLogoClassName: string,
+  containerClassName: string,
+  smallLogoClassName: string,
+  SmallLogo: elementType,
+  showBigLogo: bool
+};
+export default /*#__PURE__*/memo(LogosContainer);

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

@@ -0,0 +1,15 @@
+.logoContainer {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: 100%;
+}
+
+.logo {
+  display: none;
+  flex-shrink: 0;
+}
+
+.visibleIcon {
+  display: block;
+}