npm - @sproutsocial/seeds-react-modal - Versions diffs - 1.0.2 → 1.0.3 - Mend

@sproutsocial/seeds-react-modal 1.0.2 → 1.0.3

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 (54) hide show

package/.turbo/turbo-build.log +39 -19
package/CHANGELOG.md +8 -0
package/dist/Modal-ki8oiGbC.d.mts +69 -0
package/dist/Modal-ki8oiGbC.d.ts +69 -0
package/dist/ModalRail-OQ8DZ1vH.d.mts +178 -0
package/dist/ModalRail-OQ8DZ1vH.d.ts +178 -0
package/dist/esm/chunk-GKQRFPCX.js +642 -0
package/dist/esm/chunk-GKQRFPCX.js.map +1 -0
package/dist/esm/chunk-IYDY4OPB.js +237 -0
package/dist/esm/chunk-IYDY4OPB.js.map +1 -0
package/dist/esm/index.js +28 -235
package/dist/esm/index.js.map +1 -1
package/dist/esm/v1/index.js +9 -0
package/dist/esm/v1/index.js.map +1 -0
package/dist/esm/v2/index.js +39 -0
package/dist/esm/v2/index.js.map +1 -0
package/dist/index.d.mts +11 -66
package/dist/index.d.ts +11 -66
package/dist/index.js +658 -17
package/dist/index.js.map +1 -1
package/dist/v1/index.d.mts +11 -0
package/dist/v1/index.d.ts +11 -0
package/dist/v1/index.js +273 -0
package/dist/v1/index.js.map +1 -0
package/dist/v2/index.d.mts +26 -0
package/dist/v2/index.d.ts +26 -0
package/dist/v2/index.js +694 -0
package/dist/v2/index.js.map +1 -0
package/package.json +33 -13
package/src/Modal.stories.tsx +1 -1
package/src/__tests__/v1/Modal.test.tsx +134 -0
package/src/__tests__/v1/Modal.typetest.tsx +209 -0
package/src/index.ts +36 -3
package/src/shared/constants.ts +28 -0
package/src/v1/Modal.tsx +159 -0
package/src/v1/ModalTypes.ts +67 -0
package/src/v1/index.ts +14 -0
package/src/v1/styles.tsx +141 -0
package/src/v2/ModalV2.stories.tsx +282 -0
package/src/v2/ModalV2.tsx +306 -0
package/src/v2/ModalV2Styles.tsx +150 -0
package/src/v2/ModalV2Types.ts +158 -0
package/src/v2/components/ModalClose.tsx +29 -0
package/src/v2/components/ModalCloseButton.tsx +100 -0
package/src/v2/components/ModalContent.tsx +16 -0
package/src/v2/components/ModalDescription.tsx +19 -0
package/src/v2/components/ModalFooter.tsx +20 -0
package/src/v2/components/ModalHeader.tsx +52 -0
package/src/v2/components/ModalRail.tsx +121 -0
package/src/v2/components/ModalTrigger.tsx +39 -0
package/src/v2/components/index.ts +8 -0
package/src/v2/index.ts +37 -0
package/tsconfig.json +7 -1
package/tsup.config.ts +5 -1

package/src/v1/Modal.tsx ADDED Viewed

