@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/core/useTableState.js

@@ -0,0 +1,150 @@
+/*
+  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 { useCallback, useEffect, useRef, useState, useTransition } from 'react';
+import { type } from '@lowdefy/helpers';
+import { functionalUpdate } from '@tanstack/react-table';
+import createInitialState from './createInitialState.js';
+import deriveValue from './deriveValue.js';
+import getValueSignature from './getValueSignature.js';
+import isSameSignature from './isSameSignature.js';
+import resolveMountValue from './resolveMountValue.js';
+// Table state is the single source: one React state object holding every TanStack slice plus the
+// core's own (density, view passthrough, expanded). The block value is derived from it and written
+// with methods.setValue only after a committed change (sort, resize end, drop, selection). A value
+// that changes from outside (SetState, Reset) re-initialises the state; a null value (mount, Reset
+// to empty) is filled with the resolved default value without an onChange event. On mount only, a
+// null value may come from a feature instead (a persisted or saved view, `mountValue`).
+function useTableState({ api, config, data, methods, properties, value }) {
+    const [state, setState] = useState(()=>createInitialState({
+            value: resolveMountValue({
+                value,
+                config,
+                features: api.features.list,
+                properties
+            }),
+            config,
+            features: api.features,
+            rows: data
+        }));
+    const [isPending, startTransition] = useTransition();
+    const written = useRef(null);
+    const pendingCause = useRef(null);
+    const dataRef = useRef(data);
+    dataRef.current = data;
+    const signature = getValueSignature(value);
+    const [synced, setSynced] = useState({
+        signature,
+        config
+    });
+    if (!isSameSignature(synced.signature, signature) || synced.config !== config) {
+        setSynced({
+            signature,
+            config
+        });
+        if (synced.config !== config || !isSameSignature(signature, written.current)) {
+            setState(createInitialState({
+                value,
+                config,
+                features: api.features,
+                rows: data
+            }));
+        }
+    }
+    const updateSlice = useCallback((name, updater, options)=>{
+        const definition = api.features.sliceDefinitions[name];
+        pendingCause.current = options?.cause ?? definition.cause;
+        function apply() {
+            setState((previous)=>{
+                let next = functionalUpdate(updater, previous[name]);
+                if (definition.normalize) next = definition.normalize({
+                    next,
+                    api
+                });
+                return next === previous[name] ? previous : {
+                    ...previous,
+                    [name]: next
+                };
+            });
+        }
+        if (definition.transition) {
+            startTransition(apply);
+        } else {
+            apply();
+        }
+    }, []);
+    const setSliceSilently = useCallback((name, updater)=>{
+        setState((previous)=>{
+            const next = functionalUpdate(updater, previous[name]);
+            return next === previous[name] ? previous : {
+                ...previous,
+                [name]: next
+            };
+        });
+    }, []);
+    // Replaces the whole state from a value (a saved view loading), then commits it with this cause.
+    const loadValue = useCallback((nextValue, options)=>{
+        pendingCause.current = options.cause;
+        setState(createInitialState({
+            value: nextValue,
+            config: api.config,
+            features: api.features,
+            rows: dataRef.current
+        }));
+    }, []);
+    const commit = useCallback((cause)=>{
+        const nextValue = deriveValue({
+            state: api.state,
+            api
+        });
+        written.current = getValueSignature(nextValue);
+        methods.setValue(nextValue);
+        if (cause === 'init') return;
+        methods.triggerEvent({
+            name: 'onChange',
+            event: {
+                value: nextValue,
+                cause
+            }
+        });
+        api.features.list.forEach((feature)=>feature.onCommit?.({
+                cause,
+                value: nextValue,
+                api
+            }));
+    }, [
+        methods
+    ]);
+    useEffect(()=>{
+        const cause = pendingCause.current;
+        if (!cause) return;
+        pendingCause.current = null;
+        commit(cause);
+    }, [
+        state
+    ]);
+    useEffect(()=>{
+        if (type.isNone(value)) commit('init');
+    }, [
+        value
+    ]);
+    return {
+        isPending,
+        loadValue,
+        setSliceSilently,
+        state,
+        updateSlice
+    };
+}
+export default useTableState;

package/dist/core/useViewportSize.js

@@ -0,0 +1,40 @@
+/*
+  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 { useLayoutEffect, useState } from 'react';
+// The scroller's client size, for flex columns and the `virtual: auto` width rule. Only a real
+// size change renders; scrolling never does.
+function useViewportSize(ref) {
+    const [size, setSize] = useState({
+        width: 0,
+        height: 0
+    });
+    useLayoutEffect(()=>{
+        const element = ref.current;
+        function measure() {
+            const width = element.clientWidth;
+            const height = element.clientHeight;
+            setSize((previous)=>previous.width === width && previous.height === height ? previous : {
+                    width,
+                    height
+                });
+        }
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, []);
+    return size;
+}
+export default useViewportSize;

package/dist/e2e.js

@@ -0,0 +1,16 @@
+/*
+  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.
+*/ export { default as Table } from './blocks/Table/e2e.js';
+export { default as TableInput } from './blocks/TableInput/e2e.js';

