@progress/kendo-react-grid 10.1.0-develop.8 → 10.1.0

package/README.md

@@ -7,7 +7,7 @@
 > -   This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid)—an enterprise-grade UI library with 120+ free and premium components.
 > -   This is a free React Data Grid (Table) component with premium features. To use the premium features of the KendoReact Data Grid (Table), you will need to [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid). You can use the free features even in production, no sign-up or license required.
 > -   If you're looking for more free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
-> - If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid) to learn how to configure your KendoReact licensing.
+> -   If you have an active license, visit the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid) to learn how to configure your KendoReact licensing.
 > -   Installing and working with this package indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid).
 > -   The [30-day free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid) gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
 
@@ -16,7 +16,7 @@
 How to start:
 
 ```sh
-npm install --save @progress/kendo-react-grid @progress/kendo-data-query @progress/kendo-drawing @progress/kendo-licensing @progress/kendo-react-animation @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-data-tools @progress/kendo-react-dateinputs @progress/kendo-react-indicators @progress/kendo-react-dropdowns @progress/kendo-react-inputs @progress/kendo-react-intl @progress/kendo-react-popup @progress/kendo-react-layout @progress/kendo-svg-icons
+npm i @progress/kendo-react-grid
 ```
 
 ## React Data Grid
@@ -62,7 +62,7 @@ Among the many features which the KendoReact Data Grid delivers are:
 -   [Detail templates (premium)](https://www.telerik.com/kendo-react-ui/components/grid/advanced-features/detail/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid)—The detail rows of the Grid provide additional details about a particular row of table data through expanding or collapsing its content.
 -   [Globalization (free)](https://www.telerik.com/kendo-react-ui/components/grid/globalization/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid)—By using the available globalization options in KendoReact, you can translate the Grid messages by adapting them to specific culture locales.
 -   [Theme support (free)](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-grid)—The KendoReact Grid, as well as all 120+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, Fluent, and Default) and can be further customized to match your specific design guidelines.
-- [Server and hybrid data operations (premium)](https://www.telerik.com/kendo-react-ui/components/grid/rsc-mode)—The RCS mode of the KendoReact Grid is a modern, high-performance implementation built on top of the React Server Components (or RSC) architecture allowing you to perform server and hybrid data operations.
+-   [Server and hybrid data operations (premium)](https://www.telerik.com/kendo-react-ui/components/grid/rsc-mode)—The RCS mode of the KendoReact Grid is a modern, high-performance implementation built on top of the React Server Components (or RSC) architecture allowing you to perform server and hybrid data operations.
 
 How to use the Data Grid component in your apps:
 
@@ -70,7 +70,7 @@ How to use the Data Grid component in your apps:
 import { Grid, GridColumn } from '@progress/kendo-react-grid';
 ...
 /**
-* Provide the data to populate the grid. 
+* Provide the data to populate the grid.
 */
 <Grid data={data}>
     <GridColumn field="DataField1" />

package/cells/GridFilterCell.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),D=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-react-dropdowns"),C=require("@progress/kendo-react-inputs"),E=require("@progress/kendo-react-dateinputs"),u=require("../messages/index.js"),O=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons"),g=require("../filterCommon.js"),y=require("@progress/kendo-react-common");function L(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const s=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,s.get?s:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const r=L(z),R=e=>{const t=r.useRef(),c=O.useLocalization(),s=()=>{if(e.filterType==="boolean")return;let n;const l=e.operators.find(o=>o.operator===e.operator)||null;return r.createElement(m.DropDownList,{ref:o=>n=o,size:e.size,value:l,onChange:b,className:"k-dropdown-operator",iconClassName:"k-i-filter k-icon",svgIcon:h.filterIcon,data:e.operators,textField:"text",title:c.toLanguageString(u.filterChooseOperator,u.messages[u.filterChooseOperator]),popupSettings:{width:"",onMouseDownOutside:function(o){!o.isAnchorClicked&&o.state&&o.state.props.show&&n&&n.togglePopup()}}})},d=(n,l)=>{g.cellInputChange(n,l,e)},b=n=>{g.cellOperatorChange(n,e.value,e.onChange)},k=n=>{g.cellBoolDropdownChange(n,e.onChange)},v=n=>{n.preventDefault(),e.onChange({value:"",operator:"",syntheticEvent:n}),t.current&&(t.current.element.value="",setTimeout(()=>{t.current.element.focus()},0))},w=(n,l,o)=>{switch(n){case"numeric":return r.createElement(C.NumericTextBox,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel});case"date":return r.createElement(E.DatePicker,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:a=>{!a.isAnchorClicked&&a.state&&a.state.props.show&&t&&t.current.togglePopup()}}});case"boolean":{const a=i=>i==null;return r.createElement(m.DropDownList,{ref:t,size:e.size,onChange:k,value:o.find(i=>i.operator===(a(l)?"":l)),data:o,textField:"text",title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:i=>{!i.isAnchorClicked&&i.state&&i.state.props.show&&t&&t.current.togglePopup()}}})}default:return r.createElement(C.TextBox,{ref:t,size:e.size,value:l||"",onChange:a=>{d(a.target.value,a.syntheticEvent)},title:e.title,"aria-label":e.ariaLabel})}},f=r.createElement("div",{className:"k-filtercell"},r.createElement("div",{className:"k-filtercell-wrapper"},w(e.filterType,e.value,e.booleanValues),r.createElement("div",{className:"k-filtercell-operator"},s()," ",r.createElement(D.Button,{size:e.size,icon:"filter-clear",svgIcon:h.filterClearIcon,className:y.classNames({"k-clear-button-visible":!!(!(e.value===null||e.value==="")||e.operator)}),title:c.toLanguageString(u.filterClearButton,u.messages[u.filterClearButton]),type:"button",onClick:v,disabled:!(!(e.value===null||e.value==="")||e.operator)}))));return e.render?e.render.call(void 0,f,e):f};exports.GridFilterCell=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),D=require("@progress/kendo-react-buttons"),m=require("@progress/kendo-react-dropdowns"),h=require("@progress/kendo-react-inputs"),E=require("@progress/kendo-react-dateinputs"),u=require("../messages/index.js"),O=require("@progress/kendo-react-intl"),C=require("@progress/kendo-svg-icons"),g=require("../filterCommon.js"),y=require("@progress/kendo-react-common");function L(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const s=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(t,c,s.get?s:{enumerable:!0,get:()=>e[c]})}}return t.default=e,Object.freeze(t)}const r=L(z),R=e=>{const t=r.useRef(),c=O.useLocalization(),s=()=>{if(e.filterType==="boolean")return;let n;const l=e.operators.find(o=>o.operator===e.operator)||null;return r.createElement(m.DropDownList,{ref:o=>n=o,size:e.size,value:l,onChange:b,className:"k-dropdown-operator",svgIcon:C.filterIcon,data:e.operators,textField:"text",title:c.toLanguageString(u.filterChooseOperator,u.messages[u.filterChooseOperator]),popupSettings:{width:"",onMouseDownOutside:function(o){!o.isAnchorClicked&&o.state&&o.state.props.show&&n&&n.togglePopup()}}})},d=(n,l)=>{g.cellInputChange(n,l,e)},b=n=>{g.cellOperatorChange(n,e.value,e.onChange)},v=n=>{g.cellBoolDropdownChange(n,e.onChange)},k=n=>{n.preventDefault(),e.onChange({value:"",operator:"",syntheticEvent:n}),t.current&&(t.current.element.value="",setTimeout(()=>{t.current.element.focus()},0))},w=(n,l,o)=>{switch(n){case"numeric":return r.createElement(h.NumericTextBox,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel});case"date":return r.createElement(E.DatePicker,{ref:t,size:e.size,value:l,onChange:a=>{d(a.value,a.syntheticEvent)},title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:a=>{!a.isAnchorClicked&&a.state&&a.state.props.show&&t&&t.current.togglePopup()}}});case"boolean":{const a=i=>i==null;return r.createElement(m.DropDownList,{ref:t,size:e.size,onChange:v,value:o.find(i=>i.operator===(a(l)?"":l)),data:o,textField:"text",title:e.title,ariaLabel:e.ariaLabel,popupSettings:{onMouseDownOutside:i=>{!i.isAnchorClicked&&i.state&&i.state.props.show&&t&&t.current.togglePopup()}}})}default:return r.createElement(h.TextBox,{ref:t,size:e.size,value:l||"",onChange:a=>{d(a.target.value,a.syntheticEvent)},title:e.title,"aria-label":e.ariaLabel})}},f=r.createElement("div",{className:"k-filtercell"},r.createElement("div",{className:"k-filtercell-wrapper"},w(e.filterType,e.value,e.booleanValues),r.createElement("div",{className:"k-filtercell-operator"},s()," ",r.createElement(D.Button,{size:e.size,svgIcon:C.filterClearIcon,className:y.classNames({"k-clear-button-visible":!!(!(e.value===null||e.value==="")||e.operator)}),title:c.toLanguageString(u.filterClearButton,u.messages[u.filterClearButton]),type:"button",onClick:k,disabled:!(!(e.value===null||e.value==="")||e.operator)}))));return e.render?e.render.call(void 0,f,e):f};exports.GridFilterCell=R;

