@primer/components 0.0.0-2021102918546 → 0.0.0-202110303104

package/lib/ActionList/List.jsx

@@ -0,0 +1,138 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.List = void 0;
+const react_1 = __importDefault(require("react"));
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../constants");
+const focusZone_1 = require("../behaviors/focusZone");
+/**
+ * Asserts that the given value fulfills the `GroupedListProps` contract.
+ * @param props A value which fulfills either the `ListPropsBase` or the `GroupedListProps` contract.
+ */
+function isGroupedListProps(props) {
+    return 'groupMetadata' in props;
+}
+const StyledList = styled_components_1.default.div `
+  font-size: ${constants_1.get('fontSizes.1')};
+  /* 14px font-size * 1.428571429 = 20px line height
+   *
+   * TODO: When rem-based spacing on a 4px scale lands, replace
+   * hardcoded '20px'
+   */
+  line-height: 20px;
+
+  &[${focusZone_1.hasActiveDescendantAttribute}], &:focus-within {
+    --item-hover-bg-override: none;
+    --item-hover-divider-border-color-override: ${constants_1.get('colors.border.muted')};
+  }
+`;
+/**
+ * Returns `sx` prop values for `List` children matching the given `List` style variation.
+ * @param variant `List` style variation.
+ */
+function useListVariant(variant = 'inset') {
+    switch (variant) {
+        case 'full':
+            return {
+                headerStyle: { paddingX: constants_1.get('space.2') },
+                itemStyle: { borderRadius: 0 }
+            };
+        default:
+            return {
+                firstGroupStyle: { marginTop: constants_1.get('space.2') },
+                lastGroupStyle: { marginBottom: constants_1.get('space.2') },
+                itemStyle: { marginX: constants_1.get('space.2') }
+            };
+    }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+exports.List = react_1.default.forwardRef((props, forwardedRef) => {
+    // Get `sx` prop values for `List` children matching the given `List` style variation.
+    const { firstGroupStyle, lastGroupStyle, headerStyle, itemStyle } = useListVariant(props.variant);
+    /**
+     * Render a `Group` using the first of the following renderers that is defined:
+     * A `Group`-level or `List`-level custom `Group` renderer, or
+     * the default `Group` renderer.
+     */
+    const renderGroup = (groupProps) => {
+        const GroupComponent = (('renderGroup' in groupProps && groupProps.renderGroup) ?? props.renderGroup) || Group_1.Group;
+        return <GroupComponent {...groupProps} key={groupProps.groupId}/>;
+    };
+    /**
+     * Render an `Item` using the first of the following renderers that is defined:
+     * An `Item`-level, `Group`-level, or `List`-level custom `Item` renderer,
+     * or the default `Item` renderer.
+     */
+    const renderItem = (itemProps, item, itemIndex) => {
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        const ItemComponent = ('renderItem' in itemProps && itemProps.renderItem) || props.renderItem || Item_1.Item;
+        const key = ('key' in itemProps ? itemProps.key : undefined) ?? itemProps.id?.toString() ?? itemIndex.toString();
+        return (<ItemComponent showDivider={props.showItemDividers} selectionVariant={props.selectionVariant} {...itemProps} key={key} sx={{ ...itemStyle, ...itemProps.sx }} item={item}/>);
+    };
+    /**
+     * An array of `Group`s, each with an associated `Header` and with an array of `Item`s belonging to that `Group`.
+     */
+    let groups = [];
+    // Collect rendered `Item`s into `Group`s, avoiding excess iteration over the lists of `items` and `groupMetadata`:
+    if (!isGroupedListProps(props)) {
+        // When no `groupMetadata`s is provided, collect rendered `Item`s into a single anonymous `Group`.
+        groups = [{ items: props.items.map((item, index) => renderItem(item, item, index)), groupId: '0' }];
+    }
+    else {
+        // When `groupMetadata` is provided, collect rendered `Item`s into their associated `Group`s.
+        /**
+         * A map of group identifiers to `Group`s, each with an associated array of `Item`s belonging to that `Group`.
+         */
+        const groupMap = props.groupMetadata.reduce((groupAccumulator, groupMetadata) => groupAccumulator.set(groupMetadata.groupId, groupMetadata), new Map());
+        for (const itemProps of props.items) {
+            // Look up the group associated with the current item.
+            const group = groupMap.get(itemProps.groupId);
+            const itemIndex = group?.items?.length ?? 0;
+            // Upsert the group to include the current item (rendered).
+            groupMap.set(itemProps.groupId, {
+                ...group,
+                items: [
+                    ...(group?.items ?? []),
+                    renderItem({
+                        showDivider: group?.showItemDividers,
+                        ...(group && 'renderItem' in group && { renderItem: group.renderItem }),
+                        ...itemProps
+                    }, itemProps, itemIndex)
+                ]
+            });
+        }
+        groups = [...groupMap.values()];
+    }
+    return (<StyledList {...props} ref={forwardedRef}>
+      {groups.map(({ header, ...groupProps }, index) => {
+            const hasFilledHeader = header?.variant === 'filled';
+            const shouldShowDivider = index > 0 && !hasFilledHeader;
+            return (<react_1.default.Fragment key={groupProps.groupId}>
+            {shouldShowDivider ? <Divider_1.Divider key={`${groupProps.groupId}-divider`}/> : null}
+            {renderGroup({
+                    sx: {
+                        ...(index === 0 && firstGroupStyle),
+                        ...(index === groups.length - 1 && lastGroupStyle),
+                        ...(index > 0 && !shouldShowDivider && { mt: 2 })
+                    },
+                    ...(header && {
+                        header: {
+                            ...header,
+                            sx: { ...headerStyle, ...header.sx }
+                        }
+                    }),
+                    ...groupProps
+                })}
+          </react_1.default.Fragment>);
+        })}
+    </StyledList>);
+});
+exports.List.displayName = 'ActionList';

package/lib/ActionList/index.js

@@ -1,29 +1,18 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionList = void 0;
-
-var _List = require("./List");
-
-var _Group = require("./Group");
-
-var _Item = require("./Item");
-
-var _Divider = require("./Divider");
-
+const List_1 = require("./List");
+const Group_1 = require("./Group");
+const Item_1 = require("./Item");
+const Divider_1 = require("./Divider");
 /**
  * Collection of list-related components.
  */
-const ActionList = Object.assign(_List.List, {
-  /** Collects related `Items` in an `ActionList`. */
-  Group: _Group.Group,
-
-  /** An actionable or selectable `Item` with an optional icon and description. */
-  Item: _Item.Item,
-
-  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
-  Divider: _Divider.Divider
+exports.ActionList = Object.assign(List_1.List, {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: Group_1.Group,
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: Item_1.Item,
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: Divider_1.Divider
 });
-exports.ActionList = ActionList;

package/lib/ActionList2/Description.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const sx_1 = require("../sx");
+const Truncate_1 = __importDefault(require("../Truncate"));
+const Item_1 = require("./Item");
+const Description = ({ variant = 'inline', sx = {}, ...props }) => {
+    const styles = {
+        fontSize: 0,
+        lineHeight: '16px',
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 0,
+        marginLeft: variant === 'block' ? 0 : 2
+    };
+    return (<Item_1.Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
+      {({ blockDescriptionId, inlineDescriptionId, disabled }) => variant === 'block' ? (<Box_1.default as="span" sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} id={blockDescriptionId}>
+            {props.children}
+          </Box_1.default>) : (<Truncate_1.default id={inlineDescriptionId} sx={sx_1.merge({ ...styles, color: disabled ? 'fg.disabled' : 'fg.muted' }, sx)} title={props.children} inline={true} maxWidth="100%">
+            {props.children}
+          </Truncate_1.default>)}
+    </Item_1.Slot>);
+};
+exports.Description = Description;

package/lib/ActionList2/Divider.jsx

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Divider = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const constants_1 = require("../constants");
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+function Divider() {
+    return (<Box_1.default as="li" role="separator" sx={{
+            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"/>);
+}
+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

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Group = exports.GroupContext = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const Header_1 = require("./Header");
+exports.GroupContext = react_1.default.createContext({});
+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_1.Header title={title} variant={variant} auxiliaryText={auxiliaryText}/>}
+      <exports.GroupContext.Provider value={{ selectionVariant }}>
+        <Box_1.default as="ul" sx={{ paddingInlineStart: 0 }}>
+          {props.children}
+        </Box_1.default>
+      </exports.GroupContext.Provider>
+    </Box_1.default>);
+};
+exports.Group = 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/Header.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = void 0;
+const react_1 = __importDefault(require("react"));
+const Box_1 = __importDefault(require("../Box"));
+const List_1 = require("./List");
+/**
+ * Displays the name and description of a `Group`.
+ */
+const Header = ({ variant = 'subtle', title, auxiliaryText, sx = {}, ...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'
+        }),
+        ...sx
+    };
+    return (<Box_1.default sx={styles} role="heading" {...props}>
+      {title}
+      {auxiliaryText && <span>{auxiliaryText}</span>}
+    </Box_1.default>);
+};
+exports.Header = Header;

package/lib/ActionList2/Item.js

@@ -79,8 +79,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef(({
   variant = 'default',
   disabled = false,
   selected = undefined,
-  onSelect = () => {// do nothing
-  },
+  onSelect = () => null,
   sx: sxProp = {},
   id,
   _PrivateItemWrapper,