@mercurjs/admin 2.2.0-canary.15 → 2.2.0-canary.17

package/dist/chunk-AWLDIHXR.js

@@ -0,0 +1,204 @@
+import {
+  ActionMenu
+} from "./chunk-BDGZ4EQO.js";
+import {
+  useUpdateProduct
+} from "./chunk-M2E3PKA4.js";
+
+// src/pages/products/product-detail/components/product-media-section/product-media-section.tsx
+import { PencilSquare, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Container,
+  Heading,
+  Text,
+  Tooltip,
+  clx,
+  usePrompt
+} from "@medusajs/ui";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductMediaSection = ({
+  product,
+  readOnly = false
+}) => {
+  const { t } = useTranslation();
+  const prompt = usePrompt();
+  const [selection, setSelection] = useState({});
+  const media = getMedia(product);
+  const handleCheckedChange = (id) => {
+    setSelection((prev) => {
+      if (prev[id]) {
+        const { [id]: _, ...rest } = prev;
+        return rest;
+      } else {
+        return { ...prev, [id]: true };
+      }
+    });
+  };
+  const { mutateAsync } = useUpdateProduct(product.id);
+  const handleDelete = async () => {
+    const ids = Object.keys(selection);
+    const includingThumbnail = ids.some(
+      (id) => media.find((m) => m.id === id)?.isThumbnail
+    );
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: includingThumbnail ? t("products.media.deleteWarningWithThumbnail", {
+        count: ids.length
+      }) : t("products.media.deleteWarning", {
+        count: ids.length
+      }),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    const mediaToKeep = product.images?.filter((i) => !ids.includes(i.id)).map((i) => ({ url: i.url }));
+    await mutateAsync(
+      {
+        images: mediaToKeep,
+        thumbnail: includingThumbnail ? "" : void 0
+      },
+      {
+        onSuccess: () => {
+          setSelection({});
+        }
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Container, { className: "divide-y p-0", "data-testid": "product-media-section", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4", "data-testid": "product-media-header", children: [
+      /* @__PURE__ */ jsx(Heading, { level: "h2", "data-testid": "product-media-title", children: t("products.media.label") }),
+      !readOnly && /* @__PURE__ */ jsx(
+        ActionMenu,
+        {
+          groups: [
+            {
+              actions: [
+                {
+                  label: t("actions.edit"),
+                  to: "media?view=edit",
+                  icon: /* @__PURE__ */ jsx(PencilSquare, {})
+                }
+              ]
+            }
+          ],
+          "data-testid": "product-media-action-menu"
+        }
+      )
+    ] }),
+    media.length > 0 ? /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-4 px-6 py-4", "data-testid": "product-media-grid", children: media.map((i, index) => {
+      const isSelected = selection[i.id];
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clx(
+            "shadow-elevation-card-rest transition-fg group relative aspect-square size-full overflow-hidden rounded-[8px]",
+            {
+              "hover:shadow-elevation-card-hover cursor-pointer": !readOnly
+            }
+          ),
+          "data-testid": `product-media-item-${i.id}`,
+          children: [
+            !readOnly && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clx(
+                  "transition-fg invisible absolute right-2 top-2 opacity-0 group-hover:visible group-hover:opacity-100",
+                  {
+                    "visible opacity-100": isSelected
+                  }
+                ),
+                "data-testid": `product-media-checkbox-container-${i.id}`,
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: selection[i.id] || false,
+                    onCheckedChange: () => handleCheckedChange(i.id),
+                    "data-testid": `product-media-checkbox-${i.id}`
+                  }
+                )
+              }
+            ),
+            i.isThumbnail && /* @__PURE__ */ jsx("div", { className: "absolute left-2 top-2", "data-testid": `product-media-thumbnail-badge-${i.id}`, children: /* @__PURE__ */ jsx(Tooltip, { content: t("fields.thumbnail"), children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }) }),
+            readOnly ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover",
+                "data-testid": `product-media-image-${i.id}`
+              }
+            ) : /* @__PURE__ */ jsx(Link, { to: `media`, state: { curr: index }, "data-testid": `product-media-link-${i.id}`, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: i.url,
+                alt: product.title,
+                className: "size-full object-cover",
+                "data-testid": `product-media-image-${i.id}`
+              }
+            ) })
+          ]
+        },
+        i.id
+      );
+    }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-y-4 pb-8 pt-6", "data-testid": "product-media-empty-state", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            "data-testid": "product-media-empty-state-header",
+            children: t("products.media.emptyState.header")
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { size: "small", className: "text-ui-fg-muted", "data-testid": "product-media-empty-state-description", children: t("products.media.emptyState.description") })
+      ] }),
+      !readOnly && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", asChild: true, "data-testid": "product-media-empty-state-button", children: /* @__PURE__ */ jsx(Link, { to: "media?view=edit", "data-testid": "product-media-empty-state-link", children: t("products.media.emptyState.action") }) })
+    ] }),
+    !readOnly && /* @__PURE__ */ jsx(CommandBar, { open: !!Object.keys(selection).length, "data-testid": "product-media-command-bar", children: /* @__PURE__ */ jsxs(CommandBar.Bar, { "data-testid": "product-media-command-bar-bar", children: [
+      /* @__PURE__ */ jsx(CommandBar.Value, { "data-testid": "product-media-command-bar-value", children: t("general.countSelected", {
+        count: Object.keys(selection).length
+      }) }),
+      /* @__PURE__ */ jsx(CommandBar.Seperator, { "data-testid": "product-media-command-bar-separator" }),
+      /* @__PURE__ */ jsx(
+        CommandBar.Command,
+        {
+          action: handleDelete,
+          label: t("actions.delete"),
+          shortcut: "d",
+          "data-testid": "product-media-command-bar-delete"
+        }
+      )
+    ] }) })
+  ] });
+};
+var getMedia = (product) => {
+  const { images = [], thumbnail } = product;
+  const media = images.map((image) => ({
+    id: image.id,
+    url: image.url,
+    isThumbnail: image.url === thumbnail
+  }));
+  if (thumbnail && !media.some((mediaItem) => mediaItem.url === thumbnail)) {
+    media.unshift({
+      id: "img_thumbnail",
+      url: thumbnail,
+      isThumbnail: true
+    });
+  }
+  return media;
+};
+
+export {
+  ProductMediaSection
+};

