@primer/components 0.0.0-2021101914018 → 0.0.0-2021101914535

package/CHANGELOG.md

@@ -1,12 +1,14 @@
 # @primer/components
 
-## 0.0.0-2021101914018
+## 0.0.0-2021101914535
 
-### Patch Changes
+### Minor Changes
 
-- [#1598](https://github.com/primer/react/pull/1598) [`fdb84f51`](https://github.com/primer/react/commit/fdb84f51d36fe161f72c4b1bdbcadde2e3570fa6) Thanks [@siddharthkp](https://github.com/siddharthkp)! - ActionList: Better semantics for accessibile ActionList.Group
+- [#1619](https://github.com/primer/react/pull/1619) [`38e45b33`](https://github.com/primer/react/commit/38e45b33c5efe70134d2459e39ddcfb66941957d) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Add composable `ActionMenu` to `@primer/components/drafts`
+
+### Patch Changes
 
-* Fake entry to force publishing
+- Fake entry to force publishing
 
 ## 31.2.0
 

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/Divider.jsx

@@ -7,16 +7,17 @@ exports.Divider = void 0;
 const react_1 = __importDefault(require("react"));
 const Box_1 = __importDefault(require("../Box"));
 const constants_1 = require("../constants");
+const sx_1 = require("../sx");
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-function Divider() {
-    return (<Box_1.default as="li" role="separator" sx={{
+const Divider = ({ sx = {} }) => {
+    return (<Box_1.default as="li" role="separator" sx={sx_1.merge({
             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"/>);
-}
+        }, sx)} 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

@@ -5,50 +5,21 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Group = exports.GroupContext = void 0;
 const react_1 = __importDefault(require("react"));
-const ssr_1 = require("@react-aria/ssr");
 const Box_1 = __importDefault(require("../Box"));
-const List_1 = require("./List");
+const Header_1 = require("./Header");
 exports.GroupContext = react_1.default.createContext({});
-const Group = ({ title, variant = 'subtle', auxiliaryText, selectionVariant, role, sx = {}, ...props }) => {
-    const labelId = ssr_1.useSSRSafeId();
+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 title={title} variant={variant} auxiliaryText={auxiliaryText} labelId={labelId}/>}
+      {title && <Header_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
       <exports.GroupContext.Provider value={{ selectionVariant }}>
-        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }} aria-labelledby={title ? labelId : undefined} role={role}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
           {props.children}
         </Box_1.default>
       </exports.GroupContext.Provider>
     </Box_1.default>);
 };
 exports.Group = 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_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'
-        })
-    };
-    return (<Box_1.default sx={styles} role="presentation" aria-hidden="true" {...props}>
-      <span id={labelId}>{title}</span>
-      {auxiliaryText && <span>{auxiliaryText}</span>}
-    </Box_1.default>);
-};

package/lib/ActionList2/Item.js

@@ -21,6 +21,8 @@ var _createSlots = _interopRequireDefault(require("../utils/create-slots"));
 
 var _List = require("./List");
 
+var _ActionMenu = require("../ActionMenu2");
+
 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); }
@@ -82,6 +84,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   onSelect = () => null,
   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,
+    onClose: onMenuClose
+  } = _react.default.useContext(_ActionMenu.MenuContext);
+
   const {
     theme
   } = (0, _ThemeProvider.useTheme)();
@@ -165,16 +173,23 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
 
   const clickHandler = _react.default.useCallback(event => {
     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 onMenuClose === 'function') onMenuClose();
+    }
+  }, [onSelect, disabled, onMenuClose]);
 
   const keyPressHandler = _react.default.useCallback(event => {
     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 onMenuClose === 'function') onMenuClose();
     }
-  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+  }, [onSelect, disabled, onMenuClose]); // use props.id if provided, otherwise generate one.
 
 
   const labelId = (0, _ssr.useSSRSafeId)(id);
@@ -197,7 +212,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,
     disabled: disabled

package/lib/ActionList2/Item.jsx

