@sproutsocial/seeds-react-modal 1.0.1 → 1.0.3

package/dist/esm/chunk-GKQRFPCX.js

@@ -0,0 +1,642 @@
+// src/v2/ModalV2.tsx
+import * as React10 from "react";
+import * as Dialog8 from "@radix-ui/react-dialog";
+
+// src/v2/ModalV2Styles.tsx
+import "react";
+import styled from "styled-components";
+import { width, zIndex } from "styled-system";
+import * as Dialog from "@radix-ui/react-dialog";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+import Box from "@sproutsocial/seeds-react-box";
+
+// src/shared/constants.ts
+var DEFAULT_MODAL_Z_INDEX = 6;
+var DEFAULT_OVERLAY_Z_INDEX_OFFSET = -1;
+var DEFAULT_MODAL_WIDTH = "600px";
+var DEFAULT_MODAL_BG = "container.background.base";
+var BODY_PADDING = "64px";
+var MODAL_SIZE_PRESETS = {
+  small: "400px",
+  medium: "600px",
+  large: "800px",
+  full: "90vw"
+};
+var MODAL_PRIORITY_Z_INDEX = {
+  low: 100,
+  medium: 1e3,
+  high: 2e3
+};
+
+// src/v2/ModalV2Styles.tsx
+var StyledOverlay = styled(Dialog.Overlay)`
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  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};
+  z-index: ${(props) => props.zIndex ? props.zIndex + DEFAULT_OVERLAY_Z_INDEX_OFFSET : 999};
+
+  ${zIndex}
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+  }
+`;
+var StyledContent = styled(Dialog.Content)`
+  position: fixed;
+  ${(props) => props.draggable ? `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      ` : `
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      `}
+  display: flex;
+  flex-direction: column;
+  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});
+  z-index: ${(props) => props.zIndex || 1e3};
+
+  /* Draggable styling */
+  ${(props) => props.draggable && `
+    cursor: ${props.isDragging ? "grabbing" : "grab"};
+    user-select: none;
+  `}
+
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    height: calc(100vh - ${BODY_PADDING});
+  }
+
+  ${width}
+  ${COMMON}
+
+  /* Enhanced Radix Dialog animations */
+  opacity: 0;
+  ${(props) => !props.draggable ? `
+    transform: translate(-50%, -50%) scale(0.95);
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout},
+      transform ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  ` : `
+    transition: opacity ${props.theme.duration.medium} ${props.theme.easing.ease_inout};
+  `}
+
+  &[data-state="open"] {
+    opacity: 1;
+    ${(props) => !props.draggable ? `transform: translate(-50%, -50%) scale(1);` : ``}
+  }
+  &[data-state="closed"] {
+    opacity: 0;
+    ${(props) => !props.draggable ? `transform: translate(-50%, -50%) scale(0.95);` : ``}
+  }
+`;
+var Content2 = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  min-height: 80px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  padding: 0 ${(props) => props.theme.space[300]}
+    ${(props) => props.theme.space[300]} ${(props) => props.theme.space[300]};
+  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    flex-basis: 100%;
+  }
+`;
+var Header = styled(Box)`
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 0 0 auto;
+`;
+var Footer = styled(Box)`
+  flex: 0 0 auto;
+  font-family: ${(props) => props.theme.fontFamily};
+  padding: ${(props) => props.theme.space[400]}
+    ${(props) => props.theme.space[300]};
+  border-bottom-right-radius: ${(props) => props.theme.radii[500]};
+  border-bottom-left-radius: ${(props) => props.theme.radii[500]};
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: ${(props) => props.theme.space[100]};
+`;
+StyledOverlay.displayName = "ModalOverlay";
+StyledContent.displayName = "ModalContent";
+Content2.displayName = "ModalContent";
+Header.displayName = "ModalHeader";
+Footer.displayName = "ModalFooter";
+
+// src/v2/components/ModalHeader.tsx
+import * as React3 from "react";
+import * as Dialog3 from "@radix-ui/react-dialog";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+
+// src/v2/components/ModalCloseButton.tsx
+import * as React2 from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import styled2 from "styled-components";
+import Icon from "@sproutsocial/seeds-react-icon";
+import { jsx } from "react/jsx-runtime";
+var CloseButtonWrapper = styled2.button`
+  width: ${(p) => p.size || 44}px;
+  height: ${(p) => p.size || 44}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  ${(p) => p.position === "absolute" && `
+    position: absolute;
+    top: 0px;
+    ${p.side || "right"}: ${p.offset || -48}px;
+    z-index: 1;
+  `}
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ModalCloseButton = (props) => {
+  const {
+    children,
+    onClick,
+    asChild,
+    closeButtonLabel = "Close modal",
+    size = 44,
+    position = "absolute",
+    side = "right",
+    offset = -48,
+    ...rest
+  } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: React2.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+    CloseButtonWrapper,
+    {
+      onClick: handleClick,
+      size,
+      position,
+      side,
+      offset,
+      "aria-label": closeButtonLabel,
+      title: closeButtonLabel,
+      ...rest,
+      children: children || /* @__PURE__ */ jsx(Icon, { name: "x-outline", size: "small" })
+    }
+  ) });
+};
+ModalCloseButton.displayName = "ModalCloseButton";
+
+// src/v2/components/ModalHeader.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var ModalHeader = (props) => {
+  const {
+    title,
+    subtitle,
+    children,
+    bordered,
+    titleProps = {},
+    subtitleProps = {},
+    showInlineClose,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx2(Header, { ...rest, children: children ? children : /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+    /* @__PURE__ */ jsxs(Box2, { children: [
+      title && /* @__PURE__ */ jsx2(Dialog3.Title, { asChild: true, ...titleProps, children: /* @__PURE__ */ jsx2(Text.Headline, { children: title }) }),
+      subtitle && /* @__PURE__ */ jsx2(Dialog3.Description, { asChild: true, ...subtitleProps, children: /* @__PURE__ */ jsx2(Text, { as: "div", fontSize: 200, children: subtitle }) })
+    ] }),
+    showInlineClose && /* @__PURE__ */ jsx2(Box2, { display: "flex", alignItems: "center", justifyContent: "flex-end", children: /* @__PURE__ */ jsx2(ModalCloseButton, { position: "relative", offset: 0 }) })
+  ] }) });
+};
+ModalHeader.displayName = "ModalHeader";
+
+// src/v2/components/ModalFooter.tsx
+import "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ModalFooter = (props) => {
+  const { bg = DEFAULT_MODAL_BG, children, ...rest } = props;
+  return /* @__PURE__ */ jsx3(
+    Footer,
+    {
+      bg,
+      borderTop: 500,
+      borderColor: "container.border.base",
+      ...rest,
+      children
+    }
+  );
+};
+ModalFooter.displayName = "ModalFooter";
+
+// src/v2/components/ModalContent.tsx
+import * as React5 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ModalContent = React5.forwardRef(({ children, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx4(Content2, { "data-qa-modal": true, ref, ...rest, children });
+});
+ModalContent.displayName = "ModalContent";
+
+// src/v2/components/ModalDescription.tsx
+import * as React6 from "react";
+import * as Dialog4 from "@radix-ui/react-dialog";
+import Box3 from "@sproutsocial/seeds-react-box";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ModalDescription = React6.forwardRef(({ children, descriptionProps = {}, ...rest }, ref) => {
+  return /* @__PURE__ */ jsx5(Dialog4.Description, { asChild: true, ...descriptionProps, children: /* @__PURE__ */ jsx5(Box3, { ref, ...rest, children }) });
+});
+ModalDescription.displayName = "ModalDescription";
+
+// src/v2/components/ModalTrigger.tsx
+import * as React7 from "react";
+import * as Dialog5 from "@radix-ui/react-dialog";
+import Button from "@sproutsocial/seeds-react-button";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ModalTrigger = (props) => {
+  const { children, onClick, asChild, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  if (asChild) {
+    return /* @__PURE__ */ jsx6(Dialog5.Trigger, { asChild: true, children: React7.cloneElement(children, {
+      onClick: handleClick,
+      ...rest
+    }) });
+  }
+  return /* @__PURE__ */ jsx6(Dialog5.Trigger, { asChild: true, children: /* @__PURE__ */ jsx6(Button, { onClick: handleClick, ...rest, children }) });
+};
+ModalTrigger.displayName = "ModalTrigger";
+
+// src/v2/components/ModalClose.tsx
+import "react";
+import * as Dialog6 from "@radix-ui/react-dialog";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var ModalClose = (props) => {
+  const { children, onClick, asChild = false, ...rest } = props;
+  const handleClick = (e) => {
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ jsx7(Dialog6.Close, { asChild, onClick: handleClick, ...rest, children });
+};
+ModalClose.displayName = "ModalClose";
+
+// src/v2/components/ModalRail.tsx
+import * as React9 from "react";
+import * as Dialog7 from "@radix-ui/react-dialog";
+import styled3 from "styled-components";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Rail = styled3.div`
+  position: absolute;
+  top: ${(p) => p.offset}px;
+  ${(p) => p.side === "right" ? `right: calc(-1 * (${p.size}px + ${p.offset}px));` : `left: calc(-1 * (${p.size}px + ${p.offset}px));`}
+  display: grid;
+  grid-auto-flow: row;
+  gap: ${(p) => p.gap}px;
+  z-index: 1;
+
+  @media (max-width: ${(p) => p.collapseAt}px) {
+    ${(p) => p.side === "right" ? `right: ${p.offset}px;` : `left: ${p.offset}px;`}
+  }
+`;
+var RailBtn = styled3.button`
+  width: ${(p) => p.size}px;
+  height: ${(p) => p.size}px;
+  display: inline-grid;
+  place-items: center;
+  border-radius: 8px;
+  border: none;
+  background: rgba(22, 32, 32, 0.56);
+  color: #ffffff;
+  cursor: pointer;
+  outline: none;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: rgba(22, 32, 32, 0.7);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #205bc3;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;
+var ModalRail = ({
+  side = "right",
+  offset = 12,
+  gap = 12,
+  size = 44,
+  collapseAt = 640,
+  children
+}) => {
+  return /* @__PURE__ */ jsx8(
+    Rail,
+    {
+      "data-slot": "modal-rail",
+      side,
+      offset,
+      gap,
+      size,
+      collapseAt,
+      "aria-label": "Modal quick actions",
+      children: React9.Children.map(
+        children,
+        (child) => React9.isValidElement(child) ? React9.cloneElement(child, { size }) : child
+      )
+    }
+  );
+};
+var ModalAction = ({
+  "aria-label": ariaLabel,
+  iconName,
+  disabled,
+  size = 44,
+  actionType,
+  onClick,
+  ...rest
+}) => {
+  const Btn = /* @__PURE__ */ jsx8(
+    RailBtn,
+    {
+      size,
+      "aria-label": ariaLabel,
+      title: ariaLabel,
+      disabled,
+      ...rest,
+      children: iconName ? /* @__PURE__ */ jsx8(Icon2, { name: iconName, size: "small" }) : ariaLabel
+    }
+  );
+  return actionType === "close" ? /* @__PURE__ */ jsx8(Dialog7.Close, { asChild: true, children: Btn }) : React9.cloneElement(Btn, { onClick });
+};
+
+// src/v2/ModalV2.tsx
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var DraggableModalContent = ({
+  children,
+  computedWidth,
+  bg,
+  computedZIndex,
+  label,
+  dataAttributes,
+  draggable,
+  rest
+}) => {
+  const [position, setPosition] = React10.useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = React10.useState(false);
+  const contentRef = React10.useRef(null);
+  const handleMouseDown = React10.useCallback(
+    (e) => {
+      if (!draggable) return;
+      const target = e.target;
+      if (target.tagName === "BUTTON" || target.tagName === "INPUT" || target.closest("button")) {
+        return;
+      }
+      e.preventDefault();
+      setIsDragging(true);
+      const rect = contentRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      const offsetX = e.clientX - rect.left;
+      const offsetY = e.clientY - rect.top;
+      const handleMouseMove = (e2) => {
+        e2.preventDefault();
+        const newX = e2.clientX - offsetX;
+        const newY = e2.clientY - offsetY;
+        const modalWidth = rect.width;
+        const modalHeight = rect.height;
+        const maxX = window.innerWidth - modalWidth;
+        const minX = 0;
+        const maxY = window.innerHeight - modalHeight;
+        const minY = 0;
+        const constrainedX = Math.max(minX, Math.min(maxX, newX));
+        const constrainedY = Math.max(minY, Math.min(maxY, newY));
+        const centerX = window.innerWidth / 2 - modalWidth / 2;
+        const centerY = window.innerHeight / 2 - modalHeight / 2;
+        setPosition({
+          x: constrainedX - centerX,
+          y: constrainedY - centerY
+        });
+      };
+      const handleMouseUp = () => {
+        setIsDragging(false);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    },
+    [draggable]
+  );
+  return /* @__PURE__ */ jsx9(
+    StyledContent,
+    {
+      ref: contentRef,
+      width: computedWidth,
+      bg,
+      zIndex: computedZIndex,
+      "aria-label": label,
+      draggable,
+      isDragging,
+      onMouseDown: handleMouseDown,
+      style: draggable ? {
+        transform: `translate(calc(-50% + ${position.x}px), calc(-50% + ${position.y}px))`,
+        transition: isDragging ? "none" : void 0
+      } : void 0,
+      ...dataAttributes,
+      ...rest,
+      children
+    }
+  );
+};
+var Modal = (props) => {
+  const {
+    children,
+    modalTrigger,
+    draggable = false,
+    open,
+    defaultOpen,
+    onOpenChange,
+    "aria-label": label,
+    title,
+    subtitle,
+    description,
+    size,
+    priority,
+    data = {},
+    bg = DEFAULT_MODAL_BG,
+    showOverlay = true,
+    actions,
+    railProps,
+    ...rest
+  } = props;
+  const handleOpenChange = React10.useCallback(
+    (newOpen) => {
+      onOpenChange?.(newOpen);
+    },
+    [onOpenChange]
+  );
+  const computedWidth = React10.useMemo(() => {
+    if (size) {
+      if (typeof size === "string" && size in MODAL_SIZE_PRESETS) {
+        return MODAL_SIZE_PRESETS[size];
+      }
+      return size;
+    }
+    return DEFAULT_MODAL_WIDTH;
+  }, [size]);
+  const computedZIndex = React10.useMemo(() => {
+    if (priority) {
+      return MODAL_PRIORITY_Z_INDEX[priority];
+    }
+    return DEFAULT_MODAL_Z_INDEX;
+  }, [priority]);
+  const dataAttributes = React10.useMemo(() => {
+    const attrs = {};
+    Object.entries(data).forEach(([key, value]) => {
+      attrs[`data-${key}`] = String(value);
+    });
+    attrs["data-qa-modal"] = "";
+    if (open !== void 0) {
+      attrs["data-qa-modal-open"] = String(open);
+    }
+    return attrs;
+  }, [data, open]);
+  const shouldRenderHeader = Boolean(title || subtitle);
+  const dialogRootProps = React10.useMemo(() => {
+    const props2 = {};
+    if (open !== void 0) {
+      props2.open = open;
+    } else if (defaultOpen !== void 0) {
+      props2.defaultOpen = defaultOpen;
+    } else {
+      props2.defaultOpen = false;
+    }
+    if (onOpenChange) {
+      props2.onOpenChange = handleOpenChange;
+    }
+    return props2;
+  }, [open, defaultOpen, handleOpenChange, onOpenChange]);
+  const triggers = [];
+  const content = [];
+  if (modalTrigger) {
+    triggers.push(
+      /* @__PURE__ */ jsx9(Dialog8.Trigger, { asChild: true, children: modalTrigger }, "modal-trigger")
+    );
+    content.push(children);
+  } else {
+    React10.Children.forEach(children, (child) => {
+      if (React10.isValidElement(child) && child.type === ModalTrigger) {
+        triggers.push(child);
+      } else {
+        content.push(child);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxs2(Dialog8.Root, { ...dialogRootProps, children: [
+    triggers,
+    /* @__PURE__ */ jsxs2(Dialog8.Portal, { children: [
+      showOverlay && /* @__PURE__ */ jsx9(StyledOverlay, { zIndex: computedZIndex }),
+      /* @__PURE__ */ jsxs2(
+        DraggableModalContent,
+        {
+          computedWidth,
+          bg,
+          computedZIndex,
+          label,
+          dataAttributes,
+          draggable,
+          rest,
+          children: [
+            /* @__PURE__ */ jsxs2(ModalRail, { ...railProps, children: [
+              /* @__PURE__ */ jsx9(
+                ModalAction,
+                {
+                  actionType: "close",
+                  "aria-label": "Close",
+                  iconName: "x-outline"
+                }
+              ),
+              actions?.map((action, idx) => /* @__PURE__ */ jsx9(ModalAction, { ...action }, idx))
+            ] }),
+            shouldRenderHeader && /* @__PURE__ */ jsx9(ModalHeader, { title, subtitle }),
+            description && /* @__PURE__ */ jsx9(ModalDescription, { children: description }),
+            content
+          ]
+        }
+      )
+    ] })
+  ] });
+};
+var ModalV2_default = Modal;
+
+export {
+  DEFAULT_MODAL_Z_INDEX,
+  DEFAULT_OVERLAY_Z_INDEX_OFFSET,
+  DEFAULT_MODAL_WIDTH,
+  DEFAULT_MODAL_BG,
+  BODY_PADDING,
+  MODAL_SIZE_PRESETS,
+  MODAL_PRIORITY_Z_INDEX,
+  ModalCloseButton,
+  ModalHeader,
+  ModalFooter,
+  ModalContent,
+  ModalDescription,
+  ModalTrigger,
+  ModalClose,
+  ModalRail,
+  ModalAction,
+  ModalV2_default
+};
+//# sourceMappingURL=chunk-GKQRFPCX.js.map