@ttoss/components 2.4.5 → 2.5.1

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 (7) hide show
  1. package/dist/Menu/index.d.ts +3 -24
  2. package/dist/esm/Menu/index.js +112 -118
  3. package/dist/esm/NotificationCard/index.js +2 -2
  4. package/dist/esm/NotificationsMenu/index.js +2 -2
  5. package/dist/esm/{chunk-AZTAV4VC.js → chunk-2R7AUPJL.js} +2 -2
  6. package/dist/esm/{chunk-GOISZ4AR.js → chunk-4GBVRL7E.js} +1 -1
  7. package/package.json +30 -30
package/dist/Menu/index.d.ts CHANGED
@@ -1,32 +1,11 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { IconifyIcon } from '@ttoss/react-icons';
3
- import { BoxProps } from '@ttoss/ui';
4
2
  import * as React from 'react';
5
3
 
6
4
  type MenuProps = {
7
- onClose: () => void;
8
- onOpen: () => void;
9
- isOpen: boolean;
10
5
  children: React.ReactNode;
11
- srcLogo?: string;
12
- sx?: BoxProps['sx'];
13
- /**
14
- * Default direction: `left`
15
- */
16
- direction?: 'left' | 'right';
17
- /**
18
- * Default size: `100%`
19
- */
20
- sizeOnMobile?: string | number;
21
- /**
22
- * Default size: `300px`
23
- */
24
- sizeOnDesktop?: string | number;
25
- /**
26
- * Default icon: `menu-open`
27
- */
28
- menuIcon?: IconifyIcon | string;
6
+ sx?: Record<string, unknown>;
7
+ menuIcon?: string;
29
8
  };
30
- declare const Menu: ({ children, srcLogo, onClose, onOpen, isOpen, sx, direction, sizeOnDesktop, sizeOnMobile, menuIcon, }: MenuProps) => react_jsx_runtime.JSX.Element;
9
+ declare const Menu: ({ children, sx, menuIcon }: MenuProps) => react_jsx_runtime.JSX.Element;
31
10
 
32
11
  export { Menu, type MenuProps };
package/dist/esm/Menu/index.js CHANGED
@@ -1,137 +1,131 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { Icon } from "../chunk-AZTAV4VC.js";
2
+ import { Icon } from "../chunk-2R7AUPJL.js";
3
3
  import { __name } from "../chunk-V4MHYKRI.js";
4
4
 
5
5
  // src/components/Menu/Menu.tsx
6
- import { Box as Box2, Flex, Image, Text, useResponsiveValue } from "@ttoss/ui";
7
- import * as React2 from "react";
8
-
9
- // src/components/Drawer/Drawer.tsx
10
- import { Box } from "@ttoss/ui";
6
+ import { Box, Flex } from "@ttoss/ui";
11
7
  import * as React from "react";
