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

package/cjs/styled.js

@@ -1,311 +1,235 @@
-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 styled_exports = {};
-__export(styled_exports, {
-  GroupHeaderContainer: () => GroupHeaderContainer,
-  GroupHeaderTitle: () => GroupHeaderTitle,
-  StyledActionCell: () => StyledActionCell,
-  StyledCell: () => StyledCell,
-  StyledCellContainer: () => StyledCellContainer,
-  StyledCellContent: () => StyledCellContent,
-  StyledDataTableWrapper: () => StyledDataTableWrapper,
-  StyledEditableContainer: () => StyledEditableContainer,
-  StyledFocusWithin: () => StyledFocusWithin,
-  StyledFullsizeGrid: () => StyledFullsizeGrid,
-  StyledHeadTh: () => StyledHeadTh,
-  StyledHeadTr: () => StyledHeadTr,
-  StyledHeadWrapper: () => StyledHeadWrapper,
-  StyledHeaderRightIconsWrapper: () => StyledHeaderRightIconsWrapper,
-  StyledPencilIcon: () => StyledPencilIcon,
-  StyledResizer: () => StyledResizer,
-  StyledTableContentWrapper: () => StyledTableContentWrapper,
-  StyledTableWrapper: () => StyledTableWrapper,
-  StyledVirtualListWrapper: () => StyledVirtualListWrapper
-});
-var React = __toESM(require("react"));
-var import_styled_components = __toESM(require("styled-components"));
-var import_ds_grid = __toESM(require("@elliemae/ds-grid"));
-var import_ds_icons = __toESM(require("@elliemae/ds-icons"));
-var import_helpers = __toESM(require("./helpers"));
-var import_zIndexInternalConfig = __toESM(require("./configs/zIndexInternalConfig"));
-var import_constants = __toESM(require("./configs/constants"));
-const styledFocusCss = ({ theme }) => `
-&:after {
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 2px solid ${theme.colors.brand[700]};
-  pointer-events: none;
-  z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
-}`;
-const StyledFocusWithin = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  :focus-within {
-    ${(props) => props.hideFocus ? "" : styledFocusCss(props)}
-  }
-`;
-const StyledDataTableWrapper = import_styled_components.default.div`
-  width: ${(props) => (0, import_helpers.sizeToCss)(props.width ?? " 100%")};
-  height: ${(props) => (0, import_helpers.sizeToCss)(props.height ?? " 100%")};
-  user-select: ${({ noSelectionAllowed }) => noSelectionAllowed ? "none" : "auto"};
-`;
-const StyledTableWrapper = import_styled_components.default.div`
-  display: inline-block;
-  border-spacing: 0;
-  z-index: 0;
-  position: relative;
-  ${({ width = "100%", height = "100%" }) => `
-  width: ${(0, import_helpers.sizeToCss)(width)};
-  height: ${(0, import_helpers.sizeToCss)(height)};
-  `}
-`;
-const StyledTableContentWrapper = import_styled_components.default.div`
-  position: relative;
-  ${({ height = "auto" }) => `
-  height: ${(0, import_helpers.sizeToCss)(height)};
-  `}
-`;
-const StyledVirtualListWrapper = import_styled_components.default.div`
-  overflow: auto;
-  ${({ height = "auto", width = "100%" }) => `
-  height: ${(0, import_helpers.sizeToCss)(height)};
-  width: ${(0, import_helpers.sizeToCss)(width)};
-  `}
-`;
-const getGridTemplateColumnsStyle = ({
-  cols,
-  colsLayoutStyle = import_constants.ColsLayoutStyle.Auto
-}) => {
-  if (!cols)
-    return "";
-  if (colsLayoutStyle === "fixed") {
-    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(" ");
-    return `grid-template-columns: ${widthAttr}`;
-  }
-  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(" ")}`;
-};
-const StyledHeadWrapper = import_styled_components.default.div`
-  position: relative; /* ie11 fallback */
-  position: sticky;
-  top: 0;
-  z-index: 4;
-  background: white;
-  width: ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Fixed ? (0, import_helpers.sizeToCss)(props.totalColumnsWidth) : "100%"};
-`;
-const StyledHeadTr = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? "width:100%" : ""};
-  ${(props) => getGridTemplateColumnsStyle({
-  cols: props.cols,
-  isExpandable: props.isExpandable,
-  colsLayoutStyle: props.colsLayoutStyle
-})};
-`;
-const getStyledHeadTHBorderColor = (props) => {
-  if (props.dragOverlay)
-    return "transparent";
-  if (props.isFirstRowGroup)
-    return "transparent";
-  return props.theme.colors.neutral["080"];
-};
-const StyledHeadTh = import_styled_components.default.div`
-  min-height: 24px;
-  line-height: normal;
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 0.923rem;
-  text-align: left;
-  ${import_helpers.columnPadding}
-  color: #353c46;
-  min-height: 1.84615rem;
-  position: relative;
-  position: sticky;
-  top: 0;
-  z-index: ${import_zIndexInternalConfig.ZIndexDataTable.HEADER_ROW};
-  display: flex;
-  justify-content: space-between;
-  box-sizing: border-box;
-  border-right: 1px solid ${(props) => props.theme.colors.neutral["080"]};
-  border-bottom: 1px solid ${getStyledHeadTHBorderColor};
-  outline: none;
+'use strict';
 
