cx 26.4.0 → 26.4.1

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.maps.scss

@@ -1,78 +1,78 @@
-@use "../variables" as *;
-@use "../lists.scss" as *;
-@use "../../util/scss/deep-merge" as *;
-
-$cx-tab-state-style-map: cx-deep-map-merge(
-   $cx-list-item,
-   (
-      default: (
-         color: $cx-default-tab-color,
-         font-size: $cx-default-tab-font-size,
-         line-height: $cx-default-box-line-height,
-         font-weight: $cx-default-tab-font-weight,
-         text-decoration: none,
-         cursor: pointer,
-         text-align: center,
-         background-color: $cx-default-tab-background-color,
-         border-radius: $cx-default-tab-border-radius,
-         padding: $cx-default-tab-padding,
-         border-width: $cx-default-tab-border-width,
-         border-color: $cx-default-tab-border-color,
-         border-style: solid,
-         box-shadow: $cx-default-tab-box-shadow,
-      ),
-      hover: (
-         text-decoration: none,
-      ),
-      disabled: (
-         background-color: transparent,
-         pointer-events: none,
-      ),
-   )
-) !default;
-
-$cx-tab-mods: (
-   classic: (
-      default: (
-         position: relative,
-         border-width: 1px,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-      ),
-      selected: (
-         border-color: $cx-default-border-color,
-         background-color: $cx-default-cover-background-color,
-      ),
-   ),
-   line: (
-      default: (
-         background-color: transparent !important,
-         border-left-color: transparent !important,
-         border-right-color: transparent !important,
-         border-top-color: transparent !important,
-         border-left-width: 0,
-         border-right-width: 0,
-         border-bottom-width: 2px,
-         border-top-width: 0,
-         border-bottom-left-radius: 0,
-         border-bottom-right-radius: 0,
-         border-radius: 0,
-      ),
-      hover: (
-         border-color: rgba(128, 128, 128, 0.2),
-      ),
-      cursor: (
-         border-color: rgba(123, 190, 255, 0.3),
-      ),
-      selected: (
-         border-color: rgba(128, 128, 128, 0.4),
-      ),
-      selected-cursor: (
-         border-color: rgba(123, 190, 255, 0.7),
-      ),
-      active: (),
-      disabled: (
-         border-color: transparent,
-      ),
-   ),
-) !default;
+@use "../variables" as *;
+@use "../lists.scss" as *;
+@use "../../util/scss/deep-merge" as *;
+
+$cx-tab-state-style-map: cx-deep-map-merge(
+   $cx-list-item,
+   (
+      default: (
+         color: $cx-default-tab-color,
+         font-size: $cx-default-tab-font-size,
+         line-height: $cx-default-box-line-height,
+         font-weight: $cx-default-tab-font-weight,
+         text-decoration: none,
+         cursor: pointer,
+         text-align: center,
+         background-color: $cx-default-tab-background-color,
+         border-radius: $cx-default-tab-border-radius,
+         padding: $cx-default-tab-padding,
+         border-width: $cx-default-tab-border-width,
+         border-color: $cx-default-tab-border-color,
+         border-style: solid,
+         box-shadow: $cx-default-tab-box-shadow,
+      ),
+      hover: (
+         text-decoration: none,
+      ),
+      disabled: (
+         background-color: transparent,
+         pointer-events: none,
+      ),
+   )
+) !default;
+
+$cx-tab-mods: (
+   classic: (
+      default: (
+         position: relative,
+         border-width: 1px,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+      ),
+      selected: (
+         border-color: $cx-default-border-color,
+         background-color: $cx-default-cover-background-color,
+      ),
+   ),
+   line: (
+      default: (
+         background-color: transparent !important,
+         border-left-color: transparent !important,
+         border-right-color: transparent !important,
+         border-top-color: transparent !important,
+         border-left-width: 0,
+         border-right-width: 0,
+         border-bottom-width: 2px,
+         border-top-width: 0,
+         border-bottom-left-radius: 0,
+         border-bottom-right-radius: 0,
+         border-radius: 0,
+      ),
+      hover: (
+         border-color: rgba(128, 128, 128, 0.2),
+      ),
+      cursor: (
+         border-color: rgba(123, 190, 255, 0.3),
+      ),
+      selected: (
+         border-color: rgba(128, 128, 128, 0.4),
+      ),
+      selected-cursor: (
+         border-color: rgba(123, 190, 255, 0.7),
+      ),
+      active: (),
+      disabled: (
+         border-color: transparent,
+      ),
+   ),
+) !default;