cx 26.1.1 → 26.1.3

package/src/widgets/nav/Scroller.tsx

@@ -1,252 +1,252 @@
-/** @jsxImportSource react */
-import { Icon } from "../Icon";
-import { VDOM } from "../../ui/Widget";
-import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
-import { ResizeManager } from "../../ui/ResizeManager";
-import { isString, scrollElementIntoView } from "../../util";
-import { RenderingContext } from "../../ui/RenderingContext";
-import { Instance } from "../../ui/Instance";
-import { BooleanProp, StringProp } from "../../ui/Prop";
-
-export interface ScrollerConfig extends StyledContainerConfig {
-   horizontal?: BooleanProp;
-   vertical?: BooleanProp;
-   scrollIntoViewSelector?: StringProp;
-}
-
-export class Scroller extends StyledContainerBase<ScrollerConfig> {
-   declare baseClass: string;
-   declare public horizontal?: any;
-   declare public vertical?: any;
-   declare public scrollIntoViewSelector?: any;
-
-   constructor(config?: ScrollerConfig) {
-      super(config);
-   }
-
-   init() {
-      if (!this.vertical) this.horizontal = true; //default
-
-      super.init();
-   }
-
-   declareData(...args: any[]) {
-      super.declareData(...args, {
-         scrollIntoViewSelector: undefined,
-      });
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string) {
-      return (
-         <HScrollerComponent key={key} widget={this} data={instance.data}>
-            {(this as any).renderChildren(context, instance)}
-         </HScrollerComponent>
-      );
-   }
-}
-
-Scroller.prototype.baseClass = "scroller";
-
-interface HScrollerComponentProps {
-   widget: Scroller;
-   data: any;
-   children?: any;
-}
-
-interface HScrollerComponentState {
-   scrollable: boolean;
-}
-
-export class HScrollerComponent extends VDOM.Component<HScrollerComponentProps, HScrollerComponentState> {
-   declare el?: HTMLElement | null;
-   declare clip?: HTMLElement | null;
-   declare scroller?: HTMLElement | null;
-   declare content?: HTMLElement | null;
-   unsubscribeResize?: () => void;
-   declare doScroll?: any;
-   stopScrolling: () => void;
-   scrollLeft: (e: any) => void;
-   scrollRight: (e: any) => void;
-   scrollUp: (e: any) => void;
-   scrollDown: (e: any) => void;
-
-   constructor(props: HScrollerComponentProps) {
-      super(props);
-      this.stopScrolling = () => {
-         delete this.doScroll;
-      };
-      this.scrollLeft = (e) => this.scroll(e, "left");
-      this.scrollRight = (e) => this.scroll(e, "right");
-      this.scrollUp = (e) => this.scroll(e, "up");
-      this.scrollDown = (e) => this.scroll(e, "down");
-      this.state = { scrollable: false };
-   }
-
-   render() {
-      let { data, children, widget } = this.props;
-      let { CSS, baseClass } = widget;
-
-      return (
-         <div
-            className={CSS.expand(
-               data.classNames,
-               CSS.state({
-                  scrollable: this.state.scrollable,
-                  horizontal: widget.horizontal,
-                  vertical: widget.vertical,
-               }),
-            )}
-            style={data.style}
-            ref={(el) => {
-               this.el = el;
-            }}
-         >
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "left-arrow")}
-                  onMouseDown={this.scrollLeft}
-                  onTouchStart={this.scrollLeft}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.horizontal && (
-               <div
-                  className={CSS.element(baseClass, "right-arrow")}
-                  onMouseDown={this.scrollRight}
-                  onTouchStart={this.scrollRight}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "top-arrow")}
-                  onMouseDown={this.scrollUp}
-                  onTouchStart={this.scrollUp}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            {widget.vertical && (
-               <div
-                  className={CSS.element(baseClass, "bottom-arrow")}
-                  onMouseDown={this.scrollDown}
-                  onTouchStart={this.scrollDown}
-                  onMouseUp={this.stopScrolling}
-                  onTouchEnd={this.stopScrolling}
-               >
-                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
-               </div>
-            )}
-
-            <div
-               className={CSS.element(baseClass, "clip")}
-               ref={(el) => {
-                  this.clip = el;
-               }}
-            >
-               <div
-                  className={CSS.element(baseClass, "scroller")}
-                  ref={(el) => {
-                     this.scroller = el;
-                  }}
-               >
-                  <div
-                     className={CSS.element(baseClass, "content")}
-                     ref={(el) => {
-                        this.content = el;
-                     }}
-                  >
-                     {children}
-                  </div>
-               </div>
-            </div>
-         </div>
-      );
-   }
-
-   componentDidMount() {
-      this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
-      this.componentDidUpdate();
-   }
-
-   componentDidUpdate() {
-      let { widget } = this.props;
-      let scrollable = false;
-      if (widget.horizontal) {
-         let scrollSize = this.scroller!.offsetHeight - this.scroller!.clientHeight;
-         this.scroller!.style.marginBottom = `${-scrollSize}px`;
-         if (this.content!.scrollWidth > this.clip!.clientWidth) scrollable = true;
-      }
-      if (widget.vertical) {
-         let scrollSize = this.scroller!.offsetWidth - this.scroller!.clientWidth;
-         this.scroller!.style.marginRight = `${-scrollSize}px`;
-         if (this.content!.scrollHeight > this.clip!.clientHeight) scrollable = true;
-      }
-      if (scrollable != this.state.scrollable) this.setState({ scrollable });
-
-      this.scrollIntoView();
-   }
-
-   componentWillUnmount() {
-      this.unsubscribeResize!();
-   }
-
-   scroll(e: any, direction: string) {
-      e.stopPropagation();
-      e.preventDefault();
-
-      this.doScroll = () => {
-         if (!this.scroller) return;
-
-         switch (direction) {
-            case "left":
-               this.scroller.scrollLeft -= 10;
-               break;
-
-            case "right":
-               this.scroller.scrollLeft += 10;
-               break;
-
-            case "up":
-               this.scroller.scrollTop -= 10;
-               break;
-
-            case "down":
-               this.scroller.scrollTop += 10;
-               break;
-         }
-
-         if (this.doScroll) requestAnimationFrame(this.doScroll);
-      };
-      this.doScroll();
-   }
-
-   scrollIntoView() {
-      let { data, widget } = this.props;
-      let { scrollIntoViewSelector } = data;
-
-      if (isString(scrollIntoViewSelector)) {
-         let child = this.el?.querySelector(scrollIntoViewSelector);
-         if (child) scrollElementIntoView(child, widget.vertical, widget.horizontal);
-      }
-   }
-}
-
-export class HScroller extends Scroller {}
-
-HScroller.prototype.horizontal = true;
-
-export class VScroller extends Scroller {}
-
-VScroller.prototype.vertical = true;
+/** @jsxImportSource react */
+import { Icon } from "../Icon";
+import { VDOM } from "../../ui/Widget";
+import { StyledContainerBase, StyledContainerConfig } from "../../ui/Container";
+import { ResizeManager } from "../../ui/ResizeManager";
+import { isString, scrollElementIntoView } from "../../util";
+import { RenderingContext } from "../../ui/RenderingContext";
+import { Instance } from "../../ui/Instance";
+import { BooleanProp, StringProp } from "../../ui/Prop";
+
+export interface ScrollerConfig extends StyledContainerConfig {
+   horizontal?: BooleanProp;
+   vertical?: BooleanProp;
+   scrollIntoViewSelector?: StringProp;
+}
+
+export class Scroller extends StyledContainerBase<ScrollerConfig> {
+   declare baseClass: string;
+   declare public horizontal?: any;
+   declare public vertical?: any;
+   declare public scrollIntoViewSelector?: any;
+
+   constructor(config?: ScrollerConfig) {
+      super(config);
+   }
+
+   init() {
+      if (!this.vertical) this.horizontal = true; //default
+
+      super.init();
+   }
+
+   declareData(...args: any[]) {
+      super.declareData(...args, {
+         scrollIntoViewSelector: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string) {
+      return (
+         <HScrollerComponent key={key} widget={this} data={instance.data}>
+            {(this as any).renderChildren(context, instance)}
+         </HScrollerComponent>
+      );
+   }
+}
+
+Scroller.prototype.baseClass = "scroller";
+
+interface HScrollerComponentProps {
+   widget: Scroller;
+   data: any;
+   children?: any;
+}
+
+interface HScrollerComponentState {
+   scrollable: boolean;
+}
+
+export class HScrollerComponent extends VDOM.Component<HScrollerComponentProps, HScrollerComponentState> {
+   declare el?: HTMLElement | null;
+   declare clip?: HTMLElement | null;
+   declare scroller?: HTMLElement | null;
+   declare content?: HTMLElement | null;
+   unsubscribeResize?: () => void;
+   declare doScroll?: any;
+   stopScrolling: () => void;
+   scrollLeft: (e: any) => void;
+   scrollRight: (e: any) => void;
+   scrollUp: (e: any) => void;
+   scrollDown: (e: any) => void;
+
+   constructor(props: HScrollerComponentProps) {
+      super(props);
+      this.stopScrolling = () => {
+         delete this.doScroll;
+      };
+      this.scrollLeft = (e) => this.scroll(e, "left");
+      this.scrollRight = (e) => this.scroll(e, "right");
+      this.scrollUp = (e) => this.scroll(e, "up");
+      this.scrollDown = (e) => this.scroll(e, "down");
+      this.state = { scrollable: false };
+   }
+
+   render() {
+      let { data, children, widget } = this.props;
+      let { CSS, baseClass } = widget;
+
+      return (
+         <div
+            className={CSS.expand(
+               data.classNames,
+               CSS.state({
+                  scrollable: this.state.scrollable,
+                  horizontal: widget.horizontal,
+                  vertical: widget.vertical,
+               }),
+            )}
+            style={data.style}
+            ref={(el) => {
+               this.el = el;
+            }}
+         >
+            {widget.horizontal && (
+               <div
+                  className={CSS.element(baseClass, "left-arrow")}
+                  onMouseDown={this.scrollLeft}
+                  onTouchStart={this.scrollLeft}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.horizontal && (
+               <div
+                  className={CSS.element(baseClass, "right-arrow")}
+                  onMouseDown={this.scrollRight}
+                  onTouchStart={this.scrollRight}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.vertical && (
+               <div
+                  className={CSS.element(baseClass, "top-arrow")}
+                  onMouseDown={this.scrollUp}
+                  onTouchStart={this.scrollUp}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            {widget.vertical && (
+               <div
+                  className={CSS.element(baseClass, "bottom-arrow")}
+                  onMouseDown={this.scrollDown}
+                  onTouchStart={this.scrollDown}
+                  onMouseUp={this.stopScrolling}
+                  onTouchEnd={this.stopScrolling}
+               >
+                  {Icon.render("drop-down", { className: CSS.element(baseClass, "icon") })}
+               </div>
+            )}
+
+            <div
+               className={CSS.element(baseClass, "clip")}
+               ref={(el) => {
+                  this.clip = el;
+               }}
+            >
+               <div
+                  className={CSS.element(baseClass, "scroller")}
+                  ref={(el) => {
+                     this.scroller = el;
+                  }}
+               >
+                  <div
+                     className={CSS.element(baseClass, "content")}
+                     ref={(el) => {
+                        this.content = el;
+                     }}
+                  >
+                     {children}
+                  </div>
+               </div>
+            </div>
+         </div>
+      );
+   }
+
+   componentDidMount() {
+      this.unsubscribeResize = ResizeManager.trackElement(this.clip, this.componentDidUpdate.bind(this));
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate() {
+      let { widget } = this.props;
+      let scrollable = false;
+      if (widget.horizontal) {
+         let scrollSize = this.scroller!.offsetHeight - this.scroller!.clientHeight;
+         this.scroller!.style.marginBottom = `${-scrollSize}px`;
+         if (this.content!.scrollWidth > this.clip!.clientWidth) scrollable = true;
+      }
+      if (widget.vertical) {
+         let scrollSize = this.scroller!.offsetWidth - this.scroller!.clientWidth;
+         this.scroller!.style.marginRight = `${-scrollSize}px`;
+         if (this.content!.scrollHeight > this.clip!.clientHeight) scrollable = true;
+      }
+      if (scrollable != this.state.scrollable) this.setState({ scrollable });
+
+      this.scrollIntoView();
+   }
+
+   componentWillUnmount() {
+      this.unsubscribeResize!();
+   }
+
+   scroll(e: any, direction: string) {
+      e.stopPropagation();
+      e.preventDefault();
+
+      this.doScroll = () => {
+         if (!this.scroller) return;
+
+         switch (direction) {
+            case "left":
+               this.scroller.scrollLeft -= 10;
+               break;
+
+            case "right":
+               this.scroller.scrollLeft += 10;
+               break;
+
+            case "up":
+               this.scroller.scrollTop -= 10;
+               break;
+
+            case "down":
+               this.scroller.scrollTop += 10;
+               break;
+         }
+
+         if (this.doScroll) requestAnimationFrame(this.doScroll);
+      };
+      this.doScroll();
+   }
+
+   scrollIntoView() {
+      let { data, widget } = this.props;
+      let { scrollIntoViewSelector } = data;
+
+      if (isString(scrollIntoViewSelector)) {
+         let child = this.el?.querySelector(scrollIntoViewSelector);
+         if (child) scrollElementIntoView(child, widget.vertical, widget.horizontal);
+      }
+   }
+}
+
+export class HScroller extends Scroller {}
+
+HScroller.prototype.horizontal = true;
+
+export class VScroller extends Scroller {}
+
+VScroller.prototype.vertical = true;

package/src/widgets/nav/Submenu.ts

@@ -1,6 +1,6 @@
-import { MenuItem } from './MenuItem';
-
-export class Submenu extends MenuItem {}
-
-
-
+import { MenuItem } from './MenuItem';
+
+export class Submenu extends MenuItem {}
+
+
+

package/src/widgets/nav/Tab.scss

@@ -1,82 +1,82 @@
-
-@use "sass:map";
-@import "cover";
-
-@mixin cx-tab(
-   $name: 'tab',
-   $state-style-map: $cx-tab-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} {
-      box-sizing: border-box;
-      display: inline-block;
-
-      @include cx-add-state-rules($state-style-map, default);
-
-
-      &:hover {
-         @include cx-add-state-rules($state-style-map, hover);
-      }
-
-      &:focus {
-         @include cx-add-state-rules($state-style-map, cursor);
-      }
-
-      &.#{$state}active {
-         @include cx-add-state-rules($state-style-map, selected);
-
-         &:focus {
-            @include cx-add-state-rules($state-style-map, selected-cursor);
-         }
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($state-style-map, disabled);
-      }
-
-      @each $name, $config in $cx-tab-mods {
-         &.#{$mod}#{$name} {
-            @include cx-add-state-rules($config, default);
-
-            &:hover {
-               @include cx-add-state-rules($config, hover);
-            }
-
-            &:focus {
-               @include cx-add-state-rules($config, cursor);
-            }
-
-            &.#{$state}active {
-               @include cx-add-state-rules($config, selected);
-
-               &:focus {
-                  @include cx-add-state-rules($config, selected-cursor);
-               }
-            }
-
-            &.#{$state}disabled {
-               @include cx-add-state-rules($config, disabled);
-            }
-         }
-      }
-
-      &.#{$mod}classic.#{$state}active:after {
-         content: ' ';
-         position: absolute;
-         top: 100%;
-         left: 0;
-         right: 0;
-         height: 2px;
-         background: inherit;
-      }
-   }
-}
-
-@if (cx-should-include('cx/widgets/Tab')) {
-   @include cx-tab();
-}
+
+@use "sass:map";
+@import "cover";
+
+@mixin cx-tab(
+   $name: 'tab',
+   $state-style-map: $cx-tab-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} {
+      box-sizing: border-box;
+      display: inline-block;
+
+      @include cx-add-state-rules($state-style-map, default);
+
+
+      &:hover {
+         @include cx-add-state-rules($state-style-map, hover);
+      }
+
+      &:focus {
+         @include cx-add-state-rules($state-style-map, cursor);
+      }
+
+      &.#{$state}active {
+         @include cx-add-state-rules($state-style-map, selected);
+
+         &:focus {
+            @include cx-add-state-rules($state-style-map, selected-cursor);
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($state-style-map, disabled);
+      }
+
+      @each $name, $config in $cx-tab-mods {
+         &.#{$mod}#{$name} {
+            @include cx-add-state-rules($config, default);
+
+            &:hover {
+               @include cx-add-state-rules($config, hover);
+            }
+
+            &:focus {
+               @include cx-add-state-rules($config, cursor);
+            }
+
+            &.#{$state}active {
+               @include cx-add-state-rules($config, selected);
+
+               &:focus {
+                  @include cx-add-state-rules($config, selected-cursor);
+               }
+            }
+
+            &.#{$state}disabled {
+               @include cx-add-state-rules($config, disabled);
+            }
+         }
+      }
+
+      &.#{$mod}classic.#{$state}active:after {
+         content: ' ';
+         position: absolute;
+         top: 100%;
+         left: 0;
+         right: 0;
+         height: 2px;
+         background: inherit;
+      }
+   }
+}
+
+@if (cx-should-include('cx/widgets/Tab')) {
+   @include cx-tab();
+}