@primer/components 0.0.0-202192822657 → 0.0.0-2021929142717

package/lib/Token/_RemoveTokenButton.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _octiconsReact = require("@primer/octicons-react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _styledSystem = require("styled-system");
 
@@ -19,6 +19,10 @@ var _sx = _interopRequireDefault(require("../sx"));
 
 var _TokenBase = require("./TokenBase");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
@@ -50,7 +54,16 @@ const getTokenButtonIconSize = size => parseInt(_TokenBase.tokenSizes[size || _T
 const StyledTokenButton = _styledComponents.default.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.2'));
+
+    default:
+      return (0, _styledComponents.css)(["margin-left:", ";"], (0, _constants.get)('space.1'));
+  }
+}, (0, _constants.get)('colors.neutral.muted'), (0, _constants.get)('colors.neutral.subtle'), variants, _sx.default);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib/_TextInputWrapper.js

@@ -39,7 +39,7 @@ const sizeVariants = (0, _styledSystem.variant)({
 const TextInputWrapper = _styledComponents.default.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], (0, _constants.get)('fontSizes.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return (0, _styledComponents.css)(["padding:0;"]);
   } else {

package/lib/experiments.d.ts

@@ -0,0 +1 @@
+export * from './ActionList2';

package/lib/experiments.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ActionList = require("./ActionList2");
+
+Object.keys(_ActionList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ActionList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ActionList[key];
+    }
+  });
+});

package/lib/sx.d.ts

@@ -1,6 +1,8 @@
 import { SystemStyleObject } from '@styled-system/css';
+import merge from 'deepmerge';
 export interface SxProp {
     sx?: SystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;
+export { merge };

package/lib/sx.js

@@ -3,10 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "merge", {
+  enumerable: true,
+  get: function () {
+    return _deepmerge.default;
+  }
+});
 exports.default = void 0;
 
 var _css = _interopRequireDefault(require("@styled-system/css"));
 
+var _deepmerge = _interopRequireDefault(require("deepmerge"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const sx = props => (0, _css.default)(props.sx);

package/lib/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_colorblind": {
+      "light_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_colorblind": {
+      "dark_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib/utils/create-slots.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
+    Slots: React.FC<{
+        context: Record<string, unknown>;
+        children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
+    }>;
+    Slot: React.FC<{
+        name: SlotNames;
+        children: React.ReactNode | ((context: Record<string, unknown>) => React.ReactNode);
+    }>;
+};
+export default createSlots;

package/lib/utils/create-slots.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useForceUpdate = require("./use-force-update");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+const createSlots = slotNames => {
+  const SlotsContext = /*#__PURE__*/_react.default.createContext({
+    registerSlot: () => null,
+    unregisterSlot: () => null,
+    context: {}
+  });
+  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
+   *  Slot registers themself with the Slots parent.
+   *  When all the children have mounted = registered themselves in slot,
+   *  we re-render the parent component to render with slots
+   */
+
+
+  const Slots = ({
+    context,
+    children
+  }) => {
+    // initialise slots
+    const slotsDefinition = {};
+    slotNames.map(name => slotsDefinition[name] = null);
+
+    const slotsRef = _react.default.useRef(slotsDefinition);
+
+    const rerenderWithSlots = (0, _useForceUpdate.useForceUpdate)();
+
+    const [isMounted, setIsMounted] = _react.default.useState(false); // fires after all the effects in children
+
+
+    _react.default.useEffect(() => {
+      rerenderWithSlots();
+      setIsMounted(true);
+    }, [rerenderWithSlots]);
+
+    const registerSlot = _react.default.useCallback((name, contents) => {
+      slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
+
+      if (isMounted) rerenderWithSlots();
+    }, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
+    // we need to unregister them from the slot
+
+
+    const unregisterSlot = _react.default.useCallback(name => {
+      slotsRef.current[name] = null;
+      rerenderWithSlots();
+    }, [rerenderWithSlots]);
+    /**
+     * Slots uses a render prop API so abstract the
+     * implementation detail of using a context provider.
+     */
+
+
+    const slots = slotsRef.current;
+    return /*#__PURE__*/_react.default.createElement(SlotsContext.Provider, {
+      value: {
+        registerSlot,
+        unregisterSlot,
+        context
+      }
+    }, children(slots));
+  };
+
+  const Slot = ({
+    name,
+    children
+  }) => {
+    const {
+      registerSlot,
+      unregisterSlot,
+      context
+    } = _react.default.useContext(SlotsContext);
+
+    _react.default.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children);
+      return () => unregisterSlot(name);
+    }, [name, children, registerSlot, unregisterSlot, context]);
+
+    return null;
+  };
+
+  return {
+    Slots,
+    Slot
+  };
+};
+
+var _default = createSlots;
+exports.default = _default;

