@revolist/revogrid 4.23.14 → 4.23.15

package/dist/revo-grid/revogr-filter-panel.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, d as createEvent, h, e as Host, g as getElement } from './index-Chp_81rd.js';
 import { d as debounce } from './debounce-PCRWZliA.js';
-import { i as isFilterBtn, e as AndOrButton, d as TrashButton } from './filter.button-C8XTWPU2.js';
+import { i as isFilterBtn, e as AndOrButton, f as ReorderButton, d as TrashButton } from './filter.button-B-RBiF67.js';
 
 (function closest() {
     if (!Element.prototype.matches) {
@@ -24,12 +24,55 @@ import { i as isFilterBtn, e as AndOrButton, d as TrashButton } from './filter.b
     }
 })();
 
-const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{display:block}revogr-filter-panel .filter-panel-dialog{position:fixed;top:0;left:0;z-index:100;max-height:calc(100vh - 16px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);border:1px solid var(--revo-grid-filter-panel-border, #cecece);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));padding:10px;border-radius:8px;margin:0;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-panel-dialog::backdrop{background:transparent}revogr-filter-panel .filter-panel-dialog .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel .filter-panel-dialog label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel .filter-panel-dialog select{width:100%}revogr-filter-panel .filter-panel-dialog input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-panel-dialog .filter-actions{text-align:right;margin-right:-5px}revogr-filter-panel .filter-panel-dialog .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel .filter-panel-dialog{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-action{display:flex;justify-content:space-between;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);height:10px}.select-input{display:flex;justify-content:space-between;align-items:center}`;
+const FILTER_REORDER_MIME = 'text/revogrid-filter-id';
+function setFilterReorderData(dataTransfer, id) {
+    if (!dataTransfer) {
+        return;
+    }
+    dataTransfer.effectAllowed = 'move';
+    dataTransfer.setData(FILTER_REORDER_MIME, String(id));
+    dataTransfer.setData('text/plain', String(id));
+}
+function getFilterReorderId(dataTransfer) {
+    if (!dataTransfer) {
+        return;
+    }
+    const rawId = dataTransfer.getData(FILTER_REORDER_MIME) || dataTransfer.getData('text/plain');
+    const normalizedId = rawId.trim();
+    if (!normalizedId) {
+        return;
+    }
+    const id = Number(normalizedId);
+    return Number.isFinite(id) ? id : undefined;
+}
+function moveFilterItem(items, sourceId, targetId) {
+    if (sourceId === targetId) {
+        return false;
+    }
+    const sourceIndex = items.findIndex(item => item.id === sourceId);
+    const targetIndex = items.findIndex(item => item.id === targetId);
+    if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+        return false;
+    }
+    const relationsByPosition = items.map(item => { var _a; return (_a = item.relation) !== null && _a !== void 0 ? _a : 'and'; });
+    const [movedItem] = items.splice(sourceIndex, 1);
+    items.splice(targetIndex, 0, movedItem);
+    items.forEach((item, index) => {
+        var _a;
+        item.relation = index === items.length - 1
+            ? 'and'
+            : (_a = relationsByPosition[index]) !== null && _a !== void 0 ? _a : 'and';
+    });
+    return true;
+}
+
+const filterStyleCss = () => `.revo-button{position:relative;overflow:hidden;color:#fff;background-color:#4545ff;height:32px;line-height:32px;padding:0 15px;outline:0;border:0;border-radius:7px;box-sizing:border-box;cursor:pointer}.revo-button.green{background-color:#009037}.revo-button.red{background-color:#E0662E}.revo-button:disabled,.revo-button[disabled]{cursor:not-allowed !important;filter:opacity(0.35) !important}.revo-button.outline{border:1px solid #dbdbdb;line-height:30px;background:none;color:#000;box-shadow:none}revo-grid[theme^=dark] .revo-button.outline{border:1px solid #404040;color:#d8d8d8}revogr-filter-panel{display:block}revogr-filter-panel .filter-panel-dialog{position:fixed;top:0;left:0;z-index:100;max-height:calc(100vh - 16px);overflow:auto;opacity:1;transform:none;background-color:var(--revo-grid-filter-panel-bg, #fff);border:1px solid var(--revo-grid-filter-panel-border, #cecece);transform-origin:62px 0px;box-shadow:0 5px 18px -2px var(--revo-grid-filter-panel-shadow, rgba(0, 0, 0, 0.15));box-sizing:border-box;padding:10px;border-radius:8px;margin:0;min-width:220px;text-align:left;animation:revogr-filter-panel-open 140ms cubic-bezier(0.2, 0, 0, 1)}revogr-filter-panel .filter-panel-dialog .filter-holder>div{display:flex;flex-direction:column}revogr-filter-panel .filter-panel-dialog label{font-size:13px;display:block;padding:8px 0}revogr-filter-panel .filter-panel-dialog select{width:100%}revogr-filter-panel .filter-panel-dialog input[type=text]{border:0;min-height:34px;margin:5px 0;background:var(--revo-grid-filter-panel-input-bg, #f3f3f3);border-radius:5px;padding:0 10px;box-sizing:border-box;width:100%}revogr-filter-panel .filter-panel-dialog .filter-actions{position:sticky;right:0;bottom:-10px;left:0;z-index:1;text-align:right;margin:10px -10px -10px;padding:0 5px 10px 10px;background:var(--revo-grid-filter-panel-bg, #fff);border-top:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9)}revogr-filter-panel .filter-panel-dialog .filter-actions button{margin-top:10px;margin-right:5px}@keyframes revogr-filter-panel-open{from{opacity:0;transform:translateY(-4px) scale(0.98)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){revogr-filter-panel .filter-panel-dialog{animation:none}}.rgHeaderCell:hover .rv-filter{transition:opacity 267ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 178ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}.rgHeaderCell:hover .rv-filter,.rgHeaderCell .rv-filter.active{opacity:1}.rgHeaderCell .rv-filter{height:24px;width:24px;background:none;border:0;opacity:0;visibility:visible;cursor:pointer;border-radius:4px}.rgHeaderCell .rv-filter.active{color:#10224a}.rgHeaderCell .rv-filter .filter-img{color:gray;width:11px}.select-css{display:block;font-family:sans-serif;line-height:1.3;padding:0.6em 1.4em 0.5em 0.8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid var(--revo-grid-filter-panel-select-border, #d9d9d9);box-shadow:transparent;border-radius:0.5em;appearance:none;background-color:var(--revo-grid-filter-panel-input-bg, #f3f3f3);background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat, repeat;background-position:right 0.7em top 50%, 0 0;background-size:0.65em auto, 100%;}.select-css::-ms-expand{display:none}.select-css:hover{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.select-css:focus{border-color:var(--revo-grid-filter-panel-select-border-hover, #d9d9d9);box-shadow:0 0 1px 3px rgba(59, 153, 252, 0.7);box-shadow:0 0 0 3px -moz-mac-focusring;outline:none}.select-css option{font-weight:normal}.select-css:disabled,.select-css[aria-disabled=true]{color:gray;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22graytext%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #ffffff 0%, #ffffff 100%)}.select-css:disabled:hover,.select-css[aria-disabled=true]{border-color:var(--revo-grid-filter-panel-select-border, #d9d9d9)}.multi-filter-list{margin-top:5px;margin-bottom:5px}.multi-filter-list div{white-space:nowrap}.multi-filter-list .multi-filter-list-row{display:flex;align-items:center;gap:6px;position:relative}.multi-filter-list .multi-filter-list-row.filter-row-dragging{opacity:0.65}.multi-filter-list .multi-filter-list-row.filter-row-drag-over::before{content:"";position:absolute;top:-4px;right:0;left:0;z-index:2;height:2px;background:var(--revo-grid-filter-panel-reorder-accent, #007cb2);border-radius:999px;box-shadow:0 0 0 2px var(--revo-grid-filter-panel-bg, #fff)}.multi-filter-list .multi-filter-list-row.filter-row-drop-active .filter-row-drop-target{pointer-events:auto}.multi-filter-list .filter-row-drop-target{position:absolute;inset:0;z-index:1;padding:0;pointer-events:none;background:transparent;border:0}.multi-filter-list .multi-filter-list-action{display:flex;align-self:stretch;flex:0 0 auto;justify-content:flex-end;align-items:center}.multi-filter-list .and-or-button{margin:0 0 0 10px;min-width:58px;cursor:pointer}.multi-filter-list .trash-button{margin:0 0 -2px 6px;padding:0;border:0;background:transparent;color:inherit;cursor:pointer;width:22px;height:100%;font-size:16px}.multi-filter-list .trash-button .trash-img{width:1em}.multi-filter-list .reorder-button{border:0;background:transparent;color:var(--revo-grid-filter-panel-reorder-color, #6b7280);cursor:grab;font-family:monospace;font-size:12px;letter-spacing:0;line-height:1;padding:6px 2px;transform:scaleX(0.8);width:16px}.multi-filter-list .reorder-button.filter-row-drag-over{color:var(--revo-grid-filter-panel-reorder-accent, #007cb2)}.multi-filter-list .reorder-button:active{cursor:grabbing}.multi-filter-list-container{padding:0;margin:0;list-style:none}.add-filter-divider{display:block;margin:0 -10px 10px -10px;border-bottom:1px solid var(--revo-grid-filter-panel-divider, #d9d9d9);height:10px}.select-input{display:flex;align-items:center;flex:1 1 auto;gap:6px;min-width:0}.select-input .select-filter,.select-input .filter-extra{flex:1 1 0;min-width:0}.select-input .select-filter{width:auto}.select-input .filter-extra{display:flex}.select-input .filter-extra>*{width:100%}.select-input input[type=text],.select-input input[type=date]{margin:0}`;
 
 const defaultType = 'none';
 const FILTER_LIST_CLASS = 'multi-filter-list';
 const FILTER_LIST_CLASS_ACTION = 'multi-filter-list-action';
 const FILTER_ID = 'add-filter';
+const VIEWPORT_PADDING = 8;
 const FilterPanel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -46,6 +89,9 @@ const FilterPanel = class {
             placeholder: 'Enter value...',
             and: 'and',
             or: 'or',
+            filterCondition: 'Filter condition',
+            removeFilter: 'Remove filter',
+            reorderFilter: 'Reorder filter',
         };
         this.isFilterIdSet = false;
         this.filterId = 0;
@@ -119,18 +165,28 @@ const FilterPanel = class {
         if (typeof prop === 'undefined')
             return '';
         const propFilters = (_b = this.filterItems[prop]) !== null && _b !== void 0 ? _b : [];
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (h("div", { key: this.filterId }, propFilters.map((filter, index) => {
+        const visibleFilterCount = propFilters.filter(filter => !filter.hidden).length;
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
+        return (h("div", { key: this.filterId }, h("ul", { class: "multi-filter-list-container" }, propFilters.map((filter, index) => {
             let andOrButton;
             if (filter.hidden) {
                 return;
             }
             // hide toggle button if there is only one filter and the last one
             if (index !== this.filterItems[prop].length - 1) {
-                andOrButton = (h("div", { onClick: () => this.toggleFilterAndOr(filter.id) }, h(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or })));
+                andOrButton = (h(AndOrButton, { text: filter.relation === 'and' ? capts.and : capts.or, onClick: () => this.toggleFilterAndOr(filter.id) }));
             }
-            return (h("div", { key: filter.id, class: FILTER_LIST_CLASS }, h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton), h("div", { onClick: () => this.onRemoveFilter(filter.id) }, h(TrashButton, null))), h("div", null, this.renderExtra(prop, index))));
-        }), propFilters.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
+            const extra = this.renderExtra(prop, index);
+            const isDragging = this.draggedFilterId === filter.id;
+            const isDragOver = this.dragOverFilterId === filter.id && !isDragging;
+            const canReorder = visibleFilterCount > 1;
+            return (h("li", { key: filter.id, class: FILTER_LIST_CLASS, "aria-label": `${capts.filterCondition} ${index + 1}` }, h("div", { class: {
+                    'multi-filter-list-row': true,
+                    'filter-row-drop-active': this.draggedFilterId !== undefined && !isDragging,
+                    'filter-row-dragging': isDragging,
+                    'filter-row-drag-over': isDragOver,
+                } }, canReorder ? (h("button", { type: "button", class: "filter-row-drop-target", tabIndex: -1, "aria-label": `${capts.filterCondition} ${index + 1}`, onDragOver: e => this.onFilterDragOver(e, filter.id), onDragLeave: () => this.onFilterDragLeave(filter.id), onDrop: e => this.onFilterDrop(e, prop, filter.id) })) : '', canReorder ? (h(ReorderButton, { ariaLabel: capts.reorderFilter, dragging: isDragging, dragOver: isDragOver, onDragStart: e => this.onFilterDragStart(e, filter.id), onDragEnd: () => this.onFilterDragEnd(), onKeyDown: e => this.onFilterReorderKeyDown(e, prop, filter.id) })) : '', h("div", { class: { 'select-input': true } }, h("select", { class: "select-css select-filter", onChange: e => this.onFilterTypeChange(e, prop, index) }, this.renderSelectOptions(this.filterItems[prop][index].type, true)), extra ? h("div", { class: "filter-extra" }, extra) : ''), h("div", { class: FILTER_LIST_CLASS_ACTION }, andOrButton, h(TrashButton, { ariaLabel: capts.removeFilter, onClick: () => this.onRemoveFilter(filter.id) })))));
+        })), propFilters.filter(f => !f.hidden).length > 0 ? h("div", { class: "add-filter-divider" }) : ''));
     }
     componentDidRender() {
         this.syncDialog();
@@ -149,37 +205,35 @@ const FilterPanel = class {
             this.dialog.show();
         }
         if (this.changes.autoCorrect !== false) {
+            this.autoCorrect(this.dialog);
             requestAnimationFrame(() => this.autoCorrect(this.dialog));
         }
     }
     autoCorrect(el) {
-        if (!el) {
+        var _a;
+        if (!el || !this.changes) {
             return;
         }
+        el.style.maxHeight = '';
+        el.style.left = `${this.changes.x}px`;
+        el.style.top = `${this.changes.y}px`;
         const pos = el.getBoundingClientRect();
-        const maxLeft = Math.max(0, window.innerWidth - pos.width);
-        const maxTop = Math.max(0, window.innerHeight - pos.height);
-        if (pos.left > maxLeft) {
-            el.style.left = `${maxLeft}px`;
-        }
-        if (pos.top > maxTop) {
-            el.style.top = `${maxTop}px`;
-        }
-    }
-    onDialogMouseDown(e) {
-        if (!this.closeOnOutsideClick ||
-            e.target !== this.dialog ||
-            !this.dialog) {
-            return;
-        }
-        const rect = this.dialog.getBoundingClientRect();
-        const isInside = e.clientX >= rect.left &&
-            e.clientX <= rect.right &&
-            e.clientY >= rect.top &&
-            e.clientY <= rect.bottom;
-        if (!isInside) {
-            this.onCancel();
-        }
+        const anchorTop = (_a = this.changes.anchorY) !== null && _a !== void 0 ? _a : this.changes.y;
+        const anchorBottom = this.changes.y;
+        const spaceAbove = Math.max(0, anchorTop - VIEWPORT_PADDING);
+        const spaceBelow = Math.max(0, window.innerHeight - anchorBottom - VIEWPORT_PADDING);
+        const openAbove = pos.height > spaceBelow && spaceAbove > spaceBelow;
+        const availableHeight = Math.max(VIEWPORT_PADDING, openAbove ? spaceAbove : spaceBelow);
+        el.style.maxHeight = `${availableHeight}px`;
+        const adjustedPos = el.getBoundingClientRect();
+        const maxLeft = Math.max(VIEWPORT_PADDING, window.innerWidth - adjustedPos.width - VIEWPORT_PADDING);
+        const maxTop = Math.max(VIEWPORT_PADDING, window.innerHeight - adjustedPos.height - VIEWPORT_PADDING);
+        const left = Math.min(Math.max(VIEWPORT_PADDING, this.changes.x), maxLeft);
+        const top = openAbove
+            ? Math.min(Math.max(VIEWPORT_PADDING, anchorTop - adjustedPos.height), maxTop)
+            : Math.min(Math.max(VIEWPORT_PADDING, anchorBottom), maxTop);
+        el.style.left = `${left}px`;
+        el.style.top = `${top}px`;
     }
     onFilterTypeChange(e, prop, index) {
         if (!(e.target instanceof HTMLSelectElement)) {
@@ -271,6 +325,80 @@ const FilterPanel = class {
             this.debouncedApplyFilter();
         }
     }
+    onFilterDragStart(e, id) {
+        this.draggedFilterId = id;
+        setFilterReorderData(e.dataTransfer, id);
+    }
+    onFilterDragOver(e, id) {
+        if (this.draggedFilterId === undefined || this.draggedFilterId === id) {
+            return;
+        }
+        e.preventDefault();
+        if (e.dataTransfer) {
+            e.dataTransfer.dropEffect = 'move';
+        }
+        this.dragOverFilterId = id;
+    }
+    onFilterDragLeave(id) {
+        if (this.dragOverFilterId === id) {
+            this.dragOverFilterId = undefined;
+        }
+    }
+    onFilterDrop(e, prop, targetId) {
+        var _a;
+        e.preventDefault();
+        const sourceId = (_a = this.draggedFilterId) !== null && _a !== void 0 ? _a : getFilterReorderId(e.dataTransfer);
+        this.onFilterDragEnd();
+        if (sourceId === undefined) {
+            return;
+        }
+        const items = this.filterItems[prop];
+        if (!items) {
+            return;
+        }
+        if (!moveFilterItem(items, sourceId, targetId)) {
+            return;
+        }
+        this.filterId++;
+        if (!this.disableDynamicFiltering) {
+            this.debouncedApplyFilter();
+        }
+    }
+    onFilterDragEnd() {
+        this.draggedFilterId = undefined;
+        this.dragOverFilterId = undefined;
+    }
+    onFilterReorderKeyDown(e, prop, sourceId) {
+        let direction = 0;
+        if (e.key === 'ArrowUp') {
+            direction = -1;
+        }
+        else if (e.key === 'ArrowDown') {
+            direction = 1;
+        }
+        else {
+            return;
+        }
+        const items = this.filterItems[prop];
+        if (!items) {
+            return;
+        }
+        const visibleItems = items.filter(item => !item.hidden);
+        const sourceIndex = visibleItems.findIndex(item => item.id === sourceId);
+        if (sourceIndex === -1) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const target = visibleItems[sourceIndex + direction];
+        if (!target || !moveFilterItem(items, sourceId, target.id)) {
+            return;
+        }
+        this.filterId++;
+        if (!this.disableDynamicFiltering) {
+            this.debouncedApplyFilter();
+        }
+    }
     toggleFilterAndOr(id) {
         var _a;
         this.assertChanges();
@@ -309,7 +437,7 @@ const FilterPanel = class {
             });
         });
         if (!isDefaultTypeRemoved) {
-            const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+            const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
             options.push(h("option", { selected: this.currentFilterType === defaultType, value: defaultType }, prop && this.filterItems[prop] && this.filterItems[prop].length > 0
                 ? capts.add
                 : this.filterNames[defaultType]));
@@ -342,7 +470,7 @@ const FilterPanel = class {
                 select.focus();
             }
         };
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
         const extra = this.filterEntities[currentFilter[index].type].extra;
         if (typeof extra === 'function') {
             return extra(h, {
@@ -379,32 +507,33 @@ const FilterPanel = class {
             } }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
         const style = {
             left: `${(_b = (_a = this.changes) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0}px`,
             top: `${(_d = (_c = this.changes) === null || _c === void 0 ? void 0 : _c.y) !== null && _d !== void 0 ? _d : 0}px`,
         };
-        const capts = Object.assign(this.filterCaptionsInternal, this.filterCaptions);
-        return (h(Host, { key: '9fb424017d080876ff7796237917b4f41f617fe0' }, h("dialog", { key: '37b9f870b95f6fe1bd7be359dd7b77ef196e896e', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
+        const capts = Object.assign(Object.assign({}, this.filterCaptionsInternal), this.filterCaptions);
+        return (h(Host, { key: '4e969f8b7033363c885c94b1f7770917786669f2' }, h("dialog", { key: '79b2713724684fa99f56621fe43645a0b0ad54bf', class: "filter-panel-dialog", style: style, ref: el => (this.dialog = el), onCancel: e => {
                 e.preventDefault();
                 this.onCancel();
-            }, onMouseDown: e => this.onDialogMouseDown(e) }, this.changes && [
-            h("slot", { key: '76ec505a92d0a7c1ae0bbb5f4cac63555f3416be', slot: "header" }),
+            } }, this.changes && [
+            h("slot", { key: "header-slot", slot: "header" }),
             ((_f = (_e = this.changes).extraContent) === null || _f === void 0 ? void 0 : _f.call(_e, this.changes)) || '',
             ((_g = this.changes) === null || _g === void 0 ? void 0 : _g.hideDefaultFilters) !== true && [
-                h("label", { key: 'c6fd82c95f6005f286c7bc90de34956128a83246' }, capts.title),
-                h("div", { key: '5e7dac36ad79ba1b6072a0053b30aa384ade0dde', class: "filter-holder" }, this.getFilterItemsList()),
-                h("div", { key: 'd9b6103edbd138d4db845745686ee4c847310a66', class: "add-filter" }, h("select", { key: 'c1b321f2d19458f95ab3f9188d83d94bebdb688e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
+                h("label", { key: "filter-title" }, capts.title),
+                h("div", { key: "filter-holder", class: "filter-holder" }, this.getFilterItemsList()),
+                h("div", { key: "add-filter", class: "add-filter" }, h("select", { key: 'fc894bdfae1ff35d5c49adc7646dd3182b7bd49e', id: FILTER_ID, class: "select-css", onChange: e => this.onAddNewFilter(e) }, this.renderSelectOptions(this.currentFilterType))),
             ],
-            h("slot", { key: '1571dcbc5c57651deb42a4046272ff60fa74f5a7' }),
-            h("div", { key: '4aa7dee532336b084542df0209291b4c60378b49', class: "filter-actions" }, this.disableDynamicFiltering && [
-                h("button", { key: '4c1b3054cd1bb7f46877592f00f6634d0f7ecafa', id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
-                h("button", { key: 'f31a568c89be18b1a854cdd7d4726e01db24e338', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
+            h("slot", { key: "default-slot" }),
+            ((_j = (_h = this.changes).extraBottomContent) === null || _j === void 0 ? void 0 : _j.call(_h, this.changes)) || '',
+            h("div", { key: "filter-actions", class: "filter-actions" }, this.disableDynamicFiltering && [
+                h("button", { key: "save", id: "revo-button-save", "aria-label": "save", class: "revo-button green", onClick: () => this.onSave() }, capts.save),
+                h("button", { key: "cancel", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.cancel),
             ], !this.disableDynamicFiltering && [
-                h("button", { key: '5d40e8b1f13f94cff4f5a2e2aefeee8861104a9d', id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
-                h("button", { key: '67eac3abd16f6f6e2ed7089dcfb0d05524ddb7df', id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
+                h("button", { key: "ok", id: "revo-button-ok", "aria-label": "ok", class: "revo-button green", onClick: () => this.onCancel() }, capts.ok),
+                h("button", { key: "reset", id: "revo-button-reset", "aria-label": "reset", class: "revo-button outline", onClick: () => this.onReset() }, capts.reset),
             ]),
-            h("slot", { key: 'b27a9bb3ef814e1e09dca14eda3e332ff34c654c', slot: "footer" }),
+            h("slot", { key: "footer-slot", slot: "footer" }),
         ])));
     }
     get element() { return getElement(this); }

package/dist/types/components/data/column.service.d.ts

@@ -7,6 +7,11 @@ export type ColumnStores = {
 export type RowStores = {
     [T in DimensionRows]: Observable<DSourceState<DataType, DimensionRows>>;
 };
+type DataToApplyOptions = {
+    start: Cell;
+    data: DataFormat[][];
+    targetRange?: RangeArea | null;
+};
 export declare function getCellEditor(column: Pick<ColumnRegular, 'editor'> | undefined, editors?: Editors): EditorCtr | undefined;
 export default class ColumnService {
     private dataStore;
@@ -30,10 +35,13 @@ export default class ColumnService {
         changed: DataLookup;
         mapping: OldNewRangeMapping;
     };
-    getTransformedDataToApply(start: Cell, data: DataFormat[][]): {
+    getTransformedDataToApply({ start, data, targetRange, }: DataToApplyOptions): {
         changed: DataLookup;
         range: RangeArea | null;
     };
+    private getDataApplyBounds;
+    private applyClipboardRow;
+    private getAppliedRange;
     getRangeStaticData(d: RangeArea, value: DataFormat): DataLookup;
     getRangeTransformedToProps(d: RangeArea, store: Observable<DSourceState<DataType, DimensionRows>>): {
         prop: ColumnProp;
@@ -59,3 +67,4 @@ export default class ColumnService {
  */
 export declare function isRowDragService(rowDrag: RowDrag, model: ColumnDataSchemaModel): boolean;
 export declare function doPropMerge(existing: CellProps, extra: CellProps): CellProps;
+export {};

package/dist/types/components/data/row-renderer.d.ts

@@ -9,5 +9,5 @@ export interface RowProps extends JSXBase.HTMLAttributes {
     groupingLevel?: number;
 }
 export declare const PADDING_DEPTH = 10;
-declare const RowRenderer: ({ rowClass, index, size, start, depth, groupingLevel }: RowProps, cells: VNode[]) => any;
+declare const RowRenderer: ({ rowClass, index, size, start, depth, groupingLevel, ...attrs }: RowProps, cells: VNode[]) => any;
 export default RowRenderer;

package/dist/types/components/overlay/clipboard.utils.d.ts

@@ -0,0 +1,3 @@
+import type { ClipboardConfig } from "../../types/index";
+export declare function getRangeFillClipboardData(data: string[][], useClipboard: boolean | ClipboardConfig): string[][] | null;
+export declare function isClipboardRangeFillEnabled(useClipboard: boolean | ClipboardConfig): boolean;

package/dist/types/components/overlay/revogr-overlay-selection.d.ts

@@ -3,7 +3,7 @@ import ColumnService from '../data/column.service';
 import { type DSourceState } from "../../store/index";
 import { EventData } from './selection.utils';
 import { type Observable } from '../../utils';
-import type { SelectionStoreState, DimensionSettingsState, DataType, DimensionRows, ColumnRegular, DimensionCols, DragStartEvent, Cell, MultiDimensionType, Nullable, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, FocusRenderEvent, ApplyFocusEvent, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeEdit, RangeArea, TempRange, ChangedRange, BeforeRangeSaveDataDetails, SaveDataDetails, EditCellStore } from "../../types/index";
+import type { SelectionStoreState, DimensionSettingsState, DataType, DimensionRows, ColumnRegular, DimensionCols, DragStartEvent, Cell, MultiDimensionType, Nullable, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, FocusRenderEvent, ApplyFocusEvent, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeEdit, RangeArea, TempRange, ChangedRange, BeforeRangeSaveDataDetails, SaveDataDetails, EditCellStore, ClipboardConfig } from "../../types/index";
 /**
  * Component for overlaying the grid with the selection.
  */
@@ -23,9 +23,9 @@ export declare class OverlaySelection {
     canDrag: boolean;
     /**
      * Enable revogr-clipboard component (read more in revogr-clipboard component).
-     * Allows copy/paste.
+     * Allows copy/paste. Can be boolean or clipboard config.
      */
-    useClipboard: boolean;
+    useClipboard: boolean | ClipboardConfig;
     /** Stores */
     /** Selection, range, focus. */
     selectionStore: Observable<SelectionStoreState>;
@@ -256,6 +256,7 @@ export declare class OverlaySelection {
     private getRegion;
     private onCopy;
     private onPaste;
+    private getClipboardPasteTargetRange;
     private focusNext;
     protected clearCell(): void;
     private rowDragStart;

package/dist/types/components/revoGrid/revo-grid.d.ts

@@ -1,5 +1,5 @@
 import { type VNode, EventEmitter } from '../../stencil-public-runtime';
-import type { MultiDimensionType, DimensionRows, DimensionCols, DimensionTypeCol, RowHeaders, ColumnRegular, ColumnGrouping, DataType, RowDefinition, ColumnType, FocusTemplateFunc, PositionItem, ColumnProp, ViewPortScrollEvent, InitialHeaderClick, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeRangeSaveDataDetails, Cell, ChangedRange, RangeArea, AfterEditEvent, Theme, PluginBaseComponent, PluginProviders, FocusAfterRenderEvent, ExtraNodeFuncConfig, RowDragStartDetails, AdditionalData } from "../../types/index";
+import type { MultiDimensionType, DimensionRows, DimensionCols, DimensionTypeCol, RowHeaders, ColumnRegular, ColumnGrouping, DataType, RowDefinition, ColumnType, FocusTemplateFunc, PositionItem, ColumnProp, ViewPortScrollEvent, InitialHeaderClick, AllDimensionType, Editors, BeforeSaveDataDetails, BeforeRangeSaveDataDetails, Cell, ChangedRange, RangeArea, AfterEditEvent, Theme, PluginBaseComponent, PluginProviders, FocusAfterRenderEvent, ExtraNodeFuncConfig, RowDragStartDetails, AdditionalData, ClipboardConfig } from "../../types/index";
 import ColumnDataProvider from '../../services/column.data.provider';
 import { DataProvider } from '../../services/data.provider';
 import { DSourceState } from "../../store/index";
@@ -59,7 +59,7 @@ export declare class RevoGridComponent {
     rowSize: number;
     /** Indicates default column size. */
     colSize: number;
-    /** When true, user can range selection. */
+    /** When true, user can select a cell range. Required for range-based clipboard fill. */
     range: boolean;
     /** When true, grid in read only mode. */
     readonly: boolean;
@@ -71,8 +71,8 @@ export declare class RevoGridComponent {
     noHorizontalScrollTransfer: boolean;
     /** When true cell focus appear. */
     canFocus: boolean;
-    /** When true enable clipboard. */
-    useClipboard: boolean;
+    /** When true enable clipboard. Can be boolean or clipboard config. */
+    useClipboard: boolean | ClipboardConfig;
     /**
      * Columns - defines an array of grid columns.
      * Can be column or grouped column.

package/dist/types/components.d.ts

@@ -5,7 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+import { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 import { GridPlugin } from "./plugins/base.plugin";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 import { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -21,7 +21,7 @@ import { ResizeProps } from "./components/header/resizable.directive";
 import { HeaderRenderProps } from "./components/header/header-renderer";
 import { HeaderGroupRendererProps } from "./components/header/header-group-renderer";
 import { EventData } from "./components/overlay/selection.utils";
-export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
+export { AdditionalData, AfterEditEvent, AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeRowRenderEvent, BeforeSaveDataDetails, Cell, CellTemplateProp, ChangedRange, ClipboardConfig, ColumnDataSchemaModel, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionCols, DimensionRows, DimensionSettingsState, DimensionType, DimensionTypeCol, DragStartEvent, EditCell, EditorCtr, Editors, ElementScroll, ExtraNodeFuncConfig, FocusAfterRenderEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, MultiDimensionType, Nullable, PluginBaseComponent, PluginProviders, PositionItem, ProvidersColumns, RangeArea, RangeClipboardCopyEventProps, RangeClipboardPasteEvent, RowDefinition, RowDragStartDetails, RowHeaders, SaveDataDetails, SelectionStoreState, TempRange, Theme, ViewportData, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/index";
 export { GridPlugin } from "./plugins/base.plugin";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
 export { ColumnFilterConfig, FilterCaptions, FilterCollectionItem, LogicFunction, MultiFilterItem, ShowData } from "./plugins/filter/filter.types";
@@ -225,7 +225,7 @@ export namespace Components {
          */
         "plugins": GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range": boolean;
@@ -344,10 +344,10 @@ export namespace Components {
          */
         "updateColumns": (cols: ColumnRegular[]) => Promise<void>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -685,9 +685,9 @@ export namespace Components {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -1687,7 +1687,7 @@ declare namespace LocalJSX {
          */
         "plugins"?: GridPlugin[];
         /**
-          * When true, user can range selection.
+          * When true, user can select a cell range. Required for range-based clipboard fill.
           * @default false
          */
         "range"?: boolean;
@@ -1758,10 +1758,10 @@ declare namespace LocalJSX {
          */
         "trimmedRows"?: Record<number, boolean>;
         /**
-          * When true enable clipboard.
+          * When true enable clipboard. Can be boolean or clipboard config.
           * @default true
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     interface RevogrAttribution {
     }
@@ -2343,9 +2343,9 @@ declare namespace LocalJSX {
          */
         "selectionStore": Observable<SelectionStoreState>;
         /**
-          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste.
+          * Enable revogr-clipboard component (read more in revogr-clipboard component). Allows copy/paste. Can be boolean or clipboard config.
          */
-        "useClipboard"?: boolean;
+        "useClipboard"?: boolean | ClipboardConfig;
     }
     /**
      * Row headers component
@@ -2498,7 +2498,7 @@ declare namespace LocalJSX {
         "resize": boolean;
         "noHorizontalScrollTransfer": boolean;
         "canFocus": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyOnClose": boolean;
         "theme": Theme;
         "rowClass": string;
@@ -2552,7 +2552,7 @@ declare namespace LocalJSX {
         "readonly": boolean;
         "range": boolean;
         "canDrag": boolean;
-        "useClipboard": boolean;
+        "useClipboard": boolean | ClipboardConfig;
         "applyChangesOnClose": boolean;
         "additionalData": string;
         "isMobileDevice": boolean;

package/dist/types/plugins/filter/filter.button.d.ts

@@ -4,11 +4,32 @@ export declare const FILTER_BUTTON_ACTIVE = "active";
 export declare const FILTER_PROP = "hasFilter";
 export declare const AND_OR_BUTTON = "and-or-button";
 export declare const TRASH_BUTTON = "trash-button";
+export declare const REORDER_BUTTON = "reorder-button";
 type Props = {
     column: ColumnRegular;
 };
 export declare const FilterButton: ({ column }: Props) => any;
-export declare const TrashButton: () => any;
-export declare const AndOrButton: ({ text }: any) => any;
+type TrashButtonProps = {
+    ariaLabel: string;
+    onClick?: (event: MouseEvent) => void;
+};
+export declare const TrashButton: ({ ariaLabel, onClick }: TrashButtonProps) => any;
+type AndOrButtonProps = {
+    text: string;
+    onClick?: (event: MouseEvent) => void;
+};
+export declare const AndOrButton: ({ text, onClick }: AndOrButtonProps) => any;
+type ReorderButtonProps = {
+    ariaLabel: string;
+    dragging?: boolean;
+    dragOver?: boolean;
+    onDragStart?: (event: DragEvent) => void;
+    onDragEnd?: (event: DragEvent) => void;
+    onDragOver?: (event: DragEvent) => void;
+    onDragLeave?: (event: DragEvent) => void;
+    onDrop?: (event: DragEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+};
+export declare const ReorderButton: ({ ariaLabel, dragging, dragOver, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, onKeyDown, }: ReorderButtonProps) => any;
 export declare function isFilterBtn(e: HTMLElement): true | Element | null;
 export {};

package/dist/types/plugins/filter/filter.panel.d.ts

@@ -19,6 +19,8 @@ export declare class FilterPanel {
     currentFilterType: FilterType;
     changes: ShowData | undefined;
     filterItems: MultiFilterItem;
+    draggedFilterId: number | undefined;
+    dragOverFilterId: number | undefined;
     filterNames: Record<string, string>;
     filterEntities: Record<string, LogicFunction>;
     filterCaptions: Partial<FilterCaptions> | undefined;
@@ -40,7 +42,6 @@ export declare class FilterPanel {
     componentDidRender(): void;
     private syncDialog;
     private autoCorrect;
-    private onDialogMouseDown;
     private onFilterTypeChange;
     private debouncedApplyFilter;
     private onAddNewFilter;
@@ -49,6 +50,12 @@ export declare class FilterPanel {
     private onCancel;
     private onReset;
     private onRemoveFilter;
+    private onFilterDragStart;
+    private onFilterDragOver;
+    private onFilterDragLeave;
+    private onFilterDrop;
+    private onFilterDragEnd;
+    private onFilterReorderKeyDown;
     private toggleFilterAndOr;
     private assertChanges;
     renderSelectOptions(type: FilterType, isDefaultTypeRemoved?: boolean): VNode[] | undefined;

package/dist/types/plugins/filter/filter.plugin.d.ts

@@ -47,6 +47,7 @@ export declare class FilterPlugin extends BasePlugin {
     filterFunctionsIndexedByType: Record<string, LogicFunction>;
     filterProp: string;
     extraHyperContent?: (data: ShowData) => VNode | VNode[];
+    extraBottomHyperContent?: (data: ShowData) => VNode | VNode[];
     constructor(revogrid: HTMLRevoGridElement, providers: PluginProviders, config?: ColumnFilterConfig | undefined);
     beforeshow(_: ShowData): void;
     extraContent(): any;

package/dist/types/plugins/filter/filter.reorder.d.ts

@@ -0,0 +1,4 @@
+import type { FilterData } from './filter.types';
+export declare function setFilterReorderData(dataTransfer: DataTransfer | null, id: number): void;
+export declare function getFilterReorderId(dataTransfer: DataTransfer | null): number | undefined;
+export declare function moveFilterItem(items: FilterData[], sourceId: number, targetId: number): boolean;