@progress/kendo-react-grid 9.0.0-develop.9 → 9.0.1-develop.1

package/header/GridHeaderSelectionCell.mjs

@@ -6,42 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import { GridColumnMenuWrapper as c } from "../columnMenu/GridColumnMenuWrapper.mjs";
-import { selectRow as o, messages as a } from "../messages/index.mjs";
-import { registerForLocalization as p, provideLocalizationService as l } from "@progress/kendo-react-intl";
-import { withIdHOC as d, withUnstyledHOC as h } from "@progress/kendo-react-common";
-class i extends e.Component {
-  get _inputId() {
-    return this.props.id;
-  }
-  render() {
-    const n = l(this), { columnMenuWrapperProps: t } = this.props, r = [
-      /* @__PURE__ */ e.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ e.createElement(
-        "input",
-        {
-          id: this._inputId,
-          type: "checkbox",
-          tabIndex: -1,
-          className: "k-checkbox k-checkbox-md k-rounded-md",
-          "aria-label": n.toLanguageString(o, a[o]),
-          "aria-checked": this.props.selectionValue,
-          checked: this.props.selectionValue,
-          onChange: (s) => this.props.selectionChange({
-            field: this.props.field,
-            syntheticEvent: s
-          })
-        }
-      )),
-      t.columnMenu && /* @__PURE__ */ e.createElement(c, { ...t })
-    ];
-    return this.props.render ? this.props.render.call(void 0, r, this.props) : r;
-  }
-}
-p(i);
-const C = d(
-  h(i)
-);
+import * as n from "react";
+import { GridColumnMenuWrapper as d } from "../columnMenu/GridColumnMenuWrapper.mjs";
+import { selectRow as a, messages as m } from "../messages/index.mjs";
+import { useLocalization as u } from "@progress/kendo-react-intl";
+import { useId as s } from "@progress/kendo-react-common";
+const b = (e) => {
+  const l = s(), o = u(), i = e.id || l, { columnMenuWrapperProps: t } = e, c = [
+    /* @__PURE__ */ n.createElement("span", { key: 0, className: "k-checkbox-wrap" }, /* @__PURE__ */ n.createElement(
+      "input",
+      {
+        id: i,
+        type: "checkbox",
+        tabIndex: -1,
+        className: "k-checkbox k-checkbox-md k-rounded-md",
+        "aria-label": o.toLanguageString(a, m[a]),
+        "aria-checked": e.selectionValue,
+        checked: e.selectionValue,
+        onChange: (r) => e.selectionChange({
+          field: e.field,
+          syntheticEvent: r
+        })
+      }
+    )),
+    t.columnMenu && /* @__PURE__ */ n.createElement(d, { ...t })
+  ];
+  return e.render ? e.render.call(void 0, c, e) : c;
+};
 export {
-  C as GridHeaderSelectionCell
+  b as GridHeaderSelectionCell
 };

package/header/GroupPanel.js

