@sproutsocial/seeds-react-peek-in 0.0.11 → 0.2.8

package/dist/esm/index.js

@@ -1,6 +1,11 @@
 // src/PeekIn.tsx
 import * as React21 from "react";
 import Box4 from "@sproutsocial/seeds-react-box";
+import Button2 from "@sproutsocial/seeds-react-button";
+import Drawer2 from "@sproutsocial/seeds-react-drawer";
+import Icon2 from "@sproutsocial/seeds-react-icon";
+import Text2 from "@sproutsocial/seeds-react-text";
+import { useIsMobile as useIsMobile2 } from "@sproutsocial/seeds-react-hooks";
 import { Modal, ModalBody } from "@sproutsocial/seeds-react-modal/v2";
 
 // src/PeekInContext.ts
@@ -63,31 +68,34 @@ var PeekInHeader = ({
 };
 PeekInHeader.displayName = "PeekInHeader";
 
-// src/components/PeekInMain.tsx
+// src/components/PeekInContent.tsx
 import "react";
 import Box2 from "@sproutsocial/seeds-react-box";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var PeekInMain = ({ children }) => {
+var PeekInContent = ({
+  children
+}) => {
   return /* @__PURE__ */ jsx2(
     Box2,
     {
       flex: "1 1 auto",
       overflow: "auto",
       color: "text.body",
-      "data-slot": "peek-in-main",
-      "data-qa-peek-in-main": true,
+      "data-slot": "peek-in-content",
+      "data-qa-peek-in-content": true,
+      "data-drawer-content": "",
       children
     }
   );
 };
-PeekInMain.displayName = "PeekInMain";
+PeekInContent.displayName = "PeekInContent";
 
-// src/components/PeekInRail.tsx
-import "react";
-import styled from "styled-components";
+// src/components/PeekInPanel.tsx
+import * as React4 from "react";
 import Box3 from "@sproutsocial/seeds-react-box";
-import Text2 from "@sproutsocial/seeds-react-text";
-import { AnimatePresence, motion } from "motion/react";
+import Drawer, { DrawerContext } from "@sproutsocial/seeds-react-drawer";
+import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
+import { Panel, PanelProvider } from "@sproutsocial/seeds-react-panel";
 
 // src/constants.ts
 var PEEK_IN_WIDTH = "calc(100vw - 64px)";
@@ -96,66 +104,86 @@ var ACTION_BUTTON_SIZE = 44;
 var ACTION_STRIP_OFFSET = 12;
 var ACTION_STRIP_TOTAL_WIDTH = ACTION_BUTTON_SIZE + ACTION_STRIP_OFFSET;
 var RAIL_DEFAULT_WIDTH = 360;
-var RAIL_ANIMATION_DURATION = 0.64;
+var RAIL_GAP = 4;
 
-// src/components/PeekInRail.tsx
+// src/components/PeekInPanel.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var RailWrapper = styled(motion.div)`
-  overflow: hidden;
-  flex-shrink: 0;
-  padding-left: 4px;
-`;
-var RailPanel = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: ${(props) => props.theme.colors.container.background.base};
-  border-radius: ${(props) => props.theme.radii[800]};
-  height: 100%;
-  overflow: hidden;
-`;
-var PeekInRail = ({
+var PeekInPanel = ({
   title,
-  children
+  children,
+  snapPoints,
+  defaultSnapPoint,
+  snapPoint,
+  onSnapPointChange,
+  snapToSequentialPoints,
+  disableCloseOnClickOutside,
+  actionsInHeader
 }) => {
-  const { railOpen, railId } = usePeekInContext();
-  return /* @__PURE__ */ jsx3(AnimatePresence, { initial: false, children: railOpen && /* @__PURE__ */ jsx3(
-    RailWrapper,
+  const { panelOpen, setPanelOpen, panelId } = usePeekInContext();
+  const isMobile = useIsMobile();
+  const parentDrawer = React4.useContext(DrawerContext);
+  React4.useEffect(() => {
+    if (isMobile) parentDrawer.setIsLocked(panelOpen);
+  }, [isMobile, panelOpen, parentDrawer]);
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs2(
+      Drawer,
+      {
+        open: panelOpen,
+        onClose: () => setPanelOpen(false),
+        direction: "bottom",
+        closeButtonLabel: "Close",
+        snapPoints,
+        defaultSnapPoint,
+        snapPoint,
+        onSnapPointChange,
+        snapToSequentialPoints,
+        disableCloseOnClickOutside,
+        actionsInHeader,
+        "aria-label": title ?? "Panel",
+        children: [
+          /* @__PURE__ */ jsx3(Drawer.Header, { title }),
+          /* @__PURE__ */ jsx3(Drawer.Content, { children: /* @__PURE__ */ jsx3(
+            Box3,
+            {
+              id: panelId,
+              role: "region",
+              "aria-label": title,
+              "data-slot": "peek-in-panel",
+              "data-qa-peek-in-panel": true,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx3(PanelProvider, { open: panelOpen, onOpenChange: setPanelOpen, children: /* @__PURE__ */ jsx3(
+    Panel,
     {
-      initial: { width: 0 },
-      animate: { width: RAIL_DEFAULT_WIDTH + 4 },
-      exit: { width: 0 },
-      transition: { duration: RAIL_ANIMATION_DURATION, ease: "easeInOut" },
-      children: /* @__PURE__ */ jsxs2(
-        RailPanel,
+      closeButtonLabel: "Close",
+      direction: "right",
+      width: RAIL_DEFAULT_WIDTH,
+      gap: RAIL_GAP,
+      mobileBreakpoint: 0,
+      title,
+      children: /* @__PURE__ */ jsx3(
+        Box3,
         {
-          id: railId,
+          id: panelId,
           role: "region",
-          "aria-label": typeof title === "string" ? title : void 0,
+          "aria-label": title,
           "data-slot": "peek-in-rail",
           "data-qa-peek-in-rail": true,
-          children: [
-            title && /* @__PURE__ */ jsx3(
-              Box3,
-              {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                py: 300,
-                px: 400,
-                borderBottom: "1px solid",
-                borderColor: "container.border.base",
-                flexShrink: 0,
-                children: /* @__PURE__ */ jsx3(Text2.SubHeadline, { as: "h3", children: title })
-              }
-            ),
-            /* @__PURE__ */ jsx3(Box3, { flex: "1 1 auto", overflow: "auto", children })
-          ]
+          flex: "1 1 auto",
+          overflow: "auto",
+          children
         }
       )
     }
   ) });
 };
-PeekInRail.displayName = "PeekInRail";
+PeekInPanel.displayName = "PeekInPanel";
 
 // src/components/PeekInTrigger.tsx
 import "react";
@@ -374,7 +402,6 @@ function useUncontrolledState({
 function isFunction(value) {
   return typeof value === "function";
 }
-var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
 
 // ../../node_modules/@radix-ui/react-dismissable-layer/dist/index.mjs
 import * as React14 from "react";
@@ -427,7 +454,7 @@ function createSlotClone(ownerName) {
   SlotClone.displayName = `${ownerName}.SlotClone`;
   return SlotClone;
 }
-var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+var SLOTTABLE_IDENTIFIER = /* @__PURE__ */ Symbol("radix.slottable");
 function isSlottable(child) {
   return React10.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
 }
@@ -496,7 +523,7 @@ var Primitive = NODES.reduce((primitive, node) => {
     const { asChild, ...primitiveProps } = props;
     const Comp = asChild ? Slot2 : node;
     if (typeof window !== "undefined") {
-      window[Symbol.for("radix-ui")] = true;
+      window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
     }
     return /* @__PURE__ */ jsx6(Comp, { ...primitiveProps, ref: forwardedRef });
   });
@@ -1554,41 +1581,179 @@ var PeekInRoot = ({
   onOpenChange,
   closeButtonAriaLabel = "Close",
   actions,
-  railToggle,
+  panelToggle,
+  snapPoints,
+  defaultSnapPoint,
+  snapPoint,
+  onSnapPointChange,
+  snapToSequentialPoints,
+  disableCloseOnClickOutside,
+  actionsInHeader,
   children
 }) => {
   const header = getChildByType(children, PeekInHeader);
-  const main = getChildByType(children, PeekInMain);
-  const rail = getChildByType(children, PeekInRail);
+  const content = getChildByType(children, PeekInContent);
+  const panel = getChildByType(children, PeekInPanel);
   const trigger = getChildByType(children, PeekInTrigger);
-  const railDefaultOpen = rail?.props?.defaultOpen ?? true;
-  const [railOpen, setRailOpen] = React21.useState(railDefaultOpen);
-  const railId = React21.useId();
+  const panelDefaultOpen = panel?.props?.defaultOpen ?? true;
+  const [panelOpen, setPanelOpen] = React21.useState(panelDefaultOpen);
+  const panelId = React21.useId();
   const handleClose = React21.useCallback(() => {
     onOpenChange?.(false);
   }, [onOpenChange]);
   const contextValue = React21.useMemo(
-    () => ({ onClose: handleClose, railOpen, setRailOpen, railId }),
-    [handleClose, railOpen, railId]
+    () => ({ onClose: handleClose, panelOpen, setPanelOpen, panelId }),
+    [handleClose, panelOpen, panelId]
   );
   const ariaLabel = typeof header?.props?.title === "string" ? header.props.title : "Dialog";
   const triggerElement = trigger ? trigger.props.children : void 0;
   const modalActions = React21.useMemo(() => {
     const result = [];
-    if (railToggle && rail) {
+    if (panelToggle && panel) {
+      result.push({
+        "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+        iconName: panelToggle.iconName,
+        onClick: () => setPanelOpen((prev) => !prev),
+        "aria-expanded": panelOpen,
+        "aria-controls": panelId
+      });
+    }
+    if (actions) {
+      result.push(...actions);
+    }
+    return result.length > 0 ? result : void 0;
+  }, [panelToggle, panel, actions, panelOpen, panelId]);
+  const drawerActions = React21.useMemo(() => {
+    const result = [];
+    if (panelToggle && panel) {
       result.push({
-        "aria-label": railToggle["aria-label"] ?? "Toggle panel",
-        iconName: railToggle.iconName,
-        onClick: () => setRailOpen((prev) => !prev),
-        "aria-expanded": railOpen,
-        "aria-controls": railId
+        "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+        iconName: panelToggle.iconName,
+        onClick: () => setPanelOpen((prev) => !prev),
+        "aria-expanded": panelOpen,
+        "aria-controls": panelId
       });
     }
     if (actions) {
       result.push(...actions);
     }
     return result.length > 0 ? result : void 0;
-  }, [railToggle, rail, actions, railOpen, railId]);
+  }, [panelToggle, panel, actions, panelOpen, panelId]);
+  const isMobile = useIsMobile2();
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React21.useState(defaultOpen ?? false);
+  const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
+  const handleMobileOpen = React21.useCallback(() => {
+    if (!isControlled) setInternalOpen(true);
+    onOpenChange?.(true);
+  }, [isControlled, onOpenChange]);
+  const handleMobileClose = React21.useCallback(() => {
+    if (!isControlled) setInternalOpen(false);
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+  const mobileTrigger = trigger ? React21.cloneElement(trigger.props.children, {
+    onClick: handleMobileOpen
+  }) : void 0;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs4(PeekInContext.Provider, { value: contextValue, children: [
+      mobileTrigger,
+      /* @__PURE__ */ jsxs4(
+        Drawer2,
+        {
+          open: effectiveMobileOpen,
+          onClose: handleMobileClose,
+          direction: "bottom",
+          closeButtonLabel: closeButtonAriaLabel,
+          snapPoints,
+          defaultSnapPoint,
+          snapPoint,
+          onSnapPointChange,
+          snapToSequentialPoints,
+          disableCloseOnClickOutside,
+          actions: drawerActions,
+          actionsInHeader,
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ jsx12(
+              Drawer2.Header,
+              {
+                render: (ctx) => /* @__PURE__ */ jsxs4(
+                  Box4,
+                  {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    pt: 400,
+                    px: 450,
+                    flex: "0 0 auto",
+                    children: [
+                      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", gap: 300, children: [
+                        header?.props?.onBack && /* @__PURE__ */ jsx12(
+                          Button2,
+                          {
+                            appearance: "unstyled",
+                            onClick: header.props.onBack,
+                            "aria-label": "Back",
+                            "data-qa-peek-in-back": true,
+                            children: /* @__PURE__ */ jsx12(Icon2, { name: "arrow-left-outline", size: "small" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx12(
+                          Text2,
+                          {
+                            as: "h2",
+                            fontSize: 400,
+                            fontWeight: "semibold",
+                            color: "text.headline",
+                            "data-qa-peek-in-title": true,
+                            children: header?.props?.title
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs4(Box4, { display: "flex", alignItems: "center", gap: 200, children: [
+                        header?.props?.children,
+                        actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx12(
+                          Button2,
+                          {
+                            appearance: "pill",
+                            "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+                            onClick: () => setPanelOpen((p) => !p),
+                            children: /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: panelToggle.iconName })
+                          }
+                        ),
+                        actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx12(
+                          Button2,
+                          {
+                            appearance: "pill",
+                            "aria-label": action["aria-label"],
+                            onClick: action.onClick,
+                            disabled: action.disabled,
+                            children: action.iconName && /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: action.iconName })
+                          },
+                          i
+                        )),
+                        (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx12(
+                          Button2,
+                          {
+                            appearance: "pill",
+                            "aria-label": ctx.closeButtonLabel,
+                            onClick: ctx.onClose,
+                            children: /* @__PURE__ */ jsx12(Icon2, { "aria-hidden": true, name: "x-outline" })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            content,
+            panel
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ jsx12(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx12(
     Modal,
     {
@@ -1614,11 +1779,11 @@ var PeekInRoot = ({
             borderRadius: 800,
             children: [
               header,
-              main
+              content
             ]
           }
         ),
-        rail
+        panel
       ] })
     }
   ) });
@@ -1627,9 +1792,9 @@ PeekInRoot.displayName = "PeekIn";
 var PeekIn = PeekInRoot;
 export {
   PeekIn,
+  PeekInContent,
   PeekInHeader,
-  PeekInMain,
-  PeekInRail,
+  PeekInPanel,
   PeekInTrigger
 };
 //# sourceMappingURL=index.js.map