@primer/react 38.0.0-rc.389f01088 → 38.0.0-rc.5

package/lib-esm/ActionList/Group.js

@@ -1,190 +0,0 @@
-import React from 'react';
-import { useId } from '../hooks/useId.js';
-import { ListContext } from './shared.js';
-import { useSlots } from '../hooks/useSlots.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { invariant } from '../utils/invariant.js';
-import { clsx } from 'clsx';
-import classes from './ActionList.module.css.js';
-import groupClasses from './Group.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-
-const Heading = ({
-  as: Component = 'h3',
-  className,
-  children,
-  sx = defaultSxProp,
-  id,
-  ...rest
-}) => {
-  return (
-    /*#__PURE__*/
-    // Box is temporary to support lingering sx usage
-    jsx(BoxWithFallback, {
-      as: Component,
-      className: className,
-      sx: sx,
-      id: id,
-      ...rest,
-      children: children
-    })
-  );
-};
-Heading.displayName = "Heading";
-const HeadingWrap = ({
-  as = 'div',
-  children,
-  className,
-  ...rest
-}) => {
-  return /*#__PURE__*/React.createElement(as, {
-    ...rest,
-    className
-  }, children);
-};
-const GroupContext = /*#__PURE__*/React.createContext({
-  groupHeadingId: undefined,
-  selectionVariant: undefined
-});
-const Group = ({
-  title,
-  variant = 'subtle',
-  auxiliaryText,
-  selectionVariant,
-  role,
-  className,
-  'aria-label': ariaLabel,
-  sx = defaultSxProp,
-  ...props
-}) => {
-  var _slots$groupHeading;
-  const id = useId();
-  const {
-    role: listRole
-  } = React.useContext(ListContext);
-  const [slots, childrenWithoutSlots] = useSlots(props.children, {
-    groupHeading: GroupHeading
-  });
-  let groupHeadingId = undefined;
-
-  // ActionList.GroupHeading
-  if (slots.groupHeading) {
-    var _slots$groupHeading$p;
-    // If there is an id prop passed in the ActionList.GroupHeading, use it otherwise use the generated id.
-    groupHeadingId = (_slots$groupHeading$p = slots.groupHeading.props.id) !== null && _slots$groupHeading$p !== void 0 ? _slots$groupHeading$p : id;
-  }
-  // Supports the deprecated `title` prop
-  if (title) {
-    groupHeadingId = id;
-  }
-  return /*#__PURE__*/jsx(BoxWithFallback, {
-    as: "li",
-    className: clsx(className, groupClasses.Group),
-    role: listRole ? 'none' : undefined,
-    sx: sx,
-    ...props,
-    children: /*#__PURE__*/jsxs(GroupContext.Provider, {
-      value: {
-        selectionVariant,
-        groupHeadingId
-      },
-      children: [title && !slots.groupHeading ?
-      /*#__PURE__*/
-      // Escape hatch: supports old API <ActionList.Group title="group title"> in a non breaking way
-      jsx(GroupHeading, {
-        variant: variant,
-        auxiliaryText: auxiliaryText,
-        _internalBackwardCompatibleTitle: title
-      }) : null, !title && slots.groupHeading ? /*#__PURE__*/React.cloneElement(slots.groupHeading) : null, /*#__PURE__*/jsx("ul", {
-        // if listRole is set (listbox or menu), we don't label the list with the groupHeadingId
-        // because the heading is hidden from the accessibility tree and only used for presentation role.
-        // We will instead use aria-label to label the list. See a line below.
-        "aria-labelledby": listRole ? undefined : groupHeadingId,
-        "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : listRole ? title !== null && title !== void 0 ? title : (_slots$groupHeading = slots.groupHeading) === null || _slots$groupHeading === void 0 ? void 0 : _slots$groupHeading.props.children : undefined,
-        role: role || listRole && 'group',
-        className: groupClasses.GroupList,
-        children: slots.groupHeading ? childrenWithoutSlots : props.children
-      })]
-    })
-  });
-};
-Group.displayName = "Group";
-/**
- * Heading of  a `Group`.
- *
- * As default, the role of ActionList is "list" and therefore group heading is rendered as a proper heading tag.
- * If the role is "listbox" or "menu" (ActionMenu), the group heading is rendered as a div with presentation role and it is
- * hidden from the accessibility tree due to the limitation of listbox children. https://w3c.github.io/aria/#listbox
- * groups under menu or listbox are labelled by `aria-label`
- */
-const GroupHeading = ({
-  as,
-  variant = 'subtle',
-  // We are not recommending this prop to be used, it should only be used internally for incremental rollout.
-  _internalBackwardCompatibleTitle,
-  auxiliaryText,
-  children,
-  className,
-  sx = defaultSxProp,
-  headingWrapElement = 'div',
-  ...props
-}) => {
-  const {
-    role: listRole
-  } = React.useContext(ListContext);
-  const {
-    groupHeadingId
-  } = React.useContext(GroupContext);
-  // for list role, the headings are proper heading tags, for menu and listbox, they are just representational and divs
-  const missingAsForList = (listRole === undefined || listRole === 'list') && children !== undefined && as === undefined;
-  const unnecessaryAsForListboxOrMenu = listRole !== undefined && listRole !== 'list' && children !== undefined && as !== undefined;
-  !
-  // 'as' prop is required for list roles. <GroupHeading as="h2">...</GroupHeading>
-  !missingAsForList ? process.env.NODE_ENV !== "production" ? invariant(false, `You are setting a heading for a list, that requires a heading level. Please use 'as' prop to set a proper heading level.`) : invariant(false) : void 0;
-  !
-  // 'as' prop on listbox or menu roles are not needed since they are rendered as divs and they could be misleading.
-  !unnecessaryAsForListboxOrMenu ? process.env.NODE_ENV !== "production" ? invariant(false, `Looks like you are trying to set a heading level to a ${listRole} role. Group headings for ${listRole} type action lists are for representational purposes, and rendered as divs. Therefore they don't need a heading level.`) : invariant(false) : void 0;
-  return /*#__PURE__*/jsx(Fragment, {
-    children: listRole && listRole !== 'list' ? /*#__PURE__*/jsxs(HeadingWrap, {
-      role: "presentation",
-      className: groupClasses.GroupHeadingWrap,
-      "aria-hidden": "true",
-      "data-variant": variant,
-      "data-component": "GroupHeadingWrap",
-      as: headingWrapElement,
-      ...props,
-      children: [/*#__PURE__*/jsx("span", {
-        className: clsx(className, groupClasses.GroupHeading),
-        id: groupHeadingId,
-        children: _internalBackwardCompatibleTitle !== null && _internalBackwardCompatibleTitle !== void 0 ? _internalBackwardCompatibleTitle : children
-      }), auxiliaryText && /*#__PURE__*/jsx("div", {
-        className: classes.Description,
-        children: auxiliaryText
-      })]
-    }) :
-    /*#__PURE__*/
-    // for explicit (role="list" is passed as prop) and implicit list roles (ActionList ins rendered as list by default), group titles are proper heading tags.
-    jsxs(HeadingWrap, {
-      className: groupClasses.GroupHeadingWrap,
-      "data-variant": variant,
-      as: headingWrapElement,
-      "data-component": "GroupHeadingWrap",
-      children: [/*#__PURE__*/jsx(Heading, {
-        className: clsx(className, groupClasses.GroupHeading),
-        as: as || 'h3',
-        id: groupHeadingId,
-        sx: sx,
-        ...props,
-        children: _internalBackwardCompatibleTitle !== null && _internalBackwardCompatibleTitle !== void 0 ? _internalBackwardCompatibleTitle : children
-      }), auxiliaryText && /*#__PURE__*/jsx("div", {
-        className: classes.Description,
-        children: auxiliaryText
-      })]
-    })
-  });
-};
-GroupHeading.displayName = 'ActionList.GroupHeading';
-Group.displayName = 'ActionList.Group';
-
-export { Group, GroupContext, GroupHeading };

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

