@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/clipboard/parseTsv.js

@@ -0,0 +1,70 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ // Clipboard TSV as spreadsheets write it: tabs between fields, CRLF or LF between rows, and a
+// field that holds a tab, newline or quote wrapped in quotes with inner quotes doubled. The
+// trailing newline Excel and Sheets add after the last row does not make an extra empty row.
+function parseTsv(text) {
+    const source = String(text ?? '');
+    const rows = [];
+    let row = [];
+    let field = '';
+    let quoted = false;
+    let i = 0;
+    while(i < source.length){
+        const char = source[i];
+        if (quoted) {
+            if (char === '"' && source[i + 1] === '"') {
+                field += '"';
+                i += 2;
+                continue;
+            }
+            if (char === '"') {
+                quoted = false;
+                i += 1;
+                continue;
+            }
+            field += char;
+            i += 1;
+            continue;
+        }
+        if (char === '"' && field === '') {
+            quoted = true;
+            i += 1;
+            continue;
+        }
+        if (char === '\t') {
+            row.push(field);
+            field = '';
+            i += 1;
+            continue;
+        }
+        if (char === '\r' || char === '\n') {
+            row.push(field);
+            rows.push(row);
+            row = [];
+            field = '';
+            i += char === '\r' && source[i + 1] === '\n' ? 2 : 1;
+            continue;
+        }
+        field += char;
+        i += 1;
+    }
+    if (field !== '' || row.length > 0) {
+        row.push(field);
+        rows.push(row);
+    }
+    return rows;
+}
+export default parseTsv;

package/dist/features/clipboard/pasteFeature.js

@@ -0,0 +1,26 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import createPasteCells from './createPasteCells.js';
+import usePasteListener from './usePasteListener.js';
+// Paste (TableInput): TSV from the clipboard into editable cells from the focused cell, planned by
+// row key (planPaste) and written as one changeset. Loaded with TableInput only.
+const pasteFeature = {
+    name: 'paste',
+    actions: {
+        pasteCells: createPasteCells
+    },
+    useGridFeature: usePasteListener
+};
+export default pasteFeature;

package/dist/features/clipboard/planPaste.js

@@ -0,0 +1,101 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import coerceCellValue from '../editing/coerceCellValue.js';
+import isCellEditable from '../editing/isCellEditable.js';
+import setRowField from '../editing/setRowField.js';
+import validateCellValue from '../editing/validateCellValue.js';
+// Maps a pasted TSV grid onto the table from the focused cell: row i of the grid lands on the
+// i-th display row below it, column j on the j-th layout column to its right. Each target is
+// resolved to its row key (never its display index), coerced to the column's type and
+// validated. Cells that cannot take their text are skipped with the reason, never half-written.
+// Returns { updates: [{ rowKey, field, value }], skipped: [{ rowKey, column, text, reason }] }.
+function planPaste({ grid, rows, cols, specs, getKey, startRow, startCol }) {
+    const updates = [];
+    const skipped = [];
+    grid.forEach((line, i)=>{
+        const row = rows[startRow + i];
+        line.forEach((text, j)=>{
+            const col = cols[startCol + j];
+            if (!row || !col || col.special) {
+                skipped.push({
+                    rowKey: null,
+                    column: col?.key ?? null,
+                    text,
+                    reason: 'Outside the table.'
+                });
+                return;
+            }
+            const rowKey = getKey(row.original);
+            const spec = specs.get(col.key);
+            const previous = col.accessor(row.original);
+            if (!isCellEditable({
+                spec,
+                row: row.original,
+                value: previous
+            })) {
+                skipped.push({
+                    rowKey,
+                    column: col.key,
+                    text,
+                    reason: 'Not editable.'
+                });
+                return;
+            }
+            const coerced = coerceCellValue({
+                spec,
+                text,
+                previous
+            });
+            if (coerced.error) {
+                skipped.push({
+                    rowKey,
+                    column: col.key,
+                    text,
+                    reason: coerced.error
+                });
+                return;
+            }
+            const nextRow = setRowField({
+                row: row.original,
+                field: spec.field,
+                value: coerced.value
+            });
+            const message = validateCellValue({
+                spec,
+                row: nextRow,
+                value: coerced.value
+            });
+            if (message !== null) {
+                skipped.push({
+                    rowKey,
+                    column: col.key,
+                    text,
+                    reason: message
+                });
+                return;
+            }
+            updates.push({
+                rowKey,
+                field: spec.field,
+                value: coerced.value
+            });
+        });
+    });
+    return {
+        updates,
+        skipped
+    };
+}
+export default planPaste;

