@elliemae/ds-datagrids 2.2.0-alpha.3 → 3.0.0-next.0

package/esm/plugins/expandable-grid/ExpandableColumn.js

@@ -1,95 +1,146 @@
-import * as React from "react";
-import React2, { useRef } from "react";
-import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
-import { aggregatedClasses } from "@elliemae/ds-classnames";
-import { DSButton } from "@elliemae/ds-button";
-import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { dataGridBlockName } from "../../blockNames";
-import { RowSizes } from "../../rowSizes";
-const blockName = `${dataGridBlockName}-expandable-column`;
-const ExpandableColumnWrapper = aggregatedClasses("div")(blockName);
-const LabelDescriptionWrapper = aggregatedClasses("div")(blockName, "label-description-wrapper");
-const Label = aggregatedClasses("span")(blockName, "label");
-const Description = aggregatedClasses("span")(blockName, "description");
-const ExtraColumnData = aggregatedClasses("div")(blockName, "extra-column-data");
-const ExpandableMasterWrapper = aggregatedClasses("div")(`${blockName}-master-wrapper`);
-const ExpandableDetailsWrapper = aggregatedClasses("div")(`${blockName}-details-wrapper`);
-function ExpandableColumnCell({ label, description, isExpanded, expandableDetails, extraData, onToggleExpand }) {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import { useRef } from 'react';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+import DSButton from '@elliemae/ds-button';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { dataGridBlockName } from '../../blockNames.js';
+import { RowSizes } from '../../rowSizes.js';
+import { jsxs } from 'react/jsx-runtime';
+
+const _excluded = ["property", "label", "renderRowLabel", "renderRowDescription", "renderExtraData", "width", "resizable", "sortable", "searchable", "customRenderer"];
+
+var _ArrowheadDown, _ArrowheadRight;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+const blockName = "".concat(dataGridBlockName, "-expandable-column"); // todo: clean this when we move to css-js
+
+const ExpandableColumnWrapper = aggregatedClasses('div')(blockName);
+const LabelDescriptionWrapper = aggregatedClasses('div')(blockName, 'label-description-wrapper');
+const Label = aggregatedClasses('span')(blockName, 'label');
+const Description = aggregatedClasses('span')(blockName, 'description');
+const ExtraColumnData = aggregatedClasses('div')(blockName, 'extra-column-data');
+const ExpandableMasterWrapper = aggregatedClasses('div')("".concat(blockName, "-master-wrapper"));
+const ExpandableDetailsWrapper = aggregatedClasses('div')("".concat(blockName, "-details-wrapper"));
+
+function ExpandableColumnCell(_ref) {
+  let {
+    label,
+    description,
+    isExpanded,
+    expandableDetails,
+    extraData,
+    onToggleExpand
+  } = _ref;
   const ref = useRef();
-  return /* @__PURE__ */ React2.createElement(ExpandableColumnWrapper, {
-    ref,
-    tabindex: 0
-  }, /* @__PURE__ */ React2.createElement(ExpandableMasterWrapper, {
-    style: { height: RowSizes.extend }
-  }, /* @__PURE__ */ React2.createElement(DSButton, {
-    buttonType: "text",
-    className: "expandable-arrow",
-    icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, null) : /* @__PURE__ */ React2.createElement(ArrowheadRight, null),
-    onClick: (e) => {
-      onToggleExpand(e);
-      if (ref && ref.current) {
-        ref.current.focus();
+  return /*#__PURE__*/jsxs(ExpandableColumnWrapper, {
+    ref: ref,
+    tabindex: 0,
+    children: [/*#__PURE__*/_jsx(ExpandableMasterWrapper, {
+      style: {
+        height: RowSizes.extend
       }
-    },
-    size: "s"
-  }), /* @__PURE__ */ React2.createElement(LabelDescriptionWrapper, null, /* @__PURE__ */ React2.createElement(Label, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-    value: label
-  })), /* @__PURE__ */ React2.createElement(Description, null, /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-    value: description
-  }))), /* @__PURE__ */ React2.createElement(ExtraColumnData, null, extraData)), isExpanded && /* @__PURE__ */ React2.createElement(ExpandableDetailsWrapper, null, expandableDetails));
-}
-const expandableColumnRenderer = ({ renderRowLabel, renderRowDescription, renderExtraData }) => (value, { rowData, isExpanded }, grid) => {
-  const {
-    props: { renderExpandedDetails },
-    actions: { toggleExpand }
-  } = grid.getInstance();
-  const expandableDetails = renderExpandedDetails({ rowData });
-  return /* @__PURE__ */ React2.createElement(ExpandableColumnCell, {
-    description: renderRowDescription({ rowData }),
-    expandableDetails,
-    extraData: renderExtraData({ rowData }),
-    isExpanded,
-    label: renderRowLabel({ rowData }),
-    onToggleExpand: () => toggleExpand(rowData)
+    }, void 0, /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      className: "expandable-arrow",
+      icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {})),
+      onClick: e => {
+        onToggleExpand(e);
+
+        if (ref && ref.current) {
+          ref.current.focus();
+        }
+      },
+      size: "s"
+    }), /*#__PURE__*/_jsx(LabelDescriptionWrapper, {}, void 0, /*#__PURE__*/_jsx(Label, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: label
+    })), /*#__PURE__*/_jsx(Description, {}, void 0, /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+      value: description
+    }))), /*#__PURE__*/_jsx(ExtraColumnData, {}, void 0, extraData)), isExpanded && /*#__PURE__*/_jsx(ExpandableDetailsWrapper, {}, void 0, expandableDetails)]
   });