@@ -1,10 +0,0 @@
-import React from 'react';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { ActionListItemProps } from './shared';
-type ActionListSubItemProps = {
-    children?: React.ReactNode;
-};
-export declare const SubItem: React.FC<ActionListSubItemProps>;
-export declare const Item: PolymorphicForwardRefComponent<"li", ActionListItemProps>;
-export {};
-//# sourceMappingURL=Item.d.ts.map

package/lib-esm/ActionList/Item.js

@@ -1,272 +0,0 @@
-import React from 'react';
-import { useId } from '../hooks/useId.js';
-import { useSlots } from '../hooks/useSlots.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { ActionListContainerContext } from './ActionListContainerContext.js';
-import { Description } from './Description.js';
-import { GroupContext } from './Group.js';
-import { Selection } from './Selection.js';
-import { TrailingVisual, LeadingVisual, VisualOrIndicator } from './Visuals.js';
-import { ListContext, ItemContext } from './shared.js';
-import { TrailingAction } from './TrailingAction.js';
-import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
-import { invariant } from '../utils/invariant.js';
-import VisuallyHidden from '../_VisuallyHidden.js';
-import classes from './ActionList.module.css.js';
-import { clsx } from 'clsx';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-
-const SubItem = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx(Fragment, {
-    children: children
-  });
-};
-SubItem.displayName = 'ActionList.SubItem';
-const ButtonItemContainerNoBox = /*#__PURE__*/React.forwardRef(({
-  children,
-  style,
-  ...props
-}, forwardedRef) => {
-  return /*#__PURE__*/jsx("button", {
-    type: "button",
-    ref: forwardedRef,
-    style: style,
-    ...props,
-    children: children
-  });
-});
-const DivItemContainerNoBox = /*#__PURE__*/React.forwardRef(({
-  children,
-  ...props
-}, forwardedRef) => {
-  return /*#__PURE__*/jsx("div", {
-    ref: forwardedRef,
-    ...props,
-    children: children
-  });
-});
-const Item = /*#__PURE__*/React.forwardRef(({
-  variant = 'default',
-  disabled = false,
-  inactiveText,
-  selected = undefined,
-  active = false,
-  onSelect: onSelectUser,
-  sx: sxProp = defaultSxProp,
-  id,
-  role,
-  loading,
-  _PrivateItemWrapper,
-  className,
-  groupId: _groupId,
-  renderItem: _renderItem,
-  handleAddItem: _handleAddItem,
-  ...props
-}, forwardedRef) => {
-  var _slots$trailingVisual, _slots$description$pr, _slots$description;
-  const baseSlots = {
-    leadingVisual: LeadingVisual,
-    trailingVisual: TrailingVisual,
-    trailingAction: TrailingAction,
-    subItem: SubItem
-  };
-  const [partialSlots, childrenWithoutSlots] = useSlots(props.children, {
-    ...baseSlots,
-    description: Description
-  });
-  const slots = {
-    description: undefined,
-    ...partialSlots
-  };
-  const {
-    container,
-    afterSelect,
-    selectionAttribute,
-    defaultTrailingVisual
-  } = React.useContext(ActionListContainerContext);
-
-  // Be sure to avoid rendering the container unless there is a default
-  const wrappedDefaultTrailingVisual = defaultTrailingVisual ? /*#__PURE__*/jsx(TrailingVisual, {
-    children: defaultTrailingVisual
-  }) : null;
-  const trailingVisual = (_slots$trailingVisual = slots.trailingVisual) !== null && _slots$trailingVisual !== void 0 ? _slots$trailingVisual : wrappedDefaultTrailingVisual;
-  const {
-    role: listRole,
-    selectionVariant: listSelectionVariant
-  } = React.useContext(ListContext);
-  const {
-    selectionVariant: groupSelectionVariant
-  } = React.useContext(GroupContext);
-  const inactive = Boolean(inactiveText);
-  // TODO change `menuContext` check to ```listRole !== undefined && ['menu', 'listbox'].includes(listRole)```
-  // once we have a better way to handle existing usage in dotcom that incorrectly use ActionList.TrailingAction
-  const menuContext = container === 'ActionMenu' || container === 'SelectPanel';
-  // TODO: when we change `menuContext` to check `listRole` instead of `container`
-  const showInactiveIndicator = inactive && !(listRole !== undefined && ['menu', 'listbox'].includes(listRole));
-  const onSelect = React.useCallback((event, afterSelect) => {
-    if (typeof onSelectUser === 'function') onSelectUser(event);
-    if (event.defaultPrevented) return;
-    if (typeof afterSelect === 'function') afterSelect(event);
-  }, [onSelectUser]);
-  const selectionVariant = groupSelectionVariant ? groupSelectionVariant : listSelectionVariant;
-
-  /** Infer item role based on the container */
-  let inferredItemRole;
-  if (container === 'ActionMenu') {
-    if (selectionVariant === 'single') inferredItemRole = 'menuitemradio';else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox';else inferredItemRole = 'menuitem';
-  } else if (listRole === 'listbox') {
-    if (selectionVariant !== undefined && !role) inferredItemRole = 'option';
-  }
-  const itemRole = role || inferredItemRole;
-  if (slots.trailingAction) {
-    !!menuContext ? process.env.NODE_ENV !== "production" ? invariant(false, `ActionList.TrailingAction can not be used within a list with an ARIA role of "menu" or "listbox".`) : invariant(false) : void 0;
-  }
-
-  /** Infer the proper selection attribute based on the item's role */
-  let inferredSelectionAttribute;
-  if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked';else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected';
-  const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute;
-  // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
-  const listItemSemantics = role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox';
-  const listRoleTypes = ['listbox', 'menu', 'list'];
-  const listSemantics = listRole && listRoleTypes.includes(listRole) || inactive || listItemSemantics;
-  const buttonSemantics = !listSemantics && !_PrivateItemWrapper;
-  const clickHandler = React.useCallback(event => {
-    if (disabled || inactive || loading) return;
-    onSelect(event, afterSelect);
-  }, [onSelect, disabled, inactive, afterSelect, loading]);
-  const keyPressHandler = React.useCallback(event => {
-    if (disabled || inactive || loading) return;
-    if ([' ', 'Enter'].includes(event.key)) {
-      if (event.key === ' ') {
-        event.preventDefault(); // prevent scrolling on Space
-        // immediately reset defaultPrevented once its job is done
-        // so as to not disturb the functions that use that event after this
-        event.defaultPrevented = false;
-      }
-      onSelect(event, afterSelect);
-    }
-  }, [onSelect, disabled, loading, inactive, afterSelect]);
-  const itemId = useId(id);
-  const labelId = `${itemId}--label`;
-  const inlineDescriptionId = `${itemId}--inline-description`;
-  const blockDescriptionId = `${itemId}--block-description`;
-  const trailingVisualId = `${itemId}--trailing-visual`;
-  const inactiveWarningId = inactive && !showInactiveIndicator ? `${itemId}--warning-message` : undefined;
-  const DefaultItemWrapper = listSemantics ? DivItemContainerNoBox : ButtonItemContainerNoBox;
-  const ItemWrapper = _PrivateItemWrapper || DefaultItemWrapper;
-
-  // only apply aria-selected and aria-checked to selectable items
-  const selectableRoles = ['menuitemradio', 'menuitemcheckbox', 'option'];
-  const includeSelectionAttribute = itemSelectionAttribute && itemRole && selectableRoles.includes(itemRole);
-  let focusable;
-  if (showInactiveIndicator) {
-    focusable = true;
-  }
-
-  // Extract the variant prop value from the description slot component
-  const descriptionVariant = (_slots$description$pr = (_slots$description = slots.description) === null || _slots$description === void 0 ? void 0 : _slots$description.props.variant) !== null && _slots$description$pr !== void 0 ? _slots$description$pr : 'inline';
-  const menuItemProps = {
-    onClick: clickHandler,
-    onKeyPress: !buttonSemantics ? keyPressHandler : undefined,
-    'aria-disabled': disabled ? true : undefined,
-    'data-inactive': inactive ? true : undefined,
-    'data-loading': loading && !inactive ? true : undefined,
-    tabIndex: focusable ? undefined : 0,
-    'aria-labelledby': `${labelId} ${slots.trailingVisual ? trailingVisualId : ''} ${slots.description && descriptionVariant === 'inline' ? inlineDescriptionId : ''}`,
-    'aria-describedby': [slots.description && descriptionVariant === 'block' ? blockDescriptionId : undefined, inactiveWarningId !== null && inactiveWarningId !== void 0 ? inactiveWarningId : undefined].filter(String).join(' ').trim() || undefined,
-    ...(includeSelectionAttribute && {
-      [itemSelectionAttribute]: selected
-    }),
-    role: itemRole,
-    id: itemId
-  };
-  const containerProps = _PrivateItemWrapper ? {
-    role: itemRole ? 'none' : undefined,
-    ...props
-  } :
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  listSemantics && {
-    ...menuItemProps,
-    ...props,
-    ref: forwardedRef
-  } || {};
-  const wrapperProps = _PrivateItemWrapper ? menuItemProps : !listSemantics && {
-    ...menuItemProps,
-    ...props,
-    ref: forwardedRef
-  };
-  return /*#__PURE__*/jsx(ItemContext.Provider, {
-    value: {
-      variant,
-      disabled,
-      inactive: Boolean(inactiveText),
-      inlineDescriptionId,
-      blockDescriptionId,
-      trailingVisualId
-    },
-    children: /*#__PURE__*/jsxs(BoxWithFallback, {
-      ...containerProps,
-      as: "li",
-      sx: sxProp,
-      ref: listSemantics ? forwardedRef : null,
-      "data-variant": variant === 'danger' ? variant : undefined,
-      "data-active": active ? true : undefined,
-      "data-inactive": inactiveText ? true : undefined,
-      "data-has-subitem": slots.subItem ? true : undefined,
-      className: clsx(classes.ActionListItem, className),
-      children: [/*#__PURE__*/jsxs(ItemWrapper, {
-        ...wrapperProps,
-        className: classes.ActionListContent,
-        children: [/*#__PURE__*/jsx("span", {
-          className: classes.Spacer
-        }), /*#__PURE__*/jsx(Selection, {
-          selected: selected,
-          className: classes.LeadingAction
-        }), /*#__PURE__*/jsx(VisualOrIndicator, {
-          inactiveText: showInactiveIndicator ? inactiveText : undefined,
-          itemHasLeadingVisual: Boolean(slots.leadingVisual),
-          labelId: labelId,
-          loading: loading,
-          position: "leading",
-          children: slots.leadingVisual
-        }), /*#__PURE__*/jsxs("span", {
-          className: classes.ActionListSubContent,
-          "data-component": "ActionList.Item--DividerContainer",
-          children: [/*#__PURE__*/jsxs(ConditionalWrapper, {
-            if: !!slots.description,
-            className: classes.ItemDescriptionWrap,
-            "data-description-variant": descriptionVariant,
-            children: [/*#__PURE__*/jsxs("span", {
-              id: labelId,
-              className: classes.ItemLabel,
-              children: [childrenWithoutSlots, loading === true && !inactive && /*#__PURE__*/jsx(VisuallyHidden, {
-                children: "Loading"
-              })]
-            }), slots.description]
-          }), /*#__PURE__*/jsx(VisualOrIndicator, {
-            inactiveText: showInactiveIndicator ? inactiveText : undefined,
-            itemHasLeadingVisual: Boolean(slots.leadingVisual),
-            labelId: labelId,
-            loading: loading,
-            position: "trailing",
-            children: trailingVisual
-          }),
-          // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
-          // render the inactive warning message directly in the item.
-          !showInactiveIndicator && inactiveText ? /*#__PURE__*/jsx("span", {
-            className: classes.InactiveWarning,
-            id: inactiveWarningId,
-            children: inactiveText
-          }) : null]
-        })]
-      }), !inactive && !loading && !menuContext && Boolean(slots.trailingAction) && slots.trailingAction, slots.subItem]
-    })
-  });
-});
-Item.displayName = 'ActionList.Item';
-
-export { Item, SubItem };

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { ActionListItemProps } from './shared';
-type LinkProps = {
-    download?: string;
-    href?: string;
-    hrefLang?: string;
-    media?: string;
-    ping?: string;
-    rel?: string;
-    target?: string;
-    type?: string;
-    referrerPolicy?: React.AnchorHTMLAttributes<HTMLAnchorElement>['referrerPolicy'];
-    className?: string;
-};
-export type ActionListLinkItemProps = Pick<ActionListItemProps, 'active' | 'children' | 'sx' | 'inactiveText' | 'variant'> & LinkProps;
-export declare const LinkItem: PolymorphicForwardRefComponent<"a", ActionListLinkItemProps>;
-export {};
-//# sourceMappingURL=LinkItem.d.ts.map

