@elliemae/ds-modal-slide 2.3.0-alpha.9 → 2.3.0-next.3

package/cjs/DSModalSlide.js

@@ -0,0 +1,176 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var React = require('react');
+var reactDesc = require('react-desc');
+var ReactDOM = require('react-dom');
+var dsSystem = require('@elliemae/ds-system');
+var dsGrid = require('@elliemae/ds-grid');
+var DSSeparator = require('@elliemae/ds-separator');
+var blocks = require('./components/blocks.js');
+var Header = require('./components/Header.js');
+var Footer = require('./components/Footer.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+
+var _DSSeparator, _DSSeparator2;
+
+const DSModalSlide = _ref => {
+  let {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false
+  } = _ref;
+  const [isMoving, setMoving] = React.useState(false);
+  const [show, setShow] = React.useState(isOpen);
+  const [width, setWidth] = React.useState(50);
+  const theme = dsSystem.useTheme();
+  const contentRows = [...(header ? [theme.space.m] : []), '0px', 'auto', '0px', ...(footer ? [theme.space.m] : [])];
+  const updateShow = React.useCallback(() => {
+    if (fullWidth) setWidth(100);else setWidth(50);
+
+    if (isOpen !== show) {
+      setMoving(true);
+
+      if (isOpen) {
+        setShow(isOpen);
+      }
+    }
+  }, [isOpen, fullWidth, isMoving]);
+  React.useEffect(updateShow, [isOpen, fullWidth]);
+  if (!show) return null;
+  const container = getContainer();
+  if (!container) return null;
+
+  const handleAnimationEnd = () => {
+    setMoving(false);
+    if (!isOpen) setShow(isOpen);
+  };
+
+  let {
+    height
+  } = container.getBoundingClientRect();
+
+  if (overrideHeight && container.scrollHeight > height) {
+    height = container.scrollHeight;
+  }
+
+  if (!container.style.position) {
+    container.style.position = 'relative';
+  }
+
+  return /*#__PURE__*/ReactDOM__default["default"].createPortal( /*#__PURE__*/_jsx__default["default"](blocks.Wrapper, {
+    classProps: {
+      show: isOpen,
+      centered
+    },
+    style: {
+      '--height': height,
+      '--fade-in': fadeIn,
+      '--fade-out': fadeOut,
+      '--width': width
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Overlay, {
+    classProps: {
+      show: isOpen
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Content, {
+    onAnimationEnd: handleAnimationEnd,
+    classProps: {
+      show: isOpen
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    style: {
+      height: '100%',
+      width: '100%',
+      maxHeight: '100%',
+      overflow: 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+      'backface-visibility': 'hidden',
+      '-webkit-transform-style': 'preserve-3d'
+    },
+    rows: contentRows,
+    "data-testid": "ds-modal-slide"
+  }, void 0, header && /*#__PURE__*/React__default["default"].cloneElement(header, {
+    fullWidth
+  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+    position: "initial",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
+    style: {
+      overflow: 'auto'
+    }
+  }, void 0, /*#__PURE__*/_jsx__default["default"](blocks.ActualContent, {}, void 0, children))), footer && (_DSSeparator2 || (_DSSeparator2 = /*#__PURE__*/_jsx__default["default"](DSSeparator__default["default"], {
+    position: "initial",
+    type: "non-form"
+  }))), footer)))), container);
+};
+
+const props = {
+  /**
+   * If the modal slide is centered or not
+   */
+  centered: reactDesc.PropTypes.bool.description('If the modal slide is centered or not'),
+
+  /**
+   * If the modal slide is visible or not
+   */
+  isOpen: reactDesc.PropTypes.bool.description('If the modal slide is visible or not'),
+
+  /**
+   * Main content of the modal
+   */
+  children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.element, reactDesc.PropTypes.string, reactDesc.PropTypes.any]).isRequired.description('Main content of the modal'),
+
+  /**
+   * If the modal slide takes the full width or not
+   */
+  fullWidth: reactDesc.PropTypes.bool.description('If the modal slide takes the full width or not'),
+
+  /**
+   * If the modal slide has a header, only available for full width option
+   */
+  header: reactDesc.PropTypes.element.description('If the modal slide has a header, only available for full width option'),
+
+  /**
+   * Ratio of fade out
+   */
+  fadeOut: reactDesc.PropTypes.number.description('Ratio of fade out'),
+
+  /**
+   * Ratio of fade in
+   */
+  fadeIn: reactDesc.PropTypes.number.description('Ratio of fade in'),
+
+  /**
+   * Override the panel height to scroll height of the container
+   */
+  overrideHeight: reactDesc.PropTypes.bool.description('Override the panel height to scroll height of the container')
+};
+const DSModalSlideWithSchema = reactDesc.describe(DSModalSlide);
+DSModalSlideWithSchema.propTypes = props;
+
+exports.ModalHeader = Header["default"];
+exports.ModalFooter = Footer["default"];
+exports.DSModalSlide = DSModalSlide;
+exports.DSModalSlideWithSchema = DSModalSlideWithSchema;
+exports["default"] = DSModalSlide;

