@lowdefy/blocks-table 0.0.0-experimental-20260929110023

package/dist/features/filtering/FilterGroup.js

@@ -0,0 +1,116 @@
+/*
+  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, Segmented } from 'antd';
+import CloseIcon from './CloseIcon.js';
+import createDefaultLeaf from './createDefaultLeaf.js';
+import FilterLeaf from './FilterLeaf.js';
+import getGroupOperator from './getGroupOperator.js';
+// Groups nest three levels deep, as in Notion's advanced filters.
+const MAX_DEPTH = 3;
+const OPERATORS = [
+    {
+        value: 'and',
+        label: 'All'
+    },
+    {
+        value: 'or',
+        label: 'Any'
+    }
+];
+function FilterGroup({ group, columns, user, depth, onChange, onRemove }) {
+    const operator = getGroupOperator(group);
+    const children = group[operator];
+    const canAdd = columns.length > 0;
+    function setChildren(next) {
+        onChange({
+            [operator]: next
+        });
+    }
+    function setChild(index, child) {
+        setChildren(children.map((existing, i)=>i === index ? child : existing));
+    }
+    function removeChild(index) {
+        setChildren(children.filter((existing, i)=>i !== index));
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-group",
+        "data-depth": depth,
+        "data-lf-filter-group": ""
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-group-header"
+    }, /*#__PURE__*/ React.createElement(Segmented, {
+        "aria-label": "Match",
+        onChange: (next)=>onChange({
+                [next]: children
+            }),
+        options: OPERATORS,
+        size: "small",
+        value: operator
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "lf-filter-group-label"
+    }, "of these conditions"), onRemove ? /*#__PURE__*/ React.createElement(Button, {
+        "aria-label": "Remove group",
+        className: "lf-filter-remove",
+        icon: /*#__PURE__*/ React.createElement(CloseIcon, null),
+        onClick: onRemove,
+        size: "small",
+        type: "text"
+    }) : null), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-group-items"
+    }, children.map((child, index)=>getGroupOperator(child) === null ? /*#__PURE__*/ React.createElement(FilterLeaf, {
+            columns: columns,
+            key: index,
+            leaf: child,
+            onChange: (next)=>setChild(index, next),
+            onRemove: ()=>removeChild(index),
+            user: user
+        }) : /*#__PURE__*/ React.createElement(FilterGroup, {
+            columns: columns,
+            depth: depth + 1,
+            group: child,
+            key: index,
+            onChange: (next)=>setChild(index, next),
+            onRemove: ()=>removeChild(index),
+            user: user
+        }))), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-group-actions"
+    }, /*#__PURE__*/ React.createElement(Button, {
+        disabled: !canAdd,
+        onClick: ()=>setChildren([
+                ...children,
+                createDefaultLeaf({
+                    column: columns[0]
+                })
+            ]),
+        size: "small",
+        type: "link"
+    }, "+ Add condition"), depth < MAX_DEPTH ? /*#__PURE__*/ React.createElement(Button, {
+        disabled: !canAdd,
+        onClick: ()=>setChildren([
+                ...children,
+                {
+                    and: [
+                        createDefaultLeaf({
+                            column: columns[0]
+                        })
+                    ]
+                }
+            ]),
+        size: "small",
+        type: "link"
+    }, "+ Add group") : null));
+}
+export default FilterGroup;

package/dist/features/filtering/FilterIcon.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 React from 'react';
+function FilterIcon() {
+    return /*#__PURE__*/ React.createElement("svg", {
+        "aria-hidden": "true",
+        className: "lf-table-icon",
+        viewBox: "0 0 16 16"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M2 3h12l-4.5 5.5V13l-3 1.5V8.5z",
+        fill: "currentColor"
+    }));
+}
+export default FilterIcon;

package/dist/features/filtering/FilterIndicator.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 React, { Suspense } from 'react';
+import FilterIcon from './FilterIcon.js';
+import getFilteredKeys from './getFilteredKeys.js';
+import LazyColumnFilterPopover from './LazyColumnFilterPopover.js';
+// Header part: a filter icon while the column is filtered (click it to edit the filter), and the
+// column filter popover while it is open.
+function FilterIndicator({ api, col, state }) {
+    const filtered = getFilteredKeys(state.filter).has(col.key);
+    const open = api.columnFilter.openKey === col.key;
+    if (!filtered && !open) return null;
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, filtered ? /*#__PURE__*/ React.createElement("button", {
+        "aria-label": "Edit column filter",
+        className: "lf-table-header-button lf-table-filter-indicator",
+        "data-lf-filter-indicator": "",
+        onFocus: LazyColumnFilterPopover.preload,
+        onPointerEnter: LazyColumnFilterPopover.preload,
+        tabIndex: -1,
+        type: "button"
+    }, /*#__PURE__*/ React.createElement(FilterIcon, null)) : null, open ? /*#__PURE__*/ React.createElement(Suspense, {
+        fallback: null
+    }, /*#__PURE__*/ React.createElement(LazyColumnFilterPopover, {
+        api: api,
+        col: col
+    })) : null);
+}
+export default FilterIndicator;

