@widergy/energy-ui 3.121.3 → 3.122.1

package/dist/components/UTButton/stories/storiesConstants.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.COMMON_PARAMETERS = exports.COMMON_ARG_TYPES = exports.COMMON_ARGS = void 0;
+var _utils = require("stories/utils");
+var _constants = require("../constants");
+// Common argTypes used across multiple stories files
+const COMMON_ARG_TYPES = exports.COMMON_ARG_TYPES = {
+  children: {
+    control: 'text',
+    description: 'Contenido del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'node'
+      }
+    }
+  },
+  classes: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  classNames: {
+    control: false,
+    description: 'Clases personalizadas para sobrescribir el tema del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'object'
+      }
+    }
+  },
+  colorTheme: {
+    control: 'select',
+    description: 'Tema de color del botón.',
+    options: Object.keys(_constants.COLORS_MAPPER),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.colorTheme
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.keys(_constants.COLORS_MAPPER))
+      }
+    }
+  },
+  count: {
+    control: 'number',
+    description: 'Número a mostrar en un badge dentro del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'number'
+      }
+    }
+  },
+  dataTestId: {
+    control: 'text',
+    description: 'Identificador de test para el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Si es `true`, el botón está deshabilitado.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.disabled
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  hideTextOnResponsive: {
+    control: 'boolean',
+    description: 'Si es `true` y el icono no es `null`, el contenido del botón no se muestra en dispositivos móviles.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.hideTextOnResponsive
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  Icon: {
+    control: 'text',
+    description: 'Icono a mostrar en el botón. Puede ser un nombre de icono de Tabler o un componente personalizado.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(['string', 'ReactComponent'])
+      }
+    }
+  },
+  iconPlacement: {
+    control: 'inline-radio',
+    description: 'Posición del icono en relación al contenido del botón.',
+    options: Object.values(_constants.ICON_PLACEMENTS),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.iconPlacement
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.ICON_PLACEMENTS))
+      }
+    }
+  },
+  loading: {
+    control: 'boolean',
+    description: 'Si es `true`, se muestra un spinner sobre el botón.',
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.loading
+      },
+      type: {
+        summary: 'boolean'
+      }
+    }
+  },
+  onClick: {
+    control: false,
+    description: 'Callback ejecutado cuando se hace clic en el botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'function'
+      }
+    }
+  },
+  size: {
+    control: 'inline-radio',
+    description: 'Tamaño del botón.',
+    options: Object.values(_constants.SIZES),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.size
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.SIZES))
+      }
+    }
+  },
+  type: {
+    control: 'text',
+    description: 'Atributo HTML type del botón.',
+    table: {
+      defaultValue: {
+        summary: 'undefined'
+      },
+      type: {
+        summary: 'string'
+      }
+    }
+  },
+  variant: {
+    control: 'select',
+    description: 'Variante del botón.',
+    options: Object.values(_constants.VARIANTS_NAMES),
+    table: {
+      defaultValue: {
+        summary: _constants.DEFAULT_PROPS.variant
+      },
+      type: {
+        summary: (0, _utils.joinArgTypes)(Object.values(_constants.VARIANTS_NAMES))
+      }
+    }
+  }
+};
+
+// Common args used across multiple stories files
+const COMMON_ARGS = exports.COMMON_ARGS = {
+  colorTheme: _constants.DEFAULT_PROPS.colorTheme,
+  dataTestId: 'customButtonId',
+  disabled: _constants.DEFAULT_PROPS.disabled,
+  hideTextOnResponsive: _constants.DEFAULT_PROPS.hideTextOnResponsive,
+  iconPlacement: _constants.DEFAULT_PROPS.iconPlacement,
+  loading: _constants.DEFAULT_PROPS.loading,
+  size: _constants.DEFAULT_PROPS.size,
+  type: 'button',
+  variant: _constants.DEFAULT_PROPS.variant
+};
+
+// Common parameters used across multiple stories files
+const COMMON_PARAMETERS = exports.COMMON_PARAMETERS = {
+  controls: {
+    exclude: ['classes', 'classNames', 'onClick']
+  },
+  docs: {
+    description: {
+      component: 'Componente de botón básico que soporta múltiples variantes, temas de color, tamaños e iconos. Puede mostrar un spinner de carga, un badge con contador, y es completamente personalizable.'
+    }
+  }
+};

