@itcase/ui 1.9.58 → 1.9.60

package/dist/cjs/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1,29 +1,18 @@
 'use strict';
 
-var React = require('react');
+require('react');
+var primitives = require('../../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
+require('clsx');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
+require('react-responsive');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
-const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
-    const appearanceConfig = React.useMemo(() => {
-        if (appearance) {
-            const appearanceProps = appearance.split(' ').reduce((resultConfig, appearanceKey) => ({
-                ...resultConfig,
-                ...componentConfig.appearance?.[appearanceKey],
-            }), {});
-            if (isDisabled &&
-                (componentConfig?.appearance?.disabled ||
-                    componentConfig?.appearance?.disabledPrimary)) {
-                Object.assign(appearanceProps, componentConfig?.appearance?.disabled ||
-                    componentConfig?.appearance?.disabledPrimary);
-            }
-            return appearanceProps;
-        }
-        if (isDisabled) {
-            return (componentConfig?.appearance?.disabled ||
-                componentConfig?.appearance?.disabledPrimary);
-        }
-        return {};
-    }, [appearance, componentConfig?.appearance, isDisabled]);
-    return appearanceConfig;
-};
 
-exports.useAppearanceConfig = useAppearanceConfig;
+
+exports.useAppearanceConfig = primitives.useAppearanceConfig;

package/dist/cjs/hooks/useAppearanceConfig.js

@@ -1,8 +1,18 @@
 'use strict';
 
