@terraware/web-components 5.0.27-rc.0 → 5.0.27

package/components/EditableTable/index.js

@@ -1,217 +1,277 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import react, { useCallback, useEffect, useMemo, useState } from "react";
-import { Box, MenuItem, TextField, useTheme } from "@mui/material";
-import { MaterialReactTable, useMaterialReactTable } from "material-react-table";
-import Button from "../Button/Button.js";
-const isActiveFilter = (filter)=>{
-    if (!filter.value) return false;
-    if (Array.isArray(filter.value)) return filter.value.some((v)=>null != v && '' !== v);
-    return null !== filter.value && void 0 !== filter.value && '' !== filter.value;
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import { useTheme, Box, TextField, MenuItem } from '@mui/material';
+import { useMaterialReactTable, MaterialReactTable } from 'material-react-table';
+import Button from '../Button/Button.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const isActiveFilter = filter => {
+  if (!filter.value) {
+    return false;
+  }
+  if (Array.isArray(filter.value)) {
+    return filter.value.some(v => v !== null && v !== undefined && v !== '');
+  }
+  return filter.value !== null && filter.value !== undefined && filter.value !== '';
 };
-function EditableTable({ clearAllFiltersLabel, columns, data, enableClearAllFilters = true, enableEditing = false, enableColumnOrdering = false, enableColumnPinning = false, enableSorting = true, enableGlobalFilter = false, enableColumnFilters = false, stickyFilters = false, storageKey, enablePagination = true, enableBottomToolbar = true, enableTopToolbar = true, initialSorting, onClearAllFilters, onRowClick, renderToolbarInternalActions, sx, tableOptions = {} }) {
-    const theme = useTheme();
-    const filtersEnabled = enableColumnFilters || enableGlobalFilter;
-    const showClearAllFilters = enableClearAllFilters && filtersEnabled;
-    const [columnFilters, setColumnFilters] = useState(()=>{
-        if (!stickyFilters || !storageKey) return [];
-        try {
-            const saved = localStorage.getItem(`${storageKey}_columnFilters`);
-            if (saved) {
-                const parsed = JSON.parse(saved);
-                return parsed.filter(isActiveFilter);
-            }
-            return [];
-        } catch (error) {
-            console.error('Error loading column filters:', error);
-            return [];
-        }
-    });
-    useEffect(()=>{
-        if (!stickyFilters || !storageKey) return;
-        try {
-            const validFilters = columnFilters.filter(isActiveFilter);
-            localStorage.setItem(`${storageKey}_columnFilters`, JSON.stringify(validFilters));
-        } catch (error) {
-            console.error('Error saving column filters:', error);
-        }
-    }, [
-        columnFilters,
-        stickyFilters,
-        storageKey
-    ]);
-    const mrtColumns = useMemo(()=>columns.map((col)=>{
-            const mrtCol = {
-                id: col.id,
-                header: col.header,
-                accessorKey: col.accessorKey,
-                accessorFn: col.accessorFn,
-                size: col.size,
-                enableEditing: col.enableEditing ?? enableEditing,
-                enableHiding: col.enableHiding ?? true,
-                Cell: col.Cell,
-                filterVariant: col.filterVariant,
-                filterSelectOptions: col.filterSelectOptions,
-                filterFn: col.filterFn,
-                enableColumnFilter: void 0 !== col.filterVariant
-            };
-            if (col.sortingFn) mrtCol.sortingFn = col.sortingFn;
-            if (col.editConfig) {
-                const { editVariant = 'text', selectOptions, customEditComponent, onSave } = col.editConfig;
-                if ('custom' === editVariant && customEditComponent) mrtCol.Edit = customEditComponent;
-                else if ('select' === editVariant && selectOptions) {
-                    mrtCol.editVariant = 'select';
-                    mrtCol.editSelectOptions = selectOptions;
-                    const SelectEditComponent = ({ cell, row, table: iTable })=>{
-                        const [value, setValue] = react.useState(cell.getValue() || '');
-                        const handleSave = useCallback(()=>{
-                            if (onSave) onSave(row.original, value, col.id);
-                            iTable.setEditingCell(null);
-                        }, [
-                            value
-                        ]);
-                        return /*#__PURE__*/ jsx(TextField, {
-                            select: true,
-                            value: value,
-                            onChange: (e)=>setValue(e.target.value),
-                            onBlur: handleSave,
-                            onKeyDown: (e)=>{
-                                if ('Enter' === e.key) handleSave();
-                                else if ('Escape' === e.key) iTable.setEditingCell(null);
-                            },
-                            size: "small",
-                            fullWidth: true,
-                            children: selectOptions.map((option)=>/*#__PURE__*/ jsx(MenuItem, {
-                                    value: option.value,
-                                    children: option.label
-                                }, option.value))
-                        });
-                    };
-                    mrtCol.Edit = SelectEditComponent;
-                } else mrtCol.muiEditTextFieldProps = ({ row })=>({
-                        onBlur: (event)=>{
-                            if (onSave) {
-                                const value = event.target.value;
-                                onSave(row.original, value, col.id);
-                            }
-                        }
-                    });
-            }
-            return mrtCol;
-        }), [
-        columns,
-        enableEditing
-    ]);
-    const initialStateConfig = {
-        ...initialSorting ? {
-            sorting: initialSorting
-        } : {},
-        ...enableColumnFilters ? {
-            showColumnFilters: true
-        } : {},
-        ...enableGlobalFilter ? {
-            showGlobalFilter: true
-        } : {}
-    };
-    const handleClearAllFilters = useCallback((tbl)=>{
-        tbl.resetColumnFilters();
-        if (enableGlobalFilter) tbl.resetGlobalFilter();
-        setColumnFilters([]);
-        if (storageKey) localStorage.removeItem(`${storageKey}_columnFilters`);
-        onClearAllFilters?.();
-    }, [
-        enableGlobalFilter,
-        storageKey,
-        onClearAllFilters
-    ]);
-    const consumerRenderTopToolbarCustomActions = tableOptions?.renderTopToolbarCustomActions;
-    const consumerRenderToolbarInternalActions = renderToolbarInternalActions ?? tableOptions?.renderToolbarInternalActions;
-    const composedRenderToolbarInternalActions = useCallback(({ table: tbl })=>{
-        const state = tbl.getState();
-        const hasColumnFilters = state.columnFilters.some(isActiveFilter);
-        const hasGlobalFilter = enableGlobalFilter && !!state.globalFilter;
-        const hasActiveFilters = hasColumnFilters || hasGlobalFilter;
-        return /*#__PURE__*/ jsxs(Box, {
-            sx: {
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1
-            },
-            children: [
-                showClearAllFilters && hasActiveFilters && /*#__PURE__*/ jsx(Button, {
-                    onClick: ()=>handleClearAllFilters(tbl),
-                    label: clearAllFiltersLabel,
-                    priority: "ghost",
-                    size: "small"
-                }),
-                consumerRenderToolbarInternalActions && consumerRenderToolbarInternalActions({
-                    table: tbl
-                })
-            ]
-        });
-    }, [
-        showClearAllFilters,
-        consumerRenderToolbarInternalActions,
-        enableGlobalFilter,
-        handleClearAllFilters,
-        clearAllFiltersLabel
-    ]);
-    const table = useMaterialReactTable({
-        columns: mrtColumns,
-        data,
-        editDisplayMode: 'cell',
-        enableColumnOrdering,
-        enableColumnPinning,
-        enableEditing,
-        enableSorting,
-        enableGlobalFilter,
-        enableColumnFilters,
-        enableFilters: enableColumnFilters || enableGlobalFilter,
-        enablePagination,
-        enableBottomToolbar: enablePagination ? enableBottomToolbar : false,
-        enableTopToolbar,
-        positionGlobalFilter: enableGlobalFilter ? 'left' : void 0,
-        ...Object.keys(initialStateConfig).length > 0 ? {
-            initialState: initialStateConfig
-        } : {},
-        muiTableBodyProps: {
-            sx: {
-                '& tr:nth-of-type(odd) > td': {
-                    backgroundColor: theme.palette.TwClrBaseGray025 || theme.palette.grey[50]
+function EditableTable({
+  clearAllFiltersLabel,
+  columns,
+  data,
+  enableClearAllFilters = true,
+  enableEditing = false,
+  enableColumnOrdering = false,
+  enableColumnPinning = false,
+  enableSorting = true,
+  enableGlobalFilter = false,
+  enableColumnFilters = false,
+  stickyFilters = false,
+  storageKey,
+  enablePagination = true,
+  enableBottomToolbar = true,
+  enableTopToolbar = true,
+  initialSorting,
+  onClearAllFilters,
+  onRowClick,
+  renderToolbarInternalActions,
+  sx,
+  tableOptions = {}
+}) {
+  const theme = useTheme();
+  const filtersEnabled = enableColumnFilters || enableGlobalFilter;
+  const showClearAllFilters = enableClearAllFilters && filtersEnabled;
+
+  // Sticky column filters - load from localStorage (only if stickyFilters is enabled)
+  const [columnFilters, setColumnFilters] = useState(() => {
+    if (!stickyFilters || !storageKey) {
+      return [];
+    }
+    try {
+      const saved = localStorage.getItem(`${storageKey}_columnFilters`);
+      if (saved) {
+        const parsed = JSON.parse(saved);
+
+        // Filter out any filters with null or empty values
+        return parsed.filter(isActiveFilter);
+      }
+      return [];
+    } catch (error) {
+      console.error('Error loading column filters:', error);
+      return [];
+    }
+  });
+
+  // Save column filters to localStorage when they change
+  useEffect(() => {
+    if (!stickyFilters || !storageKey) {
+      return;
+    }
+    try {
+      // Filter out any filters with null or empty values before saving
+      const validFilters = columnFilters.filter(isActiveFilter);
+      localStorage.setItem(`${storageKey}_columnFilters`, JSON.stringify(validFilters));
+    } catch (error) {
+      console.error('Error saving column filters:', error);
+    }
+  }, [columnFilters, stickyFilters, storageKey]);
+
+  // Convert simplified column definitions to MRT column definitions
+  const mrtColumns = useMemo(() => {
+    return columns.map(col => {
+      const mrtCol = {
+        id: col.id,
+        header: col.header,
+        accessorKey: col.accessorKey,
+        accessorFn: col.accessorFn,
+        size: col.size,
+        enableEditing: col.enableEditing ?? enableEditing,
+        enableHiding: col.enableHiding ?? true,
+        Cell: col.Cell,
+        filterVariant: col.filterVariant,
+        filterSelectOptions: col.filterSelectOptions,
+        filterFn: col.filterFn,
+        enableColumnFilter: col.filterVariant !== undefined
+      };
+      if (col.sortingFn) {
+        // The underlying library must be checking for the existence of the `sortingFn` key, because even
+        // `sortingFn: undefined` doesn't work, so have to conditionally add it
+        mrtCol.sortingFn = col.sortingFn;
+      }
+
+      // Handle edit configuration
+      if (col.editConfig) {
+        const {
+          editVariant = 'text',
+          selectOptions,
+          customEditComponent,
+          onSave
+        } = col.editConfig;
+        if (editVariant === 'custom' && customEditComponent) {
+          mrtCol.Edit = customEditComponent;
+        } else if (editVariant === 'select' && selectOptions) {
+          mrtCol.editVariant = 'select';
+          mrtCol.editSelectOptions = selectOptions;
+          const SelectEditComponent = ({
+            cell,
+            row,
+            table: iTable
+          }) => {
+            const [value, setValue] = React.useState(cell.getValue() || '');
+            const handleSave = useCallback(() => {
+              if (onSave) {
+                void onSave(row.original, value, col.id);
+              }
+              iTable.setEditingCell(null);
+            }, [value]);
+            return /*#__PURE__*/jsx(TextField, {
+              select: true,
+              value: value,
+              onChange: e => setValue(e.target.value),
+              onBlur: handleSave,
+              onKeyDown: e => {
+                if (e.key === 'Enter') {
+                  handleSave();
+                } else if (e.key === 'Escape') {
+                  iTable.setEditingCell(null);
                 }
+              },
+              size: "small",
+              fullWidth: true,
+              children: selectOptions.map(option => /*#__PURE__*/jsx(MenuItem, {
+                value: option.value,
+                children: option.label
+              }, option.value))
+            });
+          };
+          mrtCol.Edit = SelectEditComponent;
+        } else {
+          // Default text input with onBlur save
+          mrtCol.muiEditTextFieldProps = ({
+            row
+          }) => ({
+            onBlur: event => {
+              if (onSave) {
+                const value = event.target.value;
+                // eslint-disable-next-line react/prop-types
+                void onSave(row.original, value, col.id);
+              }
             }
-        },
-        muiTablePaperProps: {
-            elevation: 0
-        },
-        muiTableBodyRowProps: ({ row })=>({
-                onClick: onRowClick ? ()=>onRowClick(row.original) : void 0,
-                sx: {
-                    cursor: onRowClick ? 'pointer' : 'default',
-                    '& td': {
-                        borderBottom: 'none'
-                    }
-                }
-            }),
-        ...tableOptions,
-        renderToolbarInternalActions: composedRenderToolbarInternalActions,
-        ...consumerRenderTopToolbarCustomActions ? {
-            renderTopToolbarCustomActions: consumerRenderTopToolbarCustomActions
-        } : {},
-        ...stickyFilters && storageKey ? {
-            state: {
-                ...tableOptions?.state,
-                columnFilters
-            },
-            onColumnFiltersChange: setColumnFilters
-        } : {}
+          });
+        }
+      }
+      return mrtCol;
     });
-    return /*#__PURE__*/ jsx(Box, {
-        minHeight: "160px",
-        padding: 2,
-        sx: sx,
-        children: /*#__PURE__*/ jsx(MaterialReactTable, {
-            table: table
-        })
+  }, [columns, enableEditing]);
+  const initialStateConfig = {
+    ...(initialSorting ? {
+      sorting: initialSorting
+    } : {}),
+    ...(enableColumnFilters ? {
+      showColumnFilters: true
+    } : {}),
+    ...(enableGlobalFilter ? {
+      showGlobalFilter: true
+    } : {})
+  };
+  const handleClearAllFilters = useCallback(tbl => {
+    tbl.resetColumnFilters();
+    if (enableGlobalFilter) {
+      tbl.resetGlobalFilter();
+    }
+    setColumnFilters([]);
+    if (storageKey) {
+      localStorage.removeItem(`${storageKey}_columnFilters`);
+    }
+    onClearAllFilters?.();
+  }, [enableGlobalFilter, storageKey, onClearAllFilters]);
+  const consumerRenderTopToolbarCustomActions = tableOptions?.renderTopToolbarCustomActions;
+  const consumerRenderToolbarInternalActions = renderToolbarInternalActions ?? tableOptions?.renderToolbarInternalActions;
+  const composedRenderToolbarInternalActions = useCallback(({
+    table: tbl
+  }) => {
+    const state = tbl.getState();
+    const hasColumnFilters = state.columnFilters.some(isActiveFilter);
+    const hasGlobalFilter = enableGlobalFilter && !!state.globalFilter;
+    const hasActiveFilters = hasColumnFilters || hasGlobalFilter;
+    return /*#__PURE__*/jsxs(Box, {
+      sx: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 1
+      },
+      children: [showClearAllFilters && hasActiveFilters && /*#__PURE__*/jsx(Button, {
+        onClick: () => handleClearAllFilters(tbl),
+        label: clearAllFiltersLabel,
+        priority: "ghost",
+        size: "small"
+      }), consumerRenderToolbarInternalActions && consumerRenderToolbarInternalActions({
+        table: tbl
+      })]
     });
+  }, [showClearAllFilters, consumerRenderToolbarInternalActions, enableGlobalFilter, handleClearAllFilters, clearAllFiltersLabel]);
+  const table = useMaterialReactTable({
+    columns: mrtColumns,
+    data,
+    editDisplayMode: 'cell',
+    enableColumnOrdering,
+    enableColumnPinning,
+    enableEditing,
+    enableSorting,
+    enableGlobalFilter,
+    enableColumnFilters,
+    enableFilters: enableColumnFilters || enableGlobalFilter,
+    enablePagination,
+    enableBottomToolbar: enablePagination ? enableBottomToolbar : false,
+    enableTopToolbar,
+    positionGlobalFilter: enableGlobalFilter ? 'left' : undefined,
+    ...(Object.keys(initialStateConfig).length > 0 ? {
+      initialState: initialStateConfig
+    } : {}),
+    muiTableBodyProps: {
+      sx: {
+        '& tr:nth-of-type(odd) > td': {
+          backgroundColor: theme.palette.TwClrBaseGray025 || theme.palette.grey[50]
+        }
+      }
+    },
+    muiTablePaperProps: {
+      elevation: 0
+    },
+    muiTableBodyRowProps: ({
+      row
+    }) => ({
+      // eslint-disable-next-line react/prop-types
+      onClick: onRowClick ? () => onRowClick(row.original) : undefined,
+      sx: {
+        cursor: onRowClick ? 'pointer' : 'default',
+        '& td': {
+          borderBottom: 'none'
+        }
+      }
+    }),
+    // Merge any additional table options
+    ...tableOptions,
+    // These must come after ...tableOptions to avoid being overridden
+    renderToolbarInternalActions: composedRenderToolbarInternalActions,
+    ...(consumerRenderTopToolbarCustomActions ? {
+      renderTopToolbarCustomActions: consumerRenderTopToolbarCustomActions
+    } : {}),
+    // Add sticky filters state if enabled
+    ...(stickyFilters && storageKey ? {
+      state: {
+        ...tableOptions?.state,
+        columnFilters
+      },
+      onColumnFiltersChange: setColumnFilters
+    } : {})
+  });
+  return /*#__PURE__*/jsx(Box, {
+    minHeight: "160px",
+    padding: 2,
+    sx: sx,
+    children: /*#__PURE__*/jsx(MaterialReactTable, {
+      table: table
+    })
+  });
 }
-export default EditableTable;
+
+export { EditableTable as default };

package/components/ErrorBox/ErrorBox.js

@@ -1,49 +1,51 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "react";
-import { Box } from "@mui/material";
-import useDeviceInfo from "../../utils/useDeviceInfo.js";
-import Button from "../Button/Button.js";
-import Icon from "../Icon/Icon.js";
-import "./styles.scss";
+import 'react';
+import { Box } from '@mui/material';
+import useDeviceInfo from '../../utils/useDeviceInfo.js';
+import Button from '../Button/Button.js';
+import Icon from '../Icon/Icon.js';
+import './styles.scss';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
 function ErrorBox(props) {
-    const { text, onClick, buttonText, title, className, sx } = props;
-    const { isMobile } = useDeviceInfo();
-    return /*#__PURE__*/ jsxs(Box, {
-        className: `error-box ${className} ${isMobile ? 'mobile' : ''}`,
-        sx: sx,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "error-box--container",
-                children: [
-                    /*#__PURE__*/ jsx(Icon, {
-                        name: "error",
-                        className: "error-icon",
-                        size: "large"
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        children: [
-                            title && /*#__PURE__*/ jsx("h1", {
-                                className: "error-title",
-                                children: title
-                            }),
-                            /*#__PURE__*/ jsx("p", {
-                                className: "error-text",
-                                children: text
-                            })
-                        ]
-                    })
-                ]
-            }),
-            buttonText && onClick && /*#__PURE__*/ jsx("div", {
-                className: "button-container",
-                children: /*#__PURE__*/ jsx(Button, {
-                    label: buttonText,
-                    priority: "secondary",
-                    type: "passive",
-                    onClick: onClick
-                })
-            })
-        ]
-    });
+  const {
+    text,
+    onClick,
+    buttonText,
+    title,
+    className,
+    sx
+  } = props;
+  const {
+    isMobile
+  } = useDeviceInfo();
+  return /*#__PURE__*/jsxs(Box, {
+    className: `error-box ${className} ${isMobile ? 'mobile' : ''}`,
+    sx: sx,
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "error-box--container",
+      children: [/*#__PURE__*/jsx(Icon, {
+        name: "error",
+        className: "error-icon",
+        size: "large"
+      }), /*#__PURE__*/jsxs("div", {
+        children: [title && /*#__PURE__*/jsx("h1", {
+          className: "error-title",
+          children: title
+        }), /*#__PURE__*/jsx("p", {
+          className: "error-text",
+          children: text
+        })]
+      })]
+    }), buttonText && onClick && /*#__PURE__*/jsx("div", {
+      className: "button-container",
+      children: /*#__PURE__*/jsx(Button, {
+        label: buttonText,
+        priority: "secondary",
+        type: "passive",
+        onClick: onClick
+      })
+    })]
+  });
 }
-export default ErrorBox;
+
+export { ErrorBox as default };