@itcase/ui-core 1.10.77 → 1.10.79

package/dist/cjs/context/Notifications/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var Notifications = require('./Notifications.js');
+require('react/jsx-runtime');
+require('react');
+require('uuid');
+require('@itcase/common');
+
+
+
+exports.NotificationsProvider = Notifications.NotificationsProvider;
+exports.statusToAppearanceList = Notifications.statusToAppearanceList;
+exports.useNotifications = Notifications.useNotifications;
+exports.useNotificationsAPI = Notifications.useNotificationsAPI;

package/dist/cjs/context/{UIContext.js → UIProvider/UIProvider.js}

@@ -4,18 +4,12 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var camelCase = require('lodash/camelCase');
-var useMediaQueries = require('../hooks/useMediaQueries/useMediaQueries.js');
-var setViewportProperty = require('../utils/setViewportProperty.js');
+var useMediaQueries = require('../../hooks/useMediaQueries/useMediaQueries.js');
+var setViewportProperty = require('../../utils/setViewportProperty.js');
+var UserDeviceContext = require('../UserDeviceContext/UserDeviceContext.js');
+var UserDeviceContext_helpers = require('../UserDeviceContext/UserDeviceContext.helpers.js');
 require('react-responsive');
 
-const UserDeviceContext = React.createContext({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    deviceCurrentMainType: '',
-    deviceCurrentType: '',
-    deviceTypesList: [],
-});
 const UIProvider = React.memo(function UIProvider(props) {
     const { userDeviceState = {}, children } = props;
     /** NOTE:
@@ -27,10 +21,11 @@ const UIProvider = React.memo(function UIProvider(props) {
      */
     const allDevicesTypes = useMediaQueries.useMediaQueries(userDeviceState);
     const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
-    const deviceCurrentMainType = (isMobile && 'mobile') ||
-        (isTablet && 'tablet') ||
-        (isDesktop && 'desktop') ||
-        '';
+    const deviceCurrentMainType = UserDeviceContext_helpers.getDeviceMainTypeFromFlags({
+        isMobile: isMobile,
+        isTablet: isTablet,
+        isDesktop: isDesktop,
+    });
     const [deviceCurrentType, deviceTypesList] = React.useMemo(() => {
         const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
         // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
@@ -59,18 +54,13 @@ const UIProvider = React.memo(function UIProvider(props) {
         deviceTypesList,
     ]);
     React.useEffect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
         setViewportProperty.setViewportProperty();
         window.addEventListener('resize', setViewportProperty.setViewportProperty);
     }, []);
-    return (jsxRuntime.jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
+    return (jsxRuntime.jsx(UserDeviceContext.UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
-function useUserDeviceContext() {
-    const context = React.useContext(UserDeviceContext);
-    if (!context) {
-        throw new Error('useUserDeviceContext is not defined');
-    }
-    return context;
-}
 
 exports.UIProvider = UIProvider;
-exports.useUserDeviceContext = useUserDeviceContext;

package/dist/cjs/context/UIProvider/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var UIProvider = require('./UIProvider.js');
+require('react/jsx-runtime');
+require('react');
+require('lodash/camelCase');
+require('../../hooks/useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../../utils/setViewportProperty.js');
+require('../UserDeviceContext/UserDeviceContext.js');
+require('../UserDeviceContext/UserDeviceContext.helpers.js');
+
+
+
+exports.UIProvider = UIProvider.UIProvider;

package/dist/cjs/context/UIProviderApp/UIProviderApp.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var UserDeviceContext = require('../UserDeviceContext/UserDeviceContext.js');
+
+const appUserDeviceState = {
+    isMobile: true,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: 'mobile',
+    deviceCurrentType: 'mobile',
+    deviceTypesList: ['mobile'],
+};
+const UIProviderApp = React.memo(function UIProviderApp(props) {
+    const { children } = props;
+    return (jsxRuntime.jsx(UserDeviceContext.UserDeviceContext.Provider, { value: appUserDeviceState, children: children }));
+});
+
+exports.UIProviderApp = UIProviderApp;

package/dist/cjs/context/UIProviderApp/index.js

@@ -0,0 +1,11 @@
+'use strict';
+
+var UserDeviceContext = require('../UserDeviceContext/UserDeviceContext.js');
+var UIProviderApp = require('./UIProviderApp.js');
+require('react');
+require('react/jsx-runtime');
+
+
+
+exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
+exports.UIProviderApp = UIProviderApp.UIProviderApp;

package/dist/cjs/context/UrlAssetPrefix/index.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var UrlAssetPrefix = require('./UrlAssetPrefix.js');
+require('react/jsx-runtime');
+require('react');
+
+
+
+exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
+exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;

package/dist/cjs/context/UserDeviceContext/UserDeviceContext.helpers.js

@@ -0,0 +1,16 @@
+'use strict';
+
+function getDeviceMainTypeFromFlags(userDeviceState) {
+    if (userDeviceState?.isMobile) {
+        return 'mobile';
+    }
+    if (userDeviceState?.isTablet) {
+        return 'tablet';
+    }
+    if (userDeviceState?.isDesktop) {
+        return 'desktop';
+    }
+    return '';
+}
+
+exports.getDeviceMainTypeFromFlags = getDeviceMainTypeFromFlags;

package/dist/cjs/context/UserDeviceContext/UserDeviceContext.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var React = require('react');
+
+const defaultUserDeviceState = {
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: '',
+    deviceCurrentType: '',
+    deviceTypesList: [],
+};
+const UserDeviceContext = React.createContext(defaultUserDeviceState);
+function useUserDeviceContext() {
+    const context = React.useContext(UserDeviceContext);
+    if (!context) {
+        throw new Error('useUserDeviceContext is not defined');
+    }
+    return context;
+}
+
+exports.UserDeviceContext = UserDeviceContext;
+exports.defaultUserDeviceState = defaultUserDeviceState;
+exports.useUserDeviceContext = useUserDeviceContext;

package/dist/cjs/context/UserDeviceContext/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var UserDeviceContext = require('./UserDeviceContext.js');
+var UserDeviceContext_helpers = require('./UserDeviceContext.helpers.js');
+require('react');
+
+
+
+exports.UserDeviceContext = UserDeviceContext.UserDeviceContext;
+exports.defaultUserDeviceState = UserDeviceContext.defaultUserDeviceState;
+exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
+exports.getDeviceMainTypeFromFlags = UserDeviceContext_helpers.getDeviceMainTypeFromFlags;

package/dist/cjs/context/index.js

@@ -1,24 +1,11 @@
 'use strict';
 
-var Notifications = require('./Notifications.js');
-var UIContext = require('./UIContext.js');
-var UrlAssetPrefix = require('./UrlAssetPrefix.js');
-require('react/jsx-runtime');
+var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
+var UIProviderApp = require('./UIProviderApp/UIProviderApp.js');
 require('react');
-require('uuid');
-require('@itcase/common');
-require('lodash/camelCase');
-require('../hooks/useMediaQueries/useMediaQueries.js');
-require('react-responsive');
-require('../utils/setViewportProperty.js');
+require('react/jsx-runtime');
 
 
 
-exports.NotificationsProvider = Notifications.NotificationsProvider;
-exports.statusToAppearanceList = Notifications.statusToAppearanceList;
-exports.useNotifications = Notifications.useNotifications;
-exports.useNotificationsAPI = Notifications.useNotificationsAPI;
-exports.UIProvider = UIContext.UIProvider;
-exports.useUserDeviceContext = UIContext.useUserDeviceContext;
-exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
-exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
+exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;
+exports.UIProviderApp = UIProviderApp.UIProviderApp;

package/dist/cjs/context/index2.js

@@ -0,0 +1,26 @@
+'use strict';
+
+var Notifications = require('./Notifications/Notifications.js');
+var UIProvider = require('./UIProvider/UIProvider.js');
+var UrlAssetPrefix = require('./UrlAssetPrefix/UrlAssetPrefix.js');
+var UserDeviceContext = require('./UserDeviceContext/UserDeviceContext.js');
+require('react/jsx-runtime');
+require('react');
+require('uuid');
+require('@itcase/common');
+require('lodash/camelCase');
+require('../hooks/useMediaQueries/useMediaQueries.js');
+require('react-responsive');
+require('../utils/setViewportProperty.js');
+require('./UserDeviceContext/UserDeviceContext.helpers.js');
+
+
+
+exports.NotificationsProvider = Notifications.NotificationsProvider;
+exports.statusToAppearanceList = Notifications.statusToAppearanceList;
+exports.useNotifications = Notifications.useNotifications;
+exports.useNotificationsAPI = Notifications.useNotificationsAPI;
+exports.UIProvider = UIProvider.UIProvider;
+exports.UrlAssetPrefixContext = UrlAssetPrefix.UrlAssetPrefixContext;
+exports.UrlAssetPrefixProvider = UrlAssetPrefix.UrlAssetPrefixProvider;
+exports.useUserDeviceContext = UserDeviceContext.useUserDeviceContext;

package/dist/cjs/hoc/index.js

@@ -4,7 +4,7 @@ var urlWithAssetPrefix = require('./urlWithAssetPrefix.js');
 require('react/jsx-runtime');
 require('react');
 require('@itcase/common');
-require('../context/UrlAssetPrefix.js');
+require('../context/UrlAssetPrefix/UrlAssetPrefix.js');
 
 
 

package/dist/cjs/hoc/urlWithAssetPrefix.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var common = require('@itcase/common');
-var UrlAssetPrefix = require('../context/UrlAssetPrefix.js');
+var UrlAssetPrefix = require('../context/UrlAssetPrefix/UrlAssetPrefix.js');
 
 const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**

package/dist/cjs/hooks/index.js

@@ -3,25 +3,19 @@
 var useActiveClasses = require('./useActiveClasses/useActiveClasses.js');
 var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
 var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
-var useDeviceTargetClass = require('./useDeviceTargetClass.js');
+var useDeviceTargetClass = require('./useDeviceTargetClass/useDeviceTargetClass.js');
 var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
 var styleAttributes = require('./useStyles/styleAttributes.js');
 var styleAttributes_helpers = require('./useStyles/styleAttributes.helpers.js');
 var useStyles = require('./useStyles/useStyles.js');
-var useViewportFix = require('./useViewportFix.js');
+var useViewportFix = require('./useViewportFix/useViewportFix.js');
 require('clsx');
 require('./useActiveClasses/useActiveClasses.helpers.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('../utils/setViewportProperty.js');
-require('../context/UrlAssetPrefix.js');
+require('../context/UserDeviceContext/UserDeviceContext.js');
 require('lodash/kebabCase');
 require('lodash/maxBy');
 require('react-responsive');

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

@@ -5,15 +5,7 @@ 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('../../context/UserDeviceContext/UserDeviceContext.js');
 require('../useStyles/styleAttributes.js');
 require('../useStyles/styleAttributes.helpers.js');
 require('lodash/kebabCase');

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

@@ -4,19 +4,11 @@ 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 UserDeviceContext = require('../../context/UserDeviceContext/UserDeviceContext.js');
 var styleAttributes = require('../useStyles/styleAttributes.js');
 var styleAttributes_helpers = require('../useStyles/styleAttributes.helpers.js');
 require('lodash/kebabCase');
 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 */
@@ -54,7 +46,7 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
      *     - titleTextSizeDesktop
      *   ---------
      **/
-    const { deviceCurrentMainType } = UIContext.useUserDeviceContext();
+    const { deviceCurrentMainType } = UserDeviceContext.useUserDeviceContext();
     // if (isDevelopmentEnv && isClientEnv) {
     //   if (window.__cache === undefined) {
     //     window.__cache = {

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

@@ -0,0 +1,10 @@
+'use strict';
+
+var useDeviceTargetClass = require('./useDeviceTargetClass.js');
+require('react');
+require('lodash/camelCase');
+require('../../context/UserDeviceContext/UserDeviceContext.js');
+
+
+
+exports.useDeviceTargetClass = useDeviceTargetClass.useDeviceTargetClass;

package/dist/cjs/hooks/useDeviceTargetClass/useDeviceTargetClass.js

@@ -0,0 +1,50 @@
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash/camelCase');
+var UserDeviceContext = require('../../context/UserDeviceContext/UserDeviceContext.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 } = UserDeviceContext.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) {
+            return null;
+        }
+        let cleanClassValue = camelCase(String(targetClassValue));
+        if (replace) {
+            const [searchValue, replaceValue = ''] = replace;
+            cleanClassValue = cleanClassValue.replace(searchValue, replaceValue);
+        }
+        return `${prefix}${cleanClassValue}`.toLowerCase();
+    }, [targetClassValue, prefix, replace]);
+    return targetClass;
+}
+
+exports.useDeviceTargetClass = useDeviceTargetClass;

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

@@ -8,15 +8,7 @@ require('lodash/camelCase');
 require('lodash/kebabCase');
 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('../../context/UserDeviceContext/UserDeviceContext.js');
 
 
 

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

@@ -5,17 +5,9 @@ var camelCase = require('lodash/camelCase');
 var kebabCase = require('lodash/kebabCase');
 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 UserDeviceContext = require('../../context/UserDeviceContext/UserDeviceContext.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');
 
 const LAYOUT_STYLE_KEYS = new Set([
     'alignContent',
@@ -34,7 +26,7 @@ const LAYOUT_STYLE_KEYS = new Set([
  * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
  */
 function useStyles(props) {
-    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = UIContext.useUserDeviceContext();
+    const { deviceCurrentMainType, deviceCurrentType, deviceTypesList } = UserDeviceContext.useUserDeviceContext();
     const propsStyleAttributes = React.useMemo(() => {
         const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
             if (propValue === false || propValue == null) {

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

@@ -0,0 +1,12 @@
+'use strict';
+
+var styleAttributes = require('./styleAttributes.js');
+var useStyles = require('./useStyles.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/maxBy');
+
+
+
+exports.styleAttributes = styleAttributes.styleAttributes;
+exports.useStyles = useStyles.useStyles;

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

@@ -0,0 +1,137 @@
+'use strict';
+
+const styleAttributes = [
+    /**
+     * Layout
+     */
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'aspectRatio',
+    'border',
+    'borderBottomWidth',
+    'borderEndWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderStartWidth',
+    'borderTopWidth',
+    'borderWidth',
+    'bottom',
+    'display',
+    'end',
+    'flex',
+    'flexBasis',
+    'flexDirection',
+    'flexGrow',
+    'flexShrink',
+    'flexWrap',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'columnWidth',
+    'height',
+    'justifyContent',
+    'left',
+    'margin',
+    'marginBottom',
+    'marginEnd',
+    'marginHorizontal',
+    'marginLeft',
+    'marginRight',
+    'marginStart',
+    'marginTop',
+    'marginVertical',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'overflow',
+    'padding',
+    'paddingBottom',
+    'paddingEnd',
+    'paddingHorizontal',
+    'paddingLeft',
+    'paddingRight',
+    'paddingStart',
+    'paddingTop',
+    'paddingVertical',
+    'position',
+    'right',
+    'start',
+    'top',
+    'width',
+    'zIndex',
+    'order',
+    /**
+     * Shadow
+     */
+    'elevation',
+    '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',
+    /**
+     * Filter
+     */
+    'backdropFilter',
+];
+
+exports.styleAttributes = styleAttributes;