@elliemae/ds-modal-slide 3.25.0-rc.1 → 3.26.0-next.2

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,150 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSModalSlideFooterPropTypes: () => DSModalSlideFooterPropTypes,
+  DSModalSlideFooterPropTypesSchema: () => DSModalSlideFooterPropTypesSchema,
+  DSModalSlideHeaderPropTypes: () => DSModalSlideHeaderPropTypes,
+  DSModalSlideHeaderPropTypesSchema: () => DSModalSlideHeaderPropTypesSchema,
+  DSModalSlidePropTypes: () => DSModalSlidePropTypes,
+  DSModalSlidePropTypesSchema: () => DSModalSlidePropTypesSchema,
+  defaultProps: () => defaultProps,
+  footerDefaultProps: () => footerDefaultProps,
+  headerDefaultProps: () => headerDefaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_ds_utilities = require("@elliemae/ds-utilities");
+var import_DSModalSlideDefinitions = require("./DSModalSlideDefinitions.js");
+const defaultProps = {
+  isOpen: false,
+  centered: false,
+  fullWidth: false,
+  fadeOut: 1500,
+  fadeIn: 1500,
+  overrideHeight: false
+};
+const headerDefaultProps = {
+  title: "",
+  onClose: () => null
+};
+const footerDefaultProps = {
+  confirmLabel: "Confirm",
+  rejectLabel: "Cancel",
+  confirmProps: { disabled: false },
+  rejectProps: { disabled: false }
+};
+const DSModalSlidePropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  /**
+   * If the modal slide is centered or not
+   */
+  centered: import_ds_props_helpers.PropTypes.bool.description("If the modal slide is centered or not"),
+  /**
+   * If the modal slide is visible or not
+   */
+  isOpen: import_ds_props_helpers.PropTypes.bool.description("If the modal slide is visible or not"),
+  /**
+   * Main content of the modal
+   */
+  children: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node]).isRequired.description("Main content of the modal"),
+  /**
+   * If the modal slide takes the full width or not
+   */
+  fullWidth: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.element.description("If the modal slide has a header, only available for full width option"),
+  /**
+   * If the modal slide has a footer
+   */
+  footer: import_ds_props_helpers.PropTypes.element.description("If the modal slide has a footer"),
+  /**
+   * Ratio of fade out
+   */
+  fadeOut: import_ds_props_helpers.PropTypes.number.description("Ratio of fade out"),
+  /**
+   * Ratio of fade in
+   */
+  fadeIn: import_ds_props_helpers.PropTypes.number.description("Ratio of fade in"),
+  /**
+   * Override the panel height to scroll height of the container
+   */
+  overrideHeight: import_ds_props_helpers.PropTypes.bool.description("Override the panel height to scroll height of the container"),
+  getContainer: import_ds_props_helpers.PropTypes.func.description("Should return the container of the modal slide").isRequired,
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("Ref to the modal slide")
+};
+const DSModalSlidePropTypesSchema = DSModalSlidePropTypes;
+const DSModalSlideHeaderPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  title: import_ds_props_helpers.PropTypes.string.description("modal title"),
+  onClose: import_ds_props_helpers.PropTypes.func.description("on modal close callback"),
+  toolbar: import_ds_props_helpers.PropTypes.node.description("modal toolbar comoponent"),
+  innerRef: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.func, import_ds_props_helpers.PropTypes.object]).description("Ref to the modal slide")
+};
+const DSModalSlideHeaderPropTypesSchema = DSModalSlideHeaderPropTypes;
+const DSModalSlideFooterPropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  /**
+   * Confirm Label
+   */
+  confirmLabel: import_ds_props_helpers.PropTypes.string.description("Confirm Label"),
+  /**
+   * Reject Label
+   */
+  rejectLabel: import_ds_props_helpers.PropTypes.string.description("Reject Label"),
+  /**
+   * Callback
+   */
+  onConfirm: import_ds_props_helpers.PropTypes.func.description("Callback"),
+  /**
+   * Callback
+   */
+  onReject: import_ds_props_helpers.PropTypes.func.description("Callback"),
+  /**
+   * Extra DSButton props for confirm btn.
+   */
+  confirmProps: import_ds_props_helpers.PropTypes.shape({
+    disabled: import_ds_props_helpers.PropTypes.bool
+  }).description("Extra DSButton props for confirm btn."),
+  /**
+   * Extra DSButton props for reject btn.
+   */
+  rejectProps: import_ds_props_helpers.PropTypes.shape({
+    disabled: import_ds_props_helpers.PropTypes.bool
+  }).description("Extra DSButton props for reject btn."),
+  ...(0, import_ds_utilities.getPropsPerDatatestIdPropTypes)(import_DSModalSlideDefinitions.DSModalSlideDataTestIds)
+};
+const DSModalSlideFooterPropTypesSchema = DSModalSlideFooterPropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable @typescript-eslint/no-redundant-type-constituents */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { PropTypes, globalAttributesPropTypes, xstyledPropTypes } from '@elliemae/ds-props-helpers';\nimport { getPropsPerDatatestIdPropTypes } from '@elliemae/ds-utilities';\nimport { DSModalSlideDataTestIds } from './DSModalSlideDefinitions.js';\n\nexport declare namespace DSModalSlideT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface RequiredProps {\n    getContainer: () => HTMLElement;\n  }\n\n  export interface DefaultProps {\n    isOpen: boolean;\n    centered: boolean;\n    fullWidth: boolean;\n    fadeOut: number;\n    fadeIn: number;\n    overrideHeight: boolean;\n  }\n\n  export interface OptionalProps {\n    header: JSX.Element;\n    footer: React.ReactNode;\n    children?: React.ReactNode;\n    innerRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n  }\n\n  export interface FooterRequiredProps {}\n\n  export interface FooterDefaultProps {\n    confirmLabel: string;\n    rejectLabel: string;\n    confirmProps: { disabled: boolean };\n    rejectProps: { disabled: boolean };\n  }\n\n  export interface FooterOptionalProps {\n    onConfirm: () => void;\n    onReject: () => void;\n  }\n\n  export interface HeaderRequiredProps {}\n\n  export interface HeaderDefaultProps {\n    title: string;\n    onClose: () => void;\n  }\n\n  export interface HeaderOptionalProps {\n    toolbar?: React.ReactNode;\n    innerRef?: React.MutableRefObject<HTMLButtonElement | null> | React.RefCallback<HTMLButtonElement>;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLElement>;\n\n  export type HeaderProps = PropsT<HeaderDefaultProps, HeaderRequiredProps, HeaderOptionalProps, HTMLButtonElement>;\n\n  export type HeaderInternalProps = InternalPropsT<\n    HeaderDefaultProps,\n    HeaderRequiredProps,\n    HeaderOptionalProps,\n    HTMLButtonElement\n  >;\n\n  export type FooterProps = PropsT<FooterDefaultProps, FooterRequiredProps, FooterOptionalProps, HTMLDivElement>;\n\n  export type FooterInternalProps = InternalPropsT<\n    FooterDefaultProps,\n    FooterRequiredProps,\n    FooterOptionalProps,\n    HTMLDivElement\n  >;\n}\n\nexport const defaultProps: DSModalSlideT.DefaultProps = {\n  isOpen: false,\n  centered: false,\n  fullWidth: false,\n  fadeOut: 1500,\n  fadeIn: 1500,\n  overrideHeight: false,\n};\n\nexport const headerDefaultProps: DSModalSlideT.HeaderDefaultProps = {\n  title: '',\n  onClose: () => null,\n};\n\nexport const footerDefaultProps: DSModalSlideT.FooterDefaultProps = {\n  confirmLabel: 'Confirm',\n  rejectLabel: 'Cancel',\n  confirmProps: { disabled: false },\n  rejectProps: { disabled: false },\n};\n\nexport const DSModalSlidePropTypes: DSPropTypesSchema<DSModalSlideT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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.node]).isRequired.description('Main content of the modal'),\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   * If the modal slide has a footer\n   */\n  footer: PropTypes.element.description('If the modal slide has a footer'),\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  getContainer: PropTypes.func.description('Should return the container of the modal slide').isRequired,\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the modal slide'),\n};\n\nexport const DSModalSlidePropTypesSchema =\n  DSModalSlidePropTypes as unknown as React.WeakValidationMap<DSModalSlideT.Props>;\n\nexport const DSModalSlideHeaderPropTypes: DSPropTypesSchema<DSModalSlideT.HeaderProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  title: PropTypes.string.description('modal title'),\n  onClose: PropTypes.func.description('on modal close callback'),\n  toolbar: PropTypes.node.description('modal toolbar comoponent'),\n  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).description('Ref to the modal slide'),\n};\n\nexport const DSModalSlideHeaderPropTypesSchema =\n  DSModalSlideHeaderPropTypes as unknown as React.WeakValidationMap<DSModalSlideT.HeaderProps>;\n\nexport const DSModalSlideFooterPropTypes: DSPropTypesSchema<DSModalSlideT.FooterProps> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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  ...getPropsPerDatatestIdPropTypes(DSModalSlideDataTestIds),\n};\n\nexport const DSModalSlideFooterPropTypesSchema =\n  DSModalSlideFooterPropTypes as unknown as React.WeakValidationMap<DSModalSlideT.FooterProps>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,8BAAuE;AACvE,0BAA+C;AAC/C,qCAAwC;AA2EjC,MAAM,eAA2C;AAAA,EACtD,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,gBAAgB;AAClB;AAEO,MAAM,qBAAuD;AAAA,EAClE,OAAO;AAAA,EACP,SAAS,MAAM;AACjB;AAEO,MAAM,qBAAuD;AAAA,EAClE,cAAc;AAAA,EACd,aAAa;AAAA,EACb,cAAc,EAAE,UAAU,MAAM;AAAA,EAChC,aAAa,EAAE,UAAU,MAAM;AACjC;AAEO,MAAM,wBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,UAAU,kCAAU,KAAK,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAI5E,QAAQ,kCAAU,KAAK,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA,EAIzE,UAAU,kCAAU,UAAU,CAAC,kCAAU,IAAI,CAAC,EAAE,WAAW,YAAY,2BAA2B;AAAA;AAAA;AAAA;AAAA,EAIlG,WAAW,kCAAU,KAAK,YAAY,gDAAgD;AAAA;AAAA;AAAA;AAAA,EAItF,QAAQ,kCAAU,QAAQ,YAAY,uEAAuE;AAAA;AAAA;AAAA;AAAA,EAI7G,QAAQ,kCAAU,QAAQ,YAAY,iCAAiC;AAAA;AAAA;AAAA;AAAA,EAIvE,SAAS,kCAAU,OAAO,YAAY,mBAAmB;AAAA;AAAA;AAAA;AAAA,EAIzD,QAAQ,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAIvD,gBAAgB,kCAAU,KAAK,YAAY,6DAA6D;AAAA,EACxG,cAAc,kCAAU,KAAK,YAAY,gDAAgD,EAAE;AAAA,EAC3F,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AACxG;AAEO,MAAM,8BACX;AAEK,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA,EACH,OAAO,kCAAU,OAAO,YAAY,aAAa;AAAA,EACjD,SAAS,kCAAU,KAAK,YAAY,yBAAyB;AAAA,EAC7D,SAAS,kCAAU,KAAK,YAAY,0BAA0B;AAAA,EAC9D,UAAU,kCAAU,UAAU,CAAC,kCAAU,MAAM,kCAAU,MAAM,CAAC,EAAE,YAAY,wBAAwB;AACxG;AAEO,MAAM,oCACX;AAEK,MAAM,8BAA4E;AAAA,EACvF,GAAG;AAAA,EACH,GAAG;AAAA;AAAA;AAAA;AAAA,EAIH,cAAc,kCAAU,OAAO,YAAY,eAAe;AAAA;AAAA;AAAA;AAAA,EAI1D,aAAa,kCAAU,OAAO,YAAY,cAAc;AAAA;AAAA;AAAA;AAAA,EAIxD,WAAW,kCAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAIhD,UAAU,kCAAU,KAAK,YAAY,UAAU;AAAA;AAAA;AAAA;AAAA,EAI/C,cAAc,kCAAU,MAAM;AAAA,IAC5B,UAAU,kCAAU;AAAA,EACtB,CAAC,EAAE,YAAY,uCAAuC;AAAA;AAAA;AAAA;AAAA,EAItD,aAAa,kCAAU,MAAM;AAAA,IAC3B,UAAU,kCAAU;AAAA,EACtB,CAAC,EAAE,YAAY,sCAAsC;AAAA,EACrD,OAAG,oDAA+B,sDAAuB;AAC3D;AAEO,MAAM,oCACX;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,223 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  HeaderWrapper: () => HeaderWrapper,
+  StyledActualContent: () => StyledActualContent,
+  StyledCloseButton: () => StyledCloseButton,
+  StyledContent: () => StyledContent,
+  StyledContentWrapper: () => StyledContentWrapper,
+  StyledFooter: () => StyledFooter,
+  StyledFooterWrapper: () => StyledFooterWrapper,
+  StyledGridContent: () => StyledGridContent,
+  StyledHeader: () => StyledHeader,
+  StyledHeaderLeftSide: () => StyledHeaderLeftSide,
+  StyledModalWrapper: () => StyledModalWrapper,
+  StyledOverlay: () => StyledOverlay,
+  StyledSeparator: () => StyledSeparator,
+  StyledTitle: () => StyledTitle
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_button_v2 = require("@elliemae/ds-button-v2");
+var import_ds_grid = require("@elliemae/ds-grid");
+var import_ds_separator = require("@elliemae/ds-separator");
+var import_ds_system = require("@elliemae/ds-system");
+var import_DSModalSlideDefinitions = require("./DSModalSlideDefinitions.js");
+const overlayAnimation = import_ds_system.kfrm`{
+    0% {
+      background: rgba(37, 41, 47, 0);
+    }
+    100% {
+      background: rgba(37, 41, 47, 0.25);
+    }
+}`;
+const overlayAnimationOut = import_ds_system.kfrm`{
+    0% {
+      background: rgba(37, 41, 47, 0.25);
+    }
+    100% {
+      background: rgba(37, 41, 47, 0);
+    }
+}`;
+const contentAnimationOut = import_ds_system.kfrm`{
+    0% {
+      transform: translateX(0);
+    }
+    100% {
+      transform: translateX(100%);
+    }
+}`;
+const contentAnimationIn = import_ds_system.kfrm`{
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(0);
+    }
+}`;
+const StyledModalWrapper = (0, import_ds_system.styled)("div", {
+  name: import_DSModalSlideDefinitions.DSModalSlideName,
+  slot: import_DSModalSlideDefinitions.DSModalSlideSlots.ROOT
+})`
+  position: absolute;
+  display: flex;
+  height: calc(${(props) => props.height} * 1px);
+  width: 100%;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  z-index: 10;
+
+  .em-ds-modal-v2__modal-wrapper {
+    flex: 1;
+    padding: 2.46rem 0;
+  }
+
+  .em-ds-modal-v2__modal-title {
+    max-width: 80%;
+    margin: 0 auto;
+  }
+`;
+const StyledOverlay = (0, import_ds_system.styled)("div", {
+  name: import_DSModalSlideDefinitions.DSModalSlideName,
+  slot: import_DSModalSlideDefinitions.DSModalSlideSlots.OVERLAY
+})`
+  height: 100%;
+  width: 100%;
+  background: rgba(37, 41, 47, 0.25);
+  display: flex;
+  animation: ${(props) => props.disappearing ? overlayAnimationOut : overlayAnimation}
+    calc(${(props) => props.disappearing ? props.fadeOut : props.fadeIn} * 1ms) linear;
+
+  ${(props) => props.showing && `display: flex;
+     height: 100%;`}
+`;
+const StyledContent = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.CONTENT })`
+  height: calc(${(props) => props.height} * 1px);
+  background: neutral-000;
+  box-shadow:
+    0 6px 20px 0 rgba(0, 0, 0, 0.24),
+    0 8px 17px 0 rgba(0, 0, 0, 0.19);
+  width: calc(${(props) => props.width} * 1%);
+  margin-left: auto;
+  align-items: center;
+  flex-direction: column;
+  display: flex;
+  overflow-y: auto;
+  border: 1px solid neutral-300;
+  border-left: 2px solid neutral-300;
+  animation: ${(props) => props.disappearing ? contentAnimationOut : contentAnimationIn}
+    calc(${(props) => props.disappearing ? props.fadeOut / 2 : props.fadeIn / 2} * 1ms) linear;
+  .em-ds-separator-wrapper {
+    margin-top: unset;
+  }
+`;
+const StyledGridContent = (0, import_ds_system.styled)(import_ds_grid.Grid)`
+  height: 100%;
+  width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+`;
+const StyledTitle = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.TITLE })``;
+const StyledHeaderLeftSide = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.HEADER_LEFT_SIDE })`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  padding: 0.61538rem 1.23077rem 0.61538rem 0;
+  height: 3.69231rem;
+
+  .em-ds-button {
+    .em-ds-icon {
+      fill: brand-primary-600;
+    }
+  }
+  .close-button {
+    padding-left: 18px;
+  }
+`;
+const StyledActualContent = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.ACTUAL_CONTENT })`
+  display: flex;
+  flex-direction: column;
+`;
+const StyledHeader = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.HEADER })`
+  padding: 0 1.23077rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+
+  ${StyledTitle} {
+    font-size: 1.3846rem;
+    color: neutral-700;
+  }
+`;
+const StyledFooter = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.FOOTER })``;
+const StyledFooterWrapper = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.FOOTER_WRAPPER })`
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0.61538rem 1.23077rem 0.61538rem 0;
+  height: 3.69231rem;
+  .em-ds-button {
+    margin-left: 1.23077rem;
+  }
+`;
+const HeaderWrapper = (0, import_ds_system.styled)("div", { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.HEADER_WRAPPER })`
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  align-items: center;
+  height: 48px;
+  overflow: hidden;
+`;
+const StyledSeparator = (0, import_ds_system.styled)(import_ds_separator.DSSeparatorV2, { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.SEPARATOR })`
+  padding: ${(props) => props.theme.space.xs} 0;
+  position: initial;
+  margin: none;
+`;
+const StyledCloseButton = (0, import_ds_system.styled)(import_ds_button_v2.DSButtonV2, { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.CLOSE_BUTTON })`
+  margin: ${(props) => props.theme.space.xs};
+`;
+const StyledContentWrapper = (0, import_ds_system.styled)(import_ds_grid.Grid, { name: import_DSModalSlideDefinitions.DSModalSlideName, slot: import_DSModalSlideDefinitions.DSModalSlideSlots.CONTENT_WRAPPER })`
+  overflow: auto;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.brand["600"]};
+    outline-offset: -1px;
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSSeparatorV2 } from '@elliemae/ds-separator';\nimport { styled, kfrm } from '@elliemae/ds-system';\nimport { DSModalSlideName, DSModalSlideSlots } from './DSModalSlideDefinitions.js';\n\nconst overlayAnimation = kfrm`{\n    0% {\n      background: rgba(37, 41, 47, 0);\n    }\n    100% {\n      background: rgba(37, 41, 47, 0.25);\n    }\n}`;\n\nconst overlayAnimationOut = kfrm`{\n    0% {\n      background: rgba(37, 41, 47, 0.25);\n    }\n    100% {\n      background: rgba(37, 41, 47, 0);\n    }\n}`;\n\nconst contentAnimationOut = kfrm`{\n    0% {\n      transform: translateX(0);\n    }\n    100% {\n      transform: translateX(100%);\n    }\n}`;\n\nconst contentAnimationIn = kfrm`{\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(0);\n    }\n}`;\n\nexport const StyledModalWrapper = styled('div', {\n  name: DSModalSlideName,\n  slot: DSModalSlideSlots.ROOT,\n})<{ height: string | number }>`\n  position: absolute;\n  display: flex;\n  height: calc(${(props) => props.height} * 1px);\n  width: 100%;\n  overflow: hidden;\n  top: 0;\n  left: 0;\n  z-index: 10;\n\n  .em-ds-modal-v2__modal-wrapper {\n    flex: 1;\n    padding: 2.46rem 0;\n  }\n\n  .em-ds-modal-v2__modal-title {\n    max-width: 80%;\n    margin: 0 auto;\n  }\n`;\n\nexport const StyledOverlay = styled('div', {\n  name: DSModalSlideName,\n  slot: DSModalSlideSlots.OVERLAY,\n})<{ disappearing: boolean; showing: boolean; fadeIn: number; fadeOut: number }>`\n  height: 100%;\n  width: 100%;\n  background: rgba(37, 41, 47, 0.25);\n  display: flex;\n  animation: ${(props) => (props.disappearing ? overlayAnimationOut : overlayAnimation)}\n    calc(${(props) => (props.disappearing ? props.fadeOut : props.fadeIn)} * 1ms) linear;\n\n  ${(props) =>\n    props.showing &&\n    `display: flex;\n     height: 100%;`}\n`;\n\nexport const StyledContent = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT })<{\n  height: number | string;\n  width: number | string;\n  disappearing: boolean;\n  fadeIn: number;\n  fadeOut: number;\n}>`\n  height: calc(${(props) => props.height} * 1px);\n  background: neutral-000;\n  box-shadow:\n    0 6px 20px 0 rgba(0, 0, 0, 0.24),\n    0 8px 17px 0 rgba(0, 0, 0, 0.19);\n  width: calc(${(props) => props.width} * 1%);\n  margin-left: auto;\n  align-items: center;\n  flex-direction: column;\n  display: flex;\n  overflow-y: auto;\n  border: 1px solid neutral-300;\n  border-left: 2px solid neutral-300;\n  animation: ${(props) => (props.disappearing ? contentAnimationOut : contentAnimationIn)}\n    calc(${(props) => (props.disappearing ? props.fadeOut / 2 : props.fadeIn / 2)} * 1ms) linear;\n  .em-ds-separator-wrapper {\n    margin-top: unset;\n  }\n`;\n\nexport const StyledGridContent = styled(Grid)`\n  height: 100%;\n  width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n  -webkit-backface-visibility: hidden;\n  backface-visibility: hidden;\n  -webkit-transform-style: preserve-3d;\n  transform-style: preserve-3d;\n`;\n\nexport const StyledTitle = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.TITLE })``;\n\nexport const StyledHeaderLeftSide = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_LEFT_SIDE })`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  height: 3.69231rem;\n\n  .em-ds-button {\n    .em-ds-icon {\n      fill: brand-primary-600;\n    }\n  }\n  .close-button {\n    padding-left: 18px;\n  }\n`;\n\nexport const StyledActualContent = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.ACTUAL_CONTENT })`\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const StyledHeader = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER })`\n  padding: 0 1.23077rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  ${StyledTitle} {\n    font-size: 1.3846rem;\n    color: neutral-700;\n  }\n`;\n\nexport const StyledFooter = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER })``;\n\nexport const StyledFooterWrapper = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.FOOTER_WRAPPER })`\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  text-align: left;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 0.61538rem 1.23077rem 0.61538rem 0;\n  height: 3.69231rem;\n  .em-ds-button {\n    margin-left: 1.23077rem;\n  }\n`;\n\nexport const HeaderWrapper = styled('div', { name: DSModalSlideName, slot: DSModalSlideSlots.HEADER_WRAPPER })`\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  align-items: center;\n  height: 48px;\n  overflow: hidden;\n`;\n\nexport const StyledSeparator = styled(DSSeparatorV2, { name: DSModalSlideName, slot: DSModalSlideSlots.SEPARATOR })`\n  padding: ${(props) => props.theme.space.xs} 0;\n  position: initial;\n  margin: none;\n`;\n\nexport const StyledCloseButton = styled(DSButtonV2, { name: DSModalSlideName, slot: DSModalSlideSlots.CLOSE_BUTTON })`\n  margin: ${(props) => props.theme.space.xs};\n`;\n\nexport const StyledContentWrapper = styled(Grid, { name: DSModalSlideName, slot: DSModalSlideSlots.CONTENT_WRAPPER })`\n  overflow: auto;\n  &:focus,\n  &:focus-visible {\n    outline: 1px solid ${({ theme }) => theme.colors.brand['600']};\n    outline-offset: -1px;\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/DSModalSlide.js

@@ -1,50 +1,41 @@
 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-props-helpers";
+import { describe, useGetGlobalAttributes, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
 import { debounce } from "lodash";
 import ReactDOM from "react-dom";
 import { useTheme, styled } from "@elliemae/ds-system";
+import { useOwnerProps } from "@elliemae/ds-utilities";
 import { Grid } from "@elliemae/ds-grid";
 import DSSeparator from "@elliemae/ds-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;
-  }
-`;
+import { defaultProps, DSModalSlidePropTypesSchema } from "./react-desc-prop-types.js";
+import {
+  StyledActualContent,
+  StyledContent,
+  StyledModalWrapper,
+  StyledOverlay,
+  StyledContentWrapper,
+  StyledGridContent
+} from "./styled.js";
+import { DSModalSlideName } from "./DSModalSlideDefinitions.js";
 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 DSModalSlide = (props) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  const { isOpen, children, getContainer, fullWidth, header, footer, fadeOut, fadeIn, overrideHeight, innerRef } = propsWithDefault;
