@react5/ui 1.0.21 → 1.0.23

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 (28) hide show
  1. package/package.json +1 -1
  2. package/packages/app/package.json +16 -16
  3. package/packages/lib/.storybook/main.js +1 -1
  4. package/packages/lib/dist/esm/index.esm.css +8 -2
  5. package/packages/lib/dist/esm/index.esm.js +1 -1
  6. package/packages/lib/dist/esm/index.esm.js.map +1 -0
  7. package/packages/lib/dist/esm/index.esm.scss +11 -2
  8. package/packages/lib/dist/index.css +8 -2
  9. package/packages/lib/dist/index.js +1 -1
  10. package/packages/lib/dist/index.js.map +1 -0
  11. package/packages/lib/dist/index.scss +11 -2
  12. package/packages/lib/dist/types/hooks/use-click-outside.d.ts +1 -1
  13. package/packages/lib/dist/types/hooks/use-click-outside.d.ts.map +1 -1
  14. package/packages/lib/dist/types/hooks/use-keys-enteresc.d.ts +1 -1
  15. package/packages/lib/dist/types/hooks/use-keys-enteresc.d.ts.map +1 -1
  16. package/packages/lib/dist/types/hooks/use-set-startup-focus.d.ts +1 -1
  17. package/packages/lib/dist/types/hooks/use-set-startup-focus.d.ts.map +1 -1
  18. package/packages/lib/package.json +44 -52
  19. package/packages/lib/src/components/Button/Button.scss +8 -2
  20. package/packages/lib/src/components/Button/Button.tsx +1 -1
  21. package/packages/lib/src/components/IconButton/IconButton.tsx +1 -1
  22. package/packages/lib/src/components/MenuItem/MenuItem.tsx +1 -1
  23. package/packages/lib/src/hooks/use-click-outside.tsx +1 -1
  24. package/packages/lib/src/hooks/use-keys-enteresc.tsx +1 -1
  25. package/packages/lib/src/hooks/use-set-startup-focus.tsx +1 -1
  26. package/packages/lib/src/stories/Intrduction.mdx +0 -4
  27. package/packages/lib/src/styles/1-color-vars.scss +4 -0
  28. package/packages/ui-test/package.json +2 -2
