@jobber/components 8.13.1 → 8.14.1

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.
Files changed (162) hide show
  1. package/FilterPicker.d.ts +1 -0
  2. package/{Combobox.js → FilterPicker.js} +3 -3
  3. package/dist/Checkbox/Checkbox.d.ts +1 -1
  4. package/dist/DataList/components/DataListFilters/components/DataListSort/index.cjs +11 -11
  5. package/dist/DataList/components/DataListFilters/components/DataListSort/index.mjs +11 -11
  6. package/dist/DataList/components/DataListFilters/index.cjs +11 -11
  7. package/dist/DataList/components/DataListFilters/index.mjs +11 -11
  8. package/dist/DataList/components/DataListHeader/index.cjs +0 -1
  9. package/dist/DataList/components/DataListHeader/index.mjs +0 -1
  10. package/dist/DataList/components/DataListSearch/index.cjs +1 -2
  11. package/dist/DataList/components/DataListSearch/index.mjs +1 -2
  12. package/dist/DataList/index.cjs +11 -12
  13. package/dist/DataList/index.mjs +11 -12
  14. package/dist/DataListHeader-cjs.js +22 -5
  15. package/dist/DataListHeader-es.js +22 -5
  16. package/dist/DataListSearch-cjs.js +19 -2
  17. package/dist/DataListSearch-es.js +19 -2
  18. package/dist/DataListSort-cjs.js +5 -5
  19. package/dist/DataListSort-es.js +5 -5
  20. package/dist/FilterPicker/FilterPicker.d.ts +11 -0
  21. package/dist/{Combobox/Combobox.types.d.ts → FilterPicker/FilterPicker.types.d.ts} +51 -51
  22. package/dist/FilterPicker/FilterPickerProvider.d.ts +18 -0
  23. package/dist/FilterPicker/components/FilterPickerAction/FilterPickerAction.d.ts +3 -0
  24. package/dist/FilterPicker/components/FilterPickerAction/index.cjs +12 -0
  25. package/dist/FilterPicker/components/FilterPickerAction/index.d.ts +1 -0
  26. package/dist/FilterPicker/components/FilterPickerAction/index.mjs +6 -0
  27. package/dist/FilterPicker/components/FilterPickerActivator/FilterPickerActivator.d.ts +3 -0
  28. package/dist/{Combobox/components/ComboboxActivator → FilterPicker/components/FilterPickerActivator}/index.cjs +3 -3
  29. package/dist/FilterPicker/components/FilterPickerActivator/index.d.ts +1 -0
  30. package/dist/{Combobox/components/ComboboxActivator → FilterPicker/components/FilterPickerActivator}/index.mjs +2 -2
  31. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContent.d.ts +3 -0
  32. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentHeader/FilterPickerContentHeader.d.ts +3 -0
  33. package/dist/{Combobox/components/ComboboxContent/ComboboxContentHeader → FilterPicker/components/FilterPickerContent/FilterPickerContentHeader}/index.cjs +2 -2
  34. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentHeader/index.d.ts +1 -0
  35. package/dist/{Combobox/components/ComboboxContent/ComboboxContentHeader → FilterPicker/components/FilterPickerContent/FilterPickerContentHeader}/index.mjs +1 -1
  36. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentList/FilterPickerContentList.d.ts +3 -0
  37. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentList/FilterPickerContentList.module.css.d.ts +13 -0
  38. package/dist/{Combobox/components/ComboboxContent/ComboboxContentList → FilterPicker/components/FilterPickerContent/FilterPickerContentList}/index.cjs +5 -5
  39. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentList/index.d.ts +1 -0
  40. package/dist/{Combobox/components/ComboboxContent/ComboboxContentList → FilterPicker/components/FilterPickerContent/FilterPickerContentList}/index.mjs +4 -4
  41. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentSearch/FilterPickerContentSearch.d.ts +3 -0
  42. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentSearch/index.cjs +10 -0
  43. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentSearch/index.d.ts +1 -0
  44. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerContentSearch/index.mjs +4 -0
  45. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerLoadMore/FilterPickerLoadMore.d.ts +6 -0
  46. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerLoadMore/index.cjs +9 -0
  47. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerLoadMore/index.d.ts +1 -0
  48. package/dist/FilterPicker/components/FilterPickerContent/FilterPickerLoadMore/index.mjs +3 -0
  49. package/dist/{Combobox/components/ComboboxContent → FilterPicker/components/FilterPickerContent}/index.cjs +8 -8
  50. package/dist/FilterPicker/components/FilterPickerContent/index.d.ts +1 -0
  51. package/dist/{Combobox/components/ComboboxContent → FilterPicker/components/FilterPickerContent}/index.mjs +7 -7
  52. package/dist/FilterPicker/components/FilterPickerOption/FilterPickerOption.d.ts +3 -0
  53. package/dist/{Combobox/components/ComboboxOption → FilterPicker/components/FilterPickerOption}/index.cjs +3 -3
  54. package/dist/FilterPicker/components/FilterPickerOption/index.d.ts +1 -0
  55. package/dist/{Combobox/components/ComboboxOption → FilterPicker/components/FilterPickerOption}/index.mjs +2 -2
  56. package/dist/FilterPicker/components/FilterPickerTrigger/FilterPickerTrigger.d.ts +3 -0
  57. package/dist/{Combobox/components/ComboboxTrigger → FilterPicker/components/FilterPickerTrigger}/index.cjs +3 -3
  58. package/dist/FilterPicker/components/FilterPickerTrigger/index.d.ts +1 -0
  59. package/dist/{Combobox/components/ComboboxTrigger → FilterPicker/components/FilterPickerTrigger}/index.mjs +2 -2
  60. package/dist/FilterPicker/constants.d.ts +1 -0
  61. package/dist/FilterPicker/hooks/useFilterPicker.d.ts +17 -0
  62. package/dist/FilterPicker/hooks/useFilterPickerAccessibility.d.ts +9 -0
  63. package/dist/FilterPicker/hooks/useFilterPickerActivatorAccessibility.d.ts +2 -0
  64. package/dist/FilterPicker/hooks/useFilterPickerContent.d.ts +9 -0
  65. package/dist/FilterPicker/hooks/useFilterPickerValidation.d.ts +12 -0
  66. package/dist/FilterPicker/hooks/useMakeFilterPickerHandlers.d.ts +8 -0
  67. package/dist/{Combobox → FilterPicker}/index.cjs +13 -13
  68. package/dist/FilterPicker/index.d.ts +3 -0
  69. package/dist/{Combobox → FilterPicker}/index.mjs +11 -11
  70. package/dist/{Combobox-cjs.js → FilterPicker-cjs.js} +25 -25
  71. package/dist/{Combobox-es.js → FilterPicker-es.js} +25 -25
  72. package/dist/{ComboboxAction-cjs.js → FilterPickerAction-cjs.js} +5 -5
  73. package/dist/{ComboboxAction-es.js → FilterPickerAction-es.js} +5 -5
  74. package/dist/{ComboboxActivator-cjs.js → FilterPickerActivator-cjs.js} +8 -8
  75. package/dist/{ComboboxActivator-es.js → FilterPickerActivator-es.js} +9 -9
  76. package/dist/{ComboboxContent-cjs.js → FilterPickerContent-cjs.js} +19 -19
  77. package/dist/{ComboboxContent-es.js → FilterPickerContent-es.js} +20 -20
  78. package/dist/{ComboboxContentHeader-cjs.js → FilterPickerContentHeader-cjs.js} +4 -4
  79. package/dist/{ComboboxContentHeader-es.js → FilterPickerContentHeader-es.js} +4 -4
  80. package/dist/{ComboboxContentList-cjs.js → FilterPickerContentList-cjs.js} +7 -7
  81. package/dist/{ComboboxContentList-es.js → FilterPickerContentList-es.js} +7 -7
  82. package/dist/{ComboboxContentSearch-cjs.js → FilterPickerContentSearch-cjs.js} +4 -4
  83. package/dist/{ComboboxContentSearch-es.js → FilterPickerContentSearch-es.js} +4 -4
  84. package/dist/FilterPickerLoadMore-cjs.js +16 -0
  85. package/dist/{ComboboxLoadMore-es.js → FilterPickerLoadMore-es.js} +4 -4
  86. package/dist/{ComboboxOption-cjs.js → FilterPickerOption-cjs.js} +5 -5
  87. package/dist/{ComboboxOption-es.js → FilterPickerOption-es.js} +5 -5
  88. package/dist/FilterPickerProvider-cjs.js +13 -0
  89. package/dist/FilterPickerProvider-es.js +10 -0
  90. package/dist/{ComboboxTrigger-cjs.js → FilterPickerTrigger-cjs.js} +4 -4
  91. package/dist/{ComboboxTrigger-es.js → FilterPickerTrigger-es.js} +4 -4
  92. package/dist/constants-cjs.js +2 -2
  93. package/dist/constants-es.js +2 -2
  94. package/dist/docs/Autocomplete/Autocomplete.md +1 -1
  95. package/dist/docs/Banner/Banner.md +2 -2
  96. package/dist/docs/Box/Box.md +2 -2
  97. package/dist/docs/Card/Card.md +1 -1
  98. package/dist/docs/Chip/Chip.md +4 -4
  99. package/dist/docs/DataList/DataList.md +16 -15
  100. package/dist/docs/{Combobox/Combobox.md → FilterPicker/FilterPicker.md} +91 -85
  101. package/dist/docs/Icon/Icon.md +1 -1
  102. package/dist/docs/Menu/Menu.md +2 -2
  103. package/dist/docs/MultiSelect/MultiSelect.md +1 -1
  104. package/dist/docs/Tabs/Tabs.md +2 -2
  105. package/dist/docs/index.md +1 -2
  106. package/dist/docs/usage-guidelines/usage-guidelines.md +5 -5
  107. package/dist/index.cjs +14 -16
  108. package/dist/index.d.mts +1 -2
  109. package/dist/index.d.ts +1 -2
  110. package/dist/index.mjs +12 -13
  111. package/dist/styles.css +53 -53
  112. package/dist/utils/meta/meta.json +5 -7
  113. package/package.json +6 -11
  114. package/rollup.config.mjs +2 -2
  115. package/AnimatedSwitcher.d.ts +0 -1
  116. package/AnimatedSwitcher.js +0 -17
  117. package/Combobox.d.ts +0 -1
  118. package/dist/AnimatedSwitcher/AnimatedSwitcher.d.ts +0 -32
  119. package/dist/AnimatedSwitcher/index.cjs +0 -11
  120. package/dist/AnimatedSwitcher/index.d.ts +0 -1
  121. package/dist/AnimatedSwitcher/index.mjs +0 -5
  122. package/dist/AnimatedSwitcher/transitions.d.ts +0 -8
  123. package/dist/AnimatedSwitcher-cjs.js +0 -95
  124. package/dist/AnimatedSwitcher-es.js +0 -93
  125. package/dist/Combobox/Combobox.d.ts +0 -11
  126. package/dist/Combobox/ComboboxProvider.d.ts +0 -18
  127. package/dist/Combobox/components/ComboboxAction/ComboboxAction.d.ts +0 -3
  128. package/dist/Combobox/components/ComboboxAction/index.cjs +0 -12
  129. package/dist/Combobox/components/ComboboxAction/index.d.ts +0 -1
  130. package/dist/Combobox/components/ComboboxAction/index.mjs +0 -6
  131. package/dist/Combobox/components/ComboboxActivator/ComboboxActivator.d.ts +0 -3
  132. package/dist/Combobox/components/ComboboxActivator/index.d.ts +0 -1
  133. package/dist/Combobox/components/ComboboxContent/ComboboxContent.d.ts +0 -3
  134. package/dist/Combobox/components/ComboboxContent/ComboboxContentHeader/ComboboxContentHeader.d.ts +0 -3
  135. package/dist/Combobox/components/ComboboxContent/ComboboxContentHeader/index.d.ts +0 -1
  136. package/dist/Combobox/components/ComboboxContent/ComboboxContentList/ComboboxContentList.d.ts +0 -3
  137. package/dist/Combobox/components/ComboboxContent/ComboboxContentList/index.d.ts +0 -1
  138. package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/ComboboxContentSearch.d.ts +0 -3
  139. package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.cjs +0 -10
  140. package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.d.ts +0 -1
  141. package/dist/Combobox/components/ComboboxContent/ComboboxContentSearch/index.mjs +0 -4
  142. package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/ComboboxLoadMore.d.ts +0 -6
  143. package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.cjs +0 -9
  144. package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.d.ts +0 -1
  145. package/dist/Combobox/components/ComboboxContent/ComboboxLoadMore/index.mjs +0 -3
  146. package/dist/Combobox/components/ComboboxContent/index.d.ts +0 -1
  147. package/dist/Combobox/components/ComboboxOption/ComboboxOption.d.ts +0 -3
  148. package/dist/Combobox/components/ComboboxOption/index.d.ts +0 -1
  149. package/dist/Combobox/components/ComboboxTrigger/ComboboxTrigger.d.ts +0 -3
  150. package/dist/Combobox/components/ComboboxTrigger/index.d.ts +0 -1
  151. package/dist/Combobox/constants.d.ts +0 -1
  152. package/dist/Combobox/hooks/useCombobox.d.ts +0 -17
  153. package/dist/Combobox/hooks/useComboboxAccessibility.d.ts +0 -9
  154. package/dist/Combobox/hooks/useComboboxActivatorAccessibility.d.ts +0 -2
  155. package/dist/Combobox/hooks/useComboboxContent.d.ts +0 -9
  156. package/dist/Combobox/hooks/useComboboxValidation.d.ts +0 -12
  157. package/dist/Combobox/hooks/useMakeComboboxHandlers.d.ts +0 -8
  158. package/dist/Combobox/index.d.ts +0 -3
  159. package/dist/ComboboxLoadMore-cjs.js +0 -16
  160. package/dist/ComboboxProvider-cjs.js +0 -13
  161. package/dist/ComboboxProvider-es.js +0 -10
  162. package/dist/docs/AnimatedSwitcher/AnimatedSwitcher.md +0 -34