@@ -0,0 +1,159 @@
+import * as React from "react";
+import { useContext } from "react";
+import Box 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";
+import { Container, Content, Header, Footer, Body } from "./styles";
+import type {
+  TypeModalProps,
+  TypeModalCloseButtonProps,
+  TypeModalContentProps,
+  TypeModalFooterProps,
+  TypeModalHeaderProps,
+} from "./ModalTypes";
+type TypeModalContext = Partial<{
+  onClose: () => void;
+  closeButtonLabel: string;
+  label: string;
+}>;
+const ModalContext = React.createContext<TypeModalContext>({});
+const ModalHeader = (props: TypeModalHeaderProps) => {
+  const { title, subtitle, children, bordered, ...rest } = props;
+  return (
+    <Header bordered={title || subtitle || bordered} {...rest}>
+      {children ? (
+        children
+      ) : (
+        <React.Fragment>
+          <Box>
+            {title && (
+              <Text as="h1" fontSize={400} fontWeight="semibold">
+                {title}
+              </Text>
+            )}
+            {subtitle && (
+              <Text as="div" fontSize={200}>
+                {subtitle}
+              </Text>
+            )}
+          </Box>
+          <Box display="flex" alignItems="center" justify-content="flex-end">
+            <ModalCloseButton ml={400} />
+          </Box>
+        </React.Fragment>
+      )}
+    </Header>
+  );
+};
+const ModalCloseButton = (props: TypeModalCloseButtonProps) => {
+  const { onClose, closeButtonLabel } = useContext(ModalContext);
+  if (!onClose) return null;
+  return (
+    <Button onClick={onClose} {...props}>
+      <Icon name="x-outline" ariaLabel={closeButtonLabel} />
+    </Button>
+  );
+};
+const ModalFooter = ({
+  bg = "container.background.base",
+  ...rest
+}: TypeModalFooterProps) => (
+  <Footer
+    bg={bg}
+    borderTop={500}
+    borderColor="container.border.base"
+    {...rest}
+  />
+);
+const ModalContent = React.forwardRef(
+  ({ children, ...rest }: TypeModalContentProps, ref) => {
+    const { label } = useContext(ModalContext);
+    return (
+      <Content data-qa-modal data-qa-label={label} ref={ref} {...rest}>
+        {children}
+      </Content>
+    );
+  }
+);
+/**
+ * The modal you want
+ */
+const Modal = (props: TypeModalProps) => {
+  const {
+    appElementSelector,
+    children,
+    isOpen,
+    label,
+    onClose,
+    closeButtonLabel,
+    width = "800px",
+    zIndex = 6,
+    data = {},
+    ...rest
+  } = props;
+  const isCloseable = Boolean(onClose);
+  const appElement =
+    appElementSelector && document
+      ? (document.querySelector(appElementSelector) as HTMLElement)
+      : undefined;
+  return (
+    <Container
+      appElement={appElement}
+      ariaHideApp={!!appElement}
+      isOpen={isOpen}
+      contentLabel={label}
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
+      onRequestClose={onClose || (() => {})}
+      shouldFocusAfterRender={true}
+      shouldCloseOnOverlayClick={isCloseable}
+      shouldCloseOnEsc={isCloseable}
+      shouldReturnFocusAfterClose={true}
+      closeTimeoutMS={200}
+      role="dialog"
+      width={width}
+      zIndex={zIndex}
+      data={{
+        "qa-modal": "",
+        "qa-modal-isopen": isOpen,
+        ...data,
+      }}
+      {...rest}
+    >
+      <React.Fragment>
+        <Body />
+        <ModalContext.Provider
+          value={{
+            onClose,
+            closeButtonLabel,
+            label,
+          }}
+        >
+          {children}
+        </ModalContext.Provider>
+      </React.Fragment>
+    </Container>
+  );
+};
+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;
+export default Modal;

package/src/v1/ModalTypes.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import * as React from "react";
+import ReactModal from "react-modal";
+import type {
+  TypeBoxProps,
+  TypeContainerProps,
+} from "@sproutsocial/seeds-react-box";
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+export interface TypeModalCloseButtonProps
+  extends Omit<TypeButtonProps, "children"> {
+  children?: void | null;
+}
+export 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;
+}
+export interface TypeModalFooterProps extends TypeBoxProps {
+  bg?: string;
+  children: React.ReactNode;
+}
+export interface TypeModalContentProps extends TypeBoxProps {
+  children?: React.ReactNode;
+}
+export interface TypeModalProps
+  extends TypeContainerProps,
+    // @ts-notes - onClose is an alias for onRequestClose so we don't need to include it here
+    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>;
+}

package/src/v1/index.ts ADDED Viewed

@@ -0,0 +1,14 @@
+// V1 Modal - Explicit exports for optimal tree shaking
+import Modal from "./Modal";
+export default Modal;
+export { Modal };
+// Explicit type exports
+export type {
+  TypeModalProps,
+  TypeModalHeaderProps,
+  TypeModalFooterProps,
+  TypeModalContentProps,
+  TypeModalCloseButtonProps,
+} from "./ModalTypes";

package/src/v1/styles.tsx ADDED Viewed

