@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/headerMenu/collectHeaderMenuItems.js

@@ -0,0 +1,69 @@
+/*
+  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 sectionOrder from './sectionOrder.js';
+// The header menu extension point. Every feature module may declare
+// `headerMenuItems({ column, api }) => [{ key, label, icon?, danger?, disabled?, section?, onClick() }]`;
+// the items are collected in feature order, grouped by `section` (default: the feature's name)
+// in `sectionOrder`, and separated by dividers. Returns antd menu items plus the click handler
+// for each item key (keys are namespaced by feature, so two features may use the same key).
+function collectHeaderMenuItems({ column, api, features }) {
+    const sections = new Map();
+    const handlers = new Map();
+    features.forEach((feature)=>{
+        if (!feature.headerMenuItems) return;
+        feature.headerMenuItems({
+            column,
+            api
+        }).forEach((item)=>{
+            const section = item.section ?? feature.name;
+            const key = `${feature.name}:${item.key}`;
+            if (!sections.has(section)) sections.set(section, []);
+            sections.get(section).push({
+                key,
+                label: item.label,
+                icon: item.icon,
+                danger: item.danger,
+                disabled: item.disabled
+            });
+            handlers.set(key, item.onClick);
+        });
+    });
+    const known = sectionOrder.filter((section)=>sections.has(section));
+    const extra = [
+        ...sections.keys()
+    ].filter((section)=>!sectionOrder.includes(section));
+    const manageIndex = known.indexOf('manage');
+    const ordered = manageIndex === -1 ? [
+        ...known,
+        ...extra
+    ] : [
+        ...known.slice(0, manageIndex),
+        ...extra,
+        ...known.slice(manageIndex)
+    ];
+    const items = [];
+    ordered.forEach((section, index)=>{
+        if (index > 0) items.push({
+            type: 'divider',
+            key: `divider:${section}`
+        });
+        items.push(...sections.get(section));
+    });
+    return {
+        items,
+        handlers
+    };
+}
+export default collectHeaderMenuItems;

package/dist/features/headerMenu/createAutosizeColumn.js

@@ -0,0 +1,35 @@
+/*
+  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 measureColumnWidth from './measureColumnWidth.js';
+// Action `autosizeColumn({ key })`: fits the column to its rendered content, within its min and
+// max width, and commits the width like the end of a resize drag.
+function createAutosizeColumn(api) {
+    return function autosizeColumn({ key }) {
+        const col = api.layout.byKey.get(key);
+        if (!col) return false;
+        const measured = measureColumnWidth({
+            api,
+            key
+        });
+        const width = Math.min(col.maxWidth, Math.max(col.minWidth, measured));
+        if (width === col.width) return true;
+        api.updateSlice('columnSizing', (previous)=>({
+                ...previous,
+                [key]: width
+            }));
+        return true;
+    };
+}
+export default createAutosizeColumn;

package/dist/features/headerMenu/createCloseHeaderMenu.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 focusHeaderControl from './focusHeaderControl.js';
+// Action `closeHeaderMenu({ restoreFocus })`.
+function createCloseHeaderMenu(api) {
+    return function closeHeaderMenu({ restoreFocus } = {}) {
+        const key = api.headerMenu.openKey;
+        if (key === null) return;
+        api.headerMenu.setOpenKey(null);
+        if (restoreFocus) focusHeaderControl({
+            api,
+            key
+        });
+    };
+}
+export default createCloseHeaderMenu;

package/dist/features/headerMenu/createOpenHeaderMenu.js

@@ -0,0 +1,30 @@
+/*
+  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 `openHeaderMenu({ key, toggle })`. With `toggle` (the menu button) a second press closes
+// the menu: either it is still open (keyboard), or the press itself already dismissed it.
+function createOpenHeaderMenu(api) {
+    return function openHeaderMenu({ key, toggle }) {
+        if (!api.config.headerMenu) return false;
+        const { openKey, pressedOpen } = api.headerMenu;
+        api.headerMenu.pressedOpen = null;
+        if (toggle && (openKey === key || pressedOpen === key)) {
+            api.actions.closeHeaderMenu();
+            return true;
+        }
+        api.headerMenu.setOpenKey(key);
+        return true;
+    };
+}
+export default createOpenHeaderMenu;

package/dist/features/headerMenu/focusHeaderControl.js

@@ -0,0 +1,31 @@
+/*
+  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.
+*/ // Returns focus to a column's header after one of its overlays closes from the keyboard: the menu
+// button when there is one, else the header cell. It waits a frame, because the key that closed
+// the overlay is still being handled (Enter on a menu item would also press the button), and it
+// leaves focus alone when the next overlay (a filter popover) has already taken it.
+function focusHeaderControl({ api, key }) {
+    requestAnimationFrame(()=>{
+        const active = document.activeElement;
+        if (active && active !== document.body && document.contains(active)) return;
+        const cell = api.rootRef.current?.querySelector(`[data-lf-header][data-col-key="${CSS.escape(key)}"]`);
+        if (!cell) return;
+        const trigger = cell.querySelector('[data-lf-header-menu]');
+        (trigger ?? cell).focus({
+            preventScroll: true
+        });
+    });
+}
+export default focusHeaderControl;