package/cells/GridFilterCell.mjs

@@ -9,12 +9,12 @@
 import * as o from "react";
 import { Button as z } from "@progress/kendo-react-buttons";
 import { DropDownList as m } from "@progress/kendo-react-dropdowns";
-import { TextBox as w, NumericTextBox as k } from "@progress/kendo-react-inputs";
-import { DatePicker as L } from "@progress/kendo-react-dateinputs";
+import { TextBox as w, NumericTextBox as L } from "@progress/kendo-react-inputs";
+import { DatePicker as k } from "@progress/kendo-react-dateinputs";
 import { filterClearButton as f, messages as d, filterChooseOperator as g } from "../messages/index.mjs";
 import { useLocalization as x } from "@progress/kendo-react-intl";
-import { filterClearIcon as D, filterIcon as N } from "@progress/kendo-svg-icons";
-import { cellOperatorChange as y, cellInputChange as B, cellBoolDropdownChange as O } from "../filterCommon.mjs";
+import { filterClearIcon as D, filterIcon as y } from "@progress/kendo-svg-icons";
+import { cellOperatorChange as N, cellInputChange as B, cellBoolDropdownChange as O } from "../filterCommon.mjs";
 import { classNames as S } from "@progress/kendo-react-common";
 const j = (e) => {
   const n = o.useRef(), u = x(), h = () => {
@@ -30,8 +30,7 @@ const j = (e) => {
         value: r,
         onChange: C,
         className: "k-dropdown-operator",
-        iconClassName: "k-i-filter k-icon",
-        svgIcon: N,
+        svgIcon: y,
         data: e.operators,
         textField: "text",
         title: u.toLanguageString(g, d[g]),
@@ -46,7 +45,7 @@ const j = (e) => {
   }, c = (t, r) => {
     B(t, r, e);
   }, C = (t) => {
-    y(t, e.value, e.onChange);
+    N(t, e.value, e.onChange);
   }, v = (t) => {
     O(t, e.onChange);
   }, b = (t) => {
@@ -57,7 +56,7 @@ const j = (e) => {
     switch (t) {
       case "numeric":
         return /* @__PURE__ */ o.createElement(
-          k,
+          L,
           {
             ref: n,
             size: e.size,
@@ -71,7 +70,7 @@ const j = (e) => {
         );
       case "date":
         return /* @__PURE__ */ o.createElement(
-          L,
+          k,
           {
             ref: n,
             size: e.size,
@@ -128,7 +127,6 @@ const j = (e) => {
     z,
     {
       size: e.size,
-      icon: "filter-clear",
       svgIcon: D,
       className: S({
         "k-clear-button-visible": !!(!(e.value === null || e.value === "") || e.operator)