@noya-app/noya-designsystem 0.1.9 → 0.1.11
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/.turbo/turbo-build.log +9 -9
- package/CHANGELOG.md +19 -0
- package/dist/index.d.mts +54 -9
- package/dist/index.d.ts +54 -9
- package/dist/index.js +1094 -700
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1011 -622
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
- package/src/components/Avatar.tsx +85 -34
- package/src/components/Button.tsx +111 -95
- package/src/components/DropdownMenu.tsx +36 -19
- package/src/components/FloatingWindow.tsx +315 -0
- package/src/components/Text.tsx +2 -1
- package/src/components/internal/Menu.tsx +3 -5
- package/src/contexts/DesignSystemConfiguration.tsx +14 -11
- package/src/contexts/FloatingWindowContext.tsx +85 -0
- package/src/index.tsx +3 -1
- package/src/theme/dark.ts +2 -0
- package/src/theme/light.ts +9 -0
package/dist/index.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
var __defProp = Object.defineProperty;
|
|
2
2
|
var __export = (target, all) => {
|
|
3
|
-
for (var
|
|
4
|
-
__defProp(target,
|
|
3
|
+
for (var name3 in all)
|
|
4
|
+
__defProp(target, name3, { get: all[name3], enumerable: true });
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
// src/components/ActivityIndicator.tsx
|
|
@@ -36,9 +36,98 @@ var ActivityIndicator = memo(function ActivityIndicator2({
|
|
|
36
36
|
|
|
37
37
|
// src/components/Avatar.tsx
|
|
38
38
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
39
|
-
import
|
|
39
|
+
import React3, { forwardRef as forwardRef2 } from "react";
|
|
40
|
+
import styled3 from "styled-components";
|
|
41
|
+
|
|
42
|
+
// src/components/Stack.tsx
|
|
43
|
+
import React2, {
|
|
44
|
+
Children as Children2,
|
|
45
|
+
forwardRef,
|
|
46
|
+
memo as memo2
|
|
47
|
+
} from "react";
|
|
40
48
|
import styled2 from "styled-components";
|
|
41
|
-
|
|
49
|
+
|
|
50
|
+
// src/utils/breakpoints.ts
|
|
51
|
+
function mergeBreakpoints(breakpoints, transform) {
|
|
52
|
+
const breakpointMap = Array.isArray(breakpoints) ? breakpoints.reduce(
|
|
53
|
+
(result, item) => {
|
|
54
|
+
const [key, value] = item;
|
|
55
|
+
result[key] = result[key] ? { ...result[key], ...value } : value;
|
|
56
|
+
return result;
|
|
57
|
+
},
|
|
58
|
+
{}
|
|
59
|
+
) : breakpoints;
|
|
60
|
+
const breakpointList = Object.entries(breakpointMap);
|
|
61
|
+
const transformedList = breakpointList.sort((a, b) => Number(b[0]) - Number(a[0])).map(([width, value]) => [
|
|
62
|
+
`@media screen and (max-width: ${width}px)`,
|
|
63
|
+
transform?.(value) ?? value
|
|
64
|
+
]);
|
|
65
|
+
return Object.fromEntries(transformedList);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// src/utils/withSeparatorElements.ts
|
|
69
|
+
import { Children, cloneElement, isValidElement } from "react";
|
|
70
|
+
function createKey(key) {
|
|
71
|
+
return `s-${key}`;
|
|
72
|
+
}
|
|
73
|
+
function withSeparatorElements(elements2, separator) {
|
|
74
|
+
const childrenArray = Children.toArray(elements2);
|
|
75
|
+
for (let i = childrenArray.length - 1; i > 0; i--) {
|
|
76
|
+
let sep = typeof separator === "function" ? separator() : isValidElement(separator) ? cloneElement(separator, { key: createKey(i) }) : separator;
|
|
77
|
+
if (isValidElement(sep) && sep.key == null) {
|
|
78
|
+
sep = cloneElement(sep, { key: createKey(i) });
|
|
79
|
+
}
|
|
80
|
+
if (!sep || typeof sep === "boolean")
|
|
81
|
+
continue;
|
|
82
|
+
childrenArray.splice(i, 0, sep);
|
|
83
|
+
}
|
|
84
|
+
return childrenArray;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// src/components/Stack.tsx
|
|
88
|
+
var Element = styled2.div(({ styleProps, breakpoints }) => ({
|
|
89
|
+
...styleProps,
|
|
90
|
+
...mergeBreakpoints(breakpoints || [])
|
|
91
|
+
}));
|
|
92
|
+
var StackBase = forwardRef(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
|
|
93
|
+
const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
|
|
94
|
+
const styleProps = {
|
|
95
|
+
display: "flex",
|
|
96
|
+
position: "relative",
|
|
97
|
+
alignItems: "stretch",
|
|
98
|
+
...rest
|
|
99
|
+
};
|
|
100
|
+
return /* @__PURE__ */ React2.createElement(
|
|
101
|
+
Element,
|
|
102
|
+
{
|
|
103
|
+
ref: forwardedRef,
|
|
104
|
+
id,
|
|
105
|
+
as,
|
|
106
|
+
styleProps,
|
|
107
|
+
breakpoints,
|
|
108
|
+
tabIndex,
|
|
109
|
+
...href && { href }
|
|
110
|
+
},
|
|
111
|
+
elements2
|
|
112
|
+
);
|
|
113
|
+
});
|
|
114
|
+
var VerticalStack = memo2(
|
|
115
|
+
forwardRef(function VStack(props, forwardedRef) {
|
|
116
|
+
return /* @__PURE__ */ React2.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
|
|
117
|
+
})
|
|
118
|
+
);
|
|
119
|
+
var HorizontalStack = memo2(
|
|
120
|
+
forwardRef(function HStack(props, forwardedRef) {
|
|
121
|
+
return /* @__PURE__ */ React2.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
|
|
122
|
+
})
|
|
123
|
+
);
|
|
124
|
+
var Stack = {
|
|
125
|
+
V: VerticalStack,
|
|
126
|
+
H: HorizontalStack
|
|
127
|
+
};
|
|
128
|
+
|
|
129
|
+
// src/components/Avatar.tsx
|
|
130
|
+
var AvatarRoot = styled3(AvatarPrimitive.Root)(({ theme, size: size2, overflow }) => ({
|
|
42
131
|
display: "inline-flex",
|
|
43
132
|
alignItems: "center",
|
|
44
133
|
justifyContent: "center",
|
|
@@ -49,17 +138,23 @@ var AvatarRoot = styled2(AvatarPrimitive.Root)(({ theme, size: size2, overflow }
|
|
|
49
138
|
height: size2,
|
|
50
139
|
borderRadius: "100%",
|
|
51
140
|
backgroundColor: theme.colors.secondaryLight,
|
|
141
|
+
outline: `1px solid ${theme.colors.secondary}`,
|
|
142
|
+
outlineOffset: "-1px",
|
|
52
143
|
...overflow && {
|
|
53
144
|
margin: `-${overflow}px`
|
|
145
|
+
},
|
|
146
|
+
"&:hover": {
|
|
147
|
+
boxShadow: `0 0 0 2px ${theme.colors.sidebar.background}`,
|
|
148
|
+
opacity: 0.9
|
|
54
149
|
}
|
|
55
150
|
}));
|
|
56
|
-
var AvatarImage =
|
|
151
|
+
var AvatarImage = styled3(AvatarPrimitive.Image)({
|
|
57
152
|
width: "100%",
|
|
58
153
|
height: "100%",
|
|
59
154
|
objectFit: "cover",
|
|
60
155
|
borderRadius: "inherit"
|
|
61
156
|
});
|
|
62
|
-
var AvatarFallback =
|
|
157
|
+
var AvatarFallback = styled3(AvatarPrimitive.Fallback)(({ theme, size: size2 }) => ({
|
|
63
158
|
fontSize: "0.8rem",
|
|
64
159
|
fontWeight: 500,
|
|
65
160
|
width: "100%",
|
|
@@ -70,28 +165,50 @@ var AvatarFallback = styled2(AvatarPrimitive.Fallback)(({ theme, size: size2 })
|
|
|
70
165
|
color: "white",
|
|
71
166
|
lineHeight: `${size2}px`
|
|
72
167
|
}));
|
|
73
|
-
|
|
168
|
+
var Avatar = forwardRef2(function Avatar2({
|
|
74
169
|
image,
|
|
75
|
-
name,
|
|
170
|
+
name: name3,
|
|
76
171
|
fallback,
|
|
77
172
|
size: size2 = 19,
|
|
78
|
-
overflow = 0
|
|
173
|
+
overflow = 0,
|
|
174
|
+
...props
|
|
175
|
+
}, forwardedRef) {
|
|
176
|
+
return /* @__PURE__ */ React3.createElement(AvatarRoot, { ref: forwardedRef, size: size2, overflow, ...props }, /* @__PURE__ */ React3.createElement(AvatarImage, { src: image, alt: name3 }), /* @__PURE__ */ React3.createElement(AvatarFallback, { size: size2 }, fallback));
|
|
177
|
+
});
|
|
178
|
+
var AvatarStackItemWrapper = styled3.div(({ size: size2, theme }) => ({
|
|
179
|
+
position: "relative",
|
|
180
|
+
width: size2,
|
|
181
|
+
height: size2,
|
|
182
|
+
marginLeft: "-8px",
|
|
183
|
+
outline: `2px solid ${theme.colors.sidebar.background}`,
|
|
184
|
+
borderRadius: "50%"
|
|
185
|
+
}));
|
|
186
|
+
function AvatarStack({
|
|
187
|
+
size: size2 = 19,
|
|
188
|
+
children
|
|
79
189
|
}) {
|
|
80
|
-
|
|
190
|
+
const childrenArray = React3.Children.toArray(children).map((child) => {
|
|
191
|
+
return React3.cloneElement(child, { size: size2 });
|
|
192
|
+
});
|
|
193
|
+
return /* @__PURE__ */ React3.createElement(Stack.H, null, childrenArray.map((child, index) => {
|
|
194
|
+
if (index === 0)
|
|
195
|
+
return child;
|
|
196
|
+
return /* @__PURE__ */ React3.createElement(AvatarStackItemWrapper, { size: size2, key: index }, child);
|
|
197
|
+
}));
|
|
81
198
|
}
|
|
82
199
|
|
|
83
200
|
// src/components/Button.tsx
|
|
84
|
-
import
|
|
85
|
-
forwardRef,
|
|
201
|
+
import React5, {
|
|
202
|
+
forwardRef as forwardRef3,
|
|
86
203
|
useCallback
|
|
87
204
|
} from "react";
|
|
88
|
-
import
|
|
205
|
+
import styled5 from "styled-components";
|
|
89
206
|
|
|
90
207
|
// src/components/Tooltip.tsx
|
|
91
208
|
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
|
|
92
|
-
import
|
|
93
|
-
import
|
|
94
|
-
var Content2 =
|
|
209
|
+
import React4, { memo as memo3 } from "react";
|
|
210
|
+
import styled4 from "styled-components";
|
|
211
|
+
var Content2 = styled4(TooltipPrimitive.Content)(({ theme }) => ({
|
|
95
212
|
...theme.textStyles.small,
|
|
96
213
|
color: theme.colors.text,
|
|
97
214
|
borderRadius: 3,
|
|
@@ -100,8 +217,8 @@ var Content2 = styled3(TooltipPrimitive.Content)(({ theme }) => ({
|
|
|
100
217
|
boxShadow: "0 2px 4px rgba(0,0,0,0.2), 0 0 12px rgba(0,0,0,0.1)",
|
|
101
218
|
border: `1px solid ${theme.colors.dividerStrong}`
|
|
102
219
|
}));
|
|
103
|
-
var Tooltip =
|
|
104
|
-
return /* @__PURE__ */
|
|
220
|
+
var Tooltip = memo3(function Tooltip2({ children, content }) {
|
|
221
|
+
return /* @__PURE__ */ React4.createElement(TooltipPrimitive.Provider, null, /* @__PURE__ */ React4.createElement(TooltipPrimitive.Root, null, /* @__PURE__ */ React4.createElement(TooltipPrimitive.Trigger, { asChild: true }, children), /* @__PURE__ */ React4.createElement(TooltipPrimitive.Portal, null, /* @__PURE__ */ React4.createElement(
|
|
105
222
|
Content2,
|
|
106
223
|
{
|
|
107
224
|
side: "bottom",
|
|
@@ -114,95 +231,105 @@ var Tooltip = memo2(function Tooltip2({ children, content }) {
|
|
|
114
231
|
});
|
|
115
232
|
|
|
116
233
|
// src/components/Button.tsx
|
|
117
|
-
var ButtonElement =
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
},
|
|
149
|
-
"&:active": {
|
|
150
|
-
background: variant === "primaryGradient" ? theme.colors.primary : theme.colors.activeBackground
|
|
151
|
-
},
|
|
152
|
-
...variant === "primary" && {
|
|
153
|
-
background: theme.colors.primary,
|
|
154
|
-
color: "white",
|
|
155
|
-
"&:hover": {
|
|
156
|
-
background: theme.colors.primaryLight
|
|
234
|
+
var ButtonElement = styled5.button(
|
|
235
|
+
({
|
|
236
|
+
theme,
|
|
237
|
+
active,
|
|
238
|
+
disabled,
|
|
239
|
+
variant,
|
|
240
|
+
size: size2,
|
|
241
|
+
flex,
|
|
242
|
+
defaultBackground = theme.colors.inputBackground
|
|
243
|
+
}) => ({
|
|
244
|
+
...size2 === "large" ? theme.textStyles.heading4 : theme.textStyles.button,
|
|
245
|
+
textDecoration: "none",
|
|
246
|
+
lineHeight: "1",
|
|
247
|
+
flex: flex ?? "0 0 auto",
|
|
248
|
+
position: "relative",
|
|
249
|
+
border: "0",
|
|
250
|
+
outline: "none",
|
|
251
|
+
WebkitAppRegion: "no-drag",
|
|
252
|
+
userSelect: "none",
|
|
253
|
+
minWidth: variant === "normal" ? "31px" : void 0,
|
|
254
|
+
textAlign: "left",
|
|
255
|
+
borderRadius: "4px",
|
|
256
|
+
paddingTop: variant === "none" ? "0px" : "4px",
|
|
257
|
+
paddingRight: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
|
|
258
|
+
paddingBottom: variant === "none" ? "0px" : "4px",
|
|
259
|
+
paddingLeft: variant === "none" ? "0px" : variant === "thin" ? "1px" : "8px",
|
|
260
|
+
...size2 === "large" && {
|
|
261
|
+
paddingTop: "12px",
|
|
262
|
+
paddingRight: "16px",
|
|
263
|
+
paddingBottom: "12px",
|
|
264
|
+
paddingLeft: "16px"
|
|
157
265
|
},
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
background: theme.colors.secondary,
|
|
164
|
-
color: "white",
|
|
165
|
-
"&:hover": {
|
|
166
|
-
background: theme.colors.secondaryLight
|
|
266
|
+
background: active ? theme.colors.primary : variant === "primaryGradient" ? `linear-gradient(90deg, ${theme.colors.primary}, ${theme.colors.primaryLight})` : variant === "none" || variant === "thin" ? "transparent" : defaultBackground,
|
|
267
|
+
color: active ? "white" : theme.colors.text,
|
|
268
|
+
opacity: disabled ? 0.25 : 1,
|
|
269
|
+
"&:focus": {
|
|
270
|
+
boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors.primary}`
|
|
167
271
|
},
|
|
168
|
-
"&:active": {
|
|
169
|
-
background: theme.colors.secondary
|
|
170
|
-
}
|
|
171
|
-
},
|
|
172
|
-
...variant === "secondaryBright" && {
|
|
173
|
-
background: "#0ab557",
|
|
174
|
-
color: "white",
|
|
175
272
|
"&:hover": {
|
|
176
|
-
|
|
273
|
+
background: variant === "primaryGradient" || active ? theme.colors.primaryLight : theme.colors.inputBackgroundLight
|
|
177
274
|
},
|
|
178
275
|
"&:active": {
|
|
179
|
-
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
...variant === "white" && {
|
|
183
|
-
background: "white",
|
|
184
|
-
"&:hover": {
|
|
185
|
-
opacity: 0.8
|
|
276
|
+
background: variant === "primaryGradient" || active ? theme.colors.primary : theme.colors.activeBackground
|
|
186
277
|
},
|
|
187
|
-
"
|
|
188
|
-
|
|
278
|
+
...variant === "primary" && {
|
|
279
|
+
background: theme.colors.primary,
|
|
280
|
+
color: "white",
|
|
281
|
+
"&:hover": {
|
|
282
|
+
background: theme.colors.primaryLight
|
|
283
|
+
},
|
|
284
|
+
"&:active": {
|
|
285
|
+
background: theme.colors.primary
|
|
286
|
+
}
|
|
287
|
+
},
|
|
288
|
+
...variant === "secondary" && {
|
|
289
|
+
background: theme.colors.secondary,
|
|
290
|
+
color: "white",
|
|
291
|
+
"&:hover": {
|
|
292
|
+
background: theme.colors.secondaryLight
|
|
293
|
+
},
|
|
294
|
+
"&:active": {
|
|
295
|
+
background: theme.colors.secondary
|
|
296
|
+
}
|
|
297
|
+
},
|
|
298
|
+
...variant === "secondaryBright" && {
|
|
299
|
+
background: "#0ab557",
|
|
300
|
+
color: "white",
|
|
301
|
+
"&:hover": {
|
|
302
|
+
opacity: 0.8
|
|
303
|
+
},
|
|
304
|
+
"&:active": {
|
|
305
|
+
opacity: 0.9
|
|
306
|
+
}
|
|
307
|
+
},
|
|
308
|
+
...variant === "white" && {
|
|
309
|
+
background: "white",
|
|
310
|
+
"&:hover": {
|
|
311
|
+
opacity: 0.8
|
|
312
|
+
},
|
|
313
|
+
"&:active": {
|
|
314
|
+
opacity: 0.9
|
|
315
|
+
}
|
|
316
|
+
},
|
|
317
|
+
...variant === "floating" && {
|
|
318
|
+
background: "white",
|
|
319
|
+
color: theme.colors.text,
|
|
320
|
+
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
|
|
321
|
+
fontSize: "12px",
|
|
322
|
+
padding: "0px 4px"
|
|
323
|
+
},
|
|
324
|
+
display: "flex",
|
|
325
|
+
alignItems: "center",
|
|
326
|
+
justifyContent: "center",
|
|
327
|
+
"& *": {
|
|
328
|
+
pointerEvents: "none"
|
|
189
329
|
}
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
color: theme.colors.text,
|
|
194
|
-
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
|
|
195
|
-
fontSize: "12px",
|
|
196
|
-
padding: "0px 4px"
|
|
197
|
-
},
|
|
198
|
-
display: "flex",
|
|
199
|
-
alignItems: "center",
|
|
200
|
-
justifyContent: "center",
|
|
201
|
-
"& *": {
|
|
202
|
-
pointerEvents: "none"
|
|
203
|
-
}
|
|
204
|
-
}));
|
|
205
|
-
var ButtonContent = styled4.span(({ theme }) => ({
|
|
330
|
+
})
|
|
331
|
+
);
|
|
332
|
+
var ButtonContent = styled5.span(({ theme }) => ({
|
|
206
333
|
// Line height of small text - maybe figure out better way to ensure
|
|
207
334
|
// icons don't have a smaller height
|
|
208
335
|
minHeight: "19px",
|
|
@@ -213,7 +340,7 @@ var ButtonContent = styled4.span(({ theme }) => ({
|
|
|
213
340
|
// Helps with alignment with the default small text
|
|
214
341
|
lineHeight: "15px"
|
|
215
342
|
}));
|
|
216
|
-
var Button =
|
|
343
|
+
var Button = forwardRef3(function Button2({
|
|
217
344
|
id,
|
|
218
345
|
className,
|
|
219
346
|
style: style3,
|
|
@@ -225,12 +352,13 @@ var Button = forwardRef(function Button2({
|
|
|
225
352
|
variant = "normal",
|
|
226
353
|
size: size2 = "normal",
|
|
227
354
|
contentStyle,
|
|
355
|
+
defaultBackground,
|
|
228
356
|
onClick,
|
|
229
357
|
children,
|
|
230
358
|
...rest
|
|
231
359
|
// Propagate any other props so this component works as a Slot
|
|
232
360
|
}, forwardedRef) {
|
|
233
|
-
const buttonElement = /* @__PURE__ */
|
|
361
|
+
const buttonElement = /* @__PURE__ */ React5.createElement(
|
|
234
362
|
ButtonElement,
|
|
235
363
|
{
|
|
236
364
|
ref: forwardedRef,
|
|
@@ -243,46 +371,47 @@ var Button = forwardRef(function Button2({
|
|
|
243
371
|
disabled,
|
|
244
372
|
variant,
|
|
245
373
|
size: size2,
|
|
374
|
+
defaultBackground,
|
|
246
375
|
onClick,
|
|
247
376
|
onDoubleClick: useCallback((event) => {
|
|
248
377
|
event.stopPropagation();
|
|
249
378
|
}, []),
|
|
250
379
|
...rest
|
|
251
380
|
},
|
|
252
|
-
/* @__PURE__ */
|
|
381
|
+
/* @__PURE__ */ React5.createElement(ButtonContent, { style: contentStyle }, children)
|
|
253
382
|
);
|
|
254
|
-
return tooltip ? /* @__PURE__ */
|
|
383
|
+
return tooltip ? /* @__PURE__ */ React5.createElement(Tooltip, { content: tooltip }, buttonElement) : buttonElement;
|
|
255
384
|
});
|
|
256
385
|
|
|
257
386
|
// src/components/Chip.tsx
|
|
258
387
|
import { Cross1Icon, PlusIcon } from "@noya-app/noya-icons";
|
|
259
|
-
import
|
|
388
|
+
import React21, { memo as memo11 } from "react";
|
|
260
389
|
import styled14 from "styled-components";
|
|
261
390
|
|
|
262
391
|
// src/contexts/DesignSystemConfiguration.tsx
|
|
263
|
-
import
|
|
264
|
-
createContext as
|
|
392
|
+
import React19, {
|
|
393
|
+
createContext as createContext5,
|
|
265
394
|
memo as memo10,
|
|
266
|
-
useContext as
|
|
267
|
-
useMemo as
|
|
395
|
+
useContext as useContext5,
|
|
396
|
+
useMemo as useMemo9
|
|
268
397
|
} from "react";
|
|
269
398
|
import { ThemeProvider, useTheme as useTheme2 } from "styled-components";
|
|
270
399
|
|
|
271
400
|
// src/components/Toast.tsx
|
|
272
401
|
import * as ToastPrimitive from "@radix-ui/react-toast";
|
|
273
|
-
import
|
|
274
|
-
import
|
|
402
|
+
import React7 from "react";
|
|
403
|
+
import styled6 from "styled-components";
|
|
275
404
|
|
|
276
405
|
// src/components/IconButton.tsx
|
|
277
406
|
import * as Icons from "@noya-app/noya-icons";
|
|
278
|
-
import
|
|
279
|
-
forwardRef as
|
|
280
|
-
memo as
|
|
407
|
+
import React6, {
|
|
408
|
+
forwardRef as forwardRef4,
|
|
409
|
+
memo as memo4,
|
|
281
410
|
useMemo
|
|
282
411
|
} from "react";
|
|
283
412
|
import { useTheme } from "styled-components";
|
|
284
|
-
var IconButton =
|
|
285
|
-
|
|
413
|
+
var IconButton = memo4(
|
|
414
|
+
forwardRef4(function IconButton2({ selected, iconName, color, size: size2, contentStyle, ...props }, forwardedRef) {
|
|
286
415
|
const { icon: iconColor, iconSelected: iconSelectedColor } = useTheme().colors;
|
|
287
416
|
const Icon = Icons[iconName];
|
|
288
417
|
const style3 = useMemo(() => {
|
|
@@ -292,7 +421,7 @@ var IconButton = memo3(
|
|
|
292
421
|
...contentStyle
|
|
293
422
|
};
|
|
294
423
|
}, [contentStyle, size2]);
|
|
295
|
-
return /* @__PURE__ */
|
|
424
|
+
return /* @__PURE__ */ React6.createElement(Button, { ref: forwardedRef, ...props, variant: "none", contentStyle: style3 }, /* @__PURE__ */ React6.createElement(
|
|
296
425
|
Icon,
|
|
297
426
|
{
|
|
298
427
|
color: color ?? (selected ? iconSelectedColor : iconColor),
|
|
@@ -303,7 +432,7 @@ var IconButton = memo3(
|
|
|
303
432
|
);
|
|
304
433
|
|
|
305
434
|
// src/components/Toast.tsx
|
|
306
|
-
var ToastViewport =
|
|
435
|
+
var ToastViewport = styled6(ToastPrimitive.Viewport)({
|
|
307
436
|
position: "fixed",
|
|
308
437
|
bottom: 0,
|
|
309
438
|
right: 0,
|
|
@@ -318,7 +447,7 @@ var ToastViewport = styled5(ToastPrimitive.Viewport)({
|
|
|
318
447
|
zIndex: 2147483647,
|
|
319
448
|
outline: "none"
|
|
320
449
|
});
|
|
321
|
-
var ToastRoot =
|
|
450
|
+
var ToastRoot = styled6(ToastPrimitive.Root)(({ theme }) => ({
|
|
322
451
|
borderRadius: 4,
|
|
323
452
|
fontSize: 14,
|
|
324
453
|
backgroundColor: theme.colors.popover.background,
|
|
@@ -331,19 +460,19 @@ var ToastRoot = styled5(ToastPrimitive.Root)(({ theme }) => ({
|
|
|
331
460
|
columnGap: 10,
|
|
332
461
|
alignItems: "center"
|
|
333
462
|
}));
|
|
334
|
-
var ToastTitle =
|
|
463
|
+
var ToastTitle = styled6(ToastPrimitive.Title)(({ theme }) => ({
|
|
335
464
|
gridArea: "title",
|
|
336
465
|
marginBottom: 5,
|
|
337
466
|
...theme.textStyles.label,
|
|
338
467
|
fontWeight: "bold",
|
|
339
468
|
color: theme.colors.text
|
|
340
469
|
}));
|
|
341
|
-
var ToastDescription =
|
|
470
|
+
var ToastDescription = styled6(ToastPrimitive.Description)(({ theme }) => ({
|
|
342
471
|
gridArea: "description",
|
|
343
472
|
...theme.textStyles.small,
|
|
344
473
|
color: theme.colors.textMuted
|
|
345
474
|
}));
|
|
346
|
-
var ToastAction =
|
|
475
|
+
var ToastAction = styled6(ToastPrimitive.Action)({
|
|
347
476
|
gridArea: "action"
|
|
348
477
|
});
|
|
349
478
|
var Toast = ({
|
|
@@ -352,9 +481,9 @@ var Toast = ({
|
|
|
352
481
|
children,
|
|
353
482
|
...props
|
|
354
483
|
}) => {
|
|
355
|
-
return /* @__PURE__ */
|
|
484
|
+
return /* @__PURE__ */ React7.createElement(ToastRoot, { ...props }, title && /* @__PURE__ */ React7.createElement(ToastTitle, null, title), /* @__PURE__ */ React7.createElement(ToastDescription, null, content), children && /* @__PURE__ */ React7.createElement(ToastAction, { asChild: true, altText: "" }, children), /* @__PURE__ */ React7.createElement(ToastPrimitive.Close, { "aria-label": "Close", asChild: true }, /* @__PURE__ */ React7.createElement(IconButton, { iconName: "Cross1Icon" })));
|
|
356
485
|
};
|
|
357
|
-
var ToastProvider = ({ children }) => /* @__PURE__ */
|
|
486
|
+
var ToastProvider = ({ children }) => /* @__PURE__ */ React7.createElement(ToastPrimitive.Provider, null, children, /* @__PURE__ */ React7.createElement(ToastViewport, null));
|
|
358
487
|
|
|
359
488
|
// src/contexts/DialogContext.tsx
|
|
360
489
|
import React17, {
|
|
@@ -369,20 +498,20 @@ import styled13 from "styled-components";
|
|
|
369
498
|
|
|
370
499
|
// src/components/Dialog.tsx
|
|
371
500
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
372
|
-
import
|
|
373
|
-
forwardRef as
|
|
501
|
+
import React8, {
|
|
502
|
+
forwardRef as forwardRef5,
|
|
374
503
|
useImperativeHandle,
|
|
375
504
|
useRef
|
|
376
505
|
} from "react";
|
|
377
|
-
import
|
|
506
|
+
import styled8 from "styled-components";
|
|
378
507
|
|
|
379
508
|
// src/components/Spacer.tsx
|
|
380
|
-
import
|
|
381
|
-
var SpacerVertical =
|
|
509
|
+
import styled7 from "styled-components";
|
|
510
|
+
var SpacerVertical = styled7.span(({ size: size2, inline }) => ({
|
|
382
511
|
display: inline ? "inline-block" : "block",
|
|
383
512
|
...size2 === void 0 ? { flex: 1 } : { minHeight: size2 }
|
|
384
513
|
}));
|
|
385
|
-
var SpacerHorizontal =
|
|
514
|
+
var SpacerHorizontal = styled7.span(({ size: size2, inline }) => ({
|
|
386
515
|
display: inline ? "inline-block" : "block",
|
|
387
516
|
...size2 === void 0 ? { flex: 1 } : { minWidth: size2 }
|
|
388
517
|
}));
|
|
@@ -393,12 +522,12 @@ var Spacer;
|
|
|
393
522
|
})(Spacer || (Spacer = {}));
|
|
394
523
|
|
|
395
524
|
// src/components/Dialog.tsx
|
|
396
|
-
var StyledOverlay =
|
|
525
|
+
var StyledOverlay = styled8(DialogPrimitive.Overlay)({
|
|
397
526
|
backgroundColor: "rgba(0,0,0,0.5)",
|
|
398
527
|
position: "fixed",
|
|
399
528
|
inset: 0
|
|
400
529
|
});
|
|
401
|
-
var StyledContent =
|
|
530
|
+
var StyledContent = styled8(DialogPrimitive.Content)(({ theme }) => ({
|
|
402
531
|
boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
|
|
403
532
|
position: "fixed",
|
|
404
533
|
top: "50%",
|
|
@@ -417,17 +546,17 @@ var StyledContent = styled7(DialogPrimitive.Content)(({ theme }) => ({
|
|
|
417
546
|
pointerEvents: "all",
|
|
418
547
|
zIndex: 1e3
|
|
419
548
|
}));
|
|
420
|
-
var StyledTitle =
|
|
549
|
+
var StyledTitle = styled8(DialogPrimitive.Title)(({ theme }) => ({
|
|
421
550
|
margin: 0,
|
|
422
551
|
...theme.textStyles.body,
|
|
423
552
|
color: theme.colors.text
|
|
424
553
|
}));
|
|
425
|
-
var StyledDescription =
|
|
554
|
+
var StyledDescription = styled8(DialogPrimitive.Description)(({ theme }) => ({
|
|
426
555
|
margin: 0,
|
|
427
556
|
...theme.textStyles.small,
|
|
428
557
|
color: theme.colors.textMuted
|
|
429
558
|
}));
|
|
430
|
-
var CloseButtonContainer =
|
|
559
|
+
var CloseButtonContainer = styled8.div(({ theme }) => ({
|
|
431
560
|
position: "absolute",
|
|
432
561
|
top: theme.sizes.dialog.padding,
|
|
433
562
|
right: theme.sizes.dialog.padding,
|
|
@@ -438,7 +567,7 @@ var CloseButtonContainer = styled7.div(({ theme }) => ({
|
|
|
438
567
|
// boxShadow: `0 0 2px rgba(0, 0, 0, 0.2)`,
|
|
439
568
|
border: `1px solid rgba(128,128,128,0.2)`
|
|
440
569
|
}));
|
|
441
|
-
var Dialog =
|
|
570
|
+
var Dialog = forwardRef5(function Dialog2({
|
|
442
571
|
children,
|
|
443
572
|
title,
|
|
444
573
|
description,
|
|
@@ -456,7 +585,7 @@ var Dialog = forwardRef3(function Dialog2({
|
|
|
456
585
|
return contentRef.current.contains(element);
|
|
457
586
|
}
|
|
458
587
|
}));
|
|
459
|
-
return /* @__PURE__ */
|
|
588
|
+
return /* @__PURE__ */ React8.createElement(DialogPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React8.createElement(StyledOverlay, null), /* @__PURE__ */ React8.createElement(
|
|
460
589
|
StyledContent,
|
|
461
590
|
{
|
|
462
591
|
ref: contentRef,
|
|
@@ -471,14 +600,14 @@ var Dialog = forwardRef3(function Dialog2({
|
|
|
471
600
|
}
|
|
472
601
|
}
|
|
473
602
|
},
|
|
474
|
-
/* @__PURE__ */
|
|
475
|
-
title && /* @__PURE__ */
|
|
476
|
-
description && /* @__PURE__ */
|
|
603
|
+
/* @__PURE__ */ React8.createElement(CloseButtonContainer, null, /* @__PURE__ */ React8.createElement(DialogPrimitive.Close, { asChild: true }, /* @__PURE__ */ React8.createElement(IconButton, { iconName: "Cross1Icon" }))),
|
|
604
|
+
title && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(StyledTitle, null, title), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: description ? 10 : 20 })),
|
|
605
|
+
description && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 10 }), /* @__PURE__ */ React8.createElement(StyledDescription, null, description), /* @__PURE__ */ React8.createElement(Spacer.Vertical, { size: 20 })),
|
|
477
606
|
children
|
|
478
607
|
));
|
|
479
608
|
});
|
|
480
|
-
var FullscreenDialog =
|
|
481
|
-
return /* @__PURE__ */
|
|
609
|
+
var FullscreenDialog = forwardRef5(function FullscreenDialog2({ style: style3, ...rest }, forwardedRef) {
|
|
610
|
+
return /* @__PURE__ */ React8.createElement(
|
|
482
611
|
Dialog,
|
|
483
612
|
{
|
|
484
613
|
ref: forwardedRef,
|
|
@@ -505,13 +634,13 @@ import { CaretDownIcon } from "@noya-app/noya-icons";
|
|
|
505
634
|
import { memoize } from "@noya-app/noya-utils";
|
|
506
635
|
|
|
507
636
|
// ../noya-react-utils/src/components/AutoSizer.tsx
|
|
508
|
-
import
|
|
637
|
+
import React10, { memo as memo5, useRef as useRef2 } from "react";
|
|
509
638
|
|
|
510
639
|
// ../noya-react-utils/src/hooks/useSize.ts
|
|
511
|
-
import * as
|
|
640
|
+
import * as React9 from "react";
|
|
512
641
|
function useSize(refToObserve, dimensions = "both") {
|
|
513
|
-
const [size2, setSize] =
|
|
514
|
-
|
|
642
|
+
const [size2, setSize] = React9.useState(void 0);
|
|
643
|
+
React9.useEffect(() => {
|
|
515
644
|
if (refToObserve.current) {
|
|
516
645
|
const elementToObserve = refToObserve.current;
|
|
517
646
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
@@ -558,27 +687,27 @@ var style = {
|
|
|
558
687
|
flex: "1 0 0",
|
|
559
688
|
flexDirection: "column"
|
|
560
689
|
};
|
|
561
|
-
var AutoSizer =
|
|
690
|
+
var AutoSizer = memo5(function AutoSizer2({
|
|
562
691
|
children,
|
|
563
692
|
className
|
|
564
693
|
}) {
|
|
565
694
|
const containerRef = useRef2(null);
|
|
566
695
|
const containerSize = useSize(containerRef);
|
|
567
|
-
return /* @__PURE__ */
|
|
696
|
+
return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize.width > 0 && containerSize.height > 0 && children(containerSize));
|
|
568
697
|
});
|
|
569
|
-
var SingleDimensionAutoSizer =
|
|
698
|
+
var SingleDimensionAutoSizer = memo5(function SingleDimensionAutoSizer2({
|
|
570
699
|
children,
|
|
571
700
|
dimension,
|
|
572
701
|
className
|
|
573
702
|
}) {
|
|
574
703
|
const containerRef = useRef2(null);
|
|
575
704
|
const containerSize = useSize(containerRef, dimension);
|
|
576
|
-
return /* @__PURE__ */
|
|
705
|
+
return /* @__PURE__ */ React10.createElement("div", { ref: containerRef, style, className }, containerSize && containerSize[dimension] > 0 && children(containerSize[dimension]));
|
|
577
706
|
});
|
|
578
707
|
|
|
579
708
|
// ../noya-react-utils/src/components/FileDropTarget.tsx
|
|
580
|
-
import
|
|
581
|
-
memo as
|
|
709
|
+
import React11, {
|
|
710
|
+
memo as memo6,
|
|
582
711
|
useCallback as useCallback3
|
|
583
712
|
} from "react";
|
|
584
713
|
|
|
@@ -614,7 +743,7 @@ function isSupportedFile(file, supportedFileTypes) {
|
|
|
614
743
|
return supportedFileTypes.includes(file.type) || file.type === "" && file.name.endsWith(".sketch");
|
|
615
744
|
}
|
|
616
745
|
var style2 = { display: "flex", flex: 1 };
|
|
617
|
-
var FileDropTarget =
|
|
746
|
+
var FileDropTarget = memo6(function FileDropTarget2({
|
|
618
747
|
children,
|
|
619
748
|
onDropFiles,
|
|
620
749
|
supportedFileTypes
|
|
@@ -652,7 +781,7 @@ var FileDropTarget = memo5(function FileDropTarget2({
|
|
|
652
781
|
[onDropFiles, supportedFileTypes]
|
|
653
782
|
);
|
|
654
783
|
const { dropTargetProps, isDropTargetActive } = useFileDropTarget(handleFile);
|
|
655
|
-
return /* @__PURE__ */
|
|
784
|
+
return /* @__PURE__ */ React11.createElement("div", { style: style2, ...dropTargetProps }, typeof children === "function" ? children(isDropTargetActive) : children);
|
|
656
785
|
});
|
|
657
786
|
|
|
658
787
|
// ../noya-react-utils/src/hooks/useDeepArray.ts
|
|
@@ -795,7 +924,7 @@ function assignRef(ref, value) {
|
|
|
795
924
|
import React16, {
|
|
796
925
|
Children as Children3,
|
|
797
926
|
createContext as createContext2,
|
|
798
|
-
forwardRef as
|
|
927
|
+
forwardRef as forwardRef8,
|
|
799
928
|
isValidElement as isValidElement2,
|
|
800
929
|
memo as memo9,
|
|
801
930
|
useCallback as useCallback11,
|
|
@@ -835,39 +964,18 @@ function handleNudge(e) {
|
|
|
835
964
|
import { CheckIcon, ChevronRightIcon } from "@noya-app/noya-icons";
|
|
836
965
|
import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
|
|
837
966
|
import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
|
|
838
|
-
import
|
|
839
|
-
forwardRef as
|
|
840
|
-
memo as
|
|
967
|
+
import React13, {
|
|
968
|
+
forwardRef as forwardRef6,
|
|
969
|
+
memo as memo8,
|
|
841
970
|
useCallback as useCallback9,
|
|
842
971
|
useMemo as useMemo5
|
|
843
972
|
} from "react";
|
|
844
|
-
import
|
|
973
|
+
import styled10 from "styled-components";
|
|
845
974
|
|
|
846
975
|
// src/components/internal/Menu.tsx
|
|
847
976
|
import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
|
|
848
|
-
import
|
|
849
|
-
import
|
|
850
|
-
|
|
851
|
-
// src/utils/withSeparatorElements.ts
|
|
852
|
-
import { Children, cloneElement, isValidElement } from "react";
|
|
853
|
-
function createKey(key) {
|
|
854
|
-
return `s-${key}`;
|
|
855
|
-
}
|
|
856
|
-
function withSeparatorElements(elements2, separator) {
|
|
857
|
-
const childrenArray = Children.toArray(elements2);
|
|
858
|
-
for (let i = childrenArray.length - 1; i > 0; i--) {
|
|
859
|
-
let sep = typeof separator === "function" ? separator() : isValidElement(separator) ? cloneElement(separator, { key: createKey(i) }) : separator;
|
|
860
|
-
if (isValidElement(sep) && sep.key == null) {
|
|
861
|
-
sep = cloneElement(sep, { key: createKey(i) });
|
|
862
|
-
}
|
|
863
|
-
if (!sep || typeof sep === "boolean")
|
|
864
|
-
continue;
|
|
865
|
-
childrenArray.splice(i, 0, sep);
|
|
866
|
-
}
|
|
867
|
-
return childrenArray;
|
|
868
|
-
}
|
|
869
|
-
|
|
870
|
-
// src/components/internal/Menu.tsx
|
|
977
|
+
import React12, { memo as memo7 } from "react";
|
|
978
|
+
import styled9 from "styled-components";
|
|
871
979
|
var SEPARATOR_ITEM = "separator";
|
|
872
980
|
var CHECKBOX_WIDTH = 15;
|
|
873
981
|
var CHECKBOX_RIGHT_INSET = 3;
|
|
@@ -875,20 +983,18 @@ var styles = {
|
|
|
875
983
|
separatorStyle: ({ theme }) => ({
|
|
876
984
|
height: "1px",
|
|
877
985
|
backgroundColor: theme.colors.divider,
|
|
878
|
-
margin: "4px
|
|
986
|
+
margin: "4px -4px"
|
|
879
987
|
}),
|
|
880
988
|
itemStyle: ({
|
|
881
989
|
theme,
|
|
882
990
|
disabled
|
|
883
991
|
}) => ({
|
|
884
|
-
...theme.textStyles.
|
|
885
|
-
fontWeight: 500,
|
|
886
|
-
fontSize: "0.8rem",
|
|
992
|
+
...theme.textStyles.button,
|
|
887
993
|
flex: "0 0 auto",
|
|
888
994
|
userSelect: "none",
|
|
889
995
|
cursor: "pointer",
|
|
890
996
|
borderRadius: "3px",
|
|
891
|
-
padding: "
|
|
997
|
+
padding: "6px 8px",
|
|
892
998
|
...disabled && {
|
|
893
999
|
color: theme.colors.textDisabled
|
|
894
1000
|
},
|
|
@@ -945,7 +1051,7 @@ function getKeyboardShortcutsForMenuItems(menuItems, onSelect) {
|
|
|
945
1051
|
menuItems.flatMap(getKeyboardShortcuts).map(([key, value]) => [key, () => onSelect(value)])
|
|
946
1052
|
);
|
|
947
1053
|
}
|
|
948
|
-
var ShortcutElement =
|
|
1054
|
+
var ShortcutElement = styled9.kbd(
|
|
949
1055
|
({
|
|
950
1056
|
theme,
|
|
951
1057
|
fixedWidth
|
|
@@ -958,12 +1064,12 @@ var ShortcutElement = styled8.kbd(
|
|
|
958
1064
|
}
|
|
959
1065
|
})
|
|
960
1066
|
);
|
|
961
|
-
var KeyboardShortcut =
|
|
1067
|
+
var KeyboardShortcut = memo7(function KeyboardShortcut2({
|
|
962
1068
|
shortcut
|
|
963
1069
|
}) {
|
|
964
1070
|
const platform = useDesignSystemConfiguration().platform;
|
|
965
1071
|
const { keys, separator } = getShortcutDisplayParts(shortcut, platform);
|
|
966
|
-
const keyElements = keys.map((key) => /* @__PURE__ */
|
|
1072
|
+
const keyElements = keys.map((key) => /* @__PURE__ */ React12.createElement(
|
|
967
1073
|
ShortcutElement,
|
|
968
1074
|
{
|
|
969
1075
|
key,
|
|
@@ -971,24 +1077,24 @@ var KeyboardShortcut = memo6(function KeyboardShortcut2({
|
|
|
971
1077
|
},
|
|
972
1078
|
key
|
|
973
1079
|
));
|
|
974
|
-
return /* @__PURE__ */
|
|
1080
|
+
return /* @__PURE__ */ React12.createElement(React12.Fragment, null, separator ? withSeparatorElements(
|
|
975
1081
|
keyElements,
|
|
976
|
-
/* @__PURE__ */
|
|
1082
|
+
/* @__PURE__ */ React12.createElement(ShortcutElement, null, separator)
|
|
977
1083
|
) : keyElements);
|
|
978
1084
|
});
|
|
979
1085
|
|
|
980
1086
|
// src/components/DropdownMenu.tsx
|
|
981
|
-
var SeparatorElement =
|
|
1087
|
+
var SeparatorElement = styled10(RadixDropdownMenu.Separator)(
|
|
982
1088
|
styles.separatorStyle
|
|
983
1089
|
);
|
|
984
|
-
var ItemElement =
|
|
985
|
-
var CheckboxItemElement =
|
|
1090
|
+
var ItemElement = styled10(RadixDropdownMenu.Item)(styles.itemStyle);
|
|
1091
|
+
var CheckboxItemElement = styled10(RadixDropdownMenu.CheckboxItem)(
|
|
986
1092
|
styles.itemStyle
|
|
987
1093
|
);
|
|
988
|
-
var StyledItemIndicator =
|
|
1094
|
+
var StyledItemIndicator = styled10(RadixDropdownMenu.ItemIndicator)(
|
|
989
1095
|
styles.itemIndicatorStyle
|
|
990
1096
|
);
|
|
991
|
-
var DropdownMenuItem =
|
|
1097
|
+
var DropdownMenuItem = memo8(function ContextMenuItem({
|
|
992
1098
|
value,
|
|
993
1099
|
children,
|
|
994
1100
|
onSelect,
|
|
@@ -1005,28 +1111,37 @@ var DropdownMenuItem = memo7(function ContextMenuItem({
|
|
|
1005
1111
|
onSelect(value);
|
|
1006
1112
|
}, [onSelect, value]);
|
|
1007
1113
|
if (checked) {
|
|
1008
|
-
return /* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ React13.createElement(
|
|
1009
1115
|
CheckboxItemElement,
|
|
1010
1116
|
{
|
|
1011
1117
|
checked,
|
|
1012
1118
|
disabled,
|
|
1013
1119
|
onSelect: handleSelectItem
|
|
1014
1120
|
},
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
icon && /* @__PURE__ */
|
|
1121
|
+
/* @__PURE__ */ React13.createElement(StyledItemIndicator, null, /* @__PURE__ */ React13.createElement(CheckIcon, null)),
|
|
1122
|
+
icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })),
|
|
1017
1123
|
children
|
|
1018
1124
|
);
|
|
1019
1125
|
}
|
|
1020
|
-
const element = /* @__PURE__ */
|
|
1126
|
+
const element = /* @__PURE__ */ React13.createElement(ItemElement, { disabled, onSelect: handleSelectItem }, indented && /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }), icon && /* @__PURE__ */ React13.createElement(React13.Fragment, null, icon, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 8 })), children, shortcut && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React13.createElement(KeyboardShortcut, { shortcut })), items && items.length > 0 && /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React13.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React13.createElement(ChevronRightIcon, null)));
|
|
1021
1127
|
if (items && items.length > 0) {
|
|
1022
|
-
return /* @__PURE__ */
|
|
1128
|
+
return /* @__PURE__ */ React13.createElement(
|
|
1129
|
+
DropdownMenuRoot,
|
|
1130
|
+
{
|
|
1131
|
+
isNested: true,
|
|
1132
|
+
items,
|
|
1133
|
+
onSelect,
|
|
1134
|
+
alignOffset: -5
|
|
1135
|
+
},
|
|
1136
|
+
element
|
|
1137
|
+
);
|
|
1023
1138
|
} else {
|
|
1024
1139
|
return element;
|
|
1025
1140
|
}
|
|
1026
1141
|
});
|
|
1027
|
-
var Content5 =
|
|
1028
|
-
var SubContent2 =
|
|
1029
|
-
var DropdownMenuRoot =
|
|
1142
|
+
var Content5 = styled10(RadixDropdownMenu.Content)(styles.contentStyle);
|
|
1143
|
+
var SubContent2 = styled10(RadixDropdownMenu.SubContent)(styles.contentStyle);
|
|
1144
|
+
var DropdownMenuRoot = forwardRef6(function DropdownMenuRoot2({
|
|
1030
1145
|
items,
|
|
1031
1146
|
children,
|
|
1032
1147
|
onSelect,
|
|
@@ -1034,7 +1149,12 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
|
|
|
1034
1149
|
shouldBindKeyboardShortcuts,
|
|
1035
1150
|
onOpenChange,
|
|
1036
1151
|
open,
|
|
1037
|
-
onCloseAutoFocus
|
|
1152
|
+
onCloseAutoFocus,
|
|
1153
|
+
side,
|
|
1154
|
+
sideOffset = 4,
|
|
1155
|
+
align,
|
|
1156
|
+
alignOffset,
|
|
1157
|
+
collisionPadding = 8
|
|
1038
1158
|
}, forwardedRef) {
|
|
1039
1159
|
const hasCheckedItem = items.some(
|
|
1040
1160
|
(item) => item !== SEPARATOR_ITEM && item.checked
|
|
@@ -1048,16 +1168,19 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
|
|
|
1048
1168
|
const TriggerComponent = isNested ? RadixDropdownMenu.SubTrigger : RadixDropdownMenu.Trigger;
|
|
1049
1169
|
const ContentComponent = isNested ? SubContent2 : Content5;
|
|
1050
1170
|
const contentStyle = useMemo5(() => ({ zIndex: 1e3 }), []);
|
|
1051
|
-
return /* @__PURE__ */
|
|
1171
|
+
return /* @__PURE__ */ React13.createElement(RootComponent, { onOpenChange, open }, /* @__PURE__ */ React13.createElement(TriggerComponent, { ref: forwardedRef, asChild: true }, children), /* @__PURE__ */ React13.createElement(RadixDropdownMenu.Portal, null, /* @__PURE__ */ React13.createElement(
|
|
1052
1172
|
ContentComponent,
|
|
1053
1173
|
{
|
|
1054
|
-
|
|
1174
|
+
side,
|
|
1175
|
+
sideOffset,
|
|
1176
|
+
align,
|
|
1177
|
+
alignOffset,
|
|
1055
1178
|
style: contentStyle,
|
|
1056
|
-
collisionPadding
|
|
1179
|
+
collisionPadding,
|
|
1057
1180
|
...{ onCloseAutoFocus }
|
|
1058
1181
|
},
|
|
1059
1182
|
items.map(
|
|
1060
|
-
(item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */
|
|
1183
|
+
(item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React13.createElement(SeparatorElement, { key: index }) : /* @__PURE__ */ React13.createElement(
|
|
1061
1184
|
DropdownMenuItem,
|
|
1062
1185
|
{
|
|
1063
1186
|
key: item.value ?? index,
|
|
@@ -1075,12 +1198,12 @@ var DropdownMenuRoot = forwardRef4(function DropdownMenuRoot2({
|
|
|
1075
1198
|
)
|
|
1076
1199
|
)));
|
|
1077
1200
|
});
|
|
1078
|
-
var DropdownMenu =
|
|
1201
|
+
var DropdownMenu = memo8(DropdownMenuRoot);
|
|
1079
1202
|
|
|
1080
1203
|
// src/components/internal/TextInput.tsx
|
|
1081
1204
|
import { composeRefs } from "@radix-ui/react-compose-refs";
|
|
1082
|
-
import
|
|
1083
|
-
forwardRef as
|
|
1205
|
+
import React14, {
|
|
1206
|
+
forwardRef as forwardRef7,
|
|
1084
1207
|
useCallback as useCallback10,
|
|
1085
1208
|
useEffect as useEffect9,
|
|
1086
1209
|
useLayoutEffect as useLayoutEffect3,
|
|
@@ -1129,8 +1252,8 @@ function useGlobalInputBlurTrigger() {
|
|
|
1129
1252
|
}
|
|
1130
1253
|
|
|
1131
1254
|
// src/components/internal/TextInput.tsx
|
|
1132
|
-
var ReadOnlyTextInput =
|
|
1133
|
-
return /* @__PURE__ */
|
|
1255
|
+
var ReadOnlyTextInput = forwardRef7(function ReadOnlyTextInput2({ onKeyDown, onFocusChange, value, ...rest }, forwardedRef) {
|
|
1256
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1134
1257
|
"input",
|
|
1135
1258
|
{
|
|
1136
1259
|
ref: forwardedRef,
|
|
@@ -1141,7 +1264,7 @@ var ReadOnlyTextInput = forwardRef5(function ReadOnlyTextInput2({ onKeyDown, onF
|
|
|
1141
1264
|
}
|
|
1142
1265
|
);
|
|
1143
1266
|
});
|
|
1144
|
-
var ControlledTextInput =
|
|
1267
|
+
var ControlledTextInput = forwardRef7(function ControlledTextInput2({
|
|
1145
1268
|
onKeyDown,
|
|
1146
1269
|
value,
|
|
1147
1270
|
onChange,
|
|
@@ -1164,7 +1287,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
|
|
|
1164
1287
|
},
|
|
1165
1288
|
[onFocusCapture, onFocusChange]
|
|
1166
1289
|
);
|
|
1167
|
-
return /* @__PURE__ */
|
|
1290
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1168
1291
|
"input",
|
|
1169
1292
|
{
|
|
1170
1293
|
ref: forwardedRef,
|
|
@@ -1180,7 +1303,7 @@ var ControlledTextInput = forwardRef5(function ControlledTextInput2({
|
|
|
1180
1303
|
}
|
|
1181
1304
|
);
|
|
1182
1305
|
});
|
|
1183
|
-
var SubmittableTextInput =
|
|
1306
|
+
var SubmittableTextInput = forwardRef7(function SubmittableTextInput2({
|
|
1184
1307
|
onKeyDown,
|
|
1185
1308
|
value,
|
|
1186
1309
|
onSubmit,
|
|
@@ -1191,7 +1314,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
|
|
|
1191
1314
|
submitAutomaticallyAfterDelay,
|
|
1192
1315
|
...rest
|
|
1193
1316
|
}, forwardedRef) {
|
|
1194
|
-
const ref =
|
|
1317
|
+
const ref = React14.useRef(null);
|
|
1195
1318
|
const latestValue = useRef9(value);
|
|
1196
1319
|
latestValue.current = value;
|
|
1197
1320
|
const userDidEdit = useRef9(false);
|
|
@@ -1275,7 +1398,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
|
|
|
1275
1398
|
}
|
|
1276
1399
|
};
|
|
1277
1400
|
}, [internalValue, submitAutomaticallyAfterDelay]);
|
|
1278
|
-
return /* @__PURE__ */
|
|
1401
|
+
return /* @__PURE__ */ React14.createElement(
|
|
1279
1402
|
"input",
|
|
1280
1403
|
{
|
|
1281
1404
|
ref: composeRefs(ref, forwardedRef),
|
|
@@ -1288,7 +1411,7 @@ var SubmittableTextInput = forwardRef5(function SubmittableTextInput2({
|
|
|
1288
1411
|
}
|
|
1289
1412
|
);
|
|
1290
1413
|
});
|
|
1291
|
-
var TextInput_default =
|
|
1414
|
+
var TextInput_default = forwardRef7(function TextInput(props, forwardedRef) {
|
|
1292
1415
|
const commonProps = {
|
|
1293
1416
|
onPointerDown: useCallback10(
|
|
1294
1417
|
(event) => event.stopPropagation(),
|
|
@@ -1307,19 +1430,19 @@ var TextInput_default = forwardRef5(function TextInput(props, forwardedRef) {
|
|
|
1307
1430
|
...props
|
|
1308
1431
|
};
|
|
1309
1432
|
if ("readOnly" in commonProps) {
|
|
1310
|
-
return /* @__PURE__ */
|
|
1433
|
+
return /* @__PURE__ */ React14.createElement(ReadOnlyTextInput, { ref: forwardedRef, ...commonProps, readOnly: true });
|
|
1311
1434
|
} else if ("onChange" in commonProps) {
|
|
1312
|
-
return /* @__PURE__ */
|
|
1435
|
+
return /* @__PURE__ */ React14.createElement(ControlledTextInput, { ref: forwardedRef, ...commonProps });
|
|
1313
1436
|
} else {
|
|
1314
|
-
return /* @__PURE__ */
|
|
1437
|
+
return /* @__PURE__ */ React14.createElement(SubmittableTextInput, { ref: forwardedRef, ...commonProps });
|
|
1315
1438
|
}
|
|
1316
1439
|
});
|
|
1317
1440
|
|
|
1318
1441
|
// src/components/Popover.tsx
|
|
1319
1442
|
import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
1320
|
-
import
|
|
1321
|
-
import
|
|
1322
|
-
var ContentElement =
|
|
1443
|
+
import React15 from "react";
|
|
1444
|
+
import styled11 from "styled-components";
|
|
1445
|
+
var ContentElement = styled11(PopoverPrimitive.Content)(({ theme, variant }) => ({
|
|
1323
1446
|
borderRadius: 4,
|
|
1324
1447
|
fontSize: 14,
|
|
1325
1448
|
backgroundColor: theme.colors.popover.background,
|
|
@@ -1331,10 +1454,10 @@ var ContentElement = styled10(PopoverPrimitive.Content)(({ theme, variant }) =>
|
|
|
1331
1454
|
...variant === "normal" && { width: "240px" },
|
|
1332
1455
|
zIndex: 1e3
|
|
1333
1456
|
}));
|
|
1334
|
-
var ArrowElement =
|
|
1457
|
+
var ArrowElement = styled11(PopoverPrimitive.Arrow)(({ theme }) => ({
|
|
1335
1458
|
fill: theme.colors.popover.background
|
|
1336
1459
|
}));
|
|
1337
|
-
var PopoverClose =
|
|
1460
|
+
var PopoverClose = styled11(PopoverPrimitive.Close)(({ theme }) => ({
|
|
1338
1461
|
all: "unset",
|
|
1339
1462
|
fontFamily: "inherit",
|
|
1340
1463
|
borderRadius: "100%",
|
|
@@ -1364,7 +1487,7 @@ function Popover({
|
|
|
1364
1487
|
onFocusOutside,
|
|
1365
1488
|
onClickClose
|
|
1366
1489
|
}) {
|
|
1367
|
-
return /* @__PURE__ */
|
|
1490
|
+
return /* @__PURE__ */ React15.createElement(PopoverPrimitive.Root, { open, onOpenChange }, /* @__PURE__ */ React15.createElement(PopoverPrimitive.Trigger, { asChild: true }, trigger), /* @__PURE__ */ React15.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React15.createElement(
|
|
1368
1491
|
ContentElement,
|
|
1369
1492
|
{
|
|
1370
1493
|
variant,
|
|
@@ -1385,79 +1508,11 @@ function Popover({
|
|
|
1385
1508
|
}
|
|
1386
1509
|
},
|
|
1387
1510
|
children,
|
|
1388
|
-
showArrow && /* @__PURE__ */
|
|
1389
|
-
closable && /* @__PURE__ */
|
|
1511
|
+
showArrow && /* @__PURE__ */ React15.createElement(ArrowElement, null),
|
|
1512
|
+
closable && /* @__PURE__ */ React15.createElement(PopoverClose, null, /* @__PURE__ */ React15.createElement(IconButton, { iconName: "Cross2Icon", onClick: onClickClose }))
|
|
1390
1513
|
)));
|
|
1391
1514
|
}
|
|
1392
1515
|
|
|
1393
|
-
// src/components/Stack.tsx
|
|
1394
|
-
import React15, {
|
|
1395
|
-
Children as Children2,
|
|
1396
|
-
forwardRef as forwardRef6,
|
|
1397
|
-
memo as memo8
|
|
1398
|
-
} from "react";
|
|
1399
|
-
import styled11 from "styled-components";
|
|
1400
|
-
|
|
1401
|
-
// src/utils/breakpoints.ts
|
|
1402
|
-
function mergeBreakpoints(breakpoints, transform) {
|
|
1403
|
-
const breakpointMap = Array.isArray(breakpoints) ? breakpoints.reduce(
|
|
1404
|
-
(result, item) => {
|
|
1405
|
-
const [key, value] = item;
|
|
1406
|
-
result[key] = result[key] ? { ...result[key], ...value } : value;
|
|
1407
|
-
return result;
|
|
1408
|
-
},
|
|
1409
|
-
{}
|
|
1410
|
-
) : breakpoints;
|
|
1411
|
-
const breakpointList = Object.entries(breakpointMap);
|
|
1412
|
-
const transformedList = breakpointList.sort((a, b) => Number(b[0]) - Number(a[0])).map(([width, value]) => [
|
|
1413
|
-
`@media screen and (max-width: ${width}px)`,
|
|
1414
|
-
transform?.(value) ?? value
|
|
1415
|
-
]);
|
|
1416
|
-
return Object.fromEntries(transformedList);
|
|
1417
|
-
}
|
|
1418
|
-
|
|
1419
|
-
// src/components/Stack.tsx
|
|
1420
|
-
var Element = styled11.div(({ styleProps, breakpoints }) => ({
|
|
1421
|
-
...styleProps,
|
|
1422
|
-
...mergeBreakpoints(breakpoints || [])
|
|
1423
|
-
}));
|
|
1424
|
-
var StackBase = forwardRef6(function StackBase2({ id, as, children, separator, breakpoints, tabIndex, href, ...rest }, forwardedRef) {
|
|
1425
|
-
const elements2 = separator ? withSeparatorElements(Children2.toArray(children), separator) : children;
|
|
1426
|
-
const styleProps = {
|
|
1427
|
-
display: "flex",
|
|
1428
|
-
position: "relative",
|
|
1429
|
-
alignItems: "stretch",
|
|
1430
|
-
...rest
|
|
1431
|
-
};
|
|
1432
|
-
return /* @__PURE__ */ React15.createElement(
|
|
1433
|
-
Element,
|
|
1434
|
-
{
|
|
1435
|
-
ref: forwardedRef,
|
|
1436
|
-
id,
|
|
1437
|
-
as,
|
|
1438
|
-
styleProps,
|
|
1439
|
-
breakpoints,
|
|
1440
|
-
tabIndex,
|
|
1441
|
-
...href && { href }
|
|
1442
|
-
},
|
|
1443
|
-
elements2
|
|
1444
|
-
);
|
|
1445
|
-
});
|
|
1446
|
-
var VerticalStack = memo8(
|
|
1447
|
-
forwardRef6(function VStack(props, forwardedRef) {
|
|
1448
|
-
return /* @__PURE__ */ React15.createElement(StackBase, { ...props, flexDirection: "column", ref: forwardedRef });
|
|
1449
|
-
})
|
|
1450
|
-
);
|
|
1451
|
-
var HorizontalStack = memo8(
|
|
1452
|
-
forwardRef6(function HStack(props, forwardedRef) {
|
|
1453
|
-
return /* @__PURE__ */ React15.createElement(StackBase, { ...props, flexDirection: "row", ref: forwardedRef });
|
|
1454
|
-
})
|
|
1455
|
-
);
|
|
1456
|
-
var Stack = {
|
|
1457
|
-
V: VerticalStack,
|
|
1458
|
-
H: HorizontalStack
|
|
1459
|
-
};
|
|
1460
|
-
|
|
1461
1516
|
// src/components/InputField.tsx
|
|
1462
1517
|
var InputFieldContext = createContext2({
|
|
1463
1518
|
labelPosition: "end",
|
|
@@ -1488,7 +1543,7 @@ var LabelContainer = styled12.label(({ theme, labelPosition, hasDropdown, pointe
|
|
|
1488
1543
|
}
|
|
1489
1544
|
}));
|
|
1490
1545
|
var InputFieldLabel = memo9(
|
|
1491
|
-
|
|
1546
|
+
forwardRef8(function InputFieldLabel2({ children = false, pointerEvents = "none", style: style3 }, forwardedRef) {
|
|
1492
1547
|
const { labelPosition, hasDropdown, setLabelWidth } = useContext2(InputFieldContext);
|
|
1493
1548
|
const ref = useRef10(null);
|
|
1494
1549
|
useLayoutEffect4(() => {
|
|
@@ -1648,7 +1703,7 @@ var InputElement = styled12(TextInput_default).withConfig({
|
|
|
1648
1703
|
}
|
|
1649
1704
|
})
|
|
1650
1705
|
);
|
|
1651
|
-
var InputFieldInput =
|
|
1706
|
+
var InputFieldInput = forwardRef8(function InputFieldInput2(props, forwardedRef) {
|
|
1652
1707
|
const {
|
|
1653
1708
|
labelPosition,
|
|
1654
1709
|
labelSize,
|
|
@@ -1993,20 +2048,68 @@ function useDialogContainsElement() {
|
|
|
1993
2048
|
return useDialog().containsElement;
|
|
1994
2049
|
}
|
|
1995
2050
|
|
|
2051
|
+
// src/contexts/FloatingWindowContext.tsx
|
|
2052
|
+
import { uuid } from "@noya-app/noya-utils";
|
|
2053
|
+
import React18, { createContext as createContext4, useContext as useContext4, useMemo as useMemo8, useState as useState12 } from "react";
|
|
2054
|
+
import { createPortal } from "react-dom";
|
|
2055
|
+
var FloatingWindowContext = createContext4(void 0);
|
|
2056
|
+
var CurrentWindowContext = createContext4(void 0);
|
|
2057
|
+
var FloatingWindowProvider = ({
|
|
2058
|
+
children
|
|
2059
|
+
}) => {
|
|
2060
|
+
const [windows, setWindows] = useState12({});
|
|
2061
|
+
const contextValue = useMemo8(() => {
|
|
2062
|
+
const createWindow = (element) => {
|
|
2063
|
+
const id = uuid();
|
|
2064
|
+
setWindows((windows2) => ({
|
|
2065
|
+
...windows2,
|
|
2066
|
+
[id]: /* @__PURE__ */ React18.createElement(CurrentWindowContext.Provider, { value: { id } }, element)
|
|
2067
|
+
}));
|
|
2068
|
+
return id;
|
|
2069
|
+
};
|
|
2070
|
+
const closeWindow = (id) => {
|
|
2071
|
+
setWindows((windows2) => {
|
|
2072
|
+
const { [id]: _, ...rest } = windows2;
|
|
2073
|
+
return rest;
|
|
2074
|
+
});
|
|
2075
|
+
};
|
|
2076
|
+
return { createWindow, closeWindow };
|
|
2077
|
+
}, []);
|
|
2078
|
+
return /* @__PURE__ */ React18.createElement(FloatingWindowContext.Provider, { value: contextValue }, children, Object.entries(windows).map(
|
|
2079
|
+
([id, element]) => createPortal(element, document.body, id)
|
|
2080
|
+
));
|
|
2081
|
+
};
|
|
2082
|
+
var useFloatingWindowManager = () => {
|
|
2083
|
+
const context = useContext4(FloatingWindowContext);
|
|
2084
|
+
if (!context) {
|
|
2085
|
+
throw new Error(
|
|
2086
|
+
"useFloatingWindow must be used within a FloatingWindowProvider"
|
|
2087
|
+
);
|
|
2088
|
+
}
|
|
2089
|
+
return context;
|
|
2090
|
+
};
|
|
2091
|
+
var useCurrentFloatingWindowInternal = () => {
|
|
2092
|
+
const context = useContext4(CurrentWindowContext);
|
|
2093
|
+
if (!context) {
|
|
2094
|
+
throw new Error("useCurrentWindow must be used within a FloatingWindow");
|
|
2095
|
+
}
|
|
2096
|
+
return context;
|
|
2097
|
+
};
|
|
2098
|
+
|
|
1996
2099
|
// src/contexts/DesignSystemConfiguration.tsx
|
|
1997
|
-
var DesignSystemConfigurationContext =
|
|
2100
|
+
var DesignSystemConfigurationContext = createContext5(void 0);
|
|
1998
2101
|
var DesignSystemConfigurationProvider = memo10(
|
|
1999
2102
|
function DesignSystemConfigurationProvider2({
|
|
2000
2103
|
children,
|
|
2001
2104
|
theme,
|
|
2002
2105
|
platform
|
|
2003
2106
|
}) {
|
|
2004
|
-
const contextValue =
|
|
2005
|
-
return /* @__PURE__ */
|
|
2107
|
+
const contextValue = useMemo9(() => ({ platform }), [platform]);
|
|
2108
|
+
return /* @__PURE__ */ React19.createElement(DesignSystemConfigurationContext.Provider, { value: contextValue }, /* @__PURE__ */ React19.createElement(ThemeProvider, { theme }, /* @__PURE__ */ React19.createElement(FloatingWindowProvider, null, /* @__PURE__ */ React19.createElement(DialogProvider, null, /* @__PURE__ */ React19.createElement(ToastProvider, null, children)))));
|
|
2006
2109
|
}
|
|
2007
2110
|
);
|
|
2008
2111
|
function useDesignSystemConfiguration() {
|
|
2009
|
-
const value =
|
|
2112
|
+
const value = useContext5(DesignSystemConfigurationContext);
|
|
2010
2113
|
if (!value) {
|
|
2011
2114
|
throw new Error("Missing DesignSystemConfigurationProvider");
|
|
2012
2115
|
}
|
|
@@ -2017,7 +2120,7 @@ function useDesignSystemTheme() {
|
|
|
2017
2120
|
}
|
|
2018
2121
|
|
|
2019
2122
|
// src/hooks/useHover.ts
|
|
2020
|
-
import * as
|
|
2123
|
+
import * as React20 from "react";
|
|
2021
2124
|
var globalIgnoreEmulatedMouseEvents = false;
|
|
2022
2125
|
var hoverCount = 0;
|
|
2023
2126
|
function setGlobalIgnoreEmulatedMouseEvents() {
|
|
@@ -2047,13 +2150,13 @@ function setupGlobalTouchEvents() {
|
|
|
2047
2150
|
}
|
|
2048
2151
|
function useHover(props = {}) {
|
|
2049
2152
|
const { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
|
|
2050
|
-
const [isHovered, setHovered] =
|
|
2051
|
-
const state =
|
|
2153
|
+
const [isHovered, setHovered] = React20.useState(false);
|
|
2154
|
+
const state = React20.useRef({
|
|
2052
2155
|
isHovered: false,
|
|
2053
2156
|
ignoreEmulatedMouseEvents: false
|
|
2054
2157
|
}).current;
|
|
2055
|
-
|
|
2056
|
-
const hoverProps =
|
|
2158
|
+
React20.useEffect(setupGlobalTouchEvents, []);
|
|
2159
|
+
const hoverProps = React20.useMemo(
|
|
2057
2160
|
function getHoverProps() {
|
|
2058
2161
|
function triggerHoverStart(event, pointerType) {
|
|
2059
2162
|
if (isDisabled || pointerType === "touch" || state.isHovered) {
|
|
@@ -2215,7 +2318,7 @@ var Chip = memo11(function Chip2({
|
|
|
2215
2318
|
});
|
|
2216
2319
|
const handleClick = !children && !deletable && addable ? onAdd : onClick;
|
|
2217
2320
|
const color = colorScheme === "primary" ? theme.colors.primary : colorScheme === "secondary" ? theme.colors.secondary : theme.colors.text;
|
|
2218
|
-
return /* @__PURE__ */
|
|
2321
|
+
return /* @__PURE__ */ React21.createElement(
|
|
2219
2322
|
ChipElement,
|
|
2220
2323
|
{
|
|
2221
2324
|
variant,
|
|
@@ -2227,7 +2330,7 @@ var Chip = memo11(function Chip2({
|
|
|
2227
2330
|
isInteractive: !!handleClick,
|
|
2228
2331
|
tabIndex
|
|
2229
2332
|
},
|
|
2230
|
-
addable && /* @__PURE__ */
|
|
2333
|
+
addable && /* @__PURE__ */ React21.createElement(
|
|
2231
2334
|
AddElement,
|
|
2232
2335
|
{
|
|
2233
2336
|
size: size2,
|
|
@@ -2240,7 +2343,7 @@ var Chip = memo11(function Chip2({
|
|
|
2240
2343
|
}
|
|
2241
2344
|
),
|
|
2242
2345
|
children,
|
|
2243
|
-
deletable && /* @__PURE__ */
|
|
2346
|
+
deletable && /* @__PURE__ */ React21.createElement(
|
|
2244
2347
|
DeleteElement,
|
|
2245
2348
|
{
|
|
2246
2349
|
size: size2,
|
|
@@ -2259,10 +2362,10 @@ var Chip = memo11(function Chip2({
|
|
|
2259
2362
|
import { CheckIcon as CheckIcon2, ChevronRightIcon as ChevronRightIcon2 } from "@noya-app/noya-icons";
|
|
2260
2363
|
import { useKeyboardShortcuts as useKeyboardShortcuts2 } from "@noya-app/noya-keymap";
|
|
2261
2364
|
import * as RadixContextMenu from "@radix-ui/react-context-menu";
|
|
2262
|
-
import
|
|
2365
|
+
import React22, {
|
|
2263
2366
|
memo as memo12,
|
|
2264
2367
|
useCallback as useCallback13,
|
|
2265
|
-
useMemo as
|
|
2368
|
+
useMemo as useMemo11
|
|
2266
2369
|
} from "react";
|
|
2267
2370
|
import styled15 from "styled-components";
|
|
2268
2371
|
var SeparatorElement2 = styled15(RadixContextMenu.Separator)(
|
|
@@ -2296,32 +2399,32 @@ var ContextMenuItem2 = memo12(function ContextMenuItem3({
|
|
|
2296
2399
|
onSelect(value);
|
|
2297
2400
|
}, [onSelect, value]);
|
|
2298
2401
|
if (checked) {
|
|
2299
|
-
return /* @__PURE__ */
|
|
2402
|
+
return /* @__PURE__ */ React22.createElement(
|
|
2300
2403
|
CheckboxItemElement2,
|
|
2301
2404
|
{
|
|
2302
2405
|
checked,
|
|
2303
2406
|
disabled,
|
|
2304
2407
|
onSelect: handleSelectItem
|
|
2305
2408
|
},
|
|
2306
|
-
/* @__PURE__ */
|
|
2409
|
+
/* @__PURE__ */ React22.createElement(StyledItemIndicator2, null, /* @__PURE__ */ React22.createElement(CheckIcon2, null)),
|
|
2307
2410
|
children
|
|
2308
2411
|
);
|
|
2309
2412
|
}
|
|
2310
|
-
const element = /* @__PURE__ */
|
|
2413
|
+
const element = /* @__PURE__ */ React22.createElement(
|
|
2311
2414
|
ItemElement2,
|
|
2312
2415
|
{
|
|
2313
2416
|
disabled,
|
|
2314
2417
|
onSelect: handleSelectItem,
|
|
2315
2418
|
onPointerDown: handlePointerDown
|
|
2316
2419
|
},
|
|
2317
|
-
indented && /* @__PURE__ */
|
|
2318
|
-
icon && /* @__PURE__ */
|
|
2420
|
+
indented && /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: CHECKBOX_WIDTH - CHECKBOX_RIGHT_INSET }),
|
|
2421
|
+
icon && /* @__PURE__ */ React22.createElement(React22.Fragment, null, icon, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 8 })),
|
|
2319
2422
|
children,
|
|
2320
|
-
shortcut && /* @__PURE__ */
|
|
2321
|
-
items && items.length > 0 && /* @__PURE__ */
|
|
2423
|
+
shortcut && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 24 }), /* @__PURE__ */ React22.createElement(KeyboardShortcut, { shortcut })),
|
|
2424
|
+
items && items.length > 0 && /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(Spacer.Horizontal, null), /* @__PURE__ */ React22.createElement(Spacer.Horizontal, { size: 16 }), /* @__PURE__ */ React22.createElement(ChevronRightIcon2, null))
|
|
2322
2425
|
);
|
|
2323
2426
|
if (items && items.length > 0) {
|
|
2324
|
-
return /* @__PURE__ */
|
|
2427
|
+
return /* @__PURE__ */ React22.createElement(ContextMenuRoot, { isNested: true, items, onSelect }, element);
|
|
2325
2428
|
} else {
|
|
2326
2429
|
return element;
|
|
2327
2430
|
}
|
|
@@ -2339,7 +2442,7 @@ function ContextMenuRoot({
|
|
|
2339
2442
|
const hasCheckedItem = items.some(
|
|
2340
2443
|
(item) => item !== SEPARATOR_ITEM && item.checked
|
|
2341
2444
|
);
|
|
2342
|
-
const keymap =
|
|
2445
|
+
const keymap = useMemo11(
|
|
2343
2446
|
() => isNested || shouldBindKeyboardShortcuts === false ? {} : getKeyboardShortcutsForMenuItems(items, onSelect),
|
|
2344
2447
|
[isNested, items, onSelect, shouldBindKeyboardShortcuts]
|
|
2345
2448
|
);
|
|
@@ -2350,8 +2453,8 @@ function ContextMenuRoot({
|
|
|
2350
2453
|
const RootComponent = isNested ? RadixContextMenu.Sub : RadixContextMenu.Root;
|
|
2351
2454
|
const TriggerComponent = isNested ? RadixContextMenu.SubTrigger : RadixContextMenu.Trigger;
|
|
2352
2455
|
const ContentComponent = isNested ? SubContent4 : Content8;
|
|
2353
|
-
return /* @__PURE__ */
|
|
2354
|
-
(item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */
|
|
2456
|
+
return /* @__PURE__ */ React22.createElement(RootComponent, { onOpenChange }, /* @__PURE__ */ React22.createElement(TriggerComponent, { asChild: true, onPointerDown }, children), /* @__PURE__ */ React22.createElement(RadixContextMenu.Portal, null, /* @__PURE__ */ React22.createElement(ContentComponent, null, items.map(
|
|
2457
|
+
(item, index) => item === SEPARATOR_ITEM ? /* @__PURE__ */ React22.createElement(SeparatorElement2, { key: index }) : /* @__PURE__ */ React22.createElement(
|
|
2355
2458
|
ContextMenuItem2,
|
|
2356
2459
|
{
|
|
2357
2460
|
key: item.value ?? index,
|
|
@@ -2371,7 +2474,7 @@ function ContextMenuRoot({
|
|
|
2371
2474
|
var ContextMenu = memo12(ContextMenuRoot);
|
|
2372
2475
|
|
|
2373
2476
|
// src/components/Divider.tsx
|
|
2374
|
-
import
|
|
2477
|
+
import React23, { memo as memo13 } from "react";
|
|
2375
2478
|
import styled16 from "styled-components";
|
|
2376
2479
|
var DividerContainer = styled16.div(({ theme, variant = "normal", orientation, overflow = 0 }) => ({
|
|
2377
2480
|
...orientation === "horizontal" ? { height: "1px", minHeight: "1px", margin: `0px -${overflow}px` } : { width: "1px", minWidth: "1px", margin: `-${overflow}px 0px` },
|
|
@@ -2379,15 +2482,15 @@ var DividerContainer = styled16.div(({ theme, variant = "normal", orientation, o
|
|
|
2379
2482
|
alignSelf: "stretch"
|
|
2380
2483
|
}));
|
|
2381
2484
|
var Divider = memo13(function Divider2(props) {
|
|
2382
|
-
return /* @__PURE__ */
|
|
2485
|
+
return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "horizontal", ...props });
|
|
2383
2486
|
});
|
|
2384
2487
|
var DividerVertical = memo13(function DividerVertical2(props) {
|
|
2385
|
-
return /* @__PURE__ */
|
|
2488
|
+
return /* @__PURE__ */ React23.createElement(DividerContainer, { orientation: "vertical", ...props });
|
|
2386
2489
|
});
|
|
2387
2490
|
|
|
2388
2491
|
// src/components/DraggableMenuButton.tsx
|
|
2389
2492
|
import { DragHandleDots2Icon } from "@noya-app/noya-icons";
|
|
2390
|
-
import
|
|
2493
|
+
import React24, { memo as memo14, useCallback as useCallback14, useState as useState14 } from "react";
|
|
2391
2494
|
import styled17 from "styled-components";
|
|
2392
2495
|
var DotButtonElement = styled17.div(({ theme }) => ({
|
|
2393
2496
|
cursor: "pointer",
|
|
@@ -2413,8 +2516,8 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
|
|
|
2413
2516
|
isVisible = true
|
|
2414
2517
|
}) {
|
|
2415
2518
|
const color = useDesignSystemTheme().colors.icon;
|
|
2416
|
-
const [open, setOpen] =
|
|
2417
|
-
const [downPosition, setDownPosition] =
|
|
2519
|
+
const [open, setOpen] = useState14(false);
|
|
2520
|
+
const [downPosition, setDownPosition] = React24.useState(null);
|
|
2418
2521
|
const handlePointerDownCapture = useCallback14(
|
|
2419
2522
|
(event) => {
|
|
2420
2523
|
if (open) {
|
|
@@ -2451,7 +2554,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
|
|
|
2451
2554
|
},
|
|
2452
2555
|
[setOpen]
|
|
2453
2556
|
);
|
|
2454
|
-
return /* @__PURE__ */
|
|
2557
|
+
return /* @__PURE__ */ React24.createElement(
|
|
2455
2558
|
DotButtonElement,
|
|
2456
2559
|
{
|
|
2457
2560
|
onPointerDownCapture: handlePointerDownCapture,
|
|
@@ -2461,7 +2564,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
|
|
|
2461
2564
|
event.preventDefault();
|
|
2462
2565
|
}
|
|
2463
2566
|
},
|
|
2464
|
-
items && onSelect ? /* @__PURE__ */
|
|
2567
|
+
items && onSelect ? /* @__PURE__ */ React24.createElement(
|
|
2465
2568
|
DropdownMenu,
|
|
2466
2569
|
{
|
|
2467
2570
|
open,
|
|
@@ -2470,13 +2573,13 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
|
|
|
2470
2573
|
onSelect,
|
|
2471
2574
|
shouldBindKeyboardShortcuts: false
|
|
2472
2575
|
},
|
|
2473
|
-
/* @__PURE__ */
|
|
2576
|
+
/* @__PURE__ */ React24.createElement(TriggerElement, null, /* @__PURE__ */ React24.createElement(
|
|
2474
2577
|
DragHandleDots2Icon,
|
|
2475
2578
|
{
|
|
2476
2579
|
color: isVisible || open ? color : "transparent"
|
|
2477
2580
|
}
|
|
2478
2581
|
))
|
|
2479
|
-
) : /* @__PURE__ */
|
|
2582
|
+
) : /* @__PURE__ */ React24.createElement(
|
|
2480
2583
|
DragHandleDots2Icon,
|
|
2481
2584
|
{
|
|
2482
2585
|
color: isVisible || open ? color : "transparent"
|
|
@@ -2486,7 +2589,7 @@ var DraggableMenuButton = memo14(function DraggableMenuButton2({
|
|
|
2486
2589
|
});
|
|
2487
2590
|
|
|
2488
2591
|
// src/components/FillInputField.tsx
|
|
2489
|
-
import
|
|
2592
|
+
import React27, { forwardRef as forwardRef9, memo as memo17 } from "react";
|
|
2490
2593
|
import styled19 from "styled-components";
|
|
2491
2594
|
|
|
2492
2595
|
// ../noya-file-format/src/types.ts
|
|
@@ -2812,31 +2915,31 @@ var ClassValue = /* @__PURE__ */ ((ClassValue2) => {
|
|
|
2812
2915
|
})(ClassValue || {});
|
|
2813
2916
|
|
|
2814
2917
|
// src/components/FillPreviewBackground.tsx
|
|
2815
|
-
import
|
|
2918
|
+
import React26, { memo as memo16, useMemo as useMemo14 } from "react";
|
|
2816
2919
|
import styled18, { useTheme as useTheme3 } from "styled-components";
|
|
2817
2920
|
|
|
2818
2921
|
// src/contexts/ImageDataContext.tsx
|
|
2819
|
-
import
|
|
2820
|
-
createContext as
|
|
2922
|
+
import React25, {
|
|
2923
|
+
createContext as createContext6,
|
|
2821
2924
|
memo as memo15,
|
|
2822
|
-
useContext as
|
|
2823
|
-
useMemo as
|
|
2925
|
+
useContext as useContext6,
|
|
2926
|
+
useMemo as useMemo12
|
|
2824
2927
|
} from "react";
|
|
2825
|
-
var ImageDataContext =
|
|
2928
|
+
var ImageDataContext = createContext6(
|
|
2826
2929
|
void 0
|
|
2827
2930
|
);
|
|
2828
2931
|
var ImageDataProvider = memo15(function ImageDataProvider2({
|
|
2829
2932
|
children,
|
|
2830
2933
|
getImageData
|
|
2831
2934
|
}) {
|
|
2832
|
-
const contextValue =
|
|
2935
|
+
const contextValue = useMemo12(
|
|
2833
2936
|
() => ({ getImageData: getImageData ?? (() => void 0) }),
|
|
2834
2937
|
[getImageData]
|
|
2835
2938
|
);
|
|
2836
|
-
return /* @__PURE__ */
|
|
2939
|
+
return /* @__PURE__ */ React25.createElement(ImageDataContext.Provider, { value: contextValue }, children);
|
|
2837
2940
|
});
|
|
2838
2941
|
function useImageData(ref) {
|
|
2839
|
-
const value =
|
|
2942
|
+
const value = useContext6(ImageDataContext);
|
|
2840
2943
|
if (!value) {
|
|
2841
2944
|
throw new Error("Missing ImageDataProvider");
|
|
2842
2945
|
}
|
|
@@ -2844,9 +2947,9 @@ function useImageData(ref) {
|
|
|
2844
2947
|
}
|
|
2845
2948
|
|
|
2846
2949
|
// src/hooks/useObjectURL.ts
|
|
2847
|
-
import { useLayoutEffect as useLayoutEffect5, useMemo as
|
|
2950
|
+
import { useLayoutEffect as useLayoutEffect5, useMemo as useMemo13 } from "react";
|
|
2848
2951
|
function useObjectURL(object) {
|
|
2849
|
-
const objectURL =
|
|
2952
|
+
const objectURL = useMemo13(() => {
|
|
2850
2953
|
if (object instanceof Blob)
|
|
2851
2954
|
return URL.createObjectURL(object);
|
|
2852
2955
|
const bytes = object instanceof Uint8Array ? object : object !== void 0 ? new Uint8Array(object) : new Uint8Array();
|
|
@@ -2914,7 +3017,7 @@ var Background = styled18.span(({ background }) => ({
|
|
|
2914
3017
|
}));
|
|
2915
3018
|
var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
|
|
2916
3019
|
const { inputBackground, placeholderDots } = useTheme3().colors;
|
|
2917
|
-
const background =
|
|
3020
|
+
const background = useMemo14(
|
|
2918
3021
|
() => [
|
|
2919
3022
|
`center url("data:image/svg+xml;utf8,${dotsHorizontalSvg(
|
|
2920
3023
|
placeholderDots
|
|
@@ -2923,7 +3026,7 @@ var HorizontalDotsBackground = memo16(function HorizontalDotsBackground2() {
|
|
|
2923
3026
|
].join(","),
|
|
2924
3027
|
[inputBackground, placeholderDots]
|
|
2925
3028
|
);
|
|
2926
|
-
return /* @__PURE__ */
|
|
3029
|
+
return /* @__PURE__ */ React26.createElement(Background, { background });
|
|
2927
3030
|
});
|
|
2928
3031
|
function getPatternSizeAndPosition(fillType, tileScale) {
|
|
2929
3032
|
switch (fillType) {
|
|
@@ -2945,7 +3048,7 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
|
|
|
2945
3048
|
const image = useImageData(imageRef);
|
|
2946
3049
|
const url = useObjectURL(image);
|
|
2947
3050
|
const size2 = getPatternSizeAndPosition(fillType, tileScale);
|
|
2948
|
-
const background =
|
|
3051
|
+
const background = useMemo14(
|
|
2949
3052
|
() => [
|
|
2950
3053
|
size2,
|
|
2951
3054
|
`url(${url})`,
|
|
@@ -2953,37 +3056,37 @@ var PatternPreviewBackground = memo16(function PatternPreviewBackground2({
|
|
|
2953
3056
|
].join(" "),
|
|
2954
3057
|
[fillType, size2, url]
|
|
2955
3058
|
);
|
|
2956
|
-
return /* @__PURE__ */
|
|
3059
|
+
return /* @__PURE__ */ React26.createElement(Background, { background });
|
|
2957
3060
|
});
|
|
2958
3061
|
var ColorPreviewBackground = memo16(function ColorPreviewBackground2({
|
|
2959
3062
|
color
|
|
2960
3063
|
}) {
|
|
2961
|
-
const background =
|
|
2962
|
-
return /* @__PURE__ */
|
|
3064
|
+
const background = useMemo14(() => sketchColorToRgbaString(color), [color]);
|
|
3065
|
+
return /* @__PURE__ */ React26.createElement(Background, { background });
|
|
2963
3066
|
});
|
|
2964
3067
|
var GradientPreviewBackground = memo16(function GradientPreviewBackground2({
|
|
2965
3068
|
gradient
|
|
2966
3069
|
}) {
|
|
2967
|
-
const background =
|
|
3070
|
+
const background = useMemo14(
|
|
2968
3071
|
() => getGradientBackground(gradient.stops, gradient.gradientType, 180),
|
|
2969
3072
|
[gradient.gradientType, gradient.stops]
|
|
2970
3073
|
);
|
|
2971
|
-
return /* @__PURE__ */
|
|
3074
|
+
return /* @__PURE__ */ React26.createElement(Background, { background });
|
|
2972
3075
|
});
|
|
2973
3076
|
var FillPreviewBackground = memo16(function FillPreviewBackground2({
|
|
2974
3077
|
value
|
|
2975
3078
|
}) {
|
|
2976
3079
|
if (!value)
|
|
2977
|
-
return /* @__PURE__ */
|
|
3080
|
+
return /* @__PURE__ */ React26.createElement(HorizontalDotsBackground, null);
|
|
2978
3081
|
switch (value._class) {
|
|
2979
3082
|
case "color":
|
|
2980
|
-
return /* @__PURE__ */
|
|
3083
|
+
return /* @__PURE__ */ React26.createElement(ColorPreviewBackground, { color: value });
|
|
2981
3084
|
case "gradient":
|
|
2982
|
-
return /* @__PURE__ */
|
|
3085
|
+
return /* @__PURE__ */ React26.createElement(GradientPreviewBackground, { gradient: value });
|
|
2983
3086
|
case "pattern":
|
|
2984
3087
|
if (!value.image)
|
|
2985
3088
|
return null;
|
|
2986
|
-
return /* @__PURE__ */
|
|
3089
|
+
return /* @__PURE__ */ React26.createElement(
|
|
2987
3090
|
PatternPreviewBackground,
|
|
2988
3091
|
{
|
|
2989
3092
|
fillType: value.patternFillType,
|
|
@@ -3014,11 +3117,280 @@ var Container = styled19.button(
|
|
|
3014
3117
|
})
|
|
3015
3118
|
);
|
|
3016
3119
|
var FillInputField = memo17(
|
|
3017
|
-
|
|
3018
|
-
return /* @__PURE__ */
|
|
3120
|
+
forwardRef9(function FillInputField2({ id, value, ...rest }, ref) {
|
|
3121
|
+
return /* @__PURE__ */ React27.createElement(Container, { ref, id, ...rest }, /* @__PURE__ */ React27.createElement(FillPreviewBackground, { value }));
|
|
3019
3122
|
})
|
|
3020
3123
|
);
|
|
3021
3124
|
|
|
3125
|
+
// src/components/FloatingWindow.tsx
|
|
3126
|
+
import React28, { useCallback as useCallback15, useRef as useRef13, useState as useState15 } from "react";
|
|
3127
|
+
var styles2 = {
|
|
3128
|
+
noSelect: {
|
|
3129
|
+
userSelect: "none",
|
|
3130
|
+
WebkitUserSelect: "none",
|
|
3131
|
+
MozUserSelect: "none",
|
|
3132
|
+
msUserSelect: "none"
|
|
3133
|
+
},
|
|
3134
|
+
windowWrapper: {
|
|
3135
|
+
position: "absolute",
|
|
3136
|
+
backgroundColor: "white",
|
|
3137
|
+
borderRadius: "4px",
|
|
3138
|
+
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
|
3139
|
+
overflow: "hidden"
|
|
3140
|
+
// backdropFilter: "blur(10px)",
|
|
3141
|
+
},
|
|
3142
|
+
toolbar: {
|
|
3143
|
+
display: "flex",
|
|
3144
|
+
alignItems: "center",
|
|
3145
|
+
padding: "8px 12px",
|
|
3146
|
+
cursor: "move",
|
|
3147
|
+
userSelect: "none",
|
|
3148
|
+
minHeight: "43px"
|
|
3149
|
+
},
|
|
3150
|
+
closeButton: {
|
|
3151
|
+
background: "none",
|
|
3152
|
+
border: "none",
|
|
3153
|
+
fontSize: "16px",
|
|
3154
|
+
cursor: "pointer"
|
|
3155
|
+
},
|
|
3156
|
+
content: {
|
|
3157
|
+
padding: "12px",
|
|
3158
|
+
height: "calc(100% - 44px)",
|
|
3159
|
+
// Adjust based on toolbar height
|
|
3160
|
+
overflow: "auto",
|
|
3161
|
+
display: "flex",
|
|
3162
|
+
flexDirection: "column"
|
|
3163
|
+
},
|
|
3164
|
+
resizeHandle: {
|
|
3165
|
+
position: "absolute"
|
|
3166
|
+
}
|
|
3167
|
+
};
|
|
3168
|
+
var resizeHandlePositions = {
|
|
3169
|
+
top: { top: "0", left: "0", right: "0", height: "5px", cursor: "ns-resize" },
|
|
3170
|
+
right: {
|
|
3171
|
+
top: "0",
|
|
3172
|
+
right: "0",
|
|
3173
|
+
bottom: "0",
|
|
3174
|
+
width: "5px",
|
|
3175
|
+
cursor: "ew-resize"
|
|
3176
|
+
},
|
|
3177
|
+
bottom: {
|
|
3178
|
+
bottom: "0",
|
|
3179
|
+
left: "0",
|
|
3180
|
+
right: "0",
|
|
3181
|
+
height: "5px",
|
|
3182
|
+
cursor: "ns-resize"
|
|
3183
|
+
},
|
|
3184
|
+
left: { top: "0", left: "0", bottom: "0", width: "5px", cursor: "ew-resize" },
|
|
3185
|
+
topLeft: {
|
|
3186
|
+
top: "0",
|
|
3187
|
+
left: "0",
|
|
3188
|
+
width: "10px",
|
|
3189
|
+
height: "10px",
|
|
3190
|
+
cursor: "nwse-resize"
|
|
3191
|
+
},
|
|
3192
|
+
topRight: {
|
|
3193
|
+
top: "0",
|
|
3194
|
+
right: "0",
|
|
3195
|
+
width: "10px",
|
|
3196
|
+
height: "10px",
|
|
3197
|
+
cursor: "nesw-resize"
|
|
3198
|
+
},
|
|
3199
|
+
bottomLeft: {
|
|
3200
|
+
bottom: "0",
|
|
3201
|
+
left: "0",
|
|
3202
|
+
width: "10px",
|
|
3203
|
+
height: "10px",
|
|
3204
|
+
cursor: "nesw-resize"
|
|
3205
|
+
},
|
|
3206
|
+
bottomRight: {
|
|
3207
|
+
bottom: "0",
|
|
3208
|
+
right: "0",
|
|
3209
|
+
width: "10px",
|
|
3210
|
+
height: "10px",
|
|
3211
|
+
cursor: "nwse-resize"
|
|
3212
|
+
}
|
|
3213
|
+
};
|
|
3214
|
+
function defaultRenderToolbar({
|
|
3215
|
+
title,
|
|
3216
|
+
toolbarContent,
|
|
3217
|
+
onClose
|
|
3218
|
+
}) {
|
|
3219
|
+
return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(Small, { flex: "1", fontWeight: "500", color: "text" }, title), toolbarContent, /* @__PURE__ */ React28.createElement(
|
|
3220
|
+
IconButton,
|
|
3221
|
+
{
|
|
3222
|
+
iconName: "Cross3Icon",
|
|
3223
|
+
onClick: onClose,
|
|
3224
|
+
style: {
|
|
3225
|
+
marginLeft: "6px",
|
|
3226
|
+
marginRight: "-6px"
|
|
3227
|
+
}
|
|
3228
|
+
}
|
|
3229
|
+
));
|
|
3230
|
+
}
|
|
3231
|
+
var FloatingWindow = ({
|
|
3232
|
+
title,
|
|
3233
|
+
onClose,
|
|
3234
|
+
children,
|
|
3235
|
+
initialWidth = 300,
|
|
3236
|
+
initialHeight = 200,
|
|
3237
|
+
initialX = 100,
|
|
3238
|
+
initialY = 100,
|
|
3239
|
+
minWidth = 200,
|
|
3240
|
+
minHeight = 100,
|
|
3241
|
+
toolbarContent,
|
|
3242
|
+
renderToolbar = defaultRenderToolbar
|
|
3243
|
+
}) => {
|
|
3244
|
+
const [position, setPosition] = useState15({ x: initialX, y: initialY });
|
|
3245
|
+
const [size2, setSize] = useState15({
|
|
3246
|
+
width: initialWidth,
|
|
3247
|
+
height: initialHeight
|
|
3248
|
+
});
|
|
3249
|
+
const [isDragging, setIsDragging] = useState15(false);
|
|
3250
|
+
const [isResizing, setIsResizing] = useState15(false);
|
|
3251
|
+
const [dragOffset, setDragOffset] = useState15({ x: 0, y: 0 });
|
|
3252
|
+
const [resizeDirection, setResizeDirection] = useState15(null);
|
|
3253
|
+
const wrapperRef = useRef13(null);
|
|
3254
|
+
const toggleGlobalTextSelection = (disable) => {
|
|
3255
|
+
if (disable) {
|
|
3256
|
+
document.body.style.userSelect = "none";
|
|
3257
|
+
} else {
|
|
3258
|
+
document.body.style.userSelect = "";
|
|
3259
|
+
}
|
|
3260
|
+
};
|
|
3261
|
+
const handleMouseDown = useCallback15((e) => {
|
|
3262
|
+
if (!wrapperRef.current)
|
|
3263
|
+
return;
|
|
3264
|
+
const rect = wrapperRef.current.getBoundingClientRect();
|
|
3265
|
+
setDragOffset({
|
|
3266
|
+
x: e.clientX - rect.left,
|
|
3267
|
+
y: e.clientY - rect.top
|
|
3268
|
+
});
|
|
3269
|
+
setIsDragging(true);
|
|
3270
|
+
}, []);
|
|
3271
|
+
const handleResizeStart = useCallback15(
|
|
3272
|
+
(direction) => (e) => {
|
|
3273
|
+
e.stopPropagation();
|
|
3274
|
+
setIsResizing(true);
|
|
3275
|
+
setResizeDirection(direction);
|
|
3276
|
+
toggleGlobalTextSelection(true);
|
|
3277
|
+
},
|
|
3278
|
+
[]
|
|
3279
|
+
);
|
|
3280
|
+
const handleMouseMove = useCallback15(
|
|
3281
|
+
(e) => {
|
|
3282
|
+
if (isDragging) {
|
|
3283
|
+
setPosition({
|
|
3284
|
+
x: e.clientX - dragOffset.x,
|
|
3285
|
+
y: e.clientY - dragOffset.y
|
|
3286
|
+
});
|
|
3287
|
+
} else if (isResizing && resizeDirection) {
|
|
3288
|
+
const rect = wrapperRef.current.getBoundingClientRect();
|
|
3289
|
+
let newWidth = size2.width;
|
|
3290
|
+
let newHeight = size2.height;
|
|
3291
|
+
let newX = position.x;
|
|
3292
|
+
let newY = position.y;
|
|
3293
|
+
if (/right/i.test(resizeDirection)) {
|
|
3294
|
+
newWidth = Math.max(e.clientX - rect.left, minWidth);
|
|
3295
|
+
}
|
|
3296
|
+
if (/bottom/i.test(resizeDirection)) {
|
|
3297
|
+
newHeight = Math.max(e.clientY - rect.top, minHeight);
|
|
3298
|
+
}
|
|
3299
|
+
if (/left/i.test(resizeDirection)) {
|
|
3300
|
+
const potentialWidth = rect.right - e.clientX;
|
|
3301
|
+
if (potentialWidth <= minWidth) {
|
|
3302
|
+
newWidth = minWidth;
|
|
3303
|
+
newX = rect.right - minWidth;
|
|
3304
|
+
} else {
|
|
3305
|
+
newWidth = potentialWidth;
|
|
3306
|
+
newX = e.clientX;
|
|
3307
|
+
}
|
|
3308
|
+
}
|
|
3309
|
+
if (/top/i.test(resizeDirection)) {
|
|
3310
|
+
const potentialHeight = rect.bottom - e.clientY;
|
|
3311
|
+
if (potentialHeight <= minHeight) {
|
|
3312
|
+
newHeight = minHeight;
|
|
3313
|
+
newY = rect.bottom - minHeight;
|
|
3314
|
+
} else {
|
|
3315
|
+
newHeight = potentialHeight;
|
|
3316
|
+
newY = e.clientY;
|
|
3317
|
+
}
|
|
3318
|
+
}
|
|
3319
|
+
setSize({ width: newWidth, height: newHeight });
|
|
3320
|
+
setPosition({ x: newX, y: newY });
|
|
3321
|
+
}
|
|
3322
|
+
},
|
|
3323
|
+
[
|
|
3324
|
+
isDragging,
|
|
3325
|
+
isResizing,
|
|
3326
|
+
dragOffset,
|
|
3327
|
+
resizeDirection,
|
|
3328
|
+
size2,
|
|
3329
|
+
position,
|
|
3330
|
+
minWidth,
|
|
3331
|
+
minHeight
|
|
3332
|
+
]
|
|
3333
|
+
);
|
|
3334
|
+
const handleMouseUp = useCallback15((e) => {
|
|
3335
|
+
setIsDragging(false);
|
|
3336
|
+
setIsResizing(false);
|
|
3337
|
+
setResizeDirection(null);
|
|
3338
|
+
toggleGlobalTextSelection(false);
|
|
3339
|
+
}, []);
|
|
3340
|
+
React28.useEffect(() => {
|
|
3341
|
+
document.addEventListener("mousemove", handleMouseMove);
|
|
3342
|
+
document.addEventListener("mouseup", handleMouseUp);
|
|
3343
|
+
return () => {
|
|
3344
|
+
document.removeEventListener("mousemove", handleMouseMove);
|
|
3345
|
+
document.removeEventListener("mouseup", handleMouseUp);
|
|
3346
|
+
};
|
|
3347
|
+
}, [handleMouseMove, handleMouseUp]);
|
|
3348
|
+
const theme = useDesignSystemTheme();
|
|
3349
|
+
const floatingWindowManager = useFloatingWindowManager();
|
|
3350
|
+
const currentFloatingWindow = useCurrentFloatingWindowInternal();
|
|
3351
|
+
const handleClose = useCallback15(() => {
|
|
3352
|
+
if (onClose)
|
|
3353
|
+
onClose();
|
|
3354
|
+
floatingWindowManager.closeWindow(currentFloatingWindow.id);
|
|
3355
|
+
}, [currentFloatingWindow.id, floatingWindowManager, onClose]);
|
|
3356
|
+
return /* @__PURE__ */ React28.createElement(
|
|
3357
|
+
"div",
|
|
3358
|
+
{
|
|
3359
|
+
ref: wrapperRef,
|
|
3360
|
+
style: {
|
|
3361
|
+
...styles2.windowWrapper,
|
|
3362
|
+
top: position.y,
|
|
3363
|
+
left: position.x,
|
|
3364
|
+
width: size2.width,
|
|
3365
|
+
height: size2.height,
|
|
3366
|
+
outline: `1px solid ${theme.colors.divider}`,
|
|
3367
|
+
backgroundColor: theme.colors.canvas.background
|
|
3368
|
+
}
|
|
3369
|
+
},
|
|
3370
|
+
/* @__PURE__ */ React28.createElement(
|
|
3371
|
+
"div",
|
|
3372
|
+
{
|
|
3373
|
+
style: {
|
|
3374
|
+
...styles2.toolbar,
|
|
3375
|
+
backgroundColor: theme.colors.sidebar.background
|
|
3376
|
+
},
|
|
3377
|
+
onMouseDown: handleMouseDown
|
|
3378
|
+
},
|
|
3379
|
+
renderToolbar({ title, toolbarContent, onClose: handleClose })
|
|
3380
|
+
),
|
|
3381
|
+
/* @__PURE__ */ React28.createElement(Divider, null),
|
|
3382
|
+
/* @__PURE__ */ React28.createElement("div", { style: styles2.content }, children),
|
|
3383
|
+
Object.entries(resizeHandlePositions).map(([direction, style3]) => /* @__PURE__ */ React28.createElement(
|
|
3384
|
+
"div",
|
|
3385
|
+
{
|
|
3386
|
+
key: direction,
|
|
3387
|
+
style: { ...styles2.resizeHandle, ...style3 },
|
|
3388
|
+
onMouseDown: handleResizeStart(direction)
|
|
3389
|
+
}
|
|
3390
|
+
))
|
|
3391
|
+
);
|
|
3392
|
+
};
|
|
3393
|
+
|
|
3022
3394
|
// src/components/GradientPicker.tsx
|
|
3023
3395
|
import {
|
|
3024
3396
|
Alpha,
|
|
@@ -3030,7 +3402,7 @@ import {
|
|
|
3030
3402
|
hsvaToRgba,
|
|
3031
3403
|
rgbaToHsva as rgbaToHsva2
|
|
3032
3404
|
} from "@noya-app/noya-colorpicker";
|
|
3033
|
-
import
|
|
3405
|
+
import React29, { memo as memo18, useCallback as useCallback16, useMemo as useMemo15 } from "react";
|
|
3034
3406
|
var GradientPicker = memo18(function GradientPicker2({
|
|
3035
3407
|
value,
|
|
3036
3408
|
selectedStop,
|
|
@@ -3040,7 +3412,7 @@ var GradientPicker = memo18(function GradientPicker2({
|
|
|
3040
3412
|
onDelete,
|
|
3041
3413
|
onSelectStop
|
|
3042
3414
|
}) {
|
|
3043
|
-
const colorModel =
|
|
3415
|
+
const colorModel = useMemo15(
|
|
3044
3416
|
() => ({
|
|
3045
3417
|
defaultColor: { r: 0, g: 0, b: 0, a: 1 },
|
|
3046
3418
|
toHsva: rgbaToHsva2,
|
|
@@ -3049,30 +3421,30 @@ var GradientPicker = memo18(function GradientPicker2({
|
|
|
3049
3421
|
}),
|
|
3050
3422
|
[]
|
|
3051
3423
|
);
|
|
3052
|
-
const rgbaColor =
|
|
3424
|
+
const rgbaColor = useMemo15(
|
|
3053
3425
|
() => sketchColorToRgba(value[selectedStop].color),
|
|
3054
3426
|
[value, selectedStop]
|
|
3055
3427
|
);
|
|
3056
|
-
const handleChangeColor =
|
|
3428
|
+
const handleChangeColor = useCallback16(
|
|
3057
3429
|
(value2) => {
|
|
3058
3430
|
onChangeColor(rgbaToSketchColor(value2));
|
|
3059
3431
|
},
|
|
3060
3432
|
[onChangeColor]
|
|
3061
3433
|
);
|
|
3062
|
-
const handleAddGradientStop =
|
|
3434
|
+
const handleAddGradientStop = useCallback16(
|
|
3063
3435
|
(value2, position) => {
|
|
3064
3436
|
onAdd(rgbaToSketchColor(value2), position);
|
|
3065
3437
|
},
|
|
3066
3438
|
[onAdd]
|
|
3067
3439
|
);
|
|
3068
|
-
return /* @__PURE__ */
|
|
3440
|
+
return /* @__PURE__ */ React29.createElement(
|
|
3069
3441
|
NoyaColorPicker,
|
|
3070
3442
|
{
|
|
3071
3443
|
onChange: handleChangeColor,
|
|
3072
3444
|
colorModel,
|
|
3073
3445
|
color: rgbaColor
|
|
3074
3446
|
},
|
|
3075
|
-
/* @__PURE__ */
|
|
3447
|
+
/* @__PURE__ */ React29.createElement(
|
|
3076
3448
|
Gradient,
|
|
3077
3449
|
{
|
|
3078
3450
|
gradients: value,
|
|
@@ -3083,12 +3455,12 @@ var GradientPicker = memo18(function GradientPicker2({
|
|
|
3083
3455
|
onDelete
|
|
3084
3456
|
}
|
|
3085
3457
|
),
|
|
3086
|
-
/* @__PURE__ */
|
|
3087
|
-
/* @__PURE__ */
|
|
3088
|
-
/* @__PURE__ */
|
|
3089
|
-
/* @__PURE__ */
|
|
3090
|
-
/* @__PURE__ */
|
|
3091
|
-
/* @__PURE__ */
|
|
3458
|
+
/* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 10 }),
|
|
3459
|
+
/* @__PURE__ */ React29.createElement(Saturation, null),
|
|
3460
|
+
/* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 12 }),
|
|
3461
|
+
/* @__PURE__ */ React29.createElement(Hue, null),
|
|
3462
|
+
/* @__PURE__ */ React29.createElement(Spacer.Vertical, { size: 5 }),
|
|
3463
|
+
/* @__PURE__ */ React29.createElement(Alpha, null)
|
|
3092
3464
|
);
|
|
3093
3465
|
});
|
|
3094
3466
|
|
|
@@ -3120,19 +3492,19 @@ var Grid = styled20.div((props) => ({
|
|
|
3120
3492
|
}));
|
|
3121
3493
|
|
|
3122
3494
|
// src/components/GridView.tsx
|
|
3123
|
-
import
|
|
3124
|
-
createContext as
|
|
3125
|
-
forwardRef as
|
|
3495
|
+
import React31, {
|
|
3496
|
+
createContext as createContext7,
|
|
3497
|
+
forwardRef as forwardRef10,
|
|
3126
3498
|
memo as memo20,
|
|
3127
|
-
useCallback as
|
|
3128
|
-
useContext as
|
|
3129
|
-
useMemo as
|
|
3499
|
+
useCallback as useCallback18,
|
|
3500
|
+
useContext as useContext7,
|
|
3501
|
+
useMemo as useMemo16
|
|
3130
3502
|
} from "react";
|
|
3131
3503
|
import styled22, { keyframes as keyframes2 } from "styled-components";
|
|
3132
3504
|
|
|
3133
3505
|
// src/components/ScrollArea.tsx
|
|
3134
3506
|
import * as RadixScrollArea from "@radix-ui/react-scroll-area";
|
|
3135
|
-
import
|
|
3507
|
+
import React30, { memo as memo19, useCallback as useCallback17, useState as useState16 } from "react";
|
|
3136
3508
|
import styled21 from "styled-components";
|
|
3137
3509
|
var SCROLLBAR_SIZE = 10;
|
|
3138
3510
|
var StyledViewport = styled21(RadixScrollArea.Viewport)({
|
|
@@ -3161,17 +3533,17 @@ var Container2 = styled21.div({
|
|
|
3161
3533
|
minHeight: 0
|
|
3162
3534
|
});
|
|
3163
3535
|
var ScrollArea = memo19(function ScrollArea2({ children }) {
|
|
3164
|
-
const [scrollElementRef, setScrollElementRef] =
|
|
3165
|
-
return /* @__PURE__ */
|
|
3536
|
+
const [scrollElementRef, setScrollElementRef] = useState16(null);
|
|
3537
|
+
return /* @__PURE__ */ React30.createElement(Container2, null, /* @__PURE__ */ React30.createElement(RadixScrollArea.Root, { style: { width: "100%", height: "100%" } }, /* @__PURE__ */ React30.createElement(
|
|
3166
3538
|
StyledViewport,
|
|
3167
3539
|
{
|
|
3168
|
-
ref:
|
|
3540
|
+
ref: useCallback17(
|
|
3169
3541
|
(ref) => setScrollElementRef(ref),
|
|
3170
3542
|
[]
|
|
3171
3543
|
)
|
|
3172
3544
|
},
|
|
3173
3545
|
typeof children === "function" ? scrollElementRef ? children(scrollElementRef) : null : children
|
|
3174
|
-
), /* @__PURE__ */
|
|
3546
|
+
), /* @__PURE__ */ React30.createElement(StyledScrollbar, { orientation: "vertical", className: "scroll-component" }, /* @__PURE__ */ React30.createElement(StyledThumb, { className: "scroll-component" }))));
|
|
3175
3547
|
});
|
|
3176
3548
|
|
|
3177
3549
|
// src/components/GridView.tsx
|
|
@@ -3351,7 +3723,7 @@ var Shimmer = styled22.div`
|
|
|
3351
3723
|
align-items: end;
|
|
3352
3724
|
padding: 4px;
|
|
3353
3725
|
`;
|
|
3354
|
-
var GridViewItem =
|
|
3726
|
+
var GridViewItem = forwardRef10(function GridViewItem2({
|
|
3355
3727
|
id,
|
|
3356
3728
|
title,
|
|
3357
3729
|
subtitle,
|
|
@@ -3367,15 +3739,15 @@ var GridViewItem = forwardRef9(function GridViewItem2({
|
|
|
3367
3739
|
onContextMenu,
|
|
3368
3740
|
style: style3
|
|
3369
3741
|
}, forwardedRef) {
|
|
3370
|
-
const [hovered, setHovered] =
|
|
3742
|
+
const [hovered, setHovered] = React31.useState(false);
|
|
3371
3743
|
const { hoverProps } = useHover({
|
|
3372
3744
|
onHoverChange: (isHovering) => {
|
|
3373
3745
|
onHoverChange?.(isHovering);
|
|
3374
3746
|
setHovered(isHovering);
|
|
3375
3747
|
}
|
|
3376
3748
|
});
|
|
3377
|
-
const { textPosition, bordered, disabled } =
|
|
3378
|
-
const handleClick =
|
|
3749
|
+
const { textPosition, bordered, disabled } = useContext7(GridViewContext);
|
|
3750
|
+
const handleClick = useCallback18(
|
|
3379
3751
|
(event) => {
|
|
3380
3752
|
event.stopPropagation();
|
|
3381
3753
|
event.preventDefault();
|
|
@@ -3384,7 +3756,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
|
|
|
3384
3756
|
},
|
|
3385
3757
|
[onClick, onPress]
|
|
3386
3758
|
);
|
|
3387
|
-
const handleKeyDown =
|
|
3759
|
+
const handleKeyDown = useCallback18(
|
|
3388
3760
|
(event) => {
|
|
3389
3761
|
if (event.key === "Enter" || event.key === " ") {
|
|
3390
3762
|
event.stopPropagation();
|
|
@@ -3396,7 +3768,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
|
|
|
3396
3768
|
},
|
|
3397
3769
|
[onPress]
|
|
3398
3770
|
);
|
|
3399
|
-
let element = /* @__PURE__ */
|
|
3771
|
+
let element = /* @__PURE__ */ React31.createElement(
|
|
3400
3772
|
ItemContainer,
|
|
3401
3773
|
{
|
|
3402
3774
|
id,
|
|
@@ -3405,7 +3777,7 @@ var GridViewItem = forwardRef9(function GridViewItem2({
|
|
|
3405
3777
|
tabIndex: disabled ? void 0 : 0,
|
|
3406
3778
|
onKeyDown: handleKeyDown
|
|
3407
3779
|
},
|
|
3408
|
-
/* @__PURE__ */
|
|
3780
|
+
/* @__PURE__ */ React31.createElement(
|
|
3409
3781
|
ContentContainer,
|
|
3410
3782
|
{
|
|
3411
3783
|
disabled,
|
|
@@ -3419,25 +3791,25 @@ var GridViewItem = forwardRef9(function GridViewItem2({
|
|
|
3419
3791
|
},
|
|
3420
3792
|
children
|
|
3421
3793
|
),
|
|
3422
|
-
textPosition === "below" && /* @__PURE__ */
|
|
3423
|
-
textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */
|
|
3424
|
-
loading && /* @__PURE__ */
|
|
3794
|
+
textPosition === "below" && /* @__PURE__ */ React31.createElement(React31.Fragment, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 8 }), /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title || " "), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle || " ")),
|
|
3795
|
+
textPosition === "overlay" && hovered && (title || subtitle) && /* @__PURE__ */ React31.createElement(TextOverlay, null, title && /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: true }, title), subtitle && /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: true }, subtitle)),
|
|
3796
|
+
loading && /* @__PURE__ */ React31.createElement(Shimmer, null, /* @__PURE__ */ React31.createElement(ActivityIndicator, { opacity: 0.5, size: 13 }))
|
|
3425
3797
|
);
|
|
3426
3798
|
if (menuItems && onSelectMenuItem) {
|
|
3427
|
-
element = /* @__PURE__ */
|
|
3799
|
+
element = /* @__PURE__ */ React31.createElement(ContextMenu, { items: menuItems, onSelect: onSelectMenuItem }, element);
|
|
3428
3800
|
}
|
|
3429
3801
|
if (textPosition === "toolip") {
|
|
3430
|
-
element = /* @__PURE__ */
|
|
3802
|
+
element = /* @__PURE__ */ React31.createElement(
|
|
3431
3803
|
Tooltip,
|
|
3432
3804
|
{
|
|
3433
|
-
content: /* @__PURE__ */
|
|
3805
|
+
content: /* @__PURE__ */ React31.createElement(Stack.V, { gap: 2 }, /* @__PURE__ */ React31.createElement(ItemTitle, { showBackground: false }, title), /* @__PURE__ */ React31.createElement(ItemDescription, { showBackground: false }, subtitle))
|
|
3434
3806
|
},
|
|
3435
3807
|
element
|
|
3436
3808
|
);
|
|
3437
3809
|
}
|
|
3438
3810
|
return element;
|
|
3439
3811
|
});
|
|
3440
|
-
var GridViewContext =
|
|
3812
|
+
var GridViewContext = createContext7({
|
|
3441
3813
|
size: "small",
|
|
3442
3814
|
textPosition: "below",
|
|
3443
3815
|
bordered: false,
|
|
@@ -3452,7 +3824,7 @@ function GridViewRoot({
|
|
|
3452
3824
|
bordered = false,
|
|
3453
3825
|
disabled = false
|
|
3454
3826
|
}) {
|
|
3455
|
-
const handleClick =
|
|
3827
|
+
const handleClick = useCallback18(
|
|
3456
3828
|
(event) => {
|
|
3457
3829
|
event.stopPropagation();
|
|
3458
3830
|
event.preventDefault();
|
|
@@ -3460,7 +3832,7 @@ function GridViewRoot({
|
|
|
3460
3832
|
},
|
|
3461
3833
|
[onClick]
|
|
3462
3834
|
);
|
|
3463
|
-
const contextValue =
|
|
3835
|
+
const contextValue = useMemo16(
|
|
3464
3836
|
() => ({
|
|
3465
3837
|
size: size2,
|
|
3466
3838
|
textPosition,
|
|
@@ -3469,20 +3841,20 @@ function GridViewRoot({
|
|
|
3469
3841
|
}),
|
|
3470
3842
|
[bordered, disabled, size2, textPosition]
|
|
3471
3843
|
);
|
|
3472
|
-
return /* @__PURE__ */
|
|
3844
|
+
return /* @__PURE__ */ React31.createElement(GridViewContext.Provider, { value: contextValue }, /* @__PURE__ */ React31.createElement(Container3, { onClick: handleClick, scrollable }, scrollable ? /* @__PURE__ */ React31.createElement(ScrollArea, null, children) : children));
|
|
3473
3845
|
}
|
|
3474
3846
|
function GridViewSection({
|
|
3475
3847
|
children,
|
|
3476
3848
|
padding = "20px"
|
|
3477
3849
|
}) {
|
|
3478
|
-
const { size: size2 } =
|
|
3479
|
-
return /* @__PURE__ */
|
|
3850
|
+
const { size: size2 } = useContext7(GridViewContext);
|
|
3851
|
+
return /* @__PURE__ */ React31.createElement(Grid2, { size: size2, padding }, children);
|
|
3480
3852
|
}
|
|
3481
3853
|
function GridViewSectionHeader({ title }) {
|
|
3482
3854
|
const grouped = title.split("/");
|
|
3483
|
-
return /* @__PURE__ */
|
|
3484
|
-
grouped.map((title2, index) => /* @__PURE__ */
|
|
3485
|
-
/* @__PURE__ */
|
|
3855
|
+
return /* @__PURE__ */ React31.createElement(SectionHeaderContainer, null, /* @__PURE__ */ React31.createElement(Spacer.Vertical, { size: 24 }), withSeparatorElements(
|
|
3856
|
+
grouped.map((title2, index) => /* @__PURE__ */ React31.createElement(SectionTitle, { last: index === grouped.length - 1 }, title2)),
|
|
3857
|
+
/* @__PURE__ */ React31.createElement(SectionTitle, null, " / ")
|
|
3486
3858
|
));
|
|
3487
3859
|
}
|
|
3488
3860
|
var GridView;
|
|
@@ -3495,16 +3867,16 @@ var GridView;
|
|
|
3495
3867
|
|
|
3496
3868
|
// src/components/InputFieldWithCompletions.tsx
|
|
3497
3869
|
import { chunkBy, partition } from "@noya-app/noya-utils";
|
|
3498
|
-
import
|
|
3499
|
-
forwardRef as
|
|
3870
|
+
import React35, {
|
|
3871
|
+
forwardRef as forwardRef13,
|
|
3500
3872
|
memo as memo23,
|
|
3501
|
-
useCallback as
|
|
3873
|
+
useCallback as useCallback21,
|
|
3502
3874
|
useEffect as useEffect12,
|
|
3503
3875
|
useImperativeHandle as useImperativeHandle3,
|
|
3504
3876
|
useLayoutEffect as useLayoutEffect7,
|
|
3505
|
-
useMemo as
|
|
3506
|
-
useRef as
|
|
3507
|
-
useState as
|
|
3877
|
+
useMemo as useMemo19,
|
|
3878
|
+
useRef as useRef16,
|
|
3879
|
+
useState as useState18
|
|
3508
3880
|
} from "react";
|
|
3509
3881
|
import styled25 from "styled-components";
|
|
3510
3882
|
|
|
@@ -3582,18 +3954,18 @@ function mergeRanges(ranges) {
|
|
|
3582
3954
|
// src/components/ListView.tsx
|
|
3583
3955
|
import { range } from "@noya-app/noya-utils";
|
|
3584
3956
|
import { composeRefs as composeRefs2 } from "@radix-ui/react-compose-refs";
|
|
3585
|
-
import
|
|
3957
|
+
import React33, {
|
|
3586
3958
|
Children as Children4,
|
|
3587
|
-
createContext as
|
|
3588
|
-
forwardRef as
|
|
3959
|
+
createContext as createContext9,
|
|
3960
|
+
forwardRef as forwardRef11,
|
|
3589
3961
|
isValidElement as isValidElement3,
|
|
3590
3962
|
memo as memo22,
|
|
3591
|
-
useCallback as
|
|
3592
|
-
useContext as
|
|
3963
|
+
useCallback as useCallback20,
|
|
3964
|
+
useContext as useContext9,
|
|
3593
3965
|
useImperativeHandle as useImperativeHandle2,
|
|
3594
3966
|
useLayoutEffect as useLayoutEffect6,
|
|
3595
|
-
useMemo as
|
|
3596
|
-
useRef as
|
|
3967
|
+
useMemo as useMemo18,
|
|
3968
|
+
useRef as useRef15
|
|
3597
3969
|
} from "react";
|
|
3598
3970
|
import { WindowScroller } from "react-virtualized";
|
|
3599
3971
|
import { VariableSizeList } from "react-window";
|
|
@@ -3636,16 +4008,16 @@ import {
|
|
|
3636
4008
|
useSortable,
|
|
3637
4009
|
verticalListSortingStrategy
|
|
3638
4010
|
} from "@dnd-kit/sortable";
|
|
3639
|
-
import
|
|
3640
|
-
createContext as
|
|
4011
|
+
import React32, {
|
|
4012
|
+
createContext as createContext8,
|
|
3641
4013
|
memo as memo21,
|
|
3642
|
-
useCallback as
|
|
3643
|
-
useContext as
|
|
3644
|
-
useMemo as
|
|
3645
|
-
useRef as
|
|
3646
|
-
useState as
|
|
4014
|
+
useCallback as useCallback19,
|
|
4015
|
+
useContext as useContext8,
|
|
4016
|
+
useMemo as useMemo17,
|
|
4017
|
+
useRef as useRef14,
|
|
4018
|
+
useState as useState17
|
|
3647
4019
|
} from "react";
|
|
3648
|
-
import { createPortal } from "react-dom";
|
|
4020
|
+
import { createPortal as createPortal2 } from "react-dom";
|
|
3649
4021
|
var normalizeListDestinationIndex = (index, position) => {
|
|
3650
4022
|
return position === "above" ? index : index + 1;
|
|
3651
4023
|
};
|
|
@@ -3658,7 +4030,7 @@ var defaultAcceptsDrop = (sourceIndex, destinationIndex, position) => {
|
|
|
3658
4030
|
}
|
|
3659
4031
|
return true;
|
|
3660
4032
|
};
|
|
3661
|
-
var SortableItemContext =
|
|
4033
|
+
var SortableItemContext = createContext8({
|
|
3662
4034
|
keys: [],
|
|
3663
4035
|
position: { x: 0, y: 0 },
|
|
3664
4036
|
acceptsDrop: defaultAcceptsDrop,
|
|
@@ -3680,7 +4052,7 @@ function SortableItem({
|
|
|
3680
4052
|
disabled,
|
|
3681
4053
|
children
|
|
3682
4054
|
}) {
|
|
3683
|
-
const { keys, position, acceptsDrop, setActivatorEvent, axis } =
|
|
4055
|
+
const { keys, position, acceptsDrop, setActivatorEvent, axis } = useContext8(SortableItemContext);
|
|
3684
4056
|
const sortable = useSortable({ id, disabled });
|
|
3685
4057
|
const {
|
|
3686
4058
|
active,
|
|
@@ -3700,7 +4072,7 @@ function SortableItem({
|
|
|
3700
4072
|
const eventY = activatorEvent?.clientY ?? 0;
|
|
3701
4073
|
const offsetLeft = eventX + position.x;
|
|
3702
4074
|
const offsetTop = eventY + position.y;
|
|
3703
|
-
const ref =
|
|
4075
|
+
const ref = useCallback19((node) => setNodeRef(node), [setNodeRef]);
|
|
3704
4076
|
return children({
|
|
3705
4077
|
ref,
|
|
3706
4078
|
...attributes,
|
|
@@ -3731,22 +4103,22 @@ function SortableRoot({
|
|
|
3731
4103
|
}
|
|
3732
4104
|
})
|
|
3733
4105
|
);
|
|
3734
|
-
const [activeIndex, setActiveIndex] =
|
|
3735
|
-
const activatorEvent =
|
|
3736
|
-
const setActivatorEvent =
|
|
4106
|
+
const [activeIndex, setActiveIndex] = useState17();
|
|
4107
|
+
const activatorEvent = useRef14(null);
|
|
4108
|
+
const setActivatorEvent = useCallback19((event) => {
|
|
3737
4109
|
activatorEvent.current = event;
|
|
3738
4110
|
}, []);
|
|
3739
|
-
const [position, setPosition] =
|
|
3740
|
-
const handleDragStart =
|
|
4111
|
+
const [position, setPosition] = useState17({ x: 0, y: 0 });
|
|
4112
|
+
const handleDragStart = useCallback19(
|
|
3741
4113
|
(event) => {
|
|
3742
4114
|
setActiveIndex(keys.indexOf(event.active.id));
|
|
3743
4115
|
},
|
|
3744
4116
|
[keys]
|
|
3745
4117
|
);
|
|
3746
|
-
const handleDragMove =
|
|
4118
|
+
const handleDragMove = useCallback19((event) => {
|
|
3747
4119
|
setPosition({ ...event.delta });
|
|
3748
4120
|
}, []);
|
|
3749
|
-
const handleDragEnd =
|
|
4121
|
+
const handleDragEnd = useCallback19(
|
|
3750
4122
|
(event) => {
|
|
3751
4123
|
const { active, over } = event;
|
|
3752
4124
|
setActiveIndex(void 0);
|
|
@@ -3773,10 +4145,10 @@ function SortableRoot({
|
|
|
3773
4145
|
},
|
|
3774
4146
|
[acceptsDrop, axis, keys, onMoveItem, position.x, position.y]
|
|
3775
4147
|
);
|
|
3776
|
-
return /* @__PURE__ */
|
|
4148
|
+
return /* @__PURE__ */ React32.createElement(
|
|
3777
4149
|
SortableItemContext.Provider,
|
|
3778
4150
|
{
|
|
3779
|
-
value:
|
|
4151
|
+
value: useMemo17(
|
|
3780
4152
|
() => ({
|
|
3781
4153
|
keys,
|
|
3782
4154
|
acceptsDrop,
|
|
@@ -3787,7 +4159,7 @@ function SortableRoot({
|
|
|
3787
4159
|
[acceptsDrop, axis, keys, position, setActivatorEvent]
|
|
3788
4160
|
)
|
|
3789
4161
|
},
|
|
3790
|
-
/* @__PURE__ */
|
|
4162
|
+
/* @__PURE__ */ React32.createElement(
|
|
3791
4163
|
DndContext,
|
|
3792
4164
|
{
|
|
3793
4165
|
sensors,
|
|
@@ -3796,9 +4168,9 @@ function SortableRoot({
|
|
|
3796
4168
|
onDragMove: handleDragMove,
|
|
3797
4169
|
onDragEnd: handleDragEnd
|
|
3798
4170
|
},
|
|
3799
|
-
/* @__PURE__ */
|
|
3800
|
-
renderOverlay &&
|
|
3801
|
-
/* @__PURE__ */
|
|
4171
|
+
/* @__PURE__ */ React32.createElement(SortableContext, { items: keys, strategy: verticalListSortingStrategy }, children),
|
|
4172
|
+
renderOverlay && createPortal2(
|
|
4173
|
+
/* @__PURE__ */ React32.createElement(DragOverlay, { dropAnimation: null }, activeIndex !== void 0 && activeIndex >= 0 && renderOverlay(activeIndex)),
|
|
3802
4174
|
document.body
|
|
3803
4175
|
)
|
|
3804
4176
|
)
|
|
@@ -3813,10 +4185,10 @@ var Sortable;
|
|
|
3813
4185
|
// src/components/ListView.tsx
|
|
3814
4186
|
var ROW_HEIGHT = 31;
|
|
3815
4187
|
var SECTION_HEADER_LABEL_HEIGHT = 27;
|
|
3816
|
-
var DraggingContext =
|
|
4188
|
+
var DraggingContext = createContext9({
|
|
3817
4189
|
indentation: 12
|
|
3818
4190
|
});
|
|
3819
|
-
var ListRowContext =
|
|
4191
|
+
var ListRowContext = createContext9({
|
|
3820
4192
|
marginType: "none",
|
|
3821
4193
|
selectedPosition: "only",
|
|
3822
4194
|
sortable: false,
|
|
@@ -3846,7 +4218,7 @@ function ListViewEditableRowTitle({
|
|
|
3846
4218
|
autoFocus,
|
|
3847
4219
|
placeholder
|
|
3848
4220
|
}) {
|
|
3849
|
-
const inputRef =
|
|
4221
|
+
const inputRef = useRef15(null);
|
|
3850
4222
|
useLayoutEffect6(() => {
|
|
3851
4223
|
const element = inputRef.current;
|
|
3852
4224
|
if (!element || !autoFocus)
|
|
@@ -3856,7 +4228,7 @@ function ListViewEditableRowTitle({
|
|
|
3856
4228
|
element.select();
|
|
3857
4229
|
}, 0);
|
|
3858
4230
|
}, [autoFocus]);
|
|
3859
|
-
return /* @__PURE__ */
|
|
4231
|
+
return /* @__PURE__ */ React33.createElement(
|
|
3860
4232
|
ListViewEditableRowTitleElement,
|
|
3861
4233
|
{
|
|
3862
4234
|
ref: inputRef,
|
|
@@ -3978,7 +4350,7 @@ var ListViewDragIndicatorElement = styled23.div(({ theme, relativeDropPosition,
|
|
|
3978
4350
|
boxShadow: "0 0 2px rgba(0,0,0,0.5)"
|
|
3979
4351
|
}
|
|
3980
4352
|
}));
|
|
3981
|
-
var ListViewRow =
|
|
4353
|
+
var ListViewRow = forwardRef11(function ListViewRow2({
|
|
3982
4354
|
id,
|
|
3983
4355
|
tabIndex = 0,
|
|
3984
4356
|
gap,
|
|
@@ -4011,12 +4383,12 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4011
4383
|
divider,
|
|
4012
4384
|
gap: listGap,
|
|
4013
4385
|
colorScheme
|
|
4014
|
-
} =
|
|
4386
|
+
} = useContext9(ListRowContext);
|
|
4015
4387
|
const { hoverProps } = useHover({
|
|
4016
4388
|
onHoverChange
|
|
4017
4389
|
});
|
|
4018
|
-
const { indentation, isDragging } =
|
|
4019
|
-
const handlePress =
|
|
4390
|
+
const { indentation, isDragging } = useContext9(DraggingContext);
|
|
4391
|
+
const handlePress = useCallback20(
|
|
4020
4392
|
(event) => {
|
|
4021
4393
|
event.preventDefault();
|
|
4022
4394
|
if (event.button !== 0)
|
|
@@ -4025,14 +4397,14 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4025
4397
|
},
|
|
4026
4398
|
[onPress]
|
|
4027
4399
|
);
|
|
4028
|
-
const handleDoubleClick =
|
|
4400
|
+
const handleDoubleClick = useCallback20(
|
|
4029
4401
|
(event) => {
|
|
4030
4402
|
event.stopPropagation();
|
|
4031
4403
|
onDoubleClick?.();
|
|
4032
4404
|
},
|
|
4033
4405
|
[onDoubleClick]
|
|
4034
4406
|
);
|
|
4035
|
-
const mergedStyle =
|
|
4407
|
+
const mergedStyle = useMemo18(() => {
|
|
4036
4408
|
return isDragging ? {
|
|
4037
4409
|
// TODO: Where do these offsets actually come from?
|
|
4038
4410
|
transform: `translate3d(-36px, -6px, 0)`,
|
|
@@ -4044,7 +4416,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4044
4416
|
relativeDropPosition,
|
|
4045
4417
|
...renderProps
|
|
4046
4418
|
}, ref) => {
|
|
4047
|
-
const element = /* @__PURE__ */
|
|
4419
|
+
const element = /* @__PURE__ */ React33.createElement(
|
|
4048
4420
|
RowContainer,
|
|
4049
4421
|
{
|
|
4050
4422
|
ref,
|
|
@@ -4075,7 +4447,7 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4075
4447
|
),
|
|
4076
4448
|
tabIndex
|
|
4077
4449
|
},
|
|
4078
|
-
relativeDropPosition && /* @__PURE__ */
|
|
4450
|
+
relativeDropPosition && /* @__PURE__ */ React33.createElement(
|
|
4079
4451
|
ListViewDragIndicatorElement,
|
|
4080
4452
|
{
|
|
4081
4453
|
colorScheme,
|
|
@@ -4084,11 +4456,11 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4084
4456
|
gap: listGap
|
|
4085
4457
|
}
|
|
4086
4458
|
),
|
|
4087
|
-
depth > 0 && /* @__PURE__ */
|
|
4459
|
+
depth > 0 && /* @__PURE__ */ React33.createElement(Spacer.Horizontal, { size: depth * indentation }),
|
|
4088
4460
|
children
|
|
4089
4461
|
);
|
|
4090
4462
|
if (menuItems && onSelectMenuItem) {
|
|
4091
|
-
return /* @__PURE__ */
|
|
4463
|
+
return /* @__PURE__ */ React33.createElement(
|
|
4092
4464
|
ContextMenu,
|
|
4093
4465
|
{
|
|
4094
4466
|
items: menuItems,
|
|
@@ -4101,21 +4473,21 @@ var ListViewRow = forwardRef10(function ListViewRow2({
|
|
|
4101
4473
|
return element;
|
|
4102
4474
|
};
|
|
4103
4475
|
if (sortable && id) {
|
|
4104
|
-
return /* @__PURE__ */
|
|
4476
|
+
return /* @__PURE__ */ React33.createElement(Sortable.Item, { id, disabled: overrideSortable === false }, ({ ref: sortableRef, ...sortableProps }) => renderContent(sortableProps, composeRefs2(sortableRef, forwardedRef)));
|
|
4105
4477
|
}
|
|
4106
4478
|
return renderContent({}, forwardedRef);
|
|
4107
4479
|
});
|
|
4108
|
-
var RenderItemContext =
|
|
4480
|
+
var RenderItemContext = createContext9(
|
|
4109
4481
|
() => null
|
|
4110
4482
|
);
|
|
4111
4483
|
var VirtualizedListRow = memo22(function VirtualizedListRow2({
|
|
4112
4484
|
index,
|
|
4113
4485
|
style: style3
|
|
4114
4486
|
}) {
|
|
4115
|
-
const renderItem =
|
|
4116
|
-
return /* @__PURE__ */
|
|
4487
|
+
const renderItem = useContext9(RenderItemContext);
|
|
4488
|
+
return /* @__PURE__ */ React33.createElement("div", { key: index, style: style3 }, renderItem(index));
|
|
4117
4489
|
});
|
|
4118
|
-
var VirtualizedListInner =
|
|
4490
|
+
var VirtualizedListInner = forwardRef11(function VirtualizedListInner2({
|
|
4119
4491
|
size: size2,
|
|
4120
4492
|
scrollElement,
|
|
4121
4493
|
items,
|
|
@@ -4123,7 +4495,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
|
|
|
4123
4495
|
keyExtractor,
|
|
4124
4496
|
renderItem
|
|
4125
4497
|
}, ref) {
|
|
4126
|
-
const listRef =
|
|
4498
|
+
const listRef = useRef15(null);
|
|
4127
4499
|
useImperativeHandle2(ref, () => ({
|
|
4128
4500
|
scrollToIndex(index) {
|
|
4129
4501
|
listRef.current?.scrollToItem(index);
|
|
@@ -4136,7 +4508,7 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
|
|
|
4136
4508
|
// since it doesn't currently support row height changes
|
|
4137
4509
|
items
|
|
4138
4510
|
]);
|
|
4139
|
-
const listStyle =
|
|
4511
|
+
const listStyle = useMemo18(
|
|
4140
4512
|
() => ({
|
|
4141
4513
|
overflowX: "initial",
|
|
4142
4514
|
overflowY: "initial",
|
|
@@ -4144,18 +4516,18 @@ var VirtualizedListInner = forwardRef10(function VirtualizedListInner2({
|
|
|
4144
4516
|
}),
|
|
4145
4517
|
[]
|
|
4146
4518
|
);
|
|
4147
|
-
return /* @__PURE__ */
|
|
4519
|
+
return /* @__PURE__ */ React33.createElement(RenderItemContext.Provider, { value: renderItem }, /* @__PURE__ */ React33.createElement(
|
|
4148
4520
|
WindowScroller,
|
|
4149
4521
|
{
|
|
4150
4522
|
scrollElement,
|
|
4151
|
-
style:
|
|
4523
|
+
style: useMemo18(() => ({ flex: "1 1 auto" }), [])
|
|
4152
4524
|
},
|
|
4153
|
-
|
|
4525
|
+
useCallback20(
|
|
4154
4526
|
({
|
|
4155
4527
|
registerChild,
|
|
4156
4528
|
onChildScroll,
|
|
4157
4529
|
scrollTop
|
|
4158
|
-
}) => /* @__PURE__ */
|
|
4530
|
+
}) => /* @__PURE__ */ React33.createElement("div", { ref: registerChild }, /* @__PURE__ */ React33.createElement(
|
|
4159
4531
|
VariableSizeList,
|
|
4160
4532
|
{
|
|
4161
4533
|
ref: listRef,
|
|
@@ -4196,7 +4568,7 @@ var RootContainer2 = styled23.div(({ theme, scrollable, gap }) => ({
|
|
|
4196
4568
|
color: theme.colors.textMuted,
|
|
4197
4569
|
gap
|
|
4198
4570
|
}));
|
|
4199
|
-
var ListViewRootInner =
|
|
4571
|
+
var ListViewRootInner = forwardRef11(function ListViewRootInner2({
|
|
4200
4572
|
onPress,
|
|
4201
4573
|
scrollable = false,
|
|
4202
4574
|
expandable = true,
|
|
@@ -4215,7 +4587,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4215
4587
|
colorScheme = "primary",
|
|
4216
4588
|
gap = 0
|
|
4217
4589
|
}, forwardedRef) {
|
|
4218
|
-
const handleClick =
|
|
4590
|
+
const handleClick = useCallback20(
|
|
4219
4591
|
(event) => {
|
|
4220
4592
|
if (event.target instanceof HTMLElement && event.target.classList.contains("scroll-component"))
|
|
4221
4593
|
return;
|
|
@@ -4225,11 +4597,11 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4225
4597
|
},
|
|
4226
4598
|
[onPress]
|
|
4227
4599
|
);
|
|
4228
|
-
const renderChild =
|
|
4600
|
+
const renderChild = useCallback20(
|
|
4229
4601
|
(index) => renderItem(data[index], index, { isDragging: false }),
|
|
4230
4602
|
[data, renderItem]
|
|
4231
4603
|
);
|
|
4232
|
-
const getItemContextValue =
|
|
4604
|
+
const getItemContextValue = useCallback20(
|
|
4233
4605
|
(i) => {
|
|
4234
4606
|
const current = renderChild(i);
|
|
4235
4607
|
if (!isValidElement3(current))
|
|
@@ -4289,26 +4661,26 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4289
4661
|
gap
|
|
4290
4662
|
]
|
|
4291
4663
|
);
|
|
4292
|
-
const draggingContextOverlayValue =
|
|
4664
|
+
const draggingContextOverlayValue = useMemo18(
|
|
4293
4665
|
() => ({ indentation, isDragging: true }),
|
|
4294
4666
|
[indentation]
|
|
4295
4667
|
);
|
|
4296
|
-
const renderOverlay =
|
|
4297
|
-
(index) => /* @__PURE__ */
|
|
4668
|
+
const renderOverlay = useCallback20(
|
|
4669
|
+
(index) => /* @__PURE__ */ React33.createElement("div", { style: { opacity: 0.25 } }, /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextOverlayValue }, renderItem(data[index], index, { isDragging: true }))),
|
|
4298
4670
|
[draggingContextOverlayValue, renderItem, data]
|
|
4299
4671
|
);
|
|
4300
|
-
const renderWrappedChild =
|
|
4672
|
+
const renderWrappedChild = useCallback20(
|
|
4301
4673
|
(index) => {
|
|
4302
4674
|
const contextValue = getItemContextValue(index);
|
|
4303
4675
|
const current = renderChild(index);
|
|
4304
4676
|
if (!contextValue || !isValidElement3(current))
|
|
4305
4677
|
return null;
|
|
4306
|
-
return /* @__PURE__ */
|
|
4678
|
+
return /* @__PURE__ */ React33.createElement(ListRowContext.Provider, { key: current.key, value: contextValue }, current);
|
|
4307
4679
|
},
|
|
4308
4680
|
[getItemContextValue, renderChild]
|
|
4309
4681
|
);
|
|
4310
|
-
const ids =
|
|
4311
|
-
const withSortable = (children) => sortable ? /* @__PURE__ */
|
|
4682
|
+
const ids = useMemo18(() => data.map(keyExtractor), [keyExtractor, data]);
|
|
4683
|
+
const withSortable = (children) => sortable ? /* @__PURE__ */ React33.createElement(
|
|
4312
4684
|
Sortable.Root,
|
|
4313
4685
|
{
|
|
4314
4686
|
onMoveItem,
|
|
@@ -4318,8 +4690,8 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4318
4690
|
},
|
|
4319
4691
|
children
|
|
4320
4692
|
) : children;
|
|
4321
|
-
const withScrollable = (children) => scrollable ? /* @__PURE__ */
|
|
4322
|
-
const getItemHeight =
|
|
4693
|
+
const withScrollable = (children) => scrollable ? /* @__PURE__ */ React33.createElement(ScrollArea, null, children) : children(null);
|
|
4694
|
+
const getItemHeight = useCallback20(
|
|
4323
4695
|
(index) => {
|
|
4324
4696
|
const child = getItemContextValue(index);
|
|
4325
4697
|
const margin = child?.marginType ? getPositionMargin(child.marginType) : { top: 0, bottom: 0 };
|
|
@@ -4328,12 +4700,12 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4328
4700
|
},
|
|
4329
4701
|
[getItemContextValue, variant]
|
|
4330
4702
|
);
|
|
4331
|
-
const getKey =
|
|
4703
|
+
const getKey = useCallback20(
|
|
4332
4704
|
(index) => keyExtractor(data[index], index),
|
|
4333
4705
|
[data, keyExtractor]
|
|
4334
4706
|
);
|
|
4335
|
-
const draggingContextValue =
|
|
4336
|
-
return /* @__PURE__ */
|
|
4707
|
+
const draggingContextValue = useMemo18(() => ({ indentation }), [indentation]);
|
|
4708
|
+
return /* @__PURE__ */ React33.createElement(DraggingContext.Provider, { value: draggingContextValue }, /* @__PURE__ */ React33.createElement(
|
|
4337
4709
|
RootContainer2,
|
|
4338
4710
|
{
|
|
4339
4711
|
...{
|
|
@@ -4344,7 +4716,7 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4344
4716
|
},
|
|
4345
4717
|
withScrollable(
|
|
4346
4718
|
(scrollElementRef) => withSortable(
|
|
4347
|
-
virtualized ? /* @__PURE__ */
|
|
4719
|
+
virtualized ? /* @__PURE__ */ React33.createElement(
|
|
4348
4720
|
VirtualizedList,
|
|
4349
4721
|
{
|
|
4350
4722
|
ref: forwardedRef,
|
|
@@ -4361,33 +4733,33 @@ var ListViewRootInner = forwardRef10(function ListViewRootInner2({
|
|
|
4361
4733
|
));
|
|
4362
4734
|
});
|
|
4363
4735
|
var ListViewRoot = memo22(ListViewRootInner);
|
|
4364
|
-
var ChildrenListViewInner =
|
|
4365
|
-
const items =
|
|
4736
|
+
var ChildrenListViewInner = forwardRef11(function ChildrenListViewInner2({ children, ...rest }, forwardedRef) {
|
|
4737
|
+
const items = useMemo18(
|
|
4366
4738
|
() => Children4.toArray(children).flatMap(
|
|
4367
4739
|
(child) => isValidElement3(child) ? [child] : []
|
|
4368
4740
|
),
|
|
4369
4741
|
[children]
|
|
4370
4742
|
);
|
|
4371
|
-
return /* @__PURE__ */
|
|
4743
|
+
return /* @__PURE__ */ React33.createElement(
|
|
4372
4744
|
ListViewRoot,
|
|
4373
4745
|
{
|
|
4374
4746
|
ref: forwardedRef,
|
|
4375
4747
|
...rest,
|
|
4376
4748
|
data: items,
|
|
4377
|
-
keyExtractor:
|
|
4749
|
+
keyExtractor: useCallback20(
|
|
4378
4750
|
({ key }, index) => typeof key === "string" ? key : (key ?? index).toString(),
|
|
4379
4751
|
[]
|
|
4380
4752
|
),
|
|
4381
|
-
renderItem:
|
|
4753
|
+
renderItem: useCallback20((item) => item, [])
|
|
4382
4754
|
}
|
|
4383
4755
|
);
|
|
4384
4756
|
});
|
|
4385
4757
|
var ChildrenListView = memo22(ChildrenListViewInner);
|
|
4386
|
-
var SimpleListViewInner =
|
|
4758
|
+
var SimpleListViewInner = forwardRef11(function SimpleListViewInner2(props, forwardedRef) {
|
|
4387
4759
|
if ("children" in props) {
|
|
4388
|
-
return /* @__PURE__ */
|
|
4760
|
+
return /* @__PURE__ */ React33.createElement(ChildrenListView, { ref: forwardedRef, ...props });
|
|
4389
4761
|
} else {
|
|
4390
|
-
return /* @__PURE__ */
|
|
4762
|
+
return /* @__PURE__ */ React33.createElement(ListViewRoot, { ref: forwardedRef, ...props });
|
|
4391
4763
|
}
|
|
4392
4764
|
});
|
|
4393
4765
|
var SimpleListView = memo22(SimpleListViewInner);
|
|
@@ -4408,7 +4780,7 @@ var ListView;
|
|
|
4408
4780
|
})(ListView || (ListView = {}));
|
|
4409
4781
|
|
|
4410
4782
|
// src/components/Text.tsx
|
|
4411
|
-
import
|
|
4783
|
+
import React34, { forwardRef as forwardRef12 } from "react";
|
|
4412
4784
|
import styled24 from "styled-components";
|
|
4413
4785
|
var elements = {
|
|
4414
4786
|
title: "h1",
|
|
@@ -4420,6 +4792,7 @@ var elements = {
|
|
|
4420
4792
|
heading5: "h5",
|
|
4421
4793
|
body: "p",
|
|
4422
4794
|
small: "span",
|
|
4795
|
+
button: "span",
|
|
4423
4796
|
code: "code",
|
|
4424
4797
|
label: "span"
|
|
4425
4798
|
};
|
|
@@ -4429,7 +4802,7 @@ var StyledElement = styled24.span(({ theme, variant, styleProps, breakpoints, co
|
|
|
4429
4802
|
...styleProps,
|
|
4430
4803
|
...mergeBreakpoints(breakpoints || [])
|
|
4431
4804
|
}));
|
|
4432
|
-
var Text =
|
|
4805
|
+
var Text = forwardRef12(function Text2({
|
|
4433
4806
|
as,
|
|
4434
4807
|
variant,
|
|
4435
4808
|
breakpoints,
|
|
@@ -4441,7 +4814,7 @@ var Text = forwardRef11(function Text2({
|
|
|
4441
4814
|
...rest
|
|
4442
4815
|
}, forwardedRef) {
|
|
4443
4816
|
const element = as ?? elements[variant] ?? "span";
|
|
4444
|
-
return /* @__PURE__ */
|
|
4817
|
+
return /* @__PURE__ */ React34.createElement(
|
|
4445
4818
|
StyledElement,
|
|
4446
4819
|
{
|
|
4447
4820
|
ref: forwardedRef,
|
|
@@ -4457,28 +4830,28 @@ var Text = forwardRef11(function Text2({
|
|
|
4457
4830
|
children
|
|
4458
4831
|
);
|
|
4459
4832
|
});
|
|
4460
|
-
var Heading1 =
|
|
4461
|
-
(props, ref) => /* @__PURE__ */
|
|
4833
|
+
var Heading1 = forwardRef12(
|
|
4834
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading1" })
|
|
4462
4835
|
);
|
|
4463
|
-
var Heading2 =
|
|
4464
|
-
(props, ref) => /* @__PURE__ */
|
|
4836
|
+
var Heading2 = forwardRef12(
|
|
4837
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading2" })
|
|
4465
4838
|
);
|
|
4466
|
-
var Heading3 =
|
|
4467
|
-
(props, ref) => /* @__PURE__ */
|
|
4839
|
+
var Heading3 = forwardRef12(
|
|
4840
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading3" })
|
|
4468
4841
|
);
|
|
4469
|
-
var Heading4 =
|
|
4470
|
-
(props, ref) => /* @__PURE__ */
|
|
4842
|
+
var Heading4 = forwardRef12(
|
|
4843
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading4" })
|
|
4471
4844
|
);
|
|
4472
|
-
var Heading5 =
|
|
4473
|
-
(props, ref) => /* @__PURE__ */
|
|
4845
|
+
var Heading5 = forwardRef12(
|
|
4846
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "heading5" })
|
|
4474
4847
|
);
|
|
4475
|
-
var Body =
|
|
4476
|
-
(props, ref) => /* @__PURE__ */
|
|
4848
|
+
var Body = forwardRef12(
|
|
4849
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "body" })
|
|
4477
4850
|
);
|
|
4478
|
-
var Small =
|
|
4479
|
-
(props, ref) => /* @__PURE__ */
|
|
4851
|
+
var Small = forwardRef12(
|
|
4852
|
+
(props, ref) => /* @__PURE__ */ React34.createElement(Text, { ref, ...props, variant: "small" })
|
|
4480
4853
|
);
|
|
4481
|
-
var Italic = ({ children }) => /* @__PURE__ */
|
|
4854
|
+
var Italic = ({ children }) => /* @__PURE__ */ React34.createElement(
|
|
4482
4855
|
"span",
|
|
4483
4856
|
{
|
|
4484
4857
|
style: {
|
|
@@ -4521,14 +4894,14 @@ var CompletionToken = styled25.span(
|
|
|
4521
4894
|
})
|
|
4522
4895
|
);
|
|
4523
4896
|
var CompletionMenu = memo23(
|
|
4524
|
-
|
|
4897
|
+
forwardRef13(function CompletionMenu2({
|
|
4525
4898
|
items,
|
|
4526
4899
|
selectedIndex,
|
|
4527
4900
|
onSelectItem,
|
|
4528
4901
|
onHoverIndex,
|
|
4529
4902
|
listSize
|
|
4530
4903
|
}, forwardedRef) {
|
|
4531
|
-
return /* @__PURE__ */
|
|
4904
|
+
return /* @__PURE__ */ React35.createElement(
|
|
4532
4905
|
ListView.Root,
|
|
4533
4906
|
{
|
|
4534
4907
|
ref: forwardedRef,
|
|
@@ -4540,13 +4913,13 @@ var CompletionMenu = memo23(
|
|
|
4540
4913
|
sectionHeaderVariant: "label",
|
|
4541
4914
|
renderItem: (item, i) => {
|
|
4542
4915
|
if (item.type === "sectionHeader") {
|
|
4543
|
-
return /* @__PURE__ */
|
|
4916
|
+
return /* @__PURE__ */ React35.createElement(ListView.Row, { key: item.id, isSectionHeader: true }, item.name);
|
|
4544
4917
|
}
|
|
4545
4918
|
const tokens = fuzzyTokenize({
|
|
4546
4919
|
item: item.name,
|
|
4547
4920
|
itemScore: item
|
|
4548
4921
|
});
|
|
4549
|
-
return /* @__PURE__ */
|
|
4922
|
+
return /* @__PURE__ */ React35.createElement(
|
|
4550
4923
|
ListView.Row,
|
|
4551
4924
|
{
|
|
4552
4925
|
key: item.id,
|
|
@@ -4558,8 +4931,8 @@ var CompletionMenu = memo23(
|
|
|
4558
4931
|
}
|
|
4559
4932
|
}
|
|
4560
4933
|
},
|
|
4561
|
-
tokens.map((token, j) => /* @__PURE__ */
|
|
4562
|
-
item.icon && /* @__PURE__ */
|
|
4934
|
+
tokens.map((token, j) => /* @__PURE__ */ React35.createElement(CompletionToken, { key: j, type: token.type }, token.text)),
|
|
4935
|
+
item.icon && /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(Spacer.Horizontal, null), item.icon)
|
|
4563
4936
|
);
|
|
4564
4937
|
}
|
|
4565
4938
|
}
|
|
@@ -4567,7 +4940,7 @@ var CompletionMenu = memo23(
|
|
|
4567
4940
|
})
|
|
4568
4941
|
);
|
|
4569
4942
|
var InputFieldWithCompletions = memo23(
|
|
4570
|
-
|
|
4943
|
+
forwardRef13(function InputFieldWithCompletions2({
|
|
4571
4944
|
loading,
|
|
4572
4945
|
initialValue = "",
|
|
4573
4946
|
placeholder,
|
|
@@ -4585,13 +4958,13 @@ var InputFieldWithCompletions = memo23(
|
|
|
4585
4958
|
hideChildrenWhenFocused = false,
|
|
4586
4959
|
hideMenuWhenEmptyValue = false
|
|
4587
4960
|
}, forwardedRef) {
|
|
4588
|
-
const ref =
|
|
4589
|
-
const [isFocused, setIsFocused] =
|
|
4590
|
-
const [state, _setState] =
|
|
4961
|
+
const ref = useRef16(null);
|
|
4962
|
+
const [isFocused, setIsFocused] = useState18(false);
|
|
4963
|
+
const [state, _setState] = useState18({
|
|
4591
4964
|
filter: initialValue,
|
|
4592
4965
|
selectedIndex: 0
|
|
4593
4966
|
});
|
|
4594
|
-
const updateState =
|
|
4967
|
+
const updateState = useCallback21(
|
|
4595
4968
|
(newState, hoverItem) => {
|
|
4596
4969
|
const nextState = { ...state, ...newState };
|
|
4597
4970
|
const nextItems = filterWithGroupedSections(items, nextState.filter);
|
|
@@ -4620,7 +4993,7 @@ var InputFieldWithCompletions = memo23(
|
|
|
4620
4993
|
},
|
|
4621
4994
|
[items, onChange, onHoverItem, state]
|
|
4622
4995
|
);
|
|
4623
|
-
const initialValueRef =
|
|
4996
|
+
const initialValueRef = useRef16(initialValue);
|
|
4624
4997
|
useLayoutEffect7(() => {
|
|
4625
4998
|
if (initialValueRef.current === initialValue)
|
|
4626
4999
|
return;
|
|
@@ -4628,8 +5001,8 @@ var InputFieldWithCompletions = memo23(
|
|
|
4628
5001
|
updateState({ filter: initialValue });
|
|
4629
5002
|
}, [initialValue, updateState]);
|
|
4630
5003
|
const { filter, selectedIndex } = state;
|
|
4631
|
-
const listRef =
|
|
4632
|
-
const filteredItems =
|
|
5004
|
+
const listRef = React35.useRef(null);
|
|
5005
|
+
const filteredItems = useMemo19(
|
|
4633
5006
|
() => filterWithGroupedSections(items, filter),
|
|
4634
5007
|
[items, filter]
|
|
4635
5008
|
);
|
|
@@ -4650,8 +5023,8 @@ var InputFieldWithCompletions = memo23(
|
|
|
4650
5023
|
listRef.current.scrollToIndex(selectedIndex);
|
|
4651
5024
|
}
|
|
4652
5025
|
}, [selectedIndex]);
|
|
4653
|
-
const lastSubmittedValueRef =
|
|
4654
|
-
const selectItem =
|
|
5026
|
+
const lastSubmittedValueRef = useRef16(void 0);
|
|
5027
|
+
const selectItem = useCallback21(
|
|
4655
5028
|
(item) => {
|
|
4656
5029
|
if (item.type === "sectionHeader")
|
|
4657
5030
|
return;
|
|
@@ -4667,17 +5040,17 @@ var InputFieldWithCompletions = memo23(
|
|
|
4667
5040
|
},
|
|
4668
5041
|
[filter, onSelectItem, onHoverItem, ref]
|
|
4669
5042
|
);
|
|
4670
|
-
const handleChange =
|
|
5043
|
+
const handleChange = useCallback21(
|
|
4671
5044
|
(value) => updateState({ selectedIndex: 0, filter: value }),
|
|
4672
5045
|
[updateState]
|
|
4673
5046
|
);
|
|
4674
|
-
const handleBlur =
|
|
5047
|
+
const handleBlur = useCallback21(() => {
|
|
4675
5048
|
setIsFocused(false);
|
|
4676
5049
|
const didSubmit = lastSubmittedValueRef.current?.filter === filter;
|
|
4677
5050
|
updateState({ selectedIndex: 0, filter: initialValue }, "resetHover");
|
|
4678
5051
|
onBlur?.(didSubmit, filter);
|
|
4679
5052
|
}, [filter, initialValue, onBlur, updateState]);
|
|
4680
|
-
const handleFocus =
|
|
5053
|
+
const handleFocus = useCallback21(
|
|
4681
5054
|
(event) => {
|
|
4682
5055
|
setIsFocused(true);
|
|
4683
5056
|
updateState({ selectedIndex: 0, filter: initialValue });
|
|
@@ -4685,11 +5058,11 @@ var InputFieldWithCompletions = memo23(
|
|
|
4685
5058
|
},
|
|
4686
5059
|
[initialValue, onFocus, updateState]
|
|
4687
5060
|
);
|
|
4688
|
-
const handleIndexChange =
|
|
5061
|
+
const handleIndexChange = useCallback21(
|
|
4689
5062
|
(index) => updateState({ selectedIndex: index }),
|
|
4690
5063
|
[updateState]
|
|
4691
5064
|
);
|
|
4692
|
-
const handleKeyDown =
|
|
5065
|
+
const handleKeyDown = useCallback21(
|
|
4693
5066
|
(event) => {
|
|
4694
5067
|
let handled = false;
|
|
4695
5068
|
switch (event.key) {
|
|
@@ -4764,14 +5137,14 @@ var InputFieldWithCompletions = memo23(
|
|
|
4764
5137
|
ref.current?.setSelectionRange(0, ref.current.value.length);
|
|
4765
5138
|
}
|
|
4766
5139
|
}));
|
|
4767
|
-
return /* @__PURE__ */
|
|
5140
|
+
return /* @__PURE__ */ React35.createElement(
|
|
4768
5141
|
InputField.Root,
|
|
4769
5142
|
{
|
|
4770
5143
|
size: size2,
|
|
4771
5144
|
labelSize: 16,
|
|
4772
5145
|
renderPopoverContent: ({ width }) => {
|
|
4773
5146
|
const listSize = { width, height };
|
|
4774
|
-
return /* @__PURE__ */
|
|
5147
|
+
return /* @__PURE__ */ React35.createElement(Stack.V, { flex: `0 0 ${height}px`, display }, filteredItems.length > 0 ? /* @__PURE__ */ React35.createElement(
|
|
4775
5148
|
CompletionMenu,
|
|
4776
5149
|
{
|
|
4777
5150
|
ref: listRef,
|
|
@@ -4781,7 +5154,7 @@ var InputFieldWithCompletions = memo23(
|
|
|
4781
5154
|
onHoverIndex: handleIndexChange,
|
|
4782
5155
|
listSize
|
|
4783
5156
|
}
|
|
4784
|
-
) : /* @__PURE__ */
|
|
5157
|
+
) : /* @__PURE__ */ React35.createElement(
|
|
4785
5158
|
Stack.V,
|
|
4786
5159
|
{
|
|
4787
5160
|
height: "100px",
|
|
@@ -4789,11 +5162,11 @@ var InputFieldWithCompletions = memo23(
|
|
|
4789
5162
|
alignItems: "center",
|
|
4790
5163
|
justifyContent: "center"
|
|
4791
5164
|
},
|
|
4792
|
-
/* @__PURE__ */
|
|
5165
|
+
/* @__PURE__ */ React35.createElement(Small, { color: "textDisabled" }, loading ? "Loading" : "No results")
|
|
4793
5166
|
));
|
|
4794
5167
|
}
|
|
4795
5168
|
},
|
|
4796
|
-
/* @__PURE__ */
|
|
5169
|
+
/* @__PURE__ */ React35.createElement(
|
|
4797
5170
|
InputField.Input,
|
|
4798
5171
|
{
|
|
4799
5172
|
ref,
|
|
@@ -4817,9 +5190,9 @@ var InputFieldWithCompletions = memo23(
|
|
|
4817
5190
|
"aria-controls": "component-listbox"
|
|
4818
5191
|
}
|
|
4819
5192
|
),
|
|
4820
|
-
filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */
|
|
5193
|
+
filter && typeaheadValue && typeaheadValue.startsWith(filter) && /* @__PURE__ */ React35.createElement(InputField.Typeahead, { value: typeaheadValue }),
|
|
4821
5194
|
(!isFocused || !hideChildrenWhenFocused) && children,
|
|
4822
|
-
loading && isFocused && /* @__PURE__ */
|
|
5195
|
+
loading && isFocused && /* @__PURE__ */ React35.createElement(InputField.Label, null, /* @__PURE__ */ React35.createElement(ActivityIndicator, null))
|
|
4823
5196
|
);
|
|
4824
5197
|
})
|
|
4825
5198
|
);
|
|
@@ -4841,7 +5214,7 @@ function getNextIndex(items, currentIndex, direction, isDisabled) {
|
|
|
4841
5214
|
}
|
|
4842
5215
|
|
|
4843
5216
|
// src/components/Label.tsx
|
|
4844
|
-
import
|
|
5217
|
+
import React36, { memo as memo24 } from "react";
|
|
4845
5218
|
import styled26 from "styled-components";
|
|
4846
5219
|
var LabelLabel = styled26.label(
|
|
4847
5220
|
({ theme, selected }) => ({
|
|
@@ -4870,7 +5243,7 @@ var LabelContainer2 = styled26.span(({ theme }) => ({
|
|
|
4870
5243
|
alignItems: "center"
|
|
4871
5244
|
}));
|
|
4872
5245
|
function LabelRoot({ label, children }) {
|
|
4873
|
-
return /* @__PURE__ */
|
|
5246
|
+
return /* @__PURE__ */ React36.createElement(LabelContainer2, null, children, label && /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Spacer.Vertical, { size: 2 }), /* @__PURE__ */ React36.createElement(LabelLabel, null, label)));
|
|
4874
5247
|
}
|
|
4875
5248
|
var Label;
|
|
4876
5249
|
((_Label) => {
|
|
@@ -4880,15 +5253,15 @@ var Label;
|
|
|
4880
5253
|
|
|
4881
5254
|
// src/components/LabeledElementView.tsx
|
|
4882
5255
|
import * as kiwi from "kiwi.js";
|
|
4883
|
-
import
|
|
5256
|
+
import React37, {
|
|
4884
5257
|
Children as Children5,
|
|
4885
5258
|
createRef,
|
|
4886
5259
|
Fragment,
|
|
4887
5260
|
isValidElement as isValidElement4,
|
|
4888
5261
|
memo as memo25,
|
|
4889
5262
|
useLayoutEffect as useLayoutEffect8,
|
|
4890
|
-
useMemo as
|
|
4891
|
-
useRef as
|
|
5263
|
+
useMemo as useMemo20,
|
|
5264
|
+
useRef as useRef17
|
|
4892
5265
|
} from "react";
|
|
4893
5266
|
import styled27 from "styled-components";
|
|
4894
5267
|
var Container4 = styled27.div(({ theme }) => ({
|
|
@@ -4918,14 +5291,14 @@ var LabeledElementView = memo25(function LabeledElementView2({
|
|
|
4918
5291
|
(child) => isValidElement4(child) && "id" in child.props ? child.props.id : null
|
|
4919
5292
|
).filter((id) => !!id);
|
|
4920
5293
|
const serializedIds = elementIds.join(",");
|
|
4921
|
-
const containerRef =
|
|
4922
|
-
const refs =
|
|
5294
|
+
const containerRef = useRef17(null);
|
|
5295
|
+
const refs = useMemo20(() => {
|
|
4923
5296
|
return Object.fromEntries(
|
|
4924
5297
|
serializedIds.split(",").map((id) => [id, createRef()])
|
|
4925
5298
|
);
|
|
4926
5299
|
}, [serializedIds]);
|
|
4927
|
-
const labelElements =
|
|
4928
|
-
return serializedIds.split(",").map((id, index) => /* @__PURE__ */
|
|
5300
|
+
const labelElements = useMemo20(() => {
|
|
5301
|
+
return serializedIds.split(",").map((id, index) => /* @__PURE__ */ React37.createElement(
|
|
4929
5302
|
"span",
|
|
4930
5303
|
{
|
|
4931
5304
|
key: id,
|
|
@@ -5003,13 +5376,13 @@ var LabeledElementView = memo25(function LabeledElementView2({
|
|
|
5003
5376
|
`${Math.max(...heights)}px`
|
|
5004
5377
|
);
|
|
5005
5378
|
}, [refs, labelElements]);
|
|
5006
|
-
return /* @__PURE__ */
|
|
5379
|
+
return /* @__PURE__ */ React37.createElement(Container4, { ref: containerRef }, /* @__PURE__ */ React37.createElement(Tools, null, children), /* @__PURE__ */ React37.createElement(Labels, null, labelElements));
|
|
5007
5380
|
});
|
|
5008
5381
|
|
|
5009
5382
|
// src/components/Progress.tsx
|
|
5010
5383
|
import { clamp } from "@noya-app/noya-utils";
|
|
5011
5384
|
import * as ProgressPrimitive from "@radix-ui/react-progress";
|
|
5012
|
-
import
|
|
5385
|
+
import React38 from "react";
|
|
5013
5386
|
import styled28 from "styled-components";
|
|
5014
5387
|
function Progress({
|
|
5015
5388
|
value,
|
|
@@ -5019,7 +5392,7 @@ function Progress({
|
|
|
5019
5392
|
variant = "normal"
|
|
5020
5393
|
}) {
|
|
5021
5394
|
const clampedValue = clamp(value, 0, 100);
|
|
5022
|
-
return /* @__PURE__ */
|
|
5395
|
+
return /* @__PURE__ */ React38.createElement(ProgressRoot, { value: clampedValue, style: { width, flex, height } }, /* @__PURE__ */ React38.createElement(
|
|
5023
5396
|
ProgressIndicator,
|
|
5024
5397
|
{
|
|
5025
5398
|
variant,
|
|
@@ -5044,13 +5417,13 @@ var ProgressIndicator = styled28(ProgressPrimitive.Indicator)(({ theme, variant
|
|
|
5044
5417
|
|
|
5045
5418
|
// src/components/RadioGroup.tsx
|
|
5046
5419
|
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
|
|
5047
|
-
import
|
|
5048
|
-
createContext as
|
|
5049
|
-
forwardRef as
|
|
5420
|
+
import React39, {
|
|
5421
|
+
createContext as createContext10,
|
|
5422
|
+
forwardRef as forwardRef14,
|
|
5050
5423
|
memo as memo26,
|
|
5051
|
-
useCallback as
|
|
5052
|
-
useContext as
|
|
5053
|
-
useMemo as
|
|
5424
|
+
useCallback as useCallback22,
|
|
5425
|
+
useContext as useContext10,
|
|
5426
|
+
useMemo as useMemo21
|
|
5054
5427
|
} from "react";
|
|
5055
5428
|
import styled29 from "styled-components";
|
|
5056
5429
|
var ignoredProps3 = /* @__PURE__ */ new Set(["colorScheme"]);
|
|
@@ -5104,9 +5477,9 @@ var StyledItem = styled29(ToggleGroupPrimitive.Item).withConfig({
|
|
|
5104
5477
|
boxShadow: `0 0 0 1px ${theme.colors.sidebar.background}, 0 0 0 3px ${theme.colors[colorScheme ?? "primary"]}`
|
|
5105
5478
|
}
|
|
5106
5479
|
}));
|
|
5107
|
-
var ToggleGroupItem =
|
|
5108
|
-
const { colorScheme } =
|
|
5109
|
-
const itemElement = /* @__PURE__ */
|
|
5480
|
+
var ToggleGroupItem = forwardRef14(function ToggleGroupItem2({ value, tooltip, children, disabled = false }, forwardedRef) {
|
|
5481
|
+
const { colorScheme } = useContext10(RadioGroupContext);
|
|
5482
|
+
const itemElement = /* @__PURE__ */ React39.createElement(
|
|
5110
5483
|
StyledItem,
|
|
5111
5484
|
{
|
|
5112
5485
|
ref: forwardedRef,
|
|
@@ -5116,9 +5489,9 @@ var ToggleGroupItem = forwardRef13(function ToggleGroupItem2({ value, tooltip, c
|
|
|
5116
5489
|
},
|
|
5117
5490
|
children
|
|
5118
5491
|
);
|
|
5119
|
-
return tooltip ? /* @__PURE__ */
|
|
5492
|
+
return tooltip ? /* @__PURE__ */ React39.createElement(Tooltip, { content: tooltip }, itemElement) : itemElement;
|
|
5120
5493
|
});
|
|
5121
|
-
var RadioGroupContext =
|
|
5494
|
+
var RadioGroupContext = createContext10({
|
|
5122
5495
|
colorScheme: "primary"
|
|
5123
5496
|
});
|
|
5124
5497
|
function ToggleGroupRoot({
|
|
@@ -5129,8 +5502,8 @@ function ToggleGroupRoot({
|
|
|
5129
5502
|
allowEmpty,
|
|
5130
5503
|
children
|
|
5131
5504
|
}) {
|
|
5132
|
-
const contextValue =
|
|
5133
|
-
const handleValueChange =
|
|
5505
|
+
const contextValue = useMemo21(() => ({ colorScheme }), [colorScheme]);
|
|
5506
|
+
const handleValueChange = useCallback22(
|
|
5134
5507
|
(value2) => {
|
|
5135
5508
|
if (!allowEmpty && !value2)
|
|
5136
5509
|
return;
|
|
@@ -5138,7 +5511,7 @@ function ToggleGroupRoot({
|
|
|
5138
5511
|
},
|
|
5139
5512
|
[allowEmpty, onValueChange]
|
|
5140
5513
|
);
|
|
5141
|
-
return /* @__PURE__ */
|
|
5514
|
+
return /* @__PURE__ */ React39.createElement(RadioGroupContext.Provider, { value: contextValue }, /* @__PURE__ */ React39.createElement(
|
|
5142
5515
|
StyledRoot,
|
|
5143
5516
|
{
|
|
5144
5517
|
id,
|
|
@@ -5158,30 +5531,30 @@ var RadioGroup;
|
|
|
5158
5531
|
|
|
5159
5532
|
// src/components/Select.tsx
|
|
5160
5533
|
import { memoize as memoize2 } from "@noya-app/noya-utils";
|
|
5161
|
-
import
|
|
5162
|
-
createContext as
|
|
5534
|
+
import React40, {
|
|
5535
|
+
createContext as createContext11,
|
|
5163
5536
|
memo as memo27,
|
|
5164
|
-
useCallback as
|
|
5165
|
-
useContext as
|
|
5537
|
+
useCallback as useCallback23,
|
|
5538
|
+
useContext as useContext11,
|
|
5166
5539
|
useEffect as useEffect13,
|
|
5167
|
-
useMemo as
|
|
5168
|
-
useRef as
|
|
5540
|
+
useMemo as useMemo22,
|
|
5541
|
+
useRef as useRef18
|
|
5169
5542
|
} from "react";
|
|
5170
5543
|
import styled30 from "styled-components";
|
|
5171
|
-
var SelectContext =
|
|
5544
|
+
var SelectContext = createContext11(void 0);
|
|
5172
5545
|
var SelectOption = memo27(function SelectOption2({
|
|
5173
5546
|
value,
|
|
5174
5547
|
title,
|
|
5175
5548
|
onSelect
|
|
5176
5549
|
}) {
|
|
5177
|
-
const { addListener, removeListener } =
|
|
5550
|
+
const { addListener, removeListener } = useContext11(SelectContext);
|
|
5178
5551
|
useEffect13(() => {
|
|
5179
5552
|
if (!onSelect)
|
|
5180
5553
|
return;
|
|
5181
5554
|
addListener(value, onSelect);
|
|
5182
5555
|
return () => removeListener(value);
|
|
5183
5556
|
}, [addListener, onSelect, removeListener, value]);
|
|
5184
|
-
return /* @__PURE__ */
|
|
5557
|
+
return /* @__PURE__ */ React40.createElement("option", { value }, title ?? value);
|
|
5185
5558
|
});
|
|
5186
5559
|
var createChevronSVGString = memoize2(
|
|
5187
5560
|
(color) => `
|
|
@@ -5231,8 +5604,8 @@ var Select = memo27(function Select2({
|
|
|
5231
5604
|
const getTitle = "options" in rest ? rest.getTitle : void 0;
|
|
5232
5605
|
const onChange = "options" in rest ? rest.onChange : void 0;
|
|
5233
5606
|
const children = "options" in rest ? void 0 : rest.children;
|
|
5234
|
-
const optionElements =
|
|
5235
|
-
() => options ? options.map((option, index) => /* @__PURE__ */
|
|
5607
|
+
const optionElements = useMemo22(
|
|
5608
|
+
() => options ? options.map((option, index) => /* @__PURE__ */ React40.createElement(
|
|
5236
5609
|
SelectOption,
|
|
5237
5610
|
{
|
|
5238
5611
|
key: option,
|
|
@@ -5243,21 +5616,21 @@ var Select = memo27(function Select2({
|
|
|
5243
5616
|
)) : children,
|
|
5244
5617
|
[children, getTitle, onChange, options]
|
|
5245
5618
|
);
|
|
5246
|
-
const listeners =
|
|
5247
|
-
const contextValue =
|
|
5619
|
+
const listeners = useRef18(/* @__PURE__ */ new Map());
|
|
5620
|
+
const contextValue = useMemo22(
|
|
5248
5621
|
() => ({
|
|
5249
5622
|
addListener: (value2, listener) => listeners.current.set(value2, listener),
|
|
5250
5623
|
removeListener: (value2) => listeners.current.delete(value2)
|
|
5251
5624
|
}),
|
|
5252
5625
|
[]
|
|
5253
5626
|
);
|
|
5254
|
-
return /* @__PURE__ */
|
|
5627
|
+
return /* @__PURE__ */ React40.createElement(SelectContext.Provider, { value: contextValue }, /* @__PURE__ */ React40.createElement(
|
|
5255
5628
|
SelectElement,
|
|
5256
5629
|
{
|
|
5257
5630
|
id,
|
|
5258
5631
|
flex,
|
|
5259
5632
|
value,
|
|
5260
|
-
onChange:
|
|
5633
|
+
onChange: useCallback23(
|
|
5261
5634
|
(event) => listeners.current.get(event.target.value)?.(),
|
|
5262
5635
|
[listeners]
|
|
5263
5636
|
),
|
|
@@ -5269,7 +5642,7 @@ var Select = memo27(function Select2({
|
|
|
5269
5642
|
|
|
5270
5643
|
// src/components/Slider.tsx
|
|
5271
5644
|
import * as RadixSlider from "@radix-ui/react-slider";
|
|
5272
|
-
import
|
|
5645
|
+
import React41, { useCallback as useCallback24, useMemo as useMemo23 } from "react";
|
|
5273
5646
|
import styled31 from "styled-components";
|
|
5274
5647
|
var StyledSlider = styled31(RadixSlider.Root)({
|
|
5275
5648
|
flex: "1",
|
|
@@ -5310,17 +5683,17 @@ var Slider = function Slider2({
|
|
|
5310
5683
|
min,
|
|
5311
5684
|
max
|
|
5312
5685
|
}) {
|
|
5313
|
-
const arrayValue =
|
|
5686
|
+
const arrayValue = useMemo23(
|
|
5314
5687
|
() => [Math.min(Math.max(value, min), max)],
|
|
5315
5688
|
[value, min, max]
|
|
5316
5689
|
);
|
|
5317
|
-
const handleValueChange =
|
|
5690
|
+
const handleValueChange = useCallback24(
|
|
5318
5691
|
(arrayValue2) => {
|
|
5319
5692
|
onValueChange(arrayValue2[0]);
|
|
5320
5693
|
},
|
|
5321
5694
|
[onValueChange]
|
|
5322
5695
|
);
|
|
5323
|
-
return /* @__PURE__ */
|
|
5696
|
+
return /* @__PURE__ */ React41.createElement(
|
|
5324
5697
|
StyledSlider,
|
|
5325
5698
|
{
|
|
5326
5699
|
min,
|
|
@@ -5329,14 +5702,14 @@ var Slider = function Slider2({
|
|
|
5329
5702
|
value: arrayValue,
|
|
5330
5703
|
onValueChange: handleValueChange
|
|
5331
5704
|
},
|
|
5332
|
-
/* @__PURE__ */
|
|
5333
|
-
/* @__PURE__ */
|
|
5705
|
+
/* @__PURE__ */ React41.createElement(StyledTrack, null, /* @__PURE__ */ React41.createElement(StyledRange, null)),
|
|
5706
|
+
/* @__PURE__ */ React41.createElement(StyledThumb2, null)
|
|
5334
5707
|
);
|
|
5335
5708
|
};
|
|
5336
5709
|
|
|
5337
5710
|
// src/components/Switch.tsx
|
|
5338
5711
|
import * as SwitchPrimitive from "@radix-ui/react-switch";
|
|
5339
|
-
import
|
|
5712
|
+
import React42 from "react";
|
|
5340
5713
|
import styled32 from "styled-components";
|
|
5341
5714
|
var SwitchRoot = styled32(SwitchPrimitive.Root)(({ theme, colorScheme: variant }) => ({
|
|
5342
5715
|
all: "unset",
|
|
@@ -5372,7 +5745,7 @@ var Switch = function Switch2({
|
|
|
5372
5745
|
onChange,
|
|
5373
5746
|
colorScheme = "normal"
|
|
5374
5747
|
}) {
|
|
5375
|
-
return /* @__PURE__ */
|
|
5748
|
+
return /* @__PURE__ */ React42.createElement(
|
|
5376
5749
|
SwitchRoot,
|
|
5377
5750
|
{
|
|
5378
5751
|
colorScheme,
|
|
@@ -5381,40 +5754,40 @@ var Switch = function Switch2({
|
|
|
5381
5754
|
onChange(newValue);
|
|
5382
5755
|
}
|
|
5383
5756
|
},
|
|
5384
|
-
/* @__PURE__ */
|
|
5757
|
+
/* @__PURE__ */ React42.createElement(SwitchThumb, null)
|
|
5385
5758
|
);
|
|
5386
5759
|
};
|
|
5387
5760
|
|
|
5388
5761
|
// src/components/TreeView.tsx
|
|
5389
|
-
import
|
|
5390
|
-
forwardRef as
|
|
5762
|
+
import React43, {
|
|
5763
|
+
forwardRef as forwardRef15,
|
|
5391
5764
|
memo as memo28,
|
|
5392
|
-
useCallback as
|
|
5393
|
-
useContext as
|
|
5765
|
+
useCallback as useCallback25,
|
|
5766
|
+
useContext as useContext12
|
|
5394
5767
|
} from "react";
|
|
5395
|
-
var TreeRow =
|
|
5768
|
+
var TreeRow = forwardRef15(function TreeRow2({
|
|
5396
5769
|
icon,
|
|
5397
5770
|
expanded,
|
|
5398
5771
|
onClickChevron,
|
|
5399
5772
|
children,
|
|
5400
5773
|
...rest
|
|
5401
5774
|
}, forwardedRef) {
|
|
5402
|
-
const { expandable } =
|
|
5403
|
-
const handleClickChevron =
|
|
5775
|
+
const { expandable } = useContext12(ListView.RowContext);
|
|
5776
|
+
const handleClickChevron = useCallback25(
|
|
5404
5777
|
(event) => {
|
|
5405
5778
|
event.stopPropagation();
|
|
5406
5779
|
onClickChevron?.({ altKey: event.altKey });
|
|
5407
5780
|
},
|
|
5408
5781
|
[onClickChevron]
|
|
5409
5782
|
);
|
|
5410
|
-
return /* @__PURE__ */
|
|
5783
|
+
return /* @__PURE__ */ React43.createElement(ListView.Row, { ref: forwardedRef, ...rest }, expandable && /* @__PURE__ */ React43.createElement(React43.Fragment, null, expanded === void 0 ? /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 19 }) : /* @__PURE__ */ React43.createElement(
|
|
5411
5784
|
IconButton,
|
|
5412
5785
|
{
|
|
5413
5786
|
iconName: expanded ? "ChevronDownIcon" : "ChevronRightIcon",
|
|
5414
5787
|
onClick: handleClickChevron,
|
|
5415
5788
|
selected: rest.selected
|
|
5416
5789
|
}
|
|
5417
|
-
), /* @__PURE__ */
|
|
5790
|
+
), /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 6 })), icon && /* @__PURE__ */ React43.createElement(React43.Fragment, null, icon, /* @__PURE__ */ React43.createElement(Spacer.Horizontal, { size: 10 })), children);
|
|
5418
5791
|
});
|
|
5419
5792
|
var TreeView;
|
|
5420
5793
|
((TreeView2) => {
|
|
@@ -5452,6 +5825,7 @@ var dark_exports = {};
|
|
|
5452
5825
|
__export(dark_exports, {
|
|
5453
5826
|
colors: () => colors2,
|
|
5454
5827
|
fonts: () => fonts,
|
|
5828
|
+
name: () => name2,
|
|
5455
5829
|
sizes: () => sizes2,
|
|
5456
5830
|
textStyles: () => textStyles
|
|
5457
5831
|
});
|
|
@@ -5462,9 +5836,11 @@ var light_exports = {};
|
|
|
5462
5836
|
__export(light_exports, {
|
|
5463
5837
|
colors: () => colors,
|
|
5464
5838
|
fonts: () => fonts,
|
|
5839
|
+
name: () => name,
|
|
5465
5840
|
sizes: () => sizes2,
|
|
5466
5841
|
textStyles: () => textStyles
|
|
5467
5842
|
});
|
|
5843
|
+
var name = "light";
|
|
5468
5844
|
var colors = {
|
|
5469
5845
|
logo: {
|
|
5470
5846
|
fill: "rgb(175,175,175)",
|
|
@@ -5619,6 +5995,13 @@ var textStyles = {
|
|
|
5619
5995
|
fontWeight: 400,
|
|
5620
5996
|
lineHeight: "1.4"
|
|
5621
5997
|
},
|
|
5998
|
+
button: {
|
|
5999
|
+
fontFamily: fonts.normal,
|
|
6000
|
+
fontSize: "0.8rem",
|
|
6001
|
+
fontWeight: 500,
|
|
6002
|
+
lineHeight: "1.4",
|
|
6003
|
+
letterSpacing: "-0.2px"
|
|
6004
|
+
},
|
|
5622
6005
|
code: {
|
|
5623
6006
|
fontFamily: fonts.monospace,
|
|
5624
6007
|
fontSize: "90%",
|
|
@@ -5658,6 +6041,7 @@ var sizes2 = {
|
|
|
5658
6041
|
};
|
|
5659
6042
|
|
|
5660
6043
|
// src/theme/dark.ts
|
|
6044
|
+
var name2 = "dark";
|
|
5661
6045
|
var colors2 = produce(colors, (colors3) => {
|
|
5662
6046
|
colors3.logo.fill = "rgb(248,248,250)";
|
|
5663
6047
|
colors3.logo.highlight = "rgb(248,248,250)";
|
|
@@ -5729,7 +6113,7 @@ var SUPPORTED_CANVAS_UPLOAD_TYPES = [
|
|
|
5729
6113
|
|
|
5730
6114
|
// src/components/ArrayController.tsx
|
|
5731
6115
|
import { range as range2 } from "@noya-app/noya-utils";
|
|
5732
|
-
import
|
|
6116
|
+
import React45, { memo as memo30, useCallback as useCallback26, useMemo as useMemo24 } from "react";
|
|
5733
6117
|
import styled34, { useTheme as useTheme5 } from "styled-components";
|
|
5734
6118
|
|
|
5735
6119
|
// src/components/InspectorPrimitives.tsx
|
|
@@ -5748,7 +6132,7 @@ __export(InspectorPrimitives_exports, {
|
|
|
5748
6132
|
Title: () => Title3,
|
|
5749
6133
|
VerticalSeparator: () => VerticalSeparator
|
|
5750
6134
|
});
|
|
5751
|
-
import
|
|
6135
|
+
import React44, { memo as memo29 } from "react";
|
|
5752
6136
|
import styled33, { useTheme as useTheme4 } from "styled-components";
|
|
5753
6137
|
var Section = styled33.div(({ theme, padding = "10px", gap }) => ({
|
|
5754
6138
|
flex: "0 0 auto",
|
|
@@ -5795,8 +6179,8 @@ var Checkbox = styled33.input(({ theme }) => ({
|
|
|
5795
6179
|
var Text3 = styled33.span(({ theme }) => ({
|
|
5796
6180
|
...theme.textStyles.small
|
|
5797
6181
|
}));
|
|
5798
|
-
var VerticalSeparator = () => /* @__PURE__ */
|
|
5799
|
-
var HorizontalSeparator = () => /* @__PURE__ */
|
|
6182
|
+
var VerticalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Vertical, { size: useTheme4().sizes.inspector.verticalSeparator });
|
|
6183
|
+
var HorizontalSeparator = () => /* @__PURE__ */ React44.createElement(Spacer.Horizontal, { size: useTheme4().sizes.inspector.horizontalSeparator });
|
|
5800
6184
|
var SliderRowLabel = styled33.span(({ theme }) => ({
|
|
5801
6185
|
...theme.textStyles.small,
|
|
5802
6186
|
color: theme.colors.textMuted,
|
|
@@ -5824,13 +6208,13 @@ var LabeledRow = memo29(function LabeledRow2({
|
|
|
5824
6208
|
gap,
|
|
5825
6209
|
right
|
|
5826
6210
|
}) {
|
|
5827
|
-
return /* @__PURE__ */
|
|
6211
|
+
return /* @__PURE__ */ React44.createElement(Row2, { id }, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(RowLabel, { textStyle: labelTextStyle }, label, right && /* @__PURE__ */ React44.createElement(Spacer.Horizontal, null), right), /* @__PURE__ */ React44.createElement(Row2, { gap }, children)));
|
|
5828
6212
|
});
|
|
5829
6213
|
var LabeledSliderRow = memo29(function LabeledRow3({
|
|
5830
6214
|
children,
|
|
5831
6215
|
label
|
|
5832
6216
|
}) {
|
|
5833
|
-
return /* @__PURE__ */
|
|
6217
|
+
return /* @__PURE__ */ React44.createElement(Row2, null, /* @__PURE__ */ React44.createElement(Column, null, /* @__PURE__ */ React44.createElement(SliderRowLabel, null, label), /* @__PURE__ */ React44.createElement(Row2, null, children)));
|
|
5834
6218
|
});
|
|
5835
6219
|
|
|
5836
6220
|
// src/components/ArrayController.tsx
|
|
@@ -5861,12 +6245,12 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5861
6245
|
}) {
|
|
5862
6246
|
const iconColor = useTheme5().colors.icon;
|
|
5863
6247
|
const primaryLightColor = useTheme5().colors.primaryLight;
|
|
5864
|
-
const keys =
|
|
6248
|
+
const keys = useMemo24(
|
|
5865
6249
|
() => items.map((item, index) => getKey?.(item) ?? index.toString()),
|
|
5866
6250
|
[getKey, items]
|
|
5867
6251
|
);
|
|
5868
6252
|
const indexes = reversed ? range2(0, items.length).reverse() : range2(0, items.length);
|
|
5869
|
-
const handleMoveItem =
|
|
6253
|
+
const handleMoveItem = useCallback26(
|
|
5870
6254
|
(sourceIndex, destinationIndex, position) => {
|
|
5871
6255
|
if (reversed) {
|
|
5872
6256
|
if (position === "above") {
|
|
@@ -5883,11 +6267,11 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5883
6267
|
[onMoveItem, reversed]
|
|
5884
6268
|
);
|
|
5885
6269
|
const renderRow = (index) => {
|
|
5886
|
-
return /* @__PURE__ */
|
|
6270
|
+
return /* @__PURE__ */ React45.createElement(ElementRow, { key: keys[index] }, renderItem({ item: items[index], index }));
|
|
5887
6271
|
};
|
|
5888
|
-
return /* @__PURE__ */
|
|
6272
|
+
return /* @__PURE__ */ React45.createElement(Section, { id, padding, gap: "2px" }, /* @__PURE__ */ React45.createElement(SectionHeader, null, /* @__PURE__ */ React45.createElement(Button, { variant: "none", onClick: onClickPlus }, /* @__PURE__ */ React45.createElement(Title3, null, title)), /* @__PURE__ */ React45.createElement(Spacer.Horizontal, null), withSeparatorElements(
|
|
5889
6273
|
[
|
|
5890
|
-
onClickTrash && /* @__PURE__ */
|
|
6274
|
+
onClickTrash && /* @__PURE__ */ React45.createElement(
|
|
5891
6275
|
IconButton,
|
|
5892
6276
|
{
|
|
5893
6277
|
id: `${id}-trash`,
|
|
@@ -5896,7 +6280,7 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5896
6280
|
onClick: onClickTrash
|
|
5897
6281
|
}
|
|
5898
6282
|
),
|
|
5899
|
-
onClickExpand && /* @__PURE__ */
|
|
6283
|
+
onClickExpand && /* @__PURE__ */ React45.createElement(
|
|
5900
6284
|
IconButton,
|
|
5901
6285
|
{
|
|
5902
6286
|
id: `${id}-gear`,
|
|
@@ -5905,7 +6289,7 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5905
6289
|
onClick: onClickExpand
|
|
5906
6290
|
}
|
|
5907
6291
|
),
|
|
5908
|
-
onClickPlus && /* @__PURE__ */
|
|
6292
|
+
onClickPlus && /* @__PURE__ */ React45.createElement(
|
|
5909
6293
|
IconButton,
|
|
5910
6294
|
{
|
|
5911
6295
|
id: `${id}-add`,
|
|
@@ -5915,15 +6299,15 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5915
6299
|
}
|
|
5916
6300
|
)
|
|
5917
6301
|
],
|
|
5918
|
-
/* @__PURE__ */
|
|
5919
|
-
)), /* @__PURE__ */
|
|
6302
|
+
/* @__PURE__ */ React45.createElement(Spacer.Horizontal, { size: 8 })
|
|
6303
|
+
)), /* @__PURE__ */ React45.createElement(Stack.V, { gap: "4px" }, sortable ? /* @__PURE__ */ React45.createElement(
|
|
5920
6304
|
Sortable.Root,
|
|
5921
6305
|
{
|
|
5922
6306
|
keys,
|
|
5923
6307
|
renderOverlay: renderRow,
|
|
5924
6308
|
onMoveItem: handleMoveItem
|
|
5925
6309
|
},
|
|
5926
|
-
indexes.map((index) => /* @__PURE__ */
|
|
6310
|
+
indexes.map((index) => /* @__PURE__ */ React45.createElement(Sortable.Item, { id: keys[index], key: keys[index] }, ({ relativeDropPosition, ...sortableProps }) => /* @__PURE__ */ React45.createElement(ItemContainer2, { ...sortableProps }, renderRow(index), relativeDropPosition && /* @__PURE__ */ React45.createElement(
|
|
5927
6311
|
ListView.DragIndicator,
|
|
5928
6312
|
{
|
|
5929
6313
|
gap: 0,
|
|
@@ -5937,7 +6321,7 @@ var ArrayController = memo30(function ArrayController2({
|
|
|
5937
6321
|
|
|
5938
6322
|
// src/components/DimensionInput.tsx
|
|
5939
6323
|
import { round } from "@noya-app/noya-utils";
|
|
5940
|
-
import
|
|
6324
|
+
import React46, { memo as memo31, useCallback as useCallback27 } from "react";
|
|
5941
6325
|
function getNewValue(value, mode, delta) {
|
|
5942
6326
|
return delta === void 0 ? value : mode === "replace" ? delta : value + delta;
|
|
5943
6327
|
}
|
|
@@ -5951,15 +6335,15 @@ var DimensionInput = memo31(function DimensionInput2({
|
|
|
5951
6335
|
disabled,
|
|
5952
6336
|
trigger = "submit"
|
|
5953
6337
|
}) {
|
|
5954
|
-
const handleNudgeValue =
|
|
6338
|
+
const handleNudgeValue = useCallback27(
|
|
5955
6339
|
(value2) => onSetValue(value2, "adjust"),
|
|
5956
6340
|
[onSetValue]
|
|
5957
6341
|
);
|
|
5958
|
-
const handleSetValue =
|
|
6342
|
+
const handleSetValue = useCallback27(
|
|
5959
6343
|
(value2) => onSetValue(value2, "replace"),
|
|
5960
6344
|
[onSetValue]
|
|
5961
6345
|
);
|
|
5962
|
-
return /* @__PURE__ */
|
|
6346
|
+
return /* @__PURE__ */ React46.createElement(InputField.Root, { id, width: size2 }, /* @__PURE__ */ React46.createElement(
|
|
5963
6347
|
InputField.NumberInput,
|
|
5964
6348
|
{
|
|
5965
6349
|
value: value === void 0 ? value : round(value, 2),
|
|
@@ -5968,12 +6352,13 @@ var DimensionInput = memo31(function DimensionInput2({
|
|
|
5968
6352
|
disabled,
|
|
5969
6353
|
...trigger === "change" ? { onChange: handleSetValue } : { onSubmit: handleSetValue }
|
|
5970
6354
|
}
|
|
5971
|
-
), label && /* @__PURE__ */
|
|
6355
|
+
), label && /* @__PURE__ */ React46.createElement(InputField.Label, null, label));
|
|
5972
6356
|
});
|
|
5973
6357
|
export {
|
|
5974
6358
|
ActivityIndicator,
|
|
5975
6359
|
ArrayController,
|
|
5976
6360
|
Avatar,
|
|
6361
|
+
AvatarStack,
|
|
5977
6362
|
Body,
|
|
5978
6363
|
Button,
|
|
5979
6364
|
ButtonElement,
|
|
@@ -5992,6 +6377,8 @@ export {
|
|
|
5992
6377
|
DropdownMenu,
|
|
5993
6378
|
FillInputField,
|
|
5994
6379
|
FillPreviewBackground,
|
|
6380
|
+
FloatingWindow,
|
|
6381
|
+
FloatingWindowProvider,
|
|
5995
6382
|
FullscreenDialog,
|
|
5996
6383
|
GlobalInputBlurProvider,
|
|
5997
6384
|
GradientPicker,
|
|
@@ -6049,9 +6436,11 @@ export {
|
|
|
6049
6436
|
sketchColorToHex,
|
|
6050
6437
|
sketchColorToRgba,
|
|
6051
6438
|
sketchColorToRgbaString,
|
|
6439
|
+
useCurrentFloatingWindowInternal,
|
|
6052
6440
|
useDesignSystemConfiguration,
|
|
6053
6441
|
useDesignSystemTheme,
|
|
6054
6442
|
useDialogContainsElement,
|
|
6443
|
+
useFloatingWindowManager,
|
|
6055
6444
|
useGlobalInputBlur,
|
|
6056
6445
|
useGlobalInputBlurListener,
|
|
6057
6446
|
useGlobalInputBlurTrigger,
|