xmlui 0.4.0

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

@@ -0,0 +1,127 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleObjectFromString = void 0;
+exports.kebabCase = kebabCase;
+exports.toStyleString = toStyleString;
+exports.normalizeCssValueForCalc = normalizeCssValueForCalc;
+exports.getColor = getColor;
+exports.getColors = getColors;
+exports.getMaxLinesStyle = getMaxLinesStyle;
+exports.getSizeString = getSizeString;
+const color_1 = __importDefault(require("color"));
+const themeVars_1 = require("@components-core/theming/themeVars");
+const constants_1 = require("@components-core/constants");
+/**
+ * Converts a string to its kebab-case representation
+ * @param str Input string
+ * @returns Kebab-case representation
+ */
+function kebabCase(str) {
+    return str.replace(/[A-Z]/g, (v) => `-${v.toLowerCase()}`);
+}
+/**
+ * Converts the set of style properties to a string
+ * @param style Style properties
+ * @returns Style string representation
+ */
+function toStyleString(style) {
+    return Object.keys(style).reduce((accumulator, key) => {
+        // remove ' in value
+        const cssValue = style[key].toString().replace("'", "");
+        // build the result
+        // you can break the line, add indent for it if you need
+        return `${accumulator}${key}:${cssValue};`;
+    }, "");
+}
+const formatStringToCamelCase = (str) => {
+    const splitted = str.split("-");
+    if (splitted.length === 1)
+        return splitted[0];
+    return (splitted[0] +
+        splitted
+            .slice(1)
+            .map((word) => word[0].toUpperCase() + word.slice(1))
+            .join(""));
+};
+const getStyleObjectFromString = (str) => {
+    const style = {};
+    str.split(";").forEach((el) => {
+        const [property, value] = el.split(":");
+        if (!property || !value)
+            return;
+        const formattedProperty = formatStringToCamelCase(property.trim());
+        // @ts-ignore
+        style[formattedProperty] = value.trim();
+    });
+    return style;
+};
+exports.getStyleObjectFromString = getStyleObjectFromString;
+function normalizeCssValueForCalc(cssValue) {
+    // 1. number -> append "px"
+    if (typeof cssValue === "number")
+        return cssValue + "px";
+    // 2. string
+    const cssTrimmed = cssValue.trim();
+    if (cssTrimmed.startsWith("var(")) {
+        return cssTrimmed;
+    }
+    const value = parseFloat(cssTrimmed);
+    const valueStr = value.toString();
+    const unit = cssTrimmed.replace(valueStr, "");
+    //  a) non-value -> "0px"
+    if (Number.isNaN(value))
+        return "0px";
+    //  b) value without unit -> append "px"
+    if (unit === "")
+        return valueStr + "px";
+    //  c) value with unit -> do nothing
+    return cssTrimmed;
+}
+function getColor(varName, format) {
+    const varValue = getComputedStyle(document.getElementById("_ui-engine-theme-root")).getPropertyValue((0, themeVars_1.getVarKey)(varName));
+    if (format === "hex") {
+        return (0, color_1.default)(varValue).hex().toString();
+    }
+    return (0, color_1.default)(varValue).toString();
+}
+function getColors(...colors) {
+    const ret = {};
+    for (const color of colors) {
+        if (typeof color === "string") {
+            ret[color] = getColor(color);
+        }
+        else {
+            ret[color.name] = getColor(color.name, color.format);
+        }
+    }
+    return ret;
+}
+function getMaxLinesStyle(maxLines) {
+    const _maxLines = maxLines && maxLines > 0 ? maxLines : 0;
+    const maxLinesStyles = _maxLines > 1
+        ? {
+            WebkitLineClamp: _maxLines,
+            lineClamp: _maxLines,
+            display: "-webkit-box",
+            WebkitBoxOrient: "vertical",
+            boxOrient: "vertical",
+            whiteSpace: "initial",
+        }
+        : constants_1.EMPTY_OBJECT;
+    return maxLinesStyles;
+}
+function getSizeString(size) {
+    if (typeof size === "number") {
+        return size + "px";
+    }
+    if (typeof size === "string" && /^\d+$/.test(size.trim())) {
+        const rowGapValue = parseInt(size, 10);
+        if (!isNaN(rowGapValue)) {
+            return rowGapValue + "px";
+        }
+    }
+    return size === null || size === void 0 ? void 0 : size.toString();
+}

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

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isoDateString = isoDateString;
+exports.formatDate = formatDate;
+exports.formatDateTime = formatDateTime;
+exports.formatTime = formatTime;
+exports.formatTimeWithoutSeconds = formatTimeWithoutSeconds;
+exports.formatDateWithoutYear = formatDateWithoutYear;
+exports.getDate = getDate;
+exports.getDateUntilNow = getDateUntilNow;
+exports.smartFormatDateTime = smartFormatDateTime;
+exports.smartFormatDate = smartFormatDate;
+exports.isDateToday = isDateToday;
+exports.isDateYesterday = isDateYesterday;
+exports.isDateTomorrow = isDateTomorrow;
+const date_fns_1 = require("date-fns");
+const misc_1 = require("@components-core/utils/misc");
+function isoDateString(date) {
+    return (!date ? new Date() : new Date(date)).toJSON();
+}
+function formatDate(date) {
+    return new Date(date).toLocaleDateString();
+}
+function formatDateTime(date) {
+    return new Date(date).toLocaleString();
+}
+function formatTime(date) {
+    return new Date(date).toLocaleTimeString();
+}
+function formatTimeWithoutSeconds(date) {
+    return (0, date_fns_1.format)(new Date(date), "H:m");
+}
+function formatDateWithoutYear(date) {
+    return new Date(date).toLocaleDateString([], {
+        month: "numeric",
+        day: "2-digit"
+    });
+}
+function getDate(date) {
+    return date ? new Date(date) : new Date();
+}
+function getDateUntilNow(date, nowLabel, time) {
+    return date ? (0, misc_1.humanReadableDateTimeTillNow)(date, nowLabel, time) : "-";
+}
+function smartFormatDateTime(date) {
+    if (!date) {
+        return "-";
+    }
+    if ((0, date_fns_1.isToday)(new Date(date))) {
+        return new Date(date).toLocaleTimeString();
+    }
+    if ((0, date_fns_1.isThisWeek)(new Date(date))) {
+        return `${(0, date_fns_1.formatRelative)(new Date(date), new Date())}`;
+    }
+    return new Date(date).toLocaleString();
+}
+function smartFormatDate(date) {
+    if (!date) {
+        return "-";
+    }
+    //TODO we could use formatRelative when they implement this: https://github.com/date-fns/date-fns/issues/1218
+    if ((0, date_fns_1.isToday)(new Date(date))) {
+        return "Today";
+    }
+    if ((0, date_fns_1.isYesterday)(new Date(date))) {
+        return "Yesterday";
+    }
+    return new Date(date).toLocaleDateString();
+}
+function isDateToday(date) {
+    return (0, date_fns_1.isToday)(new Date(date));
+}
+function isDateYesterday(date) {
+    return (0, date_fns_1.isYesterday)(new Date(date));
+}
+function isDateTomorrow(date) {
+    return (0, date_fns_1.isTomorrow)(new Date(date));
+}

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

@@ -0,0 +1,148 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractParam = extractParam;
+exports.withStableObjectReference = withStableObjectReference;
+exports.shouldKeep = shouldKeep;
+const react_1 = __importDefault(require("react"));
+const lodash_es_1 = require("lodash-es");
+const ParameterParser_1 = require("@components-core/script-runner/ParameterParser");
+const eval_tree_sync_1 = require("@components-core/script-runner/eval-tree-sync");
+const LruCache_1 = require("@components-core/utils/LruCache");
+/**
+ * Extract the value of the specified parameter from the given view container state
+ * @param state The state of the view container
+ * @param param Parameter to extract
+ * @param appContext Application context to use
+ * @param strict Strict evaluation?
+ * @param extractContext
+ * @returns
+ */
+function extractParam(state, param, appContext = undefined, strict = false, // --- In this case we only allow string binding expression
+extractContext = { didResolve: false }) {
+    if (typeof param === "string") {
+        const paramSegments = (0, ParameterParser_1.parseParameterString)(param);
+        if (paramSegments.length === 0) {
+            // --- The param is an empty string, retrieve it
+            return param;
+        }
+        if (paramSegments.length === 1) {
+            // --- We have a single string literal or expression
+            if (paramSegments[0].type === "literal") {
+                // --- No expression to evaluate
+                return paramSegments[0].value;
+            }
+            else {
+                // --- We have a single expression to evaluate
+                extractContext.didResolve = true;
+                return (0, eval_tree_sync_1.evalBinding)(paramSegments[0].value, {
+                    localContext: state,
+                    appContext,
+                    options: {
+                        defaultToOptionalMemberAccess: true,
+                    },
+                });
+            }
+        }
+        // --- At this point, we have multiple segments. Evaluate all expressions and convert them to strings
+        let result = "";
+        paramSegments.forEach((ps) => {
+            if (ps.type === "literal") {
+                result += ps.value;
+            }
+            else {
+                extractContext.didResolve = true;
+                const exprValue = (0, eval_tree_sync_1.evalBinding)(ps.value, {
+                    localContext: state,
+                    appContext,
+                    options: {
+                        defaultToOptionalMemberAccess: true,
+                    },
+                });
+                if (exprValue === null) {
+                    result += "null";
+                }
+                else if (exprValue === undefined) {
+                    result += "undefined";
+                }
+                else if (exprValue === null || exprValue === void 0 ? void 0 : exprValue.toString) {
+                    result += exprValue.toString();
+                }
+            }
+        });
+        return result;
+    }
+    if (strict) {
+        // --- As we allow only string parameters as binding expressions, we return with the provided
+        // --- *not string* parameter without transforming it
+        return param;
+    }
+    // --- Resolve each array item
+    if (Array.isArray(param)) {
+        const arrayExtractContext = { didResolve: false };
+        let resolvedChildren = param.map((childParam) => extractParam(state, childParam, appContext, false, arrayExtractContext));
+        if (arrayExtractContext.didResolve) {
+            extractContext.didResolve = true;
+            return resolvedChildren;
+        }
+        return param;
+    }
+    // --- Resolve each object property
+    if ((0, lodash_es_1.isPlainObject)(param)) {
+        const objectExtractContext = { didResolve: false };
+        const substitutedObject = {};
+        Object.entries(param).forEach(([key, value]) => {
+            substitutedObject[key] = extractParam(state, value, appContext, false, objectExtractContext);
+        });
+        if (objectExtractContext.didResolve) {
+            extractContext.didResolve = true;
+            return substitutedObject;
+        }
+        return param;
+    }
+    // --- The param itself is the extracted value
+    return param;
+}
+// --- Store stable object references for extracted parameter values
+const extractedObjectCache = new LruCache_1.LRUCache(1024 * 10);
+/**
+ * Get a stable object reference from an LRU cache
+ * @param object Object to get the stable reference for
+ *
+ * We are doing this to prevent creating new objects with new references when the data hasn't changed this way we
+ * can use these as dependencies for useEffect
+ */
+function withStableObjectReference(object) {
+    if (typeof object === "function") {
+        return object;
+    }
+    if (react_1.default.isValidElement(object) || (Array.isArray(object) && react_1.default.isValidElement(object[0]))) {
+        //here could be some gnarly circular object references, JSON.stringify would blow up
+        return object;
+    }
+    if (object === null || object === void 0 ? void 0 : object._ARROW_EXPR_) {
+        //here could be some gnarly circular object references, JSON.stringify would blow up
+        return object;
+    }
+    try {
+        const stringObject = JSON.stringify(object);
+        const cachedObject = extractedObjectCache.get(stringObject);
+        if (cachedObject) {
+            return cachedObject;
+        }
+        extractedObjectCache.set(stringObject, object);
+    }
+    catch (e) {
+        console.log(object);
+        console.warn("couldn't cache result", e);
+    }
+    return object;
+}
+function shouldKeep(when, componentState, appContext) {
+    if (when === undefined) {
+        return true;
+    }
+    return extractParam(componentState, when, appContext, true);
+}

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

@@ -0,0 +1,221 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsomorphicLayoutEffect = exports.useResizeObserver = void 0;
+exports.usePrevious = usePrevious;
+exports.useIsInIFrame = useIsInIFrame;
+exports.useIsWindowFocused = useIsWindowFocused;
+exports.useMediaQuery = useMediaQuery;
+exports.useDocumentKeydown = useDocumentKeydown;
+exports.useOnMount = useOnMount;
+exports.useShallowCompareMemoize = useShallowCompareMemoize;
+exports.useDeepCompareMemoize = useDeepCompareMemoize;
+exports.useColors = useColors;
+exports.useReferenceTrackedApi = useReferenceTrackedApi;
+const react_1 = __importStar(require("react"));
+const lodash_es_1 = require("lodash-es");
+const misc_1 = require("@components-core/utils/misc");
+const ThemeContext_1 = require("@components-core/theming/ThemeContext");
+const constants_1 = require("@components-core/constants");
+const css_utils_1 = require("./css-utils");
+/**
+ * This hook invokes a callback when the size of the specified DOM element changes.
+ * @param element A DOM element to watch for size changes
+ * @param callback The callback function to invoke on size changes
+ */
+const useResizeObserver = (element, callback) => {
+    const current = element === null || element === void 0 ? void 0 : element.current;
+    const observer = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        // --- We are already observing old element
+        if ((observer === null || observer === void 0 ? void 0 : observer.current) && current) {
+            observer.current.unobserve(current);
+        }
+        observer.current = new ResizeObserver(callback);
+        if (element && element.current && observer.current) {
+            observer.current.observe(element.current);
+        }
+    }, [callback, current, element]);
+};
+exports.useResizeObserver = useResizeObserver;
+/**
+ * This hook gets the previous state of the specified value (props, variable used in a React
+ * function).
+ *
+ * @see {@link https://blog.logrocket.com/accessing-previous-props-state-react-hooks/}
+ */
+function usePrevious(value) {
+    const ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        ref.current = value;
+    }, [value]);
+    return ref.current;
+}
+/**
+ * This hook tests if the component is used within an iframe.
+ * @returns True, if the component is used within an iframe; otherwise, false.
+ */
+function useIsInIFrame() {
+    return (0, react_1.useMemo)(() => {
+        try {
+            return window.self !== window.top;
+        }
+        catch (e) {
+            return true;
+        }
+    }, []);
+}
+// --- Tests if the document has the focus
+const hasFocus = () => typeof document !== "undefined" && document.hasFocus();
+/**
+ * This hook tests if the window has the focus.
+ * @returns True, if the window has the focus; otherwise, false.
+ */
+function useIsWindowFocused() {
+    const [focused, setFocused] = (0, react_1.useState)(hasFocus); // Focus for first render
+    (0, react_1.useEffect)(() => {
+        setFocused(hasFocus()); // Focus for additional renders
+        const onFocus = () => setFocused(true);
+        const onBlur = () => setFocused(false);
+        window.addEventListener("focus", onFocus);
+        window.addEventListener("blur", onBlur);
+        return () => {
+            window.removeEventListener("focus", onFocus);
+            window.removeEventListener("blur", onBlur);
+        };
+    }, []);
+    return focused;
+}
+/**
+ * This hook allows running media queries.
+ * @param query Media query to run
+ */
+function useMediaQuery(query) {
+    const [matches, setMatches] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (!window) {
+            setMatches(false);
+            return;
+        }
+        const matchMedia = window.matchMedia(query);
+        // Triggered at the first client-side load and if query changes
+        handleChange();
+        matchMedia.addEventListener("change", handleChange);
+        return () => {
+            matchMedia.removeEventListener("change", handleChange);
+        };
+        function handleChange() {
+            setMatches(matchMedia.matches);
+        }
+    }, [query]);
+    return matches;
+}
+/**
+ * This hook runs a callback function when a key is pressed in the document window.
+ * @param onDocumentKeydown Callback function to run
+ */
+function useDocumentKeydown(onDocumentKeydown) {
+    const onKeyDown = (0, misc_1.useEvent)(onDocumentKeydown);
+    (0, react_1.useEffect)(() => {
+        document.addEventListener("keydown", onKeyDown);
+        return () => {
+            document.removeEventListener("keydown", onKeyDown);
+        };
+    }, [onKeyDown]);
+}
+/**
+ * This hook runs a function when the corresponding component has been mounted.
+ * @param onMount
+ */
+function useOnMount(onMount) {
+    const thizRef = (0, react_1.useRef)({ mountedFired: false });
+    (0, react_1.useEffect)(() => {
+        if (!thizRef.current.mountedFired) {
+            thizRef.current.mountedFired = true;
+            onMount === null || onMount === void 0 ? void 0 : onMount();
+        }
+    }, [onMount]);
+}
+/**
+ * This hook memoizes the specified value. It uses a shallow comparison with the previously
+ * stored value when checking for changes. So, while a shallow comparison shows equality, it returns with the memoized value.
+ * @param value Value to memoize
+ */
+function useShallowCompareMemoize(value) {
+    const ref = react_1.default.useRef(value);
+    const signalRef = react_1.default.useRef(0);
+    if (!(0, misc_1.shallowCompare)(value, ref.current)) {
+        ref.current = value;
+        signalRef.current++;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return react_1.default.useMemo(() => ref.current, [signalRef.current]);
+}
+/**
+ * This hook memoizes the specified value. When checking for changes, it uses a deep comparison
+ * with the previously stored value. So, while a deep comparison shows equality, it returns with
+ * the memoized value, even if value references differ.
+ * @param value Value to memoize
+ */
+function useDeepCompareMemoize(value) {
+    const ref = react_1.default.useRef(value);
+    const signalRef = react_1.default.useRef(0);
+    if (!(0, lodash_es_1.isEqual)(value, ref.current)) {
+        ref.current = value;
+        signalRef.current += 1;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    return react_1.default.useMemo(() => ref.current, [signalRef.current]);
+}
+function useColors(...colorNames) {
+    const paramsRef = (0, react_1.useRef)(colorNames);
+    const { themeStyles } = (0, ThemeContext_1.useTheme)();
+    const [colors, setColors] = (0, react_1.useState)(() => (0, css_utils_1.getColors)(...paramsRef.current));
+    (0, react_1.useEffect)(() => {
+        setColors((0, css_utils_1.getColors)(...paramsRef.current));
+    }, [themeStyles]);
+    return colors;
+}
+function useReferenceTrackedApi(componentState) {
+    return useShallowCompareMemoize((0, react_1.useMemo)(() => {
+        const ret = {};
+        if (Reflect.ownKeys(componentState).length === 0) {
+            //skip containers with no registered apis
+            return constants_1.EMPTY_OBJECT;
+        }
+        for (const componentApiKey of Object.getOwnPropertySymbols(componentState)) {
+            const value = componentState[componentApiKey];
+            if (componentApiKey.description) {
+                ret[componentApiKey.description] = value;
+            }
+        }
+        return ret;
+    }, [componentState]));
+}
+/**
+ * This hook uses either useLayoutEffect or useEffect based on the environment
+ * (client-side or server-side).
+ */
+exports.useIsomorphicLayoutEffect = typeof document !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeProps = mergeProps;
+/**
+ * Merges child component props with rest props.
+ * @param childProps Child component props
+ * @param restProps Rest props
+ * @returns
+ *
+ * The origin of this method is:
+ * https://github.com/radix-ui/primitives/blob/c31c97274ff357aea99afe6c01c1c8c58b6356e0/packages/react/slot/src/Slot.tsx#L91
+ */
+function mergeProps(childProps, restProps) {
+    // --- All child props should override
+    const overrideProps = Object.assign({}, restProps);
+    for (const propName in restProps) {
+        const childPropValue = childProps[propName];
+        const restPropValue = restProps[propName];
+        const isHandler = /^on[A-Z]/.test(propName);
+        if (isHandler) {
+            // --- If the handler exists on both, we compose them...
+            if (childPropValue && restPropValue) {
+                overrideProps[propName] = (...args) => {
+                    restPropValue(...args);
+                    childPropValue(...args);
+                };
+            }
+            // --- ...but if it exists only on the original, we use only this one
+            else if (childPropValue) {
+                overrideProps[propName] = childPropValue;
+            }
+        }
+        else if (propName === "style") {
+            // --- We merge `style`
+            overrideProps[propName] = restPropValue ? Object.assign(Object.assign({}, restPropValue), childPropValue) : childPropValue;
+        }
+        else if (propName === "className") {
+            // --- We merge `className`
+            overrideProps[propName] = restPropValue
+                ? [restPropValue, childPropValue].filter(Boolean).join(" ")
+                : childPropValue;
+        }
+    }
+    return Object.assign(Object.assign({}, childProps), overrideProps);
+}