0
# Data Display Components
1

2
Advanced components for displaying, sorting, and managing large datasets with selection, bulk operations, and comprehensive data presentation features. These components are optimized for enterprise-level data management and provide consistent patterns for resource handling.
3

4
## Capabilities
5

6
### DataTable
7

8
Sortable data table component for displaying structured data with column headers, row data, and sorting functionality.
9

10
```typescript { .api }
11
/**
12
 * Sortable data table for structured data display
13
 * @param columnContentTypes - Content types for each column
14
 * @param headings - Column header content
15
 * @param rows - Table row data
16
 * @param sortable - Sortable columns configuration
17
 * @returns JSX element with data table
18
 */
19
function DataTable(props: DataTableProps): JSX.Element;
20

21
interface DataTableProps {
22
  /** Content types for column alignment and formatting */
23
  columnContentTypes: ColumnContentType[];
24
  /** Column header content */
25
  headings: React.ReactNode[];
26
  /** Table row data */
27
  rows: TableRow[];
28
  /** Sortable columns (boolean for each column) */
29
  sortable?: boolean[];
30
  /** Default sort direction */
31
  defaultSortDirection?: SortDirection;
32
  /** Initial sort column index */
33
  initialSortColumnIndex?: number;
34
  /** Sort change handler */
35
  onSort?: (headingIndex: number, direction: SortDirection) => void;
36
  /** Footer content */
37
  footerContent?: TableData;
38
  /** Truncate cell content */
39
  truncate?: boolean;
40
  /** Vertical alignment of cell content */
41
  verticalAlign?: 'top' | 'bottom' | 'middle' | 'baseline';
42
  /** Show totals row */
43
  totals?: TableData[];
44
  /** Show totals in footer */
45
  totalsInFooter?: boolean;
46
  /** Loading state */
47
  loading?: boolean;
48
  /** Empty state content */
49
  emptyState?: React.ReactNode;
50
  /** Increase density */
51
  increasedTableDensity?: boolean;
52
  /** Has zebra striping */
53
  hasZebraStriping?: boolean;
54
}
55

56
/** Column content type for alignment and formatting */
57
type ColumnContentType = 'text' | 'numeric' | 'date';
58

59
/** Table row data array */
60
type TableRow = TableData[];
61

62
/** Individual table cell data */
63
type TableData = string | number | React.ReactNode;
64

65
/** Sort direction enum */
66
enum SortDirection {
67
  ascending = 'ascending',
68
  descending = 'descending',
69
}
70
```
71

72
**Usage Example:**
73

74
```typescript
75
import React, { useState } from 'react';
76
import { DataTable, Card, SortDirection } from '@shopify/polaris';
77

78
function SalesTable() {
79
  const [sortedRows, setSortedRows] = useState([
80
    ['Emerald Silk Gown', '$875.00', 124689, 140, '$122,500.00'],
81
    ['Mauve Cashmere Scarf', '$230.00', 124533, 83, '$19,090.00'],
82
    ['Navy Merino Wool Blazer', '$445.00', 124518, 32, '$14,240.00'],
83
  ]);
84

85
  const columnContentTypes: ColumnContentType[] = [
86
    'text',
87
    'numeric',
88
    'numeric',
89
    'numeric',
90
    'numeric',
91
  ];
92

93
  const headings = [
94
    'Product',
95
    'Price',
96
    'SKU Number',
97
    'Net quantity',
98
    'Net sales',
99
  ];
100

101
  const handleSort = (index: number, direction: SortDirection) => {
102
    const newRows = [...sortedRows].sort((rowA, rowB) => {
103
      const a = rowA[index];
104
      const b = rowB[index];
105
      
106
      if (typeof a === 'string' && typeof b === 'string') {
107
        return direction === SortDirection.descending 
108
          ? b.localeCompare(a) 
109
          : a.localeCompare(b);
110
      }
111
      
112
      return direction === SortDirection.descending 
113
        ? (b as number) - (a as number)
114
        : (a as number) - (b as number);
115
    });
116
    
117
    setSortedRows(newRows);
118
  };
119

120
  return (
121
    <Card>
122
      <DataTable
123
        columnContentTypes={columnContentTypes}
124
        headings={headings}
125
        rows={sortedRows}
126
        sortable={[true, true, false, true, true]}
127
        defaultSortDirection={SortDirection.descending}
128
        initialSortColumnIndex={4}
129
        onSort={handleSort}
130
      />
131
    </Card>
132
  );
133
}
134
```
135

