@webstudio-is/sdk-components-react-radix 0.145.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.
Files changed (7) hide show
  1. package/lib/components.js +90 -6
  2. package/lib/hooks.js +90 -6
  3. package/lib/metas.js +64 -78
  4. package/lib/props.js +1234 -1477
  5. package/lib/types/dialog.d.ts +1 -1
  6. package/lib/types/sheet.d.ts +1 -1
  7. package/package.json +16 -20
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 { getClosestInstance as getClosestInstance2 } from "@webstudio-is/react-sdk";
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 = DialogPrimitive.Content;
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 } = useContext(ReactSdkContext);
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 { getClosestInstance as getClosestInstance3 } from "@webstudio-is/react-sdk";
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 = DialogPrimitive.Content;
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 } = useContext(ReactSdkContext);
436
+ const { renderer } = useContext2(ReactSdkContext2);
353
437
  let value = propsValue;
354
438
  if (renderer === "canvas") {
355
439
  value = value === "" ? "-1" : value;