@primer/components 0.0.0-2021111191131 → 0.0.0-2021111193153

package/lib-esm/ActionList2/Selection.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import { CheckIcon } from '@primer/octicons-react';
+import { ListContext } from './List';
+import { GroupContext } from './Group';
+import { MenuContext } from './MenuContext';
+import { LeadingVisualContainer } from './Visuals';
+export const Selection = ({
+  selected
+}) => {
+  const {
+    selectionVariant: listSelectionVariant
+  } = React.useContext(ListContext);
+  const {
+    selectionVariant: groupSelectionVariant
+  } = React.useContext(GroupContext);
+  const {
+    parent
+  } = React.useContext(MenuContext);
+  /** selectionVariant in Group can override the selectionVariant in List root */
+
+  const selectionVariant = typeof groupSelectionVariant !== 'undefined' ? groupSelectionVariant : listSelectionVariant; // if selectionVariant is not set on List, don't show selection
+
+  if (!selectionVariant) {
+    // to avoid confusion, fail loudly instead of silently ignoring
+    if (selected) throw new Error('For Item to be selected, ActionList or ActionList.Group needs to have a selectionVariant defined');
+    return null;
+  }
+
+  if (parent === 'ActionMenu') {
+    throw new Error('ActionList cannot have a selectionVariant inside ActionMenu, please use DropdownMenu or SelectPanel instead. More information: https://primer.style/design/components/action-list#application');
+    return null;
+  }
+
+  if (selectionVariant === 'single') {
+    return /*#__PURE__*/React.createElement(LeadingVisualContainer, null, selected && /*#__PURE__*/React.createElement(CheckIcon, null));
+  }
+  /**
+   * selectionVariant is multiple
+   * we use a svg instead of an input because there should not
+   * be an interactive element inside an option
+   * svg copied from primer/css
+   */
+
+
+  return /*#__PURE__*/React.createElement(LeadingVisualContainer, {
+    sx: {
+      rect: {
+        fill: selected ? 'accent.fg' : 'canvas.default',
+        stroke: selected ? 'accent.fg' : 'border.default',
+        shapeRendering: 'auto' // this is a workaround to override global style in github/github, see primer/react#1666
+
+      },
+      path: {
+        fill: 'fg.onEmphasis',
+        boxShadow: 'shadow.small',
+        opacity: selected ? 1 : 0
+      }
+    }
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "12",
+    height: "12",
+    rx: "4"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    strokeWidth: "0",
+    d: "M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
+  })));
+};
+Selection.displayName = "Selection";

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { SxProp } from '../sx';
+declare type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>;
+export declare const LeadingVisualContainer: React.FC<VisualProps>;
+export declare type LeadingVisualProps = VisualProps;
+export declare const LeadingVisual: React.FC<VisualProps>;
+export declare type TrailingVisualProps = VisualProps;
+export declare const TrailingVisual: React.FC<VisualProps>;
+export {};

package/lib-esm/ActionList2/Visuals.js

