@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.11

package/esm/DataGridImpl.js

@@ -0,0 +1,160 @@
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/esnext.set.add-all.js';
+import 'core-js/modules/esnext.set.delete-all.js';
+import 'core-js/modules/esnext.set.difference.js';
+import 'core-js/modules/esnext.set.every.js';
+import 'core-js/modules/esnext.set.filter.js';
+import 'core-js/modules/esnext.set.find.js';
+import 'core-js/modules/esnext.set.intersection.js';
+import 'core-js/modules/esnext.set.is-disjoint-from.js';
+import 'core-js/modules/esnext.set.is-subset-of.js';
+import 'core-js/modules/esnext.set.is-superset-of.js';
+import 'core-js/modules/esnext.set.join.js';
+import 'core-js/modules/esnext.set.map.js';
+import 'core-js/modules/esnext.set.reduce.js';
+import 'core-js/modules/esnext.set.some.js';
+import 'core-js/modules/esnext.set.symmetric-difference.js';
+import 'core-js/modules/esnext.set.union.js';
+import 'core-js/modules/web.dom-collections.iterator.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.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useMemo } from 'react';
+import { isFunction } from '@elliemae/ds-shared/utils';
+import useDataGrid from '@elliemae/ds-shared/useDataGrid';
+import Table from './components/Table.js';
+import TableBody from './components/TableBody.js';
+import TableHeader from './components/TableHeader.js';
+import { defaultRenderers } from './components/renderers/index.js';
+import { DatagridWrapper } from './components/renderers/defaultClassedRenderers.js';
+import addOptionalFooterComponents from './components/footer/addOptionalFooterComponents.js';
+import addOptionalHeaderComponents from './components/header/addOptionalHeaderComponents.js';
+import { EmptyState } from './components/EmptyState.js';
+import getPluginsFromProps from './utilities/getPluginsFromProps.js';
+import { defaultPlugins } from './defaultPlugins.js';
+import { normalizeRows } from './utilities/normalizeData.js';
+import { jsxs } from 'react/jsx-runtime';
+import { renderRowsLoader } from './components/renderers/renderRowsLoader.js';
+
+var _EmptyState, _TableHeader;
+
+const _excluded = ["className", "renderers", "columns", "rows", "containerProps", "plugins", "normalizeDataKeys"];
+
+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 isFluid = _ref => {
+  let {
+    autoHeight,
+    paginated,
+    numRowsVisible
+  } = _ref;
+  if (autoHeight) return false;
+  if (paginated) return false;
+  return !numRowsVisible;
+};
+
+function DataGridImpl(_ref2) {
+  let {
+    className,
+    renderers,
+    columns,
+    rows,
+    containerProps,
+    plugins: pluginsProp,
+    normalizeDataKeys
+  } = _ref2,
+      otherProps = _objectWithoutProperties(_ref2, _excluded);
+
+  const {
+    noResultsPlaceholder = _EmptyState || (_EmptyState = /*#__PURE__*/_jsx(EmptyState, {})),
+    noColumnsPlaceholder = 'Please select one of more columns in order for data to be displayed.',
+    noResultsRender,
+    paginated,
+    height,
+    showHeader,
+    showRowsLoader,
+    rowsLoaderRenderer = renderRowsLoader,
+    groupedRows,
+    sortable,
+    rowSize,
+    wrapText,
+    onDefaultFiltersLoad,
+    rowKey
+  } = otherProps;
+  const idKey = rowKey || 'id';
+  const rowsIdsSet = new Set();
+  const rowsIds = rows.map(row => {
+    if (row[idKey] === undefined) throw new Error('Missing id: each row must have an unique id');
+    rowsIdsSet.add(row[idKey]);
+    return row[idKey];
+  });
+  if (rowsIds.length !== rowsIdsSet.size) throw new Error('Repeated id: each row must have an unique id');
+  const plugins = getPluginsFromProps(_objectSpread(_objectSpread({}, otherProps), {}, {
+    virtualized: (!paginated || groupedRows) && !wrapText,
+    paginated: paginated && !groupedRows || wrapText,
+    sortable: sortable && !groupedRows
+  }));
+
+  if (normalizeDataKeys) {
+    normalizeRows(rows);
+  }
+
+  const grid = useDataGrid(_objectSpread({
+    columns,
+    rows,
+    renderers: defaultRenderers,
+    plugins: [...plugins, ...pluginsProp, ...defaultPlugins]
+  }, otherProps));
+  const noColumnsVisible = useMemo(() => {
+    const visibleUserColumns = grid.columns.filter(column => column.visible || typeof column.visible === 'undefined');
+    return visibleUserColumns.length === 0;
+  }, [grid.columns]);
+  const bodyPlaceholder = useMemo(() => {
+    if (noColumnsVisible) {
+      return noColumnsPlaceholder;
+    }
+
+    return isFunction(noResultsRender) ? noResultsRender() : noResultsPlaceholder;
+  }, [noResultsPlaceholder, noColumnsPlaceholder, noColumnsVisible]);
+  const {
+    pagination
+  } = otherProps;
+  const conditionalPagination = pagination && pagination.conditionalPagination === true && rows.length <= otherProps.pagination.perPage;
+  const usePagination = paginated && !conditionalPagination;
+  return /*#__PURE__*/jsxs(DatagridWrapper, _objectSpread(_objectSpread({
+    className: "".concat(className, " ds-row-size-").concat(rowSize),
+    classProps: {
+      fluidHeight: isFluid({
+        autoHeight: otherProps.autoHeight,
+        numRowsVisible: otherProps.numRowsVisible,
+        paginated: usePagination
+      })
+    },
+    style: {
+      height
+    }
+  }, containerProps), {}, {
+    children: [addOptionalHeaderComponents({
+      grid
+    }), /*#__PURE__*/jsxs(Table, _objectSpread(_objectSpread({}, grid), {}, {
+      onDefaultFiltersLoad: onDefaultFiltersLoad,
+      children: [showHeader && (_TableHeader || (_TableHeader = /*#__PURE__*/_jsx(TableHeader, {}))), showRowsLoader ? rowsLoaderRenderer() : /*#__PURE__*/_jsx(TableBody, {
+        isPlaceholderActive: noColumnsVisible || grid.composedRows.rows && grid.composedRows.rows.length === 0 || grid.composedRows.length === 0,
+        noResultsPlaceholder: bodyPlaceholder
+      })]
+    })), addOptionalFooterComponents({
+      grid,
+      rows: grid.composedRows
+    })]
+  }));
+}
+
+export { DataGridImpl as default };

