npm - @oliasoft-open-source/react-ui-library - Versions diffs - 4.5.0-beta-1 → 4.5.0 - Mend

@oliasoft-open-source/react-ui-library 4.5.0-beta-1 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (151) hide show

package/dist/404.html ADDED Viewed

@@ -0,0 +1 @@

+ <!doctype html><head><title>React UI Library</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1" user-scalable="no"><meta name="apple-mobile-web-app-capable" content="yes"><script type="module" crossorigin src="/react-ui-library/assets/index-neKlYvgy.js"></script><link rel="stylesheet" crossorigin href="/react-ui-library/assets/index-AkeNwthw.css"></head><body><div id="content"></div></body>

package/dist/index.d.ts CHANGED Viewed

@@ -158,8 +158,6 @@ export declare interface IActionProps {
     closeLayer?: TEmpty;
 }
-declare type IActionsType = (IAction | ISubAction | IChildComponent)[];
 export declare interface IBadgeProps {
     children?: ReactNode;
     color?: string;
@@ -233,20 +231,6 @@ export declare interface ICardProps {
     children?: ReactNode;
 }
-declare interface ICell {
-    value: number | string;
-    type: string;
-    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-    placeholder?: string;
-    testId?: string;
-    disabled?: boolean;
-    style?: object;
-    options?: {
-        label: string;
-        value: string | number;
-    }[];
-}
 declare interface ICheckBoxCell extends TCommonCell {
     label?: string | null;
     checked: boolean;
@@ -272,11 +256,6 @@ export declare interface ICheckBoxProps {
     onClickHelp?: TEmpty;
 }
-declare interface IChildComponent {
-    childComponent: ReactNode | (() => ReactNode);
-    testId?: string;
-}
 /**
  * Icon wrapper component to support different icon formats:
  *     - string names (default recommendation)
@@ -1302,25 +1281,6 @@ declare interface ISubAction_2 {
     onClick: TEmpty;
 }
-declare interface ITableActions {
-    addRow?: () => void;
-    reorderComponents?: () => void;
-}
-declare interface ITableDefinition {
-    key: string;
-    header: string;
-    translationKey: string;
-    type: string;
-    convertible: boolean;
-    unitKey: string;
-    columnAlignment: string;
-    columnWidth: string;
-    defaultValue?: number | string | null;
-    options?: Array<any>;
-    placeholder?: string;
-}
 export declare interface ITableProps {
     onListReorder?: (obj: {
         from: number;
@@ -1534,6 +1494,13 @@ export declare interface ITreeProps {
         expand: React_2.ReactNode;
         collapse: React_2.ReactNode;
     };
+    allowParentReassignment?: boolean;
+}
+declare interface IUnitConfigItem {
+    unitKey: string;
+    storageUnit: string;
+    preferredUnit: string;
 }
 export declare interface IUnitInputProps {
@@ -1572,17 +1539,44 @@ export declare interface IUnitInputProps {
     unitTemplate?: Record<string, any>;
 }
-declare interface IUnitTableProps {
-    data: Array<any>;
-    unitTemplate: Record<string, any>;
-    tableDef: ITableDefinition[];
-    convertToCells: (displayedData: Array<any>, displayedUnits: Record<string, any>) => {
-        cells: ICell[];
-        actions: IActionsType;
-    }[];
-    tableActions: ITableActions;
-    oldStructureType?: string | null;
-    testId: string;
+declare interface IUnitTable extends Omit<ITableProps['table'], 'rows'> {
+    rows?: IUnitTableRow[];
+}
+declare interface IUnitTableCell {
+    autoUnit: boolean;
+    unitKey: string;
+    formatDisplayValue?: (value: string | number) => void;
+}
+declare interface IUnitTableInputCell extends IInputCell, IUnitTableCell {
+    onChange: (args: any) => void;
+}
+declare interface IUnitTableNumberInputCell extends INumberInputCell, IUnitTableCell {
+    onChange: (args: any) => void;
+}
+export declare interface IUnitTableOnChangeEvent extends React_2.ChangeEvent<HTMLInputElement> {
+    target: EventTarget & HTMLInputElement & {
+        rowIndex: number;
+        cellIndex: number;
+        unit: string;
+    };
+}
+export declare interface IUnitTableProps extends Omit<ITableProps, 'table'> {
+    table: IUnitTable;
+    unitConfig: IUnitConfigItem[];
+    convertBackToStorageUnit: boolean;
+    enableCosmeticRounding: boolean;
+}
+export declare interface IUnitTableRow extends Omit<TRowType, 'cells'> {
+    cells: TUnitTableCellShape[];
+}
+declare interface IUnitTableStaticCell extends IStaticCell, IUnitTableCell {
 }
 export declare const Label: ({ label, width, helpText, helpTextMaxWidth, onClickHelp, lock, info, libraryIcon, labelLeft, }: ILabelProps) => JSX_2.Element;
@@ -1763,7 +1757,7 @@ export declare const Tooltip: ({ children, text, error, placement, possiblePlace
 export declare const TopBar: ({ title, appSwitcher, content, contentRight, warning, height, fixedPosition, }: ITopBarProps) => JSX_2.Element;
-export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, icons, }: ITreeProps) => JSX_2.Element;
+export declare const Tree: ({ list, draggable, onListReorder, onChangeOpen, testId, isInitialOpen, treeRef, itemHasChild, onItemToggle, icons, allowParentReassignment, }: ITreeProps) => JSX_2.Element;
 export declare enum TriggerType {
     TEXT = "Text",
@@ -1799,9 +1793,11 @@ declare type TTopBarContent = TLinkElement | TButtonElement | TMenuElement | TCo
 export declare type TTriggerType = 'Text' | 'Button' | 'DropDownButton' | 'Component';
+declare type TUnitTableCellShape = TCellShape | IUnitTableStaticCell | IUnitTableInputCell | IUnitTableNumberInputCell;
 export declare const UnitInput: ({ name, placeholder, disabled, disabledUnit, error, left, small, width, value, unitkey, initUnit, noConversion, onChange, onClick, onFocus, onSwitchUnit, unitTemplate, doNotConvertValue, testId, warning, predefinedOptions, initialPredefinedOption, shouldLinkAutomaticly, selectedPredefinedOptionKey, validationCallback, disabledValidation, allowEmpty, autoValue, }: IUnitInputProps) => JSX_2.Element;
-export declare const UnitTable: ({ data, unitTemplate, tableDef, convertToCells, tableActions, testId, oldStructureType, }: IUnitTableProps) => JSX_2.Element;
+export declare const UnitTable: ({ table, unitConfig, convertBackToStorageUnit, enableCosmeticRounding, }: IUnitTableProps) => JSX_2.Element;
 export declare const useFocus: () => UseFocusReturnType;

package/dist/index.js CHANGED Viewed

@@ -10,8 +10,8 @@ import React__default, { useContext, isValidElement, useState, useRef, useEffect
 import * as PropTypes from "prop-types";
 import PropTypes__default from "prop-types";
 import ReactDOM, { createPortal, unstable_batchedUpdates, render } from "react-dom";
-import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, cloneDeep } from "lodash";
-import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, convertAndGetValue, isNumeric, getAltUnitsListByQuantity } from "@oliasoft-open-source/units";
+import _$1, { set, get as get$2, isString as isString$3, isNumber as isNumber$1, isBoolean as isBoolean$2, isFunction as isFunction$3, isEmpty, isArray as isArray$1, toNumber, debounce as debounce$2, isObject as isObject$5, isObjectLike, has as has$1, isEqual as isEqual$4 } from "lodash";
+import { validateNumber, cleanNumStr, unitFromQuantity, isValueWithUnit, withUnit, convertSamePrecision, getValue as getValue$1, getUnit, KNOWN_UNITS, split as split$1, checkAndCleanDecimalComma, label as label$b, altUnitsList, getUnitsForQuantity, convertAndGetValue, roundToPrecision } from "@oliasoft-open-source/units";
 import { isValueWithUnit as isValueWithUnit$1 } from "@oliasoft-open-source/units/dist/units";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x2) {
@@ -55702,7 +55702,8 @@ const styles$7 = {
 const InputCell = ({
   cell: cell2,
   columnAlignment,
-  testId
+  testId,
+  type
 }) => {
   return /* @__PURE__ */ jsx(
     Input$1,
@@ -55726,7 +55727,8 @@ const InputCell = ({
       right: columnAlignment === Align.RIGHT,
       testId,
       tabIndex: cell2.disabled ? -1 : 0,
-      tooltip: cell2.tooltip
+      tooltip: cell2.tooltip,
+      type
     }
   );
 };
@@ -55908,7 +55910,7 @@ const InputCellWrapper = ({
       columnAlignment,
       testId
     }
-  ) : cell2.type === "NumberInput" ? /* @__PURE__ */ jsx(NumberInputCell, { cell: cell2, testId }) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
+  ) : cell2.type === "NumberInput" ? /* @__PURE__ */ jsx(NumberInputCell, { cell: cell2, testId }) : cell2.type === "DateInput" ? /* @__PURE__ */ jsx(InputCell, { cell: cell2, testId, type: "date" }) : cell2.type === "Select" ? /* @__PURE__ */ jsx(
     SelectCell,
     {
       cell: cell2,
@@ -56090,6 +56092,7 @@ const CellWrapper = ({
   switch (cell2.type) {
     case "Input":
     case "NumberInput":
+    case "DateInput":
     case "Select":
       return /* @__PURE__ */ jsx(
         InputCellWrapper,
@@ -56123,6 +56126,7 @@ var CellType = /* @__PURE__ */ ((CellType2) => {
   CellType2["SLIDER"] = "Slider";
   CellType2["CHECKBOX"] = "CheckBox";
   CellType2["ACTIONS"] = "Actions";
+  CellType2["AUTO_UNIT"] = "AutoUnit";
   return CellType2;
 })(CellType || {});
 const Cell = ({
@@ -70007,24 +70011,75 @@ const Tree = ({
   treeRef,
   itemHasChild,
   onItemToggle,
-  icons: icons2
+  icons: icons2,
+  allowParentReassignment
 }) => {
   var _a;
-  const handleDrop = (newTree) => {
-    if (onListReorder) {
-      const newList = newTree.map(({ id: id2, parent, droppable: droppable2, data }) => ({
+  const handleOpen = (id2) => {
+    if (onChangeOpen) {
+      onChangeOpen(id2);
+    }
+  };
+  const findNodeIndexById = (tree22, id2) => {
+    return (tree22 == null ? void 0 : tree22.findIndex((node2) => (node2 == null ? void 0 : node2.id) === id2)) ?? -1;
+  };
+  const setDragSourceParentToGrandparent = (dragSource, workingTree) => {
+    const dragSourceParentIndex = findNodeIndexById(
+      workingTree,
+      dragSource == null ? void 0 : dragSource.parent
+    );
+    if (dragSourceParentIndex >= 0) {
+      const grandparent = workingTree == null ? void 0 : workingTree.find(
+        (node2) => {
+          var _a2;
+          return (node2 == null ? void 0 : node2.id) === ((_a2 = workingTree[dragSourceParentIndex]) == null ? void 0 : _a2.parent);
+        }
+      );
+      dragSource.parent = grandparent ? grandparent.id : 0;
+    }
+  };
+  const removeDragSourceFromWorkingTree = (dragSource, workingTree) => {
+    return (workingTree == null ? void 0 : workingTree.filter((node2) => (node2 == null ? void 0 : node2.id) !== (dragSource == null ? void 0 : dragSource.id))) ?? [];
+  };
+  const insertDragSourceAfterParentInWorkingTree = (dragSource, dragSourceParentIndex, workingTree) => {
+    workingTree == null ? void 0 : workingTree.splice(dragSourceParentIndex, 0, dragSource);
+    return workingTree;
+  };
+  const transformTreeToList = (tree22) => {
+    return tree22.map(({ id: id2, parent, droppable: droppable2, data }) => {
+      return {
         id: id2,
         parent,
         droppable: droppable2,
         ...data
-      }));
-      onListReorder(newList);
-    }
+      };
+    });
   };
-  const handleOpen = (id2) => {
-    if (onChangeOpen) {
-      onChangeOpen(id2);
+  const handleDrop = (newTree, option2) => {
+    const { dragSource, dropTarget: dropTarget2 } = option2;
+    let workingTree = [...newTree];
+    if (!onListReorder)
+      return;
+    const dragSourceIndex = findNodeIndexById(workingTree, dragSource == null ? void 0 : dragSource.id);
+    const dragSourceParentIndex = findNodeIndexById(
+      workingTree,
+      dragSource == null ? void 0 : dragSource.parent
+    );
+    let newList = [];
+    if ((dragSource == null ? void 0 : dragSource.parent) === (dropTarget2 == null ? void 0 : dropTarget2.id) && dragSourceIndex === 0 && allowParentReassignment) {
+      setDragSourceParentToGrandparent(dragSource, workingTree);
+      workingTree = removeDragSourceFromWorkingTree(
+        dragSource,
+        workingTree
+      );
+      workingTree = insertDragSourceAfterParentInWorkingTree(
+        dragSource,
+        dragSourceParentIndex,
+        workingTree
+      );
     }
+    newList = transformTreeToList(workingTree);
+    onListReorder(newList);
   };
   const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(({ id: id2, droppable: droppable2, parent, name: name2, ...rest }) => ({
     id: id2,
@@ -70541,206 +70596,137 @@ const UnitInput = ({
     }
   );
 };
-const STRUCTURE_TYPE = Object.freeze({
-  ARRAY: "array",
-  OBJECT: "object"
-});
-const getUnitCells = ({
-  tableDef,
-  displayedUnits,
-  handleUnitChange,
-  oldStructureType
+const normalizeUnits = (unitConfig) => unitConfig.reduce(
+  ({ preferredUnits, storageUnits }, { unitKey, preferredUnit, storageUnit }) => {
+    preferredUnits[unitKey] = preferredUnit;
+    storageUnits[unitKey] = storageUnit;
+    return { preferredUnits, storageUnits };
+  },
+  { preferredUnits: {}, storageUnits: {} }
+);
+const convertVisibleRows = ({
+  headers,
+  rows,
+  selectedUnits,
+  storageUnits,
+  onChangeUnit,
+  convertBackToStorageUnit,
+  enableCosmeticRounding
 }) => {
-  return tableDef.map(({ convertible, unitKey, key: key2 }, ix) => {
-    var _a;
-    if (!convertible) {
-      return { value: "" };
-    }
-    const oldUnit = oldStructureType === STRUCTURE_TYPE.ARRAY ? displayedUnits[ix] : displayedUnits[key2];
-    const options = (_a = getAltUnitsListByQuantity(unitKey)) == null ? void 0 : _a.map(
-      ({ unit: unit2, label: label2 }) => ({
-        label: label2,
-        value: unit2
-      })
-    );
-    const onChange = ({
-      target: { value: newUnit }
-    }) => {
-      if (newUnit === oldUnit) {
-        return;
-      }
-      handleUnitChange(key2, newUnit, ix);
-    };
-    return {
-      value: oldUnit,
-      options,
-      type: "Select",
-      onChange
-    };
-  });
-};
-const getHeaders = ({ tableDef }) => tableDef.map(({ header: header2 }) => ({
-  value: header2
-}));
-const onConvertData = (data, displayedUnits, tableDef, oldStructureType) => {
-  if (!(data == null ? void 0 : data.length))
-    return [];
-  let storedUnits;
-  const tableData = cloneDeep(data);
-  if (oldStructureType) {
-    [storedUnits] = tableData.splice(0, 1);
-  }
-  const convertedTable = tableData.map((row2) => {
-    const convertedRow = tableDef.reduce((prev2, colDef, columnIx) => {
-      const { key: key2, defaultValue } = colDef;
-      const unitTo = oldStructureType === STRUCTURE_TYPE.ARRAY ? (
-        // @ts-ignore TODO Peter B
-        displayedUnits[columnIx]
-      ) : (
-        // @ts-ignore TODO Peter B
-        displayedUnits[key2]
-      );
-      const unitFrom = oldStructureType === STRUCTURE_TYPE.ARRAY ? (
-        // @ts-ignore TODO Peter B
-        storedUnits[columnIx]
-      ) : (
-        // @ts-ignore TODO Peter B
-        storedUnits == null ? void 0 : storedUnits[key2]
-      );
-      const value = oldStructureType === STRUCTURE_TYPE.ARRAY ? row2[columnIx] : row2[key2];
-      let displayedValue = value ?? defaultValue;
-      if (unitFrom && unitTo) {
-        displayedValue = convertAndGetValue(displayedValue, unitTo, unitFrom);
+  const convertedHeaders = headers ? headers.map((headerRow) => ({
+    ...headerRow,
+    cells: headerRow.cells.map((headerCell) => {
+      if (headerCell.type === CellType.AUTO_UNIT) {
+        const { unitKey } = headerCell;
+        return {
+          value: selectedUnits[unitKey],
+          type: CellType.SELECT,
+          options: getUnitsForQuantity(unitKey),
+          native: true,
+          onChange: (evt) => onChangeUnit({ unitKey, value: evt.target.value })
+        };
       }
-      if (oldStructureType) {
-        if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
-          row2[columnIx] = displayedValue;
-          return row2;
-        }
-      } else {
-        if (isValueWithUnit(value) && unitTo) {
-          const convertedValue = convertAndGetValue(displayedValue, unitTo);
-          displayedValue = isNumeric(convertedValue) ? withUnit(convertedValue, unitTo) : displayedValue;
-        }
+      return headerCell;
+    })
+  })) : [];
+  const convertedRows = rows ? rows.map((row2, rowIndex) => ({
+    ...row2,
+    cells: row2.cells.map((cell2, cellIndex) => {
+      if ("autoUnit" in cell2 && (cell2 == null ? void 0 : cell2.autoUnit) && (typeof (cell2 == null ? void 0 : cell2.value) === "string" || typeof (cell2 == null ? void 0 : cell2.value) === "number")) {
+        const { formatDisplayValue, unitKey, value } = cell2;
+        const selectedUnit = selectedUnits[unitKey];
+        const storageUnit = storageUnits[unitKey];
+        const unitChanged = selectedUnit !== storageUnit;
+        const convertedValue = unitChanged ? convertAndGetValue(value, selectedUnit, storageUnit) : cell2.value;
+        const displayValue = unitChanged && enableCosmeticRounding ? (
+          /*
+           Optionally do Excel-style "cosmetic rounding" of display values (only if enableCosmeticRounding prop on)
+           This means rounding to slightly less precision than the underlying floating-point number type, to
+           resolve floating-point "rounding noise" associated with storing values in one unit but converting
+           and displaying them in another unit. This solution was evaluated by Tools Team in relation to
+           tickets OW-10614 and OW-15745.
+          */
+          roundToPrecision(convertedValue, 14)
+        ) : convertedValue;
+        const formattedDisplayValue = formatDisplayValue ? formatDisplayValue(displayValue) : displayValue;
+        return {
+          ...cell2,
+          value: formattedDisplayValue,
+          onChange: (evt) => {
+            const { value: value2 } = evt.target;
+            const storageUnit2 = storageUnits[unitKey];
+            const selectedUnit2 = selectedUnits[unitKey];
+            const unitChanged2 = selectedUnit2 !== storageUnit2;
+            const nextValueConverted = unitChanged2 ? convertAndGetValue(value2, storageUnit2, selectedUnit2) : value2;
+            const nextUnit = convertBackToStorageUnit ? storageUnit2 : selectedUnit2;
+            if ("onChange" in cell2) {
+              const { onChange } = cell2;
+              const event = {
+                ...evt,
+                target: {
+                  ...evt.target,
+                  value: String(nextValueConverted),
+                  rowIndex,
+                  cellIndex,
+                  unit: nextUnit
+                }
+              };
+              onChange(event);
+            }
+          }
+        };
       }
-      return {
-        ...prev2,
-        [key2]: displayedValue
-      };
-    }, {});
-    return convertedRow;
-  });
-  return oldStructureType ? [displayedUnits, ...convertedTable] : convertedTable;
-};
-const addRowHeader = (addRow, data, displayedUnits) => ({
-  label: "Add",
-  icon: "plus",
-  primary: true,
-  onClick: () => addRow(data, displayedUnits),
-  testId: "lithology-table-add-new-row"
-});
-const getDisplayedUnits = (tableDef, unitTemplate, oldStructureType) => {
-  if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
-    return tableDef.reduce((prev2, curr, ix) => {
-      const { unitKey } = curr;
-      prev2[ix] = unitTemplate[unitKey];
-      return prev2;
-    }, []);
-  }
-  return tableDef.reduce((prev2, curr) => {
-    const { key: key2, unitKey } = curr;
-    return {
-      ...prev2,
-      [key2]: unitTemplate[unitKey]
-    };
-  }, {});
-};
-const buildTable = ({
-  rows,
-  tableDef,
-  displayedUnits,
-  handleUnitChange,
-  tableActions,
-  oldStructureType = STRUCTURE_TYPE.OBJECT
-}) => {
-  if (!rows) {
-    return {
-      rows: [],
-      headers: []
-    };
-  }
-  const { addRow } = tableActions;
-  const headers = [
-    {
-      cells: getHeaders({ tableDef }),
-      actions: addRow ? [addRowHeader(addRow, rows, displayedUnits)] : []
-    },
-    {
-      cells: getUnitCells({
-        tableDef,
-        displayedUnits,
-        handleUnitChange,
-        oldStructureType
-      })
-    }
-  ];
-  return {
-    headers,
-    rows
-  };
+      return cell2;
+    })
+  })) : [];
+  return { convertedHeaders, convertedRows };
 };
 const UnitTable = ({
-  data,
-  unitTemplate,
-  tableDef,
-  convertToCells,
-  tableActions,
-  testId,
-  oldStructureType = STRUCTURE_TYPE.OBJECT
+  table: table2,
+  unitConfig,
+  convertBackToStorageUnit = true,
+  enableCosmeticRounding = true
 }) => {
-  const [displayedUnits, setDisplayedUnits] = useState(getDisplayedUnits(tableDef, unitTemplate, oldStructureType));
+  const { rows, headers, ...otherProps } = table2;
+  const { storageUnits, preferredUnits } = normalizeUnits(unitConfig);
+  const previousPreferredUnits = usePrevious(preferredUnits);
+  const [selectedUnits, setSelectedUnits] = useState(preferredUnits);
+  const onChangeUnit = ({
+    unitKey,
+    value
+  }) => setSelectedUnits({
+    ...selectedUnits,
+    [unitKey]: value
+  });
+  const convertViewData = (selectedUnits2) => convertVisibleRows({
+    headers,
+    rows,
+    selectedUnits: selectedUnits2,
+    storageUnits,
+    onChangeUnit,
+    convertBackToStorageUnit,
+    enableCosmeticRounding
+  });
+  const convertedViewData = convertViewData(selectedUnits);
+  const [viewData, setViewData] = useState(convertedViewData);
   useEffect(() => {
-    setDisplayedUnits(
-      getDisplayedUnits(tableDef, unitTemplate, oldStructureType)
-    );
-  }, [unitTemplate]);
-  const handleUnitChange = (key2, unit2, ix) => {
-    if (oldStructureType === STRUCTURE_TYPE.ARRAY) {
-      setDisplayedUnits((prev2) => {
-        const newUnits = [...prev2];
-        newUnits[ix] = unit2;
-        return newUnits;
-      });
-    } else {
-      setDisplayedUnits((prev2) => ({ ...prev2, [key2]: unit2 }));
+    const templateChanged = !isEqual$4(preferredUnits, previousPreferredUnits);
+    if (templateChanged) {
+      setSelectedUnits(preferredUnits);
+      setViewData(convertViewData(preferredUnits));
     }
-  };
-  const { headers, rows } = useMemo$1(
-    () => buildTable({
-      rows: convertToCells(
-        onConvertData(data, displayedUnits, tableDef, oldStructureType),
-        displayedUnits
-      ),
-      tableDef,
-      displayedUnits,
-      handleUnitChange,
-      tableActions,
-      oldStructureType
-    }),
-    [displayedUnits, data]
-  );
+  }, [unitConfig]);
+  useEffect(() => {
+    setViewData(convertViewData(selectedUnits));
+  }, [table2, selectedUnits]);
   return /* @__PURE__ */ jsx(
     Table,
     {
       table: {
-        testId,
-        headers,
-        rows,
-        columnAlignment: tableDef.map((def) => def.columnAlignment),
-        columnWidths: tableDef.map((def) => def.columnWidth),
-        fixedWidth: "auto"
-      },
-      onListReorder: (tableActions == null ? void 0 : tableActions.reorderComponents) || void 0
+        ...otherProps,
+        headers: viewData.convertedHeaders,
+        rows: viewData.convertedRows
+      }
     }
   );
 };