136
### IndexTable
137

138
Enhanced data table component specifically designed for resource lists with selection, bulk actions, and advanced data management features.
139

140
```typescript { .api }
141
/**
142
 * Enhanced data table for resource management
143
 * @param resourceName - Resource naming configuration
144
 * @param selectedItemsCount - Count of selected items
145
 * @param onSelectionChange - Selection change handler
146
 * @param bulkActions - Available bulk actions
147
 * @returns JSX element with index table
148
 */
149
function IndexTable(props: IndexTableProps): JSX.Element;
150

151
interface IndexTableProps extends DataTableProps {
152
  /** Resource naming for accessibility and bulk actions */
153
  resourceName: ResourceName;
154
  /** Number of selected items or 'All' */
155
  selectedItemsCount: number | 'All';
156
  /** Selection change handler */
157
  onSelectionChange: (
158
    selectionType: SelectionType,
159
    isSelecting: boolean,
160
    selection?: string | string[]
161
  ) => void;
162
  /** Available bulk actions */
163
  bulkActions?: BulkAction[];
164
  /** Promoted bulk actions */
165
  promotedBulkActions?: BulkAction[];
166
  /** Loading state */
167
  loading?: boolean;
168
  /** Last column sticky */
169
  lastColumnSticky?: boolean;
170
  /** Selection type */
171
  selectionType?: IndexTableSelectionType;
172
  /** Condensed layout */
173
  condensed?: boolean;
174
  /** Flush left content */
175
  flushLeft?: boolean;
176
}
177

178
/**
179
 * Individual index table row
180
 * @param children - Row cell content
181
 * @param id - Row identifier for selection
182
 * @param selected - Row selection state
183
 * @param position - Row position in table
184
 * @returns JSX element with table row
185
 */
186
function IndexTableRow(props: IndexTableRowProps): JSX.Element;
187

188
interface IndexTableRowProps {
189
  /** Row cell content */
190
  children: React.ReactNode;
191
  /** Unique row identifier */
192
  id: string;
193
  /** Row selection state */
194
  selected?: boolean;
195
  /** Row position for accessibility */
196
  position: number;
197
  /** Disabled selection */
198
  disabled?: boolean;
199
  /** Row click handler */
200
  onClick?: () => void;
201
  /** Row tone/status */
202
  tone?: 'default' | 'subdued' | 'success' | 'warning' | 'critical';
203
}
204

205
/**
206
 * Index table cell component
207
 * @param children - Cell content
208
 * @param className - Additional CSS classes
209
 * @returns JSX element with table cell
210
 */
211
function IndexTableCell(props: IndexTableCellProps): JSX.Element;
212

213
interface IndexTableCellProps {
214
  /** Cell content */
215
  children?: React.ReactNode;
216
  /** Additional CSS class names */
217
  className?: string;
218
  /** Flush content left */
219
  flush?: boolean;
220
}
221

222
interface ResourceName {
223
  /** Singular resource name */
224
  singular: string;
225
  /** Plural resource name */
226
  plural: string;
227
}
228

229
interface BulkAction extends Action {
230
  /** Action type */
231
  type?: 'default' | 'destructive';
232
  /** Action icon */
233
  icon?: IconSource;
234
}
235

236
enum IndexTableSelectionType {
237
  All = 'all',
238
  Page = 'page',
239
  Multiple = 'multiple',
240
  Single = 'single',
241
}
242

243
enum SelectionType {
244
  All = 'all',
245
  Page = 'page',
246
  Range = 'range',
247
  Single = 'single',
248
}
249
```
250