package/dist/features/bulk/BulkBar.js

@@ -0,0 +1,46 @@
+/*
+  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 { Button } from 'antd';
+import './bulk.css';
+const numberFormat = new Intl.NumberFormat();
+// "N selected · Select all M matching · Clear" plus the `bulkActions` slot (Linear, Attio). It
+// sits below the grid, so rows never move under the pointer when it appears.
+function BulkBar({ api, matching, selected, selectionMode }) {
+    const { content } = api;
+    const canSelectAll = api.config.rowSelection.type === 'checkbox' && selectionMode !== 'all' && selected < matching;
+    return /*#__PURE__*/ React.createElement("div", {
+        "aria-label": "Bulk actions",
+        className: "lf-table-bulk-bar",
+        "data-lf-bulk-bar": "",
+        role: "toolbar"
+    }, /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-bulk-count",
+        "data-lf-bulk-count": ""
+    }, numberFormat.format(selected), " selected"), canSelectAll ? /*#__PURE__*/ React.createElement(Button, {
+        "data-lf-bulk-action": "select-all",
+        onClick: ()=>api.actions.selectAllMatching(),
+        size: "small",
+        type: "link"
+    }, "Select all ", numberFormat.format(matching), " matching") : null, /*#__PURE__*/ React.createElement(Button, {
+        "data-lf-bulk-action": "clear",
+        onClick: ()=>api.actions.clearSelection(),
+        size: "small",
+        type: "link"
+    }, "Clear"), content.bulkActions ? /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-bulk-actions"
+    }, content.bulkActions()) : null);
+}
+export default BulkBar;

package/dist/features/bulk/bulk.css

