@payglocal_ui/flux-ui 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/index.cjs +44 -28
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +24 -3
  4. package/dist/index.d.ts +24 -3
  5. package/dist/index.js +45 -28
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -1
  8. package/src/data-table.tsx +92 -34
package/dist/index.cjs CHANGED
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  "use strict";
2
3
  var __create = Object.create;
3
4
  var __defProp = Object.defineProperty;
@@ -3854,6 +3855,7 @@ function DataTable({
3854
3855
  className,
3855
3856
  rowKey,
3856
3857
  rowCta,
3858
+ rowAction,
3857
3859
  density = "default",
3858
3860
  tableLayout = "fixed",
3859
3861
  theadClassName,
@@ -3866,6 +3868,8 @@ function DataTable({
3866
3868
  const [internalPage, setInternalPage] = (0, import_react8.useState)(1);
3867
3869
  const page = isControlled ? controlledPage : internalPage;
3868
3870
  const setPage = isControlled ? (p) => onPageChange?.(p) : (p) => setInternalPage(p);
3871
+ const hasAction = rowAction != null || rowCta != null;
3872
+ const hasSpacer = tableLayout === "content";
3869
3873
  const total = totalRows ?? data.length;
3870
3874
  const totalPages = Math.ceil(total / pageSize);
3871
3875
  const paginated = isControlled ? data : data.slice((page - 1) * pageSize, page * pageSize);
@@ -3883,7 +3887,7 @@ function DataTable({
3883
3887
  const headPad = comfortable ? "px-5 py-4" : compactCellPad;
3884
3888
  const footerPad = comfortable ? "px-5 py-4" : compact ? "px-4 py-2.5" : "px-4 py-3.5";
3885
3889
  const headText = comfortable ? "text-[12px] font-medium text-muted-foreground tracking-normal" : compact ? "text-[11px] font-semibold text-muted-foreground" : "text-[11px] font-semibold text-foreground/75 dark:text-foreground/85";
3886
- const rowCtaColWidth = compact ? 108 : 130;
3890
+ const actionGutter = comfortable ? 20 : compact ? 12 : 16;
3887
3891
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3888
3892
  "div",
3889
3893
  {
@@ -3906,7 +3910,13 @@ function DataTable({
3906
3910
  "table",
3907
3911
  {
3908
3912
  className: cn(tableLayout === "auto" && "min-w-[920px]"),
3909
- style: { tableLayout, width: "100%" },
3913
+ style: {
3914
+ // `content` uses the automatic algorithm but stays 100% wide; a
3915
+ // greedy spacer column (below) soaks up the slack so the data
3916
+ // columns collapse to their content width while the table fills.
3917
+ tableLayout: tableLayout === "fixed" ? "fixed" : "auto",
3918
+ width: "100%"
3919
+ },
3910
3920
  children: [
3911
3921
  tableLayout === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("colgroup", { children: [
3912
3922
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3920,7 +3930,7 @@ function DataTable({
3920
3930
  },
3921
3931
  col.key
3922
3932
  )),
3923
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("col", { style: { width: rowCtaColWidth } }) : null
3933
+ hasAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("col", { style: { width: 0 } }) : null
3924
3934
  ] }),
3925
3935
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3926
3936
  "thead",
@@ -3952,7 +3962,8 @@ function DataTable({
3952
3962
  },
3953
3963
  col.key
3954
3964
  )),
3955
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: cn(headPad, "w-[1%]"), "aria-hidden": true }) : null
3965
+ hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: "w-full p-0", "aria-hidden": true }) : null,
3966
+ hasAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: "sticky right-0 z-[1] w-0 p-0", "aria-hidden": true }) : null
3956
3967
  ]
3957
3968
  }
3958
3969
  )
@@ -3961,12 +3972,12 @@ function DataTable({
3961
3972
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { children: isLoading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3962
3973
  TableRowSkeleton,
3963
3974
  {
3964
- cols: columns.length + (rowCta ? 1 : 0),
3975
+ cols: columns.length,
3965
3976
  density,
3966
3977
  snug
3967
3978
  },
3968
3979
  i
3969
- )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { colSpan: columns.length + (rowCta ? 1 : 0), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription }) }) }) : paginated.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3980
+ )) : paginated.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { colSpan: columns.length + (hasSpacer ? 1 : 0) + (hasAction ? 1 : 0), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(EmptyState, { title: emptyTitle, description: emptyDescription }) }) }) : paginated.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3970
3981
  "tr",
3971
3982
  {
3972
3983
  className: cn(
@@ -3974,7 +3985,7 @@ function DataTable({
3974
3985
  comfortable && "min-h-[56px]",
3975
3986
  compact && "min-h-[44px]",
3976
3987
  "hover:bg-muted/40 dark:hover:bg-muted/25",
3977
- rowCta && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
3988
+ hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
3978
3989
  ),
3979
3990
  children: [
3980
3991
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3998,27 +4009,32 @@ function DataTable({
3998
4009
  },
3999
4010
  col.key
4000
4011
  )),
4001
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4002
- "td",
4003
- {
4004
- className: cn(
4005
- cellPad,
4006
- "text-left align-middle whitespace-nowrap",
4007
- comfortable ? "pl-2 pr-5" : compact ? snug ? "pl-1.5 pr-2" : "pl-1.5 pr-3" : "pl-3 pr-4"
4008
- ),
4009
- children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4010
- "button",
4011
- {
4012
- type: "button",
4013
- onClick: () => rowCta.onClick?.(row),
4014
- className: cn(
4015
- "opacity-0 group-hover:opacity-100 transition-opacity duration-150 inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
4016
- compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
4017
- ),
4018
- children: rowCta.label
4019
- }
4020
- )
4021
- }
4012
+ hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "p-0", "aria-hidden": true }) : null,
4013
+ hasAction ? (
4014
+ // Zero-width sticky cell pinned to the right edge of the
4015
+ // viewport. Its children are positioned absolutely so they
4016
+ // float over the row (out of the 0-width cell) — the action
4017
+ // stays in view while scrolling and nothing trails the last
4018
+ // data column. Everything is revealed on hover only.
4019
+ /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "sticky right-0 z-[1] w-0 p-0 align-middle", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4020
+ "span",
4021
+ {
4022
+ className: "absolute top-1/2 -translate-y-1/2 z-[1] inline-flex items-center opacity-0 transition-opacity duration-150 group-hover:opacity-100 group-focus-within:opacity-100",
4023
+ style: { right: actionGutter },
4024
+ children: rowAction != null ? typeof rowAction === "function" ? rowAction(row, i) : rowAction : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4025
+ "button",
4026
+ {
4027
+ type: "button",
4028
+ onClick: () => rowCta?.onClick?.(row),
4029
+ className: cn(
4030
+ "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
4031
+ compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
4032
+ ),
4033
+ children: rowCta?.label
4034
+ }
4035
+ )
4036
+ }
4037
+ ) })
4022
4038
  ) : null
4023
4039
  ]
4024
4040
  },