251
### ResourceList
252

253
List component for displaying resources with filtering, sorting, selection, and item-level actions.
254

255
```typescript { .api }
256
/**
257
 * List of resources with selection and filtering
258
 * @param resourceName - Resource naming configuration
259
 * @param items - Resource items to display
260
 * @param renderItem - Item rendering function
261
 * @returns JSX element with resource list
262
 */
263
function ResourceList<T>(props: ResourceListProps<T>): JSX.Element;
264

265
interface ResourceListProps<T> {
266
  /** Resource naming */
267
  resourceName: ResourceName;
268
  /** Resource items array */
269
  items: T[];
270
  /** Item rendering function */
271
  renderItem: (item: T, id: string, index: number) => React.ReactNode;
272
  /** Selected item IDs */
273
  selectedItems?: string[];
274
  /** Selection change handler */
275
  onSelectionChange?: (selectedIds: string[]) => void;
276
  /** Bulk actions for selected items */
277
  bulkActions?: BulkAction[];
278
  /** Promoted bulk actions */
279
  promotedBulkActions?: BulkAction[];
280
  /** Loading state */
281
  loading?: boolean;
282
  /** Show header */
283
  showHeader?: boolean;
284
  /** Total item count */
285
  totalItemsCount?: number;
286
  /** Sort options */
287
  sortOptions?: SortOption[];
288
  /** Current sort value */
289
  sortValue?: string;
290
  /** Sort change handler */
291
  onSortChange?: (selected: string) => void;
292
  /** Filter control */
293
  filterControl?: React.ReactNode;
294
  /** Alternate tool */
295
  alternateTool?: React.ReactNode;
296
  /** Empty state */
297
  emptyState?: React.ReactNode;
298
  /** Item ID resolver */
299
  idForItem?: (item: T, index: number) => string;
300
  /** Resolve item ID callback */
301
  resolveItemId?: (item: T) => string;
302
}
303

304
interface SortOption {
305
  /** Option label */
306
  label: string;
307
  /** Option value */
308
  value: string;
309
  /** Sort direction */
310
  directionLabel: string;
311
}
312
```
313

314
### ResourceItem
315

316
Individual resource item component for display within ResourceList with actions and media.
317

318
```typescript { .api }
319
/**
320
 * Individual resource item with actions and media
321
 * @param id - Resource item ID
322
 * @param children - Item content
323
 * @param url - Item navigation URL
324
 * @param media - Item media content
325
 * @returns JSX element with resource item
326
 */
327
function ResourceItem(props: ResourceItemProps): JSX.Element;
328

329
interface ResourceItemProps {
330
  /** Unique resource identifier */
331
  id: string;
332
  /** Item content */
333
  children?: React.ReactNode;
334
  /** Navigation URL */
335
  url?: string;
336
  /** Media content (avatar, thumbnail, etc.) */
337
  media?: React.ReactNode;
338
  /** Shortcut actions */
339
  shortcutActions?: DisableableAction[];
340
  /** Persistent actions */
341
  persistActions?: boolean;
342
  /** Item accessibility label */
343
  accessibilityLabel?: string;
344
  /** Item name */
345
  name?: string;
346
  /** onClick handler */
347
  onClick?: (id?: string) => void;
348
  /** Vertical alignment */
349
  verticalAlignment?: 'leading' | 'trailing' | 'center' | 'fill' | 'baseline';
350
}
351
```
352

353
### List
354

355
Simple list component for displaying content items with consistent styling and spacing.
356

