xmlui 0.9.43 → 0.9.44

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.43",
+    "version": "0.9.44",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -148,6 +148,9 @@
         "@rollup/rollup-linux-x64-gnu": "4.20.0",
         "@rollup/rollup-win32-x64-msvc": "4.20.0"
     },
+    "resolutions": {
+        "@radix-ui/react-dismissable-layer": "1.1.10"
+    },
     "files": [
         "dist",
         "src/styles"

package/dist/scripts/src/components/CodeBlock/CodeBlock.js

@@ -24,6 +24,7 @@ exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
         "backgroundColor-CodeBlock-highlightRow": "rgba($color-primary-200-rgb, .25)",
         "backgroundColor-CodeBlock-highlightString": "rgba($color-primary-200-rgb, .5)",
         "borderRadius-CodeBlock": "$space-2",
+        "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
         dark: {
             "backgroundColor-CodeBlock-header": "$color-surface-200",
             "backgroundColor-CodeBlock": "$color-surface-50",

package/dist/scripts/src/components/CodeBlock/CodeBlockNative.js

@@ -88,6 +88,17 @@ function markdownCodeBlockParser() {
                             `${unparsedSubstrings} ${newItemBase64}`;
                     }
                 }
+                if (item.startsWith("!/") && item.endsWith("/")) {
+                    const unparsedSubstrings = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data];
+                    const newItemBase64 = decodeValue(item.substring(2, item.length - 1));
+                    if (!unparsedSubstrings) {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] = newItemBase64;
+                    }
+                    else {
+                        acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data] =
+                            `${unparsedSubstrings} ${newItemBase64}`;
+                    }
+                }
                 if (item.startsWith("{") && item.endsWith("}")) {
                     const unparsedRows = acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data];
                     const newItem = item.substring(1, item.length - 1);

package/dist/scripts/src/components/CodeBlock/highlight-code.js

@@ -18,6 +18,7 @@ exports.isCodeHighlighter = isCodeHighlighter;
 const react_1 = require("react");
 const highlightRowsClass = "codeBlockHighlightRow";
 const highlightSubstringsClass = "codeBlockHighlightString";