package/dist/features/clipboard/serializeTsv.js

@@ -0,0 +1,25 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { type } from '@lowdefy/helpers';
+function toField(value) {
+    const text = type.isNone(value) ? '' : String(value);
+    if (!/[\t\r\n"]/.test(text)) return text;
+    return `"${text.replace(/"/g, '""')}"`;
+}
+// The inverse of parseTsv: a grid of values as TSV a spreadsheet pastes into cells.
+function serializeTsv(grid) {
+    return grid.map((row)=>row.map(toField).join('\t')).join('\n');
+}
+export default serializeTsv;

package/dist/features/clipboard/usePasteListener.js

@@ -0,0 +1,45 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import { useEffect } from 'react';
+const NONE = {};
+// Ctrl/Cmd+V is read from the `paste` event, not the key: the event carries the clipboard text
+// without a permission prompt. It is fired at the focused cell and delegated from the root (one
+// listener per table, like the grid's other events). Pastes into an open editor are the editor's.
+function usePasteListener({ api }) {
+    useEffect(()=>{
+        const root = api.rootRef.current;
+        if (!root) return undefined;
+        function onPaste(event) {
+            if (!api.editing?.input || !api.config.keyboard) return;
+            const cell = event.target.closest?.('[data-lf-cell]');
+            if (!cell || !api.contains(cell) || event.target.closest('[data-lf-editor]')) return;
+            const rowElement = cell.closest('[data-row-index]');
+            const rowIndex = Number(rowElement?.dataset.rowIndex);
+            if (!(rowIndex >= 0)) return;
+            const text = event.clipboardData?.getData('text/plain');
+            if (!text) return;
+            event.preventDefault();
+            api.actions.pasteCells({
+                text,
+                rowIndex,
+                colIndex: Number(cell.dataset.colIndex)
+            });
+        }
+        root.addEventListener('paste', onPaste);
+        return ()=>root.removeEventListener('paste', onPaste);
+    }, []);
+    return NONE;
+}
+export default usePasteListener;

package/dist/features/columnManager/ColumnManager.js

@@ -0,0 +1,253 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Button, Checkbox, Input } from 'antd';
+import applyManagerRegions from './applyManagerRegions.js';
+import buildManagerSequence from './buildManagerSequence.js';
+import DragHandleIcon from './DragHandleIcon.js';
+import getManagerEntries from './getManagerEntries.js';
+import getPlainTitle from '../filtering/getPlainTitle.js';
+import moveSequenceEntry from './moveSequenceEntry.js';
+import sequenceToRegions from './sequenceToRegions.js';
+import snapListHeight from './snapListHeight.js';
+import getListRoom from './getListRoom.js';
+import updateScrollHints from './updateScrollHints.js';
+const BOUNDARY_LABELS = {
+    start: 'Pinned to start above',
+    end: 'Pinned to end below'
+};
+function commitSequence({ api, sequence }) {
+    const next = applyManagerRegions({
+        state: api.state,
+        regions: sequenceToRegions(sequence)
+    });
+    api.updateSlice('columnOrder', ()=>next.columnOrder);
+    api.updateSlice('columnPinning', ()=>next.columnPinning);
+}
+function setVisible({ api, key, visible }) {
+    api.updateSlice('columnVisibility', (visibility)=>({
+            ...visibility,
+            [key]: visible
+        }));
+}
+// The column manager list. Visible columns show in table order with the two pinned boundaries
+// between them; drag a handle (or press Alt+ArrowUp / Alt+ArrowDown on it) to move a column or a
+// boundary. Each drop, checkbox or reset is one `columns` change. Searching filters the list and
+// turns reordering off, since positions in a filtered list are ambiguous.
+function ColumnManager({ api }) {
+    const [search, setSearch] = useState('');
+    const [drag, setDrag] = useState(null);
+    const [drop, setDrop] = useState(null);
+    const focusAfterMove = useRef(null);
+    const listRef = useRef(null);
+    const columnsByKey = new Map(api.config.columns.map((column)=>[
+            column.key,
+            column
+        ]));
+    const entries = getManagerEntries({
+        state: api.state
+    });
+    const sequence = buildManagerSequence(entries);
+    const visibleCount = entries.start.length + entries.center.length + entries.end.length;
+    const term = search.trim().toLowerCase();
+    const searching = term !== '';
+    const matches = (key)=>{
+        const column = columnsByKey.get(key);
+        return getPlainTitle(column).toLowerCase().includes(term) || column.key.toLowerCase().includes(term);
+    };
+    function sizeList() {
+        const list = listRef.current;
+        const anchor = api.rootRef.current?.querySelector('.lf-table-manager-anchor');
+        snapListHeight({
+            limit: getListRoom({
+                anchor,
+                list
+            }),
+            list
+        });
+    }
+    useLayoutEffect(sizeList);
+    // The popover lays its content out hidden first, so size the list again once it has a size, and
+    // when the viewport changes.
+    useEffect(()=>{
+        const observer = new ResizeObserver(sizeList);
+        observer.observe(listRef.current);
+        window.addEventListener('resize', sizeList);
+        return ()=>{
+            observer.disconnect();
+            window.removeEventListener('resize', sizeList);
+        };
+    }, []);
+    useEffect(()=>{
+        if (focusAfterMove.current === null) return;
+        const handle = listRef.current?.querySelector(`[data-drag-id="${CSS.escape(focusAfterMove.current)}"]`);
+        focusAfterMove.current = null;
+        handle?.focus();
+    });
+    function move({ from, to }) {
+        const next = moveSequenceEntry({
+            sequence,
+            from,
+            to
+        });
+        if (next !== sequence) commitSequence({
+            api,
+            sequence: next
+        });
+    }
+    function onHandleKeyDown(event, index) {
+        if (!event.altKey || event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+        event.preventDefault();
+        const to = event.key === 'ArrowUp' ? index - 1 : index + 2;
+        if (to < 0 || to > sequence.length) return;
+        focusAfterMove.current = sequence[index].id;
+        move({
+            from: index,
+            to
+        });
+    }
+    function onDragOver(event, index) {
+        if (drag === null) return;
+        event.preventDefault();
+        const rect = event.currentTarget.getBoundingClientRect();
+        const after = event.clientY > rect.top + rect.height / 2;
+        const position = after ? index + 1 : index;
+        if (drop !== position) setDrop(position);
+    }
+    function onDrop(event) {
+        event.preventDefault();
+        if (drag !== null && drop !== null) move({
+            from: drag,
+            to: drop
+        });
+        setDrag(null);
+        setDrop(null);
+    }
+    function renderHandle({ entry, index, label }) {
+        return /*#__PURE__*/ React.createElement("button", {
+            "aria-label": `Move ${label}`,
+            className: "lf-table-manager-handle",
+            "data-drag-id": entry.id,
+            draggable: true,
+            onDragEnd: ()=>{
+                setDrag(null);
+                setDrop(null);
+            },
+            onDragStart: (event)=>{
+                event.dataTransfer.effectAllowed = 'move';
+                event.dataTransfer.setData('text/plain', entry.id);
+                setDrag(index);
+            },
+            onKeyDown: (event)=>onHandleKeyDown(event, index),
+            type: "button"
+        }, /*#__PURE__*/ React.createElement(DragHandleIcon, null));
+    }
+    function dropSide(index) {
+        if (drop === index) return 'before';
+        if (drop === index + 1 && index === sequence.length - 1) return 'after';
+        return undefined;
+    }
+    function renderVisible(entry, index) {
+        if (entry.boundary) {
+            if (searching) return null;
+            return /*#__PURE__*/ React.createElement("div", {
+                className: "lf-table-manager-boundary",
+                "data-boundary": entry.boundary,
+                "data-lf-manager-boundary": "",
+                key: entry.id,
+                "data-drop": dropSide(index),
+                onDragOver: (event)=>onDragOver(event, index),
+                onDrop: onDrop
+            }, renderHandle({
+                entry,
+                index,
+                label: `${entry.boundary} pinned boundary`
+            }), /*#__PURE__*/ React.createElement("span", {
+                className: "lf-table-manager-boundary-label"
+            }, BOUNDARY_LABELS[entry.boundary]));
+        }
+        if (searching && !matches(entry.key)) return null;
+        const column = columnsByKey.get(entry.key);
+        const title = getPlainTitle(column);
+        return /*#__PURE__*/ React.createElement("div", {
+            className: "lf-table-manager-item",
+            "data-col-key": entry.key,
+            "data-lf-manager-item": "",
+            "data-visible": "",
+            key: entry.id,
+            "data-drop": dropSide(index),
+            onDragOver: (event)=>onDragOver(event, index),
+            onDrop: onDrop
+        }, searching ? null : renderHandle({
+            entry,
+            index,
+            label: title
+        }), /*#__PURE__*/ React.createElement(Checkbox, {
+            checked: true,
+            disabled: visibleCount <= 1,
+            onChange: ()=>setVisible({
+                    api,
+                    key: entry.key,
+                    visible: false
+                })
+        }, title));
+    }
+    const hidden = entries.hidden.filter((key)=>!searching || matches(key));
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-column-manager",
+        "data-lf-column-manager": "",
+        onKeyDown: (event)=>{
+            if (event.key !== 'Escape') return;
+            event.stopPropagation();
+            api.actions.closeColumnManager();
+        }
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-overlay-title"
+    }, "Columns"), /*#__PURE__*/ React.createElement(Input, {
+        allowClear: true,
+        "aria-label": "Search columns",
+        autoFocus: true,
+        onChange: (event)=>setSearch(event.target.value),
+        placeholder: "Search columns",
+        size: "small",
+        value: search
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-manager-list",
+        onScroll: (event)=>updateScrollHints(event.currentTarget),
+        ref: listRef
+    }, sequence.map(renderVisible), hidden.length ? /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-manager-heading"
+    }, "Hidden") : null, hidden.map((key)=>/*#__PURE__*/ React.createElement("div", {
+            className: "lf-table-manager-item",
+            "data-col-key": key,
+            "data-lf-manager-item": "",
+            key: `hidden:${key}`
+        }, /*#__PURE__*/ React.createElement("span", {
+            className: "lf-table-manager-handle-spacer"
+        }), /*#__PURE__*/ React.createElement(Checkbox, {
+            checked: false,
+            onChange: ()=>setVisible({
+                    api,
+                    key,
+                    visible: true
+                })
+        }, getPlainTitle(columnsByKey.get(key)))))), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-overlay-footer"
+    }, /*#__PURE__*/ React.createElement(Button, {
+        onClick: ()=>api.actions.resetColumns(),
+        size: "small"
+    }, "Reset to default")));
+}
+export default ColumnManager;

