@itcase/ui-core 1.10.47 → 1.10.48

package/dist/cjs/hooks/useStyles/styleAttributes.js

@@ -1 +1,177 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.default=["alignContent","alignItems","alignSelf","aspectRatio","border","borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","borderWidth","bottom","display","flex","flexBasis","flexDirection","flexGrow","flexShrink","flexWrap","gap","rowGap","columnGap","columnWidth","height","justifyContent","left","margin","marginBottom","marginHorizontal","marginLeft","marginRight","marginTop","marginVertical","maxHeight","maxWidth","minHeight","minWidth","overflow","overflowY","overflowX","padding","paddingBottom","paddingEnd","paddingHorizontal","paddingLeft","paddingRight","paddingStart","paddingTop","paddingVertical","position","right","top",["width",{validate:o=>/\d+/.test(o)}],"zIndex","order","shadowColor","shadowOffset","shadowOpacity","shadowRadius","transform","background","backgroundColor","borderBottomColor","borderBottomEndRadius","borderBottomLeftRadius","borderBottomRightRadius","borderBottomStartRadius","borderColor","borderCurve","borderEndColor","borderLeftColor","borderRadius","borderRightColor","borderStartColor","borderStyle","borderTopColor","borderTopEndRadius","borderTopLeftRadius","borderTopRightRadius","borderTopStartRadius","opacity","cursor","color","fontFamily","fontSize","fontStyle","fontVariant","fontWeight","letterSpacing","lineHeight","textAlign","textDecorationColor","textDecorationLine","textDecorationStyle","textShadowColor","textShadowOffset","textShadowRadius","textTransform","verticalAlign","writingMode","whiteSpace","overlayColor","resizeMode","tintColor","objectFit","objectPosition","gridTemplateColumns","gridArea","gridAutoColumns","gridAutoFlow","gridAutoRows","gridTemplate","gridTemplateAreas","gridTemplateRows","gridColumn","gridColumnStart","gridColumnEnd","gridColumnGap","gridRow","gridRowStart","gridRowEnd","gridRowGap","backdropFilter","transition","transitionBehavior","transitionDelay","transitionDuration","transitionProperty","transitionTimingFunction","pointerEvents"];
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var styleAttributes = [
+    /**
+     * Layout
+     */
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'aspectRatio',
+    'border',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderTopWidth',
+    'borderWidth',
+    'bottom',
+    'display',
+    'flex',
+    'flexBasis',
+    'flexDirection',
+    'flexGrow',
+    'flexShrink',
+    'flexWrap',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'columnWidth',
+    'height',
+    'justifyContent',
+    'left',
+    'margin',
+    'marginBottom',
+    'marginHorizontal',
+    'marginLeft',
+    'marginRight',
+    'marginTop',
+    'marginVertical',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'overflow',
+    'overflowY',
+    'overflowX',
+    'padding',
+    'paddingBottom',
+    'paddingEnd',
+    'paddingHorizontal',
+    'paddingLeft',
+    'paddingRight',
+    'paddingStart',
+    'paddingTop',
+    'paddingVertical',
+    'position',
+    'right',
+    'top',
+    [
+        'width',
+        {
+            validate: (value) => {
+                // Pass only number value for "width" style.
+                // If width have custom value, like "fill", we must set class by this value.
+                // "\d" - digit; "+" - 1 or more
+                return /\d+/.test(value);
+            },
+        },
+    ],
+    'zIndex',
+    'order',
+    /**
+     * Shadow
+     */
+    'shadowColor',
+    'shadowOffset',
+    'shadowOpacity',
+    'shadowRadius',
+    /**
+     * Transform
+     */
+    'transform',
+    /**
+     * View
+     */
+    'background',
+    'backgroundColor',
+    'borderBottomColor',
+    'borderBottomEndRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderBottomStartRadius',
+    'borderColor',
+    'borderCurve',
+    'borderEndColor',
+    'borderLeftColor',
+    'borderRadius',
+    'borderRightColor',
+    'borderStartColor',
+    'borderStyle',
+    'borderTopColor',
+    'borderTopEndRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderTopStartRadius',
+    'opacity',
+    'cursor',
+    /**
+     * Text
+     */
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecorationColor',
+    'textDecorationLine',
+    'textDecorationStyle',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+    'verticalAlign',
+    'writingMode',
+    'whiteSpace',
+    /**
+     * Image
+     */
+    'overlayColor',
+    'resizeMode',
+    'tintColor',
+    'objectFit',
+    'objectPosition',
+    /**
+     * Grid
+     */
+    'gridTemplateColumns',
+    'gridArea',
+    'gridAutoColumns',
+    'gridAutoFlow',
+    'gridAutoRows',
+    'gridTemplate',
+    'gridTemplateAreas',
+    'gridTemplateRows',
+    'gridColumn',
+    'gridColumnStart',
+    'gridColumnEnd',
+    'gridColumnGap',
+    'gridRow',
+    'gridRowStart',
+    'gridRowEnd',
+    'gridRowGap',
+    /**
+     * Filter
+     */
+    'backdropFilter',
+    /**
+     * Transition
+     */
+    'transition',
+    'transitionBehavior',
+    'transitionDelay',
+    'transitionDuration',
+    'transitionProperty',
+    'transitionTimingFunction',
+    /**
+     * Control
+     */
+    'pointerEvents',
+];
+
+exports.default = styleAttributes;

