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

package/dist/index.js

@@ -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 } 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 } 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 { roundToFixed, 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, isScientificStringNum, 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) {
@@ -4133,8 +4133,10 @@ const Button$1 = ({
   warning: warning2,
   testId,
   tooltip: tooltip2,
-  inverted: inverted2 = false
+  inverted: inverted2 = false,
   // *Deprecated*
+  component: Component2 = "button",
+  url
 }) => {
   const disabledContext = useContext(DisabledContext);
   const color2 = (() => {
@@ -4168,7 +4170,7 @@ const Button$1 = ({
     return "";
   })();
   return /* @__PURE__ */ jsx(ButtonTooltipWrapper, { tooltip: tooltip2, children: /* @__PURE__ */ jsxs(
-    "button",
+    Component2,
     {
       type: type === ButtonType.SUBMIT ? ButtonType.SUBMIT : ButtonType.BUTTON,
       className: cx$2(
@@ -4192,6 +4194,7 @@ const Button$1 = ({
       ...title2 ? { title: title2 } : {},
       style: { width: width2 },
       "data-testid": testId,
+      to: url,
       children: [
         icon2 && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }),
         loading && /* @__PURE__ */ jsx("span", { className: buttonStyles.icon, children: /* @__PURE__ */ jsx(
@@ -4302,7 +4305,8 @@ const Option$2 = ({
   title: title2,
   upload,
   onChange,
-  testId
+  testId,
+  component: Component2 = "a"
 }) => {
   const handleClick2 = (evt) => {
     evt.stopPropagation();
@@ -4318,9 +4322,10 @@ const Option$2 = ({
     onClick == null ? void 0 : onClick(evt);
   };
   return /* @__PURE__ */ jsxs(
-    "a",
+    Component2,
     {
       href: url,
+      to: url,
       className: cx$2(
         styles$L.option,
         disabled2 ? styles$L.disabled : "",
@@ -4406,7 +4411,8 @@ const Section$1 = ({
           title: section2.title,
           upload: section2.upload,
           onChange: section2.onChange,
-          testId: section2.testId
+          testId: section2.testId,
+          component: section2.component
         }
       );
     case MenuType.MENU:
@@ -15423,7 +15429,7 @@ var getStyles = function getStyles2(rules2, property) {
     return rule.selector + " { " + value + " }";
   }).join(" ");
 };
-var noPointerEvents = "pointer-events: none;";
+var noPointerEvents$1 = "pointer-events: none;";
 var getStyles$1 = function(contextId) {
   var getSelector2 = makeGetSelector(contextId);
   var dragHandle$1 = function() {
@@ -15433,7 +15439,7 @@ var getStyles$1 = function(contextId) {
       styles: {
         always: "\n          -webkit-touch-callout: none;\n          -webkit-tap-highlight-color: rgba(0,0,0,0);\n          touch-action: manipulation;\n        ",
         resting: grabCursor,
-        dragging: noPointerEvents,
+        dragging: noPointerEvents$1,
         dropAnimating: grabCursor
       }
     };
@@ -18784,44 +18790,45 @@ var InfiniteScroll = (
     return InfiniteScroll2;
   }(Component$1)
 );
-const inputInTable$8 = "_inputInTable_j55lv_1";
-const inputHover$8 = "_inputHover_j55lv_13";
-const inputFocus$8 = "_inputFocus_j55lv_18";
-const inputError$8 = "_inputError_j55lv_25";
-const inputWarning$8 = "_inputWarning_j55lv_26";
-const inputDisabled$8 = "_inputDisabled_j55lv_61";
-const hideScrollbars$8 = "_hideScrollbars_j55lv_67";
-const header$1 = "_header_j55lv_77";
-const headerTitle = "_headerTitle_j55lv_77";
-const heading$3 = "_heading_j55lv_78";
-const itemHeader = "_itemHeader_j55lv_78";
-const narrow = "_narrow_j55lv_81";
-const stickyHeader = "_stickyHeader_j55lv_85";
-const title$3 = "_title_j55lv_96";
-const name = "_name_j55lv_102";
-const iconTooltipMargin = "_iconTooltipMargin_j55lv_105";
-const bold = "_bold_j55lv_108";
-const toggleNarrow = "_toggleNarrow_j55lv_117";
-const drag$1 = "_drag_j55lv_135";
-const list$1 = "_list_j55lv_155";
-const bordered$1 = "_bordered_j55lv_159";
-const item$4 = "_item_j55lv_78";
-const action = "_action_j55lv_192";
-const active$3 = "_active_j55lv_195";
-const indented = "_indented_j55lv_202";
-const disabled$5 = "_disabled_j55lv_215";
-const label$6 = "_label_j55lv_226";
-const details$2 = "_details_j55lv_237";
-const metadata = "_metadata_j55lv_238";
-const itemContent = "_itemContent_j55lv_246";
-const indentIcon = "_indentIcon_j55lv_253";
-const expandIcon = "_expandIcon_j55lv_258";
-const expanded = "_expanded_j55lv_265";
-const right$4 = "_right_j55lv_268";
-const actions = "_actions_j55lv_276";
-const scrollableList = "_scrollableList_j55lv_281";
-const infiniteScrollContainer = "_infiniteScrollContainer_j55lv_286";
-const hideScrollbar = "_hideScrollbar_j55lv_67";
+const inputInTable$8 = "_inputInTable_tn20e_1";
+const inputHover$8 = "_inputHover_tn20e_13";
+const inputFocus$8 = "_inputFocus_tn20e_18";
+const inputError$8 = "_inputError_tn20e_25";
+const inputWarning$8 = "_inputWarning_tn20e_26";
+const inputDisabled$8 = "_inputDisabled_tn20e_61";
+const hideScrollbars$8 = "_hideScrollbars_tn20e_67";
+const header$1 = "_header_tn20e_77";
+const headerTitle = "_headerTitle_tn20e_77";
+const heading$3 = "_heading_tn20e_78";
+const itemHeader = "_itemHeader_tn20e_78";
+const narrow = "_narrow_tn20e_81";
+const stickyHeader = "_stickyHeader_tn20e_85";
+const title$3 = "_title_tn20e_96";
+const name = "_name_tn20e_102";
+const iconTooltipMargin = "_iconTooltipMargin_tn20e_105";
+const bold = "_bold_tn20e_108";
+const toggleNarrow = "_toggleNarrow_tn20e_117";
+const drag$1 = "_drag_tn20e_135";
+const list$1 = "_list_tn20e_155";
+const bordered$1 = "_bordered_tn20e_159";
+const item$4 = "_item_tn20e_78";
+const action = "_action_tn20e_192";
+const active$3 = "_active_tn20e_195";
+const indented = "_indented_tn20e_202";
+const disabled$5 = "_disabled_tn20e_215";
+const label$6 = "_label_tn20e_226";
+const details$2 = "_details_tn20e_237";
+const metadata = "_metadata_tn20e_238";
+const itemContent = "_itemContent_tn20e_246";
+const indentIcon = "_indentIcon_tn20e_253";
+const expandIcon = "_expandIcon_tn20e_258";
+const expanded = "_expanded_tn20e_265";
+const right$4 = "_right_tn20e_268";
+const actions = "_actions_tn20e_276";
+const scrollableList = "_scrollableList_tn20e_281";
+const infiniteScrollContainer = "_infiniteScrollContainer_tn20e_286";
+const hideScrollbar = "_hideScrollbar_tn20e_67";
+const noPointerEvents = "_noPointerEvents_tn20e_303";
 const listStyles = {
   inputInTable: inputInTable$8,
   inputHover: inputHover$8,
@@ -18860,7 +18867,8 @@ const listStyles = {
   actions,
   scrollableList,
   infiniteScrollContainer,
-  hideScrollbar
+  hideScrollbar,
+  noPointerEvents
 };
 const ToggleNarrow = ({
   toggleNarrow: toggleNarrow2,
@@ -18990,10 +18998,12 @@ const ListRow = forwardRef(
   ({ items, expanding, invokeEditOnRowClick, provided, draggable: draggable2 }, listRowRefs) => {
     const disabledContext = useContext(DisabledContext);
     const listElement = (index2, provided2, item2, indent, hasOnClick, edit2) => {
+      const Component2 = item2.component || "a";
       return /* @__PURE__ */ createElement(
-        "a",
+        Component2,
         {
           href: item2.url,
+          to: item2.url,
           ref: provided2 == null ? void 0 : provided2.innerRef,
           ...provided2.draggableProps,
           style: getItemStyle(provided2.draggableProps, item2),
@@ -52730,10 +52740,12 @@ const Link$1 = ({
 }) => {
   return /* @__PURE__ */ jsx("div", { className: styles$d.list, children: items.map((link2, i) => {
     const key2 = `${sectionIndex}_${i}`;
+    const Component2 = link2.component || "a";
     return /* @__PURE__ */ jsx(
-      "a",
+      Component2,
       {
         href: link2.value,
+        to: link2.value,
         className: cx$2(
           styles$d.item,
           link2.isActive ? styles$d.active : "",
@@ -52785,7 +52797,6 @@ const SideBar = memo(
   }) => {
     const [isOpen2, setIsOpen] = useState(startOpen);
     const onClick = (evt, value, label2, clickHandler) => {
-      evt.preventDefault();
       if (typeof clickHandler === "function") {
         evt.currentTarget.value = value;
         evt.currentTarget.label = label2;
@@ -55714,6 +55725,8 @@ const InputCell = ({
         var _a;
         return (_a = cell2.onChange) == null ? void 0 : _a.call(cell2, ev);
       },
+      onFocus: cell2.onFocus,
+      onBlur: cell2.onBlur,
       onPaste: (ev) => {
         var _a;
         return (_a = cell2.onPaste) == null ? void 0 : _a.call(cell2, ev);
@@ -55755,6 +55768,8 @@ const NumberInput = ({
   },
   onFocus = () => {
   },
+  onBlur = () => {
+  },
   tabIndex = 0,
   testId,
   tooltip: tooltip2 = null,
@@ -55763,10 +55778,14 @@ const NumberInput = ({
   },
   allowEmpty = false,
   isInTable: isInTable2,
-  groupOrder
+  groupOrder,
+  enableDisplayRounding = false,
+  roundDisplayValue
 }) => {
+  const inputRef = useRef(null);
   const [displayValue, setDisplayValue] = useState(value);
   const [validationError, setValidationError] = useState(null);
+  const [focus2, setFocus] = useState(false);
   const stringName = getStringName$1(name2);
   const validateInputValue = (value2) => {
     let validation = validateNumber(value2);
@@ -55815,6 +55834,26 @@ const NumberInput = ({
       validationCallback(stringName, firstError);
     }
   };
+  useEffect(() => {
+    if (inputRef && (inputRef == null ? void 0 : inputRef.current) && enableDisplayRounding && focus2) {
+      const textInput = inputRef.current;
+      if (textInput) {
+        setTimeout(() => {
+          const { length: length2 } = String(displayValue);
+          textInput.setSelectionRange(length2, length2);
+        }, 0);
+      }
+    }
+  }, [focus2]);
+  const onInputFocus = (evt) => {
+    setFocus(true);
+    onFocus(evt);
+  };
+  const onInputBlur = (evt) => {
+    setFocus(false);
+    onBlur(evt);
+  };
+  const roundedDisplayValue = !focus2 && enableDisplayRounding ? roundDisplayValue ? roundDisplayValue(displayValue) : roundToFixed(displayValue, 2) : displayValue;
   return /* @__PURE__ */ jsx(
     Input$1,
     {
@@ -55823,9 +55862,10 @@ const NumberInput = ({
       testId,
       disabled: disabled2,
       placeholder: placeholder3,
-      value: displayValue,
+      value: roundedDisplayValue,
       onChange: onSetValue,
-      onFocus,
+      onFocus: onInputFocus,
+      onBlur: onInputBlur,
       error: error2 || validationError,
       warning: warning2,
       right: !left2,
@@ -55834,7 +55874,8 @@ const NumberInput = ({
       isInTable: isInTable2,
       groupOrder,
       tabIndex,
-      tooltip: tooltip2
+      tooltip: tooltip2,
+      ref: inputRef
     },
     stringName
   );
@@ -55849,6 +55890,8 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
         var _a;
         return (_a = cell2.onChange) == null ? void 0 : _a.call(cell2, ev);
       },
+      onFocus: cell2.onFocus,
+      onBlur: cell2.onBlur,
       placeholder: cell2.placeholder,
       error: cell2.error,
       warning: cell2.warning,
@@ -55859,7 +55902,9 @@ const NumberInputCell = ({ cell: cell2, testId }) => {
       testId,
       tooltip: cell2.tooltip,
       validationCallback: cell2.validationCallback,
-      allowEmpty: cell2.allowEmpty
+      allowEmpty: cell2.allowEmpty,
+      enableDisplayRounding: cell2.enableDisplayRounding,
+      roundDisplayValue: cell2.roundDisplayValue
     }
   );
 };
@@ -56126,6 +56171,7 @@ var CellType = /* @__PURE__ */ ((CellType2) => {
   CellType2["SLIDER"] = "Slider";
   CellType2["CHECKBOX"] = "CheckBox";
   CellType2["ACTIONS"] = "Actions";
+  CellType2["AUTO_UNIT"] = "AutoUnit";
   return CellType2;
 })(CellType || {});
 const Cell = ({
@@ -56728,9 +56774,20 @@ const TextLink = ({
   href = void 0,
   target = void 0,
   testId,
-  onClick
+  onClick,
+  component: Component2 = "a"
 }) => {
-  return /* @__PURE__ */ jsx("a", { href, target, onClick, "data-testid": testId, children: /* @__PURE__ */ jsx(Text, { link: true, children }) });
+  return /* @__PURE__ */ jsx(
+    Component2,
+    {
+      href,
+      to: href,
+      target,
+      onClick,
+      "data-testid": testId,
+      children: /* @__PURE__ */ jsx(Text, { link: true, children })
+    }
+  );
 };
 const inputInTable = "_inputInTable_66zck_1";
 const inputHover = "_inputHover_66zck_13";
@@ -57996,22 +58053,22 @@ const Toggle = ({
     }
   );
 };
-const topbar = "_topbar_gmfjn_11";
-const fixed = "_fixed_gmfjn_21";
-const appSwitcher = "_appSwitcher_gmfjn_29";
-const title = "_title_gmfjn_75";
-const logo = "_logo_gmfjn_91";
-const label = "_label_gmfjn_94";
-const brand = "_brand_gmfjn_99";
-const version = "_version_gmfjn_104";
-const left = "_left_gmfjn_111";
-const right = "_right_gmfjn_112";
-const item = "_item_gmfjn_126";
-const link = "_link_gmfjn_127";
-const button = "_button_gmfjn_139";
-const menu = "_menu_gmfjn_140";
-const active = "_active_gmfjn_168";
-const alert = "_alert_gmfjn_193";
+const topbar = "_topbar_oyr59_11";
+const fixed = "_fixed_oyr59_21";
+const appSwitcher = "_appSwitcher_oyr59_29";
+const title = "_title_oyr59_75";
+const logo = "_logo_oyr59_91";
+const label = "_label_oyr59_94";
+const brand = "_brand_oyr59_99";
+const version = "_version_oyr59_104";
+const left = "_left_oyr59_111";
+const right = "_right_oyr59_112";
+const item = "_item_oyr59_126";
+const link = "_link_oyr59_127";
+const button = "_button_oyr59_138";
+const menu = "_menu_oyr59_139";
+const active = "_active_oyr59_168";
+const alert = "_alert_oyr59_193";
 const styles$3 = {
   topbar,
   fixed,
@@ -58069,7 +58126,8 @@ const Link = ({
   onClick,
   active: active2,
   disabled: disabled2,
-  testId
+  testId,
+  component: Component2 = "a"
 }) => {
   const disabledContext = useContext(DisabledContext);
   const handleClick2 = (event) => {
@@ -58079,10 +58137,11 @@ const Link = ({
     onClick == null ? void 0 : onClick(event);
   };
   return /* @__PURE__ */ jsxs(
-    "a",
+    Component2,
     {
       className: cx$2(styles$3.link, active2 ? styles$3.active : ""),
       href: url || "#",
+      to: url,
       onClick: handleClick2,
       "aria-disabled": disabled2 || disabledContext,
       "data-testid": testId,
@@ -58106,7 +58165,8 @@ const Element$1 = ({ element }) => {
           onClick: element.onClick,
           active: element.active,
           disabled: element.disabled,
-          testId: element.testId
+          testId: element.testId,
+          component: element.component
         }
       ) });
     case ElementType.BUTTON:
@@ -69925,12 +69985,12 @@ function TreeInner(props, ref2) {
   );
 }
 var Tree$1 = forwardRef(TreeInner);
-const tree = "_tree_1lv9u_1";
-const toggle = "_toggle_1lv9u_4";
-const dropTarget = "_dropTarget_1lv9u_11";
-const draggingSource = "_draggingSource_1lv9u_14";
-const placeholderContainer = "_placeholderContainer_1lv9u_17";
-const placeholder2 = "_placeholder_1lv9u_17";
+const tree = "_tree_15yn1_1";
+const toggle = "_toggle_15yn1_4";
+const dropTarget = "_dropTarget_15yn1_11";
+const draggingSource = "_draggingSource_15yn1_26";
+const placeholderContainer = "_placeholderContainer_15yn1_29";
+const placeholder2 = "_placeholder_15yn1_29";
 const styles$1 = {
   tree,
   toggle,
@@ -69946,14 +70006,46 @@ const TreeItem = ({
   onToggle,
   hasChild,
   draggable: draggable2,
-  icons: icons2
+  icons: icons2,
+  onDrop
 }) => {
   const { id: id2, data } = node2;
   const { active: active2, testId, onClick, actions: actions2 = [] } = data;
+  const [isDragOver, setDragOver] = React__default.useState(false);
+  const [dragOverStartTime, setDragOverStartTime] = React__default.useState(0);
   const handleToggle = (e2) => {
     e2.stopPropagation();
     onToggle(id2);
   };
+  const handleDragEnter = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (!isDragOver) {
+      setDragOver(true);
+      setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    }
+  };
+  const handleDragLeave = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if ((/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 20) {
+      setDragOver(false);
+    }
+  };
+  const handleDragOver = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (hasChild && !isOpen2 && (/* @__PURE__ */ new Date()).getTime() - dragOverStartTime > 200) {
+      handleToggle(event);
+    }
+  };
+  const handleDrop = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragOver(false);
+    setDragOverStartTime((/* @__PURE__ */ new Date()).getTime());
+    onDrop == null ? void 0 : onDrop(event);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -69961,7 +70053,8 @@ const TreeItem = ({
         listStyles.item,
         listStyles.action,
         active2 ? listStyles.active : "",
-        depth > 0 ? listStyles.indented : ""
+        depth > 0 ? listStyles.indented : "",
+        isDragOver ? listStyles.bordered : ""
       ),
       style: {
         marginInlineStart: depth * 24
@@ -69974,10 +70067,17 @@ const TreeItem = ({
           handleToggle(evt);
         }
       },
+      onDrop: (evt) => onDrop ? handleDrop(evt) : {},
+      onDragEnter: (evt) => onDrop ? handleDragEnter(evt) : {},
+      onDragOver: (evt) => onDrop ? handleDragOver(evt) : {},
+      onDragLeave: (evt) => onDrop ? handleDragLeave(evt) : {},
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: listStyles.itemHeader,
+          className: cx$2(
+            listStyles.itemHeader,
+            isDragOver ? listStyles.noPointerEvents : ""
+          ),
           children: [
             hasChild && /* @__PURE__ */ jsx("div", { className: styles$1.toggle, children: /* @__PURE__ */ jsx(
               Button$1,
@@ -70080,16 +70180,19 @@ const Tree = ({
     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,
-    text: name2,
-    droppable: droppable2,
-    parent,
-    data: {
-      name: name2,
-      ...rest
-    }
-  }));
+  const tree2 = (_a = list2 == null ? void 0 : list2.items) == null ? void 0 : _a.map(
+    ({ id: id2, droppable: droppable2, parent, name: name2, onDrop, ...rest }) => ({
+      id: id2,
+      text: name2,
+      droppable: droppable2,
+      parent,
+      data: {
+        name: name2,
+        onDrop,
+        ...rest
+      }
+    })
+  );
   return /* @__PURE__ */ jsxs("div", { "data-testid": testId, children: [
     list2.name && !list2.noHeader && /* @__PURE__ */ jsx(ListHeading, { name: list2.name, actions: list2.actions }),
     /* @__PURE__ */ jsx("div", { className: listStyles.list, children: /* @__PURE__ */ jsx(
@@ -70113,6 +70216,7 @@ const Tree = ({
             },
             rootId: 0,
             render: (node2, { depth, isOpen: isOpen2, onToggle, hasChild }) => {
+              var _a2;
               return /* @__PURE__ */ jsx(
                 TreeItem,
                 {
@@ -70125,7 +70229,8 @@ const Tree = ({
                     onToggle();
                   },
                   draggable: draggable2,
-                  icons: icons2
+                  icons: icons2,
+                  onDrop: (_a2 = node2.data) == null ? void 0 : _a2.onDrop
                 }
               );
             },
@@ -70595,6 +70700,150 @@ const UnitInput = ({
     }
   );
 };
+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,
+  enableDisplayRounding,
+  roundDisplayValue
+}) => {
+  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 })
+        };
+      }
+      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 isScientific = isScientificStringNum(value);
+        const displayValue = enableCosmeticRounding && (unitChanged || !isScientific) ? (
+          /*
+           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,
+          enableCosmeticRounding,
+          enableDisplayRounding,
+          roundDisplayValue,
+          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 cell2;
+    })
+  })) : [];
+  return { convertedHeaders, convertedRows };
+};
+const UnitTable = ({
+  table: table2,
+  unitConfig,
+  convertBackToStorageUnit = true,
+  enableCosmeticRounding = true,
+  enableDisplayRounding = true,
+  roundDisplayValue
+}) => {
+  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,
+    enableDisplayRounding,
+    roundDisplayValue
+  });
+  const convertedViewData = convertViewData(selectedUnits);
+  const [viewData, setViewData] = useState(convertedViewData);
+  useEffect(() => {
+    const templateChanged = !isEqual$4(preferredUnits, previousPreferredUnits);
+    if (templateChanged) {
+      setSelectedUnits(preferredUnits);
+      setViewData(convertViewData(preferredUnits));
+    }
+  }, [unitConfig]);
+  useEffect(() => {
+    setViewData(convertViewData(selectedUnits));
+  }, [table2, selectedUnits]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      table: {
+        ...otherProps,
+        headers: viewData.convertedHeaders,
+        rows: viewData.convertedRows
+      }
+    }
+  );
+};
 export {
   Accordion,
   AccordionWithDefaultToggle,
@@ -70674,6 +70923,7 @@ export {
   Tree,
   TriggerType,
   UnitInput,
+  UnitTable,
   dismissToast,
   readFile,
   toast,