@royaloperahouse/harmonic 1.0.5-d → 1.0.5-f

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,4 +1,4 @@
-import { FunctionComponent } from 'react';
+import React from 'react';
 import { TCustomStrategyTabsFilterProps } from '../../../types';
 /**
  * A horizontally scrollable tabs filter component used to display
@@ -20,7 +20,10 @@ import { TCustomStrategyTabsFilterProps } from '../../../types';
  * 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.
+ * 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:
@@ -36,42 +39,32 @@ import { TCustomStrategyTabsFilterProps } from '../../../types';
  *
  * @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',
- *     },
- *   }}
- * />
- * ```
+ * * @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: FunctionComponent<TCustomStrategyTabsFilterProps>;
+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,6 +1,4 @@
 import { FunctionComponent } from 'react';
 import { IHighlightsCarouselProps } from '../../../../types/carousel';
-declare const HighlightsCarousel: FunctionComponent<IHighlightsCarouselProps & Partial<{
-    titleFontFamily: 'Victor' | 'Grey' | 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"];
@@ -7323,7 +7323,7 @@ var Editorial = function Editorial(_ref) {
 var _templateObject$O, _templateObject2$B, _templateObject3$o;
 var HotFiltersWrapper = /*#__PURE__*/styled__default.div(_templateObject$O || (_templateObject$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  overflow-x: scroll;\n\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n\n  ::-webkit-scrollbar {\n    display: none;\n  }\n"])));
 var HotFilterOptionsWrapper = /*#__PURE__*/styled__default.div(_templateObject2$B || (_templateObject2$B = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  width: fit-content;\n  min-width: 400px;\n  justify-content: space-between;\n  gap: 16px;\n  font-family: var(--font-family-sans);\n\n  @media ", " {\n    gap: 10px;\n  }\n"])), devices.mobile);
-var StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$o || (_templateObject3$o = /*#__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 StyledHotFiltersButton = /*#__PURE__*/styled__default(PrimaryButton)(_templateObject3$o || (_templateObject3$o = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  @media (hover: hover) and (pointer: fine) {\n    :hover {\n      color: var(--color-base-white);\n    }\n  }\n"])));
 
 var _excluded$i = ["text", "onClick"];
 var HotFilters = function HotFilters(_ref) {
@@ -7384,7 +7384,10 @@ var _excluded$j = ["text", "id", "isSelected"];
  * 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.
+ * 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:
@@ -7400,42 +7403,32 @@ var _excluded$j = ["text", "id", "isSelected"];
  *
  * @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',
- *     },
- *   }}
- * />
- * ```
+ * * @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;