+}
+
+const expandableColumnRenderer = _ref2 => {
+  let {
+    renderRowLabel,
+    renderRowDescription,
+    renderExtraData
+  } = _ref2;
+  return (value, _ref3, grid) => {
+    let {
+      rowData,
+      isExpanded
+    } = _ref3;
+    const {
+      props: {
+        renderExpandedDetails
+      },
+      actions: {
+        toggleExpand
+      }
+    } = grid.getInstance();
+    const expandableDetails = renderExpandedDetails({
+      rowData
+    });
+    return /*#__PURE__*/_jsx(ExpandableColumnCell, {
+      description: renderRowDescription({
+        rowData
+      }),
+      expandableDetails: expandableDetails,
+      extraData: renderExtraData({
+        rowData
+      }),
+      isExpanded: isExpanded,
+      label: renderRowLabel({
+        rowData
+      }),
+      onToggleExpand: () => toggleExpand(rowData)
+    });
+  };
 };
+
 const noop = () => null;
-const ExpandableColumn = ({
-  property,
-  label,
-  renderRowLabel = () => "----",
-  renderRowDescription = noop,
-  renderExtraData = noop,
-  width,
-  resizable,
-  sortable,
-  searchable,
-  customRenderer,
-  ...rest
-}) => {
-  return {
-    ...rest,
+
+function createExpandableColumn(_ref4) {
+  let {
+    property,
+    label,
+    renderRowLabel = () => '----',
+    renderRowDescription = noop,
+    renderExtraData = noop,
+    width,
+    resizable,
+    sortable,
+    searchable,
+    customRenderer
+  } = _ref4,
+      rest = _objectWithoutProperties(_ref4, _excluded);
+
+  return _objectSpread(_objectSpread({}, rest), {}, {
     label,
     property,
     cell: {
-      formatters: [
-        expandableColumnRenderer({
-          renderRowLabel,
-          renderRowDescription,
-          renderExtraData
-        })
-      ]
+      formatters: [expandableColumnRenderer({
+        renderRowLabel,
+        renderRowDescription,
+        renderExtraData
+      })]
     },
-    width: width || "50%",
+    width: width || '50%',
     expandableColumn: true,
     resizable,
     sortable,
     searchable
-  };
-};
-var ExpandableColumn_default = ExpandableColumn;
-export {
-  ExpandableColumn,
-  ExpandableColumn_default as default
-};
-//# sourceMappingURL=ExpandableColumn.js.map
+  });
+}
+
+export { createExpandableColumn as default };

package/esm/plugins/expandable-grid/ExpandablePlugin.js

