@royaloperahouse/harmonic 1.0.5-d → 1.0.5-e

package/dist/harmonic.esm.js

@@ -3095,7 +3095,7 @@ var getPressedColor = function getPressedColor(_ref4) {
 };
 
 var _templateObject$6, _templateObject2$3;
-var PrimaryButtonWrapper = /*#__PURE__*/styled(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(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.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"];
@@ -7411,7 +7411,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:
@@ -7427,42 +7430,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;