@@ -5,4 +5,4 @@
  * 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 u=require("react"),g=require("../drag/GroupingIndicator.js"),l=require("@progress/kendo-react-intl"),s=require("../messages/index.js");function h(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,r.get?r:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const i=h(u);class c extends i.Component{constructor(){super(...arguments),this.onGroupRemove=(o,e)=>{const r=this.props.group.slice();r.splice(e,1),this.props.groupChange(r,o)},this.onGroupSortChange=(o,e,r,n)=>{const a=Object.assign({},r,{dir:n}),p=this.props.group.slice();p.splice(e,1,a),this.props.groupChange(p,o)}}render(){const e=(this.props.group||[]).map((r,n)=>i.createElement(g.GroupingIndicator,{key:n,index:n,dir:r.dir||"asc",title:this.props.resolveTitle(r.field),onRemove:a=>{this.onGroupRemove(a,n)},onSortChange:(a,p)=>{this.onGroupSortChange(a,n,r,p)},onPress:this.props.pressHandler,onDrag:this.props.dragHandler,onRelease:this.props.releaseHandler,onContextMenu:this.props.onContextMenu}));return i.createElement("div",{ref:this.props.refCallback,className:"k-grouping-header",role:"toolbar","aria-label":l.provideLocalizationService(this).toLanguageString(s.groupPanelAriaLabel,s.messages[s.groupPanelAriaLabel]),"aria-controls":this.props.ariaControls||""},i.createElement("div",{className:"k-chip-list k-chip-list-md",role:"none"},e),i.createElement("div",{className:"k-grouping-drop-container"},!e.length&&l.provideLocalizationService(this).toLanguageString(s.groupPanelEmpty,s.messages[s.groupPanelEmpty])," "))}}l.registerForLocalization(c);exports.GroupPanel=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),p=require("../drag/GroupingIndicator.js"),b=require("@progress/kendo-react-intl"),a=require("../messages/index.js");function f(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const c=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(l,r,c.get?c:{enumerable:!0,get:()=>e[r]})}}return l.default=e,Object.freeze(l)}const i=f(m),P=e=>{const l=(o,n)=>{const t=e.group.slice();t.splice(n,1),e.groupChange(t,o)},r=(o,n,t,s)=>{const d=Object.assign({},t,{dir:s}),g=e.group.slice();g.splice(n,1,d),e.groupChange(g,o)},c=b.useLocalization(),u=(e.group||[]).map((o,n)=>i.createElement(p.GroupingIndicator,{key:n,index:n,dir:o.dir||"asc",title:e.resolveTitle(o.field),onRemove:t=>{l(t,n)},onSortChange:(t,s)=>{r(t,n,o,s)},onPress:e.pressHandler,onDrag:e.dragHandler,onRelease:e.releaseHandler,onContextMenu:e.onContextMenu}));return i.createElement("div",{ref:e.refCallback,className:"k-grouping-header",role:"toolbar","aria-label":c.toLanguageString(a.groupPanelAriaLabel,a.messages[a.groupPanelAriaLabel]),"aria-controls":e.ariaControls||""},i.createElement("div",{className:"k-chip-list k-chip-list-md",role:"none"},u),i.createElement("div",{className:"k-grouping-drop-container"},!u.length&&c.toLanguageString(a.groupPanelEmpty,a.messages[a.groupPanelEmpty])," "))};exports.GroupPanel=P;

package/header/GroupPanel.mjs

