@mercurjs/admin 2.1.6 → 2.2.0-canary.11

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

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

package/dist/{chunk-HKDFWQ6Q.js → chunk-NQEXDLYH.js}

@@ -1,9 +1,24 @@
 import {
+  DataTableSearch,
   useSelectedParams
-} from "./chunk-SESTTUVM.js";
+} from "./chunk-YN3FGNJM.js";
+import {
+  DataTableOrderBy
+} from "./chunk-KAZ5BYTQ.js";
+import {
+  NoRecords,
+  NoResults
+} from "./chunk-634XVU3D.js";
 import {
   useDate
 } from "./chunk-UZWFZMOX.js";
+import {
+  TableSkeleton
+} from "./chunk-INNFZYX2.js";
+
+// src/components/table/data-table/data-table.tsx
+import { clx as clx8 } from "@medusajs/ui";
+import { memo } from "react";
 
 // src/components/table/data-table/data-table-filter/data-table-filter.tsx
 import { Button, clx as clx6 } from "@medusajs/ui";
@@ -1091,6 +1106,449 @@ var getInitialFilters = ({
   return activeFilters;
 };
 
+// src/components/table/data-table/data-table-query/data-table-query.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var DataTableQuery = ({
+  search,
+  orderBy,
+  filters,
+  prefix
+}) => {
+  return (search || orderBy || filters || prefix) && /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-x-4 px-6 py-4", children: [
+    /* @__PURE__ */ jsx7("div", { className: "w-full max-w-[60%]", children: filters && filters.length > 0 && /* @__PURE__ */ jsx7(DataTableFilter, { filters, prefix }) }),
+    /* @__PURE__ */ jsxs7("div", { className: "flex shrink-0 items-center gap-x-2", children: [
+      search && /* @__PURE__ */ jsx7(
+        DataTableSearch,
+        {
+          prefix,
+          autofocus: search === "autofocus"
+        }
+      ),
+      orderBy && /* @__PURE__ */ jsx7(DataTableOrderBy, { keys: orderBy, prefix })
+    ] })
+  ] });
+};
+
+// src/components/table/data-table/data-table-root/data-table-root.tsx
+import { CommandBar, Table, clx as clx7 } from "@medusajs/ui";
+import {
+  flexRender
+} from "@tanstack/react-table";
+import {
+  Fragment,
+  useEffect as useEffect4,
+  useRef as useRef2,
+  useState as useState6
+} from "react";
+import { useTranslation as useTranslation6 } from "react-i18next";
+import { Link } from "react-router-dom";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataTableRoot = ({
+  table,
+  columns,
+  pagination,
+  navigateTo,
+  commands,
+  count = 0,
+  noResults = false,
+  noHeader = false,
+  layout = "fit"
+}) => {
+  const { t: t2 } = useTranslation6();
+  const [showStickyBorder, setShowStickyBorder] = useState6(false);
+  const scrollableRef = useRef2(null);
+  const hasSelect = columns.find((c) => c.id === "select");
+  const hasActions = columns.find((c) => c.id === "actions");
+  const hasCommandBar = commands && commands.length > 0;
+  const rowSelection = table.getState().rowSelection;
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const colCount = columns.length - (hasSelect ? 1 : 0) - (hasActions ? 1 : 0);
+  const colWidth = 100 / colCount;
+  const handleHorizontalScroll = (e) => {
+    const scrollLeft = e.currentTarget.scrollLeft;
+    if (scrollLeft > 0) {
+      setShowStickyBorder(true);
+    } else {
+      setShowStickyBorder(false);
+    }
+  };
+  const handleAction = async (action) => {
+    await action(rowSelection).then(() => {
+      table.resetRowSelection();
+    });
+  };
+  useEffect4(() => {
+    scrollableRef.current?.scroll({ top: 0, left: 0 });
+  }, [pageIndex]);
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: clx7("flex w-full flex-col overflow-hidden", {
+        "flex flex-1 flex-col": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsx8(
+          "div",
+          {
+            ref: scrollableRef,
+            onScroll: handleHorizontalScroll,
+            className: clx7("w-full", {
+              "min-h-0 flex-grow overflow-auto": layout === "fill",
+              "overflow-x-auto": layout === "fit"
+            }),
+            children: !noResults ? /* @__PURE__ */ jsxs8(Table, { className: "relative w-full", children: [
+              !noHeader && /* @__PURE__ */ jsx8(Table.Header, { className: "border-t-0", children: table.getHeaderGroups().map((headerGroup) => {
+                return /* @__PURE__ */ jsx8(
+                  Table.Row,
+                  {
+                    className: clx7({
+                      "relative border-b-0 [&_th:last-of-type]:w-[1%] [&_th:last-of-type]:whitespace-nowrap": hasActions,
+                      "[&_th:first-of-type]:w-[1%] [&_th:first-of-type]:whitespace-nowrap": hasSelect
+                    }),
+                    children: headerGroup.headers.map((header, index) => {
+                      const isActionHeader = header.id === "actions";
+                      const isSelectHeader = header.id === "select";
+                      const isSpecialHeader = isActionHeader || isSelectHeader;
+                      const firstHeader = headerGroup.headers.findIndex(
+                        (h) => h.id !== "select"
+                      );
+                      const isFirstHeader = firstHeader !== -1 ? header.id === headerGroup.headers[firstHeader].id : index === 0;
+                      const isStickyHeader = isSelectHeader || isFirstHeader;
+                      return /* @__PURE__ */ jsx8(
+                        Table.HeaderCell,
+                        {
+                          "data-table-header-id": header.id,
+                          style: {
+                            width: !isSpecialHeader ? `${colWidth}%` : void 0
+                          },
+                          className: clx7({
+                            "bg-ui-bg-subtle sticky start-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isStickyHeader,
+                            "start-[68px]": isStickyHeader && hasSelect && !isSelectHeader,
+                            "after:bg-ui-border-base": showStickyBorder && isStickyHeader && !isSpecialHeader
+                          }),
+                          children: flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )
+                        },
+                        header.id
+                      );
+                    })
+                  },
+                  headerGroup.id
+                );
+              }) }),
+              /* @__PURE__ */ jsx8(Table.Body, { className: "border-b-0", children: table.getRowModel().rows.map((row) => {
+                const to = navigateTo ? navigateTo(row) : void 0;
+                const isRowDisabled = hasSelect && !row.getCanSelect();
+                const isOdd = row.depth % 2 !== 0;
+                const cells = row.getVisibleCells();
+                return /* @__PURE__ */ jsx8(
+                  Table.Row,
+                  {
+                    "data-selected": row.getIsSelected(),
+                    className: clx7(
+                      "transition-fg group/row group relative [&_td:last-of-type]:w-[1%] [&_td:last-of-type]:whitespace-nowrap",
+                      "has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover",
+                      {
+                        "bg-ui-bg-subtle hover:bg-ui-bg-subtle-hover": isOdd,
+                        "cursor-pointer": !!to,
+                        "bg-ui-bg-highlight hover:bg-ui-bg-highlight-hover": row.getIsSelected(),
+                        "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled": isRowDisabled
+                      }
+                    ),
+                    children: cells.map((cell, index) => {
+                      const visibleCells = row.getVisibleCells();
+                      const isSelectCell = cell.column.id === "select";
+                      const firstCell = visibleCells.findIndex(
+                        (h) => h.column.id !== "select"
+                      );
+                      const isFirstCell = firstCell !== -1 ? cell.column.id === visibleCells[firstCell].column.id : index === 0;
+                      const isStickyCell = isSelectCell || isFirstCell;
+                      const depthOffset = row.depth > 0 && isFirstCell ? row.depth * 14 + 24 : void 0;
+                      const hasLeftOffset = isStickyCell && hasSelect && !isSelectCell;
+                      const Inner = flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      );
+                      const isTabableLink = isFirstCell && !!to;
+                      const shouldRenderAsLink = !!to && !isSelectCell;
+                      return /* @__PURE__ */ jsx8(
+                        Table.Cell,
+                        {
+                          className: clx7({
+                            "!ps-0 !pe-0": shouldRenderAsLink,
+                            "bg-ui-bg-base group-data-[selected=true]/row:bg-ui-bg-highlight group-data-[selected=true]/row:group-hover/row:bg-ui-bg-highlight-hover group-hover/row:bg-ui-bg-base-hover transition-fg group-has-[[data-row-link]:focus-visible]:bg-ui-bg-base-hover sticky start-0 after:absolute after:inset-y-0 after:right-0 after:h-full after:w-px after:bg-transparent after:content-['']": isStickyCell,
+                            "bg-ui-bg-subtle group-hover/row:bg-ui-bg-subtle-hover": isOdd && isStickyCell,
+                            "start-[68px]": hasLeftOffset,
+                            "after:bg-ui-border-base": showStickyBorder && isStickyCell && !isSelectCell,
+                            "!bg-ui-bg-disabled !hover:bg-ui-bg-disabled": isRowDisabled
+                          }),
+                          style: {
+                            paddingLeft: depthOffset ? `${depthOffset}px` : void 0
+                          },
+                          children: shouldRenderAsLink ? /* @__PURE__ */ jsx8(
+                            Link,
+                            {
+                              to,
+                              className: "size-full outline-none",
+                              "data-row-link": true,
+                              tabIndex: isTabableLink ? 0 : -1,
+                              children: /* @__PURE__ */ jsx8(
+                                "div",
+                                {
+                                  className: clx7(
+                                    "flex size-full items-center pe-6",
+                                    {
+                                      "ps-6": isTabableLink && !hasLeftOffset
+                                    }
+                                  ),
+                                  children: Inner
+                                }
+                              )
+                            }
+                          ) : Inner
+                        },
+                        cell.id
+                      );
+                    })
+                  },
+                  row.id
+                );
+              }) })
+            ] }) : /* @__PURE__ */ jsx8("div", { className: clx7({ "border-b": layout === "fit" }), children: /* @__PURE__ */ jsx8(NoResults, {}) })
+          }
+        ),
+        pagination && /* @__PURE__ */ jsx8("div", { className: clx7({ "border-t": layout === "fill" }), children: /* @__PURE__ */ jsx8(
+          Pagination,
+          {
+            canNextPage: table.getCanNextPage(),
+            canPreviousPage: table.getCanPreviousPage(),
+            nextPage: table.nextPage,
+            previousPage: table.previousPage,
+            count,
+            pageIndex,
+            pageCount: table.getPageCount(),
+            pageSize
+          }
+        ) }),
+        hasCommandBar && /* @__PURE__ */ jsx8(CommandBar, { open: !!Object.keys(rowSelection).length, children: /* @__PURE__ */ jsxs8(CommandBar.Bar, { children: [
+          /* @__PURE__ */ jsx8(CommandBar.Value, { children: t2("general.countSelected", {
+            count: Object.keys(rowSelection).length
+          }) }),
+          /* @__PURE__ */ jsx8(CommandBar.Seperator, {}),
+          commands?.map((command, index) => {
+            return /* @__PURE__ */ jsxs8(Fragment, { children: [
+              /* @__PURE__ */ jsx8(
+                CommandBar.Command,
+                {
+                  label: command.label,
+                  shortcut: command.shortcut,
+                  action: () => handleAction(command.action)
+                }
+              ),
+              index < commands.length - 1 && /* @__PURE__ */ jsx8(CommandBar.Seperator, {})
+            ] }, index);
+          })
+        ] }) })
+      ]
+    }
+  );
+};
+var Pagination = (props) => {
+  const { t: t2 } = useTranslation6();
+  const translations = {
+    of: t2("general.of"),
+    results: t2("general.results"),
+    pages: t2("general.pages"),
+    prev: t2("general.prev"),
+    next: t2("general.next")
+  };
+  return /* @__PURE__ */ jsx8(
+    Table.Pagination,
+    {
+      className: "flex-shrink-0",
+      ...props,
+      translations
+    }
+  );
+};
+
+// src/components/table/data-table/data-table.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var MemoizedDataTableQuery = memo(DataTableQuery);
+var _DataTable = ({
+  table,
+  columns,
+  pagination,
+  navigateTo,
+  commands,
+  count = 0,
+  search = false,
+  orderBy,
+  filters,
+  prefix,
+  queryObject = {},
+  pageSize,
+  isLoading = false,
+  noHeader = false,
+  layout = "fit",
+  noRecords: noRecordsProps = {}
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ jsx9(
+      TableSkeleton,
+      {
+        layout,
+        rowCount: pageSize,
+        search: !!search,
+        filters: !!filters?.length,
+        orderBy: !!orderBy?.length,
+        pagination: !!pagination
+      }
+    );
+  }
+  const noQuery = Object.values(queryObject).filter((v) => Boolean(v)).length === 0;
+  const noResults = !isLoading && count === 0 && !noQuery;
+  const noRecords = !isLoading && count === 0 && noQuery;
+  if (noRecords) {
+    return /* @__PURE__ */ jsx9(
+      NoRecords,
+      {
+        className: clx8({
+          "flex h-full flex-col overflow-hidden": layout === "fill"
+        }),
+        ...noRecordsProps
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: clx8("divide-y", {
+        "flex h-full flex-col overflow-hidden": layout === "fill"
+      }),
+      children: [
+        /* @__PURE__ */ jsx9(
+          MemoizedDataTableQuery,
+          {
+            search,
+            orderBy,
+            filters,
+            prefix
+          }
+        ),
+        /* @__PURE__ */ jsx9(
+          DataTableRoot,
+          {
+            table,
+            count,
+            columns,
+            pagination: true,
+            navigateTo,
+            commands,
+            noResults,
+            noHeader,
+            layout
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/hooks/use-data-table.tsx
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getPaginationRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useEffect as useEffect5, useMemo as useMemo3, useState as useState7 } from "react";
+import { useSearchParams as useSearchParams2 } from "react-router-dom";
+var useDataTable = ({
+  data = [],
+  columns,
+  count = 0,
+  pageSize: _pageSize = 20,
+  enablePagination = true,
+  enableRowSelection = false,
+  enableExpandableRows = false,
+  rowSelection: _rowSelection,
+  getSubRows,
+  getRowId,
+  meta,
+  prefix
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams2();
+  const offsetKey = `${prefix ? `${prefix}_` : ""}offset`;
+  const offset = searchParams.get(offsetKey);
+  const [{ pageIndex, pageSize }, setPagination] = useState7({
+    pageIndex: offset ? Math.ceil(Number(offset) / _pageSize) : 0,
+    pageSize: _pageSize
+  });
+  const pagination = useMemo3(
+    () => ({
+      pageIndex,
+      pageSize
+    }),
+    [pageIndex, pageSize]
+  );
+  const [localRowSelection, setLocalRowSelection] = useState7({});
+  const rowSelection = _rowSelection?.state ?? localRowSelection;
+  const setRowSelection = _rowSelection?.updater ?? setLocalRowSelection;
+  useEffect5(() => {
+    if (!enablePagination) {
+      return;
+    }
+    const index = offset ? Math.ceil(Number(offset) / _pageSize) : 0;
+    if (index === pageIndex) {
+      return;
+    }
+    setPagination((prev) => ({
+      ...prev,
+      pageIndex: index
+    }));
+  }, [offset, enablePagination, _pageSize, pageIndex]);
+  const onPaginationChange = (updater) => {
+    const state = updater(pagination);
+    const { pageIndex: pageIndex2, pageSize: pageSize2 } = state;
+    setSearchParams((prev) => {
+      if (!pageIndex2) {
+        prev.delete(offsetKey);
+        return prev;
+      }
+      const newSearch = new URLSearchParams(prev);
+      newSearch.set(offsetKey, String(pageIndex2 * pageSize2));
+      return newSearch;
+    });
+    setPagination(state);
+    return state;
+  };
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      rowSelection,
+      // We always pass a selection state to the table even if it's not enabled
+      pagination: enablePagination ? pagination : void 0
+    },
+    pageCount: Math.ceil((count ?? 0) / pageSize),
+    enableRowSelection,
+    getRowId,
+    getSubRows,
+    onRowSelectionChange: enableRowSelection ? setRowSelection : void 0,
+    onPaginationChange: enablePagination ? onPaginationChange : void 0,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : void 0,
+    getExpandedRowModel: enableExpandableRows ? getExpandedRowModel() : void 0,
+    manualPagination: enablePagination ? true : void 0,
+    meta
+  });
+  return { table };
+};
+
 export {
-  DataTableFilter
+  _DataTable,
+  useDataTable
 };

package/dist/{chunk-AZAGUAN4.js → chunk-O2XHQTBX.js}

@@ -1,33 +1,33 @@
 import {
   useProductTableColumns
-} from "./chunk-Z5I2Z6L3.js";
+} from "./chunk-OMBP3YSV.js";
+import {
+  useProductTableFilters
+} from "./chunk-JSH7JEKY.js";
+import {
+  useProductTableQuery
+} from "./chunk-LYZDVZWA.js";
 import {
   _DataTable,
   useDataTable
-} from "./chunk-KYPPQGGE.js";
+} from "./chunk-NQEXDLYH.js";
 import {
   SingleColumnPage
 } from "./chunk-H6MYB7GB.js";
 import {
-  SingleColumnPageSkeleton
-} from "./chunk-INNFZYX2.js";
+  useCollection,
+  useDeleteCollection,
+  useUpdateCollectionProducts
+} from "./chunk-Z5T5EPLF.js";
 import {
   ActionMenu
 } from "./chunk-BDGZ4EQO.js";
 import {
-  useProductTableFilters
-} from "./chunk-LNAXUDW2.js";
-import {
-  useProductTableQuery
-} from "./chunk-VVWB3GIK.js";
-import {
-  useCollection,
-  useDeleteCollection,
-  useUpdateCollectionProducts
-} from "./chunk-U7WZYWGA.js";
+  SingleColumnPageSkeleton
+} from "./chunk-INNFZYX2.js";
 import {
   useProducts
-} from "./chunk-5CK6XEFV.js";
+} from "./chunk-H3MAUKL7.js";
 
 // src/pages/collections/collection-detail/collection-detail.tsx
 import { Children } from "react";

package/dist/{chunk-3IN6MMKV.js → chunk-OFOKVLV3.js}

@@ -1,9 +1,9 @@
 import {
   returnsQueryKeys
-} from "./chunk-OQMBWJPH.js";
+} from "./chunk-DELK6EWH.js";
 import {
   ordersQueryKeys
-} from "./chunk-TAKEQAZZ.js";
+} from "./chunk-VT6QIVZW.js";
 import {
   queryClient
 } from "./chunk-RHKRREUU.js";