package/packages/lib/dist/index.scss CHANGED
@@ -47,6 +47,9 @@ $error_validation_color: var(--error_validation_color, #b93214);
47
47
  $border_radius: var(--border_radius, 5px);
48
48
  $border_size: var(--border_size, 1px);
49
49
 
50
+ $disabled_bg_color: var(--disabled_bg_color, #e0e0e0);
51
+ $disabled_text_color: var(--disabled_text_color, #b0b0b0);
52
+ $disabled_border_color: var(--disabled_border_color, #d0d0d0);
50
53
  $primary_font: var(--primary_font, 'Nunito', sans-serif);
51
54
  $title_font: var(--title_font, 'Poppins', serif);
52
55
 
@@ -132,8 +135,14 @@ $title_font: var(--title_font, 'Poppins', serif);
132
135
  text-align: center;
133
136
  transition: color 0.3s ease;
134
137
  cursor: pointer;
138
+ &:disabled {
139
+ background-color: $disabled_bg_color;
140
+ color: $disabled_text_color;
141
+ border-color: $disabled_border_color;
142
+ cursor: not-allowed;
143
+ }
135
144
 
136
- &:hover {
145
+ &:not(:disabled):hover {
137
146
  color: $primary_text_color_highlight;
138
147
  }
139
148
 
@@ -155,7 +164,7 @@ $title_font: var(--title_font, 'Poppins', serif);
155
164
  font: inherit;
156
165
  cursor: pointer;
157
166
  //text-decoration: underline;
158
- &:hover {
167
+ &:not(:disabled):hover {
159
168
  color: $link_color_highlight;
160
169
  text-decoration: underline;
161
170
  }
package/packages/lib/dist/types/hooks/use-click-outside.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import { RefObject } from "react";
2
- export declare function useClickOutside(refs: RefObject<HTMLElement>[], onClickOutside: () => void): void;
2
+ export declare function useClickOutside(refs: RefObject<HTMLElement | null>[], onClickOutside: () => void): void;
3
3
  export default useClickOutside;
4
4
  //# sourceMappingURL=use-click-outside.d.ts.map
package/packages/lib/dist/types/hooks/use-click-outside.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,EAAE,cAAc,EAAE,MAAM,IAAI,QAezF;AAED,eAAe,eAAe,CAAC"}
1
+ {"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,wBAAgB,eAAe,CAAC,IAAI,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,EAAE,cAAc,EAAE,MAAM,IAAI,QAehG;AAED,eAAe,eAAe,CAAC"}
package/packages/lib/dist/types/hooks/use-keys-enteresc.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { RefObject } from "react";
2
- export declare function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement>, onOk: () => void, onCancel?: () => void): void;
2
+ export declare function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement | null>, onOk: () => void, onCancel?: () => void): void;
3
3
  //# sourceMappingURL=use-keys-enteresc.d.ts.map
package/packages/lib/dist/types/hooks/use-keys-enteresc.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-keys-enteresc.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keys-enteresc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,QAuB9G"}
1
+ {"version":3,"file":"use-keys-enteresc.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keys-enteresc.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,SAAS,CAAC,gBAAgB,GAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,EAAE,QAAQ,CAAC,EAAE,MAAM,IAAI,QAuBnH"}
package/packages/lib/dist/types/hooks/use-set-startup-focus.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { RefObject } from "react";
2
- export declare function useSetStartupFocus(inputRef: RefObject<HTMLElement>, enabled?: boolean): void;
2
+ export declare function useSetStartupFocus(inputRef: RefObject<HTMLElement | null>, enabled?: boolean): void;
3
3
  //# sourceMappingURL=use-set-startup-focus.d.ts.map
package/packages/lib/dist/types/hooks/use-set-startup-focus.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-set-startup-focus.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-set-startup-focus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,CAAC,EAAE,OAAO,GAAE,OAAc,QAM3F"}
1
+ {"version":3,"file":"use-set-startup-focus.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-set-startup-focus.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAE7C,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,OAAO,GAAE,OAAc,QAMlG"}
package/packages/lib/package.json CHANGED
@@ -14,79 +14,71 @@
14
14
  "author": "React5.com",
15
15
  "license": "MIT",
16
16
  "peerDependencies": {
17
- "react": ">=18",
18
- "react-dom": ">=18",
17
+ "react": ">=19",
18
+ "react-dom": ">=19",
19
19
  "clsx": "^2.1.1",
20
20
  "@react5/bem": "^0.4.3",
21
21
  "i18next": ">=23",
22
22
  "react-i18next": ">=15",
23
23
  "react-icons": ">=5",
24
- "react-router": ">=6",
25
- "react-router-dom": ">=6",
24
+ "react-router": ">=7",
26
25
  "@react5/time-span": "^0.3.34"
27
26
  },
28
27
  "devDependencies": {
29
- "@babel/core": "^7.26.10",
30
- "@babel/eslint-parser": "^7.26.10",
31
- "@babel/plugin-transform-runtime": "^7.26.10",
32
- "@babel/preset-env": "^7.26.9",
33
- "@babel/preset-react": "^7.26.3",
34
- "@babel/preset-typescript": "^7.26.0",
35
- "@babel/runtime": "^7.26.10",
36
- "@testing-library/react": "^16.2.0",
37
- "@types/jest": "^29.5.14",
38
- "@types/react": "^18.3.12",
39
- "@types/react-dom": "^18.3.1",
40
- "@typescript-eslint/eslint-plugin": "^8.27.0",
41
- "@typescript-eslint/parser": "^8.27.0",
42
- "eslint": "^9.22.0",
43
- "eslint-plugin-react": "^7.37.4",
44
- "eslint-plugin-prettier": "^5.2.3",
28
+ "@babel/core": "^7.27.4",
29
+ "@babel/eslint-parser": "^7.27.5",
30
+ "@babel/plugin-transform-runtime": "^7.27.4",
31
+ "@babel/preset-env": "^7.27.2",
32
+ "@babel/preset-react": "^7.27.1",
33
+ "@babel/preset-typescript": "^7.27.1",
34
+ "@babel/runtime": "^7.27.6",
35
+ "@testing-library/react": "^16.3.0",
36
+ "@types/jest": "^30.0.0",
37
+ "@types/react": "^19.1.8",
38
+ "@types/react-dom": "^19.1.6",
39
+ "@typescript-eslint/eslint-plugin": "^8.34.1",
40
+ "@typescript-eslint/parser": "^8.34.1",
41
+ "eslint": "^9.29.0",
42
+ "eslint-plugin-react": "^7.37.5",
43
+ "eslint-plugin-prettier": "^5.5.0",
45
44
  "eslint-plugin-react-hooks": "^5.2.0",
46
- "jest": "^29.7.0",
45
+ "jest": "^30.0.2",
47
46
  "prettier": "^3.5.3",
48
- "prettier-eslint": "^16.3.0",
47
+ "prettier-eslint": "^16.4.2",
49
48
  "prettier-eslint-cli": "^8.0.1",
50
- "react": "^18.3.1",
51
- "react-dom": "^18.3.1",
52
- "rimraf": "^6.0.1",
53
- "babel-jest": "^29.7.0",
54
- "ts-jest": "^29.2.6",
55
- "typescript": "^5.8.2",
49
+ "react": "^19.1.0",
50
+ "react-dom": "^19.1.0",
51
+ "babel-jest": "^30.0.2",
52
+ "ts-jest": "^29.4.0",
53
+ "typescript": "^5.8.3",
56
54
  "clsx": "^2.1.1",
57
55
  "@rollup/plugin-babel": "^6.0.4",
58
- "@rollup/plugin-commonjs": "^28.0.3",
56
+ "@rollup/plugin-commonjs": "^28.0.6",
59
57
  "@rollup/plugin-node-resolve": "^16.0.1",
60
58
  "@rollup/plugin-terser": "^0.4.4",
61
59
  "rollup-plugin-copy": "^3.5.0",
62
60
  "@rollup/plugin-json": "^6.1.0",
63
61
  "@svgr/rollup": "^8.1.0",
64
62
  "@react5/bundle-sass": "^0.5.8",
65
- "postcss": "^8.5.3",
66
- "rollup": "^4.36.0",
67
- "jest-environment-jsdom": "^29.7.0",
63
+ "postcss": "^8.5.6",
64
+ "rollup": "^4.44.0",
65
+ "jest-environment-jsdom": "^30.0.2",
68
66
  "npm-run-all": "^4.1.5",
69
- "sass-embedded": "^1.86.0",
70
- "i18next": "^24.2.3",
71
- "react-i18next": "^15.4.1",
67
+ "sass-embedded": "^1.89.2",
68
+ "i18next": "^25.2.1",
69
+ "react-i18next": "^15.5.3",
72
70
  "react-icons": "^5.5.0",
73
- "react-router": "^6.28.0",
74
- "react-router-dom": "^6.28.0",
75
- "@react5/time-span": "^0.3.34",
76
- "@chromatic-com/storybook": "^3.2.6",
77
- "@storybook/addon-essentials": "^8.6.7",
78
- "@storybook/addon-interactions": "^8.6.7",
79
- "@storybook/addon-links": "^8.6.7",
80
- "@storybook/addon-mdx-gfm": "^8.6.7",
81
- "@storybook/addon-onboarding": "^8.6.7",
82
- "@storybook/blocks": "^8.6.7",
83
- "@storybook/react": "^8.6.3",
84
- "@storybook/react-vite": "^8.6.3",
85
- "@storybook/test": "^8.6.7",
86
- "@vitejs/plugin-react": "^4.3.4",
87
- "eslint-plugin-storybook": "^0.11.6",
88
- "storybook": "^8.6.7",
89
- "vite": "^6.2.2",
71
+ "react-router": "^7.6.2",
72
+ "@react5/time-span": "^0.3.35",
73
+ "@chromatic-com/storybook": "^4.0.1",
74
+ "@storybook/addon-links": "^9.0.12",
75
+ "@storybook/addon-onboarding": "^9.0.12",
76
+ "@storybook/react": "^9.0.12",
77
+ "@storybook/react-vite": "^9.0.12",
78
+ "@vitejs/plugin-react": "^4.5.2",
79
+ "eslint-plugin-storybook": "^9.0.12",
80
+ "storybook": "^9.0.12",
81
+ "vite": "^6.3.5",
90
82
  "plop": "^4.0.1",
91
83
  "@testing-library/dom": "^10.4.0",
92
84
  "identity-obj-proxy": "^3.0.0",
package/packages/lib/src/components/Button/Button.scss CHANGED
@@ -12,8 +12,14 @@
12
12
  text-align: center;
13
13
  transition: color 0.3s ease;
14
14
  cursor: pointer;
15
+ &:disabled {
16
+ background-color: $disabled_bg_color;
17
+ color: $disabled_text_color;
18
+ border-color: $disabled_border_color;
19
+ cursor: not-allowed;
20
+ }
15
21
 
16
- &:hover {
22
+ &:not(:disabled):hover {
17
23
  color: $primary_text_color_highlight;
18
24
  }
19
25
 
@@ -35,7 +41,7 @@
35
41
  font: inherit;
36
42
  cursor: pointer;
37
43
  //text-decoration: underline;
38
- &:hover {
44
+ &:not(:disabled):hover {
39
45
  color: $link_color_highlight;
40
46
  text-decoration: underline;
41
47
  }
package/packages/lib/src/components/Button/Button.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { FormEvent, ReactNode, FC, MouseEvent } from 'react';
2
- import { Link } from 'react-router-dom';
2
+ import { Link } from 'react-router';
3
3
  import './Button.scss';
4
4
  import clsx from 'clsx';
5
5
  import { bem } from '../../utils/bem';
package/packages/lib/src/components/IconButton/IconButton.tsx CHANGED
@@ -2,7 +2,7 @@ import { FormEvent, MouseEvent, ReactNode } from 'react';
2
2
  import './IconButton.scss'
3
3
  import clsx from 'clsx';
4
4
  import { bem } from '../../utils/bem';
5
- import { Link } from 'react-router-dom';
5
+ import { Link } from 'react-router';
6
6
 
7
7
  interface IconButtonProps {
8
8
  onClick?: (e?: FormEvent<HTMLButtonElement>) => void;
package/packages/lib/src/components/MenuItem/MenuItem.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React, { ReactNode } from 'react';
2
- import { Link } from 'react-router-dom';
2
+ import { Link } from 'react-router';
3
3
  import './MenuItem.scss';
4
4
  import clsx from 'clsx';
5
5
  import { bem } from '../../utils/bem';
package/packages/lib/src/hooks/use-click-outside.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { RefObject, useEffect } from "react";
2
2
 
3
- export function useClickOutside(refs: RefObject<HTMLElement>[], onClickOutside: () => void) {
3
+ export function useClickOutside(refs: RefObject<HTMLElement | null>[], onClickOutside: () => void) {
4
4
  useEffect(() => {
5
5
  const handleClickOutside = (event: MouseEvent) => {
6
6
  const isOutside = refs.every(ref => ref.current && !ref.current.contains(event.target as Node));
package/packages/lib/src/hooks/use-keys-enteresc.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useEffect, RefObject } from "react";
2
2
 
3
- export function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement>, onOk: () => void, onCancel?: () => void) {
3
+ export function useKeysEneterEsc(inputRef: RefObject<HTMLInputElement|null>, onOk: () => void, onCancel?: () => void) {
4
4
 
5
5
  useEffect(() => {
6
6
  const handleKeyDown = (e: KeyboardEvent) => {
package/packages/lib/src/hooks/use-set-startup-focus.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import { RefObject, useEffect } from "react";
2
2
 
3
- export function useSetStartupFocus(inputRef: RefObject<HTMLElement>, enabled: boolean = true) {
3
+ export function useSetStartupFocus(inputRef: RefObject<HTMLElement | null>, enabled: boolean = true) {
4
4
  useEffect(() => {
5
5
  if (enabled && inputRef.current) {
6
6
  inputRef.current.focus();
package/packages/lib/src/stories/Intrduction.mdx CHANGED
@@ -1,7 +1,3 @@
1
- import { Meta } from "@storybook/blocks";
2
-
3
- <Meta title="Introduction" />
4
-
5
1
  <div className="sb-container">
6
2
  <div className='sb-section-title'>
7
3
  # Introduction
package/packages/lib/src/styles/1-color-vars.scss CHANGED
@@ -46,3 +46,7 @@ $error_validation_color: var(--error_validation_color, #b93214);
46
46
  // Border Properties
47
47
  $border_radius: var(--border_radius, 5px);
48
48
  $border_size: var(--border_size, 1px);
49
+
50
+ $disabled_bg_color: var(--disabled_bg_color, #e0e0e0);
51
+ $disabled_text_color: var(--disabled_text_color, #b0b0b0);
52
+ $disabled_border_color: var(--disabled_border_color, #d0d0d0);
package/packages/ui-test/package.json CHANGED
@@ -13,7 +13,7 @@
13
13
  "type": "commonjs",
14
14
  "description": "",
15
15
  "devDependencies": {
16
- "@playwright/test": "^1.50.1",
17
- "@types/node": "^22.13.5"
16
+ "@playwright/test": "^1.53.1",
17
+ "@types/node": "^24.0.3"
18
18
  }
19
19
  }