@@ -31,6 +31,7 @@ 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 ActionMenu2_1 = require("../ActionMenu2");
 const Selection_1 = require("./Selection");
 const getVariantStyles = (variant, disabled) => {
     if (disabled) {
@@ -62,8 +63,9 @@ const { Slots, Slot } = create_slots_1.default(['LeadingVisual', 'InlineDescript
 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) => {
+exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = false, selected = undefined, onSelect = () => null, sx: sxProp = {}, id, role, _PrivateItemWrapper, ...props }, forwardedRef) => {
     const { variant: listVariant, showDividers } = react_1.default.useContext(List_1.ListContext);
+    const { itemRole, onClose: onMenuClose } = react_1.default.useContext(ActionMenu2_1.MenuContext);
     const { theme } = ThemeProvider_1.useTheme();
     const styles = {
         display: 'flex',
@@ -128,23 +130,30 @@ exports.Item = react_1.default.forwardRef(({ variant = 'default', disabled = fal
     const clickHandler = react_1.default.useCallback(event => {
         if (disabled)
             return;
-        if (!event.defaultPrevented)
+        if (!event.defaultPrevented) {
             onSelect(event);
-    }, [onSelect, disabled]);
+            // if this Item is inside a Menu, close the Menu
+            if (typeof onMenuClose === 'function')
+                onMenuClose();
+        }
+    }, [onSelect, disabled, onMenuClose]);
     const keyPressHandler = react_1.default.useCallback(event => {
         if (disabled)
             return;
         if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
             onSelect(event);
+            // if this Item is inside a Menu, close the Menu
+            if (typeof onMenuClose === 'function')
+                onMenuClose();
         }
-    }, [onSelect, disabled]);
+    }, [onSelect, disabled, onMenuClose]);
     // 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}>
+        {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} role={role || itemRole} {...props}>
             <ItemWrapper>
               <Selection_1.Selection selected={selected} disabled={disabled}/>
               {slots.LeadingVisual}

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

@@ -11,6 +11,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _sx = _interopRequireWildcard(require("../sx"));
 
+var _ActionMenu = require("../ActionMenu2");
+
 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; }
@@ -32,6 +34,7 @@ const List = /*#__PURE__*/_react.default.forwardRef(({
   variant = 'inset',
   selectionVariant,
   showDividers = false,
+  role,
   sx: sxProp = {},
   ...props
 }, forwardedRef) => {
@@ -41,9 +44,16 @@ 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(_ActionMenu.MenuContext);
+
   return /*#__PURE__*/_react.default.createElement(ListBox, _extends({
     sx: (0, _sx.merge)(styles, sxProp),
-    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined
+    "aria-multiselectable": selectionVariant === 'multiple' ? true : undefined,
+    role: role || listRole
   }, props, {
     ref: forwardedRef
   }), /*#__PURE__*/_react.default.createElement(ListContext.Provider, {

package/lib/ActionList2/List.jsx

@@ -26,15 +26,18 @@ exports.List = exports.ListContext = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const sx_1 = __importStar(require("../sx"));
+const ActionMenu2_1 = require("../ActionMenu2");
 exports.ListContext = react_1.default.createContext({});
 const ListBox = styled_components_1.default.ul(sx_1.default);
-exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, sx: sxProp = {}, ...props }, forwardedRef) => {
+exports.List = react_1.default.forwardRef(({ variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props }, forwardedRef) => {
     const styles = {
         margin: 0,
         paddingInlineStart: 0,
         paddingY: variant === 'inset' ? 2 : 0
     };
-    return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} {...props} ref={forwardedRef}>
+    /** if list is inside a Menu, it will get a role from the Menu */
+    const { listRole } = react_1.default.useContext(ActionMenu2_1.MenuContext);
+    return (<ListBox sx={sx_1.merge(styles, sxProp)} aria-multiselectable={selectionVariant === 'multiple' ? true : undefined} role={role || listRole} {...props} ref={forwardedRef}>
         <exports.ListContext.Provider value={{ variant, selectionVariant, showDividers }}>{props.children}</exports.ListContext.Provider>
       </ListBox>);
 });

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. */