@terraware/web-components 3.9.10 → 3.9.12

package/components/DialogBox/styles.scss

@@ -1,4 +1,4 @@
-@import '../../style-dictionary-dist/terraware.scss';
+@use '../../style-dictionary-dist/terraware.scss';
 
 @font-face {
   font-family: 'Inter';
@@ -15,11 +15,11 @@
   inset: 0px;
 
   &--skrim {
-    background-color: rgba($tw-clr-base-gray-025, $tw-opcty-base-060);
+    background-color: rgba(terraware.$tw-clr-base-gray-025, terraware.$tw-opcty-base-060);
     background-image: linear-gradient(
       180deg,
-      rgba($tw-clr-base-green-050, $tw-opcty-base-000),
-      rgba($tw-clr-base-green-050, 0.24)
+      rgba(terraware.$tw-clr-base-green-050, terraware.$tw-opcty-base-000),
+      rgba(terraware.$tw-clr-base-green-050, 0.24)
     );
     height: 100%;
     display: flex;
@@ -31,11 +31,11 @@
   }
 
   &.mobile {
-    margin: 0 $tw-spc-base-small;
+    margin: 0 terraware.$tw-spc-base-small;
     .dialog-box {
       &--footer {
         button {
-          margin: 0 0 $tw-spc-base-x-small 0;
+          margin: 0 0 terraware.$tw-spc-base-x-small 0;
         }
         &-container {
           flex-direction: column;
@@ -54,11 +54,11 @@
 }
 
 .dialog-box {
-  box-shadow: $tw-elvtn-base-800;
-  border-radius: $tw-sz-base-small;
+  box-shadow: terraware.$tw-elvtn-base-800;
+  border-radius: terraware.$tw-sz-base-small;
   display: flex;
   flex-direction: column;
-  background: $tw-clr-base-white;
+  background: terraware.$tw-clr-base-white;
   max-height: calc(100vh - 128px); //64 from top and bottom
   max-width: calc(100vw - 32px);
   margin-top: auto;
@@ -85,42 +85,42 @@
   }
 
   &--header {
-    border-bottom: 1px solid $tw-clr-brdr-tertiary;
-    padding: $tw-spc-base-small $tw-spc-base-medium;
+    border-bottom: 1px solid terraware.$tw-clr-brdr-tertiary;
+    padding: terraware.$tw-spc-base-small terraware.$tw-spc-base-medium;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border-radius: $tw-sz-base-small $tw-sz-base-small 0 0;
+    border-radius: terraware.$tw-sz-base-small terraware.$tw-sz-base-small 0 0;
     .title {
-      font-family: $tw-fnt-dlg-bx-title-font-family;
-      font-size: $tw-fnt-dlg-bx-title-font-size;
-      font-weight: $tw-fnt-dlg-bx-title-font-weight;
-      line-height: $tw-fnt-dlg-bx-title-line-height;
-      color: $tw-clr-txt;
+      font-family: terraware.$tw-fnt-dlg-bx-title-font-family;
+      font-size: terraware.$tw-fnt-dlg-bx-title-font-size;
+      font-weight: terraware.$tw-fnt-dlg-bx-title-font-weight;
+      line-height: terraware.$tw-fnt-dlg-bx-title-line-height;
+      color: terraware.$tw-clr-txt;
       text-align: center;
       margin: 0;
       width: 100%;
     }
 
     .icon-close {
-      fill: $tw-clr-icn-secondary;
-      height: $tw-sz-base-medium;
-      width: $tw-sz-base-medium;
+      fill: terraware.$tw-clr-icn-secondary;
+      height: terraware.$tw-sz-base-medium;
+      width: terraware.$tw-sz-base-medium;
     }
 
     .MuiButtonBase-root {
-      padding: $tw-spc-base-xx-small;
+      padding: terraware.$tw-spc-base-xx-small;
     }
 
     .close-icon-spacer {
-      height: calc(#{$tw-sz-base-medium} + 2 *#{$tw-spc-base-xx-small});
-      width: calc(#{$tw-sz-base-medium} + 2 *#{$tw-spc-base-xx-small});
+      height: calc(#{terraware.$tw-sz-base-medium} + 2 *#{terraware.$tw-spc-base-xx-small});
+      width: calc(#{terraware.$tw-sz-base-medium} + 2 *#{terraware.$tw-spc-base-xx-small});
     }
   }
 
   &--body {
-    background: $tw-clr-base-white;
-    padding: $tw-spc-base-medium;
+    background: terraware.$tw-clr-base-white;
+    padding: terraware.$tw-spc-base-medium;
     text-align: center;
     &.scrolled {
       overflow: auto;
@@ -128,28 +128,28 @@
   }
 
   &--body-no-footer {
-    padding: $tw-spc-base-medium;
+    padding: terraware.$tw-spc-base-medium;
     &.scrolled {
       overflow: auto;
     }
   }
 
   &--message {
-    font-family: $tw-fnt-dlg-bx-message-font-family;
-    font-size: $tw-fnt-dlg-bx-message-font-size;
-    font-weight: $tw-fnt-dlg-bx-message-font-weight;
-    line-height: $tw-fnt-dlg-bx-message-line-height;
-    color: $tw-clr-txt;
+    font-family: terraware.$tw-fnt-dlg-bx-message-font-family;
+    font-size: terraware.$tw-fnt-dlg-bx-message-font-size;
+    font-weight: terraware.$tw-fnt-dlg-bx-message-font-weight;
+    line-height: terraware.$tw-fnt-dlg-bx-message-line-height;
+    color: terraware.$tw-clr-txt;
     width: 100%;
     text-align: center;
   }
 
   &--footer {
-    border-radius: 0 0 $tw-sz-base-small $tw-sz-base-small;
-    background-color: $tw-clr-bg-secondary;
-    padding: $tw-spc-base-medium $tw-spc-base-medium;
+    border-radius: 0 0 terraware.$tw-sz-base-small terraware.$tw-sz-base-small;
+    background-color: terraware.$tw-clr-bg-secondary;
+    padding: terraware.$tw-spc-base-medium terraware.$tw-spc-base-medium;
     button + button {
-      margin-left: $tw-spc-base-x-small;
+      margin-left: terraware.$tw-spc-base-x-small;
     }
   }
 

package/components/EditableTable/index.d.ts

@@ -0,0 +1,86 @@
+/// <reference types="react" />
+import { MRT_Cell, MRT_Column, MRT_Row, MRT_TableInstance, MRT_TableOptions } from 'material-react-table';
+export type ColumnEditConfig<TData extends Record<string, any>> = {
+    /** Function to call when a cell value is saved (on blur) */
+    onSave?: (row: TData, value: any, columnId: string) => void | Promise<void>;
+    /** Edit variant: 'text' (default), 'select', or 'custom' */
+    editVariant?: 'text' | 'select' | 'custom';
+    /** Options for select variant */
+    selectOptions?: {
+        label: string;
+        value: string | number;
+    }[];
+    /** Custom edit component */
+    customEditComponent?: (props: {
+        cell: MRT_Cell<TData>;
+        row: MRT_Row<TData>;
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => JSX.Element;
+};
+export type EditableTableColumn<TData extends Record<string, any>> = {
+    id: string;
+    /** Column header text */
+    header: string;
+    /** Key to access data in row object */
+    accessorKey?: keyof TData;
+    /** Custom accessor function for computed values */
+    accessorFn?: (row: TData) => any;
+    /** Width of the column in pixels */
+    size?: number;
+    /** Whether the column is editable. Can be a boolean or a function that receives the row and returns a boolean */
+    enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
+    /** Whether the column can be hidden */
+    enableHiding?: boolean;
+    /** Edit configuration for this column */
+    editConfig?: ColumnEditConfig<TData>;
+    /** Custom cell renderer */
+    Cell?: (props: {
+        cell: MRT_Cell<TData>;
+        row: MRT_Row<TData>;
+    }) => JSX.Element | null;
+    /** Filter variant: 'text', 'select', 'multi-select', 'range', 'date-range' */
+    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'date-range';
+    /** Options for select/multi-select filters */
+    filterSelectOptions?: string[];
+    /** Custom filter function */
+    filterFn?: 'fuzzy' | 'between' | 'arrIncludesSome' | ((row: TData, columnId: string, filterValue: any) => boolean);
+};
+export type EditableTableProps<TData extends Record<string, any>> = {
+    /** Array of column definitions */
+    columns: EditableTableColumn<TData>[];
+    /** Array of data rows */
+    data: TData[];
+    /** Whether to enable editing (default: false) */
+    enableEditing?: boolean;
+    /** Whether to enable column ordering (default: false) */
+    enableColumnOrdering?: boolean;
+    /** Whether to enable column pinning (default: false) */
+    enableColumnPinning?: boolean;
+    /** Whether to enable sorting (default: true) */
+    enableSorting?: boolean;
+    /** Whether to enable global filter/search (default: false) */
+    enableGlobalFilter?: boolean;
+    /** Whether to enable column filters (default: false) */
+    enableColumnFilters?: boolean;
+    /** Whether to enable pagination (default: true) */
+    enablePagination?: boolean;
+    /** Whether to show the bottom toolbar (default: true) */
+    enableBottomToolbar?: boolean;
+    /** Whether to show the top toolbar (default: true) */
+    enableTopToolbar?: boolean;
+    initialSorting?: {
+        id: string;
+        desc: boolean;
+    }[];
+    /** Callback when a row is clicked */
+    onRowClick?: (row: TData) => void;
+    /** Custom toolbar actions */
+    renderToolbarInternalActions?: (props: {
+        table: MRT_TableInstance<TData>;
+    }) => JSX.Element;
+    /** Additional MRT table options to override defaults */
+    tableOptions?: Partial<MRT_TableOptions<TData>>;
+};
+export default function EditableTable<TData extends Record<string, any>>({ columns, data, enableEditing, enableColumnOrdering, enableColumnPinning, enableSorting, enableGlobalFilter, enableColumnFilters, enablePagination, enableBottomToolbar, enableTopToolbar, initialSorting, onRowClick, renderToolbarInternalActions, tableOptions, }: EditableTableProps<TData>): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/components/EditableTable/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EditableTable/index.tsx"],"names":[],"mappings":"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"}

package/components/EditableTable/index.js

@@ -0,0 +1,179 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = EditableTable;
+var _react = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _materialReactTable = require("material-react-table");
+function EditableTable(_ref) {
+  let {
+    columns,
+    data,
+    enableEditing = false,
+    enableColumnOrdering = false,
+    enableColumnPinning = false,
+    enableSorting = true,
+    enableGlobalFilter = false,
+    enableColumnFilters = false,
+    enablePagination = true,
+    enableBottomToolbar = true,
+    enableTopToolbar = true,
+    initialSorting,
+    onRowClick,
+    renderToolbarInternalActions,
+    tableOptions = {}
+  } = _ref;
+  const theme = (0, _material.useTheme)();
+
+  // Convert simplified column definitions to MRT column definitions
+  const mrtColumns = (0, _react.useMemo)(() => {
+    return columns.map(col => {
+      var _col$enableEditing, _col$enableHiding;
+      const mrtCol = {
+        id: col.id,
+        header: col.header,
+        accessorKey: col.accessorKey,
+        accessorFn: col.accessorFn,
+        size: col.size,
+        enableEditing: (_col$enableEditing = col.enableEditing) !== null && _col$enableEditing !== void 0 ? _col$enableEditing : enableEditing,
+        enableHiding: (_col$enableHiding = col.enableHiding) !== null && _col$enableHiding !== void 0 ? _col$enableHiding : true,
+        Cell: col.Cell,
+        filterVariant: col.filterVariant,
+        filterSelectOptions: col.filterSelectOptions,
+        filterFn: col.filterFn,
+        enableColumnFilter: col.filterVariant !== undefined
+      };
+
+      // 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 = _ref2 => {
+            let {
+              cell,
+              row,
+              table: iTable
+            } = _ref2;
+            const [value, setValue] = _react.default.useState(cell.getValue() || '');
+            const handleSave = (0, _react.useCallback)(() => {
+              if (onSave) {
+                void onSave(row.original, value, col.id);
+              }
+              iTable.setEditingCell(null);
+            }, [value]);
+            return /*#__PURE__*/_react.default.createElement(_material.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
+            }, selectOptions.map(option => /*#__PURE__*/_react.default.createElement(_material.MenuItem, {
+              key: option.value,
+              value: option.value
+            }, option.label)));
+          };
+          mrtCol.Edit = SelectEditComponent;
+        } else {
+          // Default text input with onBlur save
+          mrtCol.muiEditTextFieldProps = _ref3 => {
+            let {
+              row
+            } = _ref3;
+            return {
+              onBlur: event => {
+                if (onSave) {
+                  const value = event.target.value;
+                  void onSave(row.original, value, col.id);
+                }
+              }
+            };
+          };
+        }
+      }
+      return mrtCol;
+    });
+  }, [columns, enableEditing]);
+  const initialStateConfig = {
+    ...(initialSorting ? {
+      sorting: initialSorting
+    } : {}),
+    ...(enableColumnFilters ? {
+      showColumnFilters: true
+    } : {}),
+    ...(enableGlobalFilter ? {
+      showGlobalFilter: true
+    } : {})
+  };
+  const table = (0, _materialReactTable.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
+    } : {}),
+    renderToolbarInternalActions,
+    muiTableBodyProps: {
+      sx: {
+        '& tr:nth-of-type(odd) > td': {
+          backgroundColor: theme.palette.TwClrBaseGray025 || theme.palette.grey[50]
+        }
+      }
+    },
+    muiTablePaperProps: {
+      elevation: 0
+    },
+    muiTableBodyRowProps: _ref4 => {
+      let {
+        row
+      } = _ref4;
+      return {
+        onClick: onRowClick ? () => onRowClick(row.original) : undefined,
+        sx: {
+          cursor: onRowClick ? 'pointer' : 'default',
+          '& td': {
+            borderBottom: 'none'
+          }
+        }
+      };
+    },
+    // Merge any additional table options
+    ...tableOptions
+  });
+  return /*#__PURE__*/_react.default.createElement(_material.Box, {
+    minHeight: "160px",
+    padding: 2
+  }, /*#__PURE__*/_react.default.createElement(_materialReactTable.MaterialReactTable, {
+    table: table
+  }));
+}

package/components/ErrorBox/styles.scss

@@ -1,4 +1,4 @@
-@import '../../style-dictionary-dist/terraware.scss';
+@use '../../style-dictionary-dist/terraware.scss';
 
 @font-face {
   font-family: 'Inter';
@@ -8,11 +8,11 @@
 .error-box {
   display: flex;
   width: 60%;
-  margin-top: $tw-spc-base-xx-small;
-  background: $tw-clr-base-red-050;
+  margin-top: terraware.$tw-spc-base-xx-small;
+  background: terraware.$tw-clr-base-red-050;
   padding: 16px;
   margin: 0 auto;
-  border: 1px solid $tw-clr-icn-danger;
+  border: 1px solid terraware.$tw-clr-icn-danger;
   border-radius: 8px;
   flex-direction: column;
 
@@ -27,11 +27,11 @@
 }
 
 .error-text {
-  font-family: $tw-fnt-frm-fld-error-text-font-family;
-  font-size: $tw-fnt-base-font-size-body-02;
-  font-weight: $tw-fnt-frm-fld-error-text-font-weight;
-  line-height: $tw-fnt-frm-fld-error-text-line-height;
-  color: $tw-clr-txt;
+  font-family: terraware.$tw-fnt-frm-fld-error-text-font-family;
+  font-size: terraware.$tw-fnt-base-font-size-body-02;
+  font-weight: terraware.$tw-fnt-frm-fld-error-text-font-weight;
+  line-height: terraware.$tw-fnt-frm-fld-error-text-line-height;
+  color: terraware.$tw-clr-txt;
   display: block;
   width: 100%;
   max-width: 100%;
@@ -40,11 +40,11 @@
 }
 
 .error-title {
-  font-family: $tw-fnt-frm-fld-error-text-font-family;
-  font-size: $tw-fnt-base-font-size-body-02;
-  font-weight: $tw-fnt-base-headline-01-semi-bold-font-weight;
-  line-height: $tw-fnt-frm-fld-error-text-line-height;
-  color: $tw-clr-txt;
+  font-family: terraware.$tw-fnt-frm-fld-error-text-font-family;
+  font-size: terraware.$tw-fnt-base-font-size-body-02;
+  font-weight: terraware.$tw-fnt-base-headline-01-semi-bold-font-weight;
+  line-height: terraware.$tw-fnt-frm-fld-error-text-line-height;
+  color: terraware.$tw-clr-txt;
   display: block;
   width: 100%;
   max-width: 100%;
@@ -58,6 +58,6 @@
 }
 
 .error-icon {
-  fill: $tw-clr-txt-danger;
-  margin-right: $tw-spc-base-x-small;
+  fill: terraware.$tw-clr-txt-danger;
+  margin-right: terraware.$tw-spc-base-x-small;
 }

package/components/Icon/styles.scss

@@ -1,4 +1,4 @@
-@import '../../style-dictionary-dist/terraware.scss';
+@use '../../style-dictionary-dist/terraware.scss';
 
 @font-face {
   font-family: 'Inter';
@@ -20,22 +20,22 @@
 
 .tw-icon {
   &--small {
-    width: $tw-sz-icon-small;
-    height: $tw-sz-icon-small;
+    width: terraware.$tw-sz-icon-small;
+    height: terraware.$tw-sz-icon-small;
   }
 
   &--medium {
-    width: $tw-sz-icon-medium;
-    height: $tw-sz-icon-medium;
+    width: terraware.$tw-sz-icon-medium;
+    height: terraware.$tw-sz-icon-medium;
   }
 
   &--large {
-    width: $tw-sz-icon-large;
-    height: $tw-sz-icon-large;
+    width: terraware.$tw-sz-icon-large;
+    height: terraware.$tw-sz-icon-large;
   }
 
   &--xlarge {
-    width: $tw-sz-icon-x-large;
-    height: $tw-sz-icon-x-large;
+    width: terraware.$tw-sz-icon-x-large;
+    height: terraware.$tw-sz-icon-x-large;
   }
 }

package/components/Map/styles.scss

@@ -1,7 +1,7 @@
-@import '../../style-dictionary-dist/terraware.scss';
+@use '../../style-dictionary-dist/terraware.scss';
 
 .map-container {
-  border: 1px solid $tw-clr-brdr-tertiary;
+  border: 1px solid terraware.$tw-clr-brdr-tertiary;
   border-radius: 8px;
   display: flex;
   overflow: hidden;
@@ -40,7 +40,7 @@
 .map-drawer {
   display: flex;
   flex-direction: column;
-  background: $tw-clr-base-white;
+  background: terraware.$tw-clr-base-white;
 
   &--mobile {
     width: stretch;
@@ -56,16 +56,16 @@
   }
 
   &--header {
-    padding: $tw-spc-base-x-small;
+    padding: terraware.$tw-spc-base-x-small;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .title {
-      font-family: $tw-fnt-mssg-title-font-family;
-      font-size: $tw-fnt-mssg-title-font-size;
-      font-weight: $tw-fnt-mssg-title-font-weight;
-      line-height: $tw-fnt-mssg-title-line-height;
-      color: $tw-clr-txt;
+      font-family: terraware.$tw-fnt-mssg-title-font-family;
+      font-size: terraware.$tw-fnt-mssg-title-font-size;
+      font-weight: terraware.$tw-fnt-mssg-title-font-weight;
+      line-height: terraware.$tw-fnt-mssg-title-line-height;
+      color: terraware.$tw-clr-txt;
       text-align: center;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -75,26 +75,26 @@
     }
 
     .icon-close {
-      fill: $tw-clr-icn-secondary;
-      height: $tw-sz-base-medium;
-      width: $tw-sz-base-medium;
+      fill: terraware.$tw-clr-icn-secondary;
+      height: terraware.$tw-sz-base-medium;
+      width: terraware.$tw-sz-base-medium;
     }
   }
 
   &--body {
-    background: $tw-clr-base-white;
-    padding: $tw-spc-base-x-small $tw-spc-base-small;
+    background: terraware.$tw-clr-base-white;
+    padding: terraware.$tw-spc-base-x-small terraware.$tw-spc-base-small;
     text-align: start;
     overflow: auto;
     white-space: pre-wrap;
   }
 
   &--message {
-    font-family: $tw-fnt-dlg-bx-message-font-family;
-    font-size: $tw-fnt-dlg-bx-message-font-size;
-    font-weight: $tw-fnt-dlg-bx-message-font-weight;
-    line-height: $tw-fnt-dlg-bx-message-line-height;
-    color: $tw-clr-txt;
+    font-family: terraware.$tw-fnt-dlg-bx-message-font-family;
+    font-size: terraware.$tw-fnt-dlg-bx-message-font-size;
+    font-weight: terraware.$tw-fnt-dlg-bx-message-font-weight;
+    line-height: terraware.$tw-fnt-dlg-bx-message-line-height;
+    color: terraware.$tw-clr-txt;
     width: 100%;
     text-align: start;
   }
@@ -121,7 +121,7 @@
       font-size: 10px;
       font-weight: 600;
       line-height: 16px;
-      color: $tw-clr-txt;
+      color: terraware.$tw-clr-txt;
       text-align: center;
       margin: 0;
       width: 100%;