@itcase/ui-core 1.10.46 → 1.10.48

package/dist/cjs/hooks/useActiveClasses/useActiveClasses.js

@@ -1 +1,60 @@
-"use strict";var e=require("clsx"),s=require("./useActiveClasses.helpers.js");exports.useActiveClasses=t=>{const{propsGenerator:r,suffixes:i=[],isActive:a,isDisabled:o}=t,c=[];Object.entries(s.CLASS_RULES).forEach(([e,t])=>{const i=s.toKebabCase(e);t.forEach(({key:e,stateFn:t})=>{const n=r[e];if(!n)return;if(t){if(!t({isActive:a,isDisabled:o}))return}const f=s.formatState(e);c.push(`${i}${f}_${n}`)})});return{rootClasses:e(c),suffixClasses:i.reduce((t,i)=>{const c=[];Object.entries(s.CLASS_RULES).forEach(([e,t])=>{t.forEach(({key:t,stateFn:n})=>{const f=t.replace(e,""),u=e+i+f,l=r[u];if(!l)return;if(n){if(!n({isActive:a,isDisabled:o}))return}const C=s.formatState(u),b=s.toKebabCase(e);c.push(`${b}${C}_${l}`)})});return t["HTMLContent"===i?"htmlContent":i[0].toLowerCase()+i.slice(1)]=e(c),t},{})}};
+'use strict';
+
+var clsx = require('clsx');
+var useActiveClasses_helpers = require('./useActiveClasses.helpers.js');
+
+const useActiveClasses = (params) => {
+    const { propsGenerator, suffixes = [], isActive, isDisabled } = params;
+    const rootClassesArray = [];
+    Object.entries(useActiveClasses_helpers.CLASS_RULES).forEach(([rulesName, rules]) => {
+        const kebabRuleName = useActiveClasses_helpers.toKebabCase(rulesName);
+        rules.forEach(({ key, stateFn }) => {
+            const value = propsGenerator[key];
+            if (!value) {
+                return;
+            }
+            if (stateFn) {
+                const active = stateFn({ isActive, isDisabled });
+                if (!active) {
+                    return;
+                }
+            }
+            const stateName = useActiveClasses_helpers.formatState(key);
+            rootClassesArray.push(`${kebabRuleName}${stateName}_${value}`);
+        });
+    });
+    const rootClasses = clsx(rootClassesArray);
+    const suffixClasses = suffixes.reduce((acc, suffix) => {
+        const classes = [];
+        Object.entries(useActiveClasses_helpers.CLASS_RULES).forEach(([rulesName, rules]) => {
+            rules.forEach(({ key, stateFn }) => {
+                const withoutPrefixRulesName = key.replace(rulesName, '');
+                const propKey = rulesName + suffix + withoutPrefixRulesName;
+                const value = propsGenerator[propKey];
+                if (!value) {
+                    return;
+                }
+                if (stateFn) {
+                    const active = stateFn({ isActive, isDisabled });
+                    if (!active) {
+                        return;
+                    }
+                }
+                const state = useActiveClasses_helpers.formatState(propKey);
+                const kebabName = useActiveClasses_helpers.toKebabCase(rulesName);
+                classes.push(`${kebabName}${state}_${value}`);
+            });
+        });
+        const suffixKey = suffix === 'HTMLContent'
+            ? 'htmlContent'
+            : (suffix[0].toLowerCase() + suffix.slice(1));
+        acc[suffixKey] = clsx(classes);
+        return acc;
+    }, {});
+    return {
+        rootClasses,
+        suffixClasses,
+    };
+};
+
+exports.useActiveClasses = useActiveClasses;

package/dist/cjs/hooks/useAppearanceConfig/index.js

@@ -1 +1,8 @@
-"use strict";var e=require("./useAppearanceConfig.js");require("react"),exports.useAppearanceConfig=e.useAppearanceConfig;
+'use strict';
+
+var useAppearanceConfig = require('./useAppearanceConfig.js');
+require('react');
+
+
+
+exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;

