cx 26.1.1 → 26.1.2

package/src/widgets/grid/TreeNode.scss

@@ -1,90 +1,90 @@
-@use "sass:map";
-
-@mixin cx-treenode(
-   $name: "treenode",
-   $icon-size: $cx-default-icon-size,
-   $handle-size: $cx-default-input-tool-size,
-   $handle-state-style-map: $cx-input-right-icon-state-style-map,
-   $besm: $cx-besm
-) {
-   $block: map.get($besm, block);
-   $element: map.get($besm, element);
-   $state: map.get($besm, state);
-   $mod: map.get($besm, mod);
-
-   .#{$block}#{$name} {
-      padding-left: $handle-size + $icon-size * 0.25;
-      position: relative;
-
-      &.#{$state}icon {
-         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
-      }
-
-      @for $i from 1 through 20 {
-         &.#{$state}level-#{$i} {
-            margin-left: #{($i * 20)}px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-handle {
-      position: absolute;
-
-      @include cx-add-state-rules($handle-state-style-map, default);
-
-      left: 0;
-      top: 50%;
-      margin-top: -$handle-size * 0.5;
-      bottom: 0;
-      width: $handle-size + $icon-size;
-      height: $handle-size;
-
-      &:hover {
-         @include cx-add-state-rules($handle-state-style-map, hover);
-      }
-
-      &:active {
-         @include cx-add-state-rules($handle-state-style-map, active);
-      }
-   }
-
-   .#{$element}#{$name}-arrow {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size - $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      transform: rotate(-90deg);
-      transition: transform 0.2s;
-
-      .#{$state}expanded & {
-         transform: rotate(0);
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      display: block;
-      position: absolute;
-      left: 0;
-      top: 50%;
-      margin-top: -$icon-size * 0.5;
-      margin-left: ($handle-size + $icon-size) * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-   }
-
-   .#{$block}grid.#{$mod}tree {
-      td {
-         border-top: none;
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/TreeNode")) {
-   @include cx-treenode();
-}
+@use "sass:map";
+
+@mixin cx-treenode(
+   $name: "treenode",
+   $icon-size: $cx-default-icon-size,
+   $handle-size: $cx-default-input-tool-size,
+   $handle-state-style-map: $cx-input-right-icon-state-style-map,
+   $besm: $cx-besm
+) {
+   $block: map.get($besm, block);
+   $element: map.get($besm, element);
+   $state: map.get($besm, state);
+   $mod: map.get($besm, mod);
+
+   .#{$block}#{$name} {
+      padding-left: $handle-size + $icon-size * 0.25;
+      position: relative;
+
+      &.#{$state}icon {
+         padding-left: $handle-size + $icon-size + $icon-size * 0.25;
+      }
+
+      @for $i from 1 through 20 {
+         &.#{$state}level-#{$i} {
+            margin-left: #{($i * 20)}px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-handle {
+      position: absolute;
+
+      @include cx-add-state-rules($handle-state-style-map, default);
+
+      left: 0;
+      top: 50%;
+      margin-top: -$handle-size * 0.5;
+      bottom: 0;
+      width: $handle-size + $icon-size;
+      height: $handle-size;
+
+      &:hover {
+         @include cx-add-state-rules($handle-state-style-map, hover);
+      }
+
+      &:active {
+         @include cx-add-state-rules($handle-state-style-map, active);
+      }
+   }
+
+   .#{$element}#{$name}-arrow {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size - $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      transform: rotate(-90deg);
+      transition: transform 0.2s;
+
+      .#{$state}expanded & {
+         transform: rotate(0);
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 50%;
+      margin-top: -$icon-size * 0.5;
+      margin-left: ($handle-size + $icon-size) * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+   }
+
+   .#{$block}grid.#{$mod}tree {
+      td {
+         border-top: none;
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/TreeNode")) {
+   @include cx-treenode();
+}

package/src/widgets/grid/TreeNode.tsx

