@itcase/ui 1.3.14 → 1.3.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/components/Choice.js +2 -2
  2. package/dist/cjs/components/Drawer.js +10 -6
  3. package/dist/cjs/hooks/useStyles.js +25 -5
  4. package/dist/components/Choice.js +3 -3
  5. package/dist/components/Drawer.js +10 -6
  6. package/dist/hooks/useStyles.js +25 -5
  7. package/dist/types/components/Choice/Choice.d.ts +2 -3
  8. package/package.json +16 -17
package/dist/cjs/components/Choice.js CHANGED
@@ -52,7 +52,7 @@ var choiceConfig = {
52
52
  choiceConfig.appearance = newComponent;
53
53
  },
54
54
  };
55
- var Choice = React.forwardRef(function Choice(props, ref) {
55
+ function Choice(props) {
56
56
  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;
57
57
  var controlRef = React.useRef(null);
58
58
  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) {
87
87
  ? activeIconItemFill || item.activeIconItemFill
88
88
  : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));
89
89
  }) })) }));
90
- });
90
+ }
91
91
 
92
92
  exports.Choice = Choice;
93
93
  exports.choiceAppearance = choiceAppearance;
package/dist/cjs/components/Drawer.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
+ var React = require('react');
4
5
  var clsx = require('clsx');
5
6
  var ReactDrawer = require('react-modern-drawer');
6
7
 
@@ -15,14 +16,17 @@ var drawerConfig = {
15
16
  },
16
17
  };
17
18
  function Drawer(props) {
18
- var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
19
- // // @ts-expect-error
20
- // const appearanceConfig = drawerConfig.appearance && drawerConfig.appearance[appearance]
21
- // const classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig)
22
- // const {} = classGenerator
19
+ var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type, onClickClose = props.onClickClose, onClose = props.onClose;
20
+ var prevIsOpenModalRef = React.useRef(null);
21
+ React.useEffect(function () {
22
+ if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
23
+ onClose();
24
+ }
25
+ prevIsOpenModalRef.current = Boolean(isOpenModal);
26
+ }, [isOpenModal, onClose]);
23
27
  return (jsxRuntime.jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false,
24
28
  // @ts-expect-error
25
- open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
29
+ open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: onClickClose, children: [before && jsxRuntime.jsx("div", { className: "drawer__before", children: before }), children && jsxRuntime.jsx("div", { className: "drawer__wrapper", children: children }), after && jsxRuntime.jsx("div", { className: "drawer__after", children: after })] }));
26
30
  }
27
31
 
28
32
  exports.Drawer = Drawer;
package/dist/cjs/hooks/useStyles.js CHANGED
@@ -108,11 +108,31 @@ function useStyles(props) {
108
108
  }
109
109
  }
110
110
  if (value) {
111
- // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
112
- const HAS_UNIT = /\D/;
113
- const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
114
- if (!HAS_UNIT.test(value) && !ignorePX) {
115
- value = `${value}px`;
111
+ // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
112
+ const hasUnitRegExp = /\D/;
113
+ // If value has some unit
114
+ if (hasUnitRegExp.test(value)) {
115
+ // Check value on our custom "m"(module) unit
116
+ const hasModuleUnitRegExp = /^\d+m$/;
117
+ // If value has module unit
118
+ if (hasModuleUnitRegExp.test(value)) {
119
+ // Find numbers from value value
120
+ const numberMatchesList = value.match(/\d+/);
121
+ // If "numberMatchesList" not null (has matches)
122
+ if (numberMatchesList) {
123
+ // Parse module value to px value
124
+ const valueModule = parseFloat(numberMatchesList[0]);
125
+ const valuePx = valueModule * 8;
126
+ value = `${valuePx}px`;
127
+ }
128
+ }
129
+ } else {
130
+ // Some properties doesn't have any units
131
+ const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
132
+ if (!ignorePX) {
133
+ // Add px to non-unit value
134
+ value = `${value}px`;
135
+ }
116
136
  }
117
137
  if (styleAttributeKey.includes('Horizontal')) {
118
138
  const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
package/dist/components/Choice.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import React, { useRef, useMemo, createRef, useCallback } from 'react';
2
+ import { useRef, useMemo, createRef, useCallback } from 'react';
3
3
  import clsx from 'clsx';
4
4
  import { useDeviceTargetClassGenerator } from '../hooks/useDeviceTargetClassGenerator.js';
5
5
  import { I as Icon } from '../Icon-Dz1q9WC2.js';
@@ -50,7 +50,7 @@ var choiceConfig = {
50
50
  choiceConfig.appearance = newComponent;
51
51
  },
52
52
  };
53
- var Choice = React.forwardRef(function Choice(props, ref) {
53
+ function Choice(props) {
54
54
  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;
55
55
  var controlRef = useRef(null);
56
56
  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) {
85
85
  ? activeIconItemFill || item.activeIconItemFill
86
86
  : iconItemFill || item.iconItemFill })), after] })] }, "".concat(name, "-").concat(item.value)));