package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1 +1,30 @@
-"use strict";var a=require("react");exports.useAppearanceConfig=(e,r,p)=>a.useMemo(()=>{if(e){const a=e.split(" ").reduce((a,e)=>Object.assign(a,r?.appearance?.[e]),{});return p&&(r?.appearance?.disabled||r?.appearance?.disabledPrimary)&&Object.assign(a,r?.appearance?.disabled||r?.appearance?.disabledPrimary),a}return p?r?.appearance?.disabled||r?.appearance?.disabledPrimary:{}},[e,r?.appearance,p]);
+'use strict';
+
+var React = require('react');
+
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = React.useMemo(() => {
+        if (appearance) {
+            const appearanceProps = appearance
+                .split(' ')
+                .reduce((resultConfig, appearanceKey) => {
+                return Object.assign(resultConfig, componentConfig?.appearance?.[appearanceKey]);
+            }, {});
+            if (isDisabled &&
+                (componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary)) {
+                Object.assign(appearanceProps, componentConfig?.appearance?.disabled ||
+                    componentConfig?.appearance?.disabledPrimary);
+            }
+            return appearanceProps;
+        }
+        if (isDisabled) {
+            return (componentConfig?.appearance?.disabled ||
+                componentConfig?.appearance?.disabledPrimary);
+        }
+        return {};
+    }, [appearance, componentConfig?.appearance, isDisabled]);
+    return appearanceConfig;
+};
+
+exports.useAppearanceConfig = useAppearanceConfig;

package/dist/cjs/hooks/useDevicePropsGenerator/index.js

