@hipay/hipay-material-ui 1.0.0-beta.1

package/es/Modal/Modal.js

@@ -0,0 +1,398 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// @inheritedComponent Portal
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import warning from 'warning';
+import keycode from 'keycode';
+import activeElement from 'dom-helpers/activeElement';
+import contains from 'dom-helpers/query/contains';
+import inDOM from 'dom-helpers/util/inDOM';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import RefHolder from '../internal/RefHolder';
+import Portal from '../Portal';
+import addEventListener from '../utils/addEventListener';
+import { createChainedFunction } from '../utils/helpers';
+import withStyles from '../styles/withStyles';
+import ModalManager from './ModalManager';
+import Backdrop from './Backdrop';
+
+function getContainer(container, defaultContainer) {
+  container = typeof container === 'function' ? container() : container;
+  return ReactDOM.findDOMNode(container) || defaultContainer;
+}
+
+function getHasTransition(props) {
+  return props.children ? props.children.props.hasOwnProperty('in') : false;
+}
+
+export const styles = theme => ({
+  root: {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    position: 'fixed',
+    zIndex: theme.zIndex.modal,
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    visibility: 'hidden'
+  }
+});
+
+class Modal extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this.dialog = null;
+    this.mounted = false;
+    this.mountNode = null;
+
+    this.handleRendered = () => {
+      this.autoFocus();
+
+      if (this.props.onRendered) {
+        this.props.onRendered();
+      }
+    };
+
+    this.handleOpen = () => {
+      const doc = ownerDocument(this.mountNode);
+      const container = getContainer(this.props.container, doc.body);
+
+      this.props.manager.add(this, container);
+      this.onDocumentKeydownListener = addEventListener(doc, 'keydown', this.handleDocumentKeyDown);
+      this.onFocusinListener = addEventListener(doc, 'focus', this.enforceFocus, true);
+    };
+
+    this.handleClose = () => {
+      this.props.manager.remove(this);
+      this.onDocumentKeydownListener.remove();
+      this.onFocusinListener.remove();
+      this.restoreLastFocus();
+    };
+
+    this.handleExited = () => {
+      this.setState({ exited: true });
+      this.handleClose();
+    };
+
+    this.handleBackdropClick = event => {
+      if (event.target !== event.currentTarget) {
+        return;
+      }
+
+      if (this.props.onBackdropClick) {
+        this.props.onBackdropClick(event);
+      }
+
+      if (!this.props.disableBackdropClick && this.props.onClose) {
+        this.props.onClose(event, 'backdropClick');
+      }
+    };
+
+    this.handleDocumentKeyDown = event => {
+      if (!this.isTopModal() || keycode(event) !== 'esc') {
+        return;
+      }
+
+      if (this.props.onEscapeKeyDown) {
+        this.props.onEscapeKeyDown(event);
+      }
+
+      if (!this.props.disableEscapeKeyDown && this.props.onClose) {
+        this.props.onClose(event, 'escapeKeyDown');
+      }
+    };
+
+    this.checkForFocus = () => {
+      if (inDOM) {
+        this.lastFocus = activeElement();
+      }
+    };
+
+    this.enforceFocus = () => {
+      if (this.props.disableEnforceFocus || !this.mounted || !this.isTopModal()) {
+        return;
+      }
+
+      const dialogElement = this.getDialogElement();
+      const currentActiveElement = activeElement(ownerDocument(this.mountNode));
+
+      if (dialogElement && !contains(dialogElement, currentActiveElement)) {
+        dialogElement.focus();
+      }
+    };
+
+    this.state = {
+      exited: !this.props.open
+    };
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+    if (this.props.open) {
+      this.handleOpen();
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.open) {
+      this.setState({ exited: false });
+    } else if (!getHasTransition(nextProps)) {
+      // Otherwise let handleExited take care of marking exited.
+      this.setState({ exited: true });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!prevProps.open && this.props.open) {
+      this.checkForFocus();
+    }
+
+    if (prevProps.open && !this.props.open && !getHasTransition(this.props)) {
+      // Otherwise handleExited will call this.
+      this.handleClose();
+    } else if (!prevProps.open && this.props.open) {
+      this.handleOpen();
+    }
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+
+    if (this.props.open || getHasTransition(this.props) && !this.state.exited) {
+      this.handleClose();
+    }
+  }
+
+  getDialogElement() {
+    return ReactDOM.findDOMNode(this.dialog);
+  }
+
+  autoFocus() {
+    if (this.props.disableAutoFocus) {
+      return;
+    }
+
+    const dialogElement = this.getDialogElement();
+    const currentActiveElement = activeElement(ownerDocument(this.mountNode));
+
+    if (dialogElement && !contains(dialogElement, currentActiveElement)) {
+      this.lastFocus = currentActiveElement;
+
+      if (!dialogElement.hasAttribute('tabIndex')) {
+        process.env.NODE_ENV !== "production" ? warning(false, ['Material-UI: the modal content node does not accept focus.', 'For the benefit of assistive technologies, ' + 'the tabIndex of the node is being set to "-1".'].join('\n')) : void 0;
+        dialogElement.setAttribute('tabIndex', -1);
+      }
+
+      dialogElement.focus();
+    }
+  }
+
+  restoreLastFocus() {
+    if (this.props.disableRestoreFocus) {
+      return;
+    }
+
+    if (this.lastFocus) {
+      this.lastFocus.focus();
+      this.lastFocus = null;
+    }
+  }
+
+  isTopModal() {
+    return this.props.manager.isTopModal(this);
+  }
+
+  render() {
+    const _props = this.props,
+          {
+      BackdropComponent,
+      BackdropProps,
+      children,
+      classes,
+      className,
+      container,
+      disableAutoFocus,
+      disableBackdropClick,
+      disableEnforceFocus,
+      disableEscapeKeyDown,
+      disableRestoreFocus,
+      hideBackdrop,
+      keepMounted,
+      onBackdropClick,
+      onClose,
+      onEscapeKeyDown,
+      onRendered,
+      open,
+      manager
+    } = _props,
+          other = _objectWithoutProperties(_props, ['BackdropComponent', 'BackdropProps', 'children', 'classes', 'className', 'container', 'disableAutoFocus', 'disableBackdropClick', 'disableEnforceFocus', 'disableEscapeKeyDown', 'disableRestoreFocus', 'hideBackdrop', 'keepMounted', 'onBackdropClick', 'onClose', 'onEscapeKeyDown', 'onRendered', 'open', 'manager']);
+    const { exited } = this.state;
+    const hasTransition = getHasTransition(this.props);
+    const childProps = {};
+
+    if (!keepMounted && !open && (!hasTransition || exited)) {
+      return null;
+    }
+
+    // It's a Transition like component
+    if (hasTransition) {
+      childProps.onExited = createChainedFunction(this.handleExited, children.props.onExited);
+    }
+
+    if (children.props.role === undefined) {
+      childProps.role = children.props.role || 'document';
+    }
+
+    if (children.props.tabIndex === undefined) {
+      childProps.tabIndex = children.props.tabIndex || '-1';
+    }
+
+    return React.createElement(
+      Portal,
+      {
+        ref: node => {
+          this.mountNode = node ? node.getMountNode() : node;
+        },
+        container: container,
+        onRendered: this.handleRendered
+      },
+      React.createElement(
+        'div',
+        _extends({
+          className: classNames(classes.root, className, {
+            [classes.hidden]: exited
+          })
+        }, other),
+        hideBackdrop ? null : React.createElement(BackdropComponent, _extends({ open: open, onClick: this.handleBackdropClick }, BackdropProps)),
+        React.createElement(
+          RefHolder,
+          {
+            ref: node => {
+              this.dialog = node;
+            }
+          },
+          React.cloneElement(children, childProps)
+        )
+      )
+    );
+  }
+}
+
+Modal.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * A backdrop component. Useful for custom backdrop rendering.
+   */
+  BackdropComponent: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the `Backdrop` element.
+   */
+  BackdropProps: PropTypes.object,
+  /**
+   * A single child content element.
+   */
+  children: PropTypes.element,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * A node, component instance, or function that returns either.
+   * The `container` will have the portal children appended to it.
+   */
+  container: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
+  /**
+   * If `true`, the modal will not automatically shift focus to itself when it opens, and
+   * replace it to the last focused element when it closes.
+   * This also works correctly with any modal children that have the `disableAutoFocus` prop.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  disableAutoFocus: PropTypes.bool,
+  /**
+   * If `true`, clicking the backdrop will not fire any callback.
+   */
+  disableBackdropClick: PropTypes.bool,
+  /**
+   * If `true`, the modal will not prevent focus from leaving the modal while open.
+   *
+   * Generally this should never be set to `true` as it makes the modal less
+   * accessible to assistive technologies, like screen readers.
+   */
+  disableEnforceFocus: PropTypes.bool,
+  /**
+   * If `true`, hitting escape will not fire any callback.
+   */
+  disableEscapeKeyDown: PropTypes.bool,
+  /**
+   * If `true`, the modal will not restore focus to previously focused element once
+   * modal is hidden.
+   */
+  disableRestoreFocus: PropTypes.bool,
+  /**
+   * If `true`, the backdrop is not rendered.
+   */
+  hideBackdrop: PropTypes.bool,
+  /**
+   * Always keep the children in the DOM.
+   * This property can be useful in SEO situation or
+   * when you want to maximize the responsiveness of the Modal.
+   */
+  keepMounted: PropTypes.bool,
+  /**
+   * A modal manager used to track and manage the state of open
+   * Modals. Useful when customizing how modals interact within a container.
+   */
+  manager: PropTypes.object,
+  /**
+   * Callback fired when the backdrop is clicked.
+   */
+  onBackdropClick: PropTypes.func,
+  /**
+   * Callback fired when the component requests to be closed.
+   * The `reason` parameter can optionally be used to control the response to `onClose`.
+   *
+   * @param {object} event The event source of the callback
+   * @param {string} reason Can be:`"escapeKeyDown"`, `"backdropClick"`
+   */
+  onClose: PropTypes.func,
+  /**
+   * Callback fired when the escape key is pressed,
+   * `disableEscapeKeyDown` is false and the modal is in focus.
+   */
+  onEscapeKeyDown: PropTypes.func,
+  /**
+   * Callback fired once the children has been mounted into the `container`.
+   * It signals that the `open={true}` property took effect.
+   */
+  onRendered: PropTypes.func,
+  /**
+   * If `true`, the modal is open.
+   */
+  open: PropTypes.bool.isRequired
+} : {};
+
+Modal.defaultProps = {
+  disableAutoFocus: false,
+  disableBackdropClick: false,
+  disableEnforceFocus: false,
+  disableEscapeKeyDown: false,
+  disableRestoreFocus: false,
+  hideBackdrop: false,
+  keepMounted: false,
+  // Modals don't open on the server so this won't conflict with concurrent requests.
+  manager: new ModalManager(),
+  BackdropComponent: Backdrop
+};
+
+export default withStyles(styles, { flip: false, name: 'MuiModal' })(Modal);

