@mezzanine-ui/react 0.13.11 → 0.14.1

package/Portal/Portal.js

@@ -7,12 +7,15 @@ const Portal = (props) => {
     const { children, container, disablePortal = false, } = props;
     const [portalElement, setPortalElement] = useState(() => (disablePortal
         ? null
-        : getElement(container) || document.body));
+        : getElement(container)));
     useEffect(() => {
         if (!disablePortal) {
             setPortalElement(getElement(container) || document.body);
         }
     }, [container, disablePortal]);
+    /** This element is fully client side, so `return null` on server side */
+    if (typeof window === 'undefined')
+        return null;
     if (disablePortal || !portalElement) {
         return jsx(Fragment, { children: children });
     }

package/Table/TableBodyRow.js

@@ -53,9 +53,10 @@ const TableBodyRow = forwardRef(function TableBodyRow(props, ref) {
                                 minWidth: 'unset',
                             }, children: jsx(TableExpandable, { expandable: isExpandable, expanded: expanded, setExpanded: setExpanded, onExpand: (status) => { var _a; return (_a = expanding.onExpand) === null || _a === void 0 ? void 0 : _a.call(expanding, rowData, status); } }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
                             var _a, _b, _c, _d;
-                            const ellipsis = !!(get(rowData, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : get(rowData, column.dataIndex));
-                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || get(rowData, column.dataIndex) }) }) }, `${column.dataIndex}-${column.title}-${(rowData.key || rowData.id)}`));
+                            const autoGrabData = column.dataIndex ? get(rowData, column.dataIndex) : '';
+                            const ellipsis = !!(autoGrabData) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                            const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, rowData)) !== null && _c !== void 0 ? _c : autoGrabData);
+                            return (jsx("td", { className: cx(tableClasses.bodyRowCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.bodyRowCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.bodyRowCellWrapperFixedStuck, column.bodyClassName), style: getColumnStyle(column), children: jsx(TableEditRenderWrapper, { ...column, rowData: rowData, children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle(column), tooltipTitle: tooltipTitle, children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, rowData, rowIndex, column)) || autoGrabData }) }) }, `${idx + 1}-${(rowData.key || rowData.id)}`));
                         })] })) }, rowData.key || rowData.id), renderedExpandedContent ? (jsx("tr", { children: jsx("td", { style: { padding: 0 }, children: jsx(AccordionDetails, { className: cx(expanding.className, tableClasses.bodyRowExpandedTableWrapper), expanded: expanded, children: (renderedExpandedContent === null || renderedExpandedContent === void 0 ? void 0 : renderedExpandedContent.dataSource) ? (jsx(TableExpandedTable, { renderedExpandedContent: renderedExpandedContent })) : renderedExpandedContent }) }) })) : null] }));
 });
 var TableBodyRow$1 = TableBodyRow;

package/Table/TableContext.d.ts

@@ -8,7 +8,7 @@ export interface RowSelectionContext extends Pick<TableRowSelection, 'actions'>
 }
 /** typeof sorting */
 export interface SortingContext {
-    onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'dataIndex' | 'sorter' | 'onSorted'>): void;
+    onSort(v: Pick<TableColumn<TableRecord<unknown>>, 'key' | 'dataIndex' | 'sorter' | 'onSorted'>): void;
     onResetAll(): void;
     sortedOn: string;
     sortedType: string;

package/Table/TableExpandedTable.js