package/dist/features/filtering/FilterLeaf.js

@@ -0,0 +1,86 @@
+/*
+  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, Select } from 'antd';
+import CELL_TYPE_FAMILIES from '@lowdefy/blocks-antd/table/cellTypeFamilies.js';
+import getOperators from '@lowdefy/blocks-antd/table/getOperators.js';
+import changeLeafOperator from './changeLeafOperator.js';
+import CloseIcon from './CloseIcon.js';
+import createDefaultLeaf from './createDefaultLeaf.js';
+import getOperatorLabel from './getOperatorLabel.js';
+import getPlainTitle from './getPlainTitle.js';
+import ValueEditor from './ValueEditor.js';
+// One condition row: column, operator (the column type's operators), value, remove. The column
+// select is left out when the builder only offers one column (the column filter popover).
+function FilterLeaf({ leaf, columns, user, onChange, onRemove }) {
+    const column = columns.find((entry)=>entry.key === leaf.key) ?? null;
+    const family = column ? CELL_TYPE_FAMILIES[column.type] : null;
+    const operators = column ? getOperators(column.type) : [];
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-leaf",
+        "data-col-key": leaf.key,
+        "data-lf-filter-leaf": ""
+    }, columns.length > 1 || column === null ? /*#__PURE__*/ React.createElement(Select, {
+        "aria-label": "Column",
+        className: "lf-filter-column",
+        onChange: (key)=>onChange(createDefaultLeaf({
+                column: columns.find((entry)=>entry.key === key)
+            })),
+        optionFilterProp: "label",
+        options: columns.map((entry)=>({
+                value: entry.key,
+                label: getPlainTitle(entry)
+            })),
+        placeholder: "Column",
+        popupMatchSelectWidth: false,
+        showSearch: true,
+        size: "small",
+        value: column ? leaf.key : undefined
+    }) : null, column ? /*#__PURE__*/ React.createElement(Select, {
+        "aria-label": "Operator",
+        className: "lf-filter-operator",
+        onChange: (op)=>onChange(changeLeafOperator({
+                leaf,
+                op
+            })),
+        options: operators.map((op)=>({
+                value: op,
+                label: getOperatorLabel({
+                    op,
+                    family
+                })
+            })),
+        popupMatchSelectWidth: false,
+        size: "small",
+        value: leaf.op
+    }) : null, column ? /*#__PURE__*/ React.createElement(ValueEditor, {
+        column: column,
+        onChange: (value)=>onChange({
+                ...leaf,
+                value
+            }),
+        op: leaf.op,
+        user: user,
+        value: leaf.value
+    }) : null, /*#__PURE__*/ React.createElement(Button, {
+        "aria-label": "Remove condition",
+        className: "lf-filter-remove",
+        icon: /*#__PURE__*/ React.createElement(CloseIcon, null),
+        onClick: onRemove,
+        size: "small",
+        type: "text"
+    }));
+}
+export default FilterLeaf;

package/dist/features/filtering/LazyColumnFilterPopover.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 filter popover (simple editors per type and the filter builder), loaded when a
+// column filter first opens; the header menu and the filter indicator preload it.
+const LazyColumnFilterPopover = lazyComponent(()=>import('./ColumnFilterPopover.js'));
+export default LazyColumnFilterPopover;

package/dist/features/filtering/LazyFilterBuilder.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 filter builder, loaded when the toolbar's Filter popover first opens (the button preloads
+// it on hover and focus).
+const LazyFilterBuilder = lazyComponent(()=>import('./FilterBuilder.js'));
+export default LazyFilterBuilder;

package/dist/features/filtering/NumberFilter.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 React from 'react';
+import DraftInputNumber from './DraftInputNumber.js';
+function NumberFilter({ state, onChange }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-simple lf-filter-range"
+    }, /*#__PURE__*/ React.createElement(DraftInputNumber, {
+        "aria-label": "Minimum",
+        autoFocus: true,
+        onChange: (min)=>onChange({
+                ...state,
+                min: min ?? null
+            }),
+        placeholder: "Min",
+        size: "small",
+        value: state.min
+    }), /*#__PURE__*/ React.createElement("span", {
+        className: "lf-filter-range-dash"
+    }, "–"), /*#__PURE__*/ React.createElement(DraftInputNumber, {
+        "aria-label": "Maximum",
+        onChange: (max)=>onChange({
+                ...state,
+                max: max ?? null
+            }),
+        placeholder: "Max",
+        size: "small",
+        value: state.max
+    }));
+}
+export default NumberFilter;

package/dist/features/filtering/OptionsFilter.js

