cx 25.2.0 → 25.3.1

package/src/util/index.js

@@ -1,54 +1,54 @@
-export * from "./Console";
-export * from "./Debug";
-export * from "./DOM";
-export * from "./Format";
-export * from "./expandFatArrows";
-export * from "./GlobalCacheIdentifier";
-export * from "./innerTextTrim";
-export * from "./isDigit";
-export * from "./isPromise";
-export * from "./isTouchDevice";
-export * from "./KeyCode";
-export * from "./parseStyle";
-export * from "./quote";
-export * from "./scrollElementIntoView";
-export * from "./shallowEquals";
-export * from "./Timing";
-export * from "./date/index";
-export * from "./color/index";
-export * from "./getVendorPrefix";
-export * from "./eventCallbacks";
-export * from "./getSearchQueryPredicate";
-export * from "./escapeSpecialRegexCharacters";
-export * from "./browserSupportsPassiveEventHandlers";
-export * from "./isTouchEvent";
-export * from "./debounce";
-export * from "./throttle";
-export * from "./SubscriberList";
-export * from "./findScrollableParent";
-export * from "./getScrollerBoundingClientRect";
-export * from "./isNonEmptyArray";
-export * from "./isArray";
-export * from "./isObject";
-export * from "./isNumber";
-export * from "./isFunction";
-export * from "./isString";
-export * from "./isUndefined";
-export * from "./isDefined";
-export * from "./routeAppend";
-export * from "./reverseSlice";
-export * from "./getTopLevelBoundingClientRect";
-export * from "./getParentFrameBoundingClientRect";
-export * from "./getActiveElement";
-export * from "./Component";
-export * from "./onIdleCallback";
-export * from "./validatedDebounce";
-export * from "./addEventListenerWithOptions";
-export * from "./coalesce";
-export * from "./dummyCallback";
-export * from "./calculateNaturalElementHeight";
-export * from "./isTextInputElement";
-export * from "./capitalize";
-export * from "./isValidIdentifierName";
-
-export * from "./TraversalStack";
+export * from "./Console";
+export * from "./Debug";
+export * from "./DOM";
+export * from "./Format";
+export * from "./expandFatArrows";
+export * from "./GlobalCacheIdentifier";
+export * from "./innerTextTrim";
+export * from "./isDigit";
+export * from "./isPromise";
+export * from "./isTouchDevice";
+export * from "./KeyCode";
+export * from "./parseStyle";
+export * from "./quote";
+export * from "./scrollElementIntoView";
+export * from "./shallowEquals";
+export * from "./Timing";
+export * from "./date/index";
+export * from "./color/index";
+export * from "./getVendorPrefix";
+export * from "./eventCallbacks";
+export * from "./getSearchQueryPredicate";
+export * from "./escapeSpecialRegexCharacters";
+export * from "./browserSupportsPassiveEventHandlers";
+export * from "./isTouchEvent";
+export * from "./debounce";
+export * from "./throttle";
+export * from "./SubscriberList";
+export * from "./findScrollableParent";
+export * from "./getScrollerBoundingClientRect";
+export * from "./isNonEmptyArray";
+export * from "./isArray";
+export * from "./isObject";
+export * from "./isNumber";
+export * from "./isFunction";
+export * from "./isString";
+export * from "./isUndefined";
+export * from "./isDefined";
+export * from "./routeAppend";
+export * from "./reverseSlice";
+export * from "./getTopLevelBoundingClientRect";
+export * from "./getParentFrameBoundingClientRect";
+export * from "./getActiveElement";
+export * from "./Component";
+export * from "./onIdleCallback";
+export * from "./validatedDebounce";
+export * from "./addEventListenerWithOptions";
+export * from "./coalesce";
+export * from "./dummyCallback";
+export * from "./calculateNaturalElementHeight";
+export * from "./isTextInputElement";
+export * from "./capitalize";
+export * from "./isValidIdentifierName";
+
+export * from "./TraversalStack";

package/src/util/isValidIdentifierName.d.ts

@@ -1 +1 @@
-export function isValidIdentifierName(name: string): boolean;
+export function isValidIdentifierName(name: string): boolean;

package/src/util/isValidIdentifierName.js

