@vuu-ui/vuu-datatable 2.1.19-beta.2 → 2.1.19-beta.4

package/package.json

@@ -1,22 +1,21 @@
 {
-  "version": "2.1.19-beta.2",
+  "version": "2.1.19-beta.4",
   "author": "heswell",
-  "type": "module",
   "license": "Apache-2.0",
   "dependencies": {
     "@salt-ds/core": "1.54.1",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
-    "@vuu-ui/vuu-data-local": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table-types": "2.1.19-beta.2",
-    "@vuu-ui/vuu-filters": "2.1.19-beta.2",
-    "@vuu-ui/vuu-layout": "2.1.19-beta.2",
-    "@vuu-ui/vuu-popups": "2.1.19-beta.2",
-    "@vuu-ui/vuu-shell": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table": "2.1.19-beta.2",
-    "@vuu-ui/vuu-table-extras": "2.1.19-beta.2",
-    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.2",
-    "@vuu-ui/vuu-utils": "2.1.19-beta.2"
+    "@vuu-ui/vuu-data-local": "2.1.19-beta.4",
+    "@vuu-ui/vuu-table-types": "2.1.19-beta.4",
+    "@vuu-ui/vuu-filters": "2.1.19-beta.4",
+    "@vuu-ui/vuu-layout": "2.1.19-beta.4",
+    "@vuu-ui/vuu-popups": "2.1.19-beta.4",
+    "@vuu-ui/vuu-shell": "2.1.19-beta.4",
+    "@vuu-ui/vuu-table": "2.1.19-beta.4",
+    "@vuu-ui/vuu-table-extras": "2.1.19-beta.4",
+    "@vuu-ui/vuu-ui-controls": "2.1.19-beta.4",
+    "@vuu-ui/vuu-utils": "2.1.19-beta.4"
   },
   "peerDependencies": {
     "clsx": "^2.0.0",
@@ -25,16 +24,20 @@
   },
   "files": [
     "README.md",
-    "src",
+    "esm",
+    "cjs",
     "/types"
   ],
   "exports": {
     ".": {
-      "import": "./src/index.js",
+      "require": "./cjs/index.js",
+      "import": "./esm/index.js",
       "types": "./types/index.d.ts"
     }
   },
-  "module": "index.js",
+  "main": "cjs/index.js",
+  "module": "esm/index.js",
   "name": "@vuu-ui/vuu-datatable",
+  "type": "module",
   "types": "types/index.d.ts"
 }

package/src/filter-table/FilterTable.js

@@ -1,40 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { FilterBar } from "@vuu-ui/vuu-filters";
-import { Table } from "@vuu-ui/vuu-table";
-import { useFilterTable } from "./useFilterTable.js";
-import { DataSourceProvider } from "@vuu-ui/vuu-utils";
-const classBase = "vuuFilterTable";
-const filterTableStyles = {
-    "--vuuFilterBar-flex": "0 0 auto",
-    "--vuuMeasuredContainer-flex": "1 1 auto",
-    display: "flex",
-    flexDirection: "column"
-};
-const FilterTable = ({ FilterBarProps, TableProps, style: styleProps, ...htmlAttributes })=>{
-    const { filterBarProps } = useFilterTable({
-        TableProps,
-        FilterBarProps
-    });
-    return /*#__PURE__*/ jsx(DataSourceProvider, {
-        dataSource: TableProps.dataSource,
-        children: /*#__PURE__*/ jsxs("div", {
-            ...htmlAttributes,
-            className: classBase,
-            style: {
-                ...styleProps,
-                ...filterTableStyles
-            },
-            children: [
-                /*#__PURE__*/ jsx(FilterBar, {
-                    ...filterBarProps
-                }),
-                /*#__PURE__*/ jsx(Table, {
-                    ...TableProps,
-                    height: "auto",
-                    width: "auto"
-                })
-            ]
-        })
-    });
-};
-export { FilterTable };

package/src/filter-table/index.js

@@ -1,2 +0,0 @@
-export * from "./FilterTable.js";
-export * from "./usePersistFilterState.js";

package/src/filter-table/useFilterTable.js

