@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/density/getViewWrapColumn.js

@@ -0,0 +1,53 @@
+/*
+  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';
+import getCellLayout from '@lowdefy/blocks-antd/table/getCellLayout.js';
+// Column types whose text reads on several lines. Tags, statuses, numbers and dates keep their
+// single-line layout.
+const WRAP_TYPES = new Set([
+    'text',
+    'email',
+    'phone',
+    'url',
+    'link',
+    'html',
+    'relation'
+]);
+// Wrapped copies, one per column object, so layout columns stay stable across renders.
+const wrapped = new WeakMap();
+// With `view.wrap`, every text-like column without its own line layout (`wrap`, or `ellipsis`
+// lines) wraps: its cells get the wrap class, and its rows are measured (isMeasuredColumn).
+function getViewWrapColumn(column) {
+    if (column.wrap || type.isInt(column.ellipsis) || !WRAP_TYPES.has(column.type)) return column;
+    let copy = wrapped.get(column);
+    if (copy === undefined) {
+        const layout = getCellLayout({
+            ...column,
+            wrap: true
+        });
+        copy = {
+            ...column,
+            wrap: true,
+            compiled: {
+                ...column.compiled,
+                className: layout.className,
+                style: layout.style
+            }
+        };
+        wrapped.set(column, copy);
+    }
+    return copy;
+}
+export default getViewWrapColumn;

package/dist/features/density/initDensity.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';
+import densityHeights from '../../core/densityHeights.js';
+import pickViewPart from '../../core/pickViewPart.js';
+// The view's density, else the one `size` sets (TableLight's `size`, the same names).
+function initDensity({ value, defaultView, config }) {
+    const density = pickViewPart({
+        value,
+        defaultView,
+        key: 'density'
+    });
+    return type.isUndefined(densityHeights[density]) ? config.defaultDensity : density;
+}
+export default initDensity;

package/dist/features/density/initWrap.js

@@ -0,0 +1,23 @@
+/*
+  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 pickViewPart from '../../core/pickViewPart.js';
+function initWrap({ value, defaultView }) {
+    return pickViewPart({
+        value,
+        defaultView,
+        key: 'wrap'
+    }) === true;
+}
+export default initWrap;

package/dist/features/editing/AddRowButton.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 React from 'react';
+// TableInput's "+ Add row" row under the grid (`addRow: true`).
+function AddRowButton({ api, text }) {
+    return /*#__PURE__*/ React.createElement("button", {
+        className: "lf-table-add-row",
+        "data-lf-add-row": "",
+        onClick: ()=>api.actions.addRow(),
+        type: "button"
+    }, /*#__PURE__*/ React.createElement("span", {
+        "aria-hidden": "true",
+        className: "lf-table-add-row-icon"
+    }, "+"), text ?? 'Add row');
+}
+export default AddRowButton;

package/dist/features/editing/CellEditor.js

