@elliemae/ds-data-table 2.2.0-alpha.4 → 3.0.0-next.2

package/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js

@@ -1,64 +1,64 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var ColumnDragHandle_exports = {};
-__export(ColumnDragHandle_exports, {
-  dragHandleColumn: () => dragHandleColumn
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_useRecoverFocusRow = require("../../../hooks/useRecoverFocusRow");
-var import_parts = require("../../../parts");
-var import_styled = require("../../../styled");
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var useRecoverFocusRow = require('../../../hooks/useRecoverFocusRow.js');
+require('../../../parts/TableContent.js');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-circular-progress-indicator');
+require('styled-components');
+require('@elliemae/ds-icons');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
+require('../../../DataTableContext.js');
+require('../../../parts/Row.js');
+require('../../../parts/Footer.js');
+var DnDHandle = require('../../../parts/DnDHandle.js');
+var styled = require('../../../styled.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+var _div;
 const dragHandleColumn = {
-  id: "dragHandleColumn",
-  Header: () => /* @__PURE__ */ import_react.default.createElement("div", null),
-  Cell: ({ row, isRowSelected, cell, isDragOverlay, draggableProps }) => {
-    (0, import_useRecoverFocusRow.useRecoverFocusRow)(row, cell, isDragOverlay, draggableProps);
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFocusWithin, {
-      style: { width: "100%", height: "100%" },
+  // Build our singleSelecter column
+  id: 'dragHandleColumn',
+  // Make sure it has an ID
+  // The header doesn't need anything for single selection
+  Header: () => _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})),
+  Cell: _ref2 => {
+    let {
+      row,
+      isRowSelected,
+      cell,
+      isDragOverlay,
+      draggableProps
+    } = _ref2;
+    useRecoverFocusRow.useRecoverFocusRow(row, cell, isDragOverlay, draggableProps);
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {
+      style: {
+        width: '100%',
+        height: '100%'
+      },
       hideFocus: draggableProps && draggableProps.isDragging
-    }, /* @__PURE__ */ import_react.default.createElement(import_parts.DnDHandle, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DnDHandle, {
       id: row.uid,
-      key: row.uid,
       isReachable: isRowSelected,
-      innerRef: (_ref) => {
-        if (!isDragOverlay)
-          cell.ref.current = _ref;
+      innerRef: _ref => {
+        if (!isDragOverlay) cell.ref.current = _ref;
       },
-      isDragOverlay
-    }));
+      isDragOverlay: isDragOverlay
+    }, row.uid));
   },
-  textWrap: "wrap-all",
+  textWrap: 'wrap-all',
   width: 24,
   padding: 4,
   canResize: false,
   disableDnD: true,
   isFocuseable: false
 };
-module.exports = __toCommonJS(ColumnDragHandle_exports);
-//# sourceMappingURL=ColumnDragHandle.js.map
+
+exports.dragHandleColumn = dragHandleColumn;

