polaris-react-extended 13.10.5 → 13.10.8

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.
@@ -60,11 +60,11 @@ function Badge({
60
60
  className: Badge_module.default.Icon
61
61
  }, /*#__PURE__*/React.createElement(Icon.Icon, {
62
62
  source: icon
63
- })), children && /*#__PURE__*/React.createElement(Text.Text, {
63
+ })), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text.Text, {
64
64
  as: "span",
65
65
  variant: "bodySm",
66
66
  fontWeight: tone === 'new' ? 'medium' : undefined
67
- }, children));
67
+ }, children) : children);
68
68
  }
69
69
  Badge.Pip = Pip.Pip;
70
70
 
@@ -49,6 +49,16 @@ function IndexTableBase({
49
49
  sortToggleLabels,
50
50
  hasZebraStriping,
51
51
  pagination,
52
+ expandable,
53
+ expandedRowIds,
54
+ defaultExpandedRowIds,
55
+ onExpandedChange,
56
+ getRowChildren,
57
+ isRowExpandable,
58
+ expandIconCollapsed,
59
+ expandIconExpanded,
60
+ expandButtonClassName,
61
+ expandButtonStyle,
52
62
  rowClassName,
53
63
  rowStyle,
54
64
  cellClassName,
@@ -90,6 +100,38 @@ function IndexTableBase({
90
100
  const [tableInitialized, setTableInitialized] = React.useState(false);
91
101
  const [stickyWrapper, setStickyWrapper] = React.useState(null);
92
102
  const [hideScrollContainer, setHideScrollContainer] = React.useState(true);
103
+
104
+ // Expansion state
105
+ const [expandedRows, setExpandedRows] = React.useState(() => {
106
+ if (expandedRowIds) {
107
+ return new Set(expandedRowIds);
108
+ }
109
+ if (defaultExpandedRowIds) {
110
+ return new Set(defaultExpandedRowIds);
111
+ }
112
+ return new Set();
113
+ });
114
+
115
+ // Update expanded state when prop changes
116
+ React.useEffect(() => {
117
+ if (expandedRowIds !== undefined) {
118
+ setExpandedRows(new Set(expandedRowIds));
119
+ }
120
+ }, [expandedRowIds]);
121
+
122
+ // Toggle expansion
123
+ const toggleRowExpansion = React.useCallback(rowId => {
124
+ setExpandedRows(prev => {
125
+ const newExpanded = new Set(prev);
126
+ if (newExpanded.has(rowId)) {
127
+ newExpanded.delete(rowId);
128
+ } else {
129
+ newExpanded.add(rowId);
130
+ }
131
+ onExpandedChange?.(Array.from(newExpanded));
132
+ return newExpanded;
133
+ });
134
+ }, [onExpandedChange]);
93
135
  const tableHeadings = React.useRef([]);
94
136
  const stickyTableHeadings = React.useRef([]);
95
137
  const stickyHeaderWrapperElement = React.useRef(null);
@@ -345,12 +387,56 @@ function IndexTableBase({
345
387
  event: "resize",
346
388
  handler: handleResize
347
389
  }), stickyHeaderMarkup);
390
+
391
+ // Process children to insert child rows for expanded rows
392
+ const processedChildren = React.useMemo(() => {
393
+ if (!expandable || !getRowChildren) {
394
+ return children;
395
+ }
396
+ const result = [];
397
+ let position = 0;
398
+ React.Children.forEach(children, child => {
399
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === Row.Row) {
400
+ const rowId = child.props.id;
401
+ const isExpanded = expandedRows.has(rowId);
402
+
403
+ // Clone the row with updated position
404
+ const updatedRow = /*#__PURE__*/React.cloneElement(child, {
405
+ ...child.props,
406
+ position
407
+ });
408
+ result.push(updatedRow);
409
+ position++;
410
+
411
+ // Add child rows if expanded
412
+ if (isExpanded) {
413
+ const childRows = getRowChildren(updatedRow);
414
+ if (childRows && childRows.length > 0) {
415
+ childRows.forEach((childRow, index) => {
416
+ if (/*#__PURE__*/React.isValidElement(childRow)) {
417
+ result.push(/*#__PURE__*/React.cloneElement(childRow, {
418
+ ...childRow.props,
419
+ key: `${rowId}-child-${index}`,
420
+ position,
421
+ rowType: 'child'
422
+ }));
423
+ position++;
424
+ }
425
+ });
426
+ }
427
+ }
428
+ } else {
429
+ result.push(child);
430
+ }
431
+ });
432
+ return result;
433
+ }, [children, expandable, expandedRows, getRowChildren]);
348
434
  const condensedClassNames = css.classNames(IndexTable_module.default.CondensedList, hasZebraStriping && IndexTable_module.default.ZebraStriping);
349
435
  const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
350
436
  "data-selectmode": Boolean(selectMode),
351
437
  className: condensedClassNames,
352
438
  ref: condensedListElement
353
- }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer.ScrollContainer, {
439
+ }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer.ScrollContainer, {
354
440
  scrollableContainerRef: scrollableContainerElement,
355
441
  onScroll: handleScrollContainerScroll
356
442
  }, /*#__PURE__*/React.createElement("table", {
@@ -360,15 +446,10 @@ function IndexTableBase({
360
446
  className: IndexTable_module.default.HeadingRow
361
447
  }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
362
448
  ref: tableBodyRef
363
- }, children))));
449
+ }, processedChildren))));
364
450
  const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