@@ -1,5 +1,5 @@
-const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
-
-export function isValidIdentifierName(name) {
-   return regex.test(name);
-}
+const regex = /^[$_\p{ID_Start}][$_\u{200C}\u{200D}\p{ID_Continue}]*$/u;
+
+export function isValidIdentifierName(name) {
+   return regex.test(name);
+}

package/src/util/isValidIdentifierName.spec.js

@@ -1,33 +1,33 @@
-import { isValidIdentifierName } from "./isValidIdentifierName";
-import assert from "assert";
-
-describe("isValidIdentifierName", function () {
-   it("names starting with a number are not valid", function () {
-      assert(!isValidIdentifierName("1a"));
-      assert(!isValidIdentifierName("00"));
-      assert(!isValidIdentifierName("0_abc"));
-   });
-
-   it("names starting with a dollar sign are valid", function () {
-      assert(isValidIdentifierName("$a"));
-      assert(isValidIdentifierName("$"));
-   });
-
-   it("names starting with an underscore are valid", function () {
-      assert(isValidIdentifierName("_a"));
-      assert(isValidIdentifierName("_"));
-   });
-
-   it("names starting with a letter are valid", function () {
-      assert(isValidIdentifierName("a"));
-      assert(isValidIdentifierName("abc"));
-      assert(isValidIdentifierName("abc0123"));
-   });
-
-   it("names with invalid characters are not valid", function () {
-      assert(!isValidIdentifierName("a b"));
-      assert(!isValidIdentifierName("a-b"));
-      assert(!isValidIdentifierName("a.b"));
-      assert(!isValidIdentifierName("a!b"));
-   });
-});
+import { isValidIdentifierName } from "./isValidIdentifierName";
+import assert from "assert";
+
+describe("isValidIdentifierName", function () {
+   it("names starting with a number are not valid", function () {
+      assert(!isValidIdentifierName("1a"));
+      assert(!isValidIdentifierName("00"));
+      assert(!isValidIdentifierName("0_abc"));
+   });
+
+   it("names starting with a dollar sign are valid", function () {
+      assert(isValidIdentifierName("$a"));
+      assert(isValidIdentifierName("$"));
+   });
+
+   it("names starting with an underscore are valid", function () {
+      assert(isValidIdentifierName("_a"));
+      assert(isValidIdentifierName("_"));
+   });
+
+   it("names starting with a letter are valid", function () {
+      assert(isValidIdentifierName("a"));
+      assert(isValidIdentifierName("abc"));
+      assert(isValidIdentifierName("abc0123"));
+   });
+
+   it("names with invalid characters are not valid", function () {
+      assert(!isValidIdentifierName("a b"));
+      assert(!isValidIdentifierName("a-b"));
+      assert(!isValidIdentifierName("a.b"));
+      assert(!isValidIdentifierName("a!b"));
+   });
+});

package/src/util/scss/add-rules.scss

@@ -1,38 +1,38 @@
-@mixin cx-add-rules($styles) {
-   @each $rule, $value in $styles {
-      #{$rule}: $value;
-   }
-}
-
-@mixin cx-add-state-rules($state-style-map, $key) {
-   @include cx-add-rules(map-get($state-style-map, $key));
-}
-
-@function cx-merge-state-style-maps($state-style-map, $override-style-map) {
-   $result: $state-style-map;
-
-   @if ($override-style-map != null) {
-      @each $key, $new-value in $override-style-map {
-         $old-value: map-get($state-style-map, $key);
-         @if ($old-value != null) {
-            $new-value: map-merge($old-value, $new-value);
-         }
-         $result: map-merge(
-            $result,
-            (
-               $key: $new-value,
-            )
-         );
-      }
-   }
-
-   @return $result;
-}
-
-@function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
-   $result: map-get(map-get($state-style-map, $key), $rule);
-   @if ($result != null) {
-      @return $result;
-   }
-   @return $default;
-}
+@mixin cx-add-rules($styles) {
+   @each $rule, $value in $styles {
+      #{$rule}: $value;
+   }
+}
+
+@mixin cx-add-state-rules($state-style-map, $key) {
+   @include cx-add-rules(map-get($state-style-map, $key));
+}
+
+@function cx-merge-state-style-maps($state-style-map, $override-style-map) {
+   $result: $state-style-map;
+
+   @if ($override-style-map != null) {
+      @each $key, $new-value in $override-style-map {
+         $old-value: map-get($state-style-map, $key);
+         @if ($old-value != null) {
+            $new-value: map-merge($old-value, $new-value);
+         }
+         $result: map-merge(
+            $result,
+            (
+               $key: $new-value,
+            )
+         );
+      }
+   }
+
+   @return $result;
+}
+
+@function cx-get-state-rule($state-style-map, $key, $rule, $default: null) {
+   $result: map-get(map-get($state-style-map, $key), $rule);
+   @if ($result != null) {
+      @return $result;
+   }
+   @return $default;
+}