@@ -15,9 +15,10 @@ const TableExpandedTable = forwardRef(function TableExpandedTable(props, ref) {
             return (jsxs("div", { ref: ref, className: cx(tableClasses.bodyRow, tableClasses.bodyRowExpandedTableRow, renderedExpandedContent.className), role: "row", children: [jsx(TableExpandable, { showIcon: false }), ((_a = (renderedExpandedContent.columns || columns)) !== null && _a !== void 0 ? _a : [])
                         .map((column, index) => {
                         var _a, _b, _c, _d;
-                        const ellipsis = !!(get(source, column.dataIndex)) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
-                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : get(source, column.dataIndex));
-                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || get(source, column.dataIndex) }) }, `${column.dataIndex}-${index}`));
+                        const autoGrabData = column.dataIndex ? get(source, column.dataIndex) : '';
+                        const ellipsis = !!(autoGrabData) && ((_a = column.ellipsis) !== null && _a !== void 0 ? _a : true);
+                        const tooltipTitle = ((_c = (_b = column.renderTooltipTitle) === null || _b === void 0 ? void 0 : _b.call(column, source)) !== null && _c !== void 0 ? _c : autoGrabData);
+                        return (jsx("div", { className: cx(tableClasses.bodyRowCellWrapper, column.bodyClassName), style: getColumnStyle((columns !== null && columns !== void 0 ? columns : [])[index]), children: jsx(TableCell, { ellipsis: ellipsis, forceShownTooltipWhenHovered: column.forceShownTooltipWhenHovered, style: getCellStyle((columns !== null && columns !== void 0 ? columns : [])[index]), tooltipTitle: tooltipTitle || '', children: ((_d = column.render) === null || _d === void 0 ? void 0 : _d.call(column, source, sourceIndex, column)) || autoGrabData }) }, `${index + 1}`));
                     })] }, (source.key || source.id)));
         }) }));
 });

package/Table/TableHeader.js

