@primer/components 0.0.0-2021102995710 → 0.0.0-202110303104

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';

package/lib/ActionList/index.js

@@ -1,29 +1,18 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-
-var _List = require("./List");
-
-var _Group = require("./Group");
-
-var _Item = require("./Item");
-
-var _Divider = require("./Divider");
-
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
 /**
  * Collection of list-related components.
  */
-const ActionList = Object.assign(_List.List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group: _Group.Group,
-
-  /** An actionable or selectable `Item` with an optional icon and description. */
-  Item: _Item.Item,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider: _Divider.Divider
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: Item_1.Item,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider
 });
-exports.ActionList = ActionList;

package/lib/ActionList2/Description.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.Description = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = require("../sx");
+const Truncate_1 = __importDefault(require("../Truncate"));
+const Item_1 = require("./Item");
+const Description = ({ variant = 'inline', sx = {}, ...props }) => {
+    const styles = {
+        fontSize: 0,
+        lineHeight: '16px',
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        marginLeft: variant === 'block' ? 0 : 2
+    };
+    return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
+            {props.children}
+          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
+            {props.children}
+          </Truncate_1.default>)}
+    </Item_1.Slot>);
+};
+exports.Description = Description;

package/lib/ActionList2/Divider.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const constants_1 = require("../constants");
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+    return (<Box_1.default as="li" role="separator" sx={{
+            height: 1,
+            backgroundColor: 'actionListItem.inlineDivider',
+            marginTop: (theme) => `calc(${constants_1.get('space.2')(theme)} - 1px)`,
+            marginBottom: 2,
+            listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+        }} data-component="ActionList.Divider"/>);
+}
+exports.Divider = Divider;

package/lib/ActionList2/Group.d.ts

@@ -1,37 +1,11 @@
 import React from 'react';
 import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
 import { ListProps } from './List';
-import { AriaRole } from '../utils/types';
-export declare type GroupProps = {
-    /**
-     * 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;
-    /**
-     * The ARIA role describing the function of the list inside `Group` component. `listbox` or `menu` are a common values.
-     */
-    role?: AriaRole;
-} & SxProp & {
-    /**
-     * Whether multiple Items or a single Item can be selected in the Group. Overrides value on ActionList root.
-     */
+export declare type GroupProps = HeaderProps & SxProp & {
     selectionVariant?: ListProps['selectionVariant'] | false;
 };
 declare type ContextProps = Pick<GroupProps, 'selectionVariant'>;
 export declare const GroupContext: React.Context<ContextProps>;
 export declare const Group: React.FC<GroupProps>;
-export declare type HeaderProps = Pick<GroupProps, 'variant' | 'title' | 'auxiliaryText'> & {
-    labelId: string;
-};
 export {};

package/lib/ActionList2/Group.js

@@ -7,11 +7,9 @@ exports.Group = exports.GroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _ssr = require("@react-aria/ssr");
-
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _List = require("./List");
+var _Header = require("./Header");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -23,14 +21,12 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant = 'subtle',
+  variant,
   auxiliaryText,
   selectionVariant,
-  role,
   sx = {},
   ...props
 }) => {
-  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -41,11 +37,10 @@ const Group = ({
       // hide the ::marker inserted by browser's stylesheet
       ...sx
     }
-  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
+  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText,
-    labelId: labelId
+    auxiliaryText: auxiliaryText
   }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -54,53 +49,9 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    },
-    "aria-labelledby": title ? labelId : undefined,
-    role: role
+    }
   }, props.children)));
 };
 
 exports.Group = Group;
-Group.displayName = "Group";
-
-/**
- * Displays the name and description of a `Group`.
- *
- * For visual presentation only. It's hidden from screen readers.
- */
-const Header = ({
-  variant,
-  title,
-  auxiliaryText,
-  labelId,
-  ...props
-}) => {
-  const {
-    variant: listVariant
-  } = _react.default.useContext(_List.ListContext);
-
-  const styles = {
-    paddingY: '6px',
-    paddingX: listVariant === 'full' ? 2 : 3,
-    fontSize: 0,
-    fontWeight: 'bold',
-    color: 'fg.muted',
-    ...(variant === 'filled' && {
-      backgroundColor: 'canvas.subtle',
-      marginX: 0,
-      marginBottom: 2,
-      borderTop: '1px solid',
-      borderBottom: '1px solid',
-      borderColor: 'neutral.muted'
-    })
-  };
-  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
-    sx: styles,
-    role: "presentation",
-    "aria-hidden": "true"
-  }, props), /*#__PURE__*/_react.default.createElement("span", {
-    id: labelId
-  }, title), auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
-};
-
-Header.displayName = "Header";
+Group.displayName = "Group";