package/lib-esm/ActionList/LinkItem.js

@@ -1,49 +0,0 @@
-import React from 'react';
-import { Item } from './Item.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { jsx } from 'react/jsx-runtime';
-import Link from '../Link/Link.js';
-
-const LinkItem = /*#__PURE__*/React.forwardRef(({
-  sx = defaultSxProp,
-  active,
-  inactiveText,
-  variant,
-  as: Component,
-  className,
-  ...props
-}, forwardedRef) => {
-  return /*#__PURE__*/jsx(Item, {
-    className: className,
-    active: active,
-    inactiveText: inactiveText,
-    "data-inactive": inactiveText ? true : undefined,
-    variant: variant,
-    sx: sx,
-    _PrivateItemWrapper: ({
-      children,
-      onClick,
-      ...rest
-    }) => {
-      const clickHandler = event => {
-        onClick && onClick(event);
-        props.onClick && props.onClick(event);
-      };
-      return inactiveText ? /*#__PURE__*/jsx("span", {
-        ...rest,
-        children: children
-      }) : /*#__PURE__*/jsx(Link, {
-        as: Component,
-        ...rest,
-        ...props,
-        onClick: clickHandler,
-        ref: forwardedRef,
-        children: children
-      });
-    },
-    children: props.children
-  });
-});
-LinkItem.displayName = 'ActionList.LinkItem';
-
-export { LinkItem };

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

