@primer/components 0.0.0-202111119155 → 0.0.0-202111121740

package/lib-esm/CounterLabel.js

@@ -1,15 +1,13 @@
-import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { COMMON, get } from './constants';
+import { get } from './constants';
 import sx from './sx';
-import theme from './theme';
 
 const colorStyles = ({
   scheme,
   ...props
 }) => {
   return {
-    color: scheme === 'gray-light' ? get('colors.gray.9')(props) : scheme === 'gray' ? get('colors.white')(props) : get('colors.gray.6')(props)
+    color: scheme === 'secondary' ? get('colors.fg.default')(props) : scheme === 'primary' ? get('colors.fg.onEmphasis')(props) : get('colors.fg.default')(props)
   };
 };
 
@@ -18,22 +16,12 @@ const bgStyles = ({
   ...props
 }) => {
   return {
-    backgroundColor: scheme === 'gray-light' ? get('colors.blackfade15')(props) : scheme === 'gray' ? get('colors.gray.5')(props) : get('colors.counter.bg')(props)
+    backgroundColor: scheme === 'secondary' ? get('colors.neutral.muted')(props) : scheme === 'primary' ? get('colors.neutral.emphasis')(props) : get('colors.neutral.muted')(props)
   };
 };
 
 const CounterLabel = styled.span.withConfig({
   displayName: "CounterLabel",
   componentId: "sc-1ubx52d-0"
-})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";", ";&:empty{display:none;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, COMMON, sx);
-CounterLabel.defaultProps = {
-  theme
-};
-CounterLabel.propTypes = {
-  children: PropTypes.node,
-  scheme: PropTypes.oneOf(['gray', 'gray-light']),
-  theme: PropTypes.object,
-  ...COMMON.propTypes,
-  ...sx.propTypes
-};
+})(["display:inline-block;padding:2px 5px;font-size:", ";font-weight:", ";line-height:", ";border-radius:20px;", ";", ";&:empty{display:none;}", ";"], get('fontSizes.0'), get('fontWeights.bold'), get('lineHeights.condensedUltra'), colorStyles, bgStyles, sx);
 export default CounterLabel;

package/lib-esm/Details.d.ts

@@ -0,0 +1,6 @@
+import { SystemCommonProps } from './constants';
+import { SxProp } from './sx';
+import { ComponentProps } from './utils/types';
+declare const Details: import("styled-components").StyledComponent<"details", any, SystemCommonProps & SxProp, never>;
+export declare type DetailsProps = ComponentProps<typeof Details>;
+export default Details;