@@ -1,23 +0,0 @@
-import { useCallback } from "react";
-const useFilterTable = ({ FilterBarProps, TableProps: { config: { columns }, dataSource } })=>{
-    const handleApplyFilter = useCallback((filter)=>{
-        dataSource.setFilter?.(filter);
-    }, [
-        dataSource
-    ]);
-    const handleClearFilter = useCallback(()=>{
-        dataSource.clearFilter?.();
-    }, [
-        dataSource
-    ]);
-    const filterBarProps = {
-        ...FilterBarProps,
-        columnDescriptors: FilterBarProps?.columnDescriptors ?? columns,
-        onApplyFilter: handleApplyFilter,
-        onClearFilter: handleClearFilter
-    };
-    return {
-        filterBarProps
-    };
-};
-export { useFilterTable };

package/src/filter-table/usePersistFilterState.js

@@ -1,139 +0,0 @@
-import { useViewContext } from "@vuu-ui/vuu-layout";
-import { useWorkspace } from "@vuu-ui/vuu-shell";
-import { useCallback, useMemo, useState } from "react";
-const NO_CONFIG = {};
-const hasFilterWithName = (filters, name)=>-1 !== filters.findIndex((f)=>f.name === name);
-const usePersistFilterState = ({ tableSchema })=>{
-    const { load, save } = useViewContext();
-    const { getApplicationSettings, saveApplicationSettings } = useWorkspace();
-    const { "filterbar-config": filterbarConfigFromState } = useMemo(()=>load?.() ?? NO_CONFIG, [
-        load
-    ]);
-    const [filterState, setFilterState] = useState({
-        filters: filterbarConfigFromState?.filterState?.filters ?? [],
-        activeIndices: filterbarConfigFromState?.filterState?.activeIndices ?? []
-    });
-    const savedFilters = useMemo(()=>{
-        const { table: { module, table } } = tableSchema;
-        const savedFilters = getApplicationSettings("filters");
-        const key = `${module}:${table}`;
-        return savedFilters?.[key] ?? [];
-    }, [
-        getApplicationSettings,
-        tableSchema
-    ]);
-    const removeFilterFromSettings = useCallback((filter)=>{
-        if (!tableSchema || !filter.name) return;
-        const savedFilters = getApplicationSettings("filters");
-        if (!savedFilters) return;
-        const { module, table } = tableSchema.table;
-        const key = `${module}:${table}`;
-        if (hasFilterWithName(savedFilters[key], filter.name)) {
-            const newSavedFilters = {
-                ...savedFilters,
-                [key]: savedFilters[key].filter((f)=>f.name !== filter.name)
-            };
-            saveApplicationSettings(newSavedFilters, "filters");
-        }
-    }, [
-        getApplicationSettings,
-        saveApplicationSettings,
-        tableSchema
-    ]);
-    const saveFilterToSettings = useCallback((filter, name)=>{
-        if (tableSchema && name) {
-            const savedFilters = getApplicationSettings("filters");
-            let newFilters = savedFilters;
-            const { module, table } = tableSchema.table;
-            const key = `${module}:${table}`;
-            newFilters = savedFilters ? savedFilters[key] ? hasFilterWithName(savedFilters[key], name) ? {
-                ...savedFilters,
-                [key]: savedFilters[key].map((f)=>f.name === name ? {
-                        ...filter,
-                        name
-                    } : f)
-            } : filter?.name && filter?.name !== name && hasFilterWithName(savedFilters[key], filter.name) ? {
-                ...savedFilters,
-                [key]: savedFilters[key].map((f)=>f.name === filter.name ? {
-                        ...filter,
-                        name
-                    } : f)
-            } : {
-                ...savedFilters,
-                [key]: savedFilters[key].concat({
-                    ...filter,
-                    name
-                })
-            } : {
-                ...savedFilters,
-                [key]: [
-                    {
-                        ...filter,
-                        name
-                    }
-                ]
-            } : {
-                [key]: [
-                    {
-                        ...filter,
-                        name
-                    }
-                ]
-            };
-            if (newFilters !== savedFilters) saveApplicationSettings(newFilters, "filters");
-        }
-    }, [
-        getApplicationSettings,
-        saveApplicationSettings,
-        tableSchema
-    ]);
-    const handleFilterStateChanged = useCallback((filterState)=>{
-        save?.({
-            filterState
-        }, "filterbar-config");
-        setFilterState(filterState);
-    }, [
-        save
-    ]);
-    const handleFilterDeleted = useCallback((filter)=>{
-        removeFilterFromSettings(filter);
-    }, [
-        removeFilterFromSettings
-    ]);
-    const handleFilterRenamed = useCallback((filter, name)=>{
-        saveFilterToSettings(filter, name);
-    }, [
-        saveFilterToSettings
-    ]);
-    const buildFilterTableMenuOptions = useCallback((location)=>{
-        if ("filter-bar-menu" !== location) return [];
-        if (savedFilters.length > 0) return savedFilters.map((filter)=>({
-                id: "add-filter",
-                label: filter.name,
-                options: {
-                    filter
-                }
-            }));
-        return [
-            {
-                label: "You have no saved filters for this table",
-                id: "no-action"
-            }
-        ];
-    }, [
-        savedFilters
-    ]);
-    const handleFilterTableMenuAction = useCallback((menuItemId)=>{
-        if ("add-filter" === menuItemId) return true;
-        return false;
-    }, []);
-    return {
-        buildFilterTableMenuOptions,
-        filterState,
-        handleFilterTableMenuAction,
-        onFilterStateChanged: handleFilterStateChanged,
-        onFilterDeleted: handleFilterDeleted,
-        onFilterRenamed: handleFilterRenamed
-    };
-};
-export { usePersistFilterState };