package/cjs/components/Footer.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
+var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('react');
+var reactDesc = require('react-desc');
+var DSButton = require('@elliemae/ds-button');
+var blocks = require('./blocks.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
+    },
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: /*#__PURE__*/_jsx__default["default"](blocks.FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsxRuntime.jsx(DSButton__default["default"], _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
+
+const props = {
+  /**
+   * Confirm Label
+   */
+  confirmLabel: reactDesc.PropTypes.string.description('Confirm Label'),
+
+  /**
+   * Reject Label
+   */
+  rejectLabel: reactDesc.PropTypes.string.description('Reject Label'),
+
+  /**
+   * Callback
+   */
+  onConfirm: reactDesc.PropTypes.func.description('Callback'),
+
+  /**
+   * Callback
+   */
+  onReject: reactDesc.PropTypes.func.description('Callback'),
+
+  /**
+   * Extra DSButton props for confirm btn.
+   */
+  confirmProps: reactDesc.PropTypes.shape({
+    disabled: reactDesc.PropTypes.bool
+  }).description('Extra DSButton props for confirm btn.'),
+
+  /**
+   * Extra DSButton props for reject btn.
+   */
+  rejectProps: reactDesc.PropTypes.shape({
+    disabled: reactDesc.PropTypes.bool
+  }).description('Extra DSButton props for reject btn.')
+};
+const DSModalSlideFooterWithSchema = reactDesc.describe(ModalFooter);
+DSModalSlideFooterWithSchema.propTypes = props;
+
+exports.DSModalSlideFooterWithSchema = DSModalSlideFooterWithSchema;
+exports["default"] = ModalFooter;

package/cjs/components/Header.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _jsx = require('@babel/runtime/helpers/jsx');
+require('react');
+var reactDesc = require('react-desc');
+var styled = require('styled-components');
+var DSSeparator = require('@elliemae/ds-separator');
+var dsIcons = require('@elliemae/ds-icons');
+var DSButton = require('@elliemae/ds-button');
+var blocks = require('./blocks.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+var DSSeparator__default = /*#__PURE__*/_interopDefaultLegacy(DSSeparator);
+var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
+
+var _StyledSeparator, _Close;
+
+const ModalHeader = _ref => {
+  let {
+    title: headerTitle = '',
+    onClose = () => null,
+    toolbar = null
+  } = _ref;
+  return /*#__PURE__*/_jsx__default["default"](HeaderWrapper, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.HeaderLeftSide, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Header, {}, void 0, /*#__PURE__*/_jsx__default["default"](blocks.Title, {}, void 0, headerTitle))), toolbar, toolbar && (_StyledSeparator || (_StyledSeparator = /*#__PURE__*/_jsx__default["default"](StyledSeparator, {
+    position: "initial",
+    margin: "none",
+    orientation: "vertical",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx__default["default"](StyledCloseButton, {
+    "data-testid": "modal-slider-header-close",
+    "aria-label": "Close modal slide",
+    buttonType: "text",
+    icon: _Close || (_Close = /*#__PURE__*/_jsx__default["default"](dsIcons.Close, {
+      "aria-label": "Close modal slide",
+      size: "s"
+    })),
+    onClick: onClose
+  }));
+};
+
+const HeaderWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
+  componentId: "sc-oxqqo8-0"
+})(["display:flex;justify-content:space-between;width:100%;align-items:center;"]);
+const StyledSeparator = /*#__PURE__*/styled__default["default"](DSSeparator__default["default"]).withConfig({
+  componentId: "sc-oxqqo8-1"
+})(["padding:", " 0;"], props => props.theme.space.xs);
+const StyledCloseButton = /*#__PURE__*/styled__default["default"](DSButton__default["default"]).withConfig({
+  componentId: "sc-oxqqo8-2"
+})(["margin:", ";"], props => props.theme.space.xs);
+const props = {
+  /** on modal close callback */
+  onClose: reactDesc.PropTypes.func.description('on modal close callback'),
+
+  /** modal toolbar component */
+  toolbar: reactDesc.PropTypes.node.description('modal toolbar comoponent'),
+
+  /** modal title */
+  title: reactDesc.PropTypes.string.description('modal title')
+};
+const DSModalSlideHeaderWithSchema = reactDesc.describe(ModalHeader);
+DSModalSlideHeaderWithSchema.propTypes = props;
+
+exports.DSModalSlideHeaderWithSchema = DSModalSlideHeaderWithSchema;
+exports["default"] = ModalHeader;

package/cjs/components/blocks.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dsClassnames = require('@elliemae/ds-classnames');
+
+const blockName = 'modal-slide';
+const Wrapper = dsClassnames.aggregatedClasses('div')(blockName, 'wrapper', _ref => {
+  let {
+    show,
+    centered
+  } = _ref;
+  return {
+    showing: show,
+    disappearing: !show,
+    centered
+  };
+});
+const Overlay = dsClassnames.aggregatedClasses('div')(blockName, 'overlay', _ref2 => {
+  let {
+    show
+  } = _ref2;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Content = dsClassnames.aggregatedClasses('div')(blockName, 'content', _ref3 => {
+  let {
+    show
+  } = _ref3;
+  return {
+    showing: show,
+    disappearing: !show
+  };
+});
+const Title = dsClassnames.aggregatedClasses('div')(blockName, 'title', () => ({}));
+const BreadcrumTitle = dsClassnames.aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));
+const HeaderLeftSide = dsClassnames.aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));
+const ActualContent = dsClassnames.aggregatedClasses('div')(blockName, 'actual-content', () => ({}));
+const Header = dsClassnames.aggregatedClasses('div')(blockName, 'header', () => ({}));
+const Footer = dsClassnames.aggregatedClasses('div')(blockName, 'footer', () => ({}));
+const FooterWrapper = dsClassnames.aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));
+
+exports.ActualContent = ActualContent;
+exports.BreadcrumTitle = BreadcrumTitle;
+exports.Content = Content;
+exports.Footer = Footer;
+exports.FooterWrapper = FooterWrapper;
+exports.Header = Header;
+exports.HeaderLeftSide = HeaderLeftSide;
+exports.Overlay = Overlay;
+exports.Title = Title;
+exports.Wrapper = Wrapper;