@@ -0,0 +1,68 @@
+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 { merge } from '../sx';
+import { get } from '../constants';
+import { getVariantStyles, Slot, TEXT_ROW_HEIGHT } from './Item';
+export const LeadingVisualContainer = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    sx: merge({
+      height: TEXT_ROW_HEIGHT,
+      // match height of text row
+      minWidth: get('space.3'),
+      maxWidth: TEXT_ROW_HEIGHT,
+      // square (same as height)
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexShrink: 0,
+      marginRight: 2
+    }, sx)
+  }, props));
+};
+LeadingVisualContainer.displayName = "LeadingVisualContainer";
+export const LeadingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Slot, {
+    name: "LeadingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/React.createElement(LeadingVisualContainer, _extends({
+    sx: merge({
+      color: getVariantStyles(variant, disabled).iconColor,
+      svg: {
+        fontSize: 0
+      }
+    }, sx)
+  }, props), props.children));
+};
+LeadingVisual.displayName = "LeadingVisual";
+export const TrailingVisual = ({
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Slot, {
+    name: "TrailingVisual"
+  }, ({
+    variant,
+    disabled
+  }) => /*#__PURE__*/React.createElement(Box, _extends({
+    as: "span",
+    sx: merge({
+      height: '20px',
+      // match height of text row
+      flexShrink: 0,
+      color: getVariantStyles(variant, disabled).annotationColor,
+      marginLeft: 2
+    }, sx)
+  }, props), props.children));
+};
+TrailingVisual.displayName = "TrailingVisual";

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export type { ListProps as ActionListProps } from './List';
+export type { GroupProps } from './Group';
+export type { ItemProps } from './Item';
+export type { DescriptionProps } from './Description';
+export type { LeadingVisualProps, TrailingVisualProps } from './Visuals';
+/**
+ * Collection of list-related components.
+ */
+export declare const ActionList: import("@radix-ui/react-polymorphic").ForwardRefComponent<"ul", import("./List").ListProps> & {
+    /** Collects related `Items` in an `ActionList`. */
+    Group: import("react").FC<import("./Group").GroupProps>;
+    /** An actionable or selectable `Item` */
+    Item: import("@radix-ui/react-polymorphic").ForwardRefComponent<"li", import("./Item").ItemProps>;
+    /** A `Item` that renders a full-size anchor inside ListItem */
+    LinkItem: import("@radix-ui/react-polymorphic").ForwardRefComponent<"a", Pick<import("./Item").ItemProps, "children" | "sx"> & {
+        download?: string | undefined;
+        href?: string | undefined;
+        hrefLang?: string | undefined;
+        media?: string | undefined;
+        ping?: string | undefined;
+        rel?: string | undefined;
+        target?: string | undefined;
+        type?: string | undefined;
+        referrerPolicy?: import("react").HTMLAttributeReferrerPolicy | undefined;
+    }>;
+    /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+    Divider: import("react").FC<import("../sx").SxProp>;
+    /** Secondary text which provides additional information about an `Item`. */
+    Description: import("react").FC<import("./Description").DescriptionProps>;
+    /** Icon (or similar) positioned before `Item` text. */
+    LeadingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+    /** Icon (or similar) positioned after `Item` text. */
+    TrailingVisual: import("react").FC<import("../sx").SxProp & import("react").HTMLAttributes<HTMLSpanElement>>;
+};

package/lib-esm/ActionList2/index.js

@@ -0,0 +1,33 @@
+import { List } from './List';
+import { Group } from './Group';
+import { Item } from './Item';
+import { LinkItem } from './LinkItem';
+import { Divider } from './Divider';
+import { Description } from './Description';
+import { LeadingVisual, TrailingVisual } from './Visuals';
+
+/**
+ * Collection of list-related components.
+ */
+export const ActionList = Object.assign(List, {
+  /** Collects related `Items` in an `ActionList`. */
+  Group,
+
+  /** An actionable or selectable `Item` */
+  Item,
+
+  /** A `Item` that renders a full-size anchor inside ListItem */
+  LinkItem,
+
+  /** Visually separates `Item`s or `Group`s in an `ActionList`. */
+  Divider,
+
+  /** Secondary text which provides additional information about an `Item`. */
+  Description,
+
+  /** Icon (or similar) positioned before `Item` text. */
+  LeadingVisual,
+
+  /** Icon (or similar) positioned after `Item` text. */
+  TrailingVisual
+});

package/lib-esm/ActionMenu.d.ts

