@hig/modal - npm Package Compare versions

Comparing version 0.1.1-alpha to 0.1.1-alpha.2

build/index.es.js

@@ -1,5 +0,642 @@
-import { Modal } from 'hig-react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import IconButton, { names } from '@hig/icon-button';
+import cx from 'classnames';
+import { generateId } from '@hig/utils';
 
-Modal.displayName = "Modal";
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalHeaderPresenter = function (_Component) {
+  _inherits(ModalHeaderPresenter, _Component);
+
+  function ModalHeaderPresenter() {
+    _classCallCheck(this, ModalHeaderPresenter);
+
+    return _possibleConstructorReturn(this, (ModalHeaderPresenter.__proto__ || Object.getPrototypeOf(ModalHeaderPresenter)).apply(this, arguments));
+  }
+
+  _createClass(ModalHeaderPresenter, [{
+    key: "renderChildren",
+    value: function renderChildren() {
+      return React.createElement(
+        "header",
+        { className: "hig__modal-V1__header", id: this.props.id },
+        this.props.children
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          id = _props.id,
+          onCloseClick = _props.onCloseClick,
+          title = _props.title;
+
+
+      return children ? this.renderChildren() : React.createElement(
+        "header",
+        { className: "hig__modal-V1__header", id: id },
+        React.createElement(IconButton, {
+          "aria-label": closeButtonAriaLabel,
+          name: names.X_CLOSE_GRAY,
+          onClick: onCloseClick,
+          title: "Close"
+        }),
+        React.createElement(
+          "span",
+          { className: "hig__modal-V1__header-title" },
+          title
+        )
+      );
+    }
+  }]);
+
+  return ModalHeaderPresenter;
+}(Component);
+
+ModalHeaderPresenter.propTypes = {
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when children
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * ID for a11y
+   */
+  id: PropTypes.string,
+  /**
+   * Triggers when one clicks the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string
+};
+ModalHeaderPresenter.defaultProps = {
+  closeButtonAriaLabel: "close"
+};
+ModalHeaderPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalHeaderPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when children\nare not utilized",
+      "defaultValue": {
+        "value": "\"close\"",
+        "computed": false
+      }
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ID for a11y"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the close button"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    }
+  }
+};
+
+var types = Object.freeze({
+  STANDARD: "standard",
+  ALTERNATE: "alternate"
+});
+
+var AVAILABLE_TYPES = Object.freeze(Object.values(types));
+
+var _ModalPresenter$modif;
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalPresenter = function (_Component) {
+  _inherits$1(ModalPresenter, _Component);
+
+  function ModalPresenter() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, ModalPresenter);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = ModalPresenter.__proto__ || Object.getPrototypeOf(ModalPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.setScrolling = function (element) {
+      _this.hasScrolling = element.scrollHeight > element.clientHeight;
+    }, _this.titleId = generateId("modal-title"), _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  _createClass$1(ModalPresenter, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          headerChildren = _props.headerChildren,
+          onCloseClick = _props.onCloseClick,
+          onOverlayClick = _props.onOverlayClick,
+          onWindowClick = _props.onWindowClick,
+          open = _props.open,
+          title = _props.title,
+          type = _props.type;
+
+
+      var windowClasses = cx("hig__modal-V1__window", ModalPresenter.modifiersByType[type]);
+
+      var wrapperClasses = cx(["hig__modal-V1", {
+        "hig__modal-V1--open": open
+      }]);
+
+      /*
+       * The "no-noninteractive-element-interactions" rule is disabled for this block.
+       * This is due to the modal being is a special case where its containers are to be considered
+       * as non-interactive, static content by screen-readers, but must also respond to `click` events.
+       * Additionally, even though they respond to `click` events, they're not focusable.
+       */
+      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+      return React.createElement(
+        "div",
+        { className: wrapperClasses },
+        React.createElement(
+          "div",
+          {
+            "aria-labelledby": this.titleId,
+            className: "hig__modal-V1__overlay",
+            onClick: onOverlayClick,
+            role: "dialog",
+            tabIndex: "-1"
+          },
+          React.createElement(
+            "article",
+            {
+              className: windowClasses,
+              onClick: onWindowClick,
+              role: "document"
+            },
+            React.createElement(
+              ModalHeaderPresenter,
+              {
+                id: this.titleId,
+                closeButtonAriaLabel: closeButtonAriaLabel,
+                onCloseClick: onCloseClick,
+                title: title
+              },
+              headerChildren
+            ),
+            React.createElement(
+              "section",
+              { className: "hig__modal-V1__body" },
+              React.createElement(
+                "div",
+                { className: "hig__modal-V1__slot" },
+                children
+              )
+            )
+          )
+        )
+      );
+      /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    }
+  }]);
+
+  return ModalPresenter;
+}(Component);
+
+ModalPresenter.modifiersByType = (_ModalPresenter$modif = {}, _defineProperty(_ModalPresenter$modif, types.STANDARD, "hig__modal-V1__window--standard"), _defineProperty(_ModalPresenter$modif, types.ALTERNATE, "hig__modal-V1__window--alternate"), _ModalPresenter$modif);
+ModalPresenter.propTypes = {
+  /**
+   * Supports adding any dom content to the body of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when headerChildren
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  headerChildren: PropTypes.node,
+  /**
+   * Triggers when one clicks the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when one clicks the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * Triggers when one clicks the modal window
+   */
+  onWindowClick: PropTypes.func,
+  /**
+   * Modal is visible when true
+   */
+  open: PropTypes.bool,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string,
+  /**
+   * Style of the modal shell
+   */
+  type: PropTypes.string
+};
+ModalPresenter.defaultProps = {
+  type: types.STANDARD
+};
+ModalPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the body of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when headerChildren\nare not utilized"
+    },
+    "headerChildren": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the overlay behind the modal"
+    },
+    "onWindowClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the modal window"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Modal is visible when true"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    },
+    "type": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Style of the modal shell",
+      "defaultValue": {
+        "value": "types.STANDARD",
+        "computed": true
+      }
+    }
+  }
+};
+
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalBehavior = function (_Component) {
+  _inherits$2(ModalBehavior, _Component);
+
+  function ModalBehavior() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$2(this, ModalBehavior);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = ModalBehavior.__proto__ || Object.getPrototypeOf(ModalBehavior)).call.apply(_ref, [this].concat(args))), _this), _this.handleCloseClick = function (event) {
+      var onCloseClick = _this.props.onCloseClick;
+
+
+      if (onCloseClick) {
+        onCloseClick(event);
+      }
+    }, _this.handleOverlayClick = function (event) {
+      var onOverlayClick = _this.props.onOverlayClick;
+
+
+      if (onOverlayClick) {
+        onOverlayClick(event);
+      }
+    }, _this.handleWindowClick = function (event) {
+      event.stopPropagation();
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
+  }
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  _createClass$2(ModalBehavior, [{
+    key: "render",
+    value: function render() {
+      return this.props.children({
+        handleCloseClick: this.handleCloseClick,
+        handleOverlayClick: this.handleOverlayClick,
+        handleWindowClick: this.handleWindowClick
+      });
+    }
+  }]);
+
+  return ModalBehavior;
+}(Component);
+
+ModalBehavior.propTypes = {
+  /**
+   * Triggers when you click the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when you click the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * A function to render content of the modal
+   */
+  children: PropTypes.func
+};
+ModalBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalBehavior",
+  "props": {
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the overlay behind the modal"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "A function to render content of the modal"
+    }
+  }
+};
+
+var _createClass$3 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Modal = function (_Component) {
+  _inherits$3(Modal, _Component);
+
+  function Modal() {
+    _classCallCheck$3(this, Modal);
+
+    return _possibleConstructorReturn$3(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).apply(this, arguments));
+  }
+
+  _createClass$3(Modal, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          headerChildren = _props.headerChildren,
+          onCloseClick = _props.onCloseClick,
+          onOverlayClick = _props.onOverlayClick,
+          open = _props.open,
+          title = _props.title,
+          type = _props.type;
+
+
+      return React.createElement(
+        ModalBehavior,
+        {
+          onCloseClick: onCloseClick,
+          onOverlayClick: onOverlayClick,
+          open: open
+        },
+        function (_ref) {
+          var handleCloseClick = _ref.handleCloseClick,
+              handleOverlayClick = _ref.handleOverlayClick,
+              handleWindowClick = _ref.handleWindowClick;
+          return React.createElement(
+            ModalPresenter,
+            {
+              closeButtonAriaLabel: closeButtonAriaLabel,
+              headerChildren: headerChildren,
+              onCloseClick: handleCloseClick,
+              onOverlayClick: handleOverlayClick,
+              onWindowClick: handleWindowClick,
+              open: open,
+              title: title,
+              type: type
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Modal;
+}(Component);
+
+Modal.propTypes = {
+  /**
+   * Supports adding any dom content to the body of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when headerChildren
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  headerChildren: PropTypes.node,
+  /**
+   * Triggers when you click the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when you click the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * Modal is visible when true
+   */
+  open: PropTypes.bool,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string,
+  /**
+   * Style of the modal shell
+   */
+  type: PropTypes.string
+};
+Modal.__docgenInfo = {
+  "description": "",
+  "displayName": "Modal",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the body of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when headerChildren\nare not utilized"
+    },
+    "headerChildren": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the overlay behind the modal"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Modal is visible when true"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    },
+    "type": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Style of the modal shell"
+    }
+  }
+};
+
 export default Modal;