package/lib-esm/Details.js

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import theme from './theme';
 import { COMMON } from './constants';
 import sx from './sx';
 const Details = styled.details.withConfig({
@@ -7,10 +6,4 @@ const Details = styled.details.withConfig({
   componentId: "ssy9qz-0"
 })(["& > summary{list-style:none;}& > summary::-webkit-details-marker{display:none;}", " ", ";"], COMMON, sx);
 Details.displayName = 'Details';
-Details.defaultProps = {
-  theme
-};
-Details.propTypes = { ...COMMON.propTypes,
-  ...sx.propTypes
-};
 export default Details;

package/lib-esm/Dialog/ConfirmationDialog.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+/**
+ * Props to customize the ConfirmationDialog.
+ */
+export interface ConfirmationDialogProps {
+    /**
+     * Required. This callback is invoked when a gesture to close the dialog
+     * is performed. The first argument indicates the gesture.
+     */
+    onClose: (gesture: 'confirm' | 'cancel' | 'close-button' | 'cancel' | 'escape') => void;
+    /**
+     * Required. The title of the ConfirmationDialog. This is usually a brief
+     * question.
+     */
+    title: React.ReactNode;
+    /**
+     * The text to use for the cancel button. Default: "Cancel".
+     */
+    cancelButtonContent?: React.ReactNode;
+    /**
+     * The text to use for the confirm button. Default: "OK".
+     */
+    confirmButtonContent?: React.ReactNode;
+    /**
+     * The type of button to use for the confirm button. Default: Button.
+     */
+    confirmButtonType?: 'normal' | 'primary' | 'danger';
+}
+/**
+ * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
+ * is used to confirm a user action. ConfirmationDialogs always have exactly
+ * two buttons: one to cancel the action and one to confirm it. No custom
+ * rendering capabilities are provided for ConfirmationDialog.
+ */
+export declare const ConfirmationDialog: React.FC<ConfirmationDialogProps>;
+export declare type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {
+    content: React.ReactNode;
+};
+/**
+ * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
+ * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
+ * resolved with `true` or `false` depending on whether or not the confirm button was used.
+ */
+export declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;

package/lib-esm/Dialog/ConfirmationDialog.js

@@ -0,0 +1,169 @@
+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, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
+import styled from 'styled-components';
+import Box from '../Box';
+import { ThemeProvider, useTheme } from '../ThemeProvider';
+import { FocusKeys } from '../behaviors/focusZone';
+import { get } from '../constants';
+import { Dialog } from '../Dialog/Dialog';
+import { useFocusZone } from '../hooks/useFocusZone';
+/**
+ * Props to customize the ConfirmationDialog.
+ */
+
+const StyledConfirmationHeader = styled.header.withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationHeader",
+  componentId: "sc-1ub32x2-0"
+})(["padding:", ";display:flex;flex-direction:row;"], get('space.2'));
+const StyledTitle = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledTitle",
+  componentId: "sc-1ub32x2-1"
+})(["font-size:", ";font-weight:", ";padding:6px ", ";flex-grow:1;"], get('fontSizes.3'), get('fontWeights.bold'), get('space.2'));
+
+const ConfirmationHeader = ({
+  title,
+  onClose,
+  dialogLabelId
+}) => {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button');
+  }, [onClose]);
+  return /*#__PURE__*/React.createElement(StyledConfirmationHeader, null, /*#__PURE__*/React.createElement(StyledTitle, {
+    id: dialogLabelId
+  }, title), /*#__PURE__*/React.createElement(Dialog.CloseButton, {
+    onClose: onCloseClick
+  }));
+};
+
+ConfirmationHeader.displayName = "ConfirmationHeader";
+const StyledConfirmationBody = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationBody",
+  componentId: "sc-1ub32x2-2"
+})(["font-size:", ";padding:0 ", " ", " ", ";color:", ";flex-grow:1;"], get('fontSizes.1'), get('space.3'), get('space.3'), get('space.3'), get('colors.fg.muted'));
+
+const ConfirmationBody = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(StyledConfirmationBody, null, children);
+};
+
+ConfirmationBody.displayName = "ConfirmationBody";
+const StyledConfirmationFooter = styled(Box).withConfig({
+  displayName: "ConfirmationDialog__StyledConfirmationFooter",
+  componentId: "sc-1ub32x2-3"
+})(["display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-gap:", ";align-items:end;justify-content:end;padding:", " ", " ", ";"], get('space.2'), get('space.1'), get('space.3'), get('space.3'));
+
+const ConfirmationFooter = ({
+  footerButtons
+}) => {
+  const {
+    containerRef: footerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
+    focusInStrategy: 'closest'
+  }); // Must have exactly 2 buttons!
+
+  return /*#__PURE__*/React.createElement(StyledConfirmationFooter, {
+    ref: footerRef
+  }, /*#__PURE__*/React.createElement(Dialog.Buttons, {
+    buttons: footerButtons !== null && footerButtons !== void 0 ? footerButtons : []
+  }));
+};
+
+ConfirmationFooter.displayName = "ConfirmationFooter";
+
+/**
+ * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
+ * is used to confirm a user action. ConfirmationDialogs always have exactly
+ * two buttons: one to cancel the action and one to confirm it. No custom
+ * rendering capabilities are provided for ConfirmationDialog.
+ */
+export const ConfirmationDialog = props => {
+  const {
+    onClose,
+    title,
+    cancelButtonContent = 'Cancel',
+    confirmButtonContent = 'OK',
+    confirmButtonType = 'normal',
+    children
+  } = props;
+  const onCancelButtonClick = useCallback(() => {
+    onClose('cancel');
+  }, [onClose]);
+  const onConfirmButtonClick = useCallback(() => {
+    onClose('confirm');
+  }, [onClose]);
+  const cancelButton = {
+    content: cancelButtonContent,
+    onClick: onCancelButtonClick
+  };
+  const confirmButton = {
+    content: confirmButtonContent,
+    buttonType: confirmButtonType,
+    onClick: onConfirmButtonClick,
+    autoFocus: true
+  };
+  const footerButtons = [cancelButton, confirmButton];
+  return /*#__PURE__*/React.createElement(Dialog, {
+    onClose: onClose,
+    title: title,
+    footerButtons: footerButtons,
+    role: "alertdialog",
+    width: "medium",
+    renderHeader: ConfirmationHeader,
+    renderBody: ConfirmationBody,
+    renderFooter: ConfirmationFooter
+  }, children);
+};
+ConfirmationDialog.displayName = "ConfirmationDialog";
+
+async function confirm(themeProps, options) {
+  const {
+    content,
+    ...confirmationDialogProps
+  } = options;
+  return new Promise(resolve => {
+    const hostElement = document.createElement('div');
+
+    const onClose = gesture => {
+      ReactDOM.unmountComponentAtNode(hostElement);
+
+      if (gesture === 'confirm') {
+        resolve(true);
+      } else {
+        resolve(false);
+      }
+    };
+
+    ReactDOM.render( /*#__PURE__*/React.createElement(ThemeProvider, themeProps, /*#__PURE__*/React.createElement(ConfirmationDialog, _extends({}, confirmationDialogProps, {
+      onClose: onClose
+    }), content)), hostElement);
+  });
+}
+/**
+ * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
+ * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
+ * resolved with `true` or `false` depending on whether or not the confirm button was used.
+ */
+
+
+export function useConfirm() {
+  const {
+    theme,
+    colorMode,
+    dayScheme,
+    nightScheme
+  } = useTheme();
+  const result = useCallback(options => {
+    const themeProps = {
+      theme,
+      colorMode,
+      dayScheme,
+      nightScheme
+    };
+    return confirm(themeProps, options);
+  }, [theme, colorMode, dayScheme, nightScheme]);
+  return result;
+}

