@canonical/react-components 0.21.0 → 0.30.0

package/README.md

@@ -6,7 +6,7 @@ This is a collection of components designed to be the way to consume [Vanilla Fr
 
 See the [component docs](https://canonical-web-and-design.github.io/react-components/) for usage instructions.
 
-![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=master)
+![CI](https://github.com/canonical-web-and-design/react-components/workflows/CI/badge.svg?branch=main)
 ![Cypress chrome headless](https://github.com/canonical-web-and-design/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
 
 ## Requirements
@@ -36,9 +36,9 @@ Please file any issues at [GitHub](https://github.com/canonical-web-and-design/r
 You might want to:
 
 - [View the source](https://github.com/canonical-web-and-design/react-components) on GitHub.
-- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/master/HACKING.md).
-- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISH-NPM-PACKAGE.md).
-- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/master/PUBLISHING-DOCS.md) to GitHub Pages.
+- Read about [developing components](https://github.com/canonical-web-and-design/react-components/blob/main/HACKING.md).
+- Find out how to [publish to NPM](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISH-NPM-PACKAGE.md).
+- Know how to [publish the docs](https://github.com/canonical-web-and-design/react-components/blob/main/PUBLISHING-DOCS.md) to GitHub Pages.
 
 ## Developing locally using this repository
 

package/dist/components/AccordionSection/AccordionSection.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _nanoid = require("nanoid");
 
 var _react = _interopRequireWildcard(require("react"));
@@ -17,8 +15,6 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 }; }
-
 var AccordionSection = function AccordionSection(_ref) {
   var content = _ref.content,
       expanded = _ref.expanded,
@@ -63,14 +59,5 @@ var AccordionSection = function AccordionSection(_ref) {
   }, content));
 };
 
-AccordionSection.propTypes = {
-  content: _propTypes.default.node,
-  expanded: _propTypes.default.string,
-  headingLevel: _propTypes.default.number,
-  onTitleClick: _propTypes.default.func,
-  sectionKey: _propTypes.default.string,
-  setExpanded: _propTypes.default.func,
-  title: _propTypes.default.string
-};
 var _default = AccordionSection;
 exports.default = _default;

package/dist/components/ActionButton/ActionButton.js

@@ -11,8 +11,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Button = require("../Button");
-
 var _Icon = _interopRequireDefault(require("../Icon"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -47,8 +45,7 @@ var SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
 exports.SUCCESS_DURATION = SUCCESS_DURATION;
 
 var ActionButton = function ActionButton(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? _Button.ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       _ref$disabled = _ref.disabled,
@@ -126,7 +123,7 @@ var ActionButton = function ActionButton(_ref) {
       return window.clearTimeout(successTimeout);
     };
   }, [showSuccess]);
-  var buttonClasses = (0, _classnames.default)(className, "p-action-button", "p-button--".concat(appearance), {
+  var buttonClasses = (0, _classnames.default)(className, "p-action-button", appearance ? "p-button--".concat(appearance) : "p-button", {
     "is-processing": showLoader || showSuccess,
     "is-disabled": disabled,
     "is-inline": inline

package/dist/components/Button/Button.d.ts

@@ -5,7 +5,6 @@ export declare const ButtonAppearance: {
     readonly BRAND: "brand";
     readonly LINK: "link";
     readonly NEGATIVE: "negative";
-    readonly NEUTRAL: "neutral";
     readonly POSITIVE: "positive";
 };
 /**
@@ -34,7 +33,7 @@ export declare type Props<P = null> = {
      */
     disabled?: boolean;
     /**
-     * Optional element or component to use instead of <button>.
+     * Optional element or component to use instead of `button`.
      */
     element?: ElementType | ComponentType<P>;
     /**

package/dist/components/Button/Button.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ButtonAppearance = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -24,7 +22,6 @@ var ButtonAppearance = {
   BRAND: "brand",
   LINK: "link",
   NEGATIVE: "negative",
-  NEUTRAL: "neutral",
   POSITIVE: "positive"
 };
 /**
@@ -39,8 +36,7 @@ exports.ButtonAppearance = ButtonAppearance;
  * @template P - The type of the props if providing a component to `element`
  */
 var Button = function Button(_ref) {
-  var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? ButtonAppearance.NEUTRAL : _ref$appearance,
+  var appearance = _ref.appearance,
       children = _ref.children,
       className = _ref.className,
       dense = _ref.dense,
@@ -53,7 +49,7 @@ var Button = function Button(_ref) {
       small = _ref.small,
       buttonProps = _objectWithoutProperties(_ref, ["appearance", "children", "className", "dense", "disabled", "element", "hasIcon", "inline", "onClick", "small"]);
 
-  var classes = (0, _classnames.default)("p-button--".concat(appearance), {
+  var classes = (0, _classnames.default)(appearance ? "p-button--".concat(appearance) : "p-button", {
     "has-icon": hasIcon,
     "is-dense": dense,
     "is-disabled": Component !== "button" && disabled,
@@ -76,15 +72,5 @@ var Button = function Button(_ref) {
   }, disabledProp, buttonProps), children);
 };
 
-Button.propTypes = {
-  children: _propTypes.default.node,
-  dense: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  element: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.elementType]),
-  hasIcon: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  small: _propTypes.default.bool
-};
 var _default = Button;
 exports.default = _default;

package/dist/components/Chip/Chip.d.ts

@@ -7,7 +7,7 @@ export declare type Props = {
     /**
      * Function for handling chip div click event.
      */
-    onClick?: (event: MouseEvent<HTMLDivElement> | {
+    onClick?: (event: MouseEvent<HTMLButtonElement> | {
         lead: string;
         value: string;
     }) => void;

package/dist/components/Chip/Chip.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _utils = require("../../utils");
@@ -39,40 +37,39 @@ var Chip = function Chip(_ref) {
   };
 
   var chipValue = (0, _utils.highlightSubString)(value, subString).text;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-chip",
-    "aria-pressed": selected,
-    role: "button",
-    tabIndex: !onDismiss ? 0 : null,
-    onClick: onClick,
-    onKeyDown: function onKeyDown(e) {
-      return _onKeyDown(e);
-    }
-  }, lead && /*#__PURE__*/_react.default.createElement("span", {
+
+  var chipContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, lead && /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__lead"
   }, lead.toUpperCase()), /*#__PURE__*/_react.default.createElement("span", {
     className: "p-chip__value",
     dangerouslySetInnerHTML: {
       __html: quoteValue ? "'".concat(chipValue, "'") : chipValue
     }
-  }), onDismiss ? /*#__PURE__*/_react.default.createElement("button", {
-    className: "p-chip__dismiss",
-    onClick: function onClick() {
-      return onDismiss();
-    }
-  }, /*#__PURE__*/_react.default.createElement("i", {
-    className: "p-icon--close"
-  }, "Dismiss")) : null);
-};
+  }));
 
-Chip.propTypes = {
-  lead: _propTypes.default.string,
-  onClick: _propTypes.default.func,
-  onDismiss: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  subString: _propTypes.default.string,
-  quoteValue: _propTypes.default.bool,
-  value: _propTypes.default.string.isRequired
+  if (onDismiss) {
+    return /*#__PURE__*/_react.default.createElement("span", {
+      className: "p-chip",
+      "aria-pressed": selected
+    }, chipContent, /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-chip__dismiss",
+      onClick: function onClick() {
+        return onDismiss();
+      }
+    }, /*#__PURE__*/_react.default.createElement("i", {
+      className: "p-icon--close"
+    }, "Dismiss")));
+  } else {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      className: "p-chip",
+      "aria-pressed": selected,
+      onClick: onClick,
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      }
+    }, chipContent);
+  }
 };
