cx 26.1.3 → 26.1.4

package/src/widgets/Button.scss

@@ -1,119 +1,119 @@
-@use "sass:map";
-
-@mixin cx-button(
-   $name: "button",
-   $state-style-map: $cx-button-state-style-map,
-   $mods: $cx-button-mods,
-   $icon-size: $cx-default-icon-size,
-   $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} {
-      position: relative;
-      box-sizing: border-box;
-      display: inline-block;
-
-      $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
-      $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
-      $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
-
-      height: cx-calc(
-         $line-height,
-         cx-top($padding),
-         cx-bottom($padding),
-         cx-top($border-width),
-         cx-bottom($border-width)
-      );
-
-      @include cx-add-state-rules($state-style-map, "default");
-
-      &::-moz-focus-inner {
-         border: 0;
-         padding: 0;
-         margin: -1px;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, "hover");
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, "focus");
-      }
-
-      &:hover:focus {
-         @include cx-add-state-rules($state-style-map, "hover-focus");
-      }
-
-      &:active,
-      &.#{$state}pressed {
-         @include cx-add-state-rules($state-style-map, "active");
-      }
-
-      &[disabled],
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, "disabled");
-      }
-
-      @each $modname, $config in $mods {
-         &.#{$mod}#{$modname} {
-            @include cx-add-state-rules($config, default);
-
-            &[disabled],
-            &.#{$state}disabled {
-               @include cx-add-state-rules($config, disabled);
-            }
-
-            &:hover {
-               @include cx-add-state-rules($config, hover);
-            }
-
-            &:focus {
-               @include cx-add-state-rules($config, focus);
-            }
-
-            &:active,
-            &.#{$state}pressed {
-               @include cx-add-state-rules($config, active);
-            }
-         }
-      }
-   }
-
-   $padding: cx-get-state-rule($state-style-map, default, padding);
-
-   .#{$element}#{$name}-icon {
-      display: inline-block;
-      position: absolute;
-      top: 50%;
-      left: cx-left($padding) * 0.5;
-      margin-top: -$icon-size * 0.5;
-      height: $icon-size;
-      width: $icon-size;
-      line-height: $icon-size;
-      text-align: center;
-   }
-
-   .#{$element}#{$name}-baseline {
-      display: inline-block;
-      width: 1px;
-      margin-left: -1px;
-   }
-
-   .#{$block}#{$name}.#{$state}icon {
-      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
-
-      &.#{$state}empty {
-         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
-            cx-calc(cx-left($padding) * 0.5, $icon-size);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Button")) {
-   @include cx-button;
-}
+@use "sass:map";
+
+@mixin cx-button(
+   $name: "button",
+   $state-style-map: $cx-button-state-style-map,
+   $mods: $cx-button-mods,
+   $icon-size: $cx-default-icon-size,
+   $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} {
+      position: relative;
+      box-sizing: border-box;
+      display: inline-block;
+
+      $line-height: cx-get-state-rule($state-style-map, default, "line-height", 1.2em);
+      $padding: cx-get-state-rule($state-style-map, default, "padding", 0);
+      $border-width: cx-get-state-rule($state-style-map, default, "border-width", 1px);
+
+      height: cx-calc(
+         $line-height,
+         cx-top($padding),
+         cx-bottom($padding),
+         cx-top($border-width),
+         cx-bottom($border-width)
+      );
+
+      @include cx-add-state-rules($state-style-map, "default");
+
+      &::-moz-focus-inner {
+         border: 0;
+         padding: 0;
+         margin: -1px;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, "hover");
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, "focus");
+      }
+
+      &:hover:focus {
+         @include cx-add-state-rules($state-style-map, "hover-focus");
+      }
+
+      &:active,
+      &.#{$state}pressed {
+         @include cx-add-state-rules($state-style-map, "active");
+      }
+
+      &[disabled],
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, "disabled");
+      }
+
+      @each $modname, $config in $mods {
+         &.#{$mod}#{$modname} {
+            @include cx-add-state-rules($config, default);
+
+            &[disabled],
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, focus);
+            }
+
+            &:active,
+            &.#{$state}pressed {
+               @include cx-add-state-rules($config, active);
+            }
+         }
+      }
+   }
+
+   $padding: cx-get-state-rule($state-style-map, default, padding);
+
+   .#{$element}#{$name}-icon {
+      display: inline-block;
+      position: absolute;
+      top: 50%;
+      left: cx-left($padding) * 0.5;
+      margin-top: -$icon-size * 0.5;
+      height: $icon-size;
+      width: $icon-size;
+      line-height: $icon-size;
+      text-align: center;
+   }
+
+   .#{$element}#{$name}-baseline {
+      display: inline-block;
+      width: 1px;
+      margin-left: -1px;
+   }
+
+   .#{$block}#{$name}.#{$state}icon {
+      padding: cx-top($padding) cx-right($padding) cx-bottom($padding) cx-calc(cx-left($padding), $icon-size);
+
+      &.#{$state}empty {
+         padding: cx-top($padding) cx-right($padding) * 0.5 cx-bottom($padding)
+            cx-calc(cx-left($padding) * 0.5, $icon-size);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Button")) {
+   @include cx-button;
+}