365
451
  className: IndexTable_module.default.EmptySearchResultWrapper
366
452
  }, emptyStateMarkup);
367
- const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
368
- className: IndexTable_module.default.PaginationWrapper
369
- }, /*#__PURE__*/React.createElement(Pagination.Pagination, Object.assign({
370
- type: "table"
371
- }, pagination))) : null;
372
453
  const customizationContextValue = {
373
454
  rowClassName,
374
455
  rowStyle,
@@ -377,8 +458,22 @@ function IndexTableBase({
377
458
  checkboxClassName,
378
459
  checkboxStyle,
379
460
  checkboxWrapperClassName,
380
- checkboxWrapperStyle
461
+ checkboxWrapperStyle,
462
+ expandable,
463
+ expandedRowIds: expandedRows,
464
+ toggleRowExpansion,
465
+ isRowExpandable,
466
+ getRowChildren,
467
+ expandIconCollapsed,
468
+ expandIconExpanded,
469
+ expandButtonClassName,
470
+ expandButtonStyle
381
471
  };
472
+ const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
473
+ className: IndexTable_module.default.PaginationWrapper
474
+ }, /*#__PURE__*/React.createElement(Pagination.Pagination, Object.assign({
475
+ type: "table"
476
+ }, pagination))) : null;
382
477
  return /*#__PURE__*/React.createElement(context.IndexTableCustomizationContext.Provider, {
383
478
  value: customizationContextValue
384
479
  }, /*#__PURE__*/React.createElement("div", {
@@ -6,8 +6,8 @@ var css = require('../../../../utilities/css.js');
6
6
  var IndexTable_module = require('../../IndexTable.css.js');
7
7
  var hooks = require('../../../../utilities/index-provider/hooks.js');
8
8
  var types = require('../../../../utilities/index-provider/types.js');
9
- var context = require('../../../../utilities/index-table/context.js');
10
9
  var Cell = require('../Cell/Cell.js');
10
+ var context = require('../../../../utilities/index-table/context.js');
11
11
  var Checkbox = require('../Checkbox/Checkbox.js');
12
12
 
13
13
  const Row = /*#__PURE__*/React.memo(function Row({
@@ -38,7 +38,15 @@ const Row = /*#__PURE__*/React.memo(function Row({
38
38
  } = useToggle.useToggle(false);
39
39
  const {
40
40
  rowClassName: customRowClassName,
41
- rowStyle: customRowStyle
41
+ rowStyle: customRowStyle,
42
+ expandable: tableExpandable,
43
+ expandedRowIds,
44
+ toggleRowExpansion,
45
+ isRowExpandable: tableIsRowExpandable,
46
+ expandIconCollapsed,
47
+ expandIconExpanded,
48
+ expandButtonClassName,
49
+ expandButtonStyle
42
50
  } = React.useContext(context.IndexTableCustomizationContext);
43
51
  const handleInteraction = React.useCallback(event => {
44
52
  event.stopPropagation();
@@ -108,6 +116,26 @@ const Row = /*#__PURE__*/React.memo(function Row({
108
116
  const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell.Cell, null) : /*#__PURE__*/React.createElement(Checkbox.Checkbox, {
109
117
  accessibilityLabel: accessibilityLabel
110
118
  });
119
+ const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
120
+ const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
121
+ const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell.Cell, null, /*#__PURE__*/React.createElement("button", {
122
+ onClick: e => {
123
+ e.stopPropagation();
124
+ toggleRowExpansion?.(id);
125
+ },
126
+ className: expandButtonClassName,
127
+ style: {
128
+ background: 'none',
129
+ border: 'none',
130
+ cursor: 'pointer',
131
+ padding: '4px',
132
+ display: 'flex',
133
+ alignItems: 'center',
134
+ justifyContent: 'center',
135
+ ...expandButtonStyle
136
+ },
137
+ "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
138
+ }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
111
139
  return /*#__PURE__*/React.createElement(context.RowContext.Provider, {
112
140
  value: contextValue
113
141
  }, /*#__PURE__*/React.createElement(context.RowHoveredContext.Provider, {
@@ -121,7 +149,7 @@ const Row = /*#__PURE__*/React.memo(function Row({
121
149
  onMouseLeave: setHoverOut,
122
150
  onClick: handleRowClick,
123
151
  ref: tableRowCallbackRef
124
- }, tableIsSelectable ? checkboxMarkup : null, children)));
152
+ }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
125
153
  });
126
154
 
127
155
  exports.Row = Row;
@@ -58,11 +58,11 @@ function Badge({
58
58
  className: styles.Icon
59
59
  }, /*#__PURE__*/React.createElement(Icon, {
60
60
  source: icon
61
- })), children && /*#__PURE__*/React.createElement(Text, {
61
+ })), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
62
62
  as: "span",
63
63
  variant: "bodySm",
64
64
  fontWeight: tone === 'new' ? 'medium' : undefined
65
- }, children));
65
+ }, children) : children);
66
66
  }
67
67
  Badge.Pip = Pip;
68
68
 
@@ -1,4 +1,4 @@
1
- import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
1
+ import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
2
2
  import { SortAscendingIcon, SortDescendingIcon } from '@shopify/polaris-icons';
3
3
  import { debounce } from '../../utilities/debounce.js';
4
4
  import { useToggle } from '../../utilities/use-toggle.js';
@@ -47,6 +47,16 @@ function IndexTableBase({
47
47
  sortToggleLabels,
48
48
  hasZebraStriping,
49
49
  pagination,
50
+ expandable,
51
+ expandedRowIds,
52
+ defaultExpandedRowIds,
53
+ onExpandedChange,
54
+ getRowChildren,
55
+ isRowExpandable,
56
+ expandIconCollapsed,
57
+ expandIconExpanded,
58
+ expandButtonClassName,
59
+ expandButtonStyle,
50
60
  rowClassName,
51
61
  rowStyle,
52
62
  cellClassName,
@@ -88,6 +98,38 @@ function IndexTableBase({
88
98
  const [tableInitialized, setTableInitialized] = useState(false);
89
99
  const [stickyWrapper, setStickyWrapper] = useState(null);
90
100
  const [hideScrollContainer, setHideScrollContainer] = useState(true);
101
+
102
+ // Expansion state
103
+ const [expandedRows, setExpandedRows] = useState(() => {
104
+ if (expandedRowIds) {
105
+ return new Set(expandedRowIds);
106
+ }
107
+ if (defaultExpandedRowIds) {
108
+ return new Set(defaultExpandedRowIds);
109
+ }
110
+ return new Set();
111
+ });
112
+
113
+ // Update expanded state when prop changes
114
+ useEffect(() => {
115
+ if (expandedRowIds !== undefined) {
116
+ setExpandedRows(new Set(expandedRowIds));
117
+ }
118
+ }, [expandedRowIds]);
119
+
120
+ // Toggle expansion
121
+ const toggleRowExpansion = useCallback(rowId => {
122
+ setExpandedRows(prev => {
123
+ const newExpanded = new Set(prev);
124
+ if (newExpanded.has(rowId)) {
125
+ newExpanded.delete(rowId);
126
+ } else {
127
+ newExpanded.add(rowId);
128
+ }
129
+ onExpandedChange?.(Array.from(newExpanded));
130
+ return newExpanded;
131
+ });
132
+ }, [onExpandedChange]);
91
133
  const tableHeadings = useRef([]);
92
134
  const stickyTableHeadings = useRef([]);
93
135
  const stickyHeaderWrapperElement = useRef(null);
@@ -343,12 +385,56 @@ function IndexTableBase({
343
385
  event: "resize",
344
386
  handler: handleResize
345
387
  }), stickyHeaderMarkup);
388
+
389
+ // Process children to insert child rows for expanded rows
390
+ const processedChildren = useMemo(() => {
391
+ if (!expandable || !getRowChildren) {
392
+ return children;
393
+ }
394
+ const result = [];
395
+ let position = 0;
396
+ React.Children.forEach(children, child => {
397
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === Row) {
398
+ const rowId = child.props.id;
399
+ const isExpanded = expandedRows.has(rowId);
400
+
401
+ // Clone the row with updated position
402
+ const updatedRow = /*#__PURE__*/React.cloneElement(child, {
403
+ ...child.props,
404
+ position
405
+ });
406
+ result.push(updatedRow);
407
+ position++;
408
+
409
+ // Add child rows if expanded
410
+ if (isExpanded) {
411
+ const childRows = getRowChildren(updatedRow);
412
+ if (childRows && childRows.length > 0) {
413
+ childRows.forEach((childRow, index) => {
414
+ if (/*#__PURE__*/React.isValidElement(childRow)) {
415
+ result.push(/*#__PURE__*/React.cloneElement(childRow, {
416
+ ...childRow.props,
417
+ key: `${rowId}-child-${index}`,
418
+ position,
419
+ rowType: 'child'
420
+ }));
421
+ position++;
422
+ }
423
+ });
424
+ }
425
+ }
426
+ } else {
427
+ result.push(child);
428
+ }
429
+ });
430
+ return result;
431
+ }, [children, expandable, expandedRows, getRowChildren]);
346
432
  const condensedClassNames = classNames(styles.CondensedList, hasZebraStriping && styles.ZebraStriping);
347
433
  const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
348
434
  "data-selectmode": Boolean(selectMode),
349
435
  className: condensedClassNames,
350
436
  ref: condensedListElement
351
- }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
437
+ }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
352
438
  scrollableContainerRef: scrollableContainerElement,
353
439
  onScroll: handleScrollContainerScroll
354
440
  }, /*#__PURE__*/React.createElement("table", {
@@ -358,15 +444,10 @@ function IndexTableBase({
358
444
  className: styles.HeadingRow
359
445
  }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
360
446
  ref: tableBodyRef
361
- }, children))));
447
+ }, processedChildren))));
362
448
  const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
