cx 26.3.10 → 26.4.0

package/src/widgets/Section.scss

@@ -1,53 +1,53 @@
-@use "sass:map";
-@use "sass:math";
-@use "./maps" as *;
-@use "../util/scss/add-rules.scss" as *;
-@use "../util/scss/clockwise.scss" as *;
-@use "../util/scss/besm.scss" as *;
-@use "../util/scss/include.scss" as *;
-@use "./variables" as *;
-
-@mixin cx-section($name: "section", $mods: $cx-section-mods, $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} {
-      flex-direction: column;
-      display: flex;
-      box-sizing: border-box;
-
-      @include cx-add-rules($cx-section-styles);
-
-      @each $modname, $config in $mods {
-         &.#{$mod}#{$modname} {
-            @include cx-add-state-rules($config, default);
-         }
-      }
-   }
-
-   .#{$element}#{$name}-header {
-      box-sizing: border-box;
-      @include cx-add-state-rules($cx-section-header-state-style-map, default);
-   }
-
-   .#{$element}#{$name}-body {
-      flex: 1 1 auto;
-      box-sizing: border-box;
-      overflow: auto;
-
-      .#{$state}pad > & {
-         @include cx-add-state-rules($cx-section-body-state-style-map, default);
-      }
-   }
-
-   .#{$element}#{$name}-footer {
-      box-sizing: border-box;
-      @include cx-add-state-rules($cx-section-footer-state-style-map, default);
-   }
-}
-
-@if (cx-should-include("cx/widgets/Section")) {
-   @include cx-section();
-}
+@use "sass:map";
+@use "sass:math";
+@use "./maps" as *;
+@use "../util/scss/add-rules.scss" as *;
+@use "../util/scss/clockwise.scss" as *;
+@use "../util/scss/besm.scss" as *;
+@use "../util/scss/include.scss" as *;
+@use "./variables" as *;
+
+@mixin cx-section($name: "section", $mods: $cx-section-mods, $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} {
+      flex-direction: column;
+      display: flex;
+      box-sizing: border-box;
+
+      @include cx-add-rules($cx-section-styles);
+
+      @each $modname, $config in $mods {
+         &.#{$mod}#{$modname} {
+            @include cx-add-state-rules($config, default);
+         }
+      }
+   }
+
+   .#{$element}#{$name}-header {
+      box-sizing: border-box;
+      @include cx-add-state-rules($cx-section-header-state-style-map, default);
+   }
+
+   .#{$element}#{$name}-body {
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      overflow: auto;
+
+      .#{$state}pad > & {
+         @include cx-add-state-rules($cx-section-body-state-style-map, default);
+      }
+   }
+
+   .#{$element}#{$name}-footer {
+      box-sizing: border-box;
+      @include cx-add-state-rules($cx-section-footer-state-style-map, default);
+   }
+}
+
+@if (cx-should-include("cx/widgets/Section")) {
+   @include cx-section();
+}

package/src/widgets/Section.tsx

