@primer/components 0.0.0-2021108143759 → 0.0.0-2021108175016

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021108143759
+## 0.0.0-2021108175016
 
 ### Minor Changes
 

package/lib/ActionList2/Group.d.ts

@@ -1,32 +1,11 @@
 import React from 'react';
 import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
 import { ListProps } from './List';
-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;
-} & 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,13 +21,12 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant = 'subtle',
+  variant,
   auxiliaryText,
   selectionVariant,
   sx = {},
   ...props
 }) => {
-  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -40,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
@@ -53,51 +49,9 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    },
-    "aria-labelledby": title ? labelId : undefined
+    }
   }, 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,
-    "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/Header.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export declare type HeaderProps = {
+    /**
+     * 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;
+} & SxProp;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib/ActionList2/Header.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _List = require("./List");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+const Header = ({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  sx = {},
+  ...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'
+    }),
+    ...sx
+  };
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    sx: styles,
+    role: "heading"
+  }, props), title, auxiliaryText && /*#__PURE__*/_react.default.createElement("span", null, auxiliaryText));
+};
+
+exports.Header = Header;
+Header.displayName = "Header";

package/lib/ActionList2/Item.d.ts

@@ -7,19 +7,11 @@ export declare const getVariantStyles: (variant: ItemProps['variant'], disabled:
     iconColor: string;
     annotationColor: string;
     hoverColor?: undefined;
-    selectedBg?: undefined;
 } | {
     color: string;
     iconColor: string;
     annotationColor: string;
     hoverColor: string;
-    selectedBg?: undefined;
-} | {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-    hoverColor: string;
-    selectedBg: string;
 };
 export declare type ItemProps = {
     /**

package/lib/ActionList2/Item.js

@@ -54,8 +54,7 @@ const getVariantStyles = (variant, disabled) => {
         color: 'fg.default',
         iconColor: 'fg.muted',
         annotationColor: 'fg.muted',
-        hoverColor: 'fg.default',
-        selectedBg: 'actionListItem.default.selectedBg'
+        hoverColor: 'fg.default'
       };
   }
 };
@@ -110,9 +109,6 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     color: getVariantStyles(variant, disabled).color,
     textDecoration: 'none',
     // for as="a"
-    '&[aria-selected=true]': {
-      backgroundColor: getVariantStyles(variant, disabled).selectedBg
-    },
     ':not([aria-disabled])': {
       cursor: 'pointer'
     },
@@ -122,9 +118,13 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
         color: getVariantStyles(variant, disabled).hoverColor
       },
       ':focus:not([aria-disabled])': {
-        backgroundColor: `actionListItem.${variant}.activeBg`,
+        backgroundColor: `actionListItem.${variant}.selectedBg`,
         color: getVariantStyles(variant, disabled).hoverColor,
         outline: 'none'
+      },
+      ':active:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.activeBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
       }
     },
 

package/lib-esm/ActionList2/Group.d.ts

@@ -1,32 +1,11 @@
 import React from 'react';
 import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
 import { ListProps } from './List';
-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;
-} & 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-esm/ActionList2/Group.js

@@ -1,19 +1,17 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import React from 'react';
-import { useSSRSafeId } from '@react-aria/ssr';
 import Box from '../Box';
-import { ListContext } from './List';
+import { Header } from './Header';
 export const GroupContext = /*#__PURE__*/React.createContext({});
 export const Group = ({
   title,
-  variant = 'subtle',
+  variant,
   auxiliaryText,
   selectionVariant,
   sx = {},
   ...props
 }) => {
-  const labelId = useSSRSafeId();
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "li",
     sx: {
@@ -27,8 +25,7 @@ export const Group = ({
   }, props), title && /*#__PURE__*/React.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText,
-    labelId: labelId
+    auxiliaryText: auxiliaryText
   }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -37,48 +34,7 @@ export const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    },
-    "aria-labelledby": title ? labelId : undefined
+    }
   }, props.children)));
 };
-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.useContext(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.createElement(Box, _extends({
-    sx: styles,
-    "aria-hidden": "true"
-  }, props), /*#__PURE__*/React.createElement("span", {
-    id: labelId
-  }, title), auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
-};
-
-Header.displayName = "Header";
+Group.displayName = "Group";

package/lib-esm/ActionList2/Header.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export declare type HeaderProps = {
+    /**
+     * 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;
+} & SxProp;
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare const Header: ({ variant, title, auxiliaryText, sx, ...props }: HeaderProps) => JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -0,0 +1,44 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import Box from '../Box';
+import { ListContext } from './List';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+
+/**
+ * Displays the name and description of a `Group`.
+ */
+export const Header = ({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  sx = {},
+  ...props
+}) => {
+  const {
+    variant: listVariant
+  } = React.useContext(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 /*#__PURE__*/React.createElement(Box, _extends({
+    sx: styles,
+    role: "heading"
+  }, props), title, auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+};
+Header.displayName = "Header";

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

@@ -7,19 +7,11 @@ export declare const getVariantStyles: (variant: ItemProps['variant'], disabled:
     iconColor: string;
     annotationColor: string;
     hoverColor?: undefined;
-    selectedBg?: undefined;
 } | {
     color: string;
     iconColor: string;
     annotationColor: string;
     hoverColor: string;
-    selectedBg?: undefined;
-} | {
-    color: string;
-    iconColor: string;
-    annotationColor: string;
-    hoverColor: string;
-    selectedBg: string;
 };
 export declare type ItemProps = {
     /**

package/lib-esm/ActionList2/Item.js

@@ -32,8 +32,7 @@ export const getVariantStyles = (variant, disabled) => {
         color: 'fg.default',
         iconColor: 'fg.muted',
         annotationColor: 'fg.muted',
-        hoverColor: 'fg.default',
-        selectedBg: 'actionListItem.default.selectedBg'
+        hoverColor: 'fg.default'
       };
   }
 };
@@ -81,9 +80,6 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     color: getVariantStyles(variant, disabled).color,
     textDecoration: 'none',
     // for as="a"
-    '&[aria-selected=true]': {
-      backgroundColor: getVariantStyles(variant, disabled).selectedBg
-    },
     ':not([aria-disabled])': {
       cursor: 'pointer'
     },
@@ -93,9 +89,13 @@ export const Item = /*#__PURE__*/React.forwardRef(({
         color: getVariantStyles(variant, disabled).hoverColor
       },
       ':focus:not([aria-disabled])': {
-        backgroundColor: `actionListItem.${variant}.activeBg`,
+        backgroundColor: `actionListItem.${variant}.selectedBg`,
         color: getVariantStyles(variant, disabled).hoverColor,
         outline: 'none'
+      },
+      ':active:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.activeBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
       }
     },
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-2021108143759",
+  "version": "0.0.0-2021108175016",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",