@@ -4,7 +4,7 @@ Chip is a flexible component that can be used for
4
4
 
5
5
  * inline single- or multi-selection of items
6
6
  * triggering filtering and selection components like
7
- [Combobox](../Combobox/Combobox.md)
7
+ [FilterPicker](../FilterPicker/FilterPicker.md)
8
8
  * presenting grouped items that can be added or removed
9
9
 
10
10
  ```tsx
@@ -236,8 +236,8 @@ export function ChipInvalidExample(
236
236
 
237
237
  * [Chips](../Chips/Chips.md) is a convenience wrapper that offers the
238
238
  single-select, multi-select, and add/dismiss functionality "out of the box"
239
- * [Combobox](../Combobox/Combobox.md) is most commonly triggered by a Chip, but is
240
- a separate component
239
+ * [FilterPicker](../FilterPicker/FilterPicker.md) is most commonly triggered by a Chip,
240
+ but is a separate component
241
241
  * [Select](../Select/Select.md) is a simpler single-select "dropdown" that
242
242
  presents as a form element and should be preferred in forms
243
243
  * [RadioGroup](../RadioGroup/RadioGroup.md) should be used to allow the user to
@@ -256,7 +256,7 @@ ideally 1–2 words. If any of the options in the group may have longer labels,
256
256
  consider Checkbox or Radio as necessary for your selection type.
257
257
 
258
258
  In cases where a Chip displays name of its selections, such as when used to
259
- trigger a Combobox or a date range selector, use the heading to identify the
259
+ trigger a FilterPicker or a date range selector, use the heading to identify the
260
260
  "category" and the label to identify the selected items.
261
261
 
262
262
  ## Accessibility
@@ -221,7 +221,7 @@ children and inserts it above the list of items.
221
221
  ```tsx
