@elliemae/ds-data-table 2.0.0-alpha.3 → 2.0.0-alpha.7

package/esm/exported-related/Toolbar/Toolbar.js

@@ -7,7 +7,6 @@ import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../styled.js';
 import 'react/jsx-runtime';

package/esm/helpers/addCellData.js

@@ -13,7 +13,8 @@ const addColumnData = (datum, column) => {
     value: getCellValue(datum, column.accessor),
     render: column.Cell || BasicCell,
     row: datum,
-    ref: /*#__PURE__*/React.createRef()
+    ref: /*#__PURE__*/React.createRef(),
+    id: `${datum.uid}/${column.id}`
   });
 };
 

package/esm/helpers/dndkit/hierarchy/customCollisionDetection.js

@@ -4,9 +4,8 @@ import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/helpers/dndkit/hierarchy/getHierarchyKeyboardCoordinates.js

@@ -5,9 +5,8 @@ import 'react';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js

@@ -4,9 +4,8 @@ import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import '../../../styled.js';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/parts/Cells/index.js

@@ -31,7 +31,7 @@ const Cells = props => {
           const ActionComponent = cell.render;
           jsx = /*#__PURE__*/_jsx(StyledActionCell, {
             role: "cell"
-          }, row.uid + column.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
+          }, cell.id, _ActionComponent || (_ActionComponent = /*#__PURE__*/_jsx(ActionComponent, {
             row: row,
             cell: cell,
             column: column,
@@ -49,7 +49,7 @@ const Cells = props => {
             isRowSelected: isRowSelected,
             shouldAddExpandCell: isUserCell && shouldAddExpandCell,
             isDragOverlay: isDragOverlay
-          }, row.uid + column.id);
+          }, cell.id);
         } // Drag overlay only need to print the DnD handle and the first user's cell
 
 

package/esm/parts/DnDHandle.js

@@ -7,7 +7,6 @@ import { SortableItemContext } from './HoC/SortableItemContext.js';
 import { DATA_TESTID } from '../configs/constants.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../styled.js';
 import 'react/jsx-runtime';

package/esm/parts/FilterBar/FiltersBar.js

@@ -2,17 +2,16 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React, { useContext, useMemo, useRef, useCallback } from 'react';
 import DSButton from '@elliemae/ds-button';
 import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import '../../exported-related/FilterPopover.js';
-import '../../styled.js';
-import DataTableContext from '../../DataTableContext.js';
-import 'react/jsx-runtime';
+import '@elliemae/ds-popperjs';
 import 'styled-components';
+import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
+import '../../styled.js';
+import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../TableContent.js';
@@ -20,6 +19,7 @@ import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import DataTableContext from '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';

package/esm/parts/FilterBar/components/MultiSelectPill.js

