@itcase/ui 1.2.11 → 1.2.13

package/dist/cjs/components/List.js

@@ -9,11 +9,11 @@ require('react');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../hooks/styleAttributes.js');
 require('lodash/castArray');
 require('../../tslib.es6-CCZ3TN_7.js');
 

package/dist/cjs/components/Select.js

@@ -17,11 +17,11 @@ require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../hooks/styleAttributes.js');
 require('../../Link-BoJdm1hz.js');
 require('../../Tooltip-DkTKx9n-.js');
 require('../../Title-zwP6c2U2.js');

package/dist/cjs/components/Video.js

@@ -7,11 +7,11 @@ require('react');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
-require('../hooks/styleAttributes.js');
 require('../context/UIContext.js');
 require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../hooks/styleAttributes.js');
 
 function Video(props) {
     var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;

package/dist/cjs/hooks/useStyles.js

@@ -4,8 +4,8 @@ var React = require('react');
 var camelCase = require('lodash/camelCase');
 var maxBy = require('lodash/maxBy');
 var upperFirst = require('lodash/upperFirst');
-var styleAttributes = require('./styleAttributes.js');
 var UIContext = require('../context/UIContext.js');
+var styleAttributes = require('./styleAttributes.js');
 require('prop-types');
 require('./useMediaQueries.js');
 require('react-responsive');
@@ -21,6 +21,15 @@ const removeDeviceType = originalKey => {
   }, originalKey);
   return withOutDeviceType;
 };