@@ -0,0 +1,57 @@
+/*
+  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.
+*/
+
+@layer components {
+  .lf-table-bulk-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 4px 8px;
+    padding: 6px 12px;
+    border-top: 1px solid var(--lf-border);
+    background: var(--lf-row-selected);
+  }
+
+  /* The bar's links (Select all matching, Clear) sit on the primary tint, where antd's link
+     colour is low contrast in dark themes: the primary colour mixed toward the text base keeps it
+     readable in both. */
+  .lf-table-bulk-bar .ant-btn-link {
+    color: color-mix(
+      in srgb,
+      var(--ant-color-primary, #1677ff) 60%,
+      var(--ant-color-text-base, #000)
+    );
+  }
+
+  .lf-table-bulk-bar .ant-btn-link:hover {
+    text-decoration: underline;
+  }
+
+  .lf-table-bulk-count {
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .lf-table-bulk-actions {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    min-width: 0;
+  }
+}

package/dist/features/bulk/bulkFeature.js

@@ -0,0 +1,28 @@
+/*
+  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 createSelectAllMatching from './createSelectAllMatching.js';
+import useBulkBar from './useBulkBar.js';
+// The bulk action bar shown while rows are selected (D7, ux.md pattern 8).
+const bulkFeature = {
+    name: 'bulk',
+    actions: {
+        selectAllMatching: createSelectAllMatching
+    },
+    methods: {
+        selectAllMatching: createSelectAllMatching
+    },
+    useFeature: useBulkBar
+};
+export default bulkFeature;

package/dist/features/bulk/countSelection.js

@@ -0,0 +1,27 @@
+/*
+  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';
+// The number of selected rows. With `{ all: true, except }` and a server total, every row the
+// server matches is selected except the exceptions (rows the user unchecked since, loaded or
+// not); otherwise it is the selected keys (with `preserve`, including rows that are not loaded).
+function countSelection({ api, state }) {
+    let selected = 0;
+    Object.values(state.rowSelection).forEach((isSelected)=>{
+        if (isSelected === true) selected += 1;
+    });
+    if (state.selectionMode !== 'all' || !type.isNumber(api.total)) return selected;
+    return api.total - api.selectionExcept.size;
+}
+export default countSelection;

package/dist/features/bulk/createSelectAllMatching.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.
+*/ // Action and block method `selectAllMatching()`: selects every row the view matches as
+// `{ all: true, except: [], filter, search }`, never a list of every key (D7). The filtered rows
+// (in server mode the loaded ones, the server resolves the rest) are marked selected; rows loaded
+// later that match are selected too while the selection stays "all". Earlier exceptions are
+// dropped. A later filter or search change ends the selection (useSelection).
+function createSelectAllMatching(api) {
+    return function selectAllMatching() {
+        if (api.config.rowSelection?.type !== 'checkbox') return false;
+        const selection = {};
+        api.table.getFilteredRowModel().rows.forEach((row)=>{
+            selection[row.id] = true;
+        });
+        api.selectionExcept.clear();
+        api.updateSlice('selectionMode', ()=>'all', {
+            cause: 'select'
+        });
+        api.updateSlice('selectionView', ()=>({
+                filter: api.state.filter,
+                search: api.state.search
+            }), {
+            cause: 'select'
+        });
+        api.updateSlice('rowSelection', ()=>selection, {
+            cause: 'select'
+        });
+        return true;
+    };
+}
+export default createSelectAllMatching;

package/dist/features/bulk/useBulkBar.js

@@ -0,0 +1,42 @@
+/*
+  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, { useMemo } from 'react';
+import BulkBar from './BulkBar.js';
+import countSelection from './countSelection.js';
+import getRecordCount from '../../core/getRecordCount.js';
+function useBulkBar({ api, config, state }) {
+    const selected = useMemo(()=>config.rowSelection ? countSelection({
+            api,
+            state
+        }) : 0, [
+        config.rowSelection,
+        state.rowSelection,
+        state.selectionMode
+    ]);
+    if (selected === 0) return null;
+    return {
+        regions: {
+            bottom: /*#__PURE__*/ React.createElement(BulkBar, {
+                api: api,
+                matching: getRecordCount({
+                    api
+                }),
+                selected: selected,
+                selectionMode: state.selectionMode
+            })
+        }
+    };
+}
+export default useBulkBar;

package/dist/features/clipboard/clipboardFeature.js

