@noya-app/noya-designsystem 0.1.94 → 0.1.96
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +9 -9
- package/.turbo/turbo-typecheck.log +1 -0
- package/CHANGELOG.md +16 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +158 -93
- package/dist/index.d.ts +158 -93
- package/dist/index.js +1307 -1034
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1231 -962
- package/dist/index.mjs.map +1 -1
- package/package.json +6 -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 +23 -8
- 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/Toolbar.tsx +16 -1
- package/src/components/ToolbarItems.tsx +322 -0
- package/src/components/Tooltip.tsx +8 -1
- package/src/components/__tests__/Card.test.tsx +2 -1
- package/src/components/__tests__/InputField.test.tsx +3 -1
- 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 +79 -2
- 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
|
@@ -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
|
|
|
@@ -2012,6 +2092,9 @@ declare const InspectorContainer: React__default.NamedExoticComponent<{
|
|
|
2012
2092
|
header?: React__default.ReactNode;
|
|
2013
2093
|
children?: React__default.ReactNode;
|
|
2014
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;
|
|
2015
2098
|
showDividers?: boolean;
|
|
2016
2099
|
id?: string;
|
|
2017
2100
|
className?: string;
|
|
@@ -2160,19 +2243,28 @@ interface Props$7 {
|
|
|
2160
2243
|
style?: React__default.CSSProperties;
|
|
2161
2244
|
portalContainer?: HTMLElement | null;
|
|
2162
2245
|
side?: "top" | "bottom" | "left" | "right";
|
|
2246
|
+
/** Cross-axis alignment against the anchor. @default "center" */
|
|
2247
|
+
align?: "start" | "center" | "end";
|
|
2163
2248
|
initialFocus?: React__default.ComponentProps<typeof Popover$1.Popup>["initialFocus"];
|
|
2164
2249
|
/**
|
|
2165
2250
|
* Called when an interaction outside the popover occurs.
|
|
2166
2251
|
* Return false to prevent the popover from closing.
|
|
2167
2252
|
*/
|
|
2168
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;
|
|
2169
2261
|
}
|
|
2170
2262
|
declare const popoverStyle: {
|
|
2171
2263
|
base: string;
|
|
2172
2264
|
large: string;
|
|
2173
2265
|
normal: string;
|
|
2174
2266
|
};
|
|
2175
|
-
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;
|
|
2176
2268
|
|
|
2177
2269
|
type ColorScheme$3 = "normal" | "warning" | "primary" | "secondary";
|
|
2178
2270
|
declare function Progress({ value, colorScheme, color, className, style: styleProp, }: {
|
|
@@ -2248,7 +2340,7 @@ type SectionHeaderProps = {
|
|
|
2248
2340
|
right?: React__default.ReactNode;
|
|
2249
2341
|
headerSeparator?: "space" | "dot";
|
|
2250
2342
|
};
|
|
2251
|
-
declare function SectionHeader
|
|
2343
|
+
declare function SectionHeader({ style, className, title, titleIcon, right, headerSeparator, titleTextStyle, titleClassName, onClickTitle, }: SectionHeaderProps): React__default.JSX.Element;
|
|
2252
2344
|
type SectionProps = {
|
|
2253
2345
|
children: React__default.ReactNode;
|
|
2254
2346
|
hideRightWhenCollapsed?: boolean;
|
|
@@ -2261,7 +2353,7 @@ type ExpandableSectionProps = {
|
|
|
2261
2353
|
storageKey: string;
|
|
2262
2354
|
initialVisibility?: "show" | "hide";
|
|
2263
2355
|
};
|
|
2264
|
-
declare const Section
|
|
2356
|
+
declare const Section: React__default.NamedExoticComponent<{
|
|
2265
2357
|
children: React__default.ReactNode;
|
|
2266
2358
|
hideRightWhenCollapsed?: boolean;
|
|
2267
2359
|
extraPadding?: boolean;
|
|
@@ -2270,7 +2362,11 @@ declare const Section$1: React__default.NamedExoticComponent<{
|
|
|
2270
2362
|
headerStyle?: CSSProperties;
|
|
2271
2363
|
} & Omit<SectionHeaderProps, "className" | "style"> & Partial<ExpandableSectionProps>>;
|
|
2272
2364
|
|
|
2273
|
-
|
|
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";
|
|
2274
2370
|
type SegmentedControlVariant = "default" | "tabs" | "buttons";
|
|
2275
2371
|
type SegmentedControlItemWidth = "auto" | "equal" | "fit";
|
|
2276
2372
|
interface SegmentedControlProps<T extends string> {
|
|
@@ -2553,6 +2649,9 @@ interface Props$1 {
|
|
|
2553
2649
|
sideOffset?: number;
|
|
2554
2650
|
side?: "top" | "bottom" | "left" | "right";
|
|
2555
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;
|
|
2556
2655
|
}
|
|
2557
2656
|
declare const Tooltip: React$1.NamedExoticComponent<Props$1>;
|
|
2558
2657
|
|
|
@@ -2977,51 +3076,6 @@ declare const colorForStringValues: Record<string, string>;
|
|
|
2977
3076
|
*/
|
|
2978
3077
|
declare function colorFromString(str: string): string;
|
|
2979
3078
|
|
|
2980
|
-
type ComboboxStateSnapshot<T extends string> = {
|
|
2981
|
-
filter: string;
|
|
2982
|
-
selectedIndex: number;
|
|
2983
|
-
filteredItems: ScoredMenuItem<T>[];
|
|
2984
|
-
lastSubmittedValue: {
|
|
2985
|
-
filter: string;
|
|
2986
|
-
itemName: string;
|
|
2987
|
-
};
|
|
2988
|
-
};
|
|
2989
|
-
declare class ComboboxState<T extends string> {
|
|
2990
|
-
private filter;
|
|
2991
|
-
private selectedIndex;
|
|
2992
|
-
private items;
|
|
2993
|
-
private lastSubmittedValue;
|
|
2994
|
-
private subscribers;
|
|
2995
|
-
private version;
|
|
2996
|
-
private _cachedSnapshot;
|
|
2997
|
-
constructor(items: MenuItem<T>[], initialTitle: string, allowArbitraryValues: boolean);
|
|
2998
|
-
subscribe: (listener: () => void) => (() => void);
|
|
2999
|
-
private notifyChange;
|
|
3000
|
-
private getFilteredItems;
|
|
3001
|
-
getSnapshot: () => ComboboxStateSnapshot<T>;
|
|
3002
|
-
setItems(items: MenuItem<T>[]): void;
|
|
3003
|
-
setFilter(filter: string): void;
|
|
3004
|
-
moveSelection(direction: "up" | "down"): void;
|
|
3005
|
-
selectCurrentItem(item?: ScoredMenuItem<T>): SelectableMenuItem<T> | undefined;
|
|
3006
|
-
restoreLastSubmittedValue(): void;
|
|
3007
|
-
reset(newFilter?: string, options?: {
|
|
3008
|
-
selectedItemTitle?: string;
|
|
3009
|
-
selectedItemValue?: string | number;
|
|
3010
|
-
}): void;
|
|
3011
|
-
getSelectedItem(): ScoredMenuItem<T> | undefined;
|
|
3012
|
-
getTypeaheadValue(): string | undefined;
|
|
3013
|
-
setSelectedIndex(index: number): void;
|
|
3014
|
-
submitArbitraryFilter(filter: string): void;
|
|
3015
|
-
}
|
|
3016
|
-
declare function filterWithGroupedSections<T extends string>(items: MenuItem<T>[], query: string): ScoredMenuItem<T>[];
|
|
3017
|
-
declare function getNextIndex<T>({ items, currentIndex, direction, isDisabled, }: {
|
|
3018
|
-
items: T[];
|
|
3019
|
-
currentIndex: number;
|
|
3020
|
-
direction: "next" | "previous";
|
|
3021
|
-
isDisabled: (item: T) => boolean;
|
|
3022
|
-
}): number;
|
|
3023
|
-
declare function useComboboxState<T extends string>(state: ComboboxState<T>): ComboboxStateSnapshot<T>;
|
|
3024
|
-
|
|
3025
3079
|
declare const editableBlockStyles: (viewType?: "editable" | "readOnly" | "preview") => string | undefined;
|
|
3026
3080
|
|
|
3027
3081
|
type MoveOptions = {
|
|
@@ -3089,49 +3143,11 @@ interface Props {
|
|
|
3089
3143
|
placeholder?: string;
|
|
3090
3144
|
disabled?: boolean;
|
|
3091
3145
|
trigger?: "change" | "submit";
|
|
3146
|
+
/** Unit suffix rendered inside the field's right edge (e.g. "px", "%"). */
|
|
3147
|
+
suffix?: string;
|
|
3092
3148
|
}
|
|
3093
3149
|
declare const DimensionInput: React$1.NamedExoticComponent<Props>;
|
|
3094
3150
|
|
|
3095
|
-
declare const Section: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3096
|
-
declare const SectionHeader: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3097
|
-
type TitleTextStyle = "small" | "heading5" | "heading4" | "heading3";
|
|
3098
|
-
declare const Title: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & {
|
|
3099
|
-
$textStyle?: TitleTextStyle;
|
|
3100
|
-
} & React__default.RefAttributes<HTMLDivElement>>;
|
|
3101
|
-
declare const Row: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3102
|
-
declare const Column: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLDivElement> & React__default.RefAttributes<HTMLDivElement>>;
|
|
3103
|
-
declare const Checkbox: React__default.ForwardRefExoticComponent<React__default.InputHTMLAttributes<HTMLInputElement> & React__default.RefAttributes<HTMLInputElement>>;
|
|
3104
|
-
declare const Text: React__default.ForwardRefExoticComponent<React__default.HTMLAttributes<HTMLSpanElement> & React__default.RefAttributes<HTMLSpanElement>>;
|
|
3105
|
-
declare const VerticalSeparator: () => React__default.JSX.Element;
|
|
3106
|
-
declare const HorizontalSeparator: () => React__default.JSX.Element;
|
|
3107
|
-
declare const RowLabel: React__default.ForwardRefExoticComponent<React__default.LabelHTMLAttributes<HTMLLabelElement> & {
|
|
3108
|
-
$textStyle?: TitleTextStyle | "label";
|
|
3109
|
-
} & React__default.RefAttributes<HTMLLabelElement>>;
|
|
3110
|
-
interface LabeledRowProps {
|
|
3111
|
-
id?: string;
|
|
3112
|
-
children: ReactNode;
|
|
3113
|
-
label: ReactNode;
|
|
3114
|
-
labelTextStyle?: TitleTextStyle;
|
|
3115
|
-
right?: ReactNode;
|
|
3116
|
-
className?: string;
|
|
3117
|
-
}
|
|
3118
|
-
declare const LabeledRow: React__default.NamedExoticComponent<LabeledRowProps>;
|
|
3119
|
-
|
|
3120
|
-
declare const InspectorPrimitives_Checkbox: typeof Checkbox;
|
|
3121
|
-
declare const InspectorPrimitives_Column: typeof Column;
|
|
3122
|
-
declare const InspectorPrimitives_HorizontalSeparator: typeof HorizontalSeparator;
|
|
3123
|
-
declare const InspectorPrimitives_LabeledRow: typeof LabeledRow;
|
|
3124
|
-
declare const InspectorPrimitives_Row: typeof Row;
|
|
3125
|
-
declare const InspectorPrimitives_RowLabel: typeof RowLabel;
|
|
3126
|
-
declare const InspectorPrimitives_Section: typeof Section;
|
|
3127
|
-
declare const InspectorPrimitives_SectionHeader: typeof SectionHeader;
|
|
3128
|
-
declare const InspectorPrimitives_Text: typeof Text;
|
|
3129
|
-
declare const InspectorPrimitives_Title: typeof Title;
|
|
3130
|
-
declare const InspectorPrimitives_VerticalSeparator: typeof VerticalSeparator;
|
|
3131
|
-
declare namespace InspectorPrimitives {
|
|
3132
|
-
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 };
|
|
3133
|
-
}
|
|
3134
|
-
|
|
3135
3151
|
interface BaseToolbarProps {
|
|
3136
3152
|
children?: React__default.ReactNode;
|
|
3137
3153
|
left?: React__default.ReactNode;
|
|
@@ -3233,6 +3249,50 @@ interface AppToolbarProps<T extends string = string> {
|
|
|
3233
3249
|
declare function useBindKeyboardShortcutsForMenuItems<T extends string>(items: MenuItem<T>[], onSelectMenuItem?: (value: T) => void): void;
|
|
3234
3250
|
declare function AppToolbar<T extends string = string>({ children, logo, leftMenuItems, rightMenuItems, onSelectMenuItem, shouldBindKeyboardShortcuts, dividerOverflow, }: AppToolbarProps<T>): React__default.JSX.Element;
|
|
3235
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
|
+
|
|
3236
3296
|
type ToolbarSize = "small" | "medium";
|
|
3237
3297
|
interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
3238
3298
|
/**
|
|
@@ -3241,7 +3301,12 @@ interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
3241
3301
|
*/
|
|
3242
3302
|
size?: ToolbarSize;
|
|
3243
3303
|
}
|
|
3244
|
-
|
|
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
|
+
};
|
|
3245
3310
|
|
|
3246
3311
|
type ToolbarDrawerProps = {
|
|
3247
3312
|
children: ReactNode;
|
|
@@ -3250,4 +3315,4 @@ type ToolbarDrawerProps = {
|
|
|
3250
3315
|
};
|
|
3251
3316
|
declare const ToolbarDrawer: React__default.NamedExoticComponent<ToolbarDrawerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
3252
3317
|
|
|
3253
|
-
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 };
|