@sproutsocial/seeds-react-panel 1.0.11 → 1.1.0

package/dist/esm/index.js

@@ -1,7 +1,5 @@
-// src/Panel.tsx
-import * as React6 from "react";
-import Drawer2 from "@sproutsocial/seeds-react-drawer";
-import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
+// src/PanelHybrid.tsx
+import { needsStyledComponents as needsStyledComponents3 } from "@sproutsocial/seeds-react-system-props";
 
 // src/PanelContext.tsx
 import * as React from "react";
@@ -19,6 +17,7 @@ var usePanelContext = () => {
 // src/PanelHeader.tsx
 import Box from "@sproutsocial/seeds-react-box";
 import Text from "@sproutsocial/seeds-react-text";
+import { needsStyledComponents } from "@sproutsocial/seeds-react-system-props";
 
 // src/PanelCloseButton.tsx
 import "react";
@@ -43,41 +42,169 @@ var PanelCloseButton = (props) => {
 };
 PanelCloseButton.displayName = "Panel.CloseButton";
 
+// src/PanelShared.tsx
+import * as React3 from "react";
+import { useIsMobile } from "@sproutsocial/seeds-react-hooks";
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+var getPanelContainerStyle = (direction, width, gap, isPanelOpen) => {
+  const gapValue = isPanelOpen && gap ? `${gap}px` : "0px";
+  const style = {
+    flexBasis: isPanelOpen ? `${width}px` : "0px"
+  };
+  if (direction === "bottom") {
+    style.width = "100%";
+  } else {
+    style.alignSelf = "stretch";
+  }
+  if (direction === "right") {
+    style.marginLeft = gapValue;
+  } else if (direction === "left") {
+    style.marginRight = gapValue;
+  } else {
+    style.marginTop = gapValue;
+  }
+  return style;
+};
+var getPanelInnerStyle = (direction, width) => direction === "bottom" ? { minHeight: `${width}px`, width: "100%" } : { minWidth: `${width}px`, height: "100%" };
+var usePanelShell = (props) => {
+  const {
+    children,
+    closeButtonLabel,
+    header,
+    headerless = false,
+    footer,
+    title,
+    titleId,
+    direction = "right",
+    width = 384,
+    gap = 4,
+    mobileBreakpoint,
+    zIndex,
+    id,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    "aria-labelledby": ariaLabelledByProp,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  const panelContext = usePanelContext();
+  const { isPanelOpen, closePanel } = panelContext;
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const enrichedValue = React3.useMemo(
+    () => ({ ...panelContext, closeButtonLabel, headerless }),
+    [panelContext, closeButtonLabel, headerless]
+  );
+  const prevChildrenRef = React3.useRef(null);
+  if (isPanelOpen) {
+    prevChildrenRef.current = children;
+  }
+  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
+  return {
+    rest,
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    zIndex,
+    id,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    ariaLabel,
+    isPanelOpen,
+    closePanel,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  };
+};
+
 // src/PanelHeader.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-var PanelHeader = ({
+var PanelHeaderStyled = ({
+  title = "",
+  id = void 0,
+  children,
+  render,
+  ...rest
+}) => /* @__PURE__ */ jsx2(
+  Box,
+  {
+    display: "flex",
+    flex: "0 0 auto",
+    justifyContent: "space-between",
+    alignItems: "center",
+    p: 400,
+    borderBottom: "1px solid",
+    borderColor: "container.border.base",
+    ...rest,
+    children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(Text.Headline, { id, children: title }),
+      /* @__PURE__ */ jsx2(PanelCloseButton, {})
+    ] })
+  }
+);
+var PanelHeaderTailwind = ({
   title = "",
   id = void 0,
   children,
   render,
   ...rest
 }) => {
+  const { className, ...domRest } = rest;
+  return /* @__PURE__ */ jsx2("div", { className: cn("seeds-panel-header", className), ...domRest, children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(Text.Headline, { id, children: title }),
+    /* @__PURE__ */ jsx2(PanelCloseButton, {})
+  ] }) });
+};
+var PanelHeader = (props) => {
   const panelContext = usePanelContext();
-  if (render) {
-    return render(panelContext);
+  if (props.render) {
+    return props.render(panelContext);
   }
-  return /* @__PURE__ */ jsx2(
-    Box,
-    {
-      display: "flex",
-      flex: "0 0 auto",
-      justifyContent: "space-between",
-      alignItems: "center",
-      p: 400,
-      borderBottom: "1px solid",
-      borderColor: "container.border.base",
-      ...rest,
-      children: children || /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx2(Text.Headline, { id, children: title }),
-        /* @__PURE__ */ jsx2(PanelCloseButton, {})
-      ] })
-    }
-  );
+  const { title, id, children, render, ...rest } = props;
+  if (needsStyledComponents(rest)) {
+    return /* @__PURE__ */ jsx2(PanelHeaderStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx2(PanelHeaderTailwind, { ...props });
 };
 PanelHeader.displayName = "Panel.Header";
 
 // src/PanelContent.tsx
 import "react";
+import { needsStyledComponents as needsStyledComponents2 } from "@sproutsocial/seeds-react-system-props";
 
 // src/styles.ts
 import styled, { css } from "styled-components";
@@ -149,7 +276,7 @@ var Footer = styled(Box2)`
 
 // src/PanelContent.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
-var PanelContent = ({ children, ...rest }) => {
+var PanelContentStyled = ({ children, ...rest }) => {
   const { headerless } = usePanelContext();
   return /* @__PURE__ */ jsx3(
     Content,
@@ -165,157 +292,191 @@ var PanelContent = ({ children, ...rest }) => {
     }
   );
 };
+var PanelContentTailwind = ({
+  children,
+  ...rest
+}) => {
+  const { headerless } = usePanelContext();
+  const scroll = !headerless;
+  const { className, style, ...domRest } = rest;
+  const contentStyle = {
+    overflowY: scroll ? "auto" : "hidden"
+  };
+  if (!scroll) {
+    contentStyle.display = "flex";
+    contentStyle.flexDirection = "column";
+  }
+  Object.assign(contentStyle, style);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "seeds-panel-content",
+        { "seeds-panel-content--headerless": !!headerless },
+        className
+      ),
+      style: contentStyle,
+      "data-panel-content": "",
+      ...domRest,
+      children
+    }
+  );
+};
+var PanelContent = (props) => {
+  const { children, ...rest } = props;
+  if (needsStyledComponents2(rest)) {
+    return /* @__PURE__ */ jsx3(PanelContentStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx3(PanelContentTailwind, { ...props });
+};
 PanelContent.displayName = "Panel.Content";
 
-// src/PanelFooter.tsx
+// src/PanelMobile.tsx
 import "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var PanelFooter = ({ children, ...rest }) => /* @__PURE__ */ jsx4(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
-PanelFooter.displayName = "Panel.Footer";
+import Drawer2 from "@sproutsocial/seeds-react-drawer";
 
 // src/PanelMobileActionsHeader.tsx
 import "react";
-import Box3 from "@sproutsocial/seeds-react-box";
 import Button2 from "@sproutsocial/seeds-react-button";
 import Drawer from "@sproutsocial/seeds-react-drawer";
 import Icon2 from "@sproutsocial/seeds-react-icon";
 import Text2 from "@sproutsocial/seeds-react-text";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var PanelMobileActionsHeader = ({
   title,
   titleId,
   actions
-}) => /* @__PURE__ */ jsx5(
+}) => /* @__PURE__ */ jsx4(
   Drawer.Header,
   {
-    render: (ctx) => /* @__PURE__ */ jsxs2(
-      Box3,
-      {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        pt: 400,
-        px: 450,
-        flex: "0 0 auto",
-        children: [
-          /* @__PURE__ */ jsx5(
-            Text2,
-            {
-              as: "h2",
-              fontSize: 400,
-              fontWeight: "semibold",
-              color: "text.headline",
-              id: titleId,
-              children: title
-            }
-          ),
-          /* @__PURE__ */ jsxs2(Box3, { display: "flex", alignItems: "center", gap: 200, children: [
-            actions.map((action, i) => /* @__PURE__ */ jsx5(
-              Button2,
-              {
-                appearance: "pill",
-                "aria-label": action["aria-label"],
-                onClick: action.onClick,
-                disabled: action.disabled,
-                children: action.iconName && /* @__PURE__ */ jsx5(Icon2, { "aria-hidden": true, name: action.iconName })
-              },
-              i
-            )),
-            /* @__PURE__ */ jsx5(
-              Button2,
-              {
-                appearance: "pill",
-                "aria-label": ctx.closeButtonLabel,
-                onClick: ctx.onClose,
-                children: /* @__PURE__ */ jsx5(Icon2, { "aria-hidden": true, name: "x-outline" })
-              }
-            )
-          ] })
-        ]
-      }
-    )
+    render: (ctx) => /* @__PURE__ */ jsxs2("div", { className: "seeds-panel-mobile-actions-header", children: [
+      /* @__PURE__ */ jsx4(
+        Text2,
+        {
+          as: "h2",
+          fontSize: 400,
+          fontWeight: "semibold",
+          color: "text.headline",
+          id: titleId,
+          children: title
+        }
+      ),
+      /* @__PURE__ */ jsxs2("div", { className: "seeds-panel-mobile-actions-buttons", children: [
+        actions.map((action, i) => /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            appearance: "pill",
+            "aria-label": action["aria-label"],
+            onClick: action.onClick,
+            disabled: action.disabled,
+            children: action.iconName && /* @__PURE__ */ jsx4(Icon2, { "aria-hidden": true, name: action.iconName })
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx4(
+          Button2,
+          {
+            appearance: "pill",
+            "aria-label": ctx.closeButtonLabel,
+            onClick: ctx.onClose,
+            children: /* @__PURE__ */ jsx4(Icon2, { "aria-hidden": true, name: "x-outline" })
+          }
+        )
+      ] })
+    ] })
   }
 );
 PanelMobileActionsHeader.displayName = "PanelMobileActionsHeader";
 
-// src/Panel.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var PanelComponent = ({
-  children,
-  closeButtonLabel,
-  header,
-  headerless = false,
-  footer,
-  title,
-  titleId,
-  direction = "right",
-  width = 384,
-  gap = 4,
-  mobileBreakpoint,
-  zIndex,
-  id,
-  snapPoints,
-  defaultSnapPoint,
-  snapPoint,
-  onSnapPointChange,
-  snapToSequentialPoints,
-  actions,
-  actionsInHeader,
-  "aria-labelledby": ariaLabelledByProp,
-  "aria-label": ariaLabel,
-  ...rest
-}) => {
-  const panelContext = usePanelContext();
-  const { isPanelOpen, closePanel } = panelContext;
-  const isMobile = useIsMobile(mobileBreakpoint);
-  const enrichedValue = React6.useMemo(
-    () => ({ ...panelContext, closeButtonLabel, headerless }),
-    [panelContext, closeButtonLabel, headerless]
-  );
-  const prevChildrenRef = React6.useRef(null);
-  if (isPanelOpen) {
-    prevChildrenRef.current = children;
-  }
-  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
-  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (!headerless && header == null ? titleId : void 0);
-  if (isMobile) {
-    const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
-    let defaultMobileHeader = null;
-    if (!headerless) {
-      defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ jsx6(
-        PanelMobileActionsHeader,
-        {
-          title,
-          titleId,
-          actions
-        }
-      ) : /* @__PURE__ */ jsx6(Drawer2.Header, { title, id: titleId });
-    }
-    return /* @__PURE__ */ jsx6(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsxs3(
-      Drawer2,
+// src/PanelMobile.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var PanelMobile = ({ shell }) => {
+  const {
+    rest,
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    zIndex,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    ariaLabel,
+    isPanelOpen,
+    closePanel,
+    enrichedValue,
+    effectiveAriaLabelledBy
+  } = shell;
+  const shouldRenderActionsHeader = !headerless && header == null && actionsInHeader === true && !!actions && actions.length > 0;
+  let defaultMobileHeader = null;
+  if (!headerless) {
+    defaultMobileHeader = shouldRenderActionsHeader ? /* @__PURE__ */ jsx5(
+      PanelMobileActionsHeader,
       {
-        ...rest,
-        open: isPanelOpen,
-        onClose: closePanel,
-        direction: "bottom",
-        closeButtonLabel,
-        zIndex,
-        snapPoints,
-        defaultSnapPoint,
-        snapPoint,
-        onSnapPointChange,
-        snapToSequentialPoints,
-        actions,
-        actionsInHeader,
-        "aria-labelledby": effectiveAriaLabelledBy,
-        "aria-label": ariaLabel,
-        children: [
-          header ?? defaultMobileHeader,
-          /* @__PURE__ */ jsx6(PanelContent, { children }),
-          footer
-        ]
+        title,
+        titleId,
+        actions
       }
-    ) });
+    ) : /* @__PURE__ */ jsx5(Drawer2.Header, { title, id: titleId });
+  }
+  return /* @__PURE__ */ jsx5(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsxs3(
+    Drawer2,
+    {
+      ...rest,
+      open: isPanelOpen,
+      onClose: closePanel,
+      direction: "bottom",
+      closeButtonLabel,
+      zIndex,
+      snapPoints,
+      defaultSnapPoint,
+      snapPoint,
+      onSnapPointChange,
+      snapToSequentialPoints,
+      actions,
+      actionsInHeader,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: [
+        header ?? defaultMobileHeader,
+        /* @__PURE__ */ jsx5(PanelContent, { children }),
+        footer
+      ]
+    }
+  ) });
+};
+
+// src/PanelStyled.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var PanelStyled = (props) => {
+  const shell = usePanelShell(props);
+  const {
+    rest,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    id,
+    ariaLabel,
+    isPanelOpen,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  } = shell;
+  if (isMobile) {
+    return /* @__PURE__ */ jsx6(PanelMobile, { shell });
   }
   return /* @__PURE__ */ jsx6(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsx6(
     PanelContainer,
@@ -329,7 +490,7 @@ var PanelComponent = ({
       "data-qa-panel-isopen": isPanelOpen,
       "aria-labelledby": effectiveAriaLabelledBy,
       "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsxs3(PanelInner, { $direction: direction, $width: width, children: [
+      children: /* @__PURE__ */ jsxs4(PanelInner, { $direction: direction, $width: width, children: [
         header ?? (headerless ? null : /* @__PURE__ */ jsx6(PanelHeader, { title, id: titleId })),
         /* @__PURE__ */ jsx6(PanelContent, { children: renderedChildren }),
         footer
@@ -337,6 +498,126 @@ var PanelComponent = ({
     }
   ) });
 };
+
+// src/PanelTailwind.tsx
+import "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var PanelTailwind = (props) => {
+  const shell = usePanelShell(props);
+  const {
+    rest,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    id,
+    ariaLabel,
+    isPanelOpen,
+    isMobile,
+    enrichedValue,
+    renderedChildren,
+    effectiveAriaLabelledBy
+  } = shell;
+  if (isMobile) {
+    return /* @__PURE__ */ jsx7(PanelMobile, { shell });
+  }
+  const { className, style, ...domRest } = rest;
+  const containerStyle = getPanelContainerStyle(
+    direction,
+    width,
+    gap,
+    isPanelOpen
+  );
+  const innerStyle = getPanelInnerStyle(direction, width);
+  return /* @__PURE__ */ jsx7(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ jsx7(
+    "aside",
+    {
+      ...domRest,
+      className: cn("seeds-panel", className),
+      style: { ...containerStyle, ...style },
+      "data-qa-panel": id,
+      "data-qa-panel-isopen": isPanelOpen,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsxs5("div", { className: "seeds-panel-inner", style: innerStyle, children: [
+        header ?? (headerless ? null : /* @__PURE__ */ jsx7(PanelHeader, { title, id: titleId })),
+        /* @__PURE__ */ jsx7(PanelContent, { children: renderedChildren }),
+        footer
+      ] })
+    }
+  ) });
+};
+
+// src/PanelHybrid.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var PanelHybrid = (props) => {
+  const {
+    children,
+    closeButtonLabel,
+    header,
+    headerless,
+    footer,
+    title,
+    titleId,
+    direction,
+    width,
+    gap,
+    mobileBreakpoint,
+    zIndex,
+    id,
+    snapPoints,
+    defaultSnapPoint,
+    snapPoint,
+    onSnapPointChange,
+    snapToSequentialPoints,
+    actions,
+    actionsInHeader,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-label": ariaLabel,
+    ...rest
+  } = props;
+  if (needsStyledComponents3(rest)) {
+    return /* @__PURE__ */ jsx8(PanelStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx8(PanelTailwind, { ...props });
+};
+PanelHybrid.displayName = "Panel";
+
+// src/PanelFooter.tsx
+import "react";
+import { needsStyledComponents as needsStyledComponents4 } from "@sproutsocial/seeds-react-system-props";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var PanelFooterStyled = ({ children, ...rest }) => /* @__PURE__ */ jsx9(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
+var PanelFooterTailwind = ({ children, ...rest }) => {
+  const { className, style, ...domRest } = rest;
+  return /* @__PURE__ */ jsx9(
+    "div",
+    {
+      className: cn("seeds-panel-footer", className),
+      style: { marginBottom: "var(--bleed, 0px)", ...style },
+      "data-panel-footer": "",
+      ...domRest,
+      children
+    }
+  );
+};
+var PanelFooter = (props) => {
+  const { children, ...rest } = props;
+  if (needsStyledComponents4(rest)) {
+    return /* @__PURE__ */ jsx9(PanelFooterStyled, { ...props });
+  }
+  return /* @__PURE__ */ jsx9(PanelFooterTailwind, { ...props });
+};
+PanelFooter.displayName = "Panel.Footer";
+
+// src/Panel.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var PanelComponent = (props) => /* @__PURE__ */ jsx10(PanelHybrid, { ...props });
+PanelComponent.displayName = "Panel";
 PanelComponent.Header = PanelHeader;
 PanelComponent.Content = PanelContent;
 PanelComponent.CloseButton = PanelCloseButton;
@@ -344,35 +625,35 @@ PanelComponent.Footer = PanelFooter;
 var Panel_default = PanelComponent;
 
 // src/PanelProvider.tsx
-import * as React7 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import * as React9 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var PanelProvider = ({
   children,
   defaultOpen = false,
   open: controlledOpen,
   onOpenChange
 }) => {
-  const [internalOpen, setInternalOpen] = React7.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React9.useState(defaultOpen);
   const isControlled = controlledOpen !== void 0;
   const isPanelOpen = isControlled ? controlledOpen : internalOpen;
-  const setOpen = React7.useCallback(
+  const setOpen = React9.useCallback(
     (next) => {
       if (!isControlled) setInternalOpen(next);
       onOpenChange?.(next);
     },
     [isControlled, onOpenChange]
   );
-  const openPanel = React7.useCallback(() => setOpen(true), [setOpen]);
-  const closePanel = React7.useCallback(() => setOpen(false), [setOpen]);
-  const togglePanel = React7.useCallback(
+  const openPanel = React9.useCallback(() => setOpen(true), [setOpen]);
+  const closePanel = React9.useCallback(() => setOpen(false), [setOpen]);
+  const togglePanel = React9.useCallback(
     () => setOpen(!isPanelOpen),
     [setOpen, isPanelOpen]
   );
-  const value = React7.useMemo(
+  const value = React9.useMemo(
     () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),
     [isPanelOpen, openPanel, closePanel, togglePanel]
   );
-  return /* @__PURE__ */ jsx7(PanelContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx11(PanelContext.Provider, { value, children });
 };
 
 // src/PanelTypes.ts