@@ -1,187 +1,187 @@
-/** @jsxImportSource react */
-import { Widget, VDOM, getContent } from "../ui/Widget";
-import { ChildNode, ContainerBase, StyledContainerConfig } from "../ui/Container";
-import { Heading } from "./Heading";
-import { isString } from "../util/isString";
-import { parseStyle } from "../util/parseStyle";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
-import { Create } from "../util/Component";
-
-export interface SectionConfig extends StyledContainerConfig {
-   id?: Prop<string | number>;
-
-   /** Add default padding to the section body. Default is `true`. */
-   pad?: BooleanProp;
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the header. */
-   headerClass?: ClassProp;
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp;
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp;
-
-   /** Additional CSS class to be applied to the footer. */
-   footerClass?: ClassProp;
-
-   /** Section's title. */
-   title?: StringProp;
-
-   /** Contents that should go in the header. */
-   header?: Create<typeof Widget>;
-
-   /** Contents that should go in the footer. */
-   footer?: Create<typeof Widget>;
-
-   /** Title heading level (1-6) */
-   hLevel?: number;
-}
-
-export class Section extends ContainerBase<SectionConfig, Instance> {
-   declare headerStyle?: StyleProp;
-   declare footerStyle?: StyleProp;
-   declare bodyStyle?: StyleProp;
-   declare title?: StringProp;
-   declare header?: Create<typeof Widget>;
-   declare footer?: Create<typeof Widget>;
-   declare hLevel?: number;
-   declare pad?: BooleanProp;
-   declare baseClass: string;
-
-   init(): void {
-      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
-
-      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
-
-      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
-
-      super.init();
-   }
-
-   add(item: any): void {
-      if (item && item.putInto == "header")
-         this.header = {
-            ...item,
-            putInto: null,
-         };
-      else if (item && item.putInto == "footer")
-         this.footer = {
-            ...item,
-            putInto: null,
-         };
-      else super.add(item);
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         id: undefined,
-         headerStyle: { structured: true },
-         headerClass: { structured: true },
-         bodyStyle: { structured: true },
-         bodyClass: { structured: true },
-         footerStyle: { structured: true },
-         footerClass: { structured: true },
-      });
-   }
-
-   initComponents(context: RenderingContext, instance: Instance): void {
-      super.initComponents(context, instance, {
-         header: this.getHeader(),
-         footer: this.getFooter(),
-      });
-   }
-
-   getHeader(): Widget | null {
-      if (this.title)
-         return Widget.create(Heading, {
-            text: this.title,
-            level: this.hLevel,
-         }) as Widget;
-
-      if (this.header) return Heading.create(this.header);
-
-      return null;
-   }
-
-   getFooter(): Widget | null {
-      if (this.footer) return Widget.create(this.footer);
-
-      return null;
-   }
-
-   prepareData(context: RenderingContext, instance: Instance): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pad: this.pad,
-      };
-      super.prepareData(context, instance);
-   }
-
-   initInstance(context: RenderingContext, instance: Instance): void {
-      (instance as any).eventHandlers = instance.getJsxEventProps();
-      super.initInstance(context, instance);
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let { data, components } = instance;
-      let eventHandlers = (instance as any).eventHandlers;
-      let header: React.ReactNode, footer: React.ReactNode;
-      let { CSS, baseClass } = this;
-
-      if (components?.header) {
-         header = (
-            <header
-               className={CSS.expand(CSS.element(baseClass, "header"), data.headerClass)}
-               style={data.headerStyle as any}
-            >
-               {getContent(components.header.render(context))}
-            </header>
-         );
-      }
-
-      if (components?.footer) {
-         footer = (
-            <footer
-               className={CSS.expand(CSS.element(baseClass, "footer"), data.footerClass)}
-               style={data.footerStyle as any}
-            >
-               {getContent(components.footer.render(context))}
-            </footer>
-         );
-      }
-
-      return (
-         <section
-            key={key}
-            className={data.classNames as string}
-            style={data.style as any}
-            id={data.id as string}
-            {...eventHandlers}
-         >
-            {header}
-            <div
-               className={CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass)}
-               style={data.bodyStyle as any}
-            >
-               {this.renderChildren(context, instance)}
-            </div>
-            {footer}
-         </section>
-      );
-   }
-}
-
-Section.prototype.styled = true;
-Section.prototype.pad = true;
-Section.prototype.baseClass = "section";
-Section.prototype.hLevel = 3;
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { ChildNode, ContainerBase, StyledContainerConfig } from "../ui/Container";
+import { Heading } from "./Heading";
+import { isString } from "../util/isString";
+import { parseStyle } from "../util/parseStyle";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { BooleanProp, StringProp, StyleProp, ClassProp, Prop } from "../ui/Prop";
+import { Create } from "../util/Component";
+
+export interface SectionConfig extends StyledContainerConfig {
+   id?: Prop<string | number>;
+
+   /** Add default padding to the section body. Default is `true`. */
+   pad?: BooleanProp;
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the header. */
+   headerClass?: ClassProp;
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp;
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp;
+
+   /** Additional CSS class to be applied to the footer. */
+   footerClass?: ClassProp;
+
+   /** Section's title. */
+   title?: StringProp;
+
+   /** Contents that should go in the header. */
+   header?: Create<typeof Widget>;
+
+   /** Contents that should go in the footer. */
+   footer?: Create<typeof Widget>;
+
+   /** Title heading level (1-6) */
+   hLevel?: number;
+}
+
+export class Section extends ContainerBase<SectionConfig, Instance> {
+   declare headerStyle?: StyleProp;
+   declare footerStyle?: StyleProp;
+   declare bodyStyle?: StyleProp;
+   declare title?: StringProp;
+   declare header?: Create<typeof Widget>;
+   declare footer?: Create<typeof Widget>;
+   declare hLevel?: number;
+   declare pad?: BooleanProp;
+   declare baseClass: string;
+
+   init(): void {
+      if (isString(this.headerStyle)) this.headerStyle = parseStyle(this.headerStyle);
+
+      if (isString(this.footerStyle)) this.footerStyle = parseStyle(this.footerStyle);
+
+      if (isString(this.bodyStyle)) this.bodyStyle = parseStyle(this.bodyStyle);
+
+      super.init();
+   }
+
+   add(item: any): void {
+      if (item && item.putInto == "header")
+         this.header = {
+            ...item,
+            putInto: null,
+         };
+      else if (item && item.putInto == "footer")
+         this.footer = {
+            ...item,
+            putInto: null,
+         };
+      else super.add(item);
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         id: undefined,
+         headerStyle: { structured: true },
+         headerClass: { structured: true },
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         footerStyle: { structured: true },
+         footerClass: { structured: true },
+      });
+   }
+
+   initComponents(context: RenderingContext, instance: Instance): void {
+      super.initComponents(context, instance, {
+         header: this.getHeader(),
+         footer: this.getFooter(),
+      });
+   }
+
+   getHeader(): Widget | null {
+      if (this.title)
+         return Widget.create(Heading, {
+            text: this.title,
+            level: this.hLevel,
+         }) as Widget;
+
+      if (this.header) return Heading.create(this.header);
+
+      return null;
+   }
+
+   getFooter(): Widget | null {
+      if (this.footer) return Widget.create(this.footer);
+
+      return null;
+   }
+
+   prepareData(context: RenderingContext, instance: Instance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pad: this.pad,
+      };
+      super.prepareData(context, instance);
+   }
+
+   initInstance(context: RenderingContext, instance: Instance): void {
+      (instance as any).eventHandlers = instance.getJsxEventProps();
+      super.initInstance(context, instance);
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data, components } = instance;
+      let eventHandlers = (instance as any).eventHandlers;
+      let header: React.ReactNode, footer: React.ReactNode;
+      let { CSS, baseClass } = this;
+
+      if (components?.header) {
+         header = (
+            <header
+               className={CSS.expand(CSS.element(baseClass, "header"), data.headerClass)}
+               style={data.headerStyle as any}
+            >
+               {getContent(components.header.render(context))}
+            </header>
+         );
+      }
+
+      if (components?.footer) {
+         footer = (
+            <footer
+               className={CSS.expand(CSS.element(baseClass, "footer"), data.footerClass)}
+               style={data.footerStyle as any}
+            >
+               {getContent(components.footer.render(context))}
+            </footer>
+         );
+      }
+
+      return (
+         <section
+            key={key}
+            className={data.classNames as string}
+            style={data.style as any}
+            id={data.id as string}
+            {...eventHandlers}
+         >
+            {header}
+            <div
+               className={CSS.expand(CSS.element(this.baseClass, "body"), data.bodyClass)}
+               style={data.bodyStyle as any}
+            >
+               {this.renderChildren(context, instance)}
+            </div>
+            {footer}
+         </section>
+      );
+   }
+}
+
+Section.prototype.styled = true;
+Section.prototype.pad = true;
+Section.prototype.baseClass = "section";
+Section.prototype.hLevel = 3;

