xmlui 0.10.21 → 0.10.23

package/dist/scripts/src/components-core/rendering/ComponentAdapter.js

@@ -69,7 +69,6 @@ const event_handlers_1 = require("../event-handlers");
 const UnknownComponent_1 = __importDefault(require("./UnknownComponent"));
 const InvalidComponent_1 = __importDefault(require("./InvalidComponent"));
 const layout_resolver_1 = require("../theming/layout-resolver");
-const CoreBehaviors_1 = require("../behaviors/CoreBehaviors");
 /**
  * This component's primary responsibility is to transform a particular component definition
  * into its React representation using the current rendering context.
@@ -215,13 +214,13 @@ const ComponentAdapter = (0, react_1.forwardRef)(function ComponentAdapter(_a, r
             renderedNode = renderer(rendererContext);
         }
         /**
-         * Apply any core behaviors to the component.
+         * Apply any behaviors to the component.
          */
-        const behaviors = (0, CoreBehaviors_1.getCoreBehaviors)();
+        const behaviors = componentRegistry.getBehaviors();
         if (!isCompoundComponent) {
             for (const behavior of behaviors) {
                 if (behavior.canAttach(rendererContext.node, descriptor)) {
-                    renderedNode = behavior.attach(rendererContext, renderedNode);
+                    renderedNode = behavior.attach(rendererContext, renderedNode, descriptor);
                 }
             }
         }

package/dist/scripts/src/components-core/theming/component-layout-resolver.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BASE_COMPONENT_PART = exports.THEME_VAR_PREFIX = void 0;
+exports.specialResolvers = exports.BASE_COMPONENT_PART = exports.THEME_VAR_PREFIX = void 0;
 exports.resolveComponentLayoutProps = resolveComponentLayoutProps;
 const constants_1 = require("../constants");
 const parse_layout_props_1 = require("./parse-layout-props");