build/index.js

@@ -5,6 +5,647 @@ 'use strict';
 
-var higReact = require('hig-react');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-higReact.Modal.displayName = "Modal";
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var IconButton = require('@hig/icon-button');
+var IconButton__default = _interopDefault(IconButton);
+var cx = _interopDefault(require('classnames'));
+var utils = require('@hig/utils');
 
-exports.default = higReact.Modal;
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalHeaderPresenter = function (_Component) {
+  _inherits(ModalHeaderPresenter, _Component);
+
+  function ModalHeaderPresenter() {
+    _classCallCheck(this, ModalHeaderPresenter);
+
+    return _possibleConstructorReturn(this, (ModalHeaderPresenter.__proto__ || Object.getPrototypeOf(ModalHeaderPresenter)).apply(this, arguments));
+  }
+
+  _createClass(ModalHeaderPresenter, [{
+    key: "renderChildren",
+    value: function renderChildren() {
+      return React__default.createElement(
+        "header",
+        { className: "hig__modal-V1__header", id: this.props.id },
+        this.props.children
+      );
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          id = _props.id,
+          onCloseClick = _props.onCloseClick,
+          title = _props.title;
+
+
+      return children ? this.renderChildren() : React__default.createElement(
+        "header",
+        { className: "hig__modal-V1__header", id: id },
+        React__default.createElement(IconButton__default, {
+          "aria-label": closeButtonAriaLabel,
+          name: IconButton.names.X_CLOSE_GRAY,
+          onClick: onCloseClick,
+          title: "Close"
+        }),
+        React__default.createElement(
+          "span",
+          { className: "hig__modal-V1__header-title" },
+          title
+        )
+      );
+    }
+  }]);
+
+  return ModalHeaderPresenter;
+}(React.Component);
+
+ModalHeaderPresenter.propTypes = {
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when children
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * ID for a11y
+   */
+  id: PropTypes.string,
+  /**
+   * Triggers when one clicks the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string
+};
+ModalHeaderPresenter.defaultProps = {
+  closeButtonAriaLabel: "close"
+};
+ModalHeaderPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalHeaderPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when children\nare not utilized",
+      "defaultValue": {
+        "value": "\"close\"",
+        "computed": false
+      }
+    },
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ID for a11y"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the close button"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    }
+  }
+};
+
+var types = Object.freeze({
+  STANDARD: "standard",
+  ALTERNATE: "alternate"
+});
+
+var AVAILABLE_TYPES = Object.freeze(Object.values(types));
+
+var _ModalPresenter$modif;
+
+var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalPresenter = function (_Component) {
+  _inherits$1(ModalPresenter, _Component);
+
+  function ModalPresenter() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, ModalPresenter);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = ModalPresenter.__proto__ || Object.getPrototypeOf(ModalPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.setScrolling = function (element) {
+      _this.hasScrolling = element.scrollHeight > element.clientHeight;
+    }, _this.titleId = utils.generateId("modal-title"), _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  _createClass$1(ModalPresenter, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          headerChildren = _props.headerChildren,
+          onCloseClick = _props.onCloseClick,
+          onOverlayClick = _props.onOverlayClick,
+          onWindowClick = _props.onWindowClick,
+          open = _props.open,
+          title = _props.title,
+          type = _props.type;
+
+
+      var windowClasses = cx("hig__modal-V1__window", ModalPresenter.modifiersByType[type]);
+
+      var wrapperClasses = cx(["hig__modal-V1", {
+        "hig__modal-V1--open": open
+      }]);
+
+      /*
+       * The "no-noninteractive-element-interactions" rule is disabled for this block.
+       * This is due to the modal being is a special case where its containers are to be considered
+       * as non-interactive, static content by screen-readers, but must also respond to `click` events.
+       * Additionally, even though they respond to `click` events, they're not focusable.
+       */
+      /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+      return React__default.createElement(
+        "div",
+        { className: wrapperClasses },
+        React__default.createElement(
+          "div",
+          {
+            "aria-labelledby": this.titleId,
+            className: "hig__modal-V1__overlay",
+            onClick: onOverlayClick,
+            role: "dialog",
+            tabIndex: "-1"
+          },
+          React__default.createElement(
+            "article",
+            {
+              className: windowClasses,
+              onClick: onWindowClick,
+              role: "document"
+            },
+            React__default.createElement(
+              ModalHeaderPresenter,
+              {
+                id: this.titleId,
+                closeButtonAriaLabel: closeButtonAriaLabel,
+                onCloseClick: onCloseClick,
+                title: title
+              },
+              headerChildren
+            ),
+            React__default.createElement(
+              "section",
+              { className: "hig__modal-V1__body" },
+              React__default.createElement(
+                "div",
+                { className: "hig__modal-V1__slot" },
+                children
+              )
+            )
+          )
+        )
+      );
+      /* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
+    }
+  }]);
+
+  return ModalPresenter;
+}(React.Component);
+
+ModalPresenter.modifiersByType = (_ModalPresenter$modif = {}, _defineProperty(_ModalPresenter$modif, types.STANDARD, "hig__modal-V1__window--standard"), _defineProperty(_ModalPresenter$modif, types.ALTERNATE, "hig__modal-V1__window--alternate"), _ModalPresenter$modif);
+ModalPresenter.propTypes = {
+  /**
+   * Supports adding any dom content to the body of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when headerChildren
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  headerChildren: PropTypes.node,
+  /**
+   * Triggers when one clicks the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when one clicks the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * Triggers when one clicks the modal window
+   */
+  onWindowClick: PropTypes.func,
+  /**
+   * Modal is visible when true
+   */
+  open: PropTypes.bool,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string,
+  /**
+   * Style of the modal shell
+   */
+  type: PropTypes.string
+};
+ModalPresenter.defaultProps = {
+  type: types.STANDARD
+};
+ModalPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalPresenter",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the body of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when headerChildren\nare not utilized"
+    },
+    "headerChildren": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the overlay behind the modal"
+    },
+    "onWindowClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when one clicks the modal window"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Modal is visible when true"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    },
+    "type": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Style of the modal shell",
+      "defaultValue": {
+        "value": "types.STANDARD",
+        "computed": true
+      }
+    }
+  }
+};
+
+var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalBehavior = function (_Component) {
+  _inherits$2(ModalBehavior, _Component);
+
+  function ModalBehavior() {
+    var _ref;
+
+    var _temp, _this, _ret;
+
+    _classCallCheck$2(this, ModalBehavior);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = ModalBehavior.__proto__ || Object.getPrototypeOf(ModalBehavior)).call.apply(_ref, [this].concat(args))), _this), _this.handleCloseClick = function (event) {
+      var onCloseClick = _this.props.onCloseClick;
+
+
+      if (onCloseClick) {
+        onCloseClick(event);
+      }
+    }, _this.handleOverlayClick = function (event) {
+      var onOverlayClick = _this.props.onOverlayClick;
+
+
+      if (onOverlayClick) {
+        onOverlayClick(event);
+      }
+    }, _this.handleWindowClick = function (event) {
+      event.stopPropagation();
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
+  }
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  /**
+   * @param {MouseEvent} event
+   */
+
+
+  _createClass$2(ModalBehavior, [{
+    key: "render",
+    value: function render() {
+      return this.props.children({
+        handleCloseClick: this.handleCloseClick,
+        handleOverlayClick: this.handleOverlayClick,
+        handleWindowClick: this.handleWindowClick
+      });
+    }
+  }]);
+
+  return ModalBehavior;
+}(React.Component);
+
+ModalBehavior.propTypes = {
+  /**
+   * Triggers when you click the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when you click the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * A function to render content of the modal
+   */
+  children: PropTypes.func
+};
+ModalBehavior.__docgenInfo = {
+  "description": "",
+  "displayName": "ModalBehavior",
+  "props": {
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the overlay behind the modal"
+    },
+    "children": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "A function to render content of the modal"
+    }
+  }
+};
+
+var _createClass$3 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _classCallCheck$3(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$3(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$3(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Modal = function (_Component) {
+  _inherits$3(Modal, _Component);
+
+  function Modal() {
+    _classCallCheck$3(this, Modal);
+
+    return _possibleConstructorReturn$3(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).apply(this, arguments));
+  }
+
+  _createClass$3(Modal, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          closeButtonAriaLabel = _props.closeButtonAriaLabel,
+          headerChildren = _props.headerChildren,
+          onCloseClick = _props.onCloseClick,
+          onOverlayClick = _props.onOverlayClick,
+          open = _props.open,
+          title = _props.title,
+          type = _props.type;
+
+
+      return React__default.createElement(
+        ModalBehavior,
+        {
+          onCloseClick: onCloseClick,
+          onOverlayClick: onOverlayClick,
+          open: open
+        },
+        function (_ref) {
+          var handleCloseClick = _ref.handleCloseClick,
+              handleOverlayClick = _ref.handleOverlayClick,
+              handleWindowClick = _ref.handleWindowClick;
+          return React__default.createElement(
+            ModalPresenter,
+            {
+              closeButtonAriaLabel: closeButtonAriaLabel,
+              headerChildren: headerChildren,
+              onCloseClick: handleCloseClick,
+              onOverlayClick: handleOverlayClick,
+              onWindowClick: handleWindowClick,
+              open: open,
+              title: title,
+              type: type
+            },
+            children
+          );
+        }
+      );
+    }
+  }]);
+
+  return Modal;
+}(React.Component);
+
+Modal.propTypes = {
+  /**
+   * Supports adding any dom content to the body of the modal
+   */
+  children: PropTypes.node,
+  /**
+   * ARIA label attribute for the close button if/when headerChildren
+   * are not utilized
+   */
+  closeButtonAriaLabel: PropTypes.string,
+  /**
+   * Supports adding any dom content to the header of the modal
+   */
+  headerChildren: PropTypes.node,
+  /**
+   * Triggers when you click the close button
+   */
+  onCloseClick: PropTypes.func,
+  /**
+   * Triggers when you click the overlay behind the modal
+   */
+  onOverlayClick: PropTypes.func,
+  /**
+   * Modal is visible when true
+   */
+  open: PropTypes.bool,
+  /**
+   * Title of the modal
+   */
+  title: PropTypes.string,
+  /**
+   * Style of the modal shell
+   */
+  type: PropTypes.string
+};
+Modal.__docgenInfo = {
+  "description": "",
+  "displayName": "Modal",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the body of the modal"
+    },
+    "closeButtonAriaLabel": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "ARIA label attribute for the close button if/when headerChildren\nare not utilized"
+    },
+    "headerChildren": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Supports adding any dom content to the header of the modal"
+    },
+    "onCloseClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the close button"
+    },
+    "onOverlayClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Triggers when you click the overlay behind the modal"
+    },
+    "open": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Modal is visible when true"
+    },
+    "title": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Title of the modal"
+    },
+    "type": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Style of the modal shell"
+    }
+  }
+};
+
+exports.default = Modal;

