@widergy/energy-ui 3.158.1 → 3.160.0

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTPanel = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTPanel.propTypes = {
+  version: string
+};
+export default UTPanel;

package/dist/esm/components/UTPanel/versions/V0/index.js

@@ -0,0 +1,108 @@
+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); }
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import SwipeableDrawer from '@material-ui/core/SwipeableDrawer';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import Close from '@material-ui/icons/Close';
+import { bool, func, string, elementType, objectOf, object, oneOfType, element } from 'prop-types';
+import UTButton from '../../../UTButton';
+import UTLabel from '../../../UTLabel';
+import { TEST_IDS } from '../../../../constants/testIds';
+import { refType } from '../../../../types/commonTypes';
+import styles from './styles.module.scss';
+const {
+  panel
+} = TEST_IDS;
+const UTPanel = _ref => {
+  let {
+    children,
+    classes = {},
+    closeButtonDataTestId = panel.closeButton,
+    containerRef,
+    disableScrollbar = false,
+    modalProps,
+    onClose,
+    onEndReachedCallback,
+    onOpen = () => {},
+    open,
+    panelSide,
+    perfectScrollbarOptions,
+    title,
+    TitleComponent,
+    titleDataTestId = panel.title,
+    TitleIcon,
+    ...props
+  } = _ref;
+  const {
+    title: titleClass,
+    titleIcon: titleIconClass,
+    titleContainer: titleContainerClass,
+    perfectScrollbar: perfectScrollbarClass,
+    closeButton: closeButtonClass,
+    iconClose: iconCloseClass,
+    ...drawerClasses
+  } = classes;
+  return /*#__PURE__*/React.createElement(SwipeableDrawer, _extends({
+    anchor: panelSide,
+    open: open,
+    onOpen: onOpen,
+    onClose: onClose,
+    disableSwipeToOpen: true,
+    swipeAreaWidth: 0,
+    ModalProps: {
+      container: containerRef,
+      keepMounted: !!containerRef,
+      ...modalProps
+    },
+    classes: {
+      ...drawerClasses,
+      paper: "".concat(styles.paper, " ").concat(drawerClasses.paper),
+      root: "".concat(containerRef && styles.root, " ").concat(drawerClasses.root)
+    }
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.titleContainer, " ").concat(titleContainerClass)
+  }, TitleComponent || /*#__PURE__*/React.createElement("div", {
+    className: styles.iconTitleContainer
+  }, TitleIcon && /*#__PURE__*/React.createElement(TitleIcon, {
+    className: "".concat(styles.titleIcon, " ").concat(titleIconClass)
+  }), /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.title,
+    dataTestId: titleDataTestId,
+    weight: "semibold"
+  }, title)), /*#__PURE__*/React.createElement(UTButton, {
+    classNames: {
+      icon: iconCloseClass,
+      root: closeButtonClass
+    },
+    dataTestId: closeButtonDataTestId,
+    Icon: Close,
+    onClick: onClose,
+    variant: "text"
+  })), disableScrollbar ? children : /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    onYReachEnd: onEndReachedCallback,
+    className: perfectScrollbarClass,
+    options: {
+      suppressScrollX: true,
+      ...perfectScrollbarOptions
+    }
+  }, children));
+};
+UTPanel.propTypes = {
+  classes: objectOf(string),
+  closeButtonDataTestId: string,
+  containerRef: refType,
+  disableScrollbar: bool,
+  modalProps: object,
+  onClose: func,
+  onEndReachedCallback: func,
+  onOpen: func,
+  open: bool,
+  panelSide: string,
+  perfectScrollbarOptions: object,
+  title: string,
+  TitleComponent: oneOfType([element, elementType]),
+  titleDataTestId: string,
+  TitleIcon: elementType
+};
+export default UTPanel;

package/dist/esm/components/UTPanel/versions/V0/styles.module.scss

@@ -0,0 +1,29 @@
+.paper {
+  height: calc(100% - 20px);
+  padding: 20px 30px;
+  position: absolute;
+  width: 200px;
+}
+
+.titleContainer {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+}
+
+.containerChildren {
+  width: 100%;
+}
+
+.root {
+  position: absolute !important;
+}
+
+.iconTitleContainer {
+  align-items: center;
+  display: flex;
+}
+
+.titleIcon {
+  margin-right: 7px;
+}

