@noya-app/noya-designsystem 0.1.48 → 0.1.50
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 +10 -10
- package/CHANGELOG.md +19 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +347 -173
- package/dist/index.d.ts +347 -173
- package/dist/index.js +3602 -2811
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +4761 -3993
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -5
- package/src/__tests__/validateDropIndicator.test.ts +4 -4
- package/src/components/ActionMenu.tsx +15 -4
- package/src/components/Avatar.tsx +2 -2
- package/src/components/Banner.tsx +29 -0
- package/src/components/BaseToolbar.tsx +2 -2
- package/src/components/Button.tsx +2 -2
- package/src/components/Checkbox.tsx +2 -2
- package/src/components/Chip.tsx +15 -14
- package/src/components/Collection.tsx +25 -2
- package/src/components/Combobox.tsx +22 -23
- package/src/components/ComboboxMenu.tsx +1 -1
- package/src/components/Dialog.tsx +2 -2
- package/src/components/DimensionInput.tsx +14 -12
- package/src/components/EditableText.tsx +3 -1
- package/src/components/FillInputField.tsx +2 -2
- package/src/components/Grid.tsx +131 -113
- package/src/components/GridView.tsx +36 -18
- package/src/components/InputField.tsx +116 -171
- package/src/components/Label.tsx +14 -73
- package/src/components/LabeledField.tsx +13 -2
- package/src/components/List.tsx +106 -47
- package/src/components/ListView.tsx +52 -31
- package/src/components/MediaThumbnail.tsx +14 -6
- package/src/components/Message.tsx +8 -8
- package/src/components/NoyaLogo.tsx +41 -0
- package/src/components/Popover.tsx +9 -6
- package/src/components/Section.tsx +172 -0
- package/src/components/SegmentedControl.tsx +1 -1
- package/src/components/SelectMenu.tsx +9 -4
- package/src/components/Slider.tsx +16 -7
- package/src/components/Sortable.tsx +186 -47
- package/src/components/UserPointer.tsx +1 -1
- package/src/components/ai-assistant/AIAssistantLayout.tsx +102 -0
- package/src/components/connected-users-menu/ConnectedUsersMenuLayout.tsx +71 -0
- package/src/components/file-explorer/FileExplorerLayout.tsx +71 -0
- package/src/components/internal/Menu.tsx +20 -10
- package/src/components/internal/SelectItem.tsx +3 -2
- package/src/components/pipeline/PipelineResultLayout.tsx +32 -0
- package/src/index.css +118 -112
- package/src/index.tsx +9 -0
- package/src/theme/index.ts +2 -0
- package/src/utils/classNames.ts +76 -3
- package/src/utils/inputs.ts +21 -0
- package/src/utils/moveTreeItem.ts +99 -0
- package/tailwind.config.ts +82 -75
package/dist/index.d.mts
CHANGED
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default, {
|
|
2
|
+
import React__default, { ReactNode, CSSProperties, ReactHTML, HTMLAttributes, AriaRole, KeyboardEventHandler, MouseEventHandler, PointerEventHandler, FocusEventHandler, InputHTMLAttributes, ForwardedRef, ComponentProps, SyntheticEvent, LabelHTMLAttributes } from 'react';
|
|
3
3
|
import { IItemScore } from 'vscode-fuzzy-scorer';
|
|
4
4
|
import * as Icons from '@noya-app/noya-icons';
|
|
5
5
|
export { Icons };
|
|
6
|
+
import * as tailwindcss_types_config from 'tailwindcss/types/config';
|
|
6
7
|
import * as _noya_app_noya_geometry from '@noya-app/noya-geometry';
|
|
7
8
|
import { Size } from '@noya-app/noya-geometry';
|
|
8
9
|
import { UniqueIdentifier } from '@dnd-kit/core';
|
|
9
10
|
import { useSortable } from '@dnd-kit/sortable';
|
|
10
11
|
import { Property } from 'csstype';
|
|
11
12
|
import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
|
|
13
|
+
import { SectionProps as SectionProps$1, BannerProps as BannerProps$1 } from '@noya-app/noya-designsystem';
|
|
12
14
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
13
15
|
import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
|
|
14
16
|
import { Sketch } from '@noya-app/noya-file-format';
|
|
@@ -21,6 +23,118 @@ import { SelectProps } from '@radix-ui/react-select';
|
|
|
21
23
|
import { ImperativePanelGroupHandle } from 'react-resizable-panels';
|
|
22
24
|
import { RgbaColor } from '@noya-app/noya-colorpicker';
|
|
23
25
|
|
|
26
|
+
declare function fuzzyScore({ item, query }: {
|
|
27
|
+
item: string;
|
|
28
|
+
query: string;
|
|
29
|
+
}): IItemScore;
|
|
30
|
+
type IScoredItem = IItemScore & {
|
|
31
|
+
index: number;
|
|
32
|
+
};
|
|
33
|
+
declare function fuzzyFilter({ items, query, scoreThreshold, }: {
|
|
34
|
+
items: string[];
|
|
35
|
+
query: string;
|
|
36
|
+
scoreThreshold?: number;
|
|
37
|
+
}): IScoredItem[];
|
|
38
|
+
type IToken = {
|
|
39
|
+
type: "text";
|
|
40
|
+
text: string;
|
|
41
|
+
} | {
|
|
42
|
+
type: "match";
|
|
43
|
+
text: string;
|
|
44
|
+
};
|
|
45
|
+
type MatchRange = {
|
|
46
|
+
start: number;
|
|
47
|
+
end: number;
|
|
48
|
+
};
|
|
49
|
+
declare function fuzzyTokenize({ item, itemScore, }: {
|
|
50
|
+
item: string;
|
|
51
|
+
itemScore: IItemScore;
|
|
52
|
+
}): IToken[];
|
|
53
|
+
|
|
54
|
+
type IconName = keyof typeof Icons;
|
|
55
|
+
|
|
56
|
+
declare function renderIcon(iconName: Exclude<React$1.ReactNode, string> | IconName): React$1.ReactNode;
|
|
57
|
+
|
|
58
|
+
type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
|
|
59
|
+
type SeparatorItem = {
|
|
60
|
+
type: "separator";
|
|
61
|
+
};
|
|
62
|
+
declare const separator: SeparatorItem;
|
|
63
|
+
type FalsyReactNode = false | "" | null | undefined;
|
|
64
|
+
type MenuItemIcon = IconName | React__default.ReactElement | FalsyReactNode;
|
|
65
|
+
type BaseMenuItem = {
|
|
66
|
+
checked?: boolean;
|
|
67
|
+
disabled?: boolean;
|
|
68
|
+
icon?: MenuItemIcon;
|
|
69
|
+
role?: MenuItemRole;
|
|
70
|
+
alwaysInclude?: boolean;
|
|
71
|
+
title: NonNullable<ReactNode>;
|
|
72
|
+
};
|
|
73
|
+
type SectionHeaderMenuItem = {
|
|
74
|
+
type: "sectionHeader";
|
|
75
|
+
id: string;
|
|
76
|
+
title: ReactNode;
|
|
77
|
+
maxVisibleItems?: number;
|
|
78
|
+
variant?: "normal" | "label";
|
|
79
|
+
};
|
|
80
|
+
type SelectableMenuItem<T extends string> = BaseMenuItem & {
|
|
81
|
+
type?: undefined;
|
|
82
|
+
shortcut?: string;
|
|
83
|
+
value: T;
|
|
84
|
+
testSelected?: boolean;
|
|
85
|
+
};
|
|
86
|
+
type SubMenuItem<T extends string> = BaseMenuItem & {
|
|
87
|
+
type: "submenu";
|
|
88
|
+
items: MenuItem<T>[];
|
|
89
|
+
id: string;
|
|
90
|
+
};
|
|
91
|
+
type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T>;
|
|
92
|
+
type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T>;
|
|
93
|
+
type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> & IScoredItem;
|
|
94
|
+
type ScoredMenuItem<T extends string> = ScoredSelectableMenuItem<T> | SectionHeaderMenuItem;
|
|
95
|
+
type ExtractMenuItemType<T> = T extends SelectableMenuItem<infer U> ? U : never;
|
|
96
|
+
declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is SelectableMenuItem<T>;
|
|
97
|
+
declare const isNonSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is NonSelectableMenuItem<T>;
|
|
98
|
+
declare const isMenuItemSectionHeader: (item: MenuItem<string>) => item is SectionHeaderMenuItem;
|
|
99
|
+
declare const isSelectableMenuItemWithScore: (item: MenuItem<string>) => item is ScoredSelectableMenuItem<string>;
|
|
100
|
+
declare const getMenuItemKey: <T extends string>(item: MenuItem<T>, index: number) => string;
|
|
101
|
+
declare const CHECKBOX_WIDTH = 15;
|
|
102
|
+
declare const CHECKBOX_RIGHT_INSET = 8;
|
|
103
|
+
declare const CHECKBOX_INDENT_WIDTH = 6;
|
|
104
|
+
declare const styles: {
|
|
105
|
+
separatorStyle: string;
|
|
106
|
+
selectedItemStyle: string;
|
|
107
|
+
testSelectedItemStyle: string;
|
|
108
|
+
itemStyle: ({ disabled }: {
|
|
109
|
+
disabled?: boolean;
|
|
110
|
+
}) => string;
|
|
111
|
+
itemIndicator: {
|
|
112
|
+
className: string;
|
|
113
|
+
style: {
|
|
114
|
+
marginRight: number;
|
|
115
|
+
};
|
|
116
|
+
};
|
|
117
|
+
contentStyle: string;
|
|
118
|
+
};
|
|
119
|
+
declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
|
|
120
|
+
declare const KeyboardShortcut: React__default.NamedExoticComponent<{
|
|
121
|
+
shortcut: string;
|
|
122
|
+
}>;
|
|
123
|
+
declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionHeaderMenuItem, "type" | "maxVisibleItems"> & {
|
|
124
|
+
isFirst?: boolean;
|
|
125
|
+
indented?: boolean;
|
|
126
|
+
}>;
|
|
127
|
+
|
|
128
|
+
type ActionMenuProps<TMenu extends string> = {
|
|
129
|
+
menuItems: MenuItem<TMenu>[];
|
|
130
|
+
onSelect: (action: TMenu) => void;
|
|
131
|
+
selected: boolean;
|
|
132
|
+
onOpenChange: (open: boolean) => void;
|
|
133
|
+
className?: string;
|
|
134
|
+
style?: React__default.CSSProperties;
|
|
135
|
+
};
|
|
136
|
+
declare const ActionMenu: <TMenu extends string>(props: ActionMenuProps<TMenu>) => React__default.ReactElement | null;
|
|
137
|
+
|
|
24
138
|
interface Props$e {
|
|
25
139
|
size?: number;
|
|
26
140
|
opacity?: number;
|
|
@@ -30,6 +144,25 @@ interface Props$e {
|
|
|
30
144
|
}
|
|
31
145
|
declare const ActivityIndicator: React$1.NamedExoticComponent<Props$e>;
|
|
32
146
|
|
|
147
|
+
declare const AIAssistantLoadingIndicator: () => React__default.JSX.Element;
|
|
148
|
+
type AIAssistantInputProps = {
|
|
149
|
+
value: string;
|
|
150
|
+
onChange: (e: React__default.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
151
|
+
onSubmitClick: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
152
|
+
onKeyDown: (e: React__default.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
153
|
+
disabled: boolean;
|
|
154
|
+
};
|
|
155
|
+
declare const AIAssistantInput: React__default.ForwardRefExoticComponent<AIAssistantInputProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
156
|
+
type AIAssistantLayoutProps = {
|
|
157
|
+
renderMessages: () => React__default.ReactNode;
|
|
158
|
+
renderInput: () => React__default.ReactNode;
|
|
159
|
+
isLoading: boolean;
|
|
160
|
+
renderLoadingIndicator?: () => React__default.ReactNode;
|
|
161
|
+
className?: string;
|
|
162
|
+
style?: React__default.CSSProperties;
|
|
163
|
+
};
|
|
164
|
+
declare const AIAssistantLayout: React__default.ForwardRefExoticComponent<AIAssistantLayoutProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
165
|
+
|
|
33
166
|
type AnimatePresenceProps = {
|
|
34
167
|
children: React__default.ReactNode;
|
|
35
168
|
/**
|
|
@@ -84,6 +217,13 @@ declare const AvatarStack: React__default.NamedExoticComponent<{
|
|
|
84
217
|
className?: string;
|
|
85
218
|
}>;
|
|
86
219
|
|
|
220
|
+
type BannerProps = {
|
|
221
|
+
label?: string;
|
|
222
|
+
className?: string;
|
|
223
|
+
style?: CSSProperties;
|
|
224
|
+
};
|
|
225
|
+
declare function Banner({ label, className, style }: BannerProps): React__default.JSX.Element;
|
|
226
|
+
|
|
87
227
|
declare const config: {
|
|
88
228
|
content: string[];
|
|
89
229
|
corePlugins: {
|
|
@@ -112,6 +252,8 @@ declare const config: {
|
|
|
112
252
|
"secondary-bright": string;
|
|
113
253
|
"input-background": string;
|
|
114
254
|
"input-background-light": string;
|
|
255
|
+
"list-view-hover-background": string;
|
|
256
|
+
"list-view-thumbnail-background": string;
|
|
115
257
|
"code-background": string;
|
|
116
258
|
"code-background-dark": string;
|
|
117
259
|
"selected-background": string;
|
|
@@ -156,6 +298,8 @@ declare const config: {
|
|
|
156
298
|
"chip-error-shadow": string;
|
|
157
299
|
"chip-default-shadow": string;
|
|
158
300
|
"floating-button": string;
|
|
301
|
+
"block-border": string;
|
|
302
|
+
"block-highlight": string;
|
|
159
303
|
};
|
|
160
304
|
fontFamily: {
|
|
161
305
|
sans: [string, string, string, string, string, string, string, string, string, string];
|
|
@@ -253,6 +397,10 @@ declare const config: {
|
|
|
253
397
|
};
|
|
254
398
|
};
|
|
255
399
|
safelist: string[];
|
|
400
|
+
plugins: {
|
|
401
|
+
handler: tailwindcss_types_config.PluginCreator;
|
|
402
|
+
config?: Partial<tailwindcss_types_config.Config> | undefined;
|
|
403
|
+
}[];
|
|
256
404
|
};
|
|
257
405
|
|
|
258
406
|
type Theme = (typeof config.theme)["extend"];
|
|
@@ -279,6 +427,8 @@ declare const cssVars: {
|
|
|
279
427
|
secondaryBright: string;
|
|
280
428
|
inputBackground: string;
|
|
281
429
|
inputBackgroundLight: string;
|
|
430
|
+
listViewHoverBackground: string;
|
|
431
|
+
listViewThumbnailBackground: string;
|
|
282
432
|
codeBackground: string;
|
|
283
433
|
codeBackgroundDark: string;
|
|
284
434
|
selectedBackground: string;
|
|
@@ -323,6 +473,8 @@ declare const cssVars: {
|
|
|
323
473
|
chipErrorShadow: string;
|
|
324
474
|
chipDefaultShadow: string;
|
|
325
475
|
floatingButton: string;
|
|
476
|
+
blockBorder: string;
|
|
477
|
+
blockHighlight: string;
|
|
326
478
|
};
|
|
327
479
|
fontFamily: {
|
|
328
480
|
sans: [string, string, string, string, string, string, string, string, string, string];
|
|
@@ -418,6 +570,7 @@ declare const cssVars: {
|
|
|
418
570
|
menu: string;
|
|
419
571
|
};
|
|
420
572
|
};
|
|
573
|
+
declare const INPUT_HEIGHT = 27;
|
|
421
574
|
|
|
422
575
|
type KebabToCamelCase<S extends string> = S extends `${infer First}-${infer Rest}` ? `${First}${Capitalize<KebabToCamelCase<Rest>>}` : S;
|
|
423
576
|
|
|
@@ -502,6 +655,7 @@ interface ChipProps {
|
|
|
502
655
|
onHoverDeleteChange?: (hovering: boolean) => void;
|
|
503
656
|
style?: React__default.CSSProperties;
|
|
504
657
|
tabIndex?: number;
|
|
658
|
+
role?: string;
|
|
505
659
|
}
|
|
506
660
|
declare const Chip: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<ChipProps & React__default.RefAttributes<HTMLSpanElement>>>;
|
|
507
661
|
|
|
@@ -514,107 +668,21 @@ declare const Grid: <T, M extends string = string>(props: CollectionProps<T, M>
|
|
|
514
668
|
ref?: React__default.ForwardedRef<CollectionRef>;
|
|
515
669
|
} & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
|
|
516
670
|
|
|
517
|
-
declare function fuzzyScore({ item, query }: {
|
|
518
|
-
item: string;
|
|
519
|
-
query: string;
|
|
520
|
-
}): IItemScore;
|
|
521
|
-
type IScoredItem = IItemScore & {
|
|
522
|
-
index: number;
|
|
523
|
-
};
|
|
524
|
-
declare function fuzzyFilter({ items, query, scoreThreshold, }: {
|
|
525
|
-
items: string[];
|
|
526
|
-
query: string;
|
|
527
|
-
scoreThreshold?: number;
|
|
528
|
-
}): IScoredItem[];
|
|
529
|
-
type IToken = {
|
|
530
|
-
type: "text";
|
|
531
|
-
text: string;
|
|
532
|
-
} | {
|
|
533
|
-
type: "match";
|
|
534
|
-
text: string;
|
|
535
|
-
};
|
|
536
|
-
type MatchRange = {
|
|
537
|
-
start: number;
|
|
538
|
-
end: number;
|
|
539
|
-
};
|
|
540
|
-
declare function fuzzyTokenize({ item, itemScore, }: {
|
|
541
|
-
item: string;
|
|
542
|
-
itemScore: IItemScore;
|
|
543
|
-
}): IToken[];
|
|
544
|
-
|
|
545
|
-
type IconName = keyof typeof Icons;
|
|
546
|
-
|
|
547
|
-
declare function renderIcon(iconName: Exclude<React$1.ReactNode, string> | IconName): React$1.ReactNode;
|
|
548
|
-
|
|
549
|
-
type MenuItemRole = "undo" | "redo" | "cut" | "copy" | "paste" | "pasteAndMatchStyle" | "delete" | "selectAll" | "reload" | "forceReload" | "toggleDevTools" | "resetZoom" | "zoomIn" | "zoomOut" | "toggleSpellChecker" | "togglefullscreen" | "window" | "minimize" | "close" | "help" | "about" | "services" | "hide" | "hideOthers" | "unhide" | "quit" | "showSubstitutions" | "toggleSmartQuotes" | "toggleSmartDashes" | "toggleTextReplacement" | "startSpeaking" | "stopSpeaking" | "zoom" | "front" | "appMenu" | "fileMenu" | "editMenu" | "viewMenu" | "shareMenu" | "recentDocuments" | "toggleTabBar" | "selectNextTab" | "selectPreviousTab" | "mergeAllWindows" | "clearRecentDocuments" | "moveTabToNewWindow" | "windowMenu";
|
|
550
|
-
type SeparatorItem = {
|
|
551
|
-
type: "separator";
|
|
552
|
-
};
|
|
553
|
-
declare const separator: SeparatorItem;
|
|
554
|
-
type FalsyReactNode = false | "" | null | undefined;
|
|
555
|
-
type MenuItemIcon = IconName | React__default.ReactElement | FalsyReactNode;
|
|
556
|
-
type BaseMenuItem = {
|
|
557
|
-
checked?: boolean;
|
|
558
|
-
disabled?: boolean;
|
|
559
|
-
icon?: MenuItemIcon;
|
|
560
|
-
role?: MenuItemRole;
|
|
561
|
-
alwaysInclude?: boolean;
|
|
562
|
-
title: NonNullable<ReactNode>;
|
|
563
|
-
};
|
|
564
|
-
type SectionHeaderMenuItem = {
|
|
565
|
-
type: "sectionHeader";
|
|
566
|
-
id: string;
|
|
567
|
-
title: ReactNode;
|
|
568
|
-
maxVisibleItems?: number;
|
|
569
|
-
variant?: "normal" | "label";
|
|
570
|
-
};
|
|
571
|
-
type SelectableMenuItem<T extends string> = BaseMenuItem & {
|
|
572
|
-
type?: undefined;
|
|
573
|
-
shortcut?: string;
|
|
574
|
-
value: T;
|
|
575
|
-
testSelected?: boolean;
|
|
576
|
-
};
|
|
577
|
-
type SubMenuItem<T extends string> = BaseMenuItem & {
|
|
578
|
-
type: "submenu";
|
|
579
|
-
items: MenuItem<T>[];
|
|
580
|
-
id: string;
|
|
581
|
-
};
|
|
582
|
-
type NonSelectableMenuItem<T extends string> = SeparatorItem | SectionHeaderMenuItem | SubMenuItem<T>;
|
|
583
|
-
type MenuItem<T extends string> = SeparatorItem | SelectableMenuItem<T> | SectionHeaderMenuItem | SubMenuItem<T>;
|
|
584
|
-
type ScoredSelectableMenuItem<T extends string> = SelectableMenuItem<T> & IScoredItem;
|
|
585
|
-
type ScoredMenuItem<T extends string> = ScoredSelectableMenuItem<T> | SectionHeaderMenuItem;
|
|
586
|
-
type ExtractMenuItemType<T> = T extends SelectableMenuItem<infer U> ? U : never;
|
|
587
|
-
declare const isSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is SelectableMenuItem<T>;
|
|
588
|
-
declare const isNonSelectableMenuItem: <T extends string>(item: MenuItem<T>) => item is NonSelectableMenuItem<T>;
|
|
589
|
-
declare const isMenuItemSectionHeader: (item: MenuItem<string>) => item is SectionHeaderMenuItem;
|
|
590
|
-
declare const isSelectableMenuItemWithScore: (item: MenuItem<string>) => item is ScoredSelectableMenuItem<string>;
|
|
591
|
-
declare const getMenuItemKey: <T extends string>(item: MenuItem<T>, index: number) => string;
|
|
592
|
-
declare const CHECKBOX_WIDTH = 16;
|
|
593
|
-
declare const CHECKBOX_RIGHT_INSET = 8;
|
|
594
|
-
declare const CHECKBOX_INDENT_WIDTH = 6;
|
|
595
|
-
declare const styles: {
|
|
596
|
-
separatorStyle: string;
|
|
597
|
-
selectedItemStyle: string;
|
|
598
|
-
testSelectedItemStyle: string;
|
|
599
|
-
itemStyle: ({ disabled }: {
|
|
600
|
-
disabled?: boolean;
|
|
601
|
-
}) => string;
|
|
602
|
-
itemIndicatorStyle: string;
|
|
603
|
-
contentStyle: string;
|
|
604
|
-
};
|
|
605
|
-
declare function getKeyboardShortcutsForMenuItems<T extends string>(menuItems: MenuItem<T>[], onSelect: (type: T) => void): Record<string, () => void>;
|
|
606
|
-
declare const KeyboardShortcut: React__default.NamedExoticComponent<{
|
|
607
|
-
shortcut: string;
|
|
608
|
-
}>;
|
|
609
|
-
declare const SectionHeader$1: React__default.NamedExoticComponent<Omit<SectionHeaderMenuItem, "type" | "maxVisibleItems"> & {
|
|
610
|
-
isFirst?: boolean;
|
|
611
|
-
indented?: boolean;
|
|
612
|
-
}>;
|
|
613
|
-
|
|
614
671
|
type RelativeDropPosition = "above" | "below" | "inside";
|
|
615
|
-
type DropValidator = (sourceIndex: number,
|
|
616
|
-
declare const
|
|
672
|
+
type DropValidator = (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => boolean;
|
|
673
|
+
declare const normalizeListTargetIndex: (index: number, position: "above" | "below") => number;
|
|
617
674
|
declare const defaultAcceptsDrop: DropValidator;
|
|
675
|
+
type SortableItemContextProps = {
|
|
676
|
+
keys: UniqueIdentifier[];
|
|
677
|
+
acceptsDrop: DropValidator;
|
|
678
|
+
axis: "x" | "y";
|
|
679
|
+
position: {
|
|
680
|
+
x: number;
|
|
681
|
+
y: number;
|
|
682
|
+
};
|
|
683
|
+
setActivatorEvent: (event: PointerEvent) => void;
|
|
684
|
+
getDropTargetParentIndex?: (index: number) => number | undefined;
|
|
685
|
+
};
|
|
618
686
|
type ValidateDropIndicatorParams = {
|
|
619
687
|
acceptsDrop: DropValidator;
|
|
620
688
|
keys: UniqueIdentifier[];
|
|
@@ -626,27 +694,38 @@ type ValidateDropIndicatorParams = {
|
|
|
626
694
|
};
|
|
627
695
|
declare function validateDropIndicator({ acceptsDrop, keys, activeId, overId, offsetStart, elementStart, elementSize, }: ValidateDropIndicatorParams): RelativeDropPosition | undefined;
|
|
628
696
|
type UseSortableReturnType = ReturnType<typeof useSortable>;
|
|
697
|
+
type ItemChildrenProps<T> = {
|
|
698
|
+
ref: React$1.Ref<T>;
|
|
699
|
+
relativeDropPosition?: RelativeDropPosition;
|
|
700
|
+
style?: React$1.CSSProperties;
|
|
701
|
+
} & UseSortableReturnType["attributes"];
|
|
629
702
|
interface ItemProps$1<T> {
|
|
630
703
|
id: UniqueIdentifier;
|
|
631
704
|
disabled?: boolean;
|
|
632
|
-
children: (props:
|
|
633
|
-
ref: React$1.Ref<T>;
|
|
634
|
-
relativeDropPosition?: RelativeDropPosition;
|
|
635
|
-
style?: React$1.CSSProperties;
|
|
636
|
-
} & UseSortableReturnType["attributes"]) => JSX.Element;
|
|
705
|
+
children: (props: ItemChildrenProps<T>) => JSX.Element;
|
|
637
706
|
}
|
|
638
707
|
interface RootProps {
|
|
639
708
|
keys: UniqueIdentifier[];
|
|
640
709
|
children: React$1.ReactNode;
|
|
641
710
|
renderOverlay?: (index: number) => React$1.ReactNode;
|
|
642
|
-
onMoveItem?: (sourceIndex: number,
|
|
643
|
-
acceptsDrop?:
|
|
644
|
-
axis?: "
|
|
711
|
+
onMoveItem?: (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => void;
|
|
712
|
+
acceptsDrop?: SortableItemContextProps["acceptsDrop"];
|
|
713
|
+
axis?: SortableItemContextProps["axis"];
|
|
714
|
+
getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
|
|
645
715
|
}
|
|
646
|
-
declare
|
|
647
|
-
|
|
648
|
-
|
|
716
|
+
declare function SortableRoot({ keys, children, onMoveItem, renderOverlay, acceptsDrop, axis, getDropTargetParentIndex, }: RootProps): React$1.JSX.Element;
|
|
717
|
+
interface SortableProps<T, TElement extends HTMLElement> extends Omit<RootProps, "children" | "keys" | "renderOverlay"> {
|
|
718
|
+
items: T[];
|
|
719
|
+
keyExtractor: (item: T) => UniqueIdentifier;
|
|
720
|
+
shouldRenderOverlay?: boolean;
|
|
721
|
+
renderItem: (item: T, props: ItemChildrenProps<TElement>, { isOverlay }: {
|
|
722
|
+
isOverlay: boolean;
|
|
723
|
+
}) => JSX.Element;
|
|
649
724
|
}
|
|
725
|
+
declare const Sortable: (<TItem, TElement extends HTMLElement>(props: SortableProps<TItem, TElement>) => React$1.ReactElement | null) & {
|
|
726
|
+
readonly Root: React$1.MemoExoticComponent<typeof SortableRoot>;
|
|
727
|
+
readonly Item: <T extends HTMLElement>(props: ItemProps$1<T>) => React$1.ReactElement | null;
|
|
728
|
+
};
|
|
650
729
|
|
|
651
730
|
type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
|
|
652
731
|
type ListRowPosition = "only" | "first" | "middle" | "last";
|
|
@@ -671,8 +750,9 @@ interface EditableRowProps {
|
|
|
671
750
|
autoFocus: boolean;
|
|
672
751
|
placeholder?: string;
|
|
673
752
|
className?: string;
|
|
753
|
+
onKeyDown?: (e: React__default.KeyboardEvent) => void;
|
|
674
754
|
}
|
|
675
|
-
declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps): React__default.JSX.Element;
|
|
755
|
+
declare function ListViewEditableRowTitle({ value, onSubmitEditing, autoFocus, placeholder, className, onKeyDown, }: EditableRowProps): React__default.JSX.Element;
|
|
676
756
|
interface ListViewClickInfo {
|
|
677
757
|
shiftKey: boolean;
|
|
678
758
|
altKey: boolean;
|
|
@@ -703,17 +783,20 @@ interface ListViewRowProps<MenuItemType extends string = string> {
|
|
|
703
783
|
onKeyDown?: (event: React__default.KeyboardEvent) => void;
|
|
704
784
|
style?: CSSProperties;
|
|
705
785
|
className?: string;
|
|
706
|
-
dragIndicatorStyle?: CSSProperties | ((props:
|
|
707
|
-
|
|
708
|
-
indentation: number;
|
|
709
|
-
position: RelativeDropPosition;
|
|
710
|
-
}) => CSSProperties);
|
|
786
|
+
dragIndicatorStyle?: CSSProperties | ((props: DragIndicatorStyleProps) => CSSProperties);
|
|
787
|
+
testRelativeDropPosition?: RelativeDropPosition;
|
|
711
788
|
}
|
|
789
|
+
type DragIndicatorStyleProps = {
|
|
790
|
+
depth: number;
|
|
791
|
+
indentation: number;
|
|
792
|
+
position: RelativeDropPosition;
|
|
793
|
+
};
|
|
712
794
|
interface IVirtualizedList {
|
|
713
795
|
scrollToIndex(index: number): void;
|
|
714
796
|
}
|
|
715
797
|
type ListViewItemInfo = {
|
|
716
|
-
|
|
798
|
+
isDragOverlay: boolean;
|
|
799
|
+
activeDragIndex?: number;
|
|
717
800
|
};
|
|
718
801
|
type ChildrenProps = {
|
|
719
802
|
children: ReactNode;
|
|
@@ -743,7 +826,7 @@ type ListViewRootProps = {
|
|
|
743
826
|
onPress?: () => void;
|
|
744
827
|
scrollable?: boolean;
|
|
745
828
|
expandable?: boolean;
|
|
746
|
-
onMoveItem?: (sourceIndex: number,
|
|
829
|
+
onMoveItem?: (sourceIndex: number, targetIndex: number, position: RelativeDropPosition) => void;
|
|
747
830
|
indentation?: number;
|
|
748
831
|
acceptsDrop?: DropValidator;
|
|
749
832
|
pressEventName?: PressEventName;
|
|
@@ -758,6 +841,7 @@ type ListViewRootProps = {
|
|
|
758
841
|
onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
|
|
759
842
|
onDrop?: React__default.DragEventHandler<HTMLDivElement>;
|
|
760
843
|
renderEmptyState?: () => ReactNode;
|
|
844
|
+
getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
|
|
761
845
|
};
|
|
762
846
|
declare namespace ListView {
|
|
763
847
|
const RowTitle: React__default.MemoExoticComponent<({ className, children, ...props }: {
|
|
@@ -773,7 +857,7 @@ declare namespace ListView {
|
|
|
773
857
|
type RowProps<MenuItemType extends string = string> = ListViewRowProps<MenuItemType>;
|
|
774
858
|
type VirtualizedList = IVirtualizedList;
|
|
775
859
|
const DragIndicator: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
|
|
776
|
-
$relativeDropPosition
|
|
860
|
+
$relativeDropPosition?: RelativeDropPosition;
|
|
777
861
|
$gap: number;
|
|
778
862
|
$offsetLeft: number;
|
|
779
863
|
$colorScheme: ListColorScheme;
|
|
@@ -784,10 +868,11 @@ declare namespace ListView {
|
|
|
784
868
|
menuItemsCount: number;
|
|
785
869
|
sectionHeaderCount: number;
|
|
786
870
|
}) => number;
|
|
787
|
-
const
|
|
871
|
+
const normalizeTargetIndex: (index: number, position: "above" | "below") => number;
|
|
788
872
|
}
|
|
789
873
|
|
|
790
874
|
type CollectionViewType = "grid" | "list";
|
|
875
|
+
type CollectionThumbnailSize = "auto" | "custom";
|
|
791
876
|
type CollectionRef = {
|
|
792
877
|
editName: (id: string) => void;
|
|
793
878
|
};
|
|
@@ -795,12 +880,18 @@ type CollectionThumbnailProps<T> = {
|
|
|
795
880
|
item: T;
|
|
796
881
|
selected: boolean;
|
|
797
882
|
};
|
|
883
|
+
type CollectionRenderActionProps<T> = {
|
|
884
|
+
item: T;
|
|
885
|
+
selected: boolean;
|
|
886
|
+
onOpenChange: (open: boolean) => void;
|
|
887
|
+
};
|
|
798
888
|
interface CollectionProps<T, M extends string = string> {
|
|
799
889
|
className?: string;
|
|
800
890
|
items: T[];
|
|
801
891
|
getId: (item: T) => string;
|
|
802
892
|
getName: (item: T) => string;
|
|
803
893
|
getExpanded?: (item: T) => boolean | undefined;
|
|
894
|
+
getPlaceholder?: (item: T) => string;
|
|
804
895
|
/**
|
|
805
896
|
* Whether directories should be expandable.
|
|
806
897
|
* @default true
|
|
@@ -815,7 +906,7 @@ interface CollectionProps<T, M extends string = string> {
|
|
|
815
906
|
onSelectMenuItem?: (action: M, selectedItems: T[]) => void;
|
|
816
907
|
onRename?: (item: T, newName: string) => void;
|
|
817
908
|
renderThumbnail?: ({ item, selected, }: CollectionThumbnailProps<T>) => React__default.ReactNode;
|
|
818
|
-
renderAction?: "menu" | ((
|
|
909
|
+
renderAction?: "menu" | ((props: CollectionRenderActionProps<T>) => React__default.ReactNode);
|
|
819
910
|
renderDetail?: (item: T, selected: boolean) => React__default.ReactNode;
|
|
820
911
|
/** Callback when selection changes. If not provided, selection will be disabled. */
|
|
821
912
|
onSelectionChange?: (selectedItemIds: string[], event?: ListView.ClickInfo) => void;
|
|
@@ -825,13 +916,18 @@ interface CollectionProps<T, M extends string = string> {
|
|
|
825
916
|
detailPosition?: "end" | "below";
|
|
826
917
|
/** Size of the list items. Defaults to 'medium'. */
|
|
827
918
|
size?: GridViewSize;
|
|
919
|
+
/** Size of the thumbnail. Defaults to 'auto', which will be based on the size prop. */
|
|
920
|
+
thumbnailSize?: CollectionThumbnailSize;
|
|
828
921
|
/** For testing: Override the hover state with a specific item ID */
|
|
829
922
|
testHoveredId?: string;
|
|
830
923
|
/** For testing: Override the renaming state with a specific item ID */
|
|
831
924
|
testRenamingId?: string;
|
|
925
|
+
/** For testing: Override the drop indicator state with a specific item ID */
|
|
926
|
+
testShowDropIndicatorId?: string;
|
|
832
927
|
setExpanded?: (item: T, expanded: boolean) => void;
|
|
833
928
|
acceptsDrop?: ListViewRootProps["acceptsDrop"];
|
|
834
929
|
onMoveItem?: ListViewRootProps["onMoveItem"];
|
|
930
|
+
getDropTargetParentIndex?: ListViewRootProps["getDropTargetParentIndex"];
|
|
835
931
|
getDepth?: (item: T) => number;
|
|
836
932
|
onFilesDrop?: (event: React__default.DragEvent<Element>) => void;
|
|
837
933
|
getRenamable?: (item: T) => boolean;
|
|
@@ -841,9 +937,14 @@ interface CollectionProps<T, M extends string = string> {
|
|
|
841
937
|
onClickItem?: (itemId: string) => void;
|
|
842
938
|
onDoubleClickItem?: (itemId: string) => void;
|
|
843
939
|
renderEmptyState?: () => React__default.ReactElement;
|
|
940
|
+
/** @default false */
|
|
941
|
+
sortable?: boolean;
|
|
942
|
+
dragIndicatorStyle?: ListViewRowProps<M>["dragIndicatorStyle"];
|
|
844
943
|
}
|
|
845
944
|
declare const Collection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
|
|
846
945
|
|
|
946
|
+
type InputSize = "small" | "medium" | "large";
|
|
947
|
+
|
|
847
948
|
type Props$d = {
|
|
848
949
|
id?: string;
|
|
849
950
|
style?: any;
|
|
@@ -877,48 +978,18 @@ type SubmittableProps = Props$d & {
|
|
|
877
978
|
};
|
|
878
979
|
type TextInputProps = ReadOnlyProps | ControlledProps | SubmittableProps;
|
|
879
980
|
|
|
880
|
-
type LabelPosition = "inset" | "start" | "end" | "above";
|
|
881
|
-
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
882
|
-
/** @default start */
|
|
883
|
-
position?: Exclude<LabelPosition, "inset">;
|
|
884
|
-
}
|
|
885
|
-
type InsetLabelProps = {
|
|
886
|
-
/** @default medium */
|
|
887
|
-
size?: InputFieldSize;
|
|
888
|
-
/** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
|
|
889
|
-
buttonWidth?: number;
|
|
890
|
-
} & LabelHTMLAttributes<HTMLLabelElement>;
|
|
891
|
-
declare const insetLabelTextStyles = "font-sans text-label uppercase text-text-disabled leading-[19px] font-bold text-[60%] truncate pointer-events-none text-right";
|
|
892
|
-
declare const insetLabelStyles = "flex items-center absolute top-0 bottom-0 z-label";
|
|
893
|
-
declare const InsetLabel: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<{
|
|
894
|
-
/** @default medium */
|
|
895
|
-
size?: InputFieldSize;
|
|
896
|
-
/** when used with an InputField.Root and label position is inset, it will add padding to the right of the label to account for the button */
|
|
897
|
-
buttonWidth?: number;
|
|
898
|
-
} & React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
|
|
899
|
-
declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
|
|
900
|
-
|
|
901
981
|
type InputFieldSize = "small" | "medium" | "large";
|
|
902
982
|
type InputFieldContextValue = {
|
|
903
|
-
labelWidth?: number;
|
|
904
|
-
buttonWidth?: number;
|
|
905
|
-
startWidth?: number;
|
|
906
|
-
/** @default medium */
|
|
907
|
-
size: InputFieldSize;
|
|
908
983
|
isFocused: boolean;
|
|
909
984
|
onFocusChange: (isFocused: boolean) => void;
|
|
910
985
|
inputRef: ForwardedRef<HTMLInputElement>;
|
|
911
|
-
buttonRef: ForwardedRef<HTMLButtonElement>;
|
|
912
|
-
labelRef: ForwardedRef<HTMLLabelElement>;
|
|
913
986
|
startRef: ForwardedRef<HTMLSpanElement>;
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
};
|
|
987
|
+
endRef: ForwardedRef<HTMLSpanElement>;
|
|
988
|
+
endWidth?: number;
|
|
989
|
+
} & Pick<InputFieldRootProps, "endWidth" | "startWidth" | "size" | "id">;
|
|
918
990
|
declare const useInputFieldContext: () => InputFieldContextValue;
|
|
919
|
-
declare const getFieldSpacing: ({
|
|
920
|
-
|
|
921
|
-
labelWidth?: number;
|
|
991
|
+
declare const getFieldSpacing: ({ endWidth, startWidth, variant, }: {
|
|
992
|
+
endWidth?: number;
|
|
922
993
|
startWidth?: number;
|
|
923
994
|
variant?: InputFieldVariant;
|
|
924
995
|
}) => {
|
|
@@ -953,11 +1024,14 @@ declare function InputFieldNumberInput(props: InputFieldNumberInputProps): React
|
|
|
953
1024
|
interface InputFieldRootProps {
|
|
954
1025
|
id?: string;
|
|
955
1026
|
children?: ReactNode;
|
|
1027
|
+
start?: ReactNode;
|
|
1028
|
+
end?: ReactNode;
|
|
1029
|
+
label?: ReactNode;
|
|
956
1030
|
width?: number;
|
|
957
|
-
labelWidth?: number;
|
|
958
1031
|
startWidth?: number;
|
|
1032
|
+
endWidth?: number;
|
|
959
1033
|
/** @default medium */
|
|
960
|
-
size?:
|
|
1034
|
+
size?: InputSize;
|
|
961
1035
|
renderPopoverContent?: (options: {
|
|
962
1036
|
width: number;
|
|
963
1037
|
}) => ReactNode;
|
|
@@ -969,9 +1043,8 @@ interface InputFieldRootProps {
|
|
|
969
1043
|
onFocusChange?: (isFocused: boolean) => void;
|
|
970
1044
|
style?: React__default.CSSProperties;
|
|
971
1045
|
className?: string;
|
|
972
|
-
start?: ReactNode;
|
|
973
1046
|
}
|
|
974
|
-
declare function InputFieldRoot({ id
|
|
1047
|
+
declare function InputFieldRoot({ id, children, width, sideOffset, startWidth: startWidthProp, endWidth: endWidthProp, size, renderPopoverContent, onFocusChange, style, className, start, end, label: labelProp, }: InputFieldRootProps): React__default.JSX.Element;
|
|
975
1048
|
type InputFieldProps = InputFieldRootProps & InputFieldInputProps;
|
|
976
1049
|
declare const InputField: React__default.ForwardRefExoticComponent<InputFieldProps & React__default.RefAttributes<HTMLInputElement>> & {
|
|
977
1050
|
readonly Root: React__default.MemoExoticComponent<typeof InputFieldRoot>;
|
|
@@ -984,11 +1057,8 @@ declare const InputField: React__default.ForwardRefExoticComponent<InputFieldPro
|
|
|
984
1057
|
readonly NumberInput: React__default.MemoExoticComponent<typeof InputFieldNumberInput>;
|
|
985
1058
|
readonly DropdownMenu: <T extends string>(props: InputFieldDropdownProps<T>) => React__default.ReactElement | null;
|
|
986
1059
|
readonly Button: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.ButtonHTMLAttributes<HTMLButtonElement> & ButtonRootProps & {
|
|
987
|
-
buttonClassName?: string;
|
|
988
|
-
buttonStyle?: React__default.CSSProperties;
|
|
989
1060
|
variant?: "floating" | "normal";
|
|
990
1061
|
} & React__default.RefAttributes<HTMLButtonElement>>>;
|
|
991
|
-
readonly Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & React__default.RefAttributes<HTMLLabelElement>>>;
|
|
992
1062
|
readonly PrimitiveElement: ({ readOnly, disabled, className, style, ...props }: {
|
|
993
1063
|
readOnly?: boolean;
|
|
994
1064
|
disabled?: boolean;
|
|
@@ -1077,6 +1147,15 @@ declare const CommandPalette: React__default.NamedExoticComponent<{
|
|
|
1077
1147
|
testSearch?: string;
|
|
1078
1148
|
} & React__default.RefAttributes<ISearchCompletionMenu>, "onSelect" | "items" | "onHover">>;
|
|
1079
1149
|
|
|
1150
|
+
declare const UserAvatar: ({ userId, name, image }: AvatarProps) => React__default.JSX.Element;
|
|
1151
|
+
type ConnectedUsersMenuLayoutProps = {
|
|
1152
|
+
renderUsers: () => React__default.ReactNode;
|
|
1153
|
+
currentUserId?: string;
|
|
1154
|
+
launchAIAssistant?: () => void;
|
|
1155
|
+
isAssistantOpen?: boolean;
|
|
1156
|
+
};
|
|
1157
|
+
declare const ConnectedUsersMenuLayout: ({ renderUsers, currentUserId, launchAIAssistant, isAssistantOpen, }: ConnectedUsersMenuLayoutProps) => React__default.JSX.Element;
|
|
1158
|
+
|
|
1080
1159
|
interface MenuItemProps<T extends string> {
|
|
1081
1160
|
value?: T;
|
|
1082
1161
|
children: ReactNode;
|
|
@@ -1217,6 +1296,7 @@ type Props$b = {
|
|
|
1217
1296
|
textClassName?: string;
|
|
1218
1297
|
readOnly?: boolean;
|
|
1219
1298
|
onBlur?: () => void;
|
|
1299
|
+
tabIndex?: number;
|
|
1220
1300
|
/**
|
|
1221
1301
|
* If true, will render an unfocused input. This should only be used for visual regression tests.
|
|
1222
1302
|
*/
|
|
@@ -1243,6 +1323,19 @@ type FadeProps = {
|
|
|
1243
1323
|
};
|
|
1244
1324
|
declare const Fade: ({ children, direction, width, height, className, zIndex, position, }: FadeProps) => React__default.JSX.Element;
|
|
1245
1325
|
|
|
1326
|
+
declare const FileExplorerLayout: ({ children, className, ...props }: SectionProps$1) => React__default.JSX.Element;
|
|
1327
|
+
declare const FileExplorerUploadButton: ({ showUploadButton, onUpload, children, }: {
|
|
1328
|
+
showUploadButton?: boolean;
|
|
1329
|
+
onUpload?: () => void;
|
|
1330
|
+
children?: React__default.ReactNode;
|
|
1331
|
+
}) => React__default.JSX.Element;
|
|
1332
|
+
declare const FileExplorerCollection: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
|
|
1333
|
+
declare const FileExplorerDetail: ({ selected, children, }: {
|
|
1334
|
+
selected: boolean;
|
|
1335
|
+
children: React__default.ReactNode;
|
|
1336
|
+
}) => React__default.JSX.Element;
|
|
1337
|
+
declare const FileExplorerEmptyState: ({ label, ...props }: BannerProps$1) => React__default.JSX.Element;
|
|
1338
|
+
|
|
1246
1339
|
declare const SUPPORTED_IMAGE_UPLOAD_TYPES: ("image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
|
|
1247
1340
|
declare const SUPPORTED_CANVAS_UPLOAD_TYPES: ("" | "image/png" | "image/jpeg" | "image/webp" | "image/svg+xml" | "application/pdf")[];
|
|
1248
1341
|
type SupportedImageUploadType = (typeof SUPPORTED_IMAGE_UPLOAD_TYPES)[number];
|
|
@@ -1319,6 +1412,8 @@ interface ItemProps<MenuItemType extends string = string> {
|
|
|
1319
1412
|
action?: ReactNode;
|
|
1320
1413
|
onKeyDown?: (event: React__default.KeyboardEvent) => void;
|
|
1321
1414
|
hovered?: boolean;
|
|
1415
|
+
testShowInsideDropIndicator?: boolean;
|
|
1416
|
+
role?: string;
|
|
1322
1417
|
}
|
|
1323
1418
|
type GridViewContextValue = {
|
|
1324
1419
|
minColumnWidth: string;
|
|
@@ -1336,12 +1431,15 @@ interface GridViewRootProps extends Partial<GridViewContextValue> {
|
|
|
1336
1431
|
onDragEnter?: React__default.DragEventHandler<HTMLDivElement>;
|
|
1337
1432
|
onDragLeave?: React__default.DragEventHandler<HTMLDivElement>;
|
|
1338
1433
|
onDrop?: React__default.DragEventHandler<HTMLDivElement>;
|
|
1434
|
+
role?: string;
|
|
1435
|
+
renderEmptyState?: () => ReactNode;
|
|
1436
|
+
contentClassName?: string;
|
|
1339
1437
|
}
|
|
1340
1438
|
declare function GridViewSection({ children, className, renderEmptyState, }: {
|
|
1341
1439
|
children?: ReactNode;
|
|
1342
1440
|
className?: string;
|
|
1343
1441
|
renderEmptyState?: () => ReactNode;
|
|
1344
|
-
}): string | number | boolean | React__default.
|
|
1442
|
+
}): string | number | boolean | Iterable<React__default.ReactNode> | React__default.JSX.Element | null | undefined;
|
|
1345
1443
|
declare function GridViewSectionHeader({ title }: {
|
|
1346
1444
|
title: string;
|
|
1347
1445
|
}): React__default.JSX.Element;
|
|
@@ -1352,7 +1450,7 @@ declare namespace GridView {
|
|
|
1352
1450
|
const SectionHeader: React__default.MemoExoticComponent<typeof GridViewSectionHeader>;
|
|
1353
1451
|
}
|
|
1354
1452
|
|
|
1355
|
-
declare const IconButton: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "
|
|
1453
|
+
declare const IconButton: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Omit<ButtonRootProps, "size" | "flex" | "children" | "variant"> & {
|
|
1356
1454
|
iconName: IconName;
|
|
1357
1455
|
className?: string;
|
|
1358
1456
|
style?: React$1.CSSProperties;
|
|
@@ -1414,6 +1512,11 @@ type MenuViewportProps<T extends string> = {
|
|
|
1414
1512
|
};
|
|
1415
1513
|
declare const MenuViewport: <T extends string>({ items, Components, onSelect, }: MenuViewportProps<T>) => React__default.JSX.Element;
|
|
1416
1514
|
|
|
1515
|
+
type LabelPosition = "inset" | "start" | "end" | "above";
|
|
1516
|
+
interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
|
|
1517
|
+
}
|
|
1518
|
+
declare const Label: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<LabelProps & React__default.RefAttributes<HTMLLabelElement>>>;
|
|
1519
|
+
|
|
1417
1520
|
interface ContainerProps {
|
|
1418
1521
|
children: React$1.ReactNode;
|
|
1419
1522
|
renderLabel: (provided: {
|
|
@@ -1438,7 +1541,7 @@ declare const LabeledField: React__default.NamedExoticComponent<{
|
|
|
1438
1541
|
|
|
1439
1542
|
declare const List: <T, M extends string = string>(props: CollectionProps<T, M> & React__default.RefAttributes<CollectionRef>) => React__default.ReactElement | null;
|
|
1440
1543
|
|
|
1441
|
-
type ColorScheme$1 = "primary" | "icon" | "warning";
|
|
1544
|
+
type ColorScheme$1 = "primary" | "secondary" | "icon" | "warning";
|
|
1442
1545
|
type MediaThumbnailProps = {
|
|
1443
1546
|
contentType?: string;
|
|
1444
1547
|
url?: string;
|
|
@@ -1453,6 +1556,10 @@ type MediaThumbnailProps = {
|
|
|
1453
1556
|
*/
|
|
1454
1557
|
iconName?: IconName;
|
|
1455
1558
|
};
|
|
1559
|
+
declare const getThumbnailColors: (colorScheme: ColorScheme$1, selected: boolean) => {
|
|
1560
|
+
icon: string;
|
|
1561
|
+
background: string;
|
|
1562
|
+
};
|
|
1456
1563
|
declare const MediaThumbnail: React__default.NamedExoticComponent<MediaThumbnailProps>;
|
|
1457
1564
|
|
|
1458
1565
|
type MessageProps = {
|
|
@@ -1464,6 +1571,15 @@ type MessageProps = {
|
|
|
1464
1571
|
};
|
|
1465
1572
|
declare const Message: React__default.MemoExoticComponent<React__default.ForwardRefExoticComponent<MessageProps & React__default.RefAttributes<HTMLDivElement>>>;
|
|
1466
1573
|
|
|
1574
|
+
declare const Logo: React__default.ForwardRefExoticComponent<Omit<React__default.SVGProps<SVGSVGElement>, "ref"> & React__default.RefAttributes<SVGSVGElement>>;
|
|
1575
|
+
|
|
1576
|
+
declare const PipelineResultLink: ({ url }: {
|
|
1577
|
+
url: string;
|
|
1578
|
+
}) => React__default.JSX.Element;
|
|
1579
|
+
declare const PipelineResultLayout: ({ children, }: {
|
|
1580
|
+
children: React__default.ReactNode;
|
|
1581
|
+
}) => React__default.JSX.Element;
|
|
1582
|
+
|
|
1467
1583
|
type PopoverVariant = "normal" | "large";
|
|
1468
1584
|
interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content"]>, "onOpenAutoFocus" | "onCloseAutoFocus" | "onPointerDownOutside" | "onInteractOutside" | "onFocusOutside" | "side"> {
|
|
1469
1585
|
children: React__default.ReactNode;
|
|
@@ -1477,6 +1593,11 @@ interface Props$7 extends Pick<ComponentProps<(typeof PopoverPrimitive)["Content
|
|
|
1477
1593
|
showArrow?: boolean;
|
|
1478
1594
|
className?: string;
|
|
1479
1595
|
}
|
|
1596
|
+
declare const popoverStyle: {
|
|
1597
|
+
base: string;
|
|
1598
|
+
large: string;
|
|
1599
|
+
normal: string;
|
|
1600
|
+
};
|
|
1480
1601
|
declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onOpenAutoFocus, onCloseAutoFocus, onPointerDownOutside, onInteractOutside, onFocusOutside, onClickClose, className, }: Props$7): React__default.JSX.Element;
|
|
1481
1602
|
|
|
1482
1603
|
type ProgressVariant = "normal" | "warning" | "primary" | "secondary";
|
|
@@ -1491,6 +1612,28 @@ interface Props$6 {
|
|
|
1491
1612
|
}
|
|
1492
1613
|
declare const ScrollArea: React$1.NamedExoticComponent<Props$6>;
|
|
1493
1614
|
|
|
1615
|
+
type TitleIconOptions = {
|
|
1616
|
+
inlineBlockWrapper?: boolean;
|
|
1617
|
+
};
|
|
1618
|
+
type SectionProps = {
|
|
1619
|
+
children: React__default.ReactNode;
|
|
1620
|
+
title?: React__default.ReactNode;
|
|
1621
|
+
onClickTitle?: () => void;
|
|
1622
|
+
titleTextStyle?: "small" | "heading5" | "heading4" | "heading3";
|
|
1623
|
+
right?: React__default.ReactNode;
|
|
1624
|
+
hideRightWhenCollapsed?: boolean;
|
|
1625
|
+
extraPadding?: boolean;
|
|
1626
|
+
className?: string;
|
|
1627
|
+
style?: CSSProperties;
|
|
1628
|
+
titleIcon?: React__default.ReactNode;
|
|
1629
|
+
titleIconOptions?: TitleIconOptions;
|
|
1630
|
+
};
|
|
1631
|
+
type ExpandableSectionProps = {
|
|
1632
|
+
storageKey: string;
|
|
1633
|
+
initialVisibility?: "show" | "hide";
|
|
1634
|
+
};
|
|
1635
|
+
declare const Section$1: React__default.NamedExoticComponent<SectionProps & Partial<ExpandableSectionProps>>;
|
|
1636
|
+
|
|
1494
1637
|
type SegmentedControlColorScheme = "primary" | "secondary";
|
|
1495
1638
|
interface SegmentedControlProps<T extends string> {
|
|
1496
1639
|
id?: string;
|
|
@@ -1621,9 +1764,7 @@ declare namespace TreeView {
|
|
|
1621
1764
|
children: ReactNode;
|
|
1622
1765
|
} | {
|
|
1623
1766
|
data: T[];
|
|
1624
|
-
renderItem: (item: T, index: number, info:
|
|
1625
|
-
isDragging: boolean;
|
|
1626
|
-
}) => ReactNode;
|
|
1767
|
+
renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
|
|
1627
1768
|
keyExtractor: (item: T, index: number) => string;
|
|
1628
1769
|
sortable?: boolean;
|
|
1629
1770
|
virtualized?: _noya_app_noya_geometry.Size;
|
|
@@ -1632,7 +1773,7 @@ declare namespace TreeView {
|
|
|
1632
1773
|
className?: string;
|
|
1633
1774
|
children: React__default.ReactNode;
|
|
1634
1775
|
} & React__default.HTMLAttributes<HTMLSpanElement>) => React__default.JSX.Element>;
|
|
1635
|
-
const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, className, }: EditableRowProps) => React__default.JSX.Element>;
|
|
1776
|
+
const EditableRowTitle: React__default.MemoExoticComponent<({ value, onSubmitEditing, autoFocus, placeholder, className, onKeyDown, }: EditableRowProps) => React__default.JSX.Element>;
|
|
1636
1777
|
const Row: <MenuItemType extends string>(props: ListView.RowProps<MenuItemType> & TreeRowBaseProps & React__default.RefAttributes<HTMLLIElement>) => React__default.ReactElement | null;
|
|
1637
1778
|
type ClickInfo = ListView.ClickInfo;
|
|
1638
1779
|
type RowProps<MenuItemType extends string> = TreeViewRowProps<MenuItemType>;
|
|
@@ -1869,7 +2010,13 @@ declare const mediaQuery: {
|
|
|
1869
2010
|
xlarge: string;
|
|
1870
2011
|
};
|
|
1871
2012
|
|
|
1872
|
-
|
|
2013
|
+
type ClassNameItem = string | number | BigInt | boolean | null | undefined;
|
|
2014
|
+
type Category = "text" | "color" | "font" | "flex";
|
|
2015
|
+
type Options = {
|
|
2016
|
+
categories?: Category[];
|
|
2017
|
+
};
|
|
2018
|
+
declare function cx(...args: ClassNameItem[]): string;
|
|
2019
|
+
declare function mergeConflictingClassNames(classNames: ClassNameItem | ClassNameItem[], options?: Options): string;
|
|
1873
2020
|
|
|
1874
2021
|
type Optional<T> = T | false | null | undefined;
|
|
1875
2022
|
type MenuConfig<T extends string> = Optional<Optional<MenuItem<T>>[]>[];
|
|
@@ -1920,6 +2067,33 @@ declare class ComboboxState<T extends string> {
|
|
|
1920
2067
|
declare function getNextIndex<T>(items: T[], currentIndex: number, direction: "next" | "previous", isDisabled: (item: T) => boolean): number;
|
|
1921
2068
|
declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
|
|
1922
2069
|
|
|
2070
|
+
type MoveOptions = {
|
|
2071
|
+
indexPaths: number[][];
|
|
2072
|
+
to: number[];
|
|
2073
|
+
};
|
|
2074
|
+
type MoveTreeItemOptions<T> = {
|
|
2075
|
+
root: T;
|
|
2076
|
+
move: (root: T, options: MoveOptions) => T;
|
|
2077
|
+
position: RelativeDropPosition;
|
|
2078
|
+
sourceIndexPath: number[];
|
|
2079
|
+
targetIndexPath: number[];
|
|
2080
|
+
};
|
|
2081
|
+
declare function moveTreeItem<T>({ root, move, position, sourceIndexPath, targetIndexPath, }: MoveTreeItemOptions<T>): T;
|
|
2082
|
+
type AcceptsDropOptions = {
|
|
2083
|
+
sourceIndexPath: number[];
|
|
2084
|
+
targetIndexPath: number[];
|
|
2085
|
+
position: RelativeDropPosition;
|
|
2086
|
+
/**
|
|
2087
|
+
* Whether to allow dropping the source item within the same parent as the target item.
|
|
2088
|
+
*/
|
|
2089
|
+
allowSiblings: boolean;
|
|
2090
|
+
/**
|
|
2091
|
+
* Whether to allow dropping the source item within itself or one of its descendants.
|
|
2092
|
+
*/
|
|
2093
|
+
allowRecursion: boolean;
|
|
2094
|
+
};
|
|
2095
|
+
declare function acceptsDrop({ sourceIndexPath, targetIndexPath, position, allowSiblings, allowRecursion, }: AcceptsDropOptions): boolean;
|
|
2096
|
+
|
|
1923
2097
|
/**
|
|
1924
2098
|
* Updates the selection state based on user interaction.
|
|
1925
2099
|
* Handles single selection, multi-selection with meta/ctrl, and range selection with shift.
|
|
@@ -2019,4 +2193,4 @@ declare function ToolbarMenu<T extends string>({ items, onSelectMenuItem, }: {
|
|
|
2019
2193
|
onSelectMenuItem?: (value: T) => void;
|
|
2020
2194
|
}): React__default.JSX.Element;
|
|
2021
2195
|
|
|
2022
|
-
export { ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionThumbnailProps, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize,
|
|
2196
|
+
export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDropOptions, ActionMenu, ActivityIndicator, AnimatePresence, type AnimatePresenceProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, type BaseToolbarProps, Body, BreadcrumbText, Button, type ButtonRootProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, CONTENT_AREA_ID, Checkbox$1 as Checkbox, Chip, type ChipProps, Collection, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, Combobox, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragIndicatorStyleProps, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownRootProps, EDITOR_PANEL_GROUP_ID, type EditableRowProps, EditableText, type EditableTextRef, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FillInputField, FillPreviewBackground, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, GradientPicker, Grid, GridView, type GridViewSize, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, IconButton, type IconName, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, InspectorPrimitives, Italic, KeyboardShortcut, LEFT_SIDEBAR_ID, Label, LabelContext, type LabelPosition, LabelPositionContext, type LabelPositionContextValue, type LabelProps, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, List, type ListRowMarginType, type ListRowPosition, ListView, type ListViewItemInfo, type ListViewRootProps, type ListViewRowProps, Logo, type MatchRange, MediaThumbnail, type MenuComponents, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, MenuViewport, Message, type MessageProps, type MoveTreeItemOptions, type NonSelectableMenuItem, type OptionModeOnlyProps, type OptionModeProps, type Optional, type PanelLayoutState, PatternPreviewBackground, type PercentageSidebarOptions, PipelineResultLayout, PipelineResultLink, Popover, Progress, RIGHT_SIDEBAR_ID, type RelativeDropPosition, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, SearchCompletionMenu, Section$1 as Section, SectionHeader$1 as SectionHeader, type SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, type SeparatorItem, type SetNumberMode, type SideOptions, type SideType, type SidebarRef, type SketchPattern, Slider, Small, Sortable, type SortableItemContextProps, Spacer, type StringModeOnlyProps, type StringModeProps, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Text$1 as Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, Toolbar, ToolbarMenu, type ToolbarProps, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPointer, type UserPointerProps, WorkspaceLayout, type WorkspaceLayoutProps, type WorkspaceLayoutRef, acceptsDrop, colorForStringValues, colorFromString, createSectionedMenu, cssVars, cx, defaultAcceptsDrop, fuzzyFilter, fuzzyScore, fuzzyTokenize, getFieldSpacing, getGradientBackground, getGridSize, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getThumbnailColors, isMenuItemSectionHeader, isNonSelectableMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, labeledFieldStyles, mediaQuery, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, popoverStyle, renderIcon, rgbaToSketchColor, separator, size, sketchColorToHex, sketchColorToRgba, sketchColorToRgbaString, styles, textStyles, updateSelection, useAutoResize, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelPosition, useLabelWidth, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, usePlatform, usePlatformModKey, usePreservePanelSize, useTheme, validateDropIndicator, withSeparatorElements };
|