222
222
  <DataList>
223
223
  <DataList.Filters>
224
- <Combobox />
224
+ <FilterPicker />
225
225
  <Button />
226
226
  <Select />
227
227
  </DataList.Filters>
@@ -233,7 +233,7 @@ children and inserts it above the list of items.
233
233
  ##### In all filter groups (e.g. with the "Clear Filters" button)
234
234
 
235
235
  You can add a button that will clear all the filters by using the combination of
236
- the `Combobox` and `Button` components (check out the `Code` tab in the
236
+ the `FilterPicker` and `Button` components (check out the `Code` tab in the
237
237
  ["Clear All Filters" story](/storybook/web/?path=/story/components-lists-and-tables-datalist--clear-all-filters)
238
238
  for a more elaborate example).
239
239
 
@@ -247,27 +247,27 @@ function removeAllFilters() {
247
247
  }
248
248
 
249
249
  <DataList.Filters>
250
- <Combobox
250
+ <FilterPicker
251
251
  label="Filter Group 1"
252
252
  selected={groupOneSelectedFilters}
253
253
  onSelect={handleSelectGroupOneFilters}
254
254
  multiSelect
255
255
  >
256
256
  {groupOneSelectedFilters.map(filter => (
257
- <Combobox.Option key={filter} id={filter} label={filter} />
257
+ <FilterPicker.Option key={filter} id={filter} label={filter} />
258
258
  ))}
259
- </Combobox>
259
+ </FilterPicker>
260
260
 
261
- <Combobox
261
+ <FilterPicker
262
262
  label="Filter Group 2"
263
263
  selected={groupTwoSelectedFilters}
264
264
  multiSelect
265
265
  onSelect={handleSelectGroupOneFilters}
266
266
  >
267
267
  {groupTwoSelectedFilters.map(filter => (
268
- <Combobox.Option key={filter} id={filter} label={filter} />
268
+ <FilterPicker.Option key={filter} id={filter} label={filter} />
269
269
  ))}
270
- </Combobox>
270
+ </FilterPicker>
271
271
 
272
272
  <Button
273
273
  label="Clear filters"
@@ -281,8 +281,9 @@ function removeAllFilters() {
281
281
  ##### Within one filter group (e.g. Suffix on the Chip)
282
282
 
283
283
  If you'd like to to implement a filter mechanism to clear all filters within one
284
- group without opening the `Combobox` "dropdown", you could achieve this by using
285
- `<Combobox.Activator>` and `<Chip>` components (check out the `Code` tab in the
284
+ group without opening the `FilterPicker` "dropdown", you could achieve this by
285
+ using `<FilterPicker.Activator>` and `<Chip>` components (check out the `Code`
286
+ tab in the
286
287
  ["Clear All Filters" story](/storybook/web/?path=/story/components-lists-and-tables-datalist--clear-all-filters))
287
288
  for a more elaborate example).
288
289
 
@@ -293,13 +294,13 @@ standard `DataList` with filters.
293
294
  ```tsx
294
295
  const [selectedFilters, setSelectedFilters] = useState([]);
295
296
 
296
- <Combobox
297
+ <FilterPicker
297
298
  label=""
298
299
  selected={selectedFilters}
299
300
  onSelect={setSelectedFilters}
300
301
  multiSelect
301
302
  >
302
- <Combobox.Activator>
303
+ <FilterPicker.Activator>
303
304
  <Chip
304
305
  label={
305
306
  selectedFilters.length
@@ -330,12 +331,12 @@ const [selectedFilters, setSelectedFilters] = useState([]);
330
331
  />
331
332
  </Chip.Suffix>
332
333
  </Chip>
333
- </Combobox.Activator>
334
+ </FilterPicker.Activator>
334
335
 
335
336
  {filterOptions.map((option: string) => (
336
- <Combobox.Option key={option} id={option} label={option} />
337
+ <FilterPicker.Option key={option} id={option} label={option} />
337
338
  ))}
338
- </Combobox>;
339
+ </FilterPicker>;
339
340
  ```
340
341
 
341
342
  You can also combine both "Clear filter" methods (within one group as well as to
@@ -1,56 +1,59 @@
1
- # Combobox
1
+ # FilterPicker
2
2
 
3
- The Combobox is designed to provide a versatile and accessible interface for
4
- selecting one or more options from a list. Combobox can be used for a variety of
5
- scenarios, such as selecting items from a predefined list, filtering and
6
- searching through data.
3
+ > **NOTICE:** This component was previously named `Combobox`. Use `FilterPicker` as the
4
+ > direct replacement.
5
+
6
+ The FilterPicker is designed to provide a versatile and accessible interface for
7
+ selecting one or more options from a list. FilterPicker can be used for a
8
+ variety of scenarios, such as selecting items from a predefined list, filtering
9
+ and searching through data.
7
10
 
8
11
  ## Design & usage guidelines
9
12
 
10
- The Combobox component's primary function is to facilitate option selection and
11
- searching within a list of items.
13
+ The FilterPicker component's primary function is to facilitate option selection
14
+ and searching within a list of items.
12
15
 
13
16
  It should be used in scenarios where users need to choose from a set of options,
14
17
  with the added benefit of filtering.
15
18
 
16
- The Combobox also has the flexibility to allow for custom actions, such as
19
+ The FilterPicker also has the flexibility to allow for custom actions, such as
17
20
  adding a new item to the list of options or managing a selection.
18
21
 
19
22
  ## Content guidelines
20
23
 
21
- Combobox is designed to handle lists of selectable options, so the component is
22
- text based.
24
+ FilterPicker is designed to handle lists of selectable options, so the component
25
+ is text based.
23
26
 
24
27
  You may customize the activator and action `label`. Refer to the
25
28
  [Product Vocabulary](../product-vocabulary/product-vocabulary.md) for consistency in consistency
26
29
  in terminology and naming conventions when setting these values.
27
30
 
28
- You may also set an optional `subjectNoun` for the Combobox content. This will
29
- be used in the
30
- [empty state](/storybook/web/?path=/story/components-selections-combobox--empty-state)
31
- of the Combobox, as well as the noun within the search placeholder.
31
+ You may also set an optional `subjectNoun` for the FilterPicker content. This
32
+ will be used in the
33
+ [empty state](/storybook/web/?path=/story/components-selections-filterpicker--empty-state)
34
+ of the FilterPicker, as well as the noun within the search placeholder.
32
35
 
33
- You may include a prefix element to any ComboBox.Option by setting its `prefix`
34
- prop. This could be a [StatusIndicator](../StatusIndicator/StatusIndicator.md) or
36
+ You may include a prefix element to any `FilterPicker.Option` by setting its
37
+ `prefix` prop. This could be a [StatusIndicator](../StatusIndicator/StatusIndicator.md) or
35
38
  [Icon](../Icon/Icon.md) to provide additional context to the option.
36
39
 
37
40
  ### Empty states
38
41
 
39
- In cases where the list of options is empty, the Combobox content will display a
40
- message indicating the absence of options. The default will read, *"No options
41
- yet"* or *"You don't have any \[subjectNoun] yet"* if you've set the
42
+ In cases where the list of options is empty, the FilterPicker content will
43
+ display a message indicating the absence of options. The default will read, *"No
44
+ options yet"* or *"You don't have any \[subjectNoun] yet"* if you've set the
42
45
  `subjectNoun` prop.
43
46
 
44
47
  If options are available, but the search query does not match any of them, the
45
- Combobox Content will display a message indicating that no options match the
48
+ FilterPicker Content will display a message indicating that no options match the
46
49
  search query.
47
50
 
48
51
  ## Accessibility
49
52
 
50
53
  | Shortcut Keys | Action |
51
54
  | --------------- | ------------------------------------------------------------------------------------------ |
52
- | Space or Return | Open/close the Combobox |
53
- | Escape | Close the Combobox and return focus to the activator |
55
+ | Space or Return | Open/close the FilterPicker |
56
+ | Escape | Close the FilterPicker and return focus to the activator |
54
57
  | Tab | When closed: Move to activatorWhen open: Move from search input to clear button to actions |
55
58
  | Up/Down Arrow | Navigate through options list |
56
59
  | Space or Return | Select focused option |
@@ -59,7 +62,8 @@ search query.
59
62
 
60
63
  * The activator element is given a `role="combobox"` to inform the user of the
61
64
  type of content they'll be interacting with
62
- * Once the user opens the Combobox, the search input is focused and announced
65
+ * Once the user opens the FilterPicker, the search input is focused and
66
+ announced
63
67
  * The title and "selected/unselected" status of each item is announced as the
64
68
  user navigates the options
65
69
  * The actions (if present) are announced and operable as buttons
@@ -67,28 +71,28 @@ search query.
67
71
 
68
72
  ## Configuration
69
73
 
70
- Combobox is composed of three main parts: Activator, Content, and Action.
74
+ FilterPicker is composed of three main parts: Activator, Content, and Action.
71
75
 
72
76
  ### Activator
73
77
 
74
- The activator is the user-facing interface to open and close the Combobox and
75
- initiate option selection.
78
+ The activator is the user-facing interface to open and close the FilterPicker
79
+ and initiate option selection.
76
80
 
77
81
  #### Default activator
78
82
 
79
- To use the default activator simply omit any kind of `Combobox.Activator`
83
+ To use the default activator simply omit any kind of `FilterPicker.Activator`
80
84
  subcomponent in your instance.
81
85
 
82
86
  Examples of using a default activator can be found in the
83
- [single-select](/storybook/web/?path=/story/components-selections-combobox--single-select)
87
+ [single-select](/storybook/web/?path=/story/components-selections-filterpicker--single-select)
84
88
  and
85
- [multi-select](/storybook/web/?path=/story/components-selections-combobox--multi-select)
89
+ [multi-select](/storybook/web/?path=/story/components-selections-filterpicker--multi-select)
86
90
  stories. The label of the default activator can be customized by adding the
87
- optional `label` prop to Combobox, to better reflect the type of data being
91
+ optional `label` prop to FilterPicker, to better reflect the type of data being
88
92
  selected. Otherwise, the default activator label will read "Select".
89
93
 
90
- The optional `label` prop on Combobox is only effective when using the default
91
- activator.
94
+ The optional `label` prop on FilterPicker is only effective when using the
95
+ default activator.
92
96
 
93
97
  #### Custom activator
94
98
 
@@ -96,18 +100,19 @@ The custom activator should be used in any instance where the default activator
96
100
  is not suitable.
97
101
 
98
102
  **Child React Component:** To use a customized `Chip` or `Button` your custom
99
- activator should be a child of `<Combobox.Activator />`. An example of using a
100
- custom activator can be found in the
101
- [custom activator](/storybook/web/?path=/story/components-selections-combobox--custom-activator)
103
+ activator should be a child of `<FilterPicker.Activator />`. An example of using
104
+ a custom activator can be found in the
105
+ [custom activator](/storybook/web/?path=/story/components-selections-filterpicker--custom-activator)
102
106
  story.
103
107
 
104
108
  **Child Render Function:** If neither a Chip nor a Button is sufficient for your
105
- needs, you may instead provide a function as the child to `Combobox.Activator`.
109
+ needs, you may instead provide a function as the child to
110
+ `FilterPicker.Activator`.
106
111
 
107
- As arguments, the function will receive a method to open the Combobox (closing
108
- is handled internally), and accessibility attributes required for a Combobox.
109
- **You must implement these yourself**. See the
110
- [render function example](/storybook/web/?path=/story/components-selections-combobox--custom-activator)
112
+ As arguments, the function will receive a method to open the FilterPicker
113
+ (closing is handled internally), and accessibility attributes required for a
114
+ FilterPicker. **You must implement these yourself**. See the
115
+ [render function example](/storybook/web/?path=/story/components-selections-filterpicker--custom-activator)
111
116
  for reference.
112
117
 
113
118
  The render function must return a single, valid JSX Element (it can of course
@@ -117,10 +122,11 @@ non traditionally interactive element such as a div is used.
117
122
 
118
123
  ### Content
119
124
 
120
- The content of the Combobox is responsible for displaying the list of selectable
121
- options, handling user interactions, and managing search functionality.
125
+ The content of the FilterPicker is responsible for displaying the list of
126
+ selectable options, handling user interactions, and managing search
127
+ functionality.
122
128
 
123
- `<Combobox.Option />` represents an individual option within the list. Each
129
+ `<FilterPicker.Option />` represents an individual option within the list. Each
124
130
  option has `id`, `label`, and `prefix` props which are used to identify and
125
131
  display the option.
126
132
 
@@ -128,12 +134,12 @@ display the option.
128
134
 
129
135
  You can use the `prefix` option to render content on the left side of the
130
136
  provided `label`. An example of this behaviour can be found in the
131
- [Prefix Options](/storybook/web/?path=/story/components-selections-combobox--prefix-options)
137
+ [Prefix Options](/storybook/web/?path=/story/components-selections-filterpicker--prefix-options)
132
138
  story.
133
139
 
134
140
  If you need more advanced control of the children inside each option, you can
135
141
  use the `customRender` prop to supply your own content. Check out the
136
- [Custom Render Options](/storybook/web/?path=/story/components-selections-combobox--custom-render-options)
142
+ [Custom Render Options](/storybook/web/?path=/story/components-selections-filterpicker--custom-render-options)
137
143
  story for an example.
138
144
 
139
145
  ### Action
@@ -141,25 +147,25 @@ story for an example.
141
147
  Actions are an optional way to allow users to perform custom tasks such as
142
148
  adding a new item to the list of options.
143
149
 
144
- By default, when an action is clicked, the Combobox will close. If you want the
145
- Combobox to remain open after an action is clicked, you can use the
150
+ By default, when an action is clicked, the FilterPicker will close. If you want
151
+ the FilterPicker to remain open after an action is clicked, you can use the
146
152
  `keepOpenOnClick` prop. An example of this behaviour can be found in the
147
- [Keep Open on Click](/storybook/web/?path=/story/components-selections-combobox--keep-open-on-click)
153
+ [Keep Open on Click](/storybook/web/?path=/story/components-selections-filterpicker--keep-open-on-click)
148
154
  story.
149
155
 
150
156
  ### Selection behavior
151
157
 
152
158
  #### Single-select
153
159
 
154
- Single-select is Combobox's default selection mode. When a selection is made,
155
- the Combobox will close.
160
+ Single-select is FilterPicker's default selection mode. When a selection is
161
+ made, the FilterPicker will close.
156
162
 
157
163
  #### Multi-select
158
164
 
159
165
  Add the `multiSelect` prop to allow multiple options to be selected and/or
160
- un-selected. In multi-select mode, the Combobox will only close when a user
161
- takes an explicit action to close it such as clicking outside the Combobox or
162
- pressing the ESC key.
166
+ un-selected. In multi-select mode, the FilterPicker will only close when a user
167
+ takes an explicit action to close it such as clicking outside the FilterPicker
168
+ or pressing the ESC key.
163
169
 
164
170
  With multiSelect activated, a header appears beneath the search input, providing
165
171
  information about the number of selected items. Additionally, a button allows
@@ -181,16 +187,16 @@ not only the most recent.
181
187
 
182
188
  ### onClose
183
189
 
184
- If it is desirable to wait until the Combobox has been closed, likely indicating
185
- that all selections have been made, it is recommended to use the optional
186
- `onClose` callback which will fire when the Combobox is closed by any means.
187
- This callback provides no arguments.
190
+ If it is desirable to wait until the FilterPicker has been closed, likely
191
+ indicating that all selections have been made, it is recommended to use the
192
+ optional `onClose` callback which will fire when the FilterPicker is closed by
193
+ any means. This callback provides no arguments.
188
194
 
189
195
  While the selections will still be updated in real time, this callback will
190
- allow you to call any potentially expensive operations only once the Combobox
191
- has been closed. As such, it will only have a difference in timing for
192
- multi-select since a single-select selection will immediately close the
193
- Combobox.
196
+ allow you to call any potentially expensive operations only once the
197
+ FilterPicker has been closed. As such, it will only have a difference in timing
198
+ for multi-select since a single-select selection will immediately close the
199
+ FilterPicker.
194
200
 
195
201
  ### Selection display
196
202
 
@@ -202,7 +208,7 @@ keeping the choice of how to display the data flexible.
202
208
 
203
209
  ### Custom onSearch
204
210
 
205
- The `onSearch` prop allows you to hook into the Combobox's search input and
211
+ The `onSearch` prop allows you to hook into the FilterPicker's search input and
206
212
  receive what the user has typed. This callback is debounced by 300ms by default
207
213
  but can be configured with the `onSearchDebounce` prop.
208
214
 
@@ -214,7 +220,7 @@ An example use case here would be using the search term to fire off a request to
214
220
  fetch the appropriate data for that term. It is recommended to use the `loading`
215
221
  prop while fetching & filtering the new data. The loading state will display a
216
222
  static amount of `Glimmer` components. Then updating `loading` once the new data
217
- has been fetched and the `Combobox.Option`s have been replaced with the new
223
+ has been fetched and the `FilterPicker.Option`s have been replaced with the new
218
224
  ones.
219
225
 
220
226
  Note that the component does not cache the initial options when using
@@ -224,8 +230,8 @@ term, the initial options would need to be restored manually.
224
230
 
225
231
  ## Testing
226
232
 
227
- When using Jest to test Combobox implementations, you will need to include this
228
- mock in your test setup:
233
+ When using Jest to test FilterPicker implementations, you will need to include
234
+ this mock in your test setup:
229
235
 
230
236
  ```js
231
237
  const scrollIntoViewMock = jest.fn();
@@ -234,49 +240,49 @@ window.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;
234
240
 
235
241
  ## Developer notes
236
242
 
237
- * The Combobox confines tabbing to within itself while it's open using
243
+ * The FilterPicker confines tabbing to within itself while it's open using
238
244
  [useFocusTrap](/hooks/useFocusTrap)
239
- * Pressing `esc` will close the Combobox and return focus to the activator using
240
- [useRefocusOnActivator](/hooks/useRefocusOnActivator)
245
+ * Pressing `esc` will close the FilterPicker and return focus to the activator
246
+ using [useRefocusOnActivator](/hooks/useRefocusOnActivator)
241
247
 
242
248
 
243
249
  ## Props
244
250
 
245
251
  ### Web
246
252
 
247
- #### Combobox
253
+ #### FilterPicker
248
254
 
249
255
  | Prop | Type | Required | Default | Description |
250
256
  |------|------|----------|---------|-------------|
251
- | `onSelect` | `(selection: ComboboxOptionProps[]) => void` | Yes | — | Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument. |
252
- | `selected` | `ComboboxOptionProps[]` | Yes | — | The selected options of the Combobox. |
257
+ | `onSelect` | `(selection: FilterPickerOptionProps[]) => void` | Yes | — | Callback function invoked upon the selection of an option. Provides the selected option(s) as an argument. |
258
+ | `selected` | `FilterPickerOptionProps[]` | Yes | — | The selected options of the FilterPicker. |
253
259
  | `defaultActivatorRef` | `Ref<HTMLButtonElement>` | No | — | A ref to the default activator button element. |
254
260
  | `label` | `string` | No | — | The Chip heading for the trigger |
255
- | `loading` | `boolean` | No | — | Should the Combobox display the loading state. |
256
- | `multiSelect` | `boolean` | No | `false` | When `true`, `Combobox` will allow for multiple selections |
261
+ | `loading` | `boolean` | No | — | Should the FilterPicker display the loading state. |
262
+ | `multiSelect` | `boolean` | No | `false` | When `true`, `FilterPicker` will allow for multiple selections |
257
263
  | `onClear` | `() => void` | No | — | Callback function invoked upon the clearing of all options. This is only available when `multiSelect` is `true`. |
258
- | `onClose` | `() => void` | No | — | Callback function invoked upon the Combobox menu closing. |
264
+ | `onClose` | `() => void` | No | — | Callback function invoked upon the FilterPicker menu closing. |
259
265
  | `onLoadMore` | `() => void` | No | — | Callback to load more options, this is called when the user scrolls to the bottom of the list. |
260
- | `onSearch` | `(searchValue: string) => void` | No | — | Debounced callback function invoked on Combobox search input change. Receives the current search value as an argument. |
266
+ | `onSearch` | `(searchValue: string) => void` | No | — | Debounced callback function invoked on FilterPicker search input change. Receives the current search value as an argu... |
261
267
  | `onSearchDebounce` | `number` | No | — | The amount of time in ms to debounce the onSearch callback. Defaults to 300ms. |
262
- | `onSelectAll` | `(selection: ComboboxOptionProps[]) => void` | No | — | Callback function invoked upon the selection of all options. Provides the selected option(s) as an argument. This is ... |
268
+ | `onSelectAll` | `(selection: FilterPickerOptionProps[]) => void` | No | — | Callback function invoked upon the selection of all options. Provides the selected option(s) as an argument. This is ... |
263
269
  | `subjectNoun` | `string` | No | — | The encapsulating noun for the content of the combobox. Used in the empty state, and search placeholder. Should be pl... |
264
270
 
265
- #### Combobox.Action
271
+ #### FilterPicker.Action
266
272
 
267
273
  | Prop | Type | Required | Default | Description |
268
274
  |------|------|----------|---------|-------------|
269
- | `label` | `string | ((options: ComboboxActionCallbackOptions) => string)` | Yes | — | The label text of the action. |
270
- | `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>, options: ComboboxActionCallbackOptions) => void` | Yes | — | The function to call when the action is clicked. |
271
- | `keepOpenOnClick` | `boolean` | No | `false` | Keeps the Combobox open when the action is clicked. |
272
- | `visible` | `boolean | ((options: ComboboxActionCallbackOptions) => boolean)` | No | — | Determine if the action is visible for a given item. |
275
+ | `label` | `string | ((options: FilterPickerActionCallbackOptions) => string)` | Yes | — | The label text of the action. |
276
+ | `onClick` | `(event: MouseEvent<HTMLButtonElement, MouseEvent>, options: FilterPickerActionCallbackOptions) => void` | Yes | — | The function to call when the action is clicked. |
277
+ | `keepOpenOnClick` | `boolean` | No | `false` | Keeps the FilterPicker open when the action is clicked. |
278
+ | `visible` | `boolean | ((options: FilterPickerActionCallbackOptions) => boolean)` | No | — | Determine if the action is visible for a given item. |
273
279
 
274
- #### Combobox.Option
280
+ #### FilterPicker.Option
275
281
 
276
282
  | Prop | Type | Required | Default | Description |
277
283
  |------|------|----------|---------|-------------|
278
284
  | `id` | `number | string` | Yes | — | A unique identifier for the option. |
279
- | `label` | `string` | Yes | — | The value to be visually displayed in the Combobox options list. |
280
- | `customRender` | `(option: Pick<ComboboxOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
281
- | `onClick` | `(option: ComboboxOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
285
+ | `label` | `string` | Yes | — | The value to be visually displayed in the FilterPicker options list. |
286
+ | `customRender` | `(option: Pick<FilterPickerOptionProps, "prefix" | "label" | "id"> & { isSelected: boolean; defaultContent: ReactElement<unknown, string | JSXElementConstructor<any>>; }) => ReactNode` | No | — | Advanced: A custom render prop to completely control how this option is rendered. The function receives the option's ... |
287
+ | `onClick` | `(option: FilterPickerOptionProps) => void` | No | — | Callback function invoked when the option is clicked. |
282
288
  | `prefix` | `ReactNode` | No | — | An optional component to be displayed before the label. |
@@ -583,7 +583,7 @@ necessary.
583
583
  | Prop | Type | Required | Default | Description |
584
584
  |------|------|----------|---------|-------------|
585
585
  | `name` | `IconNames` | Yes | — | The icon to show. |
586
- | `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
586
+ | `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
587
587
  | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
588
588
  | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
589
589
  | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
@@ -218,7 +218,7 @@ Minimum menu item height:
218
218
  * To allow the user to choose a value from a predefined list within a form, use
219
219
  a [Select](../Select/Select.md)
220
220
  * To allow the user to search and filter through a list of options, use a
221
- [Combobox](../Combobox/Combobox.md)
221
+ [FilterPicker](../FilterPicker/FilterPicker.md)
222
222
 
223
223
 
224
224
  ## Composable Version
@@ -502,7 +502,7 @@ and should not be used for new implementations.
502
502
  | Prop | Type | Required | Default | Description |
503
503
  |------|------|----------|---------|-------------|
504
504
  | `name` | `IconNames` | Yes | — | The icon to show. |
505
- | `color` | `"task" | "text" | "warning" | "disabled" | "icon" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
505
+ | `color` | `"disabled" | "icon" | "task" | "text" | "warning" | "success" | "blue" | "green" | "yellow" | "red" | "grey" | "white" | "greyBlue" | "lightBlue" | "orange" | "navy" | "interactive" | ... 32 more ... | "brandHighlight"` | No | — | Determines the color of the icon. Some icons have a default system colour like quotes, jobs, and invoices. Others tha... |
506
506
  | `customColor` | `string` | No | — | Sets a custom color for the icon. Can be a rgb() or hex value. |
507
507
  | `size` | `"base" | "large" | "small"` | No | `base` | Changes the size to small or large. |
508
508
  | `testID` | `string` | No | — | Used to locate this view in end-to-end tests |
@@ -2,7 +2,7 @@
2
2
 
3
3
  > **WARNING:** This component has been deprecated and no longer supported. Instead, please
4
4
  > use [Autocomplete](../Autocomplete/Autocomplete.md) with the "mutliple" prop, or
5
- > [Combobox](../Combobox/Combobox.md)
5
+ > [FilterPicker](../FilterPicker/FilterPicker.md)
6
6
 
7
7
  The MultiSelect component gives our users the possibility to select multiple
8
8
  options from a menu.
@@ -44,8 +44,8 @@ Tabs have known accessibility concerns, including:
44
44
  ## Developer notes
45
45
 
46
46
  We discussed the possibility of sharing arrow key navigation logic between the
47
- SegmentedControl and Combobox components due to their similarities. However, the
48
- SegmentedControl does not have specific arrow key logic because arrow key
47
+ SegmentedControl and FilterPicker components due to their similarities. However,
48
+ the SegmentedControl does not have specific arrow key logic because arrow key
49
49
  navigation is implicitly set through the SegmentedControl radio button
50
50
  structure. The options are a type of `radio` and part of a group (`name`
51
51
  attribute) which inherently supports keyboard navigation.
@@ -1,5 +1,4 @@
1
1
  [ActivityIndicator](./ActivityIndicator/ActivityIndicator.md)
2
- [AnimatedSwitcher](./AnimatedSwitcher/AnimatedSwitcher.md)
3
2
  [Animation](./Animation/Animation.md)
4
3
  [AtlantisThemeContext](./AtlantisThemeContext/AtlantisThemeContext.md)
5
4
  [Autocomplete](./Autocomplete/Autocomplete.md)
@@ -16,7 +15,6 @@
16
15
  [choosing-components](./choosing-components/choosing-components.md)
17
16
  [Cluster](./Cluster/Cluster.md)
18
17
  [Colors](./Colors/Colors.md)
19
- [Combobox](./Combobox/Combobox.md)
20
18
  [ConfirmationModal](./ConfirmationModal/ConfirmationModal.md)
21
19
  [Container](./Container/Container.md)
22
20
  [Content](./Content/Content.md)
@@ -39,6 +37,7 @@
39
37
  [empty-states](./empty-states/empty-states.md)
40
38
  [errors](./errors/errors.md)
41
39
  [FeatureSwitch](./FeatureSwitch/FeatureSwitch.md)
40
+ [FilterPicker](./FilterPicker/FilterPicker.md)
42
41
  [Flex](./Flex/Flex.md)
43
42
  [FormatFile](./FormatFile/FormatFile.md)
44
43
  [FormatRelativeDateTime](./FormatRelativeDateTime/FormatRelativeDateTime.md)
@@ -17,10 +17,10 @@ deprecated.
17
17
 
18
18
  ## Deprecated components — do not use
19
19
 
20
- | Deprecated | Replacement | Notes |
21
- | --------------------- | -------------------------------------------------- | ---------------------------------------- |
22
- | `MultiSelect` | `Autocomplete` with `multiple` prop, or `Combobox` | Fully deprecated, no longer supported. |
23
- | `Chips` (dismissible) | `Autocomplete` with `multiple` prop | Dismissible Chips variant is deprecated. |
20
+ | Deprecated | Replacement | Notes |
21
+ | --------------------- | ------------------------------------------------------ | ---------------------------------------- |
22
+ | `MultiSelect` | `Autocomplete` with `multiple` prop, or `FilterPicker` | Fully deprecated, no longer supported. |
23
+ | `Chips` (dismissible) | `Autocomplete` with `multiple` prop | Dismissible Chips variant is deprecated. |
24
24
 
25
25
  ### Deprecated props on still-supported components
26
26
 
@@ -77,7 +77,7 @@ parent reads its compound children to wire up state, accessibility, and styling.
77
77
  | `Modal` v2 | `Modal.Provider`, `Modal.Activator`, `Modal.Content`, `Modal.Header`, `Modal.Actions` | Wrap with `Modal.Provider`. `Modal.Header` and `Modal.Actions` must be **direct children** of `Modal.Content` for sticky behavior to work. Use `Modal.Activator` to control focus return when the trigger element unmounts. |
78
78
  | `Banner` | `Banner.Provider`, `Banner.Content`, `Banner.Icon`, `Banner.DismissButton`, `Banner.Action` | Either the simple `<Banner type="...">children</Banner>` form, or the Provider form: `Banner.Provider` > `Banner.Content` (+ optional `Banner.Icon` / `Banner.Action` / `Banner.DismissButton`). |
79
79
  | `Card` | `Card.Header`, `Card.Body` | `Card` > `Card.Header` + `Card.Body`. The legacy `header` string/element prop still works for simple cases. Use composition for any header that needs richer markup. |
80
- | `Combobox` | `Combobox.Activator`, `Combobox.Option`, `Combobox.Action` | `Combobox` > optional `Combobox.Activator`, one or more `Combobox.Option`, optional `Combobox.Action`. Omitting `Combobox.Activator` renders the default activator. |
80
+ | `FilterPicker` | `FilterPicker.Activator`, `FilterPicker.Option`, `FilterPicker.Action` | `FilterPicker` > optional `FilterPicker.Activator`, one or more `FilterPicker.Option`, optional `FilterPicker.Action`. Omitting `FilterPicker.Activator` renders the default activator. |
81
81
  | `DataTable` | `DataTable.Container`, `DataTable.Table`, `DataTable.Header`, `DataTable.HeaderCell`, `DataTable.SortableHeader`, `DataTable.Body`, `DataTable.Row`, `DataTable.Cell`, `DataTable.RowActions`, `DataTable.Actions`, `DataTable.Footer`, `DataTable.Pagination`, `DataTable.PaginationButton` | `DataTable.Footer` is a sibling of `DataTable.Body`, not a child. Place pagination outside the table (not inside the footer). For `layout="fixed"`, pass explicit widths via `style={{ width: "..." }}` on each `HeaderCell`. |
82
82
  | `Menu` (web composable) | `Menu.Trigger`, `Menu.Content`, `Menu.Section`, `Menu.Header`, `Menu.HeaderLabel`, `Menu.Item`, `Menu.ItemIcon`, `Menu.ItemLabel`, `Menu.Separator` | `Menu` > `Menu.Trigger` + `Menu.Content` containing `Menu.Item`s (optionally grouped in `Menu.Section`s). Each `Menu.Item` must include `textValue` for type-ahead and screen readers. |
83
83
  | `Page` | `Page.Header`, `Page.HeaderContent`, `Page.TitleBar`, `Page.Title`, `Page.Subtitle`, `Page.Intro`, `Page.Actions`, `Page.ActionPrimary`, `Page.ActionSecondary`, `Page.ActionMenu`, `Page.PrimaryButton`, `Page.SecondaryButton`, `Page.Menu`, `Page.Body` | Composable `Page` API: `Page` > `Page.Header` (containing `Page.HeaderContent` with `Page.TitleBar` > `Page.Title` / `Page.Subtitle`, and `Page.Actions` with `Page.ActionPrimary` / `Page.ActionSecondary` / `Page.ActionMenu`) + `Page.Body`. The legacy props-based API (`title`, `subtitle`, `intro`, etc.) still works. |