@sproutsocial/seeds-react-peek-in 0.4.3 → 0.5.0

package/dist/index.d.mts

@@ -88,7 +88,14 @@ interface TypePeekInPanelProps {
      * provides its own chrome (e.g. an embedded agent UI). Defaults to false.
      */
     headerless?: boolean;
-    /** Whether the panel starts open or collapsed. Default: true */
+    /** Controlled open state for the panel. Pair with `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Fires when the panel opens or closes — the action-bar toggle, the panel's
+     * built-in close button, or a dismiss of the mobile bottom sheet.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the panel starts open or collapsed. Ignored when `open` is set. Default: true */
     defaultOpen?: boolean;
     /**
      * Snap points the panel can rest at when rendered as a nested mobile

package/dist/index.d.ts

@@ -88,7 +88,14 @@ interface TypePeekInPanelProps {
      * provides its own chrome (e.g. an embedded agent UI). Defaults to false.
      */
     headerless?: boolean;
-    /** Whether the panel starts open or collapsed. Default: true */
+    /** Controlled open state for the panel. Pair with `onOpenChange`. */
+    open?: boolean;
+    /**
+     * Fires when the panel opens or closes — the action-bar toggle, the panel's
+     * built-in close button, or a dismiss of the mobile bottom sheet.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether the panel starts open or collapsed. Ignored when `open` is set. Default: true */
     defaultOpen?: boolean;
     /**
      * Snap points the panel can rest at when rendered as a nested mobile

package/dist/index.js

@@ -42,7 +42,7 @@ module.exports = __toCommonJS(index_exports);
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
 
 // src/PeekInStyled.tsx
-var React21 = __toESM(require("react"));
+var React24 = __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"));
@@ -1613,12 +1613,33 @@ var PeekInTrigger = ({
 };
 PeekInTrigger.displayName = "PeekInTrigger";
 
+// src/usePeekInPanelState.ts
+var React21 = __toESM(require("react"));
+function usePeekInPanelState(panel) {
+  const panelProps = panel?.props;
+  const isControlled = panelProps?.open !== void 0;
+  const onOpenChange = panelProps?.onOpenChange;
+  const [internalOpen, setInternalOpen] = React21.useState(
+    panelProps?.defaultOpen ?? true
+  );
+  const panelOpen = isControlled ? panelProps.open : internalOpen;
+  const setPanelOpen = React21.useCallback(
+    (next) => {
+      const value = typeof next === "function" ? next(panelOpen) : next;
+      if (!isControlled) setInternalOpen(value);
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange, panelOpen]
+  );
+  return { panelOpen, setPanelOpen };
+}
+
 // src/PeekInStyled.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function getChildByType(children, type) {
-  const childArray = React21.Children.toArray(children);
+  const childArray = React24.Children.toArray(children);
   return childArray.find(
-    (child) => React21.isValidElement(child) && child.type === type
+    (child) => React24.isValidElement(child) && child.type === type
   ) || null;
 }
 var PeekInStyled = ({
@@ -1641,19 +1662,18 @@ var PeekInStyled = ({
   const content = getChildByType(children, PeekInContent);
   const panel = getChildByType(children, PeekInPanel);
   const trigger = getChildByType(children, PeekInTrigger);
-  const panelDefaultOpen = panel?.props?.defaultOpen ?? true;
-  const [panelOpen, setPanelOpen] = React21.useState(panelDefaultOpen);
-  const panelId = React21.useId();
-  const handleClose = React21.useCallback(() => {
+  const { panelOpen, setPanelOpen } = usePeekInPanelState(panel);
+  const panelId = React24.useId();
+  const handleClose = React24.useCallback(() => {
     onOpenChange?.(false);
   }, [onOpenChange]);
-  const contextValue = React21.useMemo(
+  const contextValue = React24.useMemo(
     () => ({ onClose: handleClose, panelOpen, setPanelOpen, panelId }),
-    [handleClose, panelOpen, panelId]
+    [handleClose, panelOpen, setPanelOpen, 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 modalActions = React24.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1669,7 +1689,7 @@ var PeekInStyled = ({
     }
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
-  const drawerActions = React21.useMemo(() => {
+  const drawerActions = React24.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1687,17 +1707,17 @@ var PeekInStyled = ({
   }, [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 [internalOpen, setInternalOpen] = React24.useState(defaultOpen ?? false);
   const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
-  const handleMobileOpen = React21.useCallback(() => {
+  const handleMobileOpen = React24.useCallback(() => {
     if (!isControlled) setInternalOpen(true);
     onOpenChange?.(true);
   }, [isControlled, onOpenChange]);
-  const handleMobileClose = React21.useCallback(() => {
+  const handleMobileClose = React24.useCallback(() => {
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
   }, [isControlled, onOpenChange]);
-  const mobileTrigger = trigger ? React21.cloneElement(trigger.props.children, {
+  const mobileTrigger = trigger ? React24.cloneElement(trigger.props.children, {
     onClick: handleMobileOpen
   }) : void 0;
   if (isMobile) {
@@ -1837,7 +1857,7 @@ var PeekInStyled = ({
 PeekInStyled.displayName = "PeekIn";
 
 // src/PeekInTailwind.tsx
-var React24 = __toESM(require("react"));
+var React25 = __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"));
@@ -1846,9 +1866,9 @@ 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);
+  const childArray = React25.Children.toArray(children);
   return childArray.find(
-    (child) => React24.isValidElement(child) && child.type === type
+    (child) => React25.isValidElement(child) && child.type === type
   ) || null;
 }
 var PeekInTailwind = ({
@@ -1871,19 +1891,18 @@ var PeekInTailwind = ({
   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(() => {
+  const { panelOpen, setPanelOpen } = usePeekInPanelState(panel);
+  const panelId = React25.useId();
+  const handleClose = React25.useCallback(() => {
     onOpenChange?.(false);
   }, [onOpenChange]);
-  const contextValue = React24.useMemo(
+  const contextValue = React25.useMemo(
     () => ({ onClose: handleClose, panelOpen, setPanelOpen, panelId }),
-    [handleClose, panelOpen, panelId]
+    [handleClose, panelOpen, setPanelOpen, 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 modalActions = React25.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1899,7 +1918,7 @@ var PeekInTailwind = ({
     }
     return result.length > 0 ? result : void 0;
   }, [panelToggle, panel, actions, panelOpen, panelId]);
-  const drawerActions = React24.useMemo(() => {
+  const drawerActions = React25.useMemo(() => {
     const result = [];
     if (panelToggle && panel) {
       result.push({
@@ -1917,17 +1936,17 @@ var PeekInTailwind = ({
   }, [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 [internalOpen, setInternalOpen] = React25.useState(defaultOpen ?? false);
   const effectiveMobileOpen = isControlled ? open ?? false : internalOpen;
-  const handleMobileOpen = React24.useCallback(() => {
+  const handleMobileOpen = React25.useCallback(() => {
     if (!isControlled) setInternalOpen(true);
     onOpenChange?.(true);
   }, [isControlled, onOpenChange]);
-  const handleMobileClose = React24.useCallback(() => {
+  const handleMobileClose = React25.useCallback(() => {
     if (!isControlled) setInternalOpen(false);
     onOpenChange?.(false);
   }, [isControlled, onOpenChange]);
-  const mobileTrigger = trigger ? React24.cloneElement(trigger.props.children, {
+  const mobileTrigger = trigger ? React25.cloneElement(trigger.props.children, {
     onClick: handleMobileOpen
   }) : void 0;
   if (isMobile) {