@@ -1,152 +1,231 @@
-import * as React from "react";
-import React2, { useEffect, useMemo, useRef } from "react";
-import { cx, isFunction } from "@elliemae/ds-utilities";
-import { VariableSizeList } from "react-window";
-import { ArrowheadDown, ArrowheadRight } from "@elliemae/ds-icons";
-import { DSButton } from "@elliemae/ds-button";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { appendCellFormatter } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
-import { ExpandedRow } from "./ExpandedRow";
-import { ExpandedRowExtra } from "./ExpandedRowExtra";
-import { RowSizes } from "../../rowSizes";
-import { useExpandGridState } from "./useExpandGridState";
-const getExpandedRowSizeBySubrows = ({ totalAmount, amountVisible, isShowingAll, size = 36 }) => isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useMemo, useRef, useEffect } from 'react';
+import { cx, isFunction } from '@elliemae/ds-utilities';
+import { VariableSizeList } from 'react-window';
+import { ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
+import DSButton from '@elliemae/ds-button';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import ExpandedRow from './ExpandedRow.js';
+import ExpandedRowExtra from './ExpandedRowExtra.js';
+import { RowSizes } from '../../rowSizes.js';
+import { useExpandGridState } from './useExpandGridState.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+const _excluded = ["isExpanded"];
+
+var _ArrowheadDown, _ArrowheadRight;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const getExpandedRowSizeBySubrows = _ref => {
+  let {
+    totalAmount,
+    amountVisible,
+    isShowingAll,
+    size = 36
+  } = _ref;
+  return isShowingAll ? size * (totalAmount + 1) - 6 : size * (amountVisible + 1) + 32;
+};
+
 const ExpandedRows = {
   SingleColumn: ExpandedRow,
   Master: ExpandedRowExtra
 };
-const createExpandedRow = (type) => ExpandedRows[type] || ExpandedRows.Master;
-const isExpandableSingleColumn = (columns) => columns.some((column) => column.expandableColumn);
-const ExpandablePlugin = createInstancePlugin("expandable", {
+
+const createExpandedRow = type => ExpandedRows[type] || ExpandedRows.Master;
+
+const isExpandableSingleColumn = columns => columns.some(column => column.expandableColumn);
+
+const ExpandablePlugin = createInstancePlugin('expandable', {
   registerStateHook: useExpandGridState,
+
   decorateGrid(grid) {
-    const { decoratedColumns, columns } = grid.getInstance();
-    const detailColumns = useMemo(() => decoratedColumns.map((column) => ({
-      ...column,
+    const {
+      decoratedColumns,
+      columns
+    } = grid.getInstance();
+    const detailColumns = useMemo(() => decoratedColumns.map(column => _objectSpread(_objectSpread({}, column), {}, {
       customRenderer: column.detailCustomRenderer
-    })).filter((col) => !col.expandableColumn), [columns]);
+    })).filter(col => !col.expandableColumn), [columns]);
     return {
       detailColumns
     };
   },
+
   decorateColumns(columns, grid) {
-    if (isExpandableSingleColumn(columns))
-      return columns;
-    const firstColumnIndex = columns.findIndex((column) => column.isUserColumn);
+    if (isExpandableSingleColumn(columns)) return columns; // get first column from user
+
+    const firstColumnIndex = columns.findIndex(column => column.isUserColumn);
     const firstColumn = columns[firstColumnIndex];
     firstColumn.formatExpandable = true;
-    return [
-      ...columns.slice(0, firstColumnIndex),
-      appendCellFormatter((value, { isExpanded, rowData }) => {
-        const {
-          actions: { toggleExpand }
-        } = grid.getInstance();
-        return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DSButton, {
+    return [...columns.slice(0, firstColumnIndex), appendCellFormatter((value, _ref2) => {
+      let {
+        isExpanded,
+        rowData
+      } = _ref2;
+      const {
+        actions: {
+          toggleExpand
+        }
+      } = grid.getInstance();
+      /*
+       * should return only 2 elements ../custom-cell-renderer/addCustomRendererToCell.js
+       * getRenderer it's checking that length to apply the custom render to value only
+       */
+
+      return /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx(DSButton, {
           buttonType: "text",
           className: "expandable-arrow",
-          icon: isExpanded ? /* @__PURE__ */ React2.createElement(ArrowheadDown, null) : /* @__PURE__ */ React2.createElement(ArrowheadRight, null),
-          onClick: (e) => {
+          icon: isExpanded ? _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {})) : _ArrowheadRight || (_ArrowheadRight = /*#__PURE__*/_jsx(ArrowheadRight, {})),
+          onClick: e => {
             e.stopPropagation();
             toggleExpand(rowData);
           },
           size: "s"
-        }), value);
-      }, firstColumn),
-      ...columns.slice(firstColumnIndex + 1)
-    ];
+        }), value]
+      });
+    }, firstColumn), ...columns.slice(firstColumnIndex + 1)];
   },
