@elliemae/ds-dialog 2.2.0 → 2.3.0-alpha.3

package/esm/styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport styled from 'styled-components';\nimport { createGlobalStyle } from '@elliemae/ds-system';\nimport { space, flexboxes, layout, sizing } from '@xstyled/styled-components';\nimport { allSizes } from './utils';\nimport type { StyledDialogContainerT, StyledDialogBackgroundT, FixedBodyT } from './DSDialogInternalTypes';\n\nexport const FixedBody = createGlobalStyle<FixedBodyT>`\n  body {\n    overflow: hidden;\n    \n    ${({ bodyInfo }) => (bodyInfo.overflow ? `padding-right: calc( ${bodyInfo.padding} + 15px ) !important;` : ``)}\n  }\n`;\n\nexport const StyledDialogBackground = styled.div<StyledDialogBackgroundT>`\n  position: fixed;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(37, 41, 47, 50%);\n  overflow-y: auto;\n  z-index: ${({ zIndex }) => zIndex};\n`;\n\nexport const StyledDialogContainer = styled.div<StyledDialogContainerPropsT>`\n  height: fit-content;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  margin: ${({ centered }) => (centered ? 'auto' : '20vh auto auto auto')};\n  width: ${({ size }) => allSizes[size]};\n  min-width: 300px;\n  box-shadow: 0 10px 20px 0 ${({ theme }) => theme.colors.neutral[500]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  overflow-y: auto;\n  ${space}\n  &:focus {\n    outline: none;\n  }\n`;\n\nexport const DSDialogTitle = styled.h3`\n  font-size: ${({ theme }) => theme.fontSizes.title[700]};\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  margin: 0;\n`;\n\nexport const DSDialogAddon = styled.div``;\n\nexport const DSDialogHeader = styled.div`\n  display: grid;\n  align-items: center;\n  grid-auto-flow: column;\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 10px ${({ theme }) => theme.space.xs};\n  & ${DSDialogTitle} + ${DSDialogAddon} {\n    align-self: flex-start;\n    justify-self: flex-end;\n  }\n  & ${DSDialogAddon}:only-child {\n    justify-self: flex-end;\n  }\n  ${space}\n`;\n\nexport const DSDialogSeparator = styled.hr.attrs(() => ({ 'aria-hidden': true }))`\n  margin: 0;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral['080']};\n`;\n\nexport const DSDialogBody = styled.div`\n  padding: ${({ theme }) => theme.space.xs};\n  overflow-y: auto;\n\n  ${layout}\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n\nexport const DSDialogPrimaryMessage = styled.h3`\n  margin: 0;\n`;\n\nexport const DSDialogSecondaryMessage = styled.p`\n  margin: 0;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const DSDialogDefaultLayout = styled.div`\n  display: grid;\n  grid-auto-flow: row;\n  justify-items: center;\n  align-items: center;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n\n  ${DSDialogSecondaryMessage} {\n    text-align: center;\n  }\n`;\n\nexport const DSDialogFooter = styled.div`\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  justify-content: flex-end;\n  grid-gap: ${({ theme }) => theme.space.xxs};\n  min-height: ${({ theme }) => theme.space.m};\n  padding: 0 ${({ theme }) => theme.space.xs};\n  ${space}\n  ${flexboxes}\n  ${sizing}\n`;\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AACA;AAGO,MAAM,YAAY;AAAA;AAAA;AAAA;AAAA,MAInB,CAAC,EAAE,eAAgB,SAAS,WAAW,wBAAwB,SAAS,iCAAiC;AAAA;AAAA;AAIxG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQhC,CAAC,EAAE,aAAa;AAAA;AAGtB,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOhC,CAAC,EAAE,eAAgB,WAAW,SAAS;AAAA,WACxC,CAAC,EAAE,WAAW,SAAS;AAAA;AAAA,8BAEJ,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA,gBAClD,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA,IAEhD;AAAA;AAAA;AAAA;AAAA;AAMG,MAAM,gBAAgB,OAAO;AAAA,eACrB,CAAC,EAAE,YAAY,MAAM,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ7C,MAAM,gBAAgB,OAAO;AAE7B,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA,gBAIrB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,kBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,MACvC,mBAAmB;AAAA;AAAA;AAAA;AAAA,MAInB;AAAA;AAAA;AAAA,IAGF;AAAA;AAGG,MAAM,oBAAoB,OAAO,GAAG,MAAM,MAAO,GAAE,eAAe;AAAA;AAAA,0BAE/C,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGvD,MAAM,eAAe,OAAO;AAAA,aACtB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA;AAAA,IAGpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAItC,MAAM,2BAA2B,OAAO;AAAA;AAAA,WAEpC,CAAC,EAAE,YAAY,MAAM,OAAO,QAAQ;AAAA;AAGxC,MAAM,wBAAwB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK9B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA;AAAA,IAErC;AAAA;AAAA;AAAA;AAKG,MAAM,iBAAiB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKvB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,gBACzB,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,eAC5B,CAAC,EAAE,YAAY,MAAM,MAAM;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA;",
+  "names": []
+}

