@primer/components 0.0.0-2021111223235 → 0.0.0-2021111225614

package/lib/ActionList/List.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.List = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Group = require("./Group");
+
+var _Item = require("./Item");
+
+var _Divider = require("./Divider");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _focusZone = require("../behaviors/focusZone");
+
+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); }
+
+/**
+ * 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;
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+
+
+const StyledList = _styledComponents.default.div.withConfig({
+  displayName: "List__StyledList",
+  componentId: "yr2k7d-0"
+})(["font-size:", ";line-height:20px;&[", "],&:focus-within{--item-hover-bg-override:none;--item-hover-divider-border-color-override:", ";}"], (0, _constants.get)('fontSizes.1'), _focusZone.hasActiveDescendantAttribute, (0, _constants.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: (0, _constants.get)('space.2')
+        },
+        itemStyle: {
+          borderRadius: 0
+        }
+      };
+
+    default:
+      return {
+        firstGroupStyle: {
+          marginTop: (0, _constants.get)('space.2')
+        },
+        lastGroupStyle: {
+          marginBottom: (0, _constants.get)('space.2')
+        },
+        itemStyle: {
+          marginX: (0, _constants.get)('space.2')
+        }
+      };
+  }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+
+
+const List = /*#__PURE__*/_react.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 => {
+    var _ref;
+
+    const GroupComponent = ((_ref = 'renderGroup' in groupProps && groupProps.renderGroup) !== null && _ref !== void 0 ? _ref : props.renderGroup) || _Group.Group;
+    return /*#__PURE__*/_react.default.createElement(GroupComponent, _extends({}, 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) => {
+    var _ref2, _ref3, _itemProps$id;
+
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    const ItemComponent = 'renderItem' in itemProps && itemProps.renderItem || props.renderItem || _Item.Item;
+    const key = (_ref2 = (_ref3 = 'key' in itemProps ? itemProps.key : undefined) !== null && _ref3 !== void 0 ? _ref3 : (_itemProps$id = itemProps.id) === null || _itemProps$id === void 0 ? void 0 : _itemProps$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : itemIndex.toString();
+    return /*#__PURE__*/_react.default.createElement(ItemComponent, _extends({
+      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) {
+      var _group$items$length, _group$items, _group$items2;
+
+      // Look up the group associated with the current item.
+      const group = groupMap.get(itemProps.groupId);
+      const itemIndex = (_group$items$length = group === null || group === void 0 ? void 0 : (_group$items = group.items) === null || _group$items === void 0 ? void 0 : _group$items.length) !== null && _group$items$length !== void 0 ? _group$items$length : 0; // Upsert the group to include the current item (rendered).
+
+      groupMap.set(itemProps.groupId, { ...group,
+        items: [...((_group$items2 = group === null || group === void 0 ? void 0 : group.items) !== null && _group$items2 !== void 0 ? _group$items2 : []), renderItem({
+          showDivider: group === null || group === void 0 ? void 0 : group.showItemDividers,
+          ...(group && 'renderItem' in group && {
+            renderItem: group.renderItem
+          }),
+          ...itemProps
+        }, itemProps, itemIndex)]
+      });
+    }
+
+    groups = [...groupMap.values()];
+  }
+
+  return /*#__PURE__*/_react.default.createElement(StyledList, _extends({}, props, {
+    ref: forwardedRef
+  }), groups.map(({
+    header,
+    ...groupProps
+  }, index) => {
+    const hasFilledHeader = (header === null || header === void 0 ? void 0 : header.variant) === 'filled';
+    const shouldShowDivider = index > 0 && !hasFilledHeader;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: groupProps.groupId
+    }, shouldShowDivider ? /*#__PURE__*/_react.default.createElement(_Divider.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
+    }));
+  }));
+});
+
+exports.List = List;
+List.displayName = 'ActionList';