package/esm/PaginatedDataGrid.js

@@ -0,0 +1,68 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'react';
+import useDataGrid from '@elliemae/ds-shared/src/useDataGrid/useDataGrid';
+import Table from './components/Table.js';
+import { defaultRenderers } from './components/renderers/index.js';
+import { DatagridWrapper } from './components/renderers/defaultClassedRenderers.js';
+import addOptionalHeaderComponents from './components/header/addOptionalHeaderComponents.js';
+import getPluginsFromProps from './utilities/getPluginsFromProps.js';
+import { Pagination } from './plugins/pagination/components/Pagination.js';
+import { jsxs } from 'react/jsx-runtime';
+import { renderRowsLoader } from './components/renderers/renderRowsLoader.js';
+
+var _Table$Header;
+
+const _excluded = ["columns", "rows", "showRowsLoader", "noResultsPlaceholder", "rowsLoaderRenderer", "maxPerPage", "minPerPage", "onPageSelect", "onPerPage", "pagination"];
+
+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; }
+
+function PaginatedDataGrid(_ref) {
+  let {
+    columns,
+    rows,
+    showRowsLoader,
+    noResultsPlaceholder,
+    rowsLoaderRenderer = renderRowsLoader,
+    maxPerPage,
+    minPerPage,
+    onPageSelect,
+    onPerPage,
+    pagination
+  } = _ref,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  const plugins = getPluginsFromProps(otherProps, {
+    infiniteScrolling: true
+  });
+  const grid = useDataGrid(_objectSpread(_objectSpread({}, otherProps), {}, {
+    columns,
+    rows,
+    renderers: defaultRenderers,
+    plugins
+  }));
+  return /*#__PURE__*/_jsx(DatagridWrapper, {}, void 0, addOptionalHeaderComponents({
+    grid
+  }), /*#__PURE__*/jsxs(Table, _objectSpread(_objectSpread({}, grid), {}, {
+    children: [_Table$Header || (_Table$Header = /*#__PURE__*/_jsx(Table.Header, {})), showRowsLoader ? rowsLoaderRenderer() : /*#__PURE__*/_jsx(Table.Body, {
+      rows: grid.composedRows.rows || grid.composedRows
+    })]
+  })), /*#__PURE__*/_jsx(Pagination, {
+    maxPerPage: maxPerPage,
+    minPerPage: minPerPage,
+    onPageSelect: onPageSelect,
+    onPerPage: onPerPage,
+    paginated: rows,
+    pagination: pagination
+  }));
+}
+
+export { PaginatedDataGrid as default };

