@oneuptime/common 14.0.12 → 14.0.14

package/UI/Components/MoreMenu/MoreMenu.tsx

@@ -14,6 +14,7 @@ import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
 import { consumePressForAnchoredPopup } from "../../Types/LayeredDismissal";
 import Button, { ButtonStyleType } from "../Button/Button";
 import DROPDOWN_MENU_Z_INDEX from "../Dropdown/DropdownMenuZIndex";
+import useTranslateValue from "../../Utils/Translation";
 
 export interface ComponentProps {
   children: Array<ReactElement>;
@@ -57,6 +58,16 @@ export interface ComponentProps {
   isMenuPortaled?: boolean | undefined;
 }
 
+/*
+ * Every role a menu's items can have: an action (menuitem), and one choice of
+ * several (menuitemradio, a feed's sort order) or an on/off item
+ * (menuitemcheckbox). All three take part in the roving focus and close the
+ * menu when picked; leaving the last two out would also have the promotion
+ * in getMenuItems rewrite a choice's role to plain menuitem.
+ */
+export const MENU_ITEM_SELECTOR: string =
+  '[role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]';
+
 // Matches the mt-2 / mb-2 gap the in-place menu keeps from its trigger.
 const PORTALED_MENU_GAP_PX: number = 8;
 const PORTALED_MENU_VIEWPORT_PADDING_PX: number = 8;
@@ -106,6 +117,11 @@ const MoreMenu: React.ForwardRefExoticComponent<
   ComponentProps & React.RefAttributes<unknown>
 > = forwardRef(
   (props: ComponentProps, componentRef: React.ForwardedRef<unknown>) => {
+    const { translateString } = useTranslateValue();
+    const text: string | undefined = translateString(props.text);
+    const ariaLabel: string | undefined = translateString(props.ariaLabel);
+    const moreOptionsLabel: string =
+      translateString("More options") || "More options";
     const uniqueId: string = useId();
     const menuId: string = `menu-${uniqueId}`;
     const buttonId: string = `menu-button-${uniqueId}`;
@@ -148,13 +164,13 @@ const MoreMenu: React.ForwardRefExoticComponent<
             'button, a[href], [role="button"]',
           ),
         ).forEach((item: HTMLElement) => {
-          if (!item.closest('[role="menuitem"]')) {
+          if (!item.closest(MENU_ITEM_SELECTOR)) {
             item.setAttribute("role", "menuitem");
           }
         });
 
         return Array.from(
-          menuElement.querySelectorAll<HTMLElement>('[role="menuitem"]'),
+          menuElement.querySelectorAll<HTMLElement>(MENU_ITEM_SELECTOR),
         ).filter((item: HTMLElement) => {
           /*
            * A locked item that explains itself (MoreMenuItem with a tooltip)
@@ -595,7 +611,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
         return;
       }
 
-      const menuItem: Element | null = eventTarget.closest('[role="menuitem"]');
+      const menuItem: Element | null = eventTarget.closest(MENU_ITEM_SELECTOR);
 
       if (
         menuItem instanceof HTMLElement &&
@@ -626,7 +642,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
         return;
       }
 
-      const menuItem: Element | null = eventTarget.closest('[role="menuitem"]');
+      const menuItem: Element | null = eventTarget.closest(MENU_ITEM_SELECTOR);
 
       if (
         menuItem instanceof HTMLElement &&
@@ -663,9 +679,9 @@ const MoreMenu: React.ForwardRefExoticComponent<
           "aria-disabled": isTriggerDisabled,
           "aria-label":
             trigger.props["aria-label"] ||
-            props.ariaLabel ||
-            props.text ||
-            "More options",
+            ariaLabel ||
+            text ||
+            moreOptionsLabel,
           "aria-haspopup": "menu",
           "aria-expanded": isComponentVisible,
           "aria-controls": isComponentVisible ? menuId : undefined,
@@ -745,14 +761,14 @@ const MoreMenu: React.ForwardRefExoticComponent<
           <Button
             id={buttonId}
             icon={props.menuIcon || IconProp.More}
-            title={props.text || ""}
+            title={text || ""}
             buttonStyle={ButtonStyleType.OUTLINE}
             disabled={props.isDisabled}
             dataTestId={props.dataTestId}
             onClick={() => {
               setIsComponentVisible(!isDropdownVisible);
             }}
-            ariaLabel={props.ariaLabel || props.text || "More options"}
+            ariaLabel={ariaLabel || text || moreOptionsLabel}
             ariaExpanded={isComponentVisible}
             ariaHaspopup="menu"
             ariaControls={isComponentVisible ? menuId : undefined}
@@ -773,7 +789,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
               onClick={() => {
                 setIsComponentVisible(!isDropdownVisible);
               }}
-              aria-label={props.ariaLabel || props.text || "More options"}
+              aria-label={ariaLabel || text || moreOptionsLabel}
               aria-haspopup="menu"
               aria-expanded={isComponentVisible}
               aria-controls={isComponentVisible ? menuId : undefined}
@@ -796,7 +812,7 @@ const MoreMenu: React.ForwardRefExoticComponent<
               role="button"
               tabIndex={props.isDisabled ? -1 : 0}
               data-testid={props.dataTestId}
-              aria-label={props.ariaLabel || props.text || undefined}
+              aria-label={ariaLabel || text || undefined}
               aria-haspopup="menu"
               aria-expanded={isComponentVisible}
               aria-controls={isComponentVisible ? menuId : undefined}

package/UI/Components/MoreMenu/MoreMenuItem.tsx

@@ -1,7 +1,9 @@
 import React, { FunctionComponent, ReactElement, useId } from "react";
+import Color from "../../../Types/Color";
 import IconProp from "../../../Types/Icon/IconProp";
 import Icon from "../Icon/Icon";
 import Tooltip from "../Tooltip/Tooltip";
+import useTranslateValue from "../../Utils/Translation";
 
 export interface ComponentProps {
   icon?: IconProp | undefined;
@@ -26,11 +28,33 @@ export interface ComponentProps {
    * up with the labels of the items around it that do.
    */
   isIconSpaceReserved?: boolean | undefined;
+  /*
+   * A dot of this colour in the icon's place, for an item that picks a state,
+   * a severity or a monitor status: "Change state to" shows each state's
+   * colour the way the state dropdowns do. An icon, when given, wins.
+   */
+  color?: Color | string | undefined;
+  /*
+   * A mark in the icon's place, coloured like an icon, for an item whose
+   * button draws one that is not an icon: the H1 of a text editor's Heading
+   * 1. An icon, when given, wins.
+   */
+  iconElement?: ReactElement | undefined;
+  /*
+   * For an item that is one choice of several - a feed's sort order. Set to
+   * true or false, the item is a menuitemradio whose aria-checked says which
+   * choice is in use, so a screen reader hears what the tick on it shows.
+   * The tick itself is still the caller's icon, with isIconSpaceReserved
+   * keeping the other choices' labels in line. Left unset, the item is an
+   * ordinary menuitem.
+   */
+  isChecked?: boolean | undefined;
 }
 
 const MoreMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
   const isDisabled: boolean = Boolean(props.isDisabled);
   const isDestructive: boolean = Boolean(props.isDestructive);
   const reasonId: string = useId();
@@ -47,6 +71,9 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
    */
   const isExplainedLock: boolean = isDisabled && Boolean(props.tooltip);
 
+  const dotColor: string | undefined =
+    props.color?.toString().trim() || undefined;
+
   const colorClassName: string = isDestructive
     ? "text-red-600"
     : "text-gray-700";
@@ -72,7 +99,8 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
       className={`group mx-1 flex w-[calc(100%-0.5rem)] items-center rounded-md px-3 py-2 text-left text-sm transition-colors duration-100 ${colorClassName} ${stateClassName} ${
         props.className || ""
       }`}
-      role="menuitem"
+      role={props.isChecked === undefined ? "menuitem" : "menuitemradio"}
+      aria-checked={props.isChecked}
       tabIndex={-1}
       disabled={isDisabled && !isExplainedLock}
       aria-disabled={isDisabled}
@@ -96,11 +124,41 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
           } ${props.iconClassName || ""}`}
         />
       )}
-      {!props.icon && props.isIconSpaceReserved && (
-        <span className="mr-2.5 h-4 w-4 shrink-0" aria-hidden="true"></span>
+      {!props.icon && props.iconElement && (
+        <span
+          className={`mr-2.5 flex h-4 w-4 shrink-0 items-center justify-center transition-colors duration-100 ${
+            isDestructive
+              ? `text-red-500 ${isDisabled ? "" : "group-hover:text-red-600"}`
+              : `text-gray-400 ${isDisabled ? "" : "group-hover:text-indigo-500"}`
+          }`}
+          aria-hidden="true"
+          data-testid="more-menu-item-mark"
+        >
+          {props.iconElement}
+        </span>
+      )}
+      {!props.icon && !props.iconElement && dotColor && (
+        <span
+          className="mr-2.5 flex h-4 w-4 shrink-0 items-center justify-center"
+          aria-hidden="true"
+          data-testid="more-menu-item-color"
+        >
+          <span
+            className="h-2.5 w-2.5 rounded-full border border-gray-200"
+            style={{ backgroundColor: dotColor }}
+          ></span>
+        </span>
       )}
+      {!props.icon &&
+        !props.iconElement &&
+        !dotColor &&
+        props.isIconSpaceReserved && (
+          <span className="mr-2.5 h-4 w-4 shrink-0" aria-hidden="true"></span>
+        )}
       <div className="flex w-full justify-between items-center">
-        <div className="font-medium">{props.text}</div>
+        <div className="font-medium">
+          {translateString(props.text) ?? props.text}
+        </div>
         <div>{props.rightElement}</div>
       </div>
     </button>
@@ -122,7 +180,7 @@ const MoreMenuItem: FunctionComponent<ComponentProps> = (
           {menuItem}
         </Tooltip>
         <span id={reasonId} className="sr-only">
-          {props.tooltip}
+          {translateString(props.tooltip) ?? props.tooltip}
         </span>
       </>
     );

package/UI/Components/Navbar/NavBar.tsx

@@ -10,6 +10,8 @@ import URL from "../../../Types/API/URL";
 import IconProp from "../../../Types/Icon/IconProp";
 import NavBarItem from "./NavBarItem";
 import NavBarMenuModal from "./NavBarMenuModal";
+import NavBarMobileMenu from "./NavBarMobileMenu";
+import { isMoreMenuItemActive } from "./NavBarMenuCatalog";
 import Button, { ButtonStyleType } from "../Button/Button";
 import Navigation from "../../Utils/Navigation";
 import useComponentOutsideClick from "../../Types/UseComponentOutsideClick";
@@ -40,23 +42,26 @@ export interface MoreMenuItem {
 }
 
 /*
- * One menu item can own several route prefixes (e.g. a merged "Network" item
- * spanning /network-devices and /network-sites) — check them all.
+ * Whether a products-menu item is the page the user is on. It lives with the
+ * menu's other catalog rules in NavBarMenuCatalog.ts and is re-exported here,
+ * where callers have always imported it from.
  */
-export function isMoreMenuItemActive(item: MoreMenuItem): boolean {
-  const routesToCheck: Array<Route> = [
-    item.activeRoute || item.route,
-    ...(item.additionalActiveRoutes || []),
-  ];
-  return routesToCheck.some((route: Route) => {
-    return Navigation.isStartWith(route);
-  });
-}
+export { isMoreMenuItemActive };
 
 export interface ComponentProps {
   items?: NavItem[];
   rightElement?: NavItem;
   moreMenuItems?: MoreMenuItem[];
+  /*
+   * The categories the products menu always shows open: it opens on them,
+   * and they never fold, whatever the browser remembers. Every other
+   * category starts folded to one line (its name, how many products it holds
+   * and what they are called) until the user opens it; search still finds
+   * every product, and the category holding the current page opens by
+   * itself. Leave it unset to show every category open: a short menu has
+   * nothing to fold. See NavBarMenuCatalog.ts.
+   */
+  moreMenuCategoriesAlwaysOpen?: Array<string> | undefined;
   moreMenuTitle?: string; // Title for the more menu (default: "Products")
   moreMenuSearchPlaceholder?: string; // Placeholder for the menu search box
   moreMenuNoResultsText?: string; // Empty-state text when search matches nothing
@@ -368,24 +373,15 @@ const Navbar: FunctionComponent<ComponentProps> = (
                   : undefined
               }
             >
-              {allNavItems.map((item: any) => {
-                return (
-                  <div key={item.id} className="block w-full">
-                    <NavBarItem
-                      id={item.id}
-                      title={item.title}
-                      icon={item.icon}
-                      exact={item.exact ?? false}
-                      route={item.route}
-                      activeRoute={item.activeRoute}
-                      onClick={() => {
-                        return setIsMobileMenuOpen(false);
-                      }}
-                      isRenderedOnMobile={true}
-                    />
-                  </div>
-                );
-              })}
+              <NavBarMobileMenu
+                items={props.items}
+                moreMenuItems={props.moreMenuItems || []}
+                categoriesAlwaysOpen={props.moreMenuCategoriesAlwaysOpen}
+                rightElement={props.rightElement}
+                onNavigate={() => {
+                  return setIsMobileMenuOpen(false);
+                }}
+              />
             </nav>
           </div>
         )}
@@ -544,6 +540,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
         createPortal(
           <NavBarMenuModal
             items={props.moreMenuItems}
+            categoriesAlwaysOpen={props.moreMenuCategoriesAlwaysOpen}
             footer={props.moreMenuFooter}
             searchPlaceholder={props.moreMenuSearchPlaceholder}
             noResultsText={props.moreMenuNoResultsText}

package/UI/Components/Navbar/NavBarCategoryToggle.tsx

@@ -0,0 +1,120 @@
+import Icon from "../Icon/Icon";
+import { Translator } from "../../Utils/TranslateTemplate";
+import useTranslator from "../../Utils/UseTranslator";
+import IconProp from "../../../Types/Icon/IconProp";
+import React, { FunctionComponent, ReactElement, useId } from "react";
+
+export interface ComponentProps {
+  // The category's name as the catalog gives it (already in the reader's language).
+  title: string;
+  // The names of the products inside, for the folded line.
+  itemTitles: ReadonlyArray<string>;
+  isOpen: boolean;
+  onToggle: () => void;
+  // The element holding the category's products, while they are shown.
+  controlsId?: string | undefined;
+  // The heading's id, for a group labelled by it.
+  headingId?: string | undefined;
+  /*
+   * The products menu keeps focus in its search box and moves a cursor over
+   * its rows with aria-activedescendant: the button's id, whether the cursor
+   * is on this row, the row element (to scroll it into view and to find the
+   * row above or below), and the hover that moves the cursor here.
+   */
+  id?: string | undefined;
+  isActive?: boolean | undefined;
+  rowRef?: ((element: HTMLDivElement | null) => void) | undefined;
+  onMouseMove?: (() => void) | undefined;
+  // A mouse click opens the category without taking focus from the search box.
+  keepsFocusOnClick?: boolean | undefined;
+}
+
+/*
+ * A category heading that folds and opens the products under it.
+ *
+ * Folded, it is one line: the name, how many products it holds and what they
+ * are called ("INFRASTRUCTURE 12 Hosts, Kubernetes, Docker, ..."), so people
+ * can tell what is inside without opening it. Open, it is the heading above
+ * the products, with the same chevron as a side-menu section: pointing right
+ * while folded, down while open.
+ *
+ * It is the accordion pattern: a <button aria-expanded> inside the heading,
+ * so the heading's text stays the category's name. The button's ::after
+ * covers the whole row, so a click anywhere on the line opens it, and the
+ * focus ring is drawn around the line rather than around the word.
+ */
+const NavBarCategoryToggle: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const translator: Translator = useTranslator();
+  const summaryId: string = `navbar-category-summary-${useId()}`;
+  const count: number = props.itemTitles.length;
+  const names: string = props.itemTitles.join(", ");
+
+  return (
+    <div
+      ref={props.rowRef}
+      onMouseMove={props.onMouseMove}
+      className={`relative flex min-w-0 items-center gap-2 rounded-lg border px-2 py-2 transition-colors duration-150 ${
+        props.isActive
+          ? "border-indigo-300 bg-indigo-50"
+          : "border-transparent hover:bg-gray-50"
+      }`}
+    >
+      {/*
+       * The name keeps its width and the list of products gives way; only a
+       * name too long for the whole line (a long translation on a narrow
+       * phone) wraps.
+       */}
+      <h3 id={props.headingId} className="flex min-w-0 items-center">
+        <button
+          type="button"
+          id={props.id}
+          aria-expanded={props.isOpen}
+          aria-controls={props.isOpen ? props.controlsId : undefined}
+          aria-describedby={props.isOpen ? undefined : summaryId}
+          onMouseDown={(event: React.MouseEvent<HTMLButtonElement>) => {
+            if (props.keepsFocusOnClick) {
+              event.preventDefault();
+            }
+          }}
+          onClick={props.onToggle}
+          className="text-left text-[11px] font-semibold uppercase leading-4 tracking-[0.1em] text-gray-500 focus:outline-none after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-indigo-500"
+        >
+          {props.title}
+        </button>
+      </h3>
+      {!props.isOpen && (
+        <span id={summaryId} className="flex min-w-0 flex-1 items-center gap-2">
+          <span
+            aria-hidden="true"
+            className="flex-shrink-0 rounded-full bg-gray-100 px-1.5 text-[11px] font-medium tabular-nums leading-4 text-gray-600"
+          >
+            {translator.formatNumber(count)}
+          </span>
+          <span className="sr-only">
+            {translator.translatePlural(
+              {
+                one: "{{count}} product",
+                other: "{{count}} products",
+              },
+              count,
+            )}
+          </span>
+          <span className="truncate text-xs text-gray-500">{names}</span>
+        </span>
+      )}
+      {/* Icon draws an <svg> inside a <div>: the wrapper is the flex item. */}
+      <div className="ml-auto flex flex-shrink-0 items-center">
+        <Icon
+          icon={IconProp.ChevronDown}
+          className={`h-3.5 w-3.5 text-gray-400 transition-transform duration-200 ${
+            props.isOpen ? "rotate-0" : "-rotate-90"
+          }`}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default NavBarCategoryToggle;