@itcase/ui-core 1.10.47 → 1.10.48

package/dist/hooks/useStyles/styleAttributes.js

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

package/dist/hooks/useStyles/useStyles.js

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

package/dist/hooks/useViewportFix.js

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

package/dist/types/context/Notifications.d.ts

@@ -7,16 +7,16 @@ declare function useNotificationsAPI(): {
     removeNotification: (targetId?: GeneratedId) => void;
     showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
     notificationStatuses: {
-        readonly error: "error";
-        readonly info: "info";
-        readonly success: "success";
-        readonly warning: "warning";
+        readonly error: 'error';
+        readonly info: 'info';
+        readonly success: 'success';
+        readonly warning: 'warning';
     };
 };
 declare const statusToAppearanceList: {
-    readonly error: "errorPrimary sizeS solid rounded";
-    readonly info: "infoPrimary sizeS solid rounded";
-    readonly success: "successPrimary sizeS solid rounded";
-    readonly warning: "warningPrimary sizeS solid rounded";
+    readonly error: 'errorPrimary sizeS solid rounded';
+    readonly info: 'infoPrimary sizeS solid rounded';
+    readonly success: 'successPrimary sizeS solid rounded';
+    readonly warning: 'warningPrimary sizeS solid rounded';
 };
 export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI, };

package/dist/types/hoc/urlWithAssetPrefix.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ComponentType, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 import { RequireAtLeastOneProp, RequireAtLeastOnePropError } from '../types';
 type UrlPropKeys = (typeof urlPropsList)[number];
@@ -6,7 +5,7 @@ type OnePropCheckError = [
     'urlWithAssetPrefix: компонент должен содержать хотя бы один из пропсов',
     UrlPropKeys
 ];
-declare const urlPropsList: readonly ["src", "imageSrc", "svgSrc", "placeholderUrl"];
+declare const urlPropsList: readonly ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**
  * HOC, который добавляет assetPrefix к URL-пропсам.
  *