@@ -19,6 +19,7 @@ const MultiSelectPill = ({
 
     if (newFilters[filterIndex].value.length === 0) {
       if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+      newFilters.splice(filterIndex, 1);
     }
 
     onFiltersChange(newFilters);
@@ -26,11 +27,11 @@ const MultiSelectPill = ({
   return value !== null && value !== void 0 && value.length ? /*#__PURE__*/_jsx(DSPillGroupV2, {}, void 0, /*#__PURE__*/_jsx(DSPillV2, {
     type: "label",
     label: columnHeader
-  }), value.map(val => /*#__PURE__*/_jsx(DSPillV2, {
+  }), value.map((val, index) => /*#__PURE__*/_jsx(DSPillV2, {
     type: "removable",
     label: val,
     onRemove: () => handleOnRemove(val),
-    innerRef: innerRef
+    innerRef: index === value.length - 1 ? innerRef : {}
   }, val))) : null;
 };
 

package/esm/parts/Filters/index.js

@@ -6,19 +6,17 @@ import { SingleSelectFilter } from '../../addons/Filters/Components/SelectFilter
 import { MultiSelectFilter } from '../../addons/Filters/Components/SelectFilter/MultiSelectFilter.js';
 import { SingleDateFilter } from '../../addons/Filters/Components/SingleDateFilter/index.js';
 import { TextInputFilter } from '../../addons/Filters/Components/TextInputFilter/index.js';
-import '../../exported-related/FilterPopover.js';
 import '@babel/runtime/helpers/esm/jsx';
-import '../../styled.js';
-import '../../DataTableContext.js';
-import { jsx } from 'react/jsx-runtime';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
+import '../../styled.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../TableContent.js';
@@ -26,15 +24,16 @@ import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import { FILTER_TYPES } from '../../exported-related/FilterTypes.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
-import '../../redux/reducers/index.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); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

package/esm/parts/Headers/HeaderCell.js

@@ -25,7 +25,6 @@ import { useRecoverFocusCol } from '../../hooks/useRecoverFocusCol.js';
 import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import { jsxs } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/parts/Headers/HeaderCellGroup.js

@@ -12,7 +12,6 @@ import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../../styled.js';
 import { jsxs } from 'react/jsx-runtime';

package/esm/parts/Headers/HeaderCellTitle.js

@@ -2,7 +2,27 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
 import 'react';
 import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
 import { RequiredDot } from './RequiredDot.js';
+import { DATA_TESTID } from '../../configs/constants.js';
+import 'react-virtual';
+import '../../configs/useRowFlattenization.js';
+import '@babel/runtime/helpers/esm/defineProperty';
+import '@elliemae/ds-icons';
+import 'styled-components';
+import '../../styled.js';
 import { jsx, Fragment } from 'react/jsx-runtime';
+import '@elliemae/ds-form/Checkbox';
+import '@elliemae/ds-form/Radio';
+import '../TableContent.js';
+import '@elliemae/ds-grid';
+import '@elliemae/ds-circular-progress-indicator';
+import '@elliemae/ds-icons/WarningTriangle';
+import '@elliemae/ds-system';
+import '@elliemae/ds-button';
+import '../../DataTableContext.js';
+import '../Row.js';
+import '../Footer.js';
+import '@elliemae/ds-icons/GripperVertical';
+import '../HoC/SortableItemContext.js';
 
 var _RequiredDot;
 
@@ -24,7 +44,8 @@ const HeaderCellTitle = ({
   style: {
     display: 'flex',
     alignItems: 'center'
-  }
+  },
+  "data-testid": DATA_TESTID.DATA_TABLE_HEADER_CELL_TITLE
 }, void 0, typeof column.Header === 'string' ? /*#__PURE__*/_jsx(StringTitle, {
   column: column,
   textWrap: textWrap

package/esm/parts/Headers/HeaderResizer.js

@@ -5,9 +5,8 @@ import 'react-virtual';
 import { columnsToGrid } from '../../helpers/columnsToGrid.js';
 import '../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import { StyledResizer } from '../../styled.js';
 import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';

package/esm/parts/RowLoading.js

@@ -7,7 +7,6 @@ import { DATA_TESTID } from '../configs/constants.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '../styled.js';
 import 'react/jsx-runtime';

package/esm/parts/RowVariants/index.js

@@ -1,18 +1,16 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
-import '../../exported-related/FilterPopover.js';
 import '@babel/runtime/helpers/esm/jsx';
-import '../../styled.js';
-import '../../DataTableContext.js';
-import { jsx } from 'react/jsx-runtime';
-import 'styled-components';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../redux/reducers/index.js';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
+import '../../styled.js';
+import { jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '../TableContent.js';
@@ -20,10 +18,12 @@ import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
+import '../../DataTableContext.js';
 import '../Row.js';
 import '../Footer.js';
 import '@elliemae/ds-icons/GripperVertical';
 import '../HoC/SortableItemContext.js';
+import '@elliemae/ds-icons/MoreOptionsVert';
 import 'uid';
 import { ROW_VARIANTS } from '../../exported-related/RowVariants.js';
 import '../../exported-related/Filters/applyOutOfTheBoxFilters.js';

package/esm/parts/TableContent.js

@@ -1,6 +1,6 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React, { useContext, useMemo } from 'react';
+import React, { useContext, useState, useMemo } from 'react';
 import { connect } from 'react-redux';
 import { StyledDataTableWrapper, StyledTableWrapper } from '../styled.js';
 import DataTableContext from '../DataTableContext.js';
@@ -9,9 +9,8 @@ import VirtualRowsList from './VirtualRowsList.js';
 import { DATA_TESTID } from '../configs/constants.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
@@ -50,11 +49,15 @@ const TableContentComponent = props => {
     allDataFlattened,
     visibleColumns
   } = useContext(DataTableContext);
+  const [shiftKeyPressed, setShiftKeyPressed] = useState(false);
   const PureTableContent = useMemo(() => /*#__PURE__*/jsxs(StyledDataTableWrapper, {
     "data-testid": DATA_TESTID.DATA_TABLE_CONTENT_WRAPPER,
     height: height,
     width: width,
     ref: forwardedRef,
+    noSelectionAllowed: shiftKeyPressed,
+    onKeyDown: e => setShiftKeyPressed(prevShiftKeyPressed => prevShiftKeyPressed || e.shiftKey),
+    onKeyUp: e => setShiftKeyPressed(prevShiftKeyPressed => prevShiftKeyPressed && e.code !== 'Shift'),
     children: [/*#__PURE__*/_jsx(StyledTableWrapper, {
       role: "table",
       "aria-rowcount": allDataFlattened.length,
@@ -63,7 +66,7 @@ const TableContentComponent = props => {
       height: height,
       width: width
     }, void 0, _VirtualRowsList || (_VirtualRowsList = /*#__PURE__*/_jsx(VirtualRowsList, {}))), pagination ? _Pagination || (_Pagination = /*#__PURE__*/_jsx(Pagination, {})) : null]
-  }), [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination]);
+  }), [height, width, forwardedRef, allDataFlattened.length, visibleColumns.length, pagination, shiftKeyPressed]);
   return PureTableContent;
 };
 

package/esm/parts/VirtualRowsList.js

@@ -15,9 +15,8 @@ import { DATA_TESTID } from '../configs/constants.js';
 import 'react-virtual';
 import '../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
 import '@elliemae/ds-icons';
+import 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';

package/esm/styled.js

@@ -10,7 +10,6 @@ import 'react-virtual';
 import './configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
 import '@babel/runtime/helpers/esm/jsx';
-import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import 'react/jsx-runtime';
 import '@elliemae/ds-form/Checkbox';
@@ -50,13 +49,9 @@ const StyledFocusWithin = /*#__PURE__*/styled(Grid).withConfig({
 })([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
 const StyledDataTableWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["", ""], ({
-  width = ' 100%',
-  height = ' 100%'
-}) => `
-  width: ${sizeToCss(width)};
-  height: ${sizeToCss(height)};
-`);
+})(["width:", ";height:", ";user-select:", ";"], props => sizeToCss(props.width ?? ' 100%'), props => sizeToCss(props.height ?? ' 100%'), ({
+  noSelectionAllowed
+}) => noSelectionAllowed ? 'none' : 'auto');
 const StyledTableWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-2"
 })(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0-alpha.7",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -642,9 +642,9 @@
   "dependencies": {
     "@dnd-kit/core": "^3.0.4",
     "@dnd-kit/sortable": "^3.0.1",
-    "@elliemae/ds-basic": "2.0.0-alpha.3",
-    "@elliemae/ds-date-picker": "2.0.0-alpha.3",
-    "@elliemae/ds-date-range-picker": "2.0.0-alpha.3",
+    "@elliemae/ds-basic": "2.0.0-alpha.7",
+    "@elliemae/ds-date-picker": "2.0.0-alpha.7",
+    "@elliemae/ds-date-range-picker": "2.0.0-alpha.7",
     "@popperjs/core": "^2.9.3",
     "@reduxjs/toolkit": "^1.5.1",
     "array-move": "^3.0.1",

package/types/configs/constants.d.ts

@@ -36,4 +36,5 @@ export declare const DATA_TESTID: {
     DATA_TABLE_ROW_HEADER_CONTENT: string;
     DATA_TABLE_ROW_GROUP_HEADER: string;
     DATA_TABLE_COLUMN_DRAG_OVERLAY: string;
+    DATA_TABLE_HEADER_CELL_TITLE: string;
 };

package/types/exported-related/FilterPopover.d.ts

@@ -1,13 +1,10 @@
 import React, { MutableRefObject } from 'react';
-import { TypescriptColumn } from '../types/props';
 interface FilterPopoverProps {
-    column: TypescriptColumn;
     columnId: string;
     triggerIcon: JSX.Element;
     menuContent: JSX.Element;
     onTriggerClick?: (id: string, e: UIEvent) => void;
     onClickOutsideMenu?: (id: string, e: UIEvent) => void;
-    removeWrapperStyles?: boolean;
     reduxHeader: {
         hideFilterButton: boolean;
         hideFilterMenu: boolean;

package/types/exported-related/RowRenderer/useRowRendererHandlers.d.ts

@@ -12,4 +12,5 @@ export declare const useRowRendererHandlers: ({ row, itemIndex, items, draggable
     handleItemClick: React.MouseEventHandler;
     handleKeyDown: React.KeyboardEventHandler;
     handleOnBlur: React.FocusEventHandler;
+    handleOnFocus: React.FocusEventHandler;
 };

package/types/styled.d.ts

@@ -4,7 +4,9 @@ interface WidthAndHeight {
     height?: string | number;
 }
 export declare const StyledFocusWithin: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>, any, {}, never>;
-export declare const StyledDataTableWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
+export declare const StyledDataTableWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight & {
+    noSelectionAllowed: boolean;
+}, never>;
 export declare const StyledTableWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
 export declare const StyledTableContentWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;
 export declare const StyledVirtualListWrapper: import("styled-components").StyledComponent<"div", any, WidthAndHeight, never>;