@kimdw-rtk/ui 0.1.11 → 0.1.12

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 (14) hide show
  1. package/dist/components/Dialog/Dialog.cjs +1 -1
  2. package/dist/components/Dialog/Dialog.d.ts.map +1 -1
  3. package/dist/components/Dialog/Dialog.js +1 -1
  4. package/dist/components/Dialog/DialogContent.css.d.ts.map +1 -1
  5. package/dist/components/Dialog/DialogContent.css.ts.vanilla.css +0 -1
  6. package/dist/components/ScrollArea/ScrollArea.cjs +10 -0
  7. package/dist/components/ScrollArea/ScrollArea.css.d.ts.map +1 -1
  8. package/dist/components/ScrollArea/ScrollArea.css.ts.vanilla.css +1 -0
  9. package/dist/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  10. package/dist/components/ScrollArea/ScrollArea.js +10 -0
  11. package/dist/hooks/useMouseScroll/index.cjs +5 -3
  12. package/dist/hooks/useMouseScroll/index.d.ts.map +1 -1
  13. package/dist/hooks/useMouseScroll/index.js +5 -3
  14. package/package.json +1 -1
package/dist/components/Dialog/Dialog.cjs CHANGED
@@ -8,7 +8,7 @@ var index = require('../Box/index.cjs');
8
8
  var sx = require('../../styles/sx.cjs');
9
9
 
10
10
  const Dialog = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
11
- return (jsxRuntime.jsx(index.Box, { ref: ref, boxShadow: "border-sm", className: clsx.clsx(Dialog_css.container, className, sx.sx(propSx)), flexDirection: "row", gap: "lg", flex: true, ...props, children: children }));
11
+ return (jsxRuntime.jsx(index.Box, { ref: ref, boxShadow: "border-sm", className: clsx.clsx(Dialog_css.container, className, sx.sx(propSx)), flexDirection: "row", gap: "lg", padding: "xl", flex: true, ...props, children: children }));
12
12
  });
13
13
  Dialog.displayName = 'Dialog';
14
14
 
package/dist/components/Dialog/Dialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAgBlB,CAAC"}
1
+ {"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAiBlB,CAAC"}
package/dist/components/Dialog/Dialog.js CHANGED
@@ -6,7 +6,7 @@ import { Box } from '../Box/index.js';
6
6
  import { sx } from '../../styles/sx.js';
7
7
 
8
8
  const Dialog = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
9
- return (jsx(Box, { ref: ref, boxShadow: "border-sm", className: clsx(container, className, sx(propSx)), flexDirection: "row", gap: "lg", flex: true, ...props, children: children }));
9
+ return (jsx(Box, { ref: ref, boxShadow: "border-sm", className: clsx(container, className, sx(propSx)), flexDirection: "row", gap: "lg", padding: "xl", flex: true, ...props, children: children }));
10
10
  });
11
11
  Dialog.displayName = 'Dialog';
12
12
 
package/dist/components/Dialog/DialogContent.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DialogContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAUpB,CAAC"}
1
+ {"version":3,"file":"DialogContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAQpB,CAAC"}
package/dist/components/Dialog/DialogContent.css.ts.vanilla.css CHANGED
@@ -1,7 +1,6 @@
1
1
  @layer components;
2
2
  @layer components {
3
3
  .DialogContent_styleWithLayer__1v0lk0e0 {
4
- padding: 0 1.5rem 1.5rem 1.5rem;
5
4
  word-break: break-all;
6
5
  }
7
6
  .DialogHeader_styleWithLayer__jb8ns00 + .DialogContent_styleWithLayer__1v0lk0e0 {
package/dist/components/ScrollArea/ScrollArea.cjs CHANGED
@@ -20,6 +20,14 @@ const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props
20
20
  if (element === null) {
21
21
  return;
22
22
  }
23
+ const handleWheel = (e) => {
24
+ if (element.scrollLeft + e.deltaY <= 0 ||
25
+ Math.round(element.scrollLeft + e.deltaY + element.clientWidth) >=
26
+ element.scrollWidth) {
27
+ return;
28
+ }
29
+ e.preventDefault();
30
+ };
23
31
  const handleScroll = () => {
24
32
  setHasLeftSpace(element.scrollLeft !== 0);
25
33
  setHasRightSpace(Math.round(element.scrollLeft + element.clientWidth) <
@@ -27,8 +35,10 @@ const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props
27
35
  };
28
36
  handleScroll();
29
37
  element.addEventListener('scroll', handleScroll);
38
+ element.addEventListener('wheel', handleWheel);
30
39
  return () => {
31
40
  element.removeEventListener('scroll', handleScroll);
41
+ element.removeEventListener('wheel', handleWheel);
32
42
  };
33
43
  }, []);
34
44
  return (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), hasLeftSpace && hasRightSpace && ScrollArea_css.maskBoth, hasLeftSpace && ScrollArea_css.maskLeft, hasRightSpace && ScrollArea_css.maskRight), ...props, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