package/dist/esm/components/UTPanel/versions/V1/DOCUMENTATION.md

@@ -0,0 +1,307 @@
+# UTPanel V1 - Documentación
+
+## Estructura del Componente
+
+El componente `UTPanel V1` está organizado en **5 secciones principales**:
+
+### Sección 1: Control Area
+Barra de control ubicada en la parte superior del panel.
+
+**Componentes incluidos:**
+- Back Button (opcional)
+- Pagination (opcional)
+- Close Button (siempre a la derecha)
+- Progress Bar (solo si `isWorkflow={true}`)
+
+### Sección 2: Contenido Principal (Flex Row)
+
+#### Subsección 2.1: Main Content Section
+Contenido principal del panel que se expande dinámicamente.
+
+**Composición:**
+- Header (si `hideHeader !== true`)
+- Header Items (si existen)
+- Body (área scrollable principal)
+- Main Button (si `hideMainButton !== true`)
+
+#### Subsección 2.2 & 2.3: Additional Content Module
+Módulo opcional que incluye un panel lateral con navegación.
+
+**Composición:**
+- Body Component: Panel de contenido (450px, ancho fijo)
+- Sidebar: Barra de navegación (56px, ancho fijo)
+
+---
+
+## AdditionalContent - Nuevo Agregado
+
+### ¿Qué es?
+
+El módulo `AdditionalContent` permite agregar un panel lateral secundario al `UTPanel` con navegación mediante iconos. Es ideal para:
+- Paneles de configuración
+- Menús secundarios
+- Navegación por pestañas
+- Contenido complementario
+
+### Interface esperada
+
+```typescript
+interface AdditionalContentElement {
+  id: string;                          // Identificador único
+  Icon: string;                        // Nombre del icono (ej: "IconSettings")
+  BodyComponent: React.FC<any>;        // Componente a renderizar
+  tooltipProps: {
+    content: string;                   // Contenido del tooltip
+    arrow?: boolean;                   // Mostrar flecha del tooltip (default: true)
+    tippyProps?: {
+      placement?: string;              // "top" | "bottom" | "left" | "right" | etc
+      hideOnClick?: boolean;
+      interactive?: boolean;
+      duration?: [number, number];     // [show delay, hide delay]
+      [key: string]: any;
+    };
+    stringContentProps?: object;       // Props adicionales para el contenido
+    stringContentClassName?: string;   // CSS customizado para el contenido
+  }
+}
+
+type AdditionalContent = AdditionalContentElement[] | undefined
+```
+
+### Ejemplo de uso
+
+```jsx
+import { UTPanel } from '@widergy/energy-ui';
+
+// Definir componentes de contenido
+const SettingsBody = () => (
+  <div style={{ padding: '16px' }}>
+    <h3>Configuración</h3>
+    <p>Contenido de configuración aquí</p>
+  </div>
+);
+
+const NotificationsBody = () => (
+  <div style={{ padding: '16px' }}>
+    <h3>Notificaciones</h3>
+    <p>Contenido de notificaciones aquí</p>
+  </div>
+);
+
+// Crear array de AdditionalContent - Simple
+const additionalContent = [
+  {
+    id: 'settings',
+    Icon: 'IconSettings',
+    BodyComponent: SettingsBody,
+    tooltipProps: {
+      content: 'Configuración'
+      // Los props de Tippy se aplican automáticamente:
+      // - placement: 'right' (por defecto)
+      // - zIndex: 9999
+      // - appendTo: document.body (para evitar overflow: hidden)
+    }
+  },
+  {
+    id: 'notifications',
+    Icon: 'IconBell',
+    BodyComponent: NotificationsBody,
+    tooltipProps: {
+      content: 'Notificaciones'
+      // Sin necesidad de repetir tippyProps
+    }
+  }
+];
+
+// Con configuración personalizada de Tippy (opcional)
+const additionalContentAdvanced = [
+  {
+    id: 'settings',
+    Icon: 'IconSettings',
+    BodyComponent: SettingsBody,
+    tooltipProps: {
+      content: 'Configuración',
+      tippyProps: {
+        placement: 'left',  // Cambiar posición si deseas
+        zIndex: 5000        // Cambiar z-index si deseas
+        // appendTo se aplica automáticamente
+      }
+    }
+  }
+];
+
+// Usar en el componente
+<UTPanel
+  additionalContent={additionalContent}
+  title="Mi Panel"
+  open={true}
+  // ... otros props
+>
+  Contenido principal aquí
+</UTPanel>
+```
+
+**Nota**: El componente `AdditionalContentModule` aplica automáticamente los props necesarios para que los tooltips se vean correctamente:
+- **placement**: 'right' (predeterminado)
+- **zIndex**: 9999 (por encima de todo)
+- **appendTo**: `document.body` (para evitar ser cortados por `overflow: hidden`)
+
+Si necesitas personalizar alguno de estos valores, puedes hacerlo en `tippyProps`.
+
+### Comportamiento
+
+- **Primera opción preseleccionada**: La primera opción del array se selecciona automáticamente
+- **BodyComponent oculto**: Si no hay ninguna opción seleccionada, el panel de contenido se oculta (solo se muestra la sidebar)
+- **Sidebar siempre visible**: La barra lateral con iconos está siempre visible si `additionalContent` está definido
+- **Ancho dinámico**: El panel total expande automáticamente:
+  - Sin AdditionalContent: 300px | 450px | 600px (según `size`)
+  - Con AdditionalContent: +506px adicionales (450px body + 56px sidebar)
+
+### Propiedades del Panel con AdditionalContent
+
+| Propiedad | Tipo | Valor |
+|-----------|------|-------|
+| `additionalContent` | `AdditionalContentElement[]` | Array de opciones |
+| `size` | `"S" \| "M" \| "L"` | Tamaño del mainContentSection |
+| Ancho total | - | mainContentSection + 506px |
+
+**Ejemplos de tamaños finales:**
+- Size S: 300px + 506px = 806px
+- Size M: 450px + 506px = 956px
+- Size L: 600px + 506px = 1106px
+
+### Reglas de CSS
+
+El componente utiliza Flexbox con las siguientes características:
+
+```css
+.contentRowContainer {
+  display: flex;
+  flex-direction: row;        /* Alineación horizontal */
+  flex: 1;                    /* Toma espacio disponible */
+}
+
+.mainContentSection {
+  flex: 1;                    /* Se expande dinámicamente */
+  min-width: 0;               /* Permite shrink a 0 si es necesario */
+}
+
+.bodyComponent {
+  width: 450px;
+  flex-shrink: 0;             /* No se reduce */
+}
+
+.sidebar {
+  width: 56px;
+  flex-shrink: 0;             /* No se reduce */
+}
+```
+
+---
+
+## Props existentes (compatibles)
+
+Todos los props anteriores funcionan sin cambios:
+
+```typescript
+<UTPanel
+  // Control Area
+  showBackButton={boolean}
+  showPagination={boolean}
+  hideCloseButton={boolean}
+  isWorkflow={boolean}
+  
+  // Header
+  hideHeader={boolean}
+  title={string}
+  subtitle={string}
+  headerItems={array}
+  
+  // Body
+  children={ReactNode}
+  disableScrollbar={boolean}
+  
+  // Main Button
+  hideMainButton={boolean}
+  mainButton={object}
+  
+  // Layout
+  size={"S" | "M" | "L"}
+  
+  // Callbacks
+  onClose={function}
+  onGoBack={function}
+  
+  // Nuevo prop
+  additionalContent={array}
+/>
+```
+
+---
+
+## Estructura de archivos
+
+```
+src/lib/components/UTPanel/versions/V1/
+├── index.js                           # Componente principal
+├── styles.module.scss                 # Estilos principales
+├── constants.js                       # Constantes compartidas
+├── theme.js                           # Tema/estilos avanzados
+├── DOCUMENTATION.md                   # Este archivo
+├── components/
+│   ├── AdditionalContentModule/
+│   │   ├── index.js                   # Módulo de contenido adicional
+│   │   └── styles.module.scss         # Estilos del módulo
+│   ├── BodySection/
+│   │   └── index.js                   # Sección del cuerpo principal
+│   ├── ControlAreaSection/
+│   │   └── index.js                   # Sección de control (botones, paginación)
+│   ├── HeaderSection/
+│   │   └── index.js                   # Sección del header
+│   └── DataItem/
+│       └── index.js                   # Componente de item
+```
+
+---
+
+## Data Test IDs
+
+El componente incluye `dataTestId` para facilitar las pruebas automatizadas. Todos los IDs están definidos en `src/lib/constants/testIds.js`.
+
+### IDs disponibles
+
+| Elemento | dataTestId | Descripción |
+|----------|------------|-------------|
+| Back Button | `panel.backButton` | Botón de retroceso |
+| Close Button | `panel.closeButton` | Botón de cerrar |
+| Title | `panel.title` | Título del panel |
+| Main Action | `panel.mainAction` | Botón de acción principal del header |
+| Secondary Action | `panel.secondaryAction` | Botón de acción secundaria del header |
+| Main Button | `panel.mainButton` | Botón principal del footer |
+| Pagination Prev | `panel.paginationPrev` | Botón de página anterior |
+| Pagination Next | `panel.paginationNext` | Botón de página siguiente |
+| Additional Content Body | `panel.additionalContent.additionalContentBody` | Contenedor del cuerpo adicional |
+| Additional Content Sidebar | `panel.additionalContent.sidebar` | Barra lateral del contenido adicional |
+| Sidebar Button | `panel.additionalContent.sidebarButton.{id}` | Botón de la sidebar (dinámico por `id`) |
+| Sidebar Button Tooltip | `panel.additionalContent.sidebarButton.{id}.tooltip` | Tooltip del botón (dinámico por `id`) |
+
+### Ejemplo de uso en tests
+
+```javascript
+// Usando Testing Library
+const backButton = screen.getByTestId('panel.backButton');
+const mainButton = screen.getByTestId('panel.mainButton');
+const settingsButton = screen.getByTestId('panel.additionalContent.sidebarButton.settings');
+
+// Verificar que el sidebar existe
+expect(screen.getByTestId('panel.additionalContent.sidebar')).toBeInTheDocument();
+```
+
+---
+
+## Notas de desarrollo
+
+- El componente mantiene **compatibilidad total** con versiones anteriores
+- No hay breaking changes
+- El módulo `AdditionalContent` es **completamente opcional**
+- El panel sin `additionalContent` funciona exactamente como antes