87
87
  }) })) }));
88
- });
88
+ }
89
89
 
90
90
  export { Choice, choiceAppearance, choiceConfig };
package/dist/components/Drawer.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useRef, useEffect } from 'react';
2
3
  import clsx from 'clsx';
3
4
  import ReactDrawer from 'react-modern-drawer';
4
5
 
@@ -13,14 +14,17 @@ var drawerConfig = {
13
14
  },
14
15
  };
15
16
  function Drawer(props) {
16
- var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, closeModal = props.closeModal, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type;
17
- // // @ts-expect-error
18
- // const appearanceConfig = drawerConfig.appearance && drawerConfig.appearance[appearance]
19
- // const classGenerator = useDeviceTargetClassGenerator(props, appearanceConfig)
20
- // const {} = classGenerator
17
+ var children = props.children, direction = props.direction, isOpenModal = props.isOpenModal, after = props.after, before = props.before, className = props.className, dataTour = props.dataTour, enableOverlay = props.enableOverlay, size = props.size, type = props.type, onClickClose = props.onClickClose, onClose = props.onClose;
18
+ var prevIsOpenModalRef = useRef(null);
19
+ useEffect(function () {
20
+ if (onClose && prevIsOpenModalRef.current === true && !isOpenModal) {
21
+ onClose();
22
+ }
23
+ prevIsOpenModalRef.current = Boolean(isOpenModal);
24
+ }, [isOpenModal, onClose]);
21
25
  return (jsxs(ReactDrawer, { className: clsx('drawer', type && "drawer_type_".concat(type), className, dataTour && "data-tour-".concat(dataTour)), direction: direction || 'right', enableOverlay: enableOverlay, lockBackgroundScroll: false,
22
26
  // @ts-expect-error
23
- open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: closeModal, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
27
+ open: isOpenModal, overlayClassName: "drawer__overlay", size: size || 600, onClose: onClickClose, children: [before && jsx("div", { className: "drawer__before", children: before }), children && jsx("div", { className: "drawer__wrapper", children: children }), after && jsx("div", { className: "drawer__after", children: after })] }));
24
28
  }
25
29
 
26
30
  export { Drawer, drawerAppearance, drawerConfig };
package/dist/hooks/useStyles.js CHANGED
@@ -106,11 +106,31 @@ function useStyles(props) {
106
106
  }
107
107
  }