+const highlightSubstringsEmphasisClass = "codeBlockHighlightStringEmphasis";
 /*
  * Encode string, returns base64 value
  * @Params: string
@@ -27,11 +28,11 @@ function encodeValue(value) {
         return null;
     }
     const valueToString = value.toString();
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
         return window.atob(valueToString);
     }
-    const buff = Buffer.from(valueToString, 'base64');
-    return buff.toString('ascii');
+    const buff = Buffer.from(valueToString, "base64");
+    return buff.toString("ascii");
 }
 /**
  * This function handles two things:
@@ -129,6 +130,7 @@ function extractMetaFromChildren(node, keys, code = "") {
             [exports.CodeHighlighterMetaKeys.rowNumbers.prop]: parseBoolean(meta[exports.CodeHighlighterMetaKeys.rowNumbers.data]),
             [exports.CodeHighlighterMetaKeys.highlightRows.prop]: parseRowHighlights(code.split("\n").length, meta[exports.CodeHighlighterMetaKeys.highlightRows.data]),
             [exports.CodeHighlighterMetaKeys.highlightSubstrings.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstrings.data]),
+            [exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.prop]: parseSubstringHighlights(code, meta[exports.CodeHighlighterMetaKeys.highlightSubstringsEmphasized.data], true),
         };
     }
     return {};
@@ -182,7 +184,7 @@ function parseRowHighlights(codeLines, str) {
         return parsed;
     }
 }
-function parseSubstringHighlights(code, str) {
+function parseSubstringHighlights(code, str, emphasized = false) {
     if (!str)
         return [];
     if (!code)
@@ -190,6 +192,7 @@ function parseSubstringHighlights(code, str) {
     return str
         .split(" ")
         .map((item) => encodeValue(item))
+        .filter((item) => item.trim() !== "")
         .reduce((acc, item) => acc.concat(findAllNonOverlappingSubstrings(code, item)), []);
     function findAllNonOverlappingSubstrings(str, code) {
         const result = [];
@@ -202,7 +205,9 @@ function parseSubstringHighlights(code, str) {
             result.push({
                 start: index,
                 end: index + searchLength,
-                properties: { class: highlightSubstringsClass },
+                properties: {
+                    class: emphasized ? highlightSubstringsEmphasisClass : highlightSubstringsClass,
+                },
             });
             startIndex = index + searchLength; // Jump past this match
         }
@@ -219,5 +224,9 @@ exports.CodeHighlighterMetaKeys = {
     rowNumbers: { data: "data-row-numbers", prop: "rowNumbers" },
     highlightRows: { data: "data-highlight-rows", prop: "highlightRows" },
     highlightSubstrings: { data: "data-highlight-substrings", prop: "highlightSubstrings" },
+    highlightSubstringsEmphasized: {
+        data: "data-highlight-substrings-emp",
+        prop: "highlightSubstringsEmphasized",
+    },
 };
 exports.CodeHighlighterMetaKeysData = Object.values(exports.CodeHighlighterMetaKeys).map((item) => item.data);

package/dist/scripts/src/components/Table/TableNative.js

@@ -328,8 +328,8 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
         : 0;
     const paddingBottom = rowVirtualizer.getVirtualItems().length > 0
         ? rowVirtualizer.getTotalSize() -
-            (((_d = (_c = rowVirtualizer.getVirtualItems()) === null || _c === void 0 ? void 0 : _c[rowVirtualizer.getVirtualItems().length - 1]) === null || _d === void 0 ? void 0 : _d.end) - startMargin ||
-                0)
+            (((_d = (_c = rowVirtualizer.getVirtualItems()) === null || _c === void 0 ? void 0 : _c[rowVirtualizer.getVirtualItems().length - 1]) === null || _d === void 0 ? void 0 : _d.end) -
+                startMargin || 0)
         : 0;
     const hasData = safeData.length !== 0;
     const touchedSizesRef = (0, react_1.useRef)({});
@@ -387,9 +387,9 @@ exports.Table = (0, react_1.forwardRef)(({ data = constants_1.EMPTY_ARRAY, colum
                                 var _a, _b;
                                 const _c = ((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.style) || {}, { width } = _c, style = __rest(_c, ["width"]);
                                 const size = header.getSize();
-                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting, updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), (0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy
+                                return ((0, jsx_runtime_1.jsxs)("th", { className: Table_module_scss_1.default.columnCell, colSpan: header.colSpan, style: Object.assign({ position: "relative", width: size }, getCommonPinningStyles(header.column)), children: [(0, jsx_runtime_1.jsx)(ClickableHeader, { hasSorting: header.column.columnDef.enableSorting, updateSorting: () => { var _a; return _updateSorting((_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.accessorKey); }, children: (0, jsx_runtime_1.jsxs)("div", { className: Table_module_scss_1.default.headerContent, style: style, children: [(0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()), header.column.columnDef.enableSorting && ((0, jsx_runtime_1.jsx)("span", { style: { display: "inline-flex", maxWidth: 16 }, children: (0, jsx_runtime_1.jsx)(ColumnOrderingIndicator, { iconSortAsc: iconSortAsc, iconSortDesc: iconSortDesc, iconNoSort: iconNoSort, direction: ((_b = header.column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.accessorKey) === _sortBy
                                                                 ? _sortingDirection
-                                                                : undefined })) })] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
+                                                                : undefined }) }))] }) }), header.column.getCanResize() && ((0, jsx_runtime_1.jsx)("div", { onDoubleClick: () => {
                                                 touchedSizesRef.current[header.column.id] = false;
                                                 if (header.column.columnDef.size !== undefined) {
                                                     header.column.resetSize();

package/dist/scripts/src/components/Text/Text.js

@@ -112,7 +112,7 @@ exports.TextMd = (0, ComponentDefs_1.createMetadata)({
         [`borderColor-${COMP}-code`]: "$color-surface-300",
         [`backgroundColor-${COMP}-keyboard`]: "rgba($color-surface-100-rgb, .4)",
         [`borderColor-${COMP}-keyboard`]: "$color-surface-300",
-        [`backgroundColor-${COMP}-marked`]: "yellow",
+        [`backgroundColor-${COMP}-marked`]: "rgba($color-primary-200-rgb, .4)",
         [`color-${COMP}-placeholder`]: "$color-surface-500",
         [`color-${COMP}-codefence`]: "$color-surface-900",
         [`color-${COMP}-subheading`]: "$textColor-secondary",

package/dist/scripts/src/components/TextBox/TextBoxNative.js

@@ -47,7 +47,8 @@ const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 exports.TextBox = (0, react_1.forwardRef)(function TextBox({ id, type = "text", value = "", updateState = constants_1.noop, initialValue = "", style, maxLength, enabled = true, placeholder, validationStatus = "none", onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, autoFocus, readOnly, tabIndex, label, labelPosition, labelWidth, labelBreak, required, }, ref) {
-    id = id || (0, react_1.useId)();
+    const _id = (0, react_1.useId)();
+    id = id || _id;
     const inputRef = (0, react_2.useRef)(null);
     (0, react_2.useEffect)(() => {
         if (autoFocus) {

package/dist/scripts/src/components/ToneChangerButton/ToneChangerButton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toneChangerButtonComponentRenderer = exports.ToneChangerButtonMd = void 0;
+exports.ToneChangerButton = ToneChangerButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");

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

@@ -55,7 +55,6 @@ const constants_1 = require("../constants");
 const extendThemeUtils_1 = require("../theming/extendThemeUtils");
 const ComponentRegistryContext_1 = require("../../components/ComponentRegistryContext");
 const xmlui_1 = require("../theming/themes/xmlui");
-const solid_1 = require("../theming/themes/solid");
 const hooks_1 = require("../utils/hooks");
 const ThemingDefs_1 = require("../../abstractions/ThemingDefs");
 function useCompiledTheme(activeTheme, activeTone, themes = constants_1.EMPTY_ARRAY, resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT) {
@@ -198,7 +197,7 @@ exports.builtInThemes = [
     xmlui_1.XmlUiPurpleThemeDefinition,
     xmlui_1.XmlUiCyanThemeDefinition,
     xmlui_1.XmlUiRedThemeDefinition,
-    solid_1.SolidThemeDefinition,
+    /*SolidThemeDefinition,*/
 ];
 // theme-overriding properties change.
 function ThemeProvider({ children, themes: custThemes = constants_1.EMPTY_ARRAY, defaultTheme = "xmlui", defaultTone = "light", resources = constants_1.EMPTY_OBJECT, resourceMap = constants_1.EMPTY_OBJECT, localThemes = constants_1.EMPTY_OBJECT, }) {

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

@@ -98,7 +98,12 @@ declare namespace all {
         builtInThemes,
         XmlUiHelper,
         Text_2 as Text,
-        NestedApp
+        TextBox,
+        NestedApp,
+        VisuallyHidden,
+        LinkNative,
+        ToneChangerButton,
+        Logo
     }
 }
 
