@itcase/ui-core 1.10.47 → 1.10.49

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1 +1,28 @@
-import{useMemo as a}from"react";const e=(e,r,p)=>a(()=>{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]);export{e as useAppearanceConfig};
+import { useMemo } from 'react';
+
+const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
+    const appearanceConfig = 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;
+};
+
+export { useAppearanceConfig };

package/dist/hooks/useDevicePropsGenerator/index.js

@@ -1 +1,17 @@
-export{useDevicePropsGenerator}from"./useDevicePropsGenerator.js";import"react";import"lodash/camelCase";import"lodash/castArray";import"lodash/upperFirst";import"../../context/Notifications.js";import"react/jsx-runtime";import"uuid";import"@itcase/common";import"../../context/UIContext.js";import"../useMediaQueries/useMediaQueries.js";import"react-responsive";import"../../utils/setViewportProperty.js";import"../../context/UrlAssetPrefix.js";import"../useStyles/styleAttributes.js";import"../useStyles/styleAttributes.helpers.js";import"lodash/maxBy";
+export { useDevicePropsGenerator } from './useDevicePropsGenerator.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import '../../context/Notifications.js';
+import 'react/jsx-runtime';
+import 'uuid';
+import '@itcase/common';
+import '../../context/UIContext.js';
+import '../useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../../utils/setViewportProperty.js';
+import '../../context/UrlAssetPrefix.js';
+import '../useStyles/styleAttributes.js';
+import '../useStyles/styleAttributes.helpers.js';
+import 'lodash/maxBy';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1 +1,234 @@
-import{useRef as t,useMemo as r}from"react";import e from"lodash/camelCase";import s from"lodash/castArray";import o from"lodash/upperFirst";import"../../context/Notifications.js";import{useUserDeviceContext as n}from"../../context/UIContext.js";import"../../context/UrlAssetPrefix.js";import i from"../useStyles/styleAttributes.js";import{getStyleAttributeKey as c}from"../useStyles/styleAttributes.helpers.js";import"lodash/maxBy";import"react/jsx-runtime";import"uuid";import"@itcase/common";import"../useMediaQueries/useMediaQueries.js";import"react-responsive";import"../../utils/setViewportProperty.js";function u(i,c){const{deviceCurrentMainType:u}=n(),l=t(i);l.current=i;const f=t(u);f.current=u;const g=t(c);g.current=c;const d=r(()=>new Map,[c,u]),y=t(d);y.current=d;return r(()=>{let t,r;const n={getProp(e){const s=f.current;t!==s&&(t=s,r=o(s));const n=e+r;return l.current[n]||l.current[e]||g.current?.[n]||g.current?.[e]},getClassName(t,r){let o="",n=p;r&&(o=r.prefix??"",n=r.replace??p);const i=this.getProp(t);if(!i)return"";const c=`${o}_${n===p?a:String(n)}_${t}_${i}`,u=y.current.get(c);if(void 0!==u)return u;if(m.has(t)&&("number"==typeof i||"string"==typeof i&&!isNaN(parseFloat(i)))){const t="";return y.current.set(c,t),t}let l=String(i);if(l.includes(".")||(l=e(l)),n){const t=s(n);l=l.replace(t[0],t[1]||"")}const f=`${o}${l}`.toLowerCase();return y.current.set(c,f),f}},i={get(t,r,e,...s){if("string"==typeof r){if("getProp"!==r&&"getClassName"!==r){if(r.endsWith("Class")){const t=r.substring(0,r.lastIndexOf("Class"));return n.getClassName(t)}return n.getProp(r)}return Reflect.get(t,r,e,...s)}return r}};return new Proxy(n,i)},[])}const p=[/([A-Z])/g,"-$1"],a=String(p),m=new Set(i.map(t=>c(t)));export{u as useDevicePropsGenerator};
+import { useRef, useMemo } from 'react';
+import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
+import upperFirst from 'lodash/upperFirst';
+import '../../context/Notifications.js';
+import { useUserDeviceContext } from '../../context/UIContext.js';
+import '../../context/UrlAssetPrefix.js';
+import styleAttributes from '../useStyles/styleAttributes.js';
+import { getStyleAttributeKey } from '../useStyles/styleAttributes.helpers.js';
+import 'lodash/maxBy';
+import 'react/jsx-runtime';
+import 'uuid';
+import '@itcase/common';
+import '../useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../../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 } = 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 = useRef(componentProps);
+    propsRef.current = componentProps;
+    const deviceCurrentMainTypeRef = useRef(deviceCurrentMainType);
+    deviceCurrentMainTypeRef.current = deviceCurrentMainType;
+    const appearanceConfigRef = useRef(appearanceConfig);
+    appearanceConfigRef.current = appearanceConfig;
+    // Store mutable cache.
+    // Cache will be reset on "appearanceConfig" or "deviceCurrentMainType" change.
+    const cachedClassValueMap = 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 = useRef(cachedClassValueMap);
+    cachedClassValueMapRef.current = cachedClassValueMap;
+    const devicePropsGenerator = 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: unknown = 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.map((attr) => getStyleAttributeKey(attr)));
+
+export { useDevicePropsGenerator };

