@itcase/ui 1.3.15 → 1.3.16

package/dist/cjs/components/Choice.js

@@ -52,7 +52,7 @@ var choiceConfig = {
         choiceConfig.appearance = newComponent;
     },
 };
-var Choice = React.forwardRef(function Choice(props, ref) {
+function Choice(props) {
     var _a = props.isCheckbox, isCheckbox = _a === undefined ? false : _a, _b = props.isDisabled, isDisabled = _b === undefined ? false : _b, _c = props.isLoading, isLoading = _c === undefined ? false : _c, _d = props.active, active = _d === undefined ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === undefined ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === undefined ? 'normal' : _f, type = props.type;
     var controlRef = React.useRef(null);
     var optionsRefs = React.useMemo(function () { return new Map(options.map(function (item) { return [item.value, React.createRef()]; })); }, [options]);
@@ -87,7 +87,7 @@ var Choice = React.forwardRef(function Choice(props, ref) {
                                         ? activeIconItemFill || item.activeIconItemFill
                                         : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));
             }) })) }));
-});
+}
 
 exports.Choice = Choice;
 exports.choiceAppearance = choiceAppearance;

package/dist/cjs/hooks/useStyles.js

@@ -108,11 +108,31 @@ function useStyles(props) {
         }
       }
       if (value) {
-        // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
-        const HAS_UNIT = /\D/;
-        const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
-        if (!HAS_UNIT.test(value) && !ignorePX) {
-          value = `${value}px`;
+        // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
+        const hasUnitRegExp = /\D/;
+        // If value has some unit
+        if (hasUnitRegExp.test(value)) {
+          // Check value on our custom "m"(module) unit
+          const hasModuleUnitRegExp = /^\d+m$/;
+          // If value has module unit
+          if (hasModuleUnitRegExp.test(value)) {
+            // Find numbers from value value
+            const numberMatchesList = value.match(/\d+/);
+            // If "numberMatchesList" not null (has matches)
+            if (numberMatchesList) {
+              // Parse module value to px value
+              const valueModule = parseFloat(numberMatchesList[0]);
+              const valuePx = valueModule * 8;
+              value = `${valuePx}px`;
+            }
+          }
+        } else {
+          // Some properties doesn't have any units
+          const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+          if (!ignorePX) {
+            // Add px to non-unit value
+            value = `${value}px`;
+          }
         }
         if (styleAttributeKey.includes('Horizontal')) {
           const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');

package/dist/components/Choice.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useMemo, createRef, useCallback } from 'react';
+import { useRef, useMemo, createRef, useCallback } from 'react';
 import clsx from 'clsx';
 import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
 import { I as Icon } from '../Icon-Dz1q9WC2.js';
@@ -50,7 +50,7 @@ var choiceConfig = {
         choiceConfig.appearance = newComponent;
     },
 };
-var Choice = React.forwardRef(function Choice(props, ref) {
+function Choice(props) {
     var _a = props.isCheckbox, isCheckbox = _a === undefined ? false : _a, _b = props.isDisabled, isDisabled = _b === undefined ? false : _b, _c = props.isLoading, isLoading = _c === undefined ? false : _c, _d = props.active, active = _d === undefined ? { value: undefined } : _d, activeIcon = props.activeIcon, activeIconItemFill = props.activeIconItemFill, after = props.after, appearance = props.appearance, before = props.before, className = props.className, icon = props.icon, iconFillDisabled = props.iconFillDisabled, iconItemFill = props.iconItemFill, iconSize = props.iconSize, labelTextActiveColor = props.labelTextActiveColor, labelTextActiveColorDisabled = props.labelTextActiveColorDisabled, labelTextColor = props.labelTextColor, labelTextColorDisabled = props.labelTextColorDisabled, labelTextSize = props.labelTextSize, labelTextWeight = props.labelTextWeight, name = props.name, _e = props.options, options = _e === undefined ? [] : _e, set = props.set, setActiveSegment = props.setActiveSegment, _f = props.size, size = _f === undefined ? 'normal' : _f, type = props.type;
     var controlRef = useRef(null);
     var optionsRefs = useMemo(function () { return new Map(options.map(function (item) { return [item.value, createRef()]; })); }, [options]);
@@ -85,6 +85,6 @@ var Choice = React.forwardRef(function Choice(props, ref) {
                                         ? activeIconItemFill || item.activeIconItemFill
                                         : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));
             }) })) }));