package/src/widgets/CxCredit.scss

@@ -1,37 +1,37 @@
-@mixin cx-cxcredit($name: "cxcredit", $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} {
-      width: 50px;
-      height: 50px;
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in-out;
-      background: rgba(255, 255, 255, 0.1);
-      cursor: pointer;
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-
-      &:hover {
-         opacity: 1;
-      }
-
-      &.#{$mod}inline {
-         position: relative;
-         bottom: auto;
-         right: auto;
-      }
-   }
-
-   .#{$element}#{$name}-icon {
-      width: 100%;
-      height: 100%;
-   }
-}
-
-@if (cx-should-include("cx/widgets/CxCredit")) {
-   @include cx-cxcredit();
-}
+@mixin cx-cxcredit($name: "cxcredit", $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} {
+      width: 50px;
+      height: 50px;
+      opacity: 0.5;
+      transition: opacity 0.3s ease-in-out;
+      background: rgba(255, 255, 255, 0.1);
+      cursor: pointer;
+      position: fixed;
+      bottom: 20px;
+      right: 20px;
+
+      &:hover {
+         opacity: 1;
+      }
+
+      &.#{$mod}inline {
+         position: relative;
+         bottom: auto;
+         right: auto;
+      }
+   }
+
+   .#{$element}#{$name}-icon {
+      width: 100%;
+      height: 100%;
+   }
+}
+
+@if (cx-should-include("cx/widgets/CxCredit")) {
+   @include cx-cxcredit();
+}

package/src/widgets/HighlightedSearchText.js

