@stll/folio-react 0.15.3 → 0.15.5

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.
@@ -1,434 +0,0 @@
1
- import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
2
- import { r as useFolioUI } from "./folio-ui-BgDDRsUX.js";
3
- import { u as useCloseOnDialogOpenChange } from "./dialogChrome-BoGYPgeu.js";
4
- import { c } from "react-compiler-runtime";
5
- import { useEffect, useId, useState } from "react";
6
- import { useTranslations } from "use-intl";
7
- import { jsx, jsxs } from "react/jsx-runtime";
8
- //#region src/components/dialogs/TablePropertiesDialog.tsx
9
- /**
10
- * Table Properties Dialog — width type, width value, alignment.
11
- */
12
- var TablePropertiesDialog_exports = /* @__PURE__ */ __exportAll({ TablePropertiesDialog: () => TablePropertiesDialog });
13
- function TablePropertiesDialog(t0) {
14
- const $ = c(115);
15
- const { isOpen, onClose, onApply, currentProps } = t0;
16
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
17
- const handleOpenChange = useCloseOnDialogOpenChange(onClose);
18
- const t = useTranslations("folio");
19
- const id = useId();
20
- const [width, setWidth] = useState(currentProps?.width ?? 0);
21
- const [widthType, setWidthType] = useState(currentProps?.widthType ?? "auto");
22
- const [justification, setJustification] = useState(currentProps?.justification ?? "left");
23
- let t1;
24
- if ($[0] !== currentProps?.justification || $[1] !== currentProps?.width || $[2] !== currentProps?.widthType || $[3] !== isOpen) {
25
- t1 = () => {
26
- if (isOpen) {
27
- setWidth(currentProps?.width ?? 0);
28
- setWidthType(currentProps?.widthType ?? "auto");
29
- setJustification(currentProps?.justification ?? "left");
30
- }
31
- };
32
- $[0] = currentProps?.justification;
33
- $[1] = currentProps?.width;
34
- $[2] = currentProps?.widthType;
35
- $[3] = isOpen;
36
- $[4] = t1;
37
- } else t1 = $[4];
38
- let t2;
39
- if ($[5] !== currentProps || $[6] !== isOpen) {
40
- t2 = [isOpen, currentProps];
41
- $[5] = currentProps;
42
- $[6] = isOpen;
43
- $[7] = t2;
44
- } else t2 = $[7];
45
- useEffect(t1, t2);
46
- let t3;
47
- if ($[8] !== justification || $[9] !== onApply || $[10] !== onClose || $[11] !== width || $[12] !== widthType) {
48
- t3 = () => {
49
- const props = { justification: justification === "left" || justification === "center" || justification === "right" ? justification : "left" };
50
- if (widthType === "auto") {
51
- props.width = null;
52
- props.widthType = "auto";
53
- } else {
54
- props.width = width;
55
- props.widthType = widthType;
56
- }
57
- onApply(props);
58
- onClose();
59
- };
60
- $[8] = justification;
61
- $[9] = onApply;
62
- $[10] = onClose;
63
- $[11] = width;
64
- $[12] = widthType;
65
- $[13] = t3;
66
- } else t3 = $[13];
67
- const handleApply = t3;
68
- const t4 = `${id}-tp-width-type`;
69
- const t5 = `${id}-tp-width`;
70
- const t6 = `${id}-tp-align`;
71
- let t7;
72
- if ($[14] !== t4 || $[15] !== t5 || $[16] !== t6) {
73
- t7 = {
74
- widthType: t4,
75
- width: t5,
76
- align: t6
77
- };
78
- $[14] = t4;
79
- $[15] = t5;
80
- $[16] = t6;
81
- $[17] = t7;
82
- } else t7 = $[17];
83
- const fieldIds = t7;
84
- let t8;
85
- if ($[18] !== DialogBackdrop) {
86
- t8 = /* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" });
87
- $[18] = DialogBackdrop;
88
- $[19] = t8;
89
- } else t8 = $[19];
90
- let t9;
91
- if ($[20] !== t) {
92
- t9 = t("dialogs.tableProperties.title");
93
- $[20] = t;
94
- $[21] = t9;
95
- } else t9 = $[21];
96
- let t10;
97
- if ($[22] !== DialogTitle || $[23] !== t9) {
98
- t10 = /* @__PURE__ */ jsx(DialogTitle, {
99
- className: "border-b px-5 py-3 text-base font-semibold",
100
- children: t9
101
- });
102
- $[22] = DialogTitle;
103
- $[23] = t9;
104
- $[24] = t10;
105
- } else t10 = $[24];
106
- const t11 = fieldIds.widthType;
107
- let t12;
108
- if ($[25] !== t) {
109
- t12 = t("dialogs.tableProperties.widthType");
110
- $[25] = t;
111
- $[26] = t12;
112
- } else t12 = $[26];
113
- let t13;
114
- if ($[27] !== fieldIds.widthType || $[28] !== t12) {
115
- t13 = /* @__PURE__ */ jsx("label", {
116
- className: "w-20 text-muted-foreground text-[13px]",
117
- htmlFor: t11,
118
- children: t12
119
- });
120
- $[27] = fieldIds.widthType;
121
- $[28] = t12;
122
- $[29] = t13;
123
- } else t13 = $[29];
124
- const t14 = fieldIds.widthType;
125
- let t15;
126
- if ($[30] === Symbol.for("react.memo_cache_sentinel")) {
127
- t15 = (e) => setWidthType(e.target.value);
128
- $[30] = t15;
129
- } else t15 = $[30];
130
- let t16;
131
- if ($[31] !== t) {
132
- t16 = t("dialogs.tableProperties.widthTypes.auto");
133
- $[31] = t;
134
- $[32] = t16;
135
- } else t16 = $[32];
136
- let t17;
137
- if ($[33] !== t16) {
138
- t17 = /* @__PURE__ */ jsx("option", {
139
- value: "auto",
140
- children: t16
141
- });
142
- $[33] = t16;
143
- $[34] = t17;
144
- } else t17 = $[34];
145
- let t18;
146
- if ($[35] !== t) {
147
- t18 = t("dialogs.tableProperties.widthTypes.fixed");
148
- $[35] = t;
149
- $[36] = t18;
150
- } else t18 = $[36];
151
- let t19;
152
- if ($[37] !== t18) {
153
- t19 = /* @__PURE__ */ jsx("option", {
154
- value: "dxa",
155
- children: t18
156
- });
157
- $[37] = t18;
158
- $[38] = t19;
159
- } else t19 = $[38];
160
- let t20;
161
- if ($[39] !== t) {
162
- t20 = t("dialogs.tableProperties.widthTypes.percentage");
163
- $[39] = t;
164
- $[40] = t20;
165
- } else t20 = $[40];
166
- let t21;
167
- if ($[41] !== t20) {
168
- t21 = /* @__PURE__ */ jsx("option", {
169
- value: "pct",
170
- children: t20
171
- });
172
- $[41] = t20;
173
- $[42] = t21;
174
- } else t21 = $[42];
175
- let t22;
176
- if ($[43] !== fieldIds.widthType || $[44] !== t17 || $[45] !== t19 || $[46] !== t21 || $[47] !== widthType) {
177
- t22 = /* @__PURE__ */ jsxs("select", {
178
- className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
179
- id: t14,
180
- onChange: t15,
181
- value: widthType,
182
- children: [
183
- t17,
184
- t19,
185
- t21
186
- ]
187
- });
188
- $[43] = fieldIds.widthType;
189
- $[44] = t17;
190
- $[45] = t19;
191
- $[46] = t21;
192
- $[47] = widthType;
193
- $[48] = t22;
194
- } else t22 = $[48];
195
- let t23;
196
- if ($[49] !== t13 || $[50] !== t22) {
197
- t23 = /* @__PURE__ */ jsxs("div", {
198
- className: "flex items-center gap-3",
199
- children: [t13, t22]
200
- });
201
- $[49] = t13;
202
- $[50] = t22;
203
- $[51] = t23;
204
- } else t23 = $[51];
205
- let t24;
206
- if ($[52] !== fieldIds.width || $[53] !== t || $[54] !== width || $[55] !== widthType) {
207
- t24 = widthType !== "auto" && /* @__PURE__ */ jsxs("div", {
208
- className: "flex items-center gap-3",
209
- children: [
210
- /* @__PURE__ */ jsx("label", {
211
- className: "w-20 text-muted-foreground text-[13px]",
212
- htmlFor: fieldIds.width,
213
- children: t("dialogs.tableProperties.widthLabel")
214
- }),
215
- /* @__PURE__ */ jsx("input", {
216
- className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
217
- id: fieldIds.width,
218
- min: 0,
219
- onChange: (e_0) => setWidth(Number(e_0.target.value) || 0),
220
- step: widthType === "pct" ? 5 : 100,
221
- type: "number",
222
- value: width
223
- }),
224
- /* @__PURE__ */ jsx("span", {
225
- className: "text-muted-foreground text-[11px]",
226
- children: widthType === "pct" ? t("dialogs.tableProperties.units.fiftiethsPercent") : t("dialogs.tableProperties.units.twips")
227
- })
228
- ]
229
- });
230
- $[52] = fieldIds.width;
231
- $[53] = t;
232
- $[54] = width;
233
- $[55] = widthType;
234
- $[56] = t24;
235
- } else t24 = $[56];
236
- const t25 = fieldIds.align;
237
- let t26;
238
- if ($[57] !== t) {
239
- t26 = t("dialogs.tableProperties.alignmentLabel");
240
- $[57] = t;
241
- $[58] = t26;
242
- } else t26 = $[58];
243
- let t27;
244
- if ($[59] !== fieldIds.align || $[60] !== t26) {
245
- t27 = /* @__PURE__ */ jsx("label", {
246
- className: "w-20 text-muted-foreground text-[13px]",
247
- htmlFor: t25,
248
- children: t26
249
- });
250
- $[59] = fieldIds.align;
251
- $[60] = t26;
252
- $[61] = t27;
253
- } else t27 = $[61];
254
- const t28 = fieldIds.align;
255
- let t29;
256
- if ($[62] === Symbol.for("react.memo_cache_sentinel")) {
257
- t29 = (e_1) => setJustification(e_1.target.value);
258
- $[62] = t29;
259
- } else t29 = $[62];
260
- let t30;
261
- if ($[63] !== t) {
262
- t30 = t("dialogs.tableProperties.alignOptions.left");
263
- $[63] = t;
264
- $[64] = t30;
265
- } else t30 = $[64];
266
- let t31;
267
- if ($[65] !== t30) {
268
- t31 = /* @__PURE__ */ jsx("option", {
269
- value: "left",
270
- children: t30
271
- });
272
- $[65] = t30;
273
- $[66] = t31;
274
- } else t31 = $[66];
275
- let t32;
276
- if ($[67] !== t) {
277
- t32 = t("dialogs.tableProperties.alignOptions.center");
278
- $[67] = t;
279
- $[68] = t32;
280
- } else t32 = $[68];
281
- let t33;
282
- if ($[69] !== t32) {
283
- t33 = /* @__PURE__ */ jsx("option", {
284
- value: "center",
285
- children: t32
286
- });
287
- $[69] = t32;
288
- $[70] = t33;
289
- } else t33 = $[70];
290
- let t34;
291
- if ($[71] !== t) {
292
- t34 = t("dialogs.tableProperties.alignOptions.right");
293
- $[71] = t;
294
- $[72] = t34;
295
- } else t34 = $[72];
296
- let t35;
297
- if ($[73] !== t34) {
298
- t35 = /* @__PURE__ */ jsx("option", {
299
- value: "right",
300
- children: t34
301
- });
302
- $[73] = t34;
303
- $[74] = t35;
304
- } else t35 = $[74];
305
- let t36;
306
- if ($[75] !== fieldIds.align || $[76] !== justification || $[77] !== t31 || $[78] !== t33 || $[79] !== t35) {
307
- t36 = /* @__PURE__ */ jsxs("select", {
308
- className: "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none",
309
- id: t28,
310
- onChange: t29,
311
- value: justification,
312
- children: [
313
- t31,
314
- t33,
315
- t35
316
- ]
317
- });
318
- $[75] = fieldIds.align;
319
- $[76] = justification;
320
- $[77] = t31;
321
- $[78] = t33;
322
- $[79] = t35;
323
- $[80] = t36;
324
- } else t36 = $[80];
325
- let t37;
326
- if ($[81] !== t27 || $[82] !== t36) {
327
- t37 = /* @__PURE__ */ jsxs("div", {
328
- className: "flex items-center gap-3",
329
- children: [t27, t36]
330
- });
331
- $[81] = t27;
332
- $[82] = t36;
333
- $[83] = t37;
334
- } else t37 = $[83];
335
- let t38;
336
- if ($[84] !== t23 || $[85] !== t24 || $[86] !== t37) {
337
- t38 = /* @__PURE__ */ jsxs("div", {
338
- className: "flex flex-col gap-3 px-5 py-4",
339
- children: [
340
- t23,
341
- t24,
342
- t37
343
- ]
344
- });
345
- $[84] = t23;
346
- $[85] = t24;
347
- $[86] = t37;
348
- $[87] = t38;
349
- } else t38 = $[87];
350
- let t39;
351
- if ($[88] !== t) {
352
- t39 = t("common.cancel");
353
- $[88] = t;
354
- $[89] = t39;
355
- } else t39 = $[89];
356
- let t40;
357
- if ($[90] !== DialogClose || $[91] !== t39) {
358
- t40 = /* @__PURE__ */ jsx(DialogClose, {
359
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
360
- children: t39
361
- });
362
- $[90] = DialogClose;
363
- $[91] = t39;
364
- $[92] = t40;
365
- } else t40 = $[92];
366
- let t41;
367
- if ($[93] !== t) {
368
- t41 = t("common.apply");
369
- $[93] = t;
370
- $[94] = t41;
371
- } else t41 = $[94];
372
- let t42;
373
- if ($[95] !== handleApply || $[96] !== t41) {
374
- t42 = /* @__PURE__ */ jsx("button", {
375
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
376
- onClick: handleApply,
377
- type: "button",
378
- children: t41
379
- });
380
- $[95] = handleApply;
381
- $[96] = t41;
382
- $[97] = t42;
383
- } else t42 = $[97];
384
- let t43;
385
- if ($[98] !== t40 || $[99] !== t42) {
386
- t43 = /* @__PURE__ */ jsxs("div", {
387
- className: "flex justify-end gap-2 border-t px-5 py-3",
388
- children: [t40, t42]
389
- });
390
- $[98] = t40;
391
- $[99] = t42;
392
- $[100] = t43;
393
- } else t43 = $[100];
394
- let t44;
395
- if ($[101] !== DialogPopup || $[102] !== t10 || $[103] !== t38 || $[104] !== t43) {
396
- t44 = /* @__PURE__ */ jsxs(DialogPopup, {
397
- className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[440px] min-w-[360px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
398
- children: [
399
- t10,
400
- t38,
401
- t43
402
- ]
403
- });
404
- $[101] = DialogPopup;
405
- $[102] = t10;
406
- $[103] = t38;
407
- $[104] = t43;
408
- $[105] = t44;
409
- } else t44 = $[105];
410
- let t45;
411
- if ($[106] !== DialogPortal || $[107] !== t44 || $[108] !== t8) {
412
- t45 = /* @__PURE__ */ jsxs(DialogPortal, { children: [t8, t44] });
413
- $[106] = DialogPortal;
414
- $[107] = t44;
415
- $[108] = t8;
416
- $[109] = t45;
417
- } else t45 = $[109];
418
- let t46;
419
- if ($[110] !== Dialog || $[111] !== handleOpenChange || $[112] !== isOpen || $[113] !== t45) {
420
- t46 = /* @__PURE__ */ jsx(Dialog, {
421
- open: isOpen,
422
- onOpenChange: handleOpenChange,
423
- children: t45
424
- });
425
- $[110] = Dialog;
426
- $[111] = handleOpenChange;
427
- $[112] = isOpen;
428
- $[113] = t45;
429
- $[114] = t46;
430
- } else t46 = $[114];
431
- return t46;
432
- }
433
- //#endregion
434
- export { TablePropertiesDialog_exports as n, TablePropertiesDialog as t };