@primer/components 0.0.0-2021111171525 → 0.0.0-20211111716

package/lib-esm/ActionList/Header.js

@@ -0,0 +1,33 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { get } from '../constants';
+import sx from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+
+export const StyledHeader = styled.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "qmofje-0"
+})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
+  variant
+}) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);
+/**
+ * Displays the name and description of a `Group`.
+ */
+
+export function Header({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  children: _children,
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(StyledHeader, _extends({
+    role: "heading",
+    variant: variant
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+}
+Header.displayName = "Header";

package/lib-esm/ActionList/Item.d.ts

@@ -0,0 +1,98 @@
+import { IconProps } from '@primer/octicons-react';
+import React from 'react';
+import { SxProp } from '../sx';
+import { ItemInput } from './List';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { AriaRole } from '../utils/types';
+/**
+ * Contract for props passed to the `Item` component.
+ */
+export interface ItemProps extends SxProp {
+    /**
+     * Primary text which names an `Item`.
+     */
+    text?: string;
+    /**
+     * Secondary text which provides additional information about an `Item`.
+     */
+    description?: string;
+    /**
+     * Secondary text style variations. Usage is discretionary.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    descriptionVariant?: 'inline' | 'block';
+    /**
+     * Icon (or similar) positioned before `Item` text.
+     */
+    leadingVisual?: React.FunctionComponent<IconProps>;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Icon (or similar) positioned after `Item` text.
+     */
+    trailingIcon?: React.FunctionComponent<IconProps>;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Text positioned after `Item` text and optional trailing icon.
+     */
+    trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
+    /**
+     * Style variations associated with various `Item` types.
+     *
+     * - `"default"` - An action `Item`.
+     * - `"danger"` - A destructive action `Item`.
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * Whether to display a divider above the `Item` when it does not follow a `Header` or `Divider`.
+     */
+    showDivider?: boolean;
+    /**
+     * For `Item`s which can be selected, whether the `Item` is currently selected.
+     */
+    selected?: boolean;
+    /**
+     *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Designates the group that an item belongs to.
+     */
+    groupId?: string;
+    /**
+     * Items that are disabled can not be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onAction?: (item: ItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * An id associated with this item.  Should be unique between items
+     */
+    id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
+}
+export declare const TextContainer: import("styled-components").StyledComponent<"span", any, {
+    dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML'];
+}, never>;
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+export declare const Item: PolymorphicForwardRefComponent<"div", ItemProps>;

package/lib-esm/ActionList/Item.js

@@ -0,0 +1,241 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import { CheckIcon } from '@primer/octicons-react';
+import React, { useCallback } from 'react';
+import { get } from '../constants';
+import sx from '../sx';
+import Truncate from '../Truncate';
+import styled from 'styled-components';
+import { StyledHeader } from './Header';
+import { StyledDivider } from './Divider';
+import { useTheme } from '../ThemeProvider';
+import { activeDescendantActivatedDirectly, activeDescendantActivatedIndirectly, isActiveDescendantAttribute } from '../behaviors/focusZone';
+import { useSSRSafeId } from '@react-aria/ssr';
+
+const getItemVariant = (variant = 'default', disabled) => {
+  if (disabled) {
+    return {
+      color: get('colors.primer.fg.disabled'),
+      iconColor: get('colors.primer.fg.disabled'),
+      annotationColor: get('colors.primer.fg.disabled'),
+      hoverCursor: 'default'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: get('colors.danger.fg'),
+        iconColor: get('colors.danger.fg'),
+        annotationColor: get('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.danger.hoverBg'),
+        focusBg: get('colors.actionListItem.danger.activeBg'),
+        hoverText: get('colors.actionListItem.danger.hoverText')
+      };
+
+    default:
+      return {
+        color: get('colors.fg.default'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: get('colors.actionListItem.default.hoverBg'),
+        focusBg: get('colors.actionListItem.default.activeBg')
+      };
+  }
+};
+
+const DividedContent = styled.div.withConfig({
+  displayName: "Item__DividedContent",
+  componentId: "jqpvy8-0"
+})(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
+const MainContent = styled.div.withConfig({
+  displayName: "Item__MainContent",
+  componentId: "jqpvy8-1"
+})(["align-items:baseline;display:flex;min-width:0;flex-direction:var(--main-content-flex-direction);flex-grow:1;"]);
+const StyledItem = styled.div.withConfig({
+  displayName: "Item__StyledItem",
+  componentId: "jqpvy8-2"
+})(["padding:6px ", ";display:flex;border-radius:", ";color:", ";transition:background 33.333ms linear;text-decoration:none;@media (hover:hover) and (pointer:fine){:hover{background:var( --item-hover-bg-override,", " );color:", ";cursor:", ";}}:not(:first-of-type):not(", " + &):not(", " + &){margin-top:", ";", "::before{content:' ';display:block;position:absolute;width:100%;top:-7px;border:0 solid ", ";border-top-width:", ";}}&:hover ", "::before,:hover + * ", "::before{border-color:var(--item-hover-divider-border-color-override,transparent) !important;}&:focus ", "::before,:focus + * ", "::before,&[", "] ", "::before,[", "] + & ", "::before{border-color:transparent !important;}&[", "='", "']{background:", ";}&[", "='", "']{background:", ";}&:focus{background:", ";outline:none;}&:active{background:", ";}", ""], get('space.2'), get('radii.2'), ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).color, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverText, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverCursor, StyledDivider, StyledHeader, ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, get('colors.border.muted'), ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, DividedContent, isActiveDescendantAttribute, activeDescendantActivatedDirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, isActiveDescendantAttribute, activeDescendantActivatedIndirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).hoverBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
+export const TextContainer = styled.span.withConfig({
+  displayName: "Item__TextContainer",
+  componentId: "jqpvy8-3"
+})([""]);
+const BaseVisualContainer = styled.div.withConfig({
+  displayName: "Item__BaseVisualContainer",
+  componentId: "jqpvy8-4"
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], get('space.3'), get('space.2'));
+const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
+  displayName: "Item__ColoredVisualContainer",
+  componentId: "jqpvy8-5"
+})(["svg{fill:", ";font-size:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).iconColor, get('fontSizes.0'));
+const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
+  displayName: "Item__LeadingVisualContainer",
+  componentId: "jqpvy8-6"
+})(["display:flex;flex-direction:column;justify-content:center;"]);
+const TrailingContent = styled(ColoredVisualContainer).withConfig({
+  displayName: "Item__TrailingContent",
+  componentId: "jqpvy8-7"
+})(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).annotationColor, get('space.2'), get('space.2'));
+const DescriptionContainer = styled.span.withConfig({
+  displayName: "Item__DescriptionContainer",
+  componentId: "jqpvy8-8"
+})(["color:", ";font-size:", ";line-height:16px;margin-left:var(--description-container-margin-left);min-width:0;flex-grow:1;flex-basis:var(--description-container-flex-basis);"], get('colors.fg.muted'), get('fontSizes.0'));
+const MultiSelectIcon = styled.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
+  componentId: "jqpvy8-9"
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({
+  selected
+}) => selected ? get('colors.accent.fg') : get('colors.border.default'), get('colors.fg.onEmphasis'), get('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+
+export const Item = /*#__PURE__*/React.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 = useSSRSafeId();
+  const descriptionId = useSSRSafeId();
+  const keyPressHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onKeyPress === null || onKeyPress === void 0 ? void 0 : onKeyPress(event);
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onKeyPress]);
+  const clickHandler = useCallback(event => {
+    if (disabled) {
+      return;
+    }
+
+    onClick === null || onClick === void 0 ? void 0 : onClick(event);
+
+    if (!event.defaultPrevented) {
+      onAction === null || onAction === void 0 ? void 0 : onAction(itemProps, event);
+    }
+  }, [onAction, disabled, itemProps, onClick]);
+  const {
+    theme
+  } = useTheme();
+  return /*#__PURE__*/React.createElement(StyledItem, _extends({
+    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
+  }), !!selected === selected && /*#__PURE__*/React.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MultiSelectIcon, {
+    selected: selected,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  }))) : selected && /*#__PURE__*/React.createElement(CheckIcon, {
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
+  })), LeadingVisual && /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    variant: variant,
+    disabled: disabled
+  }, /*#__PURE__*/React.createElement(LeadingVisual, null)), /*#__PURE__*/React.createElement(DividedContent, null, /*#__PURE__*/React.createElement(MainContent, {
+    style: {
+      '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column'
+    }
+  }, children, text ? /*#__PURE__*/React.createElement(TextContainer, {
+    id: labelId
+  }, text) : null, description ? /*#__PURE__*/React.createElement(DescriptionContainer, {
+    id: descriptionId,
+    style: {
+      '--description-container-margin-left': descriptionVariant === 'inline' ? get('space.2')(theme) : 0,
+      '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
+    }
+  }, descriptionVariant === 'block' ? description : /*#__PURE__*/React.createElement(Truncate, {
+    title: description,
+    inline: true,
+    maxWidth: "100%"
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));
+});
+Item.displayName = 'ActionList.Item';

package/lib-esm/ActionList/List.d.ts

@@ -0,0 +1,88 @@
+import React, { Key } from 'react';
+import type { AriaRole } from '../utils/types';
+import { Group, GroupProps } from './Group';
+import { ItemProps } from './Item';
+import { Merge } from '../utils/types/Merge';
+declare type RenderItemFn = (props: ItemProps) => React.ReactElement;
+export declare type ItemInput = Merge<React.ComponentPropsWithoutRef<'div'>, ItemProps> | ((Partial<ItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
+});
+/**
+ * Contract for props passed to the `List` component.
+ */
+export interface ListPropsBase {
+    /**
+     * A collection of `Item` props and `Item`-level custom `Item` renderers.
+     */
+    items: ItemInput[];
+    /**
+     * The ARIA role describing the function of `List` component. `listbox` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * id to attach to the base DOM node of the list
+     */
+    id?: string;
+    /**
+     * A `List`-level custom `Item` renderer. Every `Item` within this `List`
+     * without a `Group`-level or `Item`-level custom `Item` renderer will be
+     * rendered using this function component.
+     */
+    renderItem?: RenderItemFn;
+    /**
+     * A `List`-level custom `Group` renderer. Every `Group` within this `List`
+     * without a `Group`-level custom `Item` renderer will be rendered using
+     * this function component.
+     */
+    renderGroup?: typeof Group;
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
+     * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
+     */
+    variant?: 'inset' | 'full';
+    /**
+     *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+     */
+    selectionVariant?: 'single' | 'multiple';
+    /**
+     * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+/**
+ * Contract for props passed to the `List` component, when its `Item`s are collected in `Group`s.
+ */
+export interface GroupedListProps extends ListPropsBase {
+    /**
+     * A collection of `Group` props (except `items`), plus a unique group identifier
+     * and `Group`-level custom `Item` or `Group` renderers.
+     */
+    groupMetadata: ((Omit<GroupProps, 'items'> | Omit<Partial<GroupProps> & {
+        renderItem?: RenderItemFn;
+        renderGroup?: typeof Group;
+    }, 'items'>) & {
+        groupId: string;
+    })[];
+    /**
+     * A collection of `Item` props, plus associated group identifiers
+     * and `Item`-level custom `Item` renderers.
+     */
+    items: ((ItemProps | (Partial<ItemProps> & {
+        renderItem: RenderItemFn;
+    })) & {
+        groupId: string;
+    })[];
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+export declare type ListProps = ListPropsBase | GroupedListProps;
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+export declare const List: React.ForwardRefExoticComponent<ListProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib-esm/ActionList/List.js

@@ -0,0 +1,181 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { Group } from './Group';
+import { Item } from './Item';
+import { Divider } from './Divider';
+import styled from 'styled-components';
+import { get } from '../constants';
+import { hasActiveDescendantAttribute } from '../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;
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+
+
+const StyledList = styled.div.withConfig({
+  displayName: "List__StyledList",
+  componentId: "yr2k7d-0"
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, 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: get('space.2')
+        },
+        itemStyle: {
+          borderRadius: 0
+        }
+      };
+
+    default:
+      return {
+        firstGroupStyle: {
+          marginTop: get('space.2')
+        },
+        lastGroupStyle: {
+          marginBottom: get('space.2')
+        },
+        itemStyle: {
+          marginX: get('space.2')
+        }
+      };
+  }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+
+
+export const List = /*#__PURE__*/React.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 => {
+    var _ref;
+
+    const GroupComponent = ((_ref = 'renderGroup' in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : props.renderGroup) || Group;
+    return /*#__PURE__*/React.createElement(GroupComponent, _extends({}, 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) => {
+    var _ref2, _ref3, _itemProps$id;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || Item;
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    return /*#__PURE__*/React.createElement(ItemComponent, _extends({
+      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) {
+      var _group$items$length, _group$items, _group$items2;
+
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps.groupId);
+      const itemIndex = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0; // Upsert the group to include the current item (rendered).
+
+      groupMap.set(itemProps.groupId, { ...group,
+        items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
+          showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
+          ...(group && 'renderItem' in group && {
+            renderItem: group.renderItem
+          }),
+          ...itemProps
+        }, itemProps, itemIndex)]
+      });
+    }
+
+    groups = [...groupMap.values()];
+  }
+
+  return /*#__PURE__*/React.createElement(StyledList, _extends({}, props, {
+    ref: forwardedRef
+  }), groups.map(({
+    header,
+    ...groupProps
+  }, index) => {
+    const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === 'filled';
+    const shouldShowDivider = index > 0 && !hasFilledHeader;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: groupProps.groupId
+    }, shouldShowDivider ? /*#__PURE__*/React.createElement(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
+    }));
+  }));
+});
+List.displayName = 'ActionList';

package/lib-esm/ActionList/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Group } from './Group';
+import { Divider } from './Divider';
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("react").ForwardRefExoticComponent<import("./List").ListProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: typeof Group;
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: typeof Divider;
+};

package/lib-esm/ActionList/index.js

@@ -0,0 +1,18 @@
+import { List } from './List';
+import { Group } from './Group';
+import { Item } from './Item';
+import { Divider } from './Divider';
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` with an optional icon and description. */
+  Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider
+});