xmlui 0.7.32 → 0.7.34

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -104,11 +104,11 @@ exports.RootThemeDefinition = {
         "color-info-900": "hsl(183, 97%, 15%)",
         "color-info-950": "hsl(183, 97%, 10%)",
         // --- Font weights
-        "font-weight-light": "300",
-        "font-weight-normal": "400",
-        "font-weight-medium": "500",
-        "font-weight-bold": "600",
-        "font-weight-extra-bold": "900",
+        "fontWeight-light": "300",
+        "fontWeight-normal": "400",
+        "fontWeight-medium": "500",
+        "fontWeight-bold": "600",
+        "fontWeight-extra-bold": "900",
         // --- Default text colors (component use these values as their defaults)
         "color-text-primary": "$color-surface-950",
         "color-text-attention": "$color-danger-600",
@@ -126,41 +126,41 @@ exports.RootThemeDefinition = {
         "color-warning": "$color-warn-700",
         "color-error": "$color-danger-600",
         // --- Default line height values (relative to the base unit, "space-base")
-        "line-height-none": "1",
-        "line-height-tight": "1.25",
-        "line-height-snug": "1.375",
-        "line-height-normal": "1.5",
-        "line-height-relaxed": "1.625",
-        "line-height-loose": "2",
+        "lineHeight-none": "1",
+        "lineHeight-tight": "1.25",
+        "lineHeight-snug": "1.375",
+        "lineHeight-normal": "1.5",
+        "lineHeight-relaxed": "1.625",
+        "lineHeight-loose": "2",
         // --- The sans-serif font set
-        "font-family-sans-serif": "'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
+        "fontFamily-sans-serif": "'Inter', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif",
         // --- The monospace font set
-        "font-family-monospace": "Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
+        "fontFamily-monospace": "Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace",
         "font-feature-settings": "'cv03', 'cv04', 'cv11'",
         // --- Some media breakpoints (review them)
-        "media-max-width-phone": "576px",
-        "media-max-width-landscape-phone": "768px",
-        "media-max-width-tablet": "992px",
-        "media-max-width-desktop": "1200px",
-        "media-max-width-large-desktop": "1400px",
+        "media-maxWidth-phone": "576px",
+        "media-maxWidth-landscape-phone": "768px",
+        "media-maxWidth-tablet": "992px",
+        "media-maxWidth-desktop": "1200px",
+        "media-maxWidth-large-desktop": "1400px",
         // --- The app's default radius value
-        radius: "4px",
-        "color-outline--focus": "rgba($color-primary-500-rgb, .5)",
-        "thickness-outline--focus": "2px",
-        "style-outline--focus": "solid",
-        "offset-outline--focus": "0",
+        borderRadius: "4px",
+        "outlineColor--focus": "rgba($color-primary-500-rgb, .5)",
+        "outlineWidth--focus": "2px",
+        "outlineStyle--focus": "solid",
+        "outlineOffset--focus": "0",
         // --- The app's default font family
-        "font-family": "$font-family-sans-serif",
+        "fontFamily": "$fontFamily-sans-serif",
         // --- Various font sizes (relative to the current context)
-        "font-size-gigantic": "3rem",
-        "font-size-large": "1.5rem",
-        "font-size-medium": "1.25rem",
-        "font-size-normal": "1rem",
-        "font-size-small": "0.875rem",
-        "font-size-smaller": "0.75rem",
-        "font-size-tiny": "0.625rem",
+        "fontSize-gigantic": "3rem",
+        "fontSize-large": "1.5rem",
+        "fontSize-medium": "1.25rem",
+        "fontSize-normal": "1rem",
+        "fontSize-small": "0.875rem",
+        "fontSize-smaller": "0.75rem",
+        "fontSize-tiny": "0.625rem",
         // --- The default font size
-        "font-size": "$font-size-normal",
+        "fontSize": "$fontSize-normal",
         // --- Predefined gap sizes
         "gap-none": "$space-0",
         "gap-tight": "$space-2",
@@ -177,7 +177,7 @@ exports.RootThemeDefinition = {
         "space-normal": "$space-4",
         "space-loose": "$space-8",
         // --- Font used for body
-        "font-weight": "$font-weight-normal",
+        "fontWeight": "$fontWeight-normal",
         // --- Various default values (review them)
         "color-border-dropdown-item": "$color-border",
         // --- Various predefined shadow values
@@ -191,17 +191,17 @@ exports.RootThemeDefinition = {
         // --- The default maximum content width
         "max-content-width": "1320px",
         "size-Icon": "1.25em",
-        "shadow-Avatar": "inset 0 0 0 1px rgba(4, 32, 69, 0.1)",
+        "boxShadow-Avatar": "inset 0 0 0 1px rgba(4, 32, 69, 0.1)",
         "border-size-Avatar": "0px",
-        "radius-Avatar": "4px",
-        "shadow-header-App": "none",
+        "borderRadius-Avatar": "4px",
+        "boxShadow-header-App": "none",
         // "height-AppHeader": "3.5rem",
-        "padding-horizontal-NavPanel-horizontal": "1rem",
-        "padding-vertical-HeaderLogo": "0.7rem",
+        "paddingHorizontal-NavPanel-horizontal": "1rem",
+        "paddingVertical-HeaderLogo": "0.7rem",
         "padding-TableCell": ".75rem",
         "padding-TableHeading": ".5rem .75rem .5rem .75rem",
         "color-bg-TableRow--hover": "transparent",
-        "shadow-NavPanel-vertical": "none",
+        "boxShadow-NavPanel-vertical": "none",
         "width-NavPanel-vertical": "15rem",
     },
     tones: {

package/dist/scripts/src/components-core/theming/themes/solid.js

@@ -9,8 +9,8 @@ exports.SolidThemeDefinition = {
         "color-surface": "hsl(0,0%,49%)",
         "color-success": "#45a249",
         "max-content-width": "100%",
-        radius: "0",
-        "font-size": "$font-size-normal",
+        borderRadius: "0",
+        "fontSize": "$fontSize-normal",
         "size-Icon": "1rem",
     }
 };

package/dist/scripts/src/components-core/theming/themes/xmlui.js

@@ -8,9 +8,9 @@ exports.XmlUiThemeDefinition = {
     // "font.inter": "https://rsms.me/inter/inter.css",
     },
     themeVars: {
-        "shadow-header-App": "none",
+        "boxShadow-header-App": "none",
         "font-size": "15px",
-        "shadow-Input": "$shadow-sm",
+        "boxShadow-Input": "$shadow-sm",
     },
     tones: {
         light: {

package/dist/scripts/src/components-core/theming/transformThemeVars.js

@@ -71,7 +71,7 @@ function generateBaseFontSizes(theme) {
         return {};
     }
     const resolvedTheme = resolveThemeVars(theme);
-    const base = resolvedTheme["font-size"];
+    const base = resolvedTheme["fontSize"];
     if (!base || typeof base !== "string") {
         return {};
     }
@@ -87,12 +87,12 @@ function generateBaseFontSizes(theme) {
         return {};
     }
     const ret = {};
-    ret[`font-size-large`] = `${1.5 * baseNum}${baseUnit}`;
-    ret[`font-size-medium`] = `${1.25 * baseNum}${baseUnit}`;
-    ret[`font-size-normal`] = base;
-    ret[`font-size-small`] = `${0.875 * baseNum}${baseUnit}`;
-    ret[`font-size-smaller`] = `${0.75 * baseNum}${baseUnit}`;
-    ret[`font-size-tiny`] = `${0.625 * baseNum}${baseUnit}`;
+    ret[`fontSize-large`] = `${1.5 * baseNum}${baseUnit}`;
+    ret[`fontSize-medium`] = `${1.25 * baseNum}${baseUnit}`;
+    ret[`fontSize-normal`] = base;
+    ret[`fontSize-small`] = `${0.875 * baseNum}${baseUnit}`;
+    ret[`fontSize-smaller`] = `${0.75 * baseNum}${baseUnit}`;
+    ret[`fontSize-tiny`] = `${0.625 * baseNum}${baseUnit}`;
     return ret;
 }
 function generateButtonTones(theme) {
@@ -142,8 +142,8 @@ function generateButtonTones(theme) {
     return ret;
 }
 const paddingRegEx = /^padding-(?!(?:horizontal|vertical|left|right|top|bottom)-)(.+)$/;
-const paddingHorizontalRegEx = /^padding-(horizontal)-(.+)$/;
-const paddingVerticalRegEx = /^padding-(vertical)-(.+)$/;
+const paddingHorizontalRegEx = /^paddingHorizontal-(.+)$/;
+const paddingVerticalRegEx = /^paddingVertical-(.+)$/;
 /**
  * Segment the padding values into top, right, bottom, left to provide consistency
  */
@@ -156,21 +156,21 @@ function generatePaddingSegments(theme) {
     Object.entries(theme).forEach(([key, value]) => {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         var _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15;
-        // --- Check the "padding-horizontal" theme variables
+        // --- Check the "paddingHorizontal" theme variables
         let match = paddingHorizontalRegEx.exec(key);
         if (match) {
-            // --- We have a padding-horizontal value to segment
-            const remainder = match[2];
-            (_a = result[_w = `padding-left-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_w] = value);
-            (_b = result[_x = `padding-right-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_x] = value);
+            // --- We have a paddingHorizontal value to segment
+            const remainder = match[1];
+            (_a = result[_w = `paddingLeft-${remainder}`]) !== null && _a !== void 0 ? _a : (result[_w] = value);
+            (_b = result[_x = `paddingRight-${remainder}`]) !== null && _b !== void 0 ? _b : (result[_x] = value);
         }
-        // --- Check the "padding-vertical" theme variables
+        // --- Check the "paddingVertical" theme variables
         match = paddingVerticalRegEx.exec(key);
         if (match) {
-            // --- We have a padding-vertical value to segment
-            const remainder = match[2];
-            (_c = result[_y = `padding-top-${remainder}`]) !== null && _c !== void 0 ? _c : (result[_y] = value);
-            (_d = result[_z = `padding-bottom-${remainder}`]) !== null && _d !== void 0 ? _d : (result[_z] = value);
+            // --- We have a paddingVertical value to segment
+            const remainder = match[1];
+            (_c = result[_y = `paddingTop-${remainder}`]) !== null && _c !== void 0 ? _c : (result[_y] = value);
+            (_d = result[_z = `paddingBottom-${remainder}`]) !== null && _d !== void 0 ? _d : (result[_z] = value);
         }
         // --- Check the "padding" theme variables
         match = paddingRegEx.exec(key);
@@ -178,34 +178,34 @@ function generatePaddingSegments(theme) {
             return;
         const remainder = match[1];
         // --- Check for horizontal and vertical padding values
-        const horizontal = theme[`padding-horizontal-${remainder}`];
-        const vertical = theme[`padding-vertical-${remainder}`];
+        const horizontal = theme[`paddingHorizontal-${remainder}`];
+        const vertical = theme[`paddingVertical-${remainder}`];
         // --- We have a padding value to segment
         const segments = value.trim().replace(/ +/g, " ").split(" ");
         switch (segments.length) {
             case 1:
-                (_e = result[_0 = `padding-top-${remainder}`]) !== null && _e !== void 0 ? _e : (result[_0] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_f = result[_1 = `padding-right-${remainder}`]) !== null && _f !== void 0 ? _f : (result[_1] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[0]);
-                (_g = result[_2 = `padding-bottom-${remainder}`]) !== null && _g !== void 0 ? _g : (result[_2] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_h = result[_3 = `padding-left-${remainder}`]) !== null && _h !== void 0 ? _h : (result[_3] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[0]);
+                (_e = result[_0 = `paddingTop-${remainder}`]) !== null && _e !== void 0 ? _e : (result[_0] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_f = result[_1 = `paddingRight-${remainder}`]) !== null && _f !== void 0 ? _f : (result[_1] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[0]);
+                (_g = result[_2 = `paddingBottom-${remainder}`]) !== null && _g !== void 0 ? _g : (result[_2] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_h = result[_3 = `paddingLeft-${remainder}`]) !== null && _h !== void 0 ? _h : (result[_3] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[0]);
                 break;
             case 2:
-                (_j = result[_4 = `padding-top-${remainder}`]) !== null && _j !== void 0 ? _j : (result[_4] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_k = result[_5 = `padding-right-${remainder}`]) !== null && _k !== void 0 ? _k : (result[_5] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
-                (_l = result[_6 = `padding-bottom-${remainder}`]) !== null && _l !== void 0 ? _l : (result[_6] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_m = result[_7 = `padding-left-${remainder}`]) !== null && _m !== void 0 ? _m : (result[_7] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
+                (_j = result[_4 = `paddingTop-${remainder}`]) !== null && _j !== void 0 ? _j : (result[_4] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_k = result[_5 = `paddingRight-${remainder}`]) !== null && _k !== void 0 ? _k : (result[_5] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
+                (_l = result[_6 = `paddingBottom-${remainder}`]) !== null && _l !== void 0 ? _l : (result[_6] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_m = result[_7 = `paddingLeft-${remainder}`]) !== null && _m !== void 0 ? _m : (result[_7] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
                 break;
             case 3:
-                (_o = result[_8 = `padding-top-${remainder}`]) !== null && _o !== void 0 ? _o : (result[_8] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_p = result[_9 = `padding-right-${remainder}`]) !== null && _p !== void 0 ? _p : (result[_9] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
-                (_q = result[_10 = `padding-bottom-${remainder}`]) !== null && _q !== void 0 ? _q : (result[_10] = vertical !== null && vertical !== void 0 ? vertical : segments[2]);
-                (_r = result[_11 = `padding-left-${remainder}`]) !== null && _r !== void 0 ? _r : (result[_11] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
+                (_o = result[_8 = `paddingTop-${remainder}`]) !== null && _o !== void 0 ? _o : (result[_8] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_p = result[_9 = `paddingRight-${remainder}`]) !== null && _p !== void 0 ? _p : (result[_9] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
+                (_q = result[_10 = `paddingBottom-${remainder}`]) !== null && _q !== void 0 ? _q : (result[_10] = vertical !== null && vertical !== void 0 ? vertical : segments[2]);
+                (_r = result[_11 = `paddingLeft-${remainder}`]) !== null && _r !== void 0 ? _r : (result[_11] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
                 break;
             case 4:
-                (_s = result[_12 = `padding-top-${remainder}`]) !== null && _s !== void 0 ? _s : (result[_12] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
-                (_t = result[_13 = `padding-right-${remainder}`]) !== null && _t !== void 0 ? _t : (result[_13] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
-                (_u = result[_14 = `padding-bottom-${remainder}`]) !== null && _u !== void 0 ? _u : (result[_14] = vertical !== null && vertical !== void 0 ? vertical : segments[2]);
-                (_v = result[_15 = `padding-left-${remainder}`]) !== null && _v !== void 0 ? _v : (result[_15] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[3]);
+                (_s = result[_12 = `paddingTop-${remainder}`]) !== null && _s !== void 0 ? _s : (result[_12] = vertical !== null && vertical !== void 0 ? vertical : segments[0]);
+                (_t = result[_13 = `paddingRight-${remainder}`]) !== null && _t !== void 0 ? _t : (result[_13] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[1]);
+                (_u = result[_14 = `paddingBottom-${remainder}`]) !== null && _u !== void 0 ? _u : (result[_14] = vertical !== null && vertical !== void 0 ? vertical : segments[2]);
+                (_v = result[_15 = `paddingLeft-${remainder}`]) !== null && _v !== void 0 ? _v : (result[_15] = horizontal !== null && horizontal !== void 0 ? horizontal : segments[3]);
                 break;
             default:
                 return;

package/dist/scripts/src/components-core/utils/hooks.js

@@ -271,7 +271,7 @@ function getScrollParent(element) {
 }
 const useScrollParent = (element) => {
     const [scrollParent, setScrollParent] = (0, react_1.useState)(null);
-    (0, react_1.useLayoutEffect)(() => {
+    (0, exports.useIsomorphicLayoutEffect)(() => {
         setScrollParent(element ? getScrollParent(element) : null);
     }, [element]);
     return scrollParent;
@@ -280,7 +280,7 @@ exports.useScrollParent = useScrollParent;
 // because safari doesn't support scrollend event...
 const useScrollEventHandler = (element, { onScrollStart, onScrollEnd, }) => {
     const thisRef = (0, react_1.useRef)({ scrolling: false });
-    (0, react_1.useLayoutEffect)(() => {
+    (0, exports.useIsomorphicLayoutEffect)(() => {
         let timer;
         let listener = () => {
             if (!thisRef.current.scrolling) {