cx 26.2.1 → 26.2.3

package/src/widgets/grid/Grid.tsx

@@ -237,8 +237,8 @@ export interface GridColumnConfig {
   editable?: boolean;
   editor?: React.ReactNode;
   footer?: GridColumnFooterConfig | StringProp | NumberProp | false;
-  items?: React.ReactNode;
-  children?: React.ReactNode;
+  items?: ChildNode | ChildNode[];
+  children?: ChildNode | ChildNode[];
   key?: string;
   pad?: boolean;
   sortField?: string;
@@ -521,7 +521,10 @@ export interface GridConfig<T = any> extends StyledContainerConfig {
   focusable?: boolean;
 
   /** Callback function to retrieve grouping data. */
-  onGetGrouping?: (params: any, instance: Instance) => (string | GridGroupingConfig<T>)[];
+  onGetGrouping?: (
+    params: any,
+    instance: Instance,
+  ) => (string | GridGroupingConfig<T>)[];
 
   /** Callback function to dynamically calculate columns.  */
   onGetColumns?: (
@@ -788,7 +791,8 @@ export class Grid<T = unknown> extends ContainerBase<
     instance: GridInstance,
     groupingData: any,
   ) {
-    var row = this.row || {};
+    // Clone row to avoid mutating the original config
+    var row = { ...this.row };
     let columns = this.columns;
     if (this.onGetColumns) {
       let result = instance.invoke("onGetColumns", columnParams, instance);
@@ -812,9 +816,13 @@ export class Grid<T = unknown> extends ContainerBase<
     for (let i = 0; i < 10; i++) {
       let l = row["line" + i];
       if (l) {
-        if (isArray(l.columns))
-          for (let c = 0; c < l.columns.length; c++)
-            l.columns[c].uniqueColumnId = `l${i}-${l.columns[c].key || c}`;
+        if (isArray(l.columns)) {
+          // Clone columns to avoid mutating the original config
+          l.columns = l.columns.map((col: any, c: number) => ({
+            ...col,
+            uniqueColumnId: `l${i}-${col.key || c}`,
+          }));
+        }
         lines.push(l);
       }
     }

package/src/widgets/grid/Pagination.scss

@@ -1,4 +1,13 @@
+@use "sass:math";
 @use "sass:map";
+@use "../variables" as *;
+@use "../maps" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
 
 @mixin cx-pagination(
    $name: "pagination",
@@ -100,9 +109,9 @@
       line-height: $icon-size;
       position: absolute;
       top: 50%;
-      margin-top: -$icon-size * 0.5;
+      margin-top: cx-multiply($icon-size, -0.5);
       left: 50%;
-      margin-left: -$icon-size * 0.5;
+      margin-left: cx-multiply($icon-size, -0.5);
    }
 
    .#{$element}#{$name}-icon-prev-page {

package/src/widgets/grid/Pagination.tsx

@@ -9,114 +9,122 @@ import { Instance } from "../../ui/Instance";
 import { RenderingContext } from "../../ui/RenderingContext";
 
 export interface PaginationConfig extends StyledContainerConfig {
-   /** Current page number. */
-   page?: NumberProp;
+  /** Current page number. */
+  page?: NumberProp;
 
-   /** Total number of pages. */
-   pageCount?: NumberProp;
+  /** Total number of pages. */
+  pageCount?: NumberProp;
 
-   /** Number of page buttons to display. */
-   length?: NumberProp;
+  /** Number of page buttons to display. */
+  length?: NumberProp;
 }
 
 export class Pagination extends Widget<PaginationConfig> {
-   declare baseClass: string;
-   declare length: number;
-
-   constructor(config?: PaginationConfig) {
-      super(config);
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            page: undefined,
-            length: undefined,
-            pageCount: undefined,
-         },
-         ...arguments,
+  declare baseClass: string;
+  declare length: number;
+
+  constructor(config?: PaginationConfig) {
+    super(config);
+  }
+
+  declareData() {
+    super.declareData(
+      {
+        page: undefined,
+        length: undefined,
+        pageCount: undefined,
+      },
+      ...arguments,
+    );
+  }
+
+  render(context: RenderingContext, instance: Instance, key: string) {
+    let { data } = instance;
+    let { page, pageCount, length } = data;
+    let { CSS, baseClass } = this;
+
+    if (!pageCount) pageCount = 1;
+
+    let minPage = Math.max(1, page - Math.floor(length / 2));
+    let maxPage = minPage + length - 1;
+
+    if (maxPage > pageCount) {
+      maxPage = Math.max(pageCount, length);
+      minPage = maxPage - length + 1;
+    }
+
+    let nextPageIcon = (
+      <ForwardIcon className={CSS.element(baseClass, "icon-next-page")} />
+    );
+    let prevPageIcon = (
+      <ForwardIcon className={CSS.element(baseClass, "icon-prev-page")} />
+    );
+
+    let pageBtns = [];
+
+    for (let p = minPage - 1; p <= maxPage + 1; p++) {
+      pageBtns.push(
+        <div
+          key={p < minPage ? "-1" : p > maxPage ? "-2" : p}
+          className={CSS.element(baseClass, "page", {
+            active: page == p,
+            disabled:
+              (p <= maxPage && p > pageCount) ||
+              (p < minPage && page == 1) ||
+              (p > maxPage && page + 1 > pageCount),
+          })}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            preventFocusOnTouch(e);
+          }}
+          onClick={(e) => {
+            this.setPage(
+              e,
+              instance,
+              p < minPage ? page - 1 : p > maxPage ? page + 1 : p,
+            );
+          }}
+        >
+          {p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p}
+        </div>,
       );
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      let { data } = instance;
-      let { page, pageCount, length } = data;
-      let { CSS, baseClass } = this;
-
-      if (!pageCount) pageCount = 1;
-
-      let minPage = Math.max(1, page - Math.floor(length / 2));
-      let maxPage = minPage + length - 1;
-
-      if (maxPage > pageCount) {
-         maxPage = Math.max(pageCount, length);
-         minPage = maxPage - length + 1;
-      }
-
-      let nextPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-next-page")} />;
-      let prevPageIcon = <ForwardIcon className={CSS.element(baseClass, "icon-prev-page")} />;
-
-      let pageBtns = [];
-
-      for (let p = minPage - 1; p <= maxPage + 1; p++) {
-         pageBtns.push(
-            <li
-               key={p < minPage ? "-1" : p > maxPage ? "-2" : p}
-               className={CSS.element(baseClass, "page", {
-                  active: page == p,
-                  disabled:
-                     (p <= maxPage && p > pageCount) ||
-                     (p < minPage && page == 1) ||
-                     (p > maxPage && page + 1 > pageCount),
-               })}
-               onMouseDown={(e) => {
-                  e.stopPropagation();
-                  preventFocusOnTouch(e);
-               }}
-               onClick={(e) => {
-                  this.setPage(e, instance, p < minPage ? page - 1 : p > maxPage ? page + 1 : p);
-               }}
-            >
-               {p < minPage ? prevPageIcon : p > maxPage ? nextPageIcon : p}
-            </li>,
-         );
-      }
-
-      return (
-         <ul
-            key={key}
-            className={data.classNames}
-            style={data.style}
-            tabIndex={0}
-            onKeyDown={(e) => {
-               this.onKeyDown(e, instance);
-            }}
-         >
-            {pageBtns}
-         </ul>
-      );
-   }
-
-   onKeyDown(e: React.KeyboardEvent, instance: Instance) {
-      let { data } = instance;
-      switch (e.keyCode) {
-         case KeyCode.left:
-            this.setPage(e, instance, data.page - 1);
-            break;
-
-         case KeyCode.right:
-            this.setPage(e, instance, data.page + 1);
-            break;
-      }
-   }
-
-   setPage(e: React.SyntheticEvent, instance: Instance, page: number) {
-      e.preventDefault();
-      e.stopPropagation();
-      let { data } = instance;
-      let { pageCount } = data;
-      if (page <= pageCount && page > 0) instance.set("page", page);
-   }
+    }
+
+    return (
+      <div
+        key={key}
+        className={data.classNames}
+        style={data.style}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          this.onKeyDown(e, instance);
+        }}
+      >
+        {pageBtns}
+      </div>
+    );
+  }
+
+  onKeyDown(e: React.KeyboardEvent, instance: Instance) {
+    let { data } = instance;
+    switch (e.keyCode) {
+      case KeyCode.left:
+        this.setPage(e, instance, data.page - 1);
+        break;
+
+      case KeyCode.right:
+        this.setPage(e, instance, data.page + 1);
+        break;
+    }
+  }
+
+  setPage(e: React.SyntheticEvent, instance: Instance, page: number) {
+    e.preventDefault();
+    e.stopPropagation();
+    let { data } = instance;
+    let { pageCount } = data;
+    if (page <= pageCount && page > 0) instance.set("page", page);
+  }
 }
 
 Pagination.prototype.baseClass = "pagination";