package/src/widgets/Button.tsx

@@ -1,189 +1,189 @@
-/** @jsxImportSource react */
-import { Widget, VDOM, getContentArray } from "../ui/Widget";
-import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
-import { yesNo } from "./overlay/alerts";
-import { Icon } from "./Icon";
-import { preventFocus } from "../ui/FocusManager";
-import { isFunction } from "../util/isFunction";
-import { isDefined } from "../util/isDefined";
-import { coalesce } from "../util/coalesce";
-import type { RenderingContext } from "../ui/RenderingContext";
-import type { Instance, RenderProps } from "../ui/Instance";
-import { YesNoResult } from "../ui/Instance";
-import { BooleanProp, StringProp, Prop, ModProp } from "../ui/Prop";
-import type { FormRenderingContext } from "./form/ValidationGroup";
-
-export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disabled" | "type" | "form"> {
-   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
-   confirm?: Prop<string | Record<string, unknown> | false>;
-
-   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
-   pressed?: BooleanProp;
-
-   /** Name of the icon to be put on the left side of the button. */
-   icon?: StringProp;
-
-   /** Base CSS class to be applied to the element. Default is 'button'. */
-   baseClass?: string;
-
-   /**
-    * Determines if button should receive focus on mousedown event.
-    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
-    */
-   focusOnMouseDown?: boolean;
-
-   /** Add type="submit" to the button. */
-   submit?: boolean;
-
-   /** Set to `true` to disable the button. */
-   disabled?: BooleanProp;
-
-   /** Set to `false` to disable the button. */
-   enabled?: BooleanProp;
-
-   /**
-    * Click handler.
-    *
-    * @param e - Event.
-    * @param instance - Cx widget instance that fired the event.
-    */
-   onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
-
-   /** Button type. */
-   type?: "submit" | "button";
-
-   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
-   dismiss?: boolean;
-
-   /** The form attribute specifies the form the button belongs to.
-    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
-    */
-   form?: StringProp;
-}
-
-export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
-   constructor(config?: ButtonConfig) {
-      super(config);
-   }
-
-   declare icon?: boolean | string;
-   declare focusOnMouseDown?: boolean;
-   declare submit?: boolean;
-   declare dismiss?: boolean;
-   declare onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
-   declare baseClass: string;
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         confirm: { structured: true },
-         pressed: undefined,
-         icon: undefined,
-         disabled: undefined,
-         enabled: undefined,
-      });
-   }
-
-   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
-      const { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         pressed: data.pressed,
-      };
-      if (isDefined(data.enabled)) data.disabled = !data.enabled;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context: FormRenderingContext, instance: HtmlElementInstance): void {
-      instance.data.parentDisabled = context.parentDisabled;
-      instance.data.parentStrict = context.parentStrict;
-
-      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
-      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
-
-      super.explore(context, instance);
-   }
-
-   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
-      super.attachProps(context, instance, props);
-
-      if (!this.focusOnMouseDown) {
-         props.onMouseDown = (e: React.MouseEvent) => {
-            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
-            preventFocus(e);
-         };
-      }
-
-      if (this.dismiss) {
-         const { onClick } = props;
-
-         props.onClick = (e: React.MouseEvent) => {
-            if (onClick) {
-               const result = onClick(e);
-               if (result === false) return;
-            }
-
-            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) {
-               instance.parentOptions.dismiss();
-            }
-         };
-      }
-
-      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
-
-      delete props.confirm;
-      delete props.dismiss;
-      delete props.pressed;
-      delete props.submit;
-      delete props.focusOnMouseDown;
-      delete props.icon;
-      delete props.enabled;
-
-      const { data } = instance;
-
-      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled) as
-         | boolean
-         | undefined;
-
-      if (data.confirm) {
-         const oldOnClick = props.onClick;
-         props.onClick = (e: React.MouseEvent) => {
-            yesNo(data.confirm!).then((btn: string) => {
-               if (btn === YesNoResult.Yes && oldOnClick) {
-                  oldOnClick(e);
-               }
-            });
-         };
-      }
-
-      if (data.icon) {
-         const icon = Icon.render(data.icon, {
-            key: "icon",
-            className: this.CSS.element(this.baseClass, "icon"),
-         });
-         const children = getContentArray(props.children);
-         props.children = [icon, ...children];
-         props.className = this.CSS.expand(
-            props.className,
-            this.CSS.state("icon"),
-            children.length === 0 && this.CSS.state("empty"),
-         );
-
-         if (children.length === 0) {
-            (props.children as React.ReactNode[]).push(
-               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
-                  &nbsp;
-               </span>,
-            );
-         }
-      }
-   }
-}
-
-Button.prototype.tag = "button";
-Button.prototype.baseClass = "button";
-Button.prototype.icon = false;
-Button.prototype.focusOnMouseDown = false;
-Button.prototype.submit = false;
-
-Widget.alias("button", Button);
+/** @jsxImportSource react */
+import { Widget, VDOM, getContentArray } from "../ui/Widget";
+import { HtmlElement, HtmlElementConfig, HtmlElementInstance } from "./HtmlElement";
+import { yesNo } from "./overlay/alerts";
+import { Icon } from "./Icon";
+import { preventFocus } from "../ui/FocusManager";
+import { isFunction } from "../util/isFunction";
+import { isDefined } from "../util/isDefined";
+import { coalesce } from "../util/coalesce";
+import type { RenderingContext } from "../ui/RenderingContext";
+import type { Instance, RenderProps } from "../ui/Instance";
+import { YesNoResult } from "../ui/Instance";
+import { BooleanProp, StringProp, Prop, ModProp } from "../ui/Prop";
+import type { FormRenderingContext } from "./form/ValidationGroup";
+
+export interface ButtonConfig extends Omit<HtmlElementConfig<"button">, "disabled" | "type" | "form"> {
+   /** Confirmation text or configuration object. See MsgBox.yesNo for more details. */
+   confirm?: Prop<string | Record<string, unknown> | false>;
+
+   /** If true button appears in pressed state. Useful for implementing toggle buttons. */
+   pressed?: BooleanProp;
+
+   /** Name of the icon to be put on the left side of the button. */
+   icon?: StringProp;
+
+   /** Base CSS class to be applied to the element. Default is 'button'. */
+   baseClass?: string;
+
+   /**
+    * Determines if button should receive focus on mousedown event.
+    * Default is `false`, which means that focus can be set only using the keyboard `Tab` key.
+    */
+   focusOnMouseDown?: boolean;
+
+   /** Add type="submit" to the button. */
+   submit?: boolean;
+
+   /** Set to `true` to disable the button. */
+   disabled?: BooleanProp;
+
+   /** Set to `false` to disable the button. */
+   enabled?: BooleanProp;
+
+   /**
+    * Click handler.
+    *
+    * @param e - Event.
+    * @param instance - Cx widget instance that fired the event.
+    */
+   onClick?: string | ((e: React.MouseEvent, instance: Instance) => void);
+
+   /** Button type. */
+   type?: "submit" | "button";
+
+   /** If set to `true`, the Button will cause its parent Overlay (if one exists) to close. This, however, can be prevented if `onClick` explicitly returns `false`. */
+   dismiss?: boolean;
+
+   /** The form attribute specifies the form the button belongs to.
+    * The value of this attribute must be equal to the `id` attribute of a `<form>` element in the same document.
+    */
+   form?: StringProp;
+}
+
+export class Button extends HtmlElement<ButtonConfig, HtmlElementInstance> {
+   constructor(config?: ButtonConfig) {
+      super(config);
+   }
+
+   declare icon?: boolean | string;
+   declare focusOnMouseDown?: boolean;
+   declare submit?: boolean;
+   declare dismiss?: boolean;
+   declare onMouseDown?: string | ((e: MouseEvent, instance: Instance) => void);
+   declare baseClass: string;
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         confirm: { structured: true },
+         pressed: undefined,
+         icon: undefined,
+         disabled: undefined,
+         enabled: undefined,
+      });
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      const { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         pressed: data.pressed,
+      };
+      if (isDefined(data.enabled)) data.disabled = !data.enabled;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: FormRenderingContext, instance: HtmlElementInstance): void {
+      instance.data.parentDisabled = context.parentDisabled;
+      instance.data.parentStrict = context.parentStrict;
+
+      if (instance.cache("parentDisabled", context.parentDisabled)) instance.markShouldUpdate(context);
+      if (instance.cache("parentStrict", context.parentStrict)) instance.markShouldUpdate(context);
+
+      super.explore(context, instance);
+   }
+
+   attachProps(context: RenderingContext, instance: HtmlElementInstance, props: RenderProps): void {
+      super.attachProps(context, instance, props);
+
+      if (!this.focusOnMouseDown) {
+         props.onMouseDown = (e: React.MouseEvent) => {
+            if (this.onMouseDown && instance.invoke("onMouseDown", e, instance) === false) return;
+            preventFocus(e);
+         };
+      }
+
+      if (this.dismiss) {
+         const { onClick } = props;
+
+         props.onClick = (e: React.MouseEvent) => {
+            if (onClick) {
+               const result = onClick(e);
+               if (result === false) return;
+            }
+
+            if (instance.parentOptions && isFunction(instance.parentOptions.dismiss)) {
+               instance.parentOptions.dismiss();
+            }
+         };
+      }
+
+      if (this.tag === "button") props.type = this.submit ? "submit" : "button";
+
+      delete props.confirm;
+      delete props.dismiss;
+      delete props.pressed;
+      delete props.submit;
+      delete props.focusOnMouseDown;
+      delete props.icon;
+      delete props.enabled;
+
+      const { data } = instance;
+
+      props.disabled = coalesce(data.parentStrict ? data.parentDisabled : null, data.disabled, data.parentDisabled) as
+         | boolean
+         | undefined;
+
+      if (data.confirm) {
+         const oldOnClick = props.onClick;
+         props.onClick = (e: React.MouseEvent) => {
+            yesNo(data.confirm!).then((btn: string) => {
+               if (btn === YesNoResult.Yes && oldOnClick) {
+                  oldOnClick(e);
+               }
+            });
+         };
+      }
+
+      if (data.icon) {
+         const icon = Icon.render(data.icon, {
+            key: "icon",
+            className: this.CSS.element(this.baseClass, "icon"),
+         });
+         const children = getContentArray(props.children);
+         props.children = [icon, ...children];
+         props.className = this.CSS.expand(
+            props.className,
+            this.CSS.state("icon"),
+            children.length === 0 && this.CSS.state("empty"),
+         );
+
+         if (children.length === 0) {
+            (props.children as React.ReactNode[]).push(
+               <span key="baseline" className={this.CSS.element(this.baseClass, "baseline")}>
+                  &nbsp;
+               </span>,
+            );
+         }
+      }
+   }
+}
+
+Button.prototype.tag = "button";
+Button.prototype.baseClass = "button";
+Button.prototype.icon = false;
+Button.prototype.focusOnMouseDown = false;
+Button.prototype.submit = false;
+
+Widget.alias("button", Button);