xmlui 0.11.3 → 0.11.6

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

@@ -1,244 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Text = exports.defaultProps = void 0;
-exports.getCustomVariantCache = getCustomVariantCache;
-exports.setCustomVariantCache = setCustomVariantCache;
-exports.hasCustomVariantCache = hasCustomVariantCache;
-exports.clearCustomVariantCache = clearCustomVariantCache;
-exports.getCustomVariantCacheStats = getCustomVariantCacheStats;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_compose_refs_1 = require("@radix-ui/react-compose-refs");
-const classnames_1 = __importDefault(require("classnames"));
-const Text_module_scss_1 = __importDefault(require("./Text.module.scss"));
-const css_utils_1 = require("../../components-core/utils/css-utils");
-const abstractions_1 = require("../abstractions");
-const StyleContext_1 = require("../../components-core/theming/StyleContext");
-const constants_1 = require("../../components-core/constants");
-const layout_resolver_1 = require("../../components-core/theming/layout-resolver");
-/**
- * Global cache that stores custom variant CSS styles.
- * Key: variant value (string)
- *
- * This cache ensures the same variant value always generates the same CSS.
- */
-const customVariantCache = new Map();
-/**
- * Retrieves a cached custom variant entry if it exists.
- */
-function getCustomVariantCache(variant) {
-    return customVariantCache.get(variant);
-}
-/**
- * Stores a custom variant entry in the cache.
- */
-function setCustomVariantCache(variant, entry) {
-    customVariantCache.set(variant, Object.assign(Object.assign({}, entry), { createdAt: Date.now() }));
-}
-/**
- * Checks if a custom variant is already cached.
- */
-function hasCustomVariantCache(variant) {
-    return customVariantCache.has(variant);
-}
-/**
- * Clears the entire custom variant cache.
- * Useful for testing or full app resets.
- */
-function clearCustomVariantCache() {
-    customVariantCache.clear();
-}
-/**
- * Gets cache statistics for debugging.
- */
-function getCustomVariantCacheStats() {
-    return {
-        totalEntries: customVariantCache.size,
-        entries: Array.from(customVariantCache.entries()).map(([key, entry]) => ({
-            key,
-            className: entry.className,
-            createdAt: new Date(entry.createdAt).toISOString(),
-        })),
-    };
-}
-exports.defaultProps = {
-    maxLines: 0,
-    preserveLinebreaks: false,
-    ellipses: true,
-    overflowMode: undefined,
-    breakMode: "normal",
-};
-exports.Text = (0, react_1.forwardRef)(function Text(_a, forwardedRef) {
-    var { uid, variant, maxLines = exports.defaultProps.maxLines, style, className, children, preserveLinebreaks = exports.defaultProps.preserveLinebreaks, ellipses = exports.defaultProps.ellipses, overflowMode = exports.defaultProps.overflowMode, breakMode = exports.defaultProps.breakMode, registerComponentApi } = _a, variantSpecificProps = __rest(_a, ["uid", "variant", "maxLines", "style", "className", "children", "preserveLinebreaks", "ellipses", "overflowMode", "breakMode", "registerComponentApi"]);
-    const innerRef = (0, react_1.useRef)(null);
-    const ref = forwardedRef ? (0, react_compose_refs_1.composeRefs)(innerRef, forwardedRef) : innerRef;
-    // Implement hasOverflow function
-    const hasOverflow = (0, react_1.useCallback)(() => {
-        const element = innerRef.current;
-        if (!element)
-            return false;
-        // Check both horizontal and vertical overflow
-        const hasHorizontalOverflow = element.scrollWidth > element.clientWidth;
-        const hasVerticalOverflow = element.scrollHeight > element.clientHeight;
-        return hasHorizontalOverflow || hasVerticalOverflow;
-    }, []);
-    // Register API with XMLUI if provided
-    (0, react_1.useEffect)(() => {
-        if (registerComponentApi) {
-            registerComponentApi({ hasOverflow });
-        }
-    }, [registerComponentApi, hasOverflow]);
-    // NOTE: This is to accept syntax highlight classes coming from shiki
-    // classes need not to be added to the rendered html element, so we remove them from props
-    const { syntaxHighlightClasses } = variantSpecificProps, restVariantSpecificProps = __rest(variantSpecificProps, ["syntaxHighlightClasses"]);
-    const Element = (0, react_1.useMemo)(() => {
-        if (!variant || !abstractions_1.TextVariantElement[variant])
-            return "div";
-        return abstractions_1.TextVariantElement[variant];
-    }, [variant]);
-    // Custom variant CSS generation
-    // Following React hook rules: hooks must be called unconditionally
-    // We always call useComponentStyle, passing empty object for known variants
-    const isCustomVariant = (0, react_1.useMemo)(() => {
-        return variant && !abstractions_1.TextVariantElement[variant];
-    }, [variant]);
-    // Always call useComponentStyle (React hook rule: no conditional hooks)
-    // For now, pass empty object; later this will contain assembled CSS properties
-    const variantSpec = (0, react_1.useMemo)(() => {
-        if (!isCustomVariant)
-            return constants_1.EMPTY_OBJECT;
-        const subject = `-Text-${variant}`;
-        const cssInput = {
-            color: (0, layout_resolver_1.toCssVar)(`$textColor${subject}`),
-            "font-family": (0, layout_resolver_1.toCssVar)(`$fontFamily${subject}`),
-            "font-size": (0, layout_resolver_1.toCssVar)(`$fontSize${subject}`),
-            "font-style": (0, layout_resolver_1.toCssVar)(`$fontStyle${subject}`),
-            "font-weight": (0, layout_resolver_1.toCssVar)(`$fontWeight${subject}`),
-            "font-stretch": (0, layout_resolver_1.toCssVar)(`$fontStretch${subject}`),
-            "text-decoration-line": (0, layout_resolver_1.toCssVar)(`$textDecorationLine${subject}`),
-            "text-decoration-color": (0, layout_resolver_1.toCssVar)(`$textDecorationColor${subject}`),
-            "text-decoration-style": (0, layout_resolver_1.toCssVar)(`$textDecorationStyle${subject}`),
-            "text-decoration-thickness": (0, layout_resolver_1.toCssVar)(`$textDecorationThickness${subject}`),
-            "text-underline-offset": (0, layout_resolver_1.toCssVar)(`$textUnderlineOffset${subject}`),
-            "line-height": (0, layout_resolver_1.toCssVar)(`$lineHeight${subject}`),
-            "background-color": (0, layout_resolver_1.toCssVar)(`$backgroundColor${subject}`),
-            "text-transform": (0, layout_resolver_1.toCssVar)(`$textTransform${subject}`),
-            "letter-spacing": (0, layout_resolver_1.toCssVar)(`$letterSpacing${subject}`),
-            "word-spacing": (0, layout_resolver_1.toCssVar)(`$wordSpacing${subject}`),
-            "text-shadow": (0, layout_resolver_1.toCssVar)(`$textShadow${subject}`),
-            "text-indent": (0, layout_resolver_1.toCssVar)(`$textIndent${subject}`),
-            "text-align": (0, layout_resolver_1.toCssVar)(`$textAlign${subject}`),
-            "text-align-last": (0, layout_resolver_1.toCssVar)(`$textAlignLast${subject}`),
-            "word-break": (0, layout_resolver_1.toCssVar)(`$wordBreak${subject}`),
-            "word-wrap": (0, layout_resolver_1.toCssVar)(`$wordWrap${subject}`),
-            direction: (0, layout_resolver_1.toCssVar)(`$direction${subject}`),
-            "writing-mode": (0, layout_resolver_1.toCssVar)(`$writingMode${subject}`),
-            "line-break": (0, layout_resolver_1.toCssVar)(`$lineBreak${subject}`),
-        };
-        return cssInput;
-    }, [isCustomVariant, variant]);
-    const customVariantClassName = (0, StyleContext_1.useComponentStyle)(variantSpec);
-    // Store custom variant in cache if it's a new custom variant
-    (0, react_1.useEffect)(() => {
-        if (isCustomVariant && variant && customVariantClassName) {
-            // Check if this variant is already cached
-            if (!hasCustomVariantCache(variant)) {
-                // TODO: When CSS generation is implemented, extract the actual CSS text
-                // For now, store placeholder information
-                setCustomVariantCache(variant, {
-                    className: customVariantClassName,
-                    cssText: "", // Will be populated when CSS generation is implemented
-                });
-            }
-        }
-    }, [isCustomVariant, variant, customVariantClassName]);
-    // Determine overflow mode classes based on overflowMode and existing props
-    const overflowClasses = (0, react_1.useMemo)(() => {
-        const classes = {};
-        // If overflowMode is not explicitly set, use original behavior
-        if (!overflowMode) {
-            classes[Text_module_scss_1.default.truncateOverflow] = maxLines > 0;
-            classes[Text_module_scss_1.default.noEllipsis] = !ellipses;
-            return classes;
-        }
-        switch (overflowMode) {
-            case "none":
-                // CSS: overflow: hidden + text-overflow: clip + normal wrapping
-                // Effect: Text wraps normally but clips cleanly at container boundaries without ellipsis
-                classes[Text_module_scss_1.default.overflowNone] = true;
-                break;
-            case "scroll":
-                // CSS: white-space: nowrap + overflow-x: auto + overflow-y: hidden
-                // Effect: Forces single line, enables horizontal scrollbar when content overflows
-                classes[Text_module_scss_1.default.overflowScroll] = true;
-                break;
-            case "ellipsis":
-                // CSS: Uses -webkit-line-clamp for multi-line or white-space: nowrap + text-overflow: ellipsis for single line
-                // Effect: Shows "..." when text is truncated, respects maxLines for multi-line truncation
-                classes[Text_module_scss_1.default.truncateOverflow] = true;
-                classes[Text_module_scss_1.default.noEllipsis] = !ellipses;
-                break;
-            case "flow":
-                // CSS: white-space: normal + overflow-y: auto + overflow-x: hidden
-                // Effect: Text wraps to multiple lines with vertical scrolling when needed, no horizontal scrollbar
-                // Note: Flow mode ignores maxLines to allow unlimited text wrapping
-                classes[Text_module_scss_1.default.overflowFlow] = true;
-                break;
-        }
-        return classes;
-    }, [overflowMode, maxLines, ellipses]);
-    // Determine break mode classes
-    const breakClasses = (0, react_1.useMemo)(() => {
-        const classes = {};
-        // Only apply break mode classes if explicitly set (preserves theme variable support)
-        if (breakMode) {
-            switch (breakMode) {
-                case "normal":
-                    // CSS: word-break: normal + overflow-wrap: normal
-                    // Effect: Standard word breaking at natural boundaries (spaces, hyphens)
-                    classes[Text_module_scss_1.default.breakNormal] = true;
-                    break;
-                case "word":
-                    // CSS: overflow-wrap: break-word
-                    // Effect: Breaks long words only when necessary to prevent overflow, preserves word boundaries when possible
-                    classes[Text_module_scss_1.default.breakWord] = true;
-                    break;
-                case "anywhere":
-                    // CSS: word-break: break-all + overflow-wrap: anywhere
-                    // Effect: Most aggressive breaking - allows breaking between any characters to fit container
-                    classes[Text_module_scss_1.default.breakAnywhere] = true;
-                    break;
-                case "keep":
-                    // CSS: word-break: keep-all
-                    // Effect: Prevents breaking within words entirely (useful for CJK text or technical terms)
-                    classes[Text_module_scss_1.default.breakKeep] = true;
-                    break;
-                case "hyphenate":
-                    // CSS: hyphens: auto + overflow-wrap: break-word
-                    // Effect: Uses browser's hyphenation dictionary to break words with proper hyphens
-                    classes[Text_module_scss_1.default.breakHyphenate] = true;
-                    break;
-            }
-        }
-        return classes;
-    }, [breakMode]);
-    return ((0, jsx_runtime_1.jsx)(Element, Object.assign({}, restVariantSpecificProps, { ref: ref, className: (0, classnames_1.default)(syntaxHighlightClasses, Text_module_scss_1.default.text, 
-        // Use custom variant className if it's a custom variant, otherwise use predefined variant style
-        isCustomVariant ? customVariantClassName : Text_module_scss_1.default[variant || "default"], Object.assign(Object.assign({ [Text_module_scss_1.default.preserveLinebreaks]: preserveLinebreaks }, overflowClasses), breakClasses), className), style: Object.assign(Object.assign({}, style), (overflowMode === "ellipsis" || (!overflowMode && maxLines)
-            ? (0, css_utils_1.getMaxLinesStyle)(maxLines)
-            : {})), children: children })));
-});

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

@@ -1,103 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.textAreaComponentRenderer = exports.TextAreaMd = exports.resizeOptionsMd = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const TextArea_module_scss_1 = __importDefault(require("./TextArea.module.scss"));
-const renderers_1 = require("../../components-core/renderers");
-const themeVars_1 = require("../../components-core/theming/themeVars");
-const metadata_helpers_1 = require("../metadata-helpers");
-const TextAreaNative_1 = require("./TextAreaNative");
-const COMP = "TextArea";
-exports.resizeOptionsMd = [
-    { value: "(undefined)", description: "No resizing" },
-    { value: "horizontal", description: "Can only resize horizontally" },
-    { value: "vertical", description: "Can only resize vertically" },
-    { value: "both", description: "Can resize in both dimensions" },
-];
-exports.TextAreaMd = (0, metadata_helpers_1.createMetadata)({
-    status: "stable",
-    description: "`TextArea` provides a multiline text input area.",
-    parts: {
-        label: {
-            description: "The label displayed for the text area.",
-        },
-        startAdornment: {
-            description: "The adornment displayed at the start of the text area.",
-        },
-        endAdornment: {
-            description: "The adornment displayed at the end of the text area.",
-        },
-        input: {
-            description: "The text area input.",
-        },
-    },
-    props: {
-        enterSubmits: {
-            description: "This optional boolean property indicates whether pressing the \`Enter\` key on the " +
-                "keyboard prompts the parent \`Form\` component to submit.",
-            valueType: "boolean",
-            defaultValue: TextAreaNative_1.defaultProps.enterSubmits,
-        },
-        escResets: {
-            description: `This boolean property indicates whether the ${COMP} contents should be reset when pressing ` +
-                `the ESC key.`,
-            valueType: "boolean",
-            defaultValue: false,
-        },
-        maxRows: (0, metadata_helpers_1.d)(`This optional property sets the maximum number of text rows the \`${COMP}\` ` +
-            "can grow. If not set, the number of rows is unlimited."),
-        minRows: (0, metadata_helpers_1.d)(`This optional property sets the minimum number of text rows the \`${COMP}\` can shrink. ` +
-            `If not set, the minimum number of rows is 1.`),
-        rows: {
-            description: `Specifies the number of rows the component initially has.`,
-            valueType: "number",
-            defaultValue: TextAreaNative_1.defaultProps.rows,
-        },
-        autoSize: {
-            description: `If set to \`true\`, this boolean property enables the \`${COMP}\` to resize ` +
-                `automatically based on the number of lines inside it.`,
-            valueType: "boolean",
-            defaultValue: false,
-        },
-        placeholder: (0, metadata_helpers_1.dPlaceholder)(),
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        maxLength: (0, metadata_helpers_1.dMaxLength)(),
-        autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        required: (0, metadata_helpers_1.dRequired)(),
-        readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        resize: {
-            description: `This optional property specifies in which dimensions can the \`TextArea\` ` +
-                `be resized by the user.`,
-            availableValues: exports.resizeOptionsMd,
-        },
-    },
-    events: {
-        gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),
-        lostFocus: (0, metadata_helpers_1.dLostFocus)(COMP),
-        didChange: (0, metadata_helpers_1.dDidChange)(COMP),
-    },
-    apis: {
-        focus: {
-            description: `This method sets the focus on the \`${COMP}\` component.`,
-            signature: "focus(): void",
-        },
-        value: {
-            description: `You can query the component's value. If no value is set, it will retrieve \`undefined\`.`,
-            signature: "get value(): string | undefined",
-        },
-        setValue: (0, metadata_helpers_1.dSetValueApi)(),
-    },
-    themeVars: (0, themeVars_1.parseScssVar)(TextArea_module_scss_1.default.themeVars),
-    defaultThemeVars: {
-        [`paddingVertical-${COMP}`]: "$space-2",
-        [`paddingHorizontal-${COMP}`]: "$space-2",
-    },
-});
-exports.textAreaComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TextAreaMd, ({ node, extractValue, state, updateState, className, registerComponentApi, lookupEventHandler, }) => {
-    return ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, { value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractValue(node.props.initialValue), updateState: updateState, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue(node.props.placeholder), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), resize: node.props.resize, enterSubmits: extractValue.asOptionalBoolean(node.props.enterSubmits), escResets: extractValue.asOptionalBoolean(node.props.escResets), className: className, registerComponentApi: registerComponentApi, maxRows: extractValue.asOptionalNumber(node.props.maxRows), minRows: extractValue.asOptionalNumber(node.props.minRows), maxLength: extractValue.asOptionalNumber(node.props.maxLength), rows: extractValue.asOptionalNumber(node.props.rows), autoSize: extractValue.asOptionalBoolean(node.props.autoSize), validationStatus: extractValue(node.props.validationStatus), required: extractValue.asOptionalBoolean(node.props.required) }));
-});