@royaloperahouse/harmonic 1.0.7-b → 1.0.8-a

package/dist/harmonic.esm.js

@@ -7433,10 +7433,12 @@ var HotFilters = function HotFilters(_ref) {
 var _templateObject$P, _templateObject2$C, _templateObject3$p;
 var ScrollContainer = /*#__PURE__*/styled.div(_templateObject$P || (_templateObject$P = /*#__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\n  @media ", " {\n    overflow-x: visible;\n  }\n"])), devices.mobile);
 var TabsContainerWrapper = /*#__PURE__*/styled.div(_templateObject2$C || (_templateObject2$C = /*#__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    width: 100%;\n    min-width: 0;\n    flex-wrap: wrap;\n    justify-content: flex-start;\n    gap: 10px;\n  }\n"])), devices.mobile);
-var StyledTab = /*#__PURE__*/styled(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\n  @media ", " {\n    width: auto !important;\n    min-width: fit-content;\n    flex: 0 0 auto;\n  }\n"])), devices.mobile);
+var StyledTab = /*#__PURE__*/styled(PrimaryButton)(_templateObject3$p || (_templateObject3$p = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  border: 1px solid var(--color-base-black);\n  min-width: fit-content;\n\n  &:focus-visible {\n    outline: 2px solid var(--color-base-black);\n    outline-offset: 2px;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    &:hover {\n      color: var(--color-base-white);\n    }\n  }\n\n  @media ", " {\n    width: auto !important;\n    min-width: fit-content;\n    flex: 0 0 auto;\n  }\n"])), devices.mobile);
 
-var _excluded$j = ["text", "id", "isSelected"];
+var _excluded$j = ["text", "id", "isSelected", "allowedSelectedWith"];
 /**
+ * A controlled filter button group that supports single- and multi-select strategies.
+ * The consumer owns the selection state and receives the complete clicked item.
  * A horizontally scrollable tabs filter component used to display
  * selectable strategy tabs with configurable styling and selection behavior.
  *
@@ -7506,11 +7508,17 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
   var _customViewConfig$bac, _customViewConfig$bac2, _customViewConfig$tex, _customViewConfig$tex2;
   var items = _ref.items,
     className = _ref.className,
+    ariaLabel = _ref.ariaLabel,
     onClick = _ref.onClick,
     customViewConfig = _ref.customViewConfig;
   var handleClick = React__default.useCallback(function (item) {
     onClick(item);
   }, [onClick]);
+  var handleKeyDown = React__default.useCallback(function (event, item) {
+    if (event.key !== ' ' && event.key !== 'Spacebar') return;
+    event.preventDefault();
+    if (!event.repeat) handleClick(item);
+  }, [handleClick]);
   // in case of any partially passed configuration, config defaults non defined
   var config = {
     selectIcon: (customViewConfig == null ? void 0 : customViewConfig.selectIcon) || 'Confirm',
@@ -7526,7 +7534,9 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
     pressedColor: (customViewConfig == null ? void 0 : customViewConfig.pressedColor) || 'black-pressed'
   };
   return /*#__PURE__*/React__default.createElement(ScrollContainer, {
-    className: className
+    "aria-label": ariaLabel,
+    className: className,
+    role: "group"
   }, /*#__PURE__*/React__default.createElement(TabsContainerWrapper, null, items.map(function (item) {
     var text = item.text,
       id = item.id,
@@ -7537,6 +7547,9 @@ var CustomStrategyTabsFilter = function CustomStrategyTabsFilter(_ref) {
       onClick: function onClick() {
         return handleClick(item);
       },
+      onKeyDown: function onKeyDown(event) {
+        return handleKeyDown(event, item);
+      },
       iconName: isSelected ? config.selectIcon : undefined,
       backgroundColor: isSelected ? config.backgroundColor.select : config.backgroundColor.unselect,
       textColor: isSelected ? config.textColor.select : config.textColor.unselect,