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

package/dist/index.js

@@ -31,9 +31,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   PeekIn: () => PeekIn,
+  PeekInContent: () => PeekInContent,
   PeekInHeader: () => PeekInHeader,
-  PeekInMain: () => PeekInMain,
-  PeekInRail: () => PeekInRail,
+  PeekInPanel: () => PeekInPanel,
   PeekInTrigger: () => PeekInTrigger
 });
 module.exports = __toCommonJS(index_exports);
@@ -41,6 +41,11 @@ module.exports = __toCommonJS(index_exports);
 // src/PeekIn.tsx
 var React21 = __toESM(require("react"));
 var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_drawer2 = __toESM(require("@sproutsocial/seeds-react-drawer"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_hooks2 = require("@sproutsocial/seeds-react-hooks");
 var import_v2 = require("@sproutsocial/seeds-react-modal/v2");
 
 // src/PeekInContext.ts
@@ -103,31 +108,34 @@ var PeekInHeader = ({
 };
 PeekInHeader.displayName = "PeekInHeader";
 
-// src/components/PeekInMain.tsx
+// src/components/PeekInContent.tsx
 var React3 = require("react");
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var PeekInMain = ({ children }) => {
+var PeekInContent = ({
+  children
+}) => {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_seeds_react_box2.default,
     {
       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
-var React4 = require("react");
-var import_styled_components = __toESM(require("styled-components"));
+// src/components/PeekInPanel.tsx
+var React4 = __toESM(require("react"));
 var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
-var import_react = require("motion/react");
+var import_seeds_react_drawer = __toESM(require("@sproutsocial/seeds-react-drawer"));
+var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+var import_seeds_react_panel = require("@sproutsocial/seeds-react-panel");
 
 // src/constants.ts
 var PEEK_IN_WIDTH = "calc(100vw - 64px)";
@@ -136,66 +144,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
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var RailWrapper = (0, import_styled_components.default)(import_react.motion.div)`
-  overflow: hidden;
-  flex-shrink: 0;
-  padding-left: 4px;
-`;
-var RailPanel = import_styled_components.default.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__ */ (0, import_jsx_runtime3.jsx)(import_react.AnimatePresence, { initial: false, children: railOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-    RailWrapper,
+  const { panelOpen, setPanelOpen, panelId } = usePeekInContext();
+  const isMobile = (0, import_seeds_react_hooks.useIsMobile)();
+  const parentDrawer = React4.useContext(import_seeds_react_drawer.DrawerContext);
+  React4.useEffect(() => {
+    if (isMobile) parentDrawer.setIsLocked(panelOpen);
+  }, [isMobile, panelOpen, parentDrawer]);
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_seeds_react_drawer.default,
+      {
+        open: panelOpen,
+        onClose: () => setPanelOpen(false),
+        direction: "bottom",
+        closeButtonLabel: "Close",
+        snapPoints,
+        defaultSnapPoint,
+        snapPoint,
+        onSnapPointChange,
+        snapToSequentialPoints,
+        disableCloseOnClickOutside,
+        actionsInHeader,
+        "aria-label": title ?? "Panel",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_drawer.default.Header, { title }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_drawer.default.Content, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            import_seeds_react_box3.default,
+            {
+              id: panelId,
+              role: "region",
+              "aria-label": title,
+              "data-slot": "peek-in-panel",
+              "data-qa-peek-in-panel": true,
+              children
+            }
+          ) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_panel.PanelProvider, { open: panelOpen, onOpenChange: setPanelOpen, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    import_seeds_react_panel.Panel,
     {
-      initial: { width: 0 },
-      animate: { width: RAIL_DEFAULT_WIDTH + 4 },
-      exit: { width: 0 },
-      transition: { duration: RAIL_ANIMATION_DURATION, ease: "easeInOut" },
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-        RailPanel,
+      closeButtonLabel: "Close",
+      direction: "right",
+      width: RAIL_DEFAULT_WIDTH,
+      gap: RAIL_GAP,
+      mobileBreakpoint: 0,
+      title,
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        import_seeds_react_box3.default,
         {
-          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__ */ (0, import_jsx_runtime3.jsx)(
-              import_seeds_react_box3.default,
-              {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                py: 300,
-                px: 400,
-                borderBottom: "1px solid",
-                borderColor: "container.border.base",
-                flexShrink: 0,
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text2.default.SubHeadline, { as: "h3", children: title })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.default, { flex: "1 1 auto", overflow: "auto", children })
-          ]
+          flex: "1 1 auto",
+          overflow: "auto",
+          children
         }
       )
     }
   ) });
 };
-PeekInRail.displayName = "PeekInRail";
+PeekInPanel.displayName = "PeekInPanel";
 
 // src/components/PeekInTrigger.tsx
 var React20 = require("react");
@@ -414,7 +442,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
 var React14 = __toESM(require("react"), 1);
@@ -467,7 +494,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;
 }
@@ -536,7 +563,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__ */ (0, import_jsx_runtime6.jsx)(Comp, { ...primitiveProps, ref: forwardedRef });
   });
