@noya-app/noya-designsystem 0.1.42 → 0.1.44
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 +12 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +62 -36
- package/dist/index.d.ts +62 -36
- package/dist/index.js +226 -141
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +234 -143
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/Combobox.tsx +158 -52
- package/src/components/SelectMenu.tsx +4 -0
- package/src/components/TextArea.tsx +61 -24
- package/src/components/Toolbar.tsx +4 -9
- package/src/components/WorkspaceLayout.tsx +145 -152
package/dist/index.mjs
CHANGED
|
@@ -12272,7 +12272,8 @@ var SelectMenu = memoGeneric(function SelectMenu2({
|
|
|
12272
12272
|
open,
|
|
12273
12273
|
onFocus,
|
|
12274
12274
|
onBlur,
|
|
12275
|
-
onOpenChange
|
|
12275
|
+
onOpenChange,
|
|
12276
|
+
contentStyle
|
|
12276
12277
|
}) {
|
|
12277
12278
|
const selectedItem = menuItems.find(
|
|
12278
12279
|
(item) => typeof item !== "string" && item.value === value
|
|
@@ -12360,7 +12361,9 @@ var SelectMenu = memoGeneric(function SelectMenu2({
|
|
|
12360
12361
|
collisionPadding: 8,
|
|
12361
12362
|
align: "end",
|
|
12362
12363
|
style: {
|
|
12363
|
-
width: "var(--radix-select-trigger-width)"
|
|
12364
|
+
width: "var(--radix-select-trigger-width)",
|
|
12365
|
+
maxHeight: "500px",
|
|
12366
|
+
...contentStyle
|
|
12364
12367
|
}
|
|
12365
12368
|
},
|
|
12366
12369
|
/* @__PURE__ */ React51.createElement(Select.ScrollUpButton, { className: scrollButtonStyles }, /* @__PURE__ */ React51.createElement(
|
|
@@ -13139,29 +13142,66 @@ var Combobox = memo14(
|
|
|
13139
13142
|
forwardRef14(function Combobox2({
|
|
13140
13143
|
id,
|
|
13141
13144
|
loading,
|
|
13142
|
-
initialValue = "",
|
|
13143
13145
|
placeholder,
|
|
13144
13146
|
items,
|
|
13145
13147
|
size: size3,
|
|
13146
|
-
onChange,
|
|
13147
|
-
onSelectItem,
|
|
13148
|
-
onHoverItem,
|
|
13149
|
-
onFocus,
|
|
13150
|
-
onBlur,
|
|
13151
|
-
onDeleteWhenEmpty,
|
|
13152
13148
|
style: style5,
|
|
13153
13149
|
className,
|
|
13154
13150
|
label,
|
|
13155
13151
|
children: children2,
|
|
13156
13152
|
hideMenuWhenEmptyValue = false,
|
|
13157
|
-
allowArbitraryValues = false,
|
|
13158
13153
|
readOnly = false,
|
|
13159
13154
|
tabBehavior = "select",
|
|
13160
|
-
openMenuBehavior = "showFilteredItems"
|
|
13155
|
+
openMenuBehavior = "showFilteredItems",
|
|
13156
|
+
onFocus,
|
|
13157
|
+
onDeleteWhenEmpty,
|
|
13158
|
+
...rest
|
|
13161
13159
|
}, forwardedRef) {
|
|
13160
|
+
const props = useMemo17(() => {
|
|
13161
|
+
if (rest.mode === "string") {
|
|
13162
|
+
return {
|
|
13163
|
+
mode: rest.mode,
|
|
13164
|
+
value: rest.value,
|
|
13165
|
+
onChange: rest.onChange,
|
|
13166
|
+
onSelectItem: rest.onSelectItem,
|
|
13167
|
+
onHoverItem: rest.onHoverItem,
|
|
13168
|
+
onBlur: rest.onBlur,
|
|
13169
|
+
allowArbitraryValues: rest.allowArbitraryValues
|
|
13170
|
+
};
|
|
13171
|
+
} else {
|
|
13172
|
+
return {
|
|
13173
|
+
mode: rest.mode,
|
|
13174
|
+
value: rest.value,
|
|
13175
|
+
onChange: rest.onChange,
|
|
13176
|
+
onSelectItem: rest.onSelectItem,
|
|
13177
|
+
onHoverItem: rest.onHoverItem,
|
|
13178
|
+
onBlur: rest.onBlur
|
|
13179
|
+
};
|
|
13180
|
+
}
|
|
13181
|
+
}, [
|
|
13182
|
+
rest.mode,
|
|
13183
|
+
rest.value,
|
|
13184
|
+
rest.onChange,
|
|
13185
|
+
rest.onSelectItem,
|
|
13186
|
+
rest.onHoverItem,
|
|
13187
|
+
rest.onBlur,
|
|
13188
|
+
rest.allowArbitraryValues
|
|
13189
|
+
]);
|
|
13162
13190
|
const ref = useRef17(null);
|
|
13191
|
+
function getInitialValueString() {
|
|
13192
|
+
if (props.mode === "string") {
|
|
13193
|
+
return props.value ?? "";
|
|
13194
|
+
} else {
|
|
13195
|
+
return props.value?.name ?? "";
|
|
13196
|
+
}
|
|
13197
|
+
}
|
|
13198
|
+
const initialValueString = getInitialValueString();
|
|
13163
13199
|
const [comboboxState] = useState20(
|
|
13164
|
-
() => new ComboboxState(
|
|
13200
|
+
() => new ComboboxState(
|
|
13201
|
+
items,
|
|
13202
|
+
initialValueString,
|
|
13203
|
+
props.mode === "string" && (props.allowArbitraryValues ?? false)
|
|
13204
|
+
)
|
|
13165
13205
|
);
|
|
13166
13206
|
const state = useComboboxState(comboboxState);
|
|
13167
13207
|
const [isFocused, setIsFocused] = useState20(false);
|
|
@@ -13170,12 +13210,11 @@ var Combobox = memo14(
|
|
|
13170
13210
|
useEffect15(() => {
|
|
13171
13211
|
comboboxState.setItems(items);
|
|
13172
13212
|
}, [items, comboboxState]);
|
|
13213
|
+
useEffect15(() => {
|
|
13214
|
+
comboboxState.setFilter(initialValueString);
|
|
13215
|
+
}, [comboboxState, initialValueString]);
|
|
13173
13216
|
const { filter, selectedIndex, filteredItems } = state;
|
|
13174
|
-
const shouldShowMenu =
|
|
13175
|
-
if (!isFocused) return false;
|
|
13176
|
-
if (hideMenuWhenEmptyValue && filter === "") return false;
|
|
13177
|
-
return true;
|
|
13178
|
-
}, [hideMenuWhenEmptyValue, filter, isFocused]);
|
|
13217
|
+
const shouldShowMenu = isFocused && !(hideMenuWhenEmptyValue && filter === "");
|
|
13179
13218
|
useEffect15(() => {
|
|
13180
13219
|
if (listRef.current) {
|
|
13181
13220
|
listRef.current.scrollToIndex(selectedIndex);
|
|
@@ -13183,15 +13222,28 @@ var Combobox = memo14(
|
|
|
13183
13222
|
}, [selectedIndex]);
|
|
13184
13223
|
const handleBlur = useCallback18(() => {
|
|
13185
13224
|
ref.current?.blur();
|
|
13186
|
-
comboboxState.reset(
|
|
13187
|
-
|
|
13225
|
+
comboboxState.reset(initialValueString);
|
|
13226
|
+
if (props.mode === "string") {
|
|
13227
|
+
props.onBlur?.(
|
|
13228
|
+
state.filter === state.lastSubmittedValue.filter,
|
|
13229
|
+
filter
|
|
13230
|
+
);
|
|
13231
|
+
} else {
|
|
13232
|
+
const selectedItem = comboboxState.getSelectedItem();
|
|
13233
|
+
if (selectedItem && selectedItem.type !== "sectionHeader") {
|
|
13234
|
+
props.onBlur?.(
|
|
13235
|
+
state.filter === state.lastSubmittedValue.filter,
|
|
13236
|
+
selectedItem
|
|
13237
|
+
);
|
|
13238
|
+
}
|
|
13239
|
+
}
|
|
13188
13240
|
setIsFocused(false);
|
|
13189
|
-
}, [filter,
|
|
13241
|
+
}, [filter, initialValueString, props, state, comboboxState]);
|
|
13190
13242
|
const handleFocus = useCallback18(
|
|
13191
13243
|
(event) => {
|
|
13192
13244
|
setIsFocused(true);
|
|
13193
13245
|
comboboxState.reset(
|
|
13194
|
-
openMenuBehavior === "showAllItems" ? "" :
|
|
13246
|
+
openMenuBehavior === "showAllItems" ? "" : initialValueString
|
|
13195
13247
|
);
|
|
13196
13248
|
if (ref.current) {
|
|
13197
13249
|
const length = ref.current.value.length;
|
|
@@ -13199,30 +13251,54 @@ var Combobox = memo14(
|
|
|
13199
13251
|
}
|
|
13200
13252
|
onFocus?.(event);
|
|
13201
13253
|
},
|
|
13202
|
-
[
|
|
13254
|
+
[initialValueString, onFocus, openMenuBehavior, comboboxState]
|
|
13203
13255
|
);
|
|
13204
13256
|
const handleUpdateSelection = useCallback18(
|
|
13205
13257
|
(item) => {
|
|
13206
13258
|
if (item.type === "sectionHeader") return;
|
|
13207
13259
|
const selectedItem = comboboxState.selectCurrentItem(item);
|
|
13208
13260
|
if (!selectedItem || selectedItem.type === "sectionHeader") return;
|
|
13209
|
-
|
|
13210
|
-
|
|
13261
|
+
if (props.mode === "string") {
|
|
13262
|
+
props.onSelectItem?.(selectedItem.name);
|
|
13263
|
+
props.onHoverItem?.(void 0);
|
|
13264
|
+
} else {
|
|
13265
|
+
props.onSelectItem?.(selectedItem);
|
|
13266
|
+
props.onHoverItem?.(void 0);
|
|
13267
|
+
}
|
|
13211
13268
|
setShouldBlur(true);
|
|
13212
13269
|
},
|
|
13213
|
-
[
|
|
13270
|
+
[props, comboboxState]
|
|
13214
13271
|
);
|
|
13215
13272
|
const handleIndexChange = useCallback18(
|
|
13216
13273
|
(index) => {
|
|
13217
13274
|
comboboxState.setSelectedIndex(index);
|
|
13218
13275
|
const item = comboboxState.getSelectedItem();
|
|
13219
13276
|
if (item && item.type !== "sectionHeader") {
|
|
13220
|
-
|
|
13277
|
+
if (props.mode === "string") {
|
|
13278
|
+
props.onHoverItem?.(item.name);
|
|
13279
|
+
} else {
|
|
13280
|
+
props.onHoverItem?.(item);
|
|
13281
|
+
}
|
|
13282
|
+
} else {
|
|
13283
|
+
props.onHoverItem?.(void 0);
|
|
13284
|
+
}
|
|
13285
|
+
},
|
|
13286
|
+
[props, comboboxState]
|
|
13287
|
+
);
|
|
13288
|
+
const handleChange = useCallback18(
|
|
13289
|
+
(value) => {
|
|
13290
|
+
if (readOnly) return;
|
|
13291
|
+
comboboxState.setFilter(value);
|
|
13292
|
+
if (props.mode === "string") {
|
|
13293
|
+
props.onChange?.(value);
|
|
13221
13294
|
} else {
|
|
13222
|
-
|
|
13295
|
+
const selectedItem = comboboxState.getSelectedItem();
|
|
13296
|
+
if (selectedItem && selectedItem.type !== "sectionHeader") {
|
|
13297
|
+
props.onChange?.(selectedItem);
|
|
13298
|
+
}
|
|
13223
13299
|
}
|
|
13224
13300
|
},
|
|
13225
|
-
[
|
|
13301
|
+
[readOnly, props, comboboxState]
|
|
13226
13302
|
);
|
|
13227
13303
|
const handleKeyDown = useCallback18(
|
|
13228
13304
|
(event) => {
|
|
@@ -13241,7 +13317,7 @@ var Combobox = memo14(
|
|
|
13241
13317
|
if (shouldShowMenu) {
|
|
13242
13318
|
if (item) {
|
|
13243
13319
|
handleUpdateSelection(item);
|
|
13244
|
-
} else if (allowArbitraryValues) {
|
|
13320
|
+
} else if (props.mode === "string" && props.allowArbitraryValues) {
|
|
13245
13321
|
comboboxState.submitArbitraryFilter(filter);
|
|
13246
13322
|
handleBlur();
|
|
13247
13323
|
} else {
|
|
@@ -13271,7 +13347,7 @@ var Combobox = memo14(
|
|
|
13271
13347
|
}
|
|
13272
13348
|
handled = true;
|
|
13273
13349
|
}
|
|
13274
|
-
} else if (allowArbitraryValues && filter !== "") {
|
|
13350
|
+
} else if (props.mode === "string" && props.allowArbitraryValues && filter !== "") {
|
|
13275
13351
|
comboboxState.submitArbitraryFilter(filter);
|
|
13276
13352
|
handleBlur();
|
|
13277
13353
|
handled = true;
|
|
@@ -13306,17 +13382,9 @@ var Combobox = memo14(
|
|
|
13306
13382
|
shouldShowMenu,
|
|
13307
13383
|
comboboxState,
|
|
13308
13384
|
tabBehavior,
|
|
13309
|
-
|
|
13385
|
+
props
|
|
13310
13386
|
]
|
|
13311
13387
|
);
|
|
13312
|
-
const handleChange = useCallback18(
|
|
13313
|
-
(value) => {
|
|
13314
|
-
if (readOnly) return;
|
|
13315
|
-
comboboxState.setFilter(value);
|
|
13316
|
-
onChange?.(value);
|
|
13317
|
-
},
|
|
13318
|
-
[onChange, readOnly, comboboxState]
|
|
13319
|
-
);
|
|
13320
13388
|
const typeaheadValue = comboboxState.getTypeaheadValue();
|
|
13321
13389
|
useImperativeHandle3(forwardedRef, () => ({
|
|
13322
13390
|
focus: () => {
|
|
@@ -13327,7 +13395,11 @@ var Combobox = memo14(
|
|
|
13327
13395
|
}
|
|
13328
13396
|
},
|
|
13329
13397
|
setValue: (value) => {
|
|
13330
|
-
|
|
13398
|
+
if (typeof value === "string") {
|
|
13399
|
+
comboboxState.setFilter(value);
|
|
13400
|
+
} else {
|
|
13401
|
+
comboboxState.setFilter(value.name);
|
|
13402
|
+
}
|
|
13331
13403
|
},
|
|
13332
13404
|
selectAllInputText: () => {
|
|
13333
13405
|
ref.current?.setSelectionRange(0, ref.current.value.length);
|
|
@@ -13341,23 +13413,24 @@ var Combobox = memo14(
|
|
|
13341
13413
|
return;
|
|
13342
13414
|
}
|
|
13343
13415
|
comboboxState.reset(
|
|
13344
|
-
openMenuBehavior === "showAllItems" ? "" :
|
|
13416
|
+
openMenuBehavior === "showAllItems" ? "" : initialValueString
|
|
13345
13417
|
);
|
|
13346
13418
|
ref.current?.focus();
|
|
13347
13419
|
},
|
|
13348
13420
|
[
|
|
13349
13421
|
shouldShowMenu,
|
|
13350
13422
|
openMenuBehavior,
|
|
13351
|
-
|
|
13423
|
+
initialValueString,
|
|
13352
13424
|
handleBlur,
|
|
13353
13425
|
comboboxState
|
|
13354
13426
|
]
|
|
13355
13427
|
);
|
|
13356
13428
|
useEffect15(() => {
|
|
13357
13429
|
if (!shouldBlur) return;
|
|
13430
|
+
if (document.activeElement !== ref.current) return;
|
|
13431
|
+
setShouldBlur(false);
|
|
13358
13432
|
ref.current?.focus();
|
|
13359
13433
|
handleBlur();
|
|
13360
|
-
setShouldBlur(false);
|
|
13361
13434
|
}, [shouldBlur, handleBlur]);
|
|
13362
13435
|
return /* @__PURE__ */ React54.createElement(
|
|
13363
13436
|
InputField.Root,
|
|
@@ -15193,46 +15266,56 @@ var Switch = function Switch2({
|
|
|
15193
15266
|
};
|
|
15194
15267
|
|
|
15195
15268
|
// src/components/TextArea.tsx
|
|
15196
|
-
import React71, {
|
|
15269
|
+
import React71, {
|
|
15270
|
+
forwardRef as forwardRef21,
|
|
15271
|
+
memo as memo27,
|
|
15272
|
+
useCallback as useCallback25,
|
|
15273
|
+
useEffect as useEffect16,
|
|
15274
|
+
useRef as useRef20
|
|
15275
|
+
} from "react";
|
|
15197
15276
|
var useAutoResize = (value) => {
|
|
15198
15277
|
const textareaRef = useRef20(null);
|
|
15199
15278
|
useEffect16(() => {
|
|
15279
|
+
if (value === void 0) return;
|
|
15200
15280
|
if (!textareaRef.current) return;
|
|
15201
15281
|
textareaRef.current.style.height = "auto";
|
|
15202
15282
|
textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
|
|
15203
15283
|
}, [value]);
|
|
15204
15284
|
return textareaRef;
|
|
15205
15285
|
};
|
|
15206
|
-
var
|
|
15207
|
-
forwardRef21(function
|
|
15286
|
+
var TextArea = memo27(
|
|
15287
|
+
forwardRef21(function TextArea2({
|
|
15208
15288
|
value,
|
|
15209
15289
|
onChangeText,
|
|
15210
15290
|
className,
|
|
15211
|
-
end,
|
|
15212
|
-
endClassName,
|
|
15213
15291
|
onChange,
|
|
15292
|
+
autoResize = false,
|
|
15214
15293
|
...rest
|
|
15215
15294
|
}, forwardedRef) {
|
|
15216
|
-
const
|
|
15295
|
+
const autoResizeRef = useAutoResize(
|
|
15296
|
+
autoResize ? value || rest.placeholder || "" : void 0
|
|
15297
|
+
);
|
|
15217
15298
|
const handleChange = useCallback25(
|
|
15218
15299
|
(event) => {
|
|
15219
|
-
onChangeText(event.target.value);
|
|
15300
|
+
onChangeText?.(event.target.value);
|
|
15220
15301
|
onChange?.(event);
|
|
15221
15302
|
},
|
|
15222
15303
|
[onChangeText, onChange]
|
|
15223
15304
|
);
|
|
15224
15305
|
const handleRef = useCallback25(
|
|
15225
15306
|
(value2) => {
|
|
15226
|
-
|
|
15307
|
+
if (autoResize) {
|
|
15308
|
+
autoResizeRef.current = value2;
|
|
15309
|
+
}
|
|
15227
15310
|
assignRef(forwardedRef, value2);
|
|
15228
15311
|
},
|
|
15229
|
-
[
|
|
15312
|
+
[autoResize, autoResizeRef, forwardedRef]
|
|
15230
15313
|
);
|
|
15231
|
-
return /* @__PURE__ */ React71.createElement(
|
|
15314
|
+
return /* @__PURE__ */ React71.createElement(
|
|
15232
15315
|
"textarea",
|
|
15233
15316
|
{
|
|
15234
15317
|
className: cx(
|
|
15235
|
-
`font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-
|
|
15318
|
+
`font-sans text-heading5 font-normal text-text bg-input-background flex-1 py-1 px-1.5 border-none outline-none min-h-6 w-full rounded resize-none placeholder:text-text-disabled focus:ring-2 focus:ring-primary read-only:text-text-disabled focus:z-interactable transition-all`,
|
|
15236
15319
|
className
|
|
15237
15320
|
),
|
|
15238
15321
|
ref: handleRef,
|
|
@@ -15240,7 +15323,27 @@ var AutoResizingTextArea = memo27(
|
|
|
15240
15323
|
onChange: handleChange,
|
|
15241
15324
|
value
|
|
15242
15325
|
}
|
|
15243
|
-
)
|
|
15326
|
+
);
|
|
15327
|
+
})
|
|
15328
|
+
);
|
|
15329
|
+
var TextAreaRow = memo27(
|
|
15330
|
+
forwardRef21(function TextAreaRow2({
|
|
15331
|
+
className,
|
|
15332
|
+
textAreaClassName,
|
|
15333
|
+
textAreaRef,
|
|
15334
|
+
end,
|
|
15335
|
+
endClassName,
|
|
15336
|
+
...rest
|
|
15337
|
+
}, forwardedRef) {
|
|
15338
|
+
return /* @__PURE__ */ React71.createElement(
|
|
15339
|
+
"div",
|
|
15340
|
+
{
|
|
15341
|
+
ref: forwardedRef,
|
|
15342
|
+
className: cx("relative w-full h-full", className)
|
|
15343
|
+
},
|
|
15344
|
+
/* @__PURE__ */ React71.createElement(TextArea, { className: textAreaClassName, ...rest, ref: textAreaRef }),
|
|
15345
|
+
/* @__PURE__ */ React71.createElement("div", { className: cx("absolute right-1 top-4", endClassName) }, end)
|
|
15346
|
+
);
|
|
15244
15347
|
})
|
|
15245
15348
|
);
|
|
15246
15349
|
|
|
@@ -15415,6 +15518,7 @@ var UserPointer = memo28(function UserPointer2({
|
|
|
15415
15518
|
import { useKeyboardShortcuts as useKeyboardShortcuts3 } from "@noya-app/noya-keymap";
|
|
15416
15519
|
import React75, {
|
|
15417
15520
|
forwardRef as forwardRef22,
|
|
15521
|
+
memo as memo29,
|
|
15418
15522
|
useCallback as useCallback27,
|
|
15419
15523
|
useImperativeHandle as useImperativeHandle4,
|
|
15420
15524
|
useRef as useRef22,
|
|
@@ -15559,32 +15663,39 @@ function usePreservePanelSize(panelGroupRef, setPanelLayoutState) {
|
|
|
15559
15663
|
}
|
|
15560
15664
|
|
|
15561
15665
|
// src/components/WorkspaceLayout.tsx
|
|
15562
|
-
var
|
|
15666
|
+
var WorkspaceLayout = forwardRef22(function WorkspaceLayout2({
|
|
15563
15667
|
autoSavePrefix,
|
|
15564
|
-
|
|
15565
|
-
|
|
15566
|
-
rightSidebarContent: rightPanelContent,
|
|
15567
|
-
hasLeftSidebar = !!leftPanelContent,
|
|
15568
|
-
hasRightSidebar = !!rightPanelContent,
|
|
15569
|
-
onChangeLayoutState,
|
|
15570
|
-
leftSidebarInitialSize = 280,
|
|
15571
|
-
rightSidebarInitialSize = 400,
|
|
15572
|
-
leftSidebarMinSize,
|
|
15573
|
-
rightSidebarMinSize,
|
|
15574
|
-
leftSidebarCanResize = false,
|
|
15575
|
-
rightSidebarCanResize = false,
|
|
15668
|
+
left,
|
|
15669
|
+
right,
|
|
15576
15670
|
id,
|
|
15577
15671
|
className,
|
|
15578
|
-
style: style5
|
|
15672
|
+
style: style5,
|
|
15673
|
+
toolbar,
|
|
15674
|
+
children: children2,
|
|
15675
|
+
onChangeLayoutState,
|
|
15676
|
+
leftOptions: {
|
|
15677
|
+
initialSize: leftInitialSize = 280,
|
|
15678
|
+
minSize: leftMinSize,
|
|
15679
|
+
resizable: leftResizable = true,
|
|
15680
|
+
style: leftStyle,
|
|
15681
|
+
className: leftClassName
|
|
15682
|
+
} = {},
|
|
15683
|
+
rightOptions: {
|
|
15684
|
+
initialSize: rightInitialSize = 280,
|
|
15685
|
+
minSize: rightMinSize,
|
|
15686
|
+
resizable: rightResizable = true,
|
|
15687
|
+
style: rightStyle,
|
|
15688
|
+
className: rightClassName
|
|
15689
|
+
} = {}
|
|
15579
15690
|
}, forwardedRef) {
|
|
15580
15691
|
const windowSize = useWindowSize();
|
|
15581
15692
|
function getPercentage(size3) {
|
|
15582
15693
|
return typeof size3 === "string" ? parseFloat(size3) : size3 / windowSize.width * 100;
|
|
15583
15694
|
}
|
|
15584
|
-
const leftSidebarPercentage = getPercentage(
|
|
15585
|
-
const rightSidebarPercentage = getPercentage(
|
|
15586
|
-
const leftSidebarMinPercentage =
|
|
15587
|
-
const rightSidebarMinPercentage =
|
|
15695
|
+
const leftSidebarPercentage = getPercentage(leftInitialSize);
|
|
15696
|
+
const rightSidebarPercentage = getPercentage(rightInitialSize);
|
|
15697
|
+
const leftSidebarMinPercentage = leftMinSize !== void 0 ? getPercentage(leftMinSize) : void 0;
|
|
15698
|
+
const rightSidebarMinPercentage = rightMinSize !== void 0 ? getPercentage(rightMinSize) : void 0;
|
|
15588
15699
|
const panelGroupRef = useRef22(null);
|
|
15589
15700
|
const leftSidebarRef = useRef22(null);
|
|
15590
15701
|
const rightSidebarRef = useRef22(null);
|
|
@@ -15598,21 +15709,21 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
|
|
|
15598
15709
|
);
|
|
15599
15710
|
usePreservePanelSize(panelGroupRef, handleChangeLayoutState);
|
|
15600
15711
|
useImperativeHandle4(forwardedRef, () => ({
|
|
15601
|
-
|
|
15712
|
+
setLeftExpanded: (expanded) => {
|
|
15602
15713
|
if (expanded) {
|
|
15603
15714
|
leftSidebarRef.current?.expand();
|
|
15604
15715
|
} else {
|
|
15605
15716
|
leftSidebarRef.current?.collapse();
|
|
15606
15717
|
}
|
|
15607
15718
|
},
|
|
15608
|
-
|
|
15719
|
+
setRightExpanded: (expanded) => {
|
|
15609
15720
|
if (expanded) {
|
|
15610
15721
|
rightSidebarRef.current?.expand();
|
|
15611
15722
|
} else {
|
|
15612
15723
|
rightSidebarRef.current?.collapse();
|
|
15613
15724
|
}
|
|
15614
15725
|
},
|
|
15615
|
-
|
|
15726
|
+
toggleSides: () => {
|
|
15616
15727
|
const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
|
|
15617
15728
|
const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
|
|
15618
15729
|
if (isLeftSidebarExpanded || isRightSidebarExpanded) {
|
|
@@ -15623,7 +15734,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
|
|
|
15623
15734
|
rightSidebarRef.current?.expand();
|
|
15624
15735
|
}
|
|
15625
15736
|
},
|
|
15626
|
-
|
|
15737
|
+
toggleLeft: () => {
|
|
15627
15738
|
const isLeftSidebarExpanded = leftSidebarRef.current?.isExpanded();
|
|
15628
15739
|
if (isLeftSidebarExpanded) {
|
|
15629
15740
|
leftSidebarRef.current?.collapse();
|
|
@@ -15631,7 +15742,7 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
|
|
|
15631
15742
|
leftSidebarRef.current?.expand();
|
|
15632
15743
|
}
|
|
15633
15744
|
},
|
|
15634
|
-
|
|
15745
|
+
toggleRight: () => {
|
|
15635
15746
|
const isRightSidebarExpanded = rightSidebarRef.current?.isExpanded();
|
|
15636
15747
|
if (isRightSidebarExpanded) {
|
|
15637
15748
|
rightSidebarRef.current?.collapse();
|
|
@@ -15653,56 +15764,38 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
|
|
|
15653
15764
|
}
|
|
15654
15765
|
}
|
|
15655
15766
|
});
|
|
15656
|
-
const centerPanelPercentage = 100 - (
|
|
15767
|
+
const centerPanelPercentage = 100 - (left ? leftSidebarPercentage : 0) - (right ? rightSidebarPercentage : 0);
|
|
15657
15768
|
return /* @__PURE__ */ React75.createElement(
|
|
15658
15769
|
"div",
|
|
15659
15770
|
{
|
|
15660
15771
|
id,
|
|
15661
|
-
className,
|
|
15662
|
-
style:
|
|
15663
|
-
backgroundColor: cssVars.colors.canvasBackground,
|
|
15664
|
-
display: "flex",
|
|
15665
|
-
flexDirection: "row",
|
|
15666
|
-
...style5
|
|
15667
|
-
}
|
|
15772
|
+
className: cx("flex flex-col bg-canvas-background", className),
|
|
15773
|
+
style: style5
|
|
15668
15774
|
},
|
|
15669
|
-
|
|
15775
|
+
toolbar,
|
|
15776
|
+
/* @__PURE__ */ React75.createElement("div", { className: "flex flex-row flex-1" }, /* @__PURE__ */ React75.createElement(
|
|
15670
15777
|
PanelGroup,
|
|
15671
15778
|
{
|
|
15672
15779
|
ref: panelGroupRef,
|
|
15673
15780
|
id: EDITOR_PANEL_GROUP_ID,
|
|
15781
|
+
className: "flex-1",
|
|
15674
15782
|
direction: "horizontal",
|
|
15675
|
-
autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
|
|
15676
|
-
style: { flex: "1" }
|
|
15783
|
+
autoSaveId: autoSavePrefix ? `${autoSavePrefix}--${EDITOR_PANEL_GROUP_ID}` : void 0
|
|
15677
15784
|
},
|
|
15678
|
-
|
|
15785
|
+
left && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(
|
|
15679
15786
|
Panel,
|
|
15680
15787
|
{
|
|
15681
15788
|
id: LEFT_SIDEBAR_ID,
|
|
15789
|
+
className: "relative",
|
|
15682
15790
|
order: 1,
|
|
15683
15791
|
ref: leftSidebarRef,
|
|
15684
15792
|
defaultSize: leftSidebarPercentage,
|
|
15685
15793
|
minSize: leftSidebarMinPercentage ?? leftSidebarPercentage,
|
|
15686
|
-
...!
|
|
15687
|
-
collapsible: true
|
|
15688
|
-
style: {
|
|
15689
|
-
display: "flex",
|
|
15690
|
-
flexDirection: "row",
|
|
15691
|
-
position: "relative"
|
|
15692
|
-
}
|
|
15794
|
+
...!leftResizable && { maxSize: leftSidebarPercentage },
|
|
15795
|
+
collapsible: true
|
|
15693
15796
|
},
|
|
15694
|
-
internalLayoutState?.leftSidebarCollapsed ? null :
|
|
15695
|
-
), /* @__PURE__ */ React75.createElement(
|
|
15696
|
-
PanelResizeHandle,
|
|
15697
|
-
{
|
|
15698
|
-
style: {
|
|
15699
|
-
cursor: "col-resize",
|
|
15700
|
-
width: "1px",
|
|
15701
|
-
height: "100%",
|
|
15702
|
-
backgroundColor: cssVars.colors.divider
|
|
15703
|
-
}
|
|
15704
|
-
}
|
|
15705
|
-
)),
|
|
15797
|
+
internalLayoutState?.leftSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: leftStyle, className: leftClassName }, left)
|
|
15798
|
+
), /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" })),
|
|
15706
15799
|
/* @__PURE__ */ React75.createElement(
|
|
15707
15800
|
Panel,
|
|
15708
15801
|
{
|
|
@@ -15710,49 +15803,45 @@ var WorkspaceLayoutWithTheme = forwardRef22(function WorkspaceLayoutWithTheme2({
|
|
|
15710
15803
|
order: 2,
|
|
15711
15804
|
defaultSize: centerPanelPercentage,
|
|
15712
15805
|
minSize: 10,
|
|
15713
|
-
|
|
15714
|
-
display: "flex",
|
|
15715
|
-
flexDirection: "row",
|
|
15716
|
-
position: "relative"
|
|
15717
|
-
}
|
|
15806
|
+
className: "flex relative"
|
|
15718
15807
|
},
|
|
15719
|
-
|
|
15808
|
+
children2
|
|
15720
15809
|
),
|
|
15721
|
-
|
|
15722
|
-
PanelResizeHandle,
|
|
15723
|
-
{
|
|
15724
|
-
style: {
|
|
15725
|
-
cursor: "col-resize",
|
|
15726
|
-
width: "1px",
|
|
15727
|
-
height: "100%",
|
|
15728
|
-
backgroundColor: cssVars.colors.divider
|
|
15729
|
-
}
|
|
15730
|
-
}
|
|
15731
|
-
), /* @__PURE__ */ React75.createElement(
|
|
15810
|
+
right && /* @__PURE__ */ React75.createElement(React75.Fragment, null, /* @__PURE__ */ React75.createElement(PanelResizeHandle, { className: "cursor-col-resize w-px h-full bg-divider" }), /* @__PURE__ */ React75.createElement(
|
|
15732
15811
|
Panel,
|
|
15733
15812
|
{
|
|
15734
15813
|
id: RIGHT_SIDEBAR_ID,
|
|
15814
|
+
className: "relative",
|
|
15735
15815
|
order: 3,
|
|
15736
15816
|
ref: rightSidebarRef,
|
|
15737
15817
|
minSize: rightSidebarMinPercentage ?? rightSidebarPercentage,
|
|
15738
15818
|
defaultSize: rightSidebarPercentage,
|
|
15739
|
-
...!
|
|
15819
|
+
...!rightResizable && {
|
|
15740
15820
|
maxSize: rightSidebarPercentage
|
|
15741
15821
|
},
|
|
15742
|
-
collapsible: true
|
|
15743
|
-
style: {
|
|
15744
|
-
display: "flex",
|
|
15745
|
-
flexDirection: "row",
|
|
15746
|
-
position: "relative"
|
|
15747
|
-
}
|
|
15822
|
+
collapsible: true
|
|
15748
15823
|
},
|
|
15749
|
-
internalLayoutState?.rightSidebarCollapsed ? null :
|
|
15824
|
+
internalLayoutState?.rightSidebarCollapsed ? null : /* @__PURE__ */ React75.createElement(PanelInner, { style: rightStyle, className: rightClassName }, right)
|
|
15750
15825
|
))
|
|
15751
|
-
)
|
|
15826
|
+
))
|
|
15752
15827
|
);
|
|
15753
15828
|
});
|
|
15754
|
-
var
|
|
15755
|
-
|
|
15829
|
+
var PanelInner = memo29(function PanelInner2({
|
|
15830
|
+
children: children2,
|
|
15831
|
+
style: style5,
|
|
15832
|
+
className
|
|
15833
|
+
}) {
|
|
15834
|
+
return /* @__PURE__ */ React75.createElement(
|
|
15835
|
+
"div",
|
|
15836
|
+
{
|
|
15837
|
+
style: style5,
|
|
15838
|
+
className: cx(
|
|
15839
|
+
"absolute inset-0 flex flex-col bg-sidebar-background",
|
|
15840
|
+
className
|
|
15841
|
+
)
|
|
15842
|
+
},
|
|
15843
|
+
children2
|
|
15844
|
+
);
|
|
15756
15845
|
});
|
|
15757
15846
|
|
|
15758
15847
|
// src/hooks/usePlatform.ts
|
|
@@ -15895,7 +15984,7 @@ __export(InspectorPrimitives_exports, {
|
|
|
15895
15984
|
});
|
|
15896
15985
|
import React77, {
|
|
15897
15986
|
forwardRef as forwardRef23,
|
|
15898
|
-
memo as
|
|
15987
|
+
memo as memo31
|
|
15899
15988
|
} from "react";
|
|
15900
15989
|
var Section2 = forwardRef23(({ className, ...props }, ref) => /* @__PURE__ */ React77.createElement(
|
|
15901
15990
|
"div",
|
|
@@ -15969,7 +16058,7 @@ var RowLabel = forwardRef23(function RowLabel2({
|
|
|
15969
16058
|
}
|
|
15970
16059
|
);
|
|
15971
16060
|
});
|
|
15972
|
-
var LabeledRow =
|
|
16061
|
+
var LabeledRow = memo31(function LabeledRow2({
|
|
15973
16062
|
id,
|
|
15974
16063
|
children: children2,
|
|
15975
16064
|
label,
|
|
@@ -16073,14 +16162,15 @@ function ToolbarMenu({
|
|
|
16073
16162
|
Button,
|
|
16074
16163
|
{
|
|
16075
16164
|
key: i,
|
|
16165
|
+
disabled: item.disabled,
|
|
16076
16166
|
onClick: () => {
|
|
16077
16167
|
if (onSelectMenuItem && item.value) {
|
|
16078
16168
|
onSelectMenuItem(item.value);
|
|
16079
16169
|
}
|
|
16080
16170
|
}
|
|
16081
16171
|
},
|
|
16082
|
-
item.
|
|
16083
|
-
item.
|
|
16172
|
+
item.title,
|
|
16173
|
+
item.icon && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { inline: true, size: 6 }), renderIcon(item.icon))
|
|
16084
16174
|
);
|
|
16085
16175
|
}
|
|
16086
16176
|
return /* @__PURE__ */ React79.createElement(
|
|
@@ -16094,14 +16184,13 @@ function ToolbarMenu({
|
|
|
16094
16184
|
}
|
|
16095
16185
|
}
|
|
16096
16186
|
},
|
|
16097
|
-
/* @__PURE__ */ React79.createElement(Button,
|
|
16187
|
+
/* @__PURE__ */ React79.createElement(Button, { disabled: item.disabled }, item.title, /* @__PURE__ */ React79.createElement(Spacer.Horizontal, { size: 6 }), /* @__PURE__ */ React79.createElement(DropdownChevronIcon4, null))
|
|
16098
16188
|
);
|
|
16099
16189
|
}));
|
|
16100
16190
|
}
|
|
16101
16191
|
export {
|
|
16102
16192
|
ActivityIndicator,
|
|
16103
16193
|
AnimatePresence,
|
|
16104
|
-
AutoResizingTextArea,
|
|
16105
16194
|
Avatar,
|
|
16106
16195
|
AvatarStack,
|
|
16107
16196
|
BaseToolbar,
|
|
@@ -16165,6 +16254,8 @@ export {
|
|
|
16165
16254
|
Spacer,
|
|
16166
16255
|
Switch,
|
|
16167
16256
|
Text,
|
|
16257
|
+
TextArea,
|
|
16258
|
+
TextAreaRow,
|
|
16168
16259
|
Toast,
|
|
16169
16260
|
ToastProvider,
|
|
16170
16261
|
Toolbar,
|