@payglocal_ui/flux-ui 0.2.1 → 0.2.2

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 +43 -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 +43 -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
@@ -3854,6 +3854,7 @@ function DataTable({
3854
3854
  className,
3855
3855
  rowKey,
3856
3856
  rowCta,
3857
+ rowAction,
3857
3858
  density = "default",
3858
3859
  tableLayout = "fixed",
3859
3860
  theadClassName,
@@ -3866,6 +3867,8 @@ function DataTable({
3866
3867
  const [internalPage, setInternalPage] = (0, import_react8.useState)(1);
3867
3868
  const page = isControlled ? controlledPage : internalPage;
3868
3869
  const setPage = isControlled ? (p) => onPageChange?.(p) : (p) => setInternalPage(p);
3870
+ const hasAction = rowAction != null || rowCta != null;
3871
+ const hasSpacer = tableLayout === "content";
3869
3872
  const total = totalRows ?? data.length;
3870
3873
  const totalPages = Math.ceil(total / pageSize);
3871
3874
  const paginated = isControlled ? data : data.slice((page - 1) * pageSize, page * pageSize);
@@ -3883,7 +3886,7 @@ function DataTable({
3883
3886
  const headPad = comfortable ? "px-5 py-4" : compactCellPad;
3884
3887
  const footerPad = comfortable ? "px-5 py-4" : compact ? "px-4 py-2.5" : "px-4 py-3.5";
3885
3888
  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;
3889
+ const actionGutter = comfortable ? 20 : compact ? 12 : 16;
3887
3890
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3888
3891
  "div",
3889
3892
  {
@@ -3906,7 +3909,13 @@ function DataTable({
3906
3909
  "table",
3907
3910
  {
3908
3911
  className: cn(tableLayout === "auto" && "min-w-[920px]"),
3909
- style: { tableLayout, width: "100%" },
3912
+ style: {
3913
+ // `content` uses the automatic algorithm but stays 100% wide; a
3914
+ // greedy spacer column (below) soaks up the slack so the data
3915
+ // columns collapse to their content width while the table fills.
3916
+ tableLayout: tableLayout === "fixed" ? "fixed" : "auto",
3917
+ width: "100%"
3918
+ },
3910
3919
  children: [
3911
3920
  tableLayout === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("colgroup", { children: [
3912
3921
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3920,7 +3929,7 @@ function DataTable({
3920
3929
  },
3921
3930
  col.key
3922
3931
  )),
3923
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("col", { style: { width: rowCtaColWidth } }) : null
3932
+ hasAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("col", { style: { width: 0 } }) : null
3924
3933
  ] }),
3925
3934
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3926
3935
  "thead",
@@ -3952,7 +3961,8 @@ function DataTable({
3952
3961
  },
3953
3962
  col.key
3954
3963
  )),
3955
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: cn(headPad, "w-[1%]"), "aria-hidden": true }) : null
3964
+ hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: "w-full p-0", "aria-hidden": true }) : null,
3965
+ hasAction ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("th", { className: "sticky right-0 z-[1] w-0 p-0", "aria-hidden": true }) : null
3956
3966
  ]
3957
3967
  }
3958
3968
  )
@@ -3961,12 +3971,12 @@ function DataTable({
3961
3971
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { children: isLoading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3962
3972
  TableRowSkeleton,
3963
3973
  {
3964
- cols: columns.length + (rowCta ? 1 : 0),
3974
+ cols: columns.length,
3965
3975
  density,
3966
3976
  snug
3967
3977
  },
3968
3978
  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)(
3979
+ )) : 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
3980
  "tr",
3971
3981
  {
3972
3982
  className: cn(
@@ -3974,7 +3984,7 @@ function DataTable({
3974
3984
  comfortable && "min-h-[56px]",
3975
3985
  compact && "min-h-[44px]",
3976
3986
  "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"
3987
+ hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
3978
3988
  ),
3979
3989
  children: [
3980
3990
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3998,27 +4008,32 @@ function DataTable({
3998
4008
  },
3999
4009
  col.key
4000
4010
  )),
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
- }
4011
+ hasSpacer ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("td", { className: "p-0", "aria-hidden": true }) : null,
4012
+ hasAction ? (
4013
+ // Zero-width sticky cell pinned to the right edge of the
4014
+ // viewport. Its children are positioned absolutely so they
4015
+ // float over the row (out of the 0-width cell) — the action
4016
+ // stays in view while scrolling and nothing trails the last
4017
+ // data column. Everything is revealed on hover only.
4018
+ /* @__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)(
4019
+ "span",
4020
+ {
4021
+ 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",
4022
+ style: { right: actionGutter },
4023
+ children: rowAction != null ? typeof rowAction === "function" ? rowAction(row, i) : rowAction : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4024
+ "button",
4025
+ {
4026
+ type: "button",
4027
+ onClick: () => rowCta?.onClick?.(row),
4028
+ className: cn(
4029
+ "inline-flex items-center font-medium text-foreground bg-card rounded-lg border border-border hover:border-muted-foreground/50 whitespace-nowrap shadow-sm",
4030
+ compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
4031
+ ),
4032
+ children: rowCta?.label
4033
+ }
4034
+ )
4035
+ }
4036
+ ) })
4022
4037
  ) : null
4023
4038
  ]
4024
4039
  },