+
 var _default = Chip;
 exports.default = _default;

package/dist/components/CodeSnippet/CodeSnippetBlock.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = CodeSnippetBlock;
 exports.CodeSnippetBlockAppearance = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -75,13 +73,4 @@ function CodeSnippetBlock(_ref) {
   }))), /*#__PURE__*/_react.default.createElement("pre", {
     className: className
   }, /*#__PURE__*/_react.default.createElement("code", null, isNumbered ? numberedCode : code)), content);
-}
-
-CodeSnippetBlock.propTypes = {
-  code: _propTypes.default.string.isRequired,
-  content: _propTypes.default.node,
-  dropdowns: _propTypes.default.array,
-  stacked: _propTypes.default.bool,
-  title: _propTypes.default.string,
-  wrapLines: _propTypes.default.bool
-};
+}

package/dist/components/CodeSnippet/CodeSnippetDropdown.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = CodeSnippetDropdown;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,9 +33,4 @@ function CodeSnippetDropdown(_ref) {
       key: value + "" || label
     }, props), label);
   }));
-}
-
-CodeSnippetDropdown.propTypes = {
-  onChange: _propTypes.default.func.isRequired,
-  options: _propTypes.default.array.isRequired
-};
+}

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -236,7 +236,7 @@ var ContextualMenu = function ContextualMenu(_ref) {
     },
     type: "button"
   }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