package/src/widgets/grid/TreeNode.scss

@@ -1,3 +1,13 @@
+@use "sass:math";
+@use "../box.scss" as *;
+@use "../../util/scss/add-rules.scss" as *;
+@use "../../util/scss/clockwise.scss" as *;
+@use "../../util/scss/deep-merge.scss" as *;
+@use "../../util/scss/calc.scss" as *;
+@use "../../util/scss/besm.scss" as *;
+@use "../../util/scss/include.scss" as *;
+@use "../variables.scss" as *;
+@use "../maps.scss" as *;
 @use "sass:map";
 
 @mixin cx-treenode(
@@ -13,11 +23,15 @@
    $mod: map.get($besm, mod);
 
    .#{$block}#{$name} {
-      padding-left: $handle-size + $icon-size * 0.25;
+      padding-left: cx-calc($handle-size, cx-multiply($icon-size, 0.25));
       position: relative;
 
       &.#{$state}icon {
-         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
+         padding-left: cx-calc(
+            $handle-size,
+            $icon-size,
+            cx-multiply($icon-size, 0.25)
+         );
       }
 
       @for $i from 1 through 20 {
@@ -34,9 +48,9 @@
 
       left: 0;
       top: 50%;
-      margin-top: -$handle-size * 0.5;
+      margin-top: cx-multiply($handle-size, -0.5);
       bottom: 0;
-      width: $handle-size + $icon-size;
+      width: cx-calc($handle-size, $icon-size);
       height: $handle-size;
 
       &:hover {
@@ -53,8 +67,11 @@
       position: absolute;
       left: 0;
       top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size - $icon-size) * 0.5;
+      margin-top: cx-multiply($icon-size, -0.5);
+      margin-left: cx-multiply(
+         cx-calc($handle-size, cx-multiply($icon-size, -1)),
+         0.5
+      );
       height: $icon-size;
       width: $icon-size;
       line-height: $icon-size;
@@ -71,8 +88,8 @@
       position: absolute;
       left: 0;
       top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size + $icon-size) * 0.5;