package/esm/blockNames.js

@@ -0,0 +1,5 @@
+const dataGridBlockName = 'data-grid';
+const headerBlockName = "".concat(dataGridBlockName, "-header");
+const bodyBlockName = "".concat(dataGridBlockName, "-body");
+
+export { bodyBlockName, dataGridBlockName, headerBlockName };

package/esm/columns/IconColumn.js

@@ -0,0 +1,87 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import React from 'react';
+import { cx } from '@elliemae/ds-utilities';
+import DSButton from '@elliemae/ds-button';
+import { aggregatedClasses } from '@elliemae/ds-classnames';
+
+const Intents = {
+  SUCCESS: 'success',
+  INFO: 'info',
+  DANGER: 'danger',
+  WARNING: 'warning'
+};
+const IntentIconColors = {
+  [Intents.SUCCESS]: ['success', 900],
+  [Intents.INFO]: ['brand-primary', 600],
+  [Intents.DANGER]: ['danger', 900],
+  [Intents.WARNING]: ['warning', 900]
+};
+const ValueWrapper = aggregatedClasses('span')('icon-column-cell');
+
+const addColorToIcon = (icon, intentColor) => {
+  if (icon.props.color) {
+    return icon;
+  }
+
+  return /*#__PURE__*/React.cloneElement(icon, {
+    color: intentColor
+  });
+};
+
+function createColumn(_ref) {
+  let {
+    property,
+    label,
+    headerIcon,
+    getRowIcon = () => null,
+    isVisited = () => null,
+    intent = Intents.SUCCESS,
+    width = 60,
+    onClick,
+    visible,
+    resizable,
+    sortable,
+    searchable
+  } = _ref;
+
+  const formatter = (value, extraParams) => {
+    const icon = getRowIcon(value, extraParams);
+
+    const onClickHandler = e => onClick(e, extraParams);
+
+    return /*#__PURE__*/_jsx(ValueWrapper, {
+      className: cx("icc-".concat(intent), isVisited(value, extraParams))
+    }, void 0, icon && addColorToIcon(icon, IntentIconColors[intent]), onClick && typeof value !== 'undefined' ? /*#__PURE__*/_jsx(DSButton, {
+      buttonType: "text",
+      intent: intent,
+      labelText: value,
+      onClick: onClickHandler
+    }) : value);
+  };
+
+  return {
+    property,
+    label,
+    headerStyle: {
+      justifyContent: 'center'
+    },
+    header: {
+      formatters: [() => /*#__PURE__*/_jsx("span", {}, void 0, /*#__PURE__*/React.cloneElement(headerIcon, {
+        color: IntentIconColors[intent]
+      }))]
+    },
+    cell: {
+      formatters: [formatter]
+    },
+    cellStyle: {
+      justifyContent: 'center'
+    },
+    width,
+    visible: typeof visible === 'undefined' || visible,
+    resizable,
+    sortable,
+    searchable
+  };
+}
+
+export { createColumn as default };

package/esm/columns/NumberColumn.js

@@ -0,0 +1,4 @@
+function createNumberColumn(_ref) {
+}
+
+export { createNumberColumn as default };

package/esm/components/BodyCell.js

