@sproutsocial/seeds-react-modal 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-modal/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     9.99 KB
+CJS dist/index.js.map 14.80 KB
+CJS ⚡️ Build success in 102ms
+ESM dist/esm/index.js     7.22 KB
+ESM dist/esm/index.js.map 14.60 KB
+ESM ⚡️ Build success in 112ms
+DTS Build start
+DTS ⚡️ Build success in 10031ms
+DTS dist/index.d.ts  2.63 KB
+DTS dist/index.d.mts 2.63 KB
+Done in 13.51s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-modal
+
+## 1.0.0
+
+### Major Changes
+
+- 235f60d: Migrate Modal to its own seeds-react-modal component

package/dist/esm/index.js

@@ -0,0 +1,237 @@
+// src/Modal.tsx
+import * as React2 from "react";
+import { useContext } from "react";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import Icon from "@sproutsocial/seeds-react-icon";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/styles.tsx
+import "react";
+import styled, { createGlobalStyle } from "styled-components";
+import { width, zIndex } from "styled-system";
+import ReactModal from "react-modal";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import Box from "@sproutsocial/seeds-react-box";
+import { jsx } from "react/jsx-runtime";
+var BODY_PADDING = "64px";
+var ReactModalAdapter = ({
+  className = "",
+  ...props
+}) => {
+  const contentClassName = className.split(" ").map((className2) => `${className2} ${className2}__Content`).join(" ");
+  const overlayClassName = className.split(" ").map((className2) => `${className2} ${className2}__Overlay`).join(" ");
+  return /* @__PURE__ */ jsx(
+    ReactModal,
+    {
+      portalClassName: className,
+      className: contentClassName,
+      overlayClassName,
+      ...props
+    }
+  );
+};
+var Body = createGlobalStyle`
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+var Container = styled(ReactModalAdapter)`
+  &__Overlay {
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${(props) => props.theme.colors.overlay.background.base};
+    opacity: 0;
+    will-change: opacity;
+    transition: opacity ${(props) => props.theme.duration.medium}
+      ${(props) => props.theme.easing.ease_inout};
+
+    ${zIndex}
+
+    &.ReactModal__Overlay--after-open {
+      opacity: 1;
+    }
+    &.ReactModal__Overlay--before-close {
+      opacity: 0;
+    }
+  }
+
+  &__Content {
+    display: flex;
+    flex-direction: column;
+    background: ${(props) => props.theme.colors.container.background.base};
+    border-radius: ${(props) => props.theme.radii[600]};
+    box-shadow: ${(props) => props.theme.shadows.medium};
+    filter: blur(0);
+    color: ${(props) => props.theme.colors.text.body};
+
+    outline: none;
+    max-width: calc(100vw - ${BODY_PADDING});
+    max-height: calc(100vh - ${BODY_PADDING});
+    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+      /**
+       * This prevents the modal from being very short in IE11. Better too big
+       * than too small.
+       */
+      height: calc(100vh - ${BODY_PADDING});
+    }
+
+    ${width}
+
+    ${COMMON}
+  }
+`;
+var Content = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    /* 'flex-basis: auto' breaks overflow in IE11 */
+    flex-basis: 100%;
+  }
+`;
+var HeaderContainer = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+`;
+var Header = styled(HeaderContainer)`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+  border-bottom-width: ${(props) => props.theme.borderWidths[500]};
+  border-bottom-color: ${(props) => props.bordered ? props.theme.colors.container.border.base : "transparent"};
+  border-bottom-style: solid;
+`;
+var Footer = styled(Box)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+`;
+Container.displayName = "ModalContainer";
+Content.displayName = "Content";
+Header.displayName = "Modal.Header";
+Footer.displayName = "Modal.Footer";
+
+// src/Modal.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ModalContext = React2.createContext({});
+var ModalHeader = (props) => {
+  const { title, subtitle, children, bordered, ...rest } = props;
+  return /* @__PURE__ */ jsx2(Header, { bordered: title || subtitle || bordered, ...rest, children: children ? children : /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box2, { children: [
+      title && /* @__PURE__ */ jsx2(Text, { as: "h1", fontSize: 400, fontWeight: "semibold", children: title }),
+      subtitle && /* @__PURE__ */ jsx2(Text, { as: "div", fontSize: 200, children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx2(Box2, { display: "flex", alignItems: "center", "justify-content": "flex-end", children: /* @__PURE__ */ jsx2(ModalCloseButton, { ml: 400 }) })
+  ] }) });
+};
+var ModalCloseButton = (props) => {
+  const { onClose, closeButtonLabel } = useContext(ModalContext);
+  if (!onClose)
+    return null;
+  return /* @__PURE__ */ jsx2(Button, { onClick: onClose, ...props, children: /* @__PURE__ */ jsx2(Icon, { name: "x-outline", ariaLabel: closeButtonLabel }) });
+};
+var ModalFooter = (props) => /* @__PURE__ */ jsx2(Footer, { borderTop: 500, borderColor: "container.border.base", ...props });
+ModalFooter.defaultProps = {
+  bg: "container.background.base"
+};
+var ModalContent = React2.forwardRef(
+  ({ children, ...rest }, ref) => {
+    const { label } = useContext(ModalContext);
+    return /* @__PURE__ */ jsx2(Content, { "data-qa-modal": true, "data-qa-label": label, ref, ...rest, children });
+  }
+);
+var Modal = (props) => {
+  const {
+    appElementSelector,
+    children,
+    isOpen,
+    label,
+    onClose,
+    closeButtonLabel,
+    width: width2,
+    zIndex: zIndex2,
+    data = {},
+    ...rest
+  } = props;
+  const isCloseable = Boolean(onClose);
+  const appElement = appElementSelector && document ? document.querySelector(appElementSelector) : void 0;
+  return /* @__PURE__ */ jsx2(
+    Container,
+    {
+      appElement,
+      ariaHideApp: !!appElement,
+      isOpen,
+      contentLabel: label,
+      onRequestClose: onClose || (() => {
+      }),
+      shouldFocusAfterRender: true,
+      shouldCloseOnOverlayClick: isCloseable,
+      shouldCloseOnEsc: isCloseable,
+      shouldReturnFocusAfterClose: true,
+      closeTimeoutMS: 200,
+      role: "dialog",
+      width: width2,
+      zIndex: zIndex2,
+      data: {
+        "qa-modal": "",
+        "qa-modal-isopen": isOpen,
+        ...data
+      },
+      ...rest,
+      children: /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+        /* @__PURE__ */ jsx2(Body, {}),
+        /* @__PURE__ */ jsx2(
+          ModalContext.Provider,
+          {
+            value: {
+              onClose,
+              closeButtonLabel,
+              label
+            },
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+Modal.defaultProps = {
+  width: "800px",
+  zIndex: 6
+};
+ModalHeader.displayName = "Modal.Header";
+ModalFooter.displayName = "Modal.Footer";
+ModalContent.displayName = "Modal.Content";
+ModalCloseButton.displayName = "Modal.CloseButton";
+Modal.Header = ModalHeader;
+Modal.Footer = ModalFooter;
+Modal.Content = ModalContent;
+Modal.CloseButton = ModalCloseButton;
+var Modal_default = Modal;
+
+// src/ModalTypes.ts
+import "react";
+import "react-modal";
+
+// src/index.ts
+var src_default = Modal_default;
+export {
+  Modal_default as Modal,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Modal.tsx","../../src/styles.tsx","../../src/ModalTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useContext } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Container, Content, Header, Footer, Body } from \"./styles\";\nimport type {\n  TypeModalProps,\n  TypeModalCloseButtonProps,\n  TypeModalContentProps,\n  TypeModalFooterProps,\n  TypeModalHeaderProps,\n} from \"./ModalTypes\";\n\ntype TypeModalContext = Partial<{\n  onClose: () => void;\n  closeButtonLabel: string;\n  label: string;\n}>;\n\nconst ModalContext = React.createContext<TypeModalContext>({});\n\nconst ModalHeader = (props: TypeModalHeaderProps) => {\n  const { title, subtitle, children, bordered, ...rest } = props;\n  return (\n    <Header bordered={title || subtitle || bordered} {...rest}>\n      {children ? (\n        children\n      ) : (\n        <React.Fragment>\n          <Box>\n            {title && (\n              <Text as=\"h1\" fontSize={400} fontWeight=\"semibold\">\n                {title}\n              </Text>\n            )}\n            {subtitle && (\n              <Text as=\"div\" fontSize={200}>\n                {subtitle}\n              </Text>\n            )}\n          </Box>\n          <Box display=\"flex\" alignItems=\"center\" justify-content=\"flex-end\">\n            <ModalCloseButton ml={400} />\n          </Box>\n        </React.Fragment>\n      )}\n    </Header>\n  );\n};\n\nconst ModalCloseButton = (props: TypeModalCloseButtonProps) => {\n  const { onClose, closeButtonLabel } = useContext(ModalContext);\n  if (!onClose) return null;\n  return (\n    <Button onClick={onClose} {...props}>\n      <Icon name=\"x-outline\" ariaLabel={closeButtonLabel} />\n    </Button>\n  );\n};\n\nconst ModalFooter = (props: TypeModalFooterProps) => (\n  <Footer borderTop={500} borderColor=\"container.border.base\" {...props} />\n);\n\nModalFooter.defaultProps = {\n  bg: \"container.background.base\",\n};\n\nconst ModalContent = React.forwardRef(\n  ({ children, ...rest }: TypeModalContentProps, ref) => {\n    const { label } = useContext(ModalContext);\n    return (\n      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>\n        {children}\n      </Content>\n    );\n  }\n);\n\n/**\n * The modal you want\n */\nconst Modal = (props: TypeModalProps) => {\n  const {\n    appElementSelector,\n    children,\n    isOpen,\n    label,\n    onClose,\n    closeButtonLabel,\n    width,\n    zIndex,\n    data = {},\n    ...rest\n  } = props;\n\n  const isCloseable = Boolean(onClose);\n  const appElement =\n    appElementSelector && document\n      ? (document.querySelector(appElementSelector) as HTMLElement)\n      : undefined;\n\n  return (\n    <Container\n      appElement={appElement}\n      ariaHideApp={!!appElement}\n      isOpen={isOpen}\n      contentLabel={label}\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      onRequestClose={onClose || (() => {})}\n      shouldFocusAfterRender={true}\n      shouldCloseOnOverlayClick={isCloseable}\n      shouldCloseOnEsc={isCloseable}\n      shouldReturnFocusAfterClose={true}\n      closeTimeoutMS={200}\n      role=\"dialog\"\n      width={width}\n      zIndex={zIndex}\n      data={{\n        \"qa-modal\": \"\",\n        \"qa-modal-isopen\": isOpen,\n        ...data,\n      }}\n      {...rest}\n    >\n      <React.Fragment>\n        <Body />\n\n        <ModalContext.Provider\n          value={{\n            onClose,\n            closeButtonLabel,\n            label,\n          }}\n        >\n          {children}\n        </ModalContext.Provider>\n      </React.Fragment>\n    </Container>\n  );\n};\n\nModal.defaultProps = {\n  width: \"800px\",\n  zIndex: 6,\n};\n\nModalHeader.displayName = \"Modal.Header\";\nModalFooter.displayName = \"Modal.Footer\";\nModalContent.displayName = \"Modal.Content\";\nModalCloseButton.displayName = \"Modal.CloseButton\";\n\nModal.Header = ModalHeader;\nModal.Footer = ModalFooter;\nModal.Content = ModalContent;\nModal.CloseButton = ModalCloseButton;\n\nexport default Modal;\n","import React from \"react\";\nimport styled, { createGlobalStyle } from \"styled-components\";\nimport { width, zIndex } from \"styled-system\";\nimport ReactModal from \"react-modal\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport Box, { type TypeContainerProps } from \"@sproutsocial/seeds-react-box\";\n\n// This is the max space allowed between the modal and the edge of the browser\nconst BODY_PADDING = \"64px\";\n\nconst ReactModalAdapter = ({\n  className = \"\",\n  ...props\n}: { className?: string } & Omit<\n  ReactModal.Props,\n  \"portalClassName\" | \"className\" | \"overlayClassName\"\n>) => {\n  // We want to create *__Content and *__Overlay class names on the subcomponents.\n  // Because `className` could be a space-separated list of class names, we make\n  // sure that we append `__Content` and `__Overlay` to every class name.\n  const contentClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Content`)\n    .join(\" \");\n\n  const overlayClassName = className\n    .split(\" \")\n    .map((className) => `${className} ${className}__Overlay`)\n    .join(\" \");\n\n  return (\n    <ReactModal\n      portalClassName={className}\n      className={contentClassName}\n      overlayClassName={overlayClassName}\n      {...props}\n    />\n  );\n};\n\nexport const Body = createGlobalStyle`\n  .ReactModal__Body--open {\n    overflow: hidden;\n  }\n`;\n\nexport const Container = styled(ReactModalAdapter)<TypeContainerProps>`\n  &__Overlay {\n    position: fixed;\n    top: 0px;\n    left: 0px;\n    right: 0px;\n    bottom: 0px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: ${(props) => props.theme.colors.overlay.background.base};\n    opacity: 0;\n    will-change: opacity;\n    transition: opacity ${(props) => props.theme.duration.medium}\n      ${(props) => props.theme.easing.ease_inout};\n\n    ${zIndex}\n\n    &.ReactModal__Overlay--after-open {\n      opacity: 1;\n    }\n    &.ReactModal__Overlay--before-close {\n      opacity: 0;\n    }\n  }\n\n  &__Content {\n    display: flex;\n    flex-direction: column;\n    background: ${(props) => props.theme.colors.container.background.base};\n    border-radius: ${(props) => props.theme.radii[600]};\n    box-shadow: ${(props) => props.theme.shadows.medium};\n    filter: blur(0);\n    color: ${(props) => props.theme.colors.text.body};\n\n    outline: none;\n    max-width: calc(100vw - ${BODY_PADDING});\n    max-height: calc(100vh - ${BODY_PADDING});\n    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n      /**\n       * This prevents the modal from being very short in IE11. Better too big\n       * than too small.\n       */\n      height: calc(100vh - ${BODY_PADDING});\n    }\n\n    ${width}\n\n    ${COMMON}\n  }\n`;\n\nexport const Content = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  min-height: 80px;\n  overflow-y: auto;\n  flex: 1 1 auto;\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n    /* 'flex-basis: auto' breaks overflow in IE11 */\n    flex-basis: 100%;\n  }\n`;\n\nexport const HeaderContainer = styled(Box)`\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n`;\n\nexport const Header = styled(HeaderContainer)<{ bordered?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  flex: 0 0 auto;\n  border-bottom-width: ${(props) => props.theme.borderWidths[500]};\n  border-bottom-color: ${(props) =>\n    props.bordered ? props.theme.colors.container.border.base : \"transparent\"};\n  border-bottom-style: solid;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  font-family: ${(props) => props.theme.fontFamily};\n  padding: ${(props) => props.theme.space[400]}\n    ${(props) => props.theme.space[450]};\n  border-bottom-right-radius: ${(props) => props.theme.radii[500]};\n  border-bottom-left-radius: ${(props) => props.theme.radii[500]};\n`;\n\nContainer.displayName = \"ModalContainer\";\nContent.displayName = \"Content\";\nHeader.displayName = \"Modal.Header\";\nFooter.displayName = \"Modal.Footer\";\n","import * as React from \"react\";\nimport ReactModal from \"react-modal\";\nimport type {\n  TypeBoxProps,\n  TypeContainerProps,\n} from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\n\nexport interface TypeModalCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  children?: void | null;\n}\n\nexport interface TypeModalHeaderProps extends TypeBoxProps {\n  title?: string;\n  subtitle?: string;\n\n  /** Passing children will override the default modal header */\n  children?: React.ReactNode;\n\n  /** If you're rendering a custom header, you can use this prop to add a bottom border */\n  bordered?: boolean;\n}\n\nexport interface TypeModalFooterProps extends TypeBoxProps {\n  bg?: string;\n  children: React.ReactNode;\n}\n\nexport interface TypeModalContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypeModalProps\n  extends TypeContainerProps,\n    // @ts-notes - onClose is an alias for onRequestClose so we don't need to include it here\n    Omit<ReactModal.Props, keyof TypeContainerProps | \"onRequestClose\"> {\n  /** section of app to aria hide for the modal */\n  appElementSelector?: string;\n\n  /** trigger to open or close the modal */\n  isOpen: boolean;\n\n  /** label for screen readers to announce the modal */\n  label: string;\n\n  /** body content of the modal */\n  children: React.ReactNode;\n\n  /** callback for close */\n  onClose?: () => void;\n\n  /** aria-label for modal X */\n  closeButtonLabel: string;\n\n  /** Controls the z-index CSS property */\n  zIndex?: number;\n\n  /** The max width of the modal container */\n  width?: string | number;\n\n  /**\n   * Custom attributes to be added to the modals container\n   * Each key will be prepended with \"data-\" when rendered in the DOM\n   */\n  data?: Record<string, string | boolean | number>;\n}\n","import Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\nexport * from \"./ModalTypes\";\n"],"mappings":"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","names":["React","Box","className","jsx","Box","width","zIndex"]}

package/dist/index.d.mts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import ReactModal from 'react-modal';
+import { TypeBoxProps, TypeContainerProps } from '@sproutsocial/seeds-react-box';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeModalCloseButtonProps extends Omit<TypeButtonProps, "children"> {
+    children?: void | null;
+}
+interface TypeModalHeaderProps extends TypeBoxProps {
+    title?: string;
+    subtitle?: string;
+    /** Passing children will override the default modal header */
+    children?: React.ReactNode;
+    /** If you're rendering a custom header, you can use this prop to add a bottom border */
+    bordered?: boolean;
+}
+interface TypeModalFooterProps extends TypeBoxProps {
+    bg?: string;
+    children: React.ReactNode;
+}
+interface TypeModalContentProps extends TypeBoxProps {
+    children?: React.ReactNode;
+}
+interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyof TypeContainerProps | "onRequestClose"> {
+    /** section of app to aria hide for the modal */
+    appElementSelector?: string;
+    /** trigger to open or close the modal */
+    isOpen: boolean;
+    /** label for screen readers to announce the modal */
+    label: string;
+    /** body content of the modal */
+    children: React.ReactNode;
+    /** callback for close */
+    onClose?: () => void;
+    /** aria-label for modal X */
+    closeButtonLabel: string;
+    /** Controls the z-index CSS property */
+    zIndex?: number;
+    /** The max width of the modal container */
+    width?: string | number;
+    /**
+     * Custom attributes to be added to the modals container
+     * Each key will be prepended with "data-" when rendered in the DOM
+     */
+    data?: Record<string, string | boolean | number>;
+}
+
+/**
+ * The modal you want
+ */
+declare const Modal: {
+    (props: TypeModalProps): react_jsx_runtime.JSX.Element;
+    defaultProps: {
+        width: string;
+        zIndex: number;
+    };
+    Header: {
+        (props: TypeModalHeaderProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        (props: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
+        defaultProps: {
+            bg: string;
+        };
+        displayName: string;
+    };
+    Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;
+    CloseButton: {
+        (props: TypeModalCloseButtonProps): react_jsx_runtime.JSX.Element | null;
+        displayName: string;
+    };
+};
+
+export { Modal, type TypeModalCloseButtonProps, type TypeModalContentProps, type TypeModalFooterProps, type TypeModalHeaderProps, type TypeModalProps, Modal as default };

package/dist/index.d.ts

@@ -0,0 +1,76 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import ReactModal from 'react-modal';
+import { TypeBoxProps, TypeContainerProps } from '@sproutsocial/seeds-react-box';
+import { TypeButtonProps } from '@sproutsocial/seeds-react-button';
+
+interface TypeModalCloseButtonProps extends Omit<TypeButtonProps, "children"> {
+    children?: void | null;
+}
+interface TypeModalHeaderProps extends TypeBoxProps {
+    title?: string;
+    subtitle?: string;
+    /** Passing children will override the default modal header */
+    children?: React.ReactNode;
+    /** If you're rendering a custom header, you can use this prop to add a bottom border */
+    bordered?: boolean;
+}
+interface TypeModalFooterProps extends TypeBoxProps {
+    bg?: string;
+    children: React.ReactNode;
+}
+interface TypeModalContentProps extends TypeBoxProps {
+    children?: React.ReactNode;
+}
+interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyof TypeContainerProps | "onRequestClose"> {
+    /** section of app to aria hide for the modal */
+    appElementSelector?: string;
+    /** trigger to open or close the modal */
+    isOpen: boolean;
+    /** label for screen readers to announce the modal */
+    label: string;
+    /** body content of the modal */
+    children: React.ReactNode;
+    /** callback for close */
+    onClose?: () => void;
+    /** aria-label for modal X */
+    closeButtonLabel: string;
+    /** Controls the z-index CSS property */
+    zIndex?: number;
+    /** The max width of the modal container */
+    width?: string | number;
+    /**
+     * Custom attributes to be added to the modals container
+     * Each key will be prepended with "data-" when rendered in the DOM
+     */
+    data?: Record<string, string | boolean | number>;
+}
+
+/**
+ * The modal you want
+ */
+declare const Modal: {
+    (props: TypeModalProps): react_jsx_runtime.JSX.Element;
+    defaultProps: {
+        width: string;
+        zIndex: number;
+    };
+    Header: {
+        (props: TypeModalHeaderProps): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        (props: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
+        defaultProps: {
+            bg: string;
+        };
+        displayName: string;
+    };
+    Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;
+    CloseButton: {
+        (props: TypeModalCloseButtonProps): react_jsx_runtime.JSX.Element | null;
+        displayName: string;
+    };
+};
+
+export { Modal, type TypeModalCloseButtonProps, type TypeModalContentProps, type TypeModalFooterProps, type TypeModalHeaderProps, type TypeModalProps, Modal as default };