@@ -0,0 +1,141 @@
+import React from "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, { type TypeContainerProps } from "@sproutsocial/seeds-react-box";
+// This is the max space allowed between the modal and the edge of the browser
+const BODY_PADDING = "64px";
+const ReactModalAdapter = ({
+  className = "",
+  ...props
+}: { className?: string } & Omit<
+  ReactModal.Props,
+  "portalClassName" | "className" | "overlayClassName"
+>) => {
+  // We want to create *__Content and *__Overlay class names on the subcomponents.
+  // Because `className` could be a space-separated list of class names, we make
+  // sure that we append `__Content` and `__Overlay` to every class name.
+  const contentClassName = className
+    .split(" ")
+    .map((className) => `${className} ${className}__Content`)
+    .join(" ");
+  const overlayClassName = className
+    .split(" ")
+    .map((className) => `${className} ${className}__Overlay`)
+    .join(" ");
+  return (
+    <ReactModal
+      portalClassName={className}
+      className={contentClassName}
+      overlayClassName={overlayClassName}
+      {...props}
+    />
+  );
+};
+export const Body = createGlobalStyle`
+  .ReactModal__Body--open {
+    overflow: hidden;
+  }
+`;
+export const Container = styled(ReactModalAdapter)<TypeContainerProps>`
+  &__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}
+  }
+`;
+export const 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%;
+  }
+`;
+export const HeaderContainer = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[450]};
+`;
+export const Header = styled(HeaderContainer)<{ bordered?: boolean }>`
+  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;
+`;
+export const 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";

package/src/v2/ModalV2.stories.tsx ADDED Viewed

