@payglocal_ui/flux-ui 0.2.0 → 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 +51 -29
  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 +51 -29
  6. package/dist/index.js.map +1 -1
  7. package/package.json +2 -1
  8. package/src/data-table.tsx +105 -35
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,9 +3867,18 @@ 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);
3875
+ const seenKeys = /* @__PURE__ */ new Map();
3876
+ const rowKeys = paginated.map((row) => {
3877
+ const base = rowKey(row);
3878
+ const seen = seenKeys.get(base) ?? 0;
3879
+ seenKeys.set(base, seen + 1);
3880
+ return seen === 0 ? base : `${base}__${seen}`;
3881
+ });
3872
3882
  const comfortable = density === "comfortable";
3873
3883
  const compact = density === "compact";
3874
3884
  const compactCellPad = compact ? snug ? "pl-1.5 pr-2.5 py-2.5" : "px-3 py-2.5" : "px-4 py-3.5";
@@ -3876,7 +3886,7 @@ function DataTable({
3876
3886
  const headPad = comfortable ? "px-5 py-4" : compactCellPad;
3877
3887
  const footerPad = comfortable ? "px-5 py-4" : compact ? "px-4 py-2.5" : "px-4 py-3.5";
3878
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";
3879
- const rowCtaColWidth = compact ? 108 : 130;
3889
+ const actionGutter = comfortable ? 20 : compact ? 12 : 16;
3880
3890
  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
3881
3891
  "div",
3882
3892
  {
@@ -3899,7 +3909,13 @@ function DataTable({
3899
3909
  "table",
3900
3910
  {
3901
3911
  className: cn(tableLayout === "auto" && "min-w-[920px]"),
3902
- 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
+ },
3903
3919
  children: [
3904
3920
  tableLayout === "fixed" && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("colgroup", { children: [
3905
3921
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3913,7 +3929,7 @@ function DataTable({
3913
3929
  },
3914
3930
  col.key
3915
3931
  )),
3916
- 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
3917
3933
  ] }),
3918
3934
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3919
3935
  "thead",
@@ -3945,7 +3961,8 @@ function DataTable({
3945
3961
  },
3946
3962
  col.key
3947
3963
  )),
3948
- 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
3949
3966
  ]
3950
3967
  }
3951
3968
  )
@@ -3954,12 +3971,12 @@ function DataTable({
3954
3971
  /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { children: isLoading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3955
3972
  TableRowSkeleton,
3956
3973
  {
3957
- cols: columns.length + (rowCta ? 1 : 0),
3974
+ cols: columns.length,
3958
3975
  density,
3959
3976
  snug
3960
3977
  },
3961
3978
  i
3962
- )) : 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)(
3963
3980
  "tr",
3964
3981
  {
3965
3982
  className: cn(
@@ -3967,7 +3984,7 @@ function DataTable({
3967
3984
  comfortable && "min-h-[56px]",
3968
3985
  compact && "min-h-[44px]",
3969
3986
  "hover:bg-muted/40 dark:hover:bg-muted/25",
3970
- 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"
3971
3988
  ),
3972
3989
  children: [
3973
3990
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -3991,31 +4008,36 @@ function DataTable({
3991
4008
  },
3992
4009
  col.key
3993
4010
  )),
3994
- rowCta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
3995
- "td",
3996
- {
3997
- className: cn(
3998
- cellPad,
3999
- "text-left align-middle whitespace-nowrap",
4000
- comfortable ? "pl-2 pr-5" : compact ? snug ? "pl-1.5 pr-2" : "pl-1.5 pr-3" : "pl-3 pr-4"
4001
- ),
4002
- children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
4003
- "button",
4004
- {
4005
- type: "button",
4006
- onClick: () => rowCta.onClick?.(row),
4007
- className: cn(
4008
- "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",
4009
- compact ? "px-2.5 py-1 text-[11px]" : "px-3 py-1.5 text-[12px]"
4010
- ),
4011
- children: rowCta.label
4012
- }
4013
- )
4014
- }
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
+ ) })
4015
4037
  ) : null
4016
4038
  ]
4017
4039
  },
4018
- rowKey(row)
4040
+ rowKeys[i]
4019
4041
  )) })
4020
4042
  ]
4021
4043
  }