@sproutsocial/seeds-react-modal 1.0.0 → 1.0.2

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ 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
+ESM dist/esm/index.js     7.18 KB
+ESM dist/esm/index.js.map 14.55 KB
+ESM ⚡️ Build success in 145ms
+CJS dist/index.js     9.96 KB
+CJS dist/index.js.map 14.76 KB
+CJS ⚡️ Build success in 145ms
 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.
+DTS ⚡️ Build success in 14377ms
+DTS dist/index.d.ts  2.51 KB
+DTS dist/index.d.mts 2.51 KB
+Done in 18.80s.

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @sproutsocial/seeds-react-modal
 
+## 1.0.2
+
+### Patch Changes
+
+- d36bf19: Removes the usage of deprecated `defaultProps` in the `Modal` so that it no longer produces a console error
+
+## 1.0.1
+
+### Patch Changes
+
+- 9fd8bac: Update dependencies to use semantic package version instead of wildcards
+- Updated dependencies [9fd8bac]
+  - @sproutsocial/seeds-react-system-props@3.0.2
+  - @sproutsocial/seeds-react-button@1.2.1
+  - @sproutsocial/seeds-react-theme@2.2.1
+  - @sproutsocial/seeds-react-icon@1.1.2
+  - @sproutsocial/seeds-react-text@1.3.1
+  - @sproutsocial/seeds-react-box@1.1.2
+
 ## 1.0.0
 
 ### Major Changes

package/dist/esm/index.js

@@ -141,14 +141,21 @@ var ModalHeader = (props) => {
 };
 var ModalCloseButton = (props) => {
   const { onClose, closeButtonLabel } = useContext(ModalContext);
-  if (!onClose)
-    return null;
+  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 ModalFooter = ({
+  bg = "container.background.base",
+  ...rest
+}) => /* @__PURE__ */ jsx2(
+  Footer,
+  {
+    bg,
+    borderTop: 500,
+    borderColor: "container.border.base",
+    ...rest
+  }
+);
 var ModalContent = React2.forwardRef(
   ({ children, ...rest }, ref) => {
     const { label } = useContext(ModalContext);
@@ -163,8 +170,8 @@ var Modal = (props) => {
     label,
     onClose,
     closeButtonLabel,
-    width: width2,
-    zIndex: zIndex2,
+    width: width2 = "800px",
+    zIndex: zIndex2 = 6,
     data = {},
     ...rest
   } = props;
@@ -210,10 +217,6 @@ var Modal = (props) => {
     }
   );
 };
-Modal.defaultProps = {
-  width: "800px",
-  zIndex: 6
-};
 ModalHeader.displayName = "Modal.Header";
 ModalFooter.displayName = "Modal.Footer";
 ModalContent.displayName = "Modal.Content";
@@ -229,9 +232,9 @@ import "react";
 import "react-modal";
 
 // src/index.ts
-var src_default = Modal_default;
+var index_default = Modal_default;
 export {
   Modal_default as Modal,
-  src_default as default
+  index_default as default
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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"]}
+{"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 = ({\n  bg = \"container.background.base\",\n  ...rest\n}: TypeModalFooterProps) => (\n  <Footer\n    bg={bg}\n    borderTop={500}\n    borderColor=\"container.border.base\"\n    {...rest}\n  />\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 = \"800px\",\n    zIndex = 6,\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\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

@@ -51,19 +51,12 @@ interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyo
  */
 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;
-        };
+        ({ bg, ...rest }: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/index.d.ts

@@ -51,19 +51,12 @@ interface TypeModalProps extends TypeContainerProps, Omit<ReactModal.Props, keyo
  */
 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;
-        };
+        ({ bg, ...rest }: TypeModalFooterProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Content: React.ForwardRefExoticComponent<Omit<TypeModalContentProps, "ref"> & React.RefAttributes<unknown>>;

package/dist/index.js

@@ -28,12 +28,12 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Modal: () => Modal_default,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/Modal.tsx
 var React2 = __toESM(require("react"));
@@ -178,14 +178,21 @@ var ModalHeader = (props) => {
 };
 var ModalCloseButton = (props) => {
   const { onClose, closeButtonLabel } = (0, import_react2.useContext)(ModalContext);
-  if (!onClose)
-    return null;
+  if (!onClose) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_button.default, { onClick: onClose, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_icon.default, { name: "x-outline", ariaLabel: closeButtonLabel }) });
 };
-var ModalFooter = (props) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Footer, { borderTop: 500, borderColor: "container.border.base", ...props });
-ModalFooter.defaultProps = {
-  bg: "container.background.base"
-};
+var ModalFooter = ({
+  bg = "container.background.base",
+  ...rest
+}) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  Footer,
+  {
+    bg,
+    borderTop: 500,
+    borderColor: "container.border.base",
+    ...rest
+  }
+);
 var ModalContent = React2.forwardRef(
   ({ children, ...rest }, ref) => {
     const { label } = (0, import_react2.useContext)(ModalContext);
@@ -200,8 +207,8 @@ var Modal = (props) => {
     label,
     onClose,
     closeButtonLabel,
-    width: width2,
-    zIndex: zIndex2,
+    width: width2 = "800px",
+    zIndex: zIndex2 = 6,
     data = {},
     ...rest
   } = props;
@@ -247,10 +254,6 @@ var Modal = (props) => {
     }
   );
 };
