docs: add missing props to UI components (#13247)
This commit is contained in:
Shahed Nasser authored and 
GitHub committed
1 parent
d1a1135328
commit
69d22213f4
10 files changed
+309
-443
No files matched your search
@@ -3,103 +3,104 @@
|
||||
"methods": [],
|
||||
"displayName": "Calendar",
|
||||
"props": {
|
||||
"autoFocus": {
|
||||
"description": "Whether to automatically focus the calendar when it mounts.",
|
||||
"value": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
"name": "union",
|
||||
"raw": "Date | null",
|
||||
"elements": [
|
||||
{
|
||||
"name": "Date"
|
||||
},
|
||||
{
|
||||
"name": "null"
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "The currently selected date."
|
||||
},
|
||||
"defaultFocusedValue": {
|
||||
"description": "The date that is focused when the calendar first mounts (uncountrolled).",
|
||||
"defaultValue": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "DateValue",
|
||||
"elements": [],
|
||||
"raw": "DateValue"
|
||||
}
|
||||
"name": "union",
|
||||
"raw": "Date | null",
|
||||
"elements": [
|
||||
{
|
||||
"name": "Date"
|
||||
},
|
||||
{
|
||||
"name": "null"
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "The date that is selected when the calendar first mounts (uncontrolled)."
|
||||
},
|
||||
"errorMessage": {
|
||||
"description": "An error message to display when the selected value is invalid.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "ReactNode",
|
||||
"elements": [],
|
||||
"raw": "ReactNode"
|
||||
}
|
||||
},
|
||||
"focusedValue": {
|
||||
"description": "Controls the currently focused date within the calendar.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "DateValue",
|
||||
"elements": [],
|
||||
"raw": "DateValue"
|
||||
}
|
||||
},
|
||||
"isDisabled": {
|
||||
"description": "Whether the calendar is disabled.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"isInvalid": {
|
||||
"description": "Whether the current selection is invalid according to application logic.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"isReadOnly": {
|
||||
"description": "Whether the calendar value is immutable.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"onFocusChange": {
|
||||
"description": "Handler that is called when the focused date changes.",
|
||||
"onChange": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(date: CalendarDate) => void",
|
||||
"raw": "(value: Date | null) => void",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "date",
|
||||
"type": {
|
||||
"name": "CalendarDate",
|
||||
"elements": [],
|
||||
"raw": "CalendarDate"
|
||||
"name": "union",
|
||||
"raw": "Date | null",
|
||||
"elements": [
|
||||
{
|
||||
"name": "Date"
|
||||
},
|
||||
{
|
||||
"name": "null"
|
||||
}
|
||||
]
|
||||
},
|
||||
"rest": false
|
||||
"name": "value"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "void"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"description": "A function that is triggered when the selected date changes."
|
||||
},
|
||||
"pageBehavior": {
|
||||
"description": "Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.",
|
||||
"isDateUnavailable": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "PageBehavior",
|
||||
"elements": [],
|
||||
"raw": "PageBehavior"
|
||||
}
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(date: Date) => boolean",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"type": {
|
||||
"name": "Date"
|
||||
},
|
||||
"name": "date"
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "boolean"
|
||||
}
|
||||
}
|
||||
},
|
||||
"description": "A function that determines whether a date is unavailable for selection."
|
||||
},
|
||||
"validationState": {
|
||||
"description": "Whether the current selection is valid or invalid according to application logic.",
|
||||
"minValue": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "ValidationState",
|
||||
"elements": [],
|
||||
"raw": "ValidationState"
|
||||
}
|
||||
"name": "Date"
|
||||
},
|
||||
"description": "The minimum date that can be selected."
|
||||
},
|
||||
"maxValue": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "Date"
|
||||
},
|
||||
"description": "The maximum date that can be selected."
|
||||
}
|
||||
},
|
||||
"composes": [
|
||||
|
||||
@@ -39,222 +39,18 @@
|
||||
},
|
||||
"required": false
|
||||
},
|
||||
"allowDecimals": {
|
||||
"description": "Allow decimals\n\nDefault = true",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"allowNegativeValue": {
|
||||
"description": "Allow user to enter negative value\n\nDefault = true",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"className": {
|
||||
"description": "Class names",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
},
|
||||
"customInput": {
|
||||
"description": "Custom component\n\nDefault = <input/>",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "ElementType",
|
||||
"elements": [],
|
||||
"raw": "ElementType"
|
||||
}
|
||||
},
|
||||
"decimalScale": {
|
||||
"description": "Specify decimal scale for padding/trimming\n\nExample:\n 1.5 -> 1.50\n 1.234 -> 1.23",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"decimalSeparator": {
|
||||
"description": "Separator between integer part and fractional part of value.\n\nThis cannot be a number",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
},
|
||||
"decimalsLimit": {
|
||||
"description": "Limit length of decimals allowed\n\nDefault = 2",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"defaultValue": {
|
||||
"description": "Default value if not passing in value via props",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "union",
|
||||
"raw": "string \\| number",
|
||||
"elements": [
|
||||
{
|
||||
"name": "string"
|
||||
},
|
||||
{
|
||||
"name": "number"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"disableAbbreviations": {
|
||||
"description": "Disable abbreviations (m, k, b)\n\nDefault = false",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"disabled": {
|
||||
"description": "Disabled\n\nDefault = false",
|
||||
"required": false,
|
||||
"description": "Whether the input is disabled.\n\n\n",
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
},
|
||||
"defaultValue": {
|
||||
"value": "false",
|
||||
"computed": false
|
||||
}
|
||||
},
|
||||
"disableGroupSeparators": {
|
||||
"description": "Disable auto adding separator between values eg. 1000 -> 1,000\n\nDefault = false",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"fixedDecimalLength": {
|
||||
"description": "Value will always have the specified length of decimals\n\nExample:\n 123 -> 1.23\n\nNote: This formatting only happens onBlur",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"formatValueOnBlur": {
|
||||
"description": "When set to false, the formatValueOnBlur flag disables the application of the __onValueChange__ function\nspecifically on blur events. If disabled or set to false, the onValueChange will not trigger on blur.\nDefault = true",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"groupSeparator": {
|
||||
"description": "Separator between thousand, million and billion\n\nThis cannot be a number",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
},
|
||||
"id": {
|
||||
"description": "Component id",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
},
|
||||
"intlConfig": {
|
||||
"description": "International locale config, examples:\n { locale: 'ja-JP', currency: 'JPY' }\n { locale: 'en-IN', currency: 'INR' }\n\nAny prefix, groupSeparator or decimalSeparator options passed in\nwill override Intl Locale config",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "IntlConfig",
|
||||
"elements": [],
|
||||
"raw": "IntlConfig"
|
||||
}
|
||||
},
|
||||
"maxLength": {
|
||||
"description": "Maximum characters the user can enter",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"onValueChange": {
|
||||
"description": "Handle change in value",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(value: undefined \\| string, name?: string, values?: CurrencyInputOnChangeValues) => void",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "value",
|
||||
"type": {
|
||||
"name": "union",
|
||||
"raw": "undefined \\| string",
|
||||
"elements": [
|
||||
{
|
||||
"name": "undefined"
|
||||
},
|
||||
{
|
||||
"name": "string"
|
||||
}
|
||||
]
|
||||
},
|
||||
"rest": false
|
||||
},
|
||||
{
|
||||
"name": "name",
|
||||
"type": {
|
||||
"name": "string"
|
||||
},
|
||||
"rest": false
|
||||
},
|
||||
{
|
||||
"name": "values",
|
||||
"type": {
|
||||
"name": "CurrencyInputOnChangeValues",
|
||||
"elements": [],
|
||||
"raw": "CurrencyInputOnChangeValues"
|
||||
},
|
||||
"rest": false
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "void"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"placeholder": {
|
||||
"description": "Placeholder if there is no value",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
},
|
||||
"step": {
|
||||
"description": "Incremental value change on arrow down and arrow up key press",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"transformRawValue": {
|
||||
"description": "Transform the raw value form the input before parsing",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(rawValue: string) => string",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "rawValue",
|
||||
"type": {
|
||||
"name": "string"
|
||||
},
|
||||
"rest": false
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
"onInvalid": {
|
||||
"description": "A function that is triggered when the input is invalid."
|
||||
}
|
||||
},
|
||||
"composes": [
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
"value": "8",
|
||||
"computed": false
|
||||
},
|
||||
"description": "",
|
||||
"description": "The space in pixels between the dropdown menu and its trigger element.",
|
||||
"required": false
|
||||
},
|
||||
"collisionPadding": {
|
||||
@@ -16,7 +16,7 @@
|
||||
"value": "8",
|
||||
"computed": false
|
||||
},
|
||||
"description": "",
|
||||
"description": "The distance in pixels from the boundary edges where collision detection should occur.",
|
||||
"required": false
|
||||
},
|
||||
"align": {
|
||||
@@ -24,7 +24,7 @@
|
||||
"value": "\"center\"",
|
||||
"computed": false
|
||||
},
|
||||
"description": "",
|
||||
"description": "The alignment of the dropdown menu relative to its trigger element.\n\n@defaultValue center",
|
||||
"required": false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,27 @@
|
||||
{
|
||||
"description": "",
|
||||
"description": "This component is based on the [Radix UI Radio Group Item](https://www.radix-ui.com/primitives/docs/components/radio-group#item) primitives.",
|
||||
"methods": [],
|
||||
"displayName": "RadioGroup.ChoiceBox",
|
||||
"props": {}
|
||||
"props": {
|
||||
"label": {
|
||||
"required": true,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
},
|
||||
"description": "The label for the radio button."
|
||||
},
|
||||
"description": {
|
||||
"required": true,
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
},
|
||||
"description": "The description for the radio button."
|
||||
},
|
||||
"value": {
|
||||
"description": "The value of the radio button.",
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,6 +3,57 @@
|
||||
"methods": [],
|
||||
"displayName": "Tooltip",
|
||||
"props": {
|
||||
"content": {
|
||||
"required": true,
|
||||
"tsType": {
|
||||
"name": "ReactReactNode",
|
||||
"raw": "React.ReactNode"
|
||||
},
|
||||
"description": "The content to display in the tooltip."
|
||||
},
|
||||
"onClick": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "ReactMouseEventHandler",
|
||||
"raw": "React.MouseEventHandler<HTMLButtonElement>",
|
||||
"elements": [
|
||||
{
|
||||
"name": "HTMLButtonElement"
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "A function that is triggered when the tooltip is clicked."
|
||||
},
|
||||
"side": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "union",
|
||||
"raw": "\"bottom\" | \"left\" | \"top\" | \"right\"",
|
||||
"elements": [
|
||||
{
|
||||
"name": "literal",
|
||||
"value": "\"bottom\""
|
||||
},
|
||||
{
|
||||
"name": "literal",
|
||||
"value": "\"left\""
|
||||
},
|
||||
{
|
||||
"name": "literal",
|
||||
"value": "\"top\""
|
||||
},
|
||||
{
|
||||
"name": "literal",
|
||||
"value": "\"right\""
|
||||
}
|
||||
]
|
||||
},
|
||||
"description": "The side to position the tooltip.\n\n",
|
||||
"defaultValue": {
|
||||
"value": "top",
|
||||
"computed": false
|
||||
}
|
||||
},
|
||||
"maxWidth": {
|
||||
"required": false,
|
||||
"tsType": {
|
||||
@@ -14,77 +65,59 @@
|
||||
"computed": false
|
||||
}
|
||||
},
|
||||
"aria-label": {
|
||||
"description": "A more descriptive label for accessibility purpose",
|
||||
"required": false,
|
||||
"sideOffset": {
|
||||
"defaultValue": {
|
||||
"value": "8",
|
||||
"computed": false
|
||||
},
|
||||
"description": "The distance in pixels between the tooltip and its trigger.",
|
||||
"tsType": {
|
||||
"name": "string"
|
||||
"name": "number"
|
||||
},
|
||||
"required": false
|
||||
},
|
||||
"children": {
|
||||
"description": "The element to trigger the tooltip."
|
||||
},
|
||||
"open": {
|
||||
"description": "Whether the tooltip is currently open.",
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"defaultOpen": {
|
||||
"description": "Whether the tooltip is open by default.",
|
||||
"tsType": {
|
||||
"name": "boolean"
|
||||
}
|
||||
},
|
||||
"onOpenChange": {
|
||||
"description": "A function that is called when the tooltip's open state changes.",
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(open: boolean) => void",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "open",
|
||||
"type": {
|
||||
"name": "boolean"
|
||||
},
|
||||
"rest": false
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "void"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"delayDuration": {
|
||||
"description": "The duration from when the pointer enters the trigger until the tooltip gets opened. This will\noverride the prop with the same name passed to Provider.",
|
||||
"required": false,
|
||||
"description": "The time in milliseconds to delay the tooltip's appearance.",
|
||||
"tsType": {
|
||||
"name": "number"
|
||||
}
|
||||
},
|
||||
"forceMount": {
|
||||
"description": "Used to force mounting when more control is needed. Useful when\ncontrolling animation with React animation libraries.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "literal",
|
||||
"value": "true"
|
||||
}
|
||||
},
|
||||
"onEscapeKeyDown": {
|
||||
"description": "Event handler called when the escape key is down.\nCan be prevented.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(event: KeyboardEvent) => void",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "event",
|
||||
"type": {
|
||||
"name": "KeyboardEvent",
|
||||
"elements": [],
|
||||
"raw": "KeyboardEvent"
|
||||
},
|
||||
"rest": false
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "void"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"onPointerDownOutside": {
|
||||
"description": "Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.\nCan be prevented.",
|
||||
"required": false,
|
||||
"tsType": {
|
||||
"name": "signature",
|
||||
"type": "function",
|
||||
"raw": "(event: PointerDownOutsideEvent) => void",
|
||||
"signature": {
|
||||
"arguments": [
|
||||
{
|
||||
"name": "event",
|
||||
"type": {
|
||||
"name": "PointerDownOutsideEvent",
|
||||
"elements": [],
|
||||
"raw": "PointerDownOutsideEvent"
|
||||
},
|
||||
"rest": false
|
||||
}
|
||||
],
|
||||
"return": {
|
||||
"name": "void"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"composes": [
|
||||
|
||||
Reference in new issue
Block a user