@@ -1,154 +1,154 @@
-/** @jsxImportSource react */
-import { Widget, VDOM } from "../../ui/Widget";
-import { Icon } from "../Icon";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
-import { BooleanProp, NumberProp, StringProp } from "../../ui/Prop";
-import { Instance } from "../../ui/Instance";
-import { RenderingContext } from "../../ui/RenderingContext";
-
-export interface TreeNodeConfig extends StyledContainerConfig {
-   /** Indentation level of the node. */
-   level?: NumberProp;
-
-   /** Set to `true` if the node is expanded. */
-   expanded?: BooleanProp;
-
-   /** Set to `true` if the node is a leaf (has no children). */
-   leaf?: BooleanProp;
-
-   /** Text to be displayed. */
-   text?: StringProp;
-
-   /** Set to `true` if the node is loading. */
-   loading?: BooleanProp;
-
-   /** Icon to be displayed. */
-   icon?: StringProp;
-
-   /** Icon for items (sets leafIcon). */
-   itemIcon?: StringProp;
-
-   /** Icon for leaf nodes. */
-   leafIcon?: StringProp;
-
-   /** Icon displayed when the node is loading. */
-   loadingIcon?: string;
-
-   /** Icon for open folder. */
-   openFolderIcon?: StringProp;
-
-   /** Icon for folder. */
-   folderIcon?: StringProp;
-
-   /** Set to `true` to hide the icon. */
-   hideIcon?: boolean;
-
-   /** 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;
-         }
-      }
-
-      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();
-   }
-}
-
-TreeNode.prototype.baseClass = "treenode";
-TreeNode.prototype.itemIcon = "file";
-TreeNode.prototype.loadingIcon = "loading";
-TreeNode.prototype.folderIcon = "folder";
-TreeNode.prototype.openFolderIcon = "folder-open";
-TreeNode.prototype.arrowIcon = "drop-down";
-TreeNode.prototype.styled = true;
-TreeNode.prototype.hideIcon = false;
-
-Widget.alias("treenode", TreeNode);
+/** @jsxImportSource react */
+import { Widget, VDOM } from "../../ui/Widget";
+import { Icon } from "../Icon";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { BooleanProp, NumberProp, StringProp } from "../../ui/Prop";
+import { Instance } from "../../ui/Instance";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface TreeNodeConfig extends StyledContainerConfig {
+   /** Indentation level of the node. */
+   level?: NumberProp;
+
+   /** Set to `true` if the node is expanded. */
+   expanded?: BooleanProp;
+
+   /** Set to `true` if the node is a leaf (has no children). */
+   leaf?: BooleanProp;
+
+   /** Text to be displayed. */
+   text?: StringProp;
+
+   /** Set to `true` if the node is loading. */
+   loading?: BooleanProp;
+
+   /** Icon to be displayed. */
+   icon?: StringProp;
+
+   /** Icon for items (sets leafIcon). */
+   itemIcon?: StringProp;
+
+   /** Icon for leaf nodes. */
+   leafIcon?: StringProp;
+
+   /** Icon displayed when the node is loading. */
+   loadingIcon?: string;
+
+   /** Icon for open folder. */
+   openFolderIcon?: StringProp;
+
+   /** Icon for folder. */
+   folderIcon?: StringProp;
+
+   /** Set to `true` to hide the icon. */
+   hideIcon?: boolean;
+
+   /** 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;
+         }
+      }
+
+      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();
+   }
+}
+
+TreeNode.prototype.baseClass = "treenode";
+TreeNode.prototype.itemIcon = "file";
+TreeNode.prototype.loadingIcon = "loading";
+TreeNode.prototype.folderIcon = "folder";
+TreeNode.prototype.openFolderIcon = "folder-open";
+TreeNode.prototype.arrowIcon = "drop-down";
+TreeNode.prototype.styled = true;
+TreeNode.prototype.hideIcon = false;
+
+Widget.alias("treenode", TreeNode);

package/src/widgets/grid/createGridCellEditor.tsx

@@ -1,18 +1,18 @@
-import { ValidationGroup } from "../form/ValidationGroup";
-import { GridCellEditor } from "./GridCellEditor";
-import { BooleanProp } from "../../ui/Prop";
-
-export function createGridCellEditor(
-   className: string,
-   style: any,
-   valid: BooleanProp,
-   columnEditor: any
-) {
-   return (
-      <GridCellEditor className={className} style={style}>
-         <ValidationGroup valid={valid}>
-            {columnEditor}
-         </ValidationGroup>
-      </GridCellEditor>
-   );
-}
+import { ValidationGroup } from "../form/ValidationGroup";
+import { GridCellEditor } from "./GridCellEditor";
+import { BooleanProp } from "../../ui/Prop";
+
+export function createGridCellEditor(
+   className: string,
+   style: any,
+   valid: BooleanProp,
+   columnEditor: any
+) {
+   return (
+      <GridCellEditor className={className} style={style}>
+         <ValidationGroup valid={valid}>
+            {columnEditor}
+         </ValidationGroup>
+      </GridCellEditor>
+   );
+}

package/src/widgets/grid/index.scss

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

package/src/widgets/grid/index.ts

@@ -1,17 +1,17 @@
-export * from './Grid';
-export * from './GridRow';
-export * from './GridRowLine';
-export * from './TreeNode';
-export * from './Pagination';
-
-import { DataAdapter } from '../../ui/adapter/DataAdapter';
-import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
-import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
-import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
-
-export {
-   DataAdapter,
-   ArrayAdapter,
-   GroupAdapter,
-   TreeAdapter
+export * from './Grid';
+export * from './GridRow';
+export * from './GridRowLine';
+export * from './TreeNode';
+export * from './Pagination';
+
+import { DataAdapter } from '../../ui/adapter/DataAdapter';
+import { ArrayAdapter }  from '../../ui/adapter/ArrayAdapter';
+import { GroupAdapter }  from '../../ui/adapter/GroupAdapter';
+import { TreeAdapter }  from '../../ui/adapter/TreeAdapter';
+
+export {
+   DataAdapter,
+   ArrayAdapter,
+   GroupAdapter,
+   TreeAdapter
 }