cx 26.3.3 → 26.3.5

package/src/widgets/overlay/Window.tsx

@@ -1,320 +1,320 @@
-/** @jsxImportSource react */
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import {
-   Overlay,
-   OverlayBase,
-   OverlayBeacon,
-   OverlayComponent,
-   OverlayComponentProps,
-   OverlayComponentState,
-   OverlayConfig,
-   OverlayInstance,
-} from "./Overlay";
-import { ContentPlaceholder, ContentPlaceholderInstance } from "../../ui/layout/ContentPlaceholder";
-import { ZIndexManager } from "../../ui/ZIndexManager";
-import { Button } from "../Button";
-import { parseStyle } from "../../util/parseStyle";
-import { Localization } from "../../ui/Localization";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
-import { isDefined } from "../../util/isDefined";
-import { isString } from "../../util/isString";
-import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
-import { RenderingContext } from "../../ui/RenderingContext";
-
-export interface WindowConfig extends OverlayConfig {
-   /** Text to be displayed in the header. */
-   title?: StringProp;
-
-   /** Controls the close button visibility. Defaults to `true`. */
-   closable?: BooleanProp;
-
-   /** A custom style which will be applied to the body. */
-   bodyStyle?: StyleProp;
-
-   /** A custom style which will be applied to the header. */
-   headerStyle?: StyleProp;
-
-   /** A custom style which will be applied to the footer. */
-   footerStyle?: StyleProp;
-
-   /** Base CSS class to be applied to the field. Defaults to `window`. */
-   baseClass?: string;
-
-   /** Additional CSS class to be applied to the section body. */
-   bodyClass?: ClassProp;
-
-   /** Set to `true` to enable resizing. */
-   resizable?: boolean;
-
-   /** Set to `true` to automatically focus the field, after it renders for the first time. */
-   autoFocus?: boolean;
-
-   /** Set to `false` to prevent the window itself to be focusable. Default value is true.*/
-   focusable?: boolean;
-
-   /** Set to `true` to disable moving the window by dragging the header. */
-   fixed?: boolean;
-
-   /** Set to `true` to add default padding to the window body. */
-   pad?: boolean;
-
-   /** Optional header widget. */
-   header?: any;
-
-   /** Optional footer widget. */
-   footer?: any;
-
-   /** Custom event handler for closeable. */
-   closeable?: BooleanProp;
-}
-
-export class WindowInstance extends OverlayInstance<Window> {
-   headerEl?: HTMLElement;
-   footerEl?: HTMLElement;
-   bodyEl?: HTMLElement;
-   containerEl?: HTMLElement;
-}
-
-export class Window extends OverlayBase<WindowConfig, WindowInstance> {
-   declare closable?: BooleanProp;
-   declare closeable?: BooleanProp;
-   declare resizable?: boolean;
-   declare fixed?: boolean;
-   declare autoFocus?: boolean;
-   declare focusable?: boolean;
-   declare pad?: boolean;
-   declare bodyStyle?: StyleProp;
-   declare headerStyle?: StyleProp;
-   declare footerStyle?: StyleProp;
-   declare bodyClass?: ClassProp;
-   declare title?: StringProp;
-   declare header?: any;
-   declare footer?: any;
-   declare baseClass: string;
-
-   init() {
-      if (isDefined(this.closeable)) this.closable = this.closeable;
-
-      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();
-   }
-
-   declareData(...args: any) {
-      return super.declareData(...args, {
-         title: undefined,
-         closable: undefined,
-         bodyStyle: { structured: true },
-         bodyClass: { structured: true },
-         headerStyle: { structured: true },
-         footerStyle: { structured: true },
-      });
-   }
-
-   initHelpers(...args: any) {
-      return super.initHelpers(...args, {
-         header: Widget.create(
-            this.header || {
-               type: ContentPlaceholder,
-               name: "header",
-               scoped: true,
-            },
-         ),
-         footer: Widget.create(
-            this.footer || {
-               type: ContentPlaceholder,
-               name: "footer",
-               scoped: true,
-            },
-         ),
-         close:
-            this.closable &&
-            Button.create({
-               mod: "hollow",
-               dismiss: true,
-               icon: "close",
-               style: "margin-left: auto",
-               onTouchStart: stopPropagation,
-               onMouseDown: stopPropagation,
-            }),
-      });
-   }
-
-   exploreCleanup(context: RenderingContext, instance: WindowInstance): void {
-      super.exploreCleanup(context, instance);
-
-      let { helpers } = instance;
-      let unregisterHeader =
-         helpers!.header && (helpers!.header as ContentPlaceholderInstance).unregisterContentPlaceholder;
-      if (unregisterHeader) unregisterHeader();
-
-      let unregisterFooter =
-         helpers!.footer && (helpers!.footer as ContentPlaceholderInstance).unregisterContentPlaceholder;
-      if (unregisterFooter) unregisterFooter();
-   }
-
-   renderHeader(context: RenderingContext, instance: WindowInstance, key: string): any[] {
-      let { data } = instance;
-      let result = [];
-      if (data.title) result.push(data.title);
-      if (instance.helpers) {
-         let header = getContent(instance.helpers.header && instance.helpers.header.render(context));
-         if (header) result.push(header);
-         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
-      }
-      return result;
-   }
-
-   renderFooter(context: RenderingContext, instance: WindowInstance, key: string): any {
-      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context));
-   }
-
-   render(context: RenderingContext, instance: WindowInstance, key: string): any {
-      var header = this.renderHeader(context, instance, "header");
-      var footer = this.renderFooter(context, instance, "footer");
-
-      return (
-         <OverlayBeacon
-            key={key}
-            childrenFactory={(beaconEl) => (
-               <WindowComponent
-                  beaconEl={beaconEl}
-                  instance={instance}
-                  header={header}
-                  footer={footer}
-                  subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
-                  parentEl={context.options.parentEl}
-               >
-                  {this.renderContents(context, instance)}
-               </WindowComponent>
-            )}
-         />
-      );
-   }
-}
-
-Window.prototype.baseClass = "window";
-Window.prototype.closable = true;
-Window.prototype.resizable = false;
-Window.prototype.fixed = false;
-Window.prototype.autoFocus = true;
-Window.prototype.focusable = true;
-Window.prototype.pad = true;
-Window.prototype.needsBeacon = true;
-
-Widget.alias("window", Window);
-Localization.registerPrototype("cx/widgets/Window", Window);
-
-interface WindowComponentProps extends OverlayComponentProps {
-   header: any[];
-   footer: any;
-   instance: WindowInstance;
-}
-
-interface WindowComponentState extends OverlayComponentState {
-   active?: boolean;
-}
-
-class WindowComponent extends OverlayComponent<WindowComponentProps, WindowComponentState> {
-   headerEl?: HTMLElement | null;
-   footerEl?: HTMLElement | null;
-   bodyEl?: HTMLElement | null;
-
-   renderOverlayBody() {
-      var { widget, data } = this.props.instance;
-      var { CSS, baseClass, pad } = widget;
-
-      let header, footer;
-
-      if (this.props.header.length > 0) {
-         header = (
-            <header
-               key="header"
-               ref={(c) => {
-                  this.headerEl = c;
-               }}
-               className={CSS.element(baseClass, "header")}
-               style={data.headerStyle}
-               onMouseDown={this.onHeaderMouseDown.bind(this)}
-               onMouseUp={ddMouseUp}
-               onMouseMove={this.onHeaderMouseMove.bind(this)}
-               onTouchStart={this.onHeaderMouseDown.bind(this)}
-               onTouchEnd={ddMouseUp}
-               onTouchMove={this.onHeaderMouseMove.bind(this)}
-            >
-               {this.props.header}
-            </header>
-         );
-      }
-
-      if (this.props.footer) {
-         footer = (
-            <footer
-               key="footer"
-               ref={(c) => {
-                  this.footerEl = c;
-               }}
-               className={CSS.element(baseClass, "footer")}
-               style={data.footerStyle}
-            >
-               {this.props.footer}
-            </footer>
-         );
-      }
-
-      var body = (
-         <div
-            key="body"
-            ref={(c) => {
-               this.bodyEl = c;
-            }}
-            className={CSS.expand(CSS.element(baseClass, "body", { pad }), data.bodyClass)}
-            style={data.bodyStyle}
-         >
-            {this.props.children}
-         </div>
-      );
-
-      return [header, body, footer];
-   }
-
-   getOverlayCssClass() {
-      var cls = super.getOverlayCssClass();
-      if (this.state.active) cls += " cxs-active";
-      return cls;
-   }
-
-   onFocusIn() {
-      super.onFocusIn();
-      if (!this.state.active) {
-         if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
-         this.setState({ active: true });
-      }
-   }
-
-   onFocusOut() {
-      super.onFocusOut();
-      if (this.state.active) {
-         this.setState({
-            active: false,
-         });
-      }
-   }
-
-   onHeaderMouseDown(e: any) {
-      e.stopPropagation();
-      ddMouseDown(e);
-   }
-
-   onHeaderMouseMove(e: any) {
-      e.stopPropagation();
-      if (!(this.props.instance.widget as Window).fixed && ddDetect(e)) {
-         this.startMoveOperation(e);
-      }
-   }
-}
+/** @jsxImportSource react */
+import { Widget, VDOM, getContent } from "../../ui/Widget";
+import {
+   Overlay,
+   OverlayBase,
+   OverlayBeacon,
+   OverlayComponent,
+   OverlayComponentProps,
+   OverlayComponentState,
+   OverlayConfig,
+   OverlayInstance,
+} from "./Overlay";
+import { ContentPlaceholder, ContentPlaceholderInstance } from "../../ui/layout/ContentPlaceholder";
+import { ZIndexManager } from "../../ui/ZIndexManager";
+import { Button } from "../Button";
+import { parseStyle } from "../../util/parseStyle";
+import { Localization } from "../../ui/Localization";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { ddMouseDown, ddDetect, ddMouseUp } from "../drag-drop/ops";
+import { isDefined } from "../../util/isDefined";
+import { isString } from "../../util/isString";
+import { BooleanProp, StringProp, StyleProp, ClassProp } from "../../ui/Prop";
+import { RenderingContext } from "../../ui/RenderingContext";
+
+export interface WindowConfig extends OverlayConfig {
+   /** Text to be displayed in the header. */
+   title?: StringProp;
+
+   /** Controls the close button visibility. Defaults to `true`. */
+   closable?: BooleanProp;
+
+   /** A custom style which will be applied to the body. */
+   bodyStyle?: StyleProp;
+
+   /** A custom style which will be applied to the header. */
+   headerStyle?: StyleProp;
+
+   /** A custom style which will be applied to the footer. */
+   footerStyle?: StyleProp;
+
+   /** Base CSS class to be applied to the field. Defaults to `window`. */
+   baseClass?: string;
+
+   /** Additional CSS class to be applied to the section body. */
+   bodyClass?: ClassProp;
+
+   /** Set to `true` to enable resizing. */
+   resizable?: boolean;
+
+   /** Set to `true` to automatically focus the field, after it renders for the first time. */
+   autoFocus?: boolean;
+
+   /** Set to `false` to prevent the window itself to be focusable. Default value is true.*/
+   focusable?: boolean;
+
+   /** Set to `true` to disable moving the window by dragging the header. */
+   fixed?: boolean;
+
+   /** Set to `true` to add default padding to the window body. */
+   pad?: boolean;
+
+   /** Optional header widget. */
+   header?: any;
+
+   /** Optional footer widget. */
+   footer?: any;
+
+   /** Custom event handler for closeable. */
+   closeable?: BooleanProp;
+}
+
+export class WindowInstance extends OverlayInstance<Window> {
+   headerEl?: HTMLElement;
+   footerEl?: HTMLElement;
+   bodyEl?: HTMLElement;
+   containerEl?: HTMLElement;
+}
+
+export class Window extends OverlayBase<WindowConfig, WindowInstance> {
+   declare closable?: BooleanProp;
+   declare closeable?: BooleanProp;
+   declare resizable?: boolean;
+   declare fixed?: boolean;
+   declare autoFocus?: boolean;
+   declare focusable?: boolean;
+   declare pad?: boolean;
+   declare bodyStyle?: StyleProp;
+   declare headerStyle?: StyleProp;
+   declare footerStyle?: StyleProp;
+   declare bodyClass?: ClassProp;
+   declare title?: StringProp;
+   declare header?: any;
+   declare footer?: any;
+   declare baseClass: string;
+
+   init() {
+      if (isDefined(this.closeable)) this.closable = this.closeable;
+
+      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();
+   }
+
+   declareData(...args: any) {
+      return super.declareData(...args, {
+         title: undefined,
+         closable: undefined,
+         bodyStyle: { structured: true },
+         bodyClass: { structured: true },
+         headerStyle: { structured: true },
+         footerStyle: { structured: true },
+      });
+   }
+
+   initHelpers(...args: any) {
+      return super.initHelpers(...args, {
+         header: Widget.create(
+            this.header || {
+               type: ContentPlaceholder,
+               name: "header",
+               scoped: true,
+            },
+         ),
+         footer: Widget.create(
+            this.footer || {
+               type: ContentPlaceholder,
+               name: "footer",
+               scoped: true,
+            },
+         ),
+         close:
+            this.closable &&
+            Button.create({
+               mod: "hollow",
+               dismiss: true,
+               icon: "close",
+               style: "margin-left: auto",
+               onTouchStart: stopPropagation,
+               onMouseDown: stopPropagation,
+            }),
+      });
+   }
+
+   exploreCleanup(context: RenderingContext, instance: WindowInstance): void {
+      super.exploreCleanup(context, instance);
+
+      let { helpers } = instance;
+      let unregisterHeader =
+         helpers!.header && (helpers!.header as ContentPlaceholderInstance).unregisterContentPlaceholder;
+      if (unregisterHeader) unregisterHeader();
+
+      let unregisterFooter =
+         helpers!.footer && (helpers!.footer as ContentPlaceholderInstance).unregisterContentPlaceholder;
+      if (unregisterFooter) unregisterFooter();
+   }
+
+   renderHeader(context: RenderingContext, instance: WindowInstance, key: string): any[] {
+      let { data } = instance;
+      let result = [];
+      if (data.title) result.push(data.title);
+      if (instance.helpers) {
+         let header = getContent(instance.helpers.header && instance.helpers.header.render(context));
+         if (header) result.push(header);
+         if (data.closable && instance.helpers.close) result.push(getContent(instance.helpers.close.render(context)));
+      }
+      return result;
+   }
+
+   renderFooter(context: RenderingContext, instance: WindowInstance, key: string): any {
+      return getContent(instance.helpers && instance.helpers.footer && instance.helpers.footer.render(context));
+   }
+
+   render(context: RenderingContext, instance: WindowInstance, key: string): any {
+      var header = this.renderHeader(context, instance, "header");
+      var footer = this.renderFooter(context, instance, "footer");
+
+      return (
+         <OverlayBeacon
+            key={key}
+            childrenFactory={(beaconEl) => (
+               <WindowComponent
+                  beaconEl={beaconEl}
+                  instance={instance}
+                  header={header}
+                  footer={footer}
+                  subscribeToBeforeDismiss={context.options.subscribeToBeforeDismiss}
+                  parentEl={context.options.parentEl}
+               >
+                  {this.renderContents(context, instance)}
+               </WindowComponent>
+            )}
+         />
+      );
+   }
+}
+
+Window.prototype.baseClass = "window";
+Window.prototype.closable = true;
+Window.prototype.resizable = false;
+Window.prototype.fixed = false;
+Window.prototype.autoFocus = true;
+Window.prototype.focusable = true;
+Window.prototype.pad = true;
+Window.prototype.needsBeacon = true;
+
+Widget.alias("window", Window);
+Localization.registerPrototype("cx/widgets/Window", Window);
+
+interface WindowComponentProps extends OverlayComponentProps {
+   header: any[];
+   footer: any;
+   instance: WindowInstance;
+}
+
+interface WindowComponentState extends OverlayComponentState {
+   active?: boolean;
+}
+
+class WindowComponent extends OverlayComponent<WindowComponentProps, WindowComponentState> {
+   headerEl?: HTMLElement | null;
+   footerEl?: HTMLElement | null;
+   bodyEl?: HTMLElement | null;
+
+   renderOverlayBody() {
+      var { widget, data } = this.props.instance;
+      var { CSS, baseClass, pad } = widget;
+
+      let header, footer;
+
+      if (this.props.header.length > 0) {
+         header = (
+            <header
+               key="header"
+               ref={(c) => {
+                  this.headerEl = c;
+               }}
+               className={CSS.element(baseClass, "header")}
+               style={data.headerStyle}
+               onMouseDown={this.onHeaderMouseDown.bind(this)}
+               onMouseUp={ddMouseUp}
+               onMouseMove={this.onHeaderMouseMove.bind(this)}
+               onTouchStart={this.onHeaderMouseDown.bind(this)}
+               onTouchEnd={ddMouseUp}
+               onTouchMove={this.onHeaderMouseMove.bind(this)}
+            >
+               {this.props.header}
+            </header>
+         );
+      }
+
+      if (this.props.footer) {
+         footer = (
+            <footer
+               key="footer"
+               ref={(c) => {
+                  this.footerEl = c;
+               }}
+               className={CSS.element(baseClass, "footer")}
+               style={data.footerStyle}
+            >
+               {this.props.footer}
+            </footer>
+         );
+      }
+
+      var body = (
+         <div
+            key="body"
+            ref={(c) => {
+               this.bodyEl = c;
+            }}
+            className={CSS.expand(CSS.element(baseClass, "body", { pad }), data.bodyClass)}
+            style={data.bodyStyle}
+         >
+            {this.props.children}
+         </div>
+      );
+
+      return [header, body, footer];
+   }
+
+   getOverlayCssClass() {
+      var cls = super.getOverlayCssClass();
+      if (this.state.active) cls += " cxs-active";
+      return cls;
+   }
+
+   onFocusIn() {
+      super.onFocusIn();
+      if (!this.state.active) {
+         if (this.containerEl?.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
+         this.setState({ active: true });
+      }
+   }
+
+   onFocusOut() {
+      super.onFocusOut();
+      if (this.state.active) {
+         this.setState({
+            active: false,
+         });
+      }
+   }
+
+   onHeaderMouseDown(e: any) {
+      e.stopPropagation();
+      ddMouseDown(e);
+   }
+
+   onHeaderMouseMove(e: any) {
+      e.stopPropagation();
+      if (!(this.props.instance.widget as Window).fixed && ddDetect(e)) {
+         this.startMoveOperation(e);
+      }
+   }
+}

package/src/widgets/overlay/variables.scss

@@ -40,8 +40,7 @@ $cx-default-toast-padding: 10px !default;
 // WINDOW
 @forward "Window.variables";
 
-$cx-dependencies: map.merge(
-   $cx-dependencies,
+@include cx-register-dependencies(
    (
       "cx/widgets/Overlay": "cx/widgets/captureMouse",
       "cx/widgets/Dropdown": "cx/widgets/Overlay",