package/dist/components/UTButton/theme.js

@@ -15,20 +15,21 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
   const shadowTheme = ((_theme$Palette$shadow = theme.Palette.shadows) === null || _theme$Palette$shadow === void 0 ? void 0 : _theme$Palette$shadow[_constants.SHADOW_MAPPER[actionColorName]]) || 'transparent';
   const negativeTheme = actionPaletteColors[_constants.COLORS_MAPPER.negative];
   const neutralTheme = actionPaletteColors[_constants.COLORS_MAPPER.secondary];
+  const lightTheme = actionPaletteColors[_constants.COLORS_MAPPER.light];
   const definition = {
     [_constants.VARIANTS_NAMES.filled]: {
       backgroundColor: actionTheme['04'],
       border: '1px solid transparent',
       fill: colorTheme === _constants.COLORS_MAPPER.negative ? neutralTheme['05'] : negativeTheme['05'],
       '&:hover': {
-        backgroundColor: actionTheme['03'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['05'] : actionTheme['03'],
         boxShadow: (0, _shadowUtils.getShadow)({
           color: shadowTheme,
           level: 2
         })
       },
       '&:active': {
-        backgroundColor: actionTheme['05'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
         boxShadow: (0, _shadowUtils.getShadow)({
           color: shadowTheme,
           level: 2
@@ -36,27 +37,27 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       }
     },
     [_constants.VARIANTS_NAMES.semitransparent]: {
-      backgroundColor: actionTheme['01'],
+      backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
       border: '1px solid transparent',
-      fill: actionTheme['05'],
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
-        backgroundColor: actionTheme['02'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
         boxShadow: 'none'
       },
       '&:active': {
-        backgroundColor: actionTheme['03'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['05'] : actionTheme['03'],
         boxShadow: 'none'
       }
     },
     [_constants.VARIANTS_NAMES.outlined]: {
-      border: "1px solid ".concat(actionTheme['05']),
-      fill: actionTheme['05'],
+      border: "1px solid ".concat(colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05']),
+      fill: colorTheme === _constants.COLORS_MAPPER.gray ? actionTheme['04'] : actionTheme['05'],
       '&:hover': {
-        backgroundColor: actionTheme['01'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
         boxShadow: 'none'
       },
       '&:active': {
-        backgroundColor: actionTheme['02'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
         boxShadow: 'none'
       }
     },
@@ -64,11 +65,11 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       border: '1px solid transparent',
       fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: actionTheme['01'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
         boxShadow: 'none'
       },
       '&:active': {
-        backgroundColor: actionTheme['02'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
         boxShadow: 'none'
       }
     },
@@ -81,14 +82,14 @@ const variantsColorTheme = (theme, colorTheme, variant) => {
       border: '1px solid transparent',
       fill: actionTheme['05'],
       '&:hover': {
-        backgroundColor: actionTheme['01'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['03'] : actionTheme['01'],
         boxShadow: (0, _shadowUtils.getShadow)({
           color: shadowTheme,
           level: 2
         })
       },
       '&:active': {
-        backgroundColor: actionTheme['02'],
+        backgroundColor: colorTheme === _constants.COLORS_MAPPER.gray ? lightTheme['04'] : actionTheme['02'],
         boxShadow: (0, _shadowUtils.getShadow)({
           color: shadowTheme,
           level: 2

package/dist/components/UTButton/utils.js

@@ -10,7 +10,7 @@ var _UTIcon = _interopRequireDefault(require("../UTIcon"));
 var _constants = require("./constants");
 var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === _constants.VARIANTS_NAMES.filled ? buttonColorTheme === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.light : _constants.COLORS_MAPPER[buttonColorTheme];
+const getButtonElementColorTheme = (buttonColorTheme, buttonVariant) => buttonVariant === _constants.VARIANTS_NAMES.filled ? buttonColorTheme === _constants.COLORS_MAPPER.negative ? _Palette.COLOR_THEMES.neutral : _Palette.COLOR_THEMES.negative : _constants.COLORS_MAPPER[buttonColorTheme];
 const getIconProps = _ref => {
   let {
     className,
@@ -37,5 +37,5 @@ const getLabelProps = (buttonColorTheme, buttonVariant, buttonSize) => ({
   weight: 'medium'
 });
 exports.getLabelProps = getLabelProps;
-const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : _constants.COLORS_MAPPER[colorTheme];
+const getCounterColorTheme = (colorTheme, variant) => variant === _constants.VARIANTS_NAMES.filled ? colorTheme === _Palette.COLOR_THEMES.negative ? 'dark' : 'negative' : variant === _constants.VARIANTS_NAMES.outlined ? colorTheme === _Palette.COLOR_THEMES.negative ? 'negative' : colorTheme === _Palette.COLOR_THEMES.primary ? _constants.COLORS_MAPPER[colorTheme] : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : 'dark' : colorTheme === _Palette.COLOR_THEMES.gray ? 'gray' : _constants.COLORS_MAPPER[colorTheme];
 exports.getCounterColorTheme = getCounterColorTheme;

package/dist/components/UTDataElement/UTDataElement.stories.js

@@ -306,7 +306,8 @@ var _default = exports.default = {
         component: 'Componente para mostrar elementos de datos de forma estructurada. Permite mostrar título, prefijo, datos, iconos, badges y contenido expandible. Ideal para mostrar información clave de manera organizada.'
       }
     }
-  }
+  },
+  title: 'Energy-UI/UTDataElement'
 }; // Basic Stories
 const Default = exports.Default = {
   args: {

package/dist/components/UTDataElement/theme.js

@@ -9,7 +9,8 @@ const backgroundColor = (theme, area) => {
   var _theme$Palette;
   const colorTheme = _Palette.COLOR_THEMES.light;
   const actionPaletteColors = ((_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.actions) || theme.Palette;
-  const areaColor = actionPaletteColors[colorTheme];
+  const paletteColors = theme.Palette;
+  const areaColor = actionPaletteColors[colorTheme] || paletteColors[colorTheme];
   return {
     backgroundColor: area ? areaColor['03'] : 'transparent'
   };

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/CollapsedPanelContent/constants.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ICON_BY_POSITION = void 0;
+var _constants = require("../../../../constants");
+const ICON_BY_POSITION = exports.ICON_BY_POSITION = {
+  [_constants.PANEL_POSITIONS.LEFT]: 'IconChevronsRight',
+  [_constants.PANEL_POSITIONS.RIGHT]: 'IconChevronsLeft'
+};

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/CollapsedPanelContent/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../context"));
+var _layout = _interopRequireDefault(require("./layout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const CollapsedPanelContentContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    handleTogglePanel,
+    iconProps,
+    position
+  } = (0, _react.useContext)(_context.default);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    classes: classes,
+    dataTestId: dataTestId,
+    iconProps: iconProps,
+    onClick: handleTogglePanel,
+    position: position
+  });
+};
+CollapsedPanelContentContainer.propTypes = {
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = CollapsedPanelContentContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/CollapsedPanelContent/layout.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../../../UTIcon"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../../../UTTouchableWithoutFeedback"));
+var _iconTypes = require("../../../../../../types/iconTypes");
+var _testIds = require("../../../../../../constants/testIds");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const {
+  EXPAND_BUTTON,
+  COLLAPSED_PANEL_CONTENT
+} = _testIds.ID_CONSTANTS;
+const {
+  filterGrouping
+} = _testIds.TEST_IDS;
+const CollapsedPanelContent = _ref => {
+  let {
+    classes,
+    dataTestId,
+    iconProps,
+    onClick,
+    position
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    className: classes.collapsedPanelContentExpandButton,
+    dataTestId: dataTestId ? "".concat(dataTestId, ".").concat(COLLAPSED_PANEL_CONTENT, ".").concat(EXPAND_BUTTON) : filterGrouping.groupingPanel.collapsedPanelContent.expandButton,
+    onClick: onClick
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, _extends({
+    name: _constants.ICON_BY_POSITION[position]
+  }, iconProps)));
+};
+CollapsedPanelContent.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  iconProps: _iconTypes.iconPropTypes,
+  onClick: _propTypes.func,
+  position: _propTypes.string
+};
+var _default = exports.default = CollapsedPanelContent;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryEmpty/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../../../../../context"));
+var _testIds = require("../../../../../../../../../../constants/testIds");
+var _layout = _interopRequireDefault(require("./layout"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const {
+  EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentCategoryEmptyContainer = _ref => {
+  let {
+    dataTestId
+  } = _ref;
+  const {
+    classes,
+    noFiltersText,
+    noFiltersTitle
+  } = (0, _react.useContext)(_context.default);
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    classes: classes,
+    dataTestId: "".concat(dataTestId, ".").concat(EXPANDED_PANEL_CONTENT_CATEGORY_EMPTY),
+    noFiltersText: noFiltersText,
+    noFiltersTitle: noFiltersTitle
+  });
+};
+ExpandedPanelContentCategoryEmptyContainer.propTypes = {
+  dataTestId: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentCategoryEmptyContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryEmpty/layout.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTIcon = _interopRequireDefault(require("../../../../../../../../../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../../../../../../../../../UTLabel"));
+var _testIds = require("../../../../../../../../../../constants/testIds");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  DESCRIPTION,
+  ICON,
+  TITLE
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentCategoryEmpty = _ref => {
+  let {
+    classes,
+    dataTestId,
+    noFiltersText,
+    noFiltersTitle
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("section", {
+    className: classes.expandedPanelContentCategoryEmpty
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(ICON),
+    name: "IconBookmarks"
+  }), (noFiltersTitle || noFiltersText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: classes.expandedPanelContentCategoryEmptyText
+  }, /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    align: "center",
+    dataTestId: "".concat(dataTestId, ".").concat(TITLE),
+    variant: "small"
+  }, noFiltersTitle), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    align: "center",
+    colorTheme: "gray",
+    dataTestId: "".concat(dataTestId, ".").concat(DESCRIPTION),
+    variant: "small"
+  }, noFiltersText)));
+};
+ExpandedPanelContentCategoryEmpty.propTypes = {
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  dataTestId: _propTypes.string,
+  noFiltersText: _propTypes.string,
+  noFiltersTitle: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentCategoryEmpty;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MOUSE_LEAVE = exports.MOUSE_ENTER = void 0;
+const MOUSE_ENTER = exports.MOUSE_ENTER = 'enter';
+const MOUSE_LEAVE = exports.MOUSE_LEAVE = 'leave';

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _context = _interopRequireDefault(require("../../../../../../../../context"));
+var _layout = _interopRequireDefault(require("./layout"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ExpandedPanelContentCategoryHeaderContainer = _ref => {
+  let {
+    category,
+    categoryConfig,
+    collapsedCategory,
+    dataTestId,
+    handleToggleCollapsedCategory
+  } = _ref;
+  const {
+    classes
+  } = (0, _react.useContext)(_context.default);
+  const {
+    name
+  } = category;
+  const {
+    avatarPalette,
+    icon
+  } = categoryConfig;
+  const [hoverMode, setHoverMode] = (0, _react.useState)(false);
+  const handleHeaderHover = action => {
+    setHoverMode(action === _constants.MOUSE_ENTER);
+  };
+  return /*#__PURE__*/_react.default.createElement(_layout.default, {
+    title: name,
+    icon: icon,
+    hoverMode: hoverMode,
+    handleToggleCollapsedCategory: handleToggleCollapsedCategory,
+    handleHeaderHover: handleHeaderHover,
+    dataTestId: dataTestId,
+    collapsedCategory: collapsedCategory,
+    classes: classes,
+    avatarPalette: avatarPalette
+  });
+};
+ExpandedPanelContentCategoryHeaderContainer.propTypes = {
+  category: _propTypes.object,
+  categoryConfig: _propTypes.object,
+  collapsedCategory: _propTypes.bool,
+  dataTestId: _propTypes.string,
+  handleToggleCollapsedCategory: _propTypes.func
+};
+var _default = exports.default = ExpandedPanelContentCategoryHeaderContainer;

package/dist/components/UTFilterGrouping/components/GroupingPanel/components/ExpandedPanelContent/components/ExpandedPanelContentCategory/components/ExpandedPanelContentCategoryHeader/layout.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _UTAvatar = _interopRequireDefault(require("../../../../../../../../../UTAvatar"));
+var _UTIcon = _interopRequireDefault(require("../../../../../../../../../UTIcon"));
+var _UTLabel = _interopRequireDefault(require("../../../../../../../../../UTLabel"));
+var _UTTouchableWithoutFeedback = _interopRequireDefault(require("../../../../../../../../../UTTouchableWithoutFeedback"));
+var _testIds = require("../../../../../../../../../../constants/testIds");
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  AVATAR,
+  COLLAPSE_BUTTON,
+  LABEL
+} = _testIds.ID_CONSTANTS;
+const ExpandedPanelContentCategoryHeader = _ref => {
+  let {
+    avatarPalette,
+    classes,
+    collapsedCategory,
+    dataTestId,
+    handleHeaderHover,
+    handleToggleCollapsedCategory,
+    hoverMode,
+    icon,
+    title
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("header", {
+    className: classes.expandedPanelContentCategoryHeader,
+    onMouseEnter: () => handleHeaderHover(_constants.MOUSE_ENTER),
+    onMouseLeave: () => handleHeaderHover(_constants.MOUSE_LEAVE)
+  }, hoverMode ? /*#__PURE__*/_react.default.createElement(_UTTouchableWithoutFeedback.default, {
+    dataTestId: "".concat(dataTestId, ".").concat(COLLAPSE_BUTTON),
+    onClick: handleToggleCollapsedCategory
+  }, /*#__PURE__*/_react.default.createElement(_UTIcon.default, {
+    className: collapsedCategory ? classes.collapsedCategoryIcon : '',
+    colorTheme: "gray",
+    name: "IconChevronDown",
+    size: "24"
+  })) : /*#__PURE__*/_react.default.createElement(_UTAvatar.default, {
+    areaShape: "rounded",
+    className: classes.ExpandedPanelContentCategoryHeaderAvatar,
+    dataTestId: "".concat(dataTestId, ".").concat(AVATAR),
+    iconProps: {
+      name: icon
+    },
+    palette: avatarPalette,
+    size: "small",
+    type: "icon"
+  }), /*#__PURE__*/_react.default.createElement(_UTLabel.default, {
+    className: classes.ExpandedPanelContentCategoryHeaderLabel,
+    colorTheme: hoverMode ? 'dark' : 'gray',
+    dataTestId: "".concat(dataTestId, ".").concat(LABEL),
+    variant: "small",
+    weight: "medium"
+  }, title));
+};
+ExpandedPanelContentCategoryHeader.propTypes = {
+  avatarPalette: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    backgroundColor: _propTypes.string,
+    color: _propTypes.string,
+    colorTheme: _propTypes.string
+  })),
+  classes: (0, _propTypes.objectOf)(_propTypes.string),
+  collapsedCategory: _propTypes.bool,
+  dataTestId: _propTypes.string,
+  handleHeaderHover: _propTypes.func,
+  handleToggleCollapsedCategory: _propTypes.func,
+  hoverMode: _propTypes.bool,
+  icon: _propTypes.string,
+  title: _propTypes.string
+};
+var _default = exports.default = ExpandedPanelContentCategoryHeader;