package/src/index.js

@@ -1,4 +0,0 @@
-export * from "./filter-table/index.js";
-export * from "./json-table/index.js";
-export * from "./tree-table/index.js";
-export * from "./linked-table-view/LinkedTableView.js";

package/src/json-table/JsonCell.css.js

@@ -1,21 +0,0 @@
-const css = `
-.vuuJsonCell {
-  --group-cell-spacer-width: 20px;
-  cursor: pointer;
-  height: var(--row-height);
-  border-right-style: solid;
-  border-right-width: 1px;
-  align-items: center;
-  padding-left: 20px;
-  line-height: 16px;
-  display: inline-flex;
-  position: relative;
-
-  & .vuuToggleIconButton {
-    position: absolute;
-  }
-}
-
-
-`;
-export default css;

package/src/json-table/JsonCell.js

@@ -1,40 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import { ToggleIconButton } from "@vuu-ui/vuu-ui-controls";
-import JsonCell from "./JsonCell.css";
-const JsonCell_JsonCell = ({ column, dataRow })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-array-cell",
-        css: JsonCell,
-        window: targetWindow
-    });
-    const { name } = column;
-    let { isExpanded, isLeaf, [name]: value } = dataRow;
-    const getDisplayValue = ()=>{
-        if (isLeaf) return value;
-        if ("string" == typeof value && value.endsWith("{")) {
-            value = value.slice(0, -1);
-            if (!isNaN(parseInt(value))) return `${value}: {...}`;
-            return "value {...}";
-        }
-        if ("string" == typeof value && value.endsWith("[")) {
-            value = value.slice(0, -1);
-            return `${value} [...]`;
-        }
-    };
-    const displayValue = getDisplayValue();
-    const isEmpty = "" === displayValue || void 0 === displayValue;
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            isLeaf || isEmpty ? null : /*#__PURE__*/ jsx(ToggleIconButton, {
-                isExpanded: isExpanded
-            }),
-            /*#__PURE__*/ jsx("span", {
-                children: displayValue
-            })
-        ]
-    });
-};
-export { JsonCell_JsonCell as JsonCell };

package/src/json-table/JsonTable.js