package/dist/features/headerMenu/freezeColumns.js

@@ -0,0 +1,31 @@
+/*
+  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.
+*/ // "Freeze up to here" (Notion): the column and every visible column before it, in the order the
+// table shows them, become the start-pinned region; later columns are unpinned from the start.
+// Hidden start-pinned columns stay pinned, so showing one again brings it back where it was.
+function freezeColumns({ pinning, visibleOrder, key }) {
+    const index = visibleOrder.indexOf(key);
+    const frozen = visibleOrder.slice(0, index + 1);
+    const visible = new Set(visibleOrder);
+    const frozenSet = new Set(frozen);
+    return {
+        start: [
+            ...pinning.start.filter((entry)=>!visible.has(entry)),
+            ...frozen
+        ],
+        end: pinning.end.filter((entry)=>!frozenSet.has(entry))
+    };
+}
+export default freezeColumns;

package/dist/features/headerMenu/getChromeMenuItems.js

@@ -0,0 +1,144 @@
+/*
+  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 freezeColumns from './freezeColumns.js';
+import getVisibleOrder from './getVisibleOrder.js';
+import pinColumn from './pinColumn.js';
+function sortItems({ column, api }) {
+    if (!column.sortable) return [];
+    const sort = api.state.sorting.find((entry)=>entry.id === column.key);
+    const items = [
+        {
+            key: 'sortAsc',
+            label: 'Sort ascending',
+            section: 'sort',
+            disabled: sort?.desc === false,
+            onClick: ()=>api.actions.setSort({
+                    key: column.key,
+                    desc: false
+                })
+        },
+        {
+            key: 'sortDesc',
+            label: 'Sort descending',
+            section: 'sort',
+            disabled: sort?.desc === true,
+            onClick: ()=>api.actions.setSort({
+                    key: column.key,
+                    desc: true
+                })
+        }
+    ];
+    if (sort) {
+        items.push({
+            key: 'clearSort',
+            label: 'Clear sort',
+            section: 'sort',
+            onClick: ()=>api.actions.clearSort({
+                    key: column.key
+                })
+        });
+    }
+    return items;
+}
+function pinItems({ column, api }) {
+    const { start, end } = api.state.columnPinning;
+    let pinned = null;
+    if (start.includes(column.key)) pinned = 'start';
+    if (end.includes(column.key)) pinned = 'end';
+    const pin = (side)=>api.updateSlice('columnPinning', (pinning)=>pinColumn({
+                pinning,
+                key: column.key,
+                side
+            }));
+    const items = [];
+    if (pinned !== 'start') {
+        items.push({
+            key: 'pinStart',
+            label: 'Pin to start',
+            onClick: ()=>pin('start')
+        });
+    }
+    if (pinned !== 'end') {
+        items.push({
+            key: 'pinEnd',
+            label: 'Pin to end',
+            onClick: ()=>pin('end')
+        });
+    }
+    if (pinned !== null) {
+        items.push({
+            key: 'unpin',
+            label: 'Unpin',
+            onClick: ()=>pin(null)
+        });
+    }
+    items.push({
+        key: 'freeze',
+        label: 'Freeze up to here',
+        onClick: ()=>api.updateSlice('columnPinning', (pinning)=>freezeColumns({
+                    pinning,
+                    visibleOrder: getVisibleOrder(api),
+                    key: column.key
+                }))
+    });
+    return items.map((item)=>({
+            ...item,
+            section: 'pin'
+        }));
+}
+function columnItems({ column, api }) {
+    const items = [];
+    if (column.resizable) {
+        items.push({
+            key: 'autosize',
+            label: 'Autosize',
+            section: 'column',
+            onClick: ()=>api.actions.autosizeColumn({
+                    key: column.key
+                })
+        });
+    }
+    items.push({
+        key: 'hide',
+        label: 'Hide column',
+        section: 'column',
+        // The last visible column stays: a table without columns has no header menu to undo it.
+        disabled: getVisibleOrder(api).length <= 1,
+        onClick: ()=>api.updateSlice('columnVisibility', (visibility)=>({
+                    ...visibility,
+                    [column.key]: false
+                }))
+    });
+    return items;
+}
+// The header menu's own items (sort, pin, freeze, autosize, hide), contributed through the same
+// `headerMenuItems` extension point as every other feature's.
+function getChromeMenuItems({ column, api }) {
+    return [
+        ...sortItems({
+            column,
+            api
+        }),
+        ...pinItems({
+            column,
+            api
+        }),
+        ...columnItems({
+            column,
+            api
+        })
+    ];
+}
+export default getChromeMenuItems;

package/dist/features/headerMenu/getVisibleOrder.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.
+*/ // Visible data column keys in the order the table shows them: start-pinned, centre, end-pinned.
+function getVisibleOrder(api) {
+    return api.layout.cols.filter((col)=>!col.special).map((col)=>col.key);
+}
+export default getVisibleOrder;