12
- import DrawerUi from "react-modern-drawer";
13
- var Drawer = /* @__PURE__ */__name(({
14
- children,
15
- sx,
16
- ...props
17
- }) => {
18
- return /* @__PURE__ */React.createElement(Box, {
19
- "data-testid": "drawer-container",
20
- sx: {
21
- /**
22
- * https://github.com/Farzin-Firoozi/react-modern-drawer/blob/master/src/styles.css
23
- */
24
- zIndex: "overlay",
25
- width: "100%",
26
- height: "100%",
27
- ".EZDrawer__checkbox": {
28
- display: "none"
29
- },
30
- ".EZDrawer__checkbox:checked ~ .EZDrawer__overlay": {
31
- display: "block",
32
- opacity: 1
33
- },
34
- ".EZDrawer__checkbox:checked ~ .EZDrawer__container": {
35
- visibility: "visible",
36
- transform: "translate3d(0, 0, 0) !important"
37
- },
38
- ".EZDrawer__overlay ": {
39
- display: "none",
40
- height: "100vh",
41
- left: "0",
42
- position: "fixed",
43
- top: "0",
44
- width: "100%"
45
- },
46
- ".EZDrawer__container": {
47
- position: "fixed",
48
- visibility: "hidden",
49
- backgroundColor: "navigation.background.muted.default",
50
- transition: "all",
51
- boxShadow: "0 0 10px 5px rgba(0, 0, 0, 0.1)",
52
- paddingX: "6",
53
- overflowY: "auto"
54
- },
55
- ...sx
56
- }
57
- }, /* @__PURE__ */React.createElement(DrawerUi, props, /* @__PURE__ */React.createElement(Box, {
58
- sx: {
59
- width: "100%",
60
- height: "100%"
61
- }
62
- }, children)));
63
- }, "Drawer");
64
-
65
- // src/components/Menu/Menu.tsx
66
8
  var Menu = /* @__PURE__ */__name(({
67
9
  children,
68
- srcLogo,
69
- onClose,
70
- onOpen,
71
- isOpen,
72
10
  sx,
73
- direction = "left",
74
- sizeOnDesktop = "300px",
75
- sizeOnMobile = "100%",
76
11
  menuIcon = "menu-open"
77
12
  }) => {
78
- const responsiveSize = useResponsiveValue([sizeOnMobile, sizeOnDesktop]);
79
- return /* @__PURE__ */React2.createElement(React2.Fragment, null, /* @__PURE__ */React2.createElement(Text, {
80
- sx: {
81
- cursor: "pointer"
82
- },
83
- onClick: onOpen
84
- }, /* @__PURE__ */React2.createElement(Icon, {
85
- icon: menuIcon
86
- })), /* @__PURE__ */React2.createElement(Drawer, {
87
- size: responsiveSize,
88
- direction,
89
- open: isOpen
90
- }, /* @__PURE__ */React2.createElement(Box2, {
13
+ const [isOpen, setIsOpen] = React.useState(false);
14
+ const [stylePos, setStylePos] = React.useState({});
15
+ const triggerRef = React.useRef(null);
16
+ const panelRef = React.useRef(null);
17
+ const toggle = /* @__PURE__ */__name(() => {
18
+ return setIsOpen(v => {
19
+ return !v;
20
+ });
21
+ }, "toggle");
22
+ React.useEffect(() => {
23
+ if (!isOpen) return;
24
+ const onDocClick = /* @__PURE__ */__name(e => {
25
+ const t = e.target;
26
+ if (panelRef.current && !panelRef.current.contains(t) && triggerRef.current && !triggerRef.current.contains(t)) {
27
+ setIsOpen(false);
28
+ }
29
+ }, "onDocClick");
30
+ document.addEventListener("mousedown", onDocClick);
31
+ return () => {
32
+ return document.removeEventListener("mousedown", onDocClick);
33
+ };
34
+ }, [isOpen]);
35
+ React.useLayoutEffect(() => {
36
+ if (!isOpen) return;
37
+ let rafId = 0;
38
+ const getWidth = /* @__PURE__ */__name(() => {
39
+ const w = sx?.width ?? sx?.maxWidth ?? sx?.minWidth;
40
+ return Array.isArray(w) ? w[w.length - 1] : w;
41
+ }, "getWidth");
42
+ const compute = /* @__PURE__ */__name(() => {
43
+ const trigger = triggerRef.current;
44
+ const panel2 = panelRef.current;
45
+ if (!trigger || !panel2) return;
46
+ const width = getWidth();
47
+ if (width) panel2.style.width = typeof width === "number" ? `${width}px` : String(width);
48
+ const tr = trigger.getBoundingClientRect();
49
+ const pr = panel2.getBoundingClientRect();
50
+ const vw = window.innerWidth,
51
+ vh = window.innerHeight,
52
+ m = 8;
53
+ if (pr.width === 0) {
54
+ rafId = requestAnimationFrame(compute);
55
+ return;
56
+ }
57
+ const left = Math.max(m, Math.min(tr.left + tr.width / 2 - pr.width / 2, vw - pr.width - m));
58
+ const top = vh - tr.bottom < pr.height + m ? Math.max(m, tr.top - pr.height - m) : tr.bottom + m;
59
+ setStylePos({
60
+ position: "fixed",
61
+ left: `${left}px`,
62
+ top: `${top}px`,
63
+ zIndex: 9999,
64
+ ...(width && {
65
+ width: typeof width === "number" ? `${width}px` : String(width)
66
+ })
67
+ });
68
+ }, "compute");
69
+ rafId = requestAnimationFrame(compute);
70
+ const onResizeScroll = /* @__PURE__ */__name(() => {
71
+ return rafId = requestAnimationFrame(compute);
72
+ }, "onResizeScroll");
73
+ window.addEventListener("resize", onResizeScroll);
74
+ window.addEventListener("scroll", onResizeScroll, true);
75
+ return () => {
76
+ cancelAnimationFrame(rafId);
77
+ window.removeEventListener("resize", onResizeScroll);
78
+ window.removeEventListener("scroll", onResizeScroll, true);
79
+ };
80
+ }, [isOpen, children, sx]);
81
+ const panel = isOpen ? /* @__PURE__ */React.createElement(Flex, {
82
+ ref: panelRef,
91
83
  sx: {
92
- position: "fixed",
93
- height: "100%",
94
- backgroundColor: "background",
95
- width: "100%",
96
- maxWidth: "2",
97
- right: 0,
98
- boxShadow: "4",
99
- paddingX: "5",
100
- paddingTop: "4",
101
- paddingBottom: "6",
84
+ width: ["280px", "320px"],
85
+ maxHeight: "400px",
86
+ flexDirection: "column",
87
+ gap: "3",
88
+ padding: "3",
89
+ backgroundColor: "input.background.muted.default",
90
+ borderRadius: "xl",
91
+ boxShadow: "xl",
92
+ overflowY: "auto",
93
+ border: "md",
94
+ borderColor: "display.border.muted.default",
102
95
  ...sx
96
+ },
97
+ style: {
98
+ pointerEvents: "auto",
99
+ ...stylePos
103
100
  }
104
- }, /* @__PURE__ */React2.createElement(Flex, {
101
+ }, /* @__PURE__ */React.createElement(Box, {
102
+ as: "nav"
103
+ }, children)) : null;
104
+ return /* @__PURE__ */React.createElement(Flex, {
105
105
  sx: {
106
- justifyContent: "space-between"
106
+ position: "relative",
107
+ display: "inline-block"
107
108
  }
108
- }, /* @__PURE__ */React2.createElement(Image, {
109
- src: srcLogo,
110
- sx: {
111
- maxWidth: "200px",
112
- height: "44px",
113
- objectFit: "cover"
114
- },
115
- "data-testid": "img"
116
- }), /* @__PURE__ */React2.createElement(Text, {
117
- "data-testid": "button",
109
+ }, /* @__PURE__ */React.createElement(Box, {
118
110
  sx: {
119
- marginLeft: "auto",
120
- fontSize: "2xl",
121
- alignSelf: "center",
122
- flexShrink: 0,
111
+ position: "relative"
112
+ }
113
+ }, /* @__PURE__ */React.createElement("button", {
114
+ ref: triggerRef,
115
+ onClick: toggle,
116
+ "aria-haspopup": "true",
117
+ "aria-expanded": isOpen,
118
+ style: {
119
+ background: "transparent",
120
+ border: 0,
121
+ padding: 4,
123
122
  cursor: "pointer",
124
- lineHeight: 0
125
- },
126
- role: "button",
127
- onClick: onClose
128
- }, /* @__PURE__ */React2.createElement(Icon, {
129
- icon: "close"
130
- }))), /* @__PURE__ */React2.createElement(Box2, {
131
- sx: {
132
- paddingTop: "6"
133
- },
134
- as: "nav"
135
- }, children))));
123
+ display: "inline-flex",
124
+ alignItems: "center",
125
+ justifyContent: "center"
126
+ }
127
+ }, /* @__PURE__ */React.createElement(Icon, {
128
+ icon: menuIcon
129
+ })), isOpen && panel));
136
130
  }, "Menu");
