@seedgrid/fe-components 2026.3.31-8 → 2026.4.1
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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgDatatable.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgDatatable.d.ts","sourceRoot":"","sources":["../../src/inputs/SgDatatable.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import React from "react";
|
|
4
|
+
import { createPortal } from "react-dom";
|
|
4
5
|
import { Check, GripVertical, SlidersHorizontal } from "lucide-react";
|
|
5
6
|
import { SgButton } from "../buttons/SgButton";
|
|
6
7
|
import { SgGroupBox } from "../layout/SgGroupBox";
|
|
@@ -159,8 +160,11 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
159
160
|
const [internalGlobalFilter, setInternalGlobalFilter] = React.useState(globalFilter ?? "");
|
|
160
161
|
const [internalFilters, setInternalFilters] = React.useState(() => normalizeFilters(filters));
|
|
161
162
|
const columnManagerRef = React.useRef(null);
|
|
163
|
+
const columnManagerButtonRef = React.useRef(null);
|
|
164
|
+
const columnManagerPanelRef = React.useRef(null);
|
|
162
165
|
const [isColumnManagerOpen, setIsColumnManagerOpen] = React.useState(false);
|
|
163
166
|
const [draggingColumnKey, setDraggingColumnKey] = React.useState(null);
|
|
167
|
+
const [columnManagerPosition, setColumnManagerPosition] = React.useState(null);
|
|
164
168
|
const columnDescriptors = React.useMemo(() => columns.map((column, index) => ({
|
|
165
169
|
key: getColumnKey(column, index),
|
|
166
170
|
column,
|
|
@@ -223,15 +227,48 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
223
227
|
if (!isColumnManagerOpen)
|
|
224
228
|
return;
|
|
225
229
|
const handlePointerDown = (event) => {
|
|
226
|
-
|
|
230
|
+
const target = event.target;
|
|
231
|
+
if (columnManagerRef.current?.contains(target))
|
|
227
232
|
return;
|
|
228
|
-
if (
|
|
233
|
+
if (columnManagerPanelRef.current?.contains(target))
|
|
229
234
|
return;
|
|
230
235
|
setIsColumnManagerOpen(false);
|
|
231
236
|
};
|
|
232
237
|
document.addEventListener("mousedown", handlePointerDown);
|
|
233
238
|
return () => document.removeEventListener("mousedown", handlePointerDown);
|
|
234
239
|
}, [isColumnManagerOpen]);
|
|
240
|
+
const updateColumnManagerPosition = React.useCallback(() => {
|
|
241
|
+
const button = columnManagerButtonRef.current;
|
|
242
|
+
if (!button)
|
|
243
|
+
return;
|
|
244
|
+
const rect = button.getBoundingClientRect();
|
|
245
|
+
const panelWidth = 300;
|
|
246
|
+
const viewportPadding = 12;
|
|
247
|
+
const left = Math.min(Math.max(rect.left, viewportPadding), Math.max(viewportPadding, window.innerWidth - panelWidth - viewportPadding));
|
|
248
|
+
setColumnManagerPosition({
|
|
249
|
+
top: rect.bottom + 8,
|
|
250
|
+
left
|
|
251
|
+
});
|
|
252
|
+
}, []);
|
|
253
|
+
React.useLayoutEffect(() => {
|
|
254
|
+
if (!isColumnManagerOpen)
|
|
255
|
+
return;
|
|
256
|
+
updateColumnManagerPosition();
|
|
257
|
+
const raf = window.requestAnimationFrame(updateColumnManagerPosition);
|
|
258
|
+
return () => window.cancelAnimationFrame(raf);
|
|
259
|
+
}, [isColumnManagerOpen, updateColumnManagerPosition]);
|
|
260
|
+
React.useEffect(() => {
|
|
261
|
+
if (!isColumnManagerOpen)
|
|
262
|
+
return;
|
|
263
|
+
const handleViewportChange = () => updateColumnManagerPosition();
|
|
264
|
+
const useCapture = true;
|
|
265
|
+
window.addEventListener("resize", handleViewportChange);
|
|
266
|
+
window.addEventListener("scroll", handleViewportChange, useCapture);
|
|
267
|
+
return () => {
|
|
268
|
+
window.removeEventListener("resize", handleViewportChange);
|
|
269
|
+
window.removeEventListener("scroll", handleViewportChange, useCapture);
|
|
270
|
+
};
|
|
271
|
+
}, [isColumnManagerOpen, updateColumnManagerPosition]);
|
|
235
272
|
const orderedColumns = React.useMemo(() => {
|
|
236
273
|
const map = new Map(columnDescriptors.map((item) => [item.key, item]));
|
|
237
274
|
return columnOrder
|
|
@@ -494,32 +531,37 @@ function SgDatatableBase(props, imperativeRef) {
|
|
|
494
531
|
});
|
|
495
532
|
}, [columnDescriptors]);
|
|
496
533
|
const resolvedTitle = (groupBoxProps.title ?? title ?? "").trim() || " ";
|
|
497
|
-
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
534
|
+
return (_jsx("div", { className: className, style: style, children: _jsx(SgGroupBox, { ...groupBoxProps, title: resolvedTitle, children: _jsxs("div", { className: "space-y-3", children: [shouldShowToolbar ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showGlobalFilter ? (_jsx("input", { value: currentGlobalFilter, onChange: (event) => commitFilters(currentFilters, event.target.value), placeholder: globalFilterLabel, className: "min-w-[220px] flex-1 rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-input-bg,var(--sg-surface)))] px-3 py-2 text-sm text-[rgb(var(--sg-input-fg,var(--sg-text)))] placeholder:text-[rgb(var(--sg-input-placeholder,var(--sg-muted)))] outline-none focus:ring-2 focus:ring-[rgb(var(--sg-ring))]" })) : null, showClearFiltersButton ? (_jsx(SgButton, { size: "sm", appearance: "outline", onClick: clearFilters, children: clearFiltersLabel })) : null] })) : null, _jsxs("div", { className: "relative", ref: columnManagerRef, children: [showColumnManager ? (_jsx("div", { className: "mb-2 flex items-center justify-start", children: _jsx("button", { ref: columnManagerButtonRef, type: "button", "aria-label": resolvedColumnManagerLabel, title: resolvedColumnManagerLabel, onClick: () => setIsColumnManagerOpen((prev) => !prev), className: "inline-flex h-9 w-9 items-center justify-center rounded-md border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-[rgb(var(--sg-primary-600))] shadow-sm transition hover:bg-[rgb(var(--sg-primary-50))] hover:text-[rgb(var(--sg-primary-700))]", children: _jsx(SlidersHorizontal, { size: 18 }) }) })) : null, showColumnManager && isColumnManagerOpen && columnManagerPosition && typeof document !== "undefined"
|
|
535
|
+
? createPortal(_jsxs("div", { ref: columnManagerPanelRef, className: "fixed z-[1400] w-[300px] rounded-xl border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] shadow-xl", style: {
|
|
536
|
+
top: columnManagerPosition.top,
|
|
537
|
+
left: columnManagerPosition.left
|
|
538
|
+
}, children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-[rgb(var(--sg-border))] px-4 py-3", children: [_jsx(SlidersHorizontal, { size: 18, className: "text-[rgb(var(--sg-primary-600))]" }), _jsx("span", { className: "text-sm font-semibold text-[rgb(var(--sg-text))]", children: resolvedColumnManagerLabel })] }), _jsx("div", { className: "overflow-y-auto px-2 py-2", style: { maxHeight: toCssSize(columnManagerMaxHeight) }, children: _jsx("div", { className: "space-y-1", children: orderedColumns.map((item) => {
|
|
539
|
+
const isHidden = Boolean(hiddenColumnsMap[item.key]);
|
|
540
|
+
const isHideable = item.column.hideable !== false;
|
|
541
|
+
const isReorderable = item.column.reorderable !== false;
|
|
542
|
+
const canHideThisColumn = isHideable && (!isHidden ? visibleColumnCount > 1 : true);
|
|
543
|
+
const columnLabel = typeof item.column.header === "string" || typeof item.column.header === "number"
|
|
544
|
+
? String(item.column.header)
|
|
545
|
+
: item.column.field ?? item.key;
|
|
546
|
+
return (_jsxs("div", { draggable: isReorderable, onDragStart: () => setDraggingColumnKey(item.key), onDragOver: (event) => {
|
|
547
|
+
if (!isReorderable)
|
|
548
|
+
return;
|
|
549
|
+
event.preventDefault();
|
|
550
|
+
}, onDrop: (event) => {
|
|
551
|
+
event.preventDefault();
|
|
552
|
+
if (!isReorderable)
|
|
553
|
+
return;
|
|
554
|
+
if (!draggingColumnKey || draggingColumnKey === item.key)
|
|
555
|
+
return;
|
|
556
|
+
handleReorderColumn(draggingColumnKey, item.key);
|
|
557
|
+
setDraggingColumnKey(null);
|
|
558
|
+
}, onDragEnd: () => setDraggingColumnKey(null), className: cn("flex items-center gap-3 rounded-md px-2 py-2", draggingColumnKey === item.key ? "opacity-60" : "", "hover:bg-[rgb(var(--sg-primary-50))]"), children: [_jsx("button", { type: "button", disabled: !canHideThisColumn, onClick: () => toggleColumnVisibility(item.key), className: cn("inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-md border transition", !isHidden
|
|
559
|
+
? "border-[rgb(var(--sg-primary-600))] bg-[rgb(var(--sg-primary-600))] text-white"
|
|
560
|
+
: "border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))] text-transparent", !canHideThisColumn ? "cursor-not-allowed opacity-50" : "hover:scale-[1.02]"), children: _jsx(Check, { size: 14 }) }), _jsx("button", { type: "button", disabled: !canHideThisColumn, onClick: () => toggleColumnVisibility(item.key), className: cn("flex-1 truncate text-left text-sm", isHidden
|
|
561
|
+
? "text-[rgb(var(--sg-muted))]"
|
|
562
|
+
: "text-[rgb(var(--sg-text))]", !canHideThisColumn ? "cursor-not-allowed" : ""), children: columnLabel }), _jsx("div", { className: cn("inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-[rgb(var(--sg-muted))]", isReorderable ? "cursor-grab active:cursor-grabbing" : "opacity-40"), title: dragHandleLabel, children: _jsx(GripVertical, { size: 16 }) })] }, `manager-${item.key}`));
|
|
563
|
+
}) }) }), _jsxs("div", { className: "flex items-center gap-2 border-t border-[rgb(var(--sg-border))] px-3 py-3", children: [_jsx(SgButton, { size: "sm", appearance: "outline", onClick: restoreDefaultColumns, children: restoreColumnsLabel }), _jsx(SgButton, { size: "sm", appearance: "outline", onClick: showAllColumns, children: showAllColumnsLabel })] })] }), document.body)
|
|
564
|
+
: null, _jsx("div", { className: "overflow-x-auto rounded-lg border border-[rgb(var(--sg-border))] bg-[rgb(var(--sg-surface))]", children: _jsxs("table", { id: id, className: cn("min-w-full border-collapse text-sm", tableClassName), children: [_jsxs("thead", { children: [_jsx("tr", { className: "bg-[rgb(var(--sg-primary-50))]", children: visibleColumns.map((column, columnIndex) => {
|
|
523
565
|
const sortCandidate = column.sortField ?? column.field;
|
|
524
566
|
const isSorted = Boolean(sortCandidate) && sortCandidate === currentSortField;
|
|
525
567
|
const sortIcon = !column.sortable
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputText.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAwC,KAAK,aAAa,EAAE,MAAM,QAAQ,CAAC;AAGlF,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACzC,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC1D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC,CAAC;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC,WAAW,CAAC,CAAC;IACzE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IAC9C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACjD,CAAC;AAohBF,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAsElD"}
|
|
@@ -120,13 +120,16 @@ function SgInputTextBase(props) {
|
|
|
120
120
|
const value = stripAffixes(inputProps.value ?? inputProps.defaultValue ?? "");
|
|
121
121
|
return value.length;
|
|
122
122
|
});
|
|
123
|
-
React.
|
|
124
|
-
const
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
const syncFilledStateFromDom = React.useCallback(() => {
|
|
124
|
+
const nextValue = inputRef.current?.value ?? "";
|
|
125
|
+
const nextFilled = nextValue.length > 0;
|
|
126
|
+
const nextLength = nextValue.length;
|
|
127
|
+
setIsFilled((prev) => (prev === nextFilled ? prev : nextFilled));
|
|
128
128
|
setValueLength((prev) => (prev === nextLength ? prev : nextLength));
|
|
129
|
-
}, [
|
|
129
|
+
}, []);
|
|
130
|
+
React.useEffect(() => {
|
|
131
|
+
syncFilledStateFromDom();
|
|
132
|
+
}, [syncFilledStateFromDom]);
|
|
130
133
|
React.useEffect(() => {
|
|
131
134
|
if (inputProps.value === undefined)
|
|
132
135
|
return;
|
|
@@ -134,6 +137,27 @@ function SgInputTextBase(props) {
|
|
|
134
137
|
setIsFilled(raw.length > 0);
|
|
135
138
|
setValueLength(raw.length);
|
|
136
139
|
}, [inputProps.value, stripAffixes]);
|
|
140
|
+
React.useEffect(() => {
|
|
141
|
+
const node = inputRef.current;
|
|
142
|
+
if (!node)
|
|
143
|
+
return;
|
|
144
|
+
const sync = () => {
|
|
145
|
+
syncFilledStateFromDom();
|
|
146
|
+
};
|
|
147
|
+
// Browsers/password managers may hydrate the value without dispatching React events.
|
|
148
|
+
const timers = [
|
|
149
|
+
window.setTimeout(sync, 0),
|
|
150
|
+
window.setTimeout(sync, 100),
|
|
151
|
+
window.setTimeout(sync, 300)
|
|
152
|
+
];
|
|
153
|
+
node.addEventListener("input", sync);
|
|
154
|
+
node.addEventListener("change", sync);
|
|
155
|
+
return () => {
|
|
156
|
+
timers.forEach((timer) => window.clearTimeout(timer));
|
|
157
|
+
node.removeEventListener("input", sync);
|
|
158
|
+
node.removeEventListener("change", sync);
|
|
159
|
+
};
|
|
160
|
+
}, [syncFilledStateFromDom]);
|
|
137
161
|
React.useLayoutEffect(() => {
|
|
138
162
|
if (prefixRef.current) {
|
|
139
163
|
const next = prefixRef.current.offsetWidth;
|
|
@@ -222,6 +246,7 @@ function SgInputTextBase(props) {
|
|
|
222
246
|
props.onExit?.();
|
|
223
247
|
};
|
|
224
248
|
const handleFocus = () => {
|
|
249
|
+
syncFilledStateFromDom();
|
|
225
250
|
props.onEnter?.();
|
|
226
251
|
};
|
|
227
252
|
const handleClear = () => {
|
|
@@ -316,7 +341,17 @@ function SgInputTextBase(props) {
|
|
|
316
341
|
const outerLayoutStyle = labelPosition === "left"
|
|
317
342
|
? { ["--sg-input-label-width"]: resolvedLabelWidth }
|
|
318
343
|
: undefined;
|
|
319
|
-
const fieldNode = (_jsxs(_Fragment, { children: [
|
|
344
|
+
const fieldNode = (_jsxs(_Fragment, { children: [_jsx("style", { children: `
|
|
345
|
+
@keyframes sg-input-autofill-detect {
|
|
346
|
+
from {}
|
|
347
|
+
to {}
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
input:-webkit-autofill {
|
|
351
|
+
animation-name: sg-input-autofill-detect;
|
|
352
|
+
animation-duration: 0.01s;
|
|
353
|
+
}
|
|
354
|
+
` }), _jsxs("div", { className: "relative", children: [prefixText ? (_jsx("span", { ref: prefixRef, className: "pointer-events-none absolute left-0 top-0 z-10 flex h-11 items-center rounded-l-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: prefixText })) : null, props.prefixIcon ? (_jsx("span", { className: "pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-foreground/60", children: props.prefixIcon })) : null, _jsx("input", { id: props.id, type: props.type ?? "text", placeholder: placeholder, className: props.className ?? finalClass, style: {
|
|
320
355
|
borderRadius: resolvedBorderRadius,
|
|
321
356
|
paddingLeft: prefixPaddingStyle,
|
|
322
357
|
paddingRight: suffixPaddingStyle,
|
|
@@ -332,7 +367,7 @@ function SgInputTextBase(props) {
|
|
|
332
367
|
...(prefixText ? { borderTopLeftRadius: 0, borderBottomLeftRadius: 0, borderLeftWidth: 0 } : {}),
|
|
333
368
|
...(suffixText ? { borderTopRightRadius: 0, borderBottomRightRadius: 0, borderRightWidth: 0 } : {}),
|
|
334
369
|
...(resolvedInputProps.style ?? {})
|
|
335
|
-
}, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
370
|
+
}, maxLength: props.maxLength, readOnly: props.readOnly, disabled: props.enabled === false, inputMode: props.textInputType ?? resolvedInputProps.inputMode, ...resolvedInputProps, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, onAnimationStart: syncFilledStateFromDom }), suffixText ? (_jsx("span", { ref: suffixRef, className: "pointer-events-none absolute right-0 top-0 z-10 flex h-11 items-center rounded-r-md border border-border bg-muted/40 px-3 text-xs leading-none text-foreground/70", children: suffixText })) : null, isFloatLabel ? (_jsxs("label", { htmlFor: props.id, className: [
|
|
336
371
|
"absolute z-10 bg-[var(--sg-input-bg,hsl(var(--background)))] px-1 transition-all",
|
|
337
372
|
isFilled ? "-top-2 text-xs" : "top-3 text-sm",
|
|
338
373
|
hasError ? "text-[hsl(var(--destructive))]" : isFilled ? "text-[hsl(var(--primary))]" : "text-foreground/60",
|