@@ -1,4 +0,0 @@
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import { type ActionListProps } from './shared';
-export declare const List: PolymorphicForwardRefComponent<"ul", ActionListProps>;
-//# sourceMappingURL=List.d.ts.map

package/lib-esm/ActionList/List.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import { ActionListContainerContext } from './ActionListContainerContext.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { useSlots } from '../hooks/useSlots.js';
-import { Heading } from './Heading.js';
-import { useId } from '../hooks/useId.js';
-import { ListContext } from './shared.js';
-import { useFocusZone } from '../hooks/useFocusZone.js';
-import { clsx } from 'clsx';
-import classes from './ActionList.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
-import { FocusKeys } from '@primer/behaviors';
-
-const List = /*#__PURE__*/React.forwardRef(({
-  variant = 'inset',
-  selectionVariant,
-  showDividers = false,
-  role,
-  sx: sxProp = defaultSxProp,
-  disableFocusZone = false,
-  className,
-  ...props
-}, forwardedRef) => {
-  var _slots$heading$props$;
-  const [slots, childrenWithoutSlots] = useSlots(props.children, {
-    heading: Heading
-  });
-  const headingId = useId();
-
-  /** if list is inside a Menu, it will get a role from the Menu */
-  const {
-    listRole: listRoleFromContainer,
-    listLabelledBy,
-    selectionVariant: containerSelectionVariant,
-    // TODO: Remove after DropdownMenu2 deprecation
-    enableFocusZone: enableFocusZoneFromContainer
-  } = React.useContext(ActionListContainerContext);
-  const ariaLabelledBy = slots.heading ? (_slots$heading$props$ = slots.heading.props.id) !== null && _slots$heading$props$ !== void 0 ? _slots$heading$props$ : headingId : listLabelledBy;
-  const listRole = role || listRoleFromContainer;
-  const listRef = useProvidedRefOrCreate(forwardedRef);
-  let enableFocusZone = false;
-  if (enableFocusZoneFromContainer !== undefined) enableFocusZone = enableFocusZoneFromContainer;else if (listRole && !disableFocusZone) enableFocusZone = ['menu', 'menubar', 'listbox'].includes(listRole);
-  useFocusZone({
-    disabled: !enableFocusZone,
-    containerRef: listRef,
-    bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd | FocusKeys.PageUpDown,
-    focusOutBehavior: listRole === 'menu' ? 'wrap' : undefined
-  });
-  return /*#__PURE__*/jsxs(ListContext.Provider, {
-    value: {
-      variant,
-      selectionVariant: selectionVariant || containerSelectionVariant,
-      showDividers,
-      role: listRole,
-      headingId
-    },
-    children: [slots.heading, /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "ul",
-      sx: sxProp,
-      className: clsx(classes.ActionList, className),
-      role: listRole,
-      "aria-labelledby": ariaLabelledBy,
-      ref: listRef,
-      "data-dividers": showDividers,
-      "data-variant": variant,
-      ...props,
-      children: childrenWithoutSlots
-    })]
-  });
-});
-List.displayName = 'ActionList';
-
-export { List };