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

package/cjs/exported-related/RowRenderer/DefaultRowContentRenderer.js

@@ -1,143 +1,145 @@
-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 DefaultRowContentRenderer_exports = {};
-__export(DefaultRowContentRenderer_exports, {
-  DefaultRowContentRenderer: () => DefaultRowContentRenderer
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_Columns = __toESM(require("../../addons/Columns"));
-var import_constants = __toESM(require("../../configs/constants"));
-var import_Cells = __toESM(require("../../parts/Cells"));
-var import_SortableItemContext = __toESM(require("../../parts/HoC/SortableItemContext"));
-var import_styled = __toESM(require("../../styled"));
-const DetailsWrapper = (props) => /* @__PURE__ */ import_react.default.createElement("div", {
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var index = require('../../addons/Columns/index.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');
+var index$1 = require('../../parts/Cells/index.js');
+var SortableItemContext = require('../../parts/HoC/SortableItemContext.js');
+var styled = require('../../styled.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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 DetailsWrapper = props =>
+/*#__PURE__*/
+// This can be further customized
+// eslint-disable-next-line react/prop-types
+// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+_jsx__default["default"]("div", {
   "data-role": "detail-view",
   style: {
-    borderTop: "1px solid #EBEDF0",
-    borderBottom: "1px solid #EBEDF0"
+    borderTop: '1px solid #EBEDF0',
+    borderBottom: '1px solid #EBEDF0'
   },
-  onClick: (e) => e.stopPropagation(),
-  onKeyDown: (e) => e.stopPropagation()
-}, props.children);
-const ariaLabelMessage = (row, selected) => `Row number ${row.realIndex + 1}${row.parentIndex !== null ? `, child of row number ${row.parentIndex + 1}` : ""}. ${selected ? "Selected. " : ""}To interact with the cells press enter`;
-const DefaultRowContentRenderer = (props) => {
+  onClick: e => e.stopPropagation(),
+  onKeyDown: e => e.stopPropagation()
+}, void 0, props.children);
+
+const ariaLabelMessage = (row, selected) => "Row number ".concat(row.realIndex + 1).concat(row.parentIndex !== null ? ", child of row number ".concat(row.parentIndex + 1) : '', ". ").concat(selected ? 'Selected. ' : '', "To interact with the cells press enter");
+
+const DefaultRowContentRenderer = props => {
   const {
     row,
     ctx: {
-      tableProps: { isExpandable, colsLayoutStyle, selection, noSelectionColumn, expandedRows, disabledRows },
-      layoutHelpers: { gridLayout },
+      tableProps: {
+        isExpandable,
+        colsLayoutStyle,
+        selection,
+        noSelectionColumn,
+        expandedRows,
+        disabledRows
+      },
+      layoutHelpers: {
+        gridLayout
+      },
       visibleColumns
     },
     draggableProps,
     isDragOverlay,
-    backgroundColor = "white",
+    backgroundColor = 'white',
     dropIndicatorPosition,
     focusedRowId,
     selectedRowId,
     compact
   } = props;
-  const rowRef = (0, import_react.useRef)(null);
+  const rowRef = React.useRef(null);
   const isDndActive = draggableProps && draggableProps.active;
   const isDragging = draggableProps && draggableProps.isDragging;
-  (0, import_react.useLayoutEffect)(() => {
+  React.useLayoutEffect(() => {
     if (row.uid === focusedRowId) {
-      rowRef.current.focus({ preventScroll: true });
+      rowRef.current.focus({
+        preventScroll: true
+      });
     }
   }, [focusedRowId, row.uid]);
-  const gridTemplateColProps = (0, import_react.useMemo)(() => ({
-    cols: isDragOverlay ? ["24px", "auto"] : gridLayout,
+  const gridTemplateColProps = React.useMemo(() => ({
+    cols: isDragOverlay ? ['24px', 'auto'] : gridLayout,
     isExpandable,
     colLayoutStyle: colsLayoutStyle
   }), [isDragOverlay, gridLayout, colsLayoutStyle, isExpandable]);
-  const detailsIndent = (0, import_react.useMemo)(() => {
+  const detailsIndent = React.useMemo(() => {
     let padding = 0;
+
     for (let i = 0; i < visibleColumns.length; i += 1) {
-      if (import_Columns.INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {
+      if (index.INTERNAL_COLUMNS.includes(visibleColumns[i].id)) {
         padding += visibleColumns[i].width;
       } else {
         padding += row.depth * 32 + 15;
         break;
       }
     }
+
     return padding;
   }, [row.depth, visibleColumns]);
-  const PureRowContent = (0, import_react.useMemo)(() => {
+  const PureRowContent = React.useMemo(() => {
     const DetailsView = row.original.tableRowDetails;
-    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_styled.StyledCellContainer, {
-      ref: rowRef,
-      key: row.uid,
-      tabIndex: 0,
-      role: "row",
-      "aria-rowindex": row.realIndex + 1,
-      "aria-label": ariaLabelMessage(row, selection?.[row.uid] === true),
-      "aria-level": row.depth + 1,
-      "aria-selected": selection?.[row.uid] === true,
-      "aria-expanded": isExpandable ? expandedRows[row.uid] === true : void 0,
-      "aria-disabled": disabledRows[row.uid],
-      ...gridTemplateColProps,
-      backgroundColor,
-      height: compact ? "24px" : "auto",
-      minHeight: compact ? "24px" : "36px",
-      isDropIndicatorPositionInside: dropIndicatorPosition === import_SortableItemContext.DropIndicatorPosition.Inside,
-      shouldDisplayHover: !isDndActive && !isDragging && !isDragOverlay,
-      isDragOverlay,
-      isDragging,
-      selected: noSelectionColumn && selection?.[row.uid] === true,
-      disabled: disabledRows[row.uid],
-      "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT
-    }, /* @__PURE__ */ import_react.default.createElement(import_Cells.Cells, {
-      row,
-      isRowSelected: selectedRowId === row.uid,
-      isDragOverlay,
-      key: row.uid
-    })), isExpandable && row.isExpanded && DetailsView && /* @__PURE__ */ import_react.default.createElement(DetailsWrapper, null, /* @__PURE__ */ import_react.default.createElement(DetailsView, {
-      row,
-      detailsIndent
-    })));
-  }, [
-    row,
-    selection,
-    isExpandable,
-    expandedRows,
-    disabledRows,
-    gridTemplateColProps,
-    backgroundColor,
-    compact,
-    dropIndicatorPosition,
-    isDndActive,
-    isDragging,
-    isDragOverlay,
-    noSelectionColumn,
-    selectedRowId,
-    detailsIndent
-  ]);
+    return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(styled.StyledCellContainer, _objectSpread(_objectSpread({
+        ref: rowRef,
+        tabIndex: 0,
+        role: "row",
+        "aria-rowindex": row.realIndex + 1,
+        "aria-label": ariaLabelMessage(row, (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true),
+        "aria-level": row.depth + 1,
+        "aria-selected": (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
+        "aria-expanded": isExpandable ? expandedRows[row.uid] === true : undefined,
+        "aria-disabled": disabledRows[row.uid]
+      }, gridTemplateColProps), {}, {
+        backgroundColor: backgroundColor,
+        height: compact ? '24px' : 'auto',
+        minHeight: compact ? '24px' : '36px',
+        isDropIndicatorPositionInside: dropIndicatorPosition === SortableItemContext.DropIndicatorPosition.Inside,
+        shouldDisplayHover: !isDndActive && !isDragging && !isDragOverlay,
+        isDragOverlay: isDragOverlay,
+        isDragging: isDragging,
+        selected: noSelectionColumn && (selection === null || selection === void 0 ? void 0 : selection[row.uid]) === true,
+        disabled: disabledRows[row.uid],
+        "data-testid": constants.DATA_TESTID.DATA_TABLE_ROW_CONTENT,
+        children: /*#__PURE__*/_jsx__default["default"](index$1, {
+          row: row,
+          isRowSelected: selectedRowId === row.uid,
+          isDragOverlay: isDragOverlay
+        }, row.uid)
+      }), row.uid), isExpandable && row.isExpanded && DetailsView && /*#__PURE__*/_jsx__default["default"](DetailsWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](DetailsView, {
+        row: row,
+        detailsIndent: detailsIndent
+      }))]
+    });
+  }, [row, selection, isExpandable, expandedRows, disabledRows, gridTemplateColProps, backgroundColor, compact, dropIndicatorPosition, isDndActive, isDragging, isDragOverlay, noSelectionColumn, selectedRowId, detailsIndent]);
   return PureRowContent;
 };
-module.exports = __toCommonJS(DefaultRowContentRenderer_exports);
-//# sourceMappingURL=DefaultRowContentRenderer.js.map
+
+exports.DefaultRowContentRenderer = DefaultRowContentRenderer;

package/cjs/exported-related/RowRenderer/index.js

@@ -1,49 +1,54 @@
-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 RowRenderer_exports = {};
-__export(RowRenderer_exports, {
-  RowRenderer: () => RowRenderer,
-  default: () => RowRenderer_default
-});
-var React = __toESM(require("react"));
-var import_react = __toESM(require("react"));
-var import_DataTableContext = __toESM(require("../../DataTableContext"));
-var import_styled = __toESM(require("../../styled"));
-var import_DefaultRowContentRenderer = __toESM(require("./DefaultRowContentRenderer"));
-var import_useRowRendererHandlers = __toESM(require("./useRowRendererHandlers"));
-var import_useRowRendererProperties = __toESM(require("./useRowRendererProperties"));
-var import_DropIndicator = __toESM(require("../../parts/DropIndicator"));
-var import_SortableItemContext = __toESM(require("../../parts/HoC/SortableItemContext"));
-var import_constants = __toESM(require("../../configs/constants"));
-const magicDottedBorder = /* @__PURE__ */ import_react.default.createElement("svg", {
+'use strict';
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var React = require('react');
+var DataTableContext = require('../../DataTableContext.js');
+var styled = require('../../styled.js');
+var DefaultRowContentRenderer = require('./DefaultRowContentRenderer.js');
+var useRowRendererHandlers = require('./useRowRendererHandlers.js');
+var useRowRendererProperties = require('./useRowRendererProperties.js');
+var DropIndicator = require('../../parts/DropIndicator.js');
+var SortableItemContext = require('../../parts/HoC/SortableItemContext.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-icons');
+require('styled-components');
+var jsxRuntime = require('react/jsx-runtime');
+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('../../parts/Row.js');
+require('../../parts/Footer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+
+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; }
+
+// CSS don't let us modify the spacing between the dots, so one solution is to use SVG
+const magicDottedBorder = /*#__PURE__*/_jsx__default["default"]("svg", {
   width: "100%",
   height: "1px"
-}, /* @__PURE__ */ import_react.default.createElement("line", {
+}, void 0, /*#__PURE__*/_jsx__default["default"]("line", {
   x1: "0",
   y1: "0",
   x2: "100%",
@@ -54,21 +59,29 @@ const magicDottedBorder = /* @__PURE__ */ import_react.default.createElement("sv
   strokeDashoffset: "0",
   strokeLinecap: "round"
 }));
-const RowRenderer = (props) => {
+
+const RowRenderer = props => {
   const {
     row,
     itemIndex,
-    minHeight = "36px",
-    height = "auto",
+    minHeight = '36px',
+    height = 'auto',
     rowsLayout = [1],
     CustomRowContentRenderer,
     focusedRowId,
     selectedRowId,
     isDragOverlay
   } = props;
-  const ctx = (0, import_react.useContext)(import_DataTableContext.DataTableContext);
-  const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
-  const { flattenedData } = ctx;
+  const ctx = React.useContext(DataTableContext["default"]);
+  const {
+    draggableProps
+  } = React.useContext(SortableItemContext.SortableItemContext);
+  const {
+    flattenedData
+  } = ctx; // ===========================================================================
+  // Properties for the row
+  // ===========================================================================
+
   const {
     userDataProperties,
     colsLayoutStyle,
@@ -76,10 +89,18 @@ const RowRenderer = (props) => {
     rowStyle,
     shouldAppendDottedBorder,
     dropIndicatorPosition
-  } = (0, import_useRowRendererProperties.useRowRendererProperties)({
+  } = useRowRendererProperties.useRowRendererProperties({
     row
-  });
-  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = (0, import_useRowRendererHandlers.useRowRendererHandlers)({
+  }); // ===========================================================================
+  // Handlers
+  // ===========================================================================
+
+  const {
+    handleItemClick,
+    handleKeyDown,
+    handleOnBlur,
+    handleOnFocus
+  } = useRowRendererHandlers.useRowRendererHandlers({
     row,
     itemIndex,
     items: flattenedData,
@@ -87,20 +108,20 @@ const RowRenderer = (props) => {
     isDragOverlay,
     selectedRowId
   });
-  const rowContentProps = {
-    ...props,
+
+  const rowContentProps = _objectSpread(_objectSpread({}, props), {}, {
     ctx,
     focusedRowId,
     selectedRowId,
     draggableProps,
     dropIndicatorPosition
-  };
-  return /* @__PURE__ */ import_react.default.createElement(import_styled.StyledFullsizeGrid, {
-    "data-testid": import_constants.DATA_TESTID.DATA_TABLE_ROW,
-    key: row.uid,
-    colsLayoutStyle,
-    ...userDataProperties,
-    totalColumnsWidth,
+  });
+
+  return /*#__PURE__*/jsxRuntime.jsxs(styled.StyledFullsizeGrid, _objectSpread(_objectSpread({
+    "data-testid": constants.DATA_TESTID.DATA_TABLE_ROW,
+    colsLayoutStyle: colsLayoutStyle
+  }, userDataProperties), {}, {
+    totalColumnsWidth: totalColumnsWidth,
     style: rowStyle,
     onClick: handleItemClick,
     onKeyDown: handleKeyDown,
@@ -109,19 +130,16 @@ const RowRenderer = (props) => {
     "data-expandable": Boolean(row.original.tableRowDetails),
     "data-is-row-expanded": row.isExpanded,
     rows: rowsLayout,
-    minHeight,
-    height
-  }, CustomRowContentRenderer ? /* @__PURE__ */ import_react.default.createElement(CustomRowContentRenderer, {
-    ...rowContentProps
-  }) : /* @__PURE__ */ import_react.default.createElement(import_DefaultRowContentRenderer.DefaultRowContentRenderer, {
-    ...rowContentProps,
-    key: row.uid
-  }), shouldAppendDottedBorder && magicDottedBorder, /* @__PURE__ */ import_react.default.createElement(import_DropIndicator.DropIndicator, {
-    vertical: false,
-    dropIndicatorPosition,
-    isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
-  }));
+    minHeight: minHeight,
+    height: height,
+    children: [CustomRowContentRenderer ? /*#__PURE__*/jsxRuntime.jsx(CustomRowContentRenderer, _objectSpread({}, rowContentProps)) : /*#__PURE__*/React.createElement(DefaultRowContentRenderer.DefaultRowContentRenderer, _objectSpread(_objectSpread({}, rowContentProps), {}, {
+      key: row.uid
+    })), shouldAppendDottedBorder && magicDottedBorder, /*#__PURE__*/_jsx__default["default"](DropIndicator, {
+      vertical: false,
+      dropIndicatorPosition: dropIndicatorPosition,
+      isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
+    })]
+  }), row.uid);
 };
-var RowRenderer_default = RowRenderer;
-module.exports = __toCommonJS(RowRenderer_exports);
-//# sourceMappingURL=index.js.map
+
+module.exports = RowRenderer;