357
```typescript { .api }
358
/**
359
 * Simple content list component
360
 * @param children - List items
361
 * @param type - List type styling
362
 * @returns JSX element with list
363
 */
364
function List(props: ListProps): JSX.Element;
365

366
interface ListProps {
367
  /** List items */
368
  children?: React.ReactNode;
369
  /** List type */
370
  type?: 'bullet' | 'number';
371
  /** Gap between items */
372
  gap?: 'extraTight' | 'tight' | 'loose';
373
}
374

375
/**
376
 * Individual list item
377
 * @param children - Item content
378
 * @returns JSX element with list item
379
 */
380
function ListItem(props: ListItemProps): JSX.Element;
381

382
interface ListItemProps {
383
  /** Item content */
384
  children?: React.ReactNode;
385
}
386
```
387

388
### DescriptionList
389

390
Key-value description lists for displaying structured information with consistent formatting.
391

392
```typescript { .api }
393
/**
394
 * Key-value description list
395
 * @param items - Description items
396
 * @param spacing - Spacing between items
397
 * @returns JSX element with description list
398
 */
399
function DescriptionList(props: DescriptionListProps): JSX.Element;
400

401
interface DescriptionListProps {
402
  /** Description items */
403
  items: DescriptionListItem[];
404
  /** Spacing between items */
405
  spacing?: 'tight' | 'loose';
406
}
407

408
interface DescriptionListItem {
409
  /** Item term/key */
410
  term: React.ReactNode;
411
  /** Item description/value */
412
  description: React.ReactNode;
413
}
414
```
415

416
## Resource Management Utilities
417

418
```typescript { .api }
419
/** Constant for selecting all items in IndexTable */
420
const INDEX_TABLE_SELECT_ALL_ITEMS = 'SELECT_ALL_ITEMS';
421

422
/**
423
 * Hook for managing resource selection state
424
 * @param resources - Array of resources
425
 * @param options - Configuration options
426
 * @returns Resource state management object
427
 */
428
function useIndexResourceState<T>(
429
  resources: T[],
430
  options?: IndexResourceStateOptions<T>
431
): IndexResourceState<T>;
432

433
interface IndexResourceStateOptions<T> {
434
  /** Resource ID resolver */
435
  resourceIDResolver?: (resource: T) => string;
436
  /** Initial selected resources */
437
  resourceFilter?: (resource: T) => boolean;
438
}
439

440
interface IndexResourceState<T> {
441
  /** Currently selected resource IDs */
442
  selectedResources: string[];
443
  /** All resources selected */
444
  allResourcesSelected: boolean;
445
  /** Handle resource selection change */
446
  handleSelectionChange: (
447
    selectionType: SelectionType,
448
    isSelecting: boolean,
449
    selection?: string | string[]
450
  ) => void;
451
  /** Clear all selection */
452
  clearSelection: () => void;
453
  /** Remove selected resources */
454
  removeSelectedResources: (removeResources: string[]) => void;
455
}
456
```
457

458
## Shared Data Display Types
459

460
```typescript { .api }
461
interface DisableableAction extends Action {
462
  /** Disabled state */
463
  disabled?: boolean;
464
}
465

466
type IconSource = React.ComponentType<any> | 'placeholder' | string;
467

468
interface PaginationDescriptor {
469
  /** Has previous page */
470
  hasPrevious?: boolean;
471
  /** Previous page handler */
472
  onPrevious?: () => void;
473
  /** Has next page */
474
  hasNext?: boolean;
475
  /** Next page handler */
476
  onNext?: () => void;
477
  /** Pagination label */
478
  label: string;
479
}
480
```
481

482
### EmptySearchResult
483

484
Specialized empty state component for search results that provides clear messaging and helpful actions when no search results are found.
485

486
```typescript { .api }
487
/**
488
 * Empty state component for search results
489
 * @param title - Main message for empty search
490
 * @param description - Additional context about the empty search
491
 * @param withIllustration - Whether to show search illustration
492
 * @returns JSX element with empty search result display
493
 */
494
function EmptySearchResult(props: EmptySearchResultProps): JSX.Element;
495

496
interface EmptySearchResultProps {
497
  /** Give the empty state a title */
498
  title: string;
499
  /** Give the empty state a description */
500
  description?: string;
501
  /** Whether or not to show the border */
502
  withIllustration?: boolean;
503
}
504
```
505