-  :focus {
-    &:after {
-      display: block;
-      content: ' ';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: -1px;
-      bottom: -1px;
-      border: 2px solid ${(props) => props.theme.colors.brand[700]};
-      pointer-events: none;
-      z-index: ${import_zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
-    }
-  }
+Object.defineProperty(exports, '__esModule', { value: true });
 
-  ${(props) => props.isDraggingActive ? "" : `:hover {
-    border-bottom: 1px solid ${props.isDragOverlay ? "transparent" : props.theme.colors.brand[800]};
-    cursor: pointer;
-  }`}
-`;
-const StyledHeaderRightIconsWrapper = import_styled_components.default.div`
-  height: 100%;
-  display: flex;
-  align-items: center;
-  max-height: 24px;
-`;
-const StyledResizer = import_styled_components.default.div`
-  display: inline-block;
-  background: ${({ isResizing, theme }) => isResizing ? theme.colors.brand[600] : theme.colors.brand[400]};
-  width: 4px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+var styled = require('styled-components');
+var Grid = require('@elliemae/ds-grid');
+var dsIcons = require('@elliemae/ds-icons');
+var sizeToCss = require('./helpers/sizeToCss.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var constants = require('./configs/constants.js');
+var cellPadding = require('./helpers/cellPadding.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('react');
+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('@babel/runtime/helpers/defineProperty');
+require('@babel/runtime/helpers/jsx');
+require('react/jsx-runtime');
+require('@elliemae/ds-form');
+require('./parts/TableContent.js');
+require('@elliemae/ds-circular-progress-indicator');
+require('@elliemae/ds-system');
+require('@elliemae/ds-button');
+require('./DataTableContext.js');
+require('./parts/Row.js');
+require('./parts/Footer.js');
+require('./parts/HoC/SortableItemContext.js');
+var zIndexInternalConfig = require('./configs/zIndexInternalConfig.js');
 
-  // prevents from scrolling while dragging on touch devices
-  touch-action: none;
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-  cursor: col-resize;
-`;
-const StyledActionCell = import_styled_components.default.div`
-  position: relative; /* ie11 fallback */
-  position: sticky;
-  display: inline-block;
-  right: 0;
-  /* border-bottom: 1px solid #ebedf0; */
-  background: white;
-`;
-const StyledCell = import_styled_components.default.div`
-  ${import_helpers.cellPadding}
-  /* border-bottom: 1px solid #ebedf0; */
-  /* box-sizing: border-box; */
-  display: flex;
-  align-items: center;
-  width: 100%;
-  position: relative;
-`;
-const StyledCellContent = import_styled_components.default.div`
-  display: grid;
-  justify-self: flex-end;
-  flex: 1 1 auto;
-  width: 100%;
-  height: 100%;
-  align-items: center;
-`;
-const StyledPencilIcon = (0, import_styled_components.default)(import_ds_icons.EditPencil)``;
-const StyledEditableContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  width: 100%;
-  height: 100%;
-  align-items: center;
-  & ${StyledPencilIcon} {
-    display: ${({ shouldDisplayEditIcon }) => shouldDisplayEditIcon ? "block" : "none"};
-  }
-  &:hover {
-    ${StyledPencilIcon} {
-      display: block;
-    }
-  }
-  &:focus {
-    ${styledFocusCss}
-    ${StyledPencilIcon} {
-      display: block;
-    }
-  }
-  outline: none;
-`;
-const StyledFullsizeGrid = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  position: relative;
-  z-index: ${import_zIndexInternalConfig.ZIndexDataTable.ROW};
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
 
-  min-height: ${(props) => props.minHeight || "36px"};
-  height: ${(props) => props.height || "auto"};
-  /* width: ${(props) => props.colsLayoutStyle === import_constants.ColsLayoutStyle.Fixed ? (0, import_helpers.sizeToCss)(props.totalColumnsWidth) : "100%"}; */
-`;
-const GroupHeaderContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  position: relative;
-  background-color: ${({ theme }) => theme.colors.brand[200]};
-  align-items: center;
-  padding: 0 ${(props) => props.padding};
-  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};
-  grid-template-columns: min-content 1fr;
-`;
-const GroupHeaderTitle = import_styled_components.default.span`
-  font-weight: ${(props) => props.theme.fontWeights.semibold};
-  font-size: 12px;
-  color: ${(props) => props.theme.colors.neutral[700]};
-`;
-const StyledCellContainer = (0, import_styled_components.default)(import_ds_grid.Grid)`
-  position: relative;
-  z-index: 2;
+const styledFocusCss = _ref => {
+  let {
+    theme
+  } = _ref;
+  return "\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: ").concat(zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, ";\n}");
+};
 
-  min-height: ${(props) => props.minHeight || "36px"};
-  height: ${(props) => props.height || "auto"};
+const StyledFocusWithin = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-0"
+})([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
+const StyledDataTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-1"
+})(["width:", ";height:", ";user-select:", ";"], props => {
+  var _props$width;
 
-  width: ${(props) => props.colLayoutStyle === import_constants.ColsLayoutStyle.Fixed ? (0, import_helpers.sizeToCss)(props.totalColumnsWidth) : "100%"};
-  ${(props) => props.isDragOverlay ? "width: fit-content;" : ""};
-  ${(props) => getGridTemplateColumnsStyle({
-  cols: props.cols,
-  colsLayoutStyle: props.colLayoutStyle,
-  isExpandable: props.isExpandable
-})};
-  background-color: ${({ backgroundColor, isDragging, theme }) => isDragging ? theme.colors.neutral[100] : backgroundColor || "white"};
+  return sizeToCss.sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
+}, props => {
+  var _props$height;
 
-  outline: none;
+  return sizeToCss.sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
+}, _ref2 => {
+  let {
+    noSelectionAllowed
+  } = _ref2;
+  return noSelectionAllowed ? 'none' : 'auto';
+});
+const StyledTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-2"
+})(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], _ref3 => {
+  let {
+    width = '100%',
+    height = '100%'
+  } = _ref3;
+  return "\n  width: ".concat(sizeToCss.sizeToCss(width), ";\n  height: ").concat(sizeToCss.sizeToCss(height), ";\n  ");
+});
+const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-3"
+})(["position:relative;", ""], _ref4 => {
+  let {
+    height = 'auto'
+  } = _ref4;
+  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  ");
+});
+const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-4"
+})(["overflow:auto;", ""], _ref5 => {
+  let {
+    height = 'auto',
+    width = '100%'
+  } = _ref5;
+  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  width: ").concat(sizeToCss.sizeToCss(width), ";\n  ");
+});
+/**
+ * HEADER
+ */
+
+const getGridTemplateColumnsStyle = _ref6 => {
+  let {
+    cols,
+    colsLayoutStyle = constants.ColsLayoutStyle.Auto
+  } = _ref6;
+  if (!cols) return '';
 
-  :focus {
-    ${(props) => props.isDragOverlay ? "" : styledFocusCss(props)}
+  if (colsLayoutStyle === 'fixed') {
+    const widthAttr = cols.map(col => "minmax(0, ".concat(col, ")")).join(' ');
+    return "grid-template-columns: ".concat(widthAttr);
   }
 
-  ${({ isDropIndicatorPositionInside, theme }) => {
-  if (!isDropIndicatorPositionInside)
-    return "";
-  return styledFocusCss({ theme });
-}}
+  return "grid-template-columns: ".concat(cols.map(col => "minmax(0, ".concat(col, ")")).join(' '));
+};
 
-  ${({ shouldDisplayHover, theme }) => shouldDisplayHover ? `:hover {
-            background-color: ${theme.colors.brand[200]};
-          }` : ""}
+const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-5"
+})(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
+const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-6"
+})(["", ";", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+  cols: props.cols,
+  isExpandable: props.isExpandable,
+  colsLayoutStyle: props.colsLayoutStyle
+}));
+
+const getStyledHeadTHBorderColor = props => {
+  if (props.dragOverlay) return 'transparent';
+  if (props.isFirstRowGroup) return 'transparent';
+  return props.theme.colors.neutral['080'];
+};
 
-  box-shadow: 0 2px 4px 0 ${(props) => props.isDragOverlay ? "rgba(0,0,0,0.5)" : "transparent"};
+const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-7"
+})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : ":hover {\n    border-bottom: 1px solid ".concat(props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800], ";\n    cursor: pointer;\n  }"));
+const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-8"
+})(["height:100%;display:flex;align-items:center;max-height:24px;"]);
+const StyledResizer = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-9"
+})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], _ref7 => {
+  let {
+    isResizing,
+    theme
+  } = _ref7;
+  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
+}); // CELL ***********************************************************************/
 
-  opacity: ${(props) => props.isDragging ? 0.8 : 1};
+const StyledActionCell = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-10"
+})(["position:relative;position:sticky;display:inline-block;right:0;background:white;"]);
+const StyledCell = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-11"
+})(["", " display:flex;align-items:center;width:100%;position:relative;"], cellPadding.cellPadding);
+const StyledCellContent = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-38sgfo-12"
+})(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
+const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPencil).withConfig({
+  componentId: "sc-38sgfo-13"
+})([""]);
+const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-14"
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
-  ${(props) => !props.selected ? "" : `
-    background-color: ${props.theme.colors.brand[200]};
-    border: 1px solid ${props.theme.colors.brand[500]};
-    `}
+const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-15"
+})(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
+const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-16"
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.brand[200];
+}, props => props.padding, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[300];
+});
+const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
+  componentId: "sc-38sgfo-17"
+})(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
+const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
+  componentId: "sc-38sgfo-18"
+})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
+  cols: props.cols,
+  colsLayoutStyle: props.colLayoutStyle,
+  isExpandable: props.isExpandable
+}), _ref11 => {
+  let {
+    backgroundColor,
+    isDragging,
+    theme
+  } = _ref11;
+  return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
+  let {
+    isDropIndicatorPositionInside,
+    theme
+  } = _ref12;
+  if (!isDropIndicatorPositionInside) return '';
+  return styledFocusCss({
+    theme
+  });
+}, _ref13 => {
+  let {
+    shouldDisplayHover,
+    theme
+  } = _ref13;
+  return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
+}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[500], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
-  color: ${(props) => props.disabled ? props.theme.colors.neutral["500"] : "#333333"};
-`;
-module.exports = __toCommonJS(styled_exports);
-//# sourceMappingURL=styled.js.map
+exports.GroupHeaderContainer = GroupHeaderContainer;
+exports.GroupHeaderTitle = GroupHeaderTitle;
+exports.StyledActionCell = StyledActionCell;
+exports.StyledCell = StyledCell;
+exports.StyledCellContainer = StyledCellContainer;
+exports.StyledCellContent = StyledCellContent;
+exports.StyledDataTableWrapper = StyledDataTableWrapper;
+exports.StyledEditableContainer = StyledEditableContainer;
+exports.StyledFocusWithin = StyledFocusWithin;
+exports.StyledFullsizeGrid = StyledFullsizeGrid;
+exports.StyledHeadTh = StyledHeadTh;
+exports.StyledHeadTr = StyledHeadTr;
+exports.StyledHeadWrapper = StyledHeadWrapper;
+exports.StyledHeaderRightIconsWrapper = StyledHeaderRightIconsWrapper;
+exports.StyledPencilIcon = StyledPencilIcon;
+exports.StyledResizer = StyledResizer;
+exports.StyledTableContentWrapper = StyledTableContentWrapper;
+exports.StyledTableWrapper = StyledTableWrapper;
+exports.StyledVirtualListWrapper = StyledVirtualListWrapper;

package/cjs/types/FunctionalHoC.js

@@ -1,27 +1,2 @@
-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 __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 FunctionalHoC_exports = {};
-var React = __toESM(require("react"));
-module.exports = __toCommonJS(FunctionalHoC_exports);
-//# sourceMappingURL=FunctionalHoC.js.map
+'use strict';
+

package/cjs/types/props.js

@@ -1,27 +1,2 @@
-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 __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 props_exports = {};
-var React = __toESM(require("react"));
-module.exports = __toCommonJS(props_exports);
-//# sourceMappingURL=props.js.map
+'use strict';
+