@reach/alert-dialog - npm Package Compare versions

Comparing version 0.4.0 to 0.5.0

es/index.js

@@ -8,2 +8,3 @@ 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 { useId } from "@reach/auto-id";
+import { makeId } from "@reach/utils";
 import invariant from "invariant";
@@ -54,4 +55,6 @@ import { func, bool, node, object, oneOfType } from "prop-types";
   return React.createElement(DialogContent, _extends({
-    ref: forwardRef,
+    ref: forwardRef // lol: remove in 1.0
+    ,
     "data-reach-alert-dialong-content": true,
+    "data-reach-alert-dialog-content": true,
     role: "alertdialog",
@@ -106,7 +109,2 @@ "aria-labelledby": labelId
   };
-} // TODO: Move to @reach/utils
-
-
-function makeId(id, index) {
-  return id + "--" + index;
 }

index.d.ts

@@ -1,28 +0,140 @@
-declare module "@reach/alert-dialog" {
-  import * as React from "react";
+/**
+ * A modal dialog that interrupts the user's workflow to get a response, usually
+ * some sort of confirmation. This is different than a typical Dialog in that it
+ * requires some user response, like "Save", or "Cancel", etc.
+ *
+ * Most of the time you'll use `AlertDialog`, `AlertDialogLabel`, and
+ * `AlertDialogDescription` together. If you need more control over the styling
+ * of the modal you can drop down a level and use `AlertDialogOverlay` and
+ * `AlertDialogContent` instead of `AlertDialog`.
+ *
+ * When a Dialog opens, the _least destructive_ action should be focused so that
+ * if a user accidentally hits enter when the dialog opens no damage is done.
+ * This is accomplished with the `leastDestructiveRef` prop.
+ *
+ * Every dialog must render an `AlertDialogLabel` so the screen reader knows
+ * what to say about the dialog. If an `AlertDialogDescription` is also
+ * rendered, the screen reader will also announce that. If you render more than
+ * these two elements and some buttons, the screen reader might not announce it
+ * so it's important to keep the content inside of `AlertDialogLabel` and
+ * `AlertDialogDescription`.
+ *
+ * This is built on top of [Dialog](/dialog), so `AlertDialog` spreads its props
+ * and renders a `Dialog`, same for `AlertDialogOverlay` to `DialogOverlay`, and
+ * `AlertDialogContent` to `DialogContent`.
+ *
+ * @see Docs     https://reacttraining.com/reach-ui/alert-dialog
+ * @see Source   https://github.com/reach/reach-ui/tree/master/packages/alert-dialog
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.1/#alertdialog
+ */
 
-  import { DialogProps, DialogContentProps } from "@reach/dialog";
+import * as React from "react";
 
-  export type AlertDialogProps = {
-    isOpen?: boolean;
-    onDismiss?: () => void;
-    leastDestructiveRef: React.RefObject<HTMLElement>;
-    children: React.ReactNode;
-  } & DialogProps;
+import { DialogProps, DialogContentProps } from "@reach/dialog";
 
-  export type AlertDialogContentProps = {
-    children: React.ReactNode;
-  } & DialogContentProps;
+/**
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialog-props
+ */
+export type AlertDialogProps = {
+  /**
+   * Controls whether the dialog is open or not.
+   *
+   * @see Docs: https://reacttraining.com/reach-ui/alert-dialog#alertdialog-isopen
+   */
+  isOpen?: boolean;
+  /**
+   * When the user clicks outside the modal or hits the escape key,
+   * this function will be called. If you want the modal to close,
+   * you’ll need to set state.
+   *
+   * @see Docs: https://reacttraining.com/reach-ui/alert-dialog#alertdialog-ondismiss
+   */
+  onDismiss?: () => void;
+  /**
+   * To prevent accidental data loss, an alert dialog should focus the least
+   * destructive action button when it opens.
+   *
+   * @see Docs: https://reacttraining.com/reach-ui/alert-dialog#alertdialog-leastdestructiveref
+   */
+  leastDestructiveRef: React.RefObject<HTMLElement>;
+  /**
+   * Accepts any renderable content but should generally be restricted to
+   * `AlertDialogLabel`, `AlertDialogDescription` and action buttons, other
+   * content might not be announced to the user by the screen reader.
+   *
+   * @see Docs: https://reacttraining.com/reach-ui/alert-dialog#alertdialog-children
+   */
+  children: React.ReactNode;
+} & DialogProps;
 
-  export const AlertDialog: React.FunctionComponent<AlertDialogProps>;
-  export const AlertDialogLabel: React.FunctionComponent<
-    React.HTMLProps<HTMLDivElement>
-  >;
-  export const AlertDialogDescription: React.FunctionComponent<
-    React.HTMLProps<HTMLDivElement>
-  >;
-  export const AlertDialogOverlay: React.FunctionComponent<AlertDialogProps>;
-  export const AlertDialogContent: React.FunctionComponent<
-    AlertDialogContentProps
-  >;
-}
+/**
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogcontent-props
+ */
+export type AlertDialogContentProps = {
+  /**
+   * Accepts any renderable content but should generally be restricted to
+   * `AlertDialogLabel`, `AlertDialogDescription` and action buttons, other
+   * content might not be announced to the user by the screen reader.
+   *
+   * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogcontent-children
+   */
+  children: React.ReactNode;
+} & DialogContentProps;
+
+/**
+ * High-level component to render an alert dialog.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialog
+ */
+declare const AlertDialog: React.FunctionComponent<AlertDialogProps>;
+
+/**
+ * The first thing ready by screen readers when the dialog opens, usually the
+ * title of the dialog like "Warning!" or "Please confirm!".
+ *
+ * This is required. The `AlertDialog` will throw an error if no label is
+ * rendered.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialoglabel
+ */
+declare const AlertDialogLabel: React.FunctionComponent<
+  React.HTMLProps<HTMLDivElement>
+>;
+
+/**
+ * Additional content read by screen readers, usually a longer description
+ * about what you need from the user like "This action is permanent, are you
+ * sure?" etc.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogdescription
+ */
+declare const AlertDialogDescription: React.FunctionComponent<
+  React.HTMLProps<HTMLDivElement>
+>;
+
+/**
+ * Low-level component if you need more control over the styles or rendering of
+ * the dialog overlay. In the following example we use the AlertDialogOverlay
+ * and AlertDialogContent to have more control over the styles.
+ *
+ * Note: You must render an `AlertDialogContent` inside.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogoverlay
+ */
+declare const AlertDialogOverlay: React.FunctionComponent<AlertDialogProps>;
+
+/**
+ * Low-level component if you need more control over the styles or rendering of
+ * the dialog content.
+ *
+ * Note: Must be a child of `AlertDialogOverlay`.
+ *
+ * Note: You only need to use this when you are also styling
+ * `AlertDialogOverlay`, otherwise you can use the high-level `AlertDialog`
+ * component and pass the props to it.
+ *
+ * @see Docs https://reacttraining.com/reach-ui/alert-dialog#alertdialogcontent
+ */
+declare const AlertDialogContent: React.FunctionComponent<
+  AlertDialogContentProps
+>;

index.js

@@ -12,2 +12,4 @@ "use strict";
 
+var _utils = require("@reach/utils");
+
 var _invariant = _interopRequireDefault(require("invariant"));
@@ -34,4 +36,4 @@
   var uid = (0, _autoId.useId)();
-  var labelId = makeId("alert-dialog", uid);
-  var descriptionId = makeId("alert-dialog-description", uid);
+  var labelId = (0, _utils.makeId)("alert-dialog", uid);
+  var descriptionId = (0, _utils.makeId)("alert-dialog-description", uid);
   return _react["default"].createElement(AlertDialogContext.Provider, {
@@ -75,4 +77,6 @@ value: {
   return _react["default"].createElement(_dialog.DialogContent, _extends({
-    ref: forwardRef,
+    ref: forwardRef // lol: remove in 1.0
+    ,
     "data-reach-alert-dialong-content": true,
+    "data-reach-alert-dialog-content": true,
     role: "alertdialog",
@@ -137,7 +141,2 @@ "aria-labelledby": labelId
   };
-} // TODO: Move to @reach/utils
-
-
-function makeId(id, index) {
-  return id + "--" + index;
 }

package.json

 {
   "name": "@reach/alert-dialog",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Accessible React Alert Dialog.",
@@ -13,5 +13,5 @@ "author": "React Training <[e-mail]>",
   "dependencies": {
-    "@reach/auto-id": "^0.4.0",
-    "@reach/dialog": "^0.4.0",
-    "@reach/utils": "^0.4.0",
+    "@reach/auto-id": "^0.5.0",
+    "@reach/dialog": "^0.5.0",
+    "@reach/utils": "^0.5.0",
     "invariant": "^2.2.4",
@@ -25,4 +25,4 @@ "prop-types": "^15.7.2"
   "devDependencies": {
-    "react": "^16.10.2",
-    "react-test-renderer": "^16.10.2"
+    "react": "^16.11.0",
+    "react-test-renderer": "^16.11.0"
   },
@@ -37,3 +37,3 @@ "files": [
   ],
-  "gitHead": "0f3d2c7e530cd80e1d1bd338182ac89a3ba23999"
+  "gitHead": "7e33672d882cd6df77ac8cdb76b6b4a21dbf28c2"
 }

src/index.js

 import React, { createContext } from "react";
 import { DialogOverlay, DialogContent } from "@reach/dialog";
 import { useId } from "@reach/auto-id";
+import { makeId } from "@reach/utils";
 import invariant from "invariant";
@@ -65,3 +66,5 @@ import { func, bool, node, object, oneOfType } from "prop-types";
       ref={forwardRef}
+      // lol: remove in 1.0
       data-reach-alert-dialong-content
+      data-reach-alert-dialog-content
       role="alertdialog"
@@ -113,6 +116,1 @@ aria-labelledby={labelId}
 }
-
-// TODO: Move to @reach/utils
-function makeId(id, index) {
-  return `${id}--${index}`;
-}

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21162

increased by27.71%

Lines of code

440

increased by31.74%

Number of low supply chain risk alerts

11

decreased by-31.25%

Dependency changes

• + Added@reach/auto-id@0.5.3(transitive)

• + Added@reach/component-component@0.5.0(transitive)

• + Added@reach/dialog@0.5.4(transitive)

• + Added@reach/portal@0.5.0(transitive)

• + Added@reach/utils@0.5.0(transitive)

• - Removed@reach/auto-id@0.4.0(transitive)

• - Removed@reach/component-component@0.4.0(transitive)

• - Removed@reach/dialog@0.4.0(transitive)

• - Removed@reach/portal@0.4.0(transitive)

• - Removed@reach/utils@0.4.0(transitive)

• Updated@reach/auto-id@^0.5.0

• Updated@reach/dialog@^0.5.0

• Updated@reach/utils@^0.5.0