polaris-react-extended 13.10.4 → 13.10.5-rc1

package/build/cjs/components/IndexTable/IndexTable.js

@@ -49,12 +49,24 @@ function IndexTableBase({
   sortToggleLabels,
   hasZebraStriping,
   pagination,
+  expandable,
+  expandedRowIds,
+  defaultExpandedRowIds,
+  onExpandedChange,
+  getRowChildren,
+  isRowExpandable,
+  expandIconCollapsed,
+  expandIconExpanded,
+  expandButtonClassName,
+  expandButtonStyle,
   rowClassName,
   rowStyle,
   cellClassName,
   cellStyle,
   checkboxClassName,
   checkboxStyle,
+  checkboxWrapperClassName,
+  checkboxWrapperStyle,
   ...restProps
 }) {
   const {
@@ -88,6 +100,38 @@ function IndexTableBase({
   const [tableInitialized, setTableInitialized] = React.useState(false);
   const [stickyWrapper, setStickyWrapper] = React.useState(null);
   const [hideScrollContainer, setHideScrollContainer] = React.useState(true);
+
+  // Expansion state
+  const [expandedRows, setExpandedRows] = React.useState(() => {
+    if (expandedRowIds) {
+      return new Set(expandedRowIds);
+    }
+    if (defaultExpandedRowIds) {
+      return new Set(defaultExpandedRowIds);
+    }
+    return new Set();
+  });
+
+  // Update expanded state when prop changes
+  React.useEffect(() => {
+    if (expandedRowIds !== undefined) {
+      setExpandedRows(new Set(expandedRowIds));
+    }
+  }, [expandedRowIds]);
+
+  // Toggle expansion
+  const toggleRowExpansion = React.useCallback(rowId => {
+    setExpandedRows(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(rowId)) {
+        newExpanded.delete(rowId);
+      } else {
+        newExpanded.add(rowId);
+      }
+      onExpandedChange?.(Array.from(newExpanded));
+      return newExpanded;
+    });
+  }, [onExpandedChange]);
   const tableHeadings = React.useRef([]);
   const stickyTableHeadings = React.useRef([]);
   const stickyHeaderWrapperElement = React.useRef(null);
@@ -343,12 +387,56 @@ function IndexTableBase({
     event: "resize",
     handler: handleResize
   }), stickyHeaderMarkup);
+
+  // Process children to insert child rows for expanded rows
+  const processedChildren = React.useMemo(() => {
+    if (!expandable || !getRowChildren) {
+      return children;
+    }
+    const result = [];
+    let position = 0;
+    React.Children.forEach(children, child => {
+      if (/*#__PURE__*/React.isValidElement(child) && child.type === Row.Row) {
+        const rowId = child.props.id;
+        const isExpanded = expandedRows.has(rowId);
+
+        // Clone the row with updated position
+        const updatedRow = /*#__PURE__*/React.cloneElement(child, {
+          ...child.props,
+          position
+        });
+        result.push(updatedRow);
+        position++;
+
+        // Add child rows if expanded
+        if (isExpanded) {
+          const childRows = getRowChildren(rowId);
+          if (childRows && childRows.length > 0) {
+            childRows.forEach((childRow, index) => {
+              if (/*#__PURE__*/React.isValidElement(childRow)) {
+                result.push(/*#__PURE__*/React.cloneElement(childRow, {
+                  ...childRow.props,
+                  key: `${rowId}-child-${index}`,
+                  position,
+                  rowType: 'child'
+                }));
+                position++;
+              }
+            });
+          }
+        }
+      } else {
+        result.push(child);
+      }
+    });
+    return result;
+  }, [children, expandable, expandedRows, getRowChildren]);
   const condensedClassNames = css.classNames(IndexTable_module.default.CondensedList, hasZebraStriping && IndexTable_module.default.ZebraStriping);
   const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
     "data-selectmode": Boolean(selectMode),
     className: condensedClassNames,
     ref: condensedListElement
-  }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer.ScrollContainer, {
+  }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer.ScrollContainer, {
     scrollableContainerRef: scrollableContainerElement,
     onScroll: handleScrollContainerScroll
   }, /*#__PURE__*/React.createElement("table", {
@@ -358,23 +446,34 @@ function IndexTableBase({
     className: IndexTable_module.default.HeadingRow
   }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
     ref: tableBodyRef
-  }, children))));
+  }, processedChildren))));
   const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
     className: IndexTable_module.default.EmptySearchResultWrapper
   }, emptyStateMarkup);
