@sproutsocial/seeds-react-peek-in 0.3.10 → 0.4.2

package/dist/esm/index.js

@@ -1,4 +1,7 @@
-// src/PeekIn.tsx
+// src/PeekInHybrid.tsx
+import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
+
+// src/PeekInStyled.tsx
 import * as React21 from "react";
 import Box4 from "@sproutsocial/seeds-react-box";
 import Button2 from "@sproutsocial/seeds-react-button";
@@ -1570,7 +1573,7 @@ var PeekInTrigger = ({
 };
 PeekInTrigger.displayName = "PeekInTrigger";
 
-// src/PeekIn.tsx
+// src/PeekInStyled.tsx
 import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
 function getChildByType(children, type) {
   const childArray = React21.Children.toArray(children);
@@ -1578,7 +1581,7 @@ function getChildByType(children, type) {
     (child) => React21.isValidElement(child) && child.type === type
   ) || null;
 }
-var PeekInRoot = ({
+var PeekInStyled = ({
   open,
   defaultOpen,
   onOpenChange,
@@ -1791,8 +1794,230 @@ var PeekInRoot = ({
     }
   ) });
 };
-PeekInRoot.displayName = "PeekIn";
-var PeekIn = PeekInRoot;
+PeekInStyled.displayName = "PeekIn";
+
+// src/PeekInTailwind.tsx
+import * as React24 from "react";
+import Button3 from "@sproutsocial/seeds-react-button";
+import Drawer3 from "@sproutsocial/seeds-react-drawer";
+import Icon3 from "@sproutsocial/seeds-react-icon";
+import Text3 from "@sproutsocial/seeds-react-text";
+import { useIsMobile as useIsMobile3 } from "@sproutsocial/seeds-react-hooks";
+import { Modal as Modal2, ModalBody as ModalBody2 } from "@sproutsocial/seeds-react-modal/v2";
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function getChildByType2(children, type) {
+  const childArray = React24.Children.toArray(children);
+  return childArray.find(
+    (child) => React24.isValidElement(child) && child.type === type
+  ) || null;
+}
+var PeekInTailwind = ({
+  open,
+  defaultOpen,
+  onOpenChange,
+  closeButtonAriaLabel = "Close",
+  actions,
+  panelToggle,
+  snapPoints,
+  defaultSnapPoint,
+  snapPoint,
+  onSnapPointChange,
+  snapToSequentialPoints,
+  disableCloseOnClickOutside,
+  actionsInHeader,
+  children
+}) => {
+  const header = getChildByType2(children, PeekInHeader);
+  const content = getChildByType2(children, PeekInContent);
+  const panel = getChildByType2(children, PeekInPanel);
+  const trigger = getChildByType2(children, PeekInTrigger);
+  const panelDefaultOpen = panel?.props?.defaultOpen ?? true;
+  const [panelOpen, setPanelOpen] = React24.useState(panelDefaultOpen);
+  const panelId = React24.useId();
+  const handleClose = React24.useCallback(() => {
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  const contextValue = React24.useMemo(
+    () => ({ 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 = React24.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 drawerActions = React24.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 = useIsMobile3();
+  const isControlled = open !== void 0;
+  const [internalOpen, setInternalOpen] = React24.useState(defaultOpen ?? false);
+  const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
+  const handleMobileOpen = React24.useCallback(() => {
+    if (!isControlled) setInternalOpen(true);
+    onOpenChange?.(true);
+  }, [isControlled, onOpenChange]);
+  const handleMobileClose = React24.useCallback(() => {
+    if (!isControlled) setInternalOpen(false);
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+  const mobileTrigger = trigger ? React24.cloneElement(trigger.props.children, {
+    onClick: handleMobileOpen
+  }) : void 0;
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs5(PeekInContext.Provider, { value: contextValue, children: [
+      mobileTrigger,
+      /* @__PURE__ */ jsxs5(
+        Drawer3,
+        {
+          open: effectiveMobileOpen,
+          onClose: handleMobileClose,
+          direction: "bottom",
+          closeButtonLabel: closeButtonAriaLabel,
+          snapPoints,
+          defaultSnapPoint,
+          snapPoint,
+          onSnapPointChange,
+          snapToSequentialPoints,
+          disableCloseOnClickOutside,
+          actions: drawerActions,
+          actionsInHeader,
+          "aria-label": ariaLabel,
+          children: [
+            /* @__PURE__ */ jsx13(
+              Drawer3.Header,
+              {
+                render: (ctx) => /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-drawer-header", children: [
+                  /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-titlegroup", children: [
+                    header?.props?.onBack && /* @__PURE__ */ jsx13(
+                      Button3,
+                      {
+                        appearance: "unstyled",
+                        onClick: header.props.onBack,
+                        "aria-label": "Back",
+                        "data-qa-peek-in-back": true,
+                        children: /* @__PURE__ */ jsx13(Icon3, { name: "arrow-left-outline", size: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx13(
+                      Text3,
+                      {
+                        as: "h2",
+                        fontSize: 400,
+                        fontWeight: "semibold",
+                        color: "text.headline",
+                        "data-qa-peek-in-title": true,
+                        children: header?.props?.title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-header-actions", children: [
+                    header?.props?.children,
+                    actionsInHeader && panelToggle && panel && /* @__PURE__ */ jsx13(
+                      Button3,
+                      {
+                        appearance: "pill",
+                        "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+                        onClick: () => setPanelOpen((p) => !p),
+                        children: /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: panelToggle.iconName })
+                      }
+                    ),
+                    actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ jsx13(
+                      Button3,
+                      {
+                        appearance: "pill",
+                        "aria-label": action["aria-label"],
+                        onClick: action.onClick,
+                        disabled: action.disabled,
+                        children: action.iconName && /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: action.iconName })
+                      },
+                      i
+                    )),
+                    (actionsInHeader || !drawerActions) && /* @__PURE__ */ jsx13(
+                      Button3,
+                      {
+                        appearance: "pill",
+                        "aria-label": ctx.closeButtonLabel,
+                        onClick: ctx.onClose,
+                        children: /* @__PURE__ */ jsx13(Icon3, { "aria-hidden": true, name: "x-outline" })
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            ),
+            content,
+            panel
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx13(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx13(
+    Modal2,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      width: PEEK_IN_WIDTH,
+      height: PEEK_IN_HEIGHT,
+      closeButtonAriaLabel,
+      "aria-label": ariaLabel,
+      modalTrigger: triggerElement,
+      actions: modalActions,
+      bg: "transparent",
+      children: /* @__PURE__ */ jsxs5(ModalBody2, { padding: 0, display: "flex", overflow: "hidden", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "seeds-peek-in-main", children: [
+          header,
+          content
+        ] }),
+        panel
+      ] })
+    }
+  ) });
+};
+PeekInTailwind.displayName = "PeekIn";
+
+// src/PeekInHybrid.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+var PeekInHybrid = (props) => {
+  if (hasStyledProps(props)) {
+    return /* @__PURE__ */ jsx14(PeekInStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx14(PeekInTailwind, { ...props });
+};
+PeekInHybrid.displayName = "PeekIn";
+
+// src/PeekIn.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+var PeekIn = (props) => /* @__PURE__ */ jsx15(PeekInHybrid, { ...props });
+PeekIn.displayName = "PeekIn";
 export {
   PeekIn,
   PeekInContent,