+      margin-top: cx-multiply($icon-size, -0.5);
+      margin-left: cx-multiply(cx-calc($handle-size, $icon-size), 0.5);
       height: $icon-size;
       width: $icon-size;
       line-height: $icon-size;

package/src/widgets/grid/TreeNode.tsx

@@ -8,138 +8,149 @@ import { Instance } from "../../ui/Instance";
 import { RenderingContext } from "../../ui/RenderingContext";
 
 export interface TreeNodeConfig extends StyledContainerConfig {
-   /** Indentation level of the node. */
-   level?: NumberProp;
+  /** Indentation level of the node. */
+  level?: NumberProp;
 
-   /** Set to `true` if the node is expanded. */
-   expanded?: BooleanProp;
+  /** Set to `true` if the node is expanded. */
+  expanded?: BooleanProp;
 
-   /** Set to `true` if the node is a leaf (has no children). */
-   leaf?: BooleanProp;
+  /** Set to `true` if the node is a leaf (has no children). */
+  leaf?: BooleanProp;
 
-   /** Text to be displayed. */
-   text?: StringProp;
+  /** Text to be displayed. */
+  text?: StringProp;
 
-   /** Set to `true` if the node is loading. */
-   loading?: BooleanProp;
+  /** Set to `true` if the node is loading. */
+  loading?: BooleanProp;
 
-   /** Icon to be displayed. */
-   icon?: StringProp;
+  /** Icon to be displayed. */
+  icon?: StringProp;
 
-   /** Icon for items (sets leafIcon). */
-   itemIcon?: StringProp;
+  /** Icon for items (sets leafIcon). */
+  itemIcon?: StringProp;
 
-   /** Icon for leaf nodes. */
-   leafIcon?: StringProp;
+  /** Icon for leaf nodes. */
+  leafIcon?: StringProp;
 
-   /** Icon displayed when the node is loading. */
-   loadingIcon?: string;
+  /** Icon displayed when the node is loading. */
+  loadingIcon?: string;
 
-   /** Icon for open folder. */
-   openFolderIcon?: StringProp;
+  /** Icon for open folder. */
+  openFolderIcon?: StringProp;
 
-   /** Icon for folder. */
-   folderIcon?: StringProp;
+  /** Icon for folder. */
+  folderIcon?: StringProp;
 
-   /** Set to `true` to hide the icon. */
-   hideIcon?: boolean;
+  /** Set to `true` to hide the icon. */
+  hideIcon?: boolean;
 
-   /** Set to `true` to hide the arrow. */
-   hideArrow?: BooleanProp;
+  /** Set to `true` to hide the arrow. */
+  hideArrow?: BooleanProp;
 }
 
 export class TreeNode extends ContainerBase<TreeNodeConfig> {
-   declare baseClass: string;
-   declare itemIcon: string;
-   declare leafIcon: string;
-   declare loadingIcon: string;
-   declare folderIcon: string;
-   declare openFolderIcon: string;
-   declare arrowIcon: string;
-   declare hideIcon: boolean;
-
-   constructor(config?: TreeNodeConfig) {
-      super(config);
-   }
-
-   init() {
-      if (this.itemIcon) this.leafIcon = this.itemIcon;
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            level: undefined,
-            expanded: undefined,
-            leaf: undefined,
-            text: undefined,
-            loading: undefined,
-            icon: undefined,
-            leafIcon: undefined,
-            openFolderIcon: undefined,
-            folderIcon: undefined,
-            hideArrow: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context: RenderingContext, instance: Instance) {
-      let { data } = instance;
-      data.stateMods = {
-         expanded: data.expanded,
-         loading: data.loading,
-         leaf: data.leaf,
-         folder: !data.leaf,
-         icon: !this.hideIcon,
-      };
-      data.stateMods[`level-${data.level}`] = true;
-      super.prepareData(context, instance);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      let { data } = instance;
-      let { CSS, baseClass } = this;
-
-      let icon = data.icon;
-
-      if (!data.icon) {
-         if (data.leaf) icon = data.leafIcon;
-         else {
-            if (data.loading) icon = this.loadingIcon;
-            else if (data.expanded) icon = data.openFolderIcon || data.folderIcon;
-            else icon = data.folderIcon;
-         }
+  declare baseClass: string;
+  declare itemIcon: string;
+  declare leafIcon: string;
+  declare loadingIcon: string;
+  declare folderIcon: string;
+  declare openFolderIcon: string;
+  declare arrowIcon: string;
+  declare hideIcon: boolean;
+
+  constructor(config?: TreeNodeConfig) {
+    super(config);
+  }
+
+  init() {
+    if (this.itemIcon) this.leafIcon = this.itemIcon;
+    super.init();
+  }
+
+  declareData() {
+    super.declareData(
+      {
+        level: undefined,
+        expanded: undefined,
+        leaf: undefined,
+        text: undefined,
+        loading: undefined,
+        icon: undefined,
+        leafIcon: undefined,
+        openFolderIcon: undefined,
+        folderIcon: undefined,
+        hideArrow: undefined,
+      },
+      ...arguments,
+    );
+  }
+
+  prepareData(context: RenderingContext, instance: Instance) {
+    let { data } = instance;
+    data.stateMods = {
+      expanded: data.expanded,
+      loading: data.loading,
+      leaf: data.leaf,
+      folder: !data.leaf,
+      icon: !this.hideIcon,
+    };
+    data.stateMods[`level-${data.level}`] = true;
+    super.prepareData(context, instance);
+  }
+
+  render(context: RenderingContext, instance: Instance, key: string) {
+    let { data } = instance;
+    let { CSS, baseClass } = this;
+
+    let icon = data.icon;
+
+    if (!data.icon) {
+      if (data.leaf) icon = data.leafIcon;
+      else {
+        if (data.loading) icon = this.loadingIcon;
+        else if (data.expanded) icon = data.openFolderIcon || data.folderIcon;
+        else icon = data.folderIcon;
       }
-
-      let arrowIcon = this.arrowIcon;
-      if (this.hideIcon && data.loading) arrowIcon = this.loadingIcon;
-
-      return (
-         <div key={key} className={data.classNames} style={data.style}>
-            <div
-               className={CSS.element(baseClass, "handle")}
-               onClick={(e) => this.toggle(e, instance)}
-               onMouseDown={!this.hideIcon ? stopPropagation : undefined}
-            >
-               {!data.leaf && !data.hideArrow && Icon.render(arrowIcon, { className: CSS.element(baseClass, "arrow") })}
-               {!this.hideIcon &&
-                  Icon.render(icon, {
-                     className: CSS.element(baseClass, "icon"),
-                  })}
-            </div>
-            <div>{data.text || this.renderChildren(context, instance)}</div>
-         </div>
-      );
-   }
-
-   toggle(e: React.MouseEvent, instance: Instance) {
-      let { data } = instance;
-      if (!data.leaf) instance.set("expanded", !data.expanded);
-      e.preventDefault();
-      e.stopPropagation();
-   }
+    }
+
+    let arrowIcon = this.arrowIcon;
+    if (this.hideIcon && data.loading) arrowIcon = this.loadingIcon;
+
+    return (
+      <div key={key} className={data.classNames} style={data.style}>
+        <div
+          className={CSS.element(baseClass, "handle")}
+          onClick={(e) => this.toggle(e, instance)}
+          onMouseDown={
+            !this.hideIcon && !data.leaf
+              ? (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              : undefined
+          }
+        >
+          {!data.leaf &&
+            !data.hideArrow &&
+            Icon.render(arrowIcon, {
+              className: CSS.element(baseClass, "arrow"),
+            })}
+          {!this.hideIcon &&
+            Icon.render(icon, {
+              className: CSS.element(baseClass, "icon"),
+            })}
+        </div>
+        <div>{data.text || this.renderChildren(context, instance)}</div>
+      </div>
+    );
+  }
+
+  toggle(e: React.MouseEvent, instance: Instance) {
+    let { data } = instance;
+    if (!data.leaf) instance.set("expanded", !data.expanded);
+    e.preventDefault();
+    e.stopPropagation();
+  }
 }
 
 TreeNode.prototype.baseClass = "treenode";

package/src/widgets/grid/index.scss

@@ -1,4 +1,3 @@
-
-@import 'Pagination';
-@import 'TreeNode';
-@import 'Grid';
+@use 'Pagination';
+@use 'TreeNode';
+@use 'Grid';