@@ -6,55 +6,49 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { GroupingIndicator as c } from "../drag/GroupingIndicator.mjs";
-import { provideLocalizationService as a, registerForLocalization as u } from "@progress/kendo-react-intl";
-import { groupPanelAriaLabel as i, messages as l, groupPanelEmpty as g } from "../messages/index.mjs";
-class h extends t.Component {
-  constructor() {
-    super(...arguments), this.onGroupRemove = (p, r) => {
-      const o = this.props.group.slice();
-      o.splice(r, 1), this.props.groupChange(o, p);
-    }, this.onGroupSortChange = (p, r, o, e) => {
-      const s = Object.assign({}, o, { dir: e }), n = this.props.group.slice();
-      n.splice(r, 1, s), this.props.groupChange(n, p);
-    };
-  }
-  render() {
-    const r = (this.props.group || []).map((o, e) => /* @__PURE__ */ t.createElement(
-      c,
-      {
-        key: e,
-        index: e,
-        dir: o.dir || "asc",
-        title: this.props.resolveTitle(o.field),
-        onRemove: (s) => {
-          this.onGroupRemove(s, e);
-        },
-        onSortChange: (s, n) => {
-          this.onGroupSortChange(s, e, o, n);
-        },
-        onPress: this.props.pressHandler,
-        onDrag: this.props.dragHandler,
-        onRelease: this.props.releaseHandler,
-        onContextMenu: this.props.onContextMenu
-      }
-    ));
-    return /* @__PURE__ */ t.createElement(
-      "div",
-      {
-        ref: this.props.refCallback,
-        className: "k-grouping-header",
-        role: "toolbar",
-        "aria-label": a(this).toLanguageString(i, l[i]),
-        "aria-controls": this.props.ariaControls || ""
+import * as r from "react";
+import { GroupingIndicator as h } from "../drag/GroupingIndicator.mjs";
+import { useLocalization as C } from "@progress/kendo-react-intl";
+import { groupPanelAriaLabel as c, messages as g, groupPanelEmpty as u } from "../messages/index.mjs";
+const P = (e) => {
+  const m = (a, o) => {
+    const n = e.group.slice();
+    n.splice(o, 1), e.groupChange(n, a);
+  }, d = (a, o, n, t) => {
+    const p = Object.assign({}, n, { dir: t }), s = e.group.slice();
+    s.splice(o, 1, p), e.groupChange(s, a);
+  }, l = C(), i = (e.group || []).map((a, o) => /* @__PURE__ */ r.createElement(
+    h,
+    {
+      key: o,
+      index: o,
+      dir: a.dir || "asc",
+      title: e.resolveTitle(a.field),
+      onRemove: (n) => {
+        m(n, o);
       },
-      /* @__PURE__ */ t.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, r),
-      /* @__PURE__ */ t.createElement("div", { className: "k-grouping-drop-container" }, !r.length && a(this).toLanguageString(g, l[g]), " ")
-    );
-  }
-}
-u(h);
+      onSortChange: (n, t) => {
+        d(n, o, a, t);
+      },
+      onPress: e.pressHandler,
+      onDrag: e.dragHandler,
+      onRelease: e.releaseHandler,
+      onContextMenu: e.onContextMenu
+    }
+  ));
+  return /* @__PURE__ */ r.createElement(
+    "div",
+    {
+      ref: e.refCallback,
+      className: "k-grouping-header",
+      role: "toolbar",
+      "aria-label": l.toLanguageString(c, g[c]),
+      "aria-controls": e.ariaControls || ""
+    },
+    /* @__PURE__ */ r.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, i),
+    /* @__PURE__ */ r.createElement("div", { className: "k-grouping-drop-container" }, !i.length && l.toLanguageString(u, g[u]), " ")
+  );
+};
 export {
-  h as GroupPanel
+  P as GroupPanel
 };

package/header/Header.js