@@ -0,0 +1,282 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Modal, ModalHeader, ModalFooter, ModalContent, ModalClose } from "./";
+const meta: Meta<typeof Modal> = {
+  title: "Components/Modal (Radix UI)",
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Modal is the new modal component built with Radix UI Dialog. It provides the same API as the original Modal but with improved accessibility and modern React patterns.",
+      },
+    },
+  },
+  argTypes: {
+    open: {
+      control: { type: "boolean" },
+      description:
+        "Controls whether the modal is open or closed (controlled mode)",
+    },
+    defaultOpen: {
+      control: { type: "boolean" },
+      description: "Default open state for uncontrolled mode",
+    },
+    onOpenChange: {
+      action: "openChanged",
+      description: "Callback when open state changes",
+    },
+    "aria-label": {
+      control: { type: "text" },
+      description: "Accessibility label for screen readers",
+    },
+    showOverlay: {
+      control: { type: "boolean" },
+      description: "Whether to show the background overlay",
+    },
+    title: {
+      control: { type: "text" },
+      description: "Modal title (auto-creates header)",
+    },
+    subtitle: {
+      control: { type: "text" },
+      description: "Modal subtitle (auto-creates header)",
+    },
+    description: {
+      control: { type: "text" },
+      description: "Modal description (auto-wrapped in Dialog.Description)",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large", "full", "400px", "800px"],
+      description: "Modal size preset or custom width",
+    },
+    priority: {
+      control: { type: "select" },
+      options: ["low", "medium", "high"],
+      description: "Priority level for z-index",
+    },
+    draggable: {
+      control: { type: "boolean" },
+      description: "Enable draggable functionality",
+    },
+  },
+  args: {
+    "aria-label": "Example Modal",
+    showOverlay: true,
+    size: "medium",
+    draggable: false,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof Modal>;
+export const Default: Story = {
+  render: (args) => {
+    return (
+      <Modal
+        {...args}
+        modalTrigger={<Button appearance="primary">Open Modal</Button>}
+      >
+        <ModalContent>
+          <ModalHeader title="Modal Title" subtitle="This is a subtitle" />
+          <Box
+            border="1px dashed"
+            borderColor="purple.500"
+            p={500}
+            bg="purple.200"
+            borderRadius="6px"
+          >
+            <Text>
+              This modal uses uncontrolled state - no need to manage open/close
+              state! The modalTrigger prop and floating close button handle
+              everything.
+            </Text>
+          </Box>
+          <ModalFooter>
+            <Box display="flex" justifyContent="flex-end" gap={300}>
+              <ModalClose asChild>
+                <Button>Cancel</Button>
+              </ModalClose>
+              <ModalClose asChild>
+                <Button appearance="primary">Confirm</Button>
+              </ModalClose>
+            </Box>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  },
+};
+export const WithActions: Story = {
+  render: () => {
+    return (
+      <Modal
+        size="medium"
+        modalTrigger={
+          <Button appearance="primary">Open Modal With Actions</Button>
+        }
+        actions={[
+          {
+            "aria-label": "Expand",
+            iconName: "arrows-pointing-out",
+            onClick: () => console.log("expand"),
+          },
+          {
+            "aria-label": "React",
+            iconName: "sprout-leaf-outline",
+            onClick: () => console.log("reacted"),
+          },
+        ]}
+      >
+        <ModalContent>
+          <ModalHeader
+            title="Modal With Actions"
+            subtitle="This modal has extra floating actions"
+          />
+          <Box
+            border="1px dashed"
+            borderColor="purple.500"
+            p={500}
+            bg="purple.200"
+            borderRadius="6px"
+          >
+            <Text>
+              This modal shows the floating close by default and includes extra
+              actions on the rail via the actions prop. The floating close
+              button is always present, and additional actions appear below it.
+            </Text>
+          </Box>
+          <ModalFooter>
+            <Box display="flex" justifyContent="flex-end" gap={300}>
+              <ModalClose asChild>
+                <Button>Cancel</Button>
+              </ModalClose>
+              <ModalClose asChild>
+                <Button appearance="primary">Confirm</Button>
+              </ModalClose>
+            </Box>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  },
+};
+export const DraggableModal: Story = {
+  render: () => {
+    return (
+      <Modal
+        aria-label="Draggable Modal"
+        size="medium"
+        draggable={true}
+        showOverlay={false}
+        modalTrigger={
+          <Button appearance="primary">Open Draggable Modal</Button>
+        }
+      >
+        <ModalContent>
+          <ModalHeader
+            title="Draggable Modal"
+            subtitle="Click and drag anywhere on this modal to move it around"
+          />
+          <Box
+            border="1px dashed"
+            borderColor="blue.500"
+            p={500}
+            bg="blue.200"
+            borderRadius="6px"
+          >
+            <Text>
+              This modal is draggable! You can click and drag anywhere on the
+              modal to move it around the screen. The overlay has been disabled
+              so you can see the modal moving freely. Try dragging it to
+              different corners of the screen.
+            </Text>
+          </Box>
+          <ModalFooter>
+            <Box display="flex" justifyContent="flex-end" gap={300}>
+              <ModalClose asChild>
+                <Button appearance="primary">Got it!</Button>
+              </ModalClose>
+            </Box>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    );
+  },
+};
+export const ControlledState: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [count, setCount] = useState(0);
+    return (
+      <div>
+        <Box mb={400}>
+          <Text>
+            Use controlled state when you need to manage modal state externally.
+            Modal opened count: {count}
+          </Text>
+        </Box>
+        <Modal
+          open={isOpen}
+          onOpenChange={(open) => {
+            setIsOpen(open);
+            if (open) setCount((c) => c + 1);
+          }}
+          aria-label="Controlled Modal"
+          size="medium"
+          modalTrigger={
+            <Button appearance="primary">Open Controlled Modal</Button>
+          }
+        >
+          <ModalContent>
+            <ModalHeader
+              title="Controlled Modal"
+              subtitle="This modal's state is managed externally"
+            />
+            <Box
+              border="1px dashed"
+              borderColor="purple.500"
+              p={500}
+              bg="purple.200"
+              borderRadius="6px"
+            >
+              <Text>
+                This modal's state is controlled by the parent component. You
+                can track when it opens/closes and perform side effects. The
+                floating close button still works, but the state is managed
+                externally.
+              </Text>
+            </Box>
+            <ModalFooter>
+              <Box display="flex" justifyContent="flex-end" gap={300}>
+                <ModalClose asChild>
+                  <Button>Cancel</Button>
+                </ModalClose>
+                <ModalClose asChild>
+                  <Button appearance="primary">Confirm</Button>
+                </ModalClose>
+              </Box>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+        <Box mt={300}>
+          <Button appearance="secondary" onClick={() => setIsOpen(!isOpen)}>
+            {isOpen ? "Close" : "Open"} Modal Programmatically
+          </Button>
+        </Box>
+      </div>
+    );
+  },
+};