package/cjs/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var DSModalSlide = require('./DSModalSlide.js');
+var Header = require('./components/Header.js');
+var Footer = require('./components/Footer.js');
+
+
+
+exports.DSModalSlide = DSModalSlide.DSModalSlide;
+exports.DSModalSlideWithSchema = DSModalSlide.DSModalSlideWithSchema;
+exports["default"] = DSModalSlide.DSModalSlide;
+exports.DSModalSlideHeaderWithSchema = Header.DSModalSlideHeaderWithSchema;
+exports.ModalHeader = Header["default"];
+exports.DSModalSlideFooterWithSchema = Footer.DSModalSlideFooterWithSchema;
+exports.ModalFooter = Footer["default"];

package/esm/DSModalSlide.js

@@ -0,0 +1,161 @@
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import React, { useState, useCallback, useEffect } from 'react';
+import { PropTypes, describe } from 'react-desc';
+import ReactDOM from 'react-dom';
+import { useTheme } from '@elliemae/ds-system';
+import { Grid } from '@elliemae/ds-grid';
+import DSSeparator from '@elliemae/ds-separator';
+import { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';
+export { default as ModalHeader } from './components/Header.js';
+export { default as ModalFooter } from './components/Footer.js';
+
+var _DSSeparator, _DSSeparator2;
+
+const DSModalSlide = _ref => {
+  let {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false
+  } = _ref;
+  const [isMoving, setMoving] = useState(false);
+  const [show, setShow] = useState(isOpen);
+  const [width, setWidth] = useState(50);
+  const theme = useTheme();
+  const contentRows = [...(header ? [theme.space.m] : []), '0px', 'auto', '0px', ...(footer ? [theme.space.m] : [])];
+  const updateShow = useCallback(() => {
+    if (fullWidth) setWidth(100);else setWidth(50);
+
+    if (isOpen !== show) {
+      setMoving(true);
+
+      if (isOpen) {
+        setShow(isOpen);
+      }
+    }
+  }, [isOpen, fullWidth, isMoving]);
+  useEffect(updateShow, [isOpen, fullWidth]);
+  if (!show) return null;
+  const container = getContainer();
+  if (!container) return null;
+
+  const handleAnimationEnd = () => {
+    setMoving(false);
+    if (!isOpen) setShow(isOpen);
+  };
+
+  let {
+    height
+  } = container.getBoundingClientRect();
+
+  if (overrideHeight && container.scrollHeight > height) {
+    height = container.scrollHeight;
+  }
+
+  if (!container.style.position) {
+    container.style.position = 'relative';
+  }
+
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/_jsx(Wrapper, {
+    classProps: {
+      show: isOpen,
+      centered
+    },
+    style: {
+      '--height': height,
+      '--fade-in': fadeIn,
+      '--fade-out': fadeOut,
+      '--width': width
+    }
+  }, void 0, /*#__PURE__*/_jsx(Overlay, {
+    classProps: {
+      show: isOpen
+    }
+  }, void 0, /*#__PURE__*/_jsx(Content, {
+    onAnimationEnd: handleAnimationEnd,
+    classProps: {
+      show: isOpen
+    }
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    style: {
+      height: '100%',
+      width: '100%',
+      maxHeight: '100%',
+      overflow: 'hidden',
+      '-webkit-backface-visibility': 'hidden',
+      'backface-visibility': 'hidden',
+      '-webkit-transform-style': 'preserve-3d'
+    },
+    rows: contentRows,
+    "data-testid": "ds-modal-slide"
+  }, void 0, header && /*#__PURE__*/React.cloneElement(header, {
+    fullWidth
+  }), header && (_DSSeparator || (_DSSeparator = /*#__PURE__*/_jsx(DSSeparator, {
+    position: "initial",
+    type: "non-form"
+  }))), /*#__PURE__*/_jsx(Grid, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, void 0, /*#__PURE__*/_jsx(Grid, {
+    style: {
+      overflow: 'auto'
+    }
+  }, void 0, /*#__PURE__*/_jsx(ActualContent, {}, void 0, children))), footer && (_DSSeparator2 || (_DSSeparator2 = /*#__PURE__*/_jsx(DSSeparator, {
+    position: "initial",
+    type: "non-form"
+  }))), footer)))), container);
+};
+
+const props = {
+  /**
+   * If the modal slide is centered or not
+   */
+  centered: PropTypes.bool.description('If the modal slide is centered or not'),
+
+  /**
+   * If the modal slide is visible or not
+   */
+  isOpen: PropTypes.bool.description('If the modal slide is visible or not'),
+
+  /**
+   * Main content of the modal
+   */
+  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description('Main content of the modal'),
+
+  /**
+   * If the modal slide takes the full width or not
+   */
+  fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),
+
+  /**
+   * If the modal slide has a header, only available for full width option
+   */
+  header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),
+
+  /**
+   * Ratio of fade out
+   */
+  fadeOut: PropTypes.number.description('Ratio of fade out'),
+
+  /**
+   * Ratio of fade in
+   */
+  fadeIn: PropTypes.number.description('Ratio of fade in'),
+
+  /**
+   * Override the panel height to scroll height of the container
+   */
+  overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container')
+};
+const DSModalSlideWithSchema = describe(DSModalSlide);
+DSModalSlideWithSchema.propTypes = props;
+
+export { DSModalSlide, DSModalSlideWithSchema, DSModalSlide as default };