@@ -0,0 +1,284 @@
+/*
+  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, useMemo, useRef, useState } from 'react';
+import { DatePicker, Input, InputNumber, Rate, Select, Switch, Tooltip } from 'antd';
+import SelectedTag from './SelectedTag.js';
+import toEditorDraft from './toEditorDraft.js';
+import toSelectOptions from './toSelectOptions.js';
+const POPUP_CLASS = 'lf-table-editor-popup';
+const POPUP_KINDS = new Set([
+    'date',
+    'datetime',
+    'select',
+    'multiSelect'
+]);
+const FOCUS_SELECTOR = 'input, [role="switch"], [role="radiogroup"], .ant-rate';
+function filterOption(search, option) {
+    return String(option?.text ?? '').toLowerCase().includes(search.toLowerCase());
+}
+// The count of picked values that do not fit the tags editor, as the cell shows it.
+function renderMoreTags(omitted) {
+    return /*#__PURE__*/ React.createElement("span", {
+        className: "lf-table-more"
+    }, "+", omitted.length);
+}
+// A select column without options has nothing to pick from: it edits as text.
+function getKind(spec) {
+    if (spec.kind === 'select' && !spec.options) return 'text';
+    return spec.kind;
+}
+function focusControl({ wrapper, seeded }) {
+    const control = wrapper?.querySelector(FOCUS_SELECTOR);
+    if (!control) return;
+    control.focus({
+        preventScroll: true
+    });
+    if (control.tagName !== 'INPUT' || control.type === 'hidden') return;
+    if (seeded) {
+        const end = control.value.length;
+        control.setSelectionRange?.(end, end);
+    } else {
+        control.select?.();
+    }
+}
+// The one mounted cell editor (loaded on first edit). The control comes from the column type
+// (D8): Input, InputNumber, DatePicker, Switch, Select (single or multiple) or Rate. Keys are the
+// editor's: Enter commits, Tab commits and moves on, Esc cancels. While a picker or dropdown is
+// open, Enter and Esc belong to it (pick, close). Picking in a select, date picker, switch or
+// rating commits at once. Leaving the editor (a click elsewhere) commits. A failed `validate`
+// keeps the editor open with the message under it.
+function CellEditor({ api, session }) {
+    const { editing } = api;
+    const spec = editing.specs.get(session.colKey);
+    const kind = getKind(spec);
+    const [row] = useState(()=>api.table.getRow(session.rowId, true)?.original);
+    const [initial] = useState(()=>{
+        const saved = editing.layer.getDraft(session.id);
+        if (saved.has) return saved.value;
+        const col = api.layout.byKey.get(session.colKey);
+        return toEditorDraft({
+            spec: kind === spec.kind ? spec : {
+                ...spec,
+                kind
+            },
+            value: col.accessor(row),
+            seed: session.seed
+        });
+    });
+    const [draft, setDraftState] = useState(initial);
+    const [search, setSearch] = useState(()=>kind === 'select' || kind === 'multiSelect' ? session.seed ?? '' : '');
+    const wrapperRef = useRef(null);
+    const seedPending = useRef(session.seed !== undefined);
+    const popupOpen = useRef(POPUP_KINDS.has(kind));
+    const openAtKeyDown = useRef(false);
+    const options = useMemo(()=>toSelectOptions({
+            components: api.components,
+            spec,
+            row
+        }), [
+        spec,
+        row
+    ]);
+    function setDraft(value) {
+        setDraftState(value);
+        editing.layer.setDraft(session.id, value);
+    }
+    function commitValue(value) {
+        setDraft(value);
+        api.actions.commitEdit({});
+    }
+    useEffect(()=>{
+        // A printable key that opened the editor is already the edit.
+        if (kind !== 'select' && kind !== 'multiSelect' && session.seed !== undefined) {
+            editing.layer.setDraft(session.id, initial);
+        }
+        focusControl({
+            wrapper: wrapperRef.current,
+            seeded: session.seed !== undefined
+        });
+    }, []);
+    useEffect(()=>{
+        if (session.error) focusControl({
+            wrapper: wrapperRef.current,
+            seeded: true
+        });
+    }, [
+        session.error
+    ]);
+    function handleSearch(value) {
+        // The select clears its search as it opens; the typed character that opened it must stay.
+        if (value === '' && seedPending.current) {
+            seedPending.current = false;
+            return;
+        }
+        seedPending.current = false;
+        setSearch(value);
+    }
+    function handleKeyDownCapture(event) {
+        openAtKeyDown.current = popupOpen.current;
+        // Tab is the table's, before a select can treat it as picking the active option.
+        if (event.key !== 'Tab') return;
+        event.preventDefault();
+        event.stopPropagation();
+        api.actions.commitEdit({
+            move: event.shiftKey ? -1 : 1
+        });
+    }
+    function handleKeyDown(event) {
+        // Keys typed into the editor never reach the grid's navigation.
+        event.stopPropagation();
+        if (event.key === 'Escape') {
+            if (openAtKeyDown.current) return;
+            event.preventDefault();
+            api.actions.cancelEdit();
+            return;
+        }
+        if (event.key === 'Enter') {
+            if (openAtKeyDown.current) return;
+            event.preventDefault();
+            api.actions.commitEdit({});
+        }
+    }
+    function handleBlur() {
+        const { id } = session;
+        // Focus moves after blur: wait for it to land before deciding the editor was left.
+        setTimeout(()=>{
+            if (editing.layer?.getSession()?.id !== id) return;
+            const active = document.activeElement;
+            if (wrapperRef.current?.contains(active)) return;
+            if (active?.closest?.(`.${POPUP_CLASS}`)) return;
+            api.actions.commitEdit({});
+        }, 0);
+    }
+    const size = api.rowHeight < 40 ? 'small' : 'middle';
+    const status = session.error ? 'error' : undefined;
+    const onOpenChange = (open)=>{
+        popupOpen.current = open;
+    };
+    let control;
+    switch(kind){
+        case 'number':
+            control = /*#__PURE__*/ React.createElement(InputNumber, {
+                onChange: (value)=>setDraft(value),
+                size: size,
+                status: status,
+                style: {
+                    width: '100%'
+                },
+                suffix: spec.type === 'percent' ? '%' : undefined,
+                value: draft
+            });
+            break;
+        case 'date':
+        case 'datetime':
+            control = /*#__PURE__*/ React.createElement(DatePicker, {
+                classNames: {
+                    popup: {
+                        root: POPUP_CLASS
+                    }
+                },
+                defaultOpen: true,
+                onChange: (date)=>commitValue(date),
+                onOpenChange: onOpenChange,
+                showTime: kind === 'datetime',
+                size: size,
+                status: status,
+                style: {
+                    width: '100%'
+                },
+                value: draft
+            });
+            break;
+        case 'boolean':
+            control = /*#__PURE__*/ React.createElement(Switch, {
+                checked: draft === true,
+                onChange: (checked)=>commitValue(checked),
+                size: size === 'small' ? 'small' : 'default'
+            });
+            break;
+        case 'select':
+        case 'multiSelect':
+            {
+                const multiple = kind === 'multiSelect';
+                let mode;
+                if (multiple) mode = spec.options ? 'multiple' : 'tags';
+                control = /*#__PURE__*/ React.createElement(Select, {
+                    allowClear: true,
+                    classNames: {
+                        popup: {
+                            root: POPUP_CLASS
+                        }
+                    },
+                    defaultOpen: true,
+                    maxTagCount: "responsive",
+                    mode: mode,
+                    onChange: (value)=>{
+                        if (multiple) {
+                            setDraft(value ?? []);
+                        } else {
+                            commitValue(value ?? null);
+                        }
+                    },
+                    onOpenChange: onOpenChange,
+                    options: options,
+                    showSearch: {
+                        filterOption,
+                        onSearch: handleSearch,
+                        searchValue: search
+                    },
+                    size: size,
+                    status: status,
+                    style: {
+                        width: '100%'
+                    },
+                    maxTagPlaceholder: renderMoreTags,
+                    tagRender: mode === 'multiple' ? SelectedTag : undefined,
+                    value: draft
+                });
+                break;
+            }
+        case 'rating':
+            control = /*#__PURE__*/ React.createElement(Rate, {
+                count: spec.max,
+                onChange: (value)=>commitValue(value),
+                value: draft
+            });
+            break;
+        default:
+            control = /*#__PURE__*/ React.createElement(Input, {
+                autoComplete: "off",
+                onChange: (event)=>setDraft(event.target.value),
+                size: size,
+                status: status,
+                value: draft ?? ''
+            });
+    }
+    return /*#__PURE__*/ React.createElement(Tooltip, {
+        open: Boolean(session.error),
+        placement: "bottom",
+        title: session.error
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-editor",
+        "data-lf-control": "",
+        "data-lf-editor": "",
+        "data-lf-editor-error": session.error ?? undefined,
+        "data-lf-editor-kind": kind,
+        onBlur: handleBlur,
+        onKeyDown: handleKeyDown,
+        onKeyDownCapture: handleKeyDownCapture,
+        ref: wrapperRef
+    }, control));
+}
+export default CellEditor;