package/dist/components/ScrollArea/ScrollArea.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC"}
1
+ {"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC"}
package/dist/components/ScrollArea/ScrollArea.css.ts.vanilla.css CHANGED
@@ -25,6 +25,7 @@ transparent 100%);
25
25
  .ScrollArea_styleWithLayer__m6lfro0 {
26
26
  width: 100%;
27
27
  overflow-x: scroll;
28
+ user-select: none;
28
29
  }
29
30
  .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
30
31
  display: none;
package/dist/components/ScrollArea/ScrollArea.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHAiDtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
1
+ {"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHA+DtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
package/dist/components/ScrollArea/ScrollArea.js CHANGED
@@ -20,6 +20,14 @@ const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, re
20
20
  if (element === null) {
21
21
  return;
22
22
  }
23
+ const handleWheel = (e) => {
24
+ if (element.scrollLeft + e.deltaY <= 0 ||
25
+ Math.round(element.scrollLeft + e.deltaY + element.clientWidth) >=
26
+ element.scrollWidth) {
27
+ return;
28
+ }
29
+ e.preventDefault();
30
+ };
23
31
  const handleScroll = () => {
24
32
  setHasLeftSpace(element.scrollLeft !== 0);
25
33
  setHasRightSpace(Math.round(element.scrollLeft + element.clientWidth) <
@@ -27,8 +35,10 @@ const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, re
27
35
  };
28
36
  handleScroll();
29
37
  element.addEventListener('scroll', handleScroll);
38
+ element.addEventListener('wheel', handleWheel);
30
39
  return () => {
31
40
  element.removeEventListener('scroll', handleScroll);
41
+ element.removeEventListener('wheel', handleWheel);
32
42
  };
33
43
  }, []);
34
44
  return (jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && maskBoth, hasLeftSpace && maskLeft, hasRightSpace && maskRight), ...props, children: jsx("div", { className: wrapper, children: children }) }));
package/dist/hooks/useMouseScroll/index.cjs CHANGED
@@ -9,12 +9,12 @@ var react = require('react');
9
9
  const useMouseScroll = (ref) => {
10
10
  react.useEffect(() => {
11
11
  const element = ref.current;
12
- let isDown = false, startX = 0, startLeft = 0;
12
+ let isDown = false, startX = 0, startLeft = 0, currentLeft = element?.scrollLeft ?? 0;
13
13
  if (element === null) {
14
14
  return;
15
15
  }
16
16
  const handleMouseDown = (e) => {
17
- if (!element.contains(e.target)) {
17
+ if (!element.contains(e.target) || e.button === 1) {
18
18
  return;
19
19
  }
20
20
  isDown = true;
@@ -26,13 +26,15 @@ const useMouseScroll = (ref) => {
26
26
  return;
27
27
  }
28
28
  element.scrollLeft = startLeft + startX - e.x;
29
+ currentLeft = element.scrollLeft;
29
30
  };
30
31
  const handleMouseUp = () => {
31
32
  isDown = false;
32
33
  };
33
34
  const handleWheel = (e) => {
35
+ currentLeft = Math.min(Math.max(0, currentLeft + e.deltaY), element.scrollWidth);
34
36
  element.scrollTo({
35
- left: element.scrollLeft + e.deltaY,
37
+ left: currentLeft,
36
38
  behavior: 'smooth',
37
39
  });
38
40
  };
package/dist/hooks/useMouseScroll/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseScroll/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1E,KAAK,CAAC,KACL,IAqDF,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseScroll/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1E,KAAK,CAAC,KACL,IA2DF,CAAC"}
package/dist/hooks/useMouseScroll/index.js CHANGED
@@ -7,12 +7,12 @@ import { useEffect } from 'react';
7
7
  const useMouseScroll = (ref) => {
8
8
  useEffect(() => {
9
9
  const element = ref.current;
10
- let isDown = false, startX = 0, startLeft = 0;
10
+ let isDown = false, startX = 0, startLeft = 0, currentLeft = element?.scrollLeft ?? 0;
11
11
  if (element === null) {
12
12
  return;
13
13
  }
14
14
  const handleMouseDown = (e) => {
15
- if (!element.contains(e.target)) {
15
+ if (!element.contains(e.target) || e.button === 1) {
16
16
  return;
17
17
  }
18
18
  isDown = true;
@@ -24,13 +24,15 @@ const useMouseScroll = (ref) => {
24
24
  return;
25
25
  }
26
26
  element.scrollLeft = startLeft + startX - e.x;
27
+ currentLeft = element.scrollLeft;
27
28
  };
28
29
  const handleMouseUp = () => {
29
30
  isDown = false;
30
31
  };
31
32
  const handleWheel = (e) => {
33
+ currentLeft = Math.min(Math.max(0, currentLeft + e.deltaY), element.scrollWidth);
32
34
  element.scrollTo({
33
- left: element.scrollLeft + e.deltaY,
35
+ left: currentLeft,
34
36
  behavior: 'smooth',
35
37
  });
36
38
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kimdw-rtk/ui",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "imports": {