@monolith-forensics/monolith-ui 1.2.110 → 1.2.112

package/dist/DateInput/DateInput.js

@@ -193,9 +193,10 @@ const InputSegment = styled.div `
   }
 `;
 const DateInput = forwardRef(({ className, style = {}, defaultValue, value, format = "YYYY-MM-DD HH:mm:ss", label, description, arrow = true, size = "sm", variant = "outlined", clearable = false, required = false, onChange = () => { }, min, max, error, enableCalendar = false, utc = false, closeOnSelect = true, disabled = false, }, _ref) => {
-    const isControlled = value !== undefined;
+    // Determine controlled status only once at mount
+    const isControlled = useRef(value !== undefined);
     const [unControlledValue, setUncontrolledValue] = useState(defaultValue);
-    const _value = isControlled ? value : unControlledValue;
+    const _value = isControlled.current ? value : unControlledValue;
     const [selectedSegment, setSelectedSegment] = useState();
     const [isOpen, setIsOpen] = useState(false);
     // Check if format is date only and does not include time
@@ -351,7 +352,10 @@ const DateInput = forwardRef(({ className, style = {}, defaultValue, value, form
             setUncontrolledValue((prev) => {
                 if (!(selectedSegment === null || selectedSegment === void 0 ? void 0 : selectedSegment.momentType))
                     return prev;
-                const momentValue = utc ? moment.utc(prev) : moment(prev);
+                // if prev is null, use undefined - passing null to moment returns a null moment value
+                const momentValue = utc
+                    ? moment.utc(prev || undefined)
+                    : moment(prev || undefined);
                 let newValue = moment(momentValue)
                     .set(selectedSegment.momentType, parseInt(tempValue, 10) -
                     (selectedSegment.type === "month" ? 1 : 0))

package/dist/Table/LoadingCellIndicator.d.ts

@@ -0,0 +1 @@
+export declare const LoadingCellIndicator: React.FC;

package/dist/Table/LoadingCellIndicator.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+const LoadingIndicator = styled.div `
+  @keyframes fadeInOut {
+    0% {
+      background-color: ${({ theme }) => theme.palette.background.alt};
+    }
+    50% {
+      background-color: ${({ theme }) => theme.palette.background.paper};
+    }
+    100% {
+      background-color: ${({ theme }) => theme.palette.background.alt};
+    }
+  }
+
+  width: 100%;
+  height: 100%;
+  min-height: 20px;
+  border-radius: 4px;
+  animation: fadeInOut 1.25s ease-in-out infinite;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+  background-color: #f0f0f0;
+`;
+export const LoadingCellIndicator = () => {
+    return _jsx(LoadingIndicator, { children: "loading..." });
+};

package/dist/Table/StaticRows.js

@@ -4,7 +4,7 @@ import TableRow from "./TableRow";
 import useTable from "./useTable";
 const StaticRows = ({ targetElm, listElm }) => {
     var _a;
-    const { data } = useTable();
-    return (_jsx(TBody, { className: "mfui-tbody", children: _jsx(TableViewPort, { className: "mfui-tbody-viewport", ref: targetElm, children: _jsx(TableListElement, { className: "mfui-tbody-list", ref: listElm, children: (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (row, index) => (_jsx(TableRow, { rowData: row }, index))) }) }) }));
+    const { data, loadingRowIds, keyField } = useTable();
+    return (_jsx(TBody, { className: "mfui-tbody", children: _jsx(TableViewPort, { className: "mfui-tbody-viewport", ref: targetElm, children: _jsx(TableListElement, { className: "mfui-tbody-list", ref: listElm, children: (_a = data === null || data === void 0 ? void 0 : data.map) === null || _a === void 0 ? void 0 : _a.call(data, (row, index) => (_jsx(TableRow, { rowData: row, loading: !!keyField ? loadingRowIds === null || loadingRowIds === void 0 ? void 0 : loadingRowIds.includes(row[keyField]) : false }, index))) }) }) }));
 };
 export default StaticRows;

package/dist/Table/TableRow.js

@@ -6,7 +6,8 @@ import useTable from "./useTable";
 import ActionCell from "./ActionCell";
 import ActionButton from "./ActionButton";
 import CheckBox from "../CheckBox";
-const TableRow = ({ rowData, rowStyle }) => {
+import { LoadingCellIndicator } from "./LoadingCellIndicator";
+const TableRow = ({ rowData, loading, rowStyle }) => {
     const { columnState, enableActionButton, onActionButtonClick, actionButtonIcon: Icon, enableSelection, selectRow, deselectRow, isRowSelected, onRowUpdated, } = useTable();
     const selected = isRowSelected(rowData);
     const handleSelectionChange = (e) => {
@@ -15,6 +16,13 @@ const TableRow = ({ rowData, rowStyle }) => {
     return (_jsxs(TR, { className: "mfui-tr", style: rowStyle, "data-key": rowData.__key, "data-selected": selected, children: [enableSelection && (_jsx(ActionCell, { className: `mfui-td column-select`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(CheckBox, { className: `mfui-checkbox`, value: selected, onChange: (e) => handleSelectionChange(e) }) }) })), enableActionButton && (_jsx(ActionCell, { className: `mfui-td column-action`, children: _jsx(InnerCellContent, { className: "mfui inner-cell-content row-action", children: _jsx(ActionButton, { variant: "subtle", onClick: () => onActionButtonClick === null || onActionButtonClick === void 0 ? void 0 : onActionButtonClick(rowData), children: Icon ? _jsx(Icon, { size: 14 }) : _jsx(Maximize2Icon, { size: 14 }) }) }) })), columnState.map((column, index) => {
                 if (column.visible === false)
                     return null;
+                if (loading) {
+                    return (_jsx(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
+                            width: column.width,
+                            minWidth: column.minWidth,
+                            flex: column.width ? "0 0 auto" : "1",
+                        }, children: _jsx(LoadingCellIndicator, {}) }, index));
+                }
                 return (_jsxs(TD, { className: `mfui-td column-${column.columnId}`, "data-field": column.dataField, style: {
                         width: column.width,
                         minWidth: column.minWidth,

package/dist/Table/VirtualIzedRows.js

@@ -5,7 +5,7 @@ import useTable from "./useTable";
 import TableDefaults from "./TableDefaults";
 import TableRow from "./TableRow";
 const VirtualizedRows = ({ tableDimensions, targetElm, listElm, rowHeight, headerRowHeight }) => {
-    const { data, compactState } = useTable();
+    const { data, compactState, loadingRowIds, keyField } = useTable();
     const effectiveRowHeight = compactState
         ? TableDefaults.row.height.compact
         : rowHeight
@@ -22,7 +22,7 @@ const VirtualizedRows = ({ tableDimensions, targetElm, listElm, rowHeight, heade
             }, children: ({ data, index, style }) => {
                 var _a;
                 const row = ((_a = data === null || data === void 0 ? void 0 : data.data) === null || _a === void 0 ? void 0 : _a[index]) || {};
-                return (_jsx(TableRow, { rowData: row, rowStyle: Object.assign(Object.assign({}, style), { height: rowHeight }) }, index));
+                return (_jsx(TableRow, { rowData: row, loading: !!keyField ? loadingRowIds === null || loadingRowIds === void 0 ? void 0 : loadingRowIds.includes(row[keyField]) : false, rowStyle: Object.assign(Object.assign({}, style), { height: rowHeight }) }, index));
             } }) }));
 };
 export default VirtualizedRows;

package/dist/Table/types.d.ts

@@ -105,6 +105,7 @@ export type TableContextType = {
     rowHeight?: number;
     virtualized?: boolean;
     loading?: boolean;
+    loadingRowIds?: (string | number)[];
     tableElement: MutableRefObject<HTMLDivElement | null>;
     headerRowElm: MutableRefObject<HTMLDivElement | null>;
     tableDimensions: TableDimensions;
@@ -197,6 +198,7 @@ export interface TableRowProps {
         [key: string]: any;
     };
     rowStyle?: React.CSSProperties;
+    loading?: boolean;
 }
 export interface OnColumnChangeProps {
     columnState: ColumnState[];
@@ -251,6 +253,7 @@ export interface TableProps {
     minHeight?: number;
     virtualized?: boolean;
     loading?: boolean;
+    loadingRowIds?: (string | number)[];
     compact?: boolean;
     headerRowHeight?: number;
     rowHeight?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monolith-forensics/monolith-ui",
-  "version": "1.2.110",
+  "version": "1.2.112",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "author": "Matt Danner (Monolith Forensics LLC)",