@@ -1594,41 +1621,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": 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 drawerActions = React21.useMemo(() => {
+    const result = [];
+    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 isMobile = (0, import_seeds_react_hooks2.useIsMobile)();
+  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__ */ (0, import_jsx_runtime12.jsxs)(PeekInContext.Provider, { value: contextValue, children: [
+      mobileTrigger,
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        import_seeds_react_drawer2.default,
+        {
+          open: effectiveMobileOpen,
+          onClose: handleMobileClose,
+          direction: "bottom",
+          closeButtonLabel: closeButtonAriaLabel,
+          snapPoints,
+          defaultSnapPoint,
+          snapPoint,
+          onSnapPointChange,
+          snapToSequentialPoints,
+          disableCloseOnClickOutside,
+          actions: drawerActions,
+          actionsInHeader,
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_seeds_react_drawer2.default.Header,
+              {
+                render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                  import_seeds_react_box4.default,
+                  {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    pt: 400,
+                    px: 450,
+                    flex: "0 0 auto",
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_seeds_react_box4.default, { display: "flex", alignItems: "center", gap: 300, children: [
+                        header?.props?.onBack && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          import_seeds_react_button2.default,
+                          {
+                            appearance: "unstyled",
+                            onClick: header.props.onBack,
+                            "aria-label": "Back",
+                            "data-qa-peek-in-back": true,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon2.default, { name: "arrow-left-outline", size: "small" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          import_seeds_react_text2.default,
+                          {
+                            as: "h2",
+                            fontSize: 400,
+                            fontWeight: "semibold",
+                            color: "text.headline",
+                            "data-qa-peek-in-title": true,
+                            children: header?.props?.title
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_seeds_react_box4.default, { display: "flex", alignItems: "center", gap: 200, children: [
+                        header?.props?.children,
+                        actionsInHeader && panelToggle && panel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          import_seeds_react_button2.default,
+                          {
+                            appearance: "pill",
+                            "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+                            onClick: () => setPanelOpen((p) => !p),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: panelToggle.iconName })
+                          }
+                        ),
+                        actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          import_seeds_react_button2.default,
+                          {
+                            appearance: "pill",
+                            "aria-label": action["aria-label"],
+                            onClick: action.onClick,
+                            disabled: action.disabled,
+                            children: action.iconName && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: action.iconName })
+                          },
+                          i
+                        )),
+                        (actionsInHeader || !drawerActions) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          import_seeds_react_button2.default,
+                          {
+                            appearance: "pill",
+                            "aria-label": ctx.closeButtonLabel,
+                            onClick: ctx.onClose,
+                            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: "x-outline" })
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              }
+            ),
+            content,
+            panel
+          ]
+        }
+      )
+    ] });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_v2.Modal,
     {
@@ -1654,11 +1819,11 @@ var PeekInRoot = ({
             borderRadius: 800,
             children: [
               header,
-              main
+              content
             ]
           }
         ),
-        rail
+        panel
       ] })
     }
   ) });
@@ -1668,9 +1833,9 @@ var PeekIn = PeekInRoot;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PeekIn,
+  PeekInContent,
   PeekInHeader,
-  PeekInMain,
-  PeekInRail,
+  PeekInPanel,
   PeekInTrigger
 });
 //# sourceMappingURL=index.js.map