package/src/widgets/animations.scss

@@ -1,13 +1,13 @@
-@use "../util/scss/call-once" as *;
-
-@if cx-call-once("cx/widgets/animations") {
-   @keyframes cx-rotate {
-      from {
-         transform: rotate(0);
-      }
-
-      to {
-         transform: rotate(360deg);
-      }
-   }
-}
+@use "../util/scss/call-once" as *;
+
+@if cx-call-once("cx/widgets/animations") {
+   @keyframes cx-rotate {
+      from {
+         transform: rotate(0);
+      }
+
+      to {
+         transform: rotate(360deg);
+      }
+   }
+}

package/src/widgets/autoFocus.ts

@@ -1,9 +1,9 @@
-import { FocusManager } from "../ui/FocusManager";
-import { isTouchEvent } from "../util/isTouchEvent";
-
-export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
-   let data = component.props.data || component.props.instance.data;
-   let autoFocusValue = el && data.autoFocus;
-   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
-   component.autoFocusValue = autoFocusValue;
-}
+import { FocusManager } from "../ui/FocusManager";
+import { isTouchEvent } from "../util/isTouchEvent";
+
+export function autoFocus(el: HTMLElement | undefined | null, component: any): void {
+   let data = component.props.data || component.props.instance.data;
+   let autoFocusValue = el && data.autoFocus;
+   if (autoFocusValue && autoFocusValue != component.autoFocusValue && !isTouchEvent()) FocusManager.focus(el!);
+   component.autoFocusValue = autoFocusValue;
+}

