cx 26.1.1 → 26.1.3

package/src/widgets/Heading.scss

@@ -1,40 +1,40 @@
-@use "sass:map";
-
-@mixin cxb-heading($name: "heading", $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} {
-      @include cx-add-rules($cx-caption-style-map);
-
-      &.#{$state}level-1 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 1);
-      }
-
-      &.#{$state}level-2 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 2);
-      }
-
-      &.#{$state}level-3 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 3);
-      }
-
-      &.#{$state}level-4 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 4);
-      }
-
-      &.#{$state}level-5 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 5);
-      }
-
-      &.#{$state}level-6 {
-         @include cx-add-state-rules($cx-caption-level-style-map, 6);
-      }
-   }
-}
-
-@if (cx-should-include("cx/widgets/Heading")) {
-   @include cxb-heading();
-}
+@use "sass:map";
+
+@mixin cxb-heading($name: "heading", $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} {
+      @include cx-add-rules($cx-caption-style-map);
+
+      &.#{$state}level-1 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 1);
+      }
+
+      &.#{$state}level-2 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 2);
+      }
+
+      &.#{$state}level-3 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 3);
+      }
+
+      &.#{$state}level-4 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 4);
+      }
+
+      &.#{$state}level-5 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 5);
+      }
+
+      &.#{$state}level-6 {
+         @include cx-add-state-rules($cx-caption-level-style-map, 6);
+      }
+   }
+}
+
+@if (cx-should-include("cx/widgets/Heading")) {
+   @include cxb-heading();
+}

package/src/widgets/Heading.ts

@@ -1,43 +1,43 @@
-import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "./HtmlElement";
-import { RenderingContext } from "../ui/RenderingContext";
-
-export interface HeadingConfig extends HtmlElementConfigBase {
-   /** Name of the HTML element to be rendered. Default is `div`. */
-   tag?: string;
-
-   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
-   level?: number | string;
-
-   /** Base CSS class. Default is `heading`. */
-   baseClass?: string;
-}
-
-export class Heading extends HtmlElement<HeadingConfig, HtmlElementInstance> {
-   declare level?: number | string;
-
-   init(): void {
-      this.tag = `h${this.level}`;
-      super.init();
-   }
-
-   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
-      let { data } = instance;
-      data.stateMods = {
-         ...data.stateMods,
-         [`level-${this.level}`]: true,
-      };
-      super.prepareData(context, instance);
-   }
-
-   isValidHtmlAttribute(attrName: string): string | false {
-      switch (attrName) {
-         case "level":
-            return false;
-
-         default: return super.isValidHtmlAttribute(attrName);
-      }
-   }
-}
-
-Heading.prototype.level = 3;
+import { HtmlElement, HtmlElementConfigBase, HtmlElementInstance } from "./HtmlElement";
+import { RenderingContext } from "../ui/RenderingContext";
+
+export interface HeadingConfig extends HtmlElementConfigBase {
+   /** Name of the HTML element to be rendered. Default is `div`. */
+   tag?: string;
+
+   /** Heading level. Allowed values go from 1 to 6. Default is 3. */
+   level?: number | string;
+
+   /** Base CSS class. Default is `heading`. */
+   baseClass?: string;
+}
+
+export class Heading extends HtmlElement<HeadingConfig, HtmlElementInstance> {
+   declare level?: number | string;
+
+   init(): void {
+      this.tag = `h${this.level}`;
+      super.init();
+   }
+
+   prepareData(context: RenderingContext, instance: HtmlElementInstance): void {
+      let { data } = instance;
+      data.stateMods = {
+         ...data.stateMods,
+         [`level-${this.level}`]: true,
+      };
+      super.prepareData(context, instance);
+   }
+
+   isValidHtmlAttribute(attrName: string): string | false {
+      switch (attrName) {
+         case "level":
+            return false;
+
+         default: return super.isValidHtmlAttribute(attrName);
+      }
+   }
+}
+
+Heading.prototype.level = 3;
 Heading.prototype.baseClass = "heading";

package/src/widgets/HighlightedSearchText.scss

@@ -1,20 +1,20 @@
-@use "sass:map";
-
-@mixin cxb-highlightedsearchtext(
-   $name: "highlightedsearchtext",
-   $styles: $cx-highlightedsearchtext-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} {
-      @include cx-add-rules($styles);
-   }
-}
-
-@if (cx-should-include("cx/widgets/HighlightedSearchText")) {
-   @include cxb-highlightedsearchtext();
-}
+@use "sass:map";
+
+@mixin cxb-highlightedsearchtext(
+   $name: "highlightedsearchtext",
+   $styles: $cx-highlightedsearchtext-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} {
+      @include cx-add-rules($styles);
+   }
+}
+
+@if (cx-should-include("cx/widgets/HighlightedSearchText")) {
+   @include cxb-highlightedsearchtext();
+}

