@kvdbil/components 17.3.0 → 17.3.2

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 (5) hide show
  1. package/README.md +5 -2
  2. package/cjs/components/Modal/index.js +8 -5
  3. package/esm/components/Modal/index.js +10 -7
  4. package/package.json +7 -8
  5. package/package.json.tmp +7 -8
package/README.md CHANGED
@@ -47,6 +47,9 @@ When adding new icons:
47
47
 
48
48
  ## Outdated dependencies
49
49
 
50
- - @types/react, @types/react-dom, react, react-dom, react-is - Waiting for React 19
50
+ - @types/react, @types/react-dom, react, react-dom, react-is - Big task (KVDBIL-5523)
51
51
  - react-day-picker - quite a big task (KVDBIL-3865)
52
- - eslint-plugin-mdx - depends on packages that uses cjs and not esm
52
+ - eslint-plugin-mdx - depends on packages that uses cjs and not esm
53
+ - storybook, @storybook/addon-themes, @storybook/react, @storybook/react-webpack5 - Big task (KVDBIL-6647)
54
+ - jest, jest-watch-typeahead, @types/jest - KVDBIL-6648
55
+ - react-router, react-router-dom - KVDBIL-6650
package/cjs/components/Modal/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),o=require("react-transition-group"),n=require("styled-components"),r=require("../../icons/components/CloseIcon.js"),a=require("../../utils/utils.js"),s=require("../FocusTrap.js");var d,l=(d=n)&&d.__esModule?d:{default:d};const c=n.css`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("react-dom"),o=require("react-transition-group"),n=require("styled-components"),r=require("../../icons/components/CloseIcon.js"),a=require("../../utils/utils.js"),s=require("../FocusTrap.js");var d,l=(d=n)&&d.__esModule?d:{default:d};const u=n.css`
2
2
  .backgroundTransition-enter {
3
3
  opacity: 0;
4
4
  }
@@ -16,14 +16,15 @@
16
16
  opacity: 0;
17
17
  transition: opacity 0.25s ease-in-out;
18
18
  }
19
- `,u=l.default.div`
20
- ${c}
19
+ `,c=l.default.div`
20
+ ${u}
21
21
  position: fixed;
22
22
  width: 100%;
23
23
  height: 100%;
24
24
  top: 0;
25
25
  left: 0;
26
26
  z-index: 200;
27
+ pointer-events: none;
27
28
  `,p=l.default.div`
28
29
  width: 100%;
29
30
  height: 100%;
@@ -36,6 +37,7 @@
36
37
  width: 100%;
37
38
  height: 100%;
38
39
  background-color: rgba(34, 34, 34, 0.3);
40
+ pointer-events: auto;
39
41
  `,b=l.default.div`
40
42
  position: relative;
41
43
  overflow-y: auto;
@@ -51,6 +53,7 @@
51
53
  margin: 1rem;
52
54
  width: 80vw;
53
55
  max-width: 512px;
56
+ pointer-events: auto;
54
57
  `,w=l.default.button`
55
58
  ${a.resetButtonStyle}
56
59
  display: flex;
@@ -74,5 +77,5 @@
74
77
  ${typeof window<"u"&&window.innerWidth>1024&&"\n padding-right: 15px !important;\n "}
75
78
  }
76
79
  `,h=n.createGlobalStyle`
