@itcase/ui 1.0.42 → 1.0.44

package/dist/hooks/useDeviceTargetClass.js

@@ -27,30 +27,31 @@ function useDeviceTargetClass(componentProps, hookProps) {
    * "hookProps" - special props for generating class
    **/
 
-  var _hookProps$prefix = hookProps.prefix,
-    prefix = _hookProps$prefix === void 0 ? '' : _hookProps$prefix,
-    propsKey = hookProps.propsKey,
-    _hookProps$replace = hookProps.replace,
-    replace = _hookProps$replace === void 0 ? [/([A-Z])/g, '-$1'] : _hookProps$replace;
-  var _useUserDeviceContext = UIContext.useUserDeviceContext(),
-    isMobile = _useUserDeviceContext.isMobile,
-    isTablet = _useUserDeviceContext.isTablet,
-    isDesktop = _useUserDeviceContext.isDesktop;
-  var targetClassValue = React.useMemo(function () {
+  const {
+    prefix = '',
+    propsKey,
+    replace = [/([A-Z])/g, '-$1']
+  } = hookProps;
+  const {
+    isMobile,
+    isTablet,
+    isDesktop
+  } = UIContext.useUserDeviceContext();
+  const targetClassValue = React.useMemo(() => {
     // prettier-ignore
-    var deviceBasePart = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
-    var valueForDevice = componentProps["" + propsKey + deviceBasePart];
-    var valueDefault = componentProps[propsKey];
+    const deviceBasePart = isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
+    const valueForDevice = componentProps[`${propsKey}${deviceBasePart}`];
+    const valueDefault = componentProps[propsKey];
     return valueForDevice || valueDefault;
-  }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[propsKey + "Mobile"], componentProps[propsKey + "Tablet"], componentProps[propsKey + "Desktop"]]);
-  var targetClass = React.useMemo(function () {
+  }, [isMobile, isTablet, isDesktop, componentProps[propsKey], componentProps[`${propsKey}Mobile`], componentProps[`${propsKey}Tablet`], componentProps[`${propsKey}Desktop`]]);
+  const targetClass = React.useMemo(() => {
     if (targetClassValue) {
-      var cleanClassValue = camelCase__default.default(String(targetClassValue));
+      let cleanClassValue = camelCase__default.default(String(targetClassValue));
       if (replace) {
-        var replaceList = castArray__default.default(replace);
+        const replaceList = castArray__default.default(replace);
         cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
       }
-      return ("" + prefix + cleanClassValue).toLowerCase();
+      return `${prefix}${cleanClassValue}`.toLowerCase();
     }
     return null;
   }, [targetClassValue, prefix, replace]);

package/dist/hooks/useMediaQueries.js

@@ -23,14 +23,11 @@ var mediaQueries = {
 	"desktop-huge": "160em"
 };
 
-var isSSR = typeof window === 'undefined';
-function useMediaQueries(userDevice) {
-  if (userDevice === void 0) {
-    userDevice = {};
-  }
+const isSSR = typeof window === 'undefined';
+function useMediaQueries(userDevice = {}) {
   // const isWarning = useMediaQuery({ maxWidth: mediaQueries['mobile-tiny'] })
 
-  var isMobile = reactResponsive.useMediaQuery({
+  const isMobile = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['mobile-tiny'],
     maxWidth: mediaQueries['tablet']
   }) || isSSR && Boolean(userDevice.isMobile);
@@ -63,7 +60,7 @@ function useMediaQueries(userDevice) {
     minWidth: mediaQueries['mobile-super-extra-large'],
     maxWidth: mediaQueries['tablet']
   });
-  var isTablet = reactResponsive.useMediaQuery({
+  const isTablet = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['tablet'],
     maxWidth: mediaQueries['desktop-small']
   }) || isSSR && Boolean(userDevice.isTablet);
@@ -76,7 +73,7 @@ function useMediaQueries(userDevice) {
   //   maxWidth: mediaQueries['tablet-large'],
   // })
 
-  var isDesktop = reactResponsive.useMediaQuery({
+  const isDesktop = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['desktop-small'],
     maxWidth: mediaQueries['desktop-super-huge']
   }) || isSSR && Boolean(userDevice.isDesktop);
@@ -104,7 +101,7 @@ function useMediaQueries(userDevice) {
   //   minWidth: mediaQueries['desktop-super-extra-large'],
   //   maxWidth: mediaQueries['desktop-huge'],
   // })
-  var isDesktopMega = reactResponsive.useMediaQuery({
+  const isDesktopMega = reactResponsive.useMediaQuery({
     minWidth: mediaQueries['desktop-huge']
   });
   return {
@@ -127,7 +124,7 @@ function useMediaQueries(userDevice) {
     // isDesktopStandart,
     // isDesktopLarge,
     // isDesktopHuge,
-    isDesktopMega: isDesktopMega
+    isDesktopMega
   };
 }
 

package/dist/hooks/useStyles.js

@@ -1,16 +1,135 @@
 'use strict';
 
-var useStyles = require('../useStyles-e4accb53.js');
-require('react');
-require('lodash/camelCase');
-require('lodash/maxBy');
-require('lodash/upperFirst');
-require('./styleAttributes.js');
-require('../context/UIContext.js');
+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');
 require('prop-types');
 require('./useMediaQueries.js');
 require('react-responsive');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
+var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
+var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
 
-exports.useStyles = useStyles.useStyles;
+let DEVICE_TYPES = [];
+const removeDeviceType = originalKey => {
+  // Remove "mobile"/"tablet"/"desktop"
+  const withOutDeviceType = DEVICE_TYPES.reduce((cleanKey, deviceType) => {
+    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
+      return cleanKey.replace(upperFirst__default.default(deviceType), '');
+    }
+    return cleanKey;
+  }, originalKey);
+  return withOutDeviceType;
+};
+function useStyles(props) {
+  const allDevicesTypes = UIContext.useUserDeviceContext();
+  const {
+    isMobile,
+    isTablet,
+    isDesktop,
+    ...fullNamedDeviceTypes
+  } = allDevicesTypes;
+
+  // 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 targer  thrid is device
+   * paddingHorizontal  GridInnerWrapper      MobileNormal
+   *
+   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
+   */
+
+  const currentDevice = React.useMemo(() => {
+    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase__default.default(key.replace('is', '')));
+
+    // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
+    let currentDevice = Object.keys(fullNamedDeviceTypes).find(key => fullNamedDeviceTypes[key]);
+    if (!currentDevice) {
+      currentDevice = deviceBasePart;
+    }
+    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
+    DEVICE_TYPES = deviceTypes;
+
+    // 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]) => {
+      // Collect list of possible styles for propKey. e.g:
+      // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
+      const possibleStyleAttributes = styleAttributes.default.filter(styleAttribute => {
+        return propKey.startsWith(styleAttribute);
+      });
+
+      // Get longest style key (e.g. "borderLeftWidth")
+      const currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
+      if (currentStyleAttribute) {
+        const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
+        let value = null;
+
+        // e.g. "GridWrapperInner"
+        const targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
+        const targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
+        if (!resultStyles[targetElementResultKey]) {
+          resultStyles[targetElementResultKey] = {};
+        }
+        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 (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;
+          }
+        }
+      }
+    });
+    return resultStyles;
+  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
+
+  return collectedStyles;
+}
+
+exports.useStyles = useStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.42",
+  "version": "1.0.44",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -40,64 +40,65 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.3",
+    "@itcase/common": "^1.1.6",
     "clsx": "^2.0.0",
     "html5-boilerplate": "^8.0.0",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "luxon": "^3.3.0",
+    "luxon": "^3.4.3",
     "prop-types": "^15.8.1",
     "rc-slider": "^10.2.1",
     "react": "^18.2.0",
     "react-date-range": "^1.4.0",
     "react-dom": "^18.2.0",
-    "react-inlinesvg": "^3.0.2",
+    "react-inlinesvg": "^4.0.3",
+    "react-otp-input": "^3.0.4",
     "react-paginate": "^8.2.0",
     "react-responsive": "^9.0.2",
     "react-scrollbars-custom": "^4.1.1",
     "react-select": "^5.7.4",
-    "swiper": "^10.1.0",
+    "swiper": "^10.2.0",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/eslint-parser": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@babel/preset-react": "^7.22.5",
-    "@commitlint/cli": "^17.6.7",
-    "@commitlint/config-conventional": "^17.6.7",
+    "@babel/core": "^7.22.17",
+    "@babel/eslint-parser": "^7.22.15",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
     "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-commonjs": "^25.0.3",
+    "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/release-notes-generator": "^11.0.4",
+    "@semantic-release/release-notes-generator": "^11.0.7",
     "babel-loader": "^9.1.3",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.46.0",
-    "eslint-config-prettier": "^8.9.0",
+    "eslint": "8.49.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.28.0",
-    "eslint-plugin-n": "^16.0.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-n": "^16.0.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
-    "eslint-plugin-react": "^7.33.1",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^13.2.3",
-    "npm": "^9.8.1",
-    "postcss": "^8.4.27",
+    "lint-staged": "^14.0.1",
+    "npm": "^10.1.0",
+    "postcss": "^8.4.29",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^10.1.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
     "postcss-csso": "^6.0.1",
-    "postcss-dark-theme-class": "^0.7.3",
+    "postcss-dark-theme-class": "^1.0.0",
     "postcss-discard-duplicates": "^6.0.0",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
@@ -110,16 +111,16 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.1.0",
+    "postcss-preset-env": "^9.1.3",
     "postcss-pxtorem": "^6.0.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
-    "prettier": "^3.0.0",
-    "react-datepicker": "^4.16.0",
-    "rollup": "^3.27.0",
+    "prettier": "^3.0.3",
+    "react-datepicker": "^4.17.0",
+    "rollup": "^3.29.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^21.0.7",
-    "stylelint": "^15.10.2",
+    "semantic-release": "^21.1.1",
+    "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-no-unsupported-browser-features": "^7.0.0",
     "stylelint-order": "^6.0.3"

package/dist/useStyles-e4accb53.js

@@ -1,153 +0,0 @@
-'use strict';
-
-var React = require('react');
-var camelCase = require('lodash/camelCase');
-var maxBy = require('lodash/maxBy');
-var upperFirst = require('lodash/upperFirst');
-var styleAttributes = require('./hooks/styleAttributes.js');
-var UIContext = require('./context/UIContext.js');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var camelCase__default = /*#__PURE__*/_interopDefault(camelCase);
-var maxBy__default = /*#__PURE__*/_interopDefault(maxBy);
-var upperFirst__default = /*#__PURE__*/_interopDefault(upperFirst);
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-var _excluded = ["isMobile", "isTablet", "isDesktop"];
-var DEVICE_TYPES = [];
-var removeDeviceType = function removeDeviceType(originalKey) {
-  // Remove "mobile"/"tablet"/"desktop"
-  var withOutDeviceType = DEVICE_TYPES.reduce(function (cleanKey, deviceType) {
-    if (cleanKey.endsWith(upperFirst__default.default(deviceType))) {
-      return cleanKey.replace(upperFirst__default.default(deviceType), '');
-    }
-    return cleanKey;
-  }, originalKey);
-  return withOutDeviceType;
-};
-function useStyles(props) {
-  var allDevicesTypes = UIContext.useUserDeviceContext();
-  var isMobile = allDevicesTypes.isMobile,
-    isTablet = allDevicesTypes.isTablet,
-    isDesktop = allDevicesTypes.isDesktop,
-    fullNamedDeviceTypes = _objectWithoutPropertiesLoose(allDevicesTypes, _excluded);
-
-  // prettier-ignore
-  var deviceBasePart = React.useMemo(function () {
-    return isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '';
-  }, [isMobile, isTablet, isDesktop]);
-  /*
-   * rule of prop key:
-   *
-   * first is style     second is div targer  thrid is device
-   * paddingHorizontal  GridInnerWrapper      MobileNormal
-   *
-   * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
-   */
-
-  var currentDevice = React.useMemo(function () {
-    var deviceTypes = Object.keys(allDevicesTypes).map(function (key) {
-      return camelCase__default.default(key.replace('is', ''));
-    });
-
-    // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
-    var currentDevice = Object.keys(fullNamedDeviceTypes).find(function (key) {
-      return fullNamedDeviceTypes[key];
-    });
-    if (!currentDevice) {
-      currentDevice = deviceBasePart;
-    }
-    currentDevice = upperFirst__default.default(camelCase__default.default(currentDevice.replace('is', '')));
-    DEVICE_TYPES = deviceTypes;
-
-    // Set non-existent "currentDevice" value, to collect default styles later
-    return currentDevice || '__DEVICE_IS_NOT_FOUND__';
-  }, [allDevicesTypes, deviceBasePart]);
-  var collectedStyles = React.useMemo(function () {
-    var resultStyles = {};
-
-    // For every component props
-    Object.entries(props).forEach(function (_ref) {
-      var propKey = _ref[0],
-        propValue = _ref[1];
-      // Collect list of possible styles for propKey. e.g:
-      // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-      var possibleStyleAttributes = styleAttributes.default.filter(function (styleAttribute) {
-        return propKey.startsWith(styleAttribute);
-      });
-
-      // Get longest style key (e.g. "borderLeftWidth")
-      var currentStyleAttribute = maxBy__default.default(possibleStyleAttributes, 'length');
-      if (currentStyleAttribute) {
-        var isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
-        var value = null;
-
-        // e.g. "GridWrapperInner"
-        var targetElementKey = removeDeviceType(propKey.replace(currentStyleAttribute, ''));
-        var targetElementResultKey = camelCase__default.default(targetElementKey) || 'styles';
-        if (!resultStyles[targetElementResultKey]) {
-          resultStyles[targetElementResultKey] = {};
-        }
-        if (isStyleForCurrentDevice) {
-          value = propValue;
-        } else {
-          var propKeyWithOutDeviceType = "" + currentStyleAttribute + targetElementKey;
-          var propKeyWithBaseDeviceType = "" + propKeyWithOutDeviceType + deviceBasePart;
-          var defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-          var currentValue = resultStyles[targetElementResultKey][currentStyleAttribute];
-          if (propKeyWithOutDeviceType.includes('Horizontal')) {
-            var keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            currentValue = resultStyles[targetElementResultKey][keyLeft];
-          } else if (propKeyWithOutDeviceType.includes('Vertical')) {
-            var keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            currentValue = resultStyles[targetElementResultKey][keyTop];
-          }
-          if (!currentValue) {
-            value = defaultValue;
-          }
-        }
-        if (value) {
-          // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
-          var HAS_UNIT = /\D/;
-          // prettier-ignore
-          var ignorePX = currentStyleAttribute.includes('zIndex') || currentStyleAttribute.includes('order');
-          if (!HAS_UNIT.test(value) && !ignorePX) {
-            value = value + "px";
-          }
-          if (currentStyleAttribute.includes('Horizontal')) {
-            var _keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
-            var keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
-            resultStyles[targetElementResultKey][_keyLeft] = value;
-            resultStyles[targetElementResultKey][keyRight] = value;
-          } else if (currentStyleAttribute.includes('Vertical')) {
-            var _keyTop = currentStyleAttribute.replace('Vertical', 'Top');
-            var keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
-            resultStyles[targetElementResultKey][_keyTop] = value;
-            resultStyles[targetElementResultKey][keyBottom] = value;
-          } else {
-            resultStyles[targetElementResultKey][currentStyleAttribute] = value;
-          }
-        }
-      }
-    });
-    return resultStyles;
-  }, [currentDevice, props.display]); // "props" object maybe big and frequently changing
-
-  return collectedStyles;
-}
-
-exports._objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose;
-exports.useStyles = useStyles;