package/esm/utils.js

@@ -1,28 +1,26 @@
-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/web.dom-collections.iterator.js';
-
-const getSpaceProps = props => Object.fromEntries(Object.entries(props).filter(_ref => {
-  let [key] = _ref;
-  return /^[pm][xytblr]?$/.exec(key);
-}));
+import * as React from "react";
+const getSpaceProps = (props) => Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));
 const DSDialogSizes = {
-  DEFAULT: 'default',
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large',
-  XLARGE: 'x-large',
-  XXLARGE: 'xx-large'
+  DEFAULT: "default",
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large",
+  XLARGE: "x-large",
+  XXLARGE: "xx-large"
 };
 const DSDialogSizesArrayValues = Object.values(DSDialogSizes);
 const allSizes = {
-  default: '576px',
-  small: '320px',
-  medium: '656px',
-  large: '848px',
-  'x-large': '1042px',
-  'xx-large': '1440px'
+  default: "576px",
+  small: "320px",
+  medium: "656px",
+  large: "848px",
+  "x-large": "1042px",
+  "xx-large": "1440px"
 };
-
-export { DSDialogSizes, DSDialogSizesArrayValues, allSizes, getSpaceProps };
+export {
+  DSDialogSizes,
+  DSDialogSizesArrayValues,
+  allSizes,
+  getSpaceProps
+};
+//# sourceMappingURL=utils.js.map

package/esm/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/utils.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GetSpaceArgsT } from './DSDialogInternalTypes';\n\nexport const getSpaceProps = (props: GetSpaceArgsT): GetSpaceArgsT =>\n  Object.fromEntries(Object.entries(props).filter(([key]) => /^[pm][xytblr]?$/.exec(key)));\n\nexport const DSDialogSizes = {\n  DEFAULT: 'default' as const,\n  SMALL: 'small' as const,\n  MEDIUM: 'medium' as const,\n  LARGE: 'large' as const,\n  XLARGE: 'x-large' as const,\n  XXLARGE: 'xx-large' as const,\n};\n\nexport const DSDialogSizesArrayValues = Object.values(DSDialogSizes);\n\nexport const allSizes = {\n  default: '576px',\n  small: '320px',\n  medium: '656px',\n  large: '848px',\n  'x-large': '1042px',\n  'xx-large': '1440px',\n};\n"],
+  "mappings": "AAAA;ACEO,MAAM,gBAAgB,CAAC,UAC5B,OAAO,YAAY,OAAO,QAAQ,OAAO,OAAO,CAAC,CAAC,SAAS,kBAAkB,KAAK;AAE7E,MAAM,gBAAgB;AAAA,EAC3B,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA;AAGJ,MAAM,2BAA2B,OAAO,OAAO;AAE/C,MAAM,WAAW;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,YAAY;AAAA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-dialog",
-  "version": "2.2.0",
+  "version": "2.3.0-alpha.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Dialog",
   "module": "./esm/index.js",
@@ -64,8 +64,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-props-helpers": "2.2.0",
-    "@elliemae/ds-system": "2.2.0",
+    "@elliemae/ds-props-helpers": "2.3.0-alpha.3",
+    "@elliemae/ds-system": "2.3.0-alpha.3",
     "@xstyled/styled-components": "~3.1.1",
     "react-desc": "~4.1.3"
   },

package/types/DSDialog.d.ts

@@ -1,30 +1,5 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
 import React from 'react';
 import type { DSDialogPropsT } from './DSDialogTypes';
