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

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

@@ -1,47 +1,17 @@
-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 _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, createElement } from 'react';
-import DataTableContext from '../../DataTableContext.js';
-import { StyledFullsizeGrid } from '../../styled.js';
-import { DefaultRowContentRenderer } from './DefaultRowContentRenderer.js';
-import { useRowRendererHandlers } from './useRowRendererHandlers.js';
-import { useRowRendererProperties } from './useRowRendererProperties.js';
-import DropIndicator from '../../parts/DropIndicator.js';
-import { SortableItemContext } from '../../parts/HoC/SortableItemContext.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-icons';
-import 'styled-components';
-import { jsxs, jsx } from 'react/jsx-runtime';
-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 '../../parts/Row.js';
-import '../../parts/Footer.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; }
-
-// CSS don't let us modify the spacing between the dots, so one solution is to use SVG
-const magicDottedBorder = /*#__PURE__*/_jsx("svg", {
+import * as React from "react";
+import React2, { useContext } from "react";
+import { DataTableContext } from "../../DataTableContext";
+import { StyledFullsizeGrid } from "../../styled";
+import { DefaultRowContentRenderer } from "./DefaultRowContentRenderer";
+import { useRowRendererHandlers } from "./useRowRendererHandlers";
+import { useRowRendererProperties } from "./useRowRendererProperties";
+import { DropIndicator } from "../../parts/DropIndicator";
+import { SortableItemContext } from "../../parts/HoC/SortableItemContext";
+import { DATA_TESTID } from "../../configs/constants";
+const magicDottedBorder = /* @__PURE__ */ React2.createElement("svg", {
   width: "100%",
   height: "1px"
-}, void 0, /*#__PURE__*/_jsx("line", {
+}, /* @__PURE__ */ React2.createElement("line", {
   x1: "0",
   y1: "0",
   x2: "100%",
@@ -52,13 +22,12 @@ const magicDottedBorder = /*#__PURE__*/_jsx("svg", {
   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,
@@ -66,15 +35,8 @@ const RowRenderer = props => {
     isDragOverlay
   } = props;
   const ctx = useContext(DataTableContext);
-  const {
-    draggableProps
-  } = useContext(SortableItemContext);
-  const {
-    flattenedData
-  } = ctx; // ===========================================================================
-  // Properties for the row
-  // ===========================================================================
-
+  const { draggableProps } = useContext(SortableItemContext);
+  const { flattenedData } = ctx;
   const {
     userDataProperties,
     colsLayoutStyle,
@@ -84,16 +46,8 @@ const RowRenderer = props => {
     dropIndicatorPosition
   } = useRowRendererProperties({
     row
-  }); // ===========================================================================
-  // Handlers
-  // ===========================================================================
-
-  const {
-    handleItemClick,
-    handleKeyDown,
-    handleOnBlur,
-    handleOnFocus
-  } = useRowRendererHandlers({
+  });
+  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({
     row,
     itemIndex,
     items: flattenedData,
@@ -101,20 +55,20 @@ const RowRenderer = props => {
     isDragOverlay,
     selectedRowId
   });
-
-  const rowContentProps = _objectSpread(_objectSpread({}, props), {}, {
+  const rowContentProps = {
+    ...props,
     ctx,
     focusedRowId,
     selectedRowId,
     draggableProps,
     dropIndicatorPosition
-  });
-
-  return /*#__PURE__*/jsxs(StyledFullsizeGrid, _objectSpread(_objectSpread({
+  };
+  return /* @__PURE__ */ React2.createElement(StyledFullsizeGrid, {
     "data-testid": DATA_TESTID.DATA_TABLE_ROW,
-    colsLayoutStyle: colsLayoutStyle
-  }, userDataProperties), {}, {
-    totalColumnsWidth: totalColumnsWidth,
+    key: row.uid,
+    colsLayoutStyle,
+    ...userDataProperties,
+    totalColumnsWidth,
     style: rowStyle,
     onClick: handleItemClick,
     onKeyDown: handleKeyDown,
@@ -123,16 +77,22 @@ const RowRenderer = props => {
     "data-expandable": Boolean(row.original.tableRowDetails),
     "data-is-row-expanded": row.isExpanded,
     rows: rowsLayout,
-    minHeight: minHeight,
-    height: height,
-    children: [CustomRowContentRenderer ? /*#__PURE__*/jsx(CustomRowContentRenderer, _objectSpread({}, rowContentProps)) : /*#__PURE__*/createElement(DefaultRowContentRenderer, _objectSpread(_objectSpread({}, rowContentProps), {}, {
-      key: row.uid
-    })), shouldAppendDottedBorder && magicDottedBorder, /*#__PURE__*/_jsx(DropIndicator, {
-      vertical: false,
-      dropIndicatorPosition: dropIndicatorPosition,
-      isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
-    })]
-  }), row.uid);
+    minHeight,
+    height
+  }, CustomRowContentRenderer ? /* @__PURE__ */ React2.createElement(CustomRowContentRenderer, {
+    ...rowContentProps
+  }) : /* @__PURE__ */ React2.createElement(DefaultRowContentRenderer, {
+    ...rowContentProps,
+    key: row.uid
+  }), shouldAppendDottedBorder && magicDottedBorder, /* @__PURE__ */ React2.createElement(DropIndicator, {
+    vertical: false,
+    dropIndicatorPosition,
+    isLast: row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging
+  }));
+};
+var RowRenderer_default = RowRenderer;
+export {
+  RowRenderer,
+  RowRenderer_default as default
 };
-
-export { RowRenderer as default };
+//# sourceMappingURL=index.js.map

package/esm/exported-related/RowRenderer/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable react/prop-types */\nimport React, { useContext } from 'react';\nimport { DataTableContext } from '../../DataTableContext';\nimport { RowVariantProps } from '../../parts/RowVariants/types';\nimport { StyledFullsizeGrid } from '../../styled';\nimport { TypescriptRow } from '../../types/props';\nimport { DefaultRowContentRenderer } from './DefaultRowContentRenderer';\nimport { useRowRendererHandlers } from './useRowRendererHandlers';\nimport { useRowRendererProperties } from './useRowRendererProperties';\nimport { DropIndicator } from '../../parts/DropIndicator';\nimport { SortableItemContext } from '../../parts/HoC/SortableItemContext';\nimport { DATA_TESTID } from '../../configs/constants';\n\ninterface RowRendererProps {\n  row: TypescriptRow;\n  compact: boolean;\n  itemIndex: number;\n  isDragOverlay: boolean;\n  minHeight: string;\n  height: string;\n  rowsLayout?: (string | number)[];\n  colsLayout?: (string | number)[];\n  CustomRowContentRenderer?: React.ComponentType<RowVariantProps>;\n  focusedRowId: string;\n  selectedRowId: string;\n  backgroundColor?: string;\n}\n\n// CSS don't let us modify the spacing between the dots, so one solution is to use SVG\nconst magicDottedBorder = (\n  <svg width=\"100%\" height=\"1px\">\n    <line\n      x1=\"0\"\n      y1=\"0\"\n      x2=\"100%\"\n      y2=\"0\"\n      stroke=\"#B0B9C8FF\"\n      strokeWidth=\"1.5\"\n      strokeDasharray=\"0, 5\"\n      strokeDashoffset=\"0\"\n      strokeLinecap=\"round\"\n    />\n  </svg>\n);\n\nconst RowRenderer: React.ComponentType<RowRendererProps> = (props) => {\n  const {\n    row,\n    itemIndex,\n    minHeight = '36px',\n    height = 'auto',\n    rowsLayout = [1],\n    CustomRowContentRenderer,\n    focusedRowId,\n    selectedRowId,\n    isDragOverlay,\n  } = props;\n\n  const ctx = useContext(DataTableContext);\n  const { draggableProps } = useContext(SortableItemContext);\n  const { flattenedData } = ctx;\n\n  // ===========================================================================\n  // Properties for the row\n  // ===========================================================================\n\n  const {\n    userDataProperties,\n    colsLayoutStyle,\n    totalColumnsWidth,\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n  } = useRowRendererProperties({\n    row,\n  });\n\n  // ===========================================================================\n  // Handlers\n  // ===========================================================================\n\n  const { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus } = useRowRendererHandlers({\n    row,\n    itemIndex,\n    items: flattenedData,\n    draggableProps,\n    isDragOverlay,\n    selectedRowId,\n  });\n\n  const rowContentProps: RowVariantProps = {\n    ...props,\n    ctx,\n    focusedRowId,\n    selectedRowId,\n    draggableProps,\n    dropIndicatorPosition,\n  };\n\n  return (\n    <StyledFullsizeGrid\n      data-testid={DATA_TESTID.DATA_TABLE_ROW}\n      key={row.uid}\n      colsLayoutStyle={colsLayoutStyle}\n      {...userDataProperties}\n      totalColumnsWidth={totalColumnsWidth}\n      style={rowStyle}\n      onClick={handleItemClick}\n      onKeyDown={handleKeyDown}\n      onBlur={handleOnBlur}\n      onFocus={handleOnFocus}\n      data-expandable={Boolean(row.original.tableRowDetails)}\n      data-is-row-expanded={row.isExpanded}\n      rows={rowsLayout}\n      minHeight={minHeight}\n      height={height}\n    >\n      {CustomRowContentRenderer ? (\n        <CustomRowContentRenderer {...rowContentProps} />\n      ) : (\n        <DefaultRowContentRenderer {...rowContentProps} key={row.uid} />\n      )}\n      {shouldAppendDottedBorder && magicDottedBorder}\n      <DropIndicator\n        vertical={false}\n        dropIndicatorPosition={dropIndicatorPosition}\n        isLast={row.index === flattenedData.length - 1 && draggableProps && draggableProps.isDragging}\n      />\n    </StyledFullsizeGrid>\n  );\n};\n\nexport { RowRenderer };\nexport default RowRenderer;\n"],
+  "mappings": "AAAA;ACEA;AACA;AAEA;AAEA;AACA;AACA;AACA;AACA;AACA;AAkBA,MAAM,oBACJ,qCAAC,OAAD;AAAA,EAAK,OAAM;AAAA,EAAO,QAAO;AAAA,GACvB,qCAAC,QAAD;AAAA,EACE,IAAG;AAAA,EACH,IAAG;AAAA,EACH,IAAG;AAAA,EACH,IAAG;AAAA,EACH,QAAO;AAAA,EACP,aAAY;AAAA,EACZ,iBAAgB;AAAA,EAChB,kBAAiB;AAAA,EACjB,eAAc;AAAA;AAKpB,MAAM,cAAqD,CAAC,UAAU;AACpE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,aAAa,CAAC;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE;AAEJ,QAAM,MAAM,WAAW;AACvB,QAAM,EAAE,mBAAmB,WAAW;AACtC,QAAM,EAAE,kBAAkB;AAM1B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,MACE,yBAAyB;AAAA,IAC3B;AAAA;AAOF,QAAM,EAAE,iBAAiB,eAAe,cAAc,kBAAkB,uBAAuB;AAAA,IAC7F;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA;AAGF,QAAM,kBAAmC;AAAA,OACpC;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGF,SACE,qCAAC,oBAAD;AAAA,IACE,eAAa,YAAY;AAAA,IACzB,KAAK,IAAI;AAAA,IACT;AAAA,OACI;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,IACP,SAAS;AAAA,IACT,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,mBAAiB,QAAQ,IAAI,SAAS;AAAA,IACtC,wBAAsB,IAAI;AAAA,IAC1B,MAAM;AAAA,IACN;AAAA,IACA;AAAA,KAEC,2BACC,qCAAC,0BAAD;AAAA,OAA8B;AAAA,OAE9B,qCAAC,2BAAD;AAAA,OAA+B;AAAA,IAAiB,KAAK,IAAI;AAAA,MAE1D,4BAA4B,mBAC7B,qCAAC,eAAD;AAAA,IACE,UAAU;AAAA,IACV;AAAA,IACA,QAAQ,IAAI,UAAU,cAAc,SAAS,KAAK,kBAAkB,eAAe;AAAA;AAAA;AAO3F,IAAO,sBAAQ;",
+  "names": []
+}

package/esm/exported-related/RowRenderer/useRowRendererHandlers.js

@@ -1,130 +1,76 @@
-import 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.find.js';
-import { useContext, useCallback } from 'react';
-import { DATA_TESTID } from '../../configs/constants.js';
-import 'core-js/modules/esnext.async-iterator.filter.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 '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons';
-import 'styled-components';
-import '../../styled.js';
-import 'react/jsx-runtime';
-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 from '../../DataTableContext.js';
-import '../../parts/Row.js';
-import '../../parts/Footer.js';
-import '../../parts/HoC/SortableItemContext.js';
-import '../../redux/reducers/index.js';
-import { useDispatchRowsActions } from '../../redux/reducers/rowsReducers/useDispatchRowsActions.js';
-
-const useRowRendererHandlers = _ref => {
-  let {
-    row,
-    itemIndex,
-    items,
-    draggableProps,
-    isDragOverlay,
-    selectedRowId
-  } = _ref;
+import * as React from "react";
+import { useCallback, useContext } from "react";
+import { DATA_TESTID } from "../../configs/constants";
+import { DataTableContext } from "../../DataTableContext";
+import { useDispatchRowsActions } from "../../redux/reducers";
+const useRowRendererHandlers = ({
+  row,
+  itemIndex,
+  items,
+  draggableProps,
+  isDragOverlay,
+  selectedRowId
+}) => {
   const {
-    tableProps: {
-      onRowClick,
-      onRowFocus
-    },
-    virtualListHelpers: {
-      scrollToIndex
-    }
+    tableProps: { onRowClick, onRowFocus },
+    virtualListHelpers: { scrollToIndex }
   } = useContext(DataTableContext);
-  const {
-    setSelectedRowId,
-    setFocusedRowId
-  } = useDispatchRowsActions();
-  const handleItemClick = useCallback(function (e) {
-    let {
-      original,
-      uid
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : row;
-    // setSelectedRowId(null);
+  const { setSelectedRowId, setFocusedRowId } = useDispatchRowsActions();
+  const handleItemClick = useCallback((e, { original, uid } = row) => {
     onRowClick(original, e, uid);
     onRowFocus({
       itemIndex,
-      scrollToItem: function () {
-        let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {
-          align: 'start'
-        };
-        return scrollToIndex(itemIndex, opts);
-      },
+      scrollToItem: (opts = {
+        align: "start"
+      }) => scrollToIndex(itemIndex, opts),
       original
     }, e);
   }, [row, onRowClick, onRowFocus, itemIndex, scrollToIndex]);
   const isActive = draggableProps && draggableProps.active;
-  const handleKeyDown = useCallback(e => {
+  const handleKeyDown = useCallback((e) => {
     if (isDragOverlay || isActive) {
       e.preventDefault();
       return;
     }
-
-    if (e.code === 'Enter') {
+    if (e.code === "Enter") {
       e.preventDefault();
-
       if (selectedRowId !== row.uid) {
         setSelectedRowId(row.uid);
         setTimeout(() => {
-          const focuseableCell = row.cells.find(cell => cell.ref.current !== null);
-          if (focuseableCell) focuseableCell.ref.current.focus();
+          const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);
+          if (focuseableCell)
+            focuseableCell.ref.current.focus();
         });
       }
     }
-
-    if (e.code === 'Space') {
+    if (e.code === "Space") {
       e.preventDefault();
       handleItemClick(e, row);
     }
-
-    if (e.code === 'ArrowDown') {
+    if (e.code === "ArrowDown") {
       e.preventDefault();
-      if (itemIndex + 1 < items.length) setFocusedRowId(items[itemIndex + 1].uid);
+      if (itemIndex + 1 < items.length)
+        setFocusedRowId(items[itemIndex + 1].uid);
     }
-
-    if (e.code === 'ArrowUp') {
+    if (e.code === "ArrowUp") {
       e.preventDefault();
-      if (itemIndex - 1 >= 0) setFocusedRowId(items[itemIndex - 1].uid);
+      if (itemIndex - 1 >= 0)
+        setFocusedRowId(items[itemIndex - 1].uid);
     }
   }, [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, itemIndex, items, setFocusedRowId]);
-  const handleOnBlur = useCallback(e => {
-    var _e$relatedTarget;
-
-    if (((_e$relatedTarget = e.relatedTarget) === null || _e$relatedTarget === void 0 ? void 0 : _e$relatedTarget.getAttribute('data-testid')) === 'data-table-row-content') {
+  const handleOnBlur = useCallback((e) => {
+    if (e.relatedTarget?.getAttribute("data-testid") === "data-table-row-content") {
       setSelectedRowId(null);
     }
   }, [setSelectedRowId]);
-  const handleOnFocus = useCallback(e => {
-    if (e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
+  const handleOnFocus = useCallback((e) => {
+    if (e.target && e.target.getAttribute("data-testid") === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {
       setFocusedRowId(row.uid);
     }
   }, [row.uid, setFocusedRowId]);
-  return {
-    handleItemClick,
-    handleKeyDown,
-    handleOnBlur,
-    handleOnFocus
-  };
+  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };
+};
+export {
+  useRowRendererHandlers
 };
-
-export { useRowRendererHandlers };
+//# sourceMappingURL=useRowRendererHandlers.js.map

package/esm/exported-related/RowRenderer/useRowRendererHandlers.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererHandlers.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortableItemContextType } from '../../parts/HoC/SortableItemContext';\nimport { useDispatchRowsActions } from '../../redux/reducers';\nimport { TypescriptRow } from '../../types/props';\n\nexport const useRowRendererHandlers = ({\n  row,\n  itemIndex,\n  items,\n  draggableProps,\n  isDragOverlay,\n  selectedRowId,\n}: {\n  row: TypescriptRow;\n  itemIndex: number;\n  items: TypescriptRow[];\n  draggableProps: SortableItemContextType['draggableProps'];\n  isDragOverlay: boolean;\n  selectedRowId: string;\n}): {\n  handleItemClick: React.MouseEventHandler;\n  handleKeyDown: React.KeyboardEventHandler;\n  handleOnBlur: React.FocusEventHandler;\n  handleOnFocus: React.FocusEventHandler;\n} => {\n  const {\n    tableProps: { onRowClick, onRowFocus },\n    virtualListHelpers: { scrollToIndex },\n  } = useContext(DataTableContext);\n\n  const { setSelectedRowId, setFocusedRowId } = useDispatchRowsActions();\n\n  const handleItemClick = useCallback(\n    (e, { original, uid } = row) => {\n      // setSelectedRowId(null);\n      onRowClick(original, e, uid);\n      onRowFocus(\n        {\n          itemIndex,\n          scrollToItem: (\n            opts: { align: 'auto' | 'start' | 'center' | 'end' } = {\n              align: 'start',\n            },\n          ) => scrollToIndex(itemIndex, opts),\n          original,\n        },\n        e,\n      );\n    },\n    [row, onRowClick, onRowFocus, itemIndex, scrollToIndex],\n  );\n\n  const isActive = draggableProps && draggableProps.active;\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (isDragOverlay || isActive) {\n        e.preventDefault();\n        return;\n      }\n      if (e.code === 'Enter') {\n        e.preventDefault();\n        if (selectedRowId !== row.uid) {\n          setSelectedRowId(row.uid);\n          setTimeout(() => {\n            const focuseableCell = row.cells.find((cell) => cell.ref.current !== null);\n            if (focuseableCell) focuseableCell.ref.current.focus();\n          });\n        }\n      }\n      if (e.code === 'Space') {\n        e.preventDefault();\n        handleItemClick(e, row);\n      }\n      if (e.code === 'ArrowDown') {\n        e.preventDefault();\n        if (itemIndex + 1 < items.length) setFocusedRowId(items[itemIndex + 1].uid);\n      }\n      if (e.code === 'ArrowUp') {\n        e.preventDefault();\n        if (itemIndex - 1 >= 0) setFocusedRowId(items[itemIndex - 1].uid);\n      }\n    },\n    [isDragOverlay, isActive, selectedRowId, row, setSelectedRowId, handleItemClick, itemIndex, items, setFocusedRowId],\n  );\n\n  const handleOnBlur = useCallback(\n    (e) => {\n      if (e.relatedTarget?.getAttribute('data-testid') === 'data-table-row-content') {\n        setSelectedRowId(null);\n      }\n    },\n    [setSelectedRowId],\n  );\n\n  const handleOnFocus: React.FocusEventHandler = useCallback(\n    (e) => {\n      if (e.target && e.target.getAttribute('data-testid') === DATA_TESTID.DATA_TABLE_ROW_CONTENT) {\n        setFocusedRowId(row.uid);\n      }\n    },\n    [row.uid, setFocusedRowId],\n  );\n\n  return { handleItemClick, handleKeyDown, handleOnBlur, handleOnFocus };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA;AAGO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MAaG;AACH,QAAM;AAAA,IACJ,YAAY,EAAE,YAAY;AAAA,IAC1B,oBAAoB,EAAE;AAAA,MACpB,WAAW;AAEf,QAAM,EAAE,kBAAkB,oBAAoB;AAE9C,QAAM,kBAAkB,YACtB,CAAC,GAAG,EAAE,UAAU,QAAQ,QAAQ;AAE9B,eAAW,UAAU,GAAG;AACxB,eACE;AAAA,MACE;AAAA,MACA,cAAc,CACZ,OAAuD;AAAA,QACrD,OAAO;AAAA,YAEN,cAAc,WAAW;AAAA,MAC9B;AAAA,OAEF;AAAA,KAGJ,CAAC,KAAK,YAAY,YAAY,WAAW;AAG3C,QAAM,WAAW,kBAAkB,eAAe;AAElD,QAAM,gBAAgB,YACpB,CAAC,MAA2B;AAC1B,QAAI,iBAAiB,UAAU;AAC7B,QAAE;AACF;AAAA;AAEF,QAAI,EAAE,SAAS,SAAS;AACtB,QAAE;AACF,UAAI,kBAAkB,IAAI,KAAK;AAC7B,yBAAiB,IAAI;AACrB,mBAAW,MAAM;AACf,gBAAM,iBAAiB,IAAI,MAAM,KAAK,CAAC,SAAS,KAAK,IAAI,YAAY;AACrE,cAAI;AAAgB,2BAAe,IAAI,QAAQ;AAAA;AAAA;AAAA;AAIrD,QAAI,EAAE,SAAS,SAAS;AACtB,QAAE;AACF,sBAAgB,GAAG;AAAA;AAErB,QAAI,EAAE,SAAS,aAAa;AAC1B,QAAE;AACF,UAAI,YAAY,IAAI,MAAM;AAAQ,wBAAgB,MAAM,YAAY,GAAG;AAAA;AAEzE,QAAI,EAAE,SAAS,WAAW;AACxB,QAAE;AACF,UAAI,YAAY,KAAK;AAAG,wBAAgB,MAAM,YAAY,GAAG;AAAA;AAAA,KAGjE,CAAC,eAAe,UAAU,eAAe,KAAK,kBAAkB,iBAAiB,WAAW,OAAO;AAGrG,QAAM,eAAe,YACnB,CAAC,MAAM;AACL,QAAI,EAAE,eAAe,aAAa,mBAAmB,0BAA0B;AAC7E,uBAAiB;AAAA;AAAA,KAGrB,CAAC;AAGH,QAAM,gBAAyC,YAC7C,CAAC,MAAM;AACL,QAAI,EAAE,UAAU,EAAE,OAAO,aAAa,mBAAmB,YAAY,wBAAwB;AAC3F,sBAAgB,IAAI;AAAA;AAAA,KAGxB,CAAC,IAAI,KAAK;AAGZ,SAAO,EAAE,iBAAiB,eAAe,cAAc;AAAA;",
+  "names": []
+}

package/esm/exported-related/RowRenderer/useRowRendererProperties.js

@@ -1,40 +1,28 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.reduce.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.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useContext, useMemo } from 'react';
-import DataTableContext from '../../DataTableContext.js';
-import { useRowStyle } from './useRowStyle.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; }
-const useRowRendererProperties = _ref => {
-  let {
-    row
-  } = _ref;
+import * as React from "react";
+import { useContext, useMemo } from "react";
+import { DataTableContext } from "../../DataTableContext";
+import { useRowStyle } from "./useRowStyle";
+const useRowRendererProperties = ({
+  row
+}) => {
   const {
-    tableProps: {
-      colsLayoutStyle
-    },
-    layoutHelpers: {
-      totalColumnsWidth
-    }
+    tableProps: { colsLayoutStyle },
+    layoutHelpers: { totalColumnsWidth }
   } = useContext(DataTableContext);
   const userDataProperties = useMemo(() => Object.keys(row.original).reduce((acc, cur) => {
-    if (cur.startsWith('data-')) acc[cur] = row.original[cur];
+    if (cur.startsWith("data-"))
+      acc[cur] = row.original[cur];
     return acc;
   }, {}), [row]);
   const styleRelatedProps = useRowStyle(row);
-  return _objectSpread({
+  return {
     userDataProperties,
     colsLayoutStyle,
-    totalColumnsWidth
-  }, styleRelatedProps);
+    totalColumnsWidth,
+    ...styleRelatedProps
+  };
 };
-
-export { useRowRendererProperties };
+export {
+  useRowRendererProperties
+};
+//# sourceMappingURL=useRowRendererProperties.js.map

package/esm/exported-related/RowRenderer/useRowRendererProperties.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowRendererProperties.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport { ColsLayoutStyle } from '../../configs/constants';\nimport { DataTableContext } from '../../DataTableContext';\nimport { TypescriptRow } from '../../types/props';\nimport { useRowStyle } from './useRowStyle';\n\nexport const useRowRendererProperties = ({\n  row,\n}: {\n  row: TypescriptRow;\n}): {\n  userDataProperties: Record<string, unknown>;\n  colsLayoutStyle: ColsLayoutStyle;\n  totalColumnsWidth: string | number;\n} & ReturnType<typeof useRowStyle> => {\n  const {\n    tableProps: { colsLayoutStyle },\n    layoutHelpers: { totalColumnsWidth },\n  } = useContext(DataTableContext);\n\n  const userDataProperties = useMemo(\n    () =>\n      Object.keys(row.original).reduce((acc, cur) => {\n        if (cur.startsWith('data-')) acc[cur] = row.original[cur];\n        return acc;\n      }, {}),\n    [row],\n  );\n\n  const styleRelatedProps = useRowStyle(row);\n\n  return {\n    userDataProperties,\n    colsLayoutStyle,\n    totalColumnsWidth,\n    ...styleRelatedProps,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AAEA;AAEA;AAEO,MAAM,2BAA2B,CAAC;AAAA,EACvC;AAAA,MAOoC;AACpC,QAAM;AAAA,IACJ,YAAY,EAAE;AAAA,IACd,eAAe,EAAE;AAAA,MACf,WAAW;AAEf,QAAM,qBAAqB,QACzB,MACE,OAAO,KAAK,IAAI,UAAU,OAAO,CAAC,KAAK,QAAQ;AAC7C,QAAI,IAAI,WAAW;AAAU,UAAI,OAAO,IAAI,SAAS;AACrD,WAAO;AAAA,KACN,KACL,CAAC;AAGH,QAAM,oBAAoB,YAAY;AAEtC,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA;AAAA;",
+  "names": []
+}

package/esm/exported-related/RowRenderer/useRowStyle.js

@@ -1,41 +1,26 @@
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useContext, useMemo } from 'react';
-import DataTableContext from '../../DataTableContext.js';
-import { SortableItemContext } from '../../parts/HoC/SortableItemContext.js';
-
-const useRowStyle = row => {
-  const {
-    flattenedData
-  } = useContext(DataTableContext);
-  const {
-    draggableProps
-  } = useContext(SortableItemContext); // ---------------------------------------------------------------------------
-  // Border calculation
-  // ---------------------------------------------------------------------------
-
+import * as React from "react";
+import { useContext, useMemo } from "react";
+import DataTableContext from "../../DataTableContext";
+import { SortableItemContext } from "../../parts/HoC/SortableItemContext";
+const useRowStyle = (row) => {
+  const { flattenedData } = useContext(DataTableContext);
+  const { draggableProps } = useContext(SortableItemContext);
   const [borderTop, borderBottom, shouldAppendDottedBorder] = useMemo(() => {
     if (row.original.dimsumHeaderValue) {
-      return ['none', 'none', false];
+      return ["none", "none", false];
     }
-
     if (row.isExpanded && row.original.subRows && row.depth === 0) {
-      return ['1px solid #EBEDF0', 'none', true];
+      return ["1px solid #EBEDF0", "none", true];
     }
-
     if (row.depth >= 1) {
       if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {
-        return ['none', '2px solid #EBEDF0', false];
+        return ["none", "2px solid #EBEDF0", false];
       }
-
-      return ['none', 'none', true];
+      return ["none", "none", true];
     }
-
-    return ['none', '1px solid #EBEDF0', false];
+    return ["none", "1px solid #EBEDF0", false];
   }, [row, flattenedData]);
-  const rowStyle = useMemo(() => ({
-    borderTop,
-    borderBottom
-  }), [borderTop, borderBottom]);
+  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);
   const dropIndicatorPosition = draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;
   return {
     rowStyle,
@@ -43,5 +28,7 @@ const useRowStyle = row => {
     dropIndicatorPosition
   };
 };
-
-export { useRowStyle };
+export {
+  useRowStyle
+};
+//# sourceMappingURL=useRowStyle.js.map

package/esm/exported-related/RowRenderer/useRowStyle.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/RowRenderer/useRowStyle.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useContext, useMemo } from 'react';\nimport DataTableContext from '../../DataTableContext';\nimport { SortableItemContext, DropIndicatorPosition } from '../../parts/HoC/SortableItemContext';\nimport { TypescriptRow } from '../../types/props';\n\nexport const useRowStyle = (\n  row: TypescriptRow,\n): {\n  rowStyle: Record<string, unknown>;\n  shouldAppendDottedBorder: boolean;\n  dropIndicatorPosition: DropIndicatorPosition;\n} => {\n  const { flattenedData } = useContext(DataTableContext);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  // ---------------------------------------------------------------------------\n  // Border calculation\n  // ---------------------------------------------------------------------------\n  const [borderTop, borderBottom, shouldAppendDottedBorder]: [string, string, boolean] = useMemo(() => {\n    if (row.original.dimsumHeaderValue) {\n      return ['none', 'none', false];\n    }\n    if (row.isExpanded && row.original.subRows && row.depth === 0) {\n      return ['1px solid #EBEDF0', 'none', true];\n    }\n\n    if (row.depth >= 1) {\n      if (row.realIndex < flattenedData.length - 1 && flattenedData[row.realIndex + 1].depth === 0) {\n        return ['none', '2px solid #EBEDF0', false];\n      }\n      return ['none', 'none', true];\n    }\n\n    return ['none', '1px solid #EBEDF0', false];\n  }, [row, flattenedData]);\n\n  const rowStyle = useMemo(() => ({ borderTop, borderBottom }), [borderTop, borderBottom]);\n\n  const dropIndicatorPosition =\n    draggableProps && draggableProps.shouldShowDropIndicatorPosition && draggableProps.dropIndicatorPosition;\n\n  return {\n    rowStyle,\n    shouldAppendDottedBorder,\n    dropIndicatorPosition,\n  };\n};\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAGO,MAAM,cAAc,CACzB,QAKG;AACH,QAAM,EAAE,kBAAkB,WAAW;AAErC,QAAM,EAAE,mBAAmB,WAAW;AAKtC,QAAM,CAAC,WAAW,cAAc,4BAAuD,QAAQ,MAAM;AACnG,QAAI,IAAI,SAAS,mBAAmB;AAClC,aAAO,CAAC,QAAQ,QAAQ;AAAA;AAE1B,QAAI,IAAI,cAAc,IAAI,SAAS,WAAW,IAAI,UAAU,GAAG;AAC7D,aAAO,CAAC,qBAAqB,QAAQ;AAAA;AAGvC,QAAI,IAAI,SAAS,GAAG;AAClB,UAAI,IAAI,YAAY,cAAc,SAAS,KAAK,cAAc,IAAI,YAAY,GAAG,UAAU,GAAG;AAC5F,eAAO,CAAC,QAAQ,qBAAqB;AAAA;AAEvC,aAAO,CAAC,QAAQ,QAAQ;AAAA;AAG1B,WAAO,CAAC,QAAQ,qBAAqB;AAAA,KACpC,CAAC,KAAK;AAET,QAAM,WAAW,QAAQ,MAAO,GAAE,WAAW,iBAAiB,CAAC,WAAW;AAE1E,QAAM,wBACJ,kBAAkB,eAAe,mCAAmC,eAAe;AAErF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA;AAAA;",
+  "names": []
+}

package/esm/exported-related/RowVariants.js

@@ -1,11 +1,16 @@
+import * as React from "react";
 const ROW_VARIANTS = {
-  HEADER_GROUP: 'ds-header-group-row',
-  PRIMARY: 'ds-primary-row',
-  SECONDARY: 'ds-secondary-row',
-  COMPACT_PRIMARY: 'ds-compact-primary-row',
-  COMPACT_SECONDARY: 'ds-compact-secondary-row'
+  HEADER_GROUP: "ds-header-group-row",
+  PRIMARY: "ds-primary-row",
+  SECONDARY: "ds-secondary-row",
+  COMPACT_PRIMARY: "ds-compact-primary-row",
+  COMPACT_SECONDARY: "ds-compact-secondary-row"
 };
-const ROW_VARIANT_KEY = 'row_variant_type';
-const ROW_VARIANT_COMPACT_KEY = 'row_variant_compact';
-
-export { ROW_VARIANTS, ROW_VARIANT_COMPACT_KEY, ROW_VARIANT_KEY };
+const ROW_VARIANT_KEY = "row_variant_type";
+const ROW_VARIANT_COMPACT_KEY = "row_variant_compact";
+export {
+  ROW_VARIANTS,
+  ROW_VARIANT_COMPACT_KEY,
+  ROW_VARIANT_KEY
+};
+//# sourceMappingURL=RowVariants.js.map

package/esm/exported-related/RowVariants.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/RowVariants.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const ROW_VARIANTS = {\n  HEADER_GROUP: 'ds-header-group-row',\n  PRIMARY: 'ds-primary-row',\n  SECONDARY: 'ds-secondary-row',\n  COMPACT_PRIMARY: 'ds-compact-primary-row',\n  COMPACT_SECONDARY: 'ds-compact-secondary-row',\n};\n\nexport const ROW_VARIANT_KEY = 'row_variant_type';\nexport const ROW_VARIANT_COMPACT_KEY = 'row_variant_compact';\n"],
+  "mappings": "AAAA;ACAO,MAAM,eAAe;AAAA,EAC1B,cAAc;AAAA,EACd,SAAS;AAAA,EACT,WAAW;AAAA,EACX,iBAAiB;AAAA,EACjB,mBAAmB;AAAA;AAGd,MAAM,kBAAkB;AACxB,MAAM,0BAA0B;",
+  "names": []
+}