package/lib/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/lib/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib/utils/use-force-update.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useForceUpdate = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+const useForceUpdate = () => {
+  const [, rerender] = _react.default.useState({});
+
+  return _react.default.useCallback(() => rerender({}), []);
+};
+
+exports.useForceUpdate = useForceUpdate;

package/lib-esm/ActionList/Item.d.ts

@@ -28,13 +28,19 @@ export interface ItemProps extends SxProp {
      */
     leadingVisual?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Icon (or similar) positioned after `Item` text.
      */
     trailingIcon?: React.FunctionComponent<IconProps>;
     /**
+     * @deprecated Use `trailingVisual` instead
      * Text positioned after `Item` text and optional trailing icon.
      */
     trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ReactNode;
     /**
      * Style variations associated with various `Item` types.
      *

package/lib-esm/ActionList/Item.js

@@ -154,6 +154,7 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     selectionVariant,
     leadingVisual: LeadingVisual,
     trailingIcon: TrailingIcon,
+    trailingVisual: TrailingVisual,
     trailingText,
     variant = 'default',
     showDivider,
@@ -245,7 +246,10 @@ export const Item = /*#__PURE__*/React.forwardRef((itemProps, ref) => {
     title: description,
     inline: true,
     maxWidth: "100%"
-  }, description)) : null), TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
+  }, description)) : null), TrailingVisual ? /*#__PURE__*/React.createElement(TrailingContent, {
+    variant: variant,
+    disabled: disabled
+  }, typeof TrailingVisual === 'function' ? /*#__PURE__*/React.createElement(TrailingVisual, null) : TrailingVisual) : TrailingIcon || trailingText ? /*#__PURE__*/React.createElement(TrailingContent, {
     variant: variant,
     disabled: disabled
   }, trailingText, TrailingIcon && /*#__PURE__*/React.createElement(TrailingIcon, null)) : null));

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SxProp } from '../sx';
+export declare type DescriptionProps = {
+    variant?: 'inline' | 'block';
+} & SxProp;
+export declare const Description: React.FC<DescriptionProps>;

package/lib-esm/ActionList2/Description.js

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

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+/**
+ * Visually separates `Item`s or `Group`s in an `ActionList`.
+ */
+export declare function Divider(): JSX.Element;

package/lib-esm/ActionList2/Divider.js

@@ -0,0 +1,21 @@
+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: 'border.muted',
+      marginTop: theme => `calc(${get('space.2')(theme)} - 1px)`,
+      marginBottom: 2
+    },
+    "data-component": "ActionList.Divider"
+  });
+}
+Divider.displayName = "Divider";

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SxProp } from '../sx';
+import { HeaderProps } from './Header';
+import { ListProps } from './List';
+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 {};

package/lib-esm/ActionList2/Group.js

@@ -0,0 +1,38 @@
+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 { Header } from './Header';
+export const GroupContext = /*#__PURE__*/React.createContext({});
+export const Group = ({
+  title,
+  variant,
+  auxiliaryText,
+  selectionVariant,
+  sx = {},
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "li",
+    sx: {
+      '&:not(:first-child)': {
+        marginTop: 2
+      },
+      ...sx
+    }
+  }, props), title && /*#__PURE__*/React.createElement(Header, {
+    title: title,
+    variant: variant,
+    auxiliaryText: auxiliaryText
+  }), /*#__PURE__*/React.createElement(GroupContext.Provider, {
+    value: {
+      selectionVariant
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "ul",
+    sx: {
+      paddingInlineStart: 0
+    }
+  }, props.children)));
+};
+Group.displayName = "Group";

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { SxProp } from '../sx';
+/**
+ * Contract for props passed to the `Header` component.
+ */
+export interface HeaderProps extends React.ComponentPropsWithoutRef<'div'>, SxProp {
+    /**
+     * 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;
+}
+/**
+ * Displays the name and description of a `Group`.
+ */
+export declare function Header({ variant, title, auxiliaryText, children: _children, sx, ...props }: HeaderProps): JSX.Element;

package/lib-esm/ActionList2/Header.js

@@ -0,0 +1,45 @@
+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 function Header({
+  variant = 'subtle',
+  title,
+  auxiliaryText,
+  children: _children,
+  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.d.ts

@@ -0,0 +1,48 @@
+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;
+};
+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;
+} & SxProp;
+declare const Slot: React.FC<{
+    name: "LeadingVisual" | "InlineDescription" | "BlockDescription" | "TrailingVisual";
+    children: React.ReactNode | ((context: Record<string, unknown>) => React.ReactNode);
+}>;
+export { Slot };
+export declare type ItemContext = Pick<ItemProps, 'variant' | 'disabled'> & {
+    inlineDescriptionId: string;
+    blockDescriptionId: string;
+};
+export declare const Item: PolymorphicForwardRefComponent<"li", ItemProps>;