@primer/components 33.0.0-rc.b3e4ccee → 33.0.0

package/lib/ActionList/Header.js

@@ -24,7 +24,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const StyledHeader = _styledComponents.default.div.withConfig({
   displayName: "Header__StyledHeader",
-  componentId: "qmofje-0"
+  componentId: "sc-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);

package/lib/ActionList/Item.js

@@ -71,17 +71,17 @@ const getItemVariant = (variant = 'default', disabled) => {
 
 const DividedContent = _styledComponents.default.div.withConfig({
   displayName: "Item__DividedContent",
-  componentId: "jqpvy8-0"
+  componentId: "sc-jqpvy8-0"
 })(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
 
 const MainContent = _styledComponents.default.div.withConfig({
   displayName: "Item__MainContent",
-  componentId: "jqpvy8-1"
+  componentId: "sc-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"
+  componentId: "sc-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
@@ -114,30 +114,30 @@ const StyledItem = _styledComponents.default.div.withConfig({
 
 const TextContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__TextContainer",
-  componentId: "jqpvy8-3"
+  componentId: "sc-jqpvy8-3"
 })([""]);
 
 exports.TextContainer = TextContainer;
 
 const BaseVisualContainer = _styledComponents.default.div.withConfig({
   displayName: "Item__BaseVisualContainer",
-  componentId: "jqpvy8-4"
+  componentId: "sc-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"
+  componentId: "sc-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"
+  componentId: "sc-jqpvy8-6"
 })(["display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).withConfig({
   displayName: "Item__TrailingContent",
-  componentId: "jqpvy8-7"
+  componentId: "sc-jqpvy8-7"
 })(["color:", "};margin-left:", ";margin-right:0;width:auto;div:nth-child(2){margin-left:", ";}"], ({
   variant,
   disabled
@@ -145,12 +145,12 @@ const TrailingContent = (0, _styledComponents.default)(ColoredVisualContainer).w
 
 const DescriptionContainer = _styledComponents.default.span.withConfig({
   displayName: "Item__DescriptionContainer",
-  componentId: "jqpvy8-8"
+  componentId: "sc-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"
+  componentId: "sc-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'), ({

package/lib/ActionList/List.js

@@ -37,7 +37,7 @@ function isGroupedListProps(props) {
 
 const StyledList = _styledComponents.default.div.withConfig({
   displayName: "List__StyledList",
-  componentId: "yr2k7d-0"
+  componentId: "sc-yr2k7d-0"
 })(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.get)('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.

package/lib/ActionList2/Divider.d.ts

@@ -1,5 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
+import { SxProp } from '../sx';
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export declare function Divider(): JSX.Element;
+export declare const Divider: React.FC<SxProp>;

package/lib/ActionList2/Divider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Divider = Divider;
+exports.Divider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,25 +11,30 @@ var _Box = _interopRequireDefault(require("../Box"));
 
 var _constants = require("../constants");
 
+var _sx = require("../sx");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-function Divider() {
+const Divider = ({
+  sx = {}
+}) => {
   return /*#__PURE__*/_react.default.createElement(_Box.default, {
     as: "li",
     role: "separator",
-    sx: {
+    sx: (0, _sx.merge)({
       height: 1,
       backgroundColor: 'actionListItem.inlineDivider',
       marginTop: theme => `calc(${(0, _constants.get)('space.2')(theme)} - 1px)`,
       marginBottom: 2,
       listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
 
-    },
+    }, sx),
     "data-component": "ActionList.Divider"
   });
-}
+};
 
+exports.Divider = Divider;
 Divider.displayName = "Divider";

package/lib/ActionList2/Item.js

@@ -21,6 +21,8 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
 
 var _List = require("./List");
 
+var _MenuContext = require("./MenuContext");
+
 var _Selection = require("./Selection");
 
 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); }
@@ -68,7 +70,7 @@ exports.Slot = Slot;
 
 const LiBox = _styledComponents.default.li.withConfig({
   displayName: "Item__LiBox",
-  componentId: "c3scat-0"
+  componentId: "sc-c3scat-0"
 })(_sx.default);
 
 const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
@@ -82,6 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   onSelect,
   sx: sxProp = {},
   id,
+  role,
   _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
@@ -90,6 +93,11 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     showDividers
   } = _react.default.useContext(_List.ListContext);
 
+  const {
+    itemRole,
+    afterSelect
+  } = _react.default.useContext(_MenuContext.MenuContext);
+
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -165,17 +173,24 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   const clickHandler = _react.default.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
-    if (!event.defaultPrevented) onSelect(event);
-  }, [onSelect, disabled]);
+
+    if (!event.defaultPrevented) {
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
+    }
+  }, [onSelect, disabled, afterSelect]);
 
   const keyPressHandler = _react.default.useCallback(event => {
     if (typeof onSelect !== 'function') return;
     if (disabled) return;
 
     if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
-      onSelect(event);
+      onSelect(event); // if this Item is inside a Menu, close the Menu
+
+      if (typeof afterSelect === 'function') afterSelect();
     }
-  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+  }, [onSelect, disabled, afterSelect]); // use props.id if provided, otherwise generate one.
 
 
   const labelId = (0, _ssr.useSSRSafeId)(id);
@@ -198,7 +213,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     "aria-disabled": disabled ? true : undefined,
     tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
     "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
-    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined,
+    role: role || itemRole
   }, props), /*#__PURE__*/_react.default.createElement(ItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
     selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/_react.default.createElement(_Box.default, {

package/lib/ActionList2/List.js

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _sx = _interopRequireWildcard(require("../sx"));
 
+var _MenuContext = require("./MenuContext");
+
 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; }
@@ -25,13 +27,14 @@ exports.ListContext = ListContext;
 
 const ListBox = _styledComponents.default.ul.withConfig({
   displayName: "List__ListBox",
-  componentId: "cvbq60-0"
+  componentId: "sc-cvbq60-0"
 })(_sx.default);
 
 const List = /*#__PURE__*/_react.default.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
+  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -41,8 +44,15 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
     // reset ul styles
     paddingY: variant === 'inset' ? 2 : 0
   };
+  /** if list is inside a Menu, it will get a role from the Menu */
+
+  const {
+    listRole
+  } = _react.default.useContext(_MenuContext.MenuContext);
+
   return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
-    sx: (0, _sx.merge)(styles, sxProp)
+    sx: (0, _sx.merge)(styles, sxProp),
+    role: role || listRole
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {

package/lib/ActionList2/MenuContext.d.ts

@@ -0,0 +1,10 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+import React from 'react';
+declare type ContextProps = {
+    parent?: string;
+    listRole?: string;
+    itemRole?: string;
+    afterSelect?: () => void;
+};
+export declare const MenuContext: React.Context<ContextProps>;
+export {};

package/lib/ActionList2/MenuContext.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MenuContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** This context can be used by components that compose ActionList inside a Menu */
+const MenuContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.MenuContext = MenuContext;

package/lib/ActionList2/Selection.js

@@ -13,6 +13,8 @@ var _List = require("./List");
 
 var _Group = require("./Group");
 
+var _MenuContext = require("./MenuContext");
+
 var _Visuals = require("./Visuals");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -27,6 +29,10 @@ const Selection = ({
   const {
     selectionVariant: groupSelectionVariant
   } = _react.default.useContext(_Group.GroupContext);
+
+  const {
+    parent
+  } = _react.default.useContext(_MenuContext.MenuContext);
   /** selectionVariant in Group can override the selectionVariant in List root */
 
 
@@ -38,6 +44,11 @@ const Selection = ({
     return null;
   }
 
+  if (parent === 'ActionMenu') {
+    throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
+    return null;
+  }
+
   if (selectionVariant === 'single') {
     return /*#__PURE__*/_react.default.createElement(_Visuals.LeadingVisualContainer, null, selected && /*#__PURE__*/_react.default.createElement(_octiconsReact.CheckIcon, null));
   }

package/lib/ActionList2/index.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { Divider } from './Divider';
 export type { ListProps as ActionListProps } from './List';
 export type { GroupProps } from './Group';
 export type { ItemProps } from './Item';
@@ -26,7 +25,7 @@ export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRe
         referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
     }>;
     /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-    Divider: typeof Divider;
+    Divider: import("react").FC<import("../sx").SxProp>;
     /** Secondary text which provides additional information about an `Item`. */
     Description: import("react").FC<import("./Description").DescriptionProps>;
     /** Icon (or similar) positioned before `Item` text. */