@royaloperahouse/harmonic 1.0.5-c → 1.0.5-d

package/dist/components/molecules/CustomStrategyTabsFilter/CustomStrategyTabsFilter.d.ts

@@ -1,19 +1,77 @@
 import { FunctionComponent } from 'react';
-import { IconNameType, TCustomStrategyTabsFilterProps, ThemeColor } from '../../../types';
-export interface ICustomConfig {
-    selectIcon: IconNameType;
-    backgroundColor: {
-        select: ThemeColor;
-        unselect: ThemeColor;
-    };
-    textColor: {
-        select: ThemeColor;
-        unselect: ThemeColor;
-    };
-    hoveredColor: ThemeColor;
-    pressedColor: ThemeColor;
-}
-declare const CustomStrategyTabsFilter: FunctionComponent<TCustomStrategyTabsFilterProps & {
-    customViewConfig?: ICustomConfig;
-}>;
+import { TCustomStrategyTabsFilterProps } from '../../../types';
+/**
+ * A horizontally scrollable tabs filter component used to display
+ * selectable strategy tabs with configurable styling and selection behavior.
+ *
+ * Features:
+ * - Supports both single-select and multi-select tab scenarios
+ * - Displays an optional icon on selected tabs
+ * - Allows customization of colors and selected icon through `customViewConfig`
+ * - Applies default styling when configuration values are omitted
+ * - Emits the clicked tab item through `onClick`
+ *
+ * @component
+ *
+ * @param {TCustomStrategyTabsFilterProps['items']} items
+ * Collection of tabs to render.
+ *
+ * @param {string} [className]
+ * Optional CSS class name applied to the root scroll container.
+ *
+ * @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
+ * Generic callback invoked when a tab is clicked.
+ *
+ * @param [customViewConfig]
+ * Optional visual configuration used to customize:
+ * - selected tab icon
+ * - selected/unselected background colors
+ * - selected/unselected text colors
+ * - hover color
+ * - pressed color
+ *
+ * Any omitted configuration values will fall back to the component defaults.
+ *
+ * @returns { React.JSX.Element}
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={[
+ *     {
+ *       id: 'all',
+ *       text: 'All',
+ *       isSelected: true,
+ *       allowedSelectedWith: [],
+ *     },
+ *     {
+ *       id: 'open',
+ *       text: 'Open',
+ *       isSelected: false,
+ *     },
+ *   ]}
+ *   onClick={(item) => console.log(item)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={items}
+ *   onClick={handleFilterClick}
+ *   customViewConfig={{
+ *     selectIcon: 'Check',
+ *     backgroundColor: {
+ *       select: 'primary',
+ *       unselect: 'base-white',
+ *     },
+ *     textColor: {
+ *       select: 'base-white',
+ *       unselect: 'base-black',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
+declare const CustomStrategyTabsFilter: FunctionComponent<TCustomStrategyTabsFilterProps>;
 export default CustomStrategyTabsFilter;

package/dist/components/organisms/Carousels/HighlightsCarousel/HighlightsCarousel.d.ts

@@ -1,16 +1,6 @@
 import { FunctionComponent } from 'react';
 import { IHighlightsCarouselProps } from '../../../../types/carousel';
-import { HarmonicSize, TypographyLevel } from '../../../../types/typography';
-interface IDefaultConfig {
-    title: {
-        className: string;
-        size?: HarmonicSize | undefined;
-        titleSemanticLevel: TypographyLevel;
-    };
-}
 declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps & Partial<{
     titleFontFamily: 'Victor' | 'Grey' | undefined;
-}> & {
-    customConfig?: Partial<IDefaultConfig> | undefined;
-}>;
+}>>;
 export default HighlightsCarousel;

package/dist/harmonic.cjs.development.js

@@ -7364,20 +7364,81 @@ var TabsContainerWrapper = /*#__PURE__*/styled__default.div(_templateObject2$C |
 var StyledTab = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  :hover {\n    color: var(--color-base-white);\n  }\n"])));
 
 var _excluded$j = ["text", "id", "isSelected"];
-var defaultConfig = {
-  selectIcon: 'Confirm',
-  backgroundColor: {
-    select: 'base-black',
-    unselect: 'base-white'
-  },
-  textColor: {
-    select: 'base-white',
-    unselect: 'base-black'
-  },
-  hoveredColor: 'base-black',
-  pressedColor: 'black-pressed'
-};
+/**
+ * A horizontally scrollable tabs filter component used to display
+ * selectable strategy tabs with configurable styling and selection behavior.
+ *
+ * Features:
+ * - Supports both single-select and multi-select tab scenarios
+ * - Displays an optional icon on selected tabs
+ * - Allows customization of colors and selected icon through `customViewConfig`
+ * - Applies default styling when configuration values are omitted
+ * - Emits the clicked tab item through `onClick`
+ *
+ * @component
+ *
+ * @param {TCustomStrategyTabsFilterProps['items']} items
+ * Collection of tabs to render.
+ *
+ * @param {string} [className]
+ * Optional CSS class name applied to the root scroll container.
+ *
+ * @param {<T>(item: TCustomStrategyTabsFilterProps['items'][number]) => T} onClick
+ * Generic callback invoked when a tab is clicked.
+ *
+ * @param [customViewConfig]
+ * Optional visual configuration used to customize:
+ * - selected tab icon
+ * - selected/unselected background colors
+ * - selected/unselected text colors
+ * - hover color
+ * - pressed color
+ *
+ * Any omitted configuration values will fall back to the component defaults.
+ *
+ * @returns { React.JSX.Element}
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={[
+ *     {
+ *       id: 'all',
+ *       text: 'All',
+ *       isSelected: true,
+ *       allowedSelectedWith: [],
+ *     },
+ *     {
+ *       id: 'open',
+ *       text: 'Open',
+ *       isSelected: false,
+ *     },
+ *   ]}
+ *   onClick={(item) => console.log(item)}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <CustomStrategyTabsFilter
+ *   items={items}
+ *   onClick={handleFilterClick}
+ *   customViewConfig={{
+ *     selectIcon: 'Check',
+ *     backgroundColor: {
+ *       select: 'primary',
+ *       unselect: 'base-white',
+ *     },
+ *     textColor: {
+ *       select: 'base-white',
+ *       unselect: 'base-black',
+ *     },
+ *   }}
+ * />
+ * ```
+ */
 var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
+  var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
   var items = _ref.items,
     className = _ref.className,
     onClick = _ref.onClick,
@@ -7385,7 +7446,20 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
   var handleClick = React__default.useCallback(function (item) {
     onClick(item);
   }, [onClick]);
-  var config = customViewConfig ? _extends({}, defaultConfig, customViewConfig) : defaultConfig;
+  // in case of any partially passed configuration, config defaults non defined
+  var config = {
+    selectIcon: (customViewConfig == null ? void 0 : customViewConfig.selectIcon) || 'Confirm',
+    backgroundColor: {
+      select: (customViewConfig == null || (_customViewConfig$bac = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac.select) || 'base-black',
+      unselect: (customViewConfig == null || (_customViewConfig$bac2 = customViewConfig.backgroundColor) == null ? void 0 : _customViewConfig$bac2.unselect) || 'base-white'
+    },
+    textColor: {
+      select: (customViewConfig == null || (_customViewConfig$tex = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex.select) || 'base-white',
+      unselect: (customViewConfig == null || (_customViewConfig$tex2 = customViewConfig.textColor) == null ? void 0 : _customViewConfig$tex2.unselect) || 'base-black'
+    },
+    hoveredColor: (customViewConfig == null ? void 0 : customViewConfig.hoveredColor) || 'base-black',
+    pressedColor: (customViewConfig == null ? void 0 : customViewConfig.pressedColor) || 'black-pressed'
+  };
   return /*#__PURE__*/React__default.createElement(ScrollContainer, {
     className: className
   }, /*#__PURE__*/React__default.createElement(TabsContainerWrapper, null, items.map(function (item) {
@@ -12622,7 +12696,7 @@ var Carousel = function Carousel(_ref) {
         return (_swipeRef$current$has = (_swipeRef$current = swipeRef.current) == null ? void 0 : _swipeRef$current.hasNext()) != null ? _swipeRef$current$has : childrenCount > 1;
       });
     }
-  }, [childrenCount]);
+  }, [childrenCount, infinite]);
   React.useEffect(function () {
     if (type !== exports.CarouselType.Image) return undefined;
     var handleFullscreenChange = function handleFullscreenChange() {
@@ -13000,23 +13074,18 @@ var SwipeCarousel = function SwipeCarousel(_ref2) {
 };
 
 var titleHierarchyMap = /*#__PURE__*/new Map([[1, 'h1'], [2, 'h2'], [3, 'h3']]);
-// Default confic might be exteneded in case on any other changes
-var defaultCarouselConfig = {
-  title: {
-    size: 'medium',
-    className: TYPOGRAPHY_CLASS_NAME,
-    titleSemanticLevel: 2
-  }
-};
 var HighlightsCarousel = function HighlightsCarousel(_ref) {
-  var _customConfig$title, _customConfig$title2, _customConfig$title3;
   var logo = _ref.logo,
     carouselTitle = _ref.carouselTitle,
     slides = _ref.slides,
-    titleSemanticLevel = _ref.titleSemanticLevel,
+    _ref$titleSemanticLev = _ref.titleSemanticLevel,
+    titleSemanticLevel = _ref$titleSemanticLev === void 0 ? 2 : _ref$titleSemanticLev,
     className = _ref.className,
     titleFontFamily = _ref.titleFontFamily,
-    customConfig = _ref.customConfig;
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? 'medium' : _ref$titleSize,
+    _ref$titleClassName = _ref.titleClassName,
+    titleClassName = _ref$titleClassName === void 0 ? TYPOGRAPHY_CLASS_NAME : _ref$titleClassName;
   var slidesMedia = React.useMemo(function () {
     return slides.map(function (_ref2) {
       var mediaContent = _ref2.mediaContent;
@@ -13034,8 +13103,7 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
     return !isVideoSlide(slide);
   });
   var carouselTitleId = "highlights-carousel-title-" + carouselTitle;
-  var semanticLevel = titleSemanticLevel || (customConfig == null || (_customConfig$title = customConfig.title) == null ? void 0 : _customConfig$title.titleSemanticLevel);
-  var titleSemanticLevelValue = semanticLevel && titleHierarchyMap.has(semanticLevel) ? titleHierarchyMap.get(semanticLevel) : titleHierarchyMap.get(defaultCarouselConfig.title.titleSemanticLevel);
+  var titleSemanticLevelValue = titleHierarchyMap.get(titleSemanticLevel);
   var carouselRef = React.useRef(null);
   var onNext = function onNext() {
     var _carouselRef$current;
@@ -13059,10 +13127,10 @@ var HighlightsCarousel = function HighlightsCarousel(_ref) {
   }, /*#__PURE__*/React__default.createElement(HeaderWrapper, {
     id: carouselTitleId
   }, /*#__PURE__*/React__default.createElement(HarmonicHeader, {
-    className: (customConfig == null || (_customConfig$title2 = customConfig.title) == null ? void 0 : _customConfig$title2.className) || defaultCarouselConfig.title.className,
-    size: (customConfig == null || (_customConfig$title3 = customConfig.title) == null ? void 0 : _customConfig$title3.size) || defaultCarouselConfig.title.size,
+    size: titleSize,
     serif: isVictorTitleFont,
-    hierarchy: titleSemanticLevelValue
+    hierarchy: titleSemanticLevelValue,
+    className: titleClassName
   }, carouselTitle))), hasMultipleSlides && (/*#__PURE__*/React__default.createElement(RotatorButtonsWrapperMobile$1, null, /*#__PURE__*/React__default.createElement(RotatorButtons, {
     onClickNext: onNext,
     onClickPrev: onPrev