package/esm/components/Footer.js

@@ -0,0 +1,90 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'react';
+import { PropTypes, describe } from 'react-desc';
+import DSButton from '@elliemae/ds-button';
+import { FooterWrapper } from './blocks.js';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+const ModalFooter = _ref => {
+  let {
+    confirmLabel = 'Confirm',
+    rejectLabel = 'Cancel',
+    onConfirm,
+    onReject,
+    confirmProps = {
+      disabled: false
+    },
+    rejectProps = {
+      disabled: false
+    }
+  } = _ref;
+  return /*#__PURE__*/jsx(Fragment, {
+    children: /*#__PURE__*/_jsx(FooterWrapper, {}, void 0, !!onReject && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "secondary",
+      className: "action-reject",
+      containerProps: {
+        'data-testid': 'modal-footer-reject-btn'
+      },
+      labelText: rejectLabel,
+      onClick: onReject
+    }, rejectProps)), !!onConfirm && /*#__PURE__*/jsx(DSButton, _objectSpread({
+      buttonType: "primary",
+      className: "action-confirm",
+      containerProps: {
+        'data-testid': 'modal-footer-confirm-btn'
+      },
+      labelText: confirmLabel,
+      onClick: onConfirm
+    }, confirmProps)))
+  });
+};
+
+const props = {
+  /**
+   * Confirm Label
+   */
+  confirmLabel: PropTypes.string.description('Confirm Label'),
+
+  /**
+   * Reject Label
+   */
+  rejectLabel: PropTypes.string.description('Reject Label'),
+
+  /**
+   * Callback
+   */
+  onConfirm: PropTypes.func.description('Callback'),
+
+  /**
+   * Callback
+   */
+  onReject: PropTypes.func.description('Callback'),
+
+  /**
+   * Extra DSButton props for confirm btn.
+   */
+  confirmProps: PropTypes.shape({
+    disabled: PropTypes.bool
+  }).description('Extra DSButton props for confirm btn.'),
+
+  /**
+   * Extra DSButton props for reject btn.
+   */
+  rejectProps: PropTypes.shape({
+    disabled: PropTypes.bool
+  }).description('Extra DSButton props for reject btn.')
+};
+const DSModalSlideFooterWithSchema = describe(ModalFooter);
+DSModalSlideFooterWithSchema.propTypes = props;
+
+export { DSModalSlideFooterWithSchema, ModalFooter as default };