package/dist/hooks/useDeviceTargetClass.js

@@ -1 +1,62 @@
-import{useMemo as t}from"react";import e from"lodash/camelCase";import r from"lodash/castArray";import"../context/Notifications.js";import{useUserDeviceContext as o}from"../context/UIContext.js";import"../context/UrlAssetPrefix.js";import"react/jsx-runtime";import"uuid";import"@itcase/common";import"./useMediaQueries/useMediaQueries.js";import"react-responsive";import"../utils/setViewportProperty.js";function i(i,s){const{prefix:p="",propsKey:m,replace:n=[/([A-Z])/g,"-$1"]}=s,{isMobile:a,isTablet:c,isDesktop:l}=o(),u=t(()=>{const t=i[`${m}${(a?"Mobile":c&&"Tablet")||l&&"Desktop"||""}`],e=i[m];return t||e},[a,c,l,i,m]);return t(()=>{if(u){let t=e(String(u));if(n){const e=r(n);t=t.replace(e[0],e[1]||"")}return`${p}${t}`.toLowerCase()}return null},[u,p,n])}export{i as useDeviceTargetClass};
+import { useMemo } from 'react';
+import camelCase from 'lodash/camelCase';
+import castArray from 'lodash/castArray';
+import '../context/Notifications.js';
+import { useUserDeviceContext } from '../context/UIContext.js';
+import '../context/UrlAssetPrefix.js';
+import 'react/jsx-runtime';
+import 'uuid';
+import '@itcase/common';
+import './useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../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
+  } = useUserDeviceContext();
+  const targetClassValue = 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 = 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;
+}
+
+export { useDeviceTargetClass };

package/dist/hooks/useMediaQueries/index.js

@@ -1 +1,3 @@
-export{useMediaQueries}from"./useMediaQueries.js";import"react";import"react-responsive";
+export { useMediaQueries } from './useMediaQueries.js';
+import 'react';
+import 'react-responsive';

package/dist/hooks/useMediaQueries/useMediaQueries.js

@@ -1 +1,122 @@
-import{useMemo as e}from"react";import{useMediaQuery as t}from"react-responsive";var i={"mobile-tiny":"15em",tablet:"48em","desktop-small":"60em","desktop-huge":"160em"};const o="undefined"==typeof window;function s(e,t,i){return e?Boolean(t):i}function l(l={}){const n=!0===l.isMobile||!0===l.isTablet||!0===l.isDesktop,a=s(n,l.isMobile,t({minWidth:i["mobile-tiny"],maxWidth:i.tablet})||o&&Boolean(l.isMobile)),m=s(n,l.isTablet,t({minWidth:i.tablet,maxWidth:i["desktop-small"]})||o&&Boolean(l.isTablet)),p=s(n,l.isDesktop,t({minWidth:i["desktop-small"],maxWidth:i["desktop-super-huge"]})||o&&Boolean(l.isDesktop)),d=t({minWidth:i["desktop-huge"]});return e(()=>({isMobile:a,isMobileHuge:a,isTablet:m,isDesktop:p,isDesktopMega:d}),[a,m,p,d])}export{l as useMediaQueries};
+import { useMemo } from 'react';
+import { useMediaQuery } from '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, 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, 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, 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 = useMediaQuery({
+    minWidth: mediaQueries['desktop-huge']
+  });
+  const deviceTypes = 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;
+}
+
+export { useMediaQueries };

package/dist/hooks/useStyles/index.js

@@ -1 +1,16 @@
-export{getStyleAttributeKey}from"./styleAttributes.helpers.js";export{useStyles}from"./useStyles.js";import"react";import"lodash/camelCase";import"lodash/maxBy";import"lodash/upperFirst";import"../../context/Notifications.js";import"react/jsx-runtime";import"uuid";import"@itcase/common";import"../../context/UIContext.js";import"../useMediaQueries/useMediaQueries.js";import"react-responsive";import"../../utils/setViewportProperty.js";import"../../context/UrlAssetPrefix.js";import"./styleAttributes.js";
+export { getStyleAttributeKey } from './styleAttributes.helpers.js';
+export { useStyles } from './useStyles.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../../context/Notifications.js';
+import 'react/jsx-runtime';
+import 'uuid';
+import '@itcase/common';
+import '../../context/UIContext.js';
+import '../useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../../utils/setViewportProperty.js';
+import '../../context/UrlAssetPrefix.js';
+import './styleAttributes.js';

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

@@ -1 +1,7 @@
-const r=r=>Array.isArray(r)?r[0]:r;export{r as getStyleAttributeKey};
+const getStyleAttributeKey = (targetStyleAttribute) => {
+    return Array.isArray(targetStyleAttribute)
+        ? targetStyleAttribute[0]
+        : targetStyleAttribute;
+};
+
+export { getStyleAttributeKey };