@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.10 → 0.1.0-alpha.12

package/dist/index.cjs

@@ -68,6 +68,7 @@ __export(src_exports, {
   AdsDatePicker: () => AdsDatePicker,
   AdsDateTimePicker: () => AdsDateTimePicker,
   AdsDialog: () => AdsDialog,
+  AdsDialogBody: () => AdsDialogBody,
   AdsDialogClose: () => AdsDialogClose,
   AdsDialogContent: () => AdsDialogContent,
   AdsDialogDescription: () => AdsDialogDescription,
@@ -217,6 +218,7 @@ var adsDefaultMessages = {
       collapseRow: "Collapse row",
       expandRow: "Expand row",
       filterColumn: "Filter column",
+      loadingRows: "Loading table rows",
       noDataAvailable: "No data available",
       selectAllRows: "Select all rows",
       selectRow: "Select row",
@@ -266,6 +268,7 @@ var adsDefaultMessages = {
       collapseRow: "\u6536\u8D77\u884C",
       expandRow: "\u5C55\u5F00\u884C",
       filterColumn: "\u7B5B\u9009\u5217",
+      loadingRows: "\u6B63\u5728\u52A0\u8F7D\u8868\u683C\u884C",
       noDataAvailable: "\u6682\u65E0\u6570\u636E",
       selectAllRows: "\u9009\u62E9\u5168\u90E8\u884C",
       selectRow: "\u9009\u62E9\u884C",
@@ -4557,18 +4560,33 @@ var SKELETON_ROW_COUNT = 4;
 var FLEX_WIDTH_UNIT = 160;
 var sizeClassNames = {
   small: {
+    bodyHeight: 32,
     cell: "py-1.5 text-xs leading-4",
+    headHeight: 32,
     head: "h-8 py-1.5 text-xs leading-4"
   },
   middle: {
+    bodyHeight: 40,
     cell: "py-2 text-sm leading-5",
+    headHeight: 40,
     head: "h-10 py-2 text-sm leading-5"
   },
   large: {
+    bodyHeight: 48,
     cell: "py-3 text-base leading-6",
+    headHeight: 48,
     head: "h-12 py-3 text-base leading-6"
   }
 };
+function getSpinnerLoadingHeight(scrollY, density) {
+  if (typeof scrollY === "number") {
+    return Math.max(scrollY - density.headHeight, density.bodyHeight * SKELETON_ROW_COUNT);
+  }
+  if (typeof scrollY === "string") {
+    return `max(calc(${scrollY} - ${density.headHeight}px), ${density.bodyHeight * SKELETON_ROW_COUNT}px)`;
+  }
+  return density.bodyHeight * SKELETON_ROW_COUNT;
+}
 function getColumnKey(column, index) {
   if (column.key !== void 0) {
     return String(column.key);
@@ -4779,6 +4797,8 @@ function AdsDataTable({
   dataSource = [],
   rowKey,
   loading = false,
+  loadingVariant = "skeleton",
+  expandedRowSurface = "inset",
   emptyText,
   emptyState,
   rowClassName,
@@ -4877,8 +4897,14 @@ function AdsDataTable({
   const hasSelectionColumn = Boolean(rowSelection);
   const hasExpandableColumn = Boolean(expandable?.expandedRowRender);
   const density = sizeClassNames[size];
+  const columnCount = resolvedColumns.length + Number(hasSelectionColumn) + Number(hasExpandableColumn);
   const paginationMode = pagination === false ? "client" : pagination.mode ?? "client";
   const allowsRowSelectionByClick = Boolean(rowSelection) && !suppressRowClickSelection;
+  const spinnerLoadingHeight = React42.useMemo(
+    () => getSpinnerLoadingHeight(scroll?.y, density),
+    [density, scroll?.y]
+  );
+  const expandedRowContentClassName = expandedRowSurface === "plain" ? "bg-transparent p-4" : expandedRowSurface === "subtle" ? "mx-6 my-4 rounded-[20px] border border-border bg-transparent p-4" : "border-t border-border bg-popover/40 p-4";
   const filterValues = React42.useMemo(
     () => resolvedColumns.reduce((accumulator, column, index) => {
       const columnKey = getColumnKey(column, index);
@@ -5234,7 +5260,26 @@ function AdsDataTable({
           );
         })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableBody, { children: loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AdsTableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableBody, { children: loading && loadingVariant === "spinner" ? [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          AdsTableCell,
+          {
+            className: "p-0",
+            colSpan: columnCount,
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+              "div",
+              {
+                "aria-label": messages.table.loadingRows,
+                "aria-live": "polite",
+                className: "flex items-center justify-center px-6 py-8 text-foreground",
+                role: "status",
+                style: { minHeight: spinnerLoadingHeight },
+                children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsSpinner, { size: "lg", tone: "foreground" })
+              }
+            )
+          }
+        ) }, "spinner-row")
+      ] : loading ? Array.from({ length: SKELETON_ROW_COUNT }, (_, skeletonIndex) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(AdsTableRow, { children: [
         hasSelectionColumn ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         hasExpandableColumn ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableCell, { className: "w-12 p-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsSkeleton, { className: "h-4 w-4 rounded-[4px]" }) }) : null,
         resolvedColumns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
@@ -5337,7 +5382,7 @@ function AdsDataTable({
                 "div",
                 {
                   className: cn(
-                    "border-t border-border bg-popover/40 p-4",
+                    expandedRowContentClassName,
                     classNames?.expandedRowContent
                   ),
                   children: expandable?.expandedRowRender?.(record, index)
@@ -5350,7 +5395,7 @@ function AdsDataTable({
         /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(AdsTableRow, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           AdsTableCell,
           {
-            colSpan: resolvedColumns.length + Number(hasSelectionColumn) + Number(hasExpandableColumn),
+            colSpan: columnCount,
             className: cn("p-0", classNames?.emptyRowCell),
             children: renderedEmptyState
           }
@@ -6285,7 +6330,8 @@ var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var overlayClassName2 = "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
-var contentClassName2 = "fixed left-1/2 top-1/2 z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-[423px] -translate-x-1/2 -translate-y-1/2 gap-lg overflow-y-auto overscroll-contain rounded-radius-md border border-border bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] [scrollbar-gutter:stable] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
+var contentClassName2 = "fixed left-1/2 top-1/2 z-50 flex max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-[423px] -translate-x-1/2 -translate-y-1/2 flex-col gap-lg overflow-hidden rounded-radius-md border border-border bg-card p-xl shadow-[0px_4px_6px_-4px_rgba(0,0,0,0.1),0px_10px_15px_-3px_rgba(0,0,0,0.1)] duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]";
+var bodyClassName = "min-h-0 flex-1 overflow-y-auto overscroll-contain [scrollbar-gutter:stable]";
 var closeButtonClassName = "absolute right-xl top-xl inline-flex h-6 w-6 items-center justify-center rounded-sm opacity-80 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:pointer-events-none";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
@@ -6311,15 +6357,83 @@ var DialogClose = React59.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogClose.displayName = "DialogClose";
+function flattenDialogChildren(children) {
+  const nodes = [];
+  React59.Children.forEach(children, (child) => {
+    if (React59.isValidElement(child) && child.type === React59.Fragment) {
+      nodes.push(...flattenDialogChildren(child.props.children));
+      return;
+    }
+    nodes.push(child);
+  });
+  return nodes;
+}
+function isDialogSlotElement(child, component) {
+  return React59.isValidElement(child) && child.type === component;
+}
+var DialogBody = React59.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    "div",
+    {
+      className: cn(bodyClassName, className),
+      "data-slot": "ads-dialog-body",
+      ref,
+      ...props
+    }
+  )
+);
+DialogBody.displayName = "DialogBody";
 var DialogContent = React59.forwardRef(
   ({ children, className, closeLabel, hideCloseButton = false, ...props }, ref) => {
     const { messages } = useAdsI18n();
     const resolvedCloseLabel = closeLabel ?? messages.dialog.close;
+    const childNodes = flattenDialogChildren(children);
+    const headerIndex = childNodes.findIndex(
+      (child) => isDialogSlotElement(child, DialogHeader)
+    );
+    let footerIndex = -1;
+    for (let index = childNodes.length - 1; index >= 0; index -= 1) {
+      if (isDialogSlotElement(childNodes[index], DialogFooter)) {
+        footerIndex = index;
+        break;
+      }
+    }
+    const headerNode = headerIndex >= 0 ? childNodes[headerIndex] : null;
+    const generatedHeaderNodes = [];
+    if (headerNode === null) {
+      for (let index = 0; index < childNodes.length; index += 1) {
+        if (index === footerIndex) {
+          break;
+        }
+        const child = childNodes[index];
+        const isHeaderChild = isDialogSlotElement(child, DialogTitle) || isDialogSlotElement(child, DialogDescription);
+        if (!isHeaderChild) {
+          break;
+        }
+        generatedHeaderNodes.push(child);
+      }
+    }
+    const footerNode = footerIndex >= 0 && footerIndex !== headerIndex ? childNodes[footerIndex] : null;
+    const bodyNodes = childNodes.filter(
+      (child, index) => {
+        if (index === headerIndex || index === footerIndex) {
+          return false;
+        }
+        return !generatedHeaderNodes.includes(child);
+      }
+    );
+    const explicitBodyNodes = bodyNodes.filter(
+      (child) => isDialogSlotElement(child, DialogBody)
+    );
+    const looseBodyNodes = bodyNodes.filter(
+      (child) => !isDialogSlotElement(child, DialogBody)
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(DialogPortal, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogOverlay, {}),
       /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
         DialogPrimitive.Content,
         {
+          "data-slot": "ads-dialog-content",
           className: cn(
             contentClassName2,
             adsTextColorClassName.card,
@@ -6328,7 +6442,11 @@ var DialogContent = React59.forwardRef(
           ref,
           ...props,
           children: [
-            children,
+            headerNode,
+            headerNode === null && generatedHeaderNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogHeader, { children: generatedHeaderNodes }) : null,
+            explicitBodyNodes.length > 0 ? explicitBodyNodes : null,
+            looseBodyNodes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DialogBody, { children: looseBodyNodes }) : null,
+            footerNode,
             !hideCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
               DialogPrimitive.Close,
               {
@@ -6351,6 +6469,7 @@ var DialogHeader = React59.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
+      "data-slot": "ads-dialog-header",
       className: cn("flex flex-col gap-sm pr-8 text-left", className),
       ref,
       ...props
@@ -6362,6 +6481,7 @@ var DialogFooter = React59.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     "div",
     {
+      "data-slot": "ads-dialog-footer",
       className: cn(
         "flex flex-col-reverse gap-sm sm:flex-row sm:justify-end",
         className
@@ -6401,6 +6521,7 @@ var AdsDialogOverlay = DialogOverlay;
 var AdsDialogClose = DialogClose;
 var AdsDialogContent = DialogContent;
 var AdsDialogHeader = DialogHeader;
+var AdsDialogBody = DialogBody;
 var AdsDialogFooter = DialogFooter;
 var AdsDialogTitle = DialogTitle;
 var AdsDialogDescription = DialogDescription;
@@ -6669,6 +6790,7 @@ var designTokens = {
   AdsDatePicker,
   AdsDateTimePicker,
   AdsDialog,
+  AdsDialogBody,
   AdsDialogClose,
   AdsDialogContent,
   AdsDialogDescription,