package/dist/{chunk-D2VXOF46.js → chunk-B4K7H6DH.js}

@@ -1,12 +1,12 @@
 import {
   reservationItemsQueryKeys
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   ordersQueryKeys
 } from "./chunk-VT6QIVZW.js";
 import {
   inventoryItemsQueryKeys
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";

package/dist/{chunk-QUPUWR42.js → chunk-B5OMHYJ5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-PYDRHQTY.js";
 import {
   useProductCategories
-} from "./chunk-DN2K5EAH.js";
+} from "./chunk-KYFWVLWO.js";
 import {
   TextSkeleton
 } from "./chunk-INNFZYX2.js";
@@ -104,7 +104,8 @@ var CategoryCombobox = forwardRef(({ value, onChange, className, isSingleSelect,
         innerRef.current?.focus();
       };
     },
-    [value, onChange, isSingleSelect]
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [value, onChange, isSingleSelect, handleOpenChange]
   );
   function handleOpenChange(open2) {
     if (!open2) {
@@ -512,7 +513,8 @@ var SingleCategoryCombobox = forwardRef2(({ value, onChange, className, ...props
         innerRef.current?.focus();
       };
     },
-    [value, onChange]
+    // oxlint-disable-next-line react-hooks/exhaustive-deps
+    [value, onChange, handleOpenChange]
   );
   function handleOpenChange(open2) {
     if (!open2) {
@@ -673,7 +675,6 @@ var SingleCategoryCombobox = forwardRef2(({ value, onChange, className, ...props
               "button",
               {
                 "data-active": focusedIndex === 0,
-                role: "button",
                 className: clx2(
                   "transition-fg grid w-full appearance-none grid-cols-[20px_1fr] items-center justify-center gap-2 rounded-md px-2 py-1.5 text-start outline-none",
                   "data-[active=true]:bg-ui-bg-field-hover"
@@ -708,6 +709,7 @@ var SingleCategoryCombobox = forwardRef2(({ value, onChange, className, ...props
                       "data-active": showLevelUp ? focusedIndex === index + 1 : focusedIndex === index,
                       type: "button",
                       role: "option",
+                      "aria-selected": value === option.value,
                       className: clx2(
                         "grid h-full w-full appearance-none grid-cols-[20px_1fr] items-center gap-2 overflow-hidden rounded-md px-2 py-1.5 text-start outline-none",
                         "data-[active=true]:bg-ui-bg-field-hover"

package/dist/{chunk-EMQP2CNF.js → chunk-D77BYNTQ.js}

@@ -17,7 +17,7 @@ import {
 import {
   useDeleteReservationItem,
   useReservationItems
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   useStockLocations
 } from "./chunk-EPHVGD5Z.js";

package/dist/{chunk-54RTJBYO.js → chunk-DGCPYCHU.js}

@@ -2,74 +2,20 @@ import {
   useDate
 } from "./chunk-UZWFZMOX.js";
 
-// src/components/data-table/helpers/general/use-data-table-date-columns.tsx
-import {
-  createDataTableColumnHelper,
-  Tooltip
-} from "@medusajs/ui";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import { jsx } from "react/jsx-runtime";
-var columnHelper = createDataTableColumnHelper();
-var useDataTableDateColumns = () => {
-  const { t } = useTranslation();
-  const { getFullDate } = useDate();
-  return useMemo(() => {
-    return [
-      columnHelper.accessor("created_at", {
-        header: t("fields.createdAt"),
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({
-                date: row.original.created_at,
-                includeTime: true
-              }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.created_at }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: t("filters.sorting.dateAsc"),
-        sortDescLabel: t("filters.sorting.dateDesc")
-      }),
-      columnHelper.accessor("updated_at", {
-        header: t("fields.updatedAt"),
-        cell: ({ row }) => {
-          return /* @__PURE__ */ jsx(
-            Tooltip,
-            {
-              content: getFullDate({
-                date: row.original.updated_at,
-                includeTime: true
-              }),
-              children: /* @__PURE__ */ jsx("span", { children: getFullDate({ date: row.original.updated_at }) })
-            }
-          );
-        },
-        enableSorting: true,
-        sortAscLabel: t("filters.sorting.dateAsc"),
-        sortDescLabel: t("filters.sorting.dateDesc")
-      })
-    ];
-  }, [t, getFullDate]);
-};
-
 // src/components/data-table/helpers/general/use-data-table-date-filters.tsx
 import { createDataTableFilterHelper } from "@medusajs/ui";
 import { subDays, subMonths } from "date-fns";
-import { useMemo as useMemo2 } from "react";
-import { useTranslation as useTranslation2 } from "react-i18next";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 var filterHelper = createDataTableFilterHelper();
 var useDateFilterOptions = () => {
-  const { t } = useTranslation2();
-  const today = useMemo2(() => {
+  const { t } = useTranslation();
+  const today = useMemo(() => {
     const date = /* @__PURE__ */ new Date();
     date.setHours(0, 0, 0, 0);
     return date;
   }, []);
-  return useMemo2(() => {
+  return useMemo(() => {
     return [
       {
         label: t("filters.date.today"),
@@ -109,10 +55,10 @@ var useDateFilterOptions = () => {
   }, [today, t]);
 };
 var useDataTableDateFilters = (disableRangeOption) => {
-  const { t } = useTranslation2();
+  const { t } = useTranslation();
   const { getFullDate } = useDate();
   const dateFilterOptions = useDateFilterOptions();
-  const rangeOptions = useMemo2(() => {
+  const rangeOptions = useMemo(() => {
     if (disableRangeOption) {
       return {
         disableRangeOption: true
@@ -125,7 +71,7 @@ var useDataTableDateFilters = (disableRangeOption) => {
       options: dateFilterOptions
     };
   }, [disableRangeOption, t, dateFilterOptions]);
-  return useMemo2(() => {
+  return useMemo(() => {
     return [
       filterHelper.accessor("created_at", {
         type: "date",
@@ -148,6 +94,5 @@ var useDataTableDateFilters = (disableRangeOption) => {
 };
 
 export {
-  useDataTableDateColumns,
   useDataTableDateFilters
 };

package/dist/{chunk-QLEGHL2Q.js → chunk-EB6ZFOTO.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-OMBP3YSV.js";
 import {
   useProductTableFilters
-} from "./chunk-JSH7JEKY.js";
+} from "./chunk-RZ5SFALB.js";
 import {
   useProductTableQuery
 } from "./chunk-LYZDVZWA.js";
@@ -24,7 +24,7 @@ import {
   useBatchProducts,
   useDeleteProduct,
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/products/product-list/product-list.tsx
 import { Children as Children2 } from "react";

package/dist/{chunk-W3FDZPPF.js → chunk-EOLSQKPV.js}

@@ -27,7 +27,7 @@ import {
 import {
   useCancelOrderEdit,
   useConfirmOrderEdit
-} from "./chunk-D2VXOF46.js";
+} from "./chunk-B4K7H6DH.js";
 import {
   getPaymentsFromOrder,
   getReservationsLimitCount
@@ -88,7 +88,7 @@ import {
 } from "./chunk-LJDGVBOQ.js";
 import {
   useReservationItems
-} from "./chunk-P5XVG4PY.js";
+} from "./chunk-XGUUM3S6.js";
 import {
   useOrderGroupByOrderId
 } from "./chunk-VYMODH6P.js";

package/dist/{chunk-2OF7GB7J.js → chunk-ESZN3ELN.js}

@@ -14,7 +14,7 @@ import {
   TabbedForm,
   defineTabMeta,
   useTabbedForm
-} from "./chunk-4LXBQTFN.js";
+} from "./chunk-FREUYHMS.js";
 import {
   RouteFocusModal,
   useRouteModal
@@ -25,7 +25,7 @@ import {
 import {
   useCreateProductCategory,
   useProductCategories
-} from "./chunk-DN2K5EAH.js";
+} from "./chunk-KYFWVLWO.js";
 import {
   useDocumentDirection
 } from "./chunk-Y7QKP6QU.js";

package/dist/{chunk-BPCU5QJE.js → chunk-FBD7WJPO.js}

@@ -27,7 +27,7 @@ import {
   useApiKeys,
   useDeleteApiKey,
   useRevokeApiKey
-} from "./chunk-NJP3DEE5.js";
+} from "./chunk-FJHAAROU.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";

package/dist/{chunk-NJP3DEE5.js → chunk-FJHAAROU.js}

@@ -1,6 +1,6 @@
 import {
   salesChannelsQueryKeys
-} from "./chunk-6FHQCLHQ.js";
+} from "./chunk-OKWGPKVK.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";

package/dist/{chunk-N4GJRJF5.js → chunk-FJRNNDZS.js}

@@ -1,6 +1,6 @@
 import {
   getPromotionStatus
-} from "./chunk-DJWOIRLV.js";
+} from "./chunk-RUSMGNQ6.js";
 import {
   TextCell,
   TextHeader

package/dist/{chunk-4LXBQTFN.js → chunk-FREUYHMS.js}

@@ -1,6 +1,6 @@
 import {
   KeyboundForm
-} from "./chunk-U2ZFCAPX.js";
+} from "./chunk-SITRHMZZ.js";
 import {
   RouteFocusModal
 } from "./chunk-FWJLS7XD.js";

package/dist/{chunk-PASEZJC7.js → chunk-FYCIGKVG.js}

@@ -32,7 +32,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/tax-regions/common/components/tax-rate-line/tax-rate-line.tsx
 import { PencilSquare, Trash } from "@medusajs/icons";

package/dist/{chunk-5AZCIOS4.js → chunk-GQUGCSJV.js}

@@ -15,13 +15,13 @@ import {
   useCombinedRefs,
   useDataGridCell,
   useDataGridCellError
-} from "./chunk-KT7X72J4.js";
+} from "./chunk-HHW4PPNH.js";
 import {
   currencies
 } from "./chunk-IQPN4PZJ.js";
 import {
   KeyboundForm
-} from "./chunk-U2ZFCAPX.js";
+} from "./chunk-SITRHMZZ.js";
 import {
   StackedFocusModal
 } from "./chunk-FWJLS7XD.js";

package/dist/{chunk-KT7X72J4.js → chunk-HHW4PPNH.js}

@@ -3580,6 +3580,7 @@ var DataGridRowSkeleton = ({
               "div",
               {
                 role: "gridcell",
+                "aria-label": "Cell input",
                 style: { width: vc.size },
                 className: "relative flex items-center border-b border-r p-0 outline-none",
                 children: /* @__PURE__ */ jsx9("div", { className: "flex h-full w-full items-center px-4", children: /* @__PURE__ */ jsx9("div", { className: "bg-ui-bg-component h-4 w-3/4 animate-pulse rounded" }) })

package/dist/{chunk-4GFS57XI.js → chunk-HLJ24XVH.js}

@@ -23,7 +23,7 @@ import {
 } from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-H3MAUKL7.js";
+} from "./chunk-M2E3PKA4.js";
 
 // src/pages/commission-rates/commission-rate-detail/commission-rate-detail.tsx
 import { Children } from "react";

package/dist/{chunk-72PLRAWM.js → chunk-IBX52HBP.js}

@@ -1,7 +1,7 @@
 import {
   usePromotionTableColumns,
   usePromotionTableQuery
-} from "./chunk-N4GJRJF5.js";
+} from "./chunk-FJRNNDZS.js";
 import {
   usePromotionTableFilters
 } from "./chunk-S2WEYEQR.js";