@progress/kendo-react-data-tools/filter/Filter.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),b=require("prop-types"),l=require("@progress/kendo-react-common"),F=require("./Group.js"),E=require("../package-metadata.js");function x(d){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const i in d)if(i!=="default"){const o=Object.getOwnPropertyDescriptor(d,i);Object.defineProperty(r,i,o.get?o:{enumerable:!0,get:()=>d[i]})}}return r.default=d,Object.freeze(r)}const g=x(R),s={filterFieldWrapper:".k-filter-field",filterOperatorWrapper:".k-filter-operator",filterValueWrapper:".k-filter-value",filterToolbar:".k-filter-toolbar",toolbarElement:".k-toolbar",groupToolbar:".k-filter-group-main > .k-filter-toolbar > .k-toolbar",subGroupToolbar:".k-filter-lines .k-filter-toolbar > .k-toolbar"},k=class k extends g.Component{constructor(r){super(r),this.wrapperRef=g.createRef(),this.showLicenseWatermark=!1,this.onFilterChange=i=>{const o={filter:i.nextFilter,syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,target:this};this.props.onChange.call(void 0,o)},this.onGroupRemove=i=>{const o={filter:{...this.props.value,filters:[]},syntheticEvent:i.syntheticEvent,nativeEvent:i.nativeEvent,target:this};this.props.onChange.call(void 0,o)},this.navigateVertical=(i,o,e)=>{if(!e)return;const t=e.classList.contains("k-filter-field")||e.classList.contains("k-filter-operator")||e.classList.contains("k-filter-value"),a=e.closest(s.toolbarElement),n=Array.from(o.getElementsByClassName("k-toolbar")),c=n.findIndex(h=>h===a),f=i==="up"?c-1:c+1,p=n[f];if(!o.getElementsByClassName("k-filter-lines")[0]||!p)return;a&&t&&l.disableNavigatableContainer(a,[s.filterFieldWrapper,s.filterOperatorWrapper,s.filterValueWrapper]),p.querySelectorAll(`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`).forEach((h,m)=>{h.tabIndex=m===0?0:-1});const v=p.querySelector(`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`);v?v.focus():l.focusFirstFocusableChild(p)},this.onKeyDown=i=>{var o;(o=this.navigation)==null||o.triggerKeyboardEvent(i)},this.showLicenseWatermark=!l.validatePackage(E.packageMetadata,{component:"Filter"}),this.licenseMessage=l.getLicenseMessage(E.packageMetadata)}componentDidMount(){this.wrapperRef&&(this.navigation=new l.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-filter"],keyboardEvents:{keydown:{Tab:(r,i,o)=>{const e=r.getElementsByClassName("k-filter-lines")[0];e&&l.disableNavigatableContainer(e)},Escape:(r,i,o)=>{const e=l.getActiveElement(document)||null,t=e==null?void 0:e.closest(s.toolbarElement),a=r.querySelector(s.groupToolbar),n=t==null?void 0:t.querySelector(".k-toolbar-button-group"),c=t===a||!!n,{isTextInput:f,isCombobox:p}=this.classifyActive(e);if(!c&&t&&e!==t)if(o.preventDefault(),l.disableNavigatableContainer(t,[s.filterFieldWrapper,s.filterOperatorWrapper,s.filterValueWrapper]),f||p){const u=e==null?void 0:e.closest(`${s.filterFieldWrapper}, ${s.filterOperatorWrapper}, ${s.filterValueWrapper}`);u&&u.focus()}else l.focusFirstFocusableChild(t)},ArrowUp:(r,i,o)=>{const e=l.getActiveElement(document)||null;if(!e)return;const{isPopup:t,isTextInput:a,isCombobox:n,isWrapper:c}=this.classifyActive(e);(t||a||n)&&!c||(o.preventDefault(),this.navigateVertical("up",r,e))},ArrowDown:(r,i,o)=>{const e=l.getActiveElement(document)||null;if(!e)return;const{isPopup:t,isTextInput:a,isCombobox:n,isWrapper:c}=this.classifyActive(e);(t||a||n)&&!c||(o.preventDefault(),this.navigateVertical("down",r,e))},ArrowRight:(r,i,o)=>{const e=l.getActiveElement(document)||null;if(!e)return;const{isTextInput:t}=this.classifyActive(e);if(t)return;o.preventDefault();const a=e==null?void 0:e.nextElementSibling,n=e==null?void 0:e.closest(s.toolbarElement),c=r.querySelector(s.groupToolbar),f=n==null?void 0:n.querySelector(".k-toolbar-button-group");e&&a&&!(n===c||!!f)&&a.focus()},ArrowLeft:(r,i,o)=>{const e=l.getActiveElement(document)||null;if(!e)return;const{isTextInput:t}=this.classifyActive(e);if(t)return;o.preventDefault();const a=e==null?void 0:e.previousElementSibling,n=e==null?void 0:e.closest(s.toolbarElement),c=r.querySelector(s.groupToolbar),f=n==null?void 0:n.querySelector(".k-toolbar-button-group");e&&a&&!(n===c||!!f)&&a.focus()},Enter:(r,i,o)=>{var p;o.preventDefault();const e=l.getActiveElement(document)||null;if(!e)return;const t=e==null?void 0:e.closest(s.toolbarElement),a=r.getElementsByClassName("k-toolbar"),n=r.querySelector(s.groupToolbar),c=t==null?void 0:t.querySelector(".k-toolbar-button-group");if(t===n||!!c){const u=t==null?void 0:t.lastElementChild;u&&e===u&&u.click();return}if(t&&e){const u=e.classList.contains("k-filter-field")||e.classList.contains("k-filter-operator")||e.classList.contains("k-filter-value"),w=t.querySelector('button[title="Remove"]');if(e===w){const h=Array.from(a).findIndex(W=>W===t)-1,m=(p=a[h])==null?void 0:p.lastElementChild;e.click(),m&&m.focus()}else u&&(l.enableNavigatableContainer(t,[s.filterFieldWrapper,s.filterOperatorWrapper,s.filterValueWrapper]),l.focusFirstFocusableChild(e))}}}}}))}render(){return g.createElement("div",{className:l.classNames("k-filter",this.props.className),style:this.props.style,ref:this.wrapperRef,onKeyDown:this.onKeyDown},g.createElement("ul",{role:"tree",className:"k-filter-container","aria-label":this.props.ariaLabel},g.createElement("li",{role:"treeitem","aria-selected":!1,className:"k-filter-group-main"},g.createElement(F.Group,{filter:this.props.value,fields:this.props.fields,ariaLabel:this.props.ariaLabelGroup,ariaLabelExpression:this.props.ariaLabelExpression,onChange:this.onFilterChange,onRemove:this.onGroupRemove,defaultGroupFilter:this.props.defaultGroupFilter||{logic:"and",filters:[]}}))),this.showLicenseWatermark&&g.createElement(l.WatermarkOverlay,{message:this.licenseMessage}))}classifyActive(r){var n,c;if(!r)return{isTextInput:!1,isCombobox:!1,isWrapper:!1,isPopup:!1};const i=r.tagName==="INPUT"||r.tagName==="TEXTAREA",o=((n=r.getAttribute)==null?void 0:n.call(r,"role"))==="combobox",e=r.classList,t=!!e&&(e.contains("k-filter-field")||e.contains("k-filter-operator")||e.contains("k-filter-value")),a=!!((c=r.closest)!=null&&c.call(r,".k-animation-container, .k-popup"));return{isTextInput:i,isCombobox:o,isWrapper:t,isPopup:a}}};k.propTypes={className:b.string,style:b.object,fields:function(r,i){const o=r[i];if(o===void 0)return new Error(`Property '${i}' is missing.`);if(Array.isArray(o)){if(Object.keys(o.reduce((e,t)=>({...e,[t.name]:1}),{})).length!==o.length)return new Error(`Property '${i}' needs to contain objects with unique 'name' field.`)}else return new Error(`Property '${i}' needs to be Array<FieldSettings>.`);return null},ariaLabelGroup:b.string,ariaLabelExpression:b.string,value:b.object.isRequired,onChange:b.func.isRequired};let y=k;exports.Filter=y;exports.selectors=s;