@@ -0,0 +1,72 @@
+/*
+  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, { useState } from 'react';
+import { Button, Checkbox, Input } from 'antd';
+// A searchable checklist of a column's values; the checked values filter with `in`.
+function OptionsFilter({ options, selected, onChange }) {
+    const [search, setSearch] = useState('');
+    const term = search.trim().toLowerCase();
+    const visible = term ? options.filter((option)=>option.label.toLowerCase().includes(term)) : options;
+    const checked = new Set(selected);
+    function toggle(value) {
+        if (checked.has(value)) {
+            onChange(selected.filter((item)=>item !== value));
+        } else {
+            onChange([
+                ...selected,
+                value
+            ]);
+        }
+    }
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-options",
+        "data-lf-filter-options": ""
+    }, /*#__PURE__*/ React.createElement(Input, {
+        allowClear: true,
+        "aria-label": "Search values",
+        autoFocus: true,
+        onChange: (event)=>setSearch(event.target.value),
+        placeholder: "Search values",
+        size: "small",
+        value: search
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-options-actions"
+    }, /*#__PURE__*/ React.createElement(Button, {
+        onClick: ()=>onChange([
+                ...new Set([
+                    ...selected,
+                    ...visible.map((o)=>o.value)
+                ])
+            ]),
+        size: "small",
+        type: "link"
+    }, "Select all"), /*#__PURE__*/ React.createElement(Button, {
+        disabled: selected.length === 0,
+        onClick: ()=>onChange([]),
+        size: "small",
+        type: "link"
+    }, "Clear")), /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-options-list",
+        role: "group"
+    }, visible.map((option)=>/*#__PURE__*/ React.createElement(Checkbox, {
+            checked: checked.has(option.value),
+            "data-value": String(option.value),
+            key: String(option.value),
+            onChange: ()=>toggle(option.value)
+        }, option.label)), visible.length === 0 ? /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-options-empty"
+    }, "No values") : null));
+}
+export default OptionsFilter;

package/dist/features/filtering/RelativeDateEditor.js

@@ -0,0 +1,90 @@
+/*
+  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 { InputNumber, Select, Space } from 'antd';
+import defaultRelativeDate from './defaultRelativeDate.js';
+const DIRECTIONS = [
+    {
+        value: 'last',
+        label: 'Last'
+    },
+    {
+        value: 'next',
+        label: 'Next'
+    }
+];
+const UNITS = [
+    {
+        value: 'day',
+        label: 'days'
+    },
+    {
+        value: 'week',
+        label: 'weeks'
+    },
+    {
+        value: 'month',
+        label: 'months'
+    },
+    {
+        value: 'year',
+        label: 'years'
+    }
+];
+// `within` values: `{ last: n, unit }` or `{ next: n, unit }`, resolved against today where the
+// filter runs, so a saved "last 30 days" view keeps meaning the last 30 days.
+function RelativeDateEditor({ value, onChange, size }) {
+    const current = value ?? defaultRelativeDate;
+    const direction = typeof current.next === 'number' ? 'next' : 'last';
+    const amount = current[direction];
+    return /*#__PURE__*/ React.createElement(Space.Compact, {
+        className: "lf-filter-relative",
+        "data-lf-relative-date": "",
+        size: size
+    }, /*#__PURE__*/ React.createElement(Select, {
+        "aria-label": "Direction",
+        onChange: (next)=>onChange({
+                [next]: amount,
+                unit: current.unit
+            }),
+        options: DIRECTIONS,
+        popupMatchSelectWidth: false,
+        value: direction
+    }), /*#__PURE__*/ React.createElement(InputNumber, {
+        "aria-label": "Amount",
+        min: 1,
+        onChange: (next)=>{
+            if (typeof next === 'number') onChange({
+                [direction]: next,
+                unit: current.unit
+            });
+        },
+        precision: 0,
+        style: {
+            width: 72
+        },
+        value: amount
+    }), /*#__PURE__*/ React.createElement(Select, {
+        "aria-label": "Unit",
+        onChange: (unit)=>onChange({
+                [direction]: amount,
+                unit
+            }),
+        options: UNITS,
+        popupMatchSelectWidth: false,
+        value: current.unit
+    }));
+}
+export default RelativeDateEditor;

package/dist/features/filtering/TextFilter.js

@@ -0,0 +1,51 @@
+/*
+  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 { Select } from 'antd';
+import DraftInput from './DraftInput.js';
+import getOperatorLabel from './getOperatorLabel.js';
+import textFilterOperators from './textFilterOperators.js';
+function TextFilter({ state, onChange }) {
+    const needsValue = state.op !== 'empty' && state.op !== 'notEmpty';
+    return /*#__PURE__*/ React.createElement("div", {
+        className: "lf-filter-simple"
+    }, /*#__PURE__*/ React.createElement(Select, {
+        "aria-label": "Operator",
+        onChange: (op)=>onChange({
+                ...state,
+                op
+            }),
+        options: textFilterOperators.map((op)=>({
+                value: op,
+                label: getOperatorLabel({
+                    op,
+                    family: 'text'
+                })
+            })),
+        size: "small",
+        value: state.op
+    }), needsValue ? /*#__PURE__*/ React.createElement(DraftInput, {
+        "aria-label": "Filter text",
+        autoFocus: true,
+        onChange: (value)=>onChange({
+                ...state,
+                value
+            }),
+        placeholder: "Text",
+        size: "small",
+        value: state.value
+    }) : null);
+}
+export default TextFilter;