506
### EmptyState
507

508
General purpose empty state component for when content is unavailable, with customizable illustration, title, and action buttons.
509

510
```typescript { .api }
511
/**
512
 * Empty state component for missing content
513
 * @param heading - Main heading for empty state
514
 * @param children - Content and actions for empty state
515
 * @param image - Custom image or illustration
516
 * @returns JSX element with empty state display
517
 */
518
function EmptyState(props: EmptyStateProps): JSX.Element;
519

520
interface EmptyStateProps {
521
  /** The empty state heading */
522
  heading?: string;
523
  /** The path to the image to display */
524
  image?: string;
525
  /** Elements to display inside empty state */
526
  children?: React.ReactNode;
527
  /** Action for empty state */
528
  action?: ComplexAction;
529
  /** Secondary action for empty state */
530
  secondaryAction?: ComplexAction;
531
  /** Footer help text for empty state */
532
  footerContent?: React.ReactNode;
533
  /** Whether or not to limit the image to the size of its container. */
534
  imageContained?: boolean;
535
  /** Whether or not to show the border */
536
  withIllustration?: boolean;
537
}
538
```
539

540
### ExceptionList
541

542
Component for displaying a list of exceptions, warnings, or errors with consistent formatting and appropriate visual hierarchy.
543

544
```typescript { .api }
545
/**
546
 * List component for displaying exceptions and errors
547
 * @param items - Array of exception items to display
548
 * @returns JSX element with formatted exception list
549
 */
550
function ExceptionList(props: ExceptionListProps): JSX.Element;
551

552
interface ExceptionListProps {
553
  /** Collection of exceptions to render */
554
  items: {
555
    /** Icon to display with the item */
556
    icon?: IconSource;
557
    /** Item title */
558
    title?: string;
559
    /** Item description */
560
    description: string;
561
    /** Truncate content */
562
    truncate?: boolean;
563
  }[];
564
}
565
```
566

567
### Card
568

569
Container component that groups related information and actions with consistent padding, borders, and visual hierarchy.
570

571
```typescript { .api }
572
/**
573
 * Container component for grouping related content
574
 * @param children - Content to display in the card
575
 * @param title - Card title
576
 * @param sectioned - Whether to add default padding to content
577
 * @returns JSX element with card container
578
 */
579
function Card(props: CardProps): JSX.Element;
580

581
interface CardProps {
582
  /** Title content for the card */
583
  title?: React.ReactNode;
584
  /** Card header actions */
585
  actions?: ActionListItemDescriptor[];
586
  /** Auto wrap content in padding */
587
  sectioned?: boolean;
588
  /** Card content */
589
  children?: React.ReactNode;
590
  /** A less prominent card */
591
  subdued?: boolean;
592
  /** Size of the card */
593
  size?: 'medium' | 'small';
594
  /** Background color of the card */
595
  background?: string;
596
  /** Padding around the card */
597
  padding?: SpaceScale;
598
  /** Border radius of the card */
599
  borderRadius?: BorderRadiusScale;
600
}
601
```
602

603
### CalloutCard
604

605
Specialized card component for highlighting important information, announcements, or calls-to-action with visual emphasis.
606

607
```typescript { .api }
608
/**
609
 * Card component for important announcements and calls to action
610
 * @param title - Card title
611
 * @param children - Card content
612
 * @param primaryAction - Main action button
613
 * @returns JSX element with callout card
614
 */
615
function CalloutCard(props: CalloutCardProps): JSX.Element;
616

617
interface CalloutCardProps {
618
  /** The content to display inside the callout card. */
619
  children: React.ReactNode;
620
  /** The callout card's title. */
621
  title: React.ReactNode;
622
  /** URL to the card illustration. */
623
  illustration?: string;
624
  /** Primary action for the card */
625
  primaryAction?: ComplexAction;
626
  /** Secondary action for the card */
627
  secondaryAction?: ComplexAction;
628
  /** Callback when the dismiss button is clicked */
629
  onDismiss?(): void;
630
}
631
```
632

