@saleor/macaw-ui 0.7.0 → 0.7.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "CC-BY-4.0",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/Accordion/Accordion.tsx

@@ -1,30 +1,30 @@
-import { default as MuiAccordion } from "@material-ui/core/Accordion"
-import { default as MuiAccordionSummary, AccordionSummaryProps } from "@material-ui/core/AccordionSummary"
-import { default as MuiAAccordionDetails } from "@material-ui/core/AccordionDetails"
+import { default as MuiAccordion } from "@material-ui/core/Accordion";
+import {
+  default as MuiAccordionSummary,
+  AccordionSummaryProps,
+} from "@material-ui/core/AccordionSummary";
+import { default as MuiAAccordionDetails } from "@material-ui/core/AccordionDetails";
 
 import { ChevronIcon } from "../icons";
 import React from "react";
 import useStyles from "./styles";
 
-
-const _AccordionSmmary: React.FC<AccordionSummaryProps> = React.forwardRef((props, ref) => {
-  const classes = useStyles();
-
-  return (
-    <MuiAccordionSummary
-      ref={ref}
-      expandIcon={<ChevronIcon />}
-      classes={classes}
-      {...props}
-    />
-  );
-}
+const _AccordionSmmary: React.FC<AccordionSummaryProps> = React.forwardRef(
+  (props, ref) => {
+    const classes = useStyles();
+
+    return (
+      <MuiAccordionSummary
+        ref={ref}
+        expandIcon={<ChevronIcon data-test-id="expand-icon" />}
+        classes={classes}
+        {...props}
+      />
+    );
+  }
 );
 _AccordionSmmary.displayName = "AccordionSumary";
 
-
-export const Accordion = MuiAccordion
-export const AccordionSummary = _AccordionSmmary
-export const AccordionDetails = MuiAAccordionDetails
-
-
+export const Accordion = MuiAccordion;
+export const AccordionSummary = _AccordionSmmary;
+export const AccordionDetails = MuiAAccordionDetails;

package/src/Alert/Alert.tsx

@@ -66,7 +66,7 @@ export const Alert: React.FC<AlertProps> = ({
                 hoverOutline={false}
                 variant="secondary"
                 onClick={() => setVisible(false)}
-                data-test="close"
+                data-test-id="close"
               >
                 <CloseIcon />
               </IconButton>

package/src/Alert/AlertBase.tsx

@@ -27,7 +27,7 @@ export const AlertBase: React.FC<AlertBaseProps> = ({
         [classes.warning]: variant === "warning",
         [classes.success]: variant === "success",
       })}
-      data-test="alert"
+      data-test-id="alert"
       {...rest}
     >
       <CardContent>{children}</CardContent>

package/src/DialogHeader/DialogHeader.tsx

@@ -30,7 +30,7 @@ export const DialogHeader: React.FC<DialogHeaderProps> = ({
           className={classes.button}
           onClick={onClose}
           aria-label="Close modal"
-          data-test="close"
+          data-test-id="close"
         >
           <CloseIcon />
         </button>

package/src/Notification/Notification.tsx

@@ -5,8 +5,14 @@ import React, { useState } from "react";
 
 import { Button } from "../Button";
 import { IconButton } from "../IconButton";
-import { CloseIcon, ExpandIcon } from "../icons";
-import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons";
+import {
+  CloseIcon,
+  CompleteIcon,
+  ExpandIcon,
+  InfoIcon,
+  NotAllowedIcon,
+  WarningIcon,
+} from "../icons";
 import useStyles from "./styles";
 import type { NotificationProps, NotificationType } from "./types";
 
@@ -42,7 +48,7 @@ export const Notification: React.FC<NotificationProps> = ({
   return (
     <div
       className={clsx(classes.snackbarContainer, className)}
-      data-test="notification"
+      data-test-id="notification"
       data-test-type={type}
       {...rest}
     >
@@ -61,7 +67,10 @@ export const Notification: React.FC<NotificationProps> = ({
           [classes.warning]: type === "warning",
         })}
         message={
-          <div className={classes.container}>
+          <div
+            className={classes.container}
+            data-test-id="notification-message"
+          >
             <div>
               <Icon className={classes.icon} type={type} />
             </div>
@@ -79,20 +88,24 @@ export const Notification: React.FC<NotificationProps> = ({
           </div>
         }
         action={[
-          <div key="actions">
+          <div key="actions" data-test-id="notification-actions">
             {!!action && (
               <Button
                 className={classes.actionBtn}
                 key="action"
                 variant="tertiary"
                 onClick={action.onClick}
-                data-test="button-action"
+                data-test-id="button-action"
               >
                 {action.label}
               </Button>
             )}
           </div>,
-          <div key="api-action" className={classes.apiMessageAction}>
+          <div
+            key="api-action"
+            className={classes.apiMessageAction}
+            data-test-id="notification-api-action"
+          >
             {!!apiMessage && (
               <>
                 <Typography variant="body1">
@@ -122,7 +135,7 @@ export const Notification: React.FC<NotificationProps> = ({
             hoverOutline={false}
             variant="secondary"
             className={classes.closeBtn}
-            data-test="close"
+            data-test-id="close"
           >
             <CloseIcon />
           </IconButton>,

package/src/Pagination/PaginationActions.tsx

@@ -51,7 +51,7 @@ export const PaginationActions = <BProps,>({
         disableRipple
         onClick={onPreviousPage}
         disabled={previousDisabled}
-        data-test="button-pagination-back"
+        data-test-id="button-pagination-back"
         aria-label="previous page"
         {...prevIconButtonProps}
       >
@@ -66,7 +66,7 @@ export const PaginationActions = <BProps,>({
         disableRipple
         onClick={onNextPage}
         disabled={nextDisabled}
-        data-test="button-pagination-next"
+        data-test-id="button-pagination-next"
         aria-label="next page"
         {...nextIconButtonProps}
       >

package/src/Savebar/Savebar.tsx

@@ -46,7 +46,7 @@ export const Savebar: React.FC<SavebarProps> = ({
             error
             variant="primary"
             onClick={onDelete}
-            data-test="button-bar-delete"
+            data-test-id="button-bar-delete"
           >
             {labels.delete}
           </Button>
@@ -58,7 +58,7 @@ export const Savebar: React.FC<SavebarProps> = ({
           color="text"
           variant="secondary"
           onClick={onCancel}
-          data-test="button-bar-cancel"
+          data-test-id="button-bar-cancel"
         >
           {labels.cancel}
         </Button>
@@ -69,7 +69,7 @@ export const Savebar: React.FC<SavebarProps> = ({
           labels={labels}
           onClick={onSubmit}
           transitionState={state}
-          data-test="button-bar-confirm"
+          data-test-id="button-bar-confirm"
         />
       </ButtonTooltipDecorator>
     </ActionBar>

package/src/Sidebar/MenuItem.tsx

@@ -191,8 +191,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     >
       <span
         className={classes.menuItemBtn}
-        data-test="menu-item-label"
-        data-test-id={menuItem.id}
+        data-test-id={`menu-item-label-${menuItem.id}`}
       >
         {menuItem.iconSrc && (
           <SVG className={classes.icon} src={menuItem.iconSrc} />
@@ -217,7 +216,12 @@ export const MenuItem: React.FC<MenuItemProps> = ({
           transition
           placement="right-start"
         >
-          <ClickAwayListener onClickAway={() => setOpen(false)}>
+          <ClickAwayListener
+            onClickAway={() => setOpen(false)}
+            // https://github.com/mui/material-ui/issues/17402
+            mouseEvent="onMouseDown"
+            touchEvent="onTouchStart"
+          >
             <Paper className={classes.paper}>
               {menuItem.children.map((subMenuItem) => {
                 if (subMenuItem.url || subMenuItem.children) {
@@ -232,8 +236,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
                       onClick={(event: React.MouseEvent) =>
                         handleClick(event, subMenuItem)
                       }
-                      data-test="submenu-item-label"
-                      data-test-id={subMenuItem.id}
+                      data-test-id={`submenu-item-label-${subMenuItem.id}`}
                       selected={activeId === subMenuItem.id}
                       {...linkProps}
                     >

package/src/Sidebar/fixtures.ts

@@ -41,14 +41,35 @@ export const menu: SidebarMenuItem[] = [
         ariaLabel: "Menu 2.4",
         id: "menu24",
         label: "Menu 24 - external",
-        url: "http://example.com",
+        url: "http://example.com/menu24",
         external: true,
       },
       {
         ariaLabel: "Menu 2.5",
         id: "menu25",
         label: "Menu 25 - external",
-        url: "http://example.com",
+        url: "http://example.com/menu25",
+        external: true,
+      },
+    ],
+  },
+  {
+    ariaLabel: "Menu 3",
+    id: "menu3",
+    label: "Menu 3",
+    iconSrc: homeIcon,
+    children: [
+      {
+        ariaLabel: "Menu 3.1",
+        id: "menu31",
+        label: "Menu 31",
+        url: "/section31/",
+      },
+      {
+        ariaLabel: "Menu 3.2",
+        id: "menu32",
+        label: "Menu 32 - external",
+        url: "http://example.com/menu32",
         external: true,
       },
     ],

package/src/SidebarDrawer/MenuItemBtn.tsx

@@ -24,8 +24,7 @@ export const MenuItemBtn: React.FC<MenuItemBtnProps> = ({
   return (
     <Component
       className={classes.menuItemBtn}
-      data-test="menu-item-label"
-      data-test-id={menuItem.id}
+      data-test-id={`menu-item-label-${menuItem.id}`}
       onClick={() => onClick(menuItem)}
       {...linkProps}
     >

package/src/UserChipMenu/UserChipMenu.tsx

@@ -41,7 +41,7 @@ export const UserChipMenu: React.FC<UserChipProps> = ({
         className={classes.userChip}
         ref={anchor}
         onClick={() => setMenuState(!isMenuOpened)}
-        data-test="userMenu"
+        data-test-id="userMenu"
         state={isMenuOpened ? "active" : "default"}
         {...props}
       >