@terraware/web-components 5.0.27 → 5.1.0

package/components/EditableTable/index.js

@@ -1,277 +1,217 @@
-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 !== '';
+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;
 };
-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);
-              }
+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 [];
         }
-      }
-      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' : 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'
+    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);
         }
-      }
-    }),
-    // 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
-    })
-  });
+    }, [
+        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]
+                }
+            }
+        },
+        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 /*#__PURE__*/ jsx(Box, {
+        minHeight: "160px",
+        padding: 2,
+        sx: sx,
+        children: /*#__PURE__*/ jsx(MaterialReactTable, {
+            table: table
+        })
+    });
 }
-
-export { EditableTable as default };
+export default EditableTable;

package/components/ErrorBox/ErrorBox.js

@@ -1,51 +1,49 @@
-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';
-
+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";
 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 { ErrorBox as default };
+export default ErrorBox;