@royaloperahouse/harmonic 1.0.5-c → 1.0.5-e

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [1.0.5-e]
+- PrimaryButton hover only for device detected hover functionality
+
+
 ## [1.0.5-c]
 - Harmonic :
   - Added new CustomStrategy  filter
@@ -8,6 +12,8 @@
 - CastFilter: prevent duplicate screen reader announcements for actor images and ensure tapping an actor image ring toggles selection.
 
 ## [Proposed: 1.0.4]
+
+## [1.0.4]
 - Castfilter: fix NDVA issues
 
 ## [1.0.3]

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

@@ -1,19 +1,70 @@
-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 React from 'react';
+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
+ * Called when a tab is clicked. Receives the full clicked item (including
+ * `allowedSelectedWith`). The parent is responsible for computing the next
+ * `items` array and passing it back down with updated `isSelected` values.
+ *  as long as no return statement `type` is inferred automatically as void
+ *
+ * @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
+ * * @example Controlled selection with custom rules
+ *  * The component does not manage selection itself. The parent owns `items` (including
+ *  * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
+ *  * item to describe which other tab IDs may stay selected when that tab is chosen.
+ *  *
+ *  * ```tsx
+ *  * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
+ *  *   { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
+ *  *   { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
+ *  *   { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
+ *  * ]);
+ *  *
+ *  * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
+ *  *   setItems((current) =>
+ *  *     current.map((item) => {
+ *  *       if (item.id === clickedItem.id) {
+ *  *         return { ...item, isSelected: !item.isSelected };
+ *  *       }
+ *  *
+ *  *       const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
+ *  *       return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
+ *  *     })
+ *  *   );
+ *  * };
+ *  *
+ *  * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
+ */
+declare const CustomStrategyTabsFilter: ({ items, className, onClick, customViewConfig, }: TCustomStrategyTabsFilterProps) => React.JSX.Element;
 export default CustomStrategyTabsFilter;

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

@@ -1,6 +1,4 @@
 import { FunctionComponent } from 'react';
 import { ICarouselProps } from '../../../../types/carousel';
-declare const Carousel: FunctionComponent<ICarouselProps & Partial<{
-    titleFontFamily: 'Victor' | 'Grey' | undefined;
-}>>;
+declare const Carousel: FunctionComponent<ICarouselProps>;
 export default Carousel;

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

@@ -1,16 +1,4 @@
 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;
-}>;
+declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps>;
 export default HighlightsCarousel;

package/dist/harmonic.cjs.development.js

@@ -3072,7 +3072,7 @@ var getPressedColor = function getPressedColor(_ref4) {
 };
 
 var _templateObject$6, _templateObject2$3;
-var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  :hover:not(:active) {\n    background-color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$1, getBackgroundColor$1, getBackgroundColor$1, getPointerEvents, getTextColor$1, getHoveredColor, getHoveredColor, getTextColor$1, getPressedColor, getPressedColor, getTextColor$1);
+var PrimaryButtonWrapper = /*#__PURE__*/styled__default(Button)(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: ", ";\n  background-color: ", ";\n  border-color: ", ";\n  pointer-events: ", ";\n\n  path {\n    fill: ", ";\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    :hover:not(:active) {\n      background-color: ", ";\n      border-color: ", ";\n\n      path {\n        fill: ", ";\n      }\n    }\n  }\n\n  :active {\n    background-color: ", ";\n    border-color: ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n"])), getTextColor$1, getBackgroundColor$1, getBackgroundColor$1, getPointerEvents, getTextColor$1, getHoveredColor, getHoveredColor, getTextColor$1, getPressedColor, getPressedColor, getTextColor$1);
 var AriaDescription = /*#__PURE__*/styled__default.span(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  left: -9999px;\n  width: 1px;\n  height: 1px;\n  overflow: hidden;\n"])));
 
 var _excluded$4 = ["children", "disabled", "className"];
@@ -7364,20 +7364,74 @@ 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
+ * Called when a tab is clicked. Receives the full clicked item (including
+ * `allowedSelectedWith`). The parent is responsible for computing the next
+ * `items` array and passing it back down with updated `isSelected` values.
+ *  as long as no return statement `type` is inferred automatically as void
+ *
+ * @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
+ * * @example Controlled selection with custom rules
+ *  * The component does not manage selection itself. The parent owns `items` (including
+ *  * `isSelected`) and updates that state in `onClick`. Use `allowedSelectedWith` on each
+ *  * item to describe which other tab IDs may stay selected when that tab is chosen.
+ *  *
+ *  * ```tsx
+ *  * const [items, setItems] = useState<TCustomStrategyTabsFilterItem[]>([
+ *  *   { id: 'all', text: 'All events', isSelected: true, allowedSelectedWith: [] },
+ *  *   { id: 'opera', text: 'Opera', isSelected: false, allowedSelectedWith: ['ballet'] },
+ *  *   { id: 'ballet', text: 'Ballet', isSelected: false, allowedSelectedWith: ['opera'] },
+ *  * ]);
+ *  *
+ *  * const handleClick = (clickedItem: TCustomStrategyTabsFilterItem) => {
+ *  *   setItems((current) =>
+ *  *     current.map((item) => {
+ *  *       if (item.id === clickedItem.id) {
+ *  *         return { ...item, isSelected: !item.isSelected };
+ *  *       }
+ *  *
+ *  *       const mayStaySelected = clickedItem.allowedSelectedWith?.includes(item.id);
+ *  *       return { ...item, isSelected: mayStaySelected ? !item.isSelected : false };
+ *  *     })
+ *  *   );
+ *  * };
+ *  *
+ *  * return <CustomStrategyTabsFilter items={items} onClick={handleClick} />;
+ */
 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 +7439,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 +12689,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 +13067,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 +13096,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 +13120,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