package/dist/features/columnManager/ColumnManagerPopover.js

@@ -0,0 +1,37 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+import { Popover } from 'antd';
+import ColumnManager from './ColumnManager.js';
+// Anchored to the table's top end corner, below the header.
+function ColumnManagerPopover({ api }) {
+    return /*#__PURE__*/ React.createElement(Popover, {
+        arrow: false,
+        content: /*#__PURE__*/ React.createElement(ColumnManager, {
+            api: api
+        }),
+        onOpenChange: (open)=>{
+            if (!open) api.actions.closeColumnManager();
+        },
+        open: true,
+        placement: "bottomRight",
+        trigger: [
+            'click'
+        ]
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-manager-anchor"
+    }));
+}
+export default ColumnManagerPopover;

package/dist/features/columnManager/DragHandleIcon.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import React from 'react';
+function DragHandleIcon() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        "aria-hidden": "true",
+        className: "lf-table-icon",
+        viewBox: "0 0 16 16"
+    }, [
+        4,
+        8,
+        12
+    ].map((y)=>/*#__PURE__*/ React.createElement(React.Fragment, {
+            key: y
+        }, /*#__PURE__*/ React.createElement("circle", {
+            cx: "6",
+            cy: y,
+            fill: "currentColor",
+            r: "1.1"
+        }), /*#__PURE__*/ React.createElement("circle", {
+            cx: "10",
+            cy: y,
+            fill: "currentColor",
+            r: "1.1"
+        }))));
+}
+export default DragHandleIcon;

