@sproutsocial/seeds-react-modal 2.4.9 → 2.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/.turbo/turbo-build.log +27 -27
  2. package/CHANGELOG.md +70 -0
  3. package/dist/{Modal-ki8oiGbC.d.mts → Modal-DTeKLfEI.d.mts} +1 -1
  4. package/dist/{Modal-ki8oiGbC.d.ts → Modal-DTeKLfEI.d.ts} +1 -1
  5. package/dist/{ModalAction-BHG3Zbd9.d.mts → ModalExternalTrigger-BnbJk9zY.d.mts} +85 -3
  6. package/dist/{ModalAction-BHG3Zbd9.d.ts → ModalExternalTrigger-BnbJk9zY.d.ts} +85 -3
  7. package/dist/esm/{chunk-HOGEFGDN.js → chunk-62MRZAJV.js} +32 -10
  8. package/dist/esm/{chunk-HOGEFGDN.js.map → chunk-62MRZAJV.js.map} +1 -1
  9. package/dist/esm/{chunk-IYDY4OPB.js → chunk-72GBDCA2.js} +17 -1
  10. package/dist/esm/chunk-72GBDCA2.js.map +1 -0
  11. package/dist/esm/index.js +10 -4
  12. package/dist/esm/index.js.map +1 -1
  13. package/dist/esm/v1/index.js +1 -1
  14. package/dist/esm/v2/index.js +1 -1
  15. package/dist/index.d.mts +3 -3
  16. package/dist/index.d.ts +3 -3
  17. package/dist/index.js +81 -11
  18. package/dist/index.js.map +1 -1
  19. package/dist/v1/index.d.mts +2 -2
  20. package/dist/v1/index.d.ts +2 -2
  21. package/dist/v1/index.js +16 -0
  22. package/dist/v1/index.js.map +1 -1
  23. package/dist/v2/index.d.mts +4 -77
  24. package/dist/v2/index.d.ts +4 -77
  25. package/dist/v2/index.js +31 -9
  26. package/dist/v2/index.js.map +1 -1
  27. package/package.json +7 -7
  28. package/src/Modal.stories.tsx +64 -0
  29. package/src/__tests__/v1/Modal.test.tsx +146 -1
  30. package/src/__tests__/v2/Modal.test.tsx +77 -0
  31. package/src/index.ts +4 -0
  32. package/src/v1/Modal.tsx +30 -0
  33. package/src/v2/ModalTypes.ts +9 -2
  34. package/src/v2/ModalV2.stories.tsx +268 -49
  35. package/src/v2/components/ModalFooter.tsx +15 -4
  36. package/dist/esm/chunk-IYDY4OPB.js.map +0 -1
package/dist/esm/chunk-IYDY4OPB.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/v1/Modal.tsx","../../src/v1/styles.tsx","../../src/v1/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","// V1 Modal - Explicit exports for optimal tree shaking\nimport Modal from \"./Modal\";\n\nexport default Modal;\nexport { Modal };\n\n// Explicit type exports\nexport type {\n TypeModalProps,\n TypeModalHeaderProps,\n TypeModalFooterProps,\n TypeModalContentProps,\n TypeModalCloseButtonProps,\n} from \"./ModalTypes\";\n"],"mappings":"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","names":["React","Box","className","jsx","Box","width","zIndex"]}