@cube-dev/ui-kit 0.8.8 → 0.9.0

package/dist/es/utils/styles.js

@@ -0,0 +1,844 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { getModCombinations } from './index';
+const devMode = process.env.NODE_ENV !== 'production';
+export const CUSTOM_UNITS = {
+    r: 'var(--radius)',
+    bw: 'var(--border-width)',
+    ow: 'var(--outline-width)',
+    x: 'var(--gap)',
+    fs: 'var(--font-size)',
+    lh: 'var(--line-height)',
+    rp: 'var(--rem-pixel)',
+    gp: 'var(--column-gap)',
+    // global setting
+    wh: function wh(num) {
+        return `calc(var(--cube-visual-viewport-height) / 100 * ${num})`;
+    },
+    // span unit for GridProvider
+    sp: function spanWidth(num) {
+        return `((${num} * var(--column-width)) + (${num - 1} * var(--column-gap)))`;
+    },
+};
+export const DIRECTIONS = ['top', 'right', 'bottom', 'left'];
+const COLOR_FUNCS = ['rgb', 'rgba'];
+const IGNORE_MODS = [
+    'auto',
+    'max-content',
+    'min-content',
+    'none',
+    'subgrid',
+    'initial',
+];
+const ATTR_REGEXP = /("[^"]*")|('[^']*')|([a-z-]+\()|(#[a-z0-9.-]{2,}(?![a-f0-9[-]))|(--[a-z0-9-]+|@[a-z0-9-]+)|([a-z][a-z0-9-]*)|(([0-9]+(?![0-9.])|[0-9-.]{2,}|[0-9-]{2,}|[0-9.-]{3,})([a-z%]{0,3}))|([*/+-])|([()])|(,)/gi;
+const ATTR_CACHE = new Map();
+const ATTR_CACHE_AUTOCALC = new Map();
+const ATTR_CACHE_IGNORE_COLOR = new Map();
+const MAX_CACHE = 10000;
+const ATTR_CACHE_MODE_MAP = [
+    ATTR_CACHE_AUTOCALC,
+    ATTR_CACHE,
+    ATTR_CACHE_IGNORE_COLOR,
+];
+const PREPARE_REGEXP = /calc\((\d*)\)/gi;
+export function createRule(prop, value, selector) {
+    if (value == null)
+        return '';
+    if (selector) {
+        return `${selector} { ${prop}: ${value}; }\n`;
+    }
+    return `${prop}: ${value};\n`;
+}
+function getModSelector(modName) {
+    return modName.match(/^[a-z]/) ? `[data-is-${modName}]` : modName;
+}
+/**
+ *
+ * @param {String} value
+ * @param {Number} mode
+ * @returns {Object<String,String|Array>}
+ */
+export function parseStyle(value, mode = 0) {
+    if (typeof value === 'number') {
+        value = String(value);
+    }
+    if (typeof value !== 'string') {
+        return {
+            values: [],
+            mods: [],
+            all: [],
+            value: '',
+        };
+    }
+    const CACHE = ATTR_CACHE_MODE_MAP[mode];
+    if (!CACHE.has(value)) {
+        if (CACHE.size > MAX_CACHE) {
+            CACHE.clear();
+        }
+        const mods = [];
+        const all = [];
+        const values = [];
+        const autoCalc = mode !== 1;
+        let currentValue = '';
+        let calc = -1;
+        let counter = 0;
+        let parsedValue = '';
+        let color = '';
+        let currentFunc = '';
+        let usedFunc = '';
+        let token;
+        ATTR_REGEXP.lastIndex = 0;
+        value = value.replace(/@\(/g, 'var(--');
+        while ((token = ATTR_REGEXP.exec(value))) {
+            let [, quotedDouble, quotedSingle, func, hashColor, prop, mod, unit, unitVal, unitMetric, operator, bracket, comma,] = token;
+            if (quotedSingle || quotedDouble) {
+                currentValue += `${quotedSingle || quotedDouble} `;
+            }
+            else if (func) {
+                currentFunc = func.slice(0, -1);
+                currentValue += func;
+                counter++;
+            }
+            else if (hashColor) {
+                // currentValue += `${hashColor} `;
+                if (mode === 2) {
+                    color = hashColor;
+                }
+                else {
+                    color = parseColor(hashColor, false).color;
+                }
+            }
+            else if (mod) {
+                // ignore mods inside brackets
+                if (counter || IGNORE_MODS.includes(mod)) {
+                    currentValue += `${mod} `;
+                }
+                else {
+                    mods.push(mod);
+                    all.push(mod);
+                    parsedValue += `${mod} `;
+                }
+            }
+            else if (bracket) {
+                if (bracket === '(') {
+                    if (!~calc) {
+                        calc = counter;
+                        currentValue += 'calc';
+                    }
+                    counter++;
+                }
+                if (bracket === ')' && counter) {
+                    currentValue = currentValue.trim();
+                    if (counter > 0) {
+                        counter--;
+                    }
+                    if (counter === calc) {
+                        calc = -1;
+                    }
+                }
+                if (bracket === ')' && !counter) {
+                    usedFunc = currentFunc;
+                    currentFunc = '';
+                }
+                currentValue += `${bracket}${bracket === ')' ? ' ' : ''}`;
+            }
+            else if (operator) {
+                if (!~calc && autoCalc) {
+                    if (currentValue) {
+                        if (currentValue.includes('(')) {
+                            const index = currentValue.lastIndexOf('(');
+                            currentValue = `${currentValue.slice(0, index)}(calc(${currentValue.slice(index + 1)}`;
+                            calc = counter;
+                            counter++;
+                        }
+                    }
+                    else if (values.length) {
+                        parsedValue = parsedValue.slice(0, parsedValue.length - values[values.length - 1].length - 1);
+                        let tmp = values.splice(values.length - 1, 1)[0];
+                        all.splice(values.length - 1, 1);
+                        if (tmp) {
+                            if (tmp.startsWith('calc(')) {
+                                tmp = tmp.slice(4);
+                            }
+                            calc = counter;
+                            counter++;
+                            currentValue = `calc((${tmp}) `;
+                        }
+                    }
+                }
+                currentValue += `${operator} `;
+            }
+            else if (unit) {
+                if (unitMetric && CUSTOM_UNITS[unitMetric]) {
+                    let add = customUnit(unitVal, unitMetric);
+                    if (!~calc && add.startsWith('(')) {
+                        currentValue += 'calc';
+                    }
+                    currentValue += `${add} `;
+                }
+                else {
+                    currentValue += `${unit} `;
+                }
+            }
+            else if (prop) {
+                prop = prop.replace('@', '--');
+                if (currentFunc !== 'var') {
+                    currentValue += `var(${prop}) `;
+                }
+                else {
+                    currentValue += `${prop} `;
+                }
+            }
+            else if (comma) {
+                if (~calc) {
+                    calc = -1;
+                    counter--;
+                    currentValue = `${currentValue.trim()}), `;
+                }
+                else {
+                    currentValue = `${currentValue.trim()}, `;
+                }
+                if (!counter) {
+                    all.push(',');
+                }
+            }
+            if (currentValue && !counter) {
+                let prepared = prepareParsedValue(currentValue);
+                if (COLOR_FUNCS.includes(usedFunc)) {
+                    color = prepared;
+                }
+                else if (prepared.startsWith('color(')) {
+                    prepared = prepared.slice(6, -1);
+                    color = parseColor(prepared).color;
+                }
+                else {
+                    if (prepared !== ',') {
+                        values.push(prepared);
+                        all.push(prepared);
+                    }
+                    parsedValue += `${prepared} `;
+                }
+                currentValue = '';
+            }
+        }
+        if (counter) {
+            let prepared = prepareParsedValue(`${currentValue.trim()}${')'.repeat(counter)}`);
+            if (prepared.startsWith('color(')) {
+                prepared = prepared.slice(6, -1);
+                color = parseColor(prepared).color;
+            }
+            else {
+                if (prepared !== ',') {
+                    values.push(prepared);
+                    all.push(prepared);
+                }
+                parsedValue += prepared;
+            }
+        }
+        CACHE.set(value, {
+            values,
+            mods,
+            all,
+            value: `${parsedValue} ${color}`.trim(),
+            color,
+        });
+    }
+    return CACHE.get(value);
+}
+/**
+ *
+ * @param {String} val
+ * @param {Boolean} ignoreError
+ * @return {{color}|{color: string, name: *, opacity: *}|{}|{color: string, name: string, opacity: (number|number)}|{color: string, name: *}}
+ */
+export function parseColor(val, ignoreError = false) {
+    val = val.trim();
+    if (!val)
+        return {};
+    if (val.startsWith('#')) {
+        val = val.slice(1);
+        const tmp = val.split('.');
+        let opacity = 100;
+        if (tmp.length > 1) {
+            if (tmp[1].length === 1) {
+                opacity = Number(tmp[1]) * 10;
+            }
+            else {
+                opacity = Number(tmp[1]);
+            }
+            if (Number.isNaN(opacity)) {
+                opacity = 100;
+            }
+        }
+        const name = tmp[0];
+        let color;
+        if (name === 'current') {
+            color = 'currentColor';
+        }
+        else {
+            if (opacity > 100) {
+                opacity = 100;
+            }
+            else if (opacity < 0) {
+                opacity = 0;
+            }
+        }
+        if (!color) {
+            color =
+                opacity !== 100
+                    ? rgbColorProp(name, Math.round(opacity) / 100)
+                    : colorProp(name, null, strToRgb(`#${name}`));
+        }
+        return {
+            color,
+            name,
+            opacity: opacity != null ? opacity : 100,
+        };
+    }
+    let { values, mods, color } = parseStyle(val);
+    let name, opacity;
+    if (color) {
+        return {
+            color: (!color.startsWith('var(') ? strToRgb(color) : color) || color,
+        };
+    }
+    values.forEach((token) => {
+        if (token.match(/^((var|rgb|rgba|hsl|hsla)\(|#[0-9a-f]{3,6})/)) {
+            color = !token.startsWith('var') ? strToRgb(token) : token;
+        }
+        else if (token.endsWith('%')) {
+            opacity = parseInt(token);
+        }
+    });
+    if (color) {
+        return { color };
+    }
+    name = name || mods[0];
+    if (!name) {
+        if (!ignoreError && devMode) {
+            console.warn('CubeUIKit: incorrect color value:', val);
+        }
+        return {};
+    }
+    if (!opacity) {
+        let color;
+        if (name === 'current') {
+            color = 'currentColor';
+        }
+        else if (name === 'inherit') {
+            color = 'inherit';
+        }
+        else if (name !== 'transparent' && name !== 'currentColor') {
+            color = `var(--${name}-color, ${name})`;
+        }
+        else {
+            color = name;
+        }
+        return {
+            name,
+            color,
+        };
+    }
+    return {
+        color: rgbColorProp(name, Math.round(opacity) / 100),
+        name,
+        opacity,
+    };
+}
+export function rgbColorProp(colorName, opacity, fallbackColorName, fallbackValue) {
+    const fallbackValuePart = fallbackValue ? `, ${fallbackValue}` : '';
+    return `rgba(var(--${colorName}-color-rgb${fallbackColorName
+        ? `, var(--${fallbackColorName}-color-rgb, ${fallbackValuePart})`
+        : fallbackValuePart}), ${opacity})`;
+}
+export function colorProp(colorName, fallbackColorName, fallbackValue) {
+    const fallbackValuePart = fallbackValue ? `, ${fallbackValue}` : '';
+    return `var(--${colorName}-color${fallbackColorName
+        ? `, var(--${fallbackColorName}${fallbackValuePart})`
+        : fallbackValuePart})`;
+}
+export function strToRgb(color, ignoreAlpha = false) {
+    if (!color)
+        return undefined;
+    if (color.startsWith('rgb'))
+        return color;
+    if (color.startsWith('#'))
+        return hexToRgb(color);
+    return null;
+}
+export function getRgbValuesFromRgbaString(str) {
+    return str
+        .match(/\d+/g)
+        .map((s) => parseInt(s))
+        .slice(0, 3);
+}
+export function hexToRgb(hex) {
+    const rgba = hex
+        .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+        .substring(1)
+        .match(/.{2}/g)
+        .map((x, i) => parseInt(x, 16) * (i === 3 ? 1 / 255 : 1));
+    if (Number.isNaN(rgba[0])) {
+        return 'rgba(0, 0, 0, 1)';
+    }
+    if (rgba.length === 3) {
+        return `rgb(${rgba.join(', ')})`;
+    }
+    else if (rgba.length === 4) {
+        return `rgba(${rgba.join(', ')})`;
+    }
+    return null;
+}
+export function transferMods(mods, from, to) {
+    mods.forEach((mod) => {
+        if (from.includes(mod)) {
+            to.push(mod);
+            from.splice(from.indexOf(mod), 1);
+        }
+    });
+}
+function prepareParsedValue(val) {
+    return val.trim().replace(PREPARE_REGEXP, (s, inner) => inner);
+}
+export function filterMods(mods, allowedMods) {
+    return mods.filter((mod) => allowedMods.includes(mod));
+}
+export function customUnit(value, unit) {
+    const converter = CUSTOM_UNITS[unit];
+    if (typeof converter === 'function') {
+        return converter(value);
+    }
+    if (value === '1' || value === 1) {
+        return converter;
+    }
+    return `(${value} * ${converter})`;
+}
+export function extendStyles(defaultStyles, newStyles) {
+    let styles = {};
+    if (!defaultStyles) {
+        if (!newStyles) {
+            return styles;
+        }
+    }
+    else {
+        styles = Object.assign({}, defaultStyles);
+    }
+    if (newStyles) {
+        Object.keys(newStyles).forEach((key) => {
+            if (newStyles[key] != null) {
+                styles[key] = newStyles[key];
+            }
+        });
+    }
+    return styles;
+}
+/**
+ * Split properties into style and non-style properties.
+ * @param props - Component prop map.
+ * @param [styleList] - List of all style properties.
+ * @param [defaultStyles] - Default style map of the component.
+ * @param [propMap] - Props to style alias map.
+ * @param [ignoreList] - A list of properties to ignore.
+ */
+export function extractStyles(props, styleList = [], defaultStyles, propMap, ignoreList = []) {
+    const styles = {
+        ...defaultStyles,
+        ...props.styles,
+    };
+    Object.keys(props).forEach((prop) => {
+        const propName = propMap ? propMap[prop] || prop : prop;
+        const value = props[prop];
+        if (ignoreList && ignoreList.includes(prop)) {
+            // do nothing
+        }
+        else if (styleList.includes(propName)) {
+            // If value is not nullish then map it to the styles
+            if (value != null && value !== false) {
+                styles[propName] = value;
+                // If value is nullish then erase the default value of the style
+            }
+            else if (propName in styles) {
+                delete styles[propName];
+            }
+        }
+    }, {});
+    return styles;
+}
+/**
+ * Render CSSMap to Styled Components CSS
+ * @param styles
+ * @param [selector]
+ */
+export function renderStylesToSC(styles, selector = '') {
+    if (!styles)
+        return '';
+    if (Array.isArray(styles)) {
+        return styles.reduce((css, stls) => {
+            return css + renderStylesToSC(stls, selector);
+        }, '');
+    }
+    const { $, css, ...styleProps } = styles;
+    let renderedStyles = Object.keys(styleProps).reduce((styleList, styleName) => {
+        const value = styleProps[styleName];
+        if (Array.isArray(value)) {
+            return (styleList +
+                value.reduce((css, val) => {
+                    if (val) {
+                        return css + `${styleName}:${val};\n`;
+                    }
+                    return css;
+                }, ''));
+        }
+        if (value) {
+            return `${styleList}${styleName}:${value};\n`;
+        }
+        return styleList;
+    }, '');
+    if (css) {
+        renderedStyles = css + '\n' + renderedStyles;
+    }
+    if (!renderedStyles) {
+        return '';
+    }
+    if (Array.isArray($)) {
+        return `${selector ? `${selector}{\n` : ''}${$.reduce((rend, suffix) => {
+            return (rend +
+                `${suffix ? `&${suffix}{\n` : ''}${renderedStyles}${suffix ? '}\n' : ''}`);
+        }, '')}${selector ? '}\n' : ''}`;
+    }
+    return `${selector ? `${selector}{\n` : ''}${$ ? `&${$}{\n` : ''}${renderedStyles}${$ ? '}\n' : ''}${selector ? '}\n' : ''}`;
+}
+/**
+ * Compile states to finite CSS with selectors.
+ * State values should contain a string value with CSS style list.
+ * @param {string} selector
+ * @param {StyleStateList|StyleStateMapList} states
+ * @param {string} suffix
+ */
+export function applyStates(selector, states, suffix = '') {
+    return states.reduce((css, state) => {
+        if (!state.value)
+            return css;
+        const modifiers = `${(state.mods || []).map(getModSelector).join('')}${(state.notMods || [])
+            .map((mod) => `:not(${getModSelector(mod)})`)
+            .join('')}`;
+        // TODO: replace `replace()` a REAL hotfix
+        return `${css}${selector}${modifiers}${suffix}{\n${state.value.replace(/^&&/, '&')}}\n`;
+    }, '');
+}
+export function styleHandlerCacheWrapper(styleHandler, limit = 1000) {
+    const wrappedStyleHandler = cacheWrapper((styleMap) => {
+        return renderStylesToSC(styleHandler(styleMap));
+    }, limit);
+    const wrappedMapHandler = cacheWrapper((styleMap, suffix = '') => {
+        if (styleMap == null || styleMap === false)
+            return null;
+        const stateMapList = styleMapToStyleMapStateList(styleMap);
+        replaceStateValues(stateMapList, wrappedStyleHandler);
+        return applyStates('&', stateMapList, suffix);
+    }, limit);
+    return Object.assign(wrappedMapHandler, {
+        __lookupStyles: styleHandler.__lookupStyles,
+    });
+}
+/**
+ * Replace state values with new ones.
+ * For example, if you want to replace initial values with finite CSS code.
+ * @param {StyleStateList|StyleStateMapList} states
+ * @param {Function} replaceFn
+ */
+export function replaceStateValues(states, replaceFn) {
+    const cache = new Map();
+    states.forEach((state) => {
+        if (!cache.get(state.value)) {
+            cache.set(state.value, replaceFn(state.value));
+        }
+        state.value = cache.get(state.value);
+    });
+    return states;
+}
+/**
+ * Get all presented modes from style state list.
+ * @param {StyleStateList} stateList
+ */
+export function getModesFromStyleStateList(stateList) {
+    return stateList.reduce((list, state) => {
+        state.mods.forEach((mod) => {
+            if (!list.includes(mod)) {
+                list.push(mod);
+            }
+        });
+        return list;
+    }, []);
+}
+/**
+ * Get all presented modes from style state list map.
+ * @param {StyleStateMapList} stateListMap
+ * @return {string[]}
+ */
+export function getModesFromStyleStateListMap(stateListMap) {
+    return Object.keys(stateListMap).reduce((list, style) => {
+        const stateList = stateListMap[style];
+        getModesFromStyleStateList(stateList).forEach((mod) => {
+            if (!list.includes(mod)) {
+                list.push(mod);
+            }
+        });
+        return list;
+    }, []);
+}
+/**
+ * Convert style map to the normalized style map state list.
+ * @param styleMap
+ * @param filterKeys
+ */
+export function styleMapToStyleMapStateList(styleMap, filterKeys) {
+    const keys = filterKeys || Object.keys(styleMap);
+    if (!keys.length)
+        return [];
+    const stateDataListMap = {};
+    let allModsSet = new Set();
+    keys.forEach((style) => {
+        stateDataListMap[style] = styleStateMapToStyleStateDataList(styleMap[style]);
+        stateDataListMap[style].mods.forEach(allModsSet.add, allModsSet);
+    });
+    const allModsArr = Array.from(allModsSet);
+    const styleStateMapList = [];
+    getModCombinations(allModsArr, true).forEach((combination) => {
+        styleStateMapList.push({
+            mods: combination,
+            notMods: allModsArr.filter((mod) => !combination.includes(mod)),
+            value: keys.reduce((map, key) => {
+                map[key] = stateDataListMap[key].states.find((state) => {
+                    return computeState(state.model, (mod) => combination.includes(mod));
+                }).value;
+                return map;
+            }, {}),
+        });
+    });
+    return styleStateMapList;
+}
+const STATES_REGEXP = /([&|!^])|([()])|([a-z0-6-]+)|(:[a-z0-6-]+)|(\.[a-z0-6-]+)|(\[[^\]]+])/gi;
+export const STATE_OPERATORS = {
+    NOT: '!',
+    AND: '&',
+    OR: '|',
+    XOR: '^',
+};
+export const STATE_OPERATOR_LIST = ['!', '&', '|', '^'];
+/**
+ *
+ */
+function convertTokensToComputeUnits(tokens) {
+    if (tokens.length === 1) {
+        return tokens[0];
+    }
+    STATE_OPERATOR_LIST.forEach((operator) => {
+        let i;
+        while ((i = tokens.indexOf(operator)) !== -1) {
+            const token = tokens[i];
+            if (token === '!') {
+                if (tokens[i + 1] && tokens[i + 1].length !== 1) {
+                    tokens.splice(i, 2, ['!', tokens[i + 1]]);
+                }
+                else {
+                    tokens.splice(i, 1);
+                }
+            }
+            else {
+                if (tokens[i - 1] &&
+                    tokens[i + 1] &&
+                    tokens[i - 1].length !== 1 &&
+                    tokens[i + 1].length !== 1) {
+                    tokens.splice(i - 1, 3, [token, tokens[i - 1], tokens[i + 1]]);
+                }
+                else {
+                    tokens.splice(i, 1);
+                }
+            }
+        }
+    });
+    return tokens.length === 1 ? tokens[0] : tokens;
+}
+/**
+ * Parse state notation and return tokens, modifiers and compute model.
+ */
+function parseStateNotationInner(notation, value) {
+    const tokens = notation.replace(/,/g, '|').match(STATES_REGEXP);
+    if (!tokens || !tokens.length) {
+        return {
+            model: null,
+            mods: [],
+            tokens,
+            value,
+        };
+    }
+    else if (tokens.length === 1) {
+        return {
+            model: tokens[0],
+            mods: tokens.slice(0),
+            tokens,
+            value,
+        };
+    }
+    const mods = [];
+    let operations = [[]];
+    let list = operations[0];
+    let position = 0;
+    tokens.forEach((token) => {
+        switch (token) {
+            case '(':
+                const operation = [];
+                position++;
+                list = operations[position] = operation;
+                break;
+            case ')':
+                position--;
+                operations[position].push(convertTokensToComputeUnits(list));
+                list = operations[position];
+                break;
+            default:
+                if (token.length > 1) {
+                    if (!mods.includes(token)) {
+                        mods.push(token);
+                    }
+                }
+                list.push(token);
+        }
+    });
+    while (position) {
+        position--;
+        operations[position].push(convertTokensToComputeUnits(list));
+        list = operations[position];
+    }
+    return {
+        tokens,
+        mods,
+        model: convertTokensToComputeUnits(operations[0]),
+        value,
+    };
+}
+export const parseStateNotation = cacheWrapper(parseStateNotationInner);
+/**
+ *
+ * @param {StyleStateMap|string|number|boolean|null|undefined} styleStateMap
+ * @return {{ states: StyleStateDataList, mods: string[] }}
+ */
+export function styleStateMapToStyleStateDataList(styleStateMap) {
+    if (typeof styleStateMap !== 'object' || !styleStateMap) {
+        return {
+            states: [
+                {
+                    model: null,
+                    mods: [],
+                    value: styleStateMap,
+                },
+            ],
+            mods: [],
+        };
+    }
+    const stateDataList = [];
+    Object.keys(styleStateMap).forEach((stateNotation) => {
+        const state = parseStateNotation(stateNotation, styleStateMap[stateNotation]);
+        stateDataList.push(state);
+    });
+    stateDataList.reverse();
+    let initialState;
+    const allMods = stateDataList.reduce((all, state) => {
+        if (!state.mods.length) {
+            initialState = state;
+        }
+        else {
+            state.mods.forEach((mod) => {
+                if (!all.includes(mod)) {
+                    all.push(mod);
+                }
+            });
+        }
+        return all;
+    }, []);
+    if (!initialState) {
+        stateDataList.push({
+            mods: [],
+            notMods: allMods,
+            value: true,
+        });
+    }
+    return { states: stateDataList, mods: allMods };
+}
+export const COMPUTE_FUNC_MAP = {
+    '!': (a) => !a,
+    '^': (a, b) => a ^ b,
+    '|': (a, b) => a | b,
+    '&': (a, b) => a & b,
+};
+/**
+ * Compute a result based on model and incoming map.
+ */
+export function computeState(computeModel, valueMap) {
+    if (!computeModel)
+        return true;
+    if (!Array.isArray(computeModel)) {
+        if (typeof valueMap === 'function') {
+            return !!valueMap(computeModel);
+        }
+        else {
+            return !!valueMap[computeModel];
+        }
+    }
+    const func = COMPUTE_FUNC_MAP[computeModel[0]];
+    if (!func) {
+        console.warn('CubeUIKit: unexpected compute method in the model', computeModel);
+        // return false;
+    }
+    let a = computeModel[1];
+    if (typeof a === 'object') {
+        a = !!computeState(a, valueMap);
+    }
+    else if (typeof valueMap === 'function') {
+        a = !!valueMap(a);
+    }
+    else {
+        a = !!valueMap[a];
+    }
+    if (computeModel.length === 2) {
+        return func(a);
+    }
+    let b = computeModel[2];
+    if (typeof b === 'object') {
+        b = !!computeState(b, valueMap);
+    }
+    else if (typeof valueMap === 'function') {
+        b = !!valueMap(b);
+    }
+    else {
+        b = !!valueMap[b];
+    }
+    return !!func(a, b);
+}
+export function cacheWrapper(handler, limit = 1000) {
+    let cache = {};
+    let count = 0;
+    return (firstArg, secondArg) => {
+        const key = typeof firstArg === 'string' && secondArg == null
+            ? firstArg
+            : JSON.stringify([firstArg, secondArg]);
+        if (!cache[key]) {
+            if (count > limit) {
+                cache = {};
+                count = 0;
+            }
+            count++;
+            cache[key] =
+                secondArg == null ? handler(firstArg) : handler(firstArg, secondArg);
+        }
+        return cache[key];
+    };
+}
+
+