-    className: (0, _classnames.default)("p-icon--contextual-menu p-contextual-menu__indicator", {
+    className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
       "is-light": ["negative", "positive"].includes(toggleAppearance)
     })
   }) : null, toggleLabelFirst ? null : labelNode) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.adjustForWindow = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -225,19 +223,5 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
   })));
 };
 
-ContextualMenuDropdown.propTypes = {
-  adjustedPosition: _propTypes.default.oneOf(["left", "center", "right"]),
-  autoAdjust: _propTypes.default.bool,
-  closePortal: _propTypes.default.func,
-  constrainPanelWidth: _propTypes.default.bool,
-  dropdownClassName: _propTypes.default.string,
-  dropdownContent: _propTypes.default.node,
-  id: _propTypes.default.string,
-  isOpen: _propTypes.default.bool,
-  links: _propTypes.default.array,
-  position: _propTypes.default.oneOf(["left", "center", "right"]),
-  setAdjustedPosition: _propTypes.default.func,
-  wrapperClass: _propTypes.default.string
-};
 var _default = ContextualMenuDropdown;
 exports.default = _default;

package/dist/components/Field/Field.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -91,19 +89,5 @@ var Field = function Field(_ref) {
   }, content) : content);
 };
 
-Field.propTypes = {
-  caution: _propTypes.default.node,
-  children: _propTypes.default.node,
-  error: _propTypes.default.node,
-  forId: _propTypes.default.string,
-  help: _propTypes.default.node,
-  isSelect: _propTypes.default.bool,
-  label: _propTypes.default.node,
-  labelClassName: _propTypes.default.string,
-  labelFirst: _propTypes.default.bool,
-  required: _propTypes.default.bool,
-  stacked: _propTypes.default.bool,
-  success: _propTypes.default.node
-};
 var _default = Field;
 exports.default = _default;

package/dist/components/Icon/Icon.d.ts

@@ -24,6 +24,14 @@ export declare const ICONS: {
     readonly success: "success";
     readonly user: "user";
     readonly warning: "warning";
+    readonly facebook: "facebook";
+    readonly twitter: "twitter";
+    readonly instagram: "instagram";
+    readonly linkedin: "linkedin";
+    readonly youtube: "youtube";
+    readonly github: "github";
+    readonly rss: "rss";
+    readonly email: "email";
 };
 export declare type Props = PropsWithSpread<{
     /**

package/dist/components/Icon/Icon.js

@@ -40,7 +40,15 @@ var ICONS = {
   spinner: "spinner",
   success: "success",
   user: "user",
-  warning: "warning"
+  warning: "warning",
+  facebook: "facebook",
+  twitter: "twitter",
+  instagram: "instagram",
+  linkedin: "linkedin",
+  youtube: "youtube",
+  github: "github",
+  rss: "rss",
+  email: "email"
 };
 exports.ICONS = ICONS;
 

package/dist/components/Input/Input.d.ts

@@ -13,7 +13,7 @@ export declare type Props = PropsWithSpread<{
      */
     className?: ClassName;
     /**
-     * The content for error validation.
+     * The content for error validation message. Controls the value of aria-invalid attribute.
      */
     error?: ReactNode;
     /**

package/dist/components/Input/Input.js

@@ -13,6 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Field = _interopRequireDefault(require("../Field"));
 
+var _CheckboxInput = _interopRequireDefault(require("../CheckboxInput"));
+
+var _RadioInput = _interopRequireDefault(require("../RadioInput"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -42,30 +46,47 @@ var Input = function Input(_ref) {
       inputProps = _objectWithoutProperties(_ref, ["caution", "className", "error", "help", "id", "label", "labelClassName", "required", "stacked", "success", "takeFocus", "type", "wrapperClassName"]);
 
   var inputRef = (0, _react.useRef)(null);
-  var labelFirst = !["checkbox", "radio"].includes(type);
+  var fieldLabel = !["checkbox", "radio"].includes(type) ? label : "";
+
+  var input = /*#__PURE__*/_react.default.createElement("input", _extends({
+    className: (0, _classnames.default)("p-form-validation__input", className),
+    id: id,
+    ref: inputRef,
+    required: required,
+    type: type,
+    "aria-invalid": !!error
+  }, inputProps));
+
   (0, _react.useEffect)(function () {
     if (takeFocus) {
       inputRef.current.focus();
     }
   }, [takeFocus]);
+
+  if (type === "checkbox") {
+    input = /*#__PURE__*/_react.default.createElement(_CheckboxInput.default, _extends({
+      label: label,
+      id: id
+    }, inputProps));
+  } else if (type === "radio") {
+    input = /*#__PURE__*/_react.default.createElement(_RadioInput.default, _extends({
+      label: label,
+      id: id
+    }, inputProps));
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Field.default, {
     caution: caution,
     className: wrapperClassName,
     error: error,
     forId: id,
     help: help,
-    label: label,
+    label: fieldLabel,
     labelClassName: labelClassName,
-    labelFirst: labelFirst,
     required: required,
     stacked: stacked,
     success: success
-  }, /*#__PURE__*/_react.default.createElement("input", _extends({
-    className: (0, _classnames.default)("p-form-validation__input", className),
-    id: id,
-    ref: inputRef,
-    type: type
-  }, inputProps)));
+  }, input);
 };
 
 var _default = Input;

