@payfit/unity-components 2.12.8 → 2.12.10

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 (2) hide show
  1. package/dist/esm/components/table/Table.js +107 -108
  2. package/package.json +9 -9
package/dist/esm/components/table/Table.js CHANGED
@@ -1,32 +1,32 @@
1
- import { jsx as m, jsxs as R } from "react/jsx-runtime";
2
- import s, { forwardRef as E, useRef as k, useMemo as H, useImperativeHandle as D, useCallback as K } from "react";
3
- import { uyTv as N, uyMerge as z } from "@payfit/unity-themes";
4
- import { useVirtualizer as U } from "@tanstack/react-virtual";
5
- import { useResizeObserver as $ } from "usehooks-ts";
6
- import { TableContextProvider as M, useTableContext as P } from "./Table.context.js";
7
- const j = N({
1
+ import { jsx as h, jsxs as R } from "react/jsx-runtime";
2
+ import i, { forwardRef as z, useRef as V, useMemo as H, useImperativeHandle as k, useCallback as D } from "react";
3
+ import { uyTv as N, uyMerge as E } from "@payfit/unity-themes";
4
+ import { useVirtualizer as K } from "@tanstack/react-virtual";
5
+ import { useResizeObserver as U } from "usehooks-ts";
6
+ import { TableContextProvider as $, useTableContext as M } from "./Table.context.js";
7
+ const P = N({
8
8
  base: [
9
9
  "uy:w-full uy:border uy:border-solid uy:border-border-neutral uy:rounded-100",
10
10
  "uy:relative uy:flex uy:flex-col uy:overflow-hidden",
11
11
  "uy:min-h-(--uy-table-min-rows) uy:max-h-(--uy-table-max-rows)"
12
12
  ]
13
- }), A = E(
14
- ({ minRows: c = 10, maxRows: y = 50, children: r }, n) => /* @__PURE__ */ m(
13
+ }), j = z(
14
+ ({ minRows: y = 10, maxRows: d = 50, children: o }, l) => /* @__PURE__ */ h(
15
15
  "div",
16
16
  {
17
- ref: n,
18
- className: j(),
17
+ ref: l,
18
+ className: P(),
19
19
  "data-unity-slot": "table-root",
20
20
  style: {
21
- "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${c})`,
22
- "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${y})`
21
+ "--uy-table-min-rows": `calc(var(--uy-spacing-600) * ${y})`,
22
+ "--uy-table-max-rows": `calc(var(--uy-spacing-600) * ${d})`
23
23
  },
24
- children: r
24
+ children: o
25
25
  }
26
26
  )
27
27
  );
28
- A.displayName = "TableRoot";
29
- const _ = N({
28
+ j.displayName = "TableRoot";
29
+ const A = N({
30
30
  slots: {
31
31
  wrapper: [
32
32
  "uy:flex-1 uy:bg-surface-neutral",
@@ -64,43 +64,40 @@ const _ = N({
64
64
  horizontalScroll: !0,
65
65
  layout: "auto"
66
66
  }
67
- }), I = E((c, y) => {
67
+ }), _ = z((y, d) => {
68
68
  const {
69
- children: r,
70
- label: n,
71
- description: h,
72
- isHorizontalScrollEnabled: w = !0,
73
- enableVirtualization: i = !1,
74
- estimatedRowHeight: v = 40,
69
+ children: o,
70
+ label: l,
71
+ description: b,
72
+ isHorizontalScrollEnabled: v = !0,
73
+ enableVirtualization: s = !1,
74
+ estimatedRowHeight: g = 40,
75
75
  overscan: p = 5,
76
- layout: g = "auto",
77
- ...x
78
- } = c, u = k(null), { height: T = 0 } = $({
79
- ref: u,
80
- box: "border-box"
81
- }), { rowCount: d, columnCount: l } = H(() => {
82
- let t = 0, o = 0;
83
- return s.Children.forEach(r, (e) => {
84
- if (!s.isValidElement(e)) return;
85
- const a = s.Children.toArray(
76
+ layout: x = "auto",
77
+ ...T
78
+ } = y, f = V(null), { rowCount: m, columnCount: w } = H(() => {
79
+ let t = 0, r = 0;
80
+ return i.Children.forEach(o, (e) => {
81
+ if (!i.isValidElement(e)) return;
82
+ const u = i.Children.toArray(
86
83
  e.props.children
87
- ).filter((f) => s.isValidElement(f));
88
- o += a.length, a.forEach((f) => {
89
- if (!s.isValidElement(f)) return;
90
- const C = s.Children.toArray(
91
- f.props.children
92
- ).filter((V) => s.isValidElement(V));
93
- t = Math.max(t, C.length);
84
+ ).filter((c) => i.isValidElement(c));
85
+ r += u.length, u.forEach((c) => {
86
+ if (!i.isValidElement(c)) return;
87
+ const n = i.Children.toArray(
88
+ c.props.children
89
+ ).filter((C) => i.isValidElement(C));
90
+ t = Math.max(t, n.length);
94
91
  });
95
- }), { rowCount: o, columnCount: t };
96
- }, [r]);
97
- D(y, () => ({
92
+ }), { rowCount: r, columnCount: t };
93
+ }, [o]);
94
+ k(d, () => ({
98
95
  scrollToTop: () => {
99
- const t = u.current, o = t?.closest(
96
+ const t = f.current, r = t?.closest(
100
97
  '[data-unity-slot="table-root"]'
101
98
  );
102
99
  let e;
103
- if (o ? e = o : t && (e = t), !!e) {
100
+ if (r ? e = r : t && (e = t), !!e) {
104
101
  if (typeof e.scrollTo == "function") {
105
102
  e.scrollTo({ top: 0, behavior: "smooth" });
106
103
  return;
@@ -109,106 +106,108 @@ const _ = N({
109
106
  }
110
107
  }
111
108
  }));
112
- const b = U({
113
- count: i ? d : 0,
114
- getScrollElement: () => u.current,
115
- estimateSize: () => v,
109
+ const a = K({
110
+ count: s ? m : 0,
111
+ getScrollElement: () => f.current,
112
+ estimateSize: () => g,
116
113
  overscan: p
117
114
  });
118
- return /* @__PURE__ */ m(
119
- M,
115
+ return /* @__PURE__ */ h(
116
+ $,
120
117
  {
121
- rowCount: d,
122
- columnCount: l,
123
- virtualizer: b,
124
- enableVirtualization: i,
125
- children: /* @__PURE__ */ m(
118
+ rowCount: m,
119
+ columnCount: w,
120
+ virtualizer: a,
121
+ enableVirtualization: s,
122
+ children: /* @__PURE__ */ h(
126
123
  S,
127
124
  {
128
- scrollContainerRef: u,
129
- containerHeight: i ? b.getTotalSize() : T,
130
- rowCount: d,
131
- columnCount: l,
132
- label: n,
133
- description: h,
134
- isHorizontalScrollEnabled: w,
135
- layout: g,
136
- ...x,
137
- children: r
125
+ scrollContainerRef: f,
126
+ rowCount: m,
127
+ columnCount: w,
128
+ label: l,
129
+ description: b,
130
+ isHorizontalScrollEnabled: v,
131
+ layout: x,
132
+ ...T,
133
+ children: o
138
134
  }
139
135
  )
140
136
  }
141
137
  );
142
138
  });
143
- I.displayName = "Table";
144
- const S = (c) => {
139
+ _.displayName = "Table";
140
+ const S = (y) => {
145
141
  const {
146
- children: y,
147
- label: r,
148
- description: n,
149
- scrollContainerRef: h,
150
- layout: w,
151
- rowCount: i,
152
- columnCount: v,
142
+ children: d,
143
+ label: o,
144
+ description: l,
145
+ scrollContainerRef: b,
146
+ layout: v,
147
+ rowCount: s,
148
+ columnCount: g,
153
149
  onKeyDown: p,
154
- isHorizontalScrollEnabled: g = !0,
155
- ...x
156
- } = c, { wrapper: u, table: T } = _({
157
- horizontalScroll: g,
158
- layout: w
159
- }), { keyboardNavigation: d } = P(), { tableRef: l, handleTableKeyDown: b } = d, t = K(
160
- (a) => {
161
- a.key !== "Tab" && (b(a), p?.(a));
150
+ isHorizontalScrollEnabled: x = !0,
151
+ ...T
152
+ } = y, { wrapper: f, table: m } = A({
153
+ horizontalScroll: x,
154
+ layout: v
155
+ }), { keyboardNavigation: w } = M(), { tableRef: a, handleTableKeyDown: t } = w, { height: r = 0 } = U({
156
+ ref: b,
157
+ box: "border-box"
158
+ }), e = D(
159
+ (n) => {
160
+ n.key !== "Tab" && (t(n), p?.(n));
162
161
  },
163
- [b, p]
164
- ), o = h.current?.closest(
162
+ [t, p]
163
+ ), u = b.current?.closest(
165
164
  '[data-unity-slot="table-root"]'
166
- ), e = H(() => {
167
- if (!o || i === 0) return !1;
168
- const a = o.clientHeight;
169
- return (l.current?.clientHeight ?? 0) / a < 0.9;
170
- }, [o, i, l]);
165
+ ), c = H(() => {
166
+ if (!u || s === 0) return !1;
167
+ const n = u.clientHeight;
168
+ return (a.current?.clientHeight ?? 0) / n < 0.9;
169
+ }, [u, s, a, r]);
171
170
  return /* @__PURE__ */ R(
172
171
  "div",
173
172
  {
174
- className: z(u()),
175
- ref: h,
173
+ className: E(f()),
174
+ ref: b,
176
175
  style: {
177
- "--uy-table-has-remaining-space": e ? "1" : "0"
176
+ "--uy-table-has-remaining-space": c ? "1" : "0"
178
177
  },
179
178
  children: [
180
179
  /* @__PURE__ */ R(
181
180
  "table",
182
181
  {
183
- ref: l,
184
- className: z(T()),
182
+ ref: a,
183
+ className: E(m()),
185
184
  role: "grid",
186
- "aria-rowcount": i,
187
- "aria-colcount": v,
188
- "aria-label": r,
189
- "aria-describedby": n ? `table-desc-${l.current?.id}` : void 0,
190
- onKeyDown: t,
191
- ...x,
185
+ "aria-rowcount": s,
186
+ "aria-colcount": g,
187
+ "aria-label": o,
188
+ "aria-describedby": l ? `table-desc-${a.current?.id}` : void 0,
189
+ onKeyDown: e,
190
+ ...T,
192
191
  children: [
193
- y,
194
- n && /* @__PURE__ */ m(
192
+ d,
193
+ l && /* @__PURE__ */ h(
195
194
  "caption",
196
195
  {
197
- id: `table-desc-${l.current?.id}`,
196
+ id: `table-desc-${a.current?.id}`,
198
197
  className: "uy:sr-only",
199
- children: n
198
+ children: l
200
199
  }
201
200
  )
202
201
  ]
203
202
  }
204
203
  ),
205
- /* @__PURE__ */ m("div", { className: "uy:sr-only", "aria-live": "polite", children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows." })
204
+ /* @__PURE__ */ h("div", { className: "uy:sr-only", "aria-live": "polite", children: "Table navigation: Use arrow keys to move between cells. Tab key exits the table. Home and End keys navigate to the first and last cell in a row. Page Up and Page Down move between rows." })
206
205
  ]
207
206
  }
208
207
  );
209
208
  };
210
209
  S.displayName = "TableContent";
211
210
  export {
212
- I as Table,
213
- A as TableRoot
211
+ _ as Table,
212
+ j as TableRoot
214
213
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@payfit/unity-components",
3
- "version": "2.12.8",
3
+ "version": "2.12.10",
4
4
  "module": "./dist/esm/index.js",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -37,12 +37,12 @@
37
37
  "i18n"
38
38
  ],
39
39
  "dependencies": {
40
- "@ariakit/react": "0.4.21",
40
+ "@ariakit/react": "0.4.22",
41
41
  "@formatjs/intl": "3.1.3",
42
42
  "@hookform/devtools": "4.4.0",
43
43
  "@hookform/resolvers": "5.2.1",
44
44
  "@internationalized/date": "3.11.0",
45
- "@payfit/unity-illustrations": "2.12.8",
45
+ "@payfit/unity-illustrations": "2.12.10",
46
46
  "@radix-ui/react-avatar": "1.1.11",
47
47
  "@radix-ui/react-slot": "1.2.4",
48
48
  "@react-aria/interactions": "3.27.0",
@@ -51,7 +51,7 @@
51
51
  "@standard-schema/spec": "1.1.0",
52
52
  "@tanstack/form-core": "1.28.3",
53
53
  "@tanstack/react-form": "1.28.3",
54
- "@tanstack/react-virtual": "3.13.19",
54
+ "@tanstack/react-virtual": "3.13.21",
55
55
  "@use-gesture/react": "10.3.1",
56
56
  "embla-carousel": "9.0.0-rc01",
57
57
  "embla-carousel-accessibility": "9.0.0-rc01",
@@ -74,8 +74,8 @@
74
74
  },
75
75
  "peerDependencies": {
76
76
  "@hookform/devtools": "^4",
77
- "@payfit/unity-icons": "2.12.8",
78
- "@payfit/unity-themes": "2.12.8",
77
+ "@payfit/unity-icons": "2.12.10",
78
+ "@payfit/unity-themes": "2.12.10",
79
79
  "@storybook/react-vite": "^10.2.2",
80
80
  "@tanstack/react-query": "^5",
81
81
  "@tanstack/react-router": "^1.131",
@@ -94,9 +94,9 @@
94
94
  "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
95
95
  "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
96
96
  "@payfit/storybook-config": "0.0.0-use.local",
97
- "@payfit/unity-icons": "2.12.8",
98
- "@payfit/unity-illustrations": "2.12.8",
99
- "@payfit/unity-themes": "2.12.8",
97
+ "@payfit/unity-icons": "2.12.10",
98
+ "@payfit/unity-illustrations": "2.12.10",
99
+ "@payfit/unity-themes": "2.12.10",
100
100
  "@payfit/vite-configs": "0.0.0-use.local",
101
101
  "@storybook/addon-a11y": "10.2.13",
102
102
  "@storybook/addon-docs": "10.2.13",