-  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
-    className: IndexTable_module.default.PaginationWrapper
-  }, /*#__PURE__*/React.createElement(Pagination.Pagination, Object.assign({
-    type: "table"
-  }, pagination))) : null;
   const customizationContextValue = {
     rowClassName,
     rowStyle,
     cellClassName,
     cellStyle,
     checkboxClassName,
-    checkboxStyle
+    checkboxStyle,
+    checkboxWrapperClassName,
+    checkboxWrapperStyle,
+    expandable,
+    expandedRowIds: expandedRows,
+    toggleRowExpansion,
+    isRowExpandable,
+    getRowChildren,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   };
+  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
+    className: IndexTable_module.default.PaginationWrapper
+  }, /*#__PURE__*/React.createElement(Pagination.Pagination, Object.assign({
+    type: "table"
+  }, pagination))) : null;
   return /*#__PURE__*/React.createElement(context.IndexTableCustomizationContext.Provider, {
     value: customizationContextValue
   }, /*#__PURE__*/React.createElement("div", {

package/build/cjs/components/IndexTable/components/Checkbox/Checkbox.js

@@ -27,8 +27,13 @@ const Checkbox = /*#__PURE__*/React.memo(function Checkbox({
   const label = accessibilityLabel ? accessibilityLabel : i18n.translate('Polaris.IndexTable.selectItem', {
     resourceName: resourceName.singular
   });
+  const {
+    checkboxClassName: customCheckboxClassName,
+    checkboxStyle: customCheckboxStyle
+  } = React.useContext(context.IndexTableCustomizationContext);
   return /*#__PURE__*/React.createElement(CheckboxWrapper, null, /*#__PURE__*/React.createElement("div", {
-    className: Checkbox_module.default.Wrapper,
+    className: css.classNames(Checkbox_module.default.Wrapper, customCheckboxClassName),
+    style: customCheckboxStyle,
     onClick: onInteraction,
     onKeyUp: noop
   }, /*#__PURE__*/React.createElement(Checkbox$1.Checkbox, {
@@ -46,8 +51,8 @@ function CheckboxWrapper({
     position
   } = React.useContext(context.RowContext);
   const {
-    checkboxClassName: customCheckboxClassName,
-    checkboxStyle: customCheckboxStyle
+    checkboxWrapperClassName,
+    checkboxWrapperStyle
   } = React.useContext(context.IndexTableCustomizationContext);
   const checkboxNode = React.useRef(null);
 
@@ -69,10 +74,10 @@ function CheckboxWrapper({
       window.removeEventListener('resize', handleResize);
     };
   }, [handleResize]);
-  const checkboxClassName = css.classNames(IndexTable_module.default.TableCell, IndexTable_module.default['TableCell-first'], customCheckboxClassName);
+  const checkboxClassName = css.classNames(IndexTable_module.default.TableCell, IndexTable_module.default['TableCell-first'], checkboxWrapperClassName);
   return /*#__PURE__*/React.createElement("td", {
     className: checkboxClassName,
-    style: customCheckboxStyle,
+    style: checkboxWrapperStyle,
     ref: checkboxNode
   }, children);
 }

package/build/cjs/components/IndexTable/components/Row/Row.js

@@ -6,8 +6,8 @@ var css = require('../../../../utilities/css.js');
 var IndexTable_module = require('../../IndexTable.css.js');
 var hooks = require('../../../../utilities/index-provider/hooks.js');
 var types = require('../../../../utilities/index-provider/types.js');
-var context = require('../../../../utilities/index-table/context.js');
 var Cell = require('../Cell/Cell.js');
+var context = require('../../../../utilities/index-table/context.js');
 var Checkbox = require('../Checkbox/Checkbox.js');
 
 const Row = /*#__PURE__*/React.memo(function Row({
@@ -38,7 +38,15 @@ const Row = /*#__PURE__*/React.memo(function Row({
   } = useToggle.useToggle(false);
   const {
     rowClassName: customRowClassName,
-    rowStyle: customRowStyle
+    rowStyle: customRowStyle,
+    expandable: tableExpandable,
+    expandedRowIds,
+    toggleRowExpansion,
+    isRowExpandable: tableIsRowExpandable,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   } = React.useContext(context.IndexTableCustomizationContext);
   const handleInteraction = React.useCallback(event => {
     event.stopPropagation();
@@ -108,6 +116,26 @@ const Row = /*#__PURE__*/React.memo(function Row({
   const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell.Cell, null) : /*#__PURE__*/React.createElement(Checkbox.Checkbox, {
     accessibilityLabel: accessibilityLabel
   });
+  const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
+  const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
+  const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell.Cell, null, /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      toggleRowExpansion?.(id);
+    },
+    className: expandButtonClassName,
+    style: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '4px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...expandButtonStyle
+    },
+    "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
+  }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
   return /*#__PURE__*/React.createElement(context.RowContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(context.RowHoveredContext.Provider, {
@@ -121,7 +149,7 @@ const Row = /*#__PURE__*/React.memo(function Row({
     onMouseLeave: setHoverOut,
     onClick: handleRowClick,
     ref: tableRowCallbackRef
-  }, tableIsSelectable ? checkboxMarkup : null, children)));
+  }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
 });
 
 exports.Row = Row;

package/build/esm/components/IndexTable/IndexTable.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { SortAscendingIcon, SortDescendingIcon } from '@shopify/polaris-icons';
 import { debounce } from '../../utilities/debounce.js';
 import { useToggle } from '../../utilities/use-toggle.js';
@@ -47,12 +47,24 @@ function IndexTableBase({
   sortToggleLabels,
   hasZebraStriping,
   pagination,
+  expandable,
+  expandedRowIds,
+  defaultExpandedRowIds,
+  onExpandedChange,
+  getRowChildren,
+  isRowExpandable,
+  expandIconCollapsed,
+  expandIconExpanded,
+  expandButtonClassName,
+  expandButtonStyle,
   rowClassName,
   rowStyle,
   cellClassName,
   cellStyle,
   checkboxClassName,
   checkboxStyle,
+  checkboxWrapperClassName,
+  checkboxWrapperStyle,
   ...restProps
 }) {
   const {
@@ -86,6 +98,38 @@ function IndexTableBase({
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState(null);
   const [hideScrollContainer, setHideScrollContainer] = useState(true);
+
+  // Expansion state
+  const [expandedRows, setExpandedRows] = useState(() => {
+    if (expandedRowIds) {
+      return new Set(expandedRowIds);
+    }
+    if (defaultExpandedRowIds) {
+      return new Set(defaultExpandedRowIds);
+    }
+    return new Set();
+  });
+
+  // Update expanded state when prop changes
+  useEffect(() => {
+    if (expandedRowIds !== undefined) {
+      setExpandedRows(new Set(expandedRowIds));
+    }
+  }, [expandedRowIds]);
+
+  // Toggle expansion
+  const toggleRowExpansion = useCallback(rowId => {
+    setExpandedRows(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(rowId)) {
+        newExpanded.delete(rowId);
+      } else {
+        newExpanded.add(rowId);
+      }
+      onExpandedChange?.(Array.from(newExpanded));
+      return newExpanded;
+    });
+  }, [onExpandedChange]);
   const tableHeadings = useRef([]);
   const stickyTableHeadings = useRef([]);
   const stickyHeaderWrapperElement = useRef(null);
@@ -341,12 +385,56 @@ function IndexTableBase({
     event: "resize",
     handler: handleResize
   }), stickyHeaderMarkup);
+
+  // Process children to insert child rows for expanded rows
+  const processedChildren = useMemo(() => {
+    if (!expandable || !getRowChildren) {
+      return children;
+    }
+    const result = [];
+    let position = 0;
+    React.Children.forEach(children, child => {
+      if (/*#__PURE__*/React.isValidElement(child) && child.type === Row) {
+        const rowId = child.props.id;
+        const isExpanded = expandedRows.has(rowId);
+
+        // Clone the row with updated position
+        const updatedRow = /*#__PURE__*/React.cloneElement(child, {
+          ...child.props,
+          position
+        });
+        result.push(updatedRow);
+        position++;
+
+        // Add child rows if expanded
+        if (isExpanded) {
+          const childRows = getRowChildren(rowId);
+          if (childRows && childRows.length > 0) {
+            childRows.forEach((childRow, index) => {
+              if (/*#__PURE__*/React.isValidElement(childRow)) {
+                result.push(/*#__PURE__*/React.cloneElement(childRow, {
+                  ...childRow.props,
+                  key: `${rowId}-child-${index}`,
+                  position,
+                  rowType: 'child'
+                }));
+                position++;
+              }
+            });
+          }
+        }
+      } else {
+        result.push(child);
+      }
+    });
+    return result;
+  }, [children, expandable, expandedRows, getRowChildren]);
   const condensedClassNames = classNames(styles.CondensedList, hasZebraStriping && styles.ZebraStriping);
   const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
     "data-selectmode": Boolean(selectMode),
     className: condensedClassNames,
     ref: condensedListElement
-  }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
+  }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
     scrollableContainerRef: scrollableContainerElement,
     onScroll: handleScrollContainerScroll
   }, /*#__PURE__*/React.createElement("table", {
@@ -356,23 +444,34 @@ function IndexTableBase({
     className: styles.HeadingRow
   }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
     ref: tableBodyRef
-  }, children))));
+  }, processedChildren))));
   const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
     className: styles.EmptySearchResultWrapper
   }, emptyStateMarkup);
-  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
-    className: styles.PaginationWrapper
-  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
-    type: "table"
-  }, pagination))) : null;
   const customizationContextValue = {
     rowClassName,
     rowStyle,
     cellClassName,
     cellStyle,
     checkboxClassName,
-    checkboxStyle
+    checkboxStyle,
+    checkboxWrapperClassName,
+    checkboxWrapperStyle,
+    expandable,
+    expandedRowIds: expandedRows,
+    toggleRowExpansion,
+    isRowExpandable,
+    getRowChildren,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   };
+  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
+    className: styles.PaginationWrapper
+  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
+    type: "table"
+  }, pagination))) : null;
   return /*#__PURE__*/React.createElement(IndexTableCustomizationContext.Provider, {
     value: customizationContextValue
   }, /*#__PURE__*/React.createElement("div", {

package/build/esm/components/IndexTable/components/Checkbox/Checkbox.js

@@ -25,8 +25,13 @@ const Checkbox = /*#__PURE__*/memo(function Checkbox({
   const label = accessibilityLabel ? accessibilityLabel : i18n.translate('Polaris.IndexTable.selectItem', {
     resourceName: resourceName.singular
   });
+  const {
+    checkboxClassName: customCheckboxClassName,
+    checkboxStyle: customCheckboxStyle
+  } = useContext(IndexTableCustomizationContext);
   return /*#__PURE__*/React.createElement(CheckboxWrapper, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.Wrapper,
+    className: classNames(styles.Wrapper, customCheckboxClassName),
+    style: customCheckboxStyle,
     onClick: onInteraction,
     onKeyUp: noop
   }, /*#__PURE__*/React.createElement(Checkbox$1, {
@@ -44,8 +49,8 @@ function CheckboxWrapper({
     position
   } = useContext(RowContext);
   const {
-    checkboxClassName: customCheckboxClassName,
-    checkboxStyle: customCheckboxStyle
+    checkboxWrapperClassName,
+    checkboxWrapperStyle
   } = useContext(IndexTableCustomizationContext);
   const checkboxNode = useRef(null);
 
@@ -67,10 +72,10 @@ function CheckboxWrapper({
       window.removeEventListener('resize', handleResize);
     };
   }, [handleResize]);
-  const checkboxClassName = classNames(styles$1.TableCell, styles$1['TableCell-first'], customCheckboxClassName);
+  const checkboxClassName = classNames(styles$1.TableCell, styles$1['TableCell-first'], checkboxWrapperClassName);
   return /*#__PURE__*/React.createElement("td", {
     className: checkboxClassName,
-    style: customCheckboxStyle,
+    style: checkboxWrapperStyle,
     ref: checkboxNode
   }, children);
 }

package/build/esm/components/IndexTable/components/Row/Row.js

@@ -4,8 +4,8 @@ import { classNames, variationName } from '../../../../utilities/css.js';
 import styles from '../../IndexTable.css.js';
 import { useIndexRow, useIndexSelectionChange } from '../../../../utilities/index-provider/hooks.js';
 import { SelectionType } from '../../../../utilities/index-provider/types.js';
-import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.js';
 import { Cell } from '../Cell/Cell.js';
+import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.js';
 import { Checkbox } from '../Checkbox/Checkbox.js';
 
 const Row = /*#__PURE__*/memo(function Row({
@@ -36,7 +36,15 @@ const Row = /*#__PURE__*/memo(function Row({
   } = useToggle(false);
   const {
     rowClassName: customRowClassName,
-    rowStyle: customRowStyle
+    rowStyle: customRowStyle,
+    expandable: tableExpandable,
+    expandedRowIds,
+    toggleRowExpansion,
+    isRowExpandable: tableIsRowExpandable,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   } = useContext(IndexTableCustomizationContext);
   const handleInteraction = useCallback(event => {
     event.stopPropagation();
@@ -106,6 +114,26 @@ const Row = /*#__PURE__*/memo(function Row({
   const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell, null) : /*#__PURE__*/React.createElement(Checkbox, {
     accessibilityLabel: accessibilityLabel
   });
+  const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
+  const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
+  const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      toggleRowExpansion?.(id);
+    },
+    className: expandButtonClassName,
+    style: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '4px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...expandButtonStyle
+    },
+    "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
+  }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
   return /*#__PURE__*/React.createElement(RowContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(RowHoveredContext.Provider, {
@@ -119,7 +147,7 @@ const Row = /*#__PURE__*/memo(function Row({
     onMouseLeave: setHoverOut,
     onClick: handleRowClick,
     ref: tableRowCallbackRef
-  }, tableIsSelectable ? checkboxMarkup : null, children)));
+  }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
 });
 
 export { Row };

package/build/esm/styles.css

@@ -21,7 +21,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'13.10.2';
+  --polaris-version-number:'13.10.5-rc1';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;

package/build/esnext/components/AppProvider/global.out.css

@@ -21,7 +21,7 @@
 @keyframes p-motion-keyframes-appear-below{ from{ transform:translateY(calc(var(--p-space-100)*-1)); opacity:0; } to{ transform:none; opacity:1; } }
 
 :root{
-  --polaris-version-number:'13.10.2';
+  --polaris-version-number:'13.10.5-rc1';
 
   --pg-navigation-width:15rem;
   --pg-dangerous-magic-space-4:1rem;

package/build/esnext/components/IndexTable/IndexTable.esnext

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useCallback, useMemo, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useCallback, useMemo } from 'react';
 import { SortAscendingIcon, SortDescendingIcon } from '@shopify/polaris-icons';
 import { debounce } from '../../utilities/debounce.esnext';
 import { useToggle } from '../../utilities/use-toggle.esnext';
@@ -47,12 +47,24 @@ function IndexTableBase({
   sortToggleLabels,
   hasZebraStriping,
   pagination,
+  expandable,
+  expandedRowIds,
+  defaultExpandedRowIds,
+  onExpandedChange,
+  getRowChildren,
+  isRowExpandable,
+  expandIconCollapsed,
+  expandIconExpanded,
+  expandButtonClassName,
+  expandButtonStyle,
   rowClassName,
   rowStyle,
   cellClassName,
   cellStyle,
   checkboxClassName,
   checkboxStyle,
+  checkboxWrapperClassName,
+  checkboxWrapperStyle,
   ...restProps
 }) {
   const {
@@ -86,6 +98,38 @@ function IndexTableBase({
   const [tableInitialized, setTableInitialized] = useState(false);
   const [stickyWrapper, setStickyWrapper] = useState(null);
   const [hideScrollContainer, setHideScrollContainer] = useState(true);
+
+  // Expansion state
+  const [expandedRows, setExpandedRows] = useState(() => {
+    if (expandedRowIds) {
+      return new Set(expandedRowIds);
+    }
+    if (defaultExpandedRowIds) {
+      return new Set(defaultExpandedRowIds);
+    }
+    return new Set();
+  });
+
+  // Update expanded state when prop changes
+  useEffect(() => {
+    if (expandedRowIds !== undefined) {
+      setExpandedRows(new Set(expandedRowIds));
+    }
+  }, [expandedRowIds]);
+
+  // Toggle expansion
+  const toggleRowExpansion = useCallback(rowId => {
+    setExpandedRows(prev => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(rowId)) {
+        newExpanded.delete(rowId);
+      } else {
+        newExpanded.add(rowId);
+      }
+      onExpandedChange?.(Array.from(newExpanded));
+      return newExpanded;
+    });
+  }, [onExpandedChange]);
   const tableHeadings = useRef([]);
   const stickyTableHeadings = useRef([]);
   const stickyHeaderWrapperElement = useRef(null);
@@ -341,12 +385,56 @@ function IndexTableBase({
     event: "resize",
     handler: handleResize
   }), stickyHeaderMarkup);
+
+  // Process children to insert child rows for expanded rows
+  const processedChildren = useMemo(() => {
+    if (!expandable || !getRowChildren) {
+      return children;
+    }
+    const result = [];
+    let position = 0;
+    React.Children.forEach(children, child => {
+      if (/*#__PURE__*/React.isValidElement(child) && child.type === Row) {
+        const rowId = child.props.id;
+        const isExpanded = expandedRows.has(rowId);
+
+        // Clone the row with updated position
+        const updatedRow = /*#__PURE__*/React.cloneElement(child, {
+          ...child.props,
+          position
+        });
+        result.push(updatedRow);
+        position++;
+
+        // Add child rows if expanded
+        if (isExpanded) {
+          const childRows = getRowChildren(rowId);
+          if (childRows && childRows.length > 0) {
+            childRows.forEach((childRow, index) => {
+              if (/*#__PURE__*/React.isValidElement(childRow)) {
+                result.push(/*#__PURE__*/React.cloneElement(childRow, {
+                  ...childRow.props,
+                  key: `${rowId}-child-${index}`,
+                  position,
+                  rowType: 'child'
+                }));
+                position++;
+              }
+            });
+          }
+        }
+      } else {
+        result.push(child);
+      }
+    });
+    return result;
+  }, [children, expandable, expandedRows, getRowChildren]);
   const condensedClassNames = classNames(styles.CondensedList, hasZebraStriping && styles.ZebraStriping);
   const bodyMarkup = condensed ? /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement("ul", {
     "data-selectmode": Boolean(selectMode),
     className: condensedClassNames,
     ref: condensedListElement
-  }, children)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
+  }, processedChildren)) : /*#__PURE__*/React.createElement(React.Fragment, null, sharedMarkup, /*#__PURE__*/React.createElement(ScrollContainer, {
     scrollableContainerRef: scrollableContainerElement,
     onScroll: handleScrollContainerScroll
   }, /*#__PURE__*/React.createElement("table", {
@@ -356,23 +444,34 @@ function IndexTableBase({
     className: styles.HeadingRow
   }, headingsMarkup)), /*#__PURE__*/React.createElement("tbody", {
     ref: tableBodyRef
-  }, children))));
+  }, processedChildren))));
   const tableContentMarkup = itemCount > 0 ? bodyMarkup : /*#__PURE__*/React.createElement("div", {
     className: styles.EmptySearchResultWrapper
   }, emptyStateMarkup);
-  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
-    className: styles.PaginationWrapper
-  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
-    type: "table"
-  }, pagination))) : null;
   const customizationContextValue = {
     rowClassName,
     rowStyle,
     cellClassName,
     cellStyle,
     checkboxClassName,
-    checkboxStyle
+    checkboxStyle,
+    checkboxWrapperClassName,
+    checkboxWrapperStyle,
+    expandable,
+    expandedRowIds: expandedRows,
+    toggleRowExpansion,
+    isRowExpandable,
+    getRowChildren,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   };
+  const paginationMarkup = pagination ? /*#__PURE__*/React.createElement("div", {
+    className: styles.PaginationWrapper
+  }, /*#__PURE__*/React.createElement(Pagination, Object.assign({
+    type: "table"
+  }, pagination))) : null;
   return /*#__PURE__*/React.createElement(IndexTableCustomizationContext.Provider, {
     value: customizationContextValue
   }, /*#__PURE__*/React.createElement("div", {

package/build/esnext/components/IndexTable/components/Checkbox/Checkbox.esnext

@@ -25,8 +25,13 @@ const Checkbox = /*#__PURE__*/memo(function Checkbox({
   const label = accessibilityLabel ? accessibilityLabel : i18n.translate('Polaris.IndexTable.selectItem', {
     resourceName: resourceName.singular
   });
+  const {
+    checkboxClassName: customCheckboxClassName,
+    checkboxStyle: customCheckboxStyle
+  } = useContext(IndexTableCustomizationContext);
   return /*#__PURE__*/React.createElement(CheckboxWrapper, null, /*#__PURE__*/React.createElement("div", {
-    className: styles.Wrapper,
+    className: classNames(styles.Wrapper, customCheckboxClassName),
+    style: customCheckboxStyle,
     onClick: onInteraction,
     onKeyUp: noop
   }, /*#__PURE__*/React.createElement(Checkbox$1, {
@@ -44,8 +49,8 @@ function CheckboxWrapper({
     position
   } = useContext(RowContext);
   const {
-    checkboxClassName: customCheckboxClassName,
-    checkboxStyle: customCheckboxStyle
+    checkboxWrapperClassName,
+    checkboxWrapperStyle
   } = useContext(IndexTableCustomizationContext);
   const checkboxNode = useRef(null);
 
@@ -67,10 +72,10 @@ function CheckboxWrapper({
       window.removeEventListener('resize', handleResize);
     };
   }, [handleResize]);
-  const checkboxClassName = classNames(styles$1.TableCell, styles$1['TableCell-first'], customCheckboxClassName);
+  const checkboxClassName = classNames(styles$1.TableCell, styles$1['TableCell-first'], checkboxWrapperClassName);
   return /*#__PURE__*/React.createElement("td", {
     className: checkboxClassName,
-    style: customCheckboxStyle,
+    style: checkboxWrapperStyle,
     ref: checkboxNode
   }, children);
 }

package/build/esnext/components/IndexTable/components/Row/Row.esnext

@@ -4,8 +4,8 @@ import { classNames, variationName } from '../../../../utilities/css.esnext';
 import styles from '../../IndexTable.css.esnext';
 import { useIndexRow, useIndexSelectionChange } from '../../../../utilities/index-provider/hooks.esnext';
 import { SelectionType } from '../../../../utilities/index-provider/types.esnext';
-import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.esnext';
 import { Cell } from '../Cell/Cell.esnext';
+import { IndexTableCustomizationContext, RowContext, RowHoveredContext } from '../../../../utilities/index-table/context.esnext';
 import { Checkbox } from '../Checkbox/Checkbox.esnext';
 
 const Row = /*#__PURE__*/memo(function Row({
@@ -36,7 +36,15 @@ const Row = /*#__PURE__*/memo(function Row({
   } = useToggle(false);
   const {
     rowClassName: customRowClassName,
-    rowStyle: customRowStyle
+    rowStyle: customRowStyle,
+    expandable: tableExpandable,
+    expandedRowIds,
+    toggleRowExpansion,
+    isRowExpandable: tableIsRowExpandable,
+    expandIconCollapsed,
+    expandIconExpanded,
+    expandButtonClassName,
+    expandButtonStyle
   } = useContext(IndexTableCustomizationContext);
   const handleInteraction = useCallback(event => {
     event.stopPropagation();
@@ -106,6 +114,26 @@ const Row = /*#__PURE__*/memo(function Row({
   const checkboxMarkup = hideSelectable ? /*#__PURE__*/React.createElement(Cell, null) : /*#__PURE__*/React.createElement(Checkbox, {
     accessibilityLabel: accessibilityLabel
   });
+  const isRowExpandable = tableIsRowExpandable ? tableIsRowExpandable(id) : false;
+  const isExpanded = expandedRowIds ? expandedRowIds.has(id) : false;
+  const expandButton = tableExpandable && isRowExpandable ? /*#__PURE__*/React.createElement(Cell, null, /*#__PURE__*/React.createElement("button", {
+    onClick: e => {
+      e.stopPropagation();
+      toggleRowExpansion?.(id);
+    },
+    className: expandButtonClassName,
+    style: {
+      background: 'none',
+      border: 'none',
+      cursor: 'pointer',
+      padding: '4px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...expandButtonStyle
+    },
+    "aria-label": isExpanded ? 'Collapse row' : 'Expand row'
+  }, isExpanded ? expandIconExpanded || '▼' : expandIconCollapsed || '▶')) : null;
   return /*#__PURE__*/React.createElement(RowContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement(RowHoveredContext.Provider, {
@@ -119,7 +147,7 @@ const Row = /*#__PURE__*/memo(function Row({
     onMouseLeave: setHoverOut,
     onClick: handleRowClick,
     ref: tableRowCallbackRef
-  }, tableIsSelectable ? checkboxMarkup : null, children)));
+  }, expandButton, tableIsSelectable ? checkboxMarkup : null, children)));
 });
 
 export { Row };

package/build/ts/src/components/IndexTable/IndexTable.d.ts

@@ -76,6 +76,26 @@ export interface IndexTableBaseProps {
     hasZebraStriping?: boolean;
     /** Properties to enable pagination at the bottom of the table. */
     pagination?: IndexTablePaginationProps;
+    /** Enable expandable rows */
+    expandable?: boolean;
+    /** IDs of expanded rows */
+    expandedRowIds?: string[];
+    /** Default expanded row IDs */
+    defaultExpandedRowIds?: string[];
+    /** Callback when expanded rows change */
+    onExpandedChange?: (expandedRowIds: string[]) => void;
+    /** Callback to get child rows for a row ID */
+    getRowChildren?: (rowId: string) => React.ReactNode[];
+    /** Callback to determine if a row is expandable */
+    isRowExpandable?: (rowId: string) => boolean;
+    /** Custom expand icon for collapsed state */
+    expandIconCollapsed?: React.ReactNode;
+    /** Custom expand icon for expanded state */
+    expandIconExpanded?: React.ReactNode;
+    /** Custom class name for expand button */
+    expandButtonClassName?: string;
+    /** Custom styles for expand button */
+    expandButtonStyle?: React.CSSProperties;
     /** Custom class name for all rows */
     rowClassName?: string;
     /** Custom styles for all rows */
@@ -88,6 +108,8 @@ export interface IndexTableBaseProps {
     checkboxClassName?: string;
     /** Custom styles for all checkboxes */
     checkboxStyle?: React.CSSProperties;
+    checkboxWrapperClassName?: string;
+    checkboxWrapperStyle?: React.CSSProperties;
 }
 export interface TableHeadingRect {
     offsetWidth: number;

package/build/ts/src/components/IndexTable/IndexTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IndexTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/IndexTable/IndexTable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"IndexTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/IndexTable/IndexTable.tsx"],"names":[],"mappings":"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"}

package/build/ts/src/components/IndexTable/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IndexTable/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,UAAU,aAAa;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,2CA0BnB,CAAC;AAEH,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAAC,QAAQ,EAAC,EAAE,oBAAoB,qBAwC/D"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/IndexTable/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAC9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAarC,UAAU,aAAa;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,QAAQ,2CA4BnB,CAAC;AAEH,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,EAAC,QAAQ,EAAC,EAAE,oBAAoB,qBAwC/D"}

package/build/ts/src/components/IndexTable/components/Row/Row.d.ts

@@ -31,6 +31,14 @@ export interface RowProps {
     onNavigation?(id: string): void;
     /** Callback fired when the row is clicked. Overrides the default click behaviour. */
     onClick?(): void;
+    /** @deprecated Use IndexTable expandable props instead */
+    expandable?: boolean;
+    /** @deprecated Use IndexTable expandable props instead */
+    expanded?: boolean;
+    /** @deprecated Use IndexTable expandable props instead */
+    onToggleExpansion?(): void;
+    /** @deprecated Use IndexTable expandable props instead */
+    expandIcon?: React.ReactNode;
 }
 export declare const Row: React.NamedExoticComponent<RowProps>;
 export {};

package/build/ts/src/components/IndexTable/components/Row/Row.d.ts.map

@@ -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"}
+{"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"}

package/build/ts/src/utilities/index-table/context.d.ts

@@ -26,6 +26,18 @@ export interface IndexTableCustomizationContextType {
     cellStyle?: React.CSSProperties;
     checkboxClassName?: string;
     checkboxStyle?: React.CSSProperties;
+    checkboxWrapperClassName?: string;
+    checkboxWrapperStyle?: React.CSSProperties;
+    expandable?: boolean;
+    expandedRowIds?: Set<string>;
+    toggleRowExpansion?: (rowId: string) => void;
+    isRowExpandable?: (rowId: string) => boolean;
+    getRowChildren?: (rowId: string) => React.ReactNode[];
+    expandIcon?: React.ReactNode;
+    expandIconCollapsed?: React.ReactNode;
+    expandIconExpanded?: React.ReactNode;
+    expandButtonClassName?: string;
+    expandButtonStyle?: React.CSSProperties;
 }
 export declare const IndexTableCustomizationContext: import("react").Context<IndexTableCustomizationContextType>;
 export {};

package/build/ts/src/utilities/index-table/context.d.ts.map

@@ -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;CACrC;AAED,eAAO,MAAM,8BAA8B,6DACY,CAAC"}
+{"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,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,EAAE,CAAC;IACtD,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

@@ -1,7 +1,7 @@
 {
   "name": "polaris-react-extended",
   "description": "Shopify’s admin product component library",
-  "version": "13.10.4",
+  "version": "13.10.5-rc1",
   "private": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Shopify <dev@shopify.com>",