@primer/components 0.0.0-2021108142649 → 0.0.0-2021108143211

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/components
 
-## 0.0.0-2021108142649
+## 0.0.0-2021108143211
 
 ### 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,52 +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,
-    role: "heading",
-    "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.js

@@ -186,8 +186,8 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
     "aria-selected": selected,
     "aria-disabled": disabled ? true : undefined,
     tabIndex: disabled ? undefined : -1,
-    "aria-labelledby": labelId,
-    "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
+    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
   }, props), /*#__PURE__*/_react.default.createElement(_PrivateItemWrapper, null, /*#__PURE__*/_react.default.createElement(_Selection.Selection, {
     selected: selected,
     disabled: disabled

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,49 +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,
-    role: "heading",
-    "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.js

@@ -155,8 +155,8 @@ export const Item = /*#__PURE__*/React.forwardRef(({
     "aria-selected": selected,
     "aria-disabled": disabled ? true : undefined,
     tabIndex: disabled ? undefined : -1,
-    "aria-labelledby": labelId,
-    "aria-describedby": [slots.InlineDescription && inlineDescriptionId, slots.BlockDescription && blockDescriptionId].filter(Boolean).join(' ')
+    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
   }, props), /*#__PURE__*/React.createElement(_PrivateItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
     selected: selected,
     disabled: disabled

package/package.json

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