-});
+}
 
 export { Choice, choiceAppearance, choiceConfig };

package/dist/hooks/useStyles.js

@@ -106,11 +106,31 @@ function useStyles(props) {
         }
       }
       if (value) {
-        // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
-        const HAS_UNIT = /\D/;
-        const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
-        if (!HAS_UNIT.test(value) && !ignorePX) {
-          value = `${value}px`;
+        // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
+        const hasUnitRegExp = /\D/;
+        // If value has some unit
+        if (hasUnitRegExp.test(value)) {
+          // Check value on our custom "m"(module) unit
+          const hasModuleUnitRegExp = /^\d+m$/;
+          // If value has module unit
+          if (hasModuleUnitRegExp.test(value)) {
+            // Find numbers from value value
+            const numberMatchesList = value.match(/\d+/);
+            // If "numberMatchesList" not null (has matches)
+            if (numberMatchesList) {
+              // Parse module value to px value
+              const valueModule = parseFloat(numberMatchesList[0]);
+              const valuePx = valueModule * 8;
+              value = `${valuePx}px`;
+            }
+          }
+        } else {
+          // Some properties doesn't have any units
+          const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
+          if (!ignorePX) {
+            // Add px to non-unit value
+            value = `${value}px`;
+          }
         }
         if (styleAttributeKey.includes('Horizontal')) {
           const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');

package/dist/types/components/Choice/Choice.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import type { iChoiceConfig } from './Choice.interface';
+import type { iChoiceConfig, iChoiceProps } from './Choice.interface';
 declare const choiceConfig: iChoiceConfig;
-declare const Choice: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+declare function Choice(props: iChoiceProps): import("react/jsx-runtime").JSX.Element;
 export { Choice, choiceConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.3.15",
+  "version": "1.3.16",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -90,7 +90,7 @@
     "@itcase/icons": "^1.0.18",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
-    "framer-motion": "^12.0.1",
+    "framer-motion": "^12.0.5",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "rc-slider": "^11.1.8",
@@ -107,15 +107,15 @@
     "react-responsive": "^10.0.0",
     "react-scroll": "^1.9.0",
     "react-scrollbars-custom": "^4.1.1",
-    "react-select": "^5.9.0",
+    "react-select": "^5.10.0",
     "swiper": "^11.2.1",
     "uuid": "^11.0.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
+    "@babel/core": "^7.26.7",
     "@babel/eslint-parser": "^7.26.5",
     "@babel/eslint-plugin": "^7.25.9",
-    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-env": "^7.26.7",
     "@babel/preset-react": "^7.26.3",
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
@@ -132,14 +132,14 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.3",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-interactions": "^8.5.0",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-interactions": "^8.5.1",
     "@storybook/addon-styling-webpack": "^1.0.1",
-    "@storybook/addon-themes": "^8.5.0",
+    "@storybook/addon-themes": "^8.5.1",
     "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
-    "@storybook/blocks": "^8.5.0",
-    "@storybook/react": "^8.5.0",
-    "@storybook/react-webpack5": "^8.5.0",
+    "@storybook/blocks": "^8.5.1",
+    "@storybook/react": "^8.5.1",
+    "@storybook/react-webpack5": "^8.5.1",
     "@types/js-cookie": "^3.0.6",
     "@types/lodash": "^4.17.14",
     "@types/react": "^19",
@@ -152,9 +152,9 @@
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.18.0",
+    "eslint": "9.19.0",
     "husky": "^9.1.7",
-    "lint-staged": "^15.4.1",
+    "lint-staged": "^15.4.3",
     "npm": "^11.0.0",
     "postcss": "^8.5.1",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
@@ -178,14 +178,14 @@
     "postcss-pxtorem": "^6.1.0",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.4.2",
-    "rollup": "^4.31.0",
+    "rollup": "^4.32.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-preserve-directives": "^1.1.3",
     "semantic-release": "^24.2.1",
-    "storybook": "^8.5.0",
-    "stylelint": "^16.13.2",
+    "storybook": "^8.5.1",
+    "stylelint": "^16.14.0",
     "typescript": "^5.7.3"
   }
 }