package/src/widgets/HighlightedSearchText.tsx

@@ -1,54 +1,54 @@
-/** @jsxImportSource react */
-import { Instance } from "../ui/Instance";
-import type { RenderingContext } from "../ui/RenderingContext";
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
-import { StringProp, Prop } from "../ui/Prop";
-
-export interface HighlightedSearchTextConfig extends WidgetConfig {
-   /** Search query used to highlight matching text. */
-   query?: StringProp;
-
-   /** Text content to be searched and highlighted. */
-   text?: StringProp;
-
-   /** Pre-computed text chunks where odd-indexed chunks are highlighted. */
-   chunks?: Prop<string[]>;
-}
-
-export class HighlightedSearchText extends Widget<HighlightedSearchTextConfig> {
-   constructor(config?: HighlightedSearchTextConfig) {
-      super(config);
-   }
-
-   declareData(...args: Record<string, unknown>[]) {
-      super.declareData(...args, {
-         text: undefined,
-         chunks: undefined,
-         query: undefined,
-      });
-   }
-
-   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
-      let { data } = instance;
-      let { text, chunks, query, classNames, style } = data;
-
-      if (!chunks && text && query) {
-         let highlighter = getSearchQueryHighlighter(query, { cache: true });
-         chunks = highlighter(text);
-      }
-
-      if (!chunks) return text;
-      return chunks.map((text: string, i: number) => {
-         if (i % 2 == 0) return text;
-         return (
-            <span key={`${key}-${i}`} className={classNames} style={style}>
-               {text}
-            </span>
-         );
-      });
-   }
-}
-
-HighlightedSearchText.prototype.styled = true;
-HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";
+/** @jsxImportSource react */
+import { Instance } from "../ui/Instance";
+import type { RenderingContext } from "../ui/RenderingContext";
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
+import { StringProp, Prop } from "../ui/Prop";
+
+export interface HighlightedSearchTextConfig extends WidgetConfig {
+   /** Search query used to highlight matching text. */
+   query?: StringProp;
+
+   /** Text content to be searched and highlighted. */
+   text?: StringProp;
+
+   /** Pre-computed text chunks where odd-indexed chunks are highlighted. */
+   chunks?: Prop<string[]>;
+}
+
+export class HighlightedSearchText extends Widget<HighlightedSearchTextConfig> {
+   constructor(config?: HighlightedSearchTextConfig) {
+      super(config);
+   }
+
+   declareData(...args: Record<string, unknown>[]) {
+      super.declareData(...args, {
+         text: undefined,
+         chunks: undefined,
+         query: undefined,
+      });
+   }
+
+   render(context: RenderingContext, instance: Instance, key: string): React.ReactNode {
+      let { data } = instance;
+      let { text, chunks, query, classNames, style } = data;
+
+      if (!chunks && text && query) {
+         let highlighter = getSearchQueryHighlighter(query, { cache: true });
+         chunks = highlighter(text);
+      }
+
+      if (!chunks) return text;
+      return chunks.map((text: string, i: number) => {
+         if (i % 2 == 0) return text;
+         return (
+            <span key={`${key}-${i}`} className={classNames} style={style}>
+               {text}
+            </span>
+         );
+      });
+   }
+}
+
+HighlightedSearchText.prototype.styled = true;
+HighlightedSearchText.prototype.baseClass = "highlightedsearchtext";

package/src/widgets/HtmlElement.spec.helpers.tsx