@@ -1,38 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { registerComponent } from "@vuu-ui/vuu-utils";
-import { Table } from "@vuu-ui/vuu-table";
-import { JsonDataSource } from "@vuu-ui/vuu-data-local";
-import { useEffect, useMemo, useRef } from "react";
-import { JsonCell } from "./JsonCell.js";
-registerComponent("json", JsonCell, "cell-renderer");
-const JsonTable = ({ config, source: sourceProp, ...tableProps })=>{
-    const sourceRef = useRef(sourceProp);
-    const dataSourceRef = useRef(void 0);
-    useMemo(()=>{
-        dataSourceRef.current = new JsonDataSource({
-            data: sourceRef.current
-        });
-    }, []);
-    const tableConfig = useMemo(()=>({
-            ...config,
-            columns: dataSourceRef.current?.columnDescriptors ?? [],
-            columnSeparators: true,
-            rowSeparators: true
-        }), [
-        config
-    ]);
-    useEffect(()=>{
-        if (dataSourceRef.current) dataSourceRef.current.data = sourceProp;
-    }, [
-        sourceProp
-    ]);
-    if (void 0 === dataSourceRef.current) return null;
-    return /*#__PURE__*/ jsx(Table, {
-        ...tableProps,
-        config: tableConfig,
-        dataSource: dataSourceRef.current,
-        showColumnHeaderMenus: false,
-        selectionModel: "none"
-    });
-};
-export { JsonTable };

package/src/json-table/index.js

@@ -1 +0,0 @@
-export * from "./JsonTable.js";

package/src/linked-table-view/LinkedTableView.css.js

@@ -1,24 +0,0 @@
-const css = `
-.vuuLinkedTableView-header {
-  padding-right: var(--salt-spacing-100);
-  flex: 0 0 28px;
-  align-items: center;
-  display: flex;
-
-  & .vuuTabstrip {
-    width: fit-content;
-  }
-
-  & .vuuLinkedTableView-toolTray {
-    margin-left: auto;
-  }
-}
-
-.vuuLinkedTableView-view {
-  padding: var(--salt-spacing-100);
-  overflow: hidden;
-}
-
-
-`;
-export default css;

package/src/linked-table-view/LinkedTableView.js

