@agentero/design-system 0.30.0 → 0.31.0
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/mcp/manifests/components.html +588 -102
- package/mcp/manifests/components.json +849 -17
- package/package.json +6 -1
- package/src/combobox/combobox.d.ts +200 -0
- package/src/combobox/combobox.js +118 -0
- package/src/combobox/icons.d.ts +10 -0
- package/src/combobox/icons.js +13 -0
- package/src/combobox/index.d.ts +34 -0
- package/src/combobox/index.js +13 -0
- package/src/field-text/field-text.js +9 -9
- package/src/form-text/form-text.js +7 -7
|
@@ -1986,6 +1986,838 @@
|
|
|
1986
1986
|
],
|
|
1987
1987
|
"import": "import { Checkbox, Label } from \"@agentero/design-system\";"
|
|
1988
1988
|
},
|
|
1989
|
+
"components-combobox": {
|
|
1990
|
+
"id": "components-combobox",
|
|
1991
|
+
"name": "Combobox.Root",
|
|
1992
|
+
"path": "./src/combobox/combobox.stories.tsx",
|
|
1993
|
+
"jsDocTags": {
|
|
1994
|
+
"summary": [
|
|
1995
|
+
"Root provider for an input-triggered filterable list"
|
|
1996
|
+
],
|
|
1997
|
+
"see": [
|
|
1998
|
+
"{@link https://base-ui.com/react/components/combobox Base UI Combobox}"
|
|
1999
|
+
],
|
|
2000
|
+
"example": [
|
|
2001
|
+
"```tsx\nimport { Combobox } from '@agentero/design-system/combobox';\n\n<Combobox.Root items={states}>\n <Combobox.Input placeholder=\"Search states\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => <Combobox.Item key={state} value={state}>{state}</Combobox.Item>}\n </Combobox.List>\n </Combobox.Content>\n</Combobox.Root>\n```"
|
|
2002
|
+
]
|
|
2003
|
+
},
|
|
2004
|
+
"description": "Combobox is a text input that filters a list and writes the chosen option back\ninto itself. Focusing the input or typing opens the list; picking a row fills the\ninput and closes it. Built on Base UI, whose Combobox primitive owns the\nfiltering, the keyboard navigation and the `role=\"combobox\"` wiring.",
|
|
2005
|
+
"summary": "Root provider for an input-triggered filterable list",
|
|
2006
|
+
"reactComponentMeta": {
|
|
2007
|
+
"displayName": "Combobox.Root",
|
|
2008
|
+
"exportName": "Combobox",
|
|
2009
|
+
"filePath": "/home/runner/work/design-system/design-system/src/combobox/index.ts",
|
|
2010
|
+
"description": "Root of a combobox: a text input that filters a list of options and writes the\nchosen one back into itself. With `Input` as the only trigger, the list opens on\nfocus or on the first keystroke.\n\nPass the options as `items`. For a list that comes from the server, set\n`filter={null}`, hand the already-filtered rows to `filteredItems`, and request\nthem from `onInputValueChange`; `Status` then announces the wait.",
|
|
2011
|
+
"jsDocTags": {
|
|
2012
|
+
"summary": [
|
|
2013
|
+
"Root provider for an input-triggered filterable list"
|
|
2014
|
+
],
|
|
2015
|
+
"see": [
|
|
2016
|
+
"{@link https://base-ui.com/react/components/combobox Base UI Combobox}"
|
|
2017
|
+
],
|
|
2018
|
+
"example": [
|
|
2019
|
+
"```tsx\nimport { Combobox } from '@agentero/design-system/combobox';\n\n<Combobox.Root items={states}>\n <Combobox.Input placeholder=\"Search states\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => <Combobox.Item key={state} value={state}>{state}</Combobox.Item>}\n </Combobox.List>\n </Combobox.Content>\n</Combobox.Root>\n```"
|
|
2020
|
+
]
|
|
2021
|
+
},
|
|
2022
|
+
"props": {
|
|
2023
|
+
"filter": {
|
|
2024
|
+
"name": "filter",
|
|
2025
|
+
"required": false,
|
|
2026
|
+
"type": {
|
|
2027
|
+
"name": "((item: unknown, query: string, itemToString?: ((item: unknown) => string) | undefined) => boolean) | null | undefined"
|
|
2028
|
+
},
|
|
2029
|
+
"description": "Filter function used to match items vs input query.\nReceives the source item, which is the derived value's item when `items` is a `createItems()`\ncollection, and the item itself otherwise.",
|
|
2030
|
+
"defaultValue": null,
|
|
2031
|
+
"parent": {
|
|
2032
|
+
"name": "ComboboxRootProps",
|
|
2033
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2034
|
+
},
|
|
2035
|
+
"declarations": [
|
|
2036
|
+
{
|
|
2037
|
+
"name": "ComboboxRootProps",
|
|
2038
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2039
|
+
}
|
|
2040
|
+
]
|
|
2041
|
+
},
|
|
2042
|
+
"form": {
|
|
2043
|
+
"name": "form",
|
|
2044
|
+
"required": false,
|
|
2045
|
+
"type": {
|
|
2046
|
+
"name": "string"
|
|
2047
|
+
},
|
|
2048
|
+
"description": "Identifies the form that owns the internal input.\nUseful when the combobox is rendered outside the form.",
|
|
2049
|
+
"defaultValue": null,
|
|
2050
|
+
"parent": {
|
|
2051
|
+
"name": "ComboboxRootProps",
|
|
2052
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2053
|
+
},
|
|
2054
|
+
"declarations": [
|
|
2055
|
+
{
|
|
2056
|
+
"name": "ComboboxRootProps",
|
|
2057
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2058
|
+
}
|
|
2059
|
+
]
|
|
2060
|
+
},
|
|
2061
|
+
"id": {
|
|
2062
|
+
"name": "id",
|
|
2063
|
+
"required": false,
|
|
2064
|
+
"type": {
|
|
2065
|
+
"name": "string"
|
|
2066
|
+
},
|
|
2067
|
+
"description": "The id of the component.",
|
|
2068
|
+
"defaultValue": null,
|
|
2069
|
+
"parent": {
|
|
2070
|
+
"name": "ComboboxRootProps",
|
|
2071
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2072
|
+
},
|
|
2073
|
+
"declarations": [
|
|
2074
|
+
{
|
|
2075
|
+
"name": "ComboboxRootProps",
|
|
2076
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2077
|
+
}
|
|
2078
|
+
]
|
|
2079
|
+
},
|
|
2080
|
+
"children": {
|
|
2081
|
+
"name": "children",
|
|
2082
|
+
"required": false,
|
|
2083
|
+
"type": {
|
|
2084
|
+
"name": "ReactNode"
|
|
2085
|
+
},
|
|
2086
|
+
"description": "",
|
|
2087
|
+
"defaultValue": null,
|
|
2088
|
+
"parent": {
|
|
2089
|
+
"name": "ComboboxRootProps",
|
|
2090
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2091
|
+
},
|
|
2092
|
+
"declarations": [
|
|
2093
|
+
{
|
|
2094
|
+
"name": "ComboboxRootProps",
|
|
2095
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2096
|
+
}
|
|
2097
|
+
]
|
|
2098
|
+
},
|
|
2099
|
+
"grid": {
|
|
2100
|
+
"name": "grid",
|
|
2101
|
+
"required": false,
|
|
2102
|
+
"type": {
|
|
2103
|
+
"name": "boolean"
|
|
2104
|
+
},
|
|
2105
|
+
"description": "Whether list items are presented in a grid layout.\nWhen enabled, arrow keys navigate across rows and columns inferred from DOM rows.",
|
|
2106
|
+
"defaultValue": {
|
|
2107
|
+
"value": "false"
|
|
2108
|
+
},
|
|
2109
|
+
"parent": {
|
|
2110
|
+
"name": "ComboboxRootProps",
|
|
2111
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2112
|
+
},
|
|
2113
|
+
"declarations": [
|
|
2114
|
+
{
|
|
2115
|
+
"name": "ComboboxRootProps",
|
|
2116
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2117
|
+
}
|
|
2118
|
+
]
|
|
2119
|
+
},
|
|
2120
|
+
"disabled": {
|
|
2121
|
+
"name": "disabled",
|
|
2122
|
+
"required": false,
|
|
2123
|
+
"type": {
|
|
2124
|
+
"name": "boolean"
|
|
2125
|
+
},
|
|
2126
|
+
"description": "Whether the component should ignore user interaction.",
|
|
2127
|
+
"defaultValue": {
|
|
2128
|
+
"value": "false"
|
|
2129
|
+
},
|
|
2130
|
+
"parent": {
|
|
2131
|
+
"name": "ComboboxRootProps",
|
|
2132
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2133
|
+
},
|
|
2134
|
+
"declarations": [
|
|
2135
|
+
{
|
|
2136
|
+
"name": "ComboboxRootProps",
|
|
2137
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2138
|
+
}
|
|
2139
|
+
]
|
|
2140
|
+
},
|
|
2141
|
+
"defaultOpen": {
|
|
2142
|
+
"name": "defaultOpen",
|
|
2143
|
+
"required": false,
|
|
2144
|
+
"type": {
|
|
2145
|
+
"name": "boolean"
|
|
2146
|
+
},
|
|
2147
|
+
"description": "Whether the popup is initially open.\n\nTo render a controlled popup, use the `open` prop instead.",
|
|
2148
|
+
"defaultValue": {
|
|
2149
|
+
"value": "false"
|
|
2150
|
+
},
|
|
2151
|
+
"parent": {
|
|
2152
|
+
"name": "ComboboxRootProps",
|
|
2153
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2154
|
+
},
|
|
2155
|
+
"declarations": [
|
|
2156
|
+
{
|
|
2157
|
+
"name": "ComboboxRootProps",
|
|
2158
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2159
|
+
}
|
|
2160
|
+
]
|
|
2161
|
+
},
|
|
2162
|
+
"open": {
|
|
2163
|
+
"name": "open",
|
|
2164
|
+
"required": false,
|
|
2165
|
+
"type": {
|
|
2166
|
+
"name": "boolean"
|
|
2167
|
+
},
|
|
2168
|
+
"description": "Whether the popup is currently open. Use when controlled.",
|
|
2169
|
+
"defaultValue": null,
|
|
2170
|
+
"parent": {
|
|
2171
|
+
"name": "ComboboxRootProps",
|
|
2172
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2173
|
+
},
|
|
2174
|
+
"declarations": [
|
|
2175
|
+
{
|
|
2176
|
+
"name": "ComboboxRootProps",
|
|
2177
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2178
|
+
}
|
|
2179
|
+
]
|
|
2180
|
+
},
|
|
2181
|
+
"name": {
|
|
2182
|
+
"name": "name",
|
|
2183
|
+
"required": false,
|
|
2184
|
+
"type": {
|
|
2185
|
+
"name": "string"
|
|
2186
|
+
},
|
|
2187
|
+
"description": "Identifies the field when a form is submitted.",
|
|
2188
|
+
"defaultValue": null,
|
|
2189
|
+
"parent": {
|
|
2190
|
+
"name": "ComboboxRootProps",
|
|
2191
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2192
|
+
},
|
|
2193
|
+
"declarations": [
|
|
2194
|
+
{
|
|
2195
|
+
"name": "ComboboxRootProps",
|
|
2196
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2197
|
+
}
|
|
2198
|
+
]
|
|
2199
|
+
},
|
|
2200
|
+
"inline": {
|
|
2201
|
+
"name": "inline",
|
|
2202
|
+
"required": false,
|
|
2203
|
+
"type": {
|
|
2204
|
+
"name": "boolean"
|
|
2205
|
+
},
|
|
2206
|
+
"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.",
|
|
2207
|
+
"defaultValue": {
|
|
2208
|
+
"value": "false"
|
|
2209
|
+
},
|
|
2210
|
+
"parent": {
|
|
2211
|
+
"name": "ComboboxRootProps",
|
|
2212
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2213
|
+
},
|
|
2214
|
+
"declarations": [
|
|
2215
|
+
{
|
|
2216
|
+
"name": "ComboboxRootProps",
|
|
2217
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2218
|
+
}
|
|
2219
|
+
]
|
|
2220
|
+
},
|
|
2221
|
+
"required": {
|
|
2222
|
+
"name": "required",
|
|
2223
|
+
"required": false,
|
|
2224
|
+
"type": {
|
|
2225
|
+
"name": "boolean"
|
|
2226
|
+
},
|
|
2227
|
+
"description": "Whether the user must choose a value before submitting a form.",
|
|
2228
|
+
"defaultValue": {
|
|
2229
|
+
"value": "false"
|
|
2230
|
+
},
|
|
2231
|
+
"parent": {
|
|
2232
|
+
"name": "ComboboxRootProps",
|
|
2233
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2234
|
+
},
|
|
2235
|
+
"declarations": [
|
|
2236
|
+
{
|
|
2237
|
+
"name": "ComboboxRootProps",
|
|
2238
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2239
|
+
}
|
|
2240
|
+
]
|
|
2241
|
+
},
|
|
2242
|
+
"readOnly": {
|
|
2243
|
+
"name": "readOnly",
|
|
2244
|
+
"required": false,
|
|
2245
|
+
"type": {
|
|
2246
|
+
"name": "boolean"
|
|
2247
|
+
},
|
|
2248
|
+
"description": "Whether the user should be unable to choose a different option from the popup.",
|
|
2249
|
+
"defaultValue": {
|
|
2250
|
+
"value": "false"
|
|
2251
|
+
},
|
|
2252
|
+
"parent": {
|
|
2253
|
+
"name": "ComboboxRootProps",
|
|
2254
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2255
|
+
},
|
|
2256
|
+
"declarations": [
|
|
2257
|
+
{
|
|
2258
|
+
"name": "ComboboxRootProps",
|
|
2259
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2260
|
+
}
|
|
2261
|
+
]
|
|
2262
|
+
},
|
|
2263
|
+
"onOpenChangeComplete": {
|
|
2264
|
+
"name": "onOpenChangeComplete",
|
|
2265
|
+
"required": false,
|
|
2266
|
+
"type": {
|
|
2267
|
+
"name": "(open: boolean) => void"
|
|
2268
|
+
},
|
|
2269
|
+
"description": "Event handler called after any animations complete when the popup is opened or closed.",
|
|
2270
|
+
"defaultValue": null,
|
|
2271
|
+
"parent": {
|
|
2272
|
+
"name": "ComboboxRootProps",
|
|
2273
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2274
|
+
},
|
|
2275
|
+
"declarations": [
|
|
2276
|
+
{
|
|
2277
|
+
"name": "ComboboxRootProps",
|
|
2278
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2279
|
+
}
|
|
2280
|
+
]
|
|
2281
|
+
},
|
|
2282
|
+
"openOnInputClick": {
|
|
2283
|
+
"name": "openOnInputClick",
|
|
2284
|
+
"required": false,
|
|
2285
|
+
"type": {
|
|
2286
|
+
"name": "boolean"
|
|
2287
|
+
},
|
|
2288
|
+
"description": "Whether the popup opens when clicking the input.",
|
|
2289
|
+
"defaultValue": {
|
|
2290
|
+
"value": "true"
|
|
2291
|
+
},
|
|
2292
|
+
"parent": {
|
|
2293
|
+
"name": "ComboboxRootProps",
|
|
2294
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2295
|
+
},
|
|
2296
|
+
"declarations": [
|
|
2297
|
+
{
|
|
2298
|
+
"name": "ComboboxRootProps",
|
|
2299
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2300
|
+
}
|
|
2301
|
+
]
|
|
2302
|
+
},
|
|
2303
|
+
"loopFocus": {
|
|
2304
|
+
"name": "loopFocus",
|
|
2305
|
+
"required": false,
|
|
2306
|
+
"type": {
|
|
2307
|
+
"name": "boolean"
|
|
2308
|
+
},
|
|
2309
|
+
"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>.",
|
|
2310
|
+
"defaultValue": {
|
|
2311
|
+
"value": "true"
|
|
2312
|
+
},
|
|
2313
|
+
"parent": {
|
|
2314
|
+
"name": "ComboboxRootProps",
|
|
2315
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2316
|
+
},
|
|
2317
|
+
"declarations": [
|
|
2318
|
+
{
|
|
2319
|
+
"name": "ComboboxRootProps",
|
|
2320
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2321
|
+
}
|
|
2322
|
+
]
|
|
2323
|
+
},
|
|
2324
|
+
"inputValue": {
|
|
2325
|
+
"name": "inputValue",
|
|
2326
|
+
"required": false,
|
|
2327
|
+
"type": {
|
|
2328
|
+
"name": "string | number | readonly string[] | undefined"
|
|
2329
|
+
},
|
|
2330
|
+
"description": "The input value of the combobox. Use when controlled.",
|
|
2331
|
+
"defaultValue": null,
|
|
2332
|
+
"parent": {
|
|
2333
|
+
"name": "ComboboxRootProps",
|
|
2334
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2335
|
+
},
|
|
2336
|
+
"declarations": [
|
|
2337
|
+
{
|
|
2338
|
+
"name": "ComboboxRootProps",
|
|
2339
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2340
|
+
}
|
|
2341
|
+
]
|
|
2342
|
+
},
|
|
2343
|
+
"defaultInputValue": {
|
|
2344
|
+
"name": "defaultInputValue",
|
|
2345
|
+
"required": false,
|
|
2346
|
+
"type": {
|
|
2347
|
+
"name": "string | number | readonly string[] | undefined"
|
|
2348
|
+
},
|
|
2349
|
+
"description": "The uncontrolled input value when initially rendered.\n\nTo render a controlled input, use the `inputValue` prop instead.",
|
|
2350
|
+
"defaultValue": null,
|
|
2351
|
+
"parent": {
|
|
2352
|
+
"name": "ComboboxRootProps",
|
|
2353
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2354
|
+
},
|
|
2355
|
+
"declarations": [
|
|
2356
|
+
{
|
|
2357
|
+
"name": "ComboboxRootProps",
|
|
2358
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2359
|
+
}
|
|
2360
|
+
]
|
|
2361
|
+
},
|
|
2362
|
+
"inputRef": {
|
|
2363
|
+
"name": "inputRef",
|
|
2364
|
+
"required": false,
|
|
2365
|
+
"type": {
|
|
2366
|
+
"name": "Ref<HTMLInputElement> | undefined"
|
|
2367
|
+
},
|
|
2368
|
+
"description": "A ref to the hidden input element.",
|
|
2369
|
+
"defaultValue": null,
|
|
2370
|
+
"parent": {
|
|
2371
|
+
"name": "ComboboxRootProps",
|
|
2372
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2373
|
+
},
|
|
2374
|
+
"declarations": [
|
|
2375
|
+
{
|
|
2376
|
+
"name": "ComboboxRootProps",
|
|
2377
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2378
|
+
}
|
|
2379
|
+
]
|
|
2380
|
+
},
|
|
2381
|
+
"items": {
|
|
2382
|
+
"name": "items",
|
|
2383
|
+
"required": false,
|
|
2384
|
+
"type": {
|
|
2385
|
+
"name": "readonly any[] | readonly Group<any>[] | ComboboxItemCollection<unknown, unknown> | undefined"
|
|
2386
|
+
},
|
|
2387
|
+
"description": "The items to be displayed in the list.\nCan be a flat array of items, an array of groups with items, or a collection created by\nthe `createItems()` function, which derives each item's selection value and label.\nNullish entries are not supported: remove them from the data before passing it.",
|
|
2388
|
+
"defaultValue": null,
|
|
2389
|
+
"parent": {
|
|
2390
|
+
"name": "ComboboxRootProps",
|
|
2391
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2392
|
+
},
|
|
2393
|
+
"declarations": [
|
|
2394
|
+
{
|
|
2395
|
+
"name": "ComboboxRootProps",
|
|
2396
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2397
|
+
}
|
|
2398
|
+
]
|
|
2399
|
+
},
|
|
2400
|
+
"filteredItems": {
|
|
2401
|
+
"name": "filteredItems",
|
|
2402
|
+
"required": false,
|
|
2403
|
+
"type": {
|
|
2404
|
+
"name": "readonly unknown[] | readonly Group<unknown>[] | undefined"
|
|
2405
|
+
},
|
|
2406
|
+
"description": "Filtered items to display in the list.\nWhen provided, the list uses these items instead of filtering the `items` prop internally.\nWhen `items` is also provided, this array must preserve its flat or grouped structure.\nWith a `createItems()` collection, pass source items rather than derived values.\nNullish entries are not supported, as in `items`.\nUse when you want to control filtering logic externally with the `useFilter()` hook.",
|
|
2407
|
+
"defaultValue": null,
|
|
2408
|
+
"parent": {
|
|
2409
|
+
"name": "ComboboxRootProps",
|
|
2410
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2411
|
+
},
|
|
2412
|
+
"declarations": [
|
|
2413
|
+
{
|
|
2414
|
+
"name": "ComboboxRootProps",
|
|
2415
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2416
|
+
}
|
|
2417
|
+
]
|
|
2418
|
+
},
|
|
2419
|
+
"virtualized": {
|
|
2420
|
+
"name": "virtualized",
|
|
2421
|
+
"required": false,
|
|
2422
|
+
"type": {
|
|
2423
|
+
"name": "boolean"
|
|
2424
|
+
},
|
|
2425
|
+
"description": "Whether the items are being externally virtualized.",
|
|
2426
|
+
"defaultValue": {
|
|
2427
|
+
"value": "false"
|
|
2428
|
+
},
|
|
2429
|
+
"parent": {
|
|
2430
|
+
"name": "ComboboxRootProps",
|
|
2431
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2432
|
+
},
|
|
2433
|
+
"declarations": [
|
|
2434
|
+
{
|
|
2435
|
+
"name": "ComboboxRootProps",
|
|
2436
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2437
|
+
}
|
|
2438
|
+
]
|
|
2439
|
+
},
|
|
2440
|
+
"modal": {
|
|
2441
|
+
"name": "modal",
|
|
2442
|
+
"required": false,
|
|
2443
|
+
"type": {
|
|
2444
|
+
"name": "boolean"
|
|
2445
|
+
},
|
|
2446
|
+
"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.\n\nOn touch devices, a `true` modal blocks outside taps but leaves the page scrollable unless the popup spans nearly the full viewport width, matching native iOS behavior.",
|
|
2447
|
+
"defaultValue": {
|
|
2448
|
+
"value": "false"
|
|
2449
|
+
},
|
|
2450
|
+
"parent": {
|
|
2451
|
+
"name": "ComboboxRootProps",
|
|
2452
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2453
|
+
},
|
|
2454
|
+
"declarations": [
|
|
2455
|
+
{
|
|
2456
|
+
"name": "ComboboxRootProps",
|
|
2457
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2458
|
+
}
|
|
2459
|
+
]
|
|
2460
|
+
},
|
|
2461
|
+
"limit": {
|
|
2462
|
+
"name": "limit",
|
|
2463
|
+
"required": false,
|
|
2464
|
+
"type": {
|
|
2465
|
+
"name": "number"
|
|
2466
|
+
},
|
|
2467
|
+
"description": "The maximum number of items to display in the list.",
|
|
2468
|
+
"defaultValue": {
|
|
2469
|
+
"value": "-1"
|
|
2470
|
+
},
|
|
2471
|
+
"parent": {
|
|
2472
|
+
"name": "ComboboxRootProps",
|
|
2473
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2474
|
+
},
|
|
2475
|
+
"declarations": [
|
|
2476
|
+
{
|
|
2477
|
+
"name": "ComboboxRootProps",
|
|
2478
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2479
|
+
}
|
|
2480
|
+
]
|
|
2481
|
+
},
|
|
2482
|
+
"locale": {
|
|
2483
|
+
"name": "locale",
|
|
2484
|
+
"required": false,
|
|
2485
|
+
"type": {
|
|
2486
|
+
"name": "LocalesArgument"
|
|
2487
|
+
},
|
|
2488
|
+
"description": "The locale to use for string comparison.\nDefaults to the user's runtime locale.",
|
|
2489
|
+
"defaultValue": null,
|
|
2490
|
+
"parent": {
|
|
2491
|
+
"name": "ComboboxRootProps",
|
|
2492
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2493
|
+
},
|
|
2494
|
+
"declarations": [
|
|
2495
|
+
{
|
|
2496
|
+
"name": "ComboboxRootProps",
|
|
2497
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/AriaCombobox.d.mts"
|
|
2498
|
+
}
|
|
2499
|
+
]
|
|
2500
|
+
},
|
|
2501
|
+
"multiple": {
|
|
2502
|
+
"name": "multiple",
|
|
2503
|
+
"required": false,
|
|
2504
|
+
"type": {
|
|
2505
|
+
"name": "false"
|
|
2506
|
+
},
|
|
2507
|
+
"description": "Whether multiple items can be selected.",
|
|
2508
|
+
"defaultValue": {
|
|
2509
|
+
"value": "false"
|
|
2510
|
+
},
|
|
2511
|
+
"parent": {
|
|
2512
|
+
"name": "ComboboxRootProps",
|
|
2513
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2514
|
+
},
|
|
2515
|
+
"declarations": [
|
|
2516
|
+
{
|
|
2517
|
+
"name": "TypeLiteral",
|
|
2518
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2519
|
+
}
|
|
2520
|
+
]
|
|
2521
|
+
},
|
|
2522
|
+
"autoComplete": {
|
|
2523
|
+
"name": "autoComplete",
|
|
2524
|
+
"required": false,
|
|
2525
|
+
"type": {
|
|
2526
|
+
"name": "string"
|
|
2527
|
+
},
|
|
2528
|
+
"description": "Provides a hint to the browser for autofill.",
|
|
2529
|
+
"defaultValue": null,
|
|
2530
|
+
"parent": {
|
|
2531
|
+
"name": "ComboboxRootProps",
|
|
2532
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2533
|
+
},
|
|
2534
|
+
"declarations": [
|
|
2535
|
+
{
|
|
2536
|
+
"name": "TypeLiteral",
|
|
2537
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2538
|
+
}
|
|
2539
|
+
]
|
|
2540
|
+
},
|
|
2541
|
+
"autoHighlight": {
|
|
2542
|
+
"name": "autoHighlight",
|
|
2543
|
+
"required": false,
|
|
2544
|
+
"type": {
|
|
2545
|
+
"name": "boolean"
|
|
2546
|
+
},
|
|
2547
|
+
"description": "Whether the first matching item is highlighted automatically while filtering.",
|
|
2548
|
+
"defaultValue": {
|
|
2549
|
+
"value": "false"
|
|
2550
|
+
},
|
|
2551
|
+
"parent": {
|
|
2552
|
+
"name": "ComboboxRootProps",
|
|
2553
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2554
|
+
},
|
|
2555
|
+
"declarations": [
|
|
2556
|
+
{
|
|
2557
|
+
"name": "TypeLiteral",
|
|
2558
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2559
|
+
}
|
|
2560
|
+
]
|
|
2561
|
+
},
|
|
2562
|
+
"highlightItemOnHover": {
|
|
2563
|
+
"name": "highlightItemOnHover",
|
|
2564
|
+
"required": false,
|
|
2565
|
+
"type": {
|
|
2566
|
+
"name": "boolean"
|
|
2567
|
+
},
|
|
2568
|
+
"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.",
|
|
2569
|
+
"defaultValue": {
|
|
2570
|
+
"value": "true"
|
|
2571
|
+
},
|
|
2572
|
+
"parent": {
|
|
2573
|
+
"name": "ComboboxRootProps",
|
|
2574
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2575
|
+
},
|
|
2576
|
+
"declarations": [
|
|
2577
|
+
{
|
|
2578
|
+
"name": "TypeLiteral",
|
|
2579
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2580
|
+
}
|
|
2581
|
+
]
|
|
2582
|
+
},
|
|
2583
|
+
"itemToStringLabel": {
|
|
2584
|
+
"name": "itemToStringLabel",
|
|
2585
|
+
"required": false,
|
|
2586
|
+
"type": {
|
|
2587
|
+
"name": "(itemValue: unknown) => string"
|
|
2588
|
+
},
|
|
2589
|
+
"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.\nWith a `createItems()` collection, this receives the derived value, and the collection's\n`getLabel` takes precedence for values it can resolve.",
|
|
2590
|
+
"defaultValue": null,
|
|
2591
|
+
"parent": {
|
|
2592
|
+
"name": "ComboboxRootProps",
|
|
2593
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2594
|
+
},
|
|
2595
|
+
"declarations": [
|
|
2596
|
+
{
|
|
2597
|
+
"name": "TypeLiteral",
|
|
2598
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2599
|
+
}
|
|
2600
|
+
]
|
|
2601
|
+
},
|
|
2602
|
+
"itemToStringValue": {
|
|
2603
|
+
"name": "itemToStringValue",
|
|
2604
|
+
"required": false,
|
|
2605
|
+
"type": {
|
|
2606
|
+
"name": "(itemValue: unknown) => string"
|
|
2607
|
+
},
|
|
2608
|
+
"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.\nWith a `createItems()` collection, this receives the derived value.",
|
|
2609
|
+
"defaultValue": null,
|
|
2610
|
+
"parent": {
|
|
2611
|
+
"name": "ComboboxRootProps",
|
|
2612
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2613
|
+
},
|
|
2614
|
+
"declarations": [
|
|
2615
|
+
{
|
|
2616
|
+
"name": "TypeLiteral",
|
|
2617
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2618
|
+
}
|
|
2619
|
+
]
|
|
2620
|
+
},
|
|
2621
|
+
"isItemEqualToValue": {
|
|
2622
|
+
"name": "isItemEqualToValue",
|
|
2623
|
+
"required": false,
|
|
2624
|
+
"type": {
|
|
2625
|
+
"name": "(itemValue: unknown, value: unknown) => boolean"
|
|
2626
|
+
},
|
|
2627
|
+
"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.\nWith a `createItems()` collection, both arguments are derived values.\nDefaults to `Object.is` comparison.",
|
|
2628
|
+
"defaultValue": null,
|
|
2629
|
+
"parent": {
|
|
2630
|
+
"name": "ComboboxRootProps",
|
|
2631
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2632
|
+
},
|
|
2633
|
+
"declarations": [
|
|
2634
|
+
{
|
|
2635
|
+
"name": "TypeLiteral",
|
|
2636
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2637
|
+
}
|
|
2638
|
+
]
|
|
2639
|
+
},
|
|
2640
|
+
"defaultValue": {
|
|
2641
|
+
"name": "defaultValue",
|
|
2642
|
+
"required": false,
|
|
2643
|
+
"type": {
|
|
2644
|
+
"name": "unknown"
|
|
2645
|
+
},
|
|
2646
|
+
"description": "The uncontrolled selected value of the combobox when it's initially rendered.\n\nTo render a controlled combobox, use the `value` prop instead.",
|
|
2647
|
+
"defaultValue": null,
|
|
2648
|
+
"parent": {
|
|
2649
|
+
"name": "ComboboxRootProps",
|
|
2650
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2651
|
+
},
|
|
2652
|
+
"declarations": [
|
|
2653
|
+
{
|
|
2654
|
+
"name": "TypeLiteral",
|
|
2655
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2656
|
+
}
|
|
2657
|
+
]
|
|
2658
|
+
},
|
|
2659
|
+
"actionsRef": {
|
|
2660
|
+
"name": "actionsRef",
|
|
2661
|
+
"required": false,
|
|
2662
|
+
"type": {
|
|
2663
|
+
"name": "RefObject<Actions | null>"
|
|
2664
|
+
},
|
|
2665
|
+
"description": "A ref to imperative actions.\n- `unmount`: Manually unmounts the combobox.\nCall this after any externally controlled closing animation finishes.",
|
|
2666
|
+
"defaultValue": null,
|
|
2667
|
+
"parent": {
|
|
2668
|
+
"name": "ComboboxRootProps",
|
|
2669
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2670
|
+
},
|
|
2671
|
+
"declarations": [
|
|
2672
|
+
{
|
|
2673
|
+
"name": "TypeLiteral",
|
|
2674
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2675
|
+
}
|
|
2676
|
+
]
|
|
2677
|
+
},
|
|
2678
|
+
"onOpenChange": {
|
|
2679
|
+
"name": "onOpenChange",
|
|
2680
|
+
"required": false,
|
|
2681
|
+
"type": {
|
|
2682
|
+
"name": "(open: boolean, eventDetails: ChangeEventDetails) => void"
|
|
2683
|
+
},
|
|
2684
|
+
"description": "Event handler called when the popup is opened or closed.",
|
|
2685
|
+
"defaultValue": null,
|
|
2686
|
+
"parent": {
|
|
2687
|
+
"name": "ComboboxRootProps",
|
|
2688
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2689
|
+
},
|
|
2690
|
+
"declarations": [
|
|
2691
|
+
{
|
|
2692
|
+
"name": "TypeLiteral",
|
|
2693
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2694
|
+
}
|
|
2695
|
+
]
|
|
2696
|
+
},
|
|
2697
|
+
"onInputValueChange": {
|
|
2698
|
+
"name": "onInputValueChange",
|
|
2699
|
+
"required": false,
|
|
2700
|
+
"type": {
|
|
2701
|
+
"name": "(inputValue: string, eventDetails: ChangeEventDetails) => void"
|
|
2702
|
+
},
|
|
2703
|
+
"description": "Event handler called when the input value changes.",
|
|
2704
|
+
"defaultValue": null,
|
|
2705
|
+
"parent": {
|
|
2706
|
+
"name": "ComboboxRootProps",
|
|
2707
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2708
|
+
},
|
|
2709
|
+
"declarations": [
|
|
2710
|
+
{
|
|
2711
|
+
"name": "TypeLiteral",
|
|
2712
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2713
|
+
}
|
|
2714
|
+
]
|
|
2715
|
+
},
|
|
2716
|
+
"onItemHighlighted": {
|
|
2717
|
+
"name": "onItemHighlighted",
|
|
2718
|
+
"required": false,
|
|
2719
|
+
"type": {
|
|
2720
|
+
"name": "(highlightedValue: unknown, eventDetails: HighlightEventDetails) => void"
|
|
2721
|
+
},
|
|
2722
|
+
"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.",
|
|
2723
|
+
"defaultValue": null,
|
|
2724
|
+
"parent": {
|
|
2725
|
+
"name": "ComboboxRootProps",
|
|
2726
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2727
|
+
},
|
|
2728
|
+
"declarations": [
|
|
2729
|
+
{
|
|
2730
|
+
"name": "TypeLiteral",
|
|
2731
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2732
|
+
}
|
|
2733
|
+
]
|
|
2734
|
+
},
|
|
2735
|
+
"value": {
|
|
2736
|
+
"name": "value",
|
|
2737
|
+
"required": false,
|
|
2738
|
+
"type": {
|
|
2739
|
+
"name": "unknown"
|
|
2740
|
+
},
|
|
2741
|
+
"description": "The selected value of the combobox. Use when controlled.",
|
|
2742
|
+
"defaultValue": null,
|
|
2743
|
+
"parent": {
|
|
2744
|
+
"name": "ComboboxRootProps",
|
|
2745
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2746
|
+
},
|
|
2747
|
+
"declarations": [
|
|
2748
|
+
{
|
|
2749
|
+
"name": "TypeLiteral",
|
|
2750
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2751
|
+
}
|
|
2752
|
+
]
|
|
2753
|
+
},
|
|
2754
|
+
"onValueChange": {
|
|
2755
|
+
"name": "onValueChange",
|
|
2756
|
+
"required": false,
|
|
2757
|
+
"type": {
|
|
2758
|
+
"name": "(value: unknown, eventDetails: ChangeEventDetails) => void"
|
|
2759
|
+
},
|
|
2760
|
+
"description": "Event handler called when the selected value of the combobox changes.",
|
|
2761
|
+
"defaultValue": null,
|
|
2762
|
+
"parent": {
|
|
2763
|
+
"name": "ComboboxRootProps",
|
|
2764
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2765
|
+
},
|
|
2766
|
+
"declarations": [
|
|
2767
|
+
{
|
|
2768
|
+
"name": "TypeLiteral",
|
|
2769
|
+
"fileName": "node_modules/@base-ui/react/combobox/root/ComboboxRoot.d.mts"
|
|
2770
|
+
}
|
|
2771
|
+
]
|
|
2772
|
+
}
|
|
2773
|
+
}
|
|
2774
|
+
},
|
|
2775
|
+
"stories": [
|
|
2776
|
+
{
|
|
2777
|
+
"id": "components-combobox--default",
|
|
2778
|
+
"name": "Default",
|
|
2779
|
+
"snippet": "const Default = () => (\n <Combobox.Root items={STATES}>\n <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => (\n <Combobox.Item key={state} value={state}>\n {state}\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n);",
|
|
2780
|
+
"description": "The common case: options are already in memory and Base UI filters them against\nwhat you type. Selecting a row fills the input and closes the list."
|
|
2781
|
+
},
|
|
2782
|
+
{
|
|
2783
|
+
"id": "components-combobox--no-matches",
|
|
2784
|
+
"name": "No Matches",
|
|
2785
|
+
"snippet": "const NoMatches = () => (\n <Combobox.Root items={STATES}>\n <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => (\n <Combobox.Item key={state} value={state}>\n {state}\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n);",
|
|
2786
|
+
"description": "`Empty` stays mounted so screen readers announce the change; it renders its\nchildren only while nothing matches. It needs `items` on `Root` to know that."
|
|
2787
|
+
},
|
|
2788
|
+
{
|
|
2789
|
+
"id": "components-combobox--async-search",
|
|
2790
|
+
"name": "Async Search",
|
|
2791
|
+
"snippet": "const AsyncSearch = () => <SuspenseSearch />;",
|
|
2792
|
+
"description": "Options fetched as you type, the way the apps load data: the rows are a component\nthat suspends on the request, so a `Suspense` boundary inside `Content` shows\nplaceholder rows until they land. Nothing tracks `loading` by hand and no stale\nlist lingers under the wait: the data is read by query, which is also what makes\nout-of-order responses harmless. Drop a `useSuspenseQuery` where `use()` is."
|
|
2793
|
+
},
|
|
2794
|
+
{
|
|
2795
|
+
"id": "components-combobox--async-search-with-status",
|
|
2796
|
+
"name": "Async Search With Status",
|
|
2797
|
+
"snippet": "const AsyncSearchWithStatus = () => <StatusSearch />;",
|
|
2798
|
+
"description": "The same search without Suspense, for a consumer that gets a `loading` flag from\nits data layer instead: `filter={null}`, the rows arrive through `filteredItems`,\n`Content` is marked busy and `Status` announces the wait. The list is cleared\nbefore each request and a request that is no longer the latest is dropped."
|
|
2799
|
+
},
|
|
2800
|
+
{
|
|
2801
|
+
"id": "components-combobox--inside-field-text",
|
|
2802
|
+
"name": "Inside Field Text",
|
|
2803
|
+
"snippet": "const InsideFieldText = () => (\n <FieldText invalid required>\n <Label>Agency</Label>\n <Combobox.Root items={STATES}>\n <Combobox.Input placeholder=\"Search agencies\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => (\n <Combobox.Item key={state} value={state}>\n {state}\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n <Field.Description>The agency this agent will be added to.</Field.Description>\n <Field.Error errors={[{ message: 'Pick an agency from the list' }]} />\n </FieldText>\n);",
|
|
2804
|
+
"description": "Dropped into a `FieldText`, the input takes the label, the description and\nthe error from the field with nothing wired by hand: `Combobox.Input` reads the\nsame `InputContext` the plain `Input` does."
|
|
2805
|
+
},
|
|
2806
|
+
{
|
|
2807
|
+
"id": "components-combobox--with-leading-icon",
|
|
2808
|
+
"name": "With Leading Icon",
|
|
2809
|
+
"snippet": "const WithLeadingIcon = () => (\n <Combobox.Root items={STATES}>\n <div className=\"relative\">\n <IconSearch\n aria-hidden\n className=\"pointer-events-none absolute top-1/2 left-3 z-1 size-6 -translate-y-1/2 [&>path]:fill-icon-default-base-tertiary\"\n />\n <Combobox.Input className=\"pl-11\" placeholder=\"Search states\" aria-label=\"Search states\" />\n </div>\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => (\n <Combobox.Item key={state} value={state}>\n {state}\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n);",
|
|
2810
|
+
"description": "A leading icon is composed around the input, not baked in: not every combobox\nis a search (a FEIN lookup or a template picker are not), so the component\nships no icon of its own. Until `InputGroup` lands in the design system, the\nmarketplace search fields get theirs like this — the icon overlaid, the input\npadded past it."
|
|
2811
|
+
},
|
|
2812
|
+
{
|
|
2813
|
+
"id": "components-combobox--inside-modal",
|
|
2814
|
+
"name": "Inside Modal",
|
|
2815
|
+
"snippet": "const InsideModal = () => (\n <Modal.Root>\n <Modal.Trigger asChild>\n <Button variant=\"secondary\">Assign agency</Button>\n </Modal.Trigger>\n <Modal.Content>\n <Modal.Title>Assign agency</Modal.Title>\n <Modal.Body>\n <Combobox.Root items={STATES}>\n <Combobox.Input placeholder=\"Search states\" aria-label=\"Search states\" />\n <Combobox.Content>\n <Combobox.Empty>No matches found</Combobox.Empty>\n <Combobox.List>\n {(state: string) => (\n <Combobox.Item key={state} value={state}>\n {state}\n </Combobox.Item>\n )}\n </Combobox.List>\n </Combobox.Content>\n </Combobox.Root>\n </Modal.Body>\n </Modal.Content>\n </Modal.Root>\n);",
|
|
2816
|
+
"description": "Inside a `Modal`, which is a Radix Dialog. The surface portals to the body, so\nthis checks that the dialog's modal layer neither blocks pointer events on the\nlist nor treats a click in it as a click outside and closes."
|
|
2817
|
+
}
|
|
2818
|
+
],
|
|
2819
|
+
"import": "import { Button, Combobox, Field, FieldText, IconSearch, Label, Modal, Skeleton } from \"@agentero/design-system\";\nimport { Suspense } from \"react\";"
|
|
2820
|
+
},
|
|
1989
2821
|
"components-command": {
|
|
1990
2822
|
"id": "components-command",
|
|
1991
2823
|
"name": "Command.Root",
|
|
@@ -5176,11 +6008,8 @@
|
|
|
5176
6008
|
"required": false,
|
|
5177
6009
|
"type": {
|
|
5178
6010
|
"name": "enum",
|
|
5179
|
-
"raw": "\"
|
|
6011
|
+
"raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
|
|
5180
6012
|
"value": [
|
|
5181
|
-
{
|
|
5182
|
-
"value": "\"right\""
|
|
5183
|
-
},
|
|
5184
6013
|
{
|
|
5185
6014
|
"value": "\"top\""
|
|
5186
6015
|
},
|
|
@@ -5189,6 +6018,9 @@
|
|
|
5189
6018
|
},
|
|
5190
6019
|
{
|
|
5191
6020
|
"value": "\"left\""
|
|
6021
|
+
},
|
|
6022
|
+
{
|
|
6023
|
+
"value": "\"right\""
|
|
5192
6024
|
}
|
|
5193
6025
|
]
|
|
5194
6026
|
},
|
|
@@ -5738,13 +6570,13 @@
|
|
|
5738
6570
|
}
|
|
5739
6571
|
]
|
|
5740
6572
|
},
|
|
5741
|
-
"
|
|
5742
|
-
"name": "
|
|
6573
|
+
"readOnly": {
|
|
6574
|
+
"name": "readOnly",
|
|
5743
6575
|
"required": false,
|
|
5744
6576
|
"type": {
|
|
5745
|
-
"name": "
|
|
6577
|
+
"name": "boolean"
|
|
5746
6578
|
},
|
|
5747
|
-
"description": "
|
|
6579
|
+
"description": "Keeps the value focusable and copyable but not editable, and still\nsubmits it. Unlike `disabled`, it stays in the tab order.",
|
|
5748
6580
|
"defaultValue": null,
|
|
5749
6581
|
"parent": {
|
|
5750
6582
|
"name": "InputHTMLAttributes",
|
|
@@ -5761,13 +6593,13 @@
|
|
|
5761
6593
|
}
|
|
5762
6594
|
]
|
|
5763
6595
|
},
|
|
5764
|
-
"
|
|
5765
|
-
"name": "
|
|
6596
|
+
"placeholder": {
|
|
6597
|
+
"name": "placeholder",
|
|
5766
6598
|
"required": false,
|
|
5767
6599
|
"type": {
|
|
5768
|
-
"name": "
|
|
6600
|
+
"name": "string"
|
|
5769
6601
|
},
|
|
5770
|
-
"description": "
|
|
6602
|
+
"description": "Short hint shown while the field is empty. It disappears on the first\nkeystroke, so it is never a substitute for a label.",
|
|
5771
6603
|
"defaultValue": null,
|
|
5772
6604
|
"parent": {
|
|
5773
6605
|
"name": "InputHTMLAttributes",
|
|
@@ -8519,11 +9351,8 @@
|
|
|
8519
9351
|
"required": false,
|
|
8520
9352
|
"type": {
|
|
8521
9353
|
"name": "enum",
|
|
8522
|
-
"raw": "\"
|
|
9354
|
+
"raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
|
|
8523
9355
|
"value": [
|
|
8524
|
-
{
|
|
8525
|
-
"value": "\"right\""
|
|
8526
|
-
},
|
|
8527
9356
|
{
|
|
8528
9357
|
"value": "\"top\""
|
|
8529
9358
|
},
|
|
@@ -8532,6 +9361,9 @@
|
|
|
8532
9361
|
},
|
|
8533
9362
|
{
|
|
8534
9363
|
"value": "\"left\""
|
|
9364
|
+
},
|
|
9365
|
+
{
|
|
9366
|
+
"value": "\"right\""
|
|
8535
9367
|
}
|
|
8536
9368
|
]
|
|
8537
9369
|
},
|
|
@@ -8874,6 +9706,6 @@
|
|
|
8874
9706
|
},
|
|
8875
9707
|
"meta": {
|
|
8876
9708
|
"docgen": "react-component-meta",
|
|
8877
|
-
"durationMs":
|
|
9709
|
+
"durationMs": 3433
|
|
8878
9710
|
}
|
|
8879
9711
|
}
|