@@ -1 +1,23 @@
-"use strict";var e=require("./useDevicePropsGenerator.js");require("react"),require("lodash/camelCase"),require("lodash/castArray"),require("lodash/upperFirst"),require("../../context/Notifications.js"),require("react/jsx-runtime"),require("uuid"),require("@itcase/common"),require("../../context/UIContext.js"),require("../useMediaQueries/useMediaQueries.js"),require("react-responsive"),require("../../utils/setViewportProperty.js"),require("../../context/UrlAssetPrefix.js"),require("../useStyles/styleAttributes.js"),require("../useStyles/styleAttributes.helpers.js"),require("lodash/maxBy"),exports.useDevicePropsGenerator=e.useDevicePropsGenerator;
+'use strict';
+
+var useDevicePropsGenerator = require('./useDevicePropsGenerator.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('../../context/Notifications.js');
+require('react/jsx-runtime');
+require('uuid');
+require('@itcase/common');
+require('../../context/UIContext.js');
+require('../useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../../utils/setViewportProperty.js');
+require('../../context/UrlAssetPrefix.js');
+require('../useStyles/styleAttributes.js');
+require('../useStyles/styleAttributes.helpers.js');
+require('lodash/maxBy');
+
+
+
+exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;

package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.js

@@ -1 +1,2 @@
-"use strict";
+'use strict';
+

package/dist/cjs/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1 +1,236 @@
-"use strict";var e=require("react"),r=require("lodash/camelCase"),t=require("lodash/castArray"),s=require("lodash/upperFirst");require("../../context/Notifications.js");var u=require("../../context/UIContext.js");require("../../context/UrlAssetPrefix.js");var n=require("../useStyles/styleAttributes.js"),i=require("../useStyles/styleAttributes.helpers.js");require("lodash/maxBy"),require("react/jsx-runtime"),require("uuid"),require("@itcase/common"),require("../useMediaQueries/useMediaQueries.js"),require("react-responsive"),require("../../utils/setViewportProperty.js");const o=[/([A-Z])/g,"-$1"],c=String(o),a=new Set(n.default.map(e=>i.getStyleAttributeKey(e)));exports.useDevicePropsGenerator=function(n,i){const{deviceCurrentMainType:l}=u.useUserDeviceContext(),p=e.useRef(n);p.current=n;const f=e.useRef(l);f.current=l;const g=e.useRef(i);g.current=i;const q=e.useMemo(()=>new Map,[i,l]),y=e.useRef(q);return y.current=q,e.useMemo(()=>{let e,u;const n={getProp(r){const t=f.current;e!==t&&(e=t,u=s(t));const n=r+u;return p.current[n]||p.current[r]||g.current?.[n]||g.current?.[r]},getClassName(e,s){let u="",n=o;s&&(u=s.prefix??"",n=s.replace??o);const i=this.getProp(e);if(!i)return"";const l=`${u}_${n===o?c:String(n)}_${e}_${i}`,p=y.current.get(l);if(void 0!==p)return p;if(a.has(e)&&("number"==typeof i||"string"==typeof i&&!isNaN(parseFloat(i)))){const e="";return y.current.set(l,e),e}let f=String(i);if(f.includes(".")||(f=r(f)),n){const e=t(n);f=f.replace(e[0],e[1]||"")}const g=`${u}${f}`.toLowerCase();return y.current.set(l,g),g}},i={get(e,r,t,...s){if("string"==typeof r){if("getProp"!==r&&"getClassName"!==r){if(r.endsWith("Class")){const e=r.substring(0,r.lastIndexOf("Class"));return n.getClassName(e)}return n.getProp(r)}return Reflect.get(e,r,t,...s)}return r}};return new Proxy(n,i)},[])};
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var castArray = require('lodash/castArray');
+var upperFirst = require('lodash/upperFirst');
+require('../../context/Notifications.js');
+var UIContext = require('../../context/UIContext.js');
+require('../../context/UrlAssetPrefix.js');
+var styleAttributes = require('../useStyles/styleAttributes.js');
+var styleAttributes_helpers = require('../useStyles/styleAttributes.helpers.js');
+require('lodash/maxBy');
+require('react/jsx-runtime');
+require('uuid');
+require('@itcase/common');
+require('../useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../../utils/setViewportProperty.js');
+
+/* eslint-disable react-hooks/immutability */
+/* eslint-disable react-hooks/refs */
+function useDevicePropsGenerator(componentProps, appearanceConfig) {
+    /** Get or generate(classname) a prop depending on the user's device.
+     * Props:
+     *   - "componentProps" - original "props" from component
+     *   - "appearanceConfig" - special appearance dictionary with styles presets
+     *
+     * Usage for create class value:
+     *   const appearanceConfig = (
+     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
+     *   )
+     *   const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+     *   ---------
+     *   const fillClass = propsGenerator.getClassName('fill')
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const fillClass = propsGenerator.getClassName('fill', { prefix: 'fill_' })
+     *   "fillClass" - is "fill_surface-secondary"
+     *   ---------
+     *   const fillClass = propsGenerator.fillClass
+     *   "fillClass" - is "surface-secondary"
+     *   ---------
+     *   const { fillClass } = propsGenerator
+     *   "fillClass" - is "surface-secondary"
+     *
+     * Usage for props value for device:
+     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize
+     *
+     *   "titleTextSize" - contain some value from props:
+     *     - titleTextSize
+     *     - titleTextSizeMobile
+     *     - titleTextSizeTablet
+     *     - titleTextSizeDesktop
+     *   ---------
+     **/
+    const { deviceCurrentMainType } = UIContext.useUserDeviceContext();
+    // if (isDevelopmentEnv && isClientEnv) {
+    //   if (window.__cache === undefined) {
+    //     window.__cache = {
+    //       reset: () => {
+    //         window.__cache.cache_creation_count = 0
+    //         window.__cache.proxy_field_access_count = 0
+    //         window.__cache.proxy_creation_count = 0
+    //         window.__cache.cache_miss_count = 0
+    //         window.__cache.cache_hit_count = 0
+    //         window.__cache.cache_early_avoid_count = 0
+    //       },
+    //       cache_creation_count: 0,
+    //       cache_early_avoid_count: 0,
+    //       cache_hit_count: 0,
+    //       cache_miss_count: 0,
+    //       proxy_creation_count: 0,
+    //       proxy_field_access_count: 0,
+    //     }
+    //   }
+    // }
+    // Used by proxy getter.
+    // Proxy getter does not care about reference of "componentProps" and
+    // "deviceCurrentMainType", because it always get actual value from these refs.
+    // We should not pass these values in proxy's dependency list.
+    // All we have to do is to update these refs on each render.
+    const propsRef = React.useRef(componentProps);
+    propsRef.current = componentProps;
+    const deviceCurrentMainTypeRef = React.useRef(deviceCurrentMainType);
+    deviceCurrentMainTypeRef.current = deviceCurrentMainType;
+    const appearanceConfigRef = React.useRef(appearanceConfig);
+    appearanceConfigRef.current = appearanceConfig;
+    // Store mutable cache.
+    // Cache will be reset on "appearanceConfig" or "deviceCurrentMainType" change.
+    const cachedClassValueMap = React.useMemo(() => {
+        // if (isDevelopmentEnv && isClientEnv) {
+        //   window.__cache.cache_creation_count += 1
+        // }
+        return new Map();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [appearanceConfig, deviceCurrentMainType]);
+    // Same as before, we need to keep track of updated value in stable reference.
+    const cachedClassValueMapRef = React.useRef(cachedClassValueMap);
+    cachedClassValueMapRef.current = cachedClassValueMap;
+    const devicePropsGenerator = React.useMemo(() => {
+        // if (isDevelopmentEnv && isClientEnv) {
+        //   window.__cache.proxy_creation_count += 1;
+        // }
+        let cachedDeviceType;
+        let cachedDeviceTypeUpperFirst;
+        const propsGenerator = {
+            getProp(propKey) {
+                const deviceType = deviceCurrentMainTypeRef.current;
+                if (cachedDeviceType !== deviceType) {
+                    cachedDeviceType = deviceType;
+                    cachedDeviceTypeUpperFirst = upperFirst(deviceType);
+                }
+                const propsForDeviceKey = propKey + cachedDeviceTypeUpperFirst;
+                let targetPropsValue = undefined;
+                if (propsForDeviceKey in propsRef.current) {
+                    // Value for device from props is first priority
+                    targetPropsValue = propsRef.current[propsForDeviceKey];
+                }
+                else if (propKey in propsRef.current) {
+                    // Value without device from props is second priority
+                    targetPropsValue = propsRef.current[propKey];
+                }
+                else if (appearanceConfigRef.current &&
+                    propsForDeviceKey in appearanceConfigRef.current) {
+                    // Value for device from appearance config is third priority
+                    targetPropsValue = appearanceConfigRef.current[propsForDeviceKey];
+                }
+                else if (appearanceConfigRef.current &&
+                    propKey in appearanceConfigRef.current) {
+                    // Value without device from appearance config is last priority
+                    targetPropsValue = appearanceConfigRef.current[propKey];
+                }
+                // prettier-ignore
+                // const targetPropsValue = (
+                //   // Value for device from props is first priority
+                //   propsRef.current[propsForDeviceKey] ||
+                //   // Value without device from props is second priority
+                //   propsRef.current[propKey] ||
+                //   // Value for device from appearance config is third priority
+                //   appearanceConfigRef.current?.[propsForDeviceKey] ||
+                //   // Value without device from appearance config is last priority
+                //   appearanceConfigRef.current?.[propKey]
+                // )
+                return targetPropsValue;
+            },
+            // eslint-disable-next-line perfectionist/sort-objects
+            getClassName(propKey, params) {
+                let prefix = '';
+                let replace = defaultReplacePattern;
+                if (params) {
+                    prefix = params.prefix ?? '';
+                    replace = params.replace ?? defaultReplacePattern;
+                }
+                const targetClassValue = this.getProp(propKey);
+                if (!targetClassValue) {
+                    // if (isClientEnv && isDevelopmentEnv) {
+                    //   window.__cache.cache_early_avoid_count += 1
+                    // }
+                    // If target key not exists in props and appearance config - return empty class
+                    return '';
+                }
+                const stringifiedReplace = replace === defaultReplacePattern
+                    ? defaultStringifiedReplacePattern
+                    : String(replace);
+                const cacheKey = `${prefix}_${stringifiedReplace}_${propKey}_${targetClassValue}`;
+                const cachedClassValue = cachedClassValueMapRef.current.get(cacheKey);
+                if (cachedClassValue !== undefined) {
+                    // if (isClientEnv && isDevelopmentEnv) {
+                    //   window.__cache.cache_hit_count += 1
+                    // }
+                    return cachedClassValue;
+                }
+                // if (isClientEnv && isDevelopmentEnv) {
+                //   window.__cache.cache_miss_count += 1
+                // }
+                if (styleAttributeKeysSet.has(propKey) &&
+                    (typeof targetClassValue === 'number' ||
+                        (typeof targetClassValue === 'string' &&
+                            !isNaN(parseFloat(targetClassValue))))) {
+                    const newClassValue = '';
+                    cachedClassValueMapRef.current.set(cacheKey, newClassValue);
+                    return newClassValue;
+                }
+                let cleanClassValue = String(targetClassValue);
+                if (!cleanClassValue.includes('.')) {
+                    cleanClassValue = camelCase(cleanClassValue);
+                }
+                if (replace) {
+                    const replaceList = castArray(replace);
+                    cleanClassValue = cleanClassValue.replace(replaceList[0], 
+                    // @ts-expect-error
+                    replaceList[1] || '');
+                }
+                const newClassValue = `${prefix}${cleanClassValue}`.toLowerCase();
+                cachedClassValueMapRef.current.set(cacheKey, newClassValue);
+                return newClassValue;
+            },
+        };
+        const generatorProxyHandler = {
+            get(target, propKey, receiver, ...args) {
+                if (typeof propKey === 'string') {
+                    // If object does not have the property being retrieved
+                    if (propKey !== 'getProp' && propKey !== 'getClassName') {
+                        // if (isClientEnv && isDevelopmentEnv) {
+                        //   window.__cache.proxy_field_access_count += 1
+                        // }
+                        // And property ended on "Class" keyword
+                        if (propKey.endsWith('Class')) {
+                            // prettier-ignore
+                            const shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
+                            // Return prop from props for device as formatted class name
+                            // prettier-ignore
+                            return propsGenerator.getClassName(shortProp);
+                        }
+                        // Return prop from props for device
+                        return propsGenerator.getProp(propKey);
+                    }
+                    // Return object property. Original "get".
+                    // @ts-expect-error
+                    return Reflect.get(target, propKey, receiver, ...args);
+                }
+                // In some cases, like in Chrome browser, sometime "prop" is not string.
+                // We return this object as is.
+                return propKey;
+            },
+        };
+        return new Proxy(propsGenerator, generatorProxyHandler);
+        // Proxy does not care about references, we can create proxy only once.
+    }, []);
+    return devicePropsGenerator;
+}
+const defaultReplacePattern = [/([A-Z])/g, '-$1'];
+const defaultStringifiedReplacePattern = String(defaultReplacePattern);
+const styleAttributeKeysSet = new Set(styleAttributes.default.map((attr) => styleAttributes_helpers.getStyleAttributeKey(attr)));
+
+exports.useDevicePropsGenerator = useDevicePropsGenerator;

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -1 +1,64 @@
-"use strict";var e=require("react"),r=require("lodash/camelCase"),s=require("lodash/castArray");require("../context/Notifications.js");var t=require("../context/UIContext.js");require("../context/UrlAssetPrefix.js"),require("react/jsx-runtime"),require("uuid"),require("@itcase/common"),require("./useMediaQueries/useMediaQueries.js"),require("react-responsive"),require("../utils/setViewportProperty.js"),exports.useDeviceTargetClass=function(i,u){const{prefix:o="",propsKey:a,replace:c=[/([A-Z])/g,"-$1"]}=u,{isMobile:n,isTablet:l,isDesktop:q}=t.useUserDeviceContext(),p=e.useMemo(()=>{const e=i[`${a}${(n?"Mobile":l&&"Tablet")||q&&"Desktop"||""}`],r=i[a];return e||r},[n,l,q,i,a]);return e.useMemo(()=>{if(p){let e=r(String(p));if(c){const r=s(c);e=e.replace(r[0],r[1]||"")}return`${o}${e}`.toLowerCase()}return null},[p,o,c])};
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var castArray = require('lodash/castArray');
+require('../context/Notifications.js');
+var UIContext = require('../context/UIContext.js');
+require('../context/UrlAssetPrefix.js');
+require('react/jsx-runtime');
+require('uuid');
+require('@itcase/common');
+require('./useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../utils/setViewportProperty.js');
+
+/** TODO:
+ * Hook is still used in "itcase-forms".
+ * Need replace with "useDevicePropsGenerator" and delete this.
+ */
+function useDeviceTargetClass(componentProps, hookProps) {
+  /** Generate a class depending on the user's device.
+   *
+   * Usage:
+   *  const sizeClass = useDeviceTargetClass(props, {
+   *    prefix: 'some-item_size_',
+   *    propsKey: 'size',
+   *  })
+   * Return: "some-item_size_m" (or "s", or "l", or something else)
+   *
+   * "componentProps" - "props" from component
+   * "hookProps" - special props for generating class
+   **/
+  const {
+    prefix = '',
+    propsKey,
+    replace = [/([A-Z])/g, '-$1']
+  } = hookProps;
+  const {
+    isMobile,
+    isTablet,
+    isDesktop
+  } = UIContext.useUserDeviceContext();
+  const targetClassValue = React.useMemo(() => {
+    // prettier-ignore
+    const deviceCurrentMainType = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+    const valueForDevice = componentProps[`${propsKey}${deviceCurrentMainType}`];
+    const valueDefault = componentProps[propsKey];
+    return valueForDevice || valueDefault;
+  }, [isMobile, isTablet, isDesktop, componentProps, propsKey]);
+  const targetClass = React.useMemo(() => {
+    if (targetClassValue) {
+      let cleanClassValue = camelCase(String(targetClassValue));
+      if (replace) {
+        const replaceList = castArray(replace);
+        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+      }
+      return `${prefix}${cleanClassValue}`.toLowerCase();
+    }
+    return null;
+  }, [targetClassValue, prefix, replace]);
+  return targetClass;
+}
+
+exports.useDeviceTargetClass = useDeviceTargetClass;

package/dist/cjs/hooks/useMediaQueries/index.js

@@ -1 +1,9 @@
-"use strict";var e=require("./useMediaQueries.js");require("react"),require("react-responsive"),exports.useMediaQueries=e.useMediaQueries;
+'use strict';
+
+var useMediaQueries = require('./useMediaQueries.js');
+require('react');
+require('react-responsive');
+
+
+
+exports.useMediaQueries = useMediaQueries.useMediaQueries;

package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js

@@ -1 +1,124 @@
-"use strict";var e=require("react"),i=require("react-responsive"),s={"mobile-tiny":"15em",tablet:"48em","desktop-small":"60em","desktop-huge":"160em"};const t="undefined"==typeof window;function o(e,i,s){return e?Boolean(i):s}exports.useMediaQueries=function(a={}){const l=!0===a.isMobile||!0===a.isTablet||!0===a.isDesktop,u=o(l,a.isMobile,i.useMediaQuery({minWidth:s["mobile-tiny"],maxWidth:s.tablet})||t&&Boolean(a.isMobile)),n=o(l,a.isTablet,i.useMediaQuery({minWidth:s.tablet,maxWidth:s["desktop-small"]})||t&&Boolean(a.isTablet)),d=o(l,a.isDesktop,i.useMediaQuery({minWidth:s["desktop-small"],maxWidth:s["desktop-super-huge"]})||t&&Boolean(a.isDesktop)),r=i.useMediaQuery({minWidth:s["desktop-huge"]});return e.useMemo(()=>({isMobile:u,isMobileHuge:u,isTablet:n,isDesktop:d,isDesktopMega:r}),[u,n,d,r])};
+'use strict';
+
+var React = require('react');
+var reactResponsive = require('react-responsive');
+
+var tablet = "48em";
+var mediaQueries = {
+	"mobile-tiny": "15em",
+	tablet: tablet,
+	"desktop-small": "60em",
+	"desktop-huge": "160em"
+};
+
+const isSSR = typeof window === 'undefined';
+function withUserDeviceOverride(hasOverride, userValue, matchedValue) {
+  return hasOverride ? Boolean(userValue) : matchedValue;
+}
+function useMediaQueries(userDevice = {}) {
+  const hasUserDeviceOverride = userDevice.isMobile === true || userDevice.isTablet === true || userDevice.isDesktop === true;
+  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
+  // prettier-ignore
+  const isMobile = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isMobile, reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['mobile-tiny'],
+    maxWidth: mediaQueries['tablet']
+  }) || isSSR && Boolean(userDevice.isMobile));
+  // const isMobileTiny = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-tiny'],
+  //   maxWidth: mediaQueries['mobile-small'],
+  // })
+  // const isMobileSmall = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-small'],
+  //   maxWidth: mediaQueries['mobile-medium'],
+  // })
+  // const isMobileMedium = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-medium'],
+  //   maxWidth: mediaQueries['mobile-normal'],
+  // })
+  // const isMobileNormal = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-normal'],
+  //   maxWidth: mediaQueries['mobile-large'],
+  // })
+  // const isMobileStandart = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-large'],
+  //   maxWidth: mediaQueries['mobile-extra-large'],
+  // })
+  // const isMobileLarge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-extra-large'],
+  //   maxWidth: mediaQueries['mobile-super-extra-large'],
+  // })
+  // const isMobileHuge = useMediaQuery({
+  //   minWidth: mediaQueries['mobile-super-extra-large'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // prettier-ignore
+  const isTablet = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isTablet, reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['tablet'],
+    maxWidth: mediaQueries['desktop-small']
+  }) || isSSR && Boolean(userDevice.isTablet));
+  // const isTabletSmall = useMediaQuery({
+  //   minWidth: mediaQueries['tablet-small'],
+  //   maxWidth: mediaQueries['tablet'],
+  // })
+  // const isTabletLarge = useMediaQuery({
+  //   minWidth: mediaQueries['tablet'],
+  //   maxWidth: mediaQueries['tablet-large'],
+  // })
+  // prettier-ignore
+  const isDesktop = withUserDeviceOverride(hasUserDeviceOverride, userDevice.isDesktop, reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-small'],
+    maxWidth: mediaQueries['desktop-super-huge']
+  }) || isSSR && Boolean(userDevice.isDesktop));
+  // const isDesktopSmall = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-small'],
+  //   maxWidth: mediaQueries['desktop-medium'],
+  // })
+  // const isDesktopMedium = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-medium'],
+  //   maxWidth: mediaQueries['desktop-normal'],
+  // })
+  // const isDesktopNormal = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-normal'],
+  //   maxWidth: mediaQueries['desktop-large'],
+  // })
+  // const isDesktopStandart = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-large'],
+  //   maxWidth: mediaQueries['desktop-extra-large'],
+  // })
+  // const isDesktopLarge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-extra-large'],
+  //   maxWidth: mediaQueries['desktop-super-extra-large'],
+  // })
+  // const isDesktopHuge = useMediaQuery({
+  //   minWidth: mediaQueries['desktop-super-extra-large'],
+  //   maxWidth: mediaQueries['desktop-huge'],
+  // })
+  const isDesktopMega = reactResponsive.useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  const deviceTypes = React.useMemo(() => ({
+    // isWarning,
+    isMobile: isMobile,
+    // isMobileTiny,
+    // isMobileSmall,
+    // isMobileMedium,
+    // isMobileNormal,
+    // isMobileStandart,
+    // isMobileLarge,
+    isMobileHuge: isMobile,
+    isTablet: isTablet,
+    // isTabletSmall,
+    // isTabletLarge,
+    isDesktop: isDesktop,
+    // isDesktopSmall,
+    // isDesktopMedium,
+    // isDesktopNormal,
+    // isDesktopStandart,
+    // isDesktopLarge,
+    // isDesktopHuge,
+    isDesktopMega: isDesktopMega
+  }), [isMobile, isTablet, isDesktop, isDesktopMega]);
+  return deviceTypes;
+}
+
+exports.useMediaQueries = useMediaQueries;

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

