@itcase/ui 1.9.56 → 1.9.57

package/dist/components/Tooltip/appearance/tooltipSuccess.js

@@ -0,0 +1,10 @@
+const tooltipAppearanceSuccess = {
+    successPrimary: {
+        fill: 'successPrimary',
+        fillHover: 'successHoverPrimary',
+        borderColor: 'successBorderPrimary',
+        titleColor: 'successTextPrimary',
+        textColor: 'successTextPrimary',
+    },
+};
+export { tooltipAppearanceSuccess };

package/dist/components/Tooltip/index.js

@@ -0,0 +1,2 @@
+export { Tooltip, tooltipConfig } from './Tooltip';
+export { tooltipAppearance } from './Tooltip.appearance';

package/dist/components/Video/Video.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Video/Video.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useStyles } from 'src/hooks/useStyles';
+function Video(props) {
+    const { id, className, dataTestId, dataTour, position, mp4, ogv, poster, webm, children, } = props;
+    const { styles: videoStyles } = useStyles(props);
+    return (_jsxs("div", { id: id, className: clsx('video', className, poster && `video_poster`, position && `video_position_${position}`), "data-testid": dataTestId, "data-tour": dataTour, style: videoStyles, children: [_jsxs("video", { className: "video__wrapper", autoPlay: true, loop: true, muted: true, playsInline: false, poster: poster, children: [webm && _jsx("source", { type: 'video/webm; codecs="vp8, vorbis"', src: webm }), ogv && _jsx("source", { type: 'video/ogg; codecs="theora, vorbi"', src: ogv }), mp4 && (_jsx("source", { type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"', src: mp4 }))] }), children] }));
+}
+export { Video };

package/dist/components/Video/index.js

@@ -0,0 +1 @@
+export { Video } from './Video';

package/dist/components/Warning/Warning.appearance.js

@@ -0,0 +1,17 @@
+import { warningAppearanceAccent } from './appearance/warningAccent';
+import { warningAppearanceError } from './appearance/warningError';
+import { warningAppearanceInfo } from './appearance/warningInfo';
+import { warningAppearanceShape } from './appearance/warningShape';
+import { warningAppearanceSize } from './appearance/warningSize';
+import { warningAppearanceStyle } from './appearance/warningStyle';
+import { warningAppearanceWarning } from './appearance/warningWarning';
+const warningAppearance = {
+    ...warningAppearanceAccent,
+    ...warningAppearanceWarning,
+    ...warningAppearanceError,
+    ...warningAppearanceInfo,
+    ...warningAppearanceStyle,
+    ...warningAppearanceSize,
+    ...warningAppearanceShape,
+};
+export { warningAppearance };

package/dist/components/Warning/Warning.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Warning/Warning.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig } from 'src/hooks/useAppearanceConfig';
+import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
+import { useStyles } from 'src/hooks/useStyles';
+import { Icon } from 'src/components/Icon';
+import { Text } from 'src/components/Text';
+import { warningAppearance } from './Warning.appearance';
+const warningConfig = {
+    appearance: warningAppearance,
+    setAppearance: (appearanceConfig) => {
+        warningConfig.appearance = appearanceConfig;
+    },
+};
+function Warning(props) {
+    const { appearance, className, dataTestId, dataTour, label, description, isSkeleton, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, warningConfig);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { fillClass, labelTextColor, labelTextSize, labelTextWeight, descriptionTextColor, descriptionTextSize, borderColorClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterSize, iconAfterSrc, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeSize, iconBeforeSrc, shapeClass, shapeStrengthClass, sizeClass, } = propsGenerator;
+    const { styles: warningStyles } = useStyles(props);
+    const [isVisible, setIsVisible] = useState(true);
+    return (_jsx(Fragment, { children: isVisible && (_jsxs("div", { className: clsx(className, 'warning', fillClass && `fill_${fillClass}`, sizeClass && `warning_size_${sizeClass}`, borderColorClass && `border-color_${borderColorClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, isSkeleton && `warning_skeleton`), "data-testid": dataTestId, "data-tour": dataTour, style: warningStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { fill: iconBeforeFill, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, SvgImage: iconBefore })), _jsxs("div", { className: 'warning__content', children: [label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textWeight: labelTextWeight, children: label })), description && (_jsx(Text, { size: descriptionTextSize, textColor: descriptionTextColor, children: description })), children] }), (iconAfter || iconAfterSrc) && (_jsx(Icon, { fill: iconAfterFill, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, SvgImage: iconAfter, onClick: () => setIsVisible(false) }))] })) }));
+}
+export { Warning, warningConfig };

package/dist/components/Warning/appearance/warningAccent.js

@@ -0,0 +1,24 @@
+import { icons16 } from '@itcase/icons/default';
+const warningAppearanceAccent = {
+    accentMutedPrimary: {
+        fill: 'accentTertiary',
+        labelTextColor: 'accentTextQuaternary',
+        descriptionTextColor: 'accentTextQuaternary',
+        borderColor: 'accentBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'accentItemQuaternary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'accentItemQuaternary',
+    },
+    accentPrimary: {
+        fill: 'accentPrimary',
+        labelTextColor: 'accentTextPrimary',
+        descriptionTextColor: 'accentTextPrimary',
+        borderColor: 'accentBorderQuaternary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'accentItemPrimary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'accentItemPrimary',
+    },
+};
+export { warningAppearanceAccent };

package/dist/components/Warning/appearance/warningError.js

@@ -0,0 +1,24 @@
+import { icons16 } from '@itcase/icons/default';
+const warningAppearanceError = {
+    errorMutedPrimary: {
+        fill: 'errorTertiary',
+        labelTextColor: 'errorTextQuaternary',
+        descriptionTextColor: 'errorTextQuaternary',
+        borderColor: 'errorBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'errorItemQuaternary',
+        iconBefore: icons16.Action.Block,
+        iconBeforeFillIcon: 'errorItemQuaternary',
+    },
+    errorPrimary: {
+        fill: 'errorPrimary',
+        labelTextColor: 'errorTextPrimary',
+        descriptionTextColor: 'errorTextPrimary',
+        borderColor: 'errorBorderQuaternary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'errorItemPrimary',
+        iconBefore: icons16.Action.Block,
+        iconBeforeFillIcon: 'errorItemPrimary',
+    },
+};
+export { warningAppearanceError };

package/dist/components/Warning/appearance/warningInfo.js

@@ -0,0 +1,24 @@
+import { icons16 } from '@itcase/icons/default';
+const warningAppearanceInfo = {
+    infoMutedPrimary: {
+        fill: 'infoTertiary',
+        labelTextColor: 'infoTextSecondary',
+        descriptionTextColor: 'infoTextSecondary',
+        borderColor: 'infoBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'infoItemQuaternary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'infoItemQuaternary',
+    },
+    infoPrimary: {
+        fill: 'infoPrimary',
+        labelTextColor: 'infoTextPrimary',
+        descriptionTextColor: 'infoTextPrimary',
+        borderColor: 'infoBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'infoItemPrimary',
+        iconBefore: icons16.Alert.Warning,
+        iconBeforeFillIcon: 'infoItemPrimary',
+    },
+};
+export { warningAppearanceInfo };

package/dist/components/Warning/appearance/warningShape.js

@@ -0,0 +1,25 @@
+const warningAppearanceShape = {
+    circular: {
+        shape: 'circular',
+    },
+    rounded: {
+        shape: 'rounded',
+    },
+    roundedXL: {
+        shape: 'rounded',
+        shapeStrength: '2m',
+    },
+    roundedL: {
+        shape: 'rounded',
+        shapeStrength: '1_5m',
+    },
+    roundedM: {
+        shape: 'rounded',
+        shapeStrength: '1m',
+    },
+    roundedS: {
+        shape: 'rounded',
+        shapeStrength: '0_5m',
+    },
+};
+export { warningAppearanceShape };

package/dist/components/Warning/appearance/warningSize.js

@@ -0,0 +1,11 @@
+const warningAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        labelTextWeight: '600',
+        descriptionTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+};
+export { warningAppearanceSize };

package/dist/components/Warning/appearance/warningStyle.js

@@ -0,0 +1,14 @@
+const warningAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { warningAppearanceStyle };

package/dist/components/Warning/appearance/warningWarning.js

@@ -0,0 +1,24 @@
+import { icons16 } from '@itcase/icons/default';
+const warningAppearanceWarning = {
+    warningMutedPrimary: {
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        descriptionTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemSecondary',
+    },
+    warningPrimary: {
+        fill: 'warningPrimary',
+        labelTextColor: 'warningTextPrimary',
+        descriptionTextColor: 'warningTextPrimary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemPrimary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemPrimary',
+    },
+};
+export { warningAppearanceWarning };

package/dist/components/Warning/index.js

@@ -0,0 +1,2 @@
+export { Warning, warningConfig } from './Warning';
+export { warningAppearance } from './Warning.appearance';

package/dist/config/forms/datepicker.js

@@ -0,0 +1,18 @@
+const defaultDatepickerProps = {
+    size: 'normal',
+    daySize: 'xs',
+    dayTextColor: 'surfaceTextPrimary',
+    dayTextShape: 'rounded',
+    dayTextSize: 'm',
+    iconFillSize: 24,
+    iconItemFill: 'surfaceItemPrimary',
+    iconSize: 14,
+    monthTextColor: 'surfaceTextPrimary',
+    monthTextSize: 'm',
+    monthTextWeight: 400,
+    placeholderTextColor: 'surfaceTextSecondary',
+    yearTextColor: 'surfaceTextPrimary',
+    yearTextSize: 'm',
+    yearTextWeight: 400,
+};
+export { defaultDatepickerProps };

package/dist/config/forms/index.js

@@ -0,0 +1,3 @@
+import { defaultDatepickerProps } from './datepicker';
+import { defaultInputProps } from './input';
+export { defaultDatepickerProps, defaultInputProps };

package/dist/config/forms/input.js

@@ -0,0 +1,17 @@
+const defaultInputProps = {
+    width: 'fill',
+    borderColor: 'surfaceBorderTertiary',
+    caret: 'extraItemSecondary',
+    // error
+    errorBorderColor: 'errorBorderPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+    // appearance depending on the type of error
+    // required
+    requiredBorderColor: 'warningBorderPrimary',
+    shape: 'rounded',
+    size: 'm',
+    textColor: 'surfaceTextPrimary',
+    textColorDisabled: 'surfaceTextDisabled',
+    textSize: 'm',
+};
+export { defaultInputProps };

package/dist/context/Notifications.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/context/Notifications.js

@@ -1,9 +1,8 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
-import { v4 } from 'uuid';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { axiosInstanceITCase } from '@itcase/common';
-
 const STATUSES = {
     error: 'error',
     info: 'info',
@@ -113,7 +112,7 @@ function NotificationsProvider(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+    return (_jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: _jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
 }
 function useNotifications() {
     return useContext(NotificationsContext);
@@ -129,7 +128,7 @@ const statusToAppearanceList = {
 };
 function createNotification(notification, onClose) {
     // Default notification item properties
-    let id = v4().split('-')[0];
+    let id = uuidv4().split('-')[0];
     let title = '';
     let text = '';
     let closeIcon = '';
@@ -184,5 +183,4 @@ function createNotification(notification, onClose) {
         onClose: onClose,
     };
 }
-
 export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/context/UIContext.js

@@ -1,11 +1,9 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useMemo, useEffect, useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, memo, useContext, useEffect, useMemo, } from 'react';
 import camelCase from 'lodash/camelCase';
-import { useMediaQueries } from '../hooks/useMediaQueries/useMediaQueries.js';
-import { setViewportProperty } from '../utils/setViewportProperty.js';
-import 'react-responsive';
-
+import { useMediaQueries } from '../hooks/useMediaQueries';
+import { setViewportProperty } from '../utils';
 const UserDeviceContext = createContext({
     isMobile: false,
     isTablet: false,
@@ -60,7 +58,7 @@ const UIProvider = memo(function UIProvider(props) {
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
-    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
+    return (_jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
 function useUserDeviceContext() {
     const context = useContext(UserDeviceContext);
@@ -69,5 +67,4 @@ function useUserDeviceContext() {
     }
     return context;
 }
-
 export { UIProvider, useUserDeviceContext };

package/dist/context/UrlAssetPrefix.js

@@ -1,6 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useMemo } from 'react';
-
 const UrlAssetPrefixContext = createContext({
     assetPrefix: undefined,
     ignorePathsList: undefined,
@@ -8,7 +7,6 @@ const UrlAssetPrefixContext = createContext({
 function UrlAssetPrefixProvider(props) {
     const { assetPrefix, ignorePathsList, children } = props;
     const value = useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
-    return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
+    return (_jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
 }
-
 export { UrlAssetPrefixContext, UrlAssetPrefixProvider };

package/dist/context/index.js

@@ -0,0 +1,2 @@
+export * from './Notifications';
+export * from './UIContext';

package/dist/hoc/urlWithAssetPrefix.js

@@ -1,8 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useContext } from 'react';
 import { formatURL } from '@itcase/common';
-import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
-
+import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix';
 const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**
  * HOC, который добавляет assetPrefix к URL-пропсам.
@@ -38,7 +38,7 @@ const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
             }
             return resultProps;
         }, {});
-        return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
+        return _jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
     });
     return HOC;
 };
@@ -71,5 +71,4 @@ const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
     // Need to add prefix to url
     return true;
 };
-
 export { urlWithAssetPrefix };

package/dist/hooks/index.helpers.js

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

package/dist/hooks/useActiveClasses/index.js

@@ -0,0 +1,2 @@
+import { useActiveClasses } from './useActiveClasses';
+export { useActiveClasses };

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -85,5 +85,4 @@ const formatState = (key) => {
 const toKebabCase = (str) => {
     return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 };
-
 export { CLASS_RULES, formatState, toKebabCase };

package/dist/hooks/useActiveClasses/useActiveClasses.interface.js

@@ -59,5 +59,4 @@ const suffix = [
     'Video',
     'Warning',
 ];
-
 export { suffix };

package/dist/hooks/useActiveClasses/useActiveClasses.js

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
-
+import { CLASS_RULES, formatState, toKebabCase, } from './useActiveClasses.helpers';
 const useActiveClasses = (params) => {
     const { propsGenerator, suffixes = [], isActive, isDisabled } = params;
     const rootClassesArray = [];
@@ -54,5 +53,4 @@ const useActiveClasses = (params) => {
         suffixClasses,
     };
 };
-
 export { useActiveClasses };

package/dist/hooks/useAppearanceConfig/index.js

@@ -0,0 +1 @@
+export { useAppearanceConfig } from './useAppearanceConfig';

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-
 const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     const appearanceConfig = useMemo(() => {
         if (appearance) {
@@ -23,5 +22,4 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     }, [appearance, componentConfig?.appearance, isDisabled]);
     return appearanceConfig;
 };
-
 export { useAppearanceConfig };

package/dist/hooks/useDevicePropsGenerator/index.js

@@ -0,0 +1 @@
+export { useDevicePropsGenerator } from './useDevicePropsGenerator';

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

@@ -1 +1 @@
-
+export {};

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -2,17 +2,9 @@ import { 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 { getStyleAttributeKey } from '../../hooks.js';
-import styleAttributes from '../useStyles/styleAttributes.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
-
+import { useUserDeviceContext } from '../../context';
+import { getStyleAttributeKey } from '../index.helpers';
+import styleAttributes from '../useStyles/styleAttributes';
 function useDevicePropsGenerator(componentProps, appearanceConfig) {
     /** Get or generate(classname) a prop depending on the user's device.
      * Props:
@@ -126,5 +118,4 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }
-
 export { useDevicePropsGenerator };

package/dist/hooks/useDeviceTargetClass.js

@@ -1,58 +1,47 @@
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
-import { useUserDeviceContext } from '../context/UIContext.js';
-import 'react/jsx-runtime';
-import './useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../utils/setViewportProperty.js';
-
+import { useUserDeviceContext } from '../context/UIContext';
 /** 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;
+    /** 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 };