@@ -26,7 +26,7 @@ const TableHeader = forwardRef(function TableHeader(props, ref) {
     ]);
     return (jsx("thead", { className: tableClasses.headerFixed, children: jsxs("tr", { ref: ref, ...rest, className: cx(tableClasses.header, className), children: [rowSelection ? (jsx("th", { "aria-label": "Row Selection", style: { display: 'flex' }, children: jsx(TableRowSelection, { rowKey: SELECTED_ALL_KEY, showDropdownIcon: true }) })) : null, expanding && !rowSelection ? (jsx("th", { "aria-label": "Row Expansion", style: { display: 'flex' }, children: jsx(TableExpandable, { showIcon: false }) })) : null, (columns !== null && columns !== void 0 ? columns : []).map((column, idx) => {
                     var _a;
-                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${column.dataIndex}-${column.title}`));
+                    return (jsx("th", { className: cx(tableClasses.headerCellWrapper, isFirstColumnShouldSticky && idx === 0 && tableClasses.headerCellWrapperFixed, isFirstColumnShouldSticky && idx === 0 && isHorizontalScrolling && tableClasses.headerCellWrapperFixedStuck, column.headerClassName), style: getColumnStyle(column), children: jsxs(TableCell, { ellipsis: false, style: getCellStyle(column), children: [((_a = column.renderTitle) === null || _a === void 0 ? void 0 : _a.call(column, tableClasses)) || column.title, typeof column.sorter === 'function' || typeof column.onSorted === 'function' ? (jsx(TableSortingIcon, { column: column })) : null] }) }, `${idx + 1}`));
                 })] }) }));
 });
 var TableHeader$1 = TableHeader;

package/Table/editable/TableEditRenderWrapper.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { TableColumn, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
+import { TableColumnBase, TableDataSource, TableRecord } from '@mezzanine-ui/core/table';
 import { NativeElementPropsWithoutKeyAndRef } from '../../utils/jsx-types';
-export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>, TableColumn<TableRecord<unknown>> {
+export interface EditableBodyCellProps extends NativeElementPropsWithoutKeyAndRef<'div'>, TableColumnBase<TableRecord<unknown>> {
     rowData: TableDataSource;
 }
 declare function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }: EditableBodyCellProps): JSX.Element;

package/Table/editable/TableEditRenderWrapper.js

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { useContext, Fragment } from 'react';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useContext } from 'react';
 import { TableComponentContext } from '../TableContext.js';
 
 function TableEditRenderWrapper({ children, dataIndex, editable, rowData, setCellProps, ...rest }) {

package/Table/sorting/TableSortingIcon.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, useMemo } from 'react';
+import { forwardRef, useMemo, useContext } from 'react';
 import { tableClasses } from '@mezzanine-ui/core/table';
 import { ArrowRightIcon } from '@mezzanine-ui/icons';
 import { TableContext } from '../TableContext.js';
@@ -8,10 +8,11 @@ import cx from 'clsx';
 
 const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     const { className, column, ...rest } = props;
+    const uniqueId = useMemo(() => `${crypto.getRandomValues(new Uint32Array(5))[0]}`, []);
     const { sorting, } = useContext(TableContext) || {};
-    const { dataIndex, } = column;
+    const { key = uniqueId, } = column;
     /** styling */
-    const currentType = (dataIndex === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
+    const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
     const currentIconStyle = useMemo(() => ({
         color: currentType === 'none' ? 'secondary' : 'primary',
         style: {
@@ -21,7 +22,10 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     return (jsx(Icon, { ...rest, ref: ref, className: cx(tableClasses.icon, tableClasses.iconClickable, className), color: currentIconStyle.color, icon: ArrowRightIcon, onClick: (evt) => {
             var _a;
             evt.stopPropagation();
-            (_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting, column);
+            (_a = sorting === null || sorting === void 0 ? void 0 : sorting.onSort) === null || _a === void 0 ? void 0 : _a.call(sorting, {
+                ...column,
+                key,
+            });
         }, style: currentIconStyle.style }));
 });
 var TableSortingIcon$1 = TableSortingIcon;

package/Table/sorting/useTableSorting.d.ts

@@ -4,7 +4,7 @@ export interface UseTableSorting {
     dataSource: TableDataSource[];
 }
 export type SortedType = 'desc' | 'asc' | 'none';
-export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "dataIndex" | "sorter" | "onSorted">) => void, {
+export declare function useTableSorting(props: UseTableSorting): readonly [TableDataSource[], (v: Pick<TableColumn<TableRecord<unknown>>, "key" | "dataIndex" | "sorter" | "onSorted">) => void, {
     readonly sortedOn: string;
     readonly sortedType: SortedType;
     readonly onResetAll: () => void;

package/Table/sorting/useTableSorting.js

@@ -70,12 +70,12 @@ function useTableSorting(props) {
         setSortedType('none');
     }, []);
     const onChange = useLastCallback((opts) => {
-        const { dataIndex, sorter, onSorted } = opts;
-        const isChosenFromOneToAnother = sortedOn && dataIndex !== sortedOn;
+        const { key = '', dataIndex, sorter, onSorted } = opts;
+        const isChosenFromOneToAnother = sortedOn && key !== sortedOn;
         const nextSortedType = getNextSortedType(isChosenFromOneToAnother ? 'none' : sortedType);
         const onMappingSources = (sources) => {
             setDataSource(sources);
-            onSorted === null || onSorted === void 0 ? void 0 : onSorted(dataIndex, nextSortedType);
+            onSorted === null || onSorted === void 0 ? void 0 : onSorted(key, nextSortedType);
         };
         // only apply changes when column sorter is given
         if (typeof sorter === 'function' || typeof onSorted === 'function') {
@@ -84,15 +84,16 @@ function useTableSorting(props) {
             switch (nextSortedType) {
                 case 'desc':
                 case 'asc': {
-                    // update current working dataIndex
-                    setSortedOn(dataIndex);
+                    // update current working key
+                    setSortedOn(key);
                     // getting new source instance (when switch between sorter, should use origin dataSource)
                     let newSource = (isChosenFromOneToAnother ? dataSourceProp : dataSource).slice(0);
                     if (typeof sorter === 'function') {
+                        console.warn('When using a `sorter` function, please provide the `dataIndex` to make sure it worked as expected.');
                         // sort by given sorter
                         newSource = newSource.sort((a, b) => (
                         // reverse result when sorted type is ascending
-                        (sorter(get(a, dataIndex), get(b, dataIndex))) * (nextSortedType === 'asc' ? -1 : 1)));
+                        (sorter(get(a, dataIndex || ''), get(b, dataIndex || ''))) * (nextSortedType === 'asc' ? -1 : 1)));
                     }
                     // map back the data source
                     onMappingSources(newSource);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "0.13.11",
+  "version": "0.14.1",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -28,9 +28,9 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@mezzanine-ui/core": "^0.13.11",
-    "@mezzanine-ui/icons": "^0.13.11",
-    "@mezzanine-ui/system": "^0.13.11",
+    "@mezzanine-ui/core": "^0.14.1",
+    "@mezzanine-ui/icons": "^0.14.1",
+    "@mezzanine-ui/system": "^0.14.1",
     "@popperjs/core": "^2.11.6",
     "@types/react-transition-group": "^4.4.8",
     "clsx": "^2.0.0",