@stll/folio-react 0.6.0 → 0.7.0

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 (30) hide show
  1. package/dist/{CommentsSidebar-_utmEkA9.js → CommentsSidebar-B8X5a8JW.js} +126 -129
  2. package/dist/{FindReplaceDialog-DLdBekSR.js → FindReplaceDialog-Bx7QaFQ_.js} +23 -18
  3. package/dist/FootnotePropertiesDialog-2lmpg9m8.js +646 -0
  4. package/dist/ImagePositionDialog-D3MileYL.js +842 -0
  5. package/dist/ImagePropertiesDialog-CzK8HCaW.js +465 -0
  6. package/dist/InsertSymbolDialog-Df9dyLvn.js +376 -0
  7. package/dist/PageSetupDialog-PSs9YdPb.js +684 -0
  8. package/dist/TablePropertiesDialog-PQxKKM0Y.js +344 -0
  9. package/dist/{TextContextMenu-CG0V37wi.js → TextContextMenu-Ci7-M4oU.js} +199 -79
  10. package/dist/compat/eigenpal.d.ts +1 -1
  11. package/dist/compat/eigenpal.js +89 -17
  12. package/dist/dialogChrome-BoGYPgeu.js +26 -0
  13. package/dist/{dialogs-j7qyw17x.d.ts → dialogs-DK8OVUT_.d.ts} +13 -1
  14. package/dist/{dialogs-CzvXYJyG.js → dialogs-DsHnfN0g.js} +508 -316
  15. package/dist/dialogs.d.ts +2 -2
  16. package/dist/dialogs.js +9 -8
  17. package/dist/editor.css +1 -1
  18. package/dist/folio-ui-C-85DSuK.js +1011 -0
  19. package/dist/index.d.ts +5 -4
  20. package/dist/index.js +12 -11
  21. package/dist/{renderAsync-B7UJsZye.d.ts → renderAsync-ChQI9UJG.d.ts} +11 -3
  22. package/dist/{renderAsync-CwHTsxBN.js → renderAsync-evdyE_GW.js} +5593 -3256
  23. package/dist/standalone.css +1 -1
  24. package/package.json +8 -6
  25. package/dist/FootnotePropertiesDialog-CUjq9c6H.js +0 -267
  26. package/dist/ImagePositionDialog-BMuO9rLT.js +0 -395
  27. package/dist/ImagePropertiesDialog-C8iEgdmN.js +0 -198
  28. package/dist/PageSetupDialog-BKsSMCGb.js +0 -312
  29. package/dist/TablePropertiesDialog-Dw8gvL78.js +0 -159
  30. package/dist/useFindReplace-BPBpMWS9.js +0 -842