package/lib-esm/Dialog/Dialog.d.ts

@@ -0,0 +1,163 @@
+import React from 'react';
+import { ButtonProps } from '../Button';
+import { SxProp } from '../sx';
+/**
+ * Props that characterize a button to be rendered into the footer of
+ * a Dialog.
+ */
+export declare type DialogButtonProps = ButtonProps & {
+    /**
+     * The type of Button element to use
+     */
+    buttonType?: 'normal' | 'primary' | 'danger';
+    /**
+     * The Button's inner text
+     */
+    content: React.ReactNode;
+    /**
+     * If true, and if this is the only button with autoFocus set to true,
+     * focus this button automatically when the dialog appears.
+     */
+    autoFocus?: boolean;
+    /**
+     * A reference to the rendered Button’s DOM node, used together with
+     * `autoFocus` for `focusTrap`’s `initialFocus`.
+     */
+    ref?: React.RefObject<HTMLButtonElement>;
+};
+/**
+ * Props to customize the rendering of the Dialog.
+ */
+export interface DialogProps {
+    /**
+     * Title of the Dialog. Also serves as the aria-label for this Dialog.
+     */
+    title?: React.ReactNode;
+    /**
+     * The Dialog's subtitle. Optional. Rendered below the title in smaller
+     * type with less contrast. Also serves as the aria-describedby for this
+     * Dialog.
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Provide a custom renderer for the dialog header. This content is
+     * rendered directly into the dialog body area, full bleed from edge
+     * to edge, top to the start of the body element.
+     *
+     * Warning: using a custom renderer may violate Primer UX principles.
+     */
+    renderHeader?: React.FunctionComponent<DialogHeaderProps>;
+    /**
+     * Provide a custom render function for the dialog body. This content is
+     * rendered directly into the dialog body area, full bleed from edge to
+     * edge, header to footer.
+     *
+     * Warning: using a custom renderer may violate Primer UX principles.
+     */
+    renderBody?: React.FunctionComponent<DialogProps>;
+    /**
+     * Provide a custom render function for the dialog footer. This content is
+     * rendered directly into the dialog footer area, full bleed from edge to
+     * edge, end of the body element to bottom.
+     *
+     * Warning: using a custom renderer may violate Primer UX principles.
+     */
+    renderFooter?: React.FunctionComponent<DialogProps>;
+    /**
+     * Specifies the buttons to be rendered in the Dialog footer.
+     */
+    footerButtons?: DialogButtonProps[];
+    /**
+     * This method is invoked when a gesture to close the dialog is used (either
+     * an Escape key press or clicking the "X" in the top-right corner). The
+     * gesture argument indicates the gesture that was used to close the dialog
+     * (either 'close-button' or 'escape').
+     */
+    onClose: (gesture: 'close-button' | 'escape') => void;
+    /**
+     * Default: "dialog". The ARIA role to assign to this dialog.
+     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal
+     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
+     */
+    role?: 'dialog' | 'alertdialog';
+    /**
+     * The width of the dialog.
+     * small: 296px
+     * medium: 320px
+     * large: 480px
+     * xlarge: 640px
+     */
+    width?: DialogWidth;
+    /**
+     * The height of the dialog.
+     * small: 296x480
+     * large: 480x640
+     * auto: variable based on contents
+     */
+    height?: DialogHeight;
+}
+/**
+ * Props that are passed to a component that serves as a dialog header
+ */
+export interface DialogHeaderProps extends DialogProps {
+    /**
+     * ID of the element that will be used as the `aria-labelledby` attribute on the
+     * dialog. This ID should be set to the element that renders the dialog's title.
+     */
+    dialogLabelId: string;
+    /**
+     * ID of the element that will be used as the `aria-describedby` attribute on the
+     * dialog. This ID should be set to the element that renders the dialog's subtitle.
+     */
+    dialogDescriptionId: string;
+}
+declare const heightMap: {
+    readonly small: "480px";
+    readonly large: "640px";
+    readonly auto: "auto";
+};
+declare const widthMap: {
+    readonly small: "296px";
+    readonly medium: "320px";
+    readonly large: "480px";
+    readonly xlarge: "640px";
+};
+export declare type DialogWidth = keyof typeof widthMap;
+export declare type DialogHeight = keyof typeof heightMap;
+/**
+ * A dialog is a type of overlay that can be used for confirming actions, asking
+ * for disambiguation, and presenting small forms. They generally allow the user
+ * to focus on a quick task without having to navigate to a different page.
+ *
+ * Dialogs appear in the page after a direct user interaction. Don't show dialogs
+ * on page load or as system alerts.
+ *
+ * Dialogs appear centered in the page, with a visible backdrop that dims the rest
+ * of the window for focus.
+ *
+ * All dialogs have a title and a close button.
+ *
+ * Dialogs are modal. Dialogs can be dismissed by clicking on the close button,
+ * pressing the escape key, or by interacting with another button in the dialog.
+ * To avoid losing information and missing important messages, clicking outside
+ * of the dialog will not close it.
+ *
+ * The sub components provided (e.g. Header, Title, etc.) are available for custom
+ * renderers only. They are not intended to be used otherwise.
+ */
+export declare const Dialog: React.ForwardRefExoticComponent<DialogProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>> & {
+    Header: import("styled-components").StyledComponent<"div", any, {}, never>;
+    Title: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Subtitle: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Body: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Footer: import("styled-components").StyledComponent<"div", any, SxProp, never>;
+    Buttons: React.FC<{
+        buttons: DialogButtonProps[];
+    }>;
+    CloseButton: React.FC<{
+        onClose: () => void;
+    }>;
+};
+export {};