@@ -955,7 +960,55 @@ declare const _default: {
         ellipses?: boolean;
         style?: default_2.CSSProperties;
     }, "ref"> & default_2.RefAttributes<unknown>>;
+    TextBox: default_2.ForwardRefExoticComponent<{
+        id?: string;
+        type?: "search" | "text" | "password";
+        value?: string;
+        updateState?: UpdateStateFn;
+        initialValue?: string;
+        style?: default_2.CSSProperties;
+        maxLength?: number;
+        enabled?: boolean;
+        placeholder?: string;
+        validationStatus?: "none" | "error" | "warning" | "valid";
+        onDidChange?: (newValue: string) => void;
+        onFocus?: () => void;
+        onBlur?: () => void;
+        registerComponentApi?: all.RegisterComponentApiFn;
+        startText?: string;
+        startIcon?: string;
+        endText?: string;
+        endIcon?: string;
+        gap?: string;
+        autoFocus?: boolean;
+        readOnly?: boolean;
+        tabIndex?: number;
+        label?: string;
+        labelPosition?: string;
+        labelWidth?: string;
+        labelBreak?: boolean;
+        required?: boolean;
+    } & default_2.RefAttributes<HTMLDivElement>>;
     NestedApp: typeof all.NestedApp;
+    VisuallyHidden: ({ children, ...props }: {
+        children: default_2.ReactNode;
+    }) => default_3.JSX.Element;
+    LinkNative: default_2.ForwardRefExoticComponent<{
+        to: string | {
+            pathname: string;
+            queryParams?: Record<string, any>;
+        };
+        children: default_2.ReactNode;
+        icon?: string;
+        active?: boolean;
+        disabled?: boolean;
+        onClick?: () => void;
+        style?: default_2.CSSProperties;
+    } & Partial<Pick<HTMLAnchorElement, "type" | "target" | "rel" | "download" | "ping" | "referrerPolicy" | "hreflang">> & default_2.RefAttributes<HTMLDivElement>>;
+    ToneChangerButton: typeof all.ToneChangerButton;
+    Logo: default_2.ForwardRefExoticComponent<{
+        style?: default_2.CSSProperties;
+    } & default_2.RefAttributes<HTMLImageElement>>;
 };
 export default _default;
 
