text: "use strict";
  
  function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.TrapFocus = exports.TitleOnly = exports.WithStateManager = exports.Default = exports.default = void 0;
  
  var _react = _interopRequireWildcard(require("react"));
  
  var _reactDom = _interopRequireDefault(require("react-dom"));
  
  var _addonActions = require("@storybook/addon-actions");
  
  var _addonKnobs = require("@storybook/addon-knobs");
  
  var _Modal = _interopRequireDefault(require("../Modal"));
  
  var _Button = _interopRequireDefault(require("../Button"));
  
  var _TextInput = _interopRequireDefault(require("../TextInput"));
  
  var _carbonComponents = require("carbon-components");
  
  var _Modal2 = _interopRequireDefault(require("./Modal.mdx"));
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  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; }
  
  function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
  
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
  
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
  
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
  
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
  
  function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
  
  function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
  
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  
  var prefix = _carbonComponents.settings.prefix;
  var sizes = {
    Default: '',
    'Extra small (xs)': 'xs',
    'Small (sm)': 'sm',
    'Large (lg)': 'lg'
  };
  
  var props = function props() {
    return {
      className: 'some-class',
      open: (0, _addonKnobs.boolean)('Open (open)', true),
      passiveModal: (0, _addonKnobs.boolean)('Without footer (passiveModal)', false),
      danger: (0, _addonKnobs.boolean)('Danger mode (danger)', false),
      alert: (0, _addonKnobs.boolean)('Alert mode (alert)', false),
      shouldSubmitOnEnter: (0, _addonKnobs.boolean)('Enter key to submit (shouldSubmitOnEnter)', false),
      hasScrollingContent: (0, _addonKnobs.boolean)('Modal contains scrollable content (hasScrollingContent)', false),
      modalHeading: (0, _addonKnobs.text)('Modal heading (modalHeading)', 'Modal heading'),
      modalLabel: (0, _addonKnobs.text)('Optional label (modalLabel)', 'Label'),
      modalAriaLabel: (0, _addonKnobs.text)('ARIA label, used only if modalLabel not provided (modalAriaLabel)', 'A label to be read by screen readers on the modal root node'),
      primaryButtonText: (0, _addonKnobs.text)('Primary button text (primaryButtonText)', 'Primary Button'),
      secondaryButtonText: (0, _addonKnobs.text)('Secondary button text (secondaryButtonText)', 'Secondary Button'),
      selectorPrimaryFocus: (0, _addonKnobs.text)('Primary focus element selector (selectorPrimaryFocus)', '[data-modal-primary-focus]'),
      size: (0, _addonKnobs.select)('Size (size)', sizes),
      iconDescription: (0, _addonKnobs.text)('Close icon description (iconDescription)', 'Close'),
      onBlur: (0, _addonActions.action)('onBlur'),
      onClick: (0, _addonActions.action)('onClick'),
      onFocus: (0, _addonActions.action)('onFocus'),
      onRequestClose: (0, _addonActions.action)('onRequestClose'),
      onRequestSubmit: (0, _addonActions.action)('onRequestSubmit'),
      onSecondarySubmit: (0, _addonActions.action)('onSecondarySubmit'),
      preventCloseOnClickOutside: (0, _addonKnobs.boolean)('Prevent closing on click outside of modal (preventCloseOnClickOutside)', false)
    };
  };
  
  var titleOnlyProps = function titleOnlyProps() {
    var passiveModal = (0, _addonKnobs.boolean)('Without footer (passiveModal)', false);
    return {
      className: 'some-class',
      open: (0, _addonKnobs.boolean)('Open (open)', true),
      passiveModal: passiveModal,
      danger: !passiveModal && (0, _addonKnobs.boolean)('Danger mode (danger)', false),
      alert: !passiveModal && (0, _addonKnobs.boolean)('Alert mode (alert)', false),
      modalHeading: (0, _addonKnobs.text)('Modal heading (modalHeading)', "\n      Passive modal title as the message. Should be direct and 3 lines or less.\n    ".trim()),
      modalAriaLabel: (0, _addonKnobs.text)('ARIA label, used only if modalLabel not provided (modalAriaLabel)', 'A label to be read by screen readers on the modal root node'),
      primaryButtonText: (0, _addonKnobs.text)('Primary button text (primaryButtonText)', 'Primary Button'),
      secondaryButtonText: (0, _addonKnobs.text)('Secondary button text (secondaryButtonText)', 'Secondary Button'),
      size: (0, _addonKnobs.select)('Size (size)', sizes, 'sm'),
      iconDescription: (0, _addonKnobs.text)('Close icon description (iconDescription)', 'Close'),
      onBlur: (0, _addonActions.action)('onBlur'),
      onClick: (0, _addonActions.action)('onClick'),
      onFocus: (0, _addonActions.action)('onFocus'),
      onRequestClose: (0, _addonActions.action)('onRequestClose')
    };
  };
  
  var withStateManagerProps = function withStateManagerProps() {
    return {
      className: 'some-class',
      passiveModal: (0, _addonKnobs.boolean)('Without footer (passiveModal)', false),
      danger: (0, _addonKnobs.boolean)('Danger mode (danger)', false),
      alert: (0, _addonKnobs.boolean)('Alert mode (alert)', false),
      shouldSubmitOnEnter: (0, _addonKnobs.boolean)('Enter key to submit (shouldSubmitOnEnter)', false),
      hasScrollingContent: (0, _addonKnobs.boolean)('Modal contains scrollable content (hasScrollingContent)', false),
      modalHeading: (0, _addonKnobs.text)('Modal heading (modalHeading)', 'Modal heading'),
      modalLabel: (0, _addonKnobs.text)('Optional label (modalLabel)', 'Label'),
      modalAriaLabel: (0, _addonKnobs.text)('ARIA label, used only if modalLabel not provided (modalAriaLabel)', 'A label to be read by screen readers on the modal root node'),
      primaryButtonText: (0, _addonKnobs.text)('Primary button text (primaryButtonText)', 'Primary Button'),
      secondaryButtonText: (0, _addonKnobs.text)('Secondary button text (secondaryButtonText)', 'Secondary Button'),
      selectorPrimaryFocus: (0, _addonKnobs.text)('Primary focus element selector (selectorPrimaryFocus)', '[data-modal-primary-focus]'),
      size: (0, _addonKnobs.select)('Size (size)', sizes),
      iconDescription: (0, _addonKnobs.text)('Close icon description (iconDescription)', 'Close'),
      onBlur: (0, _addonActions.action)('onBlur'),
      onClick: (0, _addonActions.action)('onClick'),
      onFocus: (0, _addonActions.action)('onFocus'),
      onRequestClose: (0, _addonActions.action)('onRequestClose'),
      onRequestSubmit: (0, _addonActions.action)('onRequestSubmit'),
      onSecondarySubmit: (0, _addonActions.action)('onSecondarySubmit')
    };
  };
  /**
   * Simple state manager for modals.
   */
  
  
  var ModalStateManager = function ModalStateManager(_ref) {
    var LauncherContent = _ref.renderLauncher,
        ModalContent = _ref.children;
  
    var _useState = (0, _react.useState)(false),
        _useState2 = _slicedToArray(_useState, 2),
        open = _useState2[0],
        setOpen = _useState2[1];
  
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !ModalContent || typeof document === 'undefined' ? null : /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(ModalContent, {
      open: open,
      setOpen: setOpen
    }), document.body), LauncherContent && /*#__PURE__*/_react.default.createElement(LauncherContent, {
      open: open,
      setOpen: setOpen
    }));
  };
  
  var _default = {
    title: 'Modal',
    decorators: [_addonKnobs.withKnobs],
    parameters: {
      component: _Modal.default,
      docs: {
        page: _Modal2.default
      }
    }
  };
  exports.default = _default;
  
  var Default = function Default() {
    var _props = props(),
        size = _props.size,
        rest = _objectWithoutProperties(_props, ["size"]);
  
    return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, rest, {
      size: size || undefined
    }), /*#__PURE__*/_react.default.createElement("p", {
      className: "".concat(prefix, "--modal-content__text")
    }, "Please see the \"With State Manager\" storybook example for a demo of this functionality."), /*#__PURE__*/_react.default.createElement("br", null), rest.hasScrollingContent && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("h3", null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' ')));
  };
  
  exports.Default = Default;
  Default.parameters = {
    info: {
      text: "\n        Modals communicate information via a secondary window and allow the user to maintain the context of a particular task.\n        Use the Modal Wrapper component to encapsulate your Modal within a button.\n      "
    }
  };
  
  var WithStateManager = function WithStateManager() {
    var _withStateManagerProp = withStateManagerProps(),
        size = _withStateManagerProp.size,
        rest = _objectWithoutProperties(_withStateManagerProp, ["size"]);
  
    return /*#__PURE__*/_react.default.createElement(ModalStateManager, {
      renderLauncher: function renderLauncher(_ref2) {
        var setOpen = _ref2.setOpen;
        return /*#__PURE__*/_react.default.createElement(_Button.default, {
          onClick: function onClick() {
            return setOpen(true);
          }
        }, "Launch modal");
      }
    }, function (_ref3) {
      var open = _ref3.open,
          setOpen = _ref3.setOpen;
      return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, rest, {
        size: size || undefined,
        open: open,
        onRequestClose: function onRequestClose() {
          return setOpen(false);
        }
      }), rest.hasScrollingContent && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("h3", null, "Lorem ipsum"), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' '), /*#__PURE__*/_react.default.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum.", ' ')));
    });
  };
  
  exports.WithStateManager = WithStateManager;
  
  var TitleOnly = function TitleOnly() {
    var _titleOnlyProps = titleOnlyProps(),
        size = _titleOnlyProps.size,
        rest = _objectWithoutProperties(_titleOnlyProps, ["size"]);
  
    return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, rest, {
      size: size || undefined
    }));
  };
  
  exports.TitleOnly = TitleOnly;
  TitleOnly.storyName = 'Title only';
  TitleOnly.parameters = {
    info: {
      text: "\n      In \"small\" and \"xs\" modals size, the title is allowed to span multiple lines and be used for the main message.\n      It should be less than 3 lines of text. If more room is required then use the standard body copy format.\n    "
    }
  };
  
  var TrapFocus = function TrapFocus() {
    var _props2 = props(),
        size = _props2.size,
        rest = _objectWithoutProperties(_props2, ["size"]);
  
    return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({}, rest, {
      hasForm: true,
      size: size || undefined,
      selectorPrimaryFocus: "#text-input-2"
    }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
      id: "text-input-1",
      labelText: "Text Input 1",
      placeholder: "Enter text...",
      style: {
        marginBottom: '1rem'
      }
    }), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
      id: "text-input-2",
      labelText: "Text Input 2",
      placeholder: "Enter text..."
    }));
  };
  
  exports.TrapFocus = TrapFocus;
  TrapFocus.parameters = {
    info: {
      text: "\n        Specify a selector for the primary element to focus when opening a modal.\n      "
    }
  };