package/dist/esm/components/UTPanel/versions/V1/README.md

@@ -0,0 +1,46 @@
+# UTPanel
+
+Component used for displaying a side panel.
+
+## Props
+
+| Name                        | Type    | Default  | Description                                                                                                                                                                                                    |
+| :-------------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| children                    | node    |          | Component content                                                                                                                                                                                              |
+| classes                     | object  |          | Classes returned by UTPanel own[theme](./theme.js#L40) `retrieveStyle` and classes received from props.                                                                                                        |
+| classNames                  | object  |          | Overrides the default panel theme. headerMainActionButton                                                                                                                                                      |
+| collapsableHeader           | bool    | false    | Indicates if "header items" section is collapsible.                                                                                                                                                            |
+| currentStep                 | number  | 1        | Workflow step number used to show the current progress in the UTProgressBar                                                                                                                                    |
+| disableScrollbar            | bool    | false    | Render the children without scrollbar                                                                                                                                                                          |
+| HeaderComponent             | node    |          | Custom header to render.                                                                                                                                                                                       |
+| headerItems                 | array   |          | Array of items (object) to show in "header items" section. Each item should have: "title" - String, "icon" - String, "value" - String                                                                          |
+| headerMainActionButton      | object  |          | Object with header main button details: "colorTheme" - string - deafult: 'primary' // "variant" - string - default: 'semitransparent'<br />// This prop will be spread so that it supports any UTButton props. |
+| headerSecondaryActionButton | object  |          | Object with header secondary button details: "colorTheme" - string - default: "success" // "variant" - string - default: "filled" // This prop will be spread so that it supports any UTButton props.          |
+| hideCloseButton             | bool    | false    | Indicates whether the close button is hide or not                                                                                                                                                              |
+| hideHeader                  | bool    | false    | Indicates whether the entire header is hide or not                                                                                                                                                             |
+| hideMainButton              | bool    | false    | Indicates whether the main (bottom) button is hide or not                                                                                                                                                      |
+| isWorkflow                  | bool    | false    | Indicates if the panel children's content a workflow. This prop activates the progress bar.                                                                                                                    |
+| mainButton                  | object  |          | [UTButton props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTButton)                                                                                                                 |
+| modalProps                  | object  |          | Material UI[modal props](https://v4.mui.com/api/modal/)                                                                                                                                                        |
+| onClose                     | func    |          | Callback to execute when closing panel.                                                                                                                                                                        |
+| onEndReachedCallback        | func    |          | Callback to execute when reaching the end of the vertical scroll                                                                                                                                               |
+| onGoBack                    | func    | () => {} | Callback to execute when goBackButton is used                                                                                                                                                                  |
+| onOpen                      | func    | () => {} | Callback to execute when opening panel.                                                                                                                                                                        |
+| open                        | bool    |          | Indicates whether the panel is open or not                                                                                                                                                                     |
+| panelSide                   | string  |          | Indicates panel side.                                                                                                                                                                                          |
+| perfectScrollbarOptions     | object  |          | [Perfect scrollbar](https://www.npmjs.com/package/react-perfect-scrollbar) props                                                                                                                               |
+| singleHeaderItemsColumn     | bool    | false    | Indicates whether the header items are shown in a single column or not                                                                                                                                         |
+| size                        | string  | 'M'      | Indicates the size of panel. Currently we have two options:<br /> L -> 800px<br /> M -> 450px                                                                                                                  |
+| stepsCount                  | Number  |          | Indicates the total steps in case of workflow                                                                                                                                                                  |
+| subtitle                    | string  |          | Subtitle to show                                                                                                                                                                                               |
+| title                       | string  |          | Title to show                                                                                                                                                                                                  |
+| titleProps                  | object  | {}       | UTLabel props for title. Default props: variant="title2" weight="medium"                                                                                                                                       |
+| collapsablePanel            | bool    | false    | Indicates if panel can be collapsed when inline mode is enabled                                                                                                                                                |
+| inline                      | bool    | false    | Indicates if panel should be rendered inline instead of as a modal                                                                                                                                             |
+| paginationProps             | object  | {}       | Object containing pagination configuration: nextButton (UTButton props), backButton (UTButton props), currentPage (number), totalPages (number)                                                                |
+| showMainStatus              | bool    | false    | Shows a status indicator next to the title                                                                                                                                                                     |
+| showPagination              | bool    | false    | Shows pagination controls in the header                                                                                                                                                                        |
+| statusProps                 | object  | {}       | Props passed to UTStatus component when showMainStatus is true                                                                                                                                                 |
+| showBackButton              | boolean | false    | Shows a go back arrow button                                                                                                                                                                                   |
+| showTag                     | bool    | false    | Shows a tag indicator in the header area. When true, the tagProps object is passed to the UTStatus component to render a tag.                                                                                  |
+| tagProps                    | object  | {}       | Object containing props for the UTStatus component used as a tag in the header. Supports all [UTStatus props](https://github.com/widergy/Energy-UI/tree/master/src/lib/components/UTStatus)                    |

package/dist/esm/components/UTPanel/versions/V1/components/AdditionalContentModule/index.js

@@ -0,0 +1,95 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useMemo } from 'react';
+import { arrayOf, elementType, func, number, object, shape, string } from 'prop-types';
+import 'react-perfect-scrollbar/dist/css/styles.css';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import UTButton from '../../../../../UTButton';
+import UTStatus from '../../../../../UTStatus';
+import UTTooltip from '../../../../../UTTooltip';
+import { TEST_IDS } from '../../../../../../constants/testIds';
+import styles from './styles.module.scss';
+const {
+  panel
+} = TEST_IDS;
+const AdditionalContentModule = _ref => {
+  let {
+    activeId,
+    additionalContent,
+    onSelectItem,
+    tooltipContainer
+  } = _ref;
+  const activeContent = useMemo(() => additionalContent.find(item => item.id === activeId), [additionalContent, activeId]);
+  if (!additionalContent || additionalContent.length === 0) {
+    return null;
+  }
+  const ActiveBodyComponent = activeContent === null || activeContent === void 0 ? void 0 : activeContent.BodyComponent;
+  const defaultTooltipContainer = tooltipContainer || (() => document.body);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.additionalContentWrapper
+  }, activeContent && /*#__PURE__*/React.createElement("div", {
+    className: styles.bodyComponent,
+    "data-testid": panel.additionalContent.body
+  }, ActiveBodyComponent && /*#__PURE__*/React.createElement(ActiveBodyComponent, null)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles.sidebar, " ").concat(!activeContent ? styles.sidebarCollapsed : ''),
+    "data-testid": panel.additionalContent.sidebar
+  }, /*#__PURE__*/React.createElement(PerfectScrollbar, {
+    options: {
+      suppressScrollX: true
+    },
+    className: styles.sidebarScroll
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sidebarContent
+  }, additionalContent.map(item => {
+    var _item$tooltipProps, _item$tooltipProps2, _item$tooltipProps$ti, _item$tooltipProps3, _item$tooltipProps4, _item$tooltipProps5;
+    return /*#__PURE__*/React.createElement("div", {
+      key: item.id,
+      className: styles.sidebarItemWrapper
+    }, /*#__PURE__*/React.createElement(UTTooltip, _extends({
+      content: ((_item$tooltipProps = item.tooltipProps) === null || _item$tooltipProps === void 0 ? void 0 : _item$tooltipProps.content) || item.id,
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id, ".tooltip"),
+      tippyProps: {
+        placement: ((_item$tooltipProps2 = item.tooltipProps) === null || _item$tooltipProps2 === void 0 || (_item$tooltipProps2 = _item$tooltipProps2.tippyProps) === null || _item$tooltipProps2 === void 0 ? void 0 : _item$tooltipProps2.placement) || 'right',
+        zIndex: (_item$tooltipProps$ti = (_item$tooltipProps3 = item.tooltipProps) === null || _item$tooltipProps3 === void 0 || (_item$tooltipProps3 = _item$tooltipProps3.tippyProps) === null || _item$tooltipProps3 === void 0 ? void 0 : _item$tooltipProps3.zIndex) !== null && _item$tooltipProps$ti !== void 0 ? _item$tooltipProps$ti : 9999,
+        appendTo: ((_item$tooltipProps4 = item.tooltipProps) === null || _item$tooltipProps4 === void 0 || (_item$tooltipProps4 = _item$tooltipProps4.tippyProps) === null || _item$tooltipProps4 === void 0 ? void 0 : _item$tooltipProps4.appendTo) || defaultTooltipContainer,
+        ...(((_item$tooltipProps5 = item.tooltipProps) === null || _item$tooltipProps5 === void 0 ? void 0 : _item$tooltipProps5.tippyProps) || {})
+      }
+    }, (_ref2 => {
+      let {
+        _,
+        ...rest
+      } = _ref2;
+      return rest;
+    })(item.tooltipProps)), /*#__PURE__*/React.createElement("div", {
+      className: styles.buttonWrapper
+    }, /*#__PURE__*/React.createElement(UTButton, {
+      colorTheme: activeId === item.id ? 'primary' : 'gray',
+      className: styles.sidebarButton,
+      dataTestId: "".concat(panel.additionalContent.sidebarButton).concat(item.id),
+      Icon: item.Icon,
+      onClick: () => onSelectItem(activeId === item.id ? null : item.id),
+      size: "medium",
+      variant: activeId === item.id ? 'semitransparent' : 'text'
+    }), item.count > 0 && /*#__PURE__*/React.createElement(UTStatus, {
+      area: true,
+      areaType: "ROUNDED",
+      className: styles.countBadge,
+      size: "xsmall",
+      type: "negative",
+      variant: "accent",
+      withoutIcon: true
+    }, item.count))));
+  })))));
+};
+AdditionalContentModule.propTypes = {
+  additionalContent: arrayOf(shape({
+    id: string.isRequired,
+    Icon: string.isRequired,
+    count: number,
+    BodyComponent: elementType.isRequired,
+    tooltipProps: object.isRequired
+  })).isRequired,
+  activeId: string,
+  onSelectItem: func.isRequired,
+  tooltipContainer: func
+};
+export default AdditionalContentModule;