-declare const DSDialog: {
-    (props: DSDialogPropsT): React.ReactNode;
-    propTypes: {
-        isOpen: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        children: import("react-desc").PropTypesDescValue;
-        centered: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        size: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        removeAutoFocus: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        onClickOutside: {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-    };
-};
-declare const DSDialogWithSchema: {
-    (props?: unknown): JSX.Element;
-    propTypes: unknown;
-    toTypescript: () => import("react-desc").TypescriptSchema;
-};
+declare const DSDialog: React.ComponentType<DSDialogPropsT>;
+declare const DSDialogWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSDialogPropsT>;
 export { DSDialog, DSDialogWithSchema };

package/types/DSDialogInternalTypes.d.ts

@@ -15,11 +15,11 @@ export interface StyledDialogContainerPropsT {
     size: Sizes;
     centered: boolean;
 }
-export interface StyledDialogFixedBodyPropsT {
-    bodyInfo: BodyInfoT;
-}
-export interface StyledDialogBackgroundPropsT {
+export interface StyledDialogBackgroundT {
     zIndex: number;
 }
+export interface FixedBodyT {
+    isBodyOverflow: boolean;
+}
 export declare type DSDialogPropsWithDefaultT = Required<DSDialogPropsT>;
 export declare type GetSpaceArgsT = Partial<Record<string, string | number>>;

package/types/index.d.ts

@@ -1,4 +1,52 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+/// <reference types="react" />
+import { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage } from './styles';
+declare const DSDialogBodyWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogHeaderWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogFooterWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogSeparatorWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogTitleWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogAddonWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogDefaultLayoutWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogPrimaryMessageWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+declare const DSDialogSecondaryMessageWithSchema: {
+    (props?: unknown): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
 export * from './DSDialog';
 export * from './DSDialogDatatestid';
 export { DSDialogSizes } from './utils';
-export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, } from './styles';
+export { DSDialogBody, DSDialogHeader, DSDialogFooter, DSDialogSeparator, DSDialogTitle, DSDialogAddon, DSDialogDefaultLayout, DSDialogPrimaryMessage, DSDialogSecondaryMessage, DSDialogBodyWithSchema, DSDialogHeaderWithSchema, DSDialogFooterWithSchema, DSDialogSeparatorWithSchema, DSDialogTitleWithSchema, DSDialogAddonWithSchema, DSDialogDefaultLayoutWithSchema, DSDialogPrimaryMessageWithSchema, DSDialogSecondaryMessageWithSchema, };

package/types/propTypes.d.ts

@@ -1,19 +1,2 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-export declare const propTypes: {
-    isOpen: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    children: import("react-desc").PropTypesDescValue;
-    centered: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    size: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    removeAutoFocus: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    onClickOutside: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-};
+import { WeakValidationMap } from 'react';
+export declare const propTypes: WeakValidationMap<unknown>;

package/types/styles.d.ts

@@ -1,7 +1,7 @@
-import type { StyledDialogContainerPropsT, StyledDialogFixedBodyPropsT, StyledDialogBackgroundPropsT } from './DSDialogInternalTypes';
-export declare const FixedBody: import("styled-components").GlobalStyleComponent<StyledDialogFixedBodyPropsT, import("styled-components").DefaultTheme>;
-export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogBackgroundPropsT, never>;
-export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogContainerPropsT, never>;
+import type { StyledDialogBackgroundT, FixedBodyT } from './DSDialogInternalTypes';
+export declare const FixedBody: import("styled-components").GlobalStyleComponent<FixedBodyT, import("styled-components").DefaultTheme>;
+export declare const StyledDialogBackground: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledDialogBackgroundT, never>;
+export declare const StyledDialogContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, any, never>;
 export declare const DSDialogTitle: import("styled-components").StyledComponent<"h3", import("styled-components").DefaultTheme, {}, never>;
 export declare const DSDialogAddon: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const DSDialogHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/utils.d.ts

@@ -1,12 +1,12 @@
 import type { GetSpaceArgsT } from './DSDialogInternalTypes';
 export declare const getSpaceProps: (props: GetSpaceArgsT) => GetSpaceArgsT;
 export declare const DSDialogSizes: {
-    readonly DEFAULT: "default";
-    readonly SMALL: "small";
-    readonly MEDIUM: "medium";
-    readonly LARGE: "large";
-    readonly XLARGE: "x-large";
-    readonly XXLARGE: "xx-large";
+    DEFAULT: "default";
+    SMALL: "small";
+    MEDIUM: "medium";
+    LARGE: "large";
+    XLARGE: "x-large";
+    XXLARGE: "xx-large";
 };
 export declare const DSDialogSizesArrayValues: ("default" | "small" | "medium" | "large" | "x-large" | "xx-large")[];
 export declare const allSizes: {