package/dist/features/headerMenu/handleHeaderButtonPointerDown.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.
+*/ // A press on a header button (menu, filter icon) never starts a column reorder drag. For the
+// menu button it also records whether that column's menu was open: the Dropdown's outside-click
+// handling closes the menu on mousedown, before the click that would otherwise reopen it.
+function handleHeaderButtonPointerDown(event, api) {
+    const button = event.target.closest('.lf-table-header-button');
+    if (!button || !api.contains(button)) return false;
+    if (button.hasAttribute('data-lf-header-menu')) {
+        const key = button.closest('[data-lf-header]').dataset.colKey;
+        api.headerMenu.pressedOpen = api.headerMenu.openKey === key ? key : null;
+    }
+    return true;
+}
+export default handleHeaderButtonPointerDown;

package/dist/features/headerMenu/handleHeaderMenuClick.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.
+*/ // A click on a header's menu button toggles its menu instead of sorting.
+function handleHeaderMenuClick(event, api) {
+    const trigger = event.target.closest('[data-lf-header-menu]');
+    if (!trigger || !api.contains(trigger)) return false;
+    const cell = trigger.closest('[data-lf-header]');
+    api.actions.openHeaderMenu({
+        key: cell.dataset.colKey,
+        toggle: true
+    });
+    return true;
+}
+export default handleHeaderMenuClick;

package/dist/features/headerMenu/handleHeaderMenuKeyDown.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.
+*/ // Alt+ArrowDown, Shift+F10 or the context menu key on a focused header cell opens its menu (the
+// ARIA menu-button convention), without tabbing to the button first.
+function handleHeaderMenuKeyDown(event, api) {
+    if (!api.config.headerMenu) return false;
+    const cell = event.target.closest('[data-lf-header]');
+    if (!cell || event.target !== cell || !api.contains(cell) || cell.dataset.special) return false;
+    const opens = event.altKey && event.key === 'ArrowDown' || event.shiftKey && event.key === 'F10' || event.key === 'ContextMenu';
+    if (!opens) return false;
+    event.preventDefault();
+    return api.actions.openHeaderMenu({
+        key: cell.dataset.colKey
+    });
+}
+export default handleHeaderMenuKeyDown;

package/dist/features/headerMenu/headerMenu.css