108
108
  if (value) {
109
- // TODO: handle 16px/9px propValues for Horizontal(Left/Right) and Vertical(Top/Bottom)
110
- const HAS_UNIT = /\D/;
111
- const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
112
- if (!HAS_UNIT.test(value) && !ignorePX) {
113
- value = `${value}px`;
109
+ // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
110
+ const hasUnitRegExp = /\D/;
111
+ // If value has some unit
112
+ if (hasUnitRegExp.test(value)) {
113
+ // Check value on our custom "m"(module) unit
114
+ const hasModuleUnitRegExp = /^\d+m$/;
115
+ // If value has module unit
116
+ if (hasModuleUnitRegExp.test(value)) {
117
+ // Find numbers from value value
118
+ const numberMatchesList = value.match(/\d+/);
119
+ // If "numberMatchesList" not null (has matches)
120
+ if (numberMatchesList) {
121
+ // Parse module value to px value
122
+ const valueModule = parseFloat(numberMatchesList[0]);
123
+ const valuePx = valueModule * 8;
124
+ value = `${valuePx}px`;
125
+ }
126
+ }
127
+ } else {
128
+ // Some properties doesn't have any units
129
+ const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
130
+ if (!ignorePX) {
131
+ // Add px to non-unit value
132
+ value = `${value}px`;
133
+ }
114
134
  }
115
135
  if (styleAttributeKey.includes('Horizontal')) {
116
136
  const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
package/dist/types/components/Choice/Choice.d.ts CHANGED
@@ -1,5 +1,4 @@
1
- import React from 'react';
2
- import type { iChoiceConfig } from './Choice.interface';
1
+ import type { iChoiceConfig, iChoiceProps } from './Choice.interface';
3
2
  declare const choiceConfig: iChoiceConfig;
4
- declare const Choice: React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
3
+ declare function Choice(props: iChoiceProps): import("react/jsx-runtime").JSX.Element;
5
4
  export { Choice, choiceConfig };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/ui",
3
- "version": "1.3.14",
3
+ "version": "1.3.16",
4
4
  "description": "UI components (Modal, Loader, Popup, etc)",
5
5
  "keywords": [
6
6
  "Modal",
@@ -90,7 +90,7 @@
90
90
  "@itcase/icons": "^1.0.18",
91
91
  "clsx": "^2.1.1",
92
92
  "date-fns": "^4.1.0",
93
- "framer-motion": "^12.0.0",
93
+ "framer-motion": "^12.0.5",
94
94
  "js-cookie": "^3.0.5",
95
95
  "lodash": "^4.17.21",
96
96
  "rc-slider": "^11.1.8",
@@ -107,21 +107,20 @@
107
107
  "react-responsive": "^10.0.0",
108
108
  "react-scroll": "^1.9.0",
109
109
  "react-scrollbars-custom": "^4.1.1",
110
- "react-select": "^5.9.0",
110
+ "react-select": "^5.10.0",
111
111
  "swiper": "^11.2.1",
112
112
  "uuid": "^11.0.5"
113
113
  },
114
114
  "devDependencies": {
115
- "@babel/core": "^7.26.0",
115
+ "@babel/core": "^7.26.7",
116
116
  "@babel/eslint-parser": "^7.26.5",
117
117
  "@babel/eslint-plugin": "^7.25.9",
118
- "@babel/preset-env": "^7.26.0",
118
+ "@babel/preset-env": "^7.26.7",
119
119
  "@babel/preset-react": "^7.26.3",
120
120
  "@commitlint/cli": "^19.6.1",
121
121
  "@commitlint/config-conventional": "^19.6.0",
122
122
  "@itcase/icons": "^1.0.18",
123
123
  "@itcase/lint": "^1.0.36",
124
- "@itcase/ui": "^1.3.13",
125
124
  "@lehoczky/postcss-fluid": "^1.0.3",
126
125
  "@rollup/plugin-babel": "^6.0.4",
127
126
  "@rollup/plugin-commonjs": "^28.0.2",
@@ -133,14 +132,14 @@
133
132
  "@semantic-release/changelog": "^6.0.3",
134
133
  "@semantic-release/git": "^10.0.1",
135
134
  "@semantic-release/release-notes-generator": "14.0.3",
136
- "@storybook/addon-essentials": "^8.5.0",
137
- "@storybook/addon-interactions": "^8.5.0",
135
+ "@storybook/addon-essentials": "^8.5.1",
136
+ "@storybook/addon-interactions": "^8.5.1",
138
137
  "@storybook/addon-styling-webpack": "^1.0.1",
139
- "@storybook/addon-themes": "^8.5.0",
138
+ "@storybook/addon-themes": "^8.5.1",
140
139
  "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
141
- "@storybook/blocks": "^8.5.0",
142
- "@storybook/react": "^8.5.0",
143
- "@storybook/react-webpack5": "^8.5.0",
140
+ "@storybook/blocks": "^8.5.1",
141
+ "@storybook/react": "^8.5.1",
142
+ "@storybook/react-webpack5": "^8.5.1",
144
143
  "@types/js-cookie": "^3.0.6",
145
144
  "@types/lodash": "^4.17.14",
146
145
  "@types/react": "^19",
@@ -153,9 +152,9 @@
153
152
  "babel-plugin-react-docgen": "^4.2.1",
154
153
  "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
155
154
  "conventional-changelog-conventionalcommits": "^8.0.0",
156
- "eslint": "9.18.0",
155
+ "eslint": "9.19.0",
157
156
  "husky": "^9.1.7",
158
- "lint-staged": "^15.4.1",
157
+ "lint-staged": "^15.4.3",
159
158
  "npm": "^11.0.0",
160
159
  "postcss": "^8.5.1",
161
160
  "postcss-aspect-ratio-polyfill": "^2.0.0",
@@ -179,14 +178,14 @@
179
178
  "postcss-pxtorem": "^6.1.0",
180
179
  "postcss-sort-media-queries": "^5.2.0",
181
180
  "prettier": "^3.4.2",
182
- "rollup": "^4.31.0",
181
+ "rollup": "^4.32.0",
183
182
  "rollup-plugin-copy": "^3.5.0",
184
183
  "rollup-plugin-dts": "^6.1.1",
185
184
  "rollup-plugin-peer-deps-external": "^2.2.4",
186
185
  "rollup-preserve-directives": "^1.1.3",
187
186
  "semantic-release": "^24.2.1",
188
- "storybook": "^8.5.0",
189
- "stylelint": "^16.13.2",
187
+ "storybook": "^8.5.1",
188
+ "stylelint": "^16.14.0",
190
189
  "typescript": "^5.7.3"
191
190
  }
192
191
  }