package/dist/features/editing/EditMarker.js

@@ -0,0 +1,38 @@
+/*
+  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 { Tooltip } from 'antd';
+const LABELS = {
+    error: 'Not saved',
+    invalid: 'Invalid',
+    saving: 'Saving'
+};
+// A cell's edit status, drawn into the cell by the editing layer: a spinner while onCellEdit runs,
+// a corner flag with the message in a tooltip when the save failed or the value is invalid.
+function EditMarker({ message, status }) {
+    const label = message ? `${LABELS[status]}: ${message}` : LABELS[status];
+    const marker = /*#__PURE__*/ React.createElement("span", {
+        "aria-label": label,
+        className: "lf-table-edit-marker",
+        "data-lf-edit-message": message ?? undefined,
+        "data-lf-edit-status": status,
+        role: "img"
+    });
+    if (!message) return marker;
+    return /*#__PURE__*/ React.createElement(Tooltip, {
+        title: message
+    }, marker);
+}
+export default EditMarker;

package/dist/features/editing/EditingLayer.js

@@ -0,0 +1,148 @@
+/*
+  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, { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import computeEditTargets from './computeEditTargets.js';
+import EditMarker from './EditMarker.js';
+import isSameTargets from './isSameTargets.js';
+import isDataItem from '../../core/isDataItem.js';
+import scrollToCell from '../virtualization/scrollToCell.js';
+import './editing.css';
+const CellEditor = /*#__PURE__*/ lazy(()=>import('./CellEditor.js'));
+const EMPTY = [];
+const NO_DRAFT = {
+    has: false
+};
+const NOTICE_MS = 6000;
+function startPending(api) {
+    const pending = api.editing.pendingStart;
+    if (!pending) return;
+    const index = api.rows.findIndex((row)=>isDataItem(row) && row.id === pending.rowId);
+    if (index === -1) return;
+    api.editing.pendingStart = null;
+    const col = api.layout.byKey.get(pending.colKey);
+    if (!col) return;
+    scrollToCell({
+        api,
+        row: index,
+        col: col.index
+    });
+    api.keyboard?.setActive({
+        row: index,
+        col: col.index
+    });
+    api.actions.startEdit({
+        rowId: pending.rowId,
+        colKey: pending.colKey
+    });
+}
+// The one component that draws editing into the grid. Cells stay tier-0 and never know about
+// editing: the open editor (at most one, D10 tier 1) and the status markers are portalled into the
+// rendered cell elements, found by row key and column key. `sync` runs after every grid render
+// (scroll included) and after the layer's own, so a cell that remounts gets its editor or
+// marker back. The editor session and its draft live here and are reached through
+// `api.editing.layer` by the handlers and actions.
+function EditingLayer({ api }) {
+    const [session, setSessionState] = useState(null);
+    const [targets, setTargets] = useState(EMPTY);
+    const [notice, setNotice] = useState(null);
+    const sessionRef = useRef(null);
+    const draftRef = useRef({
+        id: null,
+        has: false,
+        value: undefined
+    });
+    const targetsRef = useRef(EMPTY);
+    const layer = useMemo(()=>({
+            getSession: ()=>sessionRef.current,
+            setSession (next) {
+                sessionRef.current = next;
+                draftRef.current = {
+                    id: next?.id ?? null,
+                    has: false,
+                    value: undefined
+                };
+                setSessionState(next);
+            },
+            updateSession (patch) {
+                if (!sessionRef.current) return;
+                sessionRef.current = {
+                    ...sessionRef.current,
+                    ...patch
+                };
+                setSessionState(sessionRef.current);
+            },
+            getDraft (id) {
+                return draftRef.current.id === id ? draftRef.current : NO_DRAFT;
+            },
+            setDraft (id, value) {
+                if (draftRef.current.id !== id) return;
+                draftRef.current = {
+                    id,
+                    has: true,
+                    value
+                };
+            },
+            notify: setNotice,
+            sync () {
+                startPending(api);
+                const next = computeEditTargets({
+                    api,
+                    session: sessionRef.current
+                });
+                if (isSameTargets(targetsRef.current, next)) return;
+                targetsRef.current = next;
+                setTargets(next);
+            }
+        }), [
+        api
+    ]);
+    api.editing.layer = layer;
+    useLayoutEffect(()=>{
+        layer.sync();
+    });
+    useLayoutEffect(()=>()=>{
+            if (api.editing.layer === layer) api.editing.layer = null;
+        }, [
+        layer
+    ]);
+    useEffect(()=>{
+        if (!notice) return undefined;
+        const timeout = setTimeout(()=>setNotice(null), NOTICE_MS);
+        return ()=>clearTimeout(timeout);
+    }, [
+        notice
+    ]);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, targets.map((target)=>{
+        if (target.kind === 'editor') {
+            if (!session || target.id !== `editor:${session.id}`) return null;
+            return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(Suspense, {
+                fallback: null
+            }, /*#__PURE__*/ React.createElement(CellEditor, {
+                api: api,
+                session: session
+            })), target.element, target.id);
+        }
+        return /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(EditMarker, {
+            message: target.message,
+            status: target.status
+        }), target.element, target.id);
+    }), notice ? /*#__PURE__*/ React.createElement("div", {
+        className: "lf-table-edit-notice",
+        role: "status",
+        title: notice.details
+    }, notice.text) : null);
+}
+export default EditingLayer;