package/dist/components/Link/Link.d.ts

@@ -9,10 +9,6 @@ export declare type Props = PropsWithSpread<{
      * Optional class(es) to pass to the wrapping anchor element.
      */
     className?: ClassName;
-    /**
-     * Whether the link should have external styling.
-     */
-    external?: boolean;
     /**
      * Whether the link should have inverted styling.
      */
@@ -26,5 +22,5 @@ export declare type Props = PropsWithSpread<{
      */
     top?: boolean;
 }, HTMLProps<HTMLAnchorElement>>;
-declare const Link: ({ children, className, external, href, inverted, soft, top, ...props }: Props) => JSX.Element;
+declare const Link: ({ children, className, href, inverted, soft, top, ...props }: Props) => JSX.Element;
 export default Link;

package/dist/components/Link/Link.js

@@ -20,8 +20,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var Link = function Link(_ref) {
   var children = _ref.children,
       className = _ref.className,
-      _ref$external = _ref.external,
-      external = _ref$external === void 0 ? false : _ref$external,
       _ref$href = _ref.href,
       href = _ref$href === void 0 ? "#" : _ref$href,
       _ref$inverted = _ref.inverted,
@@ -30,11 +28,10 @@ var Link = function Link(_ref) {
       soft = _ref$soft === void 0 ? false : _ref$soft,
       _ref$top = _ref.top,
       top = _ref$top === void 0 ? false : _ref$top,
-      props = _objectWithoutProperties(_ref, ["children", "className", "external", "href", "inverted", "soft", "top"]);
+      props = _objectWithoutProperties(_ref, ["children", "className", "href", "inverted", "soft", "top"]);
 
   var link = /*#__PURE__*/_react.default.createElement("a", _extends({
     className: (0, _classnames.default)(className, {
-      "p-link--external": external,
       "p-link--inverted": inverted,
       "p-link--soft": soft,
       "p-top__link": top

package/dist/components/List/List.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -30,7 +28,7 @@ var generateItems = function generateItems(items, ticked, inline, stepped) {
     var TitleComponent = "h3";
     var liProps;
 
-    if (_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
+    if ( /*#__PURE__*/_react.default.isValidElement(item) || typeof item === "string" || typeof item === "number") {
       content = item;
     } else if (item && _typeof(item) === "object" && "content" in item) {
       if ("titleElement" in item) {
@@ -104,17 +102,5 @@ var List = function List(_ref) {
   }, props), generateItems(items, ticked, inline || middot || stretch, stepped));
 };
 
-List.propTypes = {
-  items: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.array]).isRequired,
-  detailed: _propTypes.default.bool,
-  divided: _propTypes.default.bool,
-  inline: _propTypes.default.bool,
-  isDark: _propTypes.default.bool,
-  middot: _propTypes.default.bool,
-  split: _propTypes.default.bool,
-  stepped: _propTypes.default.bool,
-  stretch: _propTypes.default.bool,
-  ticked: _propTypes.default.bool
-};
 var _default = List;
 exports.default = _default;

package/dist/components/Modal/Modal.js

@@ -33,39 +33,88 @@ var Modal = function Modal(_ref) {
       title = _ref.title,
       wrapperProps = _objectWithoutProperties(_ref, ["buttonRow", "children", "className", "close", "title"]);
 
+  // list of focusable selectors is based on this Stack Overflow answer:
+  // https://stackoverflow.com/a/30753870/3732840
+  var focusableElementSelectors = 'a[href]:not([tabindex="-1"]), button:not([disabled]), textarea:not([disabled]):not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), area[href]:not([tabindex="-1"]), iframe:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), [contentEditable=true]:not([tabindex="-1"])';
   var descriptionId = (0, _react.useRef)((0, _nanoid.nanoid)());
-  var titleId = (0, _react.useRef)((0, _nanoid.nanoid)()); // This useEffect sets up listeners so the panel will close if user clicks
-  // anywhere else on the page or hits the escape key
+  var titleId = (0, _react.useRef)((0, _nanoid.nanoid)());
+  var shouldClose = (0, _react.useRef)(false);
+  var modalRef = (0, _react.useRef)(null);
+  var focusableModalElements = (0, _react.useRef)(null);
+
+  var handleTabKey = function handleTabKey(e) {
+    if (focusableModalElements.current.length > 0) {
+      var firstElement = focusableModalElements.current[0];
+      var lastElement = focusableModalElements.current[focusableModalElements.current.length - 1];
+
+      if (!e.shiftKey && document.activeElement === lastElement) {
+        firstElement.focus();
+        e.preventDefault();
+      }
 
-  (0, _react.useEffect)(function () {
-    var keyDown = function keyDown(e) {
-      if (e.code === "Escape") {
-        // Close panel if Esc keydown detected
-        if (close) {
-          close();
-        }
+      if (e.shiftKey && document.activeElement === firstElement) {
+        lastElement.focus();
+        return e.preventDefault();
       }
-    }; // Add listener on document to capture keydown events
+    }
+  };
 
+  var keyListenersMap = new Map([[27, close], [9, handleTabKey]]);
+  (0, _react.useEffect)(function () {
+    modalRef.current.focus();
+  }, [modalRef]);
+  (0, _react.useEffect)(function () {
+    var _focusableModalElemen;
 
-    document.addEventListener("keydown", keyDown); // return function to be called when unmounted
+    focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
+    (_focusableModalElemen = focusableModalElements.current[0]) === null || _focusableModalElemen === void 0 ? void 0 : _focusableModalElemen.focus();
+  }, []);
+  (0, _react.useEffect)(function () {
+    var keyDown = function keyDown(e) {
+      var listener = keyListenersMap.get(e.keyCode);
+      return listener && listener(e);
+    };
 
+    document.addEventListener("keydown", keyDown);
     return function () {
       document.removeEventListener("keydown", keyDown);
     };
-  }, [close]);
+  });
+
+  var handleContentOnMouseDown = function handleContentOnMouseDown() {
+    shouldClose.current = false;
+  };
+
+  var handleContentOnMouseUp = function handleContentOnMouseUp() {
+    shouldClose.current = false;
+  };
+
+  var handleOverlayOnMouseDown = function handleOverlayOnMouseDown(event) {
+    if (event.target === modalRef.current) {
+      shouldClose.current = true;
+    }
+  };
+
+  var handleOverlayOnClick = function handleOverlayOnClick() {
+    if (shouldClose.current) {
+      close();
+    }
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({
     className: (0, _classnames.default)("p-modal", className),
-    onClick: close
-  }, wrapperProps), /*#__PURE__*/_react.default.createElement("section", {
+    onClick: handleOverlayOnClick,
+    onMouseDown: handleOverlayOnMouseDown
+  }, wrapperProps, {
+    ref: modalRef
+  }), /*#__PURE__*/_react.default.createElement("section", {
     className: "p-modal__dialog",
     role: "dialog",
     "aria-modal": "true",
     "aria-labelledby": titleId.current,
     "aria-describedby": descriptionId.current,
-    onClick: function onClick(evt) {
-      return evt.stopPropagation();
-    }
+    onMouseDown: handleContentOnMouseDown,
+    onMouseUp: handleContentOnMouseUp
   }, !!title && /*#__PURE__*/_react.default.createElement("header", {
     className: "p-modal__header"
   }, /*#__PURE__*/_react.default.createElement("h2", {