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

package/esm/plugins/virtualization/VirtualizedBody.js

@@ -1,14 +1,33 @@
-import * as React from "react";
-import React2, { useEffect, useState, useCallback, useRef, useLayoutEffect } from "react";
-import PropTypes from "prop-types";
-import { mergeRefs, debounce, isNaN } from "@elliemae/ds-utilities";
-import { NoResults } from "../../components/NoResults";
-import { VirtualizedBodyRow } from "./VirtualizedBodyRow";
-import { RowSizes } from "../../rowSizes";
-import { isSafari } from "./helper";
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+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.map.js';
+import 'core-js/modules/esnext.iterator.map.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 { useState, useRef, useCallback, useEffect, useLayoutEffect } from 'react';
+import { debounce, isNaN, mergeRefs } from '@elliemae/ds-utilities';
+import NoResults from '../../components/NoResults.js';
+import VirtualizedBodyRow from './VirtualizedBodyRow.js';
+import { RowSizes } from '../../rowSizes.js';
+import { isSafari } from './helper.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 wrapperSafari = {};
-const wrapperGeneric = { overflowY: "auto", overflowX: "visible" };
-const VirtualizedBody = (props) => {
+const wrapperGeneric = {
+  overflowY: 'auto',
+  overflowX: 'visible'
+};
+
+const VirtualizedBody = props => {
   const {
     autoScrollToId,
     columns,
@@ -26,7 +45,8 @@ const VirtualizedBody = (props) => {
     rowRenderer,
     rowSize,
     setHasScroll,
-    filters
+    filters // hack to reset the scrollTop to 0 if filters change
+
   } = props;
   const rowHeight = defaultRowHeight || RowSizes[rowSize];
   const [scrollTop, setScrollTop] = useState(0);
@@ -34,29 +54,41 @@ const VirtualizedBody = (props) => {
   const [hasScrollBar, setHasScrollBar] = useState(false);
   const rowStyleCache = useRef({});
   const [renderedIndexes, setRenderedIndexes] = useState([0, 30]);
+
   const getCalculatedHeightBetweenIndexes = (start, end) => {
-    const { itemSize = () => rowHeight } = listProps;
+    const {
+      itemSize = () => rowHeight
+    } = listProps;
+
     if (expandable) {
-      return rows.slice(start, end).map((_, idx) => idx).map((idx) => itemSize(idx)).reduce((acc, curr) => acc + curr, 0);
+      return rows.slice(start, end).map((_, idx) => idx).map(idx => itemSize(idx)).reduce((acc, curr) => acc + curr, 0);
     }
+
     return (end - start) * rowHeight;
   };
+
   const generateRowPositionMap = () => rows.map((row, idx) => getCalculatedHeightBetweenIndexes(0, idx));
+
   const rowPositionMap = useRef(generateRowPositionMap());
   const [virtualizedBodyRef, setVirtualizedBodyRef] = useState(null);
   const handlerRef = useRef();
-  const autoScrollTo = useCallback((scrollHeight) => {
-    const { itemSize = () => rowHeight } = listProps;
-    const idx = rows.findIndex((item) => item[rowKey] === autoScrollToId);
+  const autoScrollTo = useCallback(scrollHeight => {
+    const {
+      itemSize = () => rowHeight
+    } = listProps;
+    const idx = rows.findIndex(item => item[rowKey] === autoScrollToId);
     let val = rowPositionMap.current[idx] || 0;
     const lastPositionIdx = rowPositionMap.current.length - 1;
     let lastPosition = 0;
+
     if (lastPositionIdx > -1) {
       lastPosition = rowPositionMap.current[lastPositionIdx] - scrollHeight + itemSize(lastPositionIdx);
     }
+
     if (lastPosition < val) {
       val = lastPosition;
     }
+
     if (virtualizedBodyRef) {
       if (idx > -1) {
         setScrollTop(val);
@@ -67,7 +99,11 @@ const VirtualizedBody = (props) => {
   useEffect(() => {
     autoScrollTo(visibleHeight);
   }, [autoScrollToId, visibleHeight]);
-  const handler = useCallback(debounce(({ target }) => {
+  const handler = useCallback(debounce(_ref => {
+    let {
+      target
+    } = _ref;
+    // Update coordinates
     setScrollTop(target.scrollTop || 0);
   }, 100), [setScrollTop]);
   useEffect(() => {
@@ -79,31 +115,38 @@ const VirtualizedBody = (props) => {
   useLayoutEffect(() => {
     let top = Math.ceil(scrollTop / rowHeight);
     let bot = Math.ceil((scrollTop + visibleHeight) / rowHeight);
+
     if (expandable) {
+      // updateMapperFirst
       rowPositionMap.current = generateRowPositionMap();
-      top = rowPositionMap.current.findIndex((item) => item > scrollTop);
-      bot = rowPositionMap.current.findIndex((item) => item > scrollTop + visibleHeight);
-      if (bot === -1)
-        bot = rowPositionMap.current.length;
+      top = rowPositionMap.current.findIndex(item => item > scrollTop);
+      bot = rowPositionMap.current.findIndex(item => item > scrollTop + visibleHeight);
+      if (bot === -1) bot = rowPositionMap.current.length;
     }
+
     let upperBound = top - 1 - overscanCount;
     let lowerBound = bot - 1 + overscanCount;
+
     if (upperBound < 0) {
       upperBound = 0;
     }
+
     if (lowerBound - upperBound < overscanCount) {
       lowerBound = upperBound + overscanCount;
     }
+
     if (lowerBound > rows.length) {
       lowerBound = rows.length;
     }
+
     setHasScrollBar(visibleHeight < getHeight());
     setHasScroll(visibleHeight < getHeight());
     setRenderedIndexes([upperBound, lowerBound]);
   }, [visibleHeight, scrollTop, rows]);
   useLayoutEffect(() => {
     if (virtualizedBodyRef) {
-      const parsedVisibleHeight = parseFloat(window.getComputedStyle(virtualizedBodyRef, null).getPropertyValue("height"));
+      const parsedVisibleHeight = parseFloat(window.getComputedStyle(virtualizedBodyRef, null).getPropertyValue('height')); // eslint-disable-next-line no-restricted-globals
+
       if (!isNaN(parsedVisibleHeight)) {
         setVisibleHeight(parsedVisibleHeight);
         autoScrollTo(parsedVisibleHeight);
@@ -112,119 +155,114 @@ const VirtualizedBody = (props) => {
   }, [rows, virtualizedBodyRef]);
   useEffect(() => {
     if (virtualizedBodyRef) {
-      const eventListener = (event) => handlerRef.current(event);
-      virtualizedBodyRef.addEventListener("scroll", eventListener);
+      const eventListener = event => handlerRef.current(event);
+
+      virtualizedBodyRef.addEventListener('scroll', eventListener);
       return () => {
-        virtualizedBodyRef.removeEventListener("scroll", eventListener);
+        virtualizedBodyRef.removeEventListener('scroll', eventListener);
       };
     }
+
     return () => null;
   }, [virtualizedBodyRef]);
+
   const getHeight = () => {
     let returnHeight = 0;
+
     if (expandable) {
       returnHeight = getCalculatedHeightBetweenIndexes(0, rows.length) + 8;
     } else {
       returnHeight = rows.length * rowHeight + 8;
-    }
+    } // if (visibleHeight > returnHeight) {
+    //   return visibleHeight;
+    // }
+
+
     if (virtualizedBodyRef && virtualizedBodyRef.scrollHeight > virtualizedBodyRef.clientHeight) {
       return returnHeight + 10;
     }
+
     return returnHeight;
   };
+
   const getRowStyle = (row, index, specificRowHeight) => {
-    const { itemSize } = listProps;
+    const {
+      itemSize
+    } = listProps;
+
     if (!expandable && rowStyleCache.current[index]) {
       return rowStyleCache.current[index];
     }
+
     rowStyleCache.current[index] = {
       height: itemSize ? itemSize(index) : specificRowHeight,
       left: 0,
       right: 0,
       top: getCalculatedHeightBetweenIndexes(0, index),
-      position: "absolute"
+      position: 'absolute'
     };
     return rowStyleCache.current[index];
   };
-  const generateRenderedRows = () => rows.slice(renderedIndexes[0], renderedIndexes[1] + 1).map((_, index) => /* @__PURE__ */ React2.createElement(VirtualizedBodyRow, {
+
+  const generateRenderedRows = () => rows.slice(renderedIndexes[0], renderedIndexes[1] + 1).map((_, index) => /*#__PURE__*/_jsx(VirtualizedBodyRow, {
     data: {
       rows,
       columns,
       rowKey,
-      renderer: { rowRenderer }
+      renderer: {
+        rowRenderer
+      }
     },
     index: renderedIndexes[0] + index,
-    key: rows[renderedIndexes[0] + index][rowKey],
     style: getRowStyle(rows[renderedIndexes[0] + index], renderedIndexes[0] + index, rowHeight)
-  }));
-  const wrapperStyle = {
-    height: "100%",
-    ...isSafari ? wrapperSafari : wrapperGeneric
-  };
+  }, rows[renderedIndexes[0] + index][rowKey]));
+
+  const wrapperStyle = _objectSpread({
+    height: '100%'
+  }, isSafari ? wrapperSafari : wrapperGeneric);
+
   const bodyStyle = {
     height: getHeight(),
-    willChange: "transform",
-    backfaceVisibility: "hidden"
+    willChange: 'transform',
+    backfaceVisibility: 'hidden'
   };
-  return /* @__PURE__ */ React2.createElement(Component, {
-    ...props,
-    innerRef
-  }, !isPlaceholderActive ? /* @__PURE__ */ React2.createElement("div", {
-    className: "virtualized-body-wrapper",
-    style: wrapperStyle,
-    ref: (elem) => {
-      if (elem) {
-        if (isSafari) {
-          setVirtualizedBodyRef(elem.parentElement);
-          elem.parentElement.scrollTop = scrollTop;
-          mergeRefs(listProps.outerRef)(elem.parentElement);
-        } else {
-          setVirtualizedBodyRef(elem);
-          mergeRefs(listProps.outerRef)(elem);
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, props), {}, {
+    innerRef: innerRef,
+    children: !isPlaceholderActive ? /*#__PURE__*/jsx("div", {
+      className: "virtualized-body-wrapper",
+      style: wrapperStyle,
+      ref: elem => {
+        if (elem) {
+          if (isSafari) {
+            setVirtualizedBodyRef(elem.parentElement); // eslint-disable-next-line no-param-reassign
+
+            elem.parentElement.scrollTop = scrollTop;
+            mergeRefs(listProps.outerRef)(elem.parentElement);
+          } else {
+            setVirtualizedBodyRef(elem);
+            mergeRefs(listProps.outerRef)(elem);
+          }
         }
-      }
-    }
-  }, /* @__PURE__ */ React2.createElement("div", {
-    "data-testid": "virtualized-body",
-    className: `virtualized-body${hasScrollBar ? " with-scrollbar" : ""}`,
-    style: bodyStyle,
-    ref: (r) => {
-      mergeRefs(innerBody)(r);
-    }
-  }, generateRenderedRows())) : /* @__PURE__ */ React2.createElement(NoResults, {
-    innerRef,
-    rowRenderer
-  }, noResultsPlaceholder));
+      },
+      children: /*#__PURE__*/jsx("div", {
+        "data-testid": "virtualized-body",
+        className: "virtualized-body".concat(hasScrollBar ? ' with-scrollbar' : ''),
+        style: bodyStyle,
+        ref: r => {
+          mergeRefs(innerBody)(r);
+        },
+        children: generateRenderedRows()
+      })
+    }) : /*#__PURE__*/_jsx(NoResults, {
+      innerRef: innerRef,
+      rowRenderer: rowRenderer
+    }, void 0, noResultsPlaceholder)
+  }));
 };
+
 VirtualizedBody.defaultProps = {
   rows: [],
   overscanCount: 10
 };
-VirtualizedBody.propTypes = {
-  autoScrollToId: PropTypes.number,
-  columns: PropTypes.arrayOf(PropTypes.shape({})),
-  component: PropTypes.element,
-  expandable: PropTypes.bool,
-  filters: PropTypes.any,
-  innerRef: PropTypes.any,
-  innerBody: PropTypes.any,
-  isPlaceholderActive: PropTypes.bool,
-  listProps: PropTypes.shape({
-    itemSize: PropTypes.func,
-    outerRef: PropTypes.any
-  }),
-  noResultsPlaceholder: PropTypes.oneOf([PropTypes.string, PropTypes.element]),
-  overscanCount: PropTypes.number,
-  rows: PropTypes.arrayOf(PropTypes.shape({})),
-  rowHeight: PropTypes.number,
-  rowKey: PropTypes.string,
-  rowRenderer: PropTypes.element,
-  rowSize: PropTypes.any,
-  setHasScroll: PropTypes.func
-};
-var VirtualizedBody_default = VirtualizedBody;
-export {
-  VirtualizedBody,
-  VirtualizedBody_default as default
-};
-//# sourceMappingURL=VirtualizedBody.js.map
+
+export { VirtualizedBody as default };

package/esm/plugins/virtualization/VirtualizedBodyRow.js

@@ -1,8 +1,16 @@
-import * as React from "react";
-const VirtualizedBodyRow = ({ data, index, style, key, isScrolling }) => {
+function VirtualizedBodyRow(_ref) {
+  let {
+    data,
+    index,
+    style,
+    key,
+    isScrolling
+  } = _ref;
   const {
     rows,
-    renderer: { rowRenderer }
+    renderer: {
+      rowRenderer
+    }
   } = data;
   const rowData = rows[index];
   return rowRenderer(rowData, {
@@ -11,13 +19,10 @@ const VirtualizedBodyRow = ({ data, index, style, key, isScrolling }) => {
     rowIndex: index,
     key
   }, {
+    // eslint-disable-next-line no-underscore-dangle
     rowIndex: index,
     isScrolling
   });
-};
-var VirtualizedBodyRow_default = VirtualizedBodyRow;
-export {
-  VirtualizedBodyRow,
-  VirtualizedBodyRow_default as default
-};
-//# sourceMappingURL=VirtualizedBodyRow.js.map
+}
+
+export { VirtualizedBodyRow as default };

package/esm/plugins/virtualization/helper.js

@@ -1,6 +1,3 @@
-import * as React from "react";
-const isSafari = navigator.vendor && navigator.vendor.indexOf("Apple") > -1 && navigator.userAgent && navigator.userAgent.indexOf("CriOS") === -1 && navigator.userAgent.indexOf("FxiOS") === -1;
-export {
-  isSafari
-};
-//# sourceMappingURL=helper.js.map
+const isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 && navigator.userAgent && navigator.userAgent.indexOf('CriOS') === -1 && navigator.userAgent.indexOf('FxiOS') === -1;
+
+export { isSafari };

package/esm/plugins/virtualization/index.js

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

package/esm/renders/CellWithAddons.js

@@ -1,82 +1,53 @@
-import * as React from "react";
-import React2 from "react";
-import { get } from "lodash";
-import PropTypes from "prop-types";
-import { Grid } from "@elliemae/ds-grid";
-import { DSTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
-import { CellWrapper, ValueWrapper } from "./styled";
-const CellWithAddons = ({
-  leftAddon,
-  keepLeftPadding,
-  rightAddon,
-  badgeAddon,
-  highLight,
-  isEdit,
-  editComponent,
-  value,
-  neutralText,
-  metaData
-}) => {
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { get } from 'lodash';
+import Grid from '@elliemae/ds-grid';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { CellWrapper, ValueWrapper } from './styled.js';
+
+const CellWithAddons = _ref => {
+  let {
+    leftAddon,
+    keepLeftPadding,
+    rightAddon,
+    badgeAddon,
+    highLight,
+    isEdit,
+    editComponent,
+    value,
+    neutralText,
+    metaData
+  } = _ref;
   const hasLeftAddon = !!leftAddon || keepLeftPadding;
   const hasRightAddon = !!rightAddon && !isEdit;
   const cols = [1];
-  const shouldBeGray = neutralText || get(metaData, "rowData.customRowProps.neutralText");
-  if (hasLeftAddon)
-    cols.unshift("auto");
-  if (hasRightAddon)
-    cols.push("auto");
-  return /* @__PURE__ */ React2.createElement(CellWrapper, {
+  const shouldBeGray = neutralText || get(metaData, 'rowData.customRowProps.neutralText');
+  if (hasLeftAddon) cols.unshift('auto');
+  if (hasRightAddon) cols.push('auto');
+  return /*#__PURE__*/_jsx(CellWrapper, {
     noPadding: hasLeftAddon || badgeAddon || highLight || hasRightAddon,
-    hasLeftAddon,
-    hasRightAddon,
-    badgeAddon,
-    highLight
-  }, /* @__PURE__ */ React2.createElement(Grid, {
+    hasLeftAddon: hasLeftAddon,
+    hasRightAddon: hasRightAddon,
+    badgeAddon: badgeAddon,
+    highLight: highLight
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
     height: "100%",
-    cols
-  }, hasLeftAddon && /* @__PURE__ */ React2.createElement(Grid, {
+    cols: cols
+  }, void 0, hasLeftAddon && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     pl: "xxs",
     pr: "xxs",
-    width: keepLeftPadding ? "32px" : void 0
-  }, hasLeftAddon && leftAddon), /* @__PURE__ */ React2.createElement(Grid, {
+    width: keepLeftPadding ? '32px' : undefined
+  }, void 0, hasLeftAddon && leftAddon), /*#__PURE__*/_jsx(Grid, {
     alignItems: "center"
-  }, /* @__PURE__ */ React2.createElement(ValueWrapper, {
+  }, void 0, /*#__PURE__*/_jsx(ValueWrapper, {
     grayText: shouldBeGray
-  }, isEdit ? editComponent : /* @__PURE__ */ React2.createElement(DSTruncatedTooltipText, {
-    value
-  }))), hasRightAddon && /* @__PURE__ */ React2.createElement(Grid, {
+  }, void 0, isEdit ? editComponent : /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: value
+  }))), hasRightAddon && /*#__PURE__*/_jsx(Grid, {
     alignItems: "center",
     pl: "xxs"
-  }, rightAddon)));
-};
-CellWithAddons.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  leftAddon: PropTypes.element,
-  keepLeftPadding: PropTypes.bool,
-  rightAddon: PropTypes.element,
-  editComponent: PropTypes.element,
-  isEdit: PropTypes.bool,
-  badgeAddon: PropTypes.bool,
-  highLight: PropTypes.bool,
-  neutralText: PropTypes.bool,
-  metaData: PropTypes.shape({
-    className: PropTypes.string,
-    column: PropTypes.object,
-    columnIndex: PropTypes.number,
-    index: PropTypes.number,
-    isScrolling: PropTypes.bool,
-    key: PropTypes.string,
-    parentRowData: PropTypes.any,
-    property: PropTypes.string,
-    registerFocus: PropTypes.func,
-    rowData: PropTypes.object,
-    rowIndex: PropTypes.number,
-    rowKey: PropTypes.string,
-    style: PropTypes.object
-  })
-};
-export {
-  CellWithAddons
+  }, void 0, rightAddon)));
 };
-//# sourceMappingURL=CellWithAddons.js.map
+
+export { CellWithAddons };

package/esm/renders/index.js

@@ -1,8 +1,2 @@
-import * as React from "react";
-import { CellWithAddons } from "./CellWithAddons";
-import { CellContainer } from "./styled";
-export {
-  CellContainer,
-  CellWithAddons
-};
-//# sourceMappingURL=index.js.map
+export { CellWithAddons } from './CellWithAddons.js';
+export { CellContainer } from './styled.js';

package/esm/renders/styled.js

@@ -1,49 +1,16 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Grid } from "@elliemae/ds-grid";
-const m = "0.61538rem";
-const m2 = "1.23076rem";
-const CellWrapper = styled.div`
-  max-height: 36px;
-  height: 100%;
-  width: ${(props) => props.noPadding ? `calc(100% + ${m2})` : "100%"};
-  margin-left: ${(props) => props.noPadding ? `-${m}` : "0"};
-  margin-right: ${(props) => props.noPadding ? `-${m}` : "0"};
-  padding-left: ${(props) => !props.hasLeftAddon && (props.badgeAddon || props.highLight || props.hasRightAddon) ? m : "0"};
-  padding-right: ${(props) => !props.hasRightAddon && (props.badgeAddon || props.highLight || props.hasLeftAddon) ? m : "0"};
-  ${(props) => props.highLight ? `background: ${props.theme.colors.brand["200"]}` : ""};
-  ${(props) => props.badgeAddon ? `
-  position: relative;  
-  &::before {
-    display: block;
-    content: '';
-    position: absolute;
-    top: 0;
-    left:0;
-    border-style: solid;
-    border-width:  ${props.theme.space.xxs} ${props.theme.space.xxs}  ${props.theme.space.xxs} 0;
-    border-color: ${props.theme.colors.brand["600"]} transparent  transparent ${props.theme.colors.brand["600"]};
-  }
-  ` : ""}
-`;
-const ValueWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  & > span {
-    display: inline-flex;
-    align-items: center;
-  }
-  ${(props) => props.grayText ? `color: ${props.theme.colors.neutral["500"]};` : ""}
-`;
-const CellContainer = styled(Grid)`
-  padding-left: ${m};
-  padding-right: ${m};
-  position: relative;
-`;
-export {
-  CellContainer,
-  CellWrapper,
-  ValueWrapper
-};
-//# sourceMappingURL=styled.js.map
+import styled from 'styled-components';
+import Grid from '@elliemae/ds-grid';
+
+const m = '0.61538rem';
+const m2 = '1.23076rem';
+const CellWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1n8exyf-0"
+})(["max-height:36px;height:100%;width:", ";margin-left:", ";margin-right:", ";padding-left:", ";padding-right:", ";", ";", ""], props => props.noPadding ? "calc(100% + ".concat(m2, ")") : '100%', props => props.noPadding ? "-".concat(m) : '0', props => props.noPadding ? "-".concat(m) : '0', props => !props.hasLeftAddon && (props.badgeAddon || props.highLight || props.hasRightAddon) ? m : '0', props => !props.hasRightAddon && (props.badgeAddon || props.highLight || props.hasLeftAddon) ? m : '0', props => props.highLight ? "background: ".concat(props.theme.colors.brand['200']) : '', props => props.badgeAddon ? "\n  position: relative;  \n  &::before {\n    display: block;\n    content: '';\n    position: absolute;\n    top: 0;\n    left:0;\n    border-style: solid;\n    border-width:  ".concat(props.theme.space.xxs, " ").concat(props.theme.space.xxs, "  ").concat(props.theme.space.xxs, " 0;\n    border-color: ").concat(props.theme.colors.brand['600'], " transparent  transparent ").concat(props.theme.colors.brand['600'], ";\n  }\n  ") : '');
+const ValueWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "sc-1n8exyf-1"
+})(["display:flex;align-items:center;overflow:hidden;& > span{display:inline-flex;align-items:center;}", ""], props => props.grayText ? "color: ".concat(props.theme.colors.neutral['500'], ";") : '');
+const CellContainer = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1n8exyf-2"
+})(["padding-left:", ";padding-right:", ";position:relative;"], m, m);
+
+export { CellContainer, CellWrapper, ValueWrapper };

package/esm/rowSizes.js

@@ -1,22 +1,13 @@
-import * as React from "react";
 const RowSizes = {
   compact: 28,
   normal: 36,
   extend: 56
 };
 const RowSizesOptions = {
-  compact: "compact",
-  normal: "normal",
-  extend: "extend"
+  compact: 'compact',
+  normal: 'normal',
+  extend: 'extend'
 };
-const RowSizesOptionsArr = [
-  RowSizesOptions.compact,
-  RowSizesOptions.normal,
-  RowSizesOptions.extend
-];
-export {
-  RowSizes,
-  RowSizesOptions,
-  RowSizesOptionsArr
-};
-//# sourceMappingURL=rowSizes.js.map
+const RowSizesOptionsArr = [RowSizesOptions.compact, RowSizesOptions.normal, RowSizesOptions.extend];
+
+export { RowSizes, RowSizesOptions, RowSizesOptionsArr };