@primer/components 31.2.0-rc.6afeaa37 → 31.2.0-rc.76ed571d

package/docs/content/ActionList2.mdx

@@ -7,7 +7,7 @@ description: An ActionList is a list of items which can be activated or selected
 ---
 
 import {BorderBox, Avatar} from '@primer/components'
-import {ActionList} from '@primer/components/unreleased'
+import {ActionList} from '@primer/components/drafts'
 import {Props} from '../src/props'
 
 import {ImageContainer} from '@primer/gatsby-theme-doctocat'
@@ -48,7 +48,7 @@ import {LinkIcon, AlertIcon, ArrowRightIcon} from '@primer/octicons-react'
 <br />
 
 ```js
-import {ActionList} from '@primer/components/unreleased'
+import {ActionList} from '@primer/components/drafts'
 ```
 
 <br />
@@ -58,7 +58,8 @@ import {ActionList} from '@primer/components/unreleased'
 ## Minimal example
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionList>
@@ -79,7 +80,8 @@ Leading visuals are optional and appear at the start of an item. They can be oct
 
 <!-- prettier-ignore -->
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionList>
@@ -106,7 +108,8 @@ render(
 Trailing visual and trailing text can display auxiliary information. They're placed at the right of the item, and can denote status, keyboard shortcuts, or be used to set expectations about what the action does.
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionList>
@@ -137,7 +140,8 @@ render(
 Item dividers allow users to parse heavier amounts of information. They're placed between items and are useful in complex lists, particularly when descriptions or multi-line text is present.
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionList showDividers>
@@ -172,7 +176,8 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
 
 <!-- prettier-ignore -->
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 render(
   <ActionList>
@@ -207,7 +212,8 @@ render(
 ## With Groups
 
 ```javascript live noinline
-const {ActionList} = unreleased
+// import {ActionList} from '@primer/components/drafts'
+const {ActionList} = drafts // ignore docs silliness; import like that ↑
 
 const SelectFields = () => {
   const [options, setOptions] = React.useState([

package/docs/content/StateLabel.md

@@ -14,6 +14,7 @@ Use StateLabel components to show the status of an issue or pull request.
   <StateLabel status="pullClosed">Closed</StateLabel>
   <StateLabel status="pullMerged">Merged</StateLabel>
   <StateLabel status="draft">Draft</StateLabel>
+  <StateLabel status="issueDraft">Draft</StateLabel>
 </>
 ```
 
@@ -29,7 +30,7 @@ StateLabel components get `COMMON` system props. Read our [System Props](/system
 
 ## Component props
 
-| Name    | Type   | Default  | Description                                                                                       |
-| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------ |
-| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.          |
-| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, or `draft`. |
+| Name    | Type   | Default  | Description                                                                                                    |
+| :------ | :----- | :------: | :------------------------------------------------------------------------------------------------------------- |
+| variant | String | 'normal' | a value of `small` or `normal` results in a smaller or larger version of the StateLabel.                       |
+| status  | String |          | Can be one of `issueOpened`, `issueClosed`, `pullOpened`, `pullClosed`, `pullMerged`, `draft` or `issueDraft`. |

package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import * as primerComponents from '@primer/components'
-import * as unreleased from '@primer/components/unreleased'
+import * as drafts from '@primer/components/drafts'
 import * as doctocatComponents from '@primer/gatsby-theme-doctocat'
 import {
   CheckIcon,
@@ -40,7 +40,7 @@ const ReactRouterLink = ({to, ...props}) => {
 export default {
   ...doctocatComponents,
   ...primerComponents,
-  unreleased,
+  drafts,
   ReactRouterLink,
   State,
   CheckIcon,

package/lib/ActionList/Divider.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = exports.StyledDivider = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+exports.StyledDivider = styled_components_1.default.div `
+  height: 1px;
+  background: ${constants_1.get('colors.border.muted')};
+  margin-top: calc(${constants_1.get('space.2')} - 1px);
+  margin-bottom: ${constants_1.get('space.2')};
+`;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+    return <exports.StyledDivider />;
+}
+exports.Divider = Divider;
+/**
+ * `Divider` fulfills the `ItemPropsWithCustomRenderer` contract,
+ * so it can be used inline in an `ActionList`’s `items` prop.
+ * In other words, `items={[ActionList.Divider]}` is supported as a concise
+ * alternative to `items={[{renderItem: () => <ActionList.Divider />}]}`.
+ */
+Divider.renderItem = Divider;

package/lib/ActionList/Group.jsx

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const sx_1 = __importDefault(require("../sx"));
+const Header_1 = require("./Header");
+const StyledGroup = styled_components_1.default.div `
+  ${sx_1.default}
+`;
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+function Group({ header, items, ...props }) {
+    return (<StyledGroup {...props}>
+      {header && <Header_1.Header {...header}/>}
+      {items}
+    </StyledGroup>);
+}
+exports.Group = Group;

package/lib/ActionList/Header.jsx

@@ -0,0 +1,66 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = exports.StyledHeader = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+exports.StyledHeader = styled_components_1.default.div `
+   {
+    /* 6px vertical padding + 20px line height = 32px total height
+     *
+     * TODO: When rem-based spacing on a 4px scale lands, replace
+     * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
+     */
+  }
+  padding: 6px ${constants_1.get('space.3')};
+  font-size: ${constants_1.get('fontSizes.0')};
+  font-weight: ${constants_1.get('fontWeights.bold')};
+  color: ${constants_1.get('colors.fg.muted')};
+
+  ${({ variant }) => variant === 'filled' &&
+    styled_components_1.css `
+      background: ${constants_1.get('colors.canvas.subtle')};
+      margin: ${constants_1.get('space.2')} 0;
+      border-top: 1px solid ${constants_1.get('colors.neutral.muted')};
+      border-bottom: 1px solid ${constants_1.get('colors.neutral.muted')};
+
+      &:first-child {
+        margin-top: 0;
+      }
+    `}
+
+  ${sx_1.default}
+`;
+/**
+ * Displays the name and description of a `Group`.
+ */
+function Header({ variant = 'subtle', title, auxiliaryText, children: _children, ...props }) {
+    return (<exports.StyledHeader role="heading" variant={variant} {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </exports.StyledHeader>);
+}
+exports.Header = Header;

package/lib/ActionList/Item.jsx

@@ -0,0 +1,301 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = exports.TextContainer = void 0;
+const octicons_react_1 = require("@primer/octicons-react");
+const react_1 = __importStar(require("react"));
+const constants_1 = require("../constants");
+const sx_1 = __importDefault(require("../sx"));
+const Truncate_1 = __importDefault(require("../Truncate"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Header_1 = require("./Header");
+const Divider_1 = require("./Divider");
+const ThemeProvider_1 = require("../ThemeProvider");
+const focusZone_1 = require("../behaviors/focusZone");
+const ssr_1 = require("@react-aria/ssr");
+/**
+ * These colors are not yet in our default theme.  Need to remove this once they are added.
+ */
+const customItemThemes = {
+    default: {
+        hover: {
+            light: 'rgba(46, 77, 108, 0.06)',
+            dark: 'rgba(201, 206, 212, 0.12)',
+            dark_dimmed: 'rgba(201, 206, 212, 0.12)'
+        },
+        focus: {
+            light: 'rgba(54, 77, 100, 0.16)',
+            dark: 'rgba(201, 206, 212, 0.24)',
+            dark_dimmed: 'rgba(201, 206, 212, 0.24)'
+        }
+    },
+    danger: {
+        hover: {
+            light: 'rgba(234, 74, 90, 0.08)',
+            dark: 'rgba(248, 81, 73, 0.16)',
+            dark_dimmed: 'rgba(248, 81, 73, 0.16)'
+        },
+        focus: {
+            light: 'rgba(234, 74, 90, 0.14)',
+            dark: 'rgba(248, 81, 73, 0.24)',
+            dark_dimmed: 'rgba(248, 81, 73, 0.24)'
+        }
+    }
+};
+const getItemVariant = (variant = 'default', disabled) => {
+    if (disabled) {
+        return {
+            color: constants_1.get('colors.primer.fg.disabled'),
+            iconColor: constants_1.get('colors.primer.fg.disabled'),
+            annotationColor: constants_1.get('colors.primer.fg.disabled'),
+            hoverCursor: 'default'
+        };
+    }
+    switch (variant) {
+        case 'danger':
+            return {
+                color: constants_1.get('colors.danger.fg'),
+                iconColor: constants_1.get('colors.danger.fg'),
+                annotationColor: constants_1.get('colors.fg.muted'),
+                hoverCursor: 'pointer'
+            };
+        default:
+            return {
+                color: constants_1.get('colors.fg.default'),
+                iconColor: constants_1.get('colors.fg.muted'),
+                annotationColor: constants_1.get('colors.fg.muted'),
+                hoverCursor: 'pointer'
+            };
+    }
+};
+const DividedContent = styled_components_1.default.div `
+  display: flex;
+  min-width: 0;
+
+  /* Required for dividers */
+  position: relative;
+  flex-grow: 1;
+`;
+const MainContent = styled_components_1.default.div `
+  align-items: baseline;
+  display: flex;
+  min-width: 0;
+  flex-direction: var(--main-content-flex-direction);
+  flex-grow: 1;
+`;
+const StyledItem = styled_components_1.default.div `
+  /* 6px vertical padding + 20px line height = 32px total height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '6px' with 'calc((${constants_1.get('space.s32')} - ${constants_1.get('space.20')}) / 2)'.
+   */
+  padding: 6px ${constants_1.get('space.2')};
+  display: flex;
+  border-radius: ${constants_1.get('radii.2')};
+  color: ${({ variant, item }) => getItemVariant(variant, item?.disabled).color};
+  // 2 frames on a 60hz monitor
+  transition: background 33.333ms linear;
+  text-decoration: none;
+
+  @media (hover: hover) and (pointer: fine) {
+    :hover {
+      // allow override in case another item in the list is active/focused
+      background: var(--item-hover-bg-override, ${({ hoverBackground }) => hoverBackground});
+      cursor: ${({ variant, item }) => getItemVariant(variant, item?.disabled).hoverCursor};
+    }
+  }
+
+  // Item dividers
+  :not(:first-of-type):not(${Divider_1.StyledDivider} + &):not(${Header_1.StyledHeader} + &) {
+    margin-top: ${({ showDivider }) => (showDivider ? `1px` : '0')};
+
+    ${DividedContent}::before {
+      content: ' ';
+      display: block;
+      position: absolute;
+      width: 100%;
+      top: -7px;
+      // NB: This 'get' won’t execute if it’s moved into the arrow function below.
+      border: 0 solid ${constants_1.get('colors.border.muted')};
+      border-top-width: ${({ showDivider }) => (showDivider ? `1px` : '0')};
+    }
+  }
+
+  // Item dividers should not be visible:
+  // - above Hovered
+  &:hover ${DividedContent}::before,
+  // - below Hovered
+  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
+  :hover + * ${DividedContent}::before {
+    // allow override in case another item in the list is active/focused
+    border-color: var(--item-hover-divider-border-color-override, transparent) !important;
+  }
+
+  // - above Focused
+  &:focus ${DividedContent}::before,
+  // - below Focused
+  // '*' instead of '&' because '&' maps to separate class names depending on 'variant'
+  :focus + * ${DividedContent}::before,
+  // - above Active Descendent
+  &[${focusZone_1.isActiveDescendantAttribute}] ${DividedContent}::before,
+  // - below Active Descendent
+  [${focusZone_1.isActiveDescendantAttribute}] + & ${DividedContent}::before {
+    // '!important' because all the ':not's above give higher specificity
+    border-color: transparent !important;
+  }
+
+  // Active Descendant
+  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedDirectly}'] {
+    background: ${({ focusBackground }) => focusBackground};
+  }
+  &[${focusZone_1.isActiveDescendantAttribute}='${focusZone_1.activeDescendantActivatedIndirectly}'] {
+    background: ${({ hoverBackground }) => hoverBackground};
+  }
+
+  &:focus {
+    background: ${({ focusBackground }) => focusBackground};
+    outline: none;
+  }
+
+  &:active {
+    background: ${({ focusBackground }) => focusBackground};
+  }
+
+  ${sx_1.default}
+`;
+exports.TextContainer = styled_components_1.default.span ``;
+const BaseVisualContainer = styled_components_1.default.div `
+  // Match visual height to adjacent text line height.
+  // TODO: When rem-based spacing on a 4px scale lands, replace
+  // hardcoded '20px' with '${constants_1.get('space.s20')}'.
+  height: 20px;
+  width: ${constants_1.get('space.3')};
+  margin-right: ${constants_1.get('space.2')};
+`;
+const ColoredVisualContainer = styled_components_1.default(BaseVisualContainer) `
+  svg {
+    fill: ${({ variant, disabled }) => getItemVariant(variant, disabled).iconColor};
+    font-size: ${constants_1.get('fontSizes.0')};
+  }
+`;
+const LeadingVisualContainer = styled_components_1.default(ColoredVisualContainer) `
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+`;
+const TrailingContent = styled_components_1.default(ColoredVisualContainer) `
+  color: ${({ variant, disabled }) => getItemVariant(variant, disabled).annotationColor}};
+  margin-left: ${constants_1.get('space.2')};
+  margin-right: 0;
+  width: auto;
+  div:nth-child(2) {
+    margin-left: ${constants_1.get('space.2')};
+  }
+`;
+const DescriptionContainer = styled_components_1.default.span `
+  color: ${constants_1.get('colors.fg.muted')};
+  font-size: ${constants_1.get('fontSizes.0')};
+  // TODO: When rem-based spacing on a 4px scale lands, replace
+  // hardcoded '16px' with '${constants_1.get('lh-12')}'.
+  line-height: 16px;
+  margin-left: var(--description-container-margin-left);
+  min-width: 0;
+  flex-grow: 1;
+  flex-basis: var(--description-container-flex-basis);
+`;
+const MultiSelectInput = styled_components_1.default.input `
+  pointer-events: none;
+`;
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+exports.Item = react_1.default.forwardRef((itemProps, ref) => {
+    const { as: Component, text, description, descriptionVariant = 'inline', selected, selectionVariant, leadingVisual: LeadingVisual, trailingIcon: TrailingIcon, trailingVisual: TrailingVisual, trailingText, variant = 'default', showDivider, disabled, onAction, onKeyPress, children, onClick, id, ...props } = itemProps;
+    const labelId = ssr_1.useSSRSafeId();
+    const descriptionId = ssr_1.useSSRSafeId();
+    const keyPressHandler = react_1.useCallback(event => {
+        if (disabled) {
+            return;
+        }
+        onKeyPress?.(event);
+        const isCheckbox = event.target instanceof HTMLInputElement && event.target.type === 'checkbox';
+        if (isCheckbox && event.key === ' ') {
+            // space key on a checkbox will also trigger a click event.  Ignore the space key so we don't get double events
+            return;
+        }
+        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+            onAction?.(itemProps, event);
+        }
+    }, [onAction, disabled, itemProps, onKeyPress]);
+    const clickHandler = react_1.useCallback(event => {
+        if (disabled) {
+            return;
+        }
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+            onAction?.(itemProps, event);
+        }
+    }, [onAction, disabled, itemProps, onClick]);
+    const customItemTheme = customItemThemes[variant];
+    const hoverBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.hover, 'inherit');
+    const focusBackground = ThemeProvider_1.useColorSchemeVar(customItemTheme.focus, 'inherit');
+    const { theme } = ThemeProvider_1.useTheme();
+    return (<StyledItem ref={ref} as={Component} tabIndex={disabled ? undefined : -1} variant={variant} showDivider={showDivider} aria-selected={selected} aria-labelledby={text ? labelId : undefined} aria-describedby={description ? descriptionId : undefined} {...props} data-id={id} onKeyPress={keyPressHandler} onClick={clickHandler} hoverBackground={disabled ? 'inherit' : hoverBackground} focusBackground={disabled ? 'inherit' : focusBackground}>
+      {!!selected === selected && (<BaseVisualContainer>
+          {selectionVariant === 'multiple' ? (<>
+              {/*
+                 * readOnly is required because we are doing a one-way bind to `checked`.
+                 * aria-readonly="false" tells screen that they can still interact with the checkbox
+                 */}
+              <MultiSelectInput disabled={disabled} tabIndex={-1} type="checkbox" checked={selected} aria-label={text} readOnly aria-readonly="false"/>
+            </>) : (selected && <octicons_react_1.CheckIcon fill={theme?.colors.fg.default}/>)}
+        </BaseVisualContainer>)}
+      {LeadingVisual && (<LeadingVisualContainer variant={variant} disabled={disabled}>
+          <LeadingVisual />
+        </LeadingVisualContainer>)}
+      <DividedContent>
+        <MainContent style={{ '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column' }}>
+          {children}
+          {text ? <exports.TextContainer id={labelId}>{text}</exports.TextContainer> : null}
+          {description ? (<DescriptionContainer id={descriptionId} style={{
+                '--description-container-margin-left': descriptionVariant === 'inline' ? constants_1.get('space.2')(theme) : 0,
+                '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
+            }}>
+              {descriptionVariant === 'block' ? (description) : (<Truncate_1.default title={description} inline={true} maxWidth="100%">
+                  {description}
+                </Truncate_1.default>)}
+            </DescriptionContainer>) : null}
+        </MainContent>
+        {/* backward compatibility: prefer TrailingVisual but fallback to TrailingIcon */}
+        {TrailingVisual ? (<TrailingContent variant={variant} disabled={disabled}>
+            {typeof TrailingVisual === 'function' ? <TrailingVisual /> : TrailingVisual}
+          </TrailingContent>) : TrailingIcon || trailingText ? (<TrailingContent variant={variant} disabled={disabled}>
+            {trailingText}
+            {TrailingIcon && <TrailingIcon />}
+          </TrailingContent>) : null}
+      </DividedContent>
+    </StyledItem>);
+});
+exports.Item.displayName = 'ActionList.Item';

package/lib/ActionList/List.jsx

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const react_1 = __importDefault(require("react"));
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const focusZone_1 = require("../behaviors/focusZone");
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props) {
+    return 'groupMetadata' in props;
+}
+const StyledList = styled_components_1.default.div `
+  font-size: ${constants_1.get('fontSizes.1')};
+  /* 14px font-size * 1.428571429 = 20px line height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '20px'
+   */
+  line-height: 20px;
+
+  &[${focusZone_1.hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${constants_1.get('colors.border.muted')};
+  }
+`;
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+function useListVariant(variant = 'inset') {
+    switch (variant) {
+        case 'full':
+            return {
+                headerStyle: { paddingX: constants_1.get('space.2') },
+                itemStyle: { borderRadius: 0 }
+            };
+        default:
+            return {
+                firstGroupStyle: { marginTop: constants_1.get('space.2') },
+                lastGroupStyle: { marginBottom: constants_1.get('space.2') },
+                itemStyle: { marginX: constants_1.get('space.2') }
+            };
+    }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+exports.List = react_1.default.forwardRef((props, forwardedRef) => {
+    // Get `sx` prop values for `List` children matching the given `List` style variation.
+    const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(props.variant);
+    /**
+     * Render a `Group` using the first of the following renderers that is defined:
+     * A `Group`-level or `List`-level custom `Group` renderer, or
+     * the default `Group` renderer.
+     */
+    const renderGroup = (groupProps) => {
+        const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group_1.Group;
+        return <GroupComponent {...groupProps} key={groupProps.groupId}/>;
+    };
+    /**
+     * Render an `Item` using the first of the following renderers that is defined:
+     * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+     * or the default `Item` renderer.
+     */
+    const renderItem = (itemProps, item, itemIndex) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item_1.Item;
+        const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString();
+        return (<ItemComponent showDivider={props.showItemDividers} selectionVariant={props.selectionVariant} {...itemProps} key={key} sx={{ ...itemStyle, ...itemProps.sx }} item={item}/>);
+    };
+    /**
+     * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+     */
+    let groups = [];
+    // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+    if (!isGroupedListProps(props)) {
+        // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+        groups = [{ items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0' }];
+    }
+    else {
+        // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+        /**
+         * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+         */
+        const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+        for (const itemProps of props.items) {
+            // Look up the group associated with the current item.
+            const group = groupMap.get(itemProps.groupId);
+            const itemIndex = group?.items?.length ?? 0;
+            // Upsert the group to include the current item (rendered).
+            groupMap.set(itemProps.groupId, {
+                ...group,
+                items: [
+                    ...(group?.items ?? []),
+                    renderItem({
+                        showDivider: group?.showItemDividers,
+                        ...(group && 'renderItem' in group && { renderItem: group.renderItem }),
+                        ...itemProps
+                    }, itemProps, itemIndex)
+                ]
+            });
+        }
+        groups = [...groupMap.values()];
+    }
+    return (<StyledList {...props} ref={forwardedRef}>
+      {groups.map(({ header, ...groupProps }, index) => {
+            const hasFilledHeader = header?.variant === 'filled';
+            const shouldShowDivider = index > 0 && !hasFilledHeader;
+            return (<react_1.default.Fragment key={groupProps.groupId}>
+            {shouldShowDivider ? <Divider_1.Divider key={`${groupProps.groupId}-divider`}/> : null}
+            {renderGroup({
+                    sx: {
+                        ...(index === 0 && firstGroupStyle),
+                        ...(index === groups.length - 1 && lastGroupStyle),
+                        ...(index > 0 && !shouldShowDivider && { mt: 2 })
+                    },
+                    ...(header && {
+                        header: {
+                            ...header,
+                            sx: { ...headerStyle, ...header.sx }
+                        }
+                    }),
+                    ...groupProps
+                })}
+          </react_1.default.Fragment>);
+        })}
+    </StyledList>);
+});
+exports.List.displayName = 'ActionList';