@primer/components 32.1.1-rc.b4502a34 → 33.0.0-rc.956a1af6

package/lib/stories/Checkbox.stories.js

@@ -50,12 +50,12 @@ exports.default = _default;
 
 const StyledLabel = _styledComponents.default.label.withConfig({
   displayName: "Checkboxstories__StyledLabel",
-  componentId: "sdupvr-0"
+  componentId: "sc-sdupvr-0"
 })(["user-select:none;font-weight:600;font-size:14px;line-height:18px;margin-left:16px;", ""], _constants.COMMON);
 
 const StyledSubLabel = (0, _styledComponents.default)(_2.Text).withConfig({
   displayName: "Checkboxstories__StyledSubLabel",
-  componentId: "sdupvr-1"
+  componentId: "sc-sdupvr-1"
 })(["color:", ";font-size:13px;", ""], (0, _constants.get)('colors.fg.muted'), _constants.COMMON);
 
 const Default = args => {

package/lib/stories/ThemeProvider.stories.js

@@ -25,11 +25,7 @@ var _default = {
   }
 };
 exports.default = _default;
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
-    body {
-        background-color: ${(0, _.themeGet)('colors.bg.canvas')};
-    }
-`;
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)(["body{background-color:", ";}"], (0, _.themeGet)('colors.bg.canvas'));
 
 function ActiveColorScheme() {
   const {

package/lib/stories/useFocusTrap.stories.js

@@ -28,17 +28,7 @@ var _default = {
 // this Storybook story, but they're not recommended for a real site!
 
 exports.default = _default;
-const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)`
-  *:focus {
-    outline: 2px solid ${(0, _themeGet.themeGet)('colors.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${(0, _themeGet.themeGet)('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${(0, _themeGet.themeGet)('colors.auto.yellow.2')}
-  }
-`;
+const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)(["*:focus{outline:2px solid ", " !important;}[data-focus-trap='active']{background-color:", "}[data-focus-trap='suspended']{background-color:", "}"], (0, _themeGet.themeGet)('colors.auto.blue.3'), (0, _themeGet.themeGet)('colors.auto.green.2'), (0, _themeGet.themeGet)('colors.auto.yellow.2'));
 const MarginButton = (0, _styledComponents.default)(_.Button).withConfig({
   displayName: "useFocusTrapstories__MarginButton",
   componentId: "sc-12zkn1e-0"

package/lib/stories/useFocusZone.stories.js

@@ -36,14 +36,10 @@ var _default = {
 // this Storybook story, but they're not recommended for a real site!
 
 exports.default = _default;
-const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)`
-  *:focus {
-    outline: 2px solid ${(0, _themeGet.themeGet)('colors.border.info')} !important;
-  }
-`;
+const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)(["*:focus{outline:2px solid ", " !important;}"], (0, _themeGet.themeGet)('colors.border.info'));
 const MarginButton = (0, _styledComponents.default)(_.Button).withConfig({
   displayName: "useFocusZonestories__MarginButton",
-  componentId: "e94kdz-0"
+  componentId: "sc-e94kdz-0"
 })(["margin:", ";"], (0, _themeGet.themeGet)('space.1'));
 
 const BasicFocusZone = () => {

package/lib-esm/ActionList/Header.js

@@ -10,7 +10,7 @@ import sx from '../sx';
 
 export const StyledHeader = styled.div.withConfig({
   displayName: "Header__StyledHeader",
-  componentId: "qmofje-0"
+  componentId: "sc-qmofje-0"
 })(["{}padding:6px ", ";font-size:", ";font-weight:", ";color:", ";", " ", ""], get('space.3'), get('fontSizes.0'), get('fontWeights.bold'), get('colors.fg.muted'), ({
   variant
 }) => variant === 'filled' && css(["background:", ";margin:", " 0;border-top:1px solid ", ";border-bottom:1px solid ", ";&:first-child{margin-top:0;}"], get('colors.canvas.subtle'), get('space.2'), get('colors.neutral.muted'), get('colors.neutral.muted')), sx);

package/lib-esm/ActionList/Item.js

@@ -48,15 +48,15 @@ const getItemVariant = (variant = 'default', disabled) => {
 
 const DividedContent = styled.div.withConfig({
   displayName: "Item__DividedContent",
-  componentId: "jqpvy8-0"
+  componentId: "sc-jqpvy8-0"
 })(["display:flex;min-width:0;position:relative;flex-grow:1;"]);
 const MainContent = styled.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 = styled.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:", ";}", ""], get('space.2'), get('radii.2'), ({
   variant,
   item
@@ -88,37 +88,37 @@ const StyledItem = styled.div.withConfig({
 }) => getItemVariant(variant, item === null || item === void 0 ? void 0 : item.disabled).focusBg, sx);
 export const TextContainer = styled.span.withConfig({
   displayName: "Item__TextContainer",
-  componentId: "jqpvy8-3"
+  componentId: "sc-jqpvy8-3"
 })([""]);
 const BaseVisualContainer = styled.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;"], get('space.3'), get('space.2'));
 const ColoredVisualContainer = styled(BaseVisualContainer).withConfig({
   displayName: "Item__ColoredVisualContainer",
-  componentId: "jqpvy8-5"
+  componentId: "sc-jqpvy8-5"
 })(["svg{fill:", ";font-size:", ";}"], ({
   variant,
   disabled
 }) => getItemVariant(variant, disabled).iconColor, get('fontSizes.0'));
 const LeadingVisualContainer = styled(ColoredVisualContainer).withConfig({
   displayName: "Item__LeadingVisualContainer",
-  componentId: "jqpvy8-6"
+  componentId: "sc-jqpvy8-6"
 })(["display:flex;flex-direction:column;justify-content:center;"]);
 const TrailingContent = styled(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
 }) => getItemVariant(variant, disabled).annotationColor, get('space.2'), get('space.2'));
 const DescriptionContainer = styled.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);"], get('colors.fg.muted'), get('fontSizes.0'));
 const MultiSelectIcon = styled.svg.withConfig({
   displayName: "Item__MultiSelectIcon",
-  componentId: "jqpvy8-9"
+  componentId: "sc-jqpvy8-9"
 })(["rect{fill:", ";stroke:", ";shape-rendering:auto;}path{fill:", ";boxshadow:", ";opacity:", ";}"], ({
   selected
 }) => selected ? get('colors.accent.fg') : get('colors.canvas.default'), ({

package/lib-esm/ActionList/List.js

@@ -22,7 +22,7 @@ function isGroupedListProps(props) {
 
 const StyledList = styled.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:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, get('colors.border.muted'));
 /**
  * Returns `sx` prop values for `List` children matching the given `List` style variation.

package/lib-esm/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-esm/ActionList2/Divider.js

@@ -1,23 +1,26 @@
 import React from 'react';
 import Box from '../Box';
 import { get } from '../constants';
-
+import { merge } from '../sx';
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export function Divider() {
+
+export const Divider = ({
+  sx = {}
+}) => {
   return /*#__PURE__*/React.createElement(Box, {
     as: "li",
     role: "separator",
-    sx: {
+    sx: merge({
       height: 1,
       backgroundColor: 'actionListItem.inlineDivider',
       marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
       marginBottom: 2,
       listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
 
-    },
+    }, sx),
     "data-component": "ActionList.Divider"
   });
-}
+};
 Divider.displayName = "Divider";

package/lib-esm/ActionList2/Item.js

@@ -8,6 +8,7 @@ import Box from '../Box';
 import sx, { merge } from '../sx';
 import createSlots from '../utils/create-slots';
 import { ListContext } from './List';
+import { MenuContext } from './MenuContext';
 import { Selection } from './Selection';
 export const getVariantStyles = (variant, disabled) => {
   if (disabled) {
@@ -43,7 +44,7 @@ const {
 export { Slot };
 const LiBox = styled.li.withConfig({
   displayName: "Item__LiBox",
-  componentId: "c3scat-0"
+  componentId: "sc-c3scat-0"
 })(sx);
 export const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
 
@@ -54,6 +55,7 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   onSelect,
   sx: sxProp = {},
   id,
+  role,
   _PrivateItemWrapper,
   ...props
 }, forwardedRef) => {
@@ -61,6 +63,10 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     variant: listVariant,
     showDividers
   } = React.useContext(ListContext);
+  const {
+    itemRole,
+    afterSelect
+  } = React.useContext(MenuContext);
   const {
     theme
   } = useTheme();
@@ -135,16 +141,23 @@ export const Item = /*#__PURE__*/React.forwardRef(({
   const clickHandler = React.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.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 = useSSRSafeId(id);
   const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
@@ -166,7 +179,8 @@ export const Item = /*#__PURE__*/React.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.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
     selected: selected
   }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {

package/lib-esm/ActionList2/List.js

@@ -3,15 +3,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from 'react';
 import styled from 'styled-components';
 import sx, { merge } from '../sx';
+import { MenuContext } from './MenuContext';
 export const ListContext = /*#__PURE__*/React.createContext({});
 const ListBox = styled.ul.withConfig({
   displayName: "List__ListBox",
-  componentId: "cvbq60-0"
+  componentId: "sc-cvbq60-0"
 })(sx);
 export const List = /*#__PURE__*/React.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
+  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -21,8 +23,14 @@ export const List = /*#__PURE__*/React.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.useContext(MenuContext);
   return /*#__PURE__*/React.createElement(ListBox, _extends({
-    sx: merge(styles, sxProp)
+    sx: merge(styles, sxProp),
+    role: role || listRole
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/React.createElement(ListContext.Provider, {

package/lib-esm/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-esm/ActionList2/MenuContext.js

@@ -0,0 +1,3 @@
+/** This context can be used by components that compose ActionList inside a Menu */
+import React from 'react';
+export const MenuContext = /*#__PURE__*/React.createContext({});

package/lib-esm/ActionList2/Selection.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { CheckIcon } from '@primer/octicons-react';
 import { ListContext } from './List';
 import { GroupContext } from './Group';
+import { MenuContext } from './MenuContext';
 import { LeadingVisualContainer } from './Visuals';
 export const Selection = ({
   selected
@@ -12,6 +13,9 @@ export const Selection = ({
   const {
     selectionVariant: groupSelectionVariant
   } = React.useContext(GroupContext);
+  const {
+    parent
+  } = React.useContext(MenuContext);
   /** selectionVariant in Group can override the selectionVariant in List root */
 
   const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
@@ -22,6 +26,11 @@ export 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.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
   }

package/lib-esm/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. */