@@ -5,4 +5,4 @@
  * 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 i=require("react"),r=require("@progress/kendo-react-common"),o=require("@progress/kendo-react-data-tools");function c(l){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const s in l)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(l,s);Object.defineProperty(e,s,t.get?t:{enumerable:!0,get:()=>l[s]})}}return e.default=l,Object.freeze(e)}const a=c(i);class n extends a.Component{constructor(){super(...arguments),this.headerWrap=null,this.table=null,this.syncScroll=!1,this.scrollbarWidth=r.getScrollbarWidth(),this.onScroll=e=>{if(this.syncScroll){this.syncScroll=!1;return}if(!this.headerWrap)return;const s=this.headerWrap.scrollLeft,t=this.props.scrollableDataElement();t&&t.scrollLeft!==s&&(t.scrollLeft=s)}}get element(){return this.props.elemRef.current}componentDidMount(){const e=o.isRtl(this.element);this.props.columnResize&&this.props.columnResize.setIsRtl(e),this.forceUpdate()}setScrollLeft(e){this.headerWrap&&this.headerWrap.scrollLeft!==e&&(this.syncScroll=!0,this.headerWrap.scrollLeft=e)}setWidth(e){this.table&&(this.table.style.width=e+"px")}render(){const e=this.context&&this.context.uGrid?this.context.uGrid:r.uGrid,{size:s="md"}=this.props;return this.props.staticHeaders?a.createElement("div",{ref:this.props.elemRef,className:r.classNames(e.header({draggable:this.props.draggable}),this.props.className),role:"presentation"},a.createElement("div",{ref:t=>{this.headerWrap=t},className:r.classNames(e.headerWrap({})),style:this.props.hasScrollbarWidth?{}:{borderWidth:0},onScroll:this.onScroll,role:"presentation"},a.createElement("table",{ref:t=>{this.table=t},className:r.classNames(e.headerTable({size:s}),this.props.className),role:"presentation"},a.createElement("colgroup",{ref:t=>{this.props.columnResize.colGroupHeader=t}},this.props.cols),a.createElement("thead",{className:r.classNames(e.tableThead({})),role:"rowgroup",...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)))):a.createElement("thead",{role:"presentation",className:r.classNames(e.thead({draggable:this.props.draggable}),this.props.className),...o.tableKeyboardNavigationHeaderAttributes},this.props.headerRow,this.props.filterRow)}}exports.Header=n;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),r=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-data-tools");function h(e){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,l.get?l:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const a=h(N),m=a.forwardRef((e,n)=>{const t=a.useRef(null),l=a.useRef(null),o=a.useRef(!1),b=r.useRtl(e.elemRef);e.columnResize&&e.columnResize.setIsRtl(b==="rtl"),a.useImperativeHandle(n,()=>({setScrollLeft:c=>{t.current&&t.current.scrollLeft!==c&&(o.current=!0,t.current.scrollLeft=c)},setWidth:c=>{l.current&&(l.current.style.width=c+"px")},table:()=>l.current}));const g=c=>{if(o.current){o.current=!1;return}if(!t.current)return;const d=t.current.scrollLeft,i=e.scrollableDataElement();i&&i.scrollLeft!==d&&(i.scrollLeft=d)},u=r.useUnstyled(),s=u&&u.uGrid?u.uGrid:r.uGrid,{size:R="md"}=e;return e.staticHeaders?a.createElement("div",{ref:e.elemRef,className:r.classNames(s.header({draggable:e.draggable}),e.className),role:"presentation"},a.createElement("div",{ref:t,className:r.classNames(s.headerWrap({})),style:e.hasScrollbarWidth?{}:{borderWidth:0},onScroll:g,role:"presentation"},a.createElement("table",{ref:l,className:r.classNames(s.headerTable({size:R}),e.className),role:"presentation"},a.createElement("colgroup",{ref:c=>{e.columnResize.colGroupHeader=c}},e.cols),a.createElement("thead",{className:r.classNames(s.tableThead({})),role:"rowgroup",...f.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)))):a.createElement("thead",{role:"presentation",className:r.classNames(s.thead({draggable:e.draggable}),e.className),...f.tableKeyboardNavigationHeaderAttributes},e.headerRow,e.filterRow)});m.displayName="KendoReactHeader";exports.Header=m;

package/header/Header.mjs