package/src/widgets/box.scss

@@ -1,47 +1,47 @@
-//
-// Boxes
-// -----
-//
-// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
-// These elements should have the same height in order to avoid problems when put together in a toolbar
-// or a complex form.
-//
-// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
-//
-// For elements which do not have a natural border, such as checkboxes, radios and buttons,
-// border-color should be set to transparent.
-//
-//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
-//
-// Some browsers do not respect the line-height being set and therefore explicit height value is
-// calculated and set on all box elements.
-//
-// Hint: Use em units to make the box height grow with the font-size, but note that the elements
-//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
-//
-
-@use "../util/scss/clockwise.scss" as *;
-
-$cx-default-box-font-size: 13px !default;
-$cx-default-box-font-family: inherit !default;
-$cx-default-box-line-height: 16px !default;
-
-// Box padding - individual values for full control
-$cx-default-box-padding: 5px !default;
-$cx-default-box-padding-top: cx-top($cx-default-box-padding) !default;
-$cx-default-box-padding-right: cx-right($cx-default-box-padding) !default;
-$cx-default-box-padding-bottom: cx-bottom($cx-default-box-padding) !default;
-$cx-default-box-padding-left: cx-left($cx-default-box-padding) !default;
-
-// Box border width - individual values for full control
-$cx-default-box-border-width: 1px !default;
-$cx-default-box-border-width-top: cx-top($cx-default-box-border-width) !default;
-$cx-default-box-border-width-right: cx-right($cx-default-box-border-width) !default;
-$cx-default-box-border-width-bottom: cx-bottom($cx-default-box-border-width) !default;
-$cx-default-box-border-width-left: cx-left($cx-default-box-border-width) !default;
-
-//Icons
-$cx-default-icon-size: 16px !default;
-
-// Empty Texts
-$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;
+//
+// Boxes
+// -----
+//
+// Boxes are inline-block elements which are likely to appear in the same row, such as buttons and form elements.
+// These elements should have the same height in order to avoid problems when put together in a toolbar
+// or a complex form.
+//
+// To ensure the height consistency, all box models should use the same line-height, top/bottom padding and border-width;
+//
+// For elements which do not have a natural border, such as checkboxes, radios and buttons,
+// border-color should be set to transparent.
+//
+//  box height = line-height + padding-top + padding-bottom + border-width-top + border-width-bottom
+//
+// Some browsers do not respect the line-height being set and therefore explicit height value is
+// calculated and set on all box elements.
+//
+// Hint: Use em units to make the box height grow with the font-size, but note that the elements
+//       will not be aligned in case of pixel boundaries and icons may appear blurry in some desktop browsers.
+//
+
+@use "../util/scss/clockwise.scss" as *;
+
+$cx-default-box-font-size: 13px !default;
+$cx-default-box-font-family: inherit !default;
+$cx-default-box-line-height: 16px !default;
+
+// Box padding - individual values for full control
+$cx-default-box-padding: 5px !default;
+$cx-default-box-padding-top: cx-top($cx-default-box-padding) !default;
+$cx-default-box-padding-right: cx-right($cx-default-box-padding) !default;
+$cx-default-box-padding-bottom: cx-bottom($cx-default-box-padding) !default;
+$cx-default-box-padding-left: cx-left($cx-default-box-padding) !default;
+
+// Box border width - individual values for full control
+$cx-default-box-border-width: 1px !default;
+$cx-default-box-border-width-top: cx-top($cx-default-box-border-width) !default;
+$cx-default-box-border-width-right: cx-right($cx-default-box-border-width) !default;
+$cx-default-box-border-width-bottom: cx-bottom($cx-default-box-border-width) !default;
+$cx-default-box-border-width-left: cx-left($cx-default-box-border-width) !default;
+
+//Icons
+$cx-default-icon-size: 16px !default;
+
+// Empty Texts
+$cx-default-empty-text-color: rgba(128, 128, 128, 0.7) !default;