@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 b=require("react"),f=require("prop-types"),s=require("@progress/kendo-react-common"),v=require("./Group.js"),w=require("../package-metadata.js");function y(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const t=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(o,r,t.get?t:{enumerable:!0,get:()=>d[r]})}}return o.default=d,Object.freeze(o)}const p=y(b),c={andButton:"button.k-group-start",orButton:"button.k-group-end",addFilterButton:'button[title="Add Expression"]',addGroupButton:'button[title="Add Group"]',removeButton:'button[title="Remove"]',filterFieldWrapper:".k-filter-field",filterOperatorWrapper:".k-filter-operator",filterValueWrapper:".k-filter-value",toolbarElement:".k-toolbar"},h=class h extends p.Component{constructor(o){super(o),this.wrapperRef=p.createRef(),this.showLicenseWatermark=!1,this.onFilterChange=r=>{const t={filter:r.nextFilter,syntheticEvent:r.syntheticEvent,nativeEvent:r.nativeEvent,target:this};this.props.onChange.call(void 0,t)},this.onGroupRemove=r=>{const t={filter:{...this.props.value,filters:[]},syntheticEvent:r.syntheticEvent,nativeEvent:r.nativeEvent,target:this};this.props.onChange.call(void 0,t)},this.onKeyDown=r=>{var t;(t=this.navigation)==null||t.triggerKeyboardEvent(r)},this.showLicenseWatermark=!s.validatePackage(w.packageMetadata,{component:"Filter"})}componentDidMount(){this.wrapperRef&&(this.navigation=new s.Navigation({tabIndex:0,root:this.wrapperRef,selectors:[".k-filter"],keyboardEvents:{keydown:{Tab:(o,r,t)=>{const e=o.getElementsByClassName("k-filter-lines")[0];e&&s.disableNavigatableContainer(e)},ArrowUp:(o,r,t)=>{t.preventDefault();const e=s.getActiveElement(document),i=e==null?void 0:e.closest(c.toolbarElement),n=o.getElementsByClassName("k-toolbar"),l=Array.from(n).findIndex(m=>m===i)-1,u=n[l];o.getElementsByClassName("k-filter-lines")[0]&&s.focusFirstFocusableChild(u)},ArrowDown:(o,r,t)=>{t.preventDefault();const e=s.getActiveElement(document),i=e==null?void 0:e.closest(c.toolbarElement),n=o.getElementsByClassName("k-toolbar"),l=Array.from(n).findIndex(m=>m===i)+1,u=n[l],a=o.getElementsByClassName("k-filter-lines")[0];a&&(s.enableNavigatableContainer(a,[c.filterFieldWrapper,c.filterOperatorWrapper,c.filterValueWrapper]),s.focusFirstFocusableChild(u))},ArrowRight:(o,r,t)=>{t.preventDefault();const e=s.getActiveElement(document),i=e==null?void 0:e.nextElementSibling,n=e==null?void 0:e.closest(c.toolbarElement),l=o.querySelector('[aria-label="Filter toolbar"]');e&&i&&!(n===l)&&i.focus()},ArrowLeft:(o,r,t)=>{t.preventDefault();const e=s.getActiveElement(document),i=e==null?void 0:e.previousElementSibling,n=e==null?void 0:e.closest(c.toolbarElement),l=o.querySelector('[aria-label="Filter toolbar"]');e&&i&&!(n===l)&&i.focus()},Enter:(o,r,t)=>{t.preventDefault();const e=s.getActiveElement(document),i=o.querySelector(c.removeButton),n=e==null?void 0:e.closest(c.toolbarElement),l=o.getElementsByClassName("k-toolbar"),u=Array.from(l).findIndex(a=>a===n)-1;if(n===l[0]){const a=n.lastElementChild;a&&a.click()}if(n!==l[0]){const a=l[u].lastElementChild;e&&e.title===i.title&&a&&(e.click(),a.focus())}}}}}))}render(){return p.createElement("div",{className:s.classNames("k-filter",this.props.className),style:this.props.style,ref:this.wrapperRef,onKeyDown:this.onKeyDown},p.createElement("ul",{role:"tree",className:"k-filter-container","aria-label":this.props.ariaLabel},p.createElement("li",{role:"treeitem",className:"k-filter-group-main"},p.createElement(v.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&&p.createElement(s.WatermarkOverlay,null))}};h.propTypes={className:f.string,style:f.object,fields:function(o,r){const t=o[r];if(t===void 0)return new Error(`Property '${r}' is missing.`);if(Array.isArray(t)){if(Object.keys(t.reduce((e,i)=>({...e,[i.name]:1}),{})).length!==t.length)return new Error(`Property '${r}' needs to contain objects with unique 'name' field.`)}else return new Error(`Property '${r}' needs to be Array<FieldSettings>.`);return null},ariaLabelGroup:f.string,ariaLabelExpression:f.string,value:f.object.isRequired,onChange:f.func.isRequired};let g=h;exports.Filter=g;exports.selectors=c;