@elliemae/ds-legacy-modal-slide 1.0.0-rc.1

package/dist/esm/DSModalSlide.js

@@ -0,0 +1,199 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useState, useEffect, useCallback, useMemo } from "react";
+import { PropTypes, describe, useGetGlobalAttributes } from "@elliemae/ds-legacy-props-helpers";
+import { debounce } from "lodash";
+import ReactDOM from "react-dom";
+import { useTheme, styled } from "@elliemae/ds-legacy-system";
+import { Grid } from "@elliemae/ds-legacy-grid";
+import DSSeparator from "@elliemae/ds-legacy-separator";
+import { Wrapper, Overlay, Content, ActualContent } from "./components/blocks.js";
+import ModalHeader from "./components/Header.js";
+import ModalFooter from "./components/Footer.js";
+const StyledWrapper = styled(Grid)`
+  overflow: auto;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.brand["600"]};
+    outline-offset: -1px;
+  }
+`;
+const ModalSlideAnimationFix = styled.div`
+  .em-ds-modal-slide__overlay--disappearing,
+  .em-ds-modal-slide__content--disappearing {
+    animation-fill-mode: forwards;
+  }
+`;
+const DSModalSlide = (props2) => {
+  const {
+    isOpen = false,
+    children,
+    getContainer,
+    centered = false,
+    fullWidth = false,
+    header = null,
+    footer = null,
+    fadeOut = 1500,
+    fadeIn = 1500,
+    overrideHeight = false,
+    innerRef = null
+  } = props2;
+  const [isMoving, setMoving] = useState(false);
+  const [show, setShow] = useState(isOpen);
+  const [width, setWidth] = useState(50);
+  const [height, setHeight] = useState("100%");
+  const theme = useTheme();
+  const contentRows = [...header ? ["auto", "1px"] : [], "1fr", ...footer ? ["1px", theme.space.m] : []];
+  const globalAttrs = useGetGlobalAttributes(props2);
+  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]);
+  const container = getContainer();
+  const handleHeight = useCallback(() => {
+    const newHeight = overrideHeight && container.scrollHeight > container.getBoundingClientRect().height ? container.scrollHeight : container.getBoundingClientRect().height;
+    setHeight(newHeight);
+  }, [container, overrideHeight]);
+  const onChangeParent = useMemo(() => debounce(handleHeight, 300, { leading: true }), [handleHeight]);
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => onChangeParent());
+    if (container) {
+      resizeObserver.observe(container);
+      if (!container.style.position) {
+        container.style.position = "relative";
+      }
+      onChangeParent();
+    }
+    return () => {
+      if (container)
+        resizeObserver.unobserve(container);
+    };
+  }, [container, onChangeParent]);
+  if (!show)
+    return null;
+  if (!container)
+    return null;
+  const handleAnimationEnd = () => {
+    setMoving(false);
+    if (!isOpen)
+      setShow(isOpen);
+  };
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(ModalSlideAnimationFix, { children: /* @__PURE__ */ jsx(
+      Wrapper,
+      {
+        ...globalAttrs,
+        classProps: {
+          show: isOpen,
+          centered
+        },
+        style: {
+          "--height": height,
+          "--fade-in": fadeIn,
+          "--fade-out": fadeOut,
+          "--width": width,
+          left: 0
+        },
+        children: /* @__PURE__ */ jsx(
+          Overlay,
+          {
+            classProps: {
+              show: isOpen
+            },
+            children: /* @__PURE__ */ jsx(
+              Content,
+              {
+                onAnimationEnd: handleAnimationEnd,
+                classProps: {
+                  show: isOpen
+                },
+                children: /* @__PURE__ */ jsxs(
+                  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",
+                    children: [
+                      header && React2.cloneElement(header, { fullWidth }),
+                      header && /* @__PURE__ */ jsx(DSSeparator, { position: "initial", type: "non-form" }),
+                      /* @__PURE__ */ jsx(Grid, { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(StyledWrapper, { ref: innerRef, tabIndex: 0, role: "contentinfo", children: /* @__PURE__ */ jsx(ActualContent, { children }) }) }),
+                      footer && /* @__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")
+};
+DSModalSlide.propTypes = props;
+DSModalSlide.displayName = "DSModalSlide";
+const DSModalSlideWithSchema = describe(DSModalSlide);
+DSModalSlideWithSchema.propTypes = props;
+var DSModalSlide_default = DSModalSlide;
+export {
+  DSModalSlide,
+  DSModalSlideWithSchema,
+  ModalFooter,
+  ModalHeader,
+  DSModalSlide_default as default
+};
+//# sourceMappingURL=DSModalSlide.js.map

package/dist/esm/DSModalSlide.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSModalSlide.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-statements */\n/* eslint-disable max-lines */\nimport React, { useState, useEffect, useCallback, useMemo } from 'react';\nimport { PropTypes, describe, useGetGlobalAttributes } from '@elliemae/ds-legacy-props-helpers';\nimport { debounce } from 'lodash';\nimport ReactDOM from 'react-dom';\nimport { useTheme, styled } from '@elliemae/ds-legacy-system';\nimport { Grid } from '@elliemae/ds-legacy-grid';\nimport DSSeparator from '@elliemae/ds-legacy-separator';\nimport { Wrapper, Overlay, Content, ActualContent } from './components/blocks.js';\nimport ModalHeader from './components/Header.js';\nimport ModalFooter from './components/Footer.js';\n\nconst StyledWrapper = styled(Grid)`\n  overflow: auto;\n  &:focus,\n  &:focus-visible {\n    outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n    outline-offset: -1px;\n  }\n`;\n// js engine and css engine can't be guaranteed to be in sync due to how they run on different threads in the browsers\n//  this means that in some edge-cases react may have \"out-dated\" information like \"isMoving\" in this case\n//  this can cause some animation frame to have the animation \"after\" end but before react has updated the state\n//  if the css animation is not configured to stay in the end state,\n//    in those edge-cases,\n//    the animation will \"jump\" back to the start and cause a flicker\n//  this is the fix for that, it's an hack because the component is still css classname based\n//  when we re-do the modal slide, we should integrate this as the styled component css itself instead of this extra wrapper\nconst ModalSlideAnimationFix = styled.div`\n  .em-ds-modal-slide__overlay--disappearing,\n  .em-ds-modal-slide__content--disappearing {\n    animation-fill-mode: forwards;\n  }\n`;\n// eslint-disable-next-line complexity\nconst DSModalSlide = (props) => {\n  const {\n    isOpen = false,\n    children,\n    getContainer,\n    centered = false,\n    fullWidth = false,\n    header = null,\n    footer = null,\n    fadeOut = 1500,\n    fadeIn = 1500,\n    overrideHeight = false,\n    innerRef = null,\n  } = props;\n  const [isMoving, setMoving] = useState(false);\n  const [show, setShow] = useState(isOpen);\n  const [width, setWidth] = useState(50);\n  const [height, setHeight] = useState('100%');\n  const theme = useTheme();\n  const contentRows = [...(header ? ['auto', '1px'] : []), '1fr', ...(footer ? ['1px', theme.space.m] : [])];\n  const globalAttrs = useGetGlobalAttributes(props);\n  const updateShow = useCallback(() => {\n    if (fullWidth) setWidth(100);\n    else setWidth(50);\n    if (isOpen !== show) {\n      setMoving(true);\n      if (isOpen) {\n        setShow(isOpen);\n      }\n    }\n  }, [isOpen, fullWidth, isMoving]);\n\n  useEffect(updateShow, [isOpen, fullWidth]);\n\n  const container = getContainer();\n\n  const handleHeight = useCallback(() => {\n    const newHeight =\n      overrideHeight && container.scrollHeight > container.getBoundingClientRect().height\n        ? container.scrollHeight\n        : container.getBoundingClientRect().height;\n    setHeight(newHeight);\n  }, [container, overrideHeight]);\n\n  const onChangeParent = useMemo(() => debounce(handleHeight, 300, { leading: true }), [handleHeight]);\n\n  useEffect(() => {\n    const resizeObserver = new ResizeObserver(() => onChangeParent());\n    if (container) {\n      resizeObserver.observe(container);\n      if (!container.style.position) {\n        container.style.position = 'relative';\n      }\n      onChangeParent();\n    }\n    return () => {\n      if (container) resizeObserver.unobserve(container);\n    };\n  }, [container, onChangeParent]);\n\n  if (!show) return null;\n  if (!container) return null;\n\n  const handleAnimationEnd = () => {\n    setMoving(false);\n    if (!isOpen) setShow(isOpen);\n  };\n\n  return ReactDOM.createPortal(\n    <ModalSlideAnimationFix>\n      <Wrapper\n        {...globalAttrs}\n        classProps={{\n          show: isOpen,\n          centered,\n        }}\n        style={{\n          '--height': height,\n          '--fade-in': fadeIn,\n          '--fade-out': fadeOut,\n          '--width': width,\n          left: 0,\n        }}\n      >\n        <Overlay\n          classProps={{\n            show: isOpen,\n          }}\n        >\n          <Content\n            onAnimationEnd={handleAnimationEnd}\n            classProps={{\n              show: isOpen,\n            }}\n          >\n            <Grid\n              style={{\n                height: '100%',\n                width: '100%',\n                maxHeight: '100%',\n                overflow: 'hidden',\n                '-webkit-backface-visibility': 'hidden',\n                'backface-visibility': 'hidden',\n                '-webkit-transform-style': 'preserve-3d',\n              }}\n              rows={contentRows}\n              data-testid=\"ds-modal-slide\"\n            >\n              {header && React.cloneElement(header, { fullWidth })}\n              {header && <DSSeparator position=\"initial\" type=\"non-form\" />}\n              <Grid style={{ overflow: 'hidden' }}>\n                <StyledWrapper ref={innerRef} tabIndex={0} role=\"contentinfo\">\n                  <ActualContent>{children}</ActualContent>\n                </StyledWrapper>\n              </Grid>\n              {footer && <DSSeparator position=\"initial\" type=\"non-form\" />}\n              {footer}\n            </Grid>\n          </Content>\n        </Overlay>\n      </Wrapper>\n    </ModalSlideAnimationFix>,\n    container,\n  );\n};\n\nconst props = {\n  /**\n   * If the modal slide is centered or not\n   */\n  centered: PropTypes.bool.description('If the modal slide is centered or not'),\n  /**\n   * If the modal slide is visible or not\n   */\n  isOpen: PropTypes.bool.description('If the modal slide is visible or not'),\n  /**\n   * Main content of the modal\n   */\n  children: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.any]).isRequired.description(\n    'Main content of the modal',\n  ),\n  /**\n   * If the modal slide takes the full width or not\n   */\n  fullWidth: PropTypes.bool.description('If the modal slide takes the full width or not'),\n  /**\n   * If the modal slide has a header, only available for full width option\n   */\n  header: PropTypes.element.description('If the modal slide has a header, only available for full width option'),\n  /**\n   * Ratio of fade out\n   */\n  fadeOut: PropTypes.number.description('Ratio of fade out'),\n  /**\n   * Ratio of fade in\n   */\n  fadeIn: PropTypes.number.description('Ratio of fade in'),\n  /**\n   * Override the panel height to scroll height of the container\n   */\n  overrideHeight: PropTypes.bool.description('Override the panel height to scroll height of the container'),\n};\n\nDSModalSlide.propTypes = props;\nDSModalSlide.displayName = 'DSModalSlide';\nconst DSModalSlideWithSchema = describe(DSModalSlide);\nDSModalSlideWithSchema.propTypes = props;\n\nexport { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };\n\nexport default DSModalSlide;\n"],
+  "mappings": "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",
+  "names": ["React", "props"]
+}

package/dist/esm/components/Footer.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import { DSButtonV2 } from "@elliemae/ds-legacy-button-v2";
+import { FooterWrapper } from "./blocks.js";
+const ModalFooter = ({
+  confirmLabel = "Confirm",
+  rejectLabel = "Cancel",
+  onConfirm,
+  onReject,
+  confirmProps = {
+    disabled: false
+  },
+  rejectProps = {
+    disabled: false
+  }
+}) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(FooterWrapper, { children: [
+  !!onReject && /* @__PURE__ */ jsx(
+    DSButtonV2,
+    {
+      buttonType: "outline",
+      className: "action-reject",
+      "data-testid": "modal-footer-reject-btn",
+      onClick: onReject,
+      ...rejectProps,
+      ml: "xs",
+      children: rejectLabel
+    }
+  ),
+  !!onConfirm && /* @__PURE__ */ jsx(
+    DSButtonV2,
+    {
+      buttonType: "filled",
+      className: "action-confirm",
+      "data-testid": "modal-footer-confirm-btn",
+      onClick: onConfirm,
+      ...confirmProps,
+      ml: "xs",
+      children: confirmLabel
+    }
+  )
+] }) });
+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.")
+};
+ModalFooter.propTypes = props;
+ModalFooter.displayName = "ModalFooter";
+const DSModalSlideFooterWithSchema = describe(ModalFooter);
+DSModalSlideFooterWithSchema.propTypes = props;
+var Footer_default = ModalFooter;
+export {
+  DSModalSlideFooterWithSchema,
+  Footer_default as default
+};
+//# sourceMappingURL=Footer.js.map

package/dist/esm/components/Footer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Footer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { FooterWrapper } from './blocks.js';\n\nconst ModalFooter = ({\n  confirmLabel = 'Confirm',\n  rejectLabel = 'Cancel',\n  onConfirm,\n  onReject,\n  confirmProps = {\n    disabled: false,\n  },\n  rejectProps = {\n    disabled: false,\n  },\n}) => (\n  <>\n    <FooterWrapper>\n      {!!onReject && (\n        <DSButtonV2\n          buttonType=\"outline\"\n          className=\"action-reject\"\n          data-testid=\"modal-footer-reject-btn\"\n          onClick={onReject}\n          {...rejectProps}\n          ml=\"xs\"\n        >\n          {rejectLabel}\n        </DSButtonV2>\n      )}\n      {!!onConfirm && (\n        <DSButtonV2\n          buttonType=\"filled\"\n          className=\"action-confirm\"\n          data-testid=\"modal-footer-confirm-btn\"\n          onClick={onConfirm}\n          {...confirmProps}\n          ml=\"xs\"\n        >\n          {confirmLabel}\n        </DSButtonV2>\n      )}\n    </FooterWrapper>\n  </>\n);\n\nconst props = {\n  /**\n   * Confirm Label\n   */\n  confirmLabel: PropTypes.string.description('Confirm Label'),\n  /**\n   * Reject Label\n   */\n  rejectLabel: PropTypes.string.description('Reject Label'),\n  /**\n   * Callback\n   */\n  onConfirm: PropTypes.func.description('Callback'),\n  /**\n   * Callback\n   */\n  onReject: PropTypes.func.description('Callback'),\n  /**\n   * Extra DSButton props for confirm btn.\n   */\n  confirmProps: PropTypes.shape({\n    disabled: PropTypes.bool,\n  }).description('Extra DSButton props for confirm btn.'),\n  /**\n   * Extra DSButton props for reject btn.\n   */\n  rejectProps: PropTypes.shape({\n    disabled: PropTypes.bool,\n  }).description('Extra DSButton props for reject btn.'),\n};\n\nModalFooter.propTypes = props;\nModalFooter.displayName = 'ModalFooter';\nconst DSModalSlideFooterWithSchema = describe(ModalFooter);\nDSModalSlideFooterWithSchema.propTypes = props;\n\nexport { DSModalSlideFooterWithSchema };\n\nexport default ModalFooter;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACiBrB,mBAGM,KAFJ,YADF;AAhBF,SAAS,WAAW,gBAAgB;AACpC,SAAS,kBAAkB;AAC3B,SAAS,qBAAqB;AAE9B,MAAM,cAAc,CAAC;AAAA,EACnB,eAAe;AAAA,EACf,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,eAAe;AAAA,IACb,UAAU;AAAA,EACZ;AAAA,EACA,cAAc;AAAA,IACZ,UAAU;AAAA,EACZ;AACF,MACE,gCACE,+BAAC,iBACE;AAAA,GAAC,CAAC,YACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAS;AAAA,MACR,GAAG;AAAA,MACJ,IAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAAA,EAED,CAAC,CAAC,aACD;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAY;AAAA,MACZ,SAAS;AAAA,MACR,GAAG;AAAA,MACJ,IAAG;AAAA,MAEF;AAAA;AAAA,EACH;AAAA,GAEJ,GACF;AAGF,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,EAIZ,cAAc,UAAU,OAAO,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI1D,aAAa,UAAU,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIxD,WAAW,UAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,UAAU,UAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc,UAAU,MAAM;AAAA,IAC5B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAItD,aAAa,UAAU,MAAM;AAAA,IAC3B,UAAU,UAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AACvD;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
+  "names": []
+}

package/dist/esm/components/Header.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import { styled } from "@elliemae/ds-legacy-system";
+import DSSeparator from "@elliemae/ds-legacy-separator";
+import { Close } from "@elliemae/ds-legacy-icons";
+import { DSButtonV2 } from "@elliemae/ds-legacy-button-v2";
+import { Header, HeaderLeftSide, Title } from "./blocks.js";
+const ModalHeader = ({ innerRef = null, title: headerTitle = "", onClose = () => null, toolbar = null }) => /* @__PURE__ */ jsxs(HeaderWrapper, { children: [
+  /* @__PURE__ */ jsx(HeaderLeftSide, { children: /* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(Title, { children: headerTitle }) }) }),
+  toolbar,
+  toolbar && /* @__PURE__ */ jsx(StyledSeparator, { position: "initial", margin: "none", orientation: "vertical", type: "non-form" }),
+  /* @__PURE__ */ jsx(
+    StyledCloseButton,
+    {
+      "data-testid": "modal-slider-header-close",
+      "aria-label": "Close modal slide",
+      buttonType: "icon",
+      onClick: onClose,
+      innerRef,
+      children: /* @__PURE__ */ jsx(Close, { "aria-label": "Close modal slide", size: "s" })
+    }
+  )
+] });
+const HeaderWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  height: 48px;
+  overflow: hidden;
+`;
+const StyledSeparator = styled(DSSeparator)`
+  padding: ${(props2) => props2.theme.space.xs} 0;
+`;
+const StyledCloseButton = styled(DSButtonV2)`
+  margin: ${(props2) => props2.theme.space.xs};
+`;
+const props = {
+  /** on modal close callback */
+  onClose: PropTypes.func.description("on modal close callback"),
+  /** modal toolbar component */
+  toolbar: PropTypes.node.description("modal toolbar comoponent"),
+  /** modal title */
+  title: PropTypes.string.description("modal title"),
+  innerRef: PropTypes.func.description("button close ref ")
+};
+ModalHeader.propTypes = props;
+ModalHeader.displayName = "ModalHeader";
+const DSModalSlideHeaderWithSchema = describe(ModalHeader);
+DSModalSlideHeaderWithSchema.propTypes = props;
+var Header_default = ModalHeader;
+export {
+  DSModalSlideHeaderWithSchema,
+  Header_default as default
+};
+//# sourceMappingURL=Header.js.map

package/dist/esm/components/Header.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/Header.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport DSSeparator from '@elliemae/ds-legacy-separator';\nimport { Close } from '@elliemae/ds-legacy-icons';\nimport { DSButtonV2 } from '@elliemae/ds-legacy-button-v2';\nimport { Header, HeaderLeftSide, Title } from './blocks.js';\n\nconst ModalHeader = ({ innerRef = null, title: headerTitle = '', onClose = () => null, toolbar = null }) => (\n  <HeaderWrapper>\n    <HeaderLeftSide>\n      <Header>\n        <Title>{headerTitle}</Title>\n      </Header>\n    </HeaderLeftSide>\n    {toolbar}\n    {toolbar && <StyledSeparator position=\"initial\" margin=\"none\" orientation=\"vertical\" type=\"non-form\" />}\n    <StyledCloseButton\n      data-testid=\"modal-slider-header-close\"\n      aria-label=\"Close modal slide\"\n      buttonType=\"icon\"\n      onClick={onClose}\n      innerRef={innerRef}\n    >\n      {<Close aria-label=\"Close modal slide\" size=\"s\" />}\n    </StyledCloseButton>\n  </HeaderWrapper>\n);\n\nconst HeaderWrapper = styled.div`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  align-items: center;\n  height: 48px;\n  overflow: hidden;\n`;\n\nconst StyledSeparator = styled(DSSeparator)`\n  padding: ${(props) => props.theme.space.xs} 0;\n`;\n\nconst StyledCloseButton = styled(DSButtonV2)`\n  margin: ${(props) => props.theme.space.xs};\n`;\n\nconst props = {\n  /** on modal close callback */\n  onClose: PropTypes.func.description('on modal close callback'),\n  /** modal toolbar component */\n  toolbar: PropTypes.node.description('modal toolbar comoponent'),\n  /** modal title */\n  title: PropTypes.string.description('modal title'),\n  innerRef: PropTypes.func.description('button close ref '),\n};\n\nModalHeader.propTypes = props;\nModalHeader.displayName = 'ModalHeader';\nconst DSModalSlideHeaderWithSchema = describe(ModalHeader);\nDSModalSlideHeaderWithSchema.propTypes = props;\n\nexport { DSModalSlideHeaderWithSchema };\n\nexport default ModalHeader;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACSrB,SAGM,KAHN;AARF,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB,OAAO,iBAAiB;AACxB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,QAAQ,gBAAgB,aAAa;AAE9C,MAAM,cAAc,CAAC,EAAE,WAAW,MAAM,OAAO,cAAc,IAAI,UAAU,MAAM,MAAM,UAAU,KAAK,MACpG,qBAAC,iBACC;AAAA,sBAAC,kBACC,8BAAC,UACC,8BAAC,SAAO,uBAAY,GACtB,GACF;AAAA,EACC;AAAA,EACA,WAAW,oBAAC,mBAAgB,UAAS,WAAU,QAAO,QAAO,aAAY,YAAW,MAAK,YAAW;AAAA,EACrG;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,cAAW;AAAA,MACX,YAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MAEC,8BAAC,SAAM,cAAW,qBAAoB,MAAK,KAAI;AAAA;AAAA,EAClD;AAAA,GACF;AAGF,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAS7B,MAAM,kBAAkB,OAAO,WAAW;AAAA,aAC7B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAG1C,MAAM,oBAAoB,OAAO,UAAU;AAAA,YAC/B,CAACA,WAAUA,OAAM,MAAM,MAAM;AAAA;AAGzC,MAAM,QAAQ;AAAA;AAAA,EAEZ,SAAS,UAAU,KAAK,YAAY,yBAAyB;AAAA;AAAA,EAE7D,SAAS,UAAU,KAAK,YAAY,0BAA0B;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,aAAa;AAAA,EACjD,UAAU,UAAU,KAAK,YAAY,mBAAmB;AAC1D;AAEA,YAAY,YAAY;AACxB,YAAY,cAAc;AAC1B,MAAM,+BAA+B,SAAS,WAAW;AACzD,6BAA6B,YAAY;AAIzC,IAAO,iBAAQ;",
+  "names": ["props"]
+}

package/dist/esm/components/blocks.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+const blockName = "modal-slide";
+const Wrapper = aggregatedClasses("div")(blockName, "wrapper", ({ show, centered }) => ({
+  showing: show,
+  disappearing: !show,
+  centered
+}));
+const Overlay = aggregatedClasses("div")(blockName, "overlay", ({ show }) => ({
+  showing: show,
+  disappearing: !show
+}));
+const Content = aggregatedClasses("div")(blockName, "content", ({ show }) => ({
+  showing: show,
+  disappearing: !show
+}));
+const Title = aggregatedClasses("div")(blockName, "title", () => ({}));
+const BreadcrumTitle = aggregatedClasses("div")(blockName, "breadcrum-title", () => ({}));
+const HeaderLeftSide = aggregatedClasses("div")(blockName, "header-left-side", () => ({}));
+const ActualContent = aggregatedClasses("div")(blockName, "actual-content", () => ({}));
+const Header = aggregatedClasses("div")(blockName, "header", () => ({}));
+const Footer = aggregatedClasses("div")(blockName, "footer", () => ({}));
+const FooterWrapper = aggregatedClasses("div")(blockName, "footer-wrapper", () => ({}));
+export {
+  ActualContent,
+  BreadcrumTitle,
+  Content,
+  Footer,
+  FooterWrapper,
+  Header,
+  HeaderLeftSide,
+  Overlay,
+  Title,
+  Wrapper
+};
+//# sourceMappingURL=blocks.js.map

package/dist/esm/components/blocks.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/components/blocks.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\n\nconst blockName = 'modal-slide';\n\nexport const Wrapper = aggregatedClasses('div')(blockName, 'wrapper', ({ show, centered }) => ({\n  showing: show,\n  disappearing: !show,\n  centered,\n}));\n\nexport const Overlay = aggregatedClasses('div')(blockName, 'overlay', ({ show }) => ({\n  showing: show,\n  disappearing: !show,\n}));\n\nexport const Content = aggregatedClasses('div')(blockName, 'content', ({ show }) => ({\n  showing: show,\n  disappearing: !show,\n}));\n\nexport const Title = aggregatedClasses('div')(blockName, 'title', () => ({}));\n\nexport const BreadcrumTitle = aggregatedClasses('div')(blockName, 'breadcrum-title', () => ({}));\n\nexport const HeaderLeftSide = aggregatedClasses('div')(blockName, 'header-left-side', () => ({}));\n\nexport const ActualContent = aggregatedClasses('div')(blockName, 'actual-content', () => ({}));\nexport const Header = aggregatedClasses('div')(blockName, 'header', () => ({}));\nexport const Footer = aggregatedClasses('div')(blockName, 'footer', () => ({}));\n\nexport const FooterWrapper = aggregatedClasses('div')(blockName, 'footer-wrapper', () => ({}));\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,yBAAyB;AAElC,MAAM,YAAY;AAEX,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,MAAM,SAAS,OAAO;AAAA,EAC7F,SAAS;AAAA,EACT,cAAc,CAAC;AAAA,EACf;AACF,EAAE;AAEK,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,UAAU,kBAAkB,KAAK,EAAE,WAAW,WAAW,CAAC,EAAE,KAAK,OAAO;AAAA,EACnF,SAAS;AAAA,EACT,cAAc,CAAC;AACjB,EAAE;AAEK,MAAM,QAAQ,kBAAkB,KAAK,EAAE,WAAW,SAAS,OAAO,CAAC,EAAE;AAErE,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,mBAAmB,OAAO,CAAC,EAAE;AAExF,MAAM,iBAAiB,kBAAkB,KAAK,EAAE,WAAW,oBAAoB,OAAO,CAAC,EAAE;AAEzF,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;AACtF,MAAM,SAAS,kBAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AACvE,MAAM,SAAS,kBAAkB,KAAK,EAAE,WAAW,UAAU,OAAO,CAAC,EAAE;AAEvE,MAAM,gBAAgB,kBAAkB,KAAK,EAAE,WAAW,kBAAkB,OAAO,CAAC,EAAE;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+export * from "./DSModalSlide.js";
+import { default as default2 } from "./DSModalSlide.js";
+import { DSModalSlideHeaderWithSchema } from "./components/Header.js";
+import { DSModalSlideFooterWithSchema } from "./components/Footer.js";
+export {
+  DSModalSlideFooterWithSchema,
+  DSModalSlideHeaderWithSchema,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSModalSlide.js';\nexport { default } from './DSModalSlide.js';\nexport { DSModalSlideHeaderWithSchema } from './components/Header.js';\nexport { DSModalSlideFooterWithSchema } from './components/Footer.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,WAAAA,gBAAe;AACxB,SAAS,oCAAoC;AAC7C,SAAS,oCAAoC;",
+  "names": ["default"]
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/types/DSModalSlide.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import ModalHeader from './components/Header.js';
+import ModalFooter from './components/Footer.js';
+declare const DSModalSlide: {
+    (props: any): React.ReactPortal | null;
+    propTypes: {
+        /**
+         * If the modal slide is centered or not
+         */
+        centered: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * If the modal slide is visible or not
+         */
+        isOpen: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Main content of the modal
+         */
+        children: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * If the modal slide takes the full width or not
+         */
+        fullWidth: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * If the modal slide has a header, only available for full width option
+         */
+        header: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Ratio of fade out
+         */
+        fadeOut: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Ratio of fade in
+         */
+        fadeIn: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Override the panel height to scroll height of the container
+         */
+        overrideHeight: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const DSModalSlideWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<any>;
+export { ModalHeader, ModalFooter, DSModalSlide, DSModalSlideWithSchema };
+export default DSModalSlide;

package/dist/types/components/Footer.d.ts

@@ -0,0 +1,55 @@
+declare const ModalFooter: {
+    ({ confirmLabel, rejectLabel, onConfirm, onReject, confirmProps, rejectProps, }: {
+        confirmLabel?: string | undefined;
+        rejectLabel?: string | undefined;
+        onConfirm: any;
+        onReject: any;
+        confirmProps?: {
+            disabled: boolean;
+        } | undefined;
+        rejectProps?: {
+            disabled: boolean;
+        } | undefined;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    propTypes: {
+        /**
+         * Confirm Label
+         */
+        confirmLabel: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Reject Label
+         */
+        rejectLabel: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Callback
+         */
+        onConfirm: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Callback
+         */
+        onReject: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Extra DSButton props for confirm btn.
+         */
+        confirmProps: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /**
+         * Extra DSButton props for reject btn.
+         */
+        rejectProps: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const DSModalSlideFooterWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
+    confirmLabel?: string | undefined;
+    rejectLabel?: string | undefined;
+    onConfirm: any;
+    onReject: any;
+    confirmProps?: {
+        disabled: boolean;
+    } | undefined;
+    rejectProps?: {
+        disabled: boolean;
+    } | undefined;
+}>;
+export { DSModalSlideFooterWithSchema };
+export default ModalFooter;

package/dist/types/components/Header.d.ts

@@ -0,0 +1,26 @@
+declare const ModalHeader: {
+    ({ innerRef, title: headerTitle, onClose, toolbar }: {
+        innerRef?: null | undefined;
+        title?: string | undefined;
+        onClose?: (() => null) | undefined;
+        toolbar?: null | undefined;
+    }): import("react/jsx-runtime.js").JSX.Element;
+    propTypes: {
+        /** on modal close callback */
+        onClose: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** modal toolbar component */
+        toolbar: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        /** modal title */
+        title: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+        innerRef: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").ReactDescT;
+    };
+    displayName: string;
+};
+declare const DSModalSlideHeaderWithSchema: import("@elliemae/ds-legacy-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<{
+    innerRef?: null | undefined;
+    title?: string | undefined;
+    onClose?: (() => null) | undefined;
+    toolbar?: null | undefined;
+}>;
+export { DSModalSlideHeaderWithSchema };
+export default ModalHeader;

package/dist/types/components/blocks.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const Wrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const Overlay: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const Content: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const Title: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const BreadcrumTitle: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const HeaderLeftSide: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const ActualContent: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const Header: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const Footer: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;
+export declare const FooterWrapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<unknown>>;

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DSModalSlide.js';
+export { default } from './DSModalSlide.js';
+export { DSModalSlideHeaderWithSchema } from './components/Header.js';
+export { DSModalSlideFooterWithSchema } from './components/Footer.js';

package/dist/types/tests/DSModalSlide.test.d.ts

@@ -0,0 +1 @@
+export {};