+
+/*
+ * rule of prop key:
+ *
+ * first is style     second is div target  third is device
+ * paddingHorizontal  GridInnerWrapper      MobileNormal
+ *
+ * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+ */
 function useStyles(props) {
   const allDevicesTypes = UIContext.useUserDeviceContext();
   const {
@@ -32,15 +41,6 @@ function useStyles(props) {
 
   // prettier-ignore
   const deviceBasePart = React.useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
-  /*
-   * rule of prop key:
-   *
-   * first is style     second is div target  third is device
-   * paddingHorizontal  GridInnerWrapper      MobileNormal
-   *
-   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
-   */
-
   const currentDevice = React.useMemo(() => {
     const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase(key.replace('is', '')));
 
@@ -55,74 +55,84 @@ function useStyles(props) {
     // Set non-existent "currentDevice" value, to collect default styles later
     return currentDevice || '__DEVICE_IS_NOT_FOUND__';
   }, [allDevicesTypes, deviceBasePart]);
-  const collectedStyles = React.useMemo(() => {
-    const resultStyles = {};
-
-    // For every component props
-    Object.entries(props).forEach(([propKey, propValue]) => {
+  const propsStyleAttributes = React.useMemo(() => {
+    const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
       // Collect list of possible styles for propKey. e.g:
       // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-      const possibleStyleAttributes = styleAttributes.default.filter(styleAttribute => {
+      const possibleStyleAttributesList = styleAttributes.default.filter(styleAttribute => {
         return propKey.startsWith(styleAttribute);
       });
 
       // Get longest style key (e.g. "borderLeftWidth")
-      const currentStyleAttribute = maxBy(possibleStyleAttributes, 'length');
-      if (currentStyleAttribute) {
-        const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
-        let value = null;
+      const targetStyleAttribute = maxBy(possibleStyleAttributesList, 'length');
+      if (targetStyleAttribute) {
+        result[propKey] = propValue;
+      }
+      return result;
+    }, {});
+    return styles;
+    // "props" object maybe big and frequently changing
+  }, [props]);
+  const collectedStyles = React.useMemo(() => {
+    const resultStylesGroups = {};
+    for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
+      let value = null;
+      const possibleStyleAttributesList = styleAttributes.default.filter(styleAttribute => {
+        return propKey.startsWith(styleAttribute);
+      });
+      const styleAttributeKey = maxBy(possibleStyleAttributesList, 'length');
+      const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
 
-        // e.g. "GridWrapperInner"
-        const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
-        const targetElementResultKey = camelCase(targetElementKey) || 'styles';
-        if (!resultStyles[targetElementResultKey]) {
-          resultStyles[targetElementResultKey] = {};
+      // e.g. "GridWrapperInner"
+      const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''));
+      const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
+      if (!resultStylesGroups[targetElementGroupKey]) {
+        resultStylesGroups[targetElementGroupKey] = {};
+      }
+      if (isStyleForCurrentDevice) {
+        value = propValue;
+      } else {
+        const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
+        const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
+        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 (isStyleForCurrentDevice) {
-          value = propValue;
-        } else {
-          const propKeyWithOutDeviceType = `${currentStyleAttribute}${targetElementKey}`;
-          const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
-          const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-          let currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
-          if (propKeyWithOutDeviceType.includes('Horizontal')) {
-            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            currentValue = resultStyles[targetElementResultKey][keyLeft];
-          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
-            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            currentValue = resultStyles[targetElementResultKey][keyTop];
-          }
-          if (!currentValue) {
-            value = defaultValue;
-          }
+        if (!currentValue) {
+          value = defaultValue;
+        }
+      }
+      if (value) {
+        // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
+        const HAS_UNIT = /\D/;
+        // prettier-ignore
+        const ignorePX = styleAttributeKey.includes('zIndex') || styleAttributeKey.includes('order');
+        if (!HAS_UNIT.test(value) && !ignorePX) {
+          value = `${value}px`;
         }
-        if (value) {
-          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
-          const HAS_UNIT = /\D/;
-          // prettier-ignore
-          const ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
-          if (!HAS_UNIT.test(value) && !ignorePX) {
-            value = `${value}px`;
-          }
-          if (currentStyleAttribute.includes('Horizontal')) {
-            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            const keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
-            resultStyles[targetElementResultKey][keyLeft] = value;
-            resultStyles[targetElementResultKey][keyRight] = value;
-          } else if (currentStyleAttribute.includes('Vertical')) {
-            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            const keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
-            resultStyles[targetElementResultKey][keyTop] = value;
-            resultStyles[targetElementResultKey][keyBottom] = value;
-          } else {
-            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
-          }
+        if (styleAttributeKey.includes('Horizontal')) {
+          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+          const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
+          resultStylesGroups[targetElementGroupKey][keyLeft] = value;
+          resultStylesGroups[targetElementGroupKey][keyRight] = value;
+        } else if (styleAttributeKey.includes('Vertical')) {
+          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+          const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
+          resultStylesGroups[targetElementGroupKey][keyTop] = value;
+          resultStylesGroups[targetElementGroupKey][keyBottom] = value;
+        } else {
+          resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
         }
       }
-    });
-    return resultStyles;
-  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
-
+    }
+    return resultStylesGroups;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deviceBasePart, currentDevice, ...Object.values(propsStyleAttributes)]);
   return collectedStyles;
 }
 

package/dist/components/List.js

@@ -7,11 +7,11 @@ import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../hooks/styleAttributes.js';
 import 'lodash/castArray';
 import '../tslib.es6-5FtW-kfi.js';
 

package/dist/components/Select.js

@@ -15,11 +15,11 @@ import '../hooks/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../hooks/styleAttributes.js';
 import '../Link-BSquFKSX.js';
 import '../Tooltip-DJufHBiQ.js';
 import '../Title-BfSFPJtJ.js';

package/dist/components/Video.js

@@ -5,11 +5,11 @@ import 'react';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
-import '../hooks/styleAttributes.js';
 import '../context/UIContext.js';
 import 'prop-types';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
+import '../hooks/styleAttributes.js';
 
 function Video(props) {
     var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;

package/dist/css/styles/mediaqueries.css

@@ -65,7 +65,7 @@
 
 @custom-media --mouse (hover: hover) and (pointer: fine);
 
-@custom-media --tiny-viewport (width >= 1280px) and (height <= 720px);
+@custom-media --tiny-viewport (width <= 1366px) and (height <= 720px);
 
 @custom-media --small-viewport (width >= 1366px) and (height < 768px);
 

package/dist/hooks/useStyles.js

@@ -2,8 +2,8 @@ import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import maxBy from 'lodash/maxBy';
 import upperFirst from 'lodash/upperFirst';
-import styleAttributes from './styleAttributes.js';
 import { useUserDeviceContext } from '../context/UIContext.js';
+import styleAttributes from './styleAttributes.js';
 import 'prop-types';
 import './useMediaQueries.js';
 import 'react-responsive';
@@ -19,6 +19,15 @@ const removeDeviceType = originalKey => {
   }, originalKey);
   return withOutDeviceType;
 };
+
+/*
+ * rule of prop key:
+ *
+ * first is style     second is div target  third is device
+ * paddingHorizontal  GridInnerWrapper      MobileNormal
+ *
+ * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+ */
 function useStyles(props) {
   const allDevicesTypes = useUserDeviceContext();
   const {
@@ -30,15 +39,6 @@ function useStyles(props) {
 
   // prettier-ignore
   const deviceBasePart = useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
-  /*
-   * rule of prop key:
-   *
-   * first is style     second is div target  third is device
-   * paddingHorizontal  GridInnerWrapper      MobileNormal
-   *
-   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
-   */
-
   const currentDevice = useMemo(() => {
     const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase(key.replace('is', '')));
 
@@ -53,74 +53,84 @@ function useStyles(props) {
     // Set non-existent "currentDevice" value, to collect default styles later
     return currentDevice || '__DEVICE_IS_NOT_FOUND__';
   }, [allDevicesTypes, deviceBasePart]);
-  const collectedStyles = useMemo(() => {
-    const resultStyles = {};
-
-    // For every component props
-    Object.entries(props).forEach(([propKey, propValue]) => {
+  const propsStyleAttributes = useMemo(() => {
+    const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
       // Collect list of possible styles for propKey. e.g:
       // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-      const possibleStyleAttributes = styleAttributes.filter(styleAttribute => {
+      const possibleStyleAttributesList = styleAttributes.filter(styleAttribute => {
         return propKey.startsWith(styleAttribute);
       });
 
       // Get longest style key (e.g. "borderLeftWidth")
-      const currentStyleAttribute = maxBy(possibleStyleAttributes, 'length');
-      if (currentStyleAttribute) {
-        const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
-        let value = null;
+      const targetStyleAttribute = maxBy(possibleStyleAttributesList, 'length');
+      if (targetStyleAttribute) {
+        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 possibleStyleAttributesList = styleAttributes.filter(styleAttribute => {
+        return propKey.startsWith(styleAttribute);
+      });
+      const styleAttributeKey = maxBy(possibleStyleAttributesList, 'length');
+      const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
 
-        // e.g. "GridWrapperInner"
-        const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
-        const targetElementResultKey = camelCase(targetElementKey) || 'styles';
-        if (!resultStyles[targetElementResultKey]) {
-          resultStyles[targetElementResultKey] = {};
+      // e.g. "GridWrapperInner"
+      const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''));
+      const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
+      if (!resultStylesGroups[targetElementGroupKey]) {
+        resultStylesGroups[targetElementGroupKey] = {};
+      }
+      if (isStyleForCurrentDevice) {
+        value = propValue;
+      } else {
+        const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
+        const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
+        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 (isStyleForCurrentDevice) {
-          value = propValue;
-        } else {
-          const propKeyWithOutDeviceType = `${currentStyleAttribute}${targetElementKey}`;
-          const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
-          const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-          let currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
-          if (propKeyWithOutDeviceType.includes('Horizontal')) {
-            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            currentValue = resultStyles[targetElementResultKey][keyLeft];
-          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
-            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            currentValue = resultStyles[targetElementResultKey][keyTop];
-          }
-          if (!currentValue) {
-            value = defaultValue;
-          }
+        if (!currentValue) {
+          value = defaultValue;
+        }
+      }
+      if (value) {
+        // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
+        const HAS_UNIT = /\D/;
+        // prettier-ignore
+        const ignorePX = styleAttributeKey.includes('zIndex') || styleAttributeKey.includes('order');
+        if (!HAS_UNIT.test(value) && !ignorePX) {
+          value = `${value}px`;
         }
-        if (value) {
-          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
-          const HAS_UNIT = /\D/;
-          // prettier-ignore
-          const ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
-          if (!HAS_UNIT.test(value) && !ignorePX) {
-            value = `${value}px`;
-          }
-          if (currentStyleAttribute.includes('Horizontal')) {
-            const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            const keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
-            resultStyles[targetElementResultKey][keyLeft] = value;
-            resultStyles[targetElementResultKey][keyRight] = value;
-          } else if (currentStyleAttribute.includes('Vertical')) {
-            const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            const keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
-            resultStyles[targetElementResultKey][keyTop] = value;
-            resultStyles[targetElementResultKey][keyBottom] = value;
-          } else {
-            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
-          }
+        if (styleAttributeKey.includes('Horizontal')) {
+          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
+          const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
+          resultStylesGroups[targetElementGroupKey][keyLeft] = value;
+          resultStylesGroups[targetElementGroupKey][keyRight] = value;
+        } else if (styleAttributeKey.includes('Vertical')) {
+          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
+          const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
+          resultStylesGroups[targetElementGroupKey][keyTop] = value;
+          resultStylesGroups[targetElementGroupKey][keyBottom] = value;
+        } else {
+          resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
         }
       }
-    });
-    return resultStyles;
-  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
-
+    }
+    return resultStylesGroups;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [deviceBasePart, currentDevice, ...Object.values(propsStyleAttributes)]);
   return collectedStyles;
 }
 

package/package.json

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