@allurereport/web-awesome 3.0.0-beta.3 → 3.0.0-beta.4

package/dist/single/manifest.json

@@ -1,3 +1,3 @@
 {
-  "main.js": "app-57ae0a60.js"
+  "main.js": "app-d31bd53e.js"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-awesome",
-  "version": "3.0.0-beta.3",
+  "version": "3.0.0-beta.4",
   "description": "The static files for Allure Awesome Report",
   "keywords": [
     "allure",
@@ -30,8 +30,8 @@
     "IE 11"
   ],
   "dependencies": {
-    "@allurereport/core-api": "3.0.0-beta.3",
-    "@allurereport/web-commons": "3.0.0-beta.3",
+    "@allurereport/core-api": "3.0.0-beta.4",
+    "@allurereport/web-commons": "3.0.0-beta.4",
     "@preact/signals": "^1.3.0",
     "clsx": "^2.1.1",
     "d3-shape": "^3.2.0",

package/src/assets/scss/_common.scss

@@ -3,6 +3,7 @@
 *::after {
   box-sizing: border-box;
 }
+
 html,
 body,
 div,
@@ -91,6 +92,7 @@ video {
   font: inherit;
   vertical-align: baseline;
 }
+
 /* HTML5 display-role reset for older browsers */
 article,
 aside,
@@ -105,17 +107,21 @@ nav,
 section {
   display: block;
 }
+
 body {
   line-height: 1;
 }
+
 ol,
 ul {
   list-style: none;
 }
+
 blockquote,
 q {
   quotes: none;
 }
+
 blockquote:before,
 blockquote:after,
 q:before,
@@ -123,12 +129,15 @@ q:after {
   content: "";
   content: none;
 }
+
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
+
 body {
   color: var(--on-text-primary);
   background: var(--bg-base-secondary);
   font-family: var(--font-family);
+  -webkit-text-size-adjust: 100%;
 }

package/src/components/app/ReportBody/SortBy.tsx

@@ -1,5 +1,5 @@
 import clsx from "clsx";
-import { ComponentChildren } from "preact";
+import type { ComponentChildren } from "preact";
 import lineChevronDownIcon from "@/assets/svg/line-arrows-chevron-down.svg";
 import sortAscIcon from "@/assets/svg/line-arrows-sort-line-asc.svg";
 import sortDescIcon from "@/assets/svg/line-arrows-sort-line-desc.svg";
@@ -92,7 +92,7 @@ export const SortBy = () => {
                 <Menu.Item
                   closeMenuOnClick={false}
                   onClick={onClick}
-                  leadingIcon={direction == "asc" ? sortAscIcon.id : sortDescIcon.id}
+                  leadingIcon={direction === "asc" ? sortAscIcon.id : sortDescIcon.id}
                   rightSlot={
                     <BtnWrapper>
                       <DropdownButton

package/src/components/app/ReportHeader/index.tsx

@@ -19,7 +19,7 @@ export const ReportHeader = () => {
       <div className={styles["report-wrapper"]}>
         <ReportHeaderLogo />
         <div className={styles["report-wrapper-text"]}>
-          <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]}>
+          <Heading size={"s"} tag={"h2"} className={styles["wrapper-header"]} data-testid="report-title">
             {reportName}
           </Heading>
           <Text type="paragraph" size="m" className={styles["report-date"]}>

package/src/components/commons/Menu/index.tsx

@@ -1,12 +1,29 @@
 import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { clsx } from "clsx";
 import type { ComponentChildren, VNode } from "preact";
-import { useEffect, useRef, useState } from "preact/hooks";
+import { createContext } from "preact";
+import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import check from "@/assets/svg/line-general-check.svg";
 import { SvgIcon } from "@/components/commons/SvgIcon";
 import { Text } from "@/components/commons/Typography";
 import * as styles from "./styles.scss";
 
+type MenuContextT = {
+  setIsOpened: (isOpened: boolean) => void;
+};
+
+const MenuContext = createContext<MenuContextT | null>(null);
+
+export const useMenuContext = () => {
+  const context = useContext(MenuContext);
+
+  if (!context) {
+    throw new Error("useMenuContext must be used within a Menu");
+  }
+
+  return context;
+};
+
 export const Menu = (props: {
   children: ComponentChildren;
   isInitialOpened?: boolean;
@@ -96,20 +113,26 @@ export const Menu = (props: {
   }, [menuRef.current, triggerRef.current]);
 
   return (
-    <>
-      {typeof menuTrigger === "function" && (
-        <MenuTriggerWrapper ref={triggerRef}>
-          {menuTrigger({
-            isOpened,
-            onClick: handleTriggerClick,
-            setIsOpened,
-          })}
-        </MenuTriggerWrapper>
-      )}
-      <div ref={menuRef}>
-        {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
-      </div>
-    </>
+    <MenuContext.Provider
+      value={{
+        setIsOpened,
+      }}
+    >
+      <>
+        {typeof menuTrigger === "function" && (
+          <MenuTriggerWrapper ref={triggerRef}>
+            {menuTrigger({
+              isOpened,
+              onClick: handleTriggerClick,
+              setIsOpened,
+            })}
+          </MenuTriggerWrapper>
+        )}
+        <div ref={menuRef}>
+          {isOpened && <aside className={clsx(styles.menu, styles[`size-${size}`])}>{children}</aside>}
+        </div>
+      </>
+    </MenuContext.Provider>
   );
 };
 
@@ -128,6 +151,7 @@ type ItemProps = {
 };
 
 Menu.Item = (props: ItemProps) => {
+  const { setIsOpened } = useMenuContext();
   const { children, onClick, leadingIcon, rightSlot, ariaLabel, closeMenuOnClick = true } = props;
   const isInteractive = typeof onClick === "function";
   const hasLeadingIcon = typeof leadingIcon === "string";
@@ -135,6 +159,7 @@ Menu.Item = (props: ItemProps) => {
   const handleItemClick = (e: MouseEvent) => {
     if (isInteractive && closeMenuOnClick) {
       e.stopPropagation();
+      setIsOpened(false);
     }
 
     if (isInteractive) {

package/src/components/commons/SearchBox/index.tsx

@@ -50,6 +50,7 @@ export const SearchBox = (props: Props) => {
         value={localValue}
         name="search"
         autocomplete="off"
+	data-testid="search-input"
       />
       {showClear && (
         <div className={styles.clearButton}>

package/src/components/commons/SuccessRatePieChart/styles.scss

@@ -8,5 +8,4 @@
 
 .chart {
   position: relative;
-  display: flex;
 }

package/src/components/commons/Toggle/index.tsx

@@ -23,7 +23,7 @@ export const Toggle = (props: Props) => {
       type="checkbox"
       checked={value}
       aria-label={label}
-      onChange={handleChange}
+      onToggle={handleChange}
     />
   );
 };

package/src/utils/capitalize.ts

@@ -1,4 +1,6 @@
-export function capitalize(str: string) {
-  if (!str) return;
+export const capitalize = (str: string) => {
+  if (!str) {
+    return;
+  }
   return str.charAt(0).toLocaleUpperCase() + str.slice(1);
-}
+};