@@ -1,36 +1,36 @@
-import { Widget } from "../ui/Widget";
-import { VDOM } from "../ui/VDOM";
-import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
-
-export class HighlightedSearchText extends Widget {
-   declareData(...args) {
-      super.declareData(...args, {
-         text: undefined,
-         chunks: undefined,
-         query: undefined,
-      });
-   }
-
-   render(context, instance, key) {
-      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, i) => {
-         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";
+import { Widget } from "../ui/Widget";
+import { VDOM } from "../ui/VDOM";
+import { getSearchQueryHighlighter } from "../util/getSearchQueryPredicate";
+
+export class HighlightedSearchText extends Widget {
+   declareData(...args) {
+      super.declareData(...args, {
+         text: undefined,
+         chunks: undefined,
+         query: undefined,
+      });
+   }
+
+   render(context, instance, key) {
+      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, i) => {
+         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/HighlightedSearchText.scss

@@ -1,18 +1,18 @@
-@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();
-}
+@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/HtmlElement.d.ts

@@ -1,4 +1,5 @@
 import * as Cx from "../core";
+import { Instance } from "../ui/Instance";
 
 interface HtmlElementProps extends Cx.HtmlElementProps {
    /** HTML to be injected into the element. */
@@ -21,6 +22,9 @@ interface HtmlElementProps extends Cx.HtmlElementProps {
    /** Allow any prop if HtmlElement is used directly.
     * e.g. `<HtmlElement tag="form" onSubmit="submit" />`*/
    [key: string]: any;
+
+   /** Callback function called when the element is mounted in the DOM. Provides reference to the element and the component instance. */
+   onRef?: string | ((element: any, instance: Instance) => void);
 }
 
 export class HtmlElement extends Cx.Widget<HtmlElementProps> {}

package/src/widgets/List.scss

@@ -1,91 +1,91 @@
-@mixin cx-list($name: "list", $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} {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      overflow: auto;
-      border: 0 solid $cx-default-border-color;
-      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-      @include cx-add-state-rules($cx-list, default);
-
-      &:hover {
-         @include cx-add-state-rules($cx-list, hover);
-      }
-
-      &.#{$state}focused {
-         @include cx-add-state-rules($cx-list, focus);
-      }
-
-      &.#{$mod}bordered {
-         border-width: 1px;
-
-         & > .#{$element}#{$name}-item:not(:first-child) {
-            border-top-width: 1px;
-         }
-      }
-   }
-
-   .#{$element}#{$name}-item {
-      margin: 0;
-      border: 0 solid $cx-default-border-color;
-
-      @include cx-add-state-rules($cx-list-item, default);
-
-      &.#{$state}pad {
-         padding: $cx-default-list-item-padding;
-      }
-
-      .#{$state}selectable > & {
-         cursor: pointer;
-      }
-
-      &:hover {
-         @include cx-add-state-rules($cx-list-item, hover);
-      }
-
-      &.#{$state}cursor {
-         @include cx-add-state-rules($cx-list-item, hover);
-
-         .#{$block}#{$name}.#{$state}focused > &,
-         .#{$block}#{$name}:focus > & {
-            @include cx-add-state-rules($cx-list-item, cursor);
-
-            &:active {
-               @include cx-add-state-rules($cx-list-item, active);
-            }
-         }
-      }
-
-      &.#{$state}selected {
-         @include cx-add-state-rules($cx-list-item, selected);
-
-         &.#{$state}cursor {
-            @include cx-add-state-rules($cx-list-item, selected-hover);
-
-            .#{$block}#{$name}.#{$state}focused > &,
-            .#{$block}#{$name}:focus > & {
-               @include cx-add-state-rules($cx-list-item, selected-cursor);
-            }
-         }
-      }
-
-      &.#{$state}disabled {
-         @include cx-add-state-rules($cx-list-item, disabled);
-      }
-   }
-
-   .#{$element}#{$name}-empty-text {
-      padding: $cx-default-list-item-padding;
-      color: $cx-default-empty-text-color;
-   }
-}
-
-@if (cx-should-include("cx/widgets/List")) {
-   @include cx-list();
-}
+@mixin cx-list($name: "list", $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} {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      overflow: auto;
+      border: 0 solid $cx-default-border-color;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+      @include cx-add-state-rules($cx-list, default);
+
+      &:hover {
+         @include cx-add-state-rules($cx-list, hover);
+      }
+
+      &.#{$state}focused {
+         @include cx-add-state-rules($cx-list, focus);
+      }
+
+      &.#{$mod}bordered {
+         border-width: 1px;
+
+         & > .#{$element}#{$name}-item:not(:first-child) {
+            border-top-width: 1px;
+         }
+      }
+   }
+
+   .#{$element}#{$name}-item {
+      margin: 0;
+      border: 0 solid $cx-default-border-color;
+
+      @include cx-add-state-rules($cx-list-item, default);
+
+      &.#{$state}pad {
+         padding: $cx-default-list-item-padding;
+      }
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &:hover {
+         @include cx-add-state-rules($cx-list-item, hover);
+      }
+
+      &.#{$state}cursor {
+         @include cx-add-state-rules($cx-list-item, hover);
+
+         .#{$block}#{$name}.#{$state}focused > &,
+         .#{$block}#{$name}:focus > & {
+            @include cx-add-state-rules($cx-list-item, cursor);
+
+            &:active {
+               @include cx-add-state-rules($cx-list-item, active);
+            }
+         }
+      }
+
+      &.#{$state}selected {
+         @include cx-add-state-rules($cx-list-item, selected);
+
+         &.#{$state}cursor {
+            @include cx-add-state-rules($cx-list-item, selected-hover);
+
+            .#{$block}#{$name}.#{$state}focused > &,
+            .#{$block}#{$name}:focus > & {
+               @include cx-add-state-rules($cx-list-item, selected-cursor);
+            }
+         }
+      }
+
+      &.#{$state}disabled {
+         @include cx-add-state-rules($cx-list-item, disabled);
+      }
+   }
+
+   .#{$element}#{$name}-empty-text {
+      padding: $cx-default-list-item-padding;
+      color: $cx-default-empty-text-color;
+   }
+}
+
+@if (cx-should-include("cx/widgets/List")) {
+   @include cx-list();
+}