-var useAppearanceConfig = require('./useAppearanceConfig/useAppearanceConfig.js');
+var primitives = require('../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
 require('react');
+require('clsx');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
+require('react-responsive');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
 
 
-exports.useAppearanceConfig = useAppearanceConfig.useAppearanceConfig;
+exports.useAppearanceConfig = primitives.useAppearanceConfig;

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

@@ -1,132 +1,18 @@
 'use strict';
 
-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');
-var index_helpers = require('../../hooks.js');
-var styleAttributes = require('../useStyles/styleAttributes.js');
+require('react');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+var primitives = require('../../../primitives_cjs_CnyJ13MJ.js');
 require('react/jsx-runtime');
+require('clsx');
 require('uuid');
 require('@itcase/common');
-require('../useMediaQueries/useMediaQueries.js');
 require('react-responsive');
-require('../../utils/setViewportProperty.js');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
-function useDevicePropsGenerator(componentProps, appearanceConfig) {
-    /** Get or generate(classname) a prop depending on the user's device.
-     * Props:
-     *   - "componentProps" - original "props" from component
-     *   - "appearanceConfig" - special appearance dictionary with styles presets
-     *
-     * Usage for create class value:
-     *   const appearanceConfig = (
-     *     appearance && componentConfig.appearance && componentConfig.appearance[appearance]
-     *   )
-     *   const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
-     *   ---------
-     *   const fillClass = propsGenerator.getClassName('fill')
-     *   "fillClass" - is "surface-secondary"
-     *   ---------
-     *   const fillClass = propsGenerator.getClassName('fill', { prefix: 'fill_' })
-     *   "fillClass" - is "fill_surface-secondary"
-     *   ---------
-     *   const fillClass = propsGenerator.fillClass
-     *   "fillClass" - is "surface-secondary"
-     *   ---------
-     *   const { fillClass } = propsGenerator
-     *   "fillClass" - is "surface-secondary"
-     *
-     * Usage for props value for device:
-     *   const { titleTextSize } = propsGenerator / const titleTextSize = propsGenerator.titleTextSize
-     *
-     *   "titleTextSize" - contain some value from props:
-     *     - titleTextSize
-     *     - titleTextSizeMobile
-     *     - titleTextSizeTablet
-     *     - titleTextSizeDesktop
-     *   ---------
-     **/
-    const { deviceCurrentMainType } = UIContext.useUserDeviceContext();
-    const devicePropsGenerator = React.useMemo(() => {
-        const propsGenerator = {
-            getProp(propKey) {
-                const propsForDeviceKey = `${propKey}${upperFirst(deviceCurrentMainType)}`;
-                const valueForDevice = componentProps[propsForDeviceKey];
-                const valueDefault = componentProps[propKey];
-                const appearanceForDevice = appearanceConfig?.[propsForDeviceKey];
-                const appearanceDefault = appearanceConfig?.[propKey];
-                // prettier-ignore
-                const targetPropsValue = (
-                // Value for device from props is first priority
-                valueForDevice ||
-                    // Value without device from props is second priority
-                    valueDefault ||
-                    // Value for device from appearance config is third priority
-                    appearanceForDevice ||
-                    // Value without device from appearance config is last priority
-                    appearanceDefault);
-                return targetPropsValue;
-            },
-            // eslint-disable-next-line perfectionist/sort-objects
-            getClassName(propKey, params) {
-                const { prefix = '', replace = [/([A-Z])/g, '-$1'] } = params || {};
-                const targetClassValue = this.getProp(String(propKey));
-                const styleAttributeKeys = styleAttributes.default.map((attr) => index_helpers.getStyleAttributeKey(attr));
-                if (styleAttributeKeys.includes(String(propKey)) &&
-                    (typeof targetClassValue === 'number' ||
-                        (typeof targetClassValue === 'string' &&
-                            !isNaN(parseFloat(targetClassValue))))) {
-                    return '';
-                }
-                if (targetClassValue) {
-                    let cleanClassValue = String(targetClassValue);
-                    if (!cleanClassValue.includes('.')) {
-                        cleanClassValue = camelCase(cleanClassValue);
-                    }
-                    if (replace) {
-                        const replaceList = castArray(replace);
-                        cleanClassValue = cleanClassValue.replace(replaceList[0], 
-                        // @ts-expect-error
-                        replaceList[1] || '');
-                    }
-                    // prettier-ignore
-                    return `${prefix}${cleanClassValue}`.toLowerCase();
-                }
-                // If target key not exists in props and appearance config - return empty class
-                return '';
-            },
-        };
-        const generatorProxyHandler = {
-            get(target, propKey, receiver, ...args) {
-                if (typeof propKey === 'string') {
-                    // If object does not have the property being retrieved
-                    if (!Reflect.has(target, propKey)) {
-                        // And property ended on "Class" keyword
-                        if (propKey.endsWith('Class')) {
-                            // prettier-ignore
-                            const shortProp = propKey.substring(0, propKey.lastIndexOf('Class'));
-                            // Return prop from props for device as formatted class name
-                            return target.getClassName(shortProp);
-                        }
-                        // Return prop from props for device
-                        return target.getProp(propKey);
-                    }
-                    // Return object property. Original "get".
-                    // @ts-expect-error
-                    return Reflect.get(target, propKey, receiver, ...args);
-                }
-                // In some cases, like in Chrome browser, sometime "prop" is not string.
-                // We return this object as is.
-                return propKey;
-            },
-        };
-        return new Proxy(propsGenerator, generatorProxyHandler);
-        // TODO: componentProps(react) and appearanceConfig(not memoized) is always new. maybe better check Object.values?
-    }, [componentProps, appearanceConfig, deviceCurrentMainType]);
-    return devicePropsGenerator;
-}
 
-exports.useDevicePropsGenerator = useDevicePropsGenerator;
+
+exports.useDevicePropsGenerator = primitives.useDevicePropsGenerator;

package/dist/cjs/hooks/useDevicePropsGenerator.js

@@ -1,21 +1,18 @@
 'use strict';
 
-var useDevicePropsGenerator = require('./useDevicePropsGenerator/useDevicePropsGenerator.js');
+var primitives = require('../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
 require('react');
+require('clsx');
 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('../hooks.js');
-require('./useStyles/styleAttributes.js');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
 
 
-exports.useDevicePropsGenerator = useDevicePropsGenerator.useDevicePropsGenerator;
+exports.useDevicePropsGenerator = primitives.useDevicePropsGenerator;

package/dist/cjs/hooks/useDeviceTargetClass.js

@@ -3,11 +3,15 @@
 var React = require('react');
 var camelCase = require('lodash/camelCase');
 var castArray = require('lodash/castArray');
-var UIContext = require('../context/UIContext.js');
+var primitives = require('../../primitives_cjs_CnyJ13MJ.js');
 require('react/jsx-runtime');
-require('./useMediaQueries/useMediaQueries.js');
+require('clsx');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
 require('react-responsive');
-require('../utils/setViewportProperty.js');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
 /** TODO:
  * Hook is still used in "itcase-forms".
@@ -35,7 +39,7 @@ function useDeviceTargetClass(componentProps, hookProps) {
     isMobile,
     isTablet,
     isDesktop
-  } = UIContext.useUserDeviceContext();
+  } = primitives.useUserDeviceContext();
   const targetClassValue = React.useMemo(() => {
     // prettier-ignore
     const deviceCurrentMainType = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';

package/dist/cjs/hooks/useMediaQueries/useMediaQueries.js

@@ -1,121 +1,18 @@
 'use strict';
 
-var React = require('react');
-var reactResponsive = require('react-responsive');
+require('react');
+require('react-responsive');
+var primitives = require('../../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
+require('clsx');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
-var tablet = "48em";
-var mediaQueries = {
-	"mobile-tiny": "15em",
-	"mobile-super-extra-large": "40em",
-	tablet: tablet,
-	"desktop-small": "60em",
-	"desktop-huge": "160em"
-};
 
-const isSSR = typeof window === 'undefined';
-function useMediaQueries(userDevice = {}) {
-  // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
-  // prettier-ignore
-  const isMobile = reactResponsive.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'],
-  // })
-  reactResponsive.useMediaQuery({
-    minWidth: mediaQueries['mobile-super-extra-large'],
-    maxWidth: mediaQueries['tablet']
-  });
-  // prettier-ignore
-  const isTablet = reactResponsive.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 = reactResponsive.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 = reactResponsive.useMediaQuery({
-    minWidth: mediaQueries['desktop-huge']
-  });
-  const deviceTypes = React.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;
-}
 
-exports.useMediaQueries = useMediaQueries;
+exports.useMediaQueries = primitives.useMediaQueries;

package/dist/cjs/hooks/useMediaQueries.js

@@ -1,9 +1,18 @@
 'use strict';
 
-var useMediaQueries = require('./useMediaQueries/useMediaQueries.js');
+var primitives = require('../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
 require('react');
+require('clsx');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
 require('react-responsive');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
 
 
-exports.useMediaQueries = useMediaQueries.useMediaQueries;
+exports.useMediaQueries = primitives.useMediaQueries;

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

@@ -2,172 +2,19 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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',
-];
+var primitives = require('../../../primitives_cjs_CnyJ13MJ.js');
+require('react/jsx-runtime');
+require('react');
+require('clsx');
+require('lodash/camelCase');
+require('lodash/castArray');
+require('lodash/upperFirst');
+require('uuid');
+require('@itcase/common');
+require('react-responsive');
+require('lodash/maxBy');
+require('react-inlinesvg');
 
-exports.default = styleAttributes;
+
+
+exports.default = primitives.styleAttributes;