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

package/dist/index.d.mts

@@ -129,8 +129,17 @@ declare const PeekInPanel: React.FC<TypePeekInPanelProps>;
 
 declare const PeekInTrigger: React.FC<TypePeekInTriggerProps>;
 
+/**
+ * PeekIn component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-system implementation (for consumers using system
+ * props or a styled() extension).
+ *
+ * Defined as a self-named component (rather than a bare re-export of
+ * PeekInHybrid) so the `react-docgen` props-docs generation in the Publish
+ * pipeline has a suitable component definition to analyze.
+ */
 declare const PeekIn: {
-    ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, panelToggle, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, disableCloseOnClickOutside, actionsInHeader, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
+    (props: TypePeekInProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -129,8 +129,17 @@ declare const PeekInPanel: React.FC<TypePeekInPanelProps>;
 
 declare const PeekInTrigger: React.FC<TypePeekInTriggerProps>;
 
+/**
+ * PeekIn component. Automatically routes between the Tailwind implementation
+ * (preferred) and the styled-system implementation (for consumers using system
+ * props or a styled() extension).
+ *
+ * Defined as a self-named component (rather than a bare re-export of
+ * PeekInHybrid) so the `react-docgen` props-docs generation in the Publish
+ * pipeline has a suitable component definition to analyze.
+ */
 declare const PeekIn: {
-    ({ open, defaultOpen, onOpenChange, closeButtonAriaLabel, actions, panelToggle, snapPoints, defaultSnapPoint, snapPoint, onSnapPointChange, snapToSequentialPoints, disableCloseOnClickOutside, actionsInHeader, children, }: TypePeekInProps): react_jsx_runtime.JSX.Element;
+    (props: TypePeekInProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -38,7 +38,10 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/PeekIn.tsx
+// src/PeekInHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
+// src/PeekInStyled.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"));
@@ -1610,7 +1613,7 @@ var PeekInTrigger = ({
 };
 PeekInTrigger.displayName = "PeekInTrigger";
 
-// src/PeekIn.tsx
+// src/PeekInStyled.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function getChildByType(children, type) {
   const childArray = React21.Children.toArray(children);
@@ -1618,7 +1621,7 @@ function getChildByType(children, type) {
     (child) => React21.isValidElement(child) && child.type === type
   ) || null;
 }
-var PeekInRoot = ({
+var PeekInStyled = ({
   open,
   defaultOpen,
   onOpenChange,
@@ -1831,8 +1834,230 @@ var PeekInRoot = ({
     }
   ) });
 };
-PeekInRoot.displayName = "PeekIn";
-var PeekIn = PeekInRoot;
+PeekInStyled.displayName = "PeekIn";
+
+// src/PeekInTailwind.tsx
+var React24 = __toESM(require("react"));
+var import_seeds_react_button3 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_drawer3 = __toESM(require("@sproutsocial/seeds-react-drawer"));
+var import_seeds_react_icon3 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_text3 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_hooks3 = require("@sproutsocial/seeds-react-hooks");
+var import_v22 = require("@sproutsocial/seeds-react-modal/v2");
+var import_jsx_runtime13 = require("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 = (0, import_seeds_react_hooks3.useIsMobile)();
+  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__ */ (0, import_jsx_runtime13.jsxs)(PeekInContext.Provider, { value: contextValue, children: [
+      mobileTrigger,
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+        import_seeds_react_drawer3.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_runtime13.jsx)(
+              import_seeds_react_drawer3.default.Header,
+              {
+                render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "seeds-peek-in-drawer-header", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "seeds-peek-in-titlegroup", children: [
+                    header?.props?.onBack && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      import_seeds_react_button3.default,
+                      {
+                        appearance: "unstyled",
+                        onClick: header.props.onBack,
+                        "aria-label": "Back",
+                        "data-qa-peek-in-back": true,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon3.default, { name: "arrow-left-outline", size: "small" })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      import_seeds_react_text3.default,
+                      {
+                        as: "h2",
+                        fontSize: 400,
+                        fontWeight: "semibold",
+                        color: "text.headline",
+                        "data-qa-peek-in-title": true,
+                        children: header?.props?.title
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "seeds-peek-in-header-actions", children: [
+                    header?.props?.children,
+                    actionsInHeader && panelToggle && panel && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      import_seeds_react_button3.default,
+                      {
+                        appearance: "pill",
+                        "aria-label": panelToggle["aria-label"] ?? "Toggle panel",
+                        onClick: () => setPanelOpen((p) => !p),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon3.default, { "aria-hidden": true, name: panelToggle.iconName })
+                      }
+                    ),
+                    actionsInHeader && actions?.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      import_seeds_react_button3.default,
+                      {
+                        appearance: "pill",
+                        "aria-label": action["aria-label"],
+                        onClick: action.onClick,
+                        disabled: action.disabled,
+                        children: action.iconName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon3.default, { "aria-hidden": true, name: action.iconName })
+                      },
+                      i
+                    )),
+                    (actionsInHeader || !drawerActions) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                      import_seeds_react_button3.default,
+                      {
+                        appearance: "pill",
+                        "aria-label": ctx.closeButtonLabel,
+                        onClick: ctx.onClose,
+                        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_icon3.default, { "aria-hidden": true, name: "x-outline" })
+                      }
+                    )
+                  ] })
+                ] })
+              }
+            ),
+            content,
+            panel
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(PeekInContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_v22.Modal,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      width: PEEK_IN_WIDTH,
+      height: PEEK_IN_HEIGHT,
+      closeButtonAriaLabel,
+      "aria-label": ariaLabel,
+      modalTrigger: triggerElement,
+      actions: modalActions,
+      bg: "transparent",
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_v22.ModalBody, { padding: 0, display: "flex", overflow: "hidden", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "seeds-peek-in-main", children: [
+          header,
+          content
+        ] }),
+        panel
+      ] })
+    }
+  ) });
+};
+PeekInTailwind.displayName = "PeekIn";
+
+// src/PeekInHybrid.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var PeekInHybrid = (props) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PeekInStyled, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(PeekInTailwind, { ...props });
+};
+PeekInHybrid.displayName = "PeekIn";
+
+// src/PeekIn.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var PeekIn = (props) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(PeekInHybrid, { ...props });
+PeekIn.displayName = "PeekIn";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PeekIn,