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

package/esm/plugins/toolbar/ToolbarPlugin.js

@@ -1,29 +1,33 @@
-import * as React from "react";
-import React2 from "react";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { appendCellFormatter } from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
-import { RowRenderer } from "./RowRenderer";
-const decorateColumns = (columns) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'react';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import { RowRenderer } from './RowRenderer.js';
+import { jsxs, Fragment } from 'react/jsx-runtime';
+
+const decorateColumns = columns => {
   const lastColumn = columns[columns.length - 1];
-  return [
-    ...columns.slice(0, -1),
-    appendCellFormatter([
-      (value) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, value, /* @__PURE__ */ React2.createElement("div", {
-        style: { width: 34, maxWidth: 34, overflow: "hidden" }
-      }))
-    ], lastColumn, "fixedFormatters")
-  ];
+  return [...columns.slice(0, -1), appendCellFormatter([value => /*#__PURE__*/jsxs(Fragment, {
+    children: [value, /*#__PURE__*/_jsx("div", {
+      style: {
+        width: 34,
+        maxWidth: 34,
+        overflow: 'hidden'
+      }
+    })]
+  })], lastColumn, 'fixedFormatters')];
 };
+
 const decorateRenderers = (renderers, grid) => {
   const Row = renderers.body.row;
   renderers.body.row = RowRenderer(Row, grid);
   return renderers;
 };