137
131
  export { Menu };
package/dist/esm/NotificationCard/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { NotificationCard } from "../chunk-GOISZ4AR.js";
3
- import "../chunk-AZTAV4VC.js";
2
+ import { NotificationCard } from "../chunk-4GBVRL7E.js";
3
+ import "../chunk-2R7AUPJL.js";
4
4
  import "../chunk-V4MHYKRI.js";
5
5
  export { NotificationCard };
package/dist/esm/NotificationsMenu/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { NotificationCard } from "../chunk-GOISZ4AR.js";
3
- import { Icon } from "../chunk-AZTAV4VC.js";
2
+ import { NotificationCard } from "../chunk-4GBVRL7E.js";
3
+ import { Icon } from "../chunk-2R7AUPJL.js";
4
4
  import { __name } from "../chunk-V4MHYKRI.js";
5
5
 
6
6
  // src/components/NotificationsMenu/NotificationsMenu.tsx
package/dist/esm/{chunk-AZTAV4VC.js → chunk-2R7AUPJL.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
2
  import { __name } from "./chunk-V4MHYKRI.js";
3
3
 
4
- // ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.1.1/node_modules/@iconify-icon/react/dist/iconify.mjs
4
+ // ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
5
5
  import React from "react";
6
6
 
7
7
  // ../../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
@@ -2130,7 +2130,7 @@ var {
2130
2130
  _api
2131
2131
  } = IconifyIconComponent;
2132
2132
 
2133
- // ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.1.1/node_modules/@iconify-icon/react/dist/iconify.mjs
2133
+ // ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.0/node_modules/@iconify-icon/react/dist/iconify.mjs
2134
2134
  var Icon = React.forwardRef((props, ref) => {
2135
2135
  const newProps = {
2136
2136
  ...props,
package/dist/esm/{chunk-GOISZ4AR.js → chunk-4GBVRL7E.js} RENAMED
@@ -1,5 +1,5 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { Icon } from "./chunk-AZTAV4VC.js";
2
+ import { Icon } from "./chunk-2R7AUPJL.js";
3
3
  import { __name } from "./chunk-V4MHYKRI.js";
4
4
 
5
5
  // src/components/NotificationCard/NotificationCard.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "2.4.5",
3
+ "version": "2.5.1",
4
4
  "description": "React components for ttoss ecosystem.",
5
5
  "license": "MIT",
6
6
  "author": "ttoss",
@@ -16,67 +16,67 @@
16
16
  "exports": {
17
17
  "./Accordion": {
18
18
  "types": "./dist/Accordion/index.d.ts",
19
- "import": "./dist/esm/Accordion/index.js"
19
+ "default": "./dist/esm/Accordion/index.js"
20
20
  },
21
21
  "./Drawer": {
22
22
  "types": "./dist/Drawer/index.d.ts",
23
- "import": "./dist/esm/Drawer/index.js"
23
+ "default": "./dist/esm/Drawer/index.js"
24
24
  },
25
25
  "./InstallPwa": {
26
26
  "types": "./dist/InstallPwa/index.d.ts",
27
- "import": "./dist/esm/InstallPwa/index.js"
27
+ "default": "./dist/esm/InstallPwa/index.js"
28
28
  },
29
29
  "./FileUploader": {
30
30
  "types": "./dist/FileUploader/index.d.ts",
31
- "import": "./dist/esm/FileUploader/index.js"
31
+ "default": "./dist/esm/FileUploader/index.js"
32
32
  },
33
33
  "./JsonEditor": {
34
34
  "types": "./dist/JsonEditor/index.d.ts",
35
- "import": "./dist/esm/JsonEditor/index.js"
35
+ "default": "./dist/esm/JsonEditor/index.js"
36
36
  },
37
37
  "./JsonView": {
38
38
  "types": "./dist/JsonView/index.d.ts",
39
- "import": "./dist/esm/JsonView/index.js"
39
+ "default": "./dist/esm/JsonView/index.js"
40
40
  },
41
41
  "./List": {
42
42
  "types": "./dist/List/index.d.ts",
43
- "import": "./dist/esm/List/index.js"
43
+ "default": "./dist/esm/List/index.js"
44
44
  },
45
45
  "./Markdown": {
46
46
  "types": "./dist/Markdown/index.d.ts",
47
- "import": "./dist/esm/Markdown/index.js"
47
+ "default": "./dist/esm/Markdown/index.js"
48
48
  },
49
49
  "./Menu": {
50
50
  "types": "./dist/Menu/index.d.ts",
51
- "import": "./dist/esm/Menu/index.js"
51
+ "default": "./dist/esm/Menu/index.js"
52
52
  },
53
53
  "./Modal": {
54
54
  "types": "./dist/Modal/index.d.ts",
55
- "import": "./dist/esm/Modal/index.js"
55
+ "default": "./dist/esm/Modal/index.js"
56
56
  },
57
57
  "./NotificationCard": {
58
58
  "types": "./dist/NotificationCard/index.d.ts",
59
- "import": "./dist/esm/NotificationCard/index.js"
59
+ "default": "./dist/esm/NotificationCard/index.js"
60
60
  },
61
61
  "./NotificationsMenu": {
62
62
  "types": "./dist/NotificationsMenu/index.d.ts",
63
- "import": "./dist/esm/NotificationsMenu/index.js"
63
+ "default": "./dist/esm/NotificationsMenu/index.js"
64
64
  },
65
65
  "./Search": {
66
66
  "types": "./dist/Search/index.d.ts",
67
- "import": "./dist/esm/Search/index.js"
67
+ "default": "./dist/esm/Search/index.js"
68
68
  },
69
69
  "./Table": {
70
70
  "types": "./dist/Table/index.d.ts",
71
- "import": "./dist/esm/Table/index.js"
71
+ "default": "./dist/esm/Table/index.js"
72
72
  },
73
73
  "./Tabs": {
74
74
  "types": "./dist/Tabs/index.d.ts",
75
- "import": "./dist/esm/Tabs/index.js"
75
+ "default": "./dist/esm/Tabs/index.js"
76
76
  },
77
77
  "./Toast": {
78
78
  "types": "./dist/Toast/index.d.ts",
79
- "import": "./dist/esm/Toast/index.js"
79
+ "default": "./dist/esm/Toast/index.js"
80
80
  }
81
81
  },
82
82
  "files": [
@@ -101,24 +101,24 @@
101
101
  },
102
102
  "peerDependencies": {
103
103
  "react": ">=16.8.0",
104
- "@ttoss/react-i18n": "^2.0.18",
105
- "@ttoss/react-hooks": "^2.1.4",
106
- "@ttoss/ui": "^5.10.2"
104
+ "@ttoss/react-hooks": "^2.1.5",
105
+ "@ttoss/ui": "^5.10.3",
106
+ "@ttoss/react-i18n": "^2.0.19"
107
107
  },
108
108
  "devDependencies": {
109
109
  "@types/jest": "^30.0.0",
110
- "@types/react": "^19.1.8",
111
- "jest": "^30.0.4",
112
- "react": "^19.1.0",
110
+ "@types/react": "^19.2.2",
111
+ "jest": "^30.2.0",
112
+ "react": "^19.2.0",
113
113
  "tsup": "^8.5.0",
114
114
  "tsx": "^4.19.2",
115
- "@ttoss/i18n-cli": "^0.7.34",
116
- "@ttoss/config": "^1.35.8",
117
- "@ttoss/react-i18n": "^2.0.18",
118
- "@ttoss/ui": "^5.10.2",
119
- "@ttoss/react-icons": "^0.4.17",
120
- "@ttoss/test-utils": "^2.1.28",
121
- "@ttoss/react-hooks": "^2.1.4"
115
+ "@ttoss/config": "^1.35.9",
116
+ "@ttoss/i18n-cli": "^0.7.35",
117
+ "@ttoss/react-hooks": "^2.1.5",
118
+ "@ttoss/react-i18n": "^2.0.19",
119
+ "@ttoss/react-icons": "^0.4.18",
120
+ "@ttoss/ui": "^5.10.3",
121
+ "@ttoss/test-utils": "^3.0.1"
122
122
  },
123
123
  "keywords": [
124
124
  "React",