@@ -6,105 +6,86 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as s from "react";
-import { getScrollbarWidth as o, uGrid as i, classNames as r } from "@progress/kendo-react-common";
-import { isRtl as h, tableKeyboardNavigationHeaderAttributes as a } from "@progress/kendo-react-data-tools";
-class d extends s.Component {
-  constructor() {
-    super(...arguments), this.headerWrap = null, this.table = null, this.syncScroll = !1, this.scrollbarWidth = o(), this.onScroll = (e) => {
-      if (this.syncScroll) {
-        this.syncScroll = !1;
-        return;
-      }
-      if (!this.headerWrap)
-        return;
-      const l = this.headerWrap.scrollLeft, t = this.props.scrollableDataElement();
-      t && t.scrollLeft !== l && (t.scrollLeft = l);
-    };
-  }
-  get element() {
-    return this.props.elemRef.current;
-  }
-  componentDidMount() {
-    const e = h(this.element);
-    this.props.columnResize && this.props.columnResize.setIsRtl(e), this.forceUpdate();
-  }
-  /**
-   *
-   * @param scrollLeft - Scrolls to the left (in pixels).
-   */
-  setScrollLeft(e) {
-    this.headerWrap && this.headerWrap.scrollLeft !== e && (this.syncScroll = !0, this.headerWrap.scrollLeft = e);
-  }
-  /**
-   *
-   * @param width - Scrolls the width (in pixels).
-   */
-  setWidth(e) {
-    this.table && (this.table.style.width = e + "px");
-  }
-  render() {
-    const e = this.context && this.context.uGrid ? this.context.uGrid : i, { size: l = "md" } = this.props;
-    return this.props.staticHeaders ? /* @__PURE__ */ s.createElement(
+import * as t from "react";
+import { useRtl as h, useUnstyled as g, uGrid as N, classNames as c } from "@progress/kendo-react-common";
+import { tableKeyboardNavigationHeaderAttributes as u } from "@progress/kendo-react-data-tools";
+const E = t.forwardRef((e, f) => {
+  const l = t.useRef(null), n = t.useRef(null), s = t.useRef(!1), m = h(e.elemRef);
+  e.columnResize && e.columnResize.setIsRtl(m === "rtl"), t.useImperativeHandle(f, () => ({
+    setScrollLeft: (r) => {
+      l.current && l.current.scrollLeft !== r && (s.current = !0, l.current.scrollLeft = r);
+    },
+    setWidth: (r) => {
+      n.current && (n.current.style.width = r + "px");
+    },
+    table: () => n.current
+  }));
+  const R = (r) => {
+    if (s.current) {
+      s.current = !1;
+      return;
+    }
+    if (!l.current)
+      return;
+    const i = l.current.scrollLeft, d = e.scrollableDataElement();
+    d && d.scrollLeft !== i && (d.scrollLeft = i);
+  }, o = g(), a = o && o.uGrid ? o.uGrid : N, { size: b = "md" } = e;
+  return e.staticHeaders ? /* @__PURE__ */ t.createElement(
+    "div",
+    {
+      ref: e.elemRef,
+      className: c(a.header({ draggable: e.draggable }), e.className),
+      role: "presentation"
+    },
+    /* @__PURE__ */ t.createElement(
       "div",
       {
-        ref: this.props.elemRef,
-        className: r(e.header({ draggable: this.props.draggable }), this.props.className),
+        ref: l,
+        className: c(a.headerWrap({})),
+        style: e.hasScrollbarWidth ? {} : { borderWidth: 0 },
+        onScroll: R,
         role: "presentation"
       },
-      /* @__PURE__ */ s.createElement(
-        "div",
+      /* @__PURE__ */ t.createElement(
+        "table",
         {
-          ref: (t) => {
-            this.headerWrap = t;
-          },
-          className: r(e.headerWrap({})),
-          style: this.props.hasScrollbarWidth ? {} : { borderWidth: 0 },
-          onScroll: this.onScroll,
+          ref: n,
+          className: c(a.headerTable({ size: b }), e.className),
           role: "presentation"
         },
-        /* @__PURE__ */ s.createElement(
-          "table",
+        /* @__PURE__ */ t.createElement(
+          "colgroup",
+          {
+            ref: (r) => {
+              e.columnResize.colGroupHeader = r;
+            }
+          },
+          e.cols
+        ),
+        /* @__PURE__ */ t.createElement(
+          "thead",
           {
-            ref: (t) => {
-              this.table = t;
-            },
-            className: r(e.headerTable({ size: l }), this.props.className),
-            role: "presentation"
+            className: c(a.tableThead({})),
+            role: "rowgroup",
+            ...u
           },
-          /* @__PURE__ */ s.createElement(
-            "colgroup",
-            {
-              ref: (t) => {
-                this.props.columnResize.colGroupHeader = t;
-              }
-            },
-            this.props.cols
-          ),
-          /* @__PURE__ */ s.createElement(
-            "thead",
-            {
-              className: r(e.tableThead({})),
-              role: "rowgroup",
-              ...a
-            },
-            this.props.headerRow,
-            this.props.filterRow
-          )
+          e.headerRow,
+          e.filterRow
         )
       )
-    ) : /* @__PURE__ */ s.createElement(
-      "thead",
-      {
-        role: "presentation",
-        className: r(e.thead({ draggable: this.props.draggable }), this.props.className),
-        ...a
-      },
-      this.props.headerRow,
-      this.props.filterRow
-    );
-  }
-}
+    )
+  ) : /* @__PURE__ */ t.createElement(
+    "thead",
+    {
+      role: "presentation",
+      className: c(a.thead({ draggable: e.draggable }), e.className),
+      ...u
+    },
+    e.headerRow,
+    e.filterRow
+  );
+});
+E.displayName = "KendoReactHeader";
 export {
-  d as Header
+  E as Header
 };