@royaloperahouse/harmonic 0.6.0-a → 0.6.0-b

package/dist/components/atoms/Search/Search.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISearchProps } from '../../../types/navigation';
-declare const Search: ({ selected, onClick, className }: ISearchProps) => React.JSX.Element;
+declare const Search: React.ForwardRefExoticComponent<Pick<ISearchProps, "selected" | "onClick" | "className"> & React.RefAttributes<HTMLButtonElement>>;
 export default Search;

package/dist/components/atoms/Search/Search.style.d.ts

@@ -1,3 +1,3 @@
 import { ISearchProps } from '../../../types/navigation';
-export declare const SearchContainer: import("styled-components").StyledComponent<"div", any, ISearchProps, never>;
+export declare const SearchContainer: import("styled-components").StyledComponent<"button", any, ISearchProps, never>;
 export declare const SvgContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { INavTopProps } from '../../../types/navigation';
-declare const NavTop: ({ accountText, accountLink, accountIcon, accountOptions, onLink, basketText, basketExpiryUnixTimestamp, basketLink, basketNumItems, basketNumVirtualItems, onClickSearch, isShowSearch, className, }: INavTopProps) => React.JSX.Element;
+declare const NavTop: ({ accountText, accountLink, accountIcon, accountOptions, onLink, basketText, basketExpiryUnixTimestamp, basketLink, basketNumItems, basketNumVirtualItems, onClickSearch, isShowSearch, className, searchButtonRef, }: INavTopProps) => React.JSX.Element;
 export default NavTop;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { ISearchBarProps } from '../../../types/navigation';
-declare const SearchBar: ({ onClick, onClose, className }: ISearchBarProps) => React.JSX.Element;
+declare const SearchBar: ({ onClick, onClose, className, inputRef }: ISearchBarProps) => React.JSX.Element;
 export default SearchBar;

package/dist/harmonic.cjs.development.js