@@ -1 +1,23 @@
-"use strict";var e=require("./styleAttributes.helpers.js"),r=require("./useStyles.js");require("react"),require("lodash/camelCase"),require("lodash/maxBy"),require("lodash/upperFirst"),require("../../context/Notifications.js"),require("react/jsx-runtime"),require("uuid"),require("@itcase/common"),require("../../context/UIContext.js"),require("../useMediaQueries/useMediaQueries.js"),require("react-responsive"),require("../../utils/setViewportProperty.js"),require("../../context/UrlAssetPrefix.js"),require("./styleAttributes.js"),exports.getStyleAttributeKey=e.getStyleAttributeKey,exports.useStyles=r.useStyles;
+'use strict';
+
+var styleAttributes_helpers = require('./styleAttributes.helpers.js');
+var useStyles = require('./useStyles.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../../context/Notifications.js');
+require('react/jsx-runtime');
+require('uuid');
+require('@itcase/common');
+require('../../context/UIContext.js');
+require('../useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../../utils/setViewportProperty.js');
+require('../../context/UrlAssetPrefix.js');
+require('./styleAttributes.js');
+
+
+
+exports.getStyleAttributeKey = styleAttributes_helpers.getStyleAttributeKey;
+exports.useStyles = useStyles.useStyles;

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

@@ -1 +1,9 @@
-"use strict";exports.getStyleAttributeKey=t=>Array.isArray(t)?t[0]:t;
+'use strict';
+
+const getStyleAttributeKey = (targetStyleAttribute) => {
+    return Array.isArray(targetStyleAttribute)
+        ? targetStyleAttribute[0]
+        : targetStyleAttribute;
+};
+
+exports.getStyleAttributeKey = getStyleAttributeKey;

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

@@ -1 +1,2 @@
-"use strict";
+'use strict';
+