@webstudio-is/sdk-components-react-radix 0.151.0 → 0.163.0
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.
- package/lib/components.js +90 -6
- package/lib/hooks.js +90 -6
- package/lib/types/dialog.d.ts +1 -1
- package/lib/types/sheet.d.ts +1 -1
- package/package.json +14 -18
package/lib/components.js
CHANGED
|
@@ -16,12 +16,61 @@ var CollapsibleContent = Content;
|
|
|
16
16
|
// src/dialog.tsx
|
|
17
17
|
import {
|
|
18
18
|
forwardRef as forwardRef2,
|
|
19
|
-
Children as Children2
|
|
19
|
+
Children as Children2,
|
|
20
|
+
useEffect,
|
|
21
|
+
useRef,
|
|
22
|
+
useContext
|
|
20
23
|
} from "react";
|
|
21
24
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
22
|
-
import {
|
|
25
|
+
import {
|
|
26
|
+
ReactSdkContext,
|
|
27
|
+
getClosestInstance as getClosestInstance2
|
|
28
|
+
} from "@webstudio-is/react-sdk";
|
|
23
29
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
30
|
+
var willNavigate = (event) => {
|
|
31
|
+
const { target } = event;
|
|
32
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
33
|
+
return false;
|
|
34
|
+
}
|
|
35
|
+
if (target.hasAttribute("href") === false) {
|
|
36
|
+
return false;
|
|
37
|
+
}
|
|
38
|
+
if (target.href === "#") {
|
|
39
|
+
return false;
|
|
40
|
+
}
|
|
41
|
+
if (target.hasAttribute("target") && target.target === "_blank") {
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
if (event.ctrlKey || event.metaKey) {
|
|
45
|
+
return false;
|
|
46
|
+
}
|
|
47
|
+
return true;
|
|
48
|
+
};
|
|
24
49
|
var Dialog = forwardRef2((props, _ref) => {
|
|
50
|
+
const { open, onOpenChange } = props;
|
|
51
|
+
const { renderer } = useContext(ReactSdkContext);
|
|
52
|
+
useEffect(() => {
|
|
53
|
+
if (renderer !== void 0) {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
if (open === false) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
const handleClick = (event) => {
|
|
60
|
+
const { target } = event;
|
|
61
|
+
if (willNavigate(event) === false) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
65
|
+
return false;
|
|
66
|
+
}
|
|
67
|
+
if (target.closest('[role="dialog"]')) {
|
|
68
|
+
onOpenChange?.(false);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
window.addEventListener("click", handleClick);
|
|
72
|
+
return () => window.removeEventListener("click", handleClick);
|
|
73
|
+
}, [open, onOpenChange, renderer]);
|
|
25
74
|
return /* @__PURE__ */ jsx2(DialogPrimitive.Root, { ...props });
|
|
26
75
|
});
|
|
27
76
|
var DialogTrigger = forwardRef2(({ children, ...props }, ref) => {
|
|
@@ -31,7 +80,42 @@ var DialogTrigger = forwardRef2(({ children, ...props }, ref) => {
|
|
|
31
80
|
var DialogOverlay = forwardRef2((props, ref) => {
|
|
32
81
|
return /* @__PURE__ */ jsx2(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx2(DialogPrimitive.Overlay, { ref, ...props }) });
|
|
33
82
|
});
|
|
34
|
-
var DialogContent =
|
|
83
|
+
var DialogContent = forwardRef2((props, ref) => {
|
|
84
|
+
const preventAutoFocusOnClose = useRef(false);
|
|
85
|
+
const { renderer } = useContext(ReactSdkContext);
|
|
86
|
+
useEffect(() => {
|
|
87
|
+
if (renderer !== void 0) {
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
90
|
+
preventAutoFocusOnClose.current = false;
|
|
91
|
+
const handleClick = (event) => {
|
|
92
|
+
const { target } = event;
|
|
93
|
+
if (willNavigate(event) === false) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
97
|
+
return false;
|
|
98
|
+
}
|
|
99
|
+
if (target.closest('[role="dialog"]')) {
|
|
100
|
+
preventAutoFocusOnClose.current = true;
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
window.addEventListener("click", handleClick);
|
|
104
|
+
return () => window.removeEventListener("click", handleClick);
|
|
105
|
+
}, [renderer]);
|
|
106
|
+
return /* @__PURE__ */ jsx2(
|
|
107
|
+
DialogPrimitive.Content,
|
|
108
|
+
{
|
|
109
|
+
ref,
|
|
110
|
+
...props,
|
|
111
|
+
onCloseAutoFocus: (event) => {
|
|
112
|
+
if (preventAutoFocusOnClose.current) {
|
|
113
|
+
event.preventDefault();
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
});
|
|
35
119
|
var DialogClose = DialogPrimitive.Close;
|
|
36
120
|
var defaultTag = "h1";
|
|
37
121
|
var DialogTitle2 = forwardRef2(({ tag: Tag = defaultTag, children, ...props }, ref) => /* @__PURE__ */ jsx2(DialogPrimitive.DialogTitle, { asChild: true, children: /* @__PURE__ */ jsx2(Tag, { ref, ...props, children: children ?? "Heading title you can edit" }) }));
|
|
@@ -151,16 +235,16 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
|
151
235
|
import {
|
|
152
236
|
getClosestInstance as getClosestInstance7,
|
|
153
237
|
getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
|
|
154
|
-
ReactSdkContext
|
|
238
|
+
ReactSdkContext as ReactSdkContext2
|
|
155
239
|
} from "@webstudio-is/react-sdk";
|
|
156
240
|
import {
|
|
157
241
|
Children as Children5,
|
|
158
242
|
forwardRef as forwardRef8,
|
|
159
|
-
useContext
|
|
243
|
+
useContext as useContext2
|
|
160
244
|
} from "react";
|
|
161
245
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
162
246
|
var NavigationMenu = forwardRef8(({ value: propsValue, ...props }, ref) => {
|
|
163
|
-
const { renderer } =
|
|
247
|
+
const { renderer } = useContext2(ReactSdkContext2);
|
|
164
248
|
let value = propsValue;
|
|
165
249
|
if (renderer === "canvas") {
|
|
166
250
|
value = value === "" ? "-1" : value;
|
package/lib/hooks.js
CHANGED
|
@@ -68,12 +68,61 @@ var hooksTabs = {
|
|
|
68
68
|
// src/dialog.tsx
|
|
69
69
|
import {
|
|
70
70
|
forwardRef as forwardRef3,
|
|
71
|
-
Children as Children2
|
|
71
|
+
Children as Children2,
|
|
72
|
+
useEffect,
|
|
73
|
+
useRef,
|
|
74
|
+
useContext
|
|
72
75
|
} from "react";
|
|
73
76
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
74
|
-
import {
|
|
77
|
+
import {
|
|
78
|
+
ReactSdkContext,
|
|
79
|
+
getClosestInstance as getClosestInstance3
|
|
80
|
+
} from "@webstudio-is/react-sdk";
|
|
75
81
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
82
|
+
var willNavigate = (event) => {
|
|
83
|
+
const { target } = event;
|
|
84
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
85
|
+
return false;
|
|
86
|
+
}
|
|
87
|
+
if (target.hasAttribute("href") === false) {
|
|
88
|
+
return false;
|
|
89
|
+
}
|
|
90
|
+
if (target.href === "#") {
|
|
91
|
+
return false;
|
|
92
|
+
}
|
|
93
|
+
if (target.hasAttribute("target") && target.target === "_blank") {
|
|
94
|
+
return false;
|
|
95
|
+
}
|
|
96
|
+
if (event.ctrlKey || event.metaKey) {
|
|
97
|
+
return false;
|
|
98
|
+
}
|
|
99
|
+
return true;
|
|
100
|
+
};
|
|
76
101
|
var Dialog = forwardRef3((props, _ref) => {
|
|
102
|
+
const { open, onOpenChange } = props;
|
|
103
|
+
const { renderer } = useContext(ReactSdkContext);
|
|
104
|
+
useEffect(() => {
|
|
105
|
+
if (renderer !== void 0) {
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
if (open === false) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
const handleClick = (event) => {
|
|
112
|
+
const { target } = event;
|
|
113
|
+
if (willNavigate(event) === false) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
117
|
+
return false;
|
|
118
|
+
}
|
|
119
|
+
if (target.closest('[role="dialog"]')) {
|
|
120
|
+
onOpenChange?.(false);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
window.addEventListener("click", handleClick);
|
|
124
|
+
return () => window.removeEventListener("click", handleClick);
|
|
125
|
+
}, [open, onOpenChange, renderer]);
|
|
77
126
|
return /* @__PURE__ */ jsx3(DialogPrimitive.Root, { ...props });
|
|
78
127
|
});
|
|
79
128
|
var DialogTrigger = forwardRef3(({ children, ...props }, ref) => {
|
|
@@ -83,7 +132,42 @@ var DialogTrigger = forwardRef3(({ children, ...props }, ref) => {
|
|
|
83
132
|
var DialogOverlay = forwardRef3((props, ref) => {
|
|
84
133
|
return /* @__PURE__ */ jsx3(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ jsx3(DialogPrimitive.Overlay, { ref, ...props }) });
|
|
85
134
|
});
|
|
86
|
-
var DialogContent =
|
|
135
|
+
var DialogContent = forwardRef3((props, ref) => {
|
|
136
|
+
const preventAutoFocusOnClose = useRef(false);
|
|
137
|
+
const { renderer } = useContext(ReactSdkContext);
|
|
138
|
+
useEffect(() => {
|
|
139
|
+
if (renderer !== void 0) {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
preventAutoFocusOnClose.current = false;
|
|
143
|
+
const handleClick = (event) => {
|
|
144
|
+
const { target } = event;
|
|
145
|
+
if (willNavigate(event) === false) {
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
if (target instanceof HTMLAnchorElement === false) {
|
|
149
|
+
return false;
|
|
150
|
+
}
|
|
151
|
+
if (target.closest('[role="dialog"]')) {
|
|
152
|
+
preventAutoFocusOnClose.current = true;
|
|
153
|
+
}
|
|
154
|
+
};
|
|
155
|
+
window.addEventListener("click", handleClick);
|
|
156
|
+
return () => window.removeEventListener("click", handleClick);
|
|
157
|
+
}, [renderer]);
|
|
158
|
+
return /* @__PURE__ */ jsx3(
|
|
159
|
+
DialogPrimitive.Content,
|
|
160
|
+
{
|
|
161
|
+
ref,
|
|
162
|
+
...props,
|
|
163
|
+
onCloseAutoFocus: (event) => {
|
|
164
|
+
if (preventAutoFocusOnClose.current) {
|
|
165
|
+
event.preventDefault();
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
});
|
|
87
171
|
var defaultTag = "h1";
|
|
88
172
|
var DialogTitle2 = forwardRef3(({ tag: Tag = defaultTag, children, ...props }, ref) => /* @__PURE__ */ jsx3(DialogPrimitive.DialogTitle, { asChild: true, children: /* @__PURE__ */ jsx3(Tag, { ref, ...props, children: children ?? "Heading title you can edit" }) }));
|
|
89
173
|
var namespace3 = "@webstudio-is/sdk-components-react-radix";
|
|
@@ -340,16 +424,16 @@ import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
|
340
424
|
import {
|
|
341
425
|
getClosestInstance as getClosestInstance8,
|
|
342
426
|
getIndexWithinAncestorFromComponentProps as getIndexWithinAncestorFromComponentProps3,
|
|
343
|
-
ReactSdkContext
|
|
427
|
+
ReactSdkContext as ReactSdkContext2
|
|
344
428
|
} from "@webstudio-is/react-sdk";
|
|
345
429
|
import {
|
|
346
430
|
Children as Children5,
|
|
347
431
|
forwardRef as forwardRef8,
|
|
348
|
-
useContext
|
|
432
|
+
useContext as useContext2
|
|
349
433
|
} from "react";
|
|
350
434
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
351
435
|
var NavigationMenu = forwardRef8(({ value: propsValue, ...props }, ref) => {
|
|
352
|
-
const { renderer } =
|
|
436
|
+
const { renderer } = useContext2(ReactSdkContext2);
|
|
353
437
|
let value = propsValue;
|
|
354
438
|
if (renderer === "canvas") {
|
|
355
439
|
value = value === "" ? "-1" : value;
|
package/lib/types/dialog.d.ts
CHANGED
|
@@ -12,7 +12,7 @@ export declare const DialogTrigger: import("react").ForwardRefExoticComponent<{
|
|
|
12
12
|
children: ReactNode;
|
|
13
13
|
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
14
14
|
export declare const DialogOverlay: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
-
export declare const DialogContent: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
15
|
+
export declare const DialogContent: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
16
|
export declare const DialogClose: import("react").ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
17
17
|
type Tag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
|
|
18
18
|
export declare const DialogTitle: import("react").ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement> & {
|
package/lib/types/sheet.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export declare const SheetTitle: import("react").ForwardRefExoticComponent<Omit<
|
|
|
10
10
|
tag?: ("h1" | "h2" | "h3" | "h4" | "h5" | "h6") | undefined;
|
|
11
11
|
}, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
|
|
12
12
|
export declare const SheetDescription: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
13
|
-
export declare const SheetContent: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
13
|
+
export declare const SheetContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
|
|
14
14
|
tag?: "div" | "nav" | undefined;
|
|
15
15
|
side?: "bottom" | "left" | "right" | "top" | undefined;
|
|
16
16
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/sdk-components-react-radix",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.163.0",
|
|
4
4
|
"description": "Webstudio wrapper for radix library",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -16,26 +16,22 @@
|
|
|
16
16
|
".": {
|
|
17
17
|
"webstudio": "./src/components.ts",
|
|
18
18
|
"types": "./lib/types/components.d.ts",
|
|
19
|
-
"import": "./lib/components.js"
|
|
20
|
-
"require": "./lib/components.js"
|
|
19
|
+
"import": "./lib/components.js"
|
|
21
20
|
},
|
|
22
21
|
"./metas": {
|
|
23
22
|
"webstudio": "./src/metas.ts",
|
|
24
23
|
"types": "./lib/types/metas.d.ts",
|
|
25
|
-
"import": "./lib/metas.js"
|
|
26
|
-
"require": "./lib/metas.js"
|
|
24
|
+
"import": "./lib/metas.js"
|
|
27
25
|
},
|
|
28
26
|
"./props": {
|
|
29
27
|
"webstudio": "./src/props.ts",
|
|
30
28
|
"types": "./lib/types/props.d.ts",
|
|
31
|
-
"import": "./lib/props.js"
|
|
32
|
-
"require": "./lib/props.js"
|
|
29
|
+
"import": "./lib/props.js"
|
|
33
30
|
},
|
|
34
31
|
"./hooks": {
|
|
35
32
|
"webstudio": "./src/hooks.ts",
|
|
36
33
|
"types": "./lib/types/hooks.d.ts",
|
|
37
|
-
"import": "./lib/hooks.js"
|
|
38
|
-
"require": "./lib/hooks.js"
|
|
34
|
+
"import": "./lib/hooks.js"
|
|
39
35
|
}
|
|
40
36
|
},
|
|
41
37
|
"peerDependencies": {
|
|
@@ -55,14 +51,14 @@
|
|
|
55
51
|
"@radix-ui/react-switch": "^1.0.3",
|
|
56
52
|
"@radix-ui/react-tabs": "^1.0.4",
|
|
57
53
|
"@radix-ui/react-tooltip": "^1.0.7",
|
|
58
|
-
"@webstudio-is/
|
|
59
|
-
"@webstudio-is/
|
|
60
|
-
"@webstudio-is/react-sdk": "0.
|
|
54
|
+
"@webstudio-is/css-engine": "0.163.0",
|
|
55
|
+
"@webstudio-is/icons": "0.163.0",
|
|
56
|
+
"@webstudio-is/react-sdk": "0.163.0"
|
|
61
57
|
},
|
|
62
58
|
"devDependencies": {
|
|
63
|
-
"@storybook/addon-essentials": "^
|
|
64
|
-
"@storybook/addon-links": "^
|
|
65
|
-
"@storybook/react": "^
|
|
59
|
+
"@storybook/addon-essentials": "^8.1.2",
|
|
60
|
+
"@storybook/addon-links": "^8.1.2",
|
|
61
|
+
"@storybook/react": "^8.1.2",
|
|
66
62
|
"@types/node": "^20.12.7",
|
|
67
63
|
"@types/react": "^18.2.70",
|
|
68
64
|
"@types/react-dom": "^18.2.25",
|
|
@@ -70,12 +66,12 @@
|
|
|
70
66
|
"react-dom": "18.3.0-canary-14898b6a9-20240318",
|
|
71
67
|
"tailwindcss": "^3.3.3",
|
|
72
68
|
"typescript": "^5.2.2",
|
|
69
|
+
"@webstudio-is/css-data": "0.0.0",
|
|
73
70
|
"@webstudio-is/generate-arg-types": "0.0.0",
|
|
74
|
-
"@webstudio-is/sdk-components-react": "0.151.0",
|
|
75
|
-
"@webstudio-is/sdk-cli": "^0.94.0",
|
|
76
71
|
"@webstudio-is/storybook-config": "0.0.0",
|
|
72
|
+
"@webstudio-is/sdk-components-react": "0.163.0",
|
|
77
73
|
"@webstudio-is/tsconfig": "1.0.7",
|
|
78
|
-
"@webstudio-is/
|
|
74
|
+
"@webstudio-is/sdk-cli": "^0.94.0"
|
|
79
75
|
},
|
|
80
76
|
"scripts": {
|
|
81
77
|
"dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
|