@sproutsocial/seeds-react-peek-in 0.4.4 → 0.5.1

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 import { hasStyledProps } from "@sproutsocial/seeds-react-system-props";
 
 // src/PeekInStyled.tsx
-import * as React21 from "react";
+import * as React24 from "react";
 import Box4 from "@sproutsocial/seeds-react-box";
 import Button2 from "@sproutsocial/seeds-react-button";
 import Drawer2 from "@sproutsocial/seeds-react-drawer";
@@ -1573,12 +1573,33 @@ var PeekInTrigger = ({
 };
 PeekInTrigger.displayName = "PeekInTrigger";
 
+// src/usePeekInPanelState.ts
+import * as React21 from "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
 import { jsx as jsx12, jsxs as jsxs4 } from "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 = ({
@@ -1601,19 +1622,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({
@@ -1629,7 +1649,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({
@@ -1647,17 +1667,17 @@ var PeekInStyled = ({
   }, [panelToggle, panel, actions, panelOpen, panelId]);
   const isMobile = useIsMobile2();
   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) {
@@ -1797,7 +1817,7 @@ var PeekInStyled = ({
 PeekInStyled.displayName = "PeekIn";
 
 // src/PeekInTailwind.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import Button3 from "@sproutsocial/seeds-react-button";
 import Drawer3 from "@sproutsocial/seeds-react-drawer";
 import Icon3 from "@sproutsocial/seeds-react-icon";
@@ -1806,9 +1826,9 @@ 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);
+  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 = ({
@@ -1831,19 +1851,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({
@@ -1859,7 +1878,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({
@@ -1877,17 +1896,17 @@ var PeekInTailwind = ({
   }, [panelToggle, panel, actions, panelOpen, panelId]);
   const isMobile = useIsMobile3();
   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) {