77
- ${c}
78
- `,y=({children:n,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:c=!0,onClose:y,focusTrapProps:f={},...m})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&y()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[y,a]);const v=!!(typeof window<"u"&&window.document&&window.document.createElement),j=e.jsx(o.CSSTransition,{in:a,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:e.jsxs(e.Fragment,{children:[e.jsx(h,{}),e.jsxs(u,{...m,children:[e.jsx(x,{"data-testid":"background",onClick:y}),e.jsx(s.FocusTrap,{pause:!a,...f,children:e.jsx(p,{children:e.jsxs(b,{style:d,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[c&&e.jsx(w,{onClick:y,"data-testid":"close",type:"button","aria-label":"Close dialog",children:e.jsx(r.default,{})}),n]})})}),e.jsx(g,{})]})]})});return l&&v?i.createPortal(j,document.body):j};exports.Modal=y,exports.default=y;
80
+ ${u}
81
+ `,y=({children:n,isOpen:a,contentStyles:d,withPortal:l=!1,withCloseIcon:u=!0,onClose:y,focusTrapProps:f={},...m})=>{t.useEffect((()=>{const e=e=>{"Escape"===e.key&&a&&y()};return a&&window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}}),[y,a]);const v=!!(typeof window<"u"&&window.document&&window.document.createElement),j=e.jsx(o.CSSTransition,{in:a,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:e.jsxs(e.Fragment,{children:[e.jsx(h,{}),e.jsxs(c,{...m,children:[e.jsx(x,{"data-testid":"background",onClick:y}),e.jsx(s.FocusTrap,{pause:!a,...f,children:e.jsx(p,{children:e.jsxs(b,{style:d,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[u&&e.jsx(w,{onClick:y,"data-testid":"close",type:"button","aria-label":"Close dialog",children:e.jsx(r.default,{})}),n]})})}),e.jsx(g,{})]})]})});return l&&v?i.createPortal(j,document.body):j};exports.Modal=y,exports.default=y;
package/esm/components/Modal/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect as g}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import e,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
1
+ import{jsx as e,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect as g}from"react";import{createPortal as y}from"react-dom";import{CSSTransition as v}from"react-transition-group";import o,{css as k,createGlobalStyle as d}from"styled-components";import T from"../../icons/components/CloseIcon.js";import{resetButtonStyle as E}from"../../utils/utils.js";import{FocusTrap as C}from"../FocusTrap.js";const s=k`
2
2
  .backgroundTransition-enter {
3
3
  opacity: 0;
4
4
  }
@@ -16,7 +16,7 @@ import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect
16
16
  opacity: 0;
17
17
  transition: opacity 0.25s ease-in-out;
18
18
  }
19
- `,S=e.div`
19
+ `,S=o.div`
20
20
  ${s}
21
21
  position: fixed;
22
22
  width: 100%;
@@ -24,19 +24,21 @@ import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect
24
24
  top: 0;
25
25
  left: 0;
26
26
  z-index: 200;
27
- `,j=e.div`
27
+ pointer-events: none;
28
+ `,j=o.div`
28
29
  width: 100%;
29
30
  height: 100%;
30
31
  display: flex;
31
32
  align-items: center;
32
33
  justify-content: center;
33
- `,P=e.div`
34
+ `,P=o.div`
34
35
  z-index: -1;
35
36
  position: absolute;
36
37
  width: 100%;
37
38
  height: 100%;
38
39
  background-color: rgba(34, 34, 34, 0.3);
39
- `,z=e.div`
40
+ pointer-events: auto;
41
+ `,z=o.div`
40
42
  position: relative;
41
43
  overflow-y: auto;
42
44
 
@@ -51,7 +53,8 @@ import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect
51
53
  margin: 1rem;
52
54
  width: 80vw;
53
55
  max-width: 512px;
54
- `,F=e.button`
56
+ pointer-events: auto;
57
+ `,F=o.button`
55
58
  ${E}
56
59
  display: flex;
57
60
  justify-self: flex-end;
@@ -77,4 +80,4 @@ import{jsx as t,jsxs as n,Fragment as b}from"react/jsx-runtime";import{useEffect
77
80
  }
78
81
  `,L=d`
79
82
  ${s}
80
- `,c=({children:l,isOpen:o,contentStyles:p,withPortal:u=!1,withCloseIcon:m=!0,onClose:i,focusTrapProps:f={},...w})=>{g(()=>{const a=x=>{x.key==="Escape"&&o&&i()};return o&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,o]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=t(v,{in:o,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:n(b,{children:[t(L,{}),n(S,{...w,children:[t(P,{"data-testid":"background",onClick:i}),t(C,{pause:!o,...f,children:t(j,{children:n(z,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[m&&t(F,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:t(T,{})}),l]})})}),t(O,{})]})]})});return u&&h?y(r,document.body):r};export{c as Modal,c as default};
83
+ `,c=({children:l,isOpen:t,contentStyles:p,withPortal:u=!1,withCloseIcon:m=!0,onClose:i,focusTrapProps:f={},...w})=>{g(()=>{const a=x=>{x.key==="Escape"&&t&&i()};return t&&window.addEventListener("keydown",a),()=>{window.removeEventListener("keydown",a)}},[i,t]);const h=!!(typeof window<"u"&&window.document&&window.document.createElement),r=e(v,{in:t,mountOnEnter:!0,unmountOnExit:!0,timeout:400,classNames:"backgroundTransition",children:n(b,{children:[e(L,{}),n(S,{...w,children:[e(P,{"data-testid":"background",onClick:i}),e(C,{pause:!t,...f,children:e(j,{children:n(z,{style:p,role:"dialog","aria-modal":"true","aria-labelledby":"modal-title",children:[m&&e(F,{onClick:i,"data-testid":"close",type:"button","aria-label":"Close dialog",children:e(T,{})}),l]})})}),e(O,{})]})]})});return u&&h?y(r,document.body):r};export{c as Modal,c as default};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "17.3.0",
3
+ "version": "17.3.2",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -23,7 +23,7 @@
23
23
  "build:rollup": "rollup -c && cp package.json dist/",
24
24
  "build:storybook": "storybook build",
25
25
  "lint": "eslint --fix",
26
- "analyze": "rollup -c rollup.config.analyze.js",
26
+ "analyze": "rollup -c rollup.config.analyze.mjs",
27
27
  "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
28
28
  "prepare": "husky",
29
29
  "validate-code": "yarn type-check && yarn lint && yarn test && echo '✅ Code is valid!'",
@@ -48,8 +48,7 @@
48
48
  "not op_mini all"
49
49
  ],
50
50
  "resolutions": {
51
- "**/@types/react": "^18.3.12",
52
- "**/brace-expansion": "^1.1.12"
51
+ "**/@types/react": "^18.3.12"
53
52
  },
54
53
  "devDependencies": {
55
54
  "@babel/core": "^7.11.6",
@@ -72,7 +71,7 @@
72
71
  "@testing-library/react-hooks": "^8.0.1",
73
72
  "@testing-library/user-event": "^14.5.2",
74
73
  "@types/jest": "^29.5.12",
75
- "@types/node": "22.16.0",
74
+ "@types/node": "24.3.0",
76
75
  "@types/react": "^18.3.8",
77
76
  "@types/react-collapse": "^5.0.4",
78
77
  "@types/react-dom": "^18.3.0",
@@ -82,7 +81,7 @@
82
81
  "@typescript-eslint/parser": "^8.7.0",
83
82
  "babel-plugin-dynamic-import-node": "^2.3.3",
84
83
  "babel-plugin-styled-components": "^2.1.4",
85
- "cross-env": "^7.0.3",
84
+ "cross-env": "10.0.0",
86
85
  "date-fns": "^4.1.0",
87
86
  "esbuild": "^0.25.0",
88
87
  "eslint": "^9.32.0",
@@ -111,12 +110,12 @@
111
110
  "rollup": "^4.21.2",
112
111
  "rollup-plugin-esbuild": "^6.1.1",
113
112
  "rollup-plugin-multi-input": "^1.5.0",
114
- "rollup-plugin-visualizer": "^5.5.2",
113
+ "rollup-plugin-visualizer": "6.0.3",
115
114
  "standard-version": "^9.3.1",
116
115
  "storybook": "^8.3.2",
117
116
  "styled-components": "^6.1.13",
118
117
  "ts-jest": "^29.2.4",
119
- "typescript": "5.8.3"
118
+ "typescript": "5.9.2"
120
119
  },
121
120
  "description": "KVDBil components library",
122
121
  "repository": {
package/package.json.tmp CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kvdbil/components",
3
- "version": "17.3.0",
3
+ "version": "17.3.2",
4
4
  "sideEffects": false,
5
5
  "main": "cjs/index.js",
6
6
  "module": "esm/index.js",
@@ -23,7 +23,7 @@
23
23
  "build:rollup": "rollup -c && cp package.json dist/",
24
24
  "build:storybook": "storybook build",
25
25
  "lint": "eslint --fix",
26
- "analyze": "rollup -c rollup.config.analyze.js",
26
+ "analyze": "rollup -c rollup.config.analyze.mjs",
27
27
  "create-declaration": "yarn tsc --p tsconfig.production.json --emitDeclarationOnly --noEmit false --declaration true --declarationDir dist/types",
28
28
  "validate-code": "yarn type-check && yarn lint && yarn test && echo '✅ Code is valid!'",
29
29
  "publish-package": "./npm-publish.sh"
@@ -47,8 +47,7 @@
47
47
  "not op_mini all"
48
48
  ],
49
49
  "resolutions": {
50
- "**/@types/react": "^18.3.12",
51
- "**/brace-expansion": "^1.1.12"
50
+ "**/@types/react": "^18.3.12"
52
51
  },
53
52
  "devDependencies": {
54
53
  "@babel/core": "^7.11.6",
@@ -71,7 +70,7 @@
71
70
  "@testing-library/react-hooks": "^8.0.1",
72
71
  "@testing-library/user-event": "^14.5.2",
73
72
  "@types/jest": "^29.5.12",
74
- "@types/node": "22.16.0",
73
+ "@types/node": "24.3.0",
75
74
  "@types/react": "^18.3.8",
76
75
  "@types/react-collapse": "^5.0.4",
77
76
  "@types/react-dom": "^18.3.0",
@@ -81,7 +80,7 @@
81
80
  "@typescript-eslint/parser": "^8.7.0",
82
81
  "babel-plugin-dynamic-import-node": "^2.3.3",
83
82
  "babel-plugin-styled-components": "^2.1.4",
84
- "cross-env": "^7.0.3",
83
+ "cross-env": "10.0.0",
85
84
  "date-fns": "^4.1.0",
86
85
  "esbuild": "^0.25.0",
87
86
  "eslint": "^9.32.0",
@@ -110,12 +109,12 @@
110
109
  "rollup": "^4.21.2",
111
110
  "rollup-plugin-esbuild": "^6.1.1",
112
111
  "rollup-plugin-multi-input": "^1.5.0",
113
- "rollup-plugin-visualizer": "^5.5.2",
112
+ "rollup-plugin-visualizer": "6.0.3",
114
113
  "standard-version": "^9.3.1",
115
114
  "storybook": "^8.3.2",
116
115
  "styled-components": "^6.1.13",
117
116
  "ts-jest": "^29.2.4",
118
- "typescript": "5.8.3"
117
+ "typescript": "5.9.2"
119
118
  },
120
119
  "description": "KVDBil components library",
121
120
  "repository": {