363
449
  className: styles.EmptySearchResultWrapper
364
450
  }, emptyStateMarkup);
365
- const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
366
- className: styles.PaginationWrapper
367
- }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
368
- type: "table"
369
- }, pagination))) : null;
370
451
  const customizationContextValue = {
371
452
  rowClassName,
372
453
  rowStyle,
@@ -375,8 +456,22 @@ function IndexTableBase({
375
456
  checkboxClassName,
376
457
  checkboxStyle,
377
458
  checkboxWrapperClassName,
378
- checkboxWrapperStyle
459
+ checkboxWrapperStyle,
460
+ expandable,
461
+ expandedRowIds: expandedRows,
462
+ toggleRowExpansion,
463
+ isRowExpandable,
464
+ getRowChildren,
465
+ expandIconCollapsed,
466
+ expandIconExpanded,
467
+ expandButtonClassName,
468
+ expandButtonStyle
379
469
  };
470
+ const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
471
+ className: styles.PaginationWrapper
472
+ }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
473
+ type: "table"
474
+ }, pagination))) : null;
380
475
  return /*#__PURE__*/React.createElement(IndexTableCustomizationContext.Provider, {
381
476
  value: customizationContextValue
382
477
  }, /*#__PURE__*/React.createElement("div", {
@@ -4,8 +4,8 @@ import { classNames, variationName } from '../../../../utilities/css.js';
4
4
  import styles from '../../IndexTable.css.js';
5
5
  import { useIndexRow, useIndexSelectionChange } from '../../../../utilities/index-provider/hooks.js';
6
6
  import { SelectionType } from '../../../../utilities/index-provider/types.js';
7
- import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.js';
8
7
  import { Cell } from '../Cell/Cell.js';
8
+ import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.js';
9
9
  import { Checkbox } from '../Checkbox/Checkbox.js';
10
10
 
11
11
  const Row = /*#__PURE__*/memo(function Row({
@@ -36,7 +36,15 @@ const Row = /*#__PURE__*/memo(function Row({
36
36
  } = useToggle(false);
37
37
  const {
38
38
  rowClassName: customRowClassName,
39
- rowStyle: customRowStyle
39
+ rowStyle: customRowStyle,
40
+ expandable: tableExpandable,
41
+ expandedRowIds,
42
+ toggleRowExpansion,
43
+ isRowExpandable: tableIsRowExpandable,
44
+ expandIconCollapsed,
45
+ expandIconExpanded,
46
+ expandButtonClassName,
47
+ expandButtonStyle
40
48
  } = useContext(IndexTableCustomizationContext);
41
49
  const handleInteraction = useCallback(event => {
42
50
  event.stopPropagation();
@@ -106,6 +114,26 @@ const Row = /*#__PURE__*/memo(function Row({
106
114
  const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell, null) : /*#__PURE__*/React.createElement(Checkbox, {
107
115
  accessibilityLabel: accessibilityLabel
108
116
  });
117
+ const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
118
+ const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
119
+ const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("button", {
120
+ onClick: e => {
121
+ e.stopPropagation();
122
+ toggleRowExpansion?.(id);
123
+ },
124
+ className: expandButtonClassName,
125
+ style: {
126
+ background: 'none',
127
+ border: 'none',
128
+ cursor: 'pointer',
129
+ padding: '4px',
130
+ display: 'flex',
131
+ alignItems: 'center',
132
+ justifyContent: 'center',
133
+ ...expandButtonStyle
134
+ },
135
+ "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
136
+ }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
109
137
  return /*#__PURE__*/React.createElement(RowContext.Provider, {
110
138
  value: contextValue
111
139
  }, /*#__PURE__*/React.createElement(RowHoveredContext.Provider, {
@@ -119,7 +147,7 @@ const Row = /*#__PURE__*/memo(function Row({
119
147
  onMouseLeave: setHoverOut,
120
148
  onClick: handleRowClick,
121
149
  ref: tableRowCallbackRef
122
- }, tableIsSelectable ? checkboxMarkup : null, children)));
150
+ }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
123
151
  });
124
152
 
125
153
  export { Row };
@@ -21,7 +21,7 @@
21
21
  @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
22
22
 
23
23
  :root{
24
- --polaris-version-number:'13.10.4';
24
+ --polaris-version-number:'13.10.5-rc2';
25
25
 
26
26
  --pg-navigation-width:15rem;
27
27
  --pg-dangerous-magic-space-4:1rem;
@@ -21,7 +21,7 @@
21
21
  @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
22
22
 
23
23
  :root{
24
- --polaris-version-number:'13.10.4';
24
+ --polaris-version-number:'13.10.5-rc2';
25
25
 
26
26
  --pg-navigation-width:15rem;
27
27
  --pg-dangerous-magic-space-4:1rem;
@@ -58,11 +58,11 @@ function Badge({
58
58
  className: styles.Icon
59
59
  }, /*#__PURE__*/React.createElement(Icon, {
60
60
  source: icon
61
- })), children && /*#__PURE__*/React.createElement(Text, {
61
+ })), typeof children === 'string' ? /*#__PURE__*/React.createElement(Text, {
62
62
  as: "span",
63
63
  variant: "bodySm",
64
64
  fontWeight: tone === 'new' ? 'medium' : undefined
65
- }, children));
65
+ }, children) : children);
66
66
  }
67
67
  Badge.Pip = Pip;
68
68
 
@@ -1,4 +1,4 @@
1
- import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
1
+ import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
2
2
  import { SortAscendingIcon, SortDescendingIcon } from '@shopify/polaris-icons';
3
3
  import { debounce } from '../../utilities/debounce.esnext';
4
4
  import { useToggle } from '../../utilities/use-toggle.esnext';
@@ -47,6 +47,16 @@ function IndexTableBase({
47
47
  sortToggleLabels,
48
48
  hasZebraStriping,
49
49
  pagination,
50
+ expandable,
51
+ expandedRowIds,
52
+ defaultExpandedRowIds,
53
+ onExpandedChange,
54
+ getRowChildren,
55
+ isRowExpandable,
56
+ expandIconCollapsed,
57
+ expandIconExpanded,
58
+ expandButtonClassName,
59
+ expandButtonStyle,
50
60
  rowClassName,
51
61
  rowStyle,
52
62
  cellClassName,
@@ -88,6 +98,38 @@ function IndexTableBase({
88
98
  const [tableInitialized, setTableInitialized] = useState(false);
89
99
  const [stickyWrapper, setStickyWrapper] = useState(null);
90
100
  const [hideScrollContainer, setHideScrollContainer] = useState(true);
101
+
102
+ // Expansion state
103
+ const [expandedRows, setExpandedRows] = useState(() => {
104
+ if (expandedRowIds) {
105
+ return new Set(expandedRowIds);
106
+ }
107
+ if (defaultExpandedRowIds) {
108
+ return new Set(defaultExpandedRowIds);
109
+ }
110
+ return new Set();
111
+ });
112
+
113
+ // Update expanded state when prop changes
114
+ useEffect(() => {
115
+ if (expandedRowIds !== undefined) {
116
+ setExpandedRows(new Set(expandedRowIds));
117
+ }
118
+ }, [expandedRowIds]);
119
+
120
+ // Toggle expansion
121
+ const toggleRowExpansion = useCallback(rowId => {
122
+ setExpandedRows(prev => {
123
+ const newExpanded = new Set(prev);
124
+ if (newExpanded.has(rowId)) {
125
+ newExpanded.delete(rowId);
126
+ } else {
127
+ newExpanded.add(rowId);
128
+ }
129
+ onExpandedChange?.(Array.from(newExpanded));
130
+ return newExpanded;
131
+ });
132
+ }, [onExpandedChange]);
91
133
  const tableHeadings = useRef([]);
92
134
  const stickyTableHeadings = useRef([]);
93
135
  const stickyHeaderWrapperElement = useRef(null);
@@ -343,12 +385,56 @@ function IndexTableBase({
343
385
  event: "resize",
344
386
  handler: handleResize
345
387
  }), stickyHeaderMarkup);
388
+
389
+ // Process children to insert child rows for expanded rows
390
+ const processedChildren = useMemo(() => {
391
+ if (!expandable || !getRowChildren) {
392
+ return children;
393
+ }
394
+ const result = [];
395
+ let position = 0;
396
+ React.Children.forEach(children, child => {
397
+ if (/*#__PURE__*/React.isValidElement(child) && child.type === Row) {
398
+ const rowId = child.props.id;
399
+ const isExpanded = expandedRows.has(rowId);
400
+
401
+ // Clone the row with updated position
402
+ const updatedRow = /*#__PURE__*/React.cloneElement(child, {
403
+ ...child.props,
404
+ position
405
+ });
406
+ result.push(updatedRow);
407
+ position++;
408
+
409
+ // Add child rows if expanded
410
+ if (isExpanded) {
411
+ const childRows = getRowChildren(updatedRow);
412
+ if (childRows && childRows.length > 0) {
413
+ childRows.forEach((childRow, index) => {
414
+ if (/*#__PURE__*/React.isValidElement(childRow)) {
415
+ result.push(/*#__PURE__*/React.cloneElement(childRow, {
416
+ ...childRow.props,
417
+ key: `${rowId}-child-${index}`,
418
+ position,
419
+ rowType: 'child'
420
+ }));
421
+ position++;
422
+ }
423
+ });
424
+ }
425
+ }
426
+ } else {
427
+ result.push(child);
428
+ }
429
+ });
430
+ return result;
431
+ }, [children, expandable, expandedRows, getRowChildren]);
346
432
  const condensedClassNames = classNames(styles.CondensedList, hasZebraStriping && styles.ZebraStriping);
347
433
  const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
348
434
  "data-selectmode": Boolean(selectMode),
349
435
  className: condensedClassNames,
350
436
  ref: condensedListElement
351
- }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
437
+ }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
352
438
  scrollableContainerRef: scrollableContainerElement,
353
439
  onScroll: handleScrollContainerScroll
354
440
  }, /*#__PURE__*/React.createElement("table", {
@@ -358,15 +444,10 @@ function IndexTableBase({
358
444
  className: styles.HeadingRow
359
445
  }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
360
446
  ref: tableBodyRef
361
- }, children))));
447
+ }, processedChildren))));
362
448
  const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
363
449
  className: styles.EmptySearchResultWrapper
364
450
  }, emptyStateMarkup);
