@imfusion/web-ui 0.11.1-dev.2.g8a30ca7e → 0.11.1-dev.27.g921aea14
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/CHANGELOG.md +64 -0
- package/dist/{code-NTcddiYk.js → code-BXlEW54h.js} +7 -7
- package/dist/components/autocomplete/autocomplete.d.ts +144 -0
- package/dist/components/autocomplete/autocomplete.meta.d.ts +2 -0
- package/dist/components/autocomplete/index.d.ts +2 -0
- package/dist/components/checkbox/checkbox.cva.d.ts +3 -0
- package/dist/components/combobox/combobox.cva.d.ts +37 -0
- package/dist/components/combobox/combobox.d.ts +171 -0
- package/dist/components/combobox/combobox.meta.d.ts +2 -0
- package/dist/components/combobox/index.d.ts +2 -0
- package/dist/components/popover/popover.d.ts +1 -1
- package/dist/components/select/select.cva.d.ts +7 -0
- package/dist/components/select/select.d.ts +1 -1
- package/dist/components/table/table.d.ts +8 -0
- package/dist/components/toast/toast.d.ts +1 -1
- package/dist/components/typo/typo.d.ts +5 -1
- package/dist/docgen/component-sources.d.ts +4 -0
- package/dist/icons/catalog.gen.d.ts +28 -0
- package/dist/icons/icons.gen.d.ts +4 -0
- package/dist/{icons-BsK_o-Cb.js → icons-vc1WZCxX.js} +1027 -879
- package/dist/icons.js +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2560 -1870
- package/dist/integrations/code-highlight.js +2 -2
- package/dist/integrations/frame-selection.js +1 -1
- package/dist/integrations/image-display-options.js +3 -3
- package/dist/{scroll-area-z9Lf9uIk.js → scroll-area-CUo1NBaW.js} +20 -20
- package/dist/{slider-Bf274cMe.js → slider-BKDxeTmk.js} +23 -23
- package/dist/style.css +1 -1
- package/dist/{tabs-CU46aGud.js → tabs-U3Cg6YAw.js} +42 -42
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/item-parts.d.ts +23 -0
- package/dist/utils/stable-popup-height.d.ts +10 -0
- package/dist/utils-RZJAXfcf.js +56 -0
- package/package.json +1 -1
- package/src/docgen/doc.gen.json +3143 -670
- package/src/llms/icon-catalog.gen.json +32 -0
- package/src/llms/llms.gen.txt +12 -0
- package/src/llms/skills/imf-web-ui-audit/SKILL.md +2 -3
- package/src/llms/skills/imf-web-ui-conventions/topics/project-structure.md +3 -3
- package/src/llms/skills/imf-web-ui-conventions/topics/styling.md +13 -0
- package/dist/resolve-state-props-DQf9WiGv.js +0 -22
package/src/docgen/doc.gen.json
CHANGED
|
@@ -342,430 +342,404 @@
|
|
|
342
342
|
}
|
|
343
343
|
]
|
|
344
344
|
},
|
|
345
|
-
"
|
|
345
|
+
"autocomplete": {
|
|
346
346
|
"root": {
|
|
347
|
-
"name": "
|
|
348
|
-
"description": "
|
|
347
|
+
"name": "Autocomplete.Root",
|
|
348
|
+
"description": "Autocomplete.Root — text input that suggests options as you type and keeps free text.\n\nWraps children in a div so the field and its label stack regardless of the parent's layout.\nAutocomplete.Portal is unaffected (it renders to document.body).",
|
|
349
349
|
"props": [
|
|
350
350
|
{
|
|
351
|
-
"name": "
|
|
351
|
+
"name": "actionsRef",
|
|
352
352
|
"required": false,
|
|
353
|
-
"type": "
|
|
353
|
+
"type": "RefObject<AutocompleteRootActions | null>",
|
|
354
354
|
"defaultValue": null,
|
|
355
|
-
"description": "
|
|
355
|
+
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the autocomplete.\nCall this after any externally controlled closing animation finishes."
|
|
356
356
|
},
|
|
357
357
|
{
|
|
358
|
-
"name": "
|
|
358
|
+
"name": "autoHighlight",
|
|
359
359
|
"required": false,
|
|
360
|
-
"type": "
|
|
361
|
-
"defaultValue": "
|
|
362
|
-
"description": ""
|
|
360
|
+
"type": "boolean | \"always\"",
|
|
361
|
+
"defaultValue": "false",
|
|
362
|
+
"description": "Whether the first matching item is highlighted automatically.\n- `true`: highlight after the user types and keep the highlight while the query changes.\n- `'always'`: always highlight the first item."
|
|
363
363
|
},
|
|
364
364
|
{
|
|
365
|
-
"name": "
|
|
365
|
+
"name": "className",
|
|
366
366
|
"required": false,
|
|
367
|
-
"type": "
|
|
367
|
+
"type": "string",
|
|
368
368
|
"defaultValue": null,
|
|
369
|
-
"description": "
|
|
369
|
+
"description": ""
|
|
370
370
|
},
|
|
371
371
|
{
|
|
372
|
-
"name": "
|
|
372
|
+
"name": "defaultOpen",
|
|
373
373
|
"required": false,
|
|
374
|
-
"type": "
|
|
374
|
+
"type": "boolean",
|
|
375
|
+
"defaultValue": "false",
|
|
376
|
+
"description": "Whether the popup is initially open.\n\nTo render a controlled popup, use the `open` prop instead."
|
|
377
|
+
},
|
|
378
|
+
{
|
|
379
|
+
"name": "defaultValue",
|
|
380
|
+
"required": false,
|
|
381
|
+
"type": "string | number | readonly string[]",
|
|
375
382
|
"defaultValue": null,
|
|
376
|
-
"description": "
|
|
383
|
+
"description": "The uncontrolled input value of the autocomplete when it's initially rendered.\n\nTo render a controlled autocomplete, use the `value` prop instead."
|
|
377
384
|
},
|
|
378
385
|
{
|
|
379
|
-
"name": "
|
|
386
|
+
"name": "disabled",
|
|
380
387
|
"required": false,
|
|
381
|
-
"type": "
|
|
382
|
-
"defaultValue": "
|
|
383
|
-
"description": ""
|
|
388
|
+
"type": "boolean",
|
|
389
|
+
"defaultValue": "false",
|
|
390
|
+
"description": "Whether the component should ignore user interaction."
|
|
384
391
|
},
|
|
385
392
|
{
|
|
386
|
-
"name": "
|
|
393
|
+
"name": "filter",
|
|
387
394
|
"required": false,
|
|
388
|
-
"type": "|
|
|
395
|
+
"type": "| ((\n itemValue: ItemValue,\n query: string,\n itemToString?: (itemValue: ItemValue) => string\n ) => boolean)\n| null",
|
|
389
396
|
"defaultValue": null,
|
|
390
|
-
"description": "
|
|
391
|
-
}
|
|
392
|
-
]
|
|
393
|
-
},
|
|
394
|
-
"subComponents": [
|
|
395
|
-
{
|
|
396
|
-
"name": "Avatar.Fallback",
|
|
397
|
-
"description": "Avatar.Fallback — the initials the consumer passes, one or two letters. Without children it shows a person glyph.\nIt derives nothing from a name or email.",
|
|
398
|
-
"props": [
|
|
399
|
-
{
|
|
400
|
-
"name": "className",
|
|
401
|
-
"required": false,
|
|
402
|
-
"type": "string | ((state: AvatarFallbackState) => string)",
|
|
403
|
-
"defaultValue": null,
|
|
404
|
-
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
405
|
-
},
|
|
406
|
-
{
|
|
407
|
-
"name": "delay",
|
|
408
|
-
"required": false,
|
|
409
|
-
"type": "number",
|
|
410
|
-
"defaultValue": null,
|
|
411
|
-
"description": "How long to wait before showing the fallback. Specified in milliseconds."
|
|
412
|
-
},
|
|
413
|
-
{
|
|
414
|
-
"name": "ref",
|
|
415
|
-
"required": false,
|
|
416
|
-
"type": "Ref<HTMLSpanElement>",
|
|
417
|
-
"defaultValue": null,
|
|
418
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
419
|
-
},
|
|
420
|
-
{
|
|
421
|
-
"name": "render",
|
|
422
|
-
"required": false,
|
|
423
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AvatarFallbackState>",
|
|
424
|
-
"defaultValue": null,
|
|
425
|
-
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
426
|
-
},
|
|
427
|
-
{
|
|
428
|
-
"name": "style",
|
|
429
|
-
"required": false,
|
|
430
|
-
"type": "| CSSProperties\n| ((state: AvatarFallbackState) => CSSProperties)",
|
|
431
|
-
"defaultValue": null,
|
|
432
|
-
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
433
|
-
}
|
|
434
|
-
]
|
|
435
|
-
},
|
|
436
|
-
{
|
|
437
|
-
"name": "Avatar.Image",
|
|
438
|
-
"description": "Avatar.Image — the person's photo, cropped to the circle. It shows once `src` has loaded; until then, and when it\nfails, `Avatar.Fallback` shows instead.",
|
|
439
|
-
"props": [
|
|
440
|
-
{
|
|
441
|
-
"name": "className",
|
|
442
|
-
"required": false,
|
|
443
|
-
"type": "string | ((state: AvatarImageState) => string)",
|
|
444
|
-
"defaultValue": null,
|
|
445
|
-
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
446
|
-
},
|
|
447
|
-
{
|
|
448
|
-
"name": "onLoadingStatusChange",
|
|
449
|
-
"required": false,
|
|
450
|
-
"type": "(status: ImageLoadingStatus) => void",
|
|
451
|
-
"defaultValue": null,
|
|
452
|
-
"description": "Callback fired when the loading status changes."
|
|
453
|
-
},
|
|
454
|
-
{
|
|
455
|
-
"name": "ref",
|
|
456
|
-
"required": false,
|
|
457
|
-
"type": "Ref<HTMLSpanElement>",
|
|
458
|
-
"defaultValue": null,
|
|
459
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
460
|
-
},
|
|
461
|
-
{
|
|
462
|
-
"name": "render",
|
|
463
|
-
"required": false,
|
|
464
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AvatarImageState>",
|
|
465
|
-
"defaultValue": null,
|
|
466
|
-
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
467
|
-
},
|
|
468
|
-
{
|
|
469
|
-
"name": "style",
|
|
470
|
-
"required": false,
|
|
471
|
-
"type": "| CSSProperties\n| ((state: AvatarImageState) => CSSProperties)",
|
|
472
|
-
"defaultValue": null,
|
|
473
|
-
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
474
|
-
}
|
|
475
|
-
]
|
|
476
|
-
}
|
|
477
|
-
]
|
|
478
|
-
},
|
|
479
|
-
"button": {
|
|
480
|
-
"root": {
|
|
481
|
-
"name": "Button",
|
|
482
|
-
"description": "Button",
|
|
483
|
-
"props": [
|
|
397
|
+
"description": "Filter function used to match items vs input query."
|
|
398
|
+
},
|
|
484
399
|
{
|
|
485
|
-
"name": "
|
|
400
|
+
"name": "filteredItems",
|
|
486
401
|
"required": false,
|
|
487
|
-
"type": "
|
|
488
|
-
"defaultValue":
|
|
489
|
-
"description": ""
|
|
402
|
+
"type": "readonly any[] | readonly Group<any>[]",
|
|
403
|
+
"defaultValue": null,
|
|
404
|
+
"description": "Filtered items to display in the list.\nWhen provided, the list will use these items instead of filtering the `items` prop internally.\nUse when you want to control filtering logic externally with the `useFilter()` hook."
|
|
490
405
|
},
|
|
491
406
|
{
|
|
492
|
-
"name": "
|
|
407
|
+
"name": "form",
|
|
493
408
|
"required": false,
|
|
494
|
-
"type": "string
|
|
409
|
+
"type": "string",
|
|
495
410
|
"defaultValue": null,
|
|
496
|
-
"description": "
|
|
411
|
+
"description": "Identifies the form that owns the internal input.\nUseful when the combobox is rendered outside the form."
|
|
497
412
|
},
|
|
498
413
|
{
|
|
499
|
-
"name": "
|
|
414
|
+
"name": "grid",
|
|
500
415
|
"required": false,
|
|
501
|
-
"type": "
|
|
502
|
-
"defaultValue": "
|
|
503
|
-
"description": ""
|
|
416
|
+
"type": "boolean",
|
|
417
|
+
"defaultValue": "false",
|
|
418
|
+
"description": "Whether list items are presented in a grid layout.\nWhen enabled, arrow keys navigate across rows and columns inferred from DOM rows."
|
|
504
419
|
},
|
|
505
420
|
{
|
|
506
|
-
"name": "
|
|
421
|
+
"name": "highlightItemOnHover",
|
|
507
422
|
"required": false,
|
|
508
|
-
"type": "
|
|
423
|
+
"type": "boolean",
|
|
424
|
+
"defaultValue": "true",
|
|
425
|
+
"description": "Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."
|
|
426
|
+
},
|
|
427
|
+
{
|
|
428
|
+
"name": "id",
|
|
429
|
+
"required": false,
|
|
430
|
+
"type": "string",
|
|
509
431
|
"defaultValue": null,
|
|
510
|
-
"description": "
|
|
432
|
+
"description": "The id of the component."
|
|
511
433
|
},
|
|
512
434
|
{
|
|
513
|
-
"name": "
|
|
435
|
+
"name": "inline",
|
|
514
436
|
"required": false,
|
|
515
437
|
"type": "boolean",
|
|
516
438
|
"defaultValue": "false",
|
|
517
|
-
"description": "Whether the
|
|
439
|
+
"description": "Whether the list is rendered inline without using the component's own popup.\n\nSpecify `open` unconditionally in conjunction with this prop so the list is considered\nvisible: `<Autocomplete.Root inline open>`"
|
|
518
440
|
},
|
|
519
441
|
{
|
|
520
|
-
"name": "
|
|
442
|
+
"name": "inputRef",
|
|
521
443
|
"required": false,
|
|
522
|
-
"type": "
|
|
523
|
-
"defaultValue":
|
|
444
|
+
"type": "Ref<HTMLInputElement>",
|
|
445
|
+
"defaultValue": null,
|
|
446
|
+
"description": "A ref to the hidden input element."
|
|
447
|
+
},
|
|
448
|
+
{
|
|
449
|
+
"name": "items",
|
|
450
|
+
"required": false,
|
|
451
|
+
"type": "readonly ItemValue[]",
|
|
452
|
+
"defaultValue": null,
|
|
524
453
|
"description": ""
|
|
525
454
|
},
|
|
526
455
|
{
|
|
527
|
-
"name": "
|
|
456
|
+
"name": "itemToStringValue",
|
|
457
|
+
"required": false,
|
|
458
|
+
"type": "(itemValue: ItemValue) => string",
|
|
459
|
+
"defaultValue": null,
|
|
460
|
+
"description": "When the item values are objects (`<Autocomplete.Item value={object}>`), this function converts the object value to a string representation for both display in the input and form submission.\nIf the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop."
|
|
461
|
+
},
|
|
462
|
+
{
|
|
463
|
+
"name": "keepHighlight",
|
|
528
464
|
"required": false,
|
|
529
465
|
"type": "boolean",
|
|
530
|
-
"defaultValue": "
|
|
531
|
-
"description": "Whether the
|
|
466
|
+
"defaultValue": "false",
|
|
467
|
+
"description": "Whether the highlighted item should be preserved when the pointer leaves the list."
|
|
532
468
|
},
|
|
533
469
|
{
|
|
534
|
-
"name": "
|
|
470
|
+
"name": "limit",
|
|
535
471
|
"required": false,
|
|
536
|
-
"type": "
|
|
537
|
-
"defaultValue": "
|
|
538
|
-
"description": ""
|
|
472
|
+
"type": "number",
|
|
473
|
+
"defaultValue": "-1",
|
|
474
|
+
"description": "The maximum number of items to display in the list."
|
|
539
475
|
},
|
|
540
476
|
{
|
|
541
|
-
"name": "
|
|
477
|
+
"name": "locale",
|
|
542
478
|
"required": false,
|
|
543
|
-
"type": "
|
|
479
|
+
"type": "LocalesArgument",
|
|
544
480
|
"defaultValue": null,
|
|
545
|
-
"description": "
|
|
481
|
+
"description": "The locale to use for string comparison.\nDefaults to the user's runtime locale."
|
|
546
482
|
},
|
|
547
483
|
{
|
|
548
|
-
"name": "
|
|
484
|
+
"name": "loopFocus",
|
|
549
485
|
"required": false,
|
|
550
|
-
"type": "
|
|
551
|
-
"defaultValue":
|
|
552
|
-
"description": "
|
|
486
|
+
"type": "boolean",
|
|
487
|
+
"defaultValue": "true",
|
|
488
|
+
"description": "Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.\nThe input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\nWhen disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>."
|
|
553
489
|
},
|
|
554
490
|
{
|
|
555
|
-
"name": "
|
|
491
|
+
"name": "modal",
|
|
556
492
|
"required": false,
|
|
557
|
-
"type": "
|
|
558
|
-
"defaultValue":
|
|
559
|
-
"description": "
|
|
493
|
+
"type": "boolean",
|
|
494
|
+
"defaultValue": "false",
|
|
495
|
+
"description": "Determines if the popup enters a modal state when open.\n- `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed."
|
|
560
496
|
},
|
|
561
497
|
{
|
|
562
|
-
"name": "
|
|
498
|
+
"name": "mode",
|
|
563
499
|
"required": false,
|
|
564
|
-
"type": "\"
|
|
565
|
-
"defaultValue": "
|
|
566
|
-
"description": ""
|
|
500
|
+
"type": "\"none\" | \"inline\" | \"list\" | \"both\"",
|
|
501
|
+
"defaultValue": "list",
|
|
502
|
+
"description": "Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.\n- `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.\n- `both`: items are dynamically filtered based on the input value, which will temporarily change based on the active item (inline autocompletion).\n- `inline`: items are static (not filtered), and the input value will temporarily change based on the active item (inline autocompletion).\n- `none`: items are static (not filtered), and the input value will not change based on the active item."
|
|
567
503
|
},
|
|
568
504
|
{
|
|
569
|
-
"name": "
|
|
505
|
+
"name": "name",
|
|
570
506
|
"required": false,
|
|
571
|
-
"type": "
|
|
507
|
+
"type": "string",
|
|
572
508
|
"defaultValue": null,
|
|
573
|
-
"description": "
|
|
509
|
+
"description": "Identifies the field when a form is submitted."
|
|
574
510
|
},
|
|
575
511
|
{
|
|
576
|
-
"name": "
|
|
512
|
+
"name": "onItemHighlighted",
|
|
577
513
|
"required": false,
|
|
578
|
-
"type": "
|
|
514
|
+
"type": "(\n highlightedValue: ItemValue,\n eventDetails: HighlightEventDetails\n) => void",
|
|
579
515
|
"defaultValue": null,
|
|
580
|
-
"description": "
|
|
516
|
+
"description": "Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering.\n- `'none'`: the highlight changed programmatically."
|
|
581
517
|
},
|
|
582
518
|
{
|
|
583
|
-
"name": "
|
|
519
|
+
"name": "onOpenChange",
|
|
584
520
|
"required": false,
|
|
585
|
-
"type": "
|
|
586
|
-
"defaultValue":
|
|
587
|
-
"description": ""
|
|
588
|
-
}
|
|
589
|
-
]
|
|
590
|
-
},
|
|
591
|
-
"subComponents": []
|
|
592
|
-
},
|
|
593
|
-
"callout": {
|
|
594
|
-
"root": {
|
|
595
|
-
"name": "Callout.Root",
|
|
596
|
-
"description": "Callout.Root — the banner container. Sets `variant` (tints surface, icon, and text) and lays\nout a leading `Callout.Icon` beside `Callout.Title` / `Callout.Description`. `maxWidth` caps\nthe banner so it reads as a block region, not full container width. A persistent content-flow\nelement — not a transient Toast, not a modal Alert Dialog.",
|
|
597
|
-
"props": [
|
|
521
|
+
"type": "(\n open: boolean,\n eventDetails: ChangeEventDetails\n) => void",
|
|
522
|
+
"defaultValue": null,
|
|
523
|
+
"description": "Event handler called when the popup is opened or closed."
|
|
524
|
+
},
|
|
598
525
|
{
|
|
599
|
-
"name": "
|
|
526
|
+
"name": "onOpenChangeComplete",
|
|
600
527
|
"required": false,
|
|
601
|
-
"type": "
|
|
602
|
-
"defaultValue":
|
|
603
|
-
"description": ""
|
|
528
|
+
"type": "(open: boolean) => void",
|
|
529
|
+
"defaultValue": null,
|
|
530
|
+
"description": "Event handler called after any animations complete when the popup is opened or closed."
|
|
604
531
|
},
|
|
605
532
|
{
|
|
606
|
-
"name": "
|
|
533
|
+
"name": "onValueChange",
|
|
607
534
|
"required": false,
|
|
608
|
-
"type": "
|
|
535
|
+
"type": "(\n value: string,\n eventDetails: ChangeEventDetails\n) => void",
|
|
609
536
|
"defaultValue": null,
|
|
610
|
-
"description": "
|
|
537
|
+
"description": "Event handler called when the input value of the autocomplete changes."
|
|
611
538
|
},
|
|
612
539
|
{
|
|
613
|
-
"name": "
|
|
540
|
+
"name": "open",
|
|
614
541
|
"required": false,
|
|
615
|
-
"type": "
|
|
616
|
-
"defaultValue":
|
|
617
|
-
"description": ""
|
|
618
|
-
}
|
|
619
|
-
]
|
|
620
|
-
},
|
|
621
|
-
"subComponents": [
|
|
622
|
-
{
|
|
623
|
-
"name": "Callout.Description",
|
|
624
|
-
"description": "Callout.Description — the message body, set in the editorial (grotesk) body voice.",
|
|
625
|
-
"props": [
|
|
626
|
-
{
|
|
627
|
-
"name": "ref",
|
|
628
|
-
"required": false,
|
|
629
|
-
"type": "Ref<HTMLDivElement>",
|
|
630
|
-
"defaultValue": null,
|
|
631
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
632
|
-
}
|
|
633
|
-
]
|
|
634
|
-
},
|
|
635
|
-
{
|
|
636
|
-
"name": "Callout.Icon",
|
|
637
|
-
"description": "Callout.Icon — the leading status glyph. Renders the variant's default icon when no children\nare passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by\ncopy) and inherits colour via `currentColor`.",
|
|
638
|
-
"props": [
|
|
639
|
-
{
|
|
640
|
-
"name": "ref",
|
|
641
|
-
"required": false,
|
|
642
|
-
"type": "Ref<HTMLDivElement>",
|
|
643
|
-
"defaultValue": null,
|
|
644
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
645
|
-
}
|
|
646
|
-
]
|
|
647
|
-
},
|
|
648
|
-
{
|
|
649
|
-
"name": "Callout.Title",
|
|
650
|
-
"description": "Callout.Title — an optional short heading, set in the mono UPPERCASE technical voice.",
|
|
651
|
-
"props": [
|
|
652
|
-
{
|
|
653
|
-
"name": "ref",
|
|
654
|
-
"required": false,
|
|
655
|
-
"type": "Ref<HTMLDivElement>",
|
|
656
|
-
"defaultValue": null,
|
|
657
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
658
|
-
}
|
|
659
|
-
]
|
|
660
|
-
}
|
|
661
|
-
]
|
|
662
|
-
},
|
|
663
|
-
"card": {
|
|
664
|
-
"root": {
|
|
665
|
-
"name": "Card.Root",
|
|
666
|
-
"description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) flip to contrast text and drop the border. `shadow` and\n`radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\n`shadow` defaults to `lg`; `shadow=\"none\"` gives the flat surface. It picks the elevation level only: how hard or\nspread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.",
|
|
667
|
-
"props": [
|
|
542
|
+
"type": "boolean",
|
|
543
|
+
"defaultValue": null,
|
|
544
|
+
"description": "Whether the popup is currently open. Use when controlled."
|
|
545
|
+
},
|
|
668
546
|
{
|
|
669
|
-
"name": "
|
|
547
|
+
"name": "openOnInputClick",
|
|
670
548
|
"required": false,
|
|
671
|
-
"type": "
|
|
672
|
-
"defaultValue": "
|
|
673
|
-
"description": ""
|
|
549
|
+
"type": "boolean",
|
|
550
|
+
"defaultValue": "false",
|
|
551
|
+
"description": "Whether the popup opens when clicking the input."
|
|
674
552
|
},
|
|
675
553
|
{
|
|
676
|
-
"name": "
|
|
554
|
+
"name": "readOnly",
|
|
677
555
|
"required": false,
|
|
678
|
-
"type": "
|
|
679
|
-
"defaultValue": "
|
|
680
|
-
"description": ""
|
|
556
|
+
"type": "boolean",
|
|
557
|
+
"defaultValue": "false",
|
|
558
|
+
"description": "Whether the user should be unable to choose a different option from the popup."
|
|
681
559
|
},
|
|
682
560
|
{
|
|
683
|
-
"name": "
|
|
561
|
+
"name": "required",
|
|
684
562
|
"required": false,
|
|
685
|
-
"type": "
|
|
686
|
-
"defaultValue": "
|
|
687
|
-
"description": ""
|
|
563
|
+
"type": "boolean",
|
|
564
|
+
"defaultValue": "false",
|
|
565
|
+
"description": "Whether the user must choose a value before submitting a form."
|
|
688
566
|
},
|
|
689
567
|
{
|
|
690
|
-
"name": "
|
|
568
|
+
"name": "style",
|
|
691
569
|
"required": false,
|
|
692
|
-
"type": "
|
|
570
|
+
"type": "CSSProperties",
|
|
693
571
|
"defaultValue": null,
|
|
694
|
-
"description": "
|
|
572
|
+
"description": ""
|
|
695
573
|
},
|
|
696
574
|
{
|
|
697
|
-
"name": "
|
|
575
|
+
"name": "submitOnItemClick",
|
|
698
576
|
"required": false,
|
|
699
|
-
"type": "
|
|
700
|
-
"defaultValue": "
|
|
701
|
-
"description": ""
|
|
577
|
+
"type": "boolean",
|
|
578
|
+
"defaultValue": "false",
|
|
579
|
+
"description": "Whether clicking an item should submit the autocomplete's owning form.\nBy default, clicking an item via a pointer or <kbd>Enter</kbd> key does not submit the owning form.\nUseful when the autocomplete is used as a single-field form search input."
|
|
702
580
|
},
|
|
703
581
|
{
|
|
704
|
-
"name": "
|
|
582
|
+
"name": "value",
|
|
705
583
|
"required": false,
|
|
706
|
-
"type": "
|
|
707
|
-
"defaultValue":
|
|
708
|
-
"description": ""
|
|
584
|
+
"type": "string | number | readonly string[]",
|
|
585
|
+
"defaultValue": null,
|
|
586
|
+
"description": "The input value of the autocomplete. Use when controlled."
|
|
709
587
|
},
|
|
710
588
|
{
|
|
711
|
-
"name": "
|
|
589
|
+
"name": "virtualized",
|
|
712
590
|
"required": false,
|
|
713
591
|
"type": "boolean",
|
|
714
|
-
"defaultValue": "
|
|
715
|
-
"description": ""
|
|
592
|
+
"defaultValue": "false",
|
|
593
|
+
"description": "Whether the items are being externally virtualized."
|
|
594
|
+
},
|
|
595
|
+
{
|
|
596
|
+
"name": "width",
|
|
597
|
+
"required": false,
|
|
598
|
+
"type": "\"auto\" | \"wide\" | \"full\" | null",
|
|
599
|
+
"defaultValue": "auto",
|
|
600
|
+
"description": "Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent."
|
|
716
601
|
}
|
|
717
602
|
]
|
|
718
603
|
},
|
|
719
604
|
"subComponents": [
|
|
720
605
|
{
|
|
721
|
-
"name": "
|
|
722
|
-
"description": "
|
|
606
|
+
"name": "Autocomplete.Arrow",
|
|
607
|
+
"description": "Autocomplete.Arrow — pointer arrow attached to the popup.",
|
|
723
608
|
"props": [
|
|
609
|
+
{
|
|
610
|
+
"name": "className",
|
|
611
|
+
"required": false,
|
|
612
|
+
"type": "string | ((state: ComboboxArrowState) => string)",
|
|
613
|
+
"defaultValue": null,
|
|
614
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
615
|
+
},
|
|
724
616
|
{
|
|
725
617
|
"name": "ref",
|
|
726
618
|
"required": false,
|
|
727
619
|
"type": "Ref<HTMLDivElement>",
|
|
728
620
|
"defaultValue": null,
|
|
729
621
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
622
|
+
},
|
|
623
|
+
{
|
|
624
|
+
"name": "render",
|
|
625
|
+
"required": false,
|
|
626
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxArrowState>",
|
|
627
|
+
"defaultValue": null,
|
|
628
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
"name": "style",
|
|
632
|
+
"required": false,
|
|
633
|
+
"type": "| CSSProperties\n| ((state: ComboboxArrowState) => CSSProperties)",
|
|
634
|
+
"defaultValue": null,
|
|
635
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
730
636
|
}
|
|
731
637
|
]
|
|
732
638
|
},
|
|
733
639
|
{
|
|
734
|
-
"name": "
|
|
735
|
-
"description": "
|
|
640
|
+
"name": "Autocomplete.Backdrop",
|
|
641
|
+
"description": "Autocomplete.Backdrop — overlay behind the popup (visible only in modal mode).",
|
|
736
642
|
"props": [
|
|
643
|
+
{
|
|
644
|
+
"name": "className",
|
|
645
|
+
"required": false,
|
|
646
|
+
"type": "| string\n| ((state: ComboboxBackdropState) => string)",
|
|
647
|
+
"defaultValue": null,
|
|
648
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
649
|
+
},
|
|
737
650
|
{
|
|
738
651
|
"name": "ref",
|
|
739
652
|
"required": false,
|
|
740
653
|
"type": "Ref<HTMLDivElement>",
|
|
741
654
|
"defaultValue": null,
|
|
742
655
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
656
|
+
},
|
|
657
|
+
{
|
|
658
|
+
"name": "render",
|
|
659
|
+
"required": false,
|
|
660
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxBackdropState>",
|
|
661
|
+
"defaultValue": null,
|
|
662
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
663
|
+
},
|
|
664
|
+
{
|
|
665
|
+
"name": "style",
|
|
666
|
+
"required": false,
|
|
667
|
+
"type": "| CSSProperties\n| ((state: ComboboxBackdropState) => CSSProperties)",
|
|
668
|
+
"defaultValue": null,
|
|
669
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
743
670
|
}
|
|
744
671
|
]
|
|
745
672
|
},
|
|
746
673
|
{
|
|
747
|
-
"name": "
|
|
748
|
-
"description": "
|
|
674
|
+
"name": "Autocomplete.Clear",
|
|
675
|
+
"description": "Autocomplete.Clear — button that clears the text. Without children it draws a cross.",
|
|
749
676
|
"props": [
|
|
677
|
+
{
|
|
678
|
+
"name": "className",
|
|
679
|
+
"required": false,
|
|
680
|
+
"type": "string | ((state: ComboboxClearState) => string)",
|
|
681
|
+
"defaultValue": null,
|
|
682
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
683
|
+
},
|
|
684
|
+
{
|
|
685
|
+
"name": "disabled",
|
|
686
|
+
"required": false,
|
|
687
|
+
"type": "boolean",
|
|
688
|
+
"defaultValue": "false",
|
|
689
|
+
"description": "Whether the component should ignore user interaction."
|
|
690
|
+
},
|
|
691
|
+
{
|
|
692
|
+
"name": "keepMounted",
|
|
693
|
+
"required": false,
|
|
694
|
+
"type": "boolean",
|
|
695
|
+
"defaultValue": "false",
|
|
696
|
+
"description": "Whether the component should remain mounted in the DOM when not visible."
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
"name": "nativeButton",
|
|
700
|
+
"required": false,
|
|
701
|
+
"type": "boolean",
|
|
702
|
+
"defaultValue": "true",
|
|
703
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
704
|
+
},
|
|
750
705
|
{
|
|
751
706
|
"name": "ref",
|
|
752
707
|
"required": false,
|
|
753
708
|
"type": "Ref<HTMLDivElement>",
|
|
754
709
|
"defaultValue": null,
|
|
755
710
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
711
|
+
},
|
|
712
|
+
{
|
|
713
|
+
"name": "render",
|
|
714
|
+
"required": false,
|
|
715
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxClearState>",
|
|
716
|
+
"defaultValue": null,
|
|
717
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
718
|
+
},
|
|
719
|
+
{
|
|
720
|
+
"name": "style",
|
|
721
|
+
"required": false,
|
|
722
|
+
"type": "| CSSProperties\n| ((state: ComboboxClearState) => CSSProperties)",
|
|
723
|
+
"defaultValue": null,
|
|
724
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
756
725
|
}
|
|
757
726
|
]
|
|
758
727
|
},
|
|
759
728
|
{
|
|
760
|
-
"name": "
|
|
761
|
-
"description": "
|
|
729
|
+
"name": "Autocomplete.Collection",
|
|
730
|
+
"description": "Autocomplete.Collection — renders a list of items inside a group.",
|
|
731
|
+
"props": []
|
|
732
|
+
},
|
|
733
|
+
{
|
|
734
|
+
"name": "Autocomplete.Empty",
|
|
735
|
+
"description": "Autocomplete.Empty — message shown while no item matches.",
|
|
762
736
|
"props": [
|
|
763
737
|
{
|
|
764
|
-
"name": "
|
|
738
|
+
"name": "className",
|
|
765
739
|
"required": false,
|
|
766
|
-
"type": "
|
|
767
|
-
"defaultValue":
|
|
768
|
-
"description": "
|
|
740
|
+
"type": "string | ((state: ComboboxEmptyState) => string)",
|
|
741
|
+
"defaultValue": null,
|
|
742
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
769
743
|
},
|
|
770
744
|
{
|
|
771
745
|
"name": "ref",
|
|
@@ -773,13 +747,41 @@
|
|
|
773
747
|
"type": "Ref<HTMLDivElement>",
|
|
774
748
|
"defaultValue": null,
|
|
775
749
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
750
|
+
},
|
|
751
|
+
{
|
|
752
|
+
"name": "render",
|
|
753
|
+
"required": false,
|
|
754
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxEmptyState>",
|
|
755
|
+
"defaultValue": null,
|
|
756
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
757
|
+
},
|
|
758
|
+
{
|
|
759
|
+
"name": "style",
|
|
760
|
+
"required": false,
|
|
761
|
+
"type": "| CSSProperties\n| ((state: ComboboxEmptyState) => CSSProperties)",
|
|
762
|
+
"defaultValue": null,
|
|
763
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
776
764
|
}
|
|
777
765
|
]
|
|
778
766
|
},
|
|
779
767
|
{
|
|
780
|
-
"name": "
|
|
781
|
-
"description": "
|
|
768
|
+
"name": "Autocomplete.Group",
|
|
769
|
+
"description": "Autocomplete.Group — wrapper around a grouped set of items.",
|
|
782
770
|
"props": [
|
|
771
|
+
{
|
|
772
|
+
"name": "className",
|
|
773
|
+
"required": false,
|
|
774
|
+
"type": "string | ((state: ComboboxGroupState) => string)",
|
|
775
|
+
"defaultValue": null,
|
|
776
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
777
|
+
},
|
|
778
|
+
{
|
|
779
|
+
"name": "items",
|
|
780
|
+
"required": false,
|
|
781
|
+
"type": "readonly any[]",
|
|
782
|
+
"defaultValue": null,
|
|
783
|
+
"description": "Items to be rendered within this group.\nWhen provided, child `Collection` components will use these items."
|
|
784
|
+
},
|
|
783
785
|
{
|
|
784
786
|
"name": "ref",
|
|
785
787
|
"required": false,
|
|
@@ -788,41 +790,1804 @@
|
|
|
788
790
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
789
791
|
},
|
|
790
792
|
{
|
|
791
|
-
"name": "
|
|
793
|
+
"name": "render",
|
|
792
794
|
"required": false,
|
|
793
|
-
"type": "|
|
|
794
|
-
"defaultValue":
|
|
795
|
-
"description": ""
|
|
795
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxGroupState>",
|
|
796
|
+
"defaultValue": null,
|
|
797
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
798
|
+
},
|
|
799
|
+
{
|
|
800
|
+
"name": "style",
|
|
801
|
+
"required": false,
|
|
802
|
+
"type": "| CSSProperties\n| ((state: ComboboxGroupState) => CSSProperties)",
|
|
803
|
+
"defaultValue": null,
|
|
804
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
796
805
|
}
|
|
797
806
|
]
|
|
798
|
-
}
|
|
799
|
-
|
|
800
|
-
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
|
|
821
|
-
|
|
807
|
+
},
|
|
808
|
+
{
|
|
809
|
+
"name": "Autocomplete.GroupLabel",
|
|
810
|
+
"description": "Autocomplete.GroupLabel — heading for an Autocomplete.Group.",
|
|
811
|
+
"props": [
|
|
812
|
+
{
|
|
813
|
+
"name": "className",
|
|
814
|
+
"required": false,
|
|
815
|
+
"type": "| string\n| ((state: ComboboxGroupLabelState) => string)",
|
|
816
|
+
"defaultValue": null,
|
|
817
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
818
|
+
},
|
|
819
|
+
{
|
|
820
|
+
"name": "ref",
|
|
821
|
+
"required": false,
|
|
822
|
+
"type": "Ref<HTMLDivElement>",
|
|
823
|
+
"defaultValue": null,
|
|
824
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
825
|
+
},
|
|
826
|
+
{
|
|
827
|
+
"name": "render",
|
|
828
|
+
"required": false,
|
|
829
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxGroupLabelState>",
|
|
830
|
+
"defaultValue": null,
|
|
831
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
832
|
+
},
|
|
833
|
+
{
|
|
834
|
+
"name": "style",
|
|
835
|
+
"required": false,
|
|
836
|
+
"type": "| CSSProperties\n| ((state: ComboboxGroupLabelState) => CSSProperties)",
|
|
837
|
+
"defaultValue": null,
|
|
838
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
839
|
+
}
|
|
840
|
+
]
|
|
841
|
+
},
|
|
842
|
+
{
|
|
843
|
+
"name": "Autocomplete.Icon",
|
|
844
|
+
"description": "Autocomplete.Icon — visual indicator (chevron) inside the trigger.",
|
|
845
|
+
"props": [
|
|
846
|
+
{
|
|
847
|
+
"name": "className",
|
|
848
|
+
"required": false,
|
|
849
|
+
"type": "string | ((state: ComboboxIconState) => string)",
|
|
850
|
+
"defaultValue": null,
|
|
851
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
852
|
+
},
|
|
853
|
+
{
|
|
854
|
+
"name": "ref",
|
|
855
|
+
"required": false,
|
|
856
|
+
"type": "Ref<HTMLDivElement>",
|
|
857
|
+
"defaultValue": null,
|
|
858
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
859
|
+
},
|
|
860
|
+
{
|
|
861
|
+
"name": "render",
|
|
862
|
+
"required": false,
|
|
863
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxIconState>",
|
|
864
|
+
"defaultValue": null,
|
|
865
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
866
|
+
},
|
|
867
|
+
{
|
|
868
|
+
"name": "style",
|
|
869
|
+
"required": false,
|
|
870
|
+
"type": "| CSSProperties\n| ((state: ComboboxIconState) => CSSProperties)",
|
|
871
|
+
"defaultValue": null,
|
|
872
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
873
|
+
}
|
|
874
|
+
]
|
|
875
|
+
},
|
|
876
|
+
{
|
|
877
|
+
"name": "Autocomplete.Input",
|
|
878
|
+
"description": "Autocomplete.Input — the text input. Its text is the value.",
|
|
879
|
+
"props": [
|
|
880
|
+
{
|
|
881
|
+
"name": "className",
|
|
882
|
+
"required": false,
|
|
883
|
+
"type": "string | ((state: ComboboxInputState) => string)",
|
|
884
|
+
"defaultValue": null,
|
|
885
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
886
|
+
},
|
|
887
|
+
{
|
|
888
|
+
"name": "disabled",
|
|
889
|
+
"required": false,
|
|
890
|
+
"type": "boolean",
|
|
891
|
+
"defaultValue": "false",
|
|
892
|
+
"description": "Whether the component should ignore user interaction."
|
|
893
|
+
},
|
|
894
|
+
{
|
|
895
|
+
"name": "ref",
|
|
896
|
+
"required": false,
|
|
897
|
+
"type": "Ref<HTMLDivElement>",
|
|
898
|
+
"defaultValue": null,
|
|
899
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
900
|
+
},
|
|
901
|
+
{
|
|
902
|
+
"name": "render",
|
|
903
|
+
"required": false,
|
|
904
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxInputState>",
|
|
905
|
+
"defaultValue": null,
|
|
906
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
907
|
+
},
|
|
908
|
+
{
|
|
909
|
+
"name": "style",
|
|
910
|
+
"required": false,
|
|
911
|
+
"type": "| CSSProperties\n| ((state: ComboboxInputState) => CSSProperties)",
|
|
912
|
+
"defaultValue": null,
|
|
913
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
914
|
+
}
|
|
915
|
+
]
|
|
916
|
+
},
|
|
917
|
+
{
|
|
918
|
+
"name": "Autocomplete.InputGroup",
|
|
919
|
+
"description": "Autocomplete.InputGroup — the field box that holds the input, clear button, and trigger.",
|
|
920
|
+
"props": [
|
|
921
|
+
{
|
|
922
|
+
"name": "className",
|
|
923
|
+
"required": false,
|
|
924
|
+
"type": "| string\n| ((state: AutocompleteInputGroupState) => string)",
|
|
925
|
+
"defaultValue": null,
|
|
926
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
927
|
+
},
|
|
928
|
+
{
|
|
929
|
+
"name": "ref",
|
|
930
|
+
"required": false,
|
|
931
|
+
"type": "Ref<HTMLDivElement>",
|
|
932
|
+
"defaultValue": null,
|
|
933
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"name": "render",
|
|
937
|
+
"required": false,
|
|
938
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<\n HTMLProps,\n AutocompleteInputGroupState\n >",
|
|
939
|
+
"defaultValue": null,
|
|
940
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
941
|
+
},
|
|
942
|
+
{
|
|
943
|
+
"name": "style",
|
|
944
|
+
"required": false,
|
|
945
|
+
"type": "| CSSProperties\n| ((state: AutocompleteInputGroupState) => CSSProperties)",
|
|
946
|
+
"defaultValue": null,
|
|
947
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
948
|
+
}
|
|
949
|
+
]
|
|
950
|
+
},
|
|
951
|
+
{
|
|
952
|
+
"name": "Autocomplete.Item",
|
|
953
|
+
"description": "Autocomplete.Item — individual suggestion. It carries no selection state, so it has no indicator column.",
|
|
954
|
+
"props": [
|
|
955
|
+
{
|
|
956
|
+
"name": "className",
|
|
957
|
+
"required": false,
|
|
958
|
+
"type": "| string\n| ((state: AutocompleteItemState) => string)",
|
|
959
|
+
"defaultValue": null,
|
|
960
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
961
|
+
},
|
|
962
|
+
{
|
|
963
|
+
"name": "disabled",
|
|
964
|
+
"required": false,
|
|
965
|
+
"type": "boolean",
|
|
966
|
+
"defaultValue": "false",
|
|
967
|
+
"description": "Whether the component should ignore user interaction."
|
|
968
|
+
},
|
|
969
|
+
{
|
|
970
|
+
"name": "index",
|
|
971
|
+
"required": false,
|
|
972
|
+
"type": "number",
|
|
973
|
+
"defaultValue": null,
|
|
974
|
+
"description": "The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM."
|
|
975
|
+
},
|
|
976
|
+
{
|
|
977
|
+
"name": "nativeButton",
|
|
978
|
+
"required": false,
|
|
979
|
+
"type": "boolean",
|
|
980
|
+
"defaultValue": "true",
|
|
981
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
982
|
+
},
|
|
983
|
+
{
|
|
984
|
+
"name": "onClick",
|
|
985
|
+
"required": false,
|
|
986
|
+
"type": "(\n event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>\n) => void",
|
|
987
|
+
"defaultValue": null,
|
|
988
|
+
"description": "An optional click handler for the item when selected.\nIt fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus."
|
|
989
|
+
},
|
|
990
|
+
{
|
|
991
|
+
"name": "ref",
|
|
992
|
+
"required": false,
|
|
993
|
+
"type": "Ref<HTMLDivElement>",
|
|
994
|
+
"defaultValue": null,
|
|
995
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
996
|
+
},
|
|
997
|
+
{
|
|
998
|
+
"name": "render",
|
|
999
|
+
"required": false,
|
|
1000
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AutocompleteItemState>",
|
|
1001
|
+
"defaultValue": null,
|
|
1002
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1003
|
+
},
|
|
1004
|
+
{
|
|
1005
|
+
"name": "style",
|
|
1006
|
+
"required": false,
|
|
1007
|
+
"type": "| CSSProperties\n| ((state: AutocompleteItemState) => CSSProperties)",
|
|
1008
|
+
"defaultValue": null,
|
|
1009
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1010
|
+
},
|
|
1011
|
+
{
|
|
1012
|
+
"name": "value",
|
|
1013
|
+
"required": true,
|
|
1014
|
+
"type": "any",
|
|
1015
|
+
"defaultValue": null,
|
|
1016
|
+
"description": ""
|
|
1017
|
+
}
|
|
1018
|
+
]
|
|
1019
|
+
},
|
|
1020
|
+
{
|
|
1021
|
+
"name": "Autocomplete.ItemDescription",
|
|
1022
|
+
"description": "Autocomplete.ItemDescription — a muted second line under an item's text.",
|
|
1023
|
+
"props": [
|
|
1024
|
+
{
|
|
1025
|
+
"name": "ref",
|
|
1026
|
+
"required": false,
|
|
1027
|
+
"type": "Ref<HTMLDivElement>",
|
|
1028
|
+
"defaultValue": null,
|
|
1029
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1030
|
+
}
|
|
1031
|
+
]
|
|
1032
|
+
},
|
|
1033
|
+
{
|
|
1034
|
+
"name": "Autocomplete.ItemText",
|
|
1035
|
+
"description": "Autocomplete.ItemText — text label for an item.",
|
|
1036
|
+
"props": [
|
|
1037
|
+
{
|
|
1038
|
+
"name": "ref",
|
|
1039
|
+
"required": false,
|
|
1040
|
+
"type": "Ref<HTMLDivElement>",
|
|
1041
|
+
"defaultValue": null,
|
|
1042
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1043
|
+
}
|
|
1044
|
+
]
|
|
1045
|
+
},
|
|
1046
|
+
{
|
|
1047
|
+
"name": "Autocomplete.List",
|
|
1048
|
+
"description": "Autocomplete.List — items container. An `inline` list keeps the height it had when it mounted while it filters.",
|
|
1049
|
+
"props": [
|
|
1050
|
+
{
|
|
1051
|
+
"name": "className",
|
|
1052
|
+
"required": false,
|
|
1053
|
+
"type": "string | ((state: ComboboxListState) => string)",
|
|
1054
|
+
"defaultValue": null,
|
|
1055
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1056
|
+
},
|
|
1057
|
+
{
|
|
1058
|
+
"name": "ref",
|
|
1059
|
+
"required": false,
|
|
1060
|
+
"type": "Ref<HTMLDivElement>",
|
|
1061
|
+
"defaultValue": null,
|
|
1062
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1063
|
+
},
|
|
1064
|
+
{
|
|
1065
|
+
"name": "render",
|
|
1066
|
+
"required": false,
|
|
1067
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxListState>",
|
|
1068
|
+
"defaultValue": null,
|
|
1069
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1070
|
+
},
|
|
1071
|
+
{
|
|
1072
|
+
"name": "style",
|
|
1073
|
+
"required": false,
|
|
1074
|
+
"type": "| CSSProperties\n| ((state: ComboboxListState) => CSSProperties)",
|
|
1075
|
+
"defaultValue": null,
|
|
1076
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1077
|
+
}
|
|
1078
|
+
]
|
|
1079
|
+
},
|
|
1080
|
+
{
|
|
1081
|
+
"name": "Autocomplete.Popup",
|
|
1082
|
+
"description": "Autocomplete.Popup — dropdown surface. It keeps the height it had when it opened while the list filters.",
|
|
1083
|
+
"props": [
|
|
1084
|
+
{
|
|
1085
|
+
"name": "className",
|
|
1086
|
+
"required": false,
|
|
1087
|
+
"type": "string | ((state: ComboboxPopupState) => string)",
|
|
1088
|
+
"defaultValue": null,
|
|
1089
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1090
|
+
},
|
|
1091
|
+
{
|
|
1092
|
+
"name": "finalFocus",
|
|
1093
|
+
"required": false,
|
|
1094
|
+
"type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n closeType: InteractionType\n ) => boolean | void | HTMLElement | null)",
|
|
1095
|
+
"defaultValue": null,
|
|
1096
|
+
"description": "Determines the element to focus when the popup is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."
|
|
1097
|
+
},
|
|
1098
|
+
{
|
|
1099
|
+
"name": "initialFocus",
|
|
1100
|
+
"required": false,
|
|
1101
|
+
"type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n openType: InteractionType\n ) => boolean | void | HTMLElement | null)",
|
|
1102
|
+
"defaultValue": null,
|
|
1103
|
+
"description": "Determines the element to focus when the popup is opened.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."
|
|
1104
|
+
},
|
|
1105
|
+
{
|
|
1106
|
+
"name": "ref",
|
|
1107
|
+
"required": false,
|
|
1108
|
+
"type": "Ref<HTMLDivElement>",
|
|
1109
|
+
"defaultValue": null,
|
|
1110
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1111
|
+
},
|
|
1112
|
+
{
|
|
1113
|
+
"name": "render",
|
|
1114
|
+
"required": false,
|
|
1115
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPopupState>",
|
|
1116
|
+
"defaultValue": null,
|
|
1117
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1118
|
+
},
|
|
1119
|
+
{
|
|
1120
|
+
"name": "style",
|
|
1121
|
+
"required": false,
|
|
1122
|
+
"type": "| CSSProperties\n| ((state: ComboboxPopupState) => CSSProperties)",
|
|
1123
|
+
"defaultValue": null,
|
|
1124
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1125
|
+
}
|
|
1126
|
+
]
|
|
1127
|
+
},
|
|
1128
|
+
{
|
|
1129
|
+
"name": "Autocomplete.Portal",
|
|
1130
|
+
"description": "Autocomplete.Portal — portals the popup tree to document.body (or a custom container).",
|
|
1131
|
+
"props": [
|
|
1132
|
+
{
|
|
1133
|
+
"name": "className",
|
|
1134
|
+
"required": false,
|
|
1135
|
+
"type": "string | ((state: ComboboxPortalState) => string)",
|
|
1136
|
+
"defaultValue": null,
|
|
1137
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1138
|
+
},
|
|
1139
|
+
{
|
|
1140
|
+
"name": "container",
|
|
1141
|
+
"required": false,
|
|
1142
|
+
"type": "| HTMLElement\n| ShadowRoot\n| RefObject<HTMLElement | ShadowRoot | null>\n| null",
|
|
1143
|
+
"defaultValue": null,
|
|
1144
|
+
"description": "A parent element to render the portal element into."
|
|
1145
|
+
},
|
|
1146
|
+
{
|
|
1147
|
+
"name": "keepMounted",
|
|
1148
|
+
"required": false,
|
|
1149
|
+
"type": "boolean",
|
|
1150
|
+
"defaultValue": "false",
|
|
1151
|
+
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
|
|
1152
|
+
},
|
|
1153
|
+
{
|
|
1154
|
+
"name": "ref",
|
|
1155
|
+
"required": false,
|
|
1156
|
+
"type": "Ref<HTMLDivElement>",
|
|
1157
|
+
"defaultValue": null,
|
|
1158
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1159
|
+
},
|
|
1160
|
+
{
|
|
1161
|
+
"name": "render",
|
|
1162
|
+
"required": false,
|
|
1163
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPortalState>",
|
|
1164
|
+
"defaultValue": null,
|
|
1165
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1166
|
+
},
|
|
1167
|
+
{
|
|
1168
|
+
"name": "style",
|
|
1169
|
+
"required": false,
|
|
1170
|
+
"type": "| CSSProperties\n| ((state: ComboboxPortalState) => CSSProperties)",
|
|
1171
|
+
"defaultValue": null,
|
|
1172
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1173
|
+
}
|
|
1174
|
+
]
|
|
1175
|
+
},
|
|
1176
|
+
{
|
|
1177
|
+
"name": "Autocomplete.Positioner",
|
|
1178
|
+
"description": "Autocomplete.Positioner — positions the popup relative to the field.",
|
|
1179
|
+
"props": [
|
|
1180
|
+
{
|
|
1181
|
+
"name": "align",
|
|
1182
|
+
"required": false,
|
|
1183
|
+
"type": "Align",
|
|
1184
|
+
"defaultValue": "start",
|
|
1185
|
+
"description": "How to align the popup relative to the specified side."
|
|
1186
|
+
},
|
|
1187
|
+
{
|
|
1188
|
+
"name": "alignOffset",
|
|
1189
|
+
"required": false,
|
|
1190
|
+
"type": "number | OffsetFunction",
|
|
1191
|
+
"defaultValue": "0",
|
|
1192
|
+
"description": "Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n alignOffset={({ side, align, anchor, positioner }) => {\n return side === 'top' || side === 'bottom'\n ? anchor.width\n : anchor.height;\n }}\n/>\n```"
|
|
1193
|
+
},
|
|
1194
|
+
{
|
|
1195
|
+
"name": "anchor",
|
|
1196
|
+
"required": false,
|
|
1197
|
+
"type": "| Element\n| VirtualElement\n| RefObject<Element | null>\n| (() => Element | VirtualElement | null)\n| null",
|
|
1198
|
+
"defaultValue": null,
|
|
1199
|
+
"description": "An element to position the popup against.\nBy default, the popup will be positioned against the trigger."
|
|
1200
|
+
},
|
|
1201
|
+
{
|
|
1202
|
+
"name": "arrowPadding",
|
|
1203
|
+
"required": false,
|
|
1204
|
+
"type": "number",
|
|
1205
|
+
"defaultValue": "5",
|
|
1206
|
+
"description": "Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup."
|
|
1207
|
+
},
|
|
1208
|
+
{
|
|
1209
|
+
"name": "className",
|
|
1210
|
+
"required": false,
|
|
1211
|
+
"type": "| string\n| ((state: ComboboxPositionerState) => string)",
|
|
1212
|
+
"defaultValue": null,
|
|
1213
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1214
|
+
},
|
|
1215
|
+
{
|
|
1216
|
+
"name": "collisionAvoidance",
|
|
1217
|
+
"required": false,
|
|
1218
|
+
"type": "CollisionAvoidance",
|
|
1219
|
+
"defaultValue": null,
|
|
1220
|
+
"description": "Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side\n (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within\n the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the\n alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the\npreferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first\n (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first\n (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.\nIf `align` is omitted, it defaults to `'flip'`.\n@example ```jsx\n<Positioner\n collisionAvoidance={{\n side: 'shift',\n align: 'shift',\n fallbackAxisSide: 'none',\n }}\n/>\n```"
|
|
1221
|
+
},
|
|
1222
|
+
{
|
|
1223
|
+
"name": "collisionBoundary",
|
|
1224
|
+
"required": false,
|
|
1225
|
+
"type": "Boundary",
|
|
1226
|
+
"defaultValue": "clipping-ancestors",
|
|
1227
|
+
"description": "An element or a rectangle that delimits the area that the popup is confined to."
|
|
1228
|
+
},
|
|
1229
|
+
{
|
|
1230
|
+
"name": "collisionPadding",
|
|
1231
|
+
"required": false,
|
|
1232
|
+
"type": "Padding",
|
|
1233
|
+
"defaultValue": "5",
|
|
1234
|
+
"description": "Additional space to maintain from the edge of the collision boundary."
|
|
1235
|
+
},
|
|
1236
|
+
{
|
|
1237
|
+
"name": "disableAnchorTracking",
|
|
1238
|
+
"required": false,
|
|
1239
|
+
"type": "boolean",
|
|
1240
|
+
"defaultValue": "false",
|
|
1241
|
+
"description": "Whether to disable the popup from tracking any layout shift of its positioning anchor."
|
|
1242
|
+
},
|
|
1243
|
+
{
|
|
1244
|
+
"name": "positionMethod",
|
|
1245
|
+
"required": false,
|
|
1246
|
+
"type": "\"absolute\" | \"fixed\"",
|
|
1247
|
+
"defaultValue": "absolute",
|
|
1248
|
+
"description": "Determines which CSS `position` property to use."
|
|
1249
|
+
},
|
|
1250
|
+
{
|
|
1251
|
+
"name": "ref",
|
|
1252
|
+
"required": false,
|
|
1253
|
+
"type": "Ref<HTMLDivElement>",
|
|
1254
|
+
"defaultValue": null,
|
|
1255
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1256
|
+
},
|
|
1257
|
+
{
|
|
1258
|
+
"name": "render",
|
|
1259
|
+
"required": false,
|
|
1260
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPositionerState>",
|
|
1261
|
+
"defaultValue": null,
|
|
1262
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1263
|
+
},
|
|
1264
|
+
{
|
|
1265
|
+
"name": "side",
|
|
1266
|
+
"required": false,
|
|
1267
|
+
"type": "Side",
|
|
1268
|
+
"defaultValue": "bottom",
|
|
1269
|
+
"description": "Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."
|
|
1270
|
+
},
|
|
1271
|
+
{
|
|
1272
|
+
"name": "sideOffset",
|
|
1273
|
+
"required": false,
|
|
1274
|
+
"type": "number | OffsetFunction",
|
|
1275
|
+
"defaultValue": "4",
|
|
1276
|
+
"description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n sideOffset={({ side, align, anchor, positioner }) => {\n return side === 'top' || side === 'bottom'\n ? anchor.height\n : anchor.width;\n }}\n/>\n```"
|
|
1277
|
+
},
|
|
1278
|
+
{
|
|
1279
|
+
"name": "sticky",
|
|
1280
|
+
"required": false,
|
|
1281
|
+
"type": "boolean",
|
|
1282
|
+
"defaultValue": "false",
|
|
1283
|
+
"description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
"name": "style",
|
|
1287
|
+
"required": false,
|
|
1288
|
+
"type": "| CSSProperties\n| ((state: ComboboxPositionerState) => CSSProperties)",
|
|
1289
|
+
"defaultValue": null,
|
|
1290
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1291
|
+
}
|
|
1292
|
+
]
|
|
1293
|
+
},
|
|
1294
|
+
{
|
|
1295
|
+
"name": "Autocomplete.Row",
|
|
1296
|
+
"description": "Autocomplete.Row — one row of a `grid` list.",
|
|
1297
|
+
"props": [
|
|
1298
|
+
{
|
|
1299
|
+
"name": "className",
|
|
1300
|
+
"required": false,
|
|
1301
|
+
"type": "string | ((state: ComboboxRowState) => string)",
|
|
1302
|
+
"defaultValue": null,
|
|
1303
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1304
|
+
},
|
|
1305
|
+
{
|
|
1306
|
+
"name": "ref",
|
|
1307
|
+
"required": false,
|
|
1308
|
+
"type": "Ref<HTMLDivElement>",
|
|
1309
|
+
"defaultValue": null,
|
|
1310
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1311
|
+
},
|
|
1312
|
+
{
|
|
1313
|
+
"name": "render",
|
|
1314
|
+
"required": false,
|
|
1315
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxRowState>",
|
|
1316
|
+
"defaultValue": null,
|
|
1317
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1318
|
+
},
|
|
1319
|
+
{
|
|
1320
|
+
"name": "style",
|
|
1321
|
+
"required": false,
|
|
1322
|
+
"type": "| CSSProperties\n| ((state: ComboboxRowState) => CSSProperties)",
|
|
1323
|
+
"defaultValue": null,
|
|
1324
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1325
|
+
}
|
|
1326
|
+
]
|
|
1327
|
+
},
|
|
1328
|
+
{
|
|
1329
|
+
"name": "Autocomplete.Separator",
|
|
1330
|
+
"description": "Autocomplete.Separator — thin divider between items.",
|
|
1331
|
+
"props": [
|
|
1332
|
+
{
|
|
1333
|
+
"name": "className",
|
|
1334
|
+
"required": false,
|
|
1335
|
+
"type": "string | ((state: SeparatorState) => string)",
|
|
1336
|
+
"defaultValue": null,
|
|
1337
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1338
|
+
},
|
|
1339
|
+
{
|
|
1340
|
+
"name": "orientation",
|
|
1341
|
+
"required": false,
|
|
1342
|
+
"type": "Orientation",
|
|
1343
|
+
"defaultValue": "horizontal",
|
|
1344
|
+
"description": "The orientation of the separator."
|
|
1345
|
+
},
|
|
1346
|
+
{
|
|
1347
|
+
"name": "ref",
|
|
1348
|
+
"required": false,
|
|
1349
|
+
"type": "Ref<HTMLDivElement>",
|
|
1350
|
+
"defaultValue": null,
|
|
1351
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1352
|
+
},
|
|
1353
|
+
{
|
|
1354
|
+
"name": "render",
|
|
1355
|
+
"required": false,
|
|
1356
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, SeparatorState>",
|
|
1357
|
+
"defaultValue": null,
|
|
1358
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1359
|
+
},
|
|
1360
|
+
{
|
|
1361
|
+
"name": "style",
|
|
1362
|
+
"required": false,
|
|
1363
|
+
"type": "| CSSProperties\n| ((state: SeparatorState) => CSSProperties)",
|
|
1364
|
+
"defaultValue": null,
|
|
1365
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1366
|
+
}
|
|
1367
|
+
]
|
|
1368
|
+
},
|
|
1369
|
+
{
|
|
1370
|
+
"name": "Autocomplete.Status",
|
|
1371
|
+
"description": "Autocomplete.Status — live-region line for loading and result counts, announced to screen readers.",
|
|
1372
|
+
"props": [
|
|
1373
|
+
{
|
|
1374
|
+
"name": "className",
|
|
1375
|
+
"required": false,
|
|
1376
|
+
"type": "string | ((state: ComboboxStatusState) => string)",
|
|
1377
|
+
"defaultValue": null,
|
|
1378
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1379
|
+
},
|
|
1380
|
+
{
|
|
1381
|
+
"name": "ref",
|
|
1382
|
+
"required": false,
|
|
1383
|
+
"type": "Ref<HTMLDivElement>",
|
|
1384
|
+
"defaultValue": null,
|
|
1385
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1386
|
+
},
|
|
1387
|
+
{
|
|
1388
|
+
"name": "render",
|
|
1389
|
+
"required": false,
|
|
1390
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxStatusState>",
|
|
1391
|
+
"defaultValue": null,
|
|
1392
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1393
|
+
},
|
|
1394
|
+
{
|
|
1395
|
+
"name": "style",
|
|
1396
|
+
"required": false,
|
|
1397
|
+
"type": "| CSSProperties\n| ((state: ComboboxStatusState) => CSSProperties)",
|
|
1398
|
+
"defaultValue": null,
|
|
1399
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1400
|
+
}
|
|
1401
|
+
]
|
|
1402
|
+
},
|
|
1403
|
+
{
|
|
1404
|
+
"name": "Autocomplete.Trigger",
|
|
1405
|
+
"description": "Autocomplete.Trigger — button that opens the popup. Without children it draws a chevron.",
|
|
1406
|
+
"props": [
|
|
1407
|
+
{
|
|
1408
|
+
"name": "className",
|
|
1409
|
+
"required": false,
|
|
1410
|
+
"type": "| string\n| ((state: AutocompleteTriggerState) => string)",
|
|
1411
|
+
"defaultValue": null,
|
|
1412
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1413
|
+
},
|
|
1414
|
+
{
|
|
1415
|
+
"name": "disabled",
|
|
1416
|
+
"required": false,
|
|
1417
|
+
"type": "boolean",
|
|
1418
|
+
"defaultValue": "false",
|
|
1419
|
+
"description": "Whether the component should ignore user interaction."
|
|
1420
|
+
},
|
|
1421
|
+
{
|
|
1422
|
+
"name": "nativeButton",
|
|
1423
|
+
"required": false,
|
|
1424
|
+
"type": "boolean",
|
|
1425
|
+
"defaultValue": "true",
|
|
1426
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
1427
|
+
},
|
|
1428
|
+
{
|
|
1429
|
+
"name": "ref",
|
|
1430
|
+
"required": false,
|
|
1431
|
+
"type": "Ref<HTMLDivElement>",
|
|
1432
|
+
"defaultValue": null,
|
|
1433
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1434
|
+
},
|
|
1435
|
+
{
|
|
1436
|
+
"name": "render",
|
|
1437
|
+
"required": false,
|
|
1438
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AutocompleteTriggerState>",
|
|
1439
|
+
"defaultValue": null,
|
|
1440
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1441
|
+
},
|
|
1442
|
+
{
|
|
1443
|
+
"name": "style",
|
|
1444
|
+
"required": false,
|
|
1445
|
+
"type": "| CSSProperties\n| ((state: AutocompleteTriggerState) => CSSProperties)",
|
|
1446
|
+
"defaultValue": null,
|
|
1447
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1448
|
+
}
|
|
1449
|
+
]
|
|
1450
|
+
},
|
|
1451
|
+
{
|
|
1452
|
+
"name": "Autocomplete.Value",
|
|
1453
|
+
"description": "Autocomplete.Value — renders the input text.",
|
|
1454
|
+
"props": []
|
|
1455
|
+
}
|
|
1456
|
+
]
|
|
1457
|
+
},
|
|
1458
|
+
"avatar": {
|
|
1459
|
+
"root": {
|
|
1460
|
+
"name": "Avatar.Root",
|
|
1461
|
+
"description": "Avatar.Root — a round badge that stands for a person. Also called a profile picture or user badge.\n\nWithout `aria-label` or `aria-labelledby` it is decorative and hidden from assistive tech, for use next to a visible\nname. With a label it is announced as an image with that name.",
|
|
1462
|
+
"props": [
|
|
1463
|
+
{
|
|
1464
|
+
"name": "className",
|
|
1465
|
+
"required": false,
|
|
1466
|
+
"type": "string | ((state: AvatarRootState) => string)",
|
|
1467
|
+
"defaultValue": null,
|
|
1468
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1469
|
+
},
|
|
1470
|
+
{
|
|
1471
|
+
"name": "context",
|
|
1472
|
+
"required": false,
|
|
1473
|
+
"type": "\"default\" | \"oncolor\" | null",
|
|
1474
|
+
"defaultValue": "default",
|
|
1475
|
+
"description": ""
|
|
1476
|
+
},
|
|
1477
|
+
{
|
|
1478
|
+
"name": "ref",
|
|
1479
|
+
"required": false,
|
|
1480
|
+
"type": "Ref<HTMLSpanElement>",
|
|
1481
|
+
"defaultValue": null,
|
|
1482
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1483
|
+
},
|
|
1484
|
+
{
|
|
1485
|
+
"name": "render",
|
|
1486
|
+
"required": false,
|
|
1487
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AvatarRootState>",
|
|
1488
|
+
"defaultValue": null,
|
|
1489
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1490
|
+
},
|
|
1491
|
+
{
|
|
1492
|
+
"name": "size",
|
|
1493
|
+
"required": false,
|
|
1494
|
+
"type": "\"sm\" | \"md\" | \"lg\" | null",
|
|
1495
|
+
"defaultValue": "md",
|
|
1496
|
+
"description": ""
|
|
1497
|
+
},
|
|
1498
|
+
{
|
|
1499
|
+
"name": "style",
|
|
1500
|
+
"required": false,
|
|
1501
|
+
"type": "| CSSProperties\n| ((state: AvatarRootState) => CSSProperties)",
|
|
1502
|
+
"defaultValue": null,
|
|
1503
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1504
|
+
}
|
|
1505
|
+
]
|
|
1506
|
+
},
|
|
1507
|
+
"subComponents": [
|
|
1508
|
+
{
|
|
1509
|
+
"name": "Avatar.Fallback",
|
|
1510
|
+
"description": "Avatar.Fallback — the initials the consumer passes, one or two letters. Without children it shows a person glyph.\nIt derives nothing from a name or email.",
|
|
1511
|
+
"props": [
|
|
1512
|
+
{
|
|
1513
|
+
"name": "className",
|
|
1514
|
+
"required": false,
|
|
1515
|
+
"type": "string | ((state: AvatarFallbackState) => string)",
|
|
1516
|
+
"defaultValue": null,
|
|
1517
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1518
|
+
},
|
|
1519
|
+
{
|
|
1520
|
+
"name": "delay",
|
|
1521
|
+
"required": false,
|
|
1522
|
+
"type": "number",
|
|
1523
|
+
"defaultValue": null,
|
|
1524
|
+
"description": "How long to wait before showing the fallback. Specified in milliseconds."
|
|
1525
|
+
},
|
|
1526
|
+
{
|
|
1527
|
+
"name": "ref",
|
|
1528
|
+
"required": false,
|
|
1529
|
+
"type": "Ref<HTMLSpanElement>",
|
|
1530
|
+
"defaultValue": null,
|
|
1531
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1532
|
+
},
|
|
1533
|
+
{
|
|
1534
|
+
"name": "render",
|
|
1535
|
+
"required": false,
|
|
1536
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AvatarFallbackState>",
|
|
1537
|
+
"defaultValue": null,
|
|
1538
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1539
|
+
},
|
|
1540
|
+
{
|
|
1541
|
+
"name": "style",
|
|
1542
|
+
"required": false,
|
|
1543
|
+
"type": "| CSSProperties\n| ((state: AvatarFallbackState) => CSSProperties)",
|
|
1544
|
+
"defaultValue": null,
|
|
1545
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1546
|
+
}
|
|
1547
|
+
]
|
|
1548
|
+
},
|
|
1549
|
+
{
|
|
1550
|
+
"name": "Avatar.Image",
|
|
1551
|
+
"description": "Avatar.Image — the person's photo, cropped to the circle. It shows once `src` has loaded; until then, and when it\nfails, `Avatar.Fallback` shows instead.",
|
|
1552
|
+
"props": [
|
|
1553
|
+
{
|
|
1554
|
+
"name": "className",
|
|
1555
|
+
"required": false,
|
|
1556
|
+
"type": "string | ((state: AvatarImageState) => string)",
|
|
1557
|
+
"defaultValue": null,
|
|
1558
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1559
|
+
},
|
|
1560
|
+
{
|
|
1561
|
+
"name": "onLoadingStatusChange",
|
|
1562
|
+
"required": false,
|
|
1563
|
+
"type": "(status: ImageLoadingStatus) => void",
|
|
1564
|
+
"defaultValue": null,
|
|
1565
|
+
"description": "Callback fired when the loading status changes."
|
|
1566
|
+
},
|
|
1567
|
+
{
|
|
1568
|
+
"name": "ref",
|
|
1569
|
+
"required": false,
|
|
1570
|
+
"type": "Ref<HTMLSpanElement>",
|
|
1571
|
+
"defaultValue": null,
|
|
1572
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1573
|
+
},
|
|
1574
|
+
{
|
|
1575
|
+
"name": "render",
|
|
1576
|
+
"required": false,
|
|
1577
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, AvatarImageState>",
|
|
1578
|
+
"defaultValue": null,
|
|
1579
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1580
|
+
},
|
|
1581
|
+
{
|
|
1582
|
+
"name": "style",
|
|
1583
|
+
"required": false,
|
|
1584
|
+
"type": "| CSSProperties\n| ((state: AvatarImageState) => CSSProperties)",
|
|
1585
|
+
"defaultValue": null,
|
|
1586
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1587
|
+
}
|
|
1588
|
+
]
|
|
1589
|
+
}
|
|
1590
|
+
]
|
|
1591
|
+
},
|
|
1592
|
+
"button": {
|
|
1593
|
+
"root": {
|
|
1594
|
+
"name": "Button",
|
|
1595
|
+
"description": "Button",
|
|
1596
|
+
"props": [
|
|
1597
|
+
{
|
|
1598
|
+
"name": "chamfer",
|
|
1599
|
+
"required": false,
|
|
1600
|
+
"type": "boolean | null",
|
|
1601
|
+
"defaultValue": "size === \"hero\"",
|
|
1602
|
+
"description": ""
|
|
1603
|
+
},
|
|
1604
|
+
{
|
|
1605
|
+
"name": "className",
|
|
1606
|
+
"required": false,
|
|
1607
|
+
"type": "string | ((state: ButtonState) => string)",
|
|
1608
|
+
"defaultValue": null,
|
|
1609
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1610
|
+
},
|
|
1611
|
+
{
|
|
1612
|
+
"name": "context",
|
|
1613
|
+
"required": false,
|
|
1614
|
+
"type": "\"default\" | \"oncolor\" | null",
|
|
1615
|
+
"defaultValue": "default",
|
|
1616
|
+
"description": ""
|
|
1617
|
+
},
|
|
1618
|
+
{
|
|
1619
|
+
"name": "endIcon",
|
|
1620
|
+
"required": false,
|
|
1621
|
+
"type": "ReactNode",
|
|
1622
|
+
"defaultValue": null,
|
|
1623
|
+
"description": "Trailing slot, typically an icon."
|
|
1624
|
+
},
|
|
1625
|
+
{
|
|
1626
|
+
"name": "focusableWhenDisabled",
|
|
1627
|
+
"required": false,
|
|
1628
|
+
"type": "boolean",
|
|
1629
|
+
"defaultValue": "false",
|
|
1630
|
+
"description": "Whether the button should be focusable when disabled."
|
|
1631
|
+
},
|
|
1632
|
+
{
|
|
1633
|
+
"name": "justify",
|
|
1634
|
+
"required": false,
|
|
1635
|
+
"type": "\"center\" | \"spread\" | null",
|
|
1636
|
+
"defaultValue": "center",
|
|
1637
|
+
"description": ""
|
|
1638
|
+
},
|
|
1639
|
+
{
|
|
1640
|
+
"name": "nativeButton",
|
|
1641
|
+
"required": false,
|
|
1642
|
+
"type": "boolean",
|
|
1643
|
+
"defaultValue": "true",
|
|
1644
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
1645
|
+
},
|
|
1646
|
+
{
|
|
1647
|
+
"name": "radius",
|
|
1648
|
+
"required": false,
|
|
1649
|
+
"type": "\"sm\" | \"md\" | \"lg\" | \"none\" | \"round\" | null",
|
|
1650
|
+
"defaultValue": "none",
|
|
1651
|
+
"description": ""
|
|
1652
|
+
},
|
|
1653
|
+
{
|
|
1654
|
+
"name": "ref",
|
|
1655
|
+
"required": false,
|
|
1656
|
+
"type": "Ref<HTMLElement>",
|
|
1657
|
+
"defaultValue": null,
|
|
1658
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1659
|
+
},
|
|
1660
|
+
{
|
|
1661
|
+
"name": "render",
|
|
1662
|
+
"required": false,
|
|
1663
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ButtonState>",
|
|
1664
|
+
"defaultValue": null,
|
|
1665
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1666
|
+
},
|
|
1667
|
+
{
|
|
1668
|
+
"name": "shortcut",
|
|
1669
|
+
"required": false,
|
|
1670
|
+
"type": "string",
|
|
1671
|
+
"defaultValue": null,
|
|
1672
|
+
"description": "Key hint shown in the top corner at the end of the line, such as `\"S\"` or `\"Ctrl Z\"`. It also sets\n`aria-keyshortcuts` in its notation (`Control+Z`), which an explicit\n`aria-keyshortcuts` prop overrides. Display only: bind the key in the app, for example with `useHotkey` from TanStack Hotkeys."
|
|
1673
|
+
},
|
|
1674
|
+
{
|
|
1675
|
+
"name": "size",
|
|
1676
|
+
"required": false,
|
|
1677
|
+
"type": "\"sm\" | \"md\" | \"lg\" | \"hero\" | null",
|
|
1678
|
+
"defaultValue": "md",
|
|
1679
|
+
"description": ""
|
|
1680
|
+
},
|
|
1681
|
+
{
|
|
1682
|
+
"name": "startIcon",
|
|
1683
|
+
"required": false,
|
|
1684
|
+
"type": "ReactNode",
|
|
1685
|
+
"defaultValue": null,
|
|
1686
|
+
"description": "Leading slot, typically an icon."
|
|
1687
|
+
},
|
|
1688
|
+
{
|
|
1689
|
+
"name": "style",
|
|
1690
|
+
"required": false,
|
|
1691
|
+
"type": "| CSSProperties\n| ((state: ButtonState) => CSSProperties)",
|
|
1692
|
+
"defaultValue": null,
|
|
1693
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1694
|
+
},
|
|
1695
|
+
{
|
|
1696
|
+
"name": "variant",
|
|
1697
|
+
"required": false,
|
|
1698
|
+
"type": "| \"primary\"\n| \"secondary\"\n| \"positive\"\n| \"negative\"\n| \"outline\"\n| \"ghost\"\n| null",
|
|
1699
|
+
"defaultValue": "primary",
|
|
1700
|
+
"description": ""
|
|
1701
|
+
}
|
|
1702
|
+
]
|
|
1703
|
+
},
|
|
1704
|
+
"subComponents": []
|
|
1705
|
+
},
|
|
1706
|
+
"callout": {
|
|
1707
|
+
"root": {
|
|
1708
|
+
"name": "Callout.Root",
|
|
1709
|
+
"description": "Callout.Root — the banner container. Sets `variant` (tints surface, icon, and text) and lays\nout a leading `Callout.Icon` beside `Callout.Title` / `Callout.Description`. `maxWidth` caps\nthe banner so it reads as a block region, not full container width. A persistent content-flow\nelement — not a transient Toast, not a modal Alert Dialog.",
|
|
1710
|
+
"props": [
|
|
1711
|
+
{
|
|
1712
|
+
"name": "maxWidth",
|
|
1713
|
+
"required": false,
|
|
1714
|
+
"type": "\"sm\" | \"md\" | \"lg\" | \"full\" | null",
|
|
1715
|
+
"defaultValue": "lg",
|
|
1716
|
+
"description": ""
|
|
1717
|
+
},
|
|
1718
|
+
{
|
|
1719
|
+
"name": "ref",
|
|
1720
|
+
"required": false,
|
|
1721
|
+
"type": "Ref<HTMLDivElement>",
|
|
1722
|
+
"defaultValue": null,
|
|
1723
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1724
|
+
},
|
|
1725
|
+
{
|
|
1726
|
+
"name": "variant",
|
|
1727
|
+
"required": false,
|
|
1728
|
+
"type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
1729
|
+
"defaultValue": "info",
|
|
1730
|
+
"description": ""
|
|
1731
|
+
}
|
|
1732
|
+
]
|
|
1733
|
+
},
|
|
1734
|
+
"subComponents": [
|
|
1735
|
+
{
|
|
1736
|
+
"name": "Callout.Description",
|
|
1737
|
+
"description": "Callout.Description — the message body, set in the editorial (grotesk) body voice.",
|
|
1738
|
+
"props": [
|
|
1739
|
+
{
|
|
1740
|
+
"name": "ref",
|
|
1741
|
+
"required": false,
|
|
1742
|
+
"type": "Ref<HTMLDivElement>",
|
|
1743
|
+
"defaultValue": null,
|
|
1744
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1745
|
+
}
|
|
1746
|
+
]
|
|
1747
|
+
},
|
|
1748
|
+
{
|
|
1749
|
+
"name": "Callout.Icon",
|
|
1750
|
+
"description": "Callout.Icon — the leading status glyph. Renders the variant's default icon when no children\nare passed; pass a custom icon as children to override. `aria-hidden` (variant is conveyed by\ncopy) and inherits colour via `currentColor`.",
|
|
1751
|
+
"props": [
|
|
1752
|
+
{
|
|
1753
|
+
"name": "ref",
|
|
1754
|
+
"required": false,
|
|
1755
|
+
"type": "Ref<HTMLDivElement>",
|
|
1756
|
+
"defaultValue": null,
|
|
1757
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1758
|
+
}
|
|
1759
|
+
]
|
|
1760
|
+
},
|
|
1761
|
+
{
|
|
1762
|
+
"name": "Callout.Title",
|
|
1763
|
+
"description": "Callout.Title — an optional short heading, set in the mono UPPERCASE technical voice.",
|
|
1764
|
+
"props": [
|
|
1765
|
+
{
|
|
1766
|
+
"name": "ref",
|
|
1767
|
+
"required": false,
|
|
1768
|
+
"type": "Ref<HTMLDivElement>",
|
|
1769
|
+
"defaultValue": null,
|
|
1770
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1771
|
+
}
|
|
1772
|
+
]
|
|
1773
|
+
}
|
|
1774
|
+
]
|
|
1775
|
+
},
|
|
1776
|
+
"card": {
|
|
1777
|
+
"root": {
|
|
1778
|
+
"name": "Card.Root",
|
|
1779
|
+
"description": "Card.Root — a surface container composed of slots: an optional `Card.Image`\n(bleeds edge-to-edge, no padding), then `Card.Header` / `Card.Content` /\n`Card.Footer`. `density` sets one scale that drives both each slot's padding\nand the gap between slots. `variant` picks the look — neutral tonal surfaces\n(`main`/`support`/`minor`) carry a hairline border; coloured intent fills\n(`primary`/`brand`) flip to contrast text and drop the border. `shadow` and\n`radius` layer on top. Also called a panel, tile, or paper.\n\nThe image is always the first entry in the stack, so `orientation` just\nswitches the stack between a column and a row without reordering slots.\n\n`shadow` defaults to `lg`; `shadow=\"none\"` gives the flat surface. It picks the elevation level only: how hard or\nspread the shadow reads is global, set by `--imf-ui-shadow-hardness` and `--imf-ui-shadow-spread`.",
|
|
1780
|
+
"props": [
|
|
1781
|
+
{
|
|
1782
|
+
"name": "density",
|
|
1783
|
+
"required": false,
|
|
1784
|
+
"type": "\"compact\" | \"comfortable\" | \"spacious\" | null",
|
|
1785
|
+
"defaultValue": "comfortable",
|
|
1786
|
+
"description": ""
|
|
1787
|
+
},
|
|
1788
|
+
{
|
|
1789
|
+
"name": "orientation",
|
|
1790
|
+
"required": false,
|
|
1791
|
+
"type": "\"vertical\" | \"horizontal\" | null",
|
|
1792
|
+
"defaultValue": "vertical",
|
|
1793
|
+
"description": ""
|
|
1794
|
+
},
|
|
1795
|
+
{
|
|
1796
|
+
"name": "radius",
|
|
1797
|
+
"required": false,
|
|
1798
|
+
"type": "\"brand\" | \"sm\" | \"md\" | \"lg\" | null",
|
|
1799
|
+
"defaultValue": "brand",
|
|
1800
|
+
"description": ""
|
|
1801
|
+
},
|
|
1802
|
+
{
|
|
1803
|
+
"name": "ref",
|
|
1804
|
+
"required": false,
|
|
1805
|
+
"type": "Ref<HTMLDivElement>",
|
|
1806
|
+
"defaultValue": null,
|
|
1807
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1808
|
+
},
|
|
1809
|
+
{
|
|
1810
|
+
"name": "shadow",
|
|
1811
|
+
"required": false,
|
|
1812
|
+
"type": "\"none\" | \"sm\" | \"md\" | \"lg\" | null",
|
|
1813
|
+
"defaultValue": "lg",
|
|
1814
|
+
"description": ""
|
|
1815
|
+
},
|
|
1816
|
+
{
|
|
1817
|
+
"name": "variant",
|
|
1818
|
+
"required": false,
|
|
1819
|
+
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"primary\"\n| \"brand\"\n| null",
|
|
1820
|
+
"defaultValue": "main",
|
|
1821
|
+
"description": ""
|
|
1822
|
+
},
|
|
1823
|
+
{
|
|
1824
|
+
"name": "withBorder",
|
|
1825
|
+
"required": false,
|
|
1826
|
+
"type": "boolean",
|
|
1827
|
+
"defaultValue": "true",
|
|
1828
|
+
"description": ""
|
|
1829
|
+
}
|
|
1830
|
+
]
|
|
1831
|
+
},
|
|
1832
|
+
"subComponents": [
|
|
1833
|
+
{
|
|
1834
|
+
"name": "Card.Content",
|
|
1835
|
+
"description": "Card.Content — the padded main body of the card.",
|
|
1836
|
+
"props": [
|
|
1837
|
+
{
|
|
1838
|
+
"name": "ref",
|
|
1839
|
+
"required": false,
|
|
1840
|
+
"type": "Ref<HTMLDivElement>",
|
|
1841
|
+
"defaultValue": null,
|
|
1842
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1843
|
+
}
|
|
1844
|
+
]
|
|
1845
|
+
},
|
|
1846
|
+
{
|
|
1847
|
+
"name": "Card.Footer",
|
|
1848
|
+
"description": "Card.Footer — the padded action region at the bottom. Its background inherits\nthe card fill by default; override `background` in `style` for a distinct\naction bar.",
|
|
1849
|
+
"props": [
|
|
1850
|
+
{
|
|
1851
|
+
"name": "ref",
|
|
1852
|
+
"required": false,
|
|
1853
|
+
"type": "Ref<HTMLDivElement>",
|
|
1854
|
+
"defaultValue": null,
|
|
1855
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1856
|
+
}
|
|
1857
|
+
]
|
|
1858
|
+
},
|
|
1859
|
+
{
|
|
1860
|
+
"name": "Card.Header",
|
|
1861
|
+
"description": "Card.Header — the padded title region at the top of the card body.",
|
|
1862
|
+
"props": [
|
|
1863
|
+
{
|
|
1864
|
+
"name": "ref",
|
|
1865
|
+
"required": false,
|
|
1866
|
+
"type": "Ref<HTMLDivElement>",
|
|
1867
|
+
"defaultValue": null,
|
|
1868
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1869
|
+
}
|
|
1870
|
+
]
|
|
1871
|
+
},
|
|
1872
|
+
{
|
|
1873
|
+
"name": "Card.Image",
|
|
1874
|
+
"description": "Card.Image — an edge-to-edge media slot. Has no padding, so the image bleeds\nto the card edges. Always place it first among the slots.",
|
|
1875
|
+
"props": [
|
|
1876
|
+
{
|
|
1877
|
+
"name": "aspectRatio",
|
|
1878
|
+
"required": false,
|
|
1879
|
+
"type": "number | \"auto\"",
|
|
1880
|
+
"defaultValue": "16 / 10",
|
|
1881
|
+
"description": "Width divided by height, or \"auto\" to use the image's intrinsic ratio."
|
|
1882
|
+
},
|
|
1883
|
+
{
|
|
1884
|
+
"name": "ref",
|
|
1885
|
+
"required": false,
|
|
1886
|
+
"type": "Ref<HTMLDivElement>",
|
|
1887
|
+
"defaultValue": null,
|
|
1888
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1889
|
+
}
|
|
1890
|
+
]
|
|
1891
|
+
},
|
|
1892
|
+
{
|
|
1893
|
+
"name": "Card.Status",
|
|
1894
|
+
"description": "Card.Status — a tinted slot that marks the card's status with the variant's glyph. Pass\nchildren to replace the glyph. Like `Card.Image`, place it first among the slots: a column\nbeside the body in a horizontal card, a band above it in a vertical one. Decorative\n(`aria-hidden`); the card's text carries the status.",
|
|
1895
|
+
"props": [
|
|
1896
|
+
{
|
|
1897
|
+
"name": "ref",
|
|
1898
|
+
"required": false,
|
|
1899
|
+
"type": "Ref<HTMLDivElement>",
|
|
1900
|
+
"defaultValue": null,
|
|
1901
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1902
|
+
},
|
|
1903
|
+
{
|
|
1904
|
+
"name": "variant",
|
|
1905
|
+
"required": false,
|
|
1906
|
+
"type": "| \"info\"\n| \"positive\"\n| \"warning\"\n| \"negative\"\n| null",
|
|
1907
|
+
"defaultValue": "info",
|
|
1908
|
+
"description": ""
|
|
1909
|
+
}
|
|
1910
|
+
]
|
|
1911
|
+
}
|
|
1912
|
+
]
|
|
1913
|
+
},
|
|
1914
|
+
"checkbox": {
|
|
1915
|
+
"root": {
|
|
1916
|
+
"name": "Checkbox.Root",
|
|
1917
|
+
"description": "Checkbox.Root — binary form control; renders a `<span>` plus a hidden `<input>`.",
|
|
1918
|
+
"props": [
|
|
1919
|
+
{
|
|
1920
|
+
"name": "checked",
|
|
1921
|
+
"required": false,
|
|
1922
|
+
"type": "boolean",
|
|
1923
|
+
"defaultValue": "undefined",
|
|
1924
|
+
"description": "Whether the checkbox is currently ticked.\n\nTo render an uncontrolled checkbox, use the `defaultChecked` prop instead."
|
|
1925
|
+
},
|
|
1926
|
+
{
|
|
1927
|
+
"name": "className",
|
|
1928
|
+
"required": false,
|
|
1929
|
+
"type": "string | ((state: CheckboxRootState) => string)",
|
|
1930
|
+
"defaultValue": null,
|
|
1931
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1932
|
+
},
|
|
1933
|
+
{
|
|
1934
|
+
"name": "defaultChecked",
|
|
1935
|
+
"required": false,
|
|
1936
|
+
"type": "boolean",
|
|
1937
|
+
"defaultValue": "false",
|
|
1938
|
+
"description": "Whether the checkbox is initially ticked.\n\nTo render a controlled checkbox, use the `checked` prop instead."
|
|
1939
|
+
},
|
|
1940
|
+
{
|
|
1941
|
+
"name": "disabled",
|
|
1942
|
+
"required": false,
|
|
1943
|
+
"type": "boolean",
|
|
1944
|
+
"defaultValue": "false",
|
|
1945
|
+
"description": "Whether the component should ignore user interaction."
|
|
1946
|
+
},
|
|
1947
|
+
{
|
|
1948
|
+
"name": "form",
|
|
1949
|
+
"required": false,
|
|
1950
|
+
"type": "string",
|
|
1951
|
+
"defaultValue": null,
|
|
1952
|
+
"description": "Identifies the form that owns the hidden input.\nUseful when the checkbox is rendered outside the form."
|
|
1953
|
+
},
|
|
1954
|
+
{
|
|
1955
|
+
"name": "id",
|
|
1956
|
+
"required": false,
|
|
1957
|
+
"type": "string",
|
|
1958
|
+
"defaultValue": null,
|
|
1959
|
+
"description": "The id of the input element."
|
|
1960
|
+
},
|
|
1961
|
+
{
|
|
1962
|
+
"name": "indeterminate",
|
|
1963
|
+
"required": false,
|
|
1964
|
+
"type": "boolean",
|
|
1965
|
+
"defaultValue": "false",
|
|
1966
|
+
"description": "Whether the checkbox is in a mixed state: neither ticked, nor unticked."
|
|
1967
|
+
},
|
|
1968
|
+
{
|
|
1969
|
+
"name": "inputRef",
|
|
1970
|
+
"required": false,
|
|
1971
|
+
"type": "Ref<HTMLInputElement>",
|
|
1972
|
+
"defaultValue": null,
|
|
1973
|
+
"description": "A ref to access the hidden `<input>` element."
|
|
1974
|
+
},
|
|
1975
|
+
{
|
|
1976
|
+
"name": "name",
|
|
1977
|
+
"required": false,
|
|
1978
|
+
"type": "string",
|
|
1979
|
+
"defaultValue": "undefined",
|
|
1980
|
+
"description": "Identifies the field when a form is submitted."
|
|
1981
|
+
},
|
|
1982
|
+
{
|
|
1983
|
+
"name": "nativeButton",
|
|
1984
|
+
"required": false,
|
|
1985
|
+
"type": "boolean",
|
|
1986
|
+
"defaultValue": "false",
|
|
1987
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `true` if the rendered element is a native button."
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
"name": "onCheckedChange",
|
|
1991
|
+
"required": false,
|
|
1992
|
+
"type": "(\n checked: boolean,\n eventDetails: {\n reason: \"none\";\n event: Event;\n cancel: () => void;\n allowPropagation: () => void;\n isCanceled: boolean;\n isPropagationAllowed: boolean;\n trigger: Element;\n }\n) => void",
|
|
1993
|
+
"defaultValue": null,
|
|
1994
|
+
"description": "Event handler called when the checkbox is ticked or unticked."
|
|
1995
|
+
},
|
|
1996
|
+
{
|
|
1997
|
+
"name": "parent",
|
|
1998
|
+
"required": false,
|
|
1999
|
+
"type": "boolean",
|
|
2000
|
+
"defaultValue": "false",
|
|
2001
|
+
"description": "Whether the checkbox controls a group of child checkboxes.\n\nMust be used in a [Checkbox Group](https://base-ui.com/react/components/checkbox-group)."
|
|
2002
|
+
},
|
|
2003
|
+
{
|
|
2004
|
+
"name": "readOnly",
|
|
2005
|
+
"required": false,
|
|
2006
|
+
"type": "boolean",
|
|
2007
|
+
"defaultValue": "false",
|
|
2008
|
+
"description": "Whether the user should be unable to tick or untick the checkbox."
|
|
2009
|
+
},
|
|
2010
|
+
{
|
|
2011
|
+
"name": "ref",
|
|
2012
|
+
"required": false,
|
|
2013
|
+
"type": "Ref<HTMLElement>",
|
|
2014
|
+
"defaultValue": null,
|
|
2015
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2016
|
+
},
|
|
2017
|
+
{
|
|
2018
|
+
"name": "render",
|
|
2019
|
+
"required": false,
|
|
2020
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CheckboxRootState>",
|
|
2021
|
+
"defaultValue": null,
|
|
2022
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2023
|
+
},
|
|
2024
|
+
{
|
|
2025
|
+
"name": "required",
|
|
2026
|
+
"required": false,
|
|
2027
|
+
"type": "boolean",
|
|
2028
|
+
"defaultValue": "false",
|
|
2029
|
+
"description": "Whether the user must tick the checkbox before submitting a form."
|
|
2030
|
+
},
|
|
2031
|
+
{
|
|
2032
|
+
"name": "style",
|
|
2033
|
+
"required": false,
|
|
2034
|
+
"type": "| CSSProperties\n| ((state: CheckboxRootState) => CSSProperties)",
|
|
2035
|
+
"defaultValue": null,
|
|
2036
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2037
|
+
},
|
|
2038
|
+
{
|
|
2039
|
+
"name": "uncheckedValue",
|
|
2040
|
+
"required": false,
|
|
2041
|
+
"type": "string",
|
|
2042
|
+
"defaultValue": null,
|
|
2043
|
+
"description": "The value submitted with the form when the checkbox is unchecked.\nBy default, unchecked checkboxes do not submit any value, matching native checkbox behavior."
|
|
2044
|
+
},
|
|
2045
|
+
{
|
|
2046
|
+
"name": "value",
|
|
2047
|
+
"required": false,
|
|
2048
|
+
"type": "string",
|
|
2049
|
+
"defaultValue": null,
|
|
2050
|
+
"description": "The value of the selected checkbox."
|
|
2051
|
+
}
|
|
2052
|
+
]
|
|
2053
|
+
},
|
|
2054
|
+
"subComponents": [
|
|
2055
|
+
{
|
|
2056
|
+
"name": "Checkbox.Indicator",
|
|
2057
|
+
"description": "Checkbox.Indicator — shows the checked / indeterminate mark. Ships brand\nicons by default (check, and a minus while `indeterminate`); pass children\nto replace them.",
|
|
2058
|
+
"props": [
|
|
2059
|
+
{
|
|
2060
|
+
"name": "className",
|
|
2061
|
+
"required": false,
|
|
2062
|
+
"type": "| string\n| ((state: CheckboxIndicatorState) => string)",
|
|
2063
|
+
"defaultValue": null,
|
|
2064
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2065
|
+
},
|
|
2066
|
+
{
|
|
2067
|
+
"name": "keepMounted",
|
|
2068
|
+
"required": false,
|
|
2069
|
+
"type": "boolean",
|
|
2070
|
+
"defaultValue": "false",
|
|
2071
|
+
"description": "Whether to keep the element in the DOM when the checkbox is not checked."
|
|
2072
|
+
},
|
|
2073
|
+
{
|
|
2074
|
+
"name": "ref",
|
|
2075
|
+
"required": false,
|
|
2076
|
+
"type": "Ref<HTMLElement>",
|
|
2077
|
+
"defaultValue": null,
|
|
2078
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2079
|
+
},
|
|
2080
|
+
{
|
|
2081
|
+
"name": "render",
|
|
2082
|
+
"required": false,
|
|
2083
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CheckboxIndicatorState>",
|
|
2084
|
+
"defaultValue": null,
|
|
2085
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2086
|
+
},
|
|
2087
|
+
{
|
|
2088
|
+
"name": "style",
|
|
2089
|
+
"required": false,
|
|
2090
|
+
"type": "| CSSProperties\n| ((state: CheckboxIndicatorState) => CSSProperties)",
|
|
2091
|
+
"defaultValue": null,
|
|
2092
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2093
|
+
}
|
|
2094
|
+
]
|
|
2095
|
+
}
|
|
2096
|
+
]
|
|
2097
|
+
},
|
|
2098
|
+
"chip": {
|
|
2099
|
+
"root": {
|
|
2100
|
+
"name": "Chip",
|
|
2101
|
+
"description": "Chip — compact inline label for status or category.\nNot based on any upstream component.",
|
|
2102
|
+
"props": [
|
|
2103
|
+
{
|
|
2104
|
+
"name": "appearance",
|
|
2105
|
+
"required": false,
|
|
2106
|
+
"type": "\"outline\" | \"solid\" | \"subtle\" | null",
|
|
2107
|
+
"defaultValue": "outline",
|
|
2108
|
+
"description": ""
|
|
2109
|
+
},
|
|
2110
|
+
{
|
|
2111
|
+
"name": "inline",
|
|
2112
|
+
"required": false,
|
|
2113
|
+
"type": "boolean | null",
|
|
2114
|
+
"defaultValue": "false",
|
|
2115
|
+
"description": ""
|
|
2116
|
+
},
|
|
2117
|
+
{
|
|
2118
|
+
"name": "ref",
|
|
2119
|
+
"required": false,
|
|
2120
|
+
"type": "Ref<HTMLSpanElement>",
|
|
2121
|
+
"defaultValue": null,
|
|
2122
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2123
|
+
},
|
|
2124
|
+
{
|
|
2125
|
+
"name": "variant",
|
|
2126
|
+
"required": false,
|
|
2127
|
+
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
2128
|
+
"defaultValue": "minor",
|
|
2129
|
+
"description": ""
|
|
2130
|
+
}
|
|
2131
|
+
]
|
|
2132
|
+
},
|
|
2133
|
+
"subComponents": []
|
|
2134
|
+
},
|
|
2135
|
+
"chip-link": {
|
|
2136
|
+
"root": {
|
|
2137
|
+
"name": "ChipLink",
|
|
2138
|
+
"description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).",
|
|
2139
|
+
"props": [
|
|
2140
|
+
{
|
|
2141
|
+
"name": "appearance",
|
|
2142
|
+
"required": false,
|
|
2143
|
+
"type": "\"outline\" | \"solid\" | \"subtle\" | null",
|
|
2144
|
+
"defaultValue": "subtle",
|
|
2145
|
+
"description": ""
|
|
2146
|
+
},
|
|
2147
|
+
{
|
|
2148
|
+
"name": "inline",
|
|
2149
|
+
"required": false,
|
|
2150
|
+
"type": "boolean | null",
|
|
2151
|
+
"defaultValue": "false",
|
|
2152
|
+
"description": ""
|
|
2153
|
+
},
|
|
2154
|
+
{
|
|
2155
|
+
"name": "kind",
|
|
2156
|
+
"required": false,
|
|
2157
|
+
"type": "ChipLinkKind",
|
|
2158
|
+
"defaultValue": "external",
|
|
2159
|
+
"description": "Link target scope. `\"external\"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `\"internal\"` stays in the current tab with a horizontal `ArrowRight` icon."
|
|
2160
|
+
},
|
|
2161
|
+
{
|
|
2162
|
+
"name": "ref",
|
|
2163
|
+
"required": false,
|
|
2164
|
+
"type": "Ref<HTMLAnchorElement>",
|
|
2165
|
+
"defaultValue": null,
|
|
2166
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2167
|
+
},
|
|
2168
|
+
{
|
|
2169
|
+
"name": "variant",
|
|
2170
|
+
"required": false,
|
|
2171
|
+
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
2172
|
+
"defaultValue": "info",
|
|
2173
|
+
"description": ""
|
|
2174
|
+
}
|
|
2175
|
+
]
|
|
2176
|
+
},
|
|
2177
|
+
"subComponents": []
|
|
2178
|
+
},
|
|
2179
|
+
"code": {
|
|
2180
|
+
"root": {
|
|
2181
|
+
"name": "Code",
|
|
2182
|
+
"description": "",
|
|
2183
|
+
"props": []
|
|
2184
|
+
},
|
|
2185
|
+
"subComponents": [
|
|
2186
|
+
{
|
|
2187
|
+
"name": "Code.Block",
|
|
2188
|
+
"description": "Code.Block — a fenced code block on a flat brand surface, with an optional\nchamfered language notch (top-left) and a copy button (top-right). The\nsurface follows the global corner-radius token when a preset opts in. The\ncopy button copies the rendered text.",
|
|
2189
|
+
"props": [
|
|
2190
|
+
{
|
|
2191
|
+
"name": "children",
|
|
2192
|
+
"required": true,
|
|
2193
|
+
"type": "ReactNode",
|
|
2194
|
+
"defaultValue": null,
|
|
2195
|
+
"description": "Code content shown in the block. The copy button copies its rendered text."
|
|
2196
|
+
},
|
|
2197
|
+
{
|
|
2198
|
+
"name": "hideCopy",
|
|
2199
|
+
"required": false,
|
|
2200
|
+
"type": "boolean",
|
|
2201
|
+
"defaultValue": "false",
|
|
2202
|
+
"description": "Hide the copy button."
|
|
2203
|
+
},
|
|
2204
|
+
{
|
|
2205
|
+
"name": "language",
|
|
2206
|
+
"required": false,
|
|
2207
|
+
"type": "string",
|
|
2208
|
+
"defaultValue": null,
|
|
2209
|
+
"description": "Language label shown in the corner notch. Omit to hide the notch."
|
|
2210
|
+
},
|
|
2211
|
+
{
|
|
2212
|
+
"name": "ref",
|
|
2213
|
+
"required": false,
|
|
2214
|
+
"type": "Ref<HTMLElement>",
|
|
2215
|
+
"defaultValue": null,
|
|
2216
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2217
|
+
}
|
|
2218
|
+
]
|
|
2219
|
+
},
|
|
2220
|
+
{
|
|
2221
|
+
"name": "Code.Inline",
|
|
2222
|
+
"description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. `Typo.InlineCode` renders this under the hood so inline-code chrome is\ndefined in one place. The copy button copies the rendered text.",
|
|
2223
|
+
"props": [
|
|
2224
|
+
{
|
|
2225
|
+
"name": "children",
|
|
2226
|
+
"required": true,
|
|
2227
|
+
"type": "ReactNode",
|
|
2228
|
+
"defaultValue": null,
|
|
2229
|
+
"description": "Code content shown in the chip. The copy button copies its rendered text."
|
|
2230
|
+
},
|
|
2231
|
+
{
|
|
2232
|
+
"name": "copyable",
|
|
2233
|
+
"required": false,
|
|
2234
|
+
"type": "boolean",
|
|
2235
|
+
"defaultValue": "false",
|
|
2236
|
+
"description": "Show a small copy button on the right, behind a hairline separator."
|
|
2237
|
+
},
|
|
2238
|
+
{
|
|
2239
|
+
"name": "ref",
|
|
2240
|
+
"required": false,
|
|
2241
|
+
"type": "Ref<HTMLElement>",
|
|
2242
|
+
"defaultValue": null,
|
|
2243
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2244
|
+
},
|
|
2245
|
+
{
|
|
2246
|
+
"name": "render",
|
|
2247
|
+
"required": false,
|
|
2248
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, {}>",
|
|
2249
|
+
"defaultValue": null,
|
|
2250
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2251
|
+
}
|
|
2252
|
+
]
|
|
2253
|
+
},
|
|
2254
|
+
{
|
|
2255
|
+
"name": "Code.InlineLink",
|
|
2256
|
+
"description": "Code.InlineLink — the inline-code chip rendered as a link: the same hairline\nbox, with an optional directional arrow behind the separator instead of a copy button.\nSibling of `Code.Inline`, sharing its chip visual (`.inline`). Never both a\ncopy button and a link on the same chip. Mirrors `ChipLink`'s shape (anchor\nis the chip root, trailing icon nudges on hover, `data-kind` picks the icon).",
|
|
2257
|
+
"props": [
|
|
2258
|
+
{
|
|
2259
|
+
"name": "kind",
|
|
2260
|
+
"required": false,
|
|
2261
|
+
"type": "CodeInlineLinkKind",
|
|
2262
|
+
"defaultValue": "external",
|
|
2263
|
+
"description": "Link target scope. `\"external\"` (default) opens in a new tab; `\"internal\"` stays in the current tab."
|
|
2264
|
+
},
|
|
2265
|
+
{
|
|
2266
|
+
"name": "ref",
|
|
2267
|
+
"required": false,
|
|
2268
|
+
"type": "Ref<HTMLElement>",
|
|
2269
|
+
"defaultValue": null,
|
|
2270
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2271
|
+
},
|
|
2272
|
+
{
|
|
2273
|
+
"name": "render",
|
|
2274
|
+
"required": false,
|
|
2275
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, {}>",
|
|
2276
|
+
"defaultValue": null,
|
|
2277
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2278
|
+
}
|
|
2279
|
+
]
|
|
2280
|
+
}
|
|
2281
|
+
]
|
|
2282
|
+
},
|
|
2283
|
+
"collapsible": {
|
|
2284
|
+
"root": {
|
|
2285
|
+
"name": "Collapsible.Root",
|
|
2286
|
+
"description": "Collapsible.Root — container that manages open/closed state for a trigger–panel pair.",
|
|
2287
|
+
"props": [
|
|
2288
|
+
{
|
|
2289
|
+
"name": "className",
|
|
2290
|
+
"required": false,
|
|
2291
|
+
"type": "| string\n| ((state: CollapsibleRootState) => string)",
|
|
2292
|
+
"defaultValue": null,
|
|
2293
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2294
|
+
},
|
|
2295
|
+
{
|
|
2296
|
+
"name": "defaultOpen",
|
|
2297
|
+
"required": false,
|
|
2298
|
+
"type": "boolean",
|
|
2299
|
+
"defaultValue": "false",
|
|
2300
|
+
"description": "Whether the collapsible panel is initially open.\n\nTo render a controlled collapsible, use the `open` prop instead."
|
|
2301
|
+
},
|
|
2302
|
+
{
|
|
2303
|
+
"name": "disabled",
|
|
2304
|
+
"required": false,
|
|
2305
|
+
"type": "boolean",
|
|
2306
|
+
"defaultValue": "false",
|
|
2307
|
+
"description": "Whether the component should ignore user interaction."
|
|
2308
|
+
},
|
|
2309
|
+
{
|
|
2310
|
+
"name": "onOpenChange",
|
|
2311
|
+
"required": false,
|
|
2312
|
+
"type": "(\n open: boolean,\n eventDetails: CollapsibleRootChangeEventDetails\n) => void",
|
|
2313
|
+
"defaultValue": null,
|
|
2314
|
+
"description": "Event handler called when the panel is opened or closed."
|
|
2315
|
+
},
|
|
2316
|
+
{
|
|
2317
|
+
"name": "open",
|
|
2318
|
+
"required": false,
|
|
2319
|
+
"type": "boolean",
|
|
2320
|
+
"defaultValue": null,
|
|
2321
|
+
"description": "Whether the collapsible panel is currently open.\n\nTo render an uncontrolled collapsible, use the `defaultOpen` prop instead."
|
|
2322
|
+
},
|
|
2323
|
+
{
|
|
2324
|
+
"name": "ref",
|
|
2325
|
+
"required": false,
|
|
2326
|
+
"type": "Ref<HTMLDivElement>",
|
|
2327
|
+
"defaultValue": null,
|
|
2328
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2329
|
+
},
|
|
2330
|
+
{
|
|
2331
|
+
"name": "render",
|
|
2332
|
+
"required": false,
|
|
2333
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CollapsibleRootState>",
|
|
2334
|
+
"defaultValue": null,
|
|
2335
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2336
|
+
},
|
|
2337
|
+
{
|
|
2338
|
+
"name": "style",
|
|
2339
|
+
"required": false,
|
|
2340
|
+
"type": "| CSSProperties\n| ((state: CollapsibleRootState) => CSSProperties)",
|
|
2341
|
+
"defaultValue": null,
|
|
2342
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2343
|
+
},
|
|
2344
|
+
{
|
|
2345
|
+
"name": "variant",
|
|
2346
|
+
"required": false,
|
|
2347
|
+
"type": "\"default\" | \"solid\" | null",
|
|
2348
|
+
"defaultValue": "default",
|
|
2349
|
+
"description": ""
|
|
2350
|
+
}
|
|
2351
|
+
]
|
|
2352
|
+
},
|
|
2353
|
+
"subComponents": [
|
|
2354
|
+
{
|
|
2355
|
+
"name": "Collapsible.Panel",
|
|
2356
|
+
"description": "Collapsible.Panel — region that expands and collapses when the trigger is activated.",
|
|
2357
|
+
"props": [
|
|
2358
|
+
{
|
|
2359
|
+
"name": "className",
|
|
2360
|
+
"required": false,
|
|
2361
|
+
"type": "| string\n| ((state: CollapsiblePanelState) => string)",
|
|
2362
|
+
"defaultValue": null,
|
|
2363
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2364
|
+
},
|
|
2365
|
+
{
|
|
2366
|
+
"name": "hiddenUntilFound",
|
|
2367
|
+
"required": false,
|
|
2368
|
+
"type": "boolean",
|
|
2369
|
+
"defaultValue": "false",
|
|
2370
|
+
"description": "Allows the browser's built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM."
|
|
2371
|
+
},
|
|
2372
|
+
{
|
|
2373
|
+
"name": "keepMounted",
|
|
2374
|
+
"required": false,
|
|
2375
|
+
"type": "boolean",
|
|
2376
|
+
"defaultValue": "false",
|
|
2377
|
+
"description": "Whether to keep the element in the DOM while the panel is hidden.\nThis prop is ignored when `hiddenUntilFound` is used."
|
|
2378
|
+
},
|
|
2379
|
+
{
|
|
2380
|
+
"name": "ref",
|
|
2381
|
+
"required": false,
|
|
2382
|
+
"type": "Ref<HTMLDivElement>",
|
|
2383
|
+
"defaultValue": null,
|
|
2384
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2385
|
+
},
|
|
2386
|
+
{
|
|
2387
|
+
"name": "render",
|
|
2388
|
+
"required": false,
|
|
2389
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CollapsiblePanelState>",
|
|
2390
|
+
"defaultValue": null,
|
|
2391
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2392
|
+
},
|
|
2393
|
+
{
|
|
2394
|
+
"name": "style",
|
|
2395
|
+
"required": false,
|
|
2396
|
+
"type": "| CSSProperties\n| ((state: CollapsiblePanelState) => CSSProperties)",
|
|
2397
|
+
"defaultValue": null,
|
|
2398
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2399
|
+
}
|
|
2400
|
+
]
|
|
2401
|
+
},
|
|
2402
|
+
{
|
|
2403
|
+
"name": "Collapsible.Trigger",
|
|
2404
|
+
"description": "Collapsible.Trigger — button that toggles the panel open and closed.",
|
|
2405
|
+
"props": [
|
|
2406
|
+
{
|
|
2407
|
+
"name": "className",
|
|
2408
|
+
"required": false,
|
|
2409
|
+
"type": "| string\n| ((state: CollapsibleTriggerState) => string)",
|
|
2410
|
+
"defaultValue": null,
|
|
2411
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2412
|
+
},
|
|
2413
|
+
{
|
|
2414
|
+
"name": "nativeButton",
|
|
2415
|
+
"required": false,
|
|
2416
|
+
"type": "boolean",
|
|
2417
|
+
"defaultValue": "true",
|
|
2418
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
2419
|
+
},
|
|
2420
|
+
{
|
|
2421
|
+
"name": "ref",
|
|
2422
|
+
"required": false,
|
|
2423
|
+
"type": "Ref<HTMLDivElement>",
|
|
2424
|
+
"defaultValue": null,
|
|
2425
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2426
|
+
},
|
|
2427
|
+
{
|
|
2428
|
+
"name": "render",
|
|
2429
|
+
"required": false,
|
|
2430
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CollapsibleTriggerState>",
|
|
2431
|
+
"defaultValue": null,
|
|
2432
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2433
|
+
},
|
|
2434
|
+
{
|
|
2435
|
+
"name": "style",
|
|
2436
|
+
"required": false,
|
|
2437
|
+
"type": "| CSSProperties\n| ((state: CollapsibleTriggerState) => CSSProperties)",
|
|
2438
|
+
"defaultValue": null,
|
|
2439
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2440
|
+
}
|
|
2441
|
+
]
|
|
2442
|
+
}
|
|
2443
|
+
]
|
|
2444
|
+
},
|
|
2445
|
+
"color-scheme-toggle": {
|
|
2446
|
+
"root": {
|
|
2447
|
+
"name": "ColorSchemeToggle",
|
|
2448
|
+
"description": "ColorSchemeToggle - lets the user pick Light, System, or Dark. It reads and stores the preference through\n`useColorScheme`, so placing it is enough. System stays pressed while the page follows the operating system.",
|
|
2449
|
+
"props": [
|
|
2450
|
+
{
|
|
2451
|
+
"name": "className",
|
|
2452
|
+
"required": false,
|
|
2453
|
+
"type": "string | ((state: ToggleGroupState) => string)",
|
|
2454
|
+
"defaultValue": null,
|
|
2455
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2456
|
+
},
|
|
2457
|
+
{
|
|
2458
|
+
"name": "darkLabel",
|
|
2459
|
+
"required": false,
|
|
2460
|
+
"type": "string",
|
|
2461
|
+
"defaultValue": "Dark",
|
|
2462
|
+
"description": "Text of the segment that picks the dark scheme."
|
|
2463
|
+
},
|
|
2464
|
+
{
|
|
2465
|
+
"name": "disabled",
|
|
2466
|
+
"required": false,
|
|
2467
|
+
"type": "boolean",
|
|
2468
|
+
"defaultValue": "false",
|
|
2469
|
+
"description": "Whether the toggle group should ignore user interaction."
|
|
2470
|
+
},
|
|
2471
|
+
{
|
|
2472
|
+
"name": "label",
|
|
2473
|
+
"required": false,
|
|
2474
|
+
"type": "string",
|
|
2475
|
+
"defaultValue": "Color scheme",
|
|
2476
|
+
"description": "Accessible name of the group."
|
|
2477
|
+
},
|
|
2478
|
+
{
|
|
2479
|
+
"name": "lightLabel",
|
|
2480
|
+
"required": false,
|
|
2481
|
+
"type": "string",
|
|
2482
|
+
"defaultValue": "Light",
|
|
2483
|
+
"description": "Text of the segment that picks the light scheme."
|
|
2484
|
+
},
|
|
2485
|
+
{
|
|
2486
|
+
"name": "loopFocus",
|
|
2487
|
+
"required": false,
|
|
2488
|
+
"type": "boolean",
|
|
2489
|
+
"defaultValue": "true",
|
|
2490
|
+
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
|
|
2491
|
+
},
|
|
2492
|
+
{
|
|
2493
|
+
"name": "orientation",
|
|
2494
|
+
"required": false,
|
|
2495
|
+
"type": "Orientation",
|
|
2496
|
+
"defaultValue": "horizontal",
|
|
2497
|
+
"description": ""
|
|
2498
|
+
},
|
|
2499
|
+
{
|
|
2500
|
+
"name": "ref",
|
|
2501
|
+
"required": false,
|
|
2502
|
+
"type": "Ref<HTMLDivElement>",
|
|
2503
|
+
"defaultValue": null,
|
|
2504
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2505
|
+
},
|
|
2506
|
+
{
|
|
2507
|
+
"name": "render",
|
|
2508
|
+
"required": false,
|
|
2509
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ToggleGroupState>",
|
|
2510
|
+
"defaultValue": null,
|
|
2511
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2512
|
+
},
|
|
2513
|
+
{
|
|
2514
|
+
"name": "size",
|
|
2515
|
+
"required": false,
|
|
2516
|
+
"type": "\"sm\" | \"md\" | null",
|
|
2517
|
+
"defaultValue": null,
|
|
2518
|
+
"description": ""
|
|
2519
|
+
},
|
|
2520
|
+
{
|
|
2521
|
+
"name": "style",
|
|
2522
|
+
"required": false,
|
|
2523
|
+
"type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
|
|
2524
|
+
"defaultValue": null,
|
|
2525
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2526
|
+
},
|
|
2527
|
+
{
|
|
2528
|
+
"name": "systemLabel",
|
|
2529
|
+
"required": false,
|
|
2530
|
+
"type": "string",
|
|
2531
|
+
"defaultValue": "System",
|
|
2532
|
+
"description": "Text of the segment that follows the operating system."
|
|
2533
|
+
}
|
|
2534
|
+
]
|
|
2535
|
+
},
|
|
2536
|
+
"subComponents": []
|
|
2537
|
+
},
|
|
2538
|
+
"combobox": {
|
|
2539
|
+
"root": {
|
|
2540
|
+
"name": "Combobox.Root",
|
|
2541
|
+
"description": "Combobox.Root — text input with a filterable list of options, for choosing one or several.\n\nWraps children in a div so a sibling Combobox.Label stacks above the field regardless of the parent's layout.\nCombobox.Portal is unaffected (it renders to document.body).",
|
|
2542
|
+
"props": [
|
|
2543
|
+
{
|
|
2544
|
+
"name": "actionsRef",
|
|
2545
|
+
"required": false,
|
|
2546
|
+
"type": "RefObject<Actions | null>",
|
|
2547
|
+
"defaultValue": null,
|
|
2548
|
+
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the combobox.\nCall this after any externally controlled closing animation finishes."
|
|
2549
|
+
},
|
|
2550
|
+
{
|
|
2551
|
+
"name": "autoComplete",
|
|
2552
|
+
"required": false,
|
|
2553
|
+
"type": "string",
|
|
2554
|
+
"defaultValue": null,
|
|
2555
|
+
"description": "Provides a hint to the browser for autofill.\n@see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete"
|
|
2556
|
+
},
|
|
2557
|
+
{
|
|
2558
|
+
"name": "autoHighlight",
|
|
822
2559
|
"required": false,
|
|
823
2560
|
"type": "boolean",
|
|
824
2561
|
"defaultValue": "false",
|
|
825
|
-
"description": "Whether the
|
|
2562
|
+
"description": "Whether the first matching item is highlighted automatically while filtering."
|
|
2563
|
+
},
|
|
2564
|
+
{
|
|
2565
|
+
"name": "className",
|
|
2566
|
+
"required": false,
|
|
2567
|
+
"type": "string",
|
|
2568
|
+
"defaultValue": null,
|
|
2569
|
+
"description": ""
|
|
2570
|
+
},
|
|
2571
|
+
{
|
|
2572
|
+
"name": "defaultInputValue",
|
|
2573
|
+
"required": false,
|
|
2574
|
+
"type": "string | number | readonly string[]",
|
|
2575
|
+
"defaultValue": null,
|
|
2576
|
+
"description": "The uncontrolled input value when initially rendered.\n\nTo render a controlled input, use the `inputValue` prop instead."
|
|
2577
|
+
},
|
|
2578
|
+
{
|
|
2579
|
+
"name": "defaultOpen",
|
|
2580
|
+
"required": false,
|
|
2581
|
+
"type": "boolean",
|
|
2582
|
+
"defaultValue": "false",
|
|
2583
|
+
"description": "Whether the popup is initially open.\n\nTo render a controlled popup, use the `open` prop instead."
|
|
2584
|
+
},
|
|
2585
|
+
{
|
|
2586
|
+
"name": "defaultValue",
|
|
2587
|
+
"required": false,
|
|
2588
|
+
"type": "ComboboxValueType<Value, Multiple> | null",
|
|
2589
|
+
"defaultValue": null,
|
|
2590
|
+
"description": "The uncontrolled selected value of the combobox when it's initially rendered.\n\nTo render a controlled combobox, use the `value` prop instead."
|
|
826
2591
|
},
|
|
827
2592
|
{
|
|
828
2593
|
"name": "disabled",
|
|
@@ -831,438 +2596,1192 @@
|
|
|
831
2596
|
"defaultValue": "false",
|
|
832
2597
|
"description": "Whether the component should ignore user interaction."
|
|
833
2598
|
},
|
|
2599
|
+
{
|
|
2600
|
+
"name": "filter",
|
|
2601
|
+
"required": false,
|
|
2602
|
+
"type": "| ((\n itemValue: Value,\n query: string,\n itemToString?: (itemValue: Value) => string\n ) => boolean)\n| null",
|
|
2603
|
+
"defaultValue": null,
|
|
2604
|
+
"description": "Filter function used to match items vs input query."
|
|
2605
|
+
},
|
|
2606
|
+
{
|
|
2607
|
+
"name": "filteredItems",
|
|
2608
|
+
"required": false,
|
|
2609
|
+
"type": "readonly any[] | readonly Group<any>[]",
|
|
2610
|
+
"defaultValue": null,
|
|
2611
|
+
"description": "Filtered items to display in the list.\nWhen provided, the list will use these items instead of filtering the `items` prop internally.\nUse when you want to control filtering logic externally with the `useFilter()` hook."
|
|
2612
|
+
},
|
|
834
2613
|
{
|
|
835
2614
|
"name": "form",
|
|
836
2615
|
"required": false,
|
|
837
2616
|
"type": "string",
|
|
838
2617
|
"defaultValue": null,
|
|
839
|
-
"description": "Identifies the form that owns the
|
|
2618
|
+
"description": "Identifies the form that owns the internal input.\nUseful when the combobox is rendered outside the form."
|
|
2619
|
+
},
|
|
2620
|
+
{
|
|
2621
|
+
"name": "grid",
|
|
2622
|
+
"required": false,
|
|
2623
|
+
"type": "boolean",
|
|
2624
|
+
"defaultValue": "false",
|
|
2625
|
+
"description": "Whether list items are presented in a grid layout.\nWhen enabled, arrow keys navigate across rows and columns inferred from DOM rows."
|
|
2626
|
+
},
|
|
2627
|
+
{
|
|
2628
|
+
"name": "highlightItemOnHover",
|
|
2629
|
+
"required": false,
|
|
2630
|
+
"type": "boolean",
|
|
2631
|
+
"defaultValue": "true",
|
|
2632
|
+
"description": "Whether moving the pointer over items should highlight them.\nDisabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state."
|
|
840
2633
|
},
|
|
841
2634
|
{
|
|
842
2635
|
"name": "id",
|
|
843
2636
|
"required": false,
|
|
844
2637
|
"type": "string",
|
|
845
2638
|
"defaultValue": null,
|
|
846
|
-
"description": "The id of the
|
|
2639
|
+
"description": "The id of the component."
|
|
847
2640
|
},
|
|
848
2641
|
{
|
|
849
|
-
"name": "
|
|
2642
|
+
"name": "inline",
|
|
850
2643
|
"required": false,
|
|
851
2644
|
"type": "boolean",
|
|
852
2645
|
"defaultValue": "false",
|
|
853
|
-
"description": "Whether the
|
|
2646
|
+
"description": "Whether the list is rendered inline without using the component's own popup.\n\nSpecify `open` unconditionally in conjunction with this prop so the list is considered\nvisible: `<Combobox.Root inline open>`\n\nIn a `Combobox.Root` > `Dialog.Root` composition, bind the Combobox's `open` and\n`onOpenChange` props to the `Dialog`'s `open` and `onOpenChange` state instead so the\ncomponent resets its transient state (filter query, highlighted item, and input value) when\nthe dialog closes."
|
|
854
2647
|
},
|
|
855
2648
|
{
|
|
856
2649
|
"name": "inputRef",
|
|
857
2650
|
"required": false,
|
|
858
2651
|
"type": "Ref<HTMLInputElement>",
|
|
859
2652
|
"defaultValue": null,
|
|
860
|
-
"description": "A ref to
|
|
2653
|
+
"description": "A ref to the hidden input element."
|
|
861
2654
|
},
|
|
862
2655
|
{
|
|
863
|
-
"name": "
|
|
2656
|
+
"name": "inputValue",
|
|
864
2657
|
"required": false,
|
|
865
|
-
"type": "string",
|
|
866
|
-
"defaultValue":
|
|
867
|
-
"description": "
|
|
2658
|
+
"type": "string | number | readonly string[]",
|
|
2659
|
+
"defaultValue": null,
|
|
2660
|
+
"description": "The input value of the combobox. Use when controlled."
|
|
868
2661
|
},
|
|
869
2662
|
{
|
|
870
|
-
"name": "
|
|
2663
|
+
"name": "isItemEqualToValue",
|
|
871
2664
|
"required": false,
|
|
872
|
-
"type": "boolean",
|
|
873
|
-
"defaultValue":
|
|
874
|
-
"description": "
|
|
2665
|
+
"type": "(itemValue: Value, value: Value) => boolean",
|
|
2666
|
+
"defaultValue": null,
|
|
2667
|
+
"description": "Custom comparison logic used to determine if a combobox item value matches the current selected value. Useful when item values are objects without matching referentially.\nDefaults to `Object.is` comparison."
|
|
875
2668
|
},
|
|
876
2669
|
{
|
|
877
|
-
"name": "
|
|
2670
|
+
"name": "items",
|
|
878
2671
|
"required": false,
|
|
879
|
-
"type": "
|
|
2672
|
+
"type": "readonly any[] | readonly Group<any>[]",
|
|
880
2673
|
"defaultValue": null,
|
|
881
|
-
"description": "
|
|
2674
|
+
"description": "The items to be displayed in the list.\nCan be either a flat array of items or an array of groups with items."
|
|
882
2675
|
},
|
|
883
2676
|
{
|
|
884
|
-
"name": "
|
|
2677
|
+
"name": "itemToStringLabel",
|
|
2678
|
+
"required": false,
|
|
2679
|
+
"type": "(itemValue: Value) => string",
|
|
2680
|
+
"defaultValue": null,
|
|
2681
|
+
"description": "When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for display in the input.\nIf the shape of the object is `{ value, label }`, the label will be used automatically without needing to specify this prop."
|
|
2682
|
+
},
|
|
2683
|
+
{
|
|
2684
|
+
"name": "itemToStringValue",
|
|
2685
|
+
"required": false,
|
|
2686
|
+
"type": "(itemValue: Value) => string",
|
|
2687
|
+
"defaultValue": null,
|
|
2688
|
+
"description": "When the item values are objects (`<Combobox.Item value={object}>`), this function converts the object value to a string representation for form submission.\nIf the shape of the object is `{ value, label }`, the value will be used automatically without needing to specify this prop."
|
|
2689
|
+
},
|
|
2690
|
+
{
|
|
2691
|
+
"name": "limit",
|
|
2692
|
+
"required": false,
|
|
2693
|
+
"type": "number",
|
|
2694
|
+
"defaultValue": "-1",
|
|
2695
|
+
"description": "The maximum number of items to display in the list."
|
|
2696
|
+
},
|
|
2697
|
+
{
|
|
2698
|
+
"name": "locale",
|
|
2699
|
+
"required": false,
|
|
2700
|
+
"type": "LocalesArgument",
|
|
2701
|
+
"defaultValue": null,
|
|
2702
|
+
"description": "The locale to use for string comparison.\nDefaults to the user's runtime locale."
|
|
2703
|
+
},
|
|
2704
|
+
{
|
|
2705
|
+
"name": "loopFocus",
|
|
2706
|
+
"required": false,
|
|
2707
|
+
"type": "boolean",
|
|
2708
|
+
"defaultValue": "true",
|
|
2709
|
+
"description": "Whether to loop keyboard focus back to the input when the end of the list is reached while using the arrow keys. The first item can then be reached by pressing <kbd>ArrowDown</kbd> again from the input, or the last item can be reached by pressing <kbd>ArrowUp</kbd> from the input.\nThe input is always included in the focus loop per [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/).\nWhen disabled, focus does not move when on the last element and the user presses <kbd>ArrowDown</kbd>, or when on the first element and the user presses <kbd>ArrowUp</kbd>."
|
|
2710
|
+
},
|
|
2711
|
+
{
|
|
2712
|
+
"name": "modal",
|
|
885
2713
|
"required": false,
|
|
886
2714
|
"type": "boolean",
|
|
887
2715
|
"defaultValue": "false",
|
|
888
|
-
"description": "
|
|
2716
|
+
"description": "Determines if the popup enters a modal state when open.\n- `true`: user interaction is limited to the popup: document page scroll is locked and pointer interactions on outside elements are disabled.\n- `false`: user interaction with the rest of the document is allowed."
|
|
889
2717
|
},
|
|
890
2718
|
{
|
|
891
|
-
"name": "
|
|
2719
|
+
"name": "multiple",
|
|
892
2720
|
"required": false,
|
|
893
2721
|
"type": "boolean",
|
|
894
2722
|
"defaultValue": "false",
|
|
895
|
-
"description": "Whether
|
|
2723
|
+
"description": "Whether multiple items can be selected."
|
|
896
2724
|
},
|
|
897
2725
|
{
|
|
898
|
-
"name": "
|
|
2726
|
+
"name": "name",
|
|
899
2727
|
"required": false,
|
|
900
|
-
"type": "
|
|
2728
|
+
"type": "string",
|
|
901
2729
|
"defaultValue": null,
|
|
902
|
-
"description": "
|
|
2730
|
+
"description": "Identifies the field when a form is submitted."
|
|
903
2731
|
},
|
|
904
2732
|
{
|
|
905
|
-
"name": "
|
|
2733
|
+
"name": "onInputValueChange",
|
|
906
2734
|
"required": false,
|
|
907
|
-
"type": "
|
|
2735
|
+
"type": "(\n inputValue: string,\n eventDetails: ChangeEventDetails\n) => void",
|
|
908
2736
|
"defaultValue": null,
|
|
909
|
-
"description": "
|
|
2737
|
+
"description": "Event handler called when the input value changes."
|
|
2738
|
+
},
|
|
2739
|
+
{
|
|
2740
|
+
"name": "onItemHighlighted",
|
|
2741
|
+
"required": false,
|
|
2742
|
+
"type": "(\n highlightedValue: Value,\n eventDetails: HighlightEventDetails\n) => void",
|
|
2743
|
+
"defaultValue": null,
|
|
2744
|
+
"description": "Callback fired when an item is highlighted or unhighlighted.\nReceives the highlighted item value (or `undefined` if no item is highlighted) and event details with a `reason` property describing why the highlight changed.\nThe `reason` can be:\n- `'keyboard'`: the highlight changed due to keyboard navigation.\n- `'pointer'`: the highlight changed due to pointer hovering.\n- `'none'`: the highlight changed programmatically."
|
|
2745
|
+
},
|
|
2746
|
+
{
|
|
2747
|
+
"name": "onOpenChange",
|
|
2748
|
+
"required": false,
|
|
2749
|
+
"type": "(\n open: boolean,\n eventDetails: ChangeEventDetails\n) => void",
|
|
2750
|
+
"defaultValue": null,
|
|
2751
|
+
"description": "Event handler called when the popup is opened or closed."
|
|
2752
|
+
},
|
|
2753
|
+
{
|
|
2754
|
+
"name": "onOpenChangeComplete",
|
|
2755
|
+
"required": false,
|
|
2756
|
+
"type": "(open: boolean) => void",
|
|
2757
|
+
"defaultValue": null,
|
|
2758
|
+
"description": "Event handler called after any animations complete when the popup is opened or closed."
|
|
2759
|
+
},
|
|
2760
|
+
{
|
|
2761
|
+
"name": "onValueChange",
|
|
2762
|
+
"required": false,
|
|
2763
|
+
"type": "(\n value:\n | ComboboxValueType<Value, Multiple>\n | (Multiple extends true ? never : null),\n eventDetails: ChangeEventDetails\n) => void",
|
|
2764
|
+
"defaultValue": null,
|
|
2765
|
+
"description": "Event handler called when the selected value of the combobox changes."
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
"name": "open",
|
|
2769
|
+
"required": false,
|
|
2770
|
+
"type": "boolean",
|
|
2771
|
+
"defaultValue": null,
|
|
2772
|
+
"description": "Whether the popup is currently open. Use when controlled."
|
|
2773
|
+
},
|
|
2774
|
+
{
|
|
2775
|
+
"name": "openOnInputClick",
|
|
2776
|
+
"required": false,
|
|
2777
|
+
"type": "boolean",
|
|
2778
|
+
"defaultValue": "true",
|
|
2779
|
+
"description": "Whether the popup opens when clicking the input."
|
|
2780
|
+
},
|
|
2781
|
+
{
|
|
2782
|
+
"name": "readOnly",
|
|
2783
|
+
"required": false,
|
|
2784
|
+
"type": "boolean",
|
|
2785
|
+
"defaultValue": "false",
|
|
2786
|
+
"description": "Whether the user should be unable to choose a different option from the popup."
|
|
910
2787
|
},
|
|
911
2788
|
{
|
|
912
2789
|
"name": "required",
|
|
913
2790
|
"required": false,
|
|
914
2791
|
"type": "boolean",
|
|
915
2792
|
"defaultValue": "false",
|
|
916
|
-
"description": "Whether the user must
|
|
2793
|
+
"description": "Whether the user must choose a value before submitting a form."
|
|
917
2794
|
},
|
|
918
2795
|
{
|
|
919
2796
|
"name": "style",
|
|
920
2797
|
"required": false,
|
|
921
|
-
"type": "
|
|
2798
|
+
"type": "CSSProperties",
|
|
922
2799
|
"defaultValue": null,
|
|
923
|
-
"description": "
|
|
2800
|
+
"description": ""
|
|
924
2801
|
},
|
|
925
2802
|
{
|
|
926
|
-
"name": "
|
|
2803
|
+
"name": "value",
|
|
927
2804
|
"required": false,
|
|
928
|
-
"type": "
|
|
2805
|
+
"type": "ComboboxValueType<Value, Multiple> | null",
|
|
929
2806
|
"defaultValue": null,
|
|
930
|
-
"description": "The value
|
|
2807
|
+
"description": "The selected value of the combobox. Use when controlled."
|
|
931
2808
|
},
|
|
932
2809
|
{
|
|
933
|
-
"name": "
|
|
2810
|
+
"name": "virtualized",
|
|
934
2811
|
"required": false,
|
|
935
|
-
"type": "
|
|
936
|
-
"defaultValue":
|
|
937
|
-
"description": "
|
|
2812
|
+
"type": "boolean",
|
|
2813
|
+
"defaultValue": "false",
|
|
2814
|
+
"description": "Whether the items are being externally virtualized."
|
|
2815
|
+
},
|
|
2816
|
+
{
|
|
2817
|
+
"name": "width",
|
|
2818
|
+
"required": false,
|
|
2819
|
+
"type": "\"auto\" | \"wide\" | \"full\" | null",
|
|
2820
|
+
"defaultValue": "auto",
|
|
2821
|
+
"description": "Field width: `auto` keeps the compact minimum; `wide` raises it; `full` fills the parent."
|
|
938
2822
|
}
|
|
939
2823
|
]
|
|
940
2824
|
},
|
|
941
2825
|
"subComponents": [
|
|
942
2826
|
{
|
|
943
|
-
"name": "
|
|
944
|
-
"description": "
|
|
2827
|
+
"name": "Combobox.Arrow",
|
|
2828
|
+
"description": "Combobox.Arrow — pointer arrow attached to the popup.",
|
|
2829
|
+
"props": [
|
|
2830
|
+
{
|
|
2831
|
+
"name": "className",
|
|
2832
|
+
"required": false,
|
|
2833
|
+
"type": "string | ((state: ComboboxArrowState) => string)",
|
|
2834
|
+
"defaultValue": null,
|
|
2835
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2836
|
+
},
|
|
2837
|
+
{
|
|
2838
|
+
"name": "ref",
|
|
2839
|
+
"required": false,
|
|
2840
|
+
"type": "Ref<HTMLDivElement>",
|
|
2841
|
+
"defaultValue": null,
|
|
2842
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2843
|
+
},
|
|
2844
|
+
{
|
|
2845
|
+
"name": "render",
|
|
2846
|
+
"required": false,
|
|
2847
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxArrowState>",
|
|
2848
|
+
"defaultValue": null,
|
|
2849
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2850
|
+
},
|
|
2851
|
+
{
|
|
2852
|
+
"name": "style",
|
|
2853
|
+
"required": false,
|
|
2854
|
+
"type": "| CSSProperties\n| ((state: ComboboxArrowState) => CSSProperties)",
|
|
2855
|
+
"defaultValue": null,
|
|
2856
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2857
|
+
}
|
|
2858
|
+
]
|
|
2859
|
+
},
|
|
2860
|
+
{
|
|
2861
|
+
"name": "Combobox.Backdrop",
|
|
2862
|
+
"description": "Combobox.Backdrop — overlay behind the popup (visible only in modal mode).",
|
|
2863
|
+
"props": [
|
|
2864
|
+
{
|
|
2865
|
+
"name": "className",
|
|
2866
|
+
"required": false,
|
|
2867
|
+
"type": "| string\n| ((state: ComboboxBackdropState) => string)",
|
|
2868
|
+
"defaultValue": null,
|
|
2869
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2870
|
+
},
|
|
2871
|
+
{
|
|
2872
|
+
"name": "ref",
|
|
2873
|
+
"required": false,
|
|
2874
|
+
"type": "Ref<HTMLDivElement>",
|
|
2875
|
+
"defaultValue": null,
|
|
2876
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2877
|
+
},
|
|
2878
|
+
{
|
|
2879
|
+
"name": "render",
|
|
2880
|
+
"required": false,
|
|
2881
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxBackdropState>",
|
|
2882
|
+
"defaultValue": null,
|
|
2883
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2884
|
+
},
|
|
2885
|
+
{
|
|
2886
|
+
"name": "style",
|
|
2887
|
+
"required": false,
|
|
2888
|
+
"type": "| CSSProperties\n| ((state: ComboboxBackdropState) => CSSProperties)",
|
|
2889
|
+
"defaultValue": null,
|
|
2890
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2891
|
+
}
|
|
2892
|
+
]
|
|
2893
|
+
},
|
|
2894
|
+
{
|
|
2895
|
+
"name": "Combobox.Chip",
|
|
2896
|
+
"description": "Combobox.Chip — one selected value in the field.",
|
|
2897
|
+
"props": [
|
|
2898
|
+
{
|
|
2899
|
+
"name": "className",
|
|
2900
|
+
"required": false,
|
|
2901
|
+
"type": "string | ((state: ComboboxChipState) => string)",
|
|
2902
|
+
"defaultValue": null,
|
|
2903
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2904
|
+
},
|
|
2905
|
+
{
|
|
2906
|
+
"name": "ref",
|
|
2907
|
+
"required": false,
|
|
2908
|
+
"type": "Ref<HTMLDivElement>",
|
|
2909
|
+
"defaultValue": null,
|
|
2910
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2911
|
+
},
|
|
2912
|
+
{
|
|
2913
|
+
"name": "render",
|
|
2914
|
+
"required": false,
|
|
2915
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxChipState>",
|
|
2916
|
+
"defaultValue": null,
|
|
2917
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2918
|
+
},
|
|
2919
|
+
{
|
|
2920
|
+
"name": "style",
|
|
2921
|
+
"required": false,
|
|
2922
|
+
"type": "| CSSProperties\n| ((state: ComboboxChipState) => CSSProperties)",
|
|
2923
|
+
"defaultValue": null,
|
|
2924
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2925
|
+
}
|
|
2926
|
+
]
|
|
2927
|
+
},
|
|
2928
|
+
{
|
|
2929
|
+
"name": "Combobox.ChipRemove",
|
|
2930
|
+
"description": "Combobox.ChipRemove — button that removes its chip. Without children it draws a small cross; give it an `aria-label`.",
|
|
2931
|
+
"props": [
|
|
2932
|
+
{
|
|
2933
|
+
"name": "className",
|
|
2934
|
+
"required": false,
|
|
2935
|
+
"type": "| string\n| ((state: ComboboxChipRemoveState) => string)",
|
|
2936
|
+
"defaultValue": null,
|
|
2937
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2938
|
+
},
|
|
2939
|
+
{
|
|
2940
|
+
"name": "nativeButton",
|
|
2941
|
+
"required": false,
|
|
2942
|
+
"type": "boolean",
|
|
2943
|
+
"defaultValue": "true",
|
|
2944
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
2945
|
+
},
|
|
2946
|
+
{
|
|
2947
|
+
"name": "ref",
|
|
2948
|
+
"required": false,
|
|
2949
|
+
"type": "Ref<HTMLDivElement>",
|
|
2950
|
+
"defaultValue": null,
|
|
2951
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2952
|
+
},
|
|
2953
|
+
{
|
|
2954
|
+
"name": "render",
|
|
2955
|
+
"required": false,
|
|
2956
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxChipRemoveState>",
|
|
2957
|
+
"defaultValue": null,
|
|
2958
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2959
|
+
},
|
|
2960
|
+
{
|
|
2961
|
+
"name": "style",
|
|
2962
|
+
"required": false,
|
|
2963
|
+
"type": "| CSSProperties\n| ((state: ComboboxChipRemoveState) => CSSProperties)",
|
|
2964
|
+
"defaultValue": null,
|
|
2965
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
2966
|
+
}
|
|
2967
|
+
]
|
|
2968
|
+
},
|
|
2969
|
+
{
|
|
2970
|
+
"name": "Combobox.Chips",
|
|
2971
|
+
"description": "Combobox.Chips — the field box of a multiple combobox, holding chips and the input.",
|
|
2972
|
+
"props": [
|
|
2973
|
+
{
|
|
2974
|
+
"name": "className",
|
|
2975
|
+
"required": false,
|
|
2976
|
+
"type": "string | ((state: ComboboxChipsState) => string)",
|
|
2977
|
+
"defaultValue": null,
|
|
2978
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
2979
|
+
},
|
|
2980
|
+
{
|
|
2981
|
+
"name": "ref",
|
|
2982
|
+
"required": false,
|
|
2983
|
+
"type": "Ref<HTMLDivElement>",
|
|
2984
|
+
"defaultValue": null,
|
|
2985
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
2986
|
+
},
|
|
2987
|
+
{
|
|
2988
|
+
"name": "render",
|
|
2989
|
+
"required": false,
|
|
2990
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxChipsState>",
|
|
2991
|
+
"defaultValue": null,
|
|
2992
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
2993
|
+
},
|
|
2994
|
+
{
|
|
2995
|
+
"name": "style",
|
|
2996
|
+
"required": false,
|
|
2997
|
+
"type": "| CSSProperties\n| ((state: ComboboxChipsState) => CSSProperties)",
|
|
2998
|
+
"defaultValue": null,
|
|
2999
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3000
|
+
}
|
|
3001
|
+
]
|
|
3002
|
+
},
|
|
3003
|
+
{
|
|
3004
|
+
"name": "Combobox.Clear",
|
|
3005
|
+
"description": "Combobox.Clear — button that clears the value. Without children it draws a cross.",
|
|
3006
|
+
"props": [
|
|
3007
|
+
{
|
|
3008
|
+
"name": "className",
|
|
3009
|
+
"required": false,
|
|
3010
|
+
"type": "string | ((state: ComboboxClearState) => string)",
|
|
3011
|
+
"defaultValue": null,
|
|
3012
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3013
|
+
},
|
|
3014
|
+
{
|
|
3015
|
+
"name": "disabled",
|
|
3016
|
+
"required": false,
|
|
3017
|
+
"type": "boolean",
|
|
3018
|
+
"defaultValue": "false",
|
|
3019
|
+
"description": "Whether the component should ignore user interaction."
|
|
3020
|
+
},
|
|
3021
|
+
{
|
|
3022
|
+
"name": "keepMounted",
|
|
3023
|
+
"required": false,
|
|
3024
|
+
"type": "boolean",
|
|
3025
|
+
"defaultValue": "false",
|
|
3026
|
+
"description": "Whether the component should remain mounted in the DOM when not visible."
|
|
3027
|
+
},
|
|
3028
|
+
{
|
|
3029
|
+
"name": "nativeButton",
|
|
3030
|
+
"required": false,
|
|
3031
|
+
"type": "boolean",
|
|
3032
|
+
"defaultValue": "true",
|
|
3033
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
3034
|
+
},
|
|
3035
|
+
{
|
|
3036
|
+
"name": "ref",
|
|
3037
|
+
"required": false,
|
|
3038
|
+
"type": "Ref<HTMLDivElement>",
|
|
3039
|
+
"defaultValue": null,
|
|
3040
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3041
|
+
},
|
|
3042
|
+
{
|
|
3043
|
+
"name": "render",
|
|
3044
|
+
"required": false,
|
|
3045
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxClearState>",
|
|
3046
|
+
"defaultValue": null,
|
|
3047
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3048
|
+
},
|
|
3049
|
+
{
|
|
3050
|
+
"name": "style",
|
|
3051
|
+
"required": false,
|
|
3052
|
+
"type": "| CSSProperties\n| ((state: ComboboxClearState) => CSSProperties)",
|
|
3053
|
+
"defaultValue": null,
|
|
3054
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3055
|
+
}
|
|
3056
|
+
]
|
|
3057
|
+
},
|
|
3058
|
+
{
|
|
3059
|
+
"name": "Combobox.Collection",
|
|
3060
|
+
"description": "Combobox.Collection — renders a list of items inside a group.",
|
|
3061
|
+
"props": []
|
|
3062
|
+
},
|
|
3063
|
+
{
|
|
3064
|
+
"name": "Combobox.Empty",
|
|
3065
|
+
"description": "Combobox.Empty — message shown while no item matches.",
|
|
3066
|
+
"props": [
|
|
3067
|
+
{
|
|
3068
|
+
"name": "className",
|
|
3069
|
+
"required": false,
|
|
3070
|
+
"type": "string | ((state: ComboboxEmptyState) => string)",
|
|
3071
|
+
"defaultValue": null,
|
|
3072
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3073
|
+
},
|
|
3074
|
+
{
|
|
3075
|
+
"name": "ref",
|
|
3076
|
+
"required": false,
|
|
3077
|
+
"type": "Ref<HTMLDivElement>",
|
|
3078
|
+
"defaultValue": null,
|
|
3079
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3080
|
+
},
|
|
3081
|
+
{
|
|
3082
|
+
"name": "render",
|
|
3083
|
+
"required": false,
|
|
3084
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxEmptyState>",
|
|
3085
|
+
"defaultValue": null,
|
|
3086
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3087
|
+
},
|
|
3088
|
+
{
|
|
3089
|
+
"name": "style",
|
|
3090
|
+
"required": false,
|
|
3091
|
+
"type": "| CSSProperties\n| ((state: ComboboxEmptyState) => CSSProperties)",
|
|
3092
|
+
"defaultValue": null,
|
|
3093
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3094
|
+
}
|
|
3095
|
+
]
|
|
3096
|
+
},
|
|
3097
|
+
{
|
|
3098
|
+
"name": "Combobox.Group",
|
|
3099
|
+
"description": "Combobox.Group — wrapper around a grouped set of items.",
|
|
3100
|
+
"props": [
|
|
3101
|
+
{
|
|
3102
|
+
"name": "className",
|
|
3103
|
+
"required": false,
|
|
3104
|
+
"type": "string | ((state: ComboboxGroupState) => string)",
|
|
3105
|
+
"defaultValue": null,
|
|
3106
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3107
|
+
},
|
|
3108
|
+
{
|
|
3109
|
+
"name": "items",
|
|
3110
|
+
"required": false,
|
|
3111
|
+
"type": "readonly any[]",
|
|
3112
|
+
"defaultValue": null,
|
|
3113
|
+
"description": "Items to be rendered within this group.\nWhen provided, child `Collection` components will use these items."
|
|
3114
|
+
},
|
|
3115
|
+
{
|
|
3116
|
+
"name": "ref",
|
|
3117
|
+
"required": false,
|
|
3118
|
+
"type": "Ref<HTMLDivElement>",
|
|
3119
|
+
"defaultValue": null,
|
|
3120
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3121
|
+
},
|
|
3122
|
+
{
|
|
3123
|
+
"name": "render",
|
|
3124
|
+
"required": false,
|
|
3125
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxGroupState>",
|
|
3126
|
+
"defaultValue": null,
|
|
3127
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3128
|
+
},
|
|
3129
|
+
{
|
|
3130
|
+
"name": "style",
|
|
3131
|
+
"required": false,
|
|
3132
|
+
"type": "| CSSProperties\n| ((state: ComboboxGroupState) => CSSProperties)",
|
|
3133
|
+
"defaultValue": null,
|
|
3134
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3135
|
+
}
|
|
3136
|
+
]
|
|
3137
|
+
},
|
|
3138
|
+
{
|
|
3139
|
+
"name": "Combobox.GroupLabel",
|
|
3140
|
+
"description": "Combobox.GroupLabel — heading for a Combobox.Group.",
|
|
3141
|
+
"props": [
|
|
3142
|
+
{
|
|
3143
|
+
"name": "className",
|
|
3144
|
+
"required": false,
|
|
3145
|
+
"type": "| string\n| ((state: ComboboxGroupLabelState) => string)",
|
|
3146
|
+
"defaultValue": null,
|
|
3147
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3148
|
+
},
|
|
3149
|
+
{
|
|
3150
|
+
"name": "ref",
|
|
3151
|
+
"required": false,
|
|
3152
|
+
"type": "Ref<HTMLDivElement>",
|
|
3153
|
+
"defaultValue": null,
|
|
3154
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3155
|
+
},
|
|
3156
|
+
{
|
|
3157
|
+
"name": "render",
|
|
3158
|
+
"required": false,
|
|
3159
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxGroupLabelState>",
|
|
3160
|
+
"defaultValue": null,
|
|
3161
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3162
|
+
},
|
|
3163
|
+
{
|
|
3164
|
+
"name": "style",
|
|
3165
|
+
"required": false,
|
|
3166
|
+
"type": "| CSSProperties\n| ((state: ComboboxGroupLabelState) => CSSProperties)",
|
|
3167
|
+
"defaultValue": null,
|
|
3168
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3169
|
+
}
|
|
3170
|
+
]
|
|
3171
|
+
},
|
|
3172
|
+
{
|
|
3173
|
+
"name": "Combobox.Icon",
|
|
3174
|
+
"description": "Combobox.Icon — visual indicator (chevron) inside the trigger.",
|
|
3175
|
+
"props": [
|
|
3176
|
+
{
|
|
3177
|
+
"name": "className",
|
|
3178
|
+
"required": false,
|
|
3179
|
+
"type": "string | ((state: ComboboxIconState) => string)",
|
|
3180
|
+
"defaultValue": null,
|
|
3181
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3182
|
+
},
|
|
3183
|
+
{
|
|
3184
|
+
"name": "ref",
|
|
3185
|
+
"required": false,
|
|
3186
|
+
"type": "Ref<HTMLDivElement>",
|
|
3187
|
+
"defaultValue": null,
|
|
3188
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3189
|
+
},
|
|
3190
|
+
{
|
|
3191
|
+
"name": "render",
|
|
3192
|
+
"required": false,
|
|
3193
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxIconState>",
|
|
3194
|
+
"defaultValue": null,
|
|
3195
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3196
|
+
},
|
|
3197
|
+
{
|
|
3198
|
+
"name": "style",
|
|
3199
|
+
"required": false,
|
|
3200
|
+
"type": "| CSSProperties\n| ((state: ComboboxIconState) => CSSProperties)",
|
|
3201
|
+
"defaultValue": null,
|
|
3202
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3203
|
+
}
|
|
3204
|
+
]
|
|
3205
|
+
},
|
|
3206
|
+
{
|
|
3207
|
+
"name": "Combobox.Input",
|
|
3208
|
+
"description": "Combobox.Input — the text input that filters the list. An `inline` list is always open, so `aria-expanded` defaults to true.",
|
|
3209
|
+
"props": [
|
|
3210
|
+
{
|
|
3211
|
+
"name": "className",
|
|
3212
|
+
"required": false,
|
|
3213
|
+
"type": "string | ((state: ComboboxInputState) => string)",
|
|
3214
|
+
"defaultValue": null,
|
|
3215
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3216
|
+
},
|
|
3217
|
+
{
|
|
3218
|
+
"name": "disabled",
|
|
3219
|
+
"required": false,
|
|
3220
|
+
"type": "boolean",
|
|
3221
|
+
"defaultValue": "false",
|
|
3222
|
+
"description": "Whether the component should ignore user interaction."
|
|
3223
|
+
},
|
|
3224
|
+
{
|
|
3225
|
+
"name": "ref",
|
|
3226
|
+
"required": false,
|
|
3227
|
+
"type": "Ref<HTMLDivElement>",
|
|
3228
|
+
"defaultValue": null,
|
|
3229
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3230
|
+
},
|
|
3231
|
+
{
|
|
3232
|
+
"name": "render",
|
|
3233
|
+
"required": false,
|
|
3234
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxInputState>",
|
|
3235
|
+
"defaultValue": null,
|
|
3236
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3237
|
+
},
|
|
3238
|
+
{
|
|
3239
|
+
"name": "style",
|
|
3240
|
+
"required": false,
|
|
3241
|
+
"type": "| CSSProperties\n| ((state: ComboboxInputState) => CSSProperties)",
|
|
3242
|
+
"defaultValue": null,
|
|
3243
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3244
|
+
}
|
|
3245
|
+
]
|
|
3246
|
+
},
|
|
3247
|
+
{
|
|
3248
|
+
"name": "Combobox.InputGroup",
|
|
3249
|
+
"description": "Combobox.InputGroup — the field box that holds the input, clear button, and trigger.",
|
|
3250
|
+
"props": [
|
|
3251
|
+
{
|
|
3252
|
+
"name": "className",
|
|
3253
|
+
"required": false,
|
|
3254
|
+
"type": "| string\n| ((state: ComboboxInputGroupState) => string)",
|
|
3255
|
+
"defaultValue": null,
|
|
3256
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3257
|
+
},
|
|
3258
|
+
{
|
|
3259
|
+
"name": "ref",
|
|
3260
|
+
"required": false,
|
|
3261
|
+
"type": "Ref<HTMLDivElement>",
|
|
3262
|
+
"defaultValue": null,
|
|
3263
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3264
|
+
},
|
|
3265
|
+
{
|
|
3266
|
+
"name": "render",
|
|
3267
|
+
"required": false,
|
|
3268
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxInputGroupState>",
|
|
3269
|
+
"defaultValue": null,
|
|
3270
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3271
|
+
},
|
|
3272
|
+
{
|
|
3273
|
+
"name": "style",
|
|
3274
|
+
"required": false,
|
|
3275
|
+
"type": "| CSSProperties\n| ((state: ComboboxInputGroupState) => CSSProperties)",
|
|
3276
|
+
"defaultValue": null,
|
|
3277
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3278
|
+
}
|
|
3279
|
+
]
|
|
3280
|
+
},
|
|
3281
|
+
{
|
|
3282
|
+
"name": "Combobox.Item",
|
|
3283
|
+
"description": "Combobox.Item — individual selectable option.",
|
|
3284
|
+
"props": [
|
|
3285
|
+
{
|
|
3286
|
+
"name": "className",
|
|
3287
|
+
"required": false,
|
|
3288
|
+
"type": "string | ((state: ComboboxItemState) => string)",
|
|
3289
|
+
"defaultValue": null,
|
|
3290
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3291
|
+
},
|
|
3292
|
+
{
|
|
3293
|
+
"name": "disabled",
|
|
3294
|
+
"required": false,
|
|
3295
|
+
"type": "boolean",
|
|
3296
|
+
"defaultValue": "false",
|
|
3297
|
+
"description": "Whether the component should ignore user interaction."
|
|
3298
|
+
},
|
|
3299
|
+
{
|
|
3300
|
+
"name": "index",
|
|
3301
|
+
"required": false,
|
|
3302
|
+
"type": "number",
|
|
3303
|
+
"defaultValue": null,
|
|
3304
|
+
"description": "The index of the item in the list. Improves performance when specified by avoiding the need to calculate the index automatically from the DOM."
|
|
3305
|
+
},
|
|
3306
|
+
{
|
|
3307
|
+
"name": "nativeButton",
|
|
3308
|
+
"required": false,
|
|
3309
|
+
"type": "boolean",
|
|
3310
|
+
"defaultValue": "true",
|
|
3311
|
+
"description": "Whether the component renders a native `<button>` element when replacing it\nvia the `render` prop.\nSet to `false` if the rendered element is not a button (for example, `<div>`)."
|
|
3312
|
+
},
|
|
3313
|
+
{
|
|
3314
|
+
"name": "onClick",
|
|
3315
|
+
"required": false,
|
|
3316
|
+
"type": "(\n event: BaseUIEvent<MouseEvent<HTMLDivElement, MouseEvent>>\n) => void",
|
|
3317
|
+
"defaultValue": null,
|
|
3318
|
+
"description": "An optional click handler for the item when selected.\nIt fires when clicking the item with the pointer, as well as when pressing `Enter` with the keyboard if the item is highlighted when the `Input` or `List` element has focus."
|
|
3319
|
+
},
|
|
3320
|
+
{
|
|
3321
|
+
"name": "ref",
|
|
3322
|
+
"required": false,
|
|
3323
|
+
"type": "Ref<HTMLDivElement>",
|
|
3324
|
+
"defaultValue": null,
|
|
3325
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3326
|
+
},
|
|
3327
|
+
{
|
|
3328
|
+
"name": "render",
|
|
3329
|
+
"required": false,
|
|
3330
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxItemState>",
|
|
3331
|
+
"defaultValue": null,
|
|
3332
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3333
|
+
},
|
|
3334
|
+
{
|
|
3335
|
+
"name": "style",
|
|
3336
|
+
"required": false,
|
|
3337
|
+
"type": "| CSSProperties\n| ((state: ComboboxItemState) => CSSProperties)",
|
|
3338
|
+
"defaultValue": null,
|
|
3339
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3340
|
+
},
|
|
3341
|
+
{
|
|
3342
|
+
"name": "value",
|
|
3343
|
+
"required": true,
|
|
3344
|
+
"type": "any",
|
|
3345
|
+
"defaultValue": null,
|
|
3346
|
+
"description": ""
|
|
3347
|
+
}
|
|
3348
|
+
]
|
|
3349
|
+
},
|
|
3350
|
+
{
|
|
3351
|
+
"name": "Combobox.ItemDescription",
|
|
3352
|
+
"description": "Combobox.ItemDescription — a muted second line under an item's text, such as an email address.",
|
|
3353
|
+
"props": [
|
|
3354
|
+
{
|
|
3355
|
+
"name": "ref",
|
|
3356
|
+
"required": false,
|
|
3357
|
+
"type": "Ref<HTMLDivElement>",
|
|
3358
|
+
"defaultValue": null,
|
|
3359
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3360
|
+
}
|
|
3361
|
+
]
|
|
3362
|
+
},
|
|
3363
|
+
{
|
|
3364
|
+
"name": "Combobox.ItemIndicator",
|
|
3365
|
+
"description": "Combobox.ItemIndicator — marker inside the item. Without children a single combobox draws a check in the selected\nitem, and a `multiple` combobox draws a checkbox box on every item, checked when selected.",
|
|
3366
|
+
"props": [
|
|
3367
|
+
{
|
|
3368
|
+
"name": "className",
|
|
3369
|
+
"required": false,
|
|
3370
|
+
"type": "| string\n| ((state: ComboboxItemIndicatorState) => string)",
|
|
3371
|
+
"defaultValue": null,
|
|
3372
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3373
|
+
},
|
|
3374
|
+
{
|
|
3375
|
+
"name": "keepMounted",
|
|
3376
|
+
"required": false,
|
|
3377
|
+
"type": "boolean",
|
|
3378
|
+
"defaultValue": "false",
|
|
3379
|
+
"description": "Whether to keep the HTML element in the DOM when the item is not selected."
|
|
3380
|
+
},
|
|
3381
|
+
{
|
|
3382
|
+
"name": "ref",
|
|
3383
|
+
"required": false,
|
|
3384
|
+
"type": "Ref<HTMLDivElement>",
|
|
3385
|
+
"defaultValue": null,
|
|
3386
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3387
|
+
},
|
|
3388
|
+
{
|
|
3389
|
+
"name": "render",
|
|
3390
|
+
"required": false,
|
|
3391
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<\n HTMLProps,\n ComboboxItemIndicatorState\n >",
|
|
3392
|
+
"defaultValue": null,
|
|
3393
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3394
|
+
},
|
|
3395
|
+
{
|
|
3396
|
+
"name": "style",
|
|
3397
|
+
"required": false,
|
|
3398
|
+
"type": "| CSSProperties\n| ((state: ComboboxItemIndicatorState) => CSSProperties)",
|
|
3399
|
+
"defaultValue": null,
|
|
3400
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3401
|
+
}
|
|
3402
|
+
]
|
|
3403
|
+
},
|
|
3404
|
+
{
|
|
3405
|
+
"name": "Combobox.ItemText",
|
|
3406
|
+
"description": "Combobox.ItemText — text label for an item, beside the indicator.",
|
|
3407
|
+
"props": [
|
|
3408
|
+
{
|
|
3409
|
+
"name": "ref",
|
|
3410
|
+
"required": false,
|
|
3411
|
+
"type": "Ref<HTMLDivElement>",
|
|
3412
|
+
"defaultValue": null,
|
|
3413
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3414
|
+
}
|
|
3415
|
+
]
|
|
3416
|
+
},
|
|
3417
|
+
{
|
|
3418
|
+
"name": "Combobox.Label",
|
|
3419
|
+
"description": "Combobox.Label — visible label, for the trigger in the input-inside-popup pattern. Label an input with `Field.Label`.",
|
|
3420
|
+
"props": [
|
|
3421
|
+
{
|
|
3422
|
+
"name": "className",
|
|
3423
|
+
"required": false,
|
|
3424
|
+
"type": "string | ((state: ComboboxLabelState) => string)",
|
|
3425
|
+
"defaultValue": null,
|
|
3426
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3427
|
+
},
|
|
3428
|
+
{
|
|
3429
|
+
"name": "ref",
|
|
3430
|
+
"required": false,
|
|
3431
|
+
"type": "Ref<HTMLDivElement>",
|
|
3432
|
+
"defaultValue": null,
|
|
3433
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3434
|
+
},
|
|
3435
|
+
{
|
|
3436
|
+
"name": "render",
|
|
3437
|
+
"required": false,
|
|
3438
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxLabelState>",
|
|
3439
|
+
"defaultValue": null,
|
|
3440
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3441
|
+
},
|
|
3442
|
+
{
|
|
3443
|
+
"name": "style",
|
|
3444
|
+
"required": false,
|
|
3445
|
+
"type": "| CSSProperties\n| ((state: ComboboxLabelState) => CSSProperties)",
|
|
3446
|
+
"defaultValue": null,
|
|
3447
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3448
|
+
}
|
|
3449
|
+
]
|
|
3450
|
+
},
|
|
3451
|
+
{
|
|
3452
|
+
"name": "Combobox.List",
|
|
3453
|
+
"description": "Combobox.List — items container. An `inline` list keeps the height it had when it mounted while it filters.",
|
|
3454
|
+
"props": [
|
|
3455
|
+
{
|
|
3456
|
+
"name": "className",
|
|
3457
|
+
"required": false,
|
|
3458
|
+
"type": "string | ((state: ComboboxListState) => string)",
|
|
3459
|
+
"defaultValue": null,
|
|
3460
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3461
|
+
},
|
|
3462
|
+
{
|
|
3463
|
+
"name": "ref",
|
|
3464
|
+
"required": false,
|
|
3465
|
+
"type": "Ref<HTMLDivElement>",
|
|
3466
|
+
"defaultValue": null,
|
|
3467
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3468
|
+
},
|
|
3469
|
+
{
|
|
3470
|
+
"name": "render",
|
|
3471
|
+
"required": false,
|
|
3472
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxListState>",
|
|
3473
|
+
"defaultValue": null,
|
|
3474
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3475
|
+
},
|
|
3476
|
+
{
|
|
3477
|
+
"name": "style",
|
|
3478
|
+
"required": false,
|
|
3479
|
+
"type": "| CSSProperties\n| ((state: ComboboxListState) => CSSProperties)",
|
|
3480
|
+
"defaultValue": null,
|
|
3481
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3482
|
+
}
|
|
3483
|
+
]
|
|
3484
|
+
},
|
|
3485
|
+
{
|
|
3486
|
+
"name": "Combobox.Popup",
|
|
3487
|
+
"description": "Combobox.Popup — dropdown surface. It keeps the height it had when it opened while the list filters.",
|
|
3488
|
+
"props": [
|
|
3489
|
+
{
|
|
3490
|
+
"name": "className",
|
|
3491
|
+
"required": false,
|
|
3492
|
+
"type": "string | ((state: ComboboxPopupState) => string)",
|
|
3493
|
+
"defaultValue": null,
|
|
3494
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3495
|
+
},
|
|
3496
|
+
{
|
|
3497
|
+
"name": "finalFocus",
|
|
3498
|
+
"required": false,
|
|
3499
|
+
"type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n closeType: InteractionType\n ) => boolean | void | HTMLElement | null)",
|
|
3500
|
+
"defaultValue": null,
|
|
3501
|
+
"description": "Determines the element to focus when the popup is closed.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (trigger or previously focused element).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."
|
|
3502
|
+
},
|
|
3503
|
+
{
|
|
3504
|
+
"name": "initialFocus",
|
|
3505
|
+
"required": false,
|
|
3506
|
+
"type": "| boolean\n| RefObject<HTMLElement | null>\n| ((\n openType: InteractionType\n ) => boolean | void | HTMLElement | null)",
|
|
3507
|
+
"defaultValue": null,
|
|
3508
|
+
"description": "Determines the element to focus when the popup is opened.\n\n- `false`: Do not move focus.\n- `true`: Move focus based on the default behavior (first tabbable element or popup).\n- `RefObject`: Move focus to the ref element.\n- `function`: Called with the interaction type (`mouse`, `touch`, `pen`, or `keyboard`).\n Return an element to focus, `true` to use the default behavior, or `false`/`undefined` to do nothing."
|
|
3509
|
+
},
|
|
3510
|
+
{
|
|
3511
|
+
"name": "ref",
|
|
3512
|
+
"required": false,
|
|
3513
|
+
"type": "Ref<HTMLDivElement>",
|
|
3514
|
+
"defaultValue": null,
|
|
3515
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
3516
|
+
},
|
|
3517
|
+
{
|
|
3518
|
+
"name": "render",
|
|
3519
|
+
"required": false,
|
|
3520
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPopupState>",
|
|
3521
|
+
"defaultValue": null,
|
|
3522
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3523
|
+
},
|
|
3524
|
+
{
|
|
3525
|
+
"name": "style",
|
|
3526
|
+
"required": false,
|
|
3527
|
+
"type": "| CSSProperties\n| ((state: ComboboxPopupState) => CSSProperties)",
|
|
3528
|
+
"defaultValue": null,
|
|
3529
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3530
|
+
}
|
|
3531
|
+
]
|
|
3532
|
+
},
|
|
3533
|
+
{
|
|
3534
|
+
"name": "Combobox.Portal",
|
|
3535
|
+
"description": "Combobox.Portal — portals the popup tree to document.body (or a custom container).",
|
|
945
3536
|
"props": [
|
|
946
3537
|
{
|
|
947
3538
|
"name": "className",
|
|
948
3539
|
"required": false,
|
|
949
|
-
"type": "
|
|
3540
|
+
"type": "string | ((state: ComboboxPortalState) => string)",
|
|
950
3541
|
"defaultValue": null,
|
|
951
3542
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
952
3543
|
},
|
|
3544
|
+
{
|
|
3545
|
+
"name": "container",
|
|
3546
|
+
"required": false,
|
|
3547
|
+
"type": "| HTMLElement\n| ShadowRoot\n| RefObject<HTMLElement | ShadowRoot | null>\n| null",
|
|
3548
|
+
"defaultValue": null,
|
|
3549
|
+
"description": "A parent element to render the portal element into."
|
|
3550
|
+
},
|
|
953
3551
|
{
|
|
954
3552
|
"name": "keepMounted",
|
|
955
3553
|
"required": false,
|
|
956
3554
|
"type": "boolean",
|
|
957
3555
|
"defaultValue": "false",
|
|
958
|
-
"description": "Whether to keep the
|
|
3556
|
+
"description": "Whether to keep the portal mounted in the DOM while the popup is hidden."
|
|
959
3557
|
},
|
|
960
3558
|
{
|
|
961
3559
|
"name": "ref",
|
|
962
3560
|
"required": false,
|
|
963
|
-
"type": "Ref<
|
|
3561
|
+
"type": "Ref<HTMLDivElement>",
|
|
964
3562
|
"defaultValue": null,
|
|
965
3563
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
966
3564
|
},
|
|
967
3565
|
{
|
|
968
3566
|
"name": "render",
|
|
969
3567
|
"required": false,
|
|
970
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps,
|
|
3568
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPortalState>",
|
|
971
3569
|
"defaultValue": null,
|
|
972
3570
|
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
973
3571
|
},
|
|
974
3572
|
{
|
|
975
3573
|
"name": "style",
|
|
976
3574
|
"required": false,
|
|
977
|
-
"type": "| CSSProperties\n| ((state:
|
|
3575
|
+
"type": "| CSSProperties\n| ((state: ComboboxPortalState) => CSSProperties)",
|
|
978
3576
|
"defaultValue": null,
|
|
979
3577
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
980
3578
|
}
|
|
981
3579
|
]
|
|
982
|
-
}
|
|
983
|
-
]
|
|
984
|
-
},
|
|
985
|
-
"chip": {
|
|
986
|
-
"root": {
|
|
987
|
-
"name": "Chip",
|
|
988
|
-
"description": "Chip — compact inline label for status or category.\nNot based on any upstream component.",
|
|
989
|
-
"props": [
|
|
990
|
-
{
|
|
991
|
-
"name": "appearance",
|
|
992
|
-
"required": false,
|
|
993
|
-
"type": "\"outline\" | \"solid\" | \"subtle\" | null",
|
|
994
|
-
"defaultValue": "outline",
|
|
995
|
-
"description": ""
|
|
996
|
-
},
|
|
997
|
-
{
|
|
998
|
-
"name": "inline",
|
|
999
|
-
"required": false,
|
|
1000
|
-
"type": "boolean | null",
|
|
1001
|
-
"defaultValue": "false",
|
|
1002
|
-
"description": ""
|
|
1003
|
-
},
|
|
1004
|
-
{
|
|
1005
|
-
"name": "ref",
|
|
1006
|
-
"required": false,
|
|
1007
|
-
"type": "Ref<HTMLSpanElement>",
|
|
1008
|
-
"defaultValue": null,
|
|
1009
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1010
|
-
},
|
|
1011
|
-
{
|
|
1012
|
-
"name": "variant",
|
|
1013
|
-
"required": false,
|
|
1014
|
-
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
1015
|
-
"defaultValue": "minor",
|
|
1016
|
-
"description": ""
|
|
1017
|
-
}
|
|
1018
|
-
]
|
|
1019
|
-
},
|
|
1020
|
-
"subComponents": []
|
|
1021
|
-
},
|
|
1022
|
-
"chip-link": {
|
|
1023
|
-
"root": {
|
|
1024
|
-
"name": "ChipLink",
|
|
1025
|
-
"description": "ChipLink — anchor styled as a Chip. Reuses Chip's shared variants so the\nvariant and appearance axes stay aligned, and auto-appends a directional icon\n(local Web UI `ArrowUpRight` for external, `ArrowRight` for internal).",
|
|
1026
|
-
"props": [
|
|
1027
|
-
{
|
|
1028
|
-
"name": "appearance",
|
|
1029
|
-
"required": false,
|
|
1030
|
-
"type": "\"outline\" | \"solid\" | \"subtle\" | null",
|
|
1031
|
-
"defaultValue": "subtle",
|
|
1032
|
-
"description": ""
|
|
1033
|
-
},
|
|
1034
|
-
{
|
|
1035
|
-
"name": "inline",
|
|
1036
|
-
"required": false,
|
|
1037
|
-
"type": "boolean | null",
|
|
1038
|
-
"defaultValue": "false",
|
|
1039
|
-
"description": ""
|
|
1040
|
-
},
|
|
1041
|
-
{
|
|
1042
|
-
"name": "kind",
|
|
1043
|
-
"required": false,
|
|
1044
|
-
"type": "ChipLinkKind",
|
|
1045
|
-
"defaultValue": "external",
|
|
1046
|
-
"description": "Link target scope. `\"external\"` (default) opens in a new tab with a diagonal `ArrowUpRight` icon; `\"internal\"` stays in the current tab with a horizontal `ArrowRight` icon."
|
|
1047
|
-
},
|
|
1048
|
-
{
|
|
1049
|
-
"name": "ref",
|
|
1050
|
-
"required": false,
|
|
1051
|
-
"type": "Ref<HTMLAnchorElement>",
|
|
1052
|
-
"defaultValue": null,
|
|
1053
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1054
|
-
},
|
|
1055
|
-
{
|
|
1056
|
-
"name": "variant",
|
|
1057
|
-
"required": false,
|
|
1058
|
-
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
1059
|
-
"defaultValue": "info",
|
|
1060
|
-
"description": ""
|
|
1061
|
-
}
|
|
1062
|
-
]
|
|
1063
|
-
},
|
|
1064
|
-
"subComponents": []
|
|
1065
|
-
},
|
|
1066
|
-
"code": {
|
|
1067
|
-
"root": {
|
|
1068
|
-
"name": "Code",
|
|
1069
|
-
"description": "",
|
|
1070
|
-
"props": []
|
|
1071
|
-
},
|
|
1072
|
-
"subComponents": [
|
|
3580
|
+
},
|
|
1073
3581
|
{
|
|
1074
|
-
"name": "
|
|
1075
|
-
"description": "
|
|
3582
|
+
"name": "Combobox.Positioner",
|
|
3583
|
+
"description": "Combobox.Positioner — positions the popup relative to the field.",
|
|
1076
3584
|
"props": [
|
|
1077
3585
|
{
|
|
1078
|
-
"name": "
|
|
1079
|
-
"required":
|
|
1080
|
-
"type": "
|
|
3586
|
+
"name": "align",
|
|
3587
|
+
"required": false,
|
|
3588
|
+
"type": "Align",
|
|
3589
|
+
"defaultValue": "start",
|
|
3590
|
+
"description": "How to align the popup relative to the specified side."
|
|
3591
|
+
},
|
|
3592
|
+
{
|
|
3593
|
+
"name": "alignOffset",
|
|
3594
|
+
"required": false,
|
|
3595
|
+
"type": "number | OffsetFunction",
|
|
3596
|
+
"defaultValue": "0",
|
|
3597
|
+
"description": "Additional offset along the alignment axis in pixels.\nAlso accepts a function that returns the offset to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n alignOffset={({ side, align, anchor, positioner }) => {\n return side === 'top' || side === 'bottom'\n ? anchor.width\n : anchor.height;\n }}\n/>\n```"
|
|
3598
|
+
},
|
|
3599
|
+
{
|
|
3600
|
+
"name": "anchor",
|
|
3601
|
+
"required": false,
|
|
3602
|
+
"type": "| Element\n| VirtualElement\n| RefObject<Element | null>\n| (() => Element | VirtualElement | null)\n| null",
|
|
1081
3603
|
"defaultValue": null,
|
|
1082
|
-
"description": "
|
|
3604
|
+
"description": "An element to position the popup against.\nBy default, the popup will be positioned against the trigger."
|
|
1083
3605
|
},
|
|
1084
3606
|
{
|
|
1085
|
-
"name": "
|
|
3607
|
+
"name": "arrowPadding",
|
|
3608
|
+
"required": false,
|
|
3609
|
+
"type": "number",
|
|
3610
|
+
"defaultValue": "5",
|
|
3611
|
+
"description": "Minimum distance to maintain between the arrow and the edges of the popup.\n\nUse it to prevent the arrow element from hanging out of the rounded corners of a popup."
|
|
3612
|
+
},
|
|
3613
|
+
{
|
|
3614
|
+
"name": "className",
|
|
3615
|
+
"required": false,
|
|
3616
|
+
"type": "| string\n| ((state: ComboboxPositionerState) => string)",
|
|
3617
|
+
"defaultValue": null,
|
|
3618
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3619
|
+
},
|
|
3620
|
+
{
|
|
3621
|
+
"name": "collisionAvoidance",
|
|
3622
|
+
"required": false,
|
|
3623
|
+
"type": "CollisionAvoidance",
|
|
3624
|
+
"defaultValue": null,
|
|
3625
|
+
"description": "Determines how to handle collisions when positioning the popup.\n\n`side` controls overflow on the preferred placement axis (`top`/`bottom` or `left`/`right`):\n- `'flip'`: keep the requested side when it fits; otherwise try the opposite side\n (`top` and `bottom`, or `left` and `right`).\n- `'shift'`: never change side; keep the requested side and move the popup within\n the clipping boundary so it stays visible.\n- `'none'`: do not correct side-axis overflow.\n\n`align` controls overflow on the alignment axis (`start`/`center`/`end`):\n- `'flip'`: keep side, but swap `start` and `end` when the requested alignment overflows.\n- `'shift'`: keep side and requested alignment, then nudge the popup along the\n alignment axis to fit.\n- `'none'`: do not correct alignment-axis overflow.\n\n`fallbackAxisSide` controls fallback behavior on the perpendicular axis when the\npreferred axis cannot fit:\n- `'start'`: allow perpendicular fallback and try the logical start side first\n (`top` before `bottom`, or `left` before `right` in LTR).\n- `'end'`: allow perpendicular fallback and try the logical end side first\n (`bottom` before `top`, or `right` before `left` in LTR).\n- `'none'`: do not fallback to the perpendicular axis.\n\nWhen `side` is `'shift'`, explicitly setting `align` only supports `'shift'` or `'none'`.\nIf `align` is omitted, it defaults to `'flip'`.\n@example ```jsx\n<Positioner\n collisionAvoidance={{\n side: 'shift',\n align: 'shift',\n fallbackAxisSide: 'none',\n }}\n/>\n```"
|
|
3626
|
+
},
|
|
3627
|
+
{
|
|
3628
|
+
"name": "collisionBoundary",
|
|
3629
|
+
"required": false,
|
|
3630
|
+
"type": "Boundary",
|
|
3631
|
+
"defaultValue": "clipping-ancestors",
|
|
3632
|
+
"description": "An element or a rectangle that delimits the area that the popup is confined to."
|
|
3633
|
+
},
|
|
3634
|
+
{
|
|
3635
|
+
"name": "collisionPadding",
|
|
3636
|
+
"required": false,
|
|
3637
|
+
"type": "Padding",
|
|
3638
|
+
"defaultValue": "5",
|
|
3639
|
+
"description": "Additional space to maintain from the edge of the collision boundary."
|
|
3640
|
+
},
|
|
3641
|
+
{
|
|
3642
|
+
"name": "disableAnchorTracking",
|
|
1086
3643
|
"required": false,
|
|
1087
3644
|
"type": "boolean",
|
|
1088
3645
|
"defaultValue": "false",
|
|
1089
|
-
"description": "
|
|
3646
|
+
"description": "Whether to disable the popup from tracking any layout shift of its positioning anchor."
|
|
1090
3647
|
},
|
|
1091
3648
|
{
|
|
1092
|
-
"name": "
|
|
3649
|
+
"name": "positionMethod",
|
|
1093
3650
|
"required": false,
|
|
1094
|
-
"type": "
|
|
1095
|
-
"defaultValue":
|
|
1096
|
-
"description": "
|
|
3651
|
+
"type": "\"absolute\" | \"fixed\"",
|
|
3652
|
+
"defaultValue": "absolute",
|
|
3653
|
+
"description": "Determines which CSS `position` property to use."
|
|
1097
3654
|
},
|
|
1098
3655
|
{
|
|
1099
3656
|
"name": "ref",
|
|
1100
3657
|
"required": false,
|
|
1101
|
-
"type": "Ref<
|
|
3658
|
+
"type": "Ref<HTMLDivElement>",
|
|
1102
3659
|
"defaultValue": null,
|
|
1103
3660
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1104
|
-
}
|
|
1105
|
-
]
|
|
1106
|
-
},
|
|
1107
|
-
{
|
|
1108
|
-
"name": "Code.Inline",
|
|
1109
|
-
"description": "Code.Inline — an inline code fragment (a `<code>` chip) for use inside running\ntext. `Typo.InlineCode` renders this under the hood so inline-code chrome is\ndefined in one place. The copy button copies the rendered text.",
|
|
1110
|
-
"props": [
|
|
3661
|
+
},
|
|
1111
3662
|
{
|
|
1112
|
-
"name": "
|
|
1113
|
-
"required":
|
|
1114
|
-
"type": "
|
|
3663
|
+
"name": "render",
|
|
3664
|
+
"required": false,
|
|
3665
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxPositionerState>",
|
|
1115
3666
|
"defaultValue": null,
|
|
1116
|
-
"description": "
|
|
3667
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1117
3668
|
},
|
|
1118
3669
|
{
|
|
1119
|
-
"name": "
|
|
3670
|
+
"name": "side",
|
|
3671
|
+
"required": false,
|
|
3672
|
+
"type": "Side",
|
|
3673
|
+
"defaultValue": "bottom",
|
|
3674
|
+
"description": "Which side of the anchor element to align the popup against.\nMay automatically change to avoid collisions."
|
|
3675
|
+
},
|
|
3676
|
+
{
|
|
3677
|
+
"name": "sideOffset",
|
|
3678
|
+
"required": false,
|
|
3679
|
+
"type": "number | OffsetFunction",
|
|
3680
|
+
"defaultValue": "4",
|
|
3681
|
+
"description": "Distance between the anchor and the popup in pixels.\nAlso accepts a function that returns the distance to read the dimensions of the anchor\nand positioner elements, along with its side and alignment.\n\nThe function takes a `data` object parameter with the following properties:\n- `data.anchor`: the dimensions of the anchor element with properties `width` and `height`.\n- `data.positioner`: the dimensions of the positioner element with properties `width` and `height`.\n- `data.side`: which side of the anchor element the positioner is aligned against.\n- `data.align`: how the positioner is aligned relative to the specified side.\n@example ```jsx\n<Positioner\n sideOffset={({ side, align, anchor, positioner }) => {\n return side === 'top' || side === 'bottom'\n ? anchor.height\n : anchor.width;\n }}\n/>\n```"
|
|
3682
|
+
},
|
|
3683
|
+
{
|
|
3684
|
+
"name": "sticky",
|
|
1120
3685
|
"required": false,
|
|
1121
3686
|
"type": "boolean",
|
|
1122
3687
|
"defaultValue": "false",
|
|
1123
|
-
"description": "
|
|
3688
|
+
"description": "Whether to maintain the popup in the viewport after\nthe anchor element was scrolled out of view."
|
|
3689
|
+
},
|
|
3690
|
+
{
|
|
3691
|
+
"name": "style",
|
|
3692
|
+
"required": false,
|
|
3693
|
+
"type": "| CSSProperties\n| ((state: ComboboxPositionerState) => CSSProperties)",
|
|
3694
|
+
"defaultValue": null,
|
|
3695
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
3696
|
+
}
|
|
3697
|
+
]
|
|
3698
|
+
},
|
|
3699
|
+
{
|
|
3700
|
+
"name": "Combobox.Row",
|
|
3701
|
+
"description": "Combobox.Row — one row of a `grid` list.",
|
|
3702
|
+
"props": [
|
|
3703
|
+
{
|
|
3704
|
+
"name": "className",
|
|
3705
|
+
"required": false,
|
|
3706
|
+
"type": "string | ((state: ComboboxRowState) => string)",
|
|
3707
|
+
"defaultValue": null,
|
|
3708
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1124
3709
|
},
|
|
1125
3710
|
{
|
|
1126
3711
|
"name": "ref",
|
|
1127
3712
|
"required": false,
|
|
1128
|
-
"type": "Ref<
|
|
3713
|
+
"type": "Ref<HTMLDivElement>",
|
|
1129
3714
|
"defaultValue": null,
|
|
1130
3715
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1131
3716
|
},
|
|
1132
3717
|
{
|
|
1133
3718
|
"name": "render",
|
|
1134
3719
|
"required": false,
|
|
1135
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps,
|
|
3720
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxRowState>",
|
|
1136
3721
|
"defaultValue": null,
|
|
1137
3722
|
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3723
|
+
},
|
|
3724
|
+
{
|
|
3725
|
+
"name": "style",
|
|
3726
|
+
"required": false,
|
|
3727
|
+
"type": "| CSSProperties\n| ((state: ComboboxRowState) => CSSProperties)",
|
|
3728
|
+
"defaultValue": null,
|
|
3729
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1138
3730
|
}
|
|
1139
3731
|
]
|
|
1140
3732
|
},
|
|
1141
3733
|
{
|
|
1142
|
-
"name": "
|
|
1143
|
-
"description": "
|
|
3734
|
+
"name": "Combobox.Separator",
|
|
3735
|
+
"description": "Combobox.Separator — thin divider between items.",
|
|
1144
3736
|
"props": [
|
|
1145
3737
|
{
|
|
1146
|
-
"name": "
|
|
3738
|
+
"name": "className",
|
|
3739
|
+
"required": false,
|
|
3740
|
+
"type": "string | ((state: SeparatorState) => string)",
|
|
3741
|
+
"defaultValue": null,
|
|
3742
|
+
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
3743
|
+
},
|
|
3744
|
+
{
|
|
3745
|
+
"name": "orientation",
|
|
1147
3746
|
"required": false,
|
|
1148
|
-
"type": "
|
|
1149
|
-
"defaultValue": "
|
|
1150
|
-
"description": "
|
|
3747
|
+
"type": "Orientation",
|
|
3748
|
+
"defaultValue": "horizontal",
|
|
3749
|
+
"description": "The orientation of the separator."
|
|
1151
3750
|
},
|
|
1152
3751
|
{
|
|
1153
3752
|
"name": "ref",
|
|
1154
3753
|
"required": false,
|
|
1155
|
-
"type": "Ref<
|
|
3754
|
+
"type": "Ref<HTMLDivElement>",
|
|
1156
3755
|
"defaultValue": null,
|
|
1157
3756
|
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1158
3757
|
},
|
|
1159
3758
|
{
|
|
1160
3759
|
"name": "render",
|
|
1161
3760
|
"required": false,
|
|
1162
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps,
|
|
3761
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, SeparatorState>",
|
|
1163
3762
|
"defaultValue": null,
|
|
1164
3763
|
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
3764
|
+
},
|
|
3765
|
+
{
|
|
3766
|
+
"name": "style",
|
|
3767
|
+
"required": false,
|
|
3768
|
+
"type": "| CSSProperties\n| ((state: SeparatorState) => CSSProperties)",
|
|
3769
|
+
"defaultValue": null,
|
|
3770
|
+
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1165
3771
|
}
|
|
1166
3772
|
]
|
|
1167
|
-
}
|
|
1168
|
-
]
|
|
1169
|
-
},
|
|
1170
|
-
"collapsible": {
|
|
1171
|
-
"root": {
|
|
1172
|
-
"name": "Collapsible.Root",
|
|
1173
|
-
"description": "Collapsible.Root — container that manages open/closed state for a trigger–panel pair.",
|
|
1174
|
-
"props": [
|
|
1175
|
-
{
|
|
1176
|
-
"name": "className",
|
|
1177
|
-
"required": false,
|
|
1178
|
-
"type": "| string\n| ((state: CollapsibleRootState) => string)",
|
|
1179
|
-
"defaultValue": null,
|
|
1180
|
-
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1181
|
-
},
|
|
1182
|
-
{
|
|
1183
|
-
"name": "defaultOpen",
|
|
1184
|
-
"required": false,
|
|
1185
|
-
"type": "boolean",
|
|
1186
|
-
"defaultValue": "false",
|
|
1187
|
-
"description": "Whether the collapsible panel is initially open.\n\nTo render a controlled collapsible, use the `open` prop instead."
|
|
1188
|
-
},
|
|
1189
|
-
{
|
|
1190
|
-
"name": "disabled",
|
|
1191
|
-
"required": false,
|
|
1192
|
-
"type": "boolean",
|
|
1193
|
-
"defaultValue": "false",
|
|
1194
|
-
"description": "Whether the component should ignore user interaction."
|
|
1195
|
-
},
|
|
1196
|
-
{
|
|
1197
|
-
"name": "onOpenChange",
|
|
1198
|
-
"required": false,
|
|
1199
|
-
"type": "(\n open: boolean,\n eventDetails: CollapsibleRootChangeEventDetails\n) => void",
|
|
1200
|
-
"defaultValue": null,
|
|
1201
|
-
"description": "Event handler called when the panel is opened or closed."
|
|
1202
|
-
},
|
|
1203
|
-
{
|
|
1204
|
-
"name": "open",
|
|
1205
|
-
"required": false,
|
|
1206
|
-
"type": "boolean",
|
|
1207
|
-
"defaultValue": null,
|
|
1208
|
-
"description": "Whether the collapsible panel is currently open.\n\nTo render an uncontrolled collapsible, use the `defaultOpen` prop instead."
|
|
1209
|
-
},
|
|
1210
|
-
{
|
|
1211
|
-
"name": "ref",
|
|
1212
|
-
"required": false,
|
|
1213
|
-
"type": "Ref<HTMLDivElement>",
|
|
1214
|
-
"defaultValue": null,
|
|
1215
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1216
|
-
},
|
|
1217
|
-
{
|
|
1218
|
-
"name": "render",
|
|
1219
|
-
"required": false,
|
|
1220
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, CollapsibleRootState>",
|
|
1221
|
-
"defaultValue": null,
|
|
1222
|
-
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1223
|
-
},
|
|
1224
|
-
{
|
|
1225
|
-
"name": "style",
|
|
1226
|
-
"required": false,
|
|
1227
|
-
"type": "| CSSProperties\n| ((state: CollapsibleRootState) => CSSProperties)",
|
|
1228
|
-
"defaultValue": null,
|
|
1229
|
-
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1230
|
-
},
|
|
1231
|
-
{
|
|
1232
|
-
"name": "variant",
|
|
1233
|
-
"required": false,
|
|
1234
|
-
"type": "\"default\" | \"solid\" | null",
|
|
1235
|
-
"defaultValue": "default",
|
|
1236
|
-
"description": ""
|
|
1237
|
-
}
|
|
1238
|
-
]
|
|
1239
|
-
},
|
|
1240
|
-
"subComponents": [
|
|
3773
|
+
},
|
|
1241
3774
|
{
|
|
1242
|
-
"name": "
|
|
1243
|
-
"description": "
|
|
3775
|
+
"name": "Combobox.Status",
|
|
3776
|
+
"description": "Combobox.Status — live-region line for loading and result counts, announced to screen readers.",
|
|
1244
3777
|
"props": [
|
|
1245
3778
|
{
|
|
1246
3779
|
"name": "className",
|
|
1247
3780
|
"required": false,
|
|
1248
|
-
"type": "
|
|
3781
|
+
"type": "string | ((state: ComboboxStatusState) => string)",
|
|
1249
3782
|
"defaultValue": null,
|
|
1250
3783
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1251
3784
|
},
|
|
1252
|
-
{
|
|
1253
|
-
"name": "hiddenUntilFound",
|
|
1254
|
-
"required": false,
|
|
1255
|
-
"type": "boolean",
|
|
1256
|
-
"defaultValue": "false",
|
|
1257
|
-
"description": "Allows the browser's built-in page search to find and expand the panel contents.\n\nOverrides the `keepMounted` prop and uses `hidden=\"until-found\"`\nto hide the element without removing it from the DOM."
|
|
1258
|
-
},
|
|
1259
|
-
{
|
|
1260
|
-
"name": "keepMounted",
|
|
1261
|
-
"required": false,
|
|
1262
|
-
"type": "boolean",
|
|
1263
|
-
"defaultValue": "false",
|
|
1264
|
-
"description": "Whether to keep the element in the DOM while the panel is hidden.\nThis prop is ignored when `hiddenUntilFound` is used."
|
|
1265
|
-
},
|
|
1266
3785
|
{
|
|
1267
3786
|
"name": "ref",
|
|
1268
3787
|
"required": false,
|
|
@@ -1273,30 +3792,37 @@
|
|
|
1273
3792
|
{
|
|
1274
3793
|
"name": "render",
|
|
1275
3794
|
"required": false,
|
|
1276
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps,
|
|
3795
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxStatusState>",
|
|
1277
3796
|
"defaultValue": null,
|
|
1278
3797
|
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1279
3798
|
},
|
|
1280
3799
|
{
|
|
1281
3800
|
"name": "style",
|
|
1282
3801
|
"required": false,
|
|
1283
|
-
"type": "| CSSProperties\n| ((state:
|
|
3802
|
+
"type": "| CSSProperties\n| ((state: ComboboxStatusState) => CSSProperties)",
|
|
1284
3803
|
"defaultValue": null,
|
|
1285
3804
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1286
3805
|
}
|
|
1287
3806
|
]
|
|
1288
3807
|
},
|
|
1289
3808
|
{
|
|
1290
|
-
"name": "
|
|
1291
|
-
"description": "
|
|
3809
|
+
"name": "Combobox.Trigger",
|
|
3810
|
+
"description": "Combobox.Trigger — button that opens the popup. Without children it draws a chevron.",
|
|
1292
3811
|
"props": [
|
|
1293
3812
|
{
|
|
1294
3813
|
"name": "className",
|
|
1295
3814
|
"required": false,
|
|
1296
|
-
"type": "| string\n| ((state:
|
|
3815
|
+
"type": "| string\n| ((state: ComboboxTriggerState) => string)",
|
|
1297
3816
|
"defaultValue": null,
|
|
1298
3817
|
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1299
3818
|
},
|
|
3819
|
+
{
|
|
3820
|
+
"name": "disabled",
|
|
3821
|
+
"required": false,
|
|
3822
|
+
"type": "boolean",
|
|
3823
|
+
"defaultValue": "false",
|
|
3824
|
+
"description": "Whether the component should ignore user interaction."
|
|
3825
|
+
},
|
|
1300
3826
|
{
|
|
1301
3827
|
"name": "nativeButton",
|
|
1302
3828
|
"required": false,
|
|
@@ -1314,114 +3840,34 @@
|
|
|
1314
3840
|
{
|
|
1315
3841
|
"name": "render",
|
|
1316
3842
|
"required": false,
|
|
1317
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps,
|
|
3843
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ComboboxTriggerState>",
|
|
1318
3844
|
"defaultValue": null,
|
|
1319
3845
|
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1320
3846
|
},
|
|
1321
3847
|
{
|
|
1322
3848
|
"name": "style",
|
|
1323
3849
|
"required": false,
|
|
1324
|
-
"type": "| CSSProperties\n| ((state:
|
|
3850
|
+
"type": "| CSSProperties\n| ((state: ComboboxTriggerState) => CSSProperties)",
|
|
1325
3851
|
"defaultValue": null,
|
|
1326
3852
|
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1327
3853
|
}
|
|
1328
3854
|
]
|
|
3855
|
+
},
|
|
3856
|
+
{
|
|
3857
|
+
"name": "Combobox.Value",
|
|
3858
|
+
"description": "Combobox.Value — renders the selected value, or the placeholder.",
|
|
3859
|
+
"props": [
|
|
3860
|
+
{
|
|
3861
|
+
"name": "placeholder",
|
|
3862
|
+
"required": false,
|
|
3863
|
+
"type": "ReactNode",
|
|
3864
|
+
"defaultValue": null,
|
|
3865
|
+
"description": "The placeholder value to display when no value is selected.\nThis is overridden by `children` if specified, or by a null item's label in `items`."
|
|
3866
|
+
}
|
|
3867
|
+
]
|
|
1329
3868
|
}
|
|
1330
3869
|
]
|
|
1331
3870
|
},
|
|
1332
|
-
"color-scheme-toggle": {
|
|
1333
|
-
"root": {
|
|
1334
|
-
"name": "ColorSchemeToggle",
|
|
1335
|
-
"description": "ColorSchemeToggle - lets the user pick Light, System, or Dark. It reads and stores the preference through\n`useColorScheme`, so placing it is enough. System stays pressed while the page follows the operating system.",
|
|
1336
|
-
"props": [
|
|
1337
|
-
{
|
|
1338
|
-
"name": "className",
|
|
1339
|
-
"required": false,
|
|
1340
|
-
"type": "string | ((state: ToggleGroupState) => string)",
|
|
1341
|
-
"defaultValue": null,
|
|
1342
|
-
"description": "CSS class applied to the element, or a function that\nreturns a class based on the component's state."
|
|
1343
|
-
},
|
|
1344
|
-
{
|
|
1345
|
-
"name": "darkLabel",
|
|
1346
|
-
"required": false,
|
|
1347
|
-
"type": "string",
|
|
1348
|
-
"defaultValue": "Dark",
|
|
1349
|
-
"description": "Text of the segment that picks the dark scheme."
|
|
1350
|
-
},
|
|
1351
|
-
{
|
|
1352
|
-
"name": "disabled",
|
|
1353
|
-
"required": false,
|
|
1354
|
-
"type": "boolean",
|
|
1355
|
-
"defaultValue": "false",
|
|
1356
|
-
"description": "Whether the toggle group should ignore user interaction."
|
|
1357
|
-
},
|
|
1358
|
-
{
|
|
1359
|
-
"name": "label",
|
|
1360
|
-
"required": false,
|
|
1361
|
-
"type": "string",
|
|
1362
|
-
"defaultValue": "Color scheme",
|
|
1363
|
-
"description": "Accessible name of the group."
|
|
1364
|
-
},
|
|
1365
|
-
{
|
|
1366
|
-
"name": "lightLabel",
|
|
1367
|
-
"required": false,
|
|
1368
|
-
"type": "string",
|
|
1369
|
-
"defaultValue": "Light",
|
|
1370
|
-
"description": "Text of the segment that picks the light scheme."
|
|
1371
|
-
},
|
|
1372
|
-
{
|
|
1373
|
-
"name": "loopFocus",
|
|
1374
|
-
"required": false,
|
|
1375
|
-
"type": "boolean",
|
|
1376
|
-
"defaultValue": "true",
|
|
1377
|
-
"description": "Whether to loop keyboard focus back to the first item\nwhen the end of the list is reached while using the arrow keys."
|
|
1378
|
-
},
|
|
1379
|
-
{
|
|
1380
|
-
"name": "orientation",
|
|
1381
|
-
"required": false,
|
|
1382
|
-
"type": "Orientation",
|
|
1383
|
-
"defaultValue": "horizontal",
|
|
1384
|
-
"description": ""
|
|
1385
|
-
},
|
|
1386
|
-
{
|
|
1387
|
-
"name": "ref",
|
|
1388
|
-
"required": false,
|
|
1389
|
-
"type": "Ref<HTMLDivElement>",
|
|
1390
|
-
"defaultValue": null,
|
|
1391
|
-
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
1392
|
-
},
|
|
1393
|
-
{
|
|
1394
|
-
"name": "render",
|
|
1395
|
-
"required": false,
|
|
1396
|
-
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, ToggleGroupState>",
|
|
1397
|
-
"defaultValue": null,
|
|
1398
|
-
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
1399
|
-
},
|
|
1400
|
-
{
|
|
1401
|
-
"name": "size",
|
|
1402
|
-
"required": false,
|
|
1403
|
-
"type": "\"sm\" | \"md\" | null",
|
|
1404
|
-
"defaultValue": null,
|
|
1405
|
-
"description": ""
|
|
1406
|
-
},
|
|
1407
|
-
{
|
|
1408
|
-
"name": "style",
|
|
1409
|
-
"required": false,
|
|
1410
|
-
"type": "| CSSProperties\n| ((state: ToggleGroupState) => CSSProperties)",
|
|
1411
|
-
"defaultValue": null,
|
|
1412
|
-
"description": "Style applied to the element, or a function that\nreturns a style object based on the component's state."
|
|
1413
|
-
},
|
|
1414
|
-
{
|
|
1415
|
-
"name": "systemLabel",
|
|
1416
|
-
"required": false,
|
|
1417
|
-
"type": "string",
|
|
1418
|
-
"defaultValue": "System",
|
|
1419
|
-
"description": "Text of the segment that follows the operating system."
|
|
1420
|
-
}
|
|
1421
|
-
]
|
|
1422
|
-
},
|
|
1423
|
-
"subComponents": []
|
|
1424
|
-
},
|
|
1425
3871
|
"copy-button": {
|
|
1426
3872
|
"root": {
|
|
1427
3873
|
"name": "CopyButton",
|
|
@@ -2388,7 +4834,7 @@
|
|
|
2388
4834
|
"name": "borderColor",
|
|
2389
4835
|
"required": false,
|
|
2390
4836
|
"type": "BorderColor",
|
|
2391
|
-
"defaultValue": "
|
|
4837
|
+
"defaultValue": "none",
|
|
2392
4838
|
"description": "Colour of the border on the panel's open edge. Inherited by Drawer.Popup;\na Popup-level prop overrides it."
|
|
2393
4839
|
},
|
|
2394
4840
|
{
|
|
@@ -5976,7 +8422,7 @@
|
|
|
5976
8422
|
},
|
|
5977
8423
|
{
|
|
5978
8424
|
"name": "Popover.Trigger",
|
|
5979
|
-
"description": "Popover.Trigger — button that opens the popover.",
|
|
8425
|
+
"description": "Popover.Trigger — button that opens the popover. With `render`, the rendered element keeps its own styles, such as a `Button`.",
|
|
5980
8426
|
"props": [
|
|
5981
8427
|
{
|
|
5982
8428
|
"name": "className",
|
|
@@ -8467,6 +10913,26 @@
|
|
|
8467
10913
|
}
|
|
8468
10914
|
]
|
|
8469
10915
|
},
|
|
10916
|
+
{
|
|
10917
|
+
"name": "Table.RowButton",
|
|
10918
|
+
"description": "Table.RowButton — a `<button>` that stands for its whole row, such as one that opens a drawer. Use it when the row acts\ninstead of navigating; a link that goes to a page is a `Table.RowLink`.",
|
|
10919
|
+
"props": [
|
|
10920
|
+
{
|
|
10921
|
+
"name": "ref",
|
|
10922
|
+
"required": false,
|
|
10923
|
+
"type": "Ref<HTMLTableElement>",
|
|
10924
|
+
"defaultValue": null,
|
|
10925
|
+
"description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}"
|
|
10926
|
+
},
|
|
10927
|
+
{
|
|
10928
|
+
"name": "render",
|
|
10929
|
+
"required": false,
|
|
10930
|
+
"type": "| ReactElement<\n unknown,\n string | JSXElementConstructor<any>\n >\n| ComponentRenderFn<HTMLProps, {}>",
|
|
10931
|
+
"defaultValue": null,
|
|
10932
|
+
"description": "Allows you to replace the component's HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
|
|
10933
|
+
}
|
|
10934
|
+
]
|
|
10935
|
+
},
|
|
8470
10936
|
{
|
|
8471
10937
|
"name": "Table.RowLink",
|
|
8472
10938
|
"description": "Table.RowLink — an `<a>` that stands in for its whole row, such as a link to the row's detail page. Reads as row text,\nnot as a separate link, and wraps anywhere so long values like emails stay inside a narrow table.",
|
|
@@ -10549,6 +13015,13 @@
|
|
|
10549
13015
|
"name": "Typo.UnorderedList",
|
|
10550
13016
|
"description": "Typo.UnorderedList — bulleted list.",
|
|
10551
13017
|
"props": [
|
|
13018
|
+
{
|
|
13019
|
+
"name": "markerVariant",
|
|
13020
|
+
"required": false,
|
|
13021
|
+
"type": "| \"main\"\n| \"support\"\n| \"minor\"\n| \"brand\"\n| \"primary\"\n| \"negative\"\n| \"positive\"\n| \"warning\"\n| \"info\"\n| \"oncolor\"\n| \"accent-1\"\n| \"accent-2\"\n| \"accent-3\"\n| null",
|
|
13022
|
+
"defaultValue": null,
|
|
13023
|
+
"description": "Colour of the dash. Omit to follow the text colour."
|
|
13024
|
+
},
|
|
10552
13025
|
{
|
|
10553
13026
|
"name": "ref",
|
|
10554
13027
|
"required": false,
|