@@ -1,108 +1,108 @@
-/** @jsxImportSource react */
-import React from "react";
-
-// Function component
-export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
-   return (
-      <div className="react-function-component">
-         <h3>{props.title}</h3>
-         <div className="content">{props.children}</div>
-      </div>
-   );
-}
-
-// Function component with hooks
-export function ReactCounterComponent(props: { initialCount?: number }) {
-   const [count, setCount] = React.useState(props.initialCount ?? 0);
-   return (
-      <div className="react-counter">
-         <span className="count">{count}</span>
-         <button onClick={() => setCount(count + 1)}>Increment</button>
-      </div>
-   );
-}
-
-// Class component
-export class ReactClassComponent extends React.Component<
-   { label: string; children?: React.ReactNode },
-   { active: boolean }
-> {
-   constructor(props: { label: string; children?: React.ReactNode }) {
-      super(props);
-      this.state = { active: false };
-   }
-
-   render() {
-      return (
-         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
-            <label>{this.props.label}</label>
-            <div className="body">{this.props.children}</div>
-         </div>
-      );
-   }
-}
-
-// Pure component
-export class ReactPureComponent extends React.PureComponent<{ value: string }> {
-   render() {
-      return <span className="react-pure-component">{this.props.value}</span>;
-   }
-}
-
-// Function component with useRef and useEffect
-export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
-   const divRef = React.useRef<HTMLDivElement>(null);
-   const mountedRef = React.useRef(false);
-
-   React.useEffect(() => {
-      mountedRef.current = true;
-      props.onMount?.(divRef.current);
-      return () => {
-         mountedRef.current = false;
-      };
-   }, []);
-
-   return (
-      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
-         Component with ref and effect
-      </div>
-   );
-}
-
-// Function component with useEffect that updates state
-export function ReactEffectStateComponent(props: { value: string }) {
-   const [processed, setProcessed] = React.useState<string>("");
-   const renderCountRef = React.useRef(0);
-
-   React.useEffect(() => {
-      setProcessed(`Processed: ${props.value}`);
-   }, [props.value]);
-
-   renderCountRef.current += 1;
-
-   return (
-      <div className="react-effect-state-component">
-         <span className="processed">{processed}</span>
-         <span className="render-count">{renderCountRef.current}</span>
-      </div>
-   );
-}
-
-// Component for testing prop translation
-export function ReactPropsComponent(props: {
-   text: string;
-   count: number;
-   enabled: boolean;
-   tags?: string[];
-   onClick?: () => void;
-}) {
-   return (
-      <div className="react-props-component">
-         <span className="text">{props.text}</span>
-         <span className="count">{props.count}</span>
-         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
-         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
-         {props.onClick && <button onClick={props.onClick}>Click</button>}
-      </div>
-   );
-}
+/** @jsxImportSource react */
+import React from "react";
+
+// Function component
+export function ReactFunctionComponent(props: { title: string; children?: React.ReactNode }) {
+   return (
+      <div className="react-function-component">
+         <h3>{props.title}</h3>
+         <div className="content">{props.children}</div>
+      </div>
+   );
+}
+
+// Function component with hooks
+export function ReactCounterComponent(props: { initialCount?: number }) {
+   const [count, setCount] = React.useState(props.initialCount ?? 0);
+   return (
+      <div className="react-counter">
+         <span className="count">{count}</span>
+         <button onClick={() => setCount(count + 1)}>Increment</button>
+      </div>
+   );
+}
+
+// Class component
+export class ReactClassComponent extends React.Component<
+   { label: string; children?: React.ReactNode },
+   { active: boolean }
+> {
+   constructor(props: { label: string; children?: React.ReactNode }) {
+      super(props);
+      this.state = { active: false };
+   }
+
+   render() {
+      return (
+         <div className={`react-class-component ${this.state.active ? "active" : ""}`}>
+            <label>{this.props.label}</label>
+            <div className="body">{this.props.children}</div>
+         </div>
+      );
+   }
+}
+
+// Pure component
+export class ReactPureComponent extends React.PureComponent<{ value: string }> {
+   render() {
+      return <span className="react-pure-component">{this.props.value}</span>;
+   }
+}
+
+// Function component with useRef and useEffect
+export function ReactRefEffectComponent(props: { onMount?: (element: HTMLDivElement | null) => void }) {
+   const divRef = React.useRef<HTMLDivElement>(null);
+   const mountedRef = React.useRef(false);
+
+   React.useEffect(() => {
+      mountedRef.current = true;
+      props.onMount?.(divRef.current);
+      return () => {
+         mountedRef.current = false;
+      };
+   }, []);
+
+   return (
+      <div ref={divRef} className="react-ref-effect-component" data-mounted={mountedRef.current ? "true" : "false"}>
+         Component with ref and effect
+      </div>
+   );
+}
+
+// Function component with useEffect that updates state
+export function ReactEffectStateComponent(props: { value: string }) {
+   const [processed, setProcessed] = React.useState<string>("");
+   const renderCountRef = React.useRef(0);
+
+   React.useEffect(() => {
+      setProcessed(`Processed: ${props.value}`);
+   }, [props.value]);
+
+   renderCountRef.current += 1;
+
+   return (
+      <div className="react-effect-state-component">
+         <span className="processed">{processed}</span>
+         <span className="render-count">{renderCountRef.current}</span>
+      </div>
+   );
+}
+
+// Component for testing prop translation
+export function ReactPropsComponent(props: {
+   text: string;
+   count: number;
+   enabled: boolean;
+   tags?: string[];
+   onClick?: () => void;
+}) {
+   return (
+      <div className="react-props-component">
+         <span className="text">{props.text}</span>
+         <span className="count">{props.count}</span>
+         <span className="enabled">{props.enabled ? "yes" : "no"}</span>
+         {props.tags && <span className="tags">{props.tags.join(", ")}</span>}
+         {props.onClick && <button onClick={props.onClick}>Click</button>}
+      </div>
+   );
+}