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

package/cjs/styled.js

@@ -1,235 +1,311 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
+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 = require("@elliemae/ds-grid");
+var import_ds_icons = require("@elliemae/ds-icons");
+var import_helpers = require("./helpers");
+var import_zIndexInternalConfig = require("./configs/zIndexInternalConfig");
+var import_constants = 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;
 
-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');
+  :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};
+    }
+  }
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+  ${(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;
 
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
+  // prevents from scrolling while dragging on touch devices
+  touch-action: none;
 
-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}");
-};
+  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};
 
-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;
+  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;
 
-  return sizeToCss.sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
-}, props => {
-  var _props$height;
+  min-height: ${(props) => props.minHeight || "36px"};
+  height: ${(props) => props.height || "auto"};
 
-  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
- */
+  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"};
 
-const getGridTemplateColumnsStyle = _ref6 => {
-  let {
-    cols,
-    colsLayoutStyle = constants.ColsLayoutStyle.Auto
-  } = _ref6;
-  if (!cols) return '';
+  outline: none;
 
-  if (colsLayoutStyle === 'fixed') {
-    const widthAttr = cols.map(col => "minmax(0, ".concat(col, ")")).join(' ');
-    return "grid-template-columns: ".concat(widthAttr);
+  :focus {
+    ${(props) => props.isDragOverlay ? "" : styledFocusCss(props)}
   }
 
-  return "grid-template-columns: ".concat(cols.map(col => "minmax(0, ".concat(col, ")")).join(' '));
-};
+  ${({ isDropIndicatorPositionInside, theme }) => {
+  if (!isDropIndicatorPositionInside)
+    return "";
+  return styledFocusCss({ theme });
+}}
 
-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'];
-};
+  ${({ shouldDisplayHover, theme }) => shouldDisplayHover ? `:hover {
+            background-color: ${theme.colors.brand[200]};
+          }` : ""}
 
-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 ***********************************************************************/
+  box-shadow: 0 2px 4px 0 ${(props) => props.isDragOverlay ? "rgba(0,0,0,0.5)" : "transparent"};
 
-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 ************************************************************************/
+  opacity: ${(props) => props.isDragging ? 0.8 : 1};
 
-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');
+  ${(props) => !props.selected ? "" : `
+    background-color: ${props.theme.colors.brand[200]};
+    border: 1px solid ${props.theme.colors.brand[500]};
+    `}
 
-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;
+  color: ${(props) => props.disabled ? props.theme.colors.neutral["500"] : "#333333"};
+`;
+module.exports = __toCommonJS(styled_exports);
+//# sourceMappingURL=styled.js.map

package/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { Grid } from '@elliemae/ds-grid';\nimport { EditPencil } from '@elliemae/ds-icons';\nimport { sizeToCss, cellPadding, columnPadding } from './helpers';\nimport { ZIndexDataTable } from './configs/zIndexInternalConfig';\nimport { ColsLayoutStyle } from './configs/constants';\n\ninterface WidthAndHeight {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst styledFocusCss = ({ theme }) => `\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 ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: ${ZIndexDataTable.FOCUS_BORDER};\n}`;\n\nexport const StyledFocusWithin = styled(Grid)`\n  :focus-within {\n    ${(props) => (props.hideFocus ? '' : styledFocusCss(props))}\n  }\n`;\n\nexport const StyledDataTableWrapper = styled.div<WidthAndHeight & { noSelectionAllowed: boolean }>`\n  width: ${(props) => sizeToCss(props.width ?? ' 100%')};\n  height: ${(props) => sizeToCss(props.height ?? ' 100%')};\n  user-select: ${({ noSelectionAllowed }) => (noSelectionAllowed ? 'none' : 'auto')};\n`;\nexport const StyledTableWrapper = styled.div<WidthAndHeight>`\n  display: inline-block;\n  border-spacing: 0;\n  z-index: 0;\n  position: relative;\n  ${({ width = '100%', height = '100%' }) => `\n  width: ${sizeToCss(width)};\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledTableContentWrapper = styled.div<WidthAndHeight>`\n  position: relative;\n  ${({ height = 'auto' }) => `\n  height: ${sizeToCss(height)};\n  `}\n`;\nexport const StyledVirtualListWrapper = styled.div<WidthAndHeight>`\n  overflow: auto;\n  ${({ height = 'auto', width = '100%' }) => `\n  height: ${sizeToCss(height)};\n  width: ${sizeToCss(width)};\n  `}\n`;\n\n/**\n * HEADER\n */\ntype gridTemplateColumnStyleProps = {\n  cols: string[];\n  isExpandable: boolean;\n  colsLayoutStyle: ColsLayoutStyle;\n};\nconst getGridTemplateColumnsStyle = ({\n  cols,\n  colsLayoutStyle = ColsLayoutStyle.Auto,\n}: gridTemplateColumnStyleProps) => {\n  if (!cols) return '';\n  if (colsLayoutStyle === 'fixed') {\n    const widthAttr = cols.map((col) => `minmax(0, ${col})`).join(' ');\n    return `grid-template-columns: ${widthAttr}`;\n  }\n\n  return `grid-template-columns: ${cols.map((col) => `minmax(0, ${col})`).join(' ')}`;\n};\n\nexport const StyledHeadWrapper = styled.div<{\n  colsLayoutStyle: string;\n  totalColumnsWidth: number | string;\n}>`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  top: 0;\n  z-index: 4;\n  background: white;\n  width: ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n`;\n\nexport const StyledHeadTr = styled(Grid)`\n  ${(props) => (props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      isExpandable: props.isExpandable,\n      colsLayoutStyle: props.colsLayoutStyle,\n    })};\n`;\n\nconst getStyledHeadTHBorderColor = (props) => {\n  if (props.dragOverlay) return 'transparent';\n  if (props.isFirstRowGroup) return 'transparent';\n  return props.theme.colors.neutral['080'];\n};\n\nexport const StyledHeadTh = styled.div<any>`\n  min-height: 24px;\n  line-height: normal;\n  font-weight: 600;\n  text-transform: uppercase;\n  font-size: 0.923rem;\n  text-align: left;\n  ${columnPadding}\n  color: #353c46;\n  min-height: 1.84615rem;\n  position: relative;\n  position: sticky;\n  top: 0;\n  z-index: ${ZIndexDataTable.HEADER_ROW};\n  display: flex;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border-right: 1px solid ${(props) => props.theme.colors.neutral['080']};\n  border-bottom: 1px solid ${getStyledHeadTHBorderColor};\n  outline: none;\n\n  :focus {\n    &:after {\n      display: block;\n      content: ' ';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: -1px;\n      bottom: -1px;\n      border: 2px solid ${(props) => props.theme.colors.brand[700]};\n      pointer-events: none;\n      z-index: ${ZIndexDataTable.FOCUS_BORDER};\n    }\n  }\n\n  ${(props) =>\n    props.isDraggingActive\n      ? ''\n      : `:hover {\n    border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};\n    cursor: pointer;\n  }`}\n`;\n\nexport const StyledHeaderRightIconsWrapper = styled.div`\n  height: 100%;\n  display: flex;\n  align-items: center;\n  max-height: 24px;\n`;\n\nexport const StyledResizer = styled.div<{ isResizing: boolean }>`\n  display: inline-block;\n  background: ${({ isResizing, theme }) => (isResizing ? theme.colors.brand[600] : theme.colors.brand[400])};\n  width: 4px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n  z-index: 1;\n\n  // prevents from scrolling while dragging on touch devices\n  touch-action: none;\n\n  cursor: col-resize;\n`;\n\n// CELL ***********************************************************************/\nexport const StyledActionCell = styled.div`\n  position: relative; /* ie11 fallback */\n  position: sticky;\n  display: inline-block;\n  right: 0;\n  /* border-bottom: 1px solid #ebedf0; */\n  background: white;\n`;\n\nexport const StyledCell = styled.div`\n  ${cellPadding}\n  /* border-bottom: 1px solid #ebedf0; */\n  /* box-sizing: border-box; */\n  display: flex;\n  align-items: center;\n  width: 100%;\n  position: relative;\n`;\n\nexport const StyledCellContent = styled.div`\n  display: grid;\n  justify-self: flex-end;\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n`;\n\nexport const StyledPencilIcon = styled(EditPencil)``;\n\nexport const StyledEditableContainer = styled(Grid)<{ shouldDisplayEditIcon: string }>`\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  & ${StyledPencilIcon} {\n    display: ${({ shouldDisplayEditIcon }) => (shouldDisplayEditIcon ? 'block' : 'none')};\n  }\n  &:hover {\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  &:focus {\n    ${styledFocusCss}\n    ${StyledPencilIcon} {\n      display: block;\n    }\n  }\n  outline: none;\n`;\n\n// ROW ************************************************************************/\nexport const StyledFullsizeGrid = styled(Grid)`\n  position: relative;\n  z-index: ${ZIndexDataTable.ROW};\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n  /* width: ${(props) =>\n    props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%'}; */\n`;\n\nexport const GroupHeaderContainer = styled(Grid)<{ padding: string }>`\n  position: relative;\n  background-color: ${({ theme }) => theme.colors.brand[200]};\n  align-items: center;\n  padding: 0 ${(props) => props.padding};\n  border-top: 1px solid ${({ theme }) => theme.colors.brand[300]};\n  grid-template-columns: min-content 1fr;\n`;\n\nexport const GroupHeaderTitle = styled.span`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  font-size: 12px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n`;\n\nexport const StyledCellContainer = styled(Grid)`\n  position: relative;\n  z-index: 2;\n\n  min-height: ${(props) => props.minHeight || '36px'};\n  height: ${(props) => props.height || 'auto'};\n\n  width: ${(props) => (props.colLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%')};\n  ${(props) => (props.isDragOverlay ? 'width: fit-content;' : '')};\n  ${(props) =>\n    getGridTemplateColumnsStyle({\n      cols: props.cols,\n      colsLayoutStyle: props.colLayoutStyle,\n      isExpandable: props.isExpandable,\n    })};\n  background-color: ${({ backgroundColor, isDragging, theme }) =>\n    isDragging ? theme.colors.neutral[100] : backgroundColor || 'white'};\n\n  outline: none;\n\n  :focus {\n    ${(props) => (props.isDragOverlay ? '' : styledFocusCss(props))}\n  }\n\n  ${({ isDropIndicatorPositionInside, theme }) => {\n    if (!isDropIndicatorPositionInside) return '';\n    return styledFocusCss({ theme });\n  }}\n\n  ${({ shouldDisplayHover, theme }) =>\n    shouldDisplayHover\n      ? `:hover {\n            background-color: ${theme.colors.brand[200]};\n          }`\n      : ''}\n\n  box-shadow: 0 2px 4px 0 ${(props) => (props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent')};\n\n  opacity: ${(props) => (props.isDragging ? 0.8 : 1)};\n\n  ${(props) =>\n    !props.selected\n      ? ''\n      : `\n    background-color: ${props.theme.colors.brand[200]};\n    border: 1px solid ${props.theme.colors.brand[500]};\n    `}\n\n  color: ${(props) => (props.disabled ? props.theme.colors.neutral['500'] : '#333333')};\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}