@primer/components 0.0.0-2021111223235 → 0.0.0-2021111225614

package/lib/ActionList/Divider.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const StyledDivider: import("styled-components").StyledComponent<"div", any, {}, never>;
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;
+export declare namespace Divider {
+    var renderItem: typeof Divider;
+}

package/lib/ActionList/Divider.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = Divider;
+exports.StyledDivider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledDivider = _styledComponents.default.div.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-42656i-0"
+})(["height:1px;background:", ";margin-top:calc(", " - 1px);margin-bottom:", ";"], (0, _constants.get)('colors.border.muted'), (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+
+
+exports.StyledDivider = StyledDivider;
+
+function Divider() {
+  return /*#__PURE__*/_react.default.createElement(StyledDivider, null);
+}
+
+Divider.displayName = "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.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
+/**
+ * Contract for props passed to the `Group` component.
+ */
+export interface GroupProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Props for a `Header` to render in the `Group`.
+     */
+    header?: HeaderProps;
+    /**
+     * The id of the group.
+     */
+    groupId?: string;
+    /**
+     * `Items` to render in the `Group`.
+     */
+    items?: JSX.Element[];
+    /**
+     * Whether to display a divider above each `Item` in this `Group` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;

package/lib/ActionList/Group.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Group = Group;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+var _Header = require("./Header");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledGroup = _styledComponents.default.div.withConfig({
+  displayName: "Group__StyledGroup",
+  componentId: "sc-10w5bj9-0"
+})(["", ""], _sx.default);
+/**
+ * Collects related `Items` in an `ActionList`.
+ */
+
+
+function Group({
+  header,
+  items,
+  ...props
+}) {
+  return /*#__PURE__*/_react.default.createElement(StyledGroup, props, header && /*#__PURE__*/_react.default.createElement(_Header.Header, header), items);
+}
+
+Group.displayName = "Group";

package/lib/ActionList/Header.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"filled"` - Superimposed on a background, offset from nearby content
+     * - `"subtle"` - Relatively less offset from nearby content
+     */
+    variant?: 'subtle' | 'filled';
+    /**
+     * Primary text which names a `Group`.
+     */
+    title: string;
+    /**
+     * Secondary text which provides additional information about a `Group`.
+     */
+    auxiliaryText?: string;
+}
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", any, {
+    variant: HeaderProps['variant'];
+} & SxProp, never>;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare function Header({ variant, title, auxiliaryText, children: _children, ...props }: HeaderProps): JSX.Element;

package/lib/ActionList/Header.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = Header;
+exports.StyledHeader = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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); }
+
+const StyledHeader = _styledComponents.default.div.withConfig({
+  displayName: "Header__StyledHeader",
+  componentId: "qmofje-0"
+})(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], (0, _constants.get)('space.3'), (0, _constants.get)('fontSizes.0'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('colors.fg.muted'), ({
+  variant
+}) => variant === 'filled' && (0, _styledComponents.css)(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], (0, _constants.get)('colors.canvas.subtle'), (0, _constants.get)('space.2'), (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.muted')), _sx.default);
+/**
+ * Displays the name and description of a `Group`.
+ */
+
+
+exports.StyledHeader = StyledHeader;
+
+function Header({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  children: _children,
+  ...props
+}) {
+  return /*#__PURE__*/_react.default.createElement(StyledHeader, _extends({
+    role: "heading",
+    variant: variant
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+}
+
+Header.displayName = "Header";

package/lib/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/ActionList/Item.js

@@ -0,0 +1,276 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Item = exports.TextContainer = void 0;
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _constants = require("../constants");
+
+var _sx = _interopRequireDefault(require("../sx"));
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _Header = require("./Header");
+
+var _Divider = require("./Divider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _focusZone = require("../behaviors/focusZone");
+
+var _ssr = require("@react-aria/ssr");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+const getItemVariant = (variant = 'default', disabled) => {
+  if (disabled) {
+    return {
+      color: (0, _constants.get)('colors.primer.fg.disabled'),
+      iconColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      annotationColor: (0, _constants.get)('colors.primer.fg.disabled'),
+      hoverCursor: 'default'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: (0, _constants.get)('colors.danger.fg'),
+        iconColor: (0, _constants.get)('colors.danger.fg'),
+        annotationColor: (0, _constants.get)('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.danger.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.danger.activeBg'),
+        hoverText: (0, _constants.get)('colors.actionListItem.danger.hoverText')
+      };
+
+    default:
+      return {
+        color: (0, _constants.get)('colors.fg.default'),
+        iconColor: (0, _constants.get)('colors.fg.muted'),
+        annotationColor: (0, _constants.get)('colors.fg.muted'),
+        hoverCursor: 'pointer',
+        hoverBg: (0, _constants.get)('colors.actionListItem.default.hoverBg'),
+        focusBg: (0, _constants.get)('colors.actionListItem.default.activeBg')
+      };
+  }
+};
+
+const DividedContent = _styledComponents.default.div.withConfig({
+  displayName: "Item__DividedContent",
+  componentId: "jqpvy8-0"
+})(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
+
+const MainContent = _styledComponents.default.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 = _styledComponents.default.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:", ";}", ""], (0, _constants.get)('space.2'), (0, _constants.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, _Divider.StyledDivider, _Header.StyledHeader, ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, (0, _constants.get)('colors.border.muted'), ({
+  showDivider
+}) => showDivider ? `1px` : '0', DividedContent, DividedContent, DividedContent, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, DividedContent, _focusZone.isActiveDescendantAttribute, _focusZone.activeDescendantActivatedDirectly, ({
+  variant,
+  item
+}) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, _focusZone.isActiveDescendantAttribute, _focusZone.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.default);
+
+const TextContainer = _styledComponents.default.span.withConfig({
+  displayName: "Item__TextContainer",
+  componentId: "jqpvy8-3"
+})([""]);
+
+exports.TextContainer = TextContainer;
+
+const BaseVisualContainer = _styledComponents.default.div.withConfig({
+  displayName: "Item__BaseVisualContainer",
+  componentId: "jqpvy8-4"
+})(["height:20px;width:", ";margin-right:", ";display:flex;justify-content:center;align-items:center;flex-shrink:0;"], (0, _constants.get)('space.3'), (0, _constants.get)('space.2'));
+
+const ColoredVisualContainer = (0, _styledComponents.default)(BaseVisualContainer).withConfig({
+  displayName: "Item__ColoredVisualContainer",
+  componentId: "jqpvy8-5"
+})(["svg{fill:", ";font-size:", ";}"], ({
+  variant,
+  disabled
+}) => getItemVariant(variant, disabled).iconColor, (0, _constants.get)('fontSizes.0'));
+const LeadingVisualContainer = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
+  displayName: "Item__LeadingVisualContainer",
+  componentId: "jqpvy8-6"
+})(["display:flex;flex-direction:column;justify-content:center;"]);
+const TrailingContent = (0, _styledComponents.default)(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, (0, _constants.get)('space.2'), (0, _constants.get)('space.2'));
+
+const DescriptionContainer = _styledComponents.default.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);"], (0, _constants.get)('colors.fg.muted'), (0, _constants.get)('fontSizes.0'));
+
+const MultiSelectIcon = _styledComponents.default.svg.withConfig({
+  displayName: "Item__MultiSelectIcon",
+  componentId: "jqpvy8-9"
+})(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.canvas.default'), ({
+  selected
+}) => selected ? (0, _constants.get)('colors.accent.fg') : (0, _constants.get)('colors.border.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('shadow.small'), ({
+  selected
+}) => selected ? 1 : 0);
+/**
+ * An actionable or selectable `Item` with an optional icon and description.
+ */
+
+
+const Item = /*#__PURE__*/_react.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 = (0, _ssr.useSSRSafeId)();
+  const descriptionId = (0, _ssr.useSSRSafeId)();
+  const keyPressHandler = (0, _react.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 = (0, _react.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
+  } = (0, _ThemeProvider.useTheme)();
+  return /*#__PURE__*/_react.default.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.default.createElement(BaseVisualContainer, null, selectionVariant === 'multiple' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.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.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/_react.default.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.default.createElement(_octiconsReact.CheckIcon, {
+    fill: theme === null || theme === void 0 ? void 0 : theme.colors.fg.default
+  })), LeadingVisual && /*#__PURE__*/_react.default.createElement(LeadingVisualContainer, {
+    variant: variant,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(LeadingVisual, null)), /*#__PURE__*/_react.default.createElement(DividedContent, null, /*#__PURE__*/_react.default.createElement(MainContent, {
+    style: {
+      '--main-content-flex-direction': descriptionVariant === 'inline' ? 'row' : 'column'
+    }
+  }, children, text ? /*#__PURE__*/_react.default.createElement(TextContainer, {
+    id: labelId
+  }, text) : null, description ? /*#__PURE__*/_react.default.createElement(DescriptionContainer, {
+    id: descriptionId,
+    style: {
+      '--description-container-margin-left': descriptionVariant === 'inline' ? (0, _constants.get)('space.2')(theme) : 0,
+      '--description-container-flex-basis': descriptionVariant === 'inline' ? 0 : 'auto'
+    }
+  }, descriptionVariant === 'block' ? description : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    title: description,
+    inline: true,
+    maxWidth: "100%"
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/_react.default.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/_react.default.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, trailingText, TrailingIcon && /*#__PURE__*/_react.default.createElement(TrailingIcon, null)) : null));
+});
+
+exports.Item = Item;
+Item.displayName = 'ActionList.Item';

package/lib/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 {};