@elliemae/ds-data-table 2.3.0-next.1 → 2.3.0-next.10

package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -7,11 +7,11 @@ require('core-js/modules/web.dom-collections.iterator.js');
 require('core-js/modules/esnext.async-iterator.reduce.js');
 require('core-js/modules/esnext.iterator.constructor.js');
 require('core-js/modules/esnext.iterator.reduce.js');
-var React = require('react');
-var dsForm = require('@elliemae/ds-form');
-require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.filter.js');
 require('core-js/modules/esnext.iterator.filter.js');
+var React = require('react');
+var dsControlledForm = require('@elliemae/ds-controlled-form');
+require('@babel/runtime/helpers/defineProperty');
 require('core-js/modules/esnext.async-iterator.for-each.js');
 require('core-js/modules/esnext.iterator.for-each.js');
 require('@elliemae/ds-button');
@@ -26,6 +26,7 @@ require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../../styled.js');
 require('react/jsx-runtime');
+require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
@@ -61,6 +62,8 @@ const ComboboxEditableCell = props => {
   const cellValue = React.useMemo(() => cell.value, [cell.value]);
   const columnId = React.useMemo(() => cell.column.id, [cell.column.id]);
   const [value, setValue] = React.useState({
+    dsId: cellValue,
+    type: 'option',
     value: cellValue,
     label: cellValue
   });
@@ -71,6 +74,8 @@ const ComboboxEditableCell = props => {
 
       if (!uniqueValuesMap[currValue]) {
         optionsSoFar.push({
+          dsId: currValue,
+          type: 'option',
           value: currValue,
           label: currValue
         });
@@ -80,6 +85,10 @@ const ComboboxEditableCell = props => {
       return optionsSoFar;
     }, []);
   }, [flattenedData, columnId]);