package.json

 {
   "name": "@hig/modal",
-  "version": "0.1.1-alpha",
+  "version": "0.1.1-alpha.2",
   "description": "HIG Modal",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Autodesk/hig.git"
+  },
   "publishConfig": {
@@ -17,6 +21,7 @@ "access": "public"
   "dependencies": {
+    "@hig/icon-button": "^0.2.0",
+    "@hig/utils": "^0.2.1",
     "classnames": "^2.2.5",
-    "hig-react": "^0.29.0",
     "prop-types": "^15.6.1",
-    "react-lifecycles-compat": "^3.0.2"
+    "react-lifecycles-compat": "^3.0.4"
   },
@@ -29,8 +34,12 @@ "peerDependencies": {
     "@hig/eslint-config": "^0.1.0",
-    "@hig/scripts": "^0.1.0",
-    "@hig/styles": "^0.1.1"
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
+    "@hig/styles": "^0.2.3"
   },
   "scripts": {
     "build": "hig-scripts-build",
-    "lint": "eslint src --color --ext .js,.jsx"
+    "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
+    "release": "hig-scripts-release"
   },
@@ -40,2 +49,8 @@ "eslintConfig": {
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
   "babel": {
@@ -42,0 +57,0 @@ "env": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of package files

7

increased by16.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

84121

decreased by-70.4%

Dependency count

6

increased by20%

Dev dependency count

6

increased by50%

Lines of code

1869

decreased by-77.17%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Added@hig/icon-button@^0.2.0

• + Added@hig/utils@^0.2.1

• + Added@hig/icon@0.2.1(transitive)

• + Added@hig/icon-button@0.2.2(transitive)

• + Added@hig/icons@0.2.1(transitive)

• + Added@hig/utils@0.2.1(transitive)

• - Removedhig-react@^0.29.0

• - Removed@babel/runtime@7.26.0(transitive)

• - Removed@hig/avatar@0.1.3(transitive)

• - Removed@hig/icon@0.1.3(transitive)

• - Removed@hig/icon-button@0.1.3(transitive)

• - Removed@hig/icons@0.1.0(transitive)

• - Removed@hig/timestamp@0.1.4(transitive)

• - Removed@hig/typography@0.1.4(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removeddom-helpers@3.4.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhig-interface@0.1.19(transitive)

• - Removedhig-react@0.29.0(transitive)

• - Removedhig-vanilla@0.1.27(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.018.3.1(transitive)

• - Removedreact-dom@15.7.018.3.1(transitive)

• - Removedreact-flip-move@3.0.5(transitive)

• - Removedreact-transition-group@2.9.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)

• Updatedreact-lifecycles-compat@^3.0.4