package/dist/cjs/hooks/useStyles/useStyles.js

@@ -1 +1,224 @@
-"use strict";var e=require("react"),t=require("lodash/camelCase"),r=require("lodash/maxBy"),i=require("lodash/upperFirst");require("../../context/Notifications.js");var s=require("../../context/UIContext.js");require("../../context/UrlAssetPrefix.js");var o=require("./styleAttributes.js"),n=require("./styleAttributes.helpers.js");require("react/jsx-runtime"),require("uuid"),require("@itcase/common"),require("../useMediaQueries/useMediaQueries.js"),require("react-responsive"),require("../../utils/setViewportProperty.js");const l=(e,t)=>t.reduce((e,t)=>e.endsWith(i(t))?e.replace(i(t),""):e,e),a=new Map,c=(e,t="")=>{const i=`${e}_${t}`;if(a.has(i))return a.get(i);const s=o.default.filter(r=>{if(Array.isArray(r)){const i=r[0],s=r[1]||{};return!!e.startsWith(i)&&(!s.validate||s.validate(t))}return e.startsWith(String(r))}),l=r(s,e=>n.getStyleAttributeKey(e).length),c=n.getStyleAttributeKey(l);return a.set(i,c),c};exports.useStyles=function(r){const{deviceCurrentMainType:o,deviceCurrentType:n,deviceTypesList:a}=s.useUserDeviceContext(),u=e.useMemo(()=>Object.entries(r).reduce((e,[t,r])=>(c(t,r)&&(e[t]=r),e),{}),[r]);return e.useMemo(()=>{const e={};for(const[s,d]of Object.entries(u)){let u=null;const p=c(s,d),f=s.toLowerCase().endsWith(n.toLowerCase()),y=l(s.replace(p,""),a),q=t(y)||"styles";if(e[q]||(e[q]={}),f)u=d;else{const t=`${p}${y}`,s=`${t}${i(o)}`,n=r[s]||r[t];let l=e[q][p];if(t.includes("Horizontal")){const t=p.replace("Horizontal","Left");l=e[q][t]}else if(t.includes("Vertical")){const t=p.replace("Vertical","Top");l=e[q][t]}l||(u=n)}if(u){if(/\D/.test(u)){if(/\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(u)){const e=u.split(" ").map(e=>{const t=e.replace(/[a-z]/gi,"");return`${8*parseFloat(t)}px`},[]);u=e.join(" ")}}else{["flexGrow","gridColumn","gridColumnEnd","gridColumnStart","gridRow","gridRowEnd","gridRowStart","opacity","order","zIndex"].includes(p)||(u=`${u}px`)}if(p.includes("Horizontal")){const t=p.replace("Horizontal","Right"),r=p.replace("Horizontal","Left"),i=u.split(" "),s=i[0],o=i[1]||i[0];e[q][t]=s,e[q][r]=o}else if(p.includes("Vertical")){const t=p.replace("Vertical","Top"),r=p.replace("Vertical","Bottom"),i=u.split(" "),s=i[0],o=i[1]||i[0];e[q][t]=s,e[q][r]=o}else e[q][p]=u}}return e},[o,n,...Object.values(u)])};
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var maxBy = require('lodash/maxBy');
+var upperFirst = require('lodash/upperFirst');
+require('../../context/Notifications.js');
+var UIContext = require('../../context/UIContext.js');
+require('../../context/UrlAssetPrefix.js');
+var styleAttributes = require('./styleAttributes.js');
+var styleAttributes_helpers = require('./styleAttributes.helpers.js');
+require('react/jsx-runtime');
+require('uuid');
+require('@itcase/common');
+require('../useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../../utils/setViewportProperty.js');
+
+/*
+ * rule of prop key:
+ *
+ * first is style     second is div target  third is device
+ * paddingHorizontal  GridInnerWrapper      MobileNormal
+ *
+ * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+ */
+function useStyles(props) {
+    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = UIContext.useUserDeviceContext();
+    const propsStyleAttributes = React.useMemo(() => {
+        const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            if (styleAttributeKey) {
+                result[propKey] = propValue;
+            }
+            return result;
+        }, {});
+        return styles;
+        // "props" object maybe big and frequently changing
+    }, [props]);
+    const collectedStyles = React.useMemo(() => {
+        const resultStylesGroups = {};
+        for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
+            let value = null;
+            const styleAttributeKey = getTargetStyleAttributeKey(propKey, propValue);
+            const isStyleForCurrentDevice = propKey
+                .toLowerCase()
+                .endsWith(deviceCurrentType.toLowerCase());
+            // e.g. "GridWrapperInner"
+            const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''), deviceTypesList);
+            const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
+            if (!resultStylesGroups[targetElementGroupKey]) {
+                resultStylesGroups[targetElementGroupKey] = {};
+            }
+            if (isStyleForCurrentDevice) {
+                value = propValue;
+            }
+            else {
+                const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
+                const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${upperFirst(deviceCurrentMainType)}`;
+                const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
+                let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
+                if (propKeyWithOutDeviceType.includes('Horizontal')) {
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyLeft];
+                }
+                else if (propKeyWithOutDeviceType.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    currentValue =
+                        resultStylesGroups[targetElementGroupKey][keyTop];
+                }
+                if (!currentValue) {
+                    value = defaultValue;
+                }
+            }
+            if (value) {
+                // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
+                const isValueHasUnit = /\D/.test(value);
+                // If value has some unit
+                if (isValueHasUnit) {
+                    // Check value on our custom "m"(module) unit
+                    /** Pattern for:
+                     * 1m
+                     * 1.5m
+                     * 1m 1m 1.5m
+                     * 0 0 1m 1m
+                     */
+                    const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
+                    // If value has module unit
+                    if (isValueHasModuleUnit) {
+                        /** Order for shorthand properties:
+                         *   top
+                         *   right
+                         *   bottom
+                         *   left
+                         * or:
+                         *   top
+                         *   right and left
+                         *   bottom
+                         * or:
+                         *   top and bottom
+                         *   right and left
+                         */
+                        const valuePxPartsList = value
+                            .split(' ')
+                            .map((valuePart) => {
+                            const valueModule = valuePart.replace(/[a-z]/gi, '');
+                            const valuePx = parseFloat(valueModule) * 8;
+                            return `${valuePx}px`;
+                        }, []);
+                        value = valuePxPartsList.join(' ');
+                    }
+                }
+                else {
+                    // Some properties doesn't have any units
+                    const ignorePX = [
+                        'flexGrow',
+                        'gridColumn',
+                        'gridColumnEnd',
+                        'gridColumnStart',
+                        'gridRow',
+                        'gridRowEnd',
+                        'gridRowStart',
+                        'opacity',
+                        'order',
+                        'zIndex',
+                    ].includes(styleAttributeKey);
+                    if (!ignorePX) {
+                        // Add px to non-unit value
+                        value = `${value}px`;
+                    }
+                }
+                if (styleAttributeKey.includes('Horizontal')) {
+                    const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
+                    const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+                    const valuePartsList = value.split(' ');
+                    const valueRight = valuePartsList[0];
+                    const valueLeft = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
+                    resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
+                }
+                else if (styleAttributeKey.includes('Vertical')) {
+                    const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+                    const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
+                    const valuePartsList = value.split(' ');
+                    const valueTop = valuePartsList[0];
+                    const valueBottom = valuePartsList[1] || valuePartsList[0];
+                    resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
+                    resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
+                }
+                else {
+                    resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
+                }
+            }
+        }
+        return resultStylesGroups;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        deviceCurrentMainType,
+        deviceCurrentType,
+        ...Object.values(propsStyleAttributes),
+    ]);
+    return collectedStyles;
+}
+const removeDeviceType = (originalKey, deviceTypesList) => {
+    // Remove "mobile"/"tablet"/"desktop"
+    const withOutDeviceType = deviceTypesList.reduce((cleanKey, deviceType) => {
+        if (cleanKey.endsWith(upperFirst(deviceType))) {
+            return cleanKey.replace(upperFirst(deviceType), '');
+        }
+        return cleanKey;
+    }, originalKey);
+    return withOutDeviceType;
+};
+const targetStyleAttributeKeyCache = new Map();
+// This function is pure and it does a lot of useless work.
+// We can achieve huge cache hit rate by memoizing it.
+const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
+    const cacheKey = `${styleKey}_${styleValue}`;
+    if (targetStyleAttributeKeyCache.has(cacheKey)) {
+        return targetStyleAttributeKeyCache.get(cacheKey);
+    }
+    // Collect list of possible styles for propKey. e.g:
+    // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+    const possibleStyleAttributesList = styleAttributes.default.filter((styleAttribute) => {
+        // Attribute can be array with key on first position and params on second
+        if (Array.isArray(styleAttribute)) {
+            // First item always attribute key (e.g. border, width, etc)
+            const styleAttributeKey = styleAttribute[0];
+            // Second item always params with some settings or methods
+            const styleAttributeParams = styleAttribute[1] || {};
+            // If is target attribute key
+            if (styleKey.startsWith(styleAttributeKey)) {
+                // If target attribute params has validate method
+                if (styleAttributeParams.validate) {
+                    // Return validation result for target attribute
+                    return styleAttributeParams.validate(styleValue);
+                }
+                else {
+                    // Or always add to list
+                    return true;
+                }
+            }
+            else {
+                // Else ignore
+                return false;
+            }
+        }
+        else {
+            // If is target attribute
+            return styleKey.startsWith(String(styleAttribute));
+        }
+    });
+    // Get longest style key (e.g. "borderLeftWidth")
+    const targetStyleAttribute = maxBy(possibleStyleAttributesList, (styleAttribute) => {
+        const key = styleAttributes_helpers.getStyleAttributeKey(styleAttribute);
+        return key.length;
+    });
+    const styleAttributeKey = styleAttributes_helpers.getStyleAttributeKey(targetStyleAttribute);
+    targetStyleAttributeKeyCache.set(cacheKey, styleAttributeKey);
+    return styleAttributeKey;
+};
+
+exports.useStyles = useStyles;

package/dist/cjs/hooks/useViewportFix.js

@@ -1 +1,43 @@
-"use strict";var e=require("react");exports.useViewportFix=function(){e.useEffect(()=>{const e=()=>{const e=.01*window.innerHeight;document.documentElement.style.setProperty("--vh",`${e}px`)};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}},[])};
+'use strict';
+
+var React = require('react');
+
+function useViewportFix() {
+    React.useEffect(() => {
+        // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+        const setViewportProperty = () => {
+            // "vh" unit is equal to 1% of the height of the initial containing block
+            // https://www.w3.org/R/css-values-3/#viewport-relative-lengths
+            const vh = window.innerHeight * 0.01;
+            /** NOTE:
+             * In JavaScript, you can always get the value of the current viewport
+             * by using the global variable window.innerHeight. This value takes
+             * the browser’s interface into account and is updated when its
+             * visibility changes. The trick is to store the viewport value
+             * in a CSS variable and apply that to the element instead of the vh unit.
+             * Let’s say our CSS custom variable is --vh for this example.
+             * That means we will want to apply it in our CSS like this:
+             * ```
+             * .my-element {
+             *   height: 100vh; (Fallback for browsers that do not support Custom Properties)
+             *   height: calc(var(--vh, 1vh) * 100);
+             * }
+             * ```
+             * We told JavaScript to grab the height of the viewport and then
+             * drilled it down into 1/100th of that total so we have a value
+             * to assign as our viewport height unit value.
+             * Then we politely asked JS to create the CSS variable "--vh" at the ":root":
+             */
+            document.documentElement.style.setProperty('--vh', `${vh}px`);
+        };
+        // Update the value of "--vh" after render
+        setViewportProperty();
+        // Update the value of "--vh" by listening to the window resize event
+        window.addEventListener('resize', setViewportProperty);
+        return () => {
+            window.removeEventListener('resize', setViewportProperty);
+        };
+    }, []);
+}
+
+exports.useViewportFix = useViewportFix;

package/dist/cjs/utils/index.js

@@ -1 +1,9 @@
-"use strict";var e=require("./mergeAppearanceKeys.js"),r=require("./setViewportProperty.js");exports.mergeAppearanceKeys=e.mergeAppearanceKeys,exports.setViewportProperty=r.setViewportProperty;
+'use strict';
+
+var mergeAppearanceKeys = require('./mergeAppearanceKeys.js');
+var setViewportProperty = require('./setViewportProperty.js');
+
+
+
+exports.mergeAppearanceKeys = mergeAppearanceKeys.mergeAppearanceKeys;
+exports.setViewportProperty = setViewportProperty.setViewportProperty;

package/dist/cjs/utils/mergeAppearanceKeys.js

@@ -1 +1,18 @@
-"use strict";exports.mergeAppearanceKeys=(...e)=>{const r=e.map(e=>e?.trim()).filter(Boolean);if(r.length<2)return r[0]??"";return Array.from(new Set(r)).join(" ")};
+'use strict';
+
+/**
+ * @example
+ * mergeAppearanceKeys(' ', '1', undefined, '2', '1') === '1 2'
+ */
+const mergeAppearanceKeys = (...appearances) => {
+    const trimmedAppearances = appearances
+        .map((appearance) => appearance?.trim())
+        .filter(Boolean);
+    if (trimmedAppearances.length < 2) {
+        return trimmedAppearances[0] ?? '';
+    }
+    const uniqueAppearances = Array.from(new Set(trimmedAppearances));
+    return uniqueAppearances.join(' ');
+};
+
+exports.mergeAppearanceKeys = mergeAppearanceKeys;

package/dist/cjs/utils/setViewportProperty.js

@@ -1 +1,8 @@
-"use strict";exports.setViewportProperty=()=>{const e=.01*window.innerHeight;document.documentElement.style.setProperty("--vh",`${e}px`)};
+'use strict';
+
+const setViewportProperty = () => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+};
+
+exports.setViewportProperty = setViewportProperty;