+  const [, 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 globalAttrs = useGetGlobalAttributes(props);
   const updateShow = useCallback(() => {
     if (fullWidth)
       setWidth(100);
@@ -56,8 +47,9 @@ const DSModalSlide = (props2) => {
         setShow(isOpen);
       }
     }
-  }, [isOpen, fullWidth, isMoving]);
-  useEffect(updateShow, [isOpen, fullWidth]);
+  }, [fullWidth, isOpen, show]);
+  const { getOwnerProps, getOwnerPropsArguments } = useOwnerProps(propsWithDefault);
+  useEffect(updateShow, [updateShow]);
   const container = getContainer();
   const handleHeight = useCallback(() => {
     const newHeight = overrideHeight && container.scrollHeight > container.getBoundingClientRect().height ? container.scrollHeight : container.getBoundingClientRect().height;
@@ -89,56 +81,60 @@ const DSModalSlide = (props2) => {
   };
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(ModalSlideAnimationFix, { children: /* @__PURE__ */ jsx(
-      Wrapper,
+      StyledModalWrapper,
       {
+        className: "em-ds-modal-slide__wrapper",
         ...globalAttrs,
-        classProps: {
-          show: isOpen,
-          centered
-        },
-        style: {
-          "--height": height,
-          "--fade-in": fadeIn,
-          "--fade-out": fadeOut,
-          "--width": width,
-          left: 0
-        },
+        height,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: /* @__PURE__ */ jsx(
-          Overlay,
+          StyledOverlay,
           {
-            classProps: {
-              show: isOpen
-            },
+            className: `em-ds-modal-slide__overlay ${!isOpen ? "em-ds-modal-slide__overlay--disappearing" : "em-ds-modal-slide__overlay--showing"}`,
+            fadeIn,
+            fadeOut,
+            showing: isOpen,
+            disappearing: !isOpen,
+            getOwnerProps,
+            getOwnerPropsArguments,
             children: /* @__PURE__ */ jsx(
-              Content,
+              StyledContent,
               {
+                className: `em-ds-modal-slide__content ${!isOpen ? "em-ds-modal-slide__content--disappearing" : "em-ds-modal-slide__content--showing"}`,
                 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, { innerRef, tabIndex: 0, role: "contentinfo", children: /* @__PURE__ */ jsx(ActualContent, { children }) }) }),
-                      footer && /* @__PURE__ */ jsx(DSSeparator, { position: "initial", type: "non-form" }),
-                      footer
-                    ]
-                  }
-                )
+                width,
+                height,
+                fadeIn,
+                fadeOut,
+                disappearing: !isOpen,
+                getOwnerProps,
+                getOwnerPropsArguments,
+                children: /* @__PURE__ */ jsxs(StyledGridContent, { 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(
+                    StyledContentWrapper,
+                    {
+                      innerRef,
+                      tabIndex: 0,
+                      role: "contentinfo",
+                      getOwnerProps,
+                      getOwnerPropsArguments,
+                      children: /* @__PURE__ */ jsx(
+                        StyledActualContent,
+                        {
+                          className: "em-ds-modal-slide__actual-content",
+                          getOwnerProps,
+                          getOwnerPropsArguments,
+                          children
+                        }
+                      )
+                    }
+                  ) }),
+                  footer && /* @__PURE__ */ jsx(DSSeparator, { position: "initial", type: "non-form" }),
+                  footer
+                ] })
               }
             )
           }
@@ -148,46 +144,9 @@ const DSModalSlide = (props2) => {
     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";
+DSModalSlide.displayName = DSModalSlideName;
 const DSModalSlideWithSchema = describe(DSModalSlide);
-DSModalSlideWithSchema.propTypes = props;
+DSModalSlideWithSchema.propTypes = DSModalSlidePropTypesSchema;
 var DSModalSlide_default = DSModalSlide;
 export {
   DSModalSlide,