+
+  const filterOptions = newFilter => uniqueOptions.filter(option => option.type === 'separator' || option.label.toLowerCase().includes(newFilter.toLowerCase()));
+
+  const [currentOptions, setCurrentOptions] = React.useState(uniqueOptions);
   const handleOnBlur = React.useCallback(() => {
     const property = columnId;
     onCellValueChange({
@@ -87,15 +96,17 @@ const ComboboxEditableCell = props => {
       property,
       rowIndex: cell.row.index
     });
-  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
+  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell]);
   return /*#__PURE__*/_jsx__default["default"](EditableCell.EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/_jsx__default["default"](dsForm.ComboBoxFreeSolo, {
-      value: value,
+    EditableRenderer: /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSComboBox, {
+      selectedValues: value,
       autoFocus: true,
+      withoutPortal: false,
       onBlur: handleOnBlur,
       onChange: setValue,
-      options: uniqueOptions
+      onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
+      options: currentOptions
     }),
     cell: cell,
     isRowSelected: isRowSelected

package/cjs/exported-related/FilterPopover.js

@@ -141,7 +141,7 @@ const FilterPopover = _ref2 => {
       innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
+  })), referenceElement && /*#__PURE__*/_jsx__default["default"](dsPopperjs.DSPopperJS, {
     referenceElement: referenceElement,
     showPopover: isMenuOpen,
     closeContextMenu: handleClickOutsideMenu,

package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -3,10 +3,10 @@ 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 { useContext, useMemo, useState, useCallback } from 'react';
-import { ComboBoxFreeSolo } from '@elliemae/ds-form';
 import 'core-js/modules/esnext.async-iterator.filter.js';
 import 'core-js/modules/esnext.iterator.filter.js';
+import { useContext, useMemo, useState, useCallback } from 'react';
+import { DSComboBox } from '@elliemae/ds-controlled-form';
 import 'core-js/modules/esnext.async-iterator.for-each.js';
 import 'core-js/modules/esnext.iterator.for-each.js';
 import '@babel/runtime/helpers/esm/defineProperty';
@@ -22,6 +22,7 @@ import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';
+import '@elliemae/ds-form';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
@@ -53,6 +54,8 @@ const ComboboxEditableCell = props => {
   const cellValue = useMemo(() => cell.value, [cell.value]);
   const columnId = useMemo(() => cell.column.id, [cell.column.id]);
   const [value, setValue] = useState({
+    dsId: cellValue,
+    type: 'option',
     value: cellValue,
     label: cellValue
   });
@@ -63,6 +66,8 @@ const ComboboxEditableCell = props => {
 
       if (!uniqueValuesMap[currValue]) {
         optionsSoFar.push({
+          dsId: currValue,
+          type: 'option',
           value: currValue,
           label: currValue
         });
@@ -72,6 +77,10 @@ const ComboboxEditableCell = props => {
       return optionsSoFar;
     }, []);
   }, [flattenedData, columnId]);
+
+  const filterOptions = newFilter => uniqueOptions.filter(option => option.type === 'separator' || option.label.toLowerCase().includes(newFilter.toLowerCase()));
+
+  const [currentOptions, setCurrentOptions] = useState(uniqueOptions);
   const handleOnBlur = useCallback(() => {
     const property = columnId;
     onCellValueChange({
@@ -79,15 +88,17 @@ const ComboboxEditableCell = props => {
       property,
       rowIndex: cell.row.index
     });
-  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell.row.index]);
+  }, [columnId, onCellValueChange, value === null || value === void 0 ? void 0 : value.value, cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
-    EditableRenderer: /*#__PURE__*/_jsx(ComboBoxFreeSolo, {
-      value: value,
+    EditableRenderer: /*#__PURE__*/_jsx(DSComboBox, {
+      selectedValues: value,
       autoFocus: true,
+      withoutPortal: false,
       onBlur: handleOnBlur,
       onChange: setValue,
-      options: uniqueOptions
+      onFilter: newFilter => setCurrentOptions(filterOptions(newFilter)),
+      options: currentOptions
     }),
     cell: cell,
     isRowSelected: isRowSelected

package/esm/exported-related/FilterPopover.js

@@ -130,7 +130,7 @@ const FilterPopover = _ref2 => {
       innerRef.current = _ref;
     },
     tabIndex: reduxHeader !== null && reduxHeader !== void 0 && reduxHeader.withTabStops ? 0 : -1
-  })), /*#__PURE__*/_jsx(DSPopperJS, {
+  })), referenceElement && /*#__PURE__*/_jsx(DSPopperJS, {
     referenceElement: referenceElement,
     showPopover: isMenuOpen,
     closeContextMenu: handleClickOutsideMenu,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.3.0-next.1",
+  "version": "2.3.0-next.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -570,23 +570,23 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.3.0-next.1",
-    "@elliemae/ds-circular-progress-indicator": "2.3.0-next.1",
-    "@elliemae/ds-controlled-form": "2.3.0-next.1",
-    "@elliemae/ds-drag-and-drop": "2.3.0-next.1",
-    "@elliemae/ds-dropdownmenu": "2.3.0-next.1",
-    "@elliemae/ds-form": "2.3.0-next.1",
-    "@elliemae/ds-form-layout-blocks": "2.3.0-next.1",
-    "@elliemae/ds-grid": "2.3.0-next.1",
-    "@elliemae/ds-icons": "2.3.0-next.1",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.1",
-    "@elliemae/ds-pagination": "2.3.0-next.1",
-    "@elliemae/ds-pills": "2.3.0-next.1",
-    "@elliemae/ds-popperjs": "2.3.0-next.1",
-    "@elliemae/ds-system": "2.3.0-next.1",
-    "@elliemae/ds-toolbar": "2.3.0-next.1",
-    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.1",
-    "@elliemae/ds-utilities": "2.3.0-next.1",
+    "@elliemae/ds-button": "2.3.0-next.10",
+    "@elliemae/ds-circular-progress-indicator": "2.3.0-next.10",
+    "@elliemae/ds-controlled-form": "2.3.0-next.10",
+    "@elliemae/ds-drag-and-drop": "2.3.0-next.10",
+    "@elliemae/ds-dropdownmenu": "2.3.0-next.10",
+    "@elliemae/ds-form": "2.3.0-next.10",
+    "@elliemae/ds-form-layout-blocks": "2.3.0-next.10",
+    "@elliemae/ds-grid": "2.3.0-next.10",
+    "@elliemae/ds-icons": "2.3.0-next.10",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.3.0-next.10",
+    "@elliemae/ds-pagination": "2.3.0-next.10",
+    "@elliemae/ds-pills": "2.3.0-next.10",
+    "@elliemae/ds-popperjs": "2.3.0-next.10",
+    "@elliemae/ds-system": "2.3.0-next.10",
+    "@elliemae/ds-toolbar": "2.3.0-next.10",
+    "@elliemae/ds-truncated-tooltip-text": "2.3.0-next.10",
+    "@elliemae/ds-utilities": "2.3.0-next.10",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",

package/types/redux/reducers/headersReducers/headersReducers.d.ts

@@ -0,0 +1,12 @@
+export declare const headersSlice: import("@reduxjs/toolkit").Slice<{}, {
+    patchHeaderFilterButtonAndMenuAction(state: import("immer/dist/internal").WritableDraft<{}>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    patchUpdateOneHeaderAction(state: import("immer/dist/internal").WritableDraft<{}>, action: {
+        payload: any;
+        type: string;
+    }): void;
+}, "headers">;
+export declare const patchHeaderFilterButtonAndMenuAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, patchUpdateOneHeaderAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>;
+export declare const reducer: import("redux").Reducer<{}, import("redux").AnyAction>;

package/types/redux/reducers/rowsReducers/rowsReducer.d.ts

@@ -0,0 +1,216 @@
+export declare const rowsSlice: import("@reduxjs/toolkit").Slice<{
+    isDraggingRow: boolean;
+    isKeyboardDraggingRow: boolean;
+    relativeRowMouseCord: {
+        isBefore: boolean;
+        isAfter: boolean;
+        isValid: boolean;
+        hoveredRowIndex: null;
+        x: null;
+        y: null;
+        relativeElementDOMRect: null;
+        relativeElementIndex: null;
+    };
+    draggedRowId: null;
+    hoverRowId: null;
+    activeRowId: null;
+    selectedRowId: null;
+    focusedRowId: null;
+}, {
+    setRowsIsDraggingAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowIsKeyboardDraggingAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowRelativeMouseCoordAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowDraggedRowIdAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowHoverRowIdAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowSelectedRowIdAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowFocusedRowIdAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+    setRowDnDActiveRowIdAction(state: import("immer/dist/internal").WritableDraft<{
+        isDraggingRow: boolean;
+        isKeyboardDraggingRow: boolean;
+        relativeRowMouseCord: {
+            isBefore: boolean;
+            isAfter: boolean;
+            isValid: boolean;
+            hoveredRowIndex: null;
+            x: null;
+            y: null;
+            relativeElementDOMRect: null;
+            relativeElementIndex: null;
+        };
+        draggedRowId: null;
+        hoverRowId: null;
+        activeRowId: null;
+        selectedRowId: null;
+        focusedRowId: null;
+    }>, action: {
+        payload: any;
+        type: string;
+    }): void;
+}, "rows">;
+export declare const setRowsIsDraggingAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowIsKeyboardDraggingAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowDraggedRowIdAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowHoverRowIdAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowSelectedRowIdAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowFocusedRowIdAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowRelativeMouseCoordAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>, setRowDnDActiveRowIdAction: import("@reduxjs/toolkit").ActionCreatorWithPayload<any, string>;
+export declare const reducer: import("redux").Reducer<{
+    isDraggingRow: boolean;
+    isKeyboardDraggingRow: boolean;
+    relativeRowMouseCord: {
+        isBefore: boolean;
+        isAfter: boolean;
+        isValid: boolean;
+        hoveredRowIndex: null;
+        x: null;
+        y: null;
+        relativeElementDOMRect: null;
+        relativeElementIndex: null;
+    };
+    draggedRowId: null;
+    hoverRowId: null;
+    activeRowId: null;
+    selectedRowId: null;
+    focusedRowId: null;
+}, import("redux").AnyAction>;