633
### Connected
634

635
Layout component that visually connects related form fields and controls, typically used for input groups and compound controls.
636

637
```typescript { .api }
638
/**
639
 * Layout component for visually connecting related form elements
640
 * @param children - Form elements to connect
641
 * @param left - Content to display on the left
642
 * @param right - Content to display on the right
643
 * @returns JSX element with connected form layout
644
 */
645
function Connected(props: ConnectedProps): JSX.Element;
646

647
interface ConnectedProps {
648
  /** Components to connect together */
649
  children: React.ReactNode;
650
  /** Content to display to the left of the connected children */
651
  left?: React.ReactNode;
652
  /** Content to display to the right of the connected children */
653
  right?: React.ReactNode;
654
}
655
```
656

657
### Collapsible
658

659
Expandable content container that shows/hides content with smooth animations, commonly used for progressive disclosure.
660

661
```typescript { .api }
662
/**
663
 * Expandable content container with smooth animations
664
 * @param open - Whether content is expanded
665
 * @param children - Content to show/hide
666
 * @param onToggle - Expand/collapse handler
667
 * @returns JSX element with collapsible content
668
 */
669
function Collapsible(props: CollapsibleProps): JSX.Element;
670

671
interface CollapsibleProps {
672
  /** Assign a unique ID to the collapsible's content */
673
  id: string;
674
  /** Toggle whether the collapsible is expanded or not */
675
  open: boolean;
676
  /** The content to display inside the collapsible */
677
  children: React.ReactNode;
678
  /** Callback when the collapsible is toggled */
679
  onToggle?(): void;
680
  /** Transition timing function for the collapsible */
681
  transition?: {
682
    duration?: string;
683
    timingFunction?: string;
684
  };
685
}
686
```
687

688
### LegacyCard
689

690
Legacy card component for backward compatibility with older card implementations and styling.
691

692
```typescript { .api }
693
/**
694
 * Legacy card component for backward compatibility
695
 * @param title - Card title
696
 * @param sectioned - Whether to add section styling
697
 * @param children - Card content
698
 * @returns JSX element with legacy card styling
699
 */
700
function LegacyCard(props: LegacyCardProps): JSX.Element;
701

702
interface LegacyCardProps {
703
  /** The title content for the card */
704
  title?: React.ReactNode;
705
  /** Card header actions */
706
  actions?: ComplexAction[];
707
  /** Auto wrap content in section */
708
  sectioned?: boolean;
709
  /** Card content */
710
  children?: React.ReactNode;
711
  /** A less prominent card */
712
  subdued?: boolean;
713
  /** Footer content for the card */
714
  footerActionAlignment?: 'right' | 'left';
715
  /** Primary footer action */
716
  primaryFooterAction?: ComplexAction;
717
  /** Secondary footer actions */
718
  secondaryFooterActions?: ComplexAction[];
719
}
720

721
interface LegacyCardSectionProps {
722
  /** Section title */
723
  title?: React.ReactNode;
724
  /** Section content */
725
  children?: React.ReactNode;
726
  /** Whether the section is subdued */
727
  subdued?: boolean;
728
  /** Whether the section is flush with card edges */
729
  flush?: boolean;
730
  /** Whether the section fills available height */
731
  fullHeight?: boolean;
732
}
733

734
interface LegacyCardHeaderProps {
735
  /** Header actions */
736
  actions?: ComplexAction[];
737
  /** Header title */
738
  title?: React.ReactNode;
739
}
740

741
interface LegacyCardSubsectionProps {
742
  /** Subsection content */
743
  children?: React.ReactNode;
744
}
745
```
746

747
### LegacyFilters
748

749
Legacy filtering component for backward compatibility with older filter implementations.
750