package/es/Modal/ModalManager.js

@@ -0,0 +1,162 @@
+import _Object$keys from 'babel-runtime/core-js/object/keys';
+import css from 'dom-helpers/style';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
+import isOverflowing from './isOverflowing';
+import { ariaHidden, hideSiblings, showSiblings } from './manageAriaHidden';
+
+function findIndexOf(data, callback) {
+  let idx = -1;
+  data.some((item, index) => {
+    if (callback(item)) {
+      idx = index;
+      return true;
+    }
+    return false;
+  });
+  return idx;
+}
+
+function findContainer(data, modal) {
+  return findIndexOf(data, item => item.modals.indexOf(modal) !== -1);
+}
+
+function getPaddingRight(node) {
+  return parseInt(css(node, 'paddingRight') || 0, 10);
+}
+
+function setContainerStyle(data, container) {
+  const style = { overflow: 'hidden' };
+
+  // We are only interested in the actual `style` here because we will override it.
+  data.style = {
+    overflow: container.style.overflow,
+    paddingRight: container.style.paddingRight
+  };
+
+  if (data.overflowing) {
+    const scrollbarSize = getScrollbarSize();
+
+    // Use computed style, here to get the real padding to add our scrollbar width.
+    style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
+
+    // .mui-fixed is a global helper.
+    const fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
+    for (let i = 0; i < fixedNodes.length; i += 1) {
+      const paddingRight = getPaddingRight(fixedNodes[i]);
+      data.prevPaddings.push(paddingRight);
+      fixedNodes[i].style.paddingRight = `${paddingRight + scrollbarSize}px`;
+    }
+  }
+
+  _Object$keys(style).forEach(key => {
+    container.style[key] = style[key];
+  });
+}
+
+function removeContainerStyle(data, container) {
+  _Object$keys(data.style).forEach(key => {
+    container.style[key] = data.style[key];
+  });
+
+  const fixedNodes = ownerDocument(container).querySelectorAll('.mui-fixed');
+  for (let i = 0; i < fixedNodes.length; i += 1) {
+    fixedNodes[i].style.paddingRight = `${data.prevPaddings[i]}px`;
+  }
+}
+/**
+ * @ignore - do not document.
+ *
+ * Proper state managment for containers and the modals in those containers.
+ * Simplified, but inspired by react-overlay's ModalManager class
+ * Used by the Modal to ensure proper styling of containers.
+ */
+class ModalManager {
+  constructor({ hideSiblingNodes = true, handleContainerOverflow = true } = {}) {
+    this.hideSiblingNodes = hideSiblingNodes;
+    this.handleContainerOverflow = handleContainerOverflow;
+    // this.modals[modalIdx] = modal
+    this.modals = [];
+    // this.containers[containerIdx] = container
+    this.containers = [];
+    // this.data[containerIdx] = {
+    //   modals: [],
+    // }
+    this.data = [];
+  }
+
+  add(modal, container) {
+    let modalIdx = this.modals.indexOf(modal);
+    const containerIdx = this.containers.indexOf(container);
+
+    if (modalIdx !== -1) {
+      return modalIdx;
+    }
+
+    modalIdx = this.modals.length;
+    this.modals.push(modal);
+
+    if (this.hideSiblingNodes) {
+      hideSiblings(container, modal.mountNode);
+    }
+
+    if (containerIdx !== -1) {
+      this.data[containerIdx].modals.push(modal);
+      return modalIdx;
+    }
+
+    const data = {
+      modals: [modal],
+      overflowing: isOverflowing(container),
+      prevPaddings: []
+    };
+
+    if (this.handleContainerOverflow) {
+      setContainerStyle(data, container);
+    }
+
+    this.containers.push(container);
+    this.data.push(data);
+
+    return modalIdx;
+  }
+
+  remove(modal) {
+    const modalIdx = this.modals.indexOf(modal);
+
+    if (modalIdx === -1) {
+      return modalIdx;
+    }
+
+    const containerIdx = findContainer(this.data, modal);
+    const data = this.data[containerIdx];
+    const container = this.containers[containerIdx];
+
+    data.modals.splice(data.modals.indexOf(modal), 1);
+    this.modals.splice(modalIdx, 1);
+
+    // If that was the last modal in a container, clean up the container.
+    if (data.modals.length === 0) {
+      if (this.handleContainerOverflow) {
+        removeContainerStyle(data, container);
+      }
+
+      if (this.hideSiblingNodes) {
+        showSiblings(container, modal.mountNode);
+      }
+      this.containers.splice(containerIdx, 1);
+      this.data.splice(containerIdx, 1);
+    } else if (this.hideSiblingNodes) {
+      // Otherwise make sure the next top modal is visible to a SR.
+      ariaHidden(false, data.modals[data.modals.length - 1].mountNode);
+    }
+
+    return modalIdx;
+  }
+
+  isTopModal(modal) {
+    return !!this.modals.length && this.modals[this.modals.length - 1] === modal;
+  }
+}
+
+export default ModalManager;