@@ -1,186 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Flexbox, Stack, View } from "@vuu-ui/vuu-layout";
-import { Table } from "@vuu-ui/vuu-table";
-import { Tab, Tabstrip } from "@vuu-ui/vuu-ui-controls";
-import { useComponentCssInjection } from "@salt-ds/styles";
-import { useWindow } from "@salt-ds/window";
-import clsx from "clsx";
-import { useLinkedTableView } from "./useLinkedTableView.js";
-import LinkedTableView from "./LinkedTableView.css";
-import { TableLayoutToggleButton } from "./TableLayoutToggleButton.js";
-const classBase = "vuuLinkedTableView";
-const LinkedTables = ({ className, linkedDataSources, ...htmlAttributes })=>{
-    const targetWindow = useWindow();
-    useComponentCssInjection({
-        testId: "vuu-linked-table-view",
-        css: LinkedTableView,
-        window: targetWindow
-    });
-    const { tableConfig, ...config } = useLinkedTableView({
-        linkedDataSources
-    });
-    const getLinkedTables = (tdsConfig, { activeTab, onChangeTabbedView, onTabChange, tabbedView, ...levelConfig })=>false === Array.isArray(tdsConfig) ? /*#__PURE__*/ jsx(View, {
-            ...levelConfig,
-            header: true,
-            resizeable: true,
-            style: {
-                flexBasis: 0,
-                flexGrow: 1,
-                flexShrink: 1
-            },
-            title: tdsConfig.title,
-            children: /*#__PURE__*/ jsx(Table, {
-                config: tdsConfig.config,
-                dataSource: tdsConfig.dataSource
-            })
-        }) : 1 === tabbedView ? /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                flexDirection: "column",
-                flexBasis: 0,
-                flexGrow: 1,
-                flexShrink: 1
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: `${classBase}-header`,
-                    children: [
-                        /*#__PURE__*/ jsx(Tabstrip, {
-                            activeTabIndex: activeTab,
-                            onActiveChange: onTabChange,
-                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx(Tab, {
-                                    label: title
-                                }, i))
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-toolTray`,
-                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
-                                onChange: onChangeTabbedView,
-                                value: tabbedView
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Stack, {
-                    active: activeTab,
-                    "data-resizeable": true,
-                    showTabs: false,
-                    style: {
-                        flexBasis: 0,
-                        flexGrow: 1,
-                        flexShrink: 1
-                    },
-                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-view`,
-                            style: {
-                                flexBasis: 0,
-                                flexGrow: 1,
-                                flexShrink: 1
-                            },
-                            title: title,
-                            children: /*#__PURE__*/ jsx(Table, {
-                                config: config,
-                                dataSource: dataSource
-                            })
-                        }, i))
-                }, levelConfig.key)
-            ]
-        }) : /*#__PURE__*/ jsxs("div", {
-            style: {
-                display: "flex",
-                flexDirection: "column",
-                flexBasis: 0,
-                flexGrow: 1,
-                flexShrink: 1
-            },
-            children: [
-                /*#__PURE__*/ jsxs("div", {
-                    className: `${classBase}-header`,
-                    children: [
-                        /*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-flexHeaders`,
-                            children: tdsConfig.map(({ title }, i)=>/*#__PURE__*/ jsx("span", {
-                                    children: title
-                                }, i))
-                        }),
-                        /*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-toolTray`,
-                            children: /*#__PURE__*/ jsx(TableLayoutToggleButton, {
-                                onChange: onChangeTabbedView,
-                                value: tabbedView
-                            })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsx(Flexbox, {
-                    style: {
-                        flexDirection: "row",
-                        flexBasis: 0,
-                        flexGrow: 1,
-                        flexShrink: 1
-                    },
-                    children: tdsConfig.map(({ config, dataSource, title }, i)=>/*#__PURE__*/ jsx("div", {
-                            className: `${classBase}-view`,
-                            "data-resizeable": true,
-                            style: {
-                                flexBasis: 0,
-                                flexGrow: 1,
-                                flexShrink: 1
-                            },
-                            title: title,
-                            children: /*#__PURE__*/ jsx(Table, {
-                                config: config,
-                                dataSource: dataSource
-                            })
-                        }, i))
-                })
-            ]
-        });
-    const getAllLinkedTables = (level2, level3, config)=>{
-        const results = [
-            getLinkedTables(level2, config.level2)
-        ];
-        if (level3) results.push(getLinkedTables(level3, config.level3));
-        return results;
-    };
-    if (!tableConfig) return null;
-    {
-        const { 1: level1, 2: level2, 3: level3 } = tableConfig;
-        return /*#__PURE__*/ jsx("div", {
-            ...htmlAttributes,
-            className: clsx(classBase, className),
-            children: /*#__PURE__*/ jsxs(Flexbox, {
-                style: {
-                    flexDirection: "column",
-                    height: "100%"
-                },
-                children: [
-                    /*#__PURE__*/ jsx(View, {
-                        className: `${classBase}-view`,
-                        header: true,
-                        resizeable: true,
-                        style: {
-                            flexBasis: 0,
-                            flexGrow: 1,
-                            flexShrink: 1
-                        },
-                        title: level1.title,
-                        children: /*#__PURE__*/ jsx(Table, {
-                            config: level1.config,
-                            dataSource: level1.dataSource
-                        })
-                    }),
-                    ...getAllLinkedTables(level2, level3, config)
-                ]
-            })
-        });
-    }
-};
-const LinkedTableView_LinkedTableView = ({ className, linkedDataSources, ...htmlAttributes })=>/*#__PURE__*/ jsx(View, {
-        ...htmlAttributes,
-        className: className,
-        children: /*#__PURE__*/ jsx(LinkedTables, {
-            linkedDataSources: linkedDataSources
-        })
-    });
-export { LinkedTableView_LinkedTableView as LinkedTableView };

package/src/linked-table-view/TableLayoutToggleButton.js

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Icon } from "@vuu-ui/vuu-ui-controls";
-import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
-const TableLayoutToggleButton = (props)=>/*#__PURE__*/ jsxs(ToggleButtonGroup, {
-        ...props,
-        children: [
-            /*#__PURE__*/ jsx(ToggleButton, {
-                className: "vuuIconToggleButton",
-                value: 0,
-                "aria-label": "Tabbed View",
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "split-v",
-                    size: 18
-                })
-            }),
-            /*#__PURE__*/ jsx(ToggleButton, {
-                className: "vuuIconToggleButton",
-                value: 1,
-                "aria-label": "Side by side view",
-                children: /*#__PURE__*/ jsx(Icon, {
-                    name: "tabs",
-                    size: 18
-                })
-            })
-        ]
-    });
-export { TableLayoutToggleButton };