@primer/components 0.0.0-202111023322 → 0.0.0-2021111104725

package/lib-esm/ActionList/List.js

@@ -0,0 +1,181 @@
+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 { Group } from './Group';
+import { Item } from './Item';
+import { Divider } from './Divider';
+import styled from 'styled-components';
+import { get } from '../constants';
+import { hasActiveDescendantAttribute } from '../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;
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+
+
+const StyledList = styled.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:", ";}"], get('fontSizes.1'), hasActiveDescendantAttribute, 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: get('space.2')
+        },
+        itemStyle: {
+          borderRadius: 0
+        }
+      };
+
+    default:
+      return {
+        firstGroupStyle: {
+          marginTop: get('space.2')
+        },
+        lastGroupStyle: {
+          marginBottom: get('space.2')
+        },
+        itemStyle: {
+          marginX: get('space.2')
+        }
+      };
+  }
+}
+/**
+ * Lists `Item`s, either grouped or ungrouped, with a `Divider` between each `Group`.
+ */
+
+
+export const List = /*#__PURE__*/React.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;
+    return /*#__PURE__*/React.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;
+    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.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.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.createElement(React.Fragment, {
+      key: groupProps.groupId
+    }, shouldShowDivider ? /*#__PURE__*/React.createElement(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
+    }));
+  }));
+});
+List.displayName = 'ActionList';

package/lib-esm/ActionList/index.js