@@ -0,0 +1,92 @@
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useContext, useCallback, useEffect } from 'react';
+import { FocusGridContext } from '@elliemae/ds-shared/FocusGroup/FocusGrid';
+import { evaluateTransforms, evaluateFormatters } from '@elliemae/ds-shared/createDataInstance/utils';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["rowData", "rowKey", "isScrolling"];
+
+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; }
+
+function BodyCell(_ref) {
+  let {
+    component: Component,
+    classProps,
+    rowProps,
+    column,
+    columnIndex,
+    rowIndex,
+    grid
+  } = _ref;
+
+  const {
+    rowData,
+    rowKey,
+    isScrolling
+  } = rowProps,
+        extraRowProps = _objectWithoutProperties(rowProps, _excluded);
+
+  const {
+    property,
+    cell,
+    props
+  } = column;
+  const evaluatedProperty = property || cell && cell.property;
+  const ref = useRef(null);
+  const {
+    register
+  } = useContext(FocusGridContext);
+  const registerFocus = useCallback(node => {
+    register(node, rowIndex, columnIndex);
+  }, []);
+  useEffect(() => {
+    registerFocus(ref.current);
+  }, [ref.current]);
+  const {
+    transforms = [],
+    formatters = [],
+    fixedFormatters = [],
+    // useful for the toolbar trigger at the last column
+    scrollingFormatters = []
+  } = cell || {};
+
+  const extraParameters = _objectSpread({
+    columnIndex,
+    property: evaluatedProperty,
+    column,
+    rowData,
+    rowIndex,
+    rowKey,
+    isScrolling,
+    // improve performance on scroll rendering a lightweight component instead
+    registerFocus
+  }, extraRowProps);
+
+  const withTooltip = v => classProps && classProps.wrapText ? v : /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: v
+  });
+
+  const value = rowData["_".concat(evaluatedProperty)] || rowData[evaluatedProperty];
+  const transformed = evaluateTransforms(transforms, value, extraParameters);
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    ref: ref,
+    "data-testid": "column-".concat(property),
+    tabIndex: -1,
+    classProps: classProps
+  }, props), cell && cell.props), transformed), {}, {
+    children: transformed.children || evaluateFormatters(!isScrolling ? [withTooltip, ...formatters, ...fixedFormatters] : [...scrollingFormatters, ...fixedFormatters], value, extraParameters, grid)
+  }));
+}
+
+export { BodyCell as default };

package/esm/components/BodyList.js

@@ -0,0 +1,45 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+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.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 React from 'react';
+import NoResults from './NoResults.js';
+import { jsx } from 'react/jsx-runtime';
+
+const _excluded = ["component", "rows", "rowRenderer", "noResultsPlaceholder", "innerRef", "innerBodyRef"];
+
+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; }
+
+function BodyWrapperDefaultRenderer(_ref) {
+  let {
+    component: Component,
+    rows,
+    rowRenderer,
+    noResultsPlaceholder,
+    innerRef,
+    innerBodyRef
+  } = _ref,
+      otherBodyProps = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread({}, otherBodyProps), {}, {
+    innerRef: innerRef,
+    children: rows.length ? rows.map((row, index) => rowRenderer(row, {
+      index
+    }, {})) : /*#__PURE__*/_jsx(NoResults, {
+      innerRef: innerRef,
+      rowRenderer: rowRenderer
+    }, void 0, noResultsPlaceholder)
+  }));
+}
+
+var BodyList = /*#__PURE__*/React.memo(BodyWrapperDefaultRenderer);
+
+export { BodyList as default };

package/esm/components/ColumnVisibilityMenuOption.js

@@ -0,0 +1,40 @@
+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/web.dom-collections.iterator.js';
+
+function getColumnVisibilityMenuOption(_ref) {
+  let {
+    columns,
+    onColumnVisibilityChange,
+    searchable,
+    height
+  } = _ref;
+  const {
+    items,
+    active
+  } = columns.reduce((result, column, index) => ({
+    items: [...result.items, {
+      id: column.property,
+      label: column.label,
+      checked: column.visible,
+      onClick: () => onColumnVisibilityChange(column, index)
+    }],
+    active: !column.visible ? result.active : [...result.active, column.property]
+  }), {
+    items: [],
+    active: []
+  });
+  return {
+    type: 'SelectionGroup',
+    id: 'column-visibility-option',
+    multi: true,
+    searchable,
+    closeOnClick: false,
+    active,
+    items,
+    height
+  };
+}
+
+export { getColumnVisibilityMenuOption };

package/esm/components/ColumnsOptionsMenuSection.js

@@ -0,0 +1,43 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+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/web.dom-collections.iterator.js';
+import 'react';
+import { Menu } from '@elliemae/ds-menu';
+
+const ColumnsOptionsMenuSection = _ref => {
+  let {
+    columns,
+    onColumnVisibilityChange,
+    searchable = false,
+    height // eslint-disable-next-line react/display-name
+
+  } = _ref;
+  return () => {
+    const {
+      items,
+      active
+    } = columns.reduce((result, column, index) => ({
+      items: [...result.items, {
+        id: column.property,
+        label: column.label,
+        checked: column.visible,
+        onClick: () => onColumnVisibilityChange(column, index)
+      }],
+      active: typeof column.visible === 'undefined' || column.visible ? [...result.active, column.property] : result.active
+    }), {
+      items: [],
+      active: []
+    });
+    return /*#__PURE__*/_jsx(Menu.SelectionGroup, {
+      active: active,
+      height: height,
+      items: items,
+      multi: true,
+      searchable: searchable
+    });
+  };
+};
+
+export { ColumnsOptionsMenuSection as default };

package/esm/components/EmptyState.js

@@ -0,0 +1,41 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'react';
+import { Grid } from '@elliemae/ds-grid';
+import { WarningTriangle } from '@elliemae/ds-icons';
+import { toMobile, __UNSAFE_SPACE_TO_DIMSUM } from '@elliemae/ds-system';
+import DSButton from '@elliemae/ds-button';
+import styled from 'styled-components';
+
+var _Icon;
+const EmptyStateWrapper = /*#__PURE__*/styled(Grid).withConfig({
+  componentId: "sc-1ddwbs7-0"
+})(["min-width:132px;max-width:384px;height:fit-content;"]);
+const Icon = /*#__PURE__*/styled(WarningTriangle).withConfig({
+  componentId: "sc-1ddwbs7-1"
+})(["fill:", ";color:", ";justify-self:center;"], props => props.theme.colors.neutral[300], props => props.theme.colors.neutral[300]);
+const PrimaryMessage = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-1ddwbs7-2"
+})(["text-align:center;font-weight:bold;font-size:", ";color:", ";margin-top:", ";margin-bottom:", ";"], props => toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[600], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.s), props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.xs));
+const SecondaryMessage = /*#__PURE__*/styled.p.withConfig({
+  componentId: "sc-1ddwbs7-3"
+})(["text-align:center;font-size:", ";color:", ";margin:0;"], props => toMobile(props.theme.fontSizes.value[400]), props => props.theme.colors.neutral[500]);
+const Button = /*#__PURE__*/styled(DSButton).withConfig({
+  componentId: "sc-1ddwbs7-4"
+})(["margin-top:", ";justify-self:center;width:fit-content;"], props => __UNSAFE_SPACE_TO_DIMSUM(props.theme.space.m));
+const EmptyState = _ref => {
+  let {
+    primaryMessage = 'No Results Found',
+    secondaryMessage,
+    buttonLabel,
+    onButtonClick = () => {}
+  } = _ref;
+  return /*#__PURE__*/_jsx(EmptyStateWrapper, {}, void 0, _Icon || (_Icon = /*#__PURE__*/_jsx(Icon, {
+    size: "xxl"
+  })), primaryMessage && /*#__PURE__*/_jsx(PrimaryMessage, {}, void 0, primaryMessage), secondaryMessage && /*#__PURE__*/_jsx(SecondaryMessage, {}, void 0, secondaryMessage), buttonLabel && /*#__PURE__*/_jsx(Button, {
+    buttonType: "secondary",
+    labelText: buttonLabel,
+    onClick: onButtonClick
+  }));
+};
+
+export { EmptyState };

package/esm/components/HeaderCell.js

@@ -0,0 +1,62 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'react';
+import { evaluateTransforms, evaluateFormatters } from '@elliemae/ds-shared/createDataInstance/utils';
+import DSTruncatedTooltipText from '@elliemae/ds-truncated-tooltip-text';
+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; }
+
+function HeaderCell(_ref) {
+  let {
+    column,
+    columnIndex,
+    component: Component,
+    classProps,
+    grid
+  } = _ref;
+  const {
+    property,
+    header = {},
+    props = {}
+  } = column;
+  const evaluatedProperty = property || header && header.property;
+  const {
+    label,
+    transforms = [],
+    formatters = []
+  } = header; // subscribe hook effects into header cell
+
+  if (column.headerHookEffects) column.headerHookEffects.forEach(hook => hook());
+  const extraParameters = {
+    columnIndex,
+    property: evaluatedProperty,
+    column,
+    grid
+  };
+
+  const withTooltip = v => classProps && classProps.wrapText ? v : /*#__PURE__*/_jsx(DSTruncatedTooltipText, {
+    value: v
+  });
+
+  const value = withTooltip(label);
+  const transformedProps = evaluateTransforms(transforms, value, extraParameters);
+  const formattedValue = evaluateFormatters(formatters, value, extraParameters);
+  const testId = column.headerDataId || 'data-grid-header__cell';
+  return /*#__PURE__*/jsx(Component, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+    "data-testid": testId,
+    index: columnIndex,
+    classProps: classProps
+  }, props), header && header.props), transformedProps), {}, {
+    children: transformedProps.children || formattedValue
+  }), "".concat(evaluatedProperty, "-header"));
+}
+
+export { HeaderCell as default };