-const ToolbarPlugin = createInstancePlugin("toolbar", {
+
+const ToolbarPlugin = createInstancePlugin('toolbar', {
   decorateRenderers,
   decorateColumns
 });
-export {
-  ToolbarPlugin
-};
-//# sourceMappingURL=ToolbarPlugin.js.map
+
+export { ToolbarPlugin };

package/esm/plugins/toolbar/ToolbarTrigger.js

@@ -1,76 +1,74 @@
-import * as React from "react";
-import React2, { useState } from "react";
-import styled from "styled-components";
-import { DSButton } from "@elliemae/ds-button";
-import { MoreOptionsVert } from "@elliemae/ds-icons";
-const ToolbarBtns = styled.div`
-  & > .em-ds-toolbar {
-    box-shadow: none;
-  }
-`;
-const ToolbarWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  height: ${(props) => props.rowSize === "normal" ? "36px" : "28px"};
-  margin-left: -4px;
-  margin-right: ${(props) => props.hasScrollBar ? "0" : "-10px"};
-  padding-right: 4px;
-  pointer-events: all;
-  background: white;
-  ${(props) => props.showShadow ? `box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2),
-  1px 0px 2px 0px rgba(0, 0, 0, 0.2);` : ""}
-  &:hover {
-    box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2), 1px 0px 2px 0px rgba(0, 0, 0, 0.2);
-    & > .toolbar-trigger {
-      border: none;
-    }
-  }
-`;
-const ToolbarPosition = styled.div`
-  position: absolute;
-  z-index: 10;
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  width: 0;
-  pointer-events: none;
-  top: 0;
-  height: ${(props) => props.rowRef.current ? `${props.rowRef.current.offsetHeight}px` : "36px"};
-  margin-top: ${(props) => props.rowSize === "normal" ? "0" : "0"};
-`;
-const ToolbarTrigger = ({ grid, rowData, hasScrollBar, rowRef }) => {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState } from 'react';
+import styled from 'styled-components';
+import DSButton from '@elliemae/ds-button';
+import { MoreOptionsVert } from '@elliemae/ds-icons';
+
+var _MoreOptionsVert;
+
+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 ToolbarBtns = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-0"
+})(["& > .em-ds-toolbar{box-shadow:none;}"]);
+const ToolbarWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-1"
+})(["display:flex;align-items:center;height:", ";margin-left:-4px;margin-right:", ";padding-right:4px;pointer-events:all;background:white;", " &:hover{box-shadow:-1px 0px 1px 0px rgba(0,0,0,0.2),1px 0px 2px 0px rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"], props => props.rowSize === 'normal' ? '36px' : '28px', props => props.hasScrollBar ? '0' : '-10px', props => props.showShadow ? "box-shadow: -1px 0px 1px 0px rgba(0, 0, 0, 0.2),\n  1px 0px 2px 0px rgba(0, 0, 0, 0.2);" : '');
+const ToolbarPosition = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-pm75g5-2"
+})(["position:absolute;z-index:10;display:flex;justify-content:flex-end;align-items:center;width:0;pointer-events:none;top:0;height:", ";margin-top:", ";"], props => props.rowRef.current ? "".concat(props.rowRef.current.offsetHeight, "px") : '36px', props => props.rowSize === 'normal' ? '0' : '0'); // eslint-disable-next-line react/prop-types
+
+const ToolbarTrigger = _ref => {
+  let {
+    grid,
+    rowData,
+    hasScrollBar,
+    rowRef
+  } = _ref;
   const {
-    props: { renderToolbar, rowSize }
+    props: {
+      renderToolbar,
+      rowSize
+    } // eslint-disable-next-line react/prop-types
+
   } = grid.getInstance();
   const [show, setShow] = useState(false);
-  const toolbar = show ? renderToolbar({
-    ...rowData,
+  /* eslint-disable indent */
+
+  const toolbar = show ? renderToolbar(_objectSpread(_objectSpread({}, rowData), {}, {
     size: rowSize,
     isToolbarShown: show,
     setToolbarShow: setShow
-  }) : null;
-  return /* @__PURE__ */ React2.createElement(ToolbarPosition, {
-    rowSize,
-    rowRef
-  }, /* @__PURE__ */ React2.createElement(ToolbarWrapper, {
+  })) : null;
+  /* eslint-enable indent */
+
+  return /*#__PURE__*/_jsx(ToolbarPosition, {
+    rowSize: rowSize,
+    rowRef: rowRef
+  }, void 0, /*#__PURE__*/_jsx(ToolbarWrapper, {
     onMouseEnter: () => setShow(true),
     onMouseLeave: () => setShow(false),
     showShadow: show,
-    rowSize,
-    hasScrollBar
-  }, show && /* @__PURE__ */ React2.createElement(ToolbarBtns, null, toolbar), /* @__PURE__ */ React2.createElement(DSButton, {
+    rowSize: rowSize,
+    hasScrollBar: hasScrollBar
+  }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, toolbar), /*#__PURE__*/_jsx(DSButton, {
     buttonType: "text",
     className: "toolbar-trigger",
     "data-testid": "toolbar-trigger",
-    icon: /* @__PURE__ */ React2.createElement(MoreOptionsVert, null),
+    icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {})) // eslint-disable-next-line react/prop-types
+    ,
     index: rowData.index,
     onClick: () => setShow(true),
     tabIndex: -1
   })));
 };
-var ToolbarTrigger_default = ToolbarTrigger;
-export {
-  ToolbarTrigger,
-  ToolbarTrigger_default as default
-};
-//# sourceMappingURL=ToolbarTrigger.js.map
+
+export { ToolbarTrigger, ToolbarTrigger as default };

package/esm/plugins/toolbar/index.js

@@ -1,6 +1 @@
-import * as React from "react";
-import { ToolbarPlugin } from "./ToolbarPlugin";
-export {
-  ToolbarPlugin
-};
-//# sourceMappingURL=index.js.map
+export { ToolbarPlugin } from './ToolbarPlugin.js';

package/esm/plugins/virtualization/AutoHeightList.js

@@ -1,42 +1,52 @@
-import * as React from "react";
-import React2, { forwardRef, useRef } from "react";
-import { FixedSizeList as List } from "react-window";
-import { mergeRefs, useWindowScrollerList, cx } from "@elliemae/ds-utilities";
-const AutoHeightList = forwardRef(({
-  itemCount,
-  className,
-  innerRef,
-  itemData,
-  itemKey,
-  itemSize,
-  outerRef,
-  component: ListComponent = List,
-  ...otherProps
-}, ref) => {
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { forwardRef, useRef } from 'react';
+import { FixedSizeList } from 'react-window';
+import { useWindowScrollerList, mergeRefs, cx } from '@elliemae/ds-utilities';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["itemCount", "className", "innerRef", "itemData", "itemKey", "itemSize", "outerRef", "component"];
+
+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 AutoHeightList = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    itemCount,
+    className,
+    innerRef,
+    itemData,
+    itemKey,
+    itemSize,
+    outerRef,
+    component: ListComponent = FixedSizeList
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
   const listRef = useRef();
   const outerListRef = useRef();
   useWindowScrollerList({
     listInstance: listRef,
     outerListRef
   });
-  return /* @__PURE__ */ React2.createElement(ListComponent, {
-    ...otherProps,
+  return /*#__PURE__*/jsx(ListComponent, _objectSpread(_objectSpread({}, otherProps), {}, {
     ref: mergeRefs(ref, listRef),
-    className: cx(className, "window-scroller-override"),
+    className: cx(className, 'window-scroller-override'),
     height: window.innerHeight,
-    innerRef,
-    itemCount,
-    itemData,
-    itemKey,
-    itemSize,
+    innerRef: innerRef,
+    itemCount: itemCount,
+    itemData: itemData,
+    itemKey: itemKey,
+    itemSize: itemSize,
     outerRef: mergeRefs(outerListRef, outerRef),
     overscanCount: 10,
     useIsScrolling: true
-  });
+  }));
 });
-var AutoHeightList_default = AutoHeightList;
-export {
-  AutoHeightList,
-  AutoHeightList_default as default
-};
-//# sourceMappingURL=AutoHeightList.js.map
+
+export { AutoHeightList as default };

package/esm/plugins/virtualization/VirtualizationPlugin.js

@@ -1,68 +1,97 @@
-import * as React from "react";
-import React2, { useMemo, useRef } from "react";
-import { get } from "lodash";
-import { FocusGrid } from "@elliemae/ds-shared/FocusGroup/FocusGrid";
-import { runAll } from "@elliemae/ds-utilities";
-import { mergeRefs } from "@elliemae/ds-utilities";
-import { createInstancePlugin } from "@elliemae/ds-shared/createDataInstance/createInstancePlugin";
-import { VirtualizedBody } from "./VirtualizedBody";
-const VirtualizationPlugin = createInstancePlugin("virtualization", {
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import { useMemo, useRef } from 'react';
+import { get } from 'lodash';
+import FocusGridManager from '@elliemae/ds-shared/FocusGroup/FocusGrid';
+import { mergeRefs, runAll } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import VirtualizedBody from './VirtualizedBody.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 VirtualizationPlugin = createInstancePlugin('virtualization', {
   decorateRenderers(renderers, grid) {
-    const BodyWrapper = renderers.body.wrapper;
-    renderers.body.wrapper = useMemo(() => (props) => {
-      const { listProps = {}, rows } = props;
+    const BodyWrapper = renderers.body.wrapper; // eslint-disable-next-line react/display-name
+
+    renderers.body.wrapper = useMemo(() => props => {
+      const {
+        listProps = {},
+        rows
+      } = props;
       const {
         hotKeys,
-        props: { autoHeight, autoScrollToId, expandable, overscanCount, rowSize },
-        refs: { innerBody },
+        props: {
+          autoHeight,
+          autoScrollToId,
+          expandable,
+          overscanCount,
+          rowSize
+        },
+        refs: {
+          innerBody
+        },
         setHasScroll,
-        state: { filters }
+        state: {
+          filters
+        }
       } = grid.getInstance();
       const listRef = useRef();
-      const nextListProps = {
-        ...listProps,
+
+      const nextListProps = _objectSpread(_objectSpread({}, listProps), {}, {
         ref: mergeRefs(listRef, listProps.ref)
-      };
-      return /* @__PURE__ */ React2.createElement(FocusGrid, {
-        hotKeys,
-        keyBindings: ({ defaultBindings }) => ({
-          ...defaultBindings,
-          Home: runAll((e) => {
-            if (e.ctrlKey) {
-              listRef.current.scrollToItem(0);
-              setTimeout(() => defaultBindings.Home(e), 10);
-            } else {
-              defaultBindings.Home(e);
-            }
-          }),
-          End: runAll((e) => {
-            if (e.ctrlKey) {
-              listRef.current.scrollToItem(rows.length - 1);
-              setTimeout(() => defaultBindings.End(e), 10);
-            } else {
-              defaultBindings.End(e);
-            }
-          })
-        }),
+      });
+
+      return /*#__PURE__*/_jsx(FocusGridManager, {
+        hotKeys: hotKeys,
+        keyBindings: _ref => {
+          let {
+            defaultBindings
+          } = _ref;
+          return _objectSpread(_objectSpread({}, defaultBindings), {}, {
+            // todo: this is kind of hacky, since it's virtualized and there's
+            //  the possibility that the firsts or lasts rows aren't rendered
+            Home: runAll(e => {
+              if (e.ctrlKey) {
+                listRef.current.scrollToItem(0);
+                setTimeout(() => defaultBindings.Home(e), 10);
+              } else {
+                defaultBindings.Home(e);
+              }
+            }),
+            End: runAll(e => {
+              if (e.ctrlKey) {
+                listRef.current.scrollToItem(rows.length - 1);
+                setTimeout(() => defaultBindings.End(e), 10);
+              } else {
+                defaultBindings.End(e);
+              }
+            })
+          });
+        },
         shouldRefocus: false
-      }, /* @__PURE__ */ React2.createElement(VirtualizedBody, {
-        ...props,
-        autoScrollToId,
-        autoHeight,
+      }, void 0, /*#__PURE__*/jsx(VirtualizedBody, _objectSpread(_objectSpread({}, props), {}, {
+        autoScrollToId: autoScrollToId,
+        autoHeight: autoHeight,
         component: BodyWrapper,
-        expandable,
-        innerBody,
+        expandable: expandable,
+        innerBody: innerBody,
         listProps: nextListProps,
-        overscanCount,
-        rowSize,
-        setHasScroll,
-        filters
-      }));
-    }, [get(grid.getInstance(), "rows.length")]);
+        overscanCount: overscanCount,
+        rowSize: rowSize,
+        setHasScroll: setHasScroll,
+        filters: filters
+      })));
+    }, [get(grid.getInstance(), 'rows.length')]);
     return renderers;
   }
+
 });
-export {
-  VirtualizationPlugin
-};
-//# sourceMappingURL=VirtualizationPlugin.js.map
+
+export { VirtualizationPlugin };