@@ -0,0 +1,40 @@
+import { GroupedListProps, ListPropsBase } from './ActionList/List';
+import { ItemProps } from './ActionList/Item';
+import { Divider } from './ActionList/Divider';
+import React from 'react';
+import { OverlayProps } from './Overlay';
+import { AnchoredOverlayWrapperAnchorProps } from './AnchoredOverlay/AnchoredOverlay';
+interface ActionMenuBaseProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase {
+    /**
+     * Content that is passed into the renderAnchor component, which is a button by default.
+     */
+    anchorContent?: React.ReactNode;
+    /**
+     * A callback that triggers both on clicks and keyboard events. This callback will be overridden by item level `onAction` callbacks.
+     */
+    onAction?: (props: ItemProps, event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `setOpen`.
+     */
+    open?: boolean;
+    /**
+     * If defined, will control the open/closed state of the overlay. Must be used in conjuction with `open`.
+     */
+    setOpen?: (s: boolean) => void;
+    /**
+     * Props to be spread on the internal `Overlay` component.
+     */
+    overlayProps?: Partial<OverlayProps>;
+}
+export declare type ActionMenuProps = ActionMenuBaseProps & AnchoredOverlayWrapperAnchorProps;
+export declare const ActionMenu: {
+    ({ anchorContent, renderAnchor, anchorRef: externalAnchorRef, onAction, open, setOpen, overlayProps, items, ...listProps }: ActionMenuProps): JSX.Element;
+    displayName: string;
+} & {
+    Divider: typeof Divider;
+    Item: {
+        (props: ItemProps): JSX.Element;
+        displayName: string;
+    };
+};
+export {};

package/lib-esm/ActionMenu.js

@@ -0,0 +1,82 @@
+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 { List } from './ActionList/List';
+import { Item } from './ActionList/Item';
+import { Divider } from './ActionList/Divider';
+import Button from './Button';
+import React, { useCallback, useMemo } from 'react';
+import { AnchoredOverlay } from './AnchoredOverlay';
+import { useProvidedStateOrCreate } from './hooks/useProvidedStateOrCreate';
+import { useProvidedRefOrCreate } from './hooks';
+
+const ActionMenuItem = props => /*#__PURE__*/React.createElement(Item, _extends({
+  role: "menuitem"
+}, props));
+
+ActionMenuItem.displayName = "ActionMenuItem";
+ActionMenuItem.displayName = 'ActionMenu.Item';
+
+const ActionMenuBase = ({
+  anchorContent,
+  renderAnchor = props => /*#__PURE__*/React.createElement(Button, props),
+  anchorRef: externalAnchorRef,
+  onAction,
+  open,
+  setOpen,
+  overlayProps,
+  items,
+  ...listProps
+}) => {
+  const [combinedOpenState, setCombinedOpenState] = useProvidedStateOrCreate(open, setOpen, false);
+  const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
+  const onOpen = useCallback(() => setCombinedOpenState(true), [setCombinedOpenState]);
+  const onClose = useCallback(() => setCombinedOpenState(false), [setCombinedOpenState]);
+  const renderMenuAnchor = useMemo(() => {
+    if (renderAnchor === null) {
+      return null;
+    }
+
+    return props => {
+      return renderAnchor({
+        'aria-label': 'menu',
+        children: anchorContent,
+        ...props
+      });
+    };
+  }, [anchorContent, renderAnchor]);
+  const itemsToRender = useMemo(() => {
+    return items.map(item => {
+      return { ...item,
+        role: 'menuitem',
+        onAction: (props, event) => {
+          var _item$onAction;
+
+          const actionCallback = (_item$onAction = item.onAction) !== null && _item$onAction !== void 0 ? _item$onAction : onAction;
+          actionCallback === null || actionCallback === void 0 ? void 0 : actionCallback(props, event);
+
+          if (!event.defaultPrevented) {
+            onClose();
+          }
+        }
+      };
+    });
+  }, [items, onAction, onClose]);
+  return /*#__PURE__*/React.createElement(AnchoredOverlay, {
+    renderAnchor: renderMenuAnchor,
+    anchorRef: anchorRef,
+    open: combinedOpenState,
+    onOpen: onOpen,
+    onClose: onClose,
+    overlayProps: overlayProps
+  }, /*#__PURE__*/React.createElement(List, _extends({}, listProps, {
+    role: "menu",
+    items: itemsToRender
+  })));
+};
+
+ActionMenuBase.displayName = "ActionMenuBase";
+ActionMenuBase.displayName = 'ActionMenu';
+export const ActionMenu = Object.assign(ActionMenuBase, {
+  Divider,
+  Item: ActionMenuItem
+});