@itcase/ui 1.9.65 → 1.9.66

package/dist/hooks/useHoldProgress.js

@@ -1,4 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useRef, useState, useEffect, useCallback } from 'react';
+
 const FRAME_DURATION = 16; // Approximate duration of a frame in milliseconds
 const HOLD_STATE = {
     HOLDING: 'holding',
@@ -54,4 +55,5 @@ function useHoldProgress(options) {
         onHoldStart,
     };
 }
+
 export { useHoldProgress };

package/dist/hooks/useMediaQueries/useMediaQueries.js

@@ -1,112 +1,12 @@
-import { useMemo } from 'react';
-import { useMediaQuery } from 'react-responsive';
-import mediaQueries from './mediaQueries.json';
-const isSSR = typeof window === 'undefined';
-function useMediaQueries(userDevice = {}) {
-    // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
-    // prettier-ignore
-    const 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 = (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 = (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 };
+import 'react';
+import 'react-responsive';
+export { l as useMediaQueries } from '../../primitives_es_dSATude_.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

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

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

package/dist/hooks/useStyles/styleAttributes.js

@@ -1,167 +1,12 @@
-export default [
-    /**
-     * 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',
-];
+export { o as default } from '../../primitives_es_dSATude_.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/dist/hooks/useStyles/useStyles.js

@@ -1,193 +1,12 @@
-import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import maxBy from 'lodash/maxBy';
-import upperFirst from 'lodash/upperFirst';
-import { useUserDeviceContext } from '../../context';
-import { getStyleAttributeKey } from '../index.helpers';
-import styleAttributes from './styleAttributes';
-/*
- * 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 = ['zIndex', 'order', 'flexGrow', 'opacity'].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 getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
-    // 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);
-    return styleAttributeKey;
-};
-export { useStyles };
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+export { u as useStyles } from '../../primitives_es_dSATude_.js';
+import 'react/jsx-runtime';
+import 'clsx';
+import 'lodash/castArray';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'react-inlinesvg';

package/dist/hooks/useViewportFix.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+
 function useViewportFix() {
     useEffect(() => {
         // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
@@ -36,4 +37,5 @@ function useViewportFix() {
         };
     }, []);
 }
+
 export { useViewportFix };

package/dist/utils/mergeAppearanceKeys.js

@@ -1,15 +1,12 @@
-/**
- * @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 };
+export { m as mergeAppearanceKeys } from '../primitives_es_dSATude_.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/dist/utils/setViewportProperty.js

@@ -1,5 +1,12 @@
-const setViewportProperty = () => {
-    const vh = window.innerHeight * 0.01;
-    document.documentElement.style.setProperty('--vh', `${vh}px`);
-};
-export { setViewportProperty };
+export { s as setViewportProperty } from '../primitives_es_dSATude_.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'clsx';
+import 'lodash/camelCase';
+import 'lodash/castArray';
+import 'lodash/upperFirst';
+import 'uuid';
+import '@itcase/common';
+import 'react-responsive';
+import 'lodash/maxBy';
+import 'react-inlinesvg';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.65",
+  "version": "1.9.66",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

package/dist/components/Accordion/Accordion.appearance.js

@@ -1,9 +0,0 @@
-import { accordionAppearanceSize } from './appearance/accordionSize';
-import { accordionAppearanceStyle } from './appearance/accordionStyle';
-import { accordionAppearanceSurface } from './appearance/accordionSurface';
-const accordionAppearance = {
-    ...accordionAppearanceSize,
-    ...accordionAppearanceStyle,
-    ...accordionAppearanceSurface,
-};
-export { accordionAppearance };

package/dist/components/Accordion/Accordion.interface.js

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

package/dist/components/Accordion/Accordion.js

@@ -1,57 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback, useMemo, useState } from 'react';
-import clsx from 'clsx';
-import castArray from 'lodash/castArray';
-import { useDevicePropsGenerator } from 'src/hooks/useDevicePropsGenerator';
-import { useStyles } from 'src/hooks/useStyles';
-import { AccordionItem } from './AccordionItem';
-function Accordion(props) {
-    const { appearance, className, dataTestId, dataTour, initial = [], items, isMultiple, onClickItem, children, } = props;
-    const [expandedItems, setExpandedItems] = useState(() => castArray(initial));
-    const onClickAccordionItem = useCallback((targetItem) => {
-        setExpandedItems((prevState) => {
-            const isExpanded = prevState.find((id) => id === targetItem.id);
-            if (isMultiple) {
-                if (isExpanded) {
-                    return prevState.filter((id) => id !== targetItem.id);
-                }
-                else {
-                    return [...prevState, targetItem.id];
-                }
-            }
-            else {
-                if (isExpanded) {
-                    return [];
-                }
-                else {
-                    return [targetItem.id];
-                }
-            }
-        });
-        onClickItem && onClickItem(targetItem);
-    }, [isMultiple, onClickItem]);
-    const accordionItemsList = useMemo(() => {
-        if (items) {
-            return items.map((item, i) => (_jsx(AccordionItem, { id: item.id, appearance: appearance, title: item.title, content: item.content, isExpanded: expandedItems.includes(item.id), onClick: onClickAccordionItem }, `accordionItem_${item.id || i + 1}`)));
-        }
-        if (children) {
-            return React.Children.toArray(children).map((child) => {
-                if (React.isValidElement(child)) {
-                    const childID = child.props.id || child.key;
-                    return React.cloneElement(child, {
-                        id: childID,
-                        isExpanded: expandedItems.includes(childID),
-                        onClick: onClickAccordionItem,
-                    });
-                }
-                return child;
-            });
-        }
-        return [];
-    }, [items, children, appearance, expandedItems, onClickAccordionItem]);
-    const propsGenerator = useDevicePropsGenerator(props);
-    const { fillClass, borderColorClass, shapeClass, shapeStrengthClass, widthClass, } = propsGenerator;
-    const { styles: accordionStyles } = useStyles(props);
-    return (_jsx("div", { className: clsx(className, 'accordion', borderColorClass && `border-color_${borderColorClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, widthClass && `width_${widthClass}`), "data-testid": dataTestId, "data-tour": dataTour, style: accordionStyles, children: accordionItemsList }));
-}
-export { Accordion };