@@ -1,198 +0,0 @@
1
- import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
2
- import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
3
- import { useEffect, useId, useState } from "react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
- //#region src/components/dialogs/ImagePropertiesDialog.tsx
6
- /**
7
- * Image Properties Dialog
8
- *
9
- * Modal for editing image properties:
10
- * - Alt text for accessibility
11
- * - Border/outline style, color, and width
12
- */
13
- var ImagePropertiesDialog_exports = /* @__PURE__ */ __exportAll({ ImagePropertiesDialog: () => ImagePropertiesDialog });
14
- function ImagePropertiesDialog({ isOpen, onClose, onApply, currentData }) {
15
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
16
- const id = useId();
17
- const [alt, setAlt] = useState("");
18
- const [borderWidth, setBorderWidth] = useState(0);
19
- const [borderColor, setBorderColor] = useState("#000000");
20
- const [borderStyle, setBorderStyle] = useState("solid");
21
- useEffect(() => {
22
- if (!isOpen) return;
23
- setAlt(currentData?.alt ?? "");
24
- setBorderWidth(currentData?.borderWidth ?? 0);
25
- setBorderColor(currentData?.borderColor ?? "#000000");
26
- setBorderStyle(currentData?.borderStyle ?? "solid");
27
- }, [isOpen, currentData]);
28
- const handleApply = () => {
29
- onApply({
30
- ...alt ? { alt } : {},
31
- ...borderWidth > 0 ? {
32
- borderWidth,
33
- borderColor,
34
- borderStyle
35
- } : {}
36
- });
37
- onClose();
38
- };
39
- const labelCls = "w-[60px] text-muted-foreground text-xs";
40
- const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-1.5 py-1 text-xs outline-none";
41
- const sectionLabelCls = "text-foreground text-[13px] font-semibold";
42
- const fieldIds = {
43
- borderWidth: `${id}-img-border-width`,
44
- borderStyle: `${id}-img-border-style`,
45
- borderColor: `${id}-img-border-color`
46
- };
47
- return /* @__PURE__ */ jsx(Dialog, {
48
- open: isOpen,
49
- onOpenChange: (open) => {
50
- if (!open) onClose();
51
- },
52
- children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
53
- className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[440px] min-w-[380px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
54
- children: [
55
- /* @__PURE__ */ jsx(DialogTitle, {
56
- className: "border-b px-5 py-3 text-base font-semibold",
57
- children: "Image Properties"
58
- }),
59
- /* @__PURE__ */ jsxs("div", {
60
- className: "flex flex-col gap-4 px-5 py-4",
61
- children: [/* @__PURE__ */ jsxs("div", {
62
- className: "flex flex-col gap-2",
63
- children: [/* @__PURE__ */ jsx("div", {
64
- className: sectionLabelCls,
65
- children: "Alt Text"
66
- }), /* @__PURE__ */ jsx("textarea", {
67
- className: "border-input bg-background text-foreground font-[inherit] min-h-[60px] resize-y rounded border px-1.5 py-1 text-xs outline-none",
68
- value: alt,
69
- onChange: (e) => setAlt(e.target.value),
70
- placeholder: "Describe this image for accessibility..."
71
- })]
72
- }), /* @__PURE__ */ jsxs("div", {
73
- className: "flex flex-col gap-2",
74
- children: [
75
- /* @__PURE__ */ jsx("div", {
76
- className: sectionLabelCls,
77
- children: "Border"
78
- }),
79
- /* @__PURE__ */ jsxs("div", {
80
- className: "flex items-center gap-2",
81
- children: [
82
- /* @__PURE__ */ jsx("label", {
83
- htmlFor: fieldIds.borderWidth,
84
- className: labelCls,
85
- children: "Width"
86
- }),
87
- /* @__PURE__ */ jsx("input", {
88
- id: fieldIds.borderWidth,
89
- type: "number",
90
- className: `${inputCls} max-w-[80px]`,
91
- min: 0,
92
- max: 20,
93
- step: .5,
94
- value: borderWidth,
95
- onChange: (e) => setBorderWidth(Number(e.target.value) || 0)
96
- }),
97
- /* @__PURE__ */ jsx("span", {
98
- className: "text-muted-foreground text-xs",
99
- children: "px"
100
- })
101
- ]
102
- }),
103
- /* @__PURE__ */ jsxs("div", {
104
- className: "flex items-center gap-2",
105
- children: [/* @__PURE__ */ jsx("label", {
106
- htmlFor: fieldIds.borderStyle,
107
- className: labelCls,
108
- children: "Style"
109
- }), /* @__PURE__ */ jsxs("select", {
110
- id: fieldIds.borderStyle,
111
- className: inputCls,
112
- value: borderStyle,
113
- onChange: (e) => setBorderStyle(e.target.value),
114
- children: [
115
- /* @__PURE__ */ jsx("option", {
116
- value: "solid",
117
- children: "Solid"
118
- }),
119
- /* @__PURE__ */ jsx("option", {
120
- value: "dashed",
121
- children: "Dashed"
122
- }),
123
- /* @__PURE__ */ jsx("option", {
124
- value: "dotted",
125
- children: "Dotted"
126
- }),
127
- /* @__PURE__ */ jsx("option", {
128
- value: "double",
129
- children: "Double"
130
- }),
131
- /* @__PURE__ */ jsx("option", {
132
- value: "groove",
133
- children: "Groove"
134
- }),
135
- /* @__PURE__ */ jsx("option", {
136
- value: "ridge",
137
- children: "Ridge"
138
- }),
139
- /* @__PURE__ */ jsx("option", {
140
- value: "inset",
141
- children: "Inset"
142
- }),
143
- /* @__PURE__ */ jsx("option", {
144
- value: "outset",
145
- children: "Outset"
146
- })
147
- ]
148
- })]
149
- }),
150
- /* @__PURE__ */ jsxs("div", {
151
- className: "flex items-center gap-2",
152
- children: [
153
- /* @__PURE__ */ jsx("label", {
154
- htmlFor: fieldIds.borderColor,
155
- className: labelCls,
156
- children: "Color"
157
- }),
158
- /* @__PURE__ */ jsx("input", {
159
- id: fieldIds.borderColor,
160
- type: "color",
161
- value: borderColor,
162
- onChange: (e) => setBorderColor(e.target.value),
163
- className: "border-input h-6 w-8 cursor-pointer rounded border p-0"
164
- }),
165
- /* @__PURE__ */ jsx("input", {
166
- type: "text",
167
- className: `${inputCls} max-w-[90px]`,
168
- value: borderColor,
169
- onChange: (e) => setBorderColor(e.target.value)
170
- })
171
- ]
172
- }),
173
- borderWidth > 0 && /* @__PURE__ */ jsx("div", {
174
- className: "text-muted-foreground mt-1 rounded p-2 text-center text-[11px]",
175
- style: { border: `${borderWidth}px ${borderStyle} ${borderColor}` },
176
- children: "Preview"
177
- })
178
- ]
179
- })]
180
- }),
181
- /* @__PURE__ */ jsxs("div", {
182
- className: "flex justify-end gap-2 border-t px-5 py-3",
183
- children: [/* @__PURE__ */ jsx(DialogClose, {
184
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
185
- children: "Cancel"
186
- }), /* @__PURE__ */ jsx("button", {
187
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
188
- onClick: handleApply,
189
- type: "button",
190
- children: "Apply"
191
- })]
192
- })
193
- ]
194
- })] })
195
- });
196
- }
197
- //#endregion
198
- export { ImagePropertiesDialog_exports as n, ImagePropertiesDialog as t };
@@ -1,312 +0,0 @@
1
- import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
2
- import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
3
- import { useEffect, useId, useState } from "react";
4
- import { TWIPS_PER_INCH } from "@stll/folio-core/utils/units";
5
- import { jsx, jsxs } from "react/jsx-runtime";
6
- //#region src/components/dialogs/PageSetupDialog.tsx
7
- /**
8
- * Page Setup Dialog
9
- *
10
- * Modal for editing page layout properties:
11
- * - Page size (Letter, A4, Legal, etc.)
12
- * - Orientation (portrait/landscape)
13
- * - Margins (top, bottom, left, right) in inches
14
- */
15
- var PageSetupDialog_exports = /* @__PURE__ */ __exportAll({ PageSetupDialog: () => PageSetupDialog });
16
- /** Common page sizes in twips (width x height in portrait orientation) */
17
- const PAGE_SIZES = [
18
- {
19
- label: "Letter (8.5\" × 11\")",
20
- width: 12240,
21
- height: 15840
22
- },
23
- {
24
- label: "A4 (8.27\" × 11.69\")",
25
- width: 11906,
26
- height: 16838
27
- },
28
- {
29
- label: "Legal (8.5\" × 14\")",
30
- width: 12240,
31
- height: 20160
32
- },
33
- {
34
- label: "A3 (11.69\" × 16.54\")",
35
- width: 16838,
36
- height: 23811
37
- },
38
- {
39
- label: "A5 (5.83\" × 8.27\")",
40
- width: 8391,
41
- height: 11906
42
- },
43
- {
44
- label: "B5 (6.93\" × 9.84\")",
45
- width: 9979,
46
- height: 14175
47
- },
48
- {
49
- label: "Executive (7.25\" × 10.5\")",
50
- width: 10440,
51
- height: 15120
52
- }
53
- ];
54
- function twipsToInches(twips) {
55
- return Math.round(twips / TWIPS_PER_INCH * 100) / 100;
56
- }
57
- function inchesToTwips(inches) {
58
- return Math.round(inches * TWIPS_PER_INCH);
59
- }
60
- /** Find matching page size preset, ignoring orientation */
61
- function findPageSizeIndex(w, h) {
62
- const pw = Math.min(w, h);
63
- const ph = Math.max(w, h);
64
- return PAGE_SIZES.findIndex((s) => Math.abs(s.width - pw) < 20 && Math.abs(s.height - ph) < 20);
65
- }
66
- const DEFAULT_WIDTH = 12240;
67
- const DEFAULT_HEIGHT = 15840;
68
- const DEFAULT_MARGIN = 1440;
69
- function PageSetupDialog({ isOpen, onClose, onApply, currentProps }) {
70
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
71
- const id = useId();
72
- const [pageWidth, setPageWidth] = useState(DEFAULT_WIDTH);
73
- const [pageHeight, setPageHeight] = useState(DEFAULT_HEIGHT);
74
- const [orientation, setOrientation] = useState("portrait");
75
- const [marginTop, setMarginTop] = useState(DEFAULT_MARGIN);
76
- const [marginBottom, setMarginBottom] = useState(DEFAULT_MARGIN);
77
- const [marginLeft, setMarginLeft] = useState(DEFAULT_MARGIN);
78
- const [marginRight, setMarginRight] = useState(DEFAULT_MARGIN);
79
- useEffect(() => {
80
- if (!isOpen) return;
81
- const w = currentProps?.pageWidth || DEFAULT_WIDTH;
82
- const h = currentProps?.pageHeight || DEFAULT_HEIGHT;
83
- const orient = currentProps?.orientation || (w > h ? "landscape" : "portrait");
84
- setPageWidth(w);
85
- setPageHeight(h);
86
- setOrientation(orient);
87
- setMarginTop(currentProps?.marginTop ?? DEFAULT_MARGIN);
88
- setMarginBottom(currentProps?.marginBottom ?? DEFAULT_MARGIN);
89
- setMarginLeft(currentProps?.marginLeft ?? DEFAULT_MARGIN);
90
- setMarginRight(currentProps?.marginRight ?? DEFAULT_MARGIN);
91
- }, [isOpen, currentProps]);
92
- const handlePageSizeChange = (index) => {
93
- if (index < 0) return;
94
- const size = PAGE_SIZES[index];
95
- if (!size) return;
96
- if (orientation === "landscape") {
97
- setPageWidth(size.height);
98
- setPageHeight(size.width);
99
- } else {
100
- setPageWidth(size.width);
101
- setPageHeight(size.height);
102
- }
103
- };
104
- const handleOrientationChange = (newOrientation) => {
105
- if (newOrientation === orientation) return;
106
- setOrientation(newOrientation);
107
- setPageWidth(pageHeight);
108
- setPageHeight(pageWidth);
109
- };
110
- const handleApply = () => {
111
- onApply({
112
- pageWidth,
113
- pageHeight,
114
- orientation,
115
- marginTop,
116
- marginBottom,
117
- marginLeft,
118
- marginRight
119
- });
120
- onClose();
121
- };
122
- const sizeIndex = findPageSizeIndex(pageWidth, pageHeight);
123
- const labelCls = "w-20 text-muted-foreground text-[13px]";
124
- const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none";
125
- const sectionLabelCls = "text-muted-foreground text-xs font-semibold uppercase tracking-wide";
126
- const fieldIds = {
127
- size: `${id}-ps-size`,
128
- orientation: `${id}-ps-orientation`,
129
- marginTop: `${id}-ps-margin-top`,
130
- marginBottom: `${id}-ps-margin-bottom`,
131
- marginLeft: `${id}-ps-margin-left`,
132
- marginRight: `${id}-ps-margin-right`
133
- };
134
- return /* @__PURE__ */ jsx(Dialog, {
135
- open: isOpen,
136
- onOpenChange: (open) => {
137
- if (!open) onClose();
138
- },
139
- children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
140
- className: "bg-popover fixed start-1/2 top-1/2 z-[10001] w-full max-w-[480px] min-w-[400px] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-xl",
141
- children: [
142
- /* @__PURE__ */ jsx(DialogTitle, {
143
- className: "border-b px-5 py-3 text-base font-semibold",
144
- children: "Page Setup"
145
- }),
146
- /* @__PURE__ */ jsxs("div", {
147
- className: "flex flex-col gap-3.5 px-5 py-4",
148
- children: [
149
- /* @__PURE__ */ jsx("div", {
150
- className: sectionLabelCls,
151
- children: "Page Size"
152
- }),
153
- /* @__PURE__ */ jsxs("div", {
154
- className: "flex items-center gap-3",
155
- children: [/* @__PURE__ */ jsx("label", {
156
- htmlFor: fieldIds.size,
157
- className: labelCls,
158
- children: "Size"
159
- }), /* @__PURE__ */ jsxs("select", {
160
- id: fieldIds.size,
161
- className: inputCls,
162
- value: sizeIndex,
163
- onChange: (e) => handlePageSizeChange(Number(e.target.value)),
164
- children: [PAGE_SIZES.map((size, i) => /* @__PURE__ */ jsx("option", {
165
- value: i,
166
- children: size.label
167
- }, size.label)), sizeIndex < 0 && /* @__PURE__ */ jsx("option", {
168
- value: -1,
169
- children: "Custom"
170
- })]
171
- })]
172
- }),
173
- /* @__PURE__ */ jsxs("div", {
174
- className: "flex items-center gap-3",
175
- children: [/* @__PURE__ */ jsx("label", {
176
- htmlFor: fieldIds.orientation,
177
- className: labelCls,
178
- children: "Orientation"
179
- }), /* @__PURE__ */ jsxs("select", {
180
- id: fieldIds.orientation,
181
- className: inputCls,
182
- value: orientation,
183
- onChange: (e) => handleOrientationChange(e.target.value),
184
- children: [/* @__PURE__ */ jsx("option", {
185
- value: "portrait",
186
- children: "Portrait"
187
- }), /* @__PURE__ */ jsx("option", {
188
- value: "landscape",
189
- children: "Landscape"
190
- })]
191
- })]
192
- }),
193
- /* @__PURE__ */ jsx("div", {
194
- className: `${sectionLabelCls} mt-1`,
195
- children: "Margins"
196
- }),
197
- /* @__PURE__ */ jsxs("div", {
198
- className: "flex items-center gap-3",
199
- children: [
200
- /* @__PURE__ */ jsx("label", {
201
- htmlFor: fieldIds.marginTop,
202
- className: labelCls,
203
- children: "Top"
204
- }),
205
- /* @__PURE__ */ jsx("input", {
206
- id: fieldIds.marginTop,
207
- type: "number",
208
- className: inputCls,
209
- min: 0,
210
- max: 10,
211
- step: .1,
212
- value: twipsToInches(marginTop),
213
- onChange: (e) => setMarginTop(inchesToTwips(Number(e.target.value) || 0))
214
- }),
215
- /* @__PURE__ */ jsx("span", {
216
- className: "text-muted-foreground w-4 text-[11px]",
217
- children: "in"
218
- })
219
- ]
220
- }),
221
- /* @__PURE__ */ jsxs("div", {
222
- className: "flex items-center gap-3",
223
- children: [
224
- /* @__PURE__ */ jsx("label", {
225
- htmlFor: fieldIds.marginBottom,
226
- className: labelCls,
227
- children: "Bottom"
228
- }),
229
- /* @__PURE__ */ jsx("input", {
230
- id: fieldIds.marginBottom,
231
- type: "number",
232
- className: inputCls,
233
- min: 0,
234
- max: 10,
235
- step: .1,
236
- value: twipsToInches(marginBottom),
237
- onChange: (e) => setMarginBottom(inchesToTwips(Number(e.target.value) || 0))
238
- }),
239
- /* @__PURE__ */ jsx("span", {
240
- className: "text-muted-foreground w-4 text-[11px]",
241
- children: "in"
242
- })
243
- ]
244
- }),
245
- /* @__PURE__ */ jsxs("div", {
246
- className: "flex items-center gap-3",
247
- children: [
248
- /* @__PURE__ */ jsx("label", {
249
- htmlFor: fieldIds.marginLeft,
250
- className: labelCls,
251
- children: "Left"
252
- }),
253
- /* @__PURE__ */ jsx("input", {
254
- id: fieldIds.marginLeft,
255
- type: "number",
256
- className: inputCls,
257
- min: 0,
258
- max: 10,
259
- step: .1,
260
- value: twipsToInches(marginLeft),
261
- onChange: (e) => setMarginLeft(inchesToTwips(Number(e.target.value) || 0))
262
- }),
263
- /* @__PURE__ */ jsx("span", {
264
- className: "text-muted-foreground w-4 text-[11px]",
265
- children: "in"
266
- })
267
- ]
268
- }),
269
- /* @__PURE__ */ jsxs("div", {
270
- className: "flex items-center gap-3",
271
- children: [
272
- /* @__PURE__ */ jsx("label", {
273
- htmlFor: fieldIds.marginRight,
274
- className: labelCls,
275
- children: "Right"
276
- }),
277
- /* @__PURE__ */ jsx("input", {
278
- id: fieldIds.marginRight,
279
- type: "number",
280
- className: inputCls,
281
- min: 0,
282
- max: 10,
283
- step: .1,
284
- value: twipsToInches(marginRight),
285
- onChange: (e) => setMarginRight(inchesToTwips(Number(e.target.value) || 0))
286
- }),
287
- /* @__PURE__ */ jsx("span", {
288
- className: "text-muted-foreground w-4 text-[11px]",
289
- children: "in"
290
- })
291
- ]
292
- })
293
- ]
294
- }),
295
- /* @__PURE__ */ jsxs("div", {
296
- className: "flex justify-end gap-2 border-t px-5 py-3",
297
- children: [/* @__PURE__ */ jsx(DialogClose, {
298
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
299
- children: "Cancel"
300
- }), /* @__PURE__ */ jsx("button", {
301
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
302
- onClick: handleApply,
303
- type: "button",
304
- children: "Apply"
305
- })]
306
- })
307
- ]
308
- })] })
309
- });
310
- }
311
- //#endregion
312
- export { PageSetupDialog_exports as n, PageSetupDialog as t };
@@ -1,159 +0,0 @@
1
- import { t as __exportAll } from "./rolldown-runtime-BBjsoOtd.js";
2
- import { o as useFolioUI } from "./useFindReplace-BPBpMWS9.js";
3
- import { useCallback, useEffect, useId, useState } from "react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
- //#region src/components/dialogs/TablePropertiesDialog.tsx
6
- /**
7
- * Table Properties Dialog — width type, width value, alignment.
8
- */
9
- var TablePropertiesDialog_exports = /* @__PURE__ */ __exportAll({ TablePropertiesDialog: () => TablePropertiesDialog });
10
- function TablePropertiesDialog({ isOpen, onClose, onApply, currentProps }) {
11
- const { Root: Dialog, Portal: DialogPortal, Backdrop: DialogBackdrop, Popup: DialogPopup, Title: DialogTitle, Close: DialogClose } = useFolioUI().Dialog;
12
- const id = useId();
13
- const [width, setWidth] = useState(currentProps?.width ?? 0);
14
- const [widthType, setWidthType] = useState(currentProps?.widthType ?? "auto");
15
- const [justification, setJustification] = useState(currentProps?.justification ?? "left");
16
- useEffect(() => {
17
- if (isOpen) {
18
- setWidth(currentProps?.width ?? 0);
19
- setWidthType(currentProps?.widthType ?? "auto");
20
- setJustification(currentProps?.justification ?? "left");
21
- }
22
- }, [isOpen, currentProps]);
23
- const handleApply = useCallback(() => {
24
- const props = { justification: justification === "left" || justification === "center" || justification === "right" ? justification : "left" };
25
- if (widthType === "auto") {
26
- props.width = null;
27
- props.widthType = "auto";
28
- } else {
29
- props.width = width;
30
- props.widthType = widthType;
31
- }
32
- onApply(props);
33
- onClose();
34
- }, [
35
- width,
36
- widthType,
37
- justification,
38
- onApply,
39
- onClose
40
- ]);
41
- const labelCls = "w-20 text-muted-foreground text-[13px]";
42
- const inputCls = "border-input bg-background text-foreground flex-1 rounded border px-2 py-1.5 text-[13px] outline-none";
43
- const fieldIds = {
44
- widthType: `${id}-tp-width-type`,
45
- width: `${id}-tp-width`,
46
- align: `${id}-tp-align`
47
- };
48
- return /* @__PURE__ */ jsx(Dialog, {
49
- open: isOpen,
50
- onOpenChange: (open) => {
51
- if (!open) onClose();
52
- },
53
- children: /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogBackdrop, { className: "fixed inset-0 z-[10000] bg-black/50" }), /* @__PURE__ */ jsxs(DialogPopup, {
54
- 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",
55
- children: [
56
- /* @__PURE__ */ jsx(DialogTitle, {
57
- className: "border-b px-5 py-3 text-base font-semibold",
58
- children: "Table Properties"
59
- }),
60
- /* @__PURE__ */ jsxs("div", {
61
- className: "flex flex-col gap-3 px-5 py-4",
62
- children: [
63
- /* @__PURE__ */ jsxs("div", {
64
- className: "flex items-center gap-3",
65
- children: [/* @__PURE__ */ jsx("label", {
66
- className: labelCls,
67
- htmlFor: fieldIds.widthType,
68
- children: "Width type"
69
- }), /* @__PURE__ */ jsxs("select", {
70
- className: inputCls,
71
- id: fieldIds.widthType,
72
- onChange: (e) => setWidthType(e.target.value),
73
- value: widthType,
74
- children: [
75
- /* @__PURE__ */ jsx("option", {
76
- value: "auto",
77
- children: "Auto"
78
- }),
79
- /* @__PURE__ */ jsx("option", {
80
- value: "dxa",
81
- children: "Fixed (twips)"
82
- }),
83
- /* @__PURE__ */ jsx("option", {
84
- value: "pct",
85
- children: "Percentage"
86
- })
87
- ]
88
- })]
89
- }),
90
- widthType !== "auto" && /* @__PURE__ */ jsxs("div", {
91
- className: "flex items-center gap-3",
92
- children: [
93
- /* @__PURE__ */ jsx("label", {
94
- className: labelCls,
95
- htmlFor: fieldIds.width,
96
- children: "Width"
97
- }),
98
- /* @__PURE__ */ jsx("input", {
99
- className: inputCls,
100
- id: fieldIds.width,
101
- min: 0,
102
- onChange: (e) => setWidth(Number(e.target.value) || 0),
103
- step: widthType === "pct" ? 5 : 100,
104
- type: "number",
105
- value: width
106
- }),
107
- /* @__PURE__ */ jsx("span", {
108
- className: "text-muted-foreground text-[11px]",
109
- children: widthType === "pct" ? "(50ths of %)" : "tw"
110
- })
111
- ]
112
- }),
113
- /* @__PURE__ */ jsxs("div", {
114
- className: "flex items-center gap-3",
115
- children: [/* @__PURE__ */ jsx("label", {
116
- className: labelCls,
117
- htmlFor: fieldIds.align,
118
- children: "Alignment"
119
- }), /* @__PURE__ */ jsxs("select", {
120
- className: inputCls,
121
- id: fieldIds.align,
122
- onChange: (e) => setJustification(e.target.value),
123
- value: justification,
124
- children: [
125
- /* @__PURE__ */ jsx("option", {
126
- value: "left",
127
- children: "Left"
128
- }),
129
- /* @__PURE__ */ jsx("option", {
130
- value: "center",
131
- children: "Center"
132
- }),
133
- /* @__PURE__ */ jsx("option", {
134
- value: "right",
135
- children: "Right"
136
- })
137
- ]
138
- })]
139
- })
140
- ]
141
- }),
142
- /* @__PURE__ */ jsxs("div", {
143
- className: "flex justify-end gap-2 border-t px-5 py-3",
144
- children: [/* @__PURE__ */ jsx(DialogClose, {
145
- className: "border-input rounded border px-4 py-1.5 text-[13px]",
146
- children: "Cancel"
147
- }), /* @__PURE__ */ jsx("button", {
148
- className: "bg-primary text-primary-foreground rounded px-4 py-1.5 text-[13px] font-medium",
149
- onClick: handleApply,
150
- type: "button",
151
- children: "Apply"
152
- })]
153
- })
154
- ]
155
- })] })
156
- });
157
- }
158
- //#endregion
159
- export { TablePropertiesDialog_exports as n, TablePropertiesDialog as t };