+
   getBodyProps(bodyProps, grid) {
     const {
       composedRows: rows,
       props: {
         rowKey,
         getChildrenRows,
-        rowSize = "normal",
-        subrowSize = "normal",
+        rowSize = 'normal',
+        subrowSize = 'normal',
         getExpandedRowMinSize,
         getExpandedRowSize,
         expandableSubrowsVisible
       },
-      state: { expandedRows }
+      state: {
+        expandedRows
+      }
     } = grid.getInstance();
     const rowSizePx = RowSizes[rowSize];
     const subrowSizePx = RowSizes[subrowSize];
     const listRef = useRef();
     useEffect(() => {
-      if (listRef.current)
-        listRef.current.resetAfterIndex(0, true);
-    });
-    const getItemSize = (index) => {
+      if (listRef.current) listRef.current.resetAfterIndex(0, true);
+    }); // implementation of expandable row single column with aggregation
+
+    const getItemSize = index => {
       const rowData = rows[index];
       const key = rowData[rowKey];
-      const children = getChildrenRows({ rowData });
-      const expandedSize = getExpandedRowSize ? getExpandedRowSize(index, { rowData }) : getExpandedRowSizeBySubrows({
+      const children = getChildrenRows({
+        rowData
+      });
+      const expandedSize = getExpandedRowSize ? getExpandedRowSize(index, {
+        rowData
+      }) // https://jira.elliemae.io/browse/PUI-1659
+      : getExpandedRowSizeBySubrows({
         totalAmount: children.length,
         amountVisible: children.length > expandableSubrowsVisible ? expandableSubrowsVisible : children.length,
         isShowingAll: children.length < expandableSubrowsVisible || expandedRows[key] && expandedRows[key].showAllRows,
         size: subrowSizePx
       });
-      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index);
+      const expandedMinSize = isFunction(getExpandedRowMinSize) && getExpandedRowMinSize(index); // eslint-disable-next-line no-nested-ternary
+
       return expandedRows[key] ? expandedMinSize > expandedSize ? expandedMinSize : expandedSize : rowSizePx;
     };
-    return {
-      ...bodyProps,
-      className: cx(bodyProps.className, "expandable"),
+
+    return _objectSpread(_objectSpread({}, bodyProps), {}, {
+      className: cx(bodyProps.className, 'expandable'),
       listComponent: VariableSizeList,
-      listProps: { ref: listRef, itemSize: getItemSize }
-    };
+      listProps: {
+        ref: listRef,
+        itemSize: getItemSize
+      }
+    });
   },
+
   decorateRenderers(renderers, grid) {
     const Row = renderers.body.row;
-    const Cell = renderers.body.cell;
+    const Cell = renderers.body.cell; // eslint-disable-next-line react/display-name
+
     renderers.body.row = useMemo(() => {
-      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? "SingleColumn" : "Master";
-      const ExpandedRowComponent = createExpandedRow(expandedRowType);
-      return ({ isExpanded, ...rowProps }) => {
+      // todo: the expandable grid should be created from another specific grid component
+      const expandedRowType = isExpandableSingleColumn(grid.decoratedColumns) ? 'SingleColumn' : 'Master';
+      const ExpandedRowComponent = createExpandedRow(expandedRowType); // eslint-disable-next-line react/display-name
+
+      return _ref3 => {
+        let {
+          isExpanded
+        } = _ref3,
+            rowProps = _objectWithoutProperties(_ref3, _excluded);
+
         if (isExpanded) {
           const {
-            props: { detailColumns, getChildrenRows, renderRowDetails },
+            props: {
+              detailColumns,
+              getChildrenRows,
+              renderRowDetails
+            },
             composedRows
-          } = grid.getInstance();
+          } = grid.getInstance(); // https://jira.elliemae.io/browse/PUI-1667
+
           const rowData = composedRows[rowProps.index] ? composedRows[rowProps.index] : rowProps.rowData;
-          return /* @__PURE__ */ React2.createElement(ExpandedRowComponent, {
+          return /*#__PURE__*/_jsx(ExpandedRowComponent, {
             cellComponent: Cell,
-            detailColumns,
+            detailColumns: detailColumns,
             parentGrid: grid,
-            renderRowDetails,
+            renderRowDetails: renderRowDetails,
             rowComponent: Row,
-            rowData,
-            rowProps: {
+            rowData: rowData,
+            rowProps: _objectSpread({
               rowData,
-              isExpanded,
-              ...rowProps
-            },
-            rows: getChildrenRows({ rowData })
-          }, rowProps.children);
+              isExpanded
+            }, rowProps),
+            rows: getChildrenRows({
+              rowData
+            })
+          }, void 0, rowProps.children);
         }
-        return /* @__PURE__ */ React2.createElement(Row, {
-          ...rowProps
-        });
+
+        return /*#__PURE__*/jsx(Row, _objectSpread({}, rowProps));
       };
     }, []);
     return renderers;
   },
-  getRowProps(rowProps, grid, { rowData }) {
+
+  getRowProps(rowProps, grid, _ref4) {
+    let {
+      rowData
+    } = _ref4;
     const {
-      props: { rowKey },
-      state: { expandedRows }
+      props: {
+        rowKey
+      },
+      state: {
+        expandedRows
+      }
     } = grid.getInstance();
     const key = rowData[rowKey];
     const isExpanded = !!expandedRows[key];
-    return {
-      ...rowProps,
-      className: cx(rowProps.className, Object.keys(expandedRows).length > 0 && "expandable-row", isExpanded && "expanded"),
+    return _objectSpread(_objectSpread({}, rowProps), {}, {
+      className: cx(rowProps.className, Object.keys(expandedRows).length > 0 && 'expandable-row', isExpanded && 'expanded'),
       isExpanded,
       showAllRows: expandedRows[key] && expandedRows[key].showAllRows
-    };
+    });
   }
+
 });
-export {
-  ExpandablePlugin
-};
-//# sourceMappingURL=ExpandablePlugin.js.map
+
+export { ExpandablePlugin };