package/dist/features/columnManager/LazyColumnManagerPopover.js

@@ -0,0 +1,19 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import lazyComponent from '../../core/lazyComponent.js';
+// The column manager, loaded when it first opens (the Columns button and the header menu preload
+// it).
+const LazyColumnManagerPopover = lazyComponent(()=>import('./ColumnManagerPopover.js'));
+export default LazyColumnManagerPopover;

package/dist/features/columnManager/applyManagerRegions.js

@@ -0,0 +1,43 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/ import moveKeys from '../ordering/moveKeys.js';
+// The column state for a reordered manager list: visible columns take the view-order slots they
+// already held in their new order (hidden columns keep theirs), and the pinned regions follow the
+// boundaries. Hidden pinned columns stay pinned.
+function applyManagerRegions({ state, regions }) {
+    const { columnOrder, columnPinning, columnVisibility } = state;
+    const isHidden = (key)=>columnVisibility[key] === false;
+    return {
+        columnOrder: moveKeys({
+            order: columnOrder,
+            sequence: [
+                ...regions.start,
+                ...regions.center,
+                ...regions.end
+            ]
+        }),
+        columnPinning: {
+            start: [
+                ...columnPinning.start.filter(isHidden),
+                ...regions.start
+            ],
+            end: [
+                ...regions.end,
+                ...columnPinning.end.filter(isHidden)
+            ]
+        }
+    };
+}
+export default applyManagerRegions;