package/es/Modal/index.js

@@ -0,0 +1,3 @@
+export { default } from './Modal';
+export { default as Backdrop } from './Backdrop';
+export { default as ModalManager } from './ModalManager';

package/es/Modal/isOverflowing.js

@@ -0,0 +1,25 @@
+import isWindow from 'dom-helpers/query/isWindow';
+import ownerDocument from 'dom-helpers/ownerDocument';
+import ownerWindow from 'dom-helpers/ownerWindow';
+
+export function isBody(node) {
+  return node && node.tagName.toLowerCase() === 'body';
+}
+
+// Do we have a scroll bar?
+export default function isOverflowing(container) {
+  const doc = ownerDocument(container);
+  const win = ownerWindow(doc);
+
+  /* istanbul ignore next */
+  if (!isWindow(doc) && !isBody(container)) {
+    return container.scrollHeight > container.clientHeight;
+  }
+
+  // Takes in account potential non zero margin on the body.
+  const style = win.getComputedStyle(doc.body);
+  const marginLeft = parseInt(style.getPropertyValue('margin-left'), 10);
+  const marginRight = parseInt(style.getPropertyValue('margin-right'), 10);
+
+  return marginLeft + doc.body.clientWidth + marginRight < win.innerWidth;
+}

package/es/Modal/manageAriaHidden.js