@@ -22,8 +22,8 @@ function resolveComponentLayoutProps(layoutProps = constants_1.EMPTY_OBJECT, lay
         const cssPropName = parsed.property;
         const appliedValue = (_a = value === null || value === void 0 ? void 0 : value.toString()) === null || _a === void 0 ? void 0 : _a.replace(themeVarCapturesRegex, (match) => toCssVar(match.trim()));
         // --- Some properties may need transformation
-        const cssProps = cssPropName in specialResolvers
-            ? specialResolvers[cssPropName](appliedValue, layoutContext)
+        const cssProps = cssPropName in exports.specialResolvers
+            ? exports.specialResolvers[cssPropName](appliedValue, layoutContext)
             : { [cssPropName]: appliedValue };
         // --- Check if the property belongs to one or more states
         const stateName = parsed.states && parsed.states.length > 0 ? parsed.states.join("&") : null;
@@ -93,7 +93,7 @@ function getOrientation(layoutContext) {
 function toCssVar(c) {
     return `var(--${exports.THEME_VAR_PREFIX}-${c.substring(1)})`;
 }
-const specialResolvers = {
+exports.specialResolvers = {
     paddingHorizontal: (propValue) => ({
         paddingLeft: propValue,
         paddingRight: propValue,

package/dist/scripts/src/components-core/theming/parse-layout-props.js

@@ -1,7 +1,22 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.CSS_PROPERTY_EXCEPTIONS = void 0;
 exports.parseLayoutProperty = parseLayoutProperty;
+exports.toCssPropertyName = toCssPropertyName;
 const AppContextDefs_1 = require("../../abstractions/AppContextDefs");
+/**
+ * Mapping exceptions for camelCase property names to CSS property names.
+ * These properties don't follow the standard camelCase-to-kebab-case conversion.
+ */
+exports.CSS_PROPERTY_EXCEPTIONS = {
+    textColor: "color",
+    paddingVertical: "",
+    paddingHorizontal: "",
+    marginVertical: "",
+    marginHorizontal: "",
+    borderVertical: "",
+    borderHorizontal: "",
+};
 function parseLayoutProperty(prop, parseComponent = false) {
     if (!prop || typeof prop !== 'string') {
         return "Property string cannot be empty";
@@ -77,6 +92,29 @@ function parseLayoutProperty(prop, parseComponent = false) {
     }
     return result;
 }
+/**
+ * Transforms a camelCase property name (as used in ParsedLayout.property)
+ * to its corresponding CSS style property name.
+ *
+ * Handles special cases defined in CSS_PROPERTY_EXCEPTIONS, otherwise
+ * converts camelCase to kebab-case (e.g., "fontSize" -> "font-size").
+ *
+ * @param property - The camelCase property name from ParsedLayout
+ * @returns The CSS property name in kebab-case or the mapped exception
+ *
+ * @example
+ * toCssPropertyName('fontSize') // returns 'font-size'
+ * toCssPropertyName('textColor') // returns 'color' (exception)
+ * toCssPropertyName('backgroundColor') // returns 'background-color'
+ */
+function toCssPropertyName(property) {
+    // Check if there's a mapping exception
+    if (property in exports.CSS_PROPERTY_EXCEPTIONS) {
+        return exports.CSS_PROPERTY_EXCEPTIONS[property];
+    }
+    // Convert camelCase to kebab-case
+    return property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`);
+}
 function isValidPropertyName(name) {
     // CSS property names in camelCase - start with lowercase letter, can contain letters and numbers
     return /^[a-z][a-zA-Z0-9]*$/.test(name);

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -242,6 +242,33 @@ declare type AuthDefinition = {
     defaultLoggedInUser?: any;
 };
 
+/**
+ * Defines the shape of a component behavior that can wrap a component with
+ * additional functionality.
+ */
+declare interface Behavior {
+    /**
+     * The name of the behavior (e.g., "tooltip", "animation").
+     */
+    name: string;
+    /**
+     * A function that determines if the behavior should be applied based on the
+     * component's context and props.
+     * @param node The component definition.
+     * @param metadata The metadata of the component.
+     * @returns True if the behavior can be attached, otherwise false.
+     */
+    canAttach: (node: ComponentDef, metadata: ComponentMetadata) => boolean;
+    /**
+     * A function that attaches the behavior to the component's React node.
+     * @param context The renderer context of the component.
+     * @param node The React node to attach.
+     * @param metadata The metadata of the component.
+     * @returns The attached React node.
+     */
+    attach: (context: RendererContext<any>, node: ReactNode, metadata?: ComponentMetadata) => ReactNode;
+}
+
 declare type BINARY_EXPRESSION = typeof T_BINARY_EXPRESSION;
 
 declare interface BinaryExpression extends ExpressionBase {
@@ -453,7 +480,7 @@ declare type ComponentMetadata<TProps extends Record<string, ComponentPropertyMe
     nonVisual?: boolean;
     childrenAsTemplate?: string;
     opaque?: boolean;
-    themeVars?: Array<string>;
+    themeVars?: Record<string, string>;
     themeVarDescriptions?: Record<string, string>;
     defaultThemeVars?: DefaultThemeVars;
     toneSpecificThemeVars?: Record<string, Record<string, string>>;
@@ -553,6 +580,10 @@ declare type ContributesDefinition = {
      * Themes that come with the app.
      */
     themes?: ThemeDefinition[];
+    /**
+     * Custom behaviors that come with the app.
+     */
+    behaviors?: Behavior[];
 };
 
 /**
@@ -1183,6 +1214,8 @@ declare type Props_3 = {
     id?: string;
     activeTab?: number;
     orientation?: "horizontal" | "vertical";
+    tabAlignment?: "start" | "end" | "center" | "stretch";
+    accordionView?: boolean;
     headerRenderer?: (item: {
         id?: string;
         index: number;
@@ -1543,6 +1576,8 @@ declare const standaloneExports: {
         id?: string;
         activeTab?: number;
         orientation?: "horizontal" | "vertical";
+        tabAlignment?: "start" | "end" | "center" | "stretch";
+        accordionView?: boolean;
         headerRenderer?: (item: {
             id?: string;
             index: number;