@primer/components 0.0.0-20211081215 → 0.0.0-2021108143910

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-20211081215
+## 0.0.0-2021108143910
 
 ### Minor Changes
 

package/lib/ActionList2/Group.d.ts

@@ -1,11 +1,32 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
 import { ListProps } from './List';
-export declare type GroupProps = HeaderProps & SxProp & {
+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.
+     */
     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,9 +7,11 @@ exports.Group = exports.GroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _ssr = require("@react-aria/ssr");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Header = require("./Header");
+var _List = require("./List");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -21,12 +23,13 @@ exports.GroupContext = GroupContext;
 
 const Group = ({
   title,
-  variant,
+  variant = 'subtle',
   auxiliaryText,
   selectionVariant,
   sx = {},
   ...props
 }) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
   return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
     as: "li",
     sx: {
@@ -37,10 +40,11 @@ const Group = ({
       // hide the ::marker inserted by browser's stylesheet
       ...sx
     }
-  }, props), title && /*#__PURE__*/_react.default.createElement(_Header.Header, {
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
   }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -49,9 +53,52 @@ const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    }
+    },
+    "aria-labelledby": title ? labelId : undefined
   }, props.children)));
 };
 
 exports.Group = Group;
-Group.displayName = "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";

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

@@ -1,11 +1,32 @@
 import React from 'react';
 import { SxProp } from '../sx';
-import { HeaderProps } from './Header';
 import { ListProps } from './List';
-export declare type GroupProps = HeaderProps & SxProp & {
+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.
+     */
     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,17 +1,19 @@
 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 { Header } from './Header';
+import { ListContext } from './List';
 export const GroupContext = /*#__PURE__*/React.createContext({});
 export const Group = ({
   title,
-  variant,
+  variant = 'subtle',
   auxiliaryText,
   selectionVariant,
   sx = {},
   ...props
 }) => {
+  const labelId = useSSRSafeId();
   return /*#__PURE__*/React.createElement(Box, _extends({
     as: "li",
     sx: {
@@ -25,7 +27,8 @@ export const Group = ({
   }, props), title && /*#__PURE__*/React.createElement(Header, {
     title: title,
     variant: variant,
-    auxiliaryText: auxiliaryText
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
   }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
     value: {
       selectionVariant
@@ -34,7 +37,49 @@ export const Group = ({
     as: "ul",
     sx: {
       paddingInlineStart: 0
-    }
+    },
+    "aria-labelledby": title ? labelId : undefined
   }, props.children)));
 };
-Group.displayName = "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.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,
+    role: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/React.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/package.json

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

package/lib/ActionList2/Header.d.ts

@@ -1,26 +0,0 @@
-/// <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

@@ -1,55 +0,0 @@
-"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-esm/ActionList2/Header.d.ts

@@ -1,26 +0,0 @@
-/// <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

@@ -1,44 +0,0 @@
-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";