package/lib/ActionList/index.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Group } from './Group';
+import { Divider } from './Divider';
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("react").ForwardRefExoticComponent<import("./List").ListProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: typeof Group;
+    /** An actionable or selectable `Item` with an optional icon and description. */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"div", import("./Item").ItemProps>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: typeof Divider;
+};

package/lib/ActionList/index.js

@@ -0,0 +1,29 @@
+"use strict";
+
+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");
+
+/**
+ * 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 = ActionList;

package/lib/ActionList2/Description.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SxProp } from '../sx';
+export declare type DescriptionProps = {
+    /**
+     * Secondary text style variations.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    variant?: 'inline' | 'block';
+} & SxProp;
+export declare const Description: React.FC<DescriptionProps>;

package/lib/ActionList2/Description.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Description = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _sx = require("../sx");
+
+var _Truncate = _interopRequireDefault(require("../Truncate"));
+
+var _Item = require("./Item");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Description = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
+  const styles = {
+    fontSize: 0,
+    lineHeight: '16px',
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    marginLeft: variant === 'block' ? 0 : 2
+  };
+  return /*#__PURE__*/_react.default.createElement(_Item.Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId,
+    disabled
+  }) => variant === 'block' ? /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "span",
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/_react.default.createElement(_Truncate.default, {
+    id: inlineDescriptionId,
+    sx: (0, _sx.merge)({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+
+exports.Description = Description;
+Description.displayName = "Description";

package/lib/ActionList2/Divider.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SxProp } from '../sx';
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare const Divider: React.FC<SxProp>;

package/lib/ActionList2/Divider.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Divider = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+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`.
+ */
+const Divider = ({
+  sx = {}
+}) => {
+  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+    as: "li",
+    role: "separator",
+    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/Group.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { SxProp } from '../sx';
+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.
+     */
+    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

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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");
+
+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); }
+
+const GroupContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.GroupContext = GroupContext;
+
+const Group = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = (0, _ssr.useSSRSafeId)();
+  return /*#__PURE__*/_react.default.createElement(_Box.default, _extends({
+    as: "li",
+    sx: {
+      '&:not(:first-child)': {
+        marginTop: 2
+      },
+      listStyle: 'none',
+      // hide the ::marker inserted by browser's stylesheet
+      ...sx
+    }
+  }, props), title && /*#__PURE__*/_react.default.createElement(Header, {
+    title: title,
+    variant: variant,
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
+  }), /*#__PURE__*/_react.default.createElement(GroupContext.Provider, {
+    value: {
+      selectionVariant
+    }
+  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
+    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";

package/lib/ActionList2/Item.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { ForwardRefComponent as PolymorphicForwardRefComponent } from '@radix-ui/react-polymorphic';
+import { SxProp } from '../sx';
+import { AriaRole } from '../utils/types';
+export declare const getVariantStyles: (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
+    color: string;
+    iconColor: string;
+    annotationColor: string;
+    hoverColor?: undefined;
+} | {
+    color: string;
+    iconColor: string;
+    annotationColor: string;
+    hoverColor: string;
+};
+export declare type ItemProps = {
+    /**
+     * Primary content for an Item
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onSelect?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLLIElement>) => void;
+    /**
+     * Is the `Item` is currently selected?
+     */
+    selected?: boolean;
+    /**
+     * Style variations associated with various `Item` types.
+     *
+     * - `"default"` - An action `Item`.
+     * - `"danger"` - A destructive action `Item`.
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * Items that are disabled can not be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * The ARIA role describing the function of `Item` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * id to attach to the root element of the Item
+     */
+    id?: string;
+    /**
+     * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
+     */
+    _PrivateItemWrapper?: React.FC;
+} & SxProp;
+declare const Slot: React.FC<{
+    name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
+    children: React.ReactNode;
+}>;
+export { Slot };
+export declare type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
+    inlineDescriptionId: string;
+    blockDescriptionId: string;
+};
+export declare const TEXT_ROW_HEIGHT = "20px";
+export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;