@noya-app/noya-designsystem 0.1.93 → 0.1.95
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 +20 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +167 -95
- package/dist/index.d.ts +167 -95
- package/dist/index.js +12689 -12005
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +13912 -13233
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
- package/src/__tests__/SharedDragProvider.test.ts +72 -29
- package/src/__tests__/fuzzyScorer.test.ts +49 -1
- package/src/components/Button.tsx +1 -1
- package/src/components/Combobox.tsx +23 -3
- package/src/components/ComboboxMenu.tsx +32 -15
- package/src/components/ContextMenu.tsx +26 -7
- package/src/components/DimensionInput.tsx +12 -2
- package/src/components/DropdownMenu.tsx +37 -9
- package/src/components/InputField.tsx +1 -0
- package/src/components/InspectorContainer.tsx +16 -1
- package/src/components/List.tsx +25 -3
- package/src/components/Popover.tsx +13 -1
- package/src/components/Section.tsx +35 -11
- package/src/components/SegmentedControl.tsx +14 -4
- package/src/components/Toast.tsx +2 -2
- package/src/components/Toolbar.tsx +16 -1
- package/src/components/ToolbarItems.tsx +322 -0
- package/src/components/Tooltip.tsx +8 -1
- package/src/components/__tests__/DropdownMenu.test.ts +19 -0
- package/src/components/__tests__/Toast.test.tsx +138 -0
- package/src/components/__tests__/ToolbarItems.test.tsx +205 -0
- package/src/components/internal/Menu.tsx +4 -1
- package/src/components/internal/TextInput.tsx +43 -2
- package/src/components/internal/__tests__/TextInput.test.tsx +77 -0
- package/src/components/listView/ListViewEditableRowTitle.tsx +37 -1
- package/src/components/listView/ListViewRow.tsx +3 -0
- package/src/components/listView/__tests__/ListViewEditableRowTitle.test.tsx +69 -0
- package/src/components/sorting/Sortable.tsx +4 -1
- package/src/index.tsx +0 -1
- package/src/utils/combobox.ts +22 -5
- package/src/utils/fuzzyScorer.ts +71 -0
- package/tailwind.config.ts +7 -0
- package/src/components/InspectorPrimitives.tsx +0 -188
package/dist/index.d.mts
CHANGED
|
@@ -10,7 +10,7 @@ import { Point as Point$1, Insets, Size, AffineTransform, Rect } from '@noya-app
|
|
|
10
10
|
import { Property } from 'csstype';
|
|
11
11
|
import * as _noya_app_noya_designsystem from '@noya-app/noya-designsystem';
|
|
12
12
|
import { SectionProps as SectionProps$1, BannerProps as BannerProps$1, IconName as IconName$1, OptionModeProps as OptionModeProps$1 } from '@noya-app/noya-designsystem';
|
|
13
|
-
import * as
|
|
13
|
+
import * as _base_ui_react from '@base-ui/react';
|
|
14
14
|
import { Menu } from '@base-ui/react/menu';
|
|
15
15
|
import { Gemoji } from 'gemoji';
|
|
16
16
|
export { Gemoji } from 'gemoji';
|
|
@@ -33,6 +33,16 @@ declare function fuzzyFilter({ items, query, scoreThreshold, }: {
|
|
|
33
33
|
query: string;
|
|
34
34
|
scoreThreshold?: number;
|
|
35
35
|
}): IScoredItem[];
|
|
36
|
+
/**
|
|
37
|
+
* Word-boundary filter for name-like lists (e.g. font families): ranks
|
|
38
|
+
* exact > prefix > word-start matches and only falls back to substring
|
|
39
|
+
* matches when nothing matches at a word boundary. Prevents queries like
|
|
40
|
+
* "Play" from surfacing every "* Display" family via mid-word substrings.
|
|
41
|
+
*/
|
|
42
|
+
declare function wordPrefixFilter({ items, query, }: {
|
|
43
|
+
items: string[];
|
|
44
|
+
query: string;
|
|
45
|
+
}): IScoredItem[];
|
|
36
46
|
type IToken = {
|
|
37
47
|
type: "text";
|
|
38
48
|
text: string;
|
|
@@ -789,7 +799,7 @@ type TextProps = {
|
|
|
789
799
|
onKeyDown?: (event: React__default.KeyboardEvent<HTMLSpanElement>) => void;
|
|
790
800
|
tabIndex?: number;
|
|
791
801
|
};
|
|
792
|
-
declare const Text
|
|
802
|
+
declare const Text: React__default.ForwardRefExoticComponent<TextProps & React__default.RefAttributes<HTMLElement>>;
|
|
793
803
|
type PresetProps = Omit<TextProps, "variant">;
|
|
794
804
|
declare const Heading1: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
|
|
795
805
|
declare const Heading2: React__default.ForwardRefExoticComponent<PresetProps & React__default.RefAttributes<HTMLElement>>;
|
|
@@ -842,7 +852,7 @@ declare const Card: React__default.ForwardRefExoticComponent<CardProps & React__
|
|
|
842
852
|
interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "type"> {
|
|
843
853
|
colorScheme?: "primary" | "secondary";
|
|
844
854
|
}
|
|
845
|
-
declare const Checkbox
|
|
855
|
+
declare const Checkbox: React$1.NamedExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
846
856
|
|
|
847
857
|
type ChipColorScheme = "primary" | "secondary" | "info" | "error";
|
|
848
858
|
type ChipSize = "small" | "medium" | "large" | "xl";
|
|
@@ -1260,6 +1270,61 @@ type ColorSwatchControlProps = {
|
|
|
1260
1270
|
};
|
|
1261
1271
|
declare function ColorSwatchControl(props: ColorSwatchControlProps): React__default.JSX.Element;
|
|
1262
1272
|
|
|
1273
|
+
/**
|
|
1274
|
+
* How a combobox matches its filter text against item titles:
|
|
1275
|
+
* - "fuzzy": vscode-style fuzzy scoring (default)
|
|
1276
|
+
* - "wordPrefix": word-boundary prefixes ranked exact > prefix > word-start,
|
|
1277
|
+
* substring only as a fallback (right for name lists like font families)
|
|
1278
|
+
*/
|
|
1279
|
+
type ComboboxFilterStrategy = "fuzzy" | "wordPrefix";
|
|
1280
|
+
type ComboboxStateSnapshot<T extends string> = {
|
|
1281
|
+
filter: string;
|
|
1282
|
+
selectedIndex: number;
|
|
1283
|
+
filteredItems: ScoredMenuItem<T>[];
|
|
1284
|
+
lastSubmittedValue: {
|
|
1285
|
+
filter: string;
|
|
1286
|
+
itemName: string;
|
|
1287
|
+
};
|
|
1288
|
+
};
|
|
1289
|
+
declare class ComboboxState<T extends string> {
|
|
1290
|
+
private filter;
|
|
1291
|
+
private selectedIndex;
|
|
1292
|
+
private items;
|
|
1293
|
+
private lastSubmittedValue;
|
|
1294
|
+
private subscribers;
|
|
1295
|
+
private version;
|
|
1296
|
+
private _cachedSnapshot;
|
|
1297
|
+
private filterStrategy;
|
|
1298
|
+
constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean, filterStrategy?: ComboboxFilterStrategy);
|
|
1299
|
+
subscribe: (listener: () => void) => (() => void);
|
|
1300
|
+
private notifyChange;
|
|
1301
|
+
private getFilteredItems;
|
|
1302
|
+
getSnapshot: () => ComboboxStateSnapshot<T>;
|
|
1303
|
+
setItems(items: MenuItem<T>[]): void;
|
|
1304
|
+
setFilter(filter: string): void;
|
|
1305
|
+
moveSelection(direction: "up" | "down"): void;
|
|
1306
|
+
selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
|
|
1307
|
+
restoreLastSubmittedValue(): void;
|
|
1308
|
+
reset(newFilter?: string, options?: {
|
|
1309
|
+
selectedItemTitle?: string;
|
|
1310
|
+
selectedItemValue?: string | number;
|
|
1311
|
+
}): void;
|
|
1312
|
+
getSelectedItem(): ScoredMenuItem<T> | undefined;
|
|
1313
|
+
getTypeaheadValue(): string | undefined;
|
|
1314
|
+
setSelectedIndex(index: number): void;
|
|
1315
|
+
submitArbitraryFilter(filter: string): void;
|
|
1316
|
+
}
|
|
1317
|
+
declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string, options?: {
|
|
1318
|
+
filterStrategy?: ComboboxFilterStrategy;
|
|
1319
|
+
}): ScoredMenuItem<T>[];
|
|
1320
|
+
declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
|
|
1321
|
+
items: T[];
|
|
1322
|
+
currentIndex: number;
|
|
1323
|
+
direction: "next" | "previous";
|
|
1324
|
+
isDisabled: (item: T) => boolean;
|
|
1325
|
+
}): number;
|
|
1326
|
+
declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
|
|
1327
|
+
|
|
1263
1328
|
type InputSize = "small" | "medium" | "large";
|
|
1264
1329
|
|
|
1265
1330
|
type Props$a = {
|
|
@@ -1408,6 +1473,13 @@ type BaseComboboxProps<T extends string> = {
|
|
|
1408
1473
|
tabBehavior?: "autocomplete" | "select";
|
|
1409
1474
|
openMenuBehavior?: "showAllItems" | "showFilteredItems";
|
|
1410
1475
|
iconPosition?: "left" | "right";
|
|
1476
|
+
/** Wraps each menu item's label (receives the default highlighted content) */
|
|
1477
|
+
renderItemContent?: (item: ScoredMenuItem<T>, defaultContent: React__default.ReactNode) => React__default.ReactNode;
|
|
1478
|
+
/**
|
|
1479
|
+
* How filter text matches item titles ("fuzzy" default; "wordPrefix" for
|
|
1480
|
+
* name lists). Fixed at mount.
|
|
1481
|
+
*/
|
|
1482
|
+
filterStrategy?: ComboboxFilterStrategy;
|
|
1411
1483
|
};
|
|
1412
1484
|
type StringModeOnlyProps = {
|
|
1413
1485
|
mode: "string";
|
|
@@ -1451,6 +1523,12 @@ interface ComboboxMenuProps<T extends string> {
|
|
|
1451
1523
|
itemHeight?: number;
|
|
1452
1524
|
/** Optional per-item height resolver */
|
|
1453
1525
|
getRowHeightForItem?: (item: ScoredMenuItem<T>, index: number) => number;
|
|
1526
|
+
/**
|
|
1527
|
+
* Wraps an item's rendered label (e.g. to style a font family's row in its
|
|
1528
|
+
* own typeface). Receives the default label content, which includes the
|
|
1529
|
+
* fuzzy-match highlighting.
|
|
1530
|
+
*/
|
|
1531
|
+
renderItemContent?: (item: ScoredMenuItem<T>, defaultContent: React__default.ReactNode) => React__default.ReactNode;
|
|
1454
1532
|
}
|
|
1455
1533
|
declare const ComboboxMenu: <T extends string>(props: ComboboxMenuProps<T> & React__default.RefAttributes<IVirtualizedList>) => React__default.ReactElement<any> | null;
|
|
1456
1534
|
|
|
@@ -1503,6 +1581,8 @@ interface MenuProps<T extends string> {
|
|
|
1503
1581
|
onSelect: (value: T) => void;
|
|
1504
1582
|
shouldBindKeyboardShortcuts?: boolean;
|
|
1505
1583
|
onOpenChange?: (open: boolean) => void;
|
|
1584
|
+
/** Extra styles (e.g. CSS variable overrides) for the menu surface. */
|
|
1585
|
+
contentStyle?: React__default.CSSProperties;
|
|
1506
1586
|
}
|
|
1507
1587
|
declare const ContextMenu: <T extends string>(props: MenuProps<T>) => React__default.ReactElement<any> | null;
|
|
1508
1588
|
|
|
@@ -1774,6 +1854,13 @@ type DropdownMenuProps<T extends string> = Omit<MenuProps<T>, "children"> & {
|
|
|
1774
1854
|
contentStyle?: React__default.CSSProperties;
|
|
1775
1855
|
modal?: boolean;
|
|
1776
1856
|
} & Pick<ComponentProps<typeof Menu.Positioner>, "side" | "sideOffset" | "align" | "alignOffset" | "collisionPadding">;
|
|
1857
|
+
declare function getCheckedMenuItemAccessibilityProps(checked: boolean | undefined): {
|
|
1858
|
+
readonly role?: undefined;
|
|
1859
|
+
readonly "aria-checked"?: undefined;
|
|
1860
|
+
} | {
|
|
1861
|
+
readonly role: "menuitemcheckbox";
|
|
1862
|
+
readonly "aria-checked": boolean;
|
|
1863
|
+
};
|
|
1777
1864
|
declare const DropdownMenu: <T extends string>(props: Omit<MenuProps<T>, "children"> & {
|
|
1778
1865
|
children?: ReactNode | ((props: {
|
|
1779
1866
|
open: boolean;
|
|
@@ -1784,7 +1871,7 @@ declare const DropdownMenu: <T extends string>(props: Omit<MenuProps<T>, "childr
|
|
|
1784
1871
|
emptyState?: React__default.ReactNode;
|
|
1785
1872
|
contentStyle?: React__default.CSSProperties;
|
|
1786
1873
|
modal?: boolean;
|
|
1787
|
-
} & Pick<
|
|
1874
|
+
} & Pick<Omit<_base_ui_react.ContextMenuPositionerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>, "sideOffset" | "side" | "align" | "alignOffset" | "collisionPadding"> & React__default.RefAttributes<HTMLElement>) => React__default.ReactElement<any> | null;
|
|
1788
1875
|
|
|
1789
1876
|
type RenderPreviewProps = {
|
|
1790
1877
|
children: string;
|
|
@@ -2005,6 +2092,9 @@ declare const InspectorContainer: React__default.NamedExoticComponent<{
|
|
|
2005
2092
|
header?: React__default.ReactNode;
|
|
2006
2093
|
children?: React__default.ReactNode;
|
|
2007
2094
|
fallback?: React__default.ReactNode;
|
|
2095
|
+
/** Pinned to the bottom edge when content is short; scrolls after the
|
|
2096
|
+
* content when it overflows (pushed, not sticky). */
|
|
2097
|
+
footer?: React__default.ReactNode;
|
|
2008
2098
|
showDividers?: boolean;
|
|
2009
2099
|
id?: string;
|
|
2010
2100
|
className?: string;
|
|
@@ -2153,19 +2243,28 @@ interface Props$7 {
|
|
|
2153
2243
|
style?: React__default.CSSProperties;
|
|
2154
2244
|
portalContainer?: HTMLElement | null;
|
|
2155
2245
|
side?: "top" | "bottom" | "left" | "right";
|
|
2246
|
+
/** Cross-axis alignment against the anchor. @default "center" */
|
|
2247
|
+
align?: "start" | "center" | "end";
|
|
2156
2248
|
initialFocus?: React__default.ComponentProps<typeof Popover$1.Popup>["initialFocus"];
|
|
2157
2249
|
/**
|
|
2158
2250
|
* Called when an interaction outside the popover occurs.
|
|
2159
2251
|
* Return false to prevent the popover from closing.
|
|
2160
2252
|
*/
|
|
2161
2253
|
shouldCloseOnInteractOutside?: (event: PointerEvent) => boolean;
|
|
2254
|
+
/**
|
|
2255
|
+
* Whether the trigger ultimately renders a native `<button>`. Pass false
|
|
2256
|
+
* for non-button triggers (e.g. an input container) so Base UI doesn't log
|
|
2257
|
+
* a nativeButton mismatch console error.
|
|
2258
|
+
* @default true
|
|
2259
|
+
*/
|
|
2260
|
+
nativeButtonTrigger?: boolean;
|
|
2162
2261
|
}
|
|
2163
2262
|
declare const popoverStyle: {
|
|
2164
2263
|
base: string;
|
|
2165
2264
|
large: string;
|
|
2166
2265
|
normal: string;
|
|
2167
2266
|
};
|
|
2168
|
-
declare function Popover({ children, trigger, variant, closable, open, side, sideOffset, showArrow, onOpenChange, onClickClose, className, portalContainer, style, initialFocus, shouldCloseOnInteractOutside, }: Props$7): React__default.JSX.Element;
|
|
2267
|
+
declare function Popover({ children, trigger, variant, closable, open, side, align, sideOffset, showArrow, onOpenChange, onClickClose, className, portalContainer, style, initialFocus, shouldCloseOnInteractOutside, nativeButtonTrigger, }: Props$7): React__default.JSX.Element;
|
|
2169
2268
|
|
|
2170
2269
|
type ColorScheme$3 = "normal" | "warning" | "primary" | "secondary";
|
|
2171
2270
|
declare function Progress({ value, colorScheme, color, className, style: styleProp, }: {
|
|
@@ -2241,7 +2340,7 @@ type SectionHeaderProps = {
|
|
|
2241
2340
|
right?: React__default.ReactNode;
|
|
2242
2341
|
headerSeparator?: "space" | "dot";
|
|
2243
2342
|
};
|
|
2244
|
-
declare function SectionHeader
|
|
2343
|
+
declare function SectionHeader({ style, className, title, titleIcon, right, headerSeparator, titleTextStyle, titleClassName, onClickTitle, }: SectionHeaderProps): React__default.JSX.Element;
|
|
2245
2344
|
type SectionProps = {
|
|
2246
2345
|
children: React__default.ReactNode;
|
|
2247
2346
|
hideRightWhenCollapsed?: boolean;
|
|
@@ -2254,7 +2353,7 @@ type ExpandableSectionProps = {
|
|
|
2254
2353
|
storageKey: string;
|
|
2255
2354
|
initialVisibility?: "show" | "hide";
|
|
2256
2355
|
};
|
|
2257
|
-
declare const Section
|
|
2356
|
+
declare const Section: React__default.NamedExoticComponent<{
|
|
2258
2357
|
children: React__default.ReactNode;
|
|
2259
2358
|
hideRightWhenCollapsed?: boolean;
|
|
2260
2359
|
extraPadding?: boolean;
|
|
@@ -2263,7 +2362,11 @@ declare const Section$1: React__default.NamedExoticComponent<{
|
|
|
2263
2362
|
headerStyle?: CSSProperties;
|
|
2264
2363
|
} & Omit<SectionHeaderProps, "className" | "style"> & Partial<ExpandableSectionProps>>;
|
|
2265
2364
|
|
|
2266
|
-
|
|
2365
|
+
/**
|
|
2366
|
+
* "primaryTint" is Figma-UI3-style: a light primary-tinted active segment
|
|
2367
|
+
* with a primary-colored glyph, instead of the solid primary fill.
|
|
2368
|
+
*/
|
|
2369
|
+
type SegmentedControlColorScheme = "primary" | "secondary" | "primaryTint";
|
|
2267
2370
|
type SegmentedControlVariant = "default" | "tabs" | "buttons";
|
|
2268
2371
|
type SegmentedControlItemWidth = "auto" | "equal" | "fit";
|
|
2269
2372
|
interface SegmentedControlProps<T extends string> {
|
|
@@ -2546,6 +2649,9 @@ interface Props$1 {
|
|
|
2546
2649
|
sideOffset?: number;
|
|
2547
2650
|
side?: "top" | "bottom" | "left" | "right";
|
|
2548
2651
|
portalContainer?: HTMLElement | null;
|
|
2652
|
+
/** Overrides the popup chrome entirely (e.g. a dark chip over a dark
|
|
2653
|
+
* toolbar). The default light surface is used when omitted. */
|
|
2654
|
+
contentClassName?: string;
|
|
2549
2655
|
}
|
|
2550
2656
|
declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
|
|
2551
2657
|
|
|
@@ -2970,51 +3076,6 @@ declare const colorForStringValues: Record<string, string>;
|
|
|
2970
3076
|
*/
|
|
2971
3077
|
declare function colorFromString(str: string): string;
|
|
2972
3078
|
|
|
2973
|
-
type ComboboxStateSnapshot<T extends string> = {
|
|
2974
|
-
filter: string;
|
|
2975
|
-
selectedIndex: number;
|
|
2976
|
-
filteredItems: ScoredMenuItem<T>[];
|
|
2977
|
-
lastSubmittedValue: {
|
|
2978
|
-
filter: string;
|
|
2979
|
-
itemName: string;
|
|
2980
|
-
};
|
|
2981
|
-
};
|
|
2982
|
-
declare class ComboboxState<T extends string> {
|
|
2983
|
-
private filter;
|
|
2984
|
-
private selectedIndex;
|
|
2985
|
-
private items;
|
|
2986
|
-
private lastSubmittedValue;
|
|
2987
|
-
private subscribers;
|
|
2988
|
-
private version;
|
|
2989
|
-
private _cachedSnapshot;
|
|
2990
|
-
constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean);
|
|
2991
|
-
subscribe: (listener: () => void) => (() => void);
|
|
2992
|
-
private notifyChange;
|
|
2993
|
-
private getFilteredItems;
|
|
2994
|
-
getSnapshot: () => ComboboxStateSnapshot<T>;
|
|
2995
|
-
setItems(items: MenuItem<T>[]): void;
|
|
2996
|
-
setFilter(filter: string): void;
|
|
2997
|
-
moveSelection(direction: "up" | "down"): void;
|
|
2998
|
-
selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
|
|
2999
|
-
restoreLastSubmittedValue(): void;
|
|
3000
|
-
reset(newFilter?: string, options?: {
|
|
3001
|
-
selectedItemTitle?: string;
|
|
3002
|
-
selectedItemValue?: string | number;
|
|
3003
|
-
}): void;
|
|
3004
|
-
getSelectedItem(): ScoredMenuItem<T> | undefined;
|
|
3005
|
-
getTypeaheadValue(): string | undefined;
|
|
3006
|
-
setSelectedIndex(index: number): void;
|
|
3007
|
-
submitArbitraryFilter(filter: string): void;
|
|
3008
|
-
}
|
|
3009
|
-
declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string): ScoredMenuItem<T>[];
|
|
3010
|
-
declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
|
|
3011
|
-
items: T[];
|
|
3012
|
-
currentIndex: number;
|
|
3013
|
-
direction: "next" | "previous";
|
|
3014
|
-
isDisabled: (item: T) => boolean;
|
|
3015
|
-
}): number;
|
|
3016
|
-
declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
|
|
3017
|
-
|
|
3018
3079
|
declare const editableBlockStyles: (viewType?: "editable" | "readOnly" | "preview") => string | undefined;
|
|
3019
3080
|
|
|
3020
3081
|
type MoveOptions = {
|
|
@@ -3082,49 +3143,11 @@ interface Props {
|
|
|
3082
3143
|
placeholder?: string;
|
|
3083
3144
|
disabled?: boolean;
|
|
3084
3145
|
trigger?: "change" | "submit";
|
|
3146
|
+
/** Unit suffix rendered inside the field's right edge (e.g. "px", "%"). */
|
|
3147
|
+
suffix?: string;
|
|
3085
3148
|
}
|
|
3086
3149
|
declare const DimensionInput: React$1.NamedExoticComponent<Props>;
|
|
3087
3150
|
|
|
3088
|
-
declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3089
|
-
declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3090
|
-
type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
|
|
3091
|
-
declare const Title: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
|
|
3092
|
-
$textStyle?: TitleTextStyle;
|
|
3093
|
-
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
3094
|
-
declare const Row: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3095
|
-
declare const Column: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3096
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>>;
|
|
3097
|
-
declare const Text: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
3098
|
-
declare const VerticalSeparator: () => React__default.JSX.Element;
|
|
3099
|
-
declare const HorizontalSeparator: () => React__default.JSX.Element;
|
|
3100
|
-
declare const RowLabel: React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & {
|
|
3101
|
-
$textStyle?: TitleTextStyle | "label";
|
|
3102
|
-
} & React__default.RefAttributes<HTMLLabelElement>>;
|
|
3103
|
-
interface LabeledRowProps {
|
|
3104
|
-
id?: string;
|
|
3105
|
-
children: ReactNode;
|
|
3106
|
-
label: ReactNode;
|
|
3107
|
-
labelTextStyle?: TitleTextStyle;
|
|
3108
|
-
right?: ReactNode;
|
|
3109
|
-
className?: string;
|
|
3110
|
-
}
|
|
3111
|
-
declare const LabeledRow: React__default.NamedExoticComponent<LabeledRowProps>;
|
|
3112
|
-
|
|
3113
|
-
declare const InspectorPrimitives_Checkbox: typeof Checkbox;
|
|
3114
|
-
declare const InspectorPrimitives_Column: typeof Column;
|
|
3115
|
-
declare const InspectorPrimitives_HorizontalSeparator: typeof HorizontalSeparator;
|
|
3116
|
-
declare const InspectorPrimitives_LabeledRow: typeof LabeledRow;
|
|
3117
|
-
declare const InspectorPrimitives_Row: typeof Row;
|
|
3118
|
-
declare const InspectorPrimitives_RowLabel: typeof RowLabel;
|
|
3119
|
-
declare const InspectorPrimitives_Section: typeof Section;
|
|
3120
|
-
declare const InspectorPrimitives_SectionHeader: typeof SectionHeader;
|
|
3121
|
-
declare const InspectorPrimitives_Text: typeof Text;
|
|
3122
|
-
declare const InspectorPrimitives_Title: typeof Title;
|
|
3123
|
-
declare const InspectorPrimitives_VerticalSeparator: typeof VerticalSeparator;
|
|
3124
|
-
declare namespace InspectorPrimitives {
|
|
3125
|
-
export { InspectorPrimitives_Checkbox as Checkbox, InspectorPrimitives_Column as Column, InspectorPrimitives_HorizontalSeparator as HorizontalSeparator, InspectorPrimitives_LabeledRow as LabeledRow, InspectorPrimitives_Row as Row, InspectorPrimitives_RowLabel as RowLabel, InspectorPrimitives_Section as Section, InspectorPrimitives_SectionHeader as SectionHeader, InspectorPrimitives_Text as Text, InspectorPrimitives_Title as Title, InspectorPrimitives_VerticalSeparator as VerticalSeparator };
|
|
3126
|
-
}
|
|
3127
|
-
|
|
3128
3151
|
interface BaseToolbarProps {
|
|
3129
3152
|
children?: React__default.ReactNode;
|
|
3130
3153
|
left?: React__default.ReactNode;
|
|
@@ -3226,6 +3249,50 @@ interface AppToolbarProps<T extends string = string> {
|
|
|
3226
3249
|
declare function useBindKeyboardShortcutsForMenuItems<T extends string>(items: MenuItem<T>[], onSelectMenuItem?: (value: T) => void): void;
|
|
3227
3250
|
declare function AppToolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, dividerOverflow, }: AppToolbarProps<T>): React__default.JSX.Element;
|
|
3228
3251
|
|
|
3252
|
+
type ToolbarSeparatorItem = {
|
|
3253
|
+
type: "separator";
|
|
3254
|
+
};
|
|
3255
|
+
/** A split-button slot: the primary button activates the group's
|
|
3256
|
+
* representative tool and the adjacent chevron opens a flyout menu listing
|
|
3257
|
+
* every item in the group. */
|
|
3258
|
+
type ToolbarGroupItem<T extends string> = {
|
|
3259
|
+
type: "group";
|
|
3260
|
+
id: string;
|
|
3261
|
+
items: SelectableMenuItem<T>[];
|
|
3262
|
+
};
|
|
3263
|
+
/** A button (icon or text) that opens a Popover with arbitrary content. */
|
|
3264
|
+
type ToolbarPopoverItem = {
|
|
3265
|
+
type: "popover";
|
|
3266
|
+
id: string;
|
|
3267
|
+
title: ReactNode;
|
|
3268
|
+
icon?: MenuItemIcon;
|
|
3269
|
+
content: ReactNode | ((close: () => void) => ReactNode);
|
|
3270
|
+
};
|
|
3271
|
+
/**
|
|
3272
|
+
* A declarative item for `ToolbarItems` (`Toolbar.Items`). Selectable items
|
|
3273
|
+
* reuse the menu system's `SelectableMenuItem`, so the same definitions can
|
|
3274
|
+
* feed a toolbar, a dropdown, or a context menu.
|
|
3275
|
+
*/
|
|
3276
|
+
type ToolbarItem<T extends string> = SelectableMenuItem<T> | ToolbarSeparatorItem | ToolbarGroupItem<T> | ToolbarPopoverItem;
|
|
3277
|
+
type PopupSide = "top" | "bottom" | "left" | "right";
|
|
3278
|
+
interface ToolbarItemsProps<T extends string> {
|
|
3279
|
+
items: ToolbarItem<T>[];
|
|
3280
|
+
onSelect: (value: T) => void;
|
|
3281
|
+
/**
|
|
3282
|
+
* Side the group flyouts and popovers open on. Bottom-of-screen toolbars
|
|
3283
|
+
* want "top".
|
|
3284
|
+
* @default "top"
|
|
3285
|
+
*/
|
|
3286
|
+
side?: PopupSide;
|
|
3287
|
+
/** @default "top" */
|
|
3288
|
+
tooltipSide?: PopupSide;
|
|
3289
|
+
}
|
|
3290
|
+
/**
|
|
3291
|
+
* Renders a flat list of `ToolbarItem`s inside a `Toolbar`, styled entirely
|
|
3292
|
+
* by the standard (light) theme tokens. Also available as `Toolbar.Items`.
|
|
3293
|
+
*/
|
|
3294
|
+
declare function ToolbarItems<T extends string>({ items, onSelect, side, tooltipSide, }: ToolbarItemsProps<T>): React__default.JSX.Element;
|
|
3295
|
+
|
|
3229
3296
|
type ToolbarSize = "small" | "medium";
|
|
3230
3297
|
interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
3231
3298
|
/**
|
|
@@ -3234,7 +3301,12 @@ interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
3234
3301
|
*/
|
|
3235
3302
|
size?: ToolbarSize;
|
|
3236
3303
|
}
|
|
3237
|
-
|
|
3304
|
+
/** The floating toolbar surface. `Toolbar.Items` renders a declarative
|
|
3305
|
+
* `ToolbarItem[]` (icon buttons, separators, split-button groups, popovers)
|
|
3306
|
+
* inside it. */
|
|
3307
|
+
declare const Toolbar: React__default.ForwardRefExoticComponent<ToolbarProps & React__default.RefAttributes<HTMLDivElement>> & {
|
|
3308
|
+
Items: typeof ToolbarItems;
|
|
3309
|
+
};
|
|
3238
3310
|
|
|
3239
3311
|
type ToolbarDrawerProps = {
|
|
3240
3312
|
children: ReactNode;
|
|
@@ -3243,4 +3315,4 @@ type ToolbarDrawerProps = {
|
|
|
3243
3315
|
};
|
|
3244
3316
|
declare const ToolbarDrawer: React__default.NamedExoticComponent<ToolbarDrawerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
3245
3317
|
|
|
3246
|
-
export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Card, type CardProps, Checkbox
|
|
3318
|
+
export { AIAssistantInput, AIAssistantLayout, AIAssistantLoadingIndicator, type AcceptsDrop, type AcceptsDropOptions, type AcceptsFromList, ActionMenu, type ActivityIconSemanticColor, ActivityIndicator, ActivityLog, type ActivityLogItem, Anchor, AnimatePresence, type AnimatePresenceChildState, type AnimatePresenceProps, AppToolbar, type AppToolbarProps, Avatar, type AvatarProps, AvatarStack, Banner, type BannerProps, type BaseComboboxProps, BaseToolbar, BaseToolbarContainer, type BaseToolbarProps, Body, BreadcrumbSlash, BreadcrumbText, Button, type ButtonProps, CHECKBOX_INDENT_WIDTH, CHECKBOX_RIGHT_INSET, CHECKBOX_WIDTH, Card, type CardProps, Checkbox, Chip, type ChipProps, Collection, type CollectionItemSize, type CollectionProps, type CollectionRef, type CollectionRenderActionProps, type CollectionThumbnailProps, type CollectionThumbnailSize, type CollectionViewType, ColorSwatch, ColorSwatchControl, type ColorSwatchSize, Combobox, type ComboboxFilterStrategy, ComboboxMenu, type ComboboxProps, type ComboboxRef, ComboboxState, type ComboboxStateSnapshot, CommandPalette, ConnectedUsersMenuLayout, ContextMenu, ContinuousPointerSensor, type DesignSystemConfigurationContextValue, DesignSystemConfigurationProvider, type DetectSizeType, Dialog, type DialogContextValue, DialogNavigator, type DialogNavigatorProps, type DialogProps, DialogProvider, DimensionInput, type DimensionValue, Divider, DividerVertical, type DragItem, type DragState, DraggableMenuButton, Drawer, type DrawerProps, type DropValidator, DropdownMenu, type DropdownMenuProps, EditableText, type EditableTextRef, EmojiPicker, type EmojiPickerStorage, ExtraSmall, type ExtractMenuItemType, Fade, type FadeDirection, type FadeProps, FileExplorerCollection, FileExplorerDetail, FileExplorerEmptyState, FileExplorerLayout, FileExplorerUploadButton, FileUploadIndicator, FileUploadList, FloatingWindow, FloatingWindowProvider, FullscreenDialog, type GlobalInputBlurContextValue, GlobalInputBlurProvider, Grid, GridBackground, GridView, Heading1, Heading2, Heading3, Heading4, Heading5, type HoverEvent, type HoverEvents, type HoverProps, type IDialog, INPUT_HEIGHT, type IScoredItem, type ISearchCompletionMenu, type IToken, type IVirtualizedList, Icon, IconButton, type IconName, type IconProp, ImageBlockComponent, type ImageDataContextValue, ImageDataProvider, IndentContext, InputField, type InputFieldInputProps, type InputFieldProps, type InputFieldSize, InspectorContainer, Italic, type ItemChildrenExtraProps, type ItemChildrenProps, KeyboardShortcut, Label, LabelContext, type LabelProps, type LabelType, LabelTypeContext, type LabelTypeContextValue, LabelWidthContext, type LabelWidthContextValue, LabeledElementView, LabeledField, type LayoutProps, type LinkComponent, LinkComponentProvider, List, ListMenu, type ListMenuProps, ListNavigator, type ListNavigatorProps, ListView, Logo, type MatchRange, MediaThumbnail, type MediaThumbnailProps, type MenuConfig, type MenuItem, type MenuItemIcon, type MenuItemProps, type MenuItemRole, type MenuProps, Message, type MessageProps, type MoveDragItemHandler, type MoveDragItemParameters, type MoveTreeItemOptions, Navigator, type NavigatorHeaderProps, type NavigatorNavigation, type NavigatorParams, type NavigatorProps, type NavigatorPushFunction, type NavigatorRenderContext, type NavigatorRenderHeader, type NavigatorReplaceFunction, type NavigatorRoute, type NavigatorRoutesConfig, type NavigatorScreenProps, type NavigatorStackEntry, type NonSelectableMenuItem, type OpenPortalControlsContextValue, type OpenPortalsContextValue, OpenPortalsProvider, type OptionModeOnlyProps, type OptionModeProps, type Optional, type OverlayLayout, OverlayToolbar, type OverlayToolbarProps, type OverlayToolbarRect, type PanelLayoutState, PipelineResultLayout, PipelineResultLink, Popover, type PopoverMenuItem, type PortalScopeContextValue, PortalScopeProvider, Progress, type RelativeDropPosition, type RenderPanel, type RenderThumbnailIconProps, ResizableContainer, RingProgress, SUPPORTED_CANVAS_UPLOAD_TYPES, SUPPORTED_IMAGE_UPLOAD_TYPES, type ScoredMenuItem, ScrollArea, type ScrollToIndexAlign, type ScrollToIndexOptions, type ScrollToIndexPadding, ScrollableSidebar, SearchCompletionMenu, Section, SectionHeader, SectionHeaderMenuItem, type SectionProps, SegmentedControl, type SegmentedControlItemProps, type SegmentedControlProps, SelectMenu, type SelectableMenuItem, SelectionToolbarContainer, type SeparatorItem, type SetNumberMode, SharedDragProvider, type SharedDragProviderProps, type SideOptions, type SideType, type SidebarOptions, type SidebarRef, type SidebarState, type SketchPattern, Slider, Small, Sortable, SortableItemContext, type SortableItemContextProps, type SortableProps, Spacer, type StackItem, StackNavigator, type StackNavigatorHeaderProps, type StackNavigatorProps, type StackNavigatorRenderHeader, StatCard, type StatCardColorScheme, type StatCardProps, type StatCardTrend, Stepper, type StringModeOnlyProps, type StringModeProps, type SubMenuItem, type SupportedCanvasUploadType, type SupportedImageUploadType, Switch, Tabs, type TabsProps, Text, TextArea, TextAreaRow, type TextProps, type Theme, type ThemeColor, Toast, ToastProvider, type TokenValue, Toolbar, ToolbarDrawer, type ToolbarGroupItem, type ToolbarItem, ToolbarItems, type ToolbarItemsProps, ToolbarMenu, ToolbarMenuButton, ToolbarMenuContext, ToolbarMenuDropdown, ToolbarMenuItem, ToolbarMenuPopover, type ToolbarPopoverItem, type ToolbarProps, type ToolbarSeparatorItem, ToolbarShortcut, type ToolbarSize, type ToolbarVariant, Tooltip, TreeView, type UseThemeReturnType, UserAvatar, UserPicker, type UserPickerProps, type UserPickerUser, UserPointer, type UserPointerProps, type ValidateDropIndicatorParams, Virtualized, type VirtualizedProps, type VirtualizedRenderItem, WorkspaceLayout, type WorkspaceLayoutGroup, type WorkspaceLayoutProps, type WorkspaceLayoutRef, type WorkspaceLayoutState, type WorkspaceSideContextValue, WorkspaceSideProvider, acceptsDrop, colorForStringValues, colorFromString, colorSwatchSizeMap, createDialogNavigator, createDragItemKey, createNavigator, createSectionedMenu, createSharedDrag, cssVarNames, cssVars, cx, decodeImageSrc, defaultAcceptsDrop, dragItemKeySeparator, editableBlockStyles, filterWithGroupedSections, formatByteSize, fuzzyFilter, fuzzyScore, fuzzyTokenize, getCheckedMenuItemAccessibilityProps, getClosestPortalScope, getFieldSpacing, getGridSize, getItemFirstCollisionDetection, getKeyboardShortcutsForMenuItems, getMenuItemKey, getNewValue, getNextIndex, getPipelineResultLink, getThumbnailColors, getUserDisplayName, isMenuItemSectionHeader, isNonSelectableMenuItem, isPopoverMenuItem, isSelectableMenuItem, isSelectableMenuItemWithScore, isSubMenuItem, labeledFieldStyles, mergeConflictingClassNames, moveTreeItem, normalizeListTargetIndex, parseDragItemKey, popoverStyle, portalScopeDataSetName, portalScopePropName, portalScopeProps, proseTheme, renderIcon, separator, snapIndicatorEdgesToDevicePixels, styles, textStyles, toolbarTransparentStyle, updateSelection, useAutoResize, useBindKeyboardShortcutsForMenuItems, useComboboxState, useCurrentFloatingWindowInternal, useDesignSystemConfiguration, useDialogContainsElement, useDialogContext, useFloatingWindowManager, useGlobalInputBlur, useGlobalInputBlurListener, useGlobalInputBlurTrigger, useHasOpenPortals, useHover, useImageData, useIndent, useInputFieldContext, useLabel, useLabelType, useLabelWidth, useLinkComponent, useNavigator, useNavigatorRoute, useOpenConfirmationDialog, useOpenDialog, useOpenInputDialog, useOpenPortalsControls, usePlatform, usePlatformModKey, usePortalScopeId, useTheme, useToast, useWorkspaceSide, validateDropIndicator, whiteboardProseTheme, withDragProvider, withSeparatorElements, wordPrefixFilter };
|