@@ -2939,7 +2939,7 @@ var OptionsContainer = /*#__PURE__*/styled__default.div(_templateObject3 || (_te
 
 var _templateObject$7, _templateObject2$5, _templateObject3$1, _templateObject4;
 var ControlledDropdownWrapper = /*#__PURE__*/styled__default.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: fit-content;\n"])));
-var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
+var ControlledDropdownHeaderContainer = /*#__PURE__*/styled__default.button(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: flex;\n  gap: 6px;\n  border-bottom: 1px solid transparent;\n  height: 24px;\n  line-height: 24px;\n  font-size: var(--harmonic-font-size-navigation);\n  font-family: var(--font-family-sans);\n  font-weight: var(--font-weight-navigation);\n  letter-spacing: var(--harmonic-letter-spacing-navigation);\n  color: var(--color-primary-black);\n  text-decoration: none;\n  cursor: pointer;\n  width: max-content;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n\n  ", "\n"])), function (_ref) {
   var active = _ref.active;
   if (active) {
     return "\n      & {\n        color: var(--color-primary-red);\n      }\n      && svg path {\n        fill: var(--color-primary-red);\n      } \n      ";
@@ -5312,7 +5312,7 @@ var Basket$1 = function Basket(_ref) {
 };
 
 var _templateObject$A, _templateObject2$q;
-var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])), function (_ref) {
+var SearchContainer = /*#__PURE__*/styled__default.button(_templateObject$A || (_templateObject$A = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  all: unset;\n  display: inline-flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  cursor: pointer;\n  border-bottom: 1px solid transparent;\n  padding-top: 3px;\n  padding-bottom: 3px;\n\n  svg path {\n    fill: var(--color-primary-black);\n  }\n\n  ", "\n\n  :hover {\n    border-bottom: 1px solid var(--color-primary-red);\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])), function (_ref) {
   var selected = _ref.selected;
   if (selected) {
     return "\n        border-bottom: 1px solid var(--color-primary-red);\n        && svg path {\n          fill: var(--color-primary-red);\n        }\n      ";
@@ -5321,31 +5321,26 @@ var SearchContainer = /*#__PURE__*/styled__default.div(_templateObject$A || (_te
 });
 var SvgContainer$1 = /*#__PURE__*/styled__default.div(_templateObject2$q || (_templateObject2$q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
-var Search$1 = function Search(_ref) {
+var Search$1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
     onClick = _ref.onClick,
     className = _ref.className;
-  var onKeyDownHandler = function onKeyDownHandler(e) {
-    if (e.key === 'Enter') {
-      onClick == null || onClick();
-    }
-  };
+  Search$1.displayName = 'Search';
   return /*#__PURE__*/React__default.createElement(SearchContainer, {
-    role: "button",
     "aria-label": "Search",
     selected: selected,
     onClick: onClick,
-    onKeyDown: onKeyDownHandler,
     "data-testid": "search-icon",
     tabIndex: 0,
-    className: className
+    className: className,
+    ref: ref
   }, /*#__PURE__*/React__default.createElement(SvgContainer$1, {
     "aria-hidden": "true"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })));
-};
+});
 
 /* eslint-disable react/jsx-no-useless-fragment */
 var Dropdown = function Dropdown(_ref) {
@@ -5563,12 +5558,14 @@ var NavTop = function NavTop(_ref) {
     onClickSearch = _ref.onClickSearch,
     _ref$isShowSearch = _ref.isShowSearch,
     isShowSearch = _ref$isShowSearch === void 0 ? false : _ref$isShowSearch,
-    className = _ref.className;
+    className = _ref.className,
+    searchButtonRef = _ref.searchButtonRef;
   return /*#__PURE__*/React__default.createElement(NavTopContainer$1, {
     className: className
   }, /*#__PURE__*/React__default.createElement(Search$1, {
     onClick: onClickSearch,
-    selected: isShowSearch
+    selected: isShowSearch,
+    ref: searchButtonRef
   }), /*#__PURE__*/React__default.createElement(Basket$1, {
     link: basketLink,
     text: basketText,
@@ -5717,30 +5714,56 @@ var Tabs = function Tabs(_ref) {
 var _templateObject$C, _templateObject2$s, _templateObject3$i, _templateObject5$a, _templateObject6$7, _templateObject7$4;
 var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$C || (_templateObject$C = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: transparent;\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$s || (_templateObject2$s = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
-var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n"])));
+var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$i || (_templateObject3$i = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  as: button;\n  all: unset;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--color-primary-red);\n    }\n  }\n\n  &:focus {\n    outline: 2px solid var(--color-primary-black);\n    outline-offset: 2px;\n  }\n"])));
 var InputContainer = /*#__PURE__*/styled__default.div(_templateObject5$a || (_templateObject5$a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-serif);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--color-base-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
 var TextLinkWrapper$1 = /*#__PURE__*/styled__default(TextLink)(_templateObject6$7 || (_templateObject6$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--color-primary-red);\n"])));
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject7$4 || (_templateObject7$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-right: 8px;\n\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n"])));
 
+function useFocusTrap(containerRef, onEscape) {
+  React.useEffect(function () {
+    var container = containerRef.current;
+    if (!container) return undefined;
+    var focusableSelectors = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
+    var focusableEls = container.querySelectorAll(focusableSelectors);
+    var firstEl = focusableEls[0];
+    var lastEl = focusableEls[focusableEls.length - 1];
+    var handleKeyDown = function handleKeyDown(e) {
+      if (e.key === 'Tab') {
+        if (focusableEls.length === 0) return;
+        if (e.shiftKey && document.activeElement === firstEl) {
+          e.preventDefault();
+          lastEl == null || lastEl.focus();
+        } else if (!e.shiftKey && document.activeElement === lastEl) {
+          e.preventDefault();
+          firstEl == null || firstEl.focus();
+        }
+      }
+      if (e.key === 'Escape') {
+        onEscape == null || onEscape();
+      }
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [containerRef, onEscape]);
+}
+
 var SearchBar = function SearchBar(_ref) {
   var onClick = _ref.onClick,
     onClose = _ref.onClose,
-    className = _ref.className;
+    className = _ref.className,
+    inputRef = _ref.inputRef;
   var _useState = React.useState(false),
     showSearchLink = _useState[0],
     setShowSearchLink = _useState[1];
   var _useState2 = React.useState(''),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
-  var inputRef = React.useRef(null);
-  React.useEffect(function () {
-    var _inputRef$current;
-    inputRef == null || (_inputRef$current = inputRef.current) == null || _inputRef$current.focus();
-    return function () {
-      var _inputRef$current2;
-      return inputRef == null || (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
-    };
-  }, [inputRef]);
+  var internalRef = React.useRef(null);
+  var finalInputRef = inputRef != null ? inputRef : internalRef;
+  var containerRef = React.useRef(null);
+  useFocusTrap(containerRef, onClose);
   var onSearchHandler = function onSearchHandler(value) {
     onClick(value);
     setSearchValue('');
@@ -5776,12 +5799,13 @@ var SearchBar = function SearchBar(_ref) {
   var _useViewport = useViewport(),
     isDesktop = _useViewport.isDesktop;
   return /*#__PURE__*/React__default.createElement(SearchBarContainer, {
-    className: className
+    className: className,
+    ref: containerRef
   }, /*#__PURE__*/React__default.createElement(SvgContainerSearch, null, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Search"
   })), /*#__PURE__*/React__default.createElement(InputContainer, null, /*#__PURE__*/React__default.createElement("input", {
     "data-testid": "input-html",
-    ref: inputRef,
+    ref: finalInputRef,
     className: "search-input",
     placeholder: "Search the website...",
     type: "text",
@@ -5814,7 +5838,8 @@ var SearchBar = function SearchBar(_ref) {
     tabIndex: 0,
     onClick: onCloseHandler,
     onKeyDown: onKeyboardCloseHandler,
-    "data-testid": "close-icon"
+    "data-testid": "close-icon",
+    "aria-label": "Close search bar"
   }, /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "Close"
   })));
@@ -5831,6 +5856,8 @@ var Navigation = function Navigation(_ref) {
     crest = _ref$crest === void 0 ? false : _ref$crest,
     className = _ref.className,
     logoLink = _ref.logoLink;
+  var searchInputRef = React.useRef(null);
+  var searchButtonRef = React.useRef(null);
   var _useState = React.useState(dataNavTop),
     navTopData = _useState[0],
     setNavTopData = _useState[1];
@@ -5863,9 +5890,7 @@ var Navigation = function Navigation(_ref) {
     setNavTopData(dataNavTop);
   }, [dataNavTop]);
   var onClickSearchHandler = function onClickSearchHandler() {
-    setshowSearch(function (prev) {
-      return !prev;
-    });
+    setshowSearch(true);
   };
   var onLinkHandler = function onLinkHandler(link) {
     onLink(link);
@@ -5882,7 +5907,23 @@ var Navigation = function Navigation(_ref) {
   };
   var onCloseSearchHandler = function onCloseSearchHandler() {
     setshowSearch(false);
+    setTimeout(function () {
+      var _searchButtonRef$curr;
+      (_searchButtonRef$curr = searchButtonRef.current) == null || _searchButtonRef$curr.focus();
+    }, 0);
   };
+  React.useEffect(function () {
+    if (showSearch) {
+      var timer = setTimeout(function () {
+        var _searchInputRef$curre;
+        (_searchInputRef$curre = searchInputRef.current) == null || _searchInputRef$curre.focus();
+      }, 50);
+      return function () {
+        return clearTimeout(timer);
+      };
+    }
+    return undefined;
+  }, [showSearch]);
   var _useViewport = useViewport(),
     isMobile = _useViewport.isMobile;
   return /*#__PURE__*/React__default.createElement(NavigationWrapper, {
@@ -5924,7 +5965,8 @@ var Navigation = function Navigation(_ref) {
     basketNumVirtualItems: navTopData.basketNumVirtualItems,
     onClickSearch: onClickSearchHandler,
     onLink: onLinkHandler,
-    isShowSearch: showSearch
+    isShowSearch: showSearch,
+    searchButtonRef: searchButtonRef
   }))))), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchBackground, {
     visible: showSearch
   }), /*#__PURE__*/React__default.createElement(GridItemSearch, {
@@ -5935,6 +5977,7 @@ var Navigation = function Navigation(_ref) {
     columnStartDevice: 2,
     columnSpanDevice: 12
   }, /*#__PURE__*/React__default.createElement(SearchBar, {
+    inputRef: searchInputRef,
     onClick: onSearchHandler,
     onClose: onCloseSearchHandler
   })))), showMenu && (/*#__PURE__*/React__default.createElement(NavigationGridMobile, {