package/lib/ActionList2/Group.jsx

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = exports.GroupContext = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const Header_1 = require("./Header");
+exports.GroupContext = react_1.default.createContext({});
+const Group = ({ title, variant, auxiliaryText, selectionVariant, sx = {}, ...props }) => {
+    return (<Box_1.default as="li" sx={{
+            '&:not(:first-child)': { marginTop: 2 },
+            listStyle: 'none',
+            ...sx
+        }} {...props}>
+      {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
+      <exports.GroupContext.Provider value={{ selectionVariant }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
+          {props.children}
+        </Box_1.default>
+      </exports.GroupContext.Provider>
+    </Box_1.default>);
+};
+exports.Group = Group;

package/lib/ActionList2/Header.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const List_1 = require("./List");
+/**
+ * Displays the name and description of a `Group`.
+ */
+const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...props }) => {
+    const { variant: listVariant } = react_1.default.useContext(List_1.ListContext);
+    const styles = {
+        paddingY: '6px',
+        paddingX: listVariant === 'full' ? 2 : 3,
+        fontSize: 0,
+        fontWeight: 'bold',
+        color: 'fg.muted',
+        ...(variant === 'filled' && {
+            backgroundColor: 'canvas.subtle',
+            marginX: 0,
+            marginBottom: 2,
+            borderTop: '1px solid',
+            borderBottom: '1px solid',
+            borderColor: 'neutral.muted'
+        }),
+        ...sx
+    };
+    return (<Box_1.default sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};
+exports.Header = Header;

package/lib/ActionList2/Item.jsx

@@ -0,0 +1,174 @@
+"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.TEXT_ROW_HEIGHT = exports.Slot = exports.getVariantStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const ssr_1 = require("@react-aria/ssr");
+const styled_components_1 = __importDefault(require("styled-components"));
+const ThemeProvider_1 = require("../ThemeProvider");
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = __importStar(require("../sx"));
+const create_slots_1 = __importDefault(require("../utils/create-slots"));
+const List_1 = require("./List");
+const Selection_1 = require("./Selection");
+const getVariantStyles = (variant, disabled) => {
+    if (disabled) {
+        return {
+            color: 'primer.fg.disabled',
+            iconColor: 'primer.fg.disabled',
+            annotationColor: 'primer.fg.disabled'
+        };
+    }
+    switch (variant) {
+        case 'danger':
+            return {
+                color: 'danger.fg',
+                iconColor: 'danger.fg',
+                annotationColor: 'fg.muted',
+                hoverColor: 'actionListItem.danger.hoverText'
+            };
+        default:
+            return {
+                color: 'fg.default',
+                iconColor: 'fg.muted',
+                annotationColor: 'fg.muted',
+                hoverColor: 'fg.default'
+            };
+    }
+};
+exports.getVariantStyles = getVariantStyles;
+const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
+exports.Slot = Slot;
+const LiBox = styled_components_1.default.li(sx_1.default);
+exports.TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
+exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, _PrivateItemWrapper, ...props }, forwardedRef) => {
+    const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
+    const { theme } = ThemeProvider_1.useTheme();
+    const styles = {
+        display: 'flex',
+        paddingX: 2,
+        fontSize: 1,
+        paddingY: '6px',
+        lineHeight: exports.TEXT_ROW_HEIGHT,
+        minHeight: 5,
+        marginX: listVariant === 'inset' ? 2 : 0,
+        borderRadius: listVariant === 'inset' ? 2 : 0,
+        transition: 'background 33.333ms linear',
+        color: exports.getVariantStyles(variant, disabled).color,
+        cursor: 'pointer',
+        '&[aria-disabled]': { cursor: 'not-allowed' },
+        '@media (hover: hover) and (pointer: fine)': {
+            ':hover:not([aria-disabled])': {
+                backgroundColor: `actionListItem.${variant}.hoverBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor
+            },
+            ':focus:not([data-focus-visible-added])': {
+                backgroundColor: `actionListItem.${variant}.selectedBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor,
+                outline: 'none'
+            },
+            '&[data-focus-visible-added]': {
+                // we don't use :focus-visible because not all browsers (safari) have it yet
+                outline: 'none',
+                border: `2 solid`,
+                boxShadow: `0 0 0 2px ${theme?.colors.accent.emphasis}`
+            },
+            ':active:not([aria-disabled])': {
+                backgroundColor: `actionListItem.${variant}.activeBg`,
+                color: exports.getVariantStyles(variant, disabled).hoverColor
+            }
+        },
+        /** Divider styles */
+        '[data-component="ActionList.Item--DividerContainer"]': {
+            position: 'relative'
+        },
+        '[data-component="ActionList.Item--DividerContainer"]::before': {
+            content: '" "',
+            display: 'block',
+            position: 'absolute',
+            width: '100%',
+            top: '-7px',
+            border: '0 solid',
+            borderTopWidth: showDividers ? `1px` : '0',
+            borderColor: 'var(--divider-color, transparent)'
+        },
+        // show between 2 items
+        ':not(:first-of-type)': { '--divider-color': theme?.colors.actionListItem.inlineDivider },
+        // hide divider after dividers & group header, with higher importance!
+        '[data-component="ActionList.Divider"] + &': { '--divider-color': 'transparent !important' },
+        // hide border on current and previous item
+        '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
+            '--divider-color': 'transparent'
+        },
+        '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+            '--divider-color': 'transparent'
+        }
+    };
+    const clickHandler = react_1.default.useCallback(event => {
+        if (disabled)
+            return;
+        if (!event.defaultPrevented)
+            onSelect(event);
+    }, [onSelect, disabled]);
+    const keyPressHandler = react_1.default.useCallback(event => {
+        if (disabled)
+            return;
+        if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+            onSelect(event);
+        }
+    }, [onSelect, disabled]);
+    // use props.id if provided, otherwise generate one.
+    const labelId = ssr_1.useSSRSafeId(id);
+    const inlineDescriptionId = ssr_1.useSSRSafeId(id && `${id}--inline-description`);
+    const blockDescriptionId = ssr_1.useSSRSafeId(id && `${id}--block-description`);
+    const ItemWrapper = _PrivateItemWrapper || react_1.default.Fragment;
+    return (<Slots context={{ variant, disabled, inlineDescriptionId, blockDescriptionId }}>
+        {slots => (<LiBox ref={forwardedRef} sx={sx_1.merge(styles, sxProp)} onClick={clickHandler} onKeyPress={keyPressHandler} aria-selected={selected} aria-disabled={disabled ? true : undefined} tabIndex={disabled || _PrivateItemWrapper ? undefined : 0} aria-labelledby={`${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`} aria-describedby={slots.BlockDescription ? blockDescriptionId : undefined} {...props}>
+            <ItemWrapper>
+              <Selection_1.Selection selected={selected}/>
+              {slots.LeadingVisual}
+              <Box_1.default data-component="ActionList.Item--DividerContainer" sx={{ display: 'flex', flexDirection: 'column', flexGrow: 1, minWidth: 0 }}>
+                <ConditionalBox if={Boolean(slots.TrailingVisual)} sx={{ display: 'flex', flexGrow: 1 }}>
+                  <ConditionalBox if={Boolean(slots.InlineDescription)} sx={{ display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0 }}>
+                    <Box_1.default as="span" id={labelId} sx={{ flexGrow: slots.InlineDescription ? 0 : 1 }}>
+                      {props.children}
+                    </Box_1.default>
+                    {slots.InlineDescription}
+                  </ConditionalBox>
+                  {slots.TrailingVisual}
+                </ConditionalBox>
+                {slots.BlockDescription}
+              </Box_1.default>
+            </ItemWrapper>
+          </LiBox>)}
+      </Slots>);
+});
+exports.Item.displayName = 'ActionList.Item';
+const ConditionalBox = props => {
+    const { if: condition, ...rest } = props;
+    if (condition)
+        return <Box_1.default {...rest}>{props.children}</Box_1.default>;
+    else
+        return <>{props.children}</>;
+};