@@ -1297,6 +1350,19 @@ declare interface LetStatement extends ScripNodeBase {
     decls: VarDeclaration[];
 }
 
+declare const LinkNative: ForwardRefExoticComponent<    {
+to: string | {
+pathname: string;
+queryParams?: Record<string, any>;
+};
+children: ReactNode;
+icon?: string;
+active?: boolean;
+disabled?: boolean;
+onClick?: () => void;
+style?: CSSProperties;
+} & Partial<Pick<HTMLAnchorElement, "type" | "target" | "rel" | "download" | "ping" | "referrerPolicy" | "hreflang">> & RefAttributes<HTMLDivElement>>;
+
 declare type LITERAL = typeof T_LITERAL;
 
 declare interface Literal extends ExpressionBase {
@@ -1322,6 +1388,10 @@ declare type LoggedInUserDto = {
     permissions: Record<string, string>;
 };
 
+declare const Logo: ForwardRefExoticComponent<    {
+style?: CSSProperties;
+} & RefAttributes<HTMLImageElement>>;
+
 /**
  * This type represents the options to use for looking up actions.
  */
@@ -1533,6 +1603,36 @@ declare type Props_3 = {
     distributeEvenly?: boolean;
 };
 
+declare type Props_4 = {
+    id?: string;
+    type?: "text" | "password" | "search";
+    value?: string;
+    updateState?: UpdateStateFn;
+    initialValue?: string;
+    style?: CSSProperties;
+    maxLength?: number;
+    enabled?: boolean;
+    placeholder?: string;
+    validationStatus?: ValidationStatus;
+    onDidChange?: (newValue: string) => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    registerComponentApi?: RegisterComponentApiFn;
+    startText?: string;
+    startIcon?: string;
+    endText?: string;
+    endIcon?: string;
+    gap?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+    tabIndex?: number;
+    label?: string;
+    labelPosition?: string;
+    labelWidth?: string;
+    labelBreak?: boolean;
+    required?: boolean;
+};
+
 declare type REACTIVE_VAR_DECLARATION = typeof T_REACTIVE_VAR_DECLARATION;
 
 declare interface ReactiveVarDeclaration extends ExpressionBase {
@@ -1907,6 +2007,8 @@ declare interface TemplateLiteralExpression extends ExpressionBase {
 
 declare const Text_2: default_2.ForwardRefExoticComponent<Omit<TextProps, "ref"> & default_2.RefAttributes<unknown>>;
 
+declare const TextBox: default_2.ForwardRefExoticComponent<Props_4 & default_2.RefAttributes<HTMLDivElement>>;
+
 declare type TextProps = {
     uid?: string;
     children?: default_2.ReactNode;
@@ -2136,6 +2238,11 @@ declare enum TokenType {
     From = 97
 }
 
+declare function ToneChangerButton({ lightToDarkIcon, darkToLightIcon }: {
+    lightToDarkIcon?: string;
+    darkToLightIcon?: string;
+}): JSX_2.Element;
+
 declare type TrackContainerHeight = "auto" | "fixed";
 
 declare interface TreeNode {
@@ -2196,6 +2303,10 @@ declare const useLogger: () => LogContextType;
 
 declare function useTheme(): ThemeScope;
 
+declare type ValidationStatus = (typeof validationStatusValues)[number];
+
+declare const validationStatusValues: readonly ["none", "error", "warning", "valid"];
+
 /**
  * This type represent the function that extracts the value from a component property
  */
@@ -2273,6 +2384,10 @@ declare interface VarStatement extends ScripNodeBase {
     decls: ReactiveVarDeclaration[];
 }
 
+declare const VisuallyHidden: ({ children, ...props }: {
+    children: React.ReactNode;
+}) => JSX_2.Element;
+
 declare type WHILE_STATEMENT = typeof T_WHILE_STATEMENT;
 
 declare interface WhileStatement extends ScripNodeBase {