365
- const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
366
- className: styles.PaginationWrapper
367
- }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
368
- type: "table"
369
- }, pagination))) : null;
370
451
  const customizationContextValue = {
371
452
  rowClassName,
372
453
  rowStyle,
@@ -375,8 +456,22 @@ function IndexTableBase({
375
456
  checkboxClassName,
376
457
  checkboxStyle,
377
458
  checkboxWrapperClassName,
378
- checkboxWrapperStyle
459
+ checkboxWrapperStyle,
460
+ expandable,
461
+ expandedRowIds: expandedRows,
462
+ toggleRowExpansion,
463
+ isRowExpandable,
464
+ getRowChildren,
465
+ expandIconCollapsed,
466
+ expandIconExpanded,
467
+ expandButtonClassName,
468
+ expandButtonStyle
379
469
  };
470
+ const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
471
+ className: styles.PaginationWrapper
472
+ }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
473
+ type: "table"
474
+ }, pagination))) : null;
380
475
  return /*#__PURE__*/React.createElement(IndexTableCustomizationContext.Provider, {
381
476
  value: customizationContextValue
382
477
  }, /*#__PURE__*/React.createElement("div", {
@@ -4,8 +4,8 @@ import { classNames, variationName } from '../../../../utilities/css.esnext';
4
4
  import styles from '../../IndexTable.css.esnext';
5
5
  import { useIndexRow, useIndexSelectionChange } from '../../../../utilities/index-provider/hooks.esnext';
6
6
  import { SelectionType } from '../../../../utilities/index-provider/types.esnext';
7
- import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.esnext';
8
7
  import { Cell } from '../Cell/Cell.esnext';
8
+ import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.esnext';
9
9
  import { Checkbox } from '../Checkbox/Checkbox.esnext';
10
10
 
11
11
  const Row = /*#__PURE__*/memo(function Row({
@@ -36,7 +36,15 @@ const Row = /*#__PURE__*/memo(function Row({
36
36
  } = useToggle(false);
37
37
  const {
38
38
  rowClassName: customRowClassName,
39
- rowStyle: customRowStyle
39
+ rowStyle: customRowStyle,
40
+ expandable: tableExpandable,
41
+ expandedRowIds,
42
+ toggleRowExpansion,
43
+ isRowExpandable: tableIsRowExpandable,
44
+ expandIconCollapsed,
45
+ expandIconExpanded,
46
+ expandButtonClassName,
47
+ expandButtonStyle
40
48
  } = useContext(IndexTableCustomizationContext);
41
49
  const handleInteraction = useCallback(event => {
42
50
  event.stopPropagation();
@@ -106,6 +114,26 @@ const Row = /*#__PURE__*/memo(function Row({
106
114
  const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell, null) : /*#__PURE__*/React.createElement(Checkbox, {
107
115
  accessibilityLabel: accessibilityLabel
108
116
  });
117
+ const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
118
+ const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
119
+ const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("button", {
120
+ onClick: e => {
121
+ e.stopPropagation();
122
+ toggleRowExpansion?.(id);
123
+ },
124
+ className: expandButtonClassName,
125
+ style: {
126
+ background: 'none',
127
+ border: 'none',
128
+ cursor: 'pointer',
129
+ padding: '4px',
130
+ display: 'flex',
131
+ alignItems: 'center',
132
+ justifyContent: 'center',
133
+ ...expandButtonStyle
134
+ },
135
+ "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
136
+ }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
109
137
  return /*#__PURE__*/React.createElement(RowContext.Provider, {
110
138
  value: contextValue
111
139
  }, /*#__PURE__*/React.createElement(RowHoveredContext.Provider, {
@@ -119,7 +147,7 @@ const Row = /*#__PURE__*/memo(function Row({
119
147
  onMouseLeave: setHoverOut,
120
148
  onClick: handleRowClick,
121
149
  ref: tableRowCallbackRef
122
- }, tableIsSelectable ? checkboxMarkup : null, children)));
150
+ }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
123
151
  });
124
152
 
125
153
  export { Row };
@@ -3,7 +3,7 @@ import type { IconSource } from '../../types';
3
3
  import type { Progress, Size, Tone } from './types';
4
4
  interface NonMutuallyExclusiveProps {
5
5
  /** The content to display inside the badge. */
6
- children?: string;
6
+ children?: React.ReactNode | string;
7
7
  /** Colors and labels the badge with the given tone. */
8
8
  tone?: Tone;
9
9
  /** Render a pip showing the progress of a given task. */
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAG5C,OAAO,KAAK,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,SAAS,CAAC;AAKlD,UAAU,yBAAyB;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,yDAAyD;IACzD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uCAAuC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAChD,CACI;IAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAC,GACvC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAC,CAC5C,CAAC;AA0BJ,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAmB,EACnB,4BAA4B,GAC7B,EAAE,UAAU,qBAmDZ;yBA1De,KAAK"}
1
+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,aAAa,CAAC;AAG5C,OAAO,KAAK,EAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAC,MAAM,SAAS,CAAC;AAKlD,UAAU,yBAAyB;IACjC,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,uDAAuD;IACvD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,yDAAyD;IACzD,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,uCAAuC;IACvC,4BAA4B,CAAC,EAAE,MAAM,CAAC;CACvC;AAED,MAAM,MAAM,UAAU,GAAG,yBAAyB,GAChD,CACI;IAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAC,GACvC;IAAC,IAAI,CAAC,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAC,CAC5C,CAAC;AA0BJ,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,IAAmB,EACnB,4BAA4B,GAC7B,EAAE,UAAU,qBAqDZ;yBA5De,KAAK"}
@@ -76,6 +76,26 @@ export interface IndexTableBaseProps {
76
76
  hasZebraStriping?: boolean;
77
77
  /** Properties to enable pagination at the bottom of the table. */
78
78
  pagination?: IndexTablePaginationProps;
79
+ /** Enable expandable rows */
80
+ expandable?: boolean;
81
+ /** IDs of expanded rows */
82
+ expandedRowIds?: string[];
83
+ /** Default expanded row IDs */
84
+ defaultExpandedRowIds?: string[];
85
+ /** Callback when expanded rows change */
86
+ onExpandedChange?: (expandedRowIds: string[]) => void;
87
+ /** Callback to get child rows for a row */
88
+ getRowChildren?: (rowElement: React.ReactElement) => React.ReactNode[];
89
+ /** Callback to determine if a row is expandable */
90
+ isRowExpandable?: (rowId: string) => boolean;
91
+ /** Custom expand icon for collapsed state */
92
+ expandIconCollapsed?: React.ReactNode;
93
+ /** Custom expand icon for expanded state */
94
+ expandIconExpanded?: React.ReactNode;
95
+ /** Custom class name for expand button */
96
+ expandButtonClassName?: string;
97
+ /** Custom styles for expand button */
98
+ expandButtonStyle?: React.CSSProperties;
79
99
  /** Custom class name for all rows */
80
100
  rowClassName?: string;
81
101
  /** Custom styles for all rows */
@@ -1 +1 @@
1
- {"version":3,"file":"IndexTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/IndexTable/IndexTable.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"IndexTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/IndexTable/IndexTable.tsx"],"names":[],"mappings":"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"}
@@ -31,6 +31,14 @@ export interface RowProps {
31
31
  onNavigation?(id: string): void;
32
32
  /** Callback fired when the row is clicked. Overrides the default click behaviour. */
33
33
  onClick?(): void;
34
+ /** @deprecated Use IndexTable expandable props instead */
35
+ expandable?: boolean;
36
+ /** @deprecated Use IndexTable expandable props instead */
37
+ expanded?: boolean;
38
+ /** @deprecated Use IndexTable expandable props instead */
39
+ onToggleExpansion?(): void;
40
+ /** @deprecated Use IndexTable expandable props instead */
41
+ expandIcon?: React.ReactNode;
34
42
  }
35
43
  export declare const Row: React.NamedExoticComponent<RowProps>;
36
44
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IndexTable/components/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,4CAA4C,CAAC;AAGtE,KAAK,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;AAC9C,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAGhE,MAAM,WAAW,QAAQ;IACvB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,oGAAoG;IACpG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mLAAmL;IACnL,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB;;0BAEsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,YAAY,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qFAAqF;IACrF,OAAO,CAAC,IAAI,IAAI,CAAC;CAClB;AAED,eAAO,MAAM,GAAG,sCAwKd,CAAC"}
1
+ {"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IndexTable/components/Row/Row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAY5E,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,4CAA4C,CAAC;AAGtE,KAAK,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,CAAC;AAC9C,KAAK,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAGhE,MAAM,WAAW,QAAQ;IACvB,iCAAiC;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sCAAsC;IACtC,EAAE,EAAE,MAAM,CAAC;IACX,oGAAoG;IACpG,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,+EAA+E;IAC/E,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mLAAmL;IACnL,cAAc,CAAC,EAAE,KAAK,CAAC;IACvB;;0BAEsB;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,8EAA8E;IAC9E,YAAY,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,qFAAqF;IACrF,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,0DAA0D;IAC1D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,iBAAiB,CAAC,IAAI,IAAI,CAAC;IAC3B,0DAA0D;IAC1D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,GAAG,sCAqMd,CAAC"}
@@ -28,6 +28,16 @@ export interface IndexTableCustomizationContextType {
28
28
  checkboxStyle?: React.CSSProperties;
29
29
  checkboxWrapperClassName?: string;
30
30
  checkboxWrapperStyle?: React.CSSProperties;
31
+ expandable?: boolean;
32
+ expandedRowIds?: Set<string>;
33
+ toggleRowExpansion?: (rowId: string) => void;
34
+ isRowExpandable?: (rowId: string) => boolean;
35
+ getRowChildren?: (rowElement: React.ReactElement) => React.ReactNode[];
36
+ expandIcon?: React.ReactNode;
37
+ expandIconCollapsed?: React.ReactNode;
38
+ expandIconExpanded?: React.ReactNode;
39
+ expandButtonClassName?: string;
40
+ expandButtonStyle?: React.CSSProperties;
31
41
  }
32
42
  export declare const IndexTableCustomizationContext: import("react").Context<IndexTableCustomizationContextType>;
33
43
  export {};
@@ -1 +1 @@
1
- {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/index-table/context.ts"],"names":[],"mappings":";AAEA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACzE;AAED,eAAO,MAAM,UAAU,yCAAoC,CAAC;AAE5D,eAAO,MAAM,iBAAiB,8CAAgD,CAAC;AAE/E,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,EAAE,cAAc,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,eAAO,MAAM,aAAa,4CAC8B,CAAC;AAEzD,MAAM,WAAW,kCAAkC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC5C;AAED,eAAO,MAAM,8BAA8B,6DACY,CAAC"}
1
+ {"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../../../src/utilities/index-table/context.ts"],"names":[],"mappings":";AAEA,UAAU,cAAc;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,GAAG,eAAe,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,GAAG,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CACzE;AAED,eAAO,MAAM,UAAU,yCAAoC,CAAC;AAE5D,eAAO,MAAM,iBAAiB,8CAAgD,CAAC;AAE/E,MAAM,WAAW,iBAAiB;IAChC,mBAAmB,EAAE,cAAc,GAAG,IAAI,CAAC;IAC3C,aAAa,EAAE,OAAO,CAAC;IACvB,cAAc,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,oBAAoB;;;;CAIhC,CAAC;AAEF,eAAO,MAAM,aAAa,4CAC8B,CAAC;AAEzD,MAAM,WAAW,kCAAkC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IACpC,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,oBAAoB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACvE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtC,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACzC;AAED,eAAO,MAAM,8BAA8B,6DACY,CAAC"}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "polaris-react-extended",
3
3
  "description": "Shopify’s admin product component library",
4
- "version": "13.10.5",
4
+ "version": "13.10.8",
5
5
  "private": false,
6
6
  "license": "SEE LICENSE IN LICENSE.md",
7
7
  "author": "Shopify <dev@shopify.com>",