@@ -24,5 +23,5 @@ declare const urlPropsList: readonly ["src", "imageSrc", "svgSrc", "placeholderU
  * const B = (props: { id: string }) => <div />;
  * urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
  */
-declare const urlWithAssetPrefix: <P extends Record<string, any>, T = unknown, OnePropCheck extends RequireAtLeastOneProp<P, UrlPropKeys> = RequireAtLeastOneProp<P, UrlPropKeys>>(WrappedComponent: ComponentType<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>, ..._error: RequireAtLeastOnePropError<OnePropCheck, OnePropCheckError>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<T>>;
+declare const urlWithAssetPrefix: <P extends Record<string, any>, T = unknown, OnePropCheck extends RequireAtLeastOneProp<P, UrlPropKeys> = RequireAtLeastOneProp<P, UrlPropKeys>>(WrappedComponent: ComponentType<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>, ..._error: RequireAtLeastOnePropError<OnePropCheck, OnePropCheckError>) => ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>>;
 export { urlWithAssetPrefix };

package/dist/types/hooks/useActiveClasses/useActiveClasses.interface.d.ts

@@ -1,20 +1,20 @@
-declare const suffix: readonly ["Button", "Checkbox", "Radio", "Checkmark", "Avatar", "AvatarStack", "Badge", "Breadcrumbs", "Cell", "Chips", "Choice", "Code", "CookiesWarning", "Dadata", "DatePeriod", "Divider", "Dot", "Drawer", "Dropdown", "DropdownItem", "Flex", "Grid", "Group", "HeroTitle", "HTMLContent", "Icon", "Image", "Input", "InputPassword", "Label", "Link", "List", "Loader", "Logo", "MenuItem", "Modal", "ModalSheetBottom", "Notification", "Overlay", "Pagination", "RangeSlider", "Response", "ScrollBar", "ScrollOnDrag", "ScrollToView", "Search", "Segmented", "Select", "SvgContent", "Swiper", "Switch", "Tab", "Text", "Textarea", "Tile", "Title", "Tooltip", "Video", "Warning"];
+declare const suffix: readonly ['Button', 'Checkbox', 'Radio', 'Checkmark', 'Avatar', 'AvatarStack', 'Badge', 'Breadcrumbs', 'Cell', 'Chips', 'Choice', 'Code', 'CookiesWarning', 'Dadata', 'DatePeriod', 'Divider', 'Dot', 'Drawer', 'Dropdown', 'DropdownItem', 'Flex', 'Grid', 'Group', 'HeroTitle', 'HTMLContent', 'Icon', 'Image', 'Input', 'InputPassword', 'Label', 'Link', 'List', 'Loader', 'Logo', 'MenuItem', 'Modal', 'ModalSheetBottom', 'Notification', 'Overlay', 'Pagination', 'RangeSlider', 'Response', 'ScrollBar', 'ScrollOnDrag', 'ScrollToView', 'Search', 'Segmented', 'Select', 'SvgContent', 'Swiper', 'Switch', 'Tab', 'Text', 'Textarea', 'Tile', 'Title', 'Tooltip', 'Video', 'Warning'];
 type SuffixComponents = (typeof suffix)[number];
 type SpecialSuffix<T extends string> = T extends 'HTMLContent' ? 'htmlContent' : Uncapitalize<T>;
 type SuffixKeys = SpecialSuffix<SuffixComponents>;
 interface PropsGenerator {
     [key: string]: any | number | string | undefined;
-    getProp?: (propKey: string) => number | string | undefined;
+    getProp?: (propKey: string) => unknown;
 }
 interface UseActiveClassesReturn {
     rootClasses: string;
     suffixClasses: Record<SuffixKeys, string>;
 }
 interface UseActiveClasses {
-    propsGenerator: PropsGenerator;
-    suffixes?: SuffixComponents[];
     isActive?: boolean;
     isDisabled?: boolean;
+    propsGenerator: PropsGenerator;
+    suffixes?: SuffixComponents[];
 }
 interface RulesConfig {
     key: string;

package/dist/types/hooks/useAppearanceConfig/useAppearanceConfig.d.ts

@@ -1,5 +1,5 @@
 import { AppearanceConfig } from '../useDevicePropsGenerator';
-declare const useAppearanceConfig: <Keys extends string, Config extends Record<"disabled" | "disabledPrimary" | Keys, AppearanceConfig>>(appearance: string | undefined, componentConfig: {
+declare const useAppearanceConfig: <Keys extends string, Config extends Record<'disabled' | 'disabledPrimary' | Keys, AppearanceConfig>>(appearance: string | undefined, componentConfig: {
     appearance?: Partial<Config>;
 }, isDisabled?: boolean) => AppearanceConfig;
 export { useAppearanceConfig };

package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts

@@ -1,7 +1,7 @@
 import { KebabCase, WithClassKeys } from '../../types';
 import type { AppearanceConfig, ComponentProps, GeneratorGetClassParams as GP } from './useDevicePropsGenerator.interface';
 declare function useDevicePropsGenerator<Props extends ComponentProps>(componentProps: Props, appearanceConfig?: AppearanceConfig): Props & {
-    getProp(propKey: string): number | string | undefined;
+    getProp(propKey: string): unknown;
     getClassName<K extends Extract<keyof Props, string>, P extends GP | undefined = undefined>(propKey: K, params?: P): ReturnGetClassName<Props, K, P>;
 } & WithClassKeys<Props>;
 type ReturnGetClassName<Props, K extends keyof Props, Params = undefined> = Params extends undefined ? NonNullable<Props[K]> extends string ? KebabCase<NonNullable<Props[K]>> : string : Props[K];

package/dist/types/hooks/useDeviceTargetClass.d.ts

@@ -2,4 +2,5 @@
  * Hook is still used in "itcase-forms".
  * Need replace with "useDevicePropsGenerator" and delete this.
  */
-export function useDeviceTargetClass(componentProps: any, hookProps: any): string;
+declare function useDeviceTargetClass(componentProps: any, hookProps: any): string;
+export { useDeviceTargetClass };

package/dist/types/hooks/useMediaQueries/useMediaQueries.d.ts

@@ -1,7 +1,8 @@
-export function useMediaQueries(userDevice?: {}): {
+declare function useMediaQueries(userDevice?: {}): {
     isMobile: any;
     isMobileHuge: any;
     isTablet: any;
     isDesktop: any;
     isDesktopMega: boolean;
 };
+export { useMediaQueries };

package/dist/types/hooks/useStyles/styleAttributes.helpers.d.ts

@@ -1,3 +1,3 @@
 import { StyleAttributeOrValidator } from './styleAttributes.interface';
-declare const getStyleAttributeKey: (targetStyleAttribute: StyleAttributeOrValidator) => 0 | "fill" | "fixed" | import("./styleAttributes.interface").StyleAttributes | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | (string & {}) | "auto" | "fit-content" | "max-content" | "min-content" | "-moz-fit-content" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "hug" | "-webkit-max-content" | "intrinsic" | "min-intrinsic";
+declare const getStyleAttributeKey: (targetStyleAttribute: StyleAttributeOrValidator) => "-moz-fit-content" | "-moz-initial" | "-moz-max-content" | "-moz-min-content" | "-webkit-fit-content" | "-webkit-max-content" | "auto" | "fill" | "fit-content" | "fixed" | "hug" | "inherit" | "initial" | "intrinsic" | "max-content" | "min-content" | "min-intrinsic" | "revert" | "revert-layer" | "unset" | 0 | import("./styleAttributes.interface").StyleAttributes | (string & {});
 export { getStyleAttributeKey };

package/dist/utils/index.js

@@ -1 +1,2 @@
-export{mergeAppearanceKeys}from"./mergeAppearanceKeys.js";export{setViewportProperty}from"./setViewportProperty.js";
+export { mergeAppearanceKeys } from './mergeAppearanceKeys.js';
+export { setViewportProperty } from './setViewportProperty.js';

package/dist/utils/mergeAppearanceKeys.js

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

package/dist/utils/setViewportProperty.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-core",
-  "version": "1.10.47",
+  "version": "1.10.48",
   "description": "UI shared components",
   "keywords": [
     "Modal",
@@ -96,5 +96,5 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3"
   },
-  "gitHead": "09306c0d4781521c6c7059638852274291cd06a7"
+  "gitHead": "1f665db854bceb66e6b86b17a4a6a82c79d4523b"
 }