@elliemae/ds-data-table 2.2.1 → 2.3.0-alpha.4

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -1,210 +1,161 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import { useMemo, useCallback } from 'react';
-import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
-import styled from 'styled-components';
-import { StyledFocusWithin } from '../../../styled.js';
-import { DATA_TESTID } from '../../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'react-virtual';
-import '../../../configs/useRowFlattenization.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import '@elliemae/ds-form';
-import '../../../parts/TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../../../DataTableContext.js';
-import '../../../parts/Row.js';
-import '../../../parts/Footer.js';
-import '../../../parts/HoC/SortableItemContext.js';
-import { jsx } from 'react/jsx-runtime';
-
-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 StyledSpan = /*#__PURE__*/styled.span.withConfig({
-  componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
+import * as React from "react";
+import React2, { useMemo, useCallback } from "react";
+import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from "@elliemae/ds-icons";
+import styled from "styled-components";
+import { StyledFocusWithin } from "../../../styled";
+import { DATA_TESTID } from "../../../configs/constants";
+const StyledSpan = styled.span`
+  cursor: pointer;
+  box-sizing: border-box;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
 const expandRowColumn = {
-  // Build our expander column
-  id: 'expander',
-  // Make sure it has an ID
-  accessor: 'expandRowColumn',
-  Header: _ref => {
-    let {
-      ctx
-    } = _ref;
+  id: "expander",
+  accessor: "expandRowColumn",
+  Header: ({ ctx }) => {
     const {
-      tableProps: {
-        expandedRows,
-        onRowExpand
-      },
+      tableProps: { expandedRows, onRowExpand },
       allDataFlattened
     } = ctx;
     const allExpandable = 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 = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
+      if (isAllRowsExpanded)
+        onRowExpand({}, "All");
+      else
+        onRowExpand({ ...allExpandable }, "All");
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     const GlobalExpandIcon = useMemo(() => {
-      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(ArrowheadDown, {
-        size: "s",
-        color: ['brand-primary', '600'],
-        "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      }); // Mixed
-
+      if (isAllRowsExpanded)
+        return /* @__PURE__ */ React2.createElement(ArrowheadDown, {
+          size: "s",
+          color: ["brand-primary", "600"],
+          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
+        });
       if (Object.keys(expandedRows).length) {
-        return /*#__PURE__*/_jsx(ArrowheadRight, {
+        return /* @__PURE__ */ React2.createElement(ArrowheadRight, {
           size: "s",
-          color: ['brand-primary', '600'],
+          color: ["brand-primary", "600"],
           "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
-          style: {
-            transform: 'rotate(45deg)'
-          }
+          style: { transform: "rotate(45deg)" }
         });
       }
-
-      return /*#__PURE__*/_jsx(ArrowheadRight, {
+      return /* @__PURE__ */ React2.createElement(ArrowheadRight, {
         size: "s",
-        color: ['brand-primary', '600'],
+        color: ["brand-primary", "600"],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
     }, [expandedRows, isAllRowsExpanded]);
-    return /*#__PURE__*/_jsx(StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx(StyledSpan, {
+    return /* @__PURE__ */ React2.createElement(StyledFocusWithin, null, /* @__PURE__ */ React2.createElement(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": DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      style: {
-        width: '24px',
-        height: '24px'
-      }
-    }, void 0, GlobalExpandIcon));
+      style: { width: "24px", height: "24px" }
+    }, GlobalExpandIcon));
   },
-  Cell: _ref2 => {
-    var _row$original$subRows;
-
-    let {
-      cell,
-      row,
-      isRowSelected,
-      ctx,
-      draggableProps
-    } = _ref2;
+  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {
     const {
-      tableProps: {
-        dragAndDropRows,
-        expandedRows,
-        onRowExpand
-      }
+      tableProps: { dragAndDropRows, expandedRows, onRowExpand }
     } = ctx;
     const uniqueId = row.uid;
     const isExpanded = expandedRows[uniqueId];
-    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 = useCallback(e => {
+    const shouldPrintCaret = row.original.subRows?.length && row.depth === 0 || row.original.tableRowDetails || row.original.dimsumHeaderValue;
+    const onRowExpandHandler = useCallback((e) => {
       e.stopPropagation();
-
       if (expandedRows[uniqueId]) {
         delete expandedRows[uniqueId];
       } else {
         expandedRows[uniqueId] = true;
       }
-
-      onRowExpand(_objectSpread({}, expandedRows), uniqueId);
+      onRowExpand({ ...expandedRows }, uniqueId);
     }, [expandedRows, uniqueId, onRowExpand]);
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
     const indentStyle = useMemo(() => ({
-      marginLeft: "".concat(row.depth * 32, "px"),
-      marginRight: '18px',
-      paddingLeft: '2px',
-      paddingRight: '2px',
-      position: 'relative',
-      height: '100%',
-      display: 'flex',
-      alignItems: 'center'
+      marginLeft: `${row.depth * 32}px`,
+      marginRight: "18px",
+      paddingLeft: "2px",
+      paddingRight: "2px",
+      position: "relative",
+      height: "100%",
+      display: "flex",
+      alignItems: "center"
     }), [row.depth]);
     const rowProps = useMemo(() => ({
-      role: 'button',
-      key: "".concat(row.uid, "-expand-button"),
-      title: 'Toggle Row Expanded',
+      role: "button",
+      key: `${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 = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx(ArrowheadDown, {
+    const PureCaretIcon = useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /* @__PURE__ */ React2.createElement(ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-    }) : /*#__PURE__*/_jsx(ArrowheadRight, {
+    }) : /* @__PURE__ */ React2.createElement(ArrowheadRight, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
     }), [isExpanded, isDragging, isDragOverlay]);
-    const ChildIcon = useMemo(() => /*#__PURE__*/_jsx(ArrowShortReturn, {
+    const ChildIcon = useMemo(() => /* @__PURE__ */ React2.createElement(ArrowShortReturn, {
       size: "s",
       "data-testid": DATA_TESTID.DATA_TABLE_ICON_CHILD,
-      style: {
-        transform: 'rotate(90deg) scaleY(-1)'
-      },
-      color: ['brand-primary', '600']
+      style: { transform: "rotate(90deg) scaleY(-1)" },
+      color: ["brand-primary", "600"]
     }), []);
-    if (shouldPrintCaret) return /*#__PURE__*/_jsx(StyledFocusWithin, {
-      style: indentStyle
-    }, void 0, /*#__PURE__*/jsx(StyledSpan, _objectSpread(_objectSpread({}, rowProps), {}, {
-      children: PureCaretIcon
-    })));
-    if (row.depth !== 0) return /*#__PURE__*/_jsx("span", {
-      style: indentStyle
-    }, void 0, ChildIcon);
-    return /*#__PURE__*/_jsx("div", {
-      style: {
-        width: '36px'
-      }
+    if (shouldPrintCaret)
+      return /* @__PURE__ */ React2.createElement(StyledFocusWithin, {
+        style: indentStyle
+      }, /* @__PURE__ */ React2.createElement(StyledSpan, {
+        ...rowProps
+      }, PureCaretIcon));
+    if (row.depth !== 0)
+      return /* @__PURE__ */ React2.createElement("span", {
+        style: indentStyle
+      }, ChildIcon);
+    return /* @__PURE__ */ React2.createElement("div", {
+      style: { width: "36px" }
     });
   },
-  textWrap: 'wrap',
+  textWrap: "wrap",
   canResize: false,
   width: 25,
   padding: 0,
   isFocuseable: false,
   disableDnD: true
 };
-
-export { expandRowColumn };
+export {
+  expandRowColumn
+};
+//# sourceMappingURL=ColumnExpand.js.map

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnExpand/ColumnExpand.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable max-lines */\nimport React, { useMemo, useCallback } from 'react';\nimport { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';\nimport * as CSS from 'csstype';\nimport styled from 'styled-components';\nimport { TypescriptColumn } from '../../../types/props';\nimport { StyledFocusWithin } from '../../../styled';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nconst StyledSpan = styled.span`\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const expandRowColumn: TypescriptColumn = {\n  // Build our expander column\n  id: 'expander', // Make sure it has an ID\n  accessor: 'expandRowColumn',\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { expandedRows, onRowExpand },\n      allDataFlattened,\n    } = ctx;\n\n    const allExpandable = useMemo(() => {\n      const expandable = {};\n      allDataFlattened.forEach((row) => {\n        if (row.original.subRows || row.original.tableRowDetails || row.original.dimsumHeaderValue)\n          expandable[row.uid] = true;\n      });\n      return expandable;\n    }, [allDataFlattened]);\n\n    const isAllRowsExpanded = useMemo(\n      () => Object.keys(allExpandable).length === Object.keys(expandedRows).length,\n      [allExpandable, expandedRows],\n    );\n\n    const onExpandedAllHandler = useCallback(() => {\n      if (isAllRowsExpanded) onRowExpand({}, 'All');\n      else onRowExpand({ ...allExpandable }, 'All');\n    }, [allExpandable, isAllRowsExpanded, onRowExpand]);\n\n    const GlobalExpandIcon = useMemo(() => {\n      if (isAllRowsExpanded)\n        return (\n          <ArrowheadDown\n            size=\"s\"\n            color={['brand-primary', '600']}\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n          />\n        );\n\n      // Mixed\n      if (Object.keys(expandedRows).length) {\n        return (\n          <ArrowheadRight\n            size=\"s\"\n            color={['brand-primary', '600']}\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED}\n            style={{ transform: 'rotate(45deg)' }}\n          />\n        );\n      }\n      return (\n        <ArrowheadRight\n          size=\"s\"\n          color={['brand-primary', '600']}\n          data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n        />\n      );\n    }, [expandedRows, isAllRowsExpanded]);\n\n    return (\n      <StyledFocusWithin>\n        <StyledSpan\n          role=\"button\"\n          tabIndex={0}\n          title=\"Toggle All Rows Expanded\"\n          onClick={onExpandedAllHandler}\n          onKeyDown={(e) => {\n            if (['Enter', 'Space'].includes(e.code)) {\n              onExpandedAllHandler();\n              e.preventDefault();\n            }\n          }}\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL}\n          aria-expanded={isAllRowsExpanded}\n          style={{ width: '24px', height: '24px' }}\n        >\n          {GlobalExpandIcon}\n        </StyledSpan>\n      </StyledFocusWithin>\n    );\n  },\n  Cell: ({ cell, row, isRowSelected, ctx, draggableProps }) => {\n    const {\n      tableProps: { dragAndDropRows, expandedRows, onRowExpand },\n    } = ctx;\n\n    const uniqueId = row.uid;\n\n    const isExpanded = expandedRows[uniqueId];\n\n    const shouldPrintCaret =\n      (row.original.subRows?.length && row.depth === 0) || // only allows 1 level of expands\n      row.original.tableRowDetails ||\n      row.original.dimsumHeaderValue;\n\n    const onRowExpandHandler = useCallback(\n      (e) => {\n        e.stopPropagation();\n        if (expandedRows[uniqueId]) {\n          delete expandedRows[uniqueId];\n        } else {\n          expandedRows[uniqueId] = true;\n        }\n        onRowExpand({ ...expandedRows }, uniqueId);\n      },\n      [expandedRows, uniqueId, onRowExpand],\n    );\n\n    const isDragging = draggableProps ? draggableProps.isDragging : false;\n    const isDragOverlay = dragAndDropRows && !draggableProps;\n\n    const indentStyle: CSS.Properties = useMemo(\n      () => ({\n        marginLeft: `${row.depth * 32}px`,\n        marginRight: '18px',\n        paddingLeft: '2px',\n        paddingRight: '2px',\n        position: 'relative',\n        height: '100%',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n      [row.depth],\n    );\n\n    const rowProps = useMemo(\n      () => ({\n        role: 'button',\n        key: `${row.uid}-expand-button`,\n        title: 'Toggle Row Expanded',\n        onClick: onRowExpandHandler,\n        onKeyDown: (e) => {\n          if (['Enter', 'Space'].includes(e.code)) {\n            e.preventDefault();\n            onRowExpandHandler(e);\n          }\n        },\n        ref: cell.ref,\n        tabIndex: isRowSelected ? 0 : -1,\n        'data-testid': 'data-table-row-expand-cell',\n        'aria-expanded': isExpanded,\n        isRightArrow: !isExpanded || isDragging || isDragOverlay,\n      }),\n      [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay],\n    );\n\n    const PureCaretIcon = useMemo(\n      () =>\n        isExpanded && !isDragging && !isDragOverlay ? (\n          <ArrowheadDown\n            data-is-col-expanded={isExpanded}\n            data-role=\"row-expander-col\"\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN}\n          />\n        ) : (\n          <ArrowheadRight\n            data-is-col-expanded={isExpanded}\n            data-role=\"row-expander-col\"\n            size=\"s\"\n            data-testid={DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT}\n          />\n        ),\n      [isExpanded, isDragging, isDragOverlay],\n    );\n\n    const ChildIcon = useMemo(\n      () => (\n        <ArrowShortReturn\n          size=\"s\"\n          data-testid={DATA_TESTID.DATA_TABLE_ICON_CHILD}\n          style={{ transform: 'rotate(90deg) scaleY(-1)' }}\n          color={['brand-primary', '600']}\n        />\n      ),\n      [],\n    );\n\n    if (shouldPrintCaret)\n      return (\n        <StyledFocusWithin style={indentStyle}>\n          <StyledSpan {...rowProps}>{PureCaretIcon}</StyledSpan>\n        </StyledFocusWithin>\n      );\n    if (row.depth !== 0) return <span style={indentStyle}>{ChildIcon}</span>;\n\n    return <div style={{ width: '36px' }} />;\n  },\n  textWrap: 'wrap',\n  canResize: false,\n  width: 25,\n  padding: 0,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -1,141 +1,79 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import { useMemo, useCallback } from 'react';
-import { DSCheckbox } from '@elliemae/ds-form';
-import { DATA_TESTID } from '../../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'react-virtual';
-import '../../../configs/useRowFlattenization.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import '@elliemae/ds-icons';
-import 'styled-components';
-import '../../../styled.js';
-import 'react/jsx-runtime';
-import '../../../parts/TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../../../DataTableContext.js';
-import '../../../parts/Row.js';
-import '../../../parts/Footer.js';
-import '../../../parts/HoC/SortableItemContext.js';
-
-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; }
+import * as React from "react";
+import React2, { useMemo, useCallback } from "react";
+import { DSCheckbox } from "@elliemae/ds-form";
+import { DATA_TESTID } from "../../../configs/constants";
 const multiSelectColumn = {
-  // Build our multiSelecter column
-  id: 'multiSelecter',
-  // Make sure it has an ID
-  Header: _ref => {
-    let {
-      ctx
-    } = _ref;
+  id: "multiSelecter",
+  Header: ({ ctx }) => {
     const {
-      tableProps: {
-        onSelectionChange,
-        selection,
-        data,
-        disabledRows
-      },
+      tableProps: { onSelectionChange, selection, data, disabledRows },
       allDataFlattened
     } = ctx;
     const selectionKeyCount = Object.keys(selection).length;
-    const currentGlobalState = useMemo(() => selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0, [selectionKeyCount, data]);
+    const currentGlobalState = useMemo(() => selectionKeyCount > 0 && selectionKeyCount < data.length ? "mixed" : selectionKeyCount > 0, [selectionKeyCount, data]);
     const newGlobalStateAfterToggle = useMemo(() => {
-      // false -- toggles into --> true
-      // mixed  -- toggles into --> true
-      // true  -- toggles into --> false
       let newState = false;
-      if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;
+      if (currentGlobalState === false || currentGlobalState === "mixed")
+        newState = true;
       return newState;
     }, [currentGlobalState]);
     const newSelection = useMemo(() => {
       if (newGlobalStateAfterToggle) {
         const nextSelection = {};
-        allDataFlattened.forEach(datum => {
+        allDataFlattened.forEach((datum) => {
           nextSelection[datum.uid] = !disabledRows[datum.uid];
         });
         return nextSelection;
       }
-
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    const onChangeHandler = useCallback(e => {
-      onSelectionChange(newSelection, 'All', e);
+    const onChangeHandler = useCallback((e) => {
+      onSelectionChange(newSelection, "All", e);
     }, [newSelection, onSelectionChange]);
-    const PureHeaderCheckbox = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
+    const PureHeaderCheckbox = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
       title: "Toggle All Rows Selected",
       checked: currentGlobalState,
       onChange: onChangeHandler,
       tabIndex: "0",
-      style: {
-        cursor: 'pointer'
-      }
+      style: { cursor: "pointer" }
     }), [currentGlobalState, onChangeHandler]);
     return PureHeaderCheckbox;
   },
-  Cell: _ref2 => {
-    let {
-      cell,
-      row,
-      isRowSelected,
-      ctx
-    } = _ref2;
+  Cell: ({ cell, row, isRowSelected, ctx }) => {
     const {
-      tableProps: {
-        onSelectionChange,
-        selection,
-        disabledRows
-      }
+      tableProps: { onSelectionChange, selection, disabledRows }
     } = ctx;
-    const {
-      uid
-    } = row;
-    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    const PureCheckboxCell = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
+    const { uid } = row;
+    const selectedState = selection?.[uid];
+    const PureCheckboxCell = useMemo(() => /* @__PURE__ */ React2.createElement(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_CHECKBOX,
       title: "Toggle Row Selected",
       "aria-checked": selectedState,
       "aria-disabled": false,
       checked: selectedState,
-      onChange: e => {
+      onChange: (e) => {
         const newState = !selectedState;
-
-        const newSelection = _objectSpread(_objectSpread({}, selection), {}, {
-          [uid]: newState
-        }); // we only want true and mixed values
-
-
-        if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
-
+        const newSelection = { ...selection, [uid]: newState };
+        if (!newState)
+          delete newSelection[uid];
         onSelectionChange(newSelection, uid, e);
       },
       disabled: disabledRows[row.uid],
       innerRef: cell.ref,
       tabIndex: isRowSelected ? 0 : -1,
-      style: {
-        cursor: 'pointer'
-      }
+      style: { cursor: "pointer" }
     }), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange]);
     return PureCheckboxCell;
   },
-  textWrap: 'wrap',
+  textWrap: "wrap",
   width: 32,
   padding: 7,
   canResize: false,
   isFocuseable: false,
   disableDnD: true
 };
-
-export { multiSelectColumn };
+export {
+  multiSelectColumn
+};
+//# sourceMappingURL=ColumnSelectMultiple.js.map

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useMemo, useCallback } from 'react';\nimport { DSCheckbox } from '@elliemae/ds-form';\nimport { TypescriptColumn } from '../../../types/props';\nimport { DATA_TESTID } from '../../../configs/constants';\n\nexport const multiSelectColumn: TypescriptColumn = {\n  // Build our multiSelecter column\n  id: 'multiSelecter', // Make sure it has an ID\n  Header: ({ ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, data, disabledRows },\n      allDataFlattened,\n    } = ctx;\n\n    const selectionKeyCount = Object.keys(selection).length;\n\n    const currentGlobalState = useMemo(\n      () => (selectionKeyCount > 0 && selectionKeyCount < data.length ? 'mixed' : selectionKeyCount > 0),\n      [selectionKeyCount, data],\n    );\n\n    const newGlobalStateAfterToggle = useMemo(() => {\n      // false -- toggles into --> true\n      // mixed  -- toggles into --> true\n      // true  -- toggles into --> false\n      let newState = false;\n      if (currentGlobalState === false || currentGlobalState === 'mixed') newState = true;\n      return newState;\n    }, [currentGlobalState]);\n\n    const newSelection = useMemo(() => {\n      if (newGlobalStateAfterToggle) {\n        const nextSelection = {};\n        allDataFlattened.forEach((datum) => {\n          nextSelection[datum.uid] = !disabledRows[datum.uid];\n        });\n        return nextSelection;\n      }\n      return {};\n    }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);\n\n    const onChangeHandler = useCallback(\n      (e) => {\n        onSelectionChange(newSelection, 'All', e);\n      },\n      [newSelection, onSelectionChange],\n    );\n\n    const PureHeaderCheckbox = useMemo(\n      () => (\n        <DSCheckbox\n          data-testid={DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX}\n          title=\"Toggle All Rows Selected\"\n          checked={currentGlobalState}\n          onChange={onChangeHandler}\n          tabIndex=\"0\"\n          style={{ cursor: 'pointer' }}\n        />\n      ),\n      [currentGlobalState, onChangeHandler],\n    );\n    return PureHeaderCheckbox;\n  },\n  Cell: ({ cell, row, isRowSelected, ctx }) => {\n    const {\n      tableProps: { onSelectionChange, selection, disabledRows },\n    } = ctx;\n    const { uid } = row;\n    const selectedState = selection?.[uid];\n    const PureCheckboxCell = useMemo(\n      () => (\n        <DSCheckbox\n          data-testid={DATA_TESTID.DATA_TABLE_CHECKBOX}\n          title=\"Toggle Row Selected\"\n          aria-checked={selectedState}\n          aria-disabled={false}\n          checked={selectedState}\n          onChange={(e) => {\n            const newState = !selectedState;\n            const newSelection = { ...selection, [uid]: newState }; // we only want true and mixed values\n            if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection\n            onSelectionChange(newSelection, uid, e);\n          }}\n          disabled={disabledRows[row.uid]}\n          innerRef={cell.ref}\n          tabIndex={isRowSelected ? 0 : -1}\n          style={{ cursor: 'pointer' }}\n        />\n      ),\n      [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, selection, uid, onSelectionChange],\n    );\n    return PureCheckboxCell;\n  },\n  textWrap: 'wrap',\n  width: 32,\n  padding: 7,\n  canResize: false,\n  isFocuseable: false,\n  disableDnD: true,\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA;AAEO,MAAM,oBAAsC;AAAA,EAEjD,IAAI;AAAA,EACJ,QAAQ,CAAC,EAAE,UAAU;AACnB,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW,MAAM;AAAA,MAClD;AAAA,QACE;AAEJ,UAAM,oBAAoB,OAAO,KAAK,WAAW;AAEjD,UAAM,qBAAqB,QACzB,MAAO,oBAAoB,KAAK,oBAAoB,KAAK,SAAS,UAAU,oBAAoB,GAChG,CAAC,mBAAmB;AAGtB,UAAM,4BAA4B,QAAQ,MAAM;AAI9C,UAAI,WAAW;AACf,UAAI,uBAAuB,SAAS,uBAAuB;AAAS,mBAAW;AAC/E,aAAO;AAAA,OACN,CAAC;AAEJ,UAAM,eAAe,QAAQ,MAAM;AACjC,UAAI,2BAA2B;AAC7B,cAAM,gBAAgB;AACtB,yBAAiB,QAAQ,CAAC,UAAU;AAClC,wBAAc,MAAM,OAAO,CAAC,aAAa,MAAM;AAAA;AAEjD,eAAO;AAAA;AAET,aAAO;AAAA,OACN,CAAC,2BAA2B,kBAAkB;AAEjD,UAAM,kBAAkB,YACtB,CAAC,MAAM;AACL,wBAAkB,cAAc,OAAO;AAAA,OAEzC,CAAC,cAAc;AAGjB,UAAM,qBAAqB,QACzB,MACE,qCAAC,YAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAU;AAAA,MACV,UAAS;AAAA,MACT,OAAO,EAAE,QAAQ;AAAA,QAGrB,CAAC,oBAAoB;AAEvB,WAAO;AAAA;AAAA,EAET,MAAM,CAAC,EAAE,MAAM,KAAK,eAAe,UAAU;AAC3C,UAAM;AAAA,MACJ,YAAY,EAAE,mBAAmB,WAAW;AAAA,QAC1C;AACJ,UAAM,EAAE,QAAQ;AAChB,UAAM,gBAAgB,YAAY;AAClC,UAAM,mBAAmB,QACvB,MACE,qCAAC,YAAD;AAAA,MACE,eAAa,YAAY;AAAA,MACzB,OAAM;AAAA,MACN,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,SAAS;AAAA,MACT,UAAU,CAAC,MAAM;AACf,cAAM,WAAW,CAAC;AAClB,cAAM,eAAe,KAAK,YAAY,MAAM;AAC5C,YAAI,CAAC;AAAU,iBAAO,aAAa;AACnC,0BAAkB,cAAc,KAAK;AAAA;AAAA,MAEvC,UAAU,aAAa,IAAI;AAAA,MAC3B,UAAU,KAAK;AAAA,MACf,UAAU,gBAAgB,IAAI;AAAA,MAC9B,OAAO,EAAE,QAAQ;AAAA,QAGrB,CAAC,eAAe,cAAc,IAAI,KAAK,KAAK,KAAK,eAAe,WAAW,KAAK;AAElF,WAAO;AAAA;AAAA,EAET,UAAU;AAAA,EACV,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA;",
+  "names": []
+}

package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -1,78 +1,37 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useMemo } from 'react';
-import { DSRadio } from '@elliemae/ds-form';
-import styled from 'styled-components';
-import { DATA_TESTID } from '../../../configs/constants.js';
-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/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'react-virtual';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import '../../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import '@elliemae/ds-icons';
-import '../../../styled.js';
-import 'react/jsx-runtime';
-import '../../../parts/TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../../../DataTableContext.js';
-import '../../../parts/Row.js';
-import '../../../parts/Footer.js';
-import '../../../parts/HoC/SortableItemContext.js';
-
-var _div;
-const CenteredContent = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1u47u8g-0"
-})(["display:flex;height:100%;width:100%;justify-content:center;align-items:center;"]);
-const StyledDSRadio = /*#__PURE__*/styled(DSRadio).withConfig({
-  componentId: "sc-1u47u8g-1"
-})(["padding-bottom:0;cursor:pointer;"]);
+import * as React from "react";
+import React2, { useMemo } from "react";
+import { DSRadio } from "@elliemae/ds-form";
+import styled from "styled-components";
+import { DATA_TESTID } from "../../../configs/constants";
+const CenteredContent = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+`;
+const StyledDSRadio = styled(DSRadio)`
+  padding-bottom: 0;
+  cursor: pointer;
+`;
 const singleSelectColumn = {
-  // Build our singleSelecter column
-  id: 'singleSelecter',
-  // Make sure it has an ID
-  // The header doesn't need anything for single selection
-  Header: () => _div || (_div = /*#__PURE__*/_jsx("div", {})),
-  Cell: _ref => {
-    let {
-      cell,
-      row,
-      isRowSelected,
-      ctx
-    } = _ref;
+  id: "singleSelecter",
+  Header: () => /* @__PURE__ */ React2.createElement("div", null),
+  Cell: ({ cell, row, isRowSelected, ctx }) => {
     const {
-      tableProps: {
-        onSelectionChange,
-        selection,
-        disabledRows
-      }
+      tableProps: { onSelectionChange, selection, disabledRows }
     } = ctx;
-    const {
-      uid
-    } = row;
-    const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    const PureCheckBox = useMemo(() => /*#__PURE__*/_jsx(CenteredContent, {}, void 0, /*#__PURE__*/_jsx(StyledDSRadio // eslint-disable-next-line react/prop-types
-    , {
+    const { uid } = row;
+    const selectedState = selection?.[uid];
+    const PureCheckBox = useMemo(() => /* @__PURE__ */ React2.createElement(CenteredContent, null, /* @__PURE__ */ React2.createElement(StyledDSRadio, {
       containerProps: {
-        'aria-checked': selectedState,
-        'aria-disabled': false,
-        title: 'Toggle Row Selected'
+        "aria-checked": selectedState,
+        "aria-disabled": false,
+        title: "Toggle Row Selected"
       },
       checked: selectedState,
       onChange: () => {
-        // in single select we only allow one item to be selected
-        onSelectionChange(!selectedState ? {
-          [uid]: !selectedState
-        } : {});
+        onSelectionChange(!selectedState ? { [uid]: !selectedState } : {});
       },
       "data-testid": DATA_TESTID.DATA_TABLE_RADIO,
       disabled: disabledRows[row.uid],
@@ -82,12 +41,14 @@ const singleSelectColumn = {
     })), [selectedState, disabledRows, row.uid, cell.ref, isRowSelected, onSelectionChange, uid]);
     return PureCheckBox;
   },
-  textWrap: 'wrap',
+  textWrap: "wrap",
   width: 32,
   padding: 4,
   canResize: false,
   isFocuseable: false,
   disableDnD: true
 };
-
-export { singleSelectColumn };
+export {
+  singleSelectColumn
+};
+//# sourceMappingURL=ColumnSelectSingle.js.map