@@ -0,0 +1,33 @@
+const BLACKLIST = ['template', 'script', 'style'];
+
+function isHidable(node) {
+  return node.nodeType === 1 && BLACKLIST.indexOf(node.tagName.toLowerCase()) === -1;
+}
+
+function siblings(container, mount, callback) {
+  mount = [].concat(mount); // eslint-disable-line no-param-reassign
+  [].forEach.call(container.children, node => {
+    if (mount.indexOf(node) === -1 && isHidable(node)) {
+      callback(node);
+    }
+  });
+}
+
+export function ariaHidden(show, node) {
+  if (!node) {
+    return;
+  }
+  if (show) {
+    node.setAttribute('aria-hidden', 'true');
+  } else {
+    node.removeAttribute('aria-hidden');
+  }
+}
+
+export function hideSiblings(container, mountNode) {
+  siblings(container, mountNode, node => ariaHidden(true, node));
+}
+
+export function showSiblings(container, mountNode) {
+  siblings(container, mountNode, node => ariaHidden(false, node));
+}

package/es/Paper/Paper.js

@@ -0,0 +1,81 @@
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import warning from 'warning';
+import withStyles from '../styles/withStyles';
+
+export const styles = theme => {
+  const elevations = {};
+  theme.shadows.forEach((shadow, index) => {
+    elevations[`elevation${index}`] = {
+      boxShadow: shadow
+    };
+  });
+
+  return _extends({
+    root: {
+      backgroundColor: theme.palette.background.paper
+    },
+    rounded: {
+      borderRadius: 2
+    }
+  }, elevations);
+};
+
+function Paper(props) {
+  const {
+    classes,
+    className: classNameProp,
+    component: Component,
+    square,
+    elevation
+  } = props,
+        other = _objectWithoutProperties(props, ['classes', 'className', 'component', 'square', 'elevation']);
+
+  process.env.NODE_ENV !== "production" ? warning(elevation >= 0 && elevation < 25, `Material-UI: this elevation \`${elevation}\` is not implemented.`) : void 0;
+
+  const className = classNames(classes.root, classes[`elevation${elevation}`], {
+    [classes.rounded]: !square
+  }, classNameProp);
+
+  return React.createElement(Component, _extends({ className: className }, other));
+}
+
+Paper.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Shadow depth, corresponds to `dp` in the spec.
+   * It's accepting values between 0 and 24 inclusive.
+   */
+  elevation: PropTypes.number,
+  /**
+   * If `true`, rounded corners are disabled.
+   */
+  square: PropTypes.bool
+} : {};
+
+Paper.defaultProps = {
+  component: 'div',
+  elevation: 2,
+  square: false
+};
+
+export default withStyles(styles, { name: 'MuiPaper' })(Paper);

package/es/Paper/index.js

@@ -0,0 +1 @@
+export { default } from './Paper';