@@ -0,0 +1,24 @@
+/*
+  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 handleCopyKeyDown from './handleCopyKeyDown.js';
+// Copy (Table and TableInput): Ctrl/Cmd+C copies the focused cell, or the selected rows, as TSV
+// of the displayed text. Paste is TableInput's (pasteFeature).
+const clipboardFeature = {
+    name: 'clipboard',
+    gridHandlers: {
+        keydown: handleCopyKeyDown
+    }
+};
+export default clipboardFeature;

package/dist/features/clipboard/createPasteCells.js

@@ -0,0 +1,61 @@
+/*
+  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 applyChangeUpdates from '../editing/applyChangeUpdates.js';
+import parseTsv from './parseTsv.js';
+import planPaste from './planPaste.js';
+import isDataItem from '../../core/isDataItem.js';
+function describeSkipped(skipped) {
+    return skipped.map((cell)=>`${cell.column ?? '(no column)'}: ${cell.reason}`).join('\n');
+}
+// TableInput paste: TSV from the clipboard into the editable cells from the focused cell on, as
+// one write (one setValue, one onChange with cause `paste`, one undo step). Cells whose text does
+// not fit their column are skipped: they are listed in the event's `skipped` and in a notice
+// under the table.
+function createPasteCells(api) {
+    return function pasteCells({ text, rowIndex, colIndex }) {
+        const grid = parseTsv(text);
+        if (grid.length === 0) return false;
+        const { updates, skipped } = planPaste({
+            grid,
+            // The data rows from the focused one down: pasted lines skip group headers and detail rows.
+            rows: api.rows.slice(rowIndex).filter(isDataItem),
+            cols: api.layout.cols,
+            specs: api.editing.specs,
+            getKey: api.config.getKey,
+            startRow: 0,
+            startCol: colIndex
+        });
+        if (skipped.length > 0) {
+            const count = skipped.length;
+            api.editing.layer?.notify({
+                text: `${count} pasted ${count === 1 ? 'cell was' : 'cells were'} skipped.`,
+                details: describeSkipped(skipped)
+            });
+        }
+        const changes = applyChangeUpdates({
+            changes: api.editing.changes,
+            updates,
+            dataByKey: api.editing.getDataByKey()
+        });
+        return api.actions.writeChanges({
+            changes,
+            cause: 'paste',
+            event: {
+                skipped
+            }
+        });
+    };
+}
+export default createPasteCells;

package/dist/features/clipboard/getCopyText.js

@@ -0,0 +1,57 @@
+/*
+  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 getExportValue from '@lowdefy/blocks-antd/table/getExportValue.js';
+import serializeTsv from './serializeTsv.js';
+import isDataItem from '../../core/isDataItem.js';
+function cellText({ col, row }) {
+    return getExportValue({
+        column: col.column,
+        value: col.accessor(row.original),
+        row: row.original,
+        formatted: true
+    });
+}
+// What Ctrl/Cmd+C copies (D11, D12): the selected rows when there is a selection (visible data
+// columns in view order, rows in display order), otherwise the focused cell. Always the displayed
+// text, as TSV, so it pastes into a spreadsheet cell for cell.
+function getCopyText({ api, rowId, colKey }) {
+    const cols = api.layout.cols.filter((col)=>!col.special);
+    const selection = api.state.rowSelection ?? {};
+    const selected = api.config.rowSelection ? api.rows.filter((row)=>isDataItem(row) && selection[row.id]) : [];
+    if (selected.length > 0) {
+        return serializeTsv(selected.map((row)=>cols.map((col)=>cellText({
+                    col,
+                    row
+                }))));
+    }
+    const col = api.layout.byKey.get(colKey);
+    if (!col || col.special) return null;
+    if (rowId === null) return serializeTsv([
+        [
+            col.column.title
+        ]
+    ]);
+    const row = api.table.getRow(rowId, true);
+    if (!row) return null;
+    return serializeTsv([
+        [
+            cellText({
+                col,
+                row
+            })
+        ]
+    ]);
+}
+export default getCopyText;

package/dist/features/clipboard/handleCopyKeyDown.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 getCopyText from './getCopyText.js';
+// Ctrl/Cmd+C on a focused cell. A text selection inside the table wins: the browser copies that
+// as usual. Copy is always on (D15): `keyboard: false` turns off cell navigation, not the
+// clipboard.
+function handleCopyKeyDown(event, api) {
+    if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'c') return false;
+    const cell = event.target.closest('[data-lf-cell]');
+    if (!cell || !api.contains(cell) || event.target !== cell) return false;
+    const selection = window.getSelection?.();
+    if (selection && !selection.isCollapsed && selection.toString() !== '') return false;
+    const rowElement = cell.closest('[data-row-index]');
+    const rowId = Number(rowElement.dataset.rowIndex) < 0 ? null : rowElement.dataset.rowKey;
+    const text = getCopyText({
+        api,
+        rowId,
+        colKey: cell.dataset.colKey
+    });
+    if (text === null) return false;
+    event.preventDefault();
+    navigator.clipboard?.writeText(text);
+    return true;
+}
+export default handleCopyKeyDown;