@@ -0,0 +1,18 @@
+import { List } from './List';
+import { Group } from './Group';
+import { Item } from './Item';
+import { Divider } from './Divider';
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` with an optional icon and description. */
+  Item,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider
+});

package/lib-esm/ActionList2/Description.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Box from '../Box';
+import { merge } from '../sx';
+import Truncate from '../Truncate';
+import { Slot } from './Item';
+export 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.createElement(Slot, {
+    name: variant === 'block' ? 'BlockDescription' : 'InlineDescription'
+  }, ({
+    blockDescriptionId,
+    inlineDescriptionId,
+    disabled
+  }) => variant === 'block' ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    sx: merge({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    id: blockDescriptionId
+  }, props.children) : /*#__PURE__*/React.createElement(Truncate, {
+    id: inlineDescriptionId,
+    sx: merge({ ...styles,
+      color: disabled ? 'fg.disabled' : 'fg.muted'
+    }, sx),
+    title: props.children,
+    inline: true,
+    maxWidth: "100%"
+  }, props.children));
+};
+Description.displayName = "Description";

package/lib-esm/ActionList2/Divider.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Box from '../Box';
+import { get } from '../constants';
+
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export function Divider() {
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "li",
+    role: "separator",
+    sx: {
+      height: 1,
+      backgroundColor: 'actionListItem.inlineDivider',
+      marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
+      marginBottom: 2,
+      listStyle: 'none' // hide the ::marker inserted by browser's stylesheet
+
+    },
+    "data-component": "ActionList.Divider"
+  });
+}
+Divider.displayName = "Divider";

package/lib-esm/ActionList2/Group.js

@@ -0,0 +1,87 @@
+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';
+export const GroupContext = /*#__PURE__*/React.createContext({});
+export const Group = ({
+  title,
+  variant = 'subtle',
+  auxiliaryText,
+  selectionVariant,
+  role,
+  sx = {},
+  ...props
+}) => {
+  const labelId = useSSRSafeId();
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "li",
+    sx: {
+      '&:not(:first-child)': {
+        marginTop: 2
+      },
+      listStyle: 'none',
+      // hide the ::marker inserted by browser's stylesheet
+      ...sx
+    }
+  }, props), title && /*#__PURE__*/React.createElement(Header, {
+    title: title,
+    variant: variant,
+    auxiliaryText: auxiliaryText,
+    labelId: labelId
+  }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
+    value: {
+      selectionVariant
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "ul",
+    sx: {
+      paddingInlineStart: 0
+    },
+    "aria-labelledby": title ? labelId : undefined,
+    role: role
+  }, 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: "presentation",
+    "aria-hidden": "true"
+  }, props), /*#__PURE__*/React.createElement("span", {
+    id: labelId
+  }, title), auxiliaryText && /*#__PURE__*/React.createElement("span", null, auxiliaryText));
+};
+
+Header.displayName = "Header";

package/lib-esm/ActionList2/Item.js

@@ -0,0 +1,210 @@
+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 styled from 'styled-components';
+import { useTheme } from '../ThemeProvider';
+import Box from '../Box';
+import sx, { merge } from '../sx';
+import createSlots from '../utils/create-slots';
+import { ListContext } from './List';
+import { Selection } from './Selection';
+export const getVariantStyles = (variant, disabled) => {
+  if (disabled) {
+    return {
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
+    };
+  }
+
+  switch (variant) {
+    case 'danger':
+      return {
+        color: 'danger.fg',
+        iconColor: 'danger.fg',
+        annotationColor: 'fg.muted',
+        hoverColor: 'actionListItem.danger.hoverText'
+      };
+
+    default:
+      return {
+        color: 'fg.default',
+        iconColor: 'fg.muted',
+        annotationColor: 'fg.muted',
+        hoverColor: 'fg.default'
+      };
+  }
+};
+const {
+  Slots,
+  Slot
+} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual']);
+export { Slot };
+const LiBox = styled.li.withConfig({
+  displayName: "Item__LiBox",
+  componentId: "c3scat-0"
+})(sx);
+export const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale
+
+export const Item = /*#__PURE__*/React.forwardRef(({
+  variant = 'default',
+  disabled = false,
+  selected = undefined,
+  onSelect,
+  sx: sxProp = {},
+  id,
+  _PrivateItemWrapper,
+  ...props
+}, forwardedRef) => {
+  const {
+    variant: listVariant,
+    showDividers
+  } = React.useContext(ListContext);
+  const {
+    theme
+  } = useTheme();
+  const styles = {
+    display: 'flex',
+    paddingX: 2,
+    fontSize: 1,
+    paddingY: '6px',
+    // custom value off the scale
+    lineHeight: TEXT_ROW_HEIGHT,
+    minHeight: 5,
+    marginX: listVariant === 'inset' ? 2 : 0,
+    borderRadius: listVariant === 'inset' ? 2 : 0,
+    transition: 'background 33.333ms linear',
+    color: getVariantStyles(variant, disabled).color,
+    cursor: 'pointer',
+    '&[aria-disabled]': {
+      cursor: 'not-allowed'
+    },
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.hoverBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
+      },
+      ':focus:not([data-focus-visible-added])': {
+        backgroundColor: `actionListItem.${variant}.selectedBg`,
+        color: getVariantStyles(variant, disabled).hoverColor,
+        outline: 'none'
+      },
+      '&[data-focus-visible-added]': {
+        // we don't use :focus-visible because not all browsers (safari) have it yet
+        outline: 'none',
+        border: `2 solid`,
+        boxShadow: `0 0 0 2px ${theme === null || theme === void 0 ? void 0 : theme.colors.accent.emphasis}`
+      },
+      ':active:not([aria-disabled])': {
+        backgroundColor: `actionListItem.${variant}.activeBg`,
+        color: getVariantStyles(variant, disabled).hoverColor
+      }
+    },
+
+    /** Divider styles */
+    '[data-component="ActionList.Item--DividerContainer"]': {
+      position: 'relative'
+    },
+    '[data-component="ActionList.Item--DividerContainer"]::before': {
+      content: '" "',
+      display: 'block',
+      position: 'absolute',
+      width: '100%',
+      top: '-7px',
+      border: '0 solid',
+      borderTopWidth: showDividers ? `1px` : '0',
+      borderColor: 'var(--divider-color, transparent)'
+    },
+    // show between 2 items
+    ':not(:first-of-type)': {
+      '--divider-color': theme === null || theme === void 0 ? void 0 : theme.colors.actionListItem.inlineDivider
+    },
+    // hide divider after dividers & group header, with higher importance!
+    '[data-component="ActionList.Divider"] + &': {
+      '--divider-color': 'transparent !important'
+    },
+    // hide border on current and previous item
+    '&:hover:not([aria-disabled]), &:focus:not([aria-disabled]), &[data-focus-visible-added]:not([aria-disabled])': {
+      '--divider-color': 'transparent'
+    },
+    '&:hover:not([aria-disabled]) + &, &:focus:not([aria-disabled]) + &, &[data-focus-visible-added] + li': {
+      '--divider-color': 'transparent'
+    }
+  };
+  const clickHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
+    if (disabled) return;
+    if (!event.defaultPrevented) onSelect(event);
+  }, [onSelect, disabled]);
+  const keyPressHandler = React.useCallback(event => {
+    if (typeof onSelect !== 'function') return;
+    if (disabled) return;
+
+    if (!event.defaultPrevented && [' ', 'Enter'].includes(event.key)) {
+      onSelect(event);
+    }
+  }, [onSelect, disabled]); // use props.id if provided, otherwise generate one.
+
+  const labelId = useSSRSafeId(id);
+  const inlineDescriptionId = useSSRSafeId(id && `${id}--inline-description`);
+  const blockDescriptionId = useSSRSafeId(id && `${id}--block-description`);
+  const ItemWrapper = _PrivateItemWrapper || React.Fragment;
+  return /*#__PURE__*/React.createElement(Slots, {
+    context: {
+      variant,
+      disabled,
+      inlineDescriptionId,
+      blockDescriptionId
+    }
+  }, slots => /*#__PURE__*/React.createElement(LiBox, _extends({
+    ref: forwardedRef,
+    sx: merge(styles, sxProp),
+    onClick: clickHandler,
+    onKeyPress: keyPressHandler,
+    "aria-selected": selected,
+    "aria-disabled": disabled ? true : undefined,
+    tabIndex: disabled || _PrivateItemWrapper ? undefined : 0,
+    "aria-labelledby": `${labelId} ${slots.InlineDescription ? inlineDescriptionId : ''}`,
+    "aria-describedby": slots.BlockDescription ? blockDescriptionId : undefined
+  }, props), /*#__PURE__*/React.createElement(ItemWrapper, null, /*#__PURE__*/React.createElement(Selection, {
+    selected: selected
+  }), slots.LeadingVisual, /*#__PURE__*/React.createElement(Box, {
+    "data-component": "ActionList.Item--DividerContainer",
+    sx: {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement(ConditionalBox, {
+    if: Boolean(slots.TrailingVisual),
+    sx: {
+      display: 'flex',
+      flexGrow: 1
+    }
+  }, /*#__PURE__*/React.createElement(ConditionalBox, {
+    if: Boolean(slots.InlineDescription),
+    sx: {
+      display: 'flex',
+      flexGrow: 1,
+      alignItems: 'baseline',
+      minWidth: 0
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    id: labelId,
+    sx: {
+      flexGrow: slots.InlineDescription ? 0 : 1
+    }
+  }, props.children), slots.InlineDescription), slots.TrailingVisual), slots.BlockDescription))));
+});
+Item.displayName = 'ActionList.Item';
+
+const ConditionalBox = props => {
+  const {
+    if: condition,
+    ...rest
+  } = props;
+  if (condition) return /*#__PURE__*/React.createElement(Box, rest, props.children);else return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
+};

package/lib-esm/ActionList2/LinkItem.js

@@ -0,0 +1,43 @@
+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 Link from '../Link';
+import { merge } from '../sx';
+import { Item } from './Item'; // adopted from React.AnchorHTMLAttributes
+
+export const LinkItem = /*#__PURE__*/React.forwardRef(({
+  sx = {},
+  as: Component,
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    // occupy full size of Item
+    paddingX: 2,
+    paddingY: '6px',
+    // custom value off the scale
+    display: 'flex',
+    flexGrow: 1,
+    // full width
+    borderRadius: 2,
+    // inherit Item styles
+    color: 'inherit',
+    '&:hover': {
+      color: 'inherit',
+      textDecoration: 'none'
+    }
+  };
+  return /*#__PURE__*/React.createElement(Item, {
+    sx: {
+      paddingY: 0,
+      paddingX: 0
+    },
+    _PrivateItemWrapper: ({
+      children
+    }) => /*#__PURE__*/React.createElement(Link, _extends({
+      as: Component,
+      sx: merge(styles, sx)
+    }, props, {
+      ref: forwardedRef
+    }), children)
+  }, props.children);
+});

package/lib-esm/ActionList2/List.js

@@ -0,0 +1,36 @@
+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 styled from 'styled-components';
+import sx, { merge } from '../sx';
+export const ListContext = /*#__PURE__*/React.createContext({});
+const ListBox = styled.ul.withConfig({
+  displayName: "List__ListBox",
+  componentId: "cvbq60-0"
+})(sx);
+export const List = /*#__PURE__*/React.forwardRef(({
+  variant = 'inset',
+  selectionVariant,
+  showDividers = false,
+  sx: sxProp = {},
+  ...props
+}, forwardedRef) => {
+  const styles = {
+    margin: 0,
+    paddingInlineStart: 0,
+    // reset ul styles
+    paddingY: variant === 'inset' ? 2 : 0
+  };
+  return /*#__PURE__*/React.createElement(ListBox, _extends({
+    sx: merge(styles, sxProp)
+  }, props, {
+    ref: forwardedRef
+  }), /*#__PURE__*/React.createElement(ListContext.Provider, {
+    value: {
+      variant,
+      selectionVariant,
+      showDividers
+    }
+  }, props.children));
+});
+List.displayName = 'ActionList';