-Modal.defaultProps = {
-  width: "800px",
-  zIndex: 6
-};
 ModalHeader.displayName = "Modal.Header";
 ModalFooter.displayName = "Modal.Footer";
 ModalContent.displayName = "Modal.Content";
@@ -266,7 +269,7 @@ var React3 = require("react");
 var import_react_modal2 = require("react-modal");
 
 // src/index.ts
-var src_default = Modal_default;
+var index_default = Modal_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Modal

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Modal.tsx","../src/styles.tsx","../src/ModalTypes.ts"],"sourcesContent":["import Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\nexport * from \"./ModalTypes\";\n","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"],"mappings":"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","names":["React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex","React","import_react_modal"]}
+{"version":3,"sources":["../src/index.ts","../src/Modal.tsx","../src/styles.tsx","../src/ModalTypes.ts"],"sourcesContent":["import Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\nexport * from \"./ModalTypes\";\n","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 = ({\n  bg = \"container.background.base\",\n  ...rest\n}: TypeModalFooterProps) => (\n  <Footer\n    bg={bg}\n    borderTop={500}\n    borderColor=\"container.border.base\"\n    {...rest}\n  />\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 = \"800px\",\n    zIndex = 6,\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\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"],"mappings":"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","names":["React","import_react","import_seeds_react_box","className","ReactModal","styled","Box","import_jsx_runtime","Box","Text","Button","Icon","width","zIndex","React","import_react_modal"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-modal",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Seeds React Modal",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,12 +18,12 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-theme": "*",
-    "@sproutsocial/seeds-react-system-props": "*",
-    "@sproutsocial/seeds-react-box": "*",
-    "@sproutsocial/seeds-react-button": "*",
-    "@sproutsocial/seeds-react-icon": "*",
-    "@sproutsocial/seeds-react-text": "*",
+    "@sproutsocial/seeds-react-theme": "^2.2.0",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1",
+    "@sproutsocial/seeds-react-box": "^1.1.1",
+    "@sproutsocial/seeds-react-button": "^1.2.0",
+    "@sproutsocial/seeds-react-icon": "^1.1.1",
+    "@sproutsocial/seeds-react-text": "^1.3.0",
     "react-modal": "^3.16.1",
     "styled-system": "^5.1.5"
   },
@@ -38,8 +38,8 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-input": "*",
-    "@sproutsocial/seeds-react-form-field": "*",
+    "@sproutsocial/seeds-react-input": "^1.3.1",
+    "@sproutsocial/seeds-react-form-field": "^1.0.0",
     "@types/react-modal": "^3.16.0",
     "@types/styled-system": "^5.1.15"
   },

package/src/Modal.stories.tsx

@@ -7,16 +7,13 @@ import { Input } from "@sproutsocial/seeds-react-input";
 import { Text } from "@sproutsocial/seeds-react-text";
 import Modal from "./Modal";
 
-export interface StatefulStoryProps<T> {
+interface StatefulStoryProps<T> {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   children: FC<{ state: T; setState: (state: T) => void }>;
   initialState: T;
 }
 
-export function StatefulStory<T>({
-  children,
-  initialState,
-}: StatefulStoryProps<T>) {
+function StatefulStory<T>({ children, initialState }: StatefulStoryProps<T>) {
   const [state, setState] = useState<T>(initialState);
   return children({ state, setState });
 }

package/src/Modal.tsx

@@ -60,14 +60,18 @@ const ModalCloseButton = (props: TypeModalCloseButtonProps) => {
   );
 };
 
-const ModalFooter = (props: TypeModalFooterProps) => (
-  <Footer borderTop={500} borderColor="container.border.base" {...props} />
+const ModalFooter = ({
+  bg = "container.background.base",
+  ...rest
+}: TypeModalFooterProps) => (
+  <Footer
+    bg={bg}
+    borderTop={500}
+    borderColor="container.border.base"
+    {...rest}
+  />
 );
 
-ModalFooter.defaultProps = {
-  bg: "container.background.base",
-};
-
 const ModalContent = React.forwardRef(
   ({ children, ...rest }: TypeModalContentProps, ref) => {
     const { label } = useContext(ModalContext);
@@ -90,8 +94,8 @@ const Modal = (props: TypeModalProps) => {
     label,
     onClose,
     closeButtonLabel,
-    width,
-    zIndex,
+    width = "800px",
+    zIndex = 6,
     data = {},
     ...rest
   } = props;
@@ -142,11 +146,6 @@ const Modal = (props: TypeModalProps) => {
   );
 };
 
-Modal.defaultProps = {
-  width: "800px",
-  zIndex: 6,
-};
-
 ModalHeader.displayName = "Modal.Header";
 ModalFooter.displayName = "Modal.Footer";
 ModalContent.displayName = "Modal.Content";