751
```typescript { .api }
752
/**
753
 * Legacy filters component for backward compatibility
754
 * @param filters - Available filter options
755
 * @param appliedFilters - Currently applied filters
756
 * @param onFiltersChange - Filter change handler
757
 * @returns JSX element with legacy filtering interface
758
 */
759
function LegacyFilters(props: LegacyFiltersProps): JSX.Element;
760

761
interface LegacyFiltersProps {
762
  /** Available filters */
763
  filters?: FilterInterface[];
764
  /** Applied filters */
765
  appliedFilters?: AppliedFilterInterface[];
766
  /** Query value */
767
  queryValue?: string;
768
  /** Query placeholder */
769
  queryPlaceholder?: string;
770
  /** Whether query field is focused */
771
  focused?: boolean;
772
  /** Additional search field filters */
773
  searchFieldFilters?: React.ReactNode;
774
  /** Disable query field */
775
  disabled?: boolean;
776
  /** Hide query field */
777
  hideQueryField?: boolean;
778
  /** Callback when query changes */
779
  onQueryChange?(queryValue: string): void;
780
  /** Callback when query is cleared */
781
  onQueryClear?(): void;
782
  /** Callback when query is focused */
783
  onQueryFocus?(): void;
784
  /** Callback when query is blurred */
785
  onQueryBlur?(): void;
786
  /** Callback when filters change */
787
  onFiltersChange?(appliedFilters: AppliedFilterInterface[]): void;
788
  /** Callback when all filters are cleared */
789
  onClearAll?(): void;
790
}
791
```
792

793
### AlphaPicker (Picker)
794

795
Alpha/experimental picker component for selecting from a list of options with advanced features.
796

797
```typescript { .api }
798
/**
799
 * Alpha picker component for advanced option selection
800
 * @param items - Available picker items
801
 * @param selected - Currently selected items
802
 * @param onSelect - Selection change handler
803
 * @returns JSX element with picker interface
804
 */
805
function Picker(props: PickerProps): JSX.Element;
806

807
interface PickerProps {
808
  /** Items to choose from */
809
  items: PickerItem[];
810
  /** Currently selected items */
811
  selected: string[];
812
  /** Allow multiple selection */
813
  allowMultiple?: boolean;
814
  /** Callback when selection changes */
815
  onSelect(selected: string[]): void;
816
  /** Whether picker is disabled */
817
  disabled?: boolean;
818
  /** Loading state */
819
  loading?: boolean;
820
  /** Error message */
821
  error?: string;
822
  /** Help text */
823
  helpText?: string;
824
}
825

826
interface PickerItem {
827
  /** Unique identifier */
828
  value: string;
829
  /** Display label */
830
  label: string;
831
  /** Whether item is disabled */
832
  disabled?: boolean;
833
  /** Item description */
834
  description?: string;
835
}
836
```
837

838
### UnstableBulkActions (BulkActions)
839

840
Experimental bulk actions component for managing operations on multiple selected items.
841

842
```typescript { .api }
843
/**
844
 * Experimental bulk actions for multiple item operations
845
 * @param actions - Available bulk actions
846
 * @param selected - Number of selected items
847
 * @param onAction - Action handler
848
 * @returns JSX element with bulk action interface
849
 */
850
function BulkActions(props: BulkActionsProps): JSX.Element;
851

852
interface BulkActionsProps {
853
  /** Label for the bulk actions */
854
  label?: string;
855
  /** Actions available for bulk operations */
856
  actions?: ActionListItemDescriptor[];
857
  /** Promotional bulk actions */
858
  promotedActions?: ActionListItemDescriptor[];
859
  /** Callback when all items are selected */
860
  onToggleAll?(): void;
861
  /** Whether all items are selected */
862
  selectMode?: boolean;
863
  /** Whether to show the select mode toggle */
864
  onSelectModeToggle?(): void;
865
  /** Accessibility label for selected items */
866
  accessibilityLabel?: string;
867
}
868
```