package/lib/ActionList2/LinkItem.jsx

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkItem = void 0;
+const react_1 = __importDefault(require("react"));
+const Link_1 = __importDefault(require("../Link"));
+const sx_1 = require("../sx");
+const Item_1 = require("./Item");
+exports.LinkItem = react_1.default.forwardRef(({ sx = {}, as: Component, ...props }, forwardedRef) => {
+    const styles = {
+        // occupy full size of Item
+        paddingX: 2,
+        paddingY: '6px',
+        display: 'flex',
+        flexGrow: 1,
+        borderRadius: 2,
+        // inherit Item styles
+        color: 'inherit',
+        '&:hover': { color: 'inherit', textDecoration: 'none' }
+    };
+    return (<Item_1.Item sx={{ paddingY: 0, paddingX: 0 }} _PrivateItemWrapper={({ children }) => (<Link_1.default as={Component} sx={sx_1.merge(styles, sx)} {...props} ref={forwardedRef}>
+          {children}
+        </Link_1.default>)}>
+      {props.children}
+    </Item_1.Item>);
+});

package/lib/ActionList2/List.d.ts

@@ -20,7 +20,7 @@ export declare type ListProps = {
      */
     role?: AriaRole;
 } & SxProp;
-declare type ContextProps = Pick<ListProps, 'variant' | 'selectionVariant' | 'showDividers'>;
+declare type ContextProps = Omit<ListProps, 'sx'>;
 export declare const ListContext: React.Context<ContextProps>;
 export declare const List: PolymorphicForwardRefComponent<"ul", ListProps>;
 export {};

package/lib/ActionList2/List.js

@@ -42,7 +42,8 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
     paddingY: variant === 'inset' ? 2 : 0
   };
   return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
-    sx: (0, _sx.merge)(styles, sxProp)
+    sx: (0, _sx.merge)(styles, sxProp),
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {