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

package/esm/parts/Filters/index.js

@@ -1,56 +1,16 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import 'core-js/modules/esnext.async-iterator.find.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.find.js';
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import { useCallback } from 'react';
-import { DateRangeFilter } from '../../addons/Filters/Components/DateRangeFilter/index.js';
-import { DateSwitcherFilter } from '../../addons/Filters/Components/DateSwitcherFilter/index.js';
-import { NumberRangeFilter } from '../../addons/Filters/Components/NumberRangeFilter/index.js';
-import { CurrencyRangeFilter } from '../../addons/Filters/Components/CurrencyRangeFilter/index.js';
-import { SingleSelectFilter } from '../../addons/Filters/Components/SelectFilter/SingleSelectFilter.js';
-import { MultiSelectFilter } from '../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js';
-import { SingleDateFilter } from '../../addons/Filters/Components/SingleDateFilter/index.js';
-import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-button';
-import '@elliemae/ds-popperjs';
-import 'styled-components';
-import '../../redux/reducers/index.js';
-import '../../configs/constants.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'react-virtual';
-import '../../configs/useRowFlattenization.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import '@elliemae/ds-icons';
-import '../../styled.js';
-import { jsx } from 'react/jsx-runtime';
-import '@elliemae/ds-form';
-import '../TableContent.js';
-import '@elliemae/ds-grid';
-import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-system';
-import '../../DataTableContext.js';
-import '../Row.js';
-import '../Footer.js';
-import '../HoC/SortableItemContext.js';
-import '@elliemae/ds-utilities';
-import 'uid';
-import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
-import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';
-import 'moment';
-import 'core-js/modules/esnext.async-iterator.some.js';
-import 'core-js/modules/esnext.iterator.some.js';
-import { useDispatchHeadersActions } from '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-
-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; }
+import * as React from "react";
+import React2, { useCallback } from "react";
+import {
+  DateRangeFilter,
+  DateSwitcherFilter,
+  NumberRangeFilter,
+  MultiSelectFilter,
+  SingleSelectFilter,
+  SingleDateFilter,
+  CurrencyRangeFilter
+} from "../../addons/Filters";
+import { FILTER_TYPES } from "../../exported-related";
+import { useDispatchHeadersActions } from "../../redux/reducers";
 const FilterMapper = {
   [FILTER_TYPES.SELECT]: SingleSelectFilter,
   [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,
@@ -60,29 +20,17 @@ const FilterMapper = {
   [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,
   [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter
 };
-const FilterMapItem = props => {
-  const {
-    column,
-    filterValue: filters,
-    onFiltersChange
-  } = props;
-  const {
-    patchHeaderFilterButtonAndMenu,
-    patchHeader
-  } = useDispatchHeadersActions();
-  const filterValue = filters.find(filter => filter.id === column.id);
+const FilterMapItem = (props) => {
+  const { column, filterValue: filters, onFiltersChange } = props;
+  const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();
+  const filterValue = filters.find((filter) => filter.id === column.id);
   const onValueChange = useCallback((type, newValue) => {
-    const filterIndex = filters.findIndex(filter => filter.id === column.id);
-
-    if (newValue === undefined) {
-      const newFilters = filters.filter(filter => filter.id !== column.id);
+    const filterIndex = filters.findIndex((filter) => filter.id === column.id);
+    if (newValue === void 0) {
+      const newFilters = filters.filter((filter) => filter.id !== column.id);
       onFiltersChange(newFilters);
     } else if (filterIndex === -1) {
-      onFiltersChange([...filters, {
-        id: column.id,
-        type,
-        value: newValue
-      }]);
+      onFiltersChange([...filters, { id: column.id, type, value: newValue }]);
     } else {
       const newFilters = [...filters];
       newFilters[filterIndex].type = type;
@@ -90,34 +38,34 @@ const FilterMapItem = props => {
       onFiltersChange(newFilters);
     }
   }, [column.id, filters, onFiltersChange]);
-
-  const filterProps = _objectSpread(_objectSpread({}, props), {}, {
-    filterValue: filterValue === null || filterValue === void 0 ? void 0 : filterValue.value,
+  const filterProps = {
+    ...props,
+    filterValue: filterValue?.value,
     onValueChange,
     patchHeader,
     patchHeaderFilterButtonAndMenu
-  });
-
-  if (typeof column.filter === 'string') {
+  };
+  if (typeof column.filter === "string") {
     if (!(column.filter in FilterMapper)) {
-      throw new Error("column.filter must be a supported out-of-the-box filter in ".concat(column));
+      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);
     }
-
     const FilterComp = FilterMapper[column.filter];
-    return /*#__PURE__*/jsx(FilterComp, _objectSpread({}, filterProps));
+    return /* @__PURE__ */ React2.createElement(FilterComp, {
+      ...filterProps
+    });
   }
-
   if (column.Filter) {
-    if (typeof column.Filter !== 'function') {
-      throw new Error("column.Filter must be a component");
+    if (typeof column.Filter !== "function") {
+      throw new Error(`column.Filter must be a component`);
     }
-
     const FilterComp = column.Filter;
-    return /*#__PURE__*/jsx(FilterComp, _objectSpread({}, filterProps));
-  } // Column doesn't have any filters
-
-
+    return /* @__PURE__ */ React2.createElement(FilterComp, {
+      ...filterProps
+    });
+  }
   return null;
 };
-
-export { FilterMapItem };
+export {
+  FilterMapItem
+};
+//# sourceMappingURL=index.js.map

package/esm/parts/Filters/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Filters/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/indent */\n/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport {\n  DateRangeFilter,\n  DateSwitcherFilter,\n  NumberRangeFilter,\n  MultiSelectFilter,\n  SingleSelectFilter,\n  SingleDateFilter,\n  CurrencyRangeFilter,\n} from '../../addons/Filters';\nimport { FILTER_TYPES } from '../../exported-related';\nimport { useDispatchHeadersActions } from '../../redux/reducers';\nimport { FilterProps } from '../../types/props';\n\nconst FilterMapper: Record<string, React.ComponentType<FilterProps>> = {\n  [FILTER_TYPES.SELECT]: SingleSelectFilter,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectFilter,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDateFilter,\n  [FILTER_TYPES.DATE_RANGE]: DateRangeFilter,\n  [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherFilter,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangeFilter,\n  [FILTER_TYPES.CURRENCY_RANGE]: CurrencyRangeFilter,\n};\nexport const FilterMapItem: React.ComponentType<\n  Omit<FilterProps, 'patchHeaderFilterButtonAndMenu' | 'patchHeader' | 'onValueChange'>\n> = (props) => {\n  const { column, filterValue: filters, onFiltersChange } = props;\n\n  const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n\n  const filterValue = filters.find((filter) => filter.id === column.id);\n\n  const onValueChange = useCallback(\n    (type: string, newValue: any) => {\n      const filterIndex = filters.findIndex((filter) => filter.id === column.id);\n      if (newValue === undefined) {\n        const newFilters = filters.filter((filter) => filter.id !== column.id);\n        onFiltersChange(newFilters);\n      } else if (filterIndex === -1) {\n        onFiltersChange([...filters, { id: column.id, type, value: newValue }]);\n      } else {\n        const newFilters = [...filters];\n        newFilters[filterIndex].type = type;\n        newFilters[filterIndex].value = newValue;\n        onFiltersChange(newFilters);\n      }\n    },\n    [column.id, filters, onFiltersChange],\n  );\n\n  const filterProps = {\n    ...props,\n    filterValue: filterValue?.value,\n    onValueChange,\n    patchHeader,\n    patchHeaderFilterButtonAndMenu,\n  };\n\n  if (typeof column.filter === 'string') {\n    if (!(column.filter in FilterMapper)) {\n      throw new Error(`column.filter must be a supported out-of-the-box filter in ${column}`);\n    }\n    const FilterComp = FilterMapper[column.filter];\n    return <FilterComp {...filterProps} />;\n  }\n\n  if (column.Filter) {\n    if (typeof column.Filter !== 'function') {\n      throw new Error(`column.Filter must be a component`);\n    }\n    const FilterComp = column.Filter;\n    return <FilterComp {...filterProps} />;\n  }\n\n  // Column doesn't have any filters\n  return null;\n};\n"],
+  "mappings": "AAAA;ACEA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;AACA;AAGA,MAAM,eAAiE;AAAA,GACpE,aAAa,SAAS;AAAA,GACtB,aAAa,eAAe;AAAA,GAC5B,aAAa,cAAc;AAAA,GAC3B,aAAa,aAAa;AAAA,GAC1B,aAAa,gBAAgB;AAAA,GAC7B,aAAa,eAAe;AAAA,GAC5B,aAAa,iBAAiB;AAAA;AAE1B,MAAM,gBAET,CAAC,UAAU;AACb,QAAM,EAAE,QAAQ,aAAa,SAAS,oBAAoB;AAE1D,QAAM,EAAE,gCAAgC,gBAAgB;AAExD,QAAM,cAAc,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO;AAElE,QAAM,gBAAgB,YACpB,CAAC,MAAc,aAAkB;AAC/B,UAAM,cAAc,QAAQ,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO;AACvE,QAAI,aAAa,QAAW;AAC1B,YAAM,aAAa,QAAQ,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO;AACnE,sBAAgB;AAAA,eACP,gBAAgB,IAAI;AAC7B,sBAAgB,CAAC,GAAG,SAAS,EAAE,IAAI,OAAO,IAAI,MAAM,OAAO;AAAA,WACtD;AACL,YAAM,aAAa,CAAC,GAAG;AACvB,iBAAW,aAAa,OAAO;AAC/B,iBAAW,aAAa,QAAQ;AAChC,sBAAgB;AAAA;AAAA,KAGpB,CAAC,OAAO,IAAI,SAAS;AAGvB,QAAM,cAAc;AAAA,OACf;AAAA,IACH,aAAa,aAAa;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA;AAGF,MAAI,OAAO,OAAO,WAAW,UAAU;AACrC,QAAI,CAAE,QAAO,UAAU,eAAe;AACpC,YAAM,IAAI,MAAM,8DAA8D;AAAA;AAEhF,UAAM,aAAa,aAAa,OAAO;AACvC,WAAO,qCAAC,YAAD;AAAA,SAAgB;AAAA;AAAA;AAGzB,MAAI,OAAO,QAAQ;AACjB,QAAI,OAAO,OAAO,WAAW,YAAY;AACvC,YAAM,IAAI,MAAM;AAAA;AAElB,UAAM,aAAa,OAAO;AAC1B,WAAO,qCAAC,YAAD;AAAA,SAAgB;AAAA;AAAA;AAIzB,SAAO;AAAA;",
+  "names": []
+}

package/esm/parts/Footer.js

@@ -1,18 +1,13 @@
-import 'react';
-import PropTypes from 'prop-types';
-import { jsx, Fragment } from 'react/jsx-runtime';
-
-const Footer = _ref => {
-  let {
-    children
-  } = _ref;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: children
-  });
-};
-
+import * as React from "react";
+import React2 from "react";
+import PropTypes from "prop-types";
+const Footer = ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
 Footer.propTypes = {
   children: PropTypes.node
 };
-
-export { Footer as default };
+var Footer_default = Footer;
+export {
+  Footer,
+  Footer_default as default
+};
+//# sourceMappingURL=Footer.js.map

package/esm/parts/Footer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Footer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport PropTypes from 'prop-types';\n\nconst Footer: React.ComponentType = ({ children }) => <>{children}</>;\n\nFooter.propTypes = {\n  children: PropTypes.node,\n};\n\nexport { Footer };\nexport default Footer;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,SAA8B,CAAC,EAAE,eAAe,4DAAG;AAEzD,OAAO,YAAY;AAAA,EACjB,UAAU,UAAU;AAAA;AAItB,IAAO,iBAAQ;",
+  "names": []
+}

package/esm/parts/Headers/EmptyChildrenGroup.js

@@ -1,11 +1,13 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-
-var _StyledBox;
-const StyledBox = /*#__PURE__*/styled.div.withConfig({
-  componentId: "sc-1dcayi9-0"
-})(["height:24px;margin:0 ", ";border-top:1px solid ", ";"], props => props.theme.space.xxs, props => props.theme.colors.neutral[200]);
-const EmptyChildrenGroup = () => _StyledBox || (_StyledBox = /*#__PURE__*/_jsx(StyledBox, {}));
-
-export { EmptyChildrenGroup };
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+const StyledBox = styled.div`
+  height: 24px;
+  margin: 0 ${(props) => props.theme.space.xxs};
+  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};
+`;
+const EmptyChildrenGroup = () => /* @__PURE__ */ React2.createElement(StyledBox, null);
+export {
+  EmptyChildrenGroup
+};
+//# sourceMappingURL=EmptyChildrenGroup.js.map

package/esm/parts/Headers/EmptyChildrenGroup.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/EmptyChildrenGroup.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\n\nconst StyledBox = styled.div`\n  height: 24px;\n  margin: 0 ${(props) => props.theme.space.xxs};\n  border-top: 1px solid ${(props) => props.theme.colors.neutral[200]};\n`;\n\nexport const EmptyChildrenGroup: React.ComponentType<Record<string, never>> = () => <StyledBox />;\n"],
+  "mappings": "AAAA;ACAA;AACA;AAEA,MAAM,YAAY,OAAO;AAAA;AAAA,cAEX,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,0BACjB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAGzD,MAAM,qBAAiE,MAAM,qCAAC,WAAD;",
+  "names": []
+}

package/esm/parts/Headers/HeaderCell.js

@@ -1,111 +1,50 @@
-import 'core-js/modules/esnext.async-iterator.filter.js';
-import 'core-js/modules/esnext.iterator.constructor.js';
-import 'core-js/modules/esnext.iterator.filter.js';
-import 'core-js/modules/esnext.async-iterator.for-each.js';
-import 'core-js/modules/esnext.iterator.for-each.js';
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import { useContext, useRef, useMemo } from 'react';
-import { connect } from 'react-redux';
-import Grid from '@elliemae/ds-grid';
-import '../../redux/reducers/index.js';
-import { StyledHeaderRightIconsWrapper, StyledFocusWithin, StyledHeadTh } from '../../styled.js';
-import DataTableContext from '../../DataTableContext.js';
-import { SortByCaret } from '../SortByCaret.js';
-import '../TableContent.js';
-import '@elliemae/ds-circular-progress-indicator';
-import 'styled-components';
-import '@elliemae/ds-icons';
-import '@elliemae/ds-system';
-import '@elliemae/ds-button';
-import '../Row.js';
-import '../Footer.js';
-import DragHandle from '../DnDHandle.js';
-import { SortableItemContext } from '../HoC/SortableItemContext.js';
-import { FilterMapItem } from '../Filters/index.js';
-import { HeaderResizer } from './HeaderResizer.js';
-import { useHeaderCellHandlers } from './useHeaderCellHandlers.js';
-import { useHeaderCellConfig } from './useHeaderCellConfig.js';
-import { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol.js';
-import { DATA_TESTID } from '../../configs/constants.js';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import 'core-js/modules/esnext.async-iterator.reduce.js';
-import 'core-js/modules/esnext.iterator.reduce.js';
-import 'react-virtual';
-import '../../configs/useRowFlattenization.js';
-import 'core-js/modules/esnext.async-iterator.map.js';
-import 'core-js/modules/esnext.iterator.map.js';
-import { jsxs } from 'react/jsx-runtime';
-import '@elliemae/ds-form';
-import { HeaderCellTitle } from './HeaderCellTitle.js';
-import { useDispatchHeadersActions } from '../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
-
-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; }
-
+import * as React from "react";
+import React2, { useContext, useMemo, useRef } from "react";
+import { connect } from "react-redux";
+import { Grid } from "@elliemae/ds-grid";
+import { useDispatchHeadersActions } from "../../redux/reducers";
+import { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from "../../styled";
+import { DataTableContext } from "../../DataTableContext";
+import { SortByCaret } from "../SortByCaret";
+import { DnDHandle } from "..";
+import { SortableItemContext } from "../HoC/SortableItemContext";
+import { FilterMapItem } from "../Filters";
+import { HeaderResizer } from "./HeaderResizer";
+import { useHeaderCellHandlers } from "./useHeaderCellHandlers";
+import { useHeaderCellConfig } from "./useHeaderCellConfig";
+import { useRecoverFocusCol } from "../../hooks/useRecoverFocusCol";
+import { DATA_TESTID } from "../../configs/constants";
+import { HeaderCellTitle } from "./HeaderCellTitle";
 const buildScreenReaderInstructions = (colSpan, draggable, filterable, sortable) => {
-  const preffix = colSpan === 1 ? '' : 'Column Group. ';
-  if (!draggable && !filterable && !sortable) return preffix;
-  let message = sortable ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so' : '';
-
+  const preffix = colSpan === 1 ? "" : "Column Group. ";
+  if (!draggable && !filterable && !sortable)
+    return preffix;
+  let message = sortable ? "You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so" : "";
   if (draggable && filterable) {
-    message = "This column is draggable and filterable. To enable these interactions press the enter key. ".concat(message);
+    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
   } else if (draggable || filterable) {
-    message = "This column is ".concat(draggable ? 'draggable' : 'filterable', ". To enable this interaction press the enter key. ").concat(message);
+    message = `This column is ${draggable ? "draggable" : "filterable"}. To enable this interaction press the enter key. ${message}`;
   }
-
-  return "".concat(preffix).concat(message);
+  return `${preffix}${message}`;
 };
-
 function mapStateToProps(state, ownProps) {
-  var _state$headers;
-
   return {
-    reduxHeader: (_state$headers = state.headers) === null || _state$headers === void 0 ? void 0 : _state$headers[ownProps.column.id]
+    reduxHeader: state.headers?.[ownProps.column.id]
   };
 }
-
 const connector = connect(mapStateToProps);
-
-const HeaderCellComp = props => {
-  var _FilterMapItem, _flattenedData$, _flattenedData$$origi;
-
-  const {
-    reduxHeader,
-    column,
-    isDragOverlay,
-    colSpan
-  } = props;
+const HeaderCellComp = (props) => {
+  const { reduxHeader, column, isDragOverlay, colSpan } = props;
   const ctx = useContext(DataTableContext);
   const {
-    tableProps: {
-      isResizeable,
-      onColumnSortChange,
-      dragAndDropColumns,
-      onFiltersChange,
-      filters,
-      textWrap
-    },
+    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },
     flattenedData
   } = ctx;
-  const {
-    patchHeader
-  } = useDispatchHeadersActions();
+  const { patchHeader } = useDispatchHeadersActions();
   const dragHandleRef = useRef(null);
   const filterIconRef = useRef(null);
-  const {
-    draggableProps
-  } = useContext(SortableItemContext);
-  const {
-    hasFilter,
-    hasDnD,
-    hasSortingCaret,
-    hasRightIcons,
-    shouldShowDnD,
-    hCols,
-    isDragging
-  } = useHeaderCellConfig({
+  const { draggableProps } = useContext(SortableItemContext);
+  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({
     column,
     dragAndDropColumns,
     draggableProps,
@@ -114,32 +53,32 @@ const HeaderCellComp = props => {
   });
   useRecoverFocusCol(isDragging, dragHandleRef);
   const rightIcons = useMemo(() => {
-    if (!hasRightIcons) return null;
-    return /*#__PURE__*/_jsx(StyledHeaderRightIconsWrapper, {}, void 0, _FilterMapItem || (_FilterMapItem = /*#__PURE__*/_jsx(FilterMapItem, {
-      column: column,
-      ctx: ctx,
-      onFiltersChange: onFiltersChange,
-      reduxHeader: reduxHeader,
+    if (!hasRightIcons)
+      return null;
+    return /* @__PURE__ */ React2.createElement(StyledHeaderRightIconsWrapper, null, /* @__PURE__ */ React2.createElement(FilterMapItem, {
+      column,
+      ctx,
+      onFiltersChange,
+      reduxHeader,
       filterValue: filters,
       innerRef: filterIconRef
-    })), hasSortingCaret && /*#__PURE__*/_jsx(SortByCaret, {
+    }), hasSortingCaret && /* @__PURE__ */ React2.createElement(SortByCaret, {
       isSortedDesc: column.isSortedDesc
     }));
   }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
-  const DnDHandleComponent = useMemo(() => /*#__PURE__*/_jsx(Grid, {
+  const DnDHandleComponent = useMemo(() => /* @__PURE__ */ React2.createElement(Grid, {
     mr: "2px",
     alignItems: "center",
-    style: {
-      position: 'relative'
-    }
-  }, void 0, /*#__PURE__*/_jsx(StyledFocusWithin, {
+    style: { position: "relative" }
+  }, /* @__PURE__ */ React2.createElement(StyledFocusWithin, {
     hideFocus: isDragging
-  }, void 0, /*#__PURE__*/_jsx(DragHandle, {
+  }, /* @__PURE__ */ React2.createElement(DnDHandle, {
+    key: column.id,
     innerRef: dragHandleRef,
-    isReachable: reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops,
+    isReachable: reduxHeader?.withTabStops,
     id: column.id,
-    isDragOverlay: isDragOverlay
-  }, column.id))), [column.id, isDragOverlay, isDragging, reduxHeader === null || reduxHeader === void 0 ? void 0 : reduxHeader.withTabStops]);
+    isDragOverlay
+  }))), [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops]);
   const handlers = useHeaderCellHandlers({
     hasFilter,
     patchHeader,
@@ -151,41 +90,38 @@ const HeaderCellComp = props => {
     filterIconRef,
     headerRef: column.ref
   });
-  return /*#__PURE__*/jsxs(StyledHeadTh, _objectSpread(_objectSpread({
-    column: column
-  }, handlers), {}, {
-    role: colSpan === 1 ? 'columnheader' : 'group',
-    colSpan: colSpan,
-    "aria-describedby": "".concat(column.id, "-instructions") // eslint-disable-next-line no-nested-ternary
-    ,
-    "aria-sort": hasSortingCaret ? column.isSortedDesc ? 'descending' : 'ascending' : 'none',
+  return /* @__PURE__ */ React2.createElement(StyledHeadTh, {
+    column,
+    ...handlers,
+    role: colSpan === 1 ? "columnheader" : "group",
+    colSpan,
+    "aria-describedby": `${column.id}-instructions`,
+    "aria-sort": hasSortingCaret ? column.isSortedDesc ? "descending" : "ascending" : "none",
     "data-testid": DATA_TESTID.DATA_TABLE_HEADER,
-    isFirstRowGroup: !!((_flattenedData$ = flattenedData[0]) !== null && _flattenedData$ !== void 0 && (_flattenedData$$origi = _flattenedData$.original) !== null && _flattenedData$$origi !== void 0 && _flattenedData$$origi.dimsumHeaderValue),
+    isFirstRowGroup: !!flattenedData[0]?.original?.dimsumHeaderValue,
     tabIndex: column.isFocuseable === false ? -1 : 0,
-    isDragOverlay: isDragOverlay,
+    isDragOverlay,
     isDraggingActive: draggableProps && draggableProps.active,
-    shouldShowDnD: shouldShowDnD,
-    ref: column.ref,
-    children: [/*#__PURE__*/_jsx(Grid, {
-      width: "100%",
-      cols: hCols
-    }, void 0, shouldShowDnD && DnDHandleComponent, /*#__PURE__*/_jsx(HeaderCellTitle, {
-      column: column,
-      ctx: ctx,
-      draggableProps: draggableProps,
-      textWrap: textWrap
-    }), rightIcons, isResizeable && column.canResize !== false && /*#__PURE__*/_jsx(HeaderResizer, {
-      column: column
-    })), /*#__PURE__*/_jsx("span", {
-      id: "".concat(column.id, "-instructions"),
-      style: {
-        display: 'none'
-      },
-      "aria-hidden": "false"
-    }, void 0, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort))]
-  }));
+    shouldShowDnD,
+    ref: column.ref
+  }, /* @__PURE__ */ React2.createElement(Grid, {
+    width: "100%",
+    cols: hCols
+  }, shouldShowDnD && DnDHandleComponent, /* @__PURE__ */ React2.createElement(HeaderCellTitle, {
+    column,
+    ctx,
+    draggableProps,
+    textWrap
+  }), rightIcons, isResizeable && column.canResize !== false && /* @__PURE__ */ React2.createElement(HeaderResizer, {
+    column
+  })), /* @__PURE__ */ React2.createElement("span", {
+    id: `${column.id}-instructions`,
+    style: { display: "none" },
+    "aria-hidden": "false"
+  }, buildScreenReaderInstructions(colSpan, dragAndDropColumns && column.disableDnD !== true, hasFilter, column.canSort)));
 };
-
 const HeaderCell = connector(HeaderCellComp);
-
-export { HeaderCell };
+export {
+  HeaderCell
+};
+//# sourceMappingURL=HeaderCell.js.map

package/esm/parts/Headers/HeaderCell.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\n/* eslint-disable max-lines */\n/* eslint-disable complexity */\n/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo, useRef } from 'react';\nimport { connect, ConnectedProps } from 'react-redux';\nimport { Grid } from '@elliemae/ds-grid';\nimport { useDispatchHeadersActions } from '../../redux/reducers';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled';\nimport { DataTableContext } from '../../DataTableContext';\nimport { SortByCaret } from '../SortByCaret';\nimport { DnDHandle } from '..';\nimport { SortableItemContext } from '../HoC/SortableItemContext';\nimport { FilterMapItem } from '../Filters';\nimport { HeaderResizer } from './HeaderResizer';\nimport { TypescriptColumn } from '../../types/props';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers';\nimport { useHeaderCellConfig } from './useHeaderCellConfig';\nimport { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol';\nimport { DATA_TESTID } from '../../configs/constants';\nimport { HeaderCellTitle } from './HeaderCellTitle';\n\nconst buildScreenReaderInstructions = (colSpan: number, draggable: boolean, filterable: boolean, sortable: boolean) => {\n  const preffix = colSpan === 1 ? '' : 'Column Group. ';\n  if (!draggable && !filterable && !sortable) return preffix;\n\n  let message = sortable\n    ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n    : '';\n  if (draggable && filterable) {\n    message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n  } else if (draggable || filterable) {\n    message = `This column is ${\n      draggable ? 'draggable' : 'filterable'\n    }. To enable this interaction press the enter key. ${message}`;\n  }\n  return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n  column: TypescriptColumn;\n  isDragOverlay: boolean;\n  colSpan: number;\n}\n\nfunction mapStateToProps(state, ownProps) {\n  return {\n    reduxHeader: state.headers?.[ownProps.column.id],\n  };\n}\n\nconst connector = connect(mapStateToProps);\n\nconst HeaderCellComp: React.ComponentType<HeaderCellCompProps & ConnectedProps<typeof connector>> = (props) => {\n  const { reduxHeader, column, isDragOverlay, colSpan } = props;\n  const ctx = useContext(DataTableContext);\n  const {\n    tableProps: { isResizeable, onColumnSortChange, dragAndDropColumns, onFiltersChange, filters, textWrap },\n    flattenedData,\n  } = ctx;\n  const { patchHeader } = useDispatchHeadersActions();\n  const dragHandleRef = useRef<HTMLDivElement>(null);\n  const filterIconRef = useRef<HTMLDivElement>(null);\n\n  const { draggableProps } = useContext(SortableItemContext);\n\n  const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging } = useHeaderCellConfig({\n    column,\n    dragAndDropColumns,\n    draggableProps,\n    reduxHeader,\n    isDragOverlay,\n  });\n\n  useRecoverFocusCol(isDragging, dragHandleRef);\n\n  const rightIcons = useMemo(() => {\n    if (!hasRightIcons) return null;\n    return (\n      <StyledHeaderRightIconsWrapper>\n        <FilterMapItem\n          column={column}\n          ctx={ctx}\n          onFiltersChange={onFiltersChange}\n          reduxHeader={reduxHeader}\n          filterValue={filters}\n          innerRef={filterIconRef}\n        />\n        {hasSortingCaret && <SortByCaret isSortedDesc={column.isSortedDesc} />}\n      </StyledHeaderRightIconsWrapper>\n    );\n  }, [hasRightIcons, column, ctx, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n  const DnDHandleComponent = useMemo(\n    () => (\n      <Grid mr=\"2px\" alignItems=\"center\" style={{ position: 'relative' }}>\n        <StyledFocusWithin hideFocus={isDragging}>\n          <DnDHandle\n            key={column.id}\n            innerRef={dragHandleRef}\n            isReachable={reduxHeader?.withTabStops}\n            id={column.id}\n            isDragOverlay={isDragOverlay}\n          />\n        </StyledFocusWithin>\n      </Grid>\n    ),\n    [column.id, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n  );\n\n  const handlers = useHeaderCellHandlers({\n    hasFilter,\n    patchHeader,\n    column,\n    reduxHeader,\n    hasDnD,\n    onColumnSortChange,\n    dragHandleRef,\n    filterIconRef,\n    headerRef: column.ref,\n  });\n\n  return (\n    <StyledHeadTh\n      column={column}\n      {...handlers}\n      role={colSpan === 1 ? 'columnheader' : 'group'}\n      colSpan={colSpan}\n      aria-describedby={`${column.id}-instructions`}\n      // eslint-disable-next-line no-nested-ternary\n      aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n      data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n      isFirstRowGroup={!!flattenedData[0]?.original?.dimsumHeaderValue}\n      tabIndex={column.isFocuseable === false ? -1 : 0}\n      isDragOverlay={isDragOverlay}\n      isDraggingActive={draggableProps && draggableProps.active}\n      shouldShowDnD={shouldShowDnD}\n      ref={column.ref}\n    >\n      <Grid width=\"100%\" cols={hCols}>\n        {shouldShowDnD && DnDHandleComponent}\n        <HeaderCellTitle column={column} ctx={ctx} draggableProps={draggableProps} textWrap={textWrap} />\n        {rightIcons}\n        {isResizeable && column.canResize !== false && <HeaderResizer column={column} />}\n      </Grid>\n      <span id={`${column.id}-instructions`} style={{ display: 'none' }} aria-hidden=\"false\">\n        {buildScreenReaderInstructions(\n          colSpan,\n          dragAndDropColumns && column.disableDnD !== true,\n          hasFilter,\n          column.canSort,\n        )}\n      </span>\n    </StyledHeadTh>\n  );\n};\n\nexport const HeaderCell = connector(HeaderCellComp);\n"],
+  "mappings": "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",
+  "names": []
+}