package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -1,190 +1,220 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
-  }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
-};
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
-var ColumnExpand_exports = {};
-__export(ColumnExpand_exports, {
-  expandRowColumn: () => expandRowColumn
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_ds_icons = require("@elliemae/ds-icons");
-var import_styled_components = __toESM(require("styled-components"));
-var import_styled = require("../../../styled");
-var import_constants = require("../../../configs/constants");
-const StyledSpan = import_styled_components.default.span`
-  cursor: pointer;
-  box-sizing: border-box;
-  outline: none;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var dsIcons = require('@elliemae/ds-icons');
+var styled$1 = require('styled-components');
+var styled = require('../../../styled.js');
+var constants = require('../../../configs/constants.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
+require('react-virtual');
+require('../../../configs/useRowFlattenization.js');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('@elliemae/ds-form');
+require('../../../parts/TableContent.js');
+require('@elliemae/ds-grid');
+require('@elliemae/ds-circular-progress-indicator');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
+require('../../../DataTableContext.js');
+require('../../../parts/Row.js');
+require('../../../parts/Footer.js');
+require('../../../parts/HoC/SortableItemContext.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$1);
+
+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__default["default"](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 StyledSpan = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-1xp824d-0"
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
 const expandRowColumn = {
-  id: "expander",
-  accessor: "expandRowColumn",
-  Header: ({ ctx }) => {
+  // Build our expander column
+  id: 'expander',
+  // Make sure it has an ID
+  accessor: 'expandRowColumn',
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
-      tableProps: { expandedRows, onRowExpand },
+      tableProps: {
+        expandedRows,
+        onRowExpand
+      },
       allDataFlattened
     } = ctx;
-    const allExpandable = (0, import_react.useMemo)(() => {
+    const allExpandable = React.useMemo(() => {
       const expandable = {};
-      allDataFlattened.forEach((row) => {
-        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)
-          expandable[row.uid] = true;
+      allDataFlattened.forEach(row => {
+        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue) expandable[row.uid] = true;
       });
       return expandable;
     }, [allDataFlattened]);
-    const isAllRowsExpanded = (0, import_react.useMemo)(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
-    const onExpandedAllHandler = (0, import_react.useCallback)(() => {
-      if (isAllRowsExpanded)
-        onRowExpand({}, "All");
-      else
-        onRowExpand({ ...allExpandable }, "All");
+    const isAllRowsExpanded = React.useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
+    const onExpandedAllHandler = React.useCallback(() => {
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
-    const GlobalExpandIcon = (0, import_react.useMemo)(() => {
-      if (isAllRowsExpanded)
-        return /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, {
-          size: "s",
-          color: ["brand-primary", "600"],
-          "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-        });
+    const GlobalExpandIcon = React.useMemo(() => {
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
+        size: "s",
+        color: ['brand-primary', '600'],
+        "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+      }); // Mixed
+
       if (Object.keys(expandedRows).length) {
-        return /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, {
+        return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
           size: "s",
-          color: ["brand-primary", "600"],
-          "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
-          style: { transform: "rotate(45deg)" }
+          color: ['brand-primary', '600'],
+          "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
         });
       }
-      return /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, {
+
+      return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
         size: "s",
-        color: ["brand-primary", "600"],
-        "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
+        color: ['brand-primary', '600'],
+        "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
     }, [expandedRows, isAllRowsExpanded]);
-    return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFocusWithin, null, /* @__PURE__ */ import_react.default.createElement(StyledSpan, {
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx__default["default"](StyledSpan, {
       role: "button",
       tabIndex: 0,
       title: "Toggle All Rows Expanded",
       onClick: onExpandedAllHandler,
-      onKeyDown: (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
           onExpandedAllHandler();
           e.preventDefault();
         }
       },
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      style: { width: "24px", height: "24px" }
-    }, GlobalExpandIcon));
+      style: {
+        width: '24px',
+        height: '24px'
+      }
+    }, void 0, GlobalExpandIcon));
   },
-  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {
+  Cell: _ref2 => {
+    var _row$original$subRows;
+
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx,
+      draggableProps
+    } = _ref2;
     const {
-      tableProps: { dragAndDropRows, expandedRows, onRowExpand }
+      tableProps: {
+        dragAndDropRows,
+        expandedRows,
+        onRowExpand
+      }
     } = ctx;
     const uniqueId = row.uid;
     const isExpanded = expandedRows[uniqueId];
-    const shouldPrintCaret = row.original.subRows?.length && row.depth === 0 || row.original.tableRowDetails || row.original.dimsumHeaderValue;
-    const onRowExpandHandler = (0, import_react.useCallback)((e) => {
+    const shouldPrintCaret = ((_row$original$subRows = row.original.subRows) === null || _row$original$subRows === void 0 ? void 0 : _row$original$subRows.length) && row.depth === 0 || // only allows 1 level of expands
+    row.original.tableRowDetails || row.original.dimsumHeaderValue;
+    const onRowExpandHandler = React.useCallback(e => {
       e.stopPropagation();
+
       if (expandedRows[uniqueId]) {
         delete expandedRows[uniqueId];
       } else {
         expandedRows[uniqueId] = true;
       }
-      onRowExpand({ ...expandedRows }, uniqueId);
+
+      onRowExpand(_objectSpread({}, expandedRows), uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
-    const indentStyle = (0, import_react.useMemo)(() => ({
-      marginLeft: `${row.depth * 32}px`,
-      marginRight: "18px",
-      paddingLeft: "2px",
-      paddingRight: "2px",
-      position: "relative",
-      height: "100%",
-      display: "flex",
-      alignItems: "center"
+    const indentStyle = React.useMemo(() => ({
+      marginLeft: "".concat(row.depth * 32, "px"),
+      marginRight: '18px',
+      paddingLeft: '2px',
+      paddingRight: '2px',
+      position: 'relative',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center'
     }), [row.depth]);
-    const rowProps = (0, import_react.useMemo)(() => ({
-      role: "button",
-      key: `${row.uid}-expand-button`,
-      title: "Toggle Row Expanded",
+    const rowProps = React.useMemo(() => ({
+      role: 'button',
+      key: "".concat(row.uid, "-expand-button"),
+      title: 'Toggle Row Expanded',
       onClick: onRowExpandHandler,
-      onKeyDown: (e) => {
-        if (["Enter", "Space"].includes(e.code)) {
+      onKeyDown: e => {
+        if (['Enter', 'Space'].includes(e.code)) {
           e.preventDefault();
           onRowExpandHandler(e);
         }
       },
       ref: cell.ref,
       tabIndex: isRowSelected ? 0 : -1,
-      "data-testid": "data-table-row-expand-cell",
-      "aria-expanded": isExpanded,
+      'data-testid': 'data-table-row-expand-cell',
+      'aria-expanded': isExpanded,
       isRightArrow: !isExpanded || isDragging || isDragOverlay
     }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
-    const PureCaretIcon = (0, import_react.useMemo)(() => isExpanded && !isDragging && !isDragOverlay ? /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadDown, {
+    const PureCaretIcon = React.useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-    }) : /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowheadRight, {
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+    }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
     }), [isExpanded, isDragging, isDragOverlay]);
-    const ChildIcon = (0, import_react.useMemo)(() => /* @__PURE__ */ import_react.default.createElement(import_ds_icons.ArrowShortReturn, {
+    const ChildIcon = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowShortReturn, {
       size: "s",
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ICON_CHILD,
-      style: { transform: "rotate(90deg) scaleY(-1)" },
-      color: ["brand-primary", "600"]
+      "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_CHILD,
+      style: {
+        transform: 'rotate(90deg) scaleY(-1)'
+      },
+      color: ['brand-primary', '600']
     }), []);
-    if (shouldPrintCaret)
-      return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFocusWithin, {
-        style: indentStyle
-      }, /* @__PURE__ */ import_react.default.createElement(StyledSpan, {
-        ...rowProps
-      }, PureCaretIcon));
-    if (row.depth !== 0)
-      return /* @__PURE__ */ import_react.default.createElement("span", {
-        style: indentStyle
-      }, ChildIcon);
-    return /* @__PURE__ */ import_react.default.createElement("div", {
-      style: { width: "36px" }
+    if (shouldPrintCaret) return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {
+      style: indentStyle
+    }, void 0, /*#__PURE__*/jsxRuntime.jsx(StyledSpan, _objectSpread(_objectSpread({}, rowProps), {}, {
+      children: PureCaretIcon
+    })));
+    if (row.depth !== 0) return /*#__PURE__*/_jsx__default["default"]("span", {
+      style: indentStyle
+    }, void 0, ChildIcon);
+    return /*#__PURE__*/_jsx__default["default"]("div", {
+      style: {
+        width: '36px'
+      }
     });
   },
-  textWrap: "wrap",
+  textWrap: 'wrap',
   canResize: false,
   width: 25,
   padding: 0,
   isFocuseable: false,
   disableDnD: true
 };
-module.exports = __toCommonJS(ColumnExpand_exports);
-//# sourceMappingURL=ColumnExpand.js.map
+
+exports.expandRowColumn = expandRowColumn;