@@ -0,0 +1,122 @@
+/*
+  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.
+*/
+
+/* Header menu button and the shared header-part buttons. Colours are antd tokens. The menu
+   button is laid over the end of the header cell, so it reserves no room from the title (and an
+   end-aligned title lines up with its column's values). It shows on hover, on focus inside the
+   header cell and while its menu is open, on the cell's own opaque background so the title end
+   it covers does not show through. Without hover (touch) it is always shown and takes its room
+   in the row instead. */
+
+@layer components {
+  .lf-table-header-button {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    padding: 0;
+    color: var(--ant-color-text-tertiary, rgba(0, 0, 0, 0.45));
+    background: transparent;
+    border: 0;
+    border-radius: var(--ant-border-radius-sm, 4px);
+    cursor: pointer;
+  }
+
+  .lf-table-header-button:hover {
+    color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
+    background: var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06));
+  }
+
+  .lf-table-header-button:focus-visible {
+    outline: 2px solid var(--ant-color-primary, #1677ff);
+    outline-offset: -2px;
+  }
+
+  .lf-table-icon {
+    display: block;
+    width: 14px;
+    height: 14px;
+  }
+
+  .lf-table-header-menu-trigger {
+    position: absolute;
+    top: 50%;
+    right: var(--ant-padding-xs, 8px);
+    z-index: 1;
+    background: var(--lf-header-cell-bg);
+    box-shadow: -4px 0 0 var(--lf-header-cell-bg);
+    opacity: 0;
+    transform: translateY(-50%);
+  }
+
+  .lf-table-header-menu-trigger:hover {
+    background: linear-gradient(
+        var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06)),
+        var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06))
+      ),
+      var(--lf-header-cell-bg);
+  }
+
+  .lf-table-header .lf-table-gridcell:hover .lf-table-header-menu-trigger,
+  .lf-table-header .lf-table-gridcell:focus-within .lf-table-header-menu-trigger,
+  .lf-table-header-menu-trigger[data-open] {
+    opacity: 1;
+  }
+
+  @media (hover: none) {
+    .lf-table-header-menu-trigger {
+      position: static;
+      order: 2;
+      margin-left: auto;
+      box-shadow: none;
+      opacity: 1;
+      transform: none;
+    }
+
+    .lf-table-header .lf-table-gridcell[data-align='end'] .lf-table-header-menu-trigger {
+      margin-left: 0;
+    }
+  }
+
+  /* Zero-height anchor on the header cell's bottom edge for the menu and filter popups. */
+  .lf-table-header-anchor {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    height: 0;
+    pointer-events: none;
+  }
+
+  .lf-table-header-menu .ant-dropdown-menu {
+    min-width: 180px;
+  }
+
+  .lf-table-overlay-title {
+    margin-bottom: var(--ant-margin-xs, 8px);
+    font-weight: var(--ant-font-weight-strong, 600);
+  }
+
+  .lf-table-overlay-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--ant-margin-xs, 8px);
+    margin-top: var(--ant-margin-xs, 8px);
+  }
+}

package/dist/features/headerMenu/headerMenuFeature.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 createAutosizeColumn from './createAutosizeColumn.js';
+import createCloseHeaderMenu from './createCloseHeaderMenu.js';
+import createOpenHeaderMenu from './createOpenHeaderMenu.js';
+import getChromeMenuItems from './getChromeMenuItems.js';
+import handleHeaderButtonPointerDown from './handleHeaderButtonPointerDown.js';
+import handleHeaderMenuClick from './handleHeaderMenuClick.js';
+import handleHeaderMenuKeyDown from './handleHeaderMenuKeyDown.js';
+import HeaderMenuTrigger from './HeaderMenuTrigger.js';
+import useHeaderMenuState from './useHeaderMenuState.js';
+import './headerMenu.css';
+// The column header menu (D7, D15): on by default, `headerMenu: false` turns it off. Its items
+// come from every feature's `headerMenuItems` (see collectHeaderMenuItems.js); this module
+// contributes sort, pin, freeze, autosize and hide.
+const headerMenuFeature = {
+    name: 'headerMenu',
+    headerParts: [
+        HeaderMenuTrigger
+    ],
+    headerMenuItems: getChromeMenuItems,
+    actions: {
+        openHeaderMenu: createOpenHeaderMenu,
+        closeHeaderMenu: createCloseHeaderMenu,
+        autosizeColumn: createAutosizeColumn
+    },
+    gridHandlers: {
+        click: handleHeaderMenuClick,
+        keydown: handleHeaderMenuKeyDown,
+        pointerdown: handleHeaderButtonPointerDown
+    },
+    useFeature: useHeaderMenuState
+};
+export default headerMenuFeature;