@sproutsocial/seeds-react-panel 0.3.7

package/dist/index.js

@@ -0,0 +1,410 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Panel: () => Panel_default,
+  PanelCloseButton: () => PanelCloseButton,
+  PanelContent: () => PanelContent,
+  PanelContext: () => PanelContext,
+  PanelFooter: () => PanelFooter,
+  PanelHeader: () => PanelHeader,
+  PanelProvider: () => PanelProvider,
+  default: () => index_default,
+  usePanelContext: () => usePanelContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Panel.tsx
+var React6 = __toESM(require("react"));
+var import_seeds_react_drawer2 = __toESM(require("@sproutsocial/seeds-react-drawer"));
+var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
+
+// src/PanelContext.tsx
+var React = __toESM(require("react"));
+var PanelContext = React.createContext(null);
+var usePanelContext = () => {
+  const ctx = React.useContext(PanelContext);
+  if (!ctx) {
+    throw new Error(
+      "usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel."
+    );
+  }
+  return ctx;
+};
+
+// src/PanelHeader.tsx
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
+
+// src/PanelCloseButton.tsx
+var React2 = require("react");
+var import_seeds_react_button = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_icon = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PanelCloseButton = (props) => {
+  const panelContext = usePanelContext();
+  if (props.render) {
+    return props.render(panelContext) ?? null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_seeds_react_button.default,
+    {
+      appearance: "pill",
+      "aria-label": panelContext.closeButtonLabel,
+      onClick: panelContext.closePanel,
+      ...props,
+      children: props.children || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_icon.default, { "aria-hidden": true, name: "x-outline" })
+    }
+  );
+};
+PanelCloseButton.displayName = "Panel.CloseButton";
+
+// src/PanelHeader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PanelHeader = ({
+  title = "",
+  id = void 0,
+  children,
+  render,
+  ...rest
+}) => {
+  const panelContext = usePanelContext();
+  if (render) {
+    return render(panelContext);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_seeds_react_box.default,
+    {
+      display: "flex",
+      flex: "0 0 auto",
+      justifyContent: "space-between",
+      alignItems: "center",
+      p: 400,
+      borderBottom: "1px solid",
+      borderColor: "container.border.base",
+      ...rest,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_seeds_react_text.default.Headline, { id, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PanelCloseButton, {})
+      ] })
+    }
+  );
+};
+PanelHeader.displayName = "Panel.Header";
+
+// src/PanelContent.tsx
+var React3 = require("react");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var import_unitless = require("@sproutsocial/seeds-motion/unitless");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var gapSide = (direction) => {
+  if (direction === "right") return "left";
+  if (direction === "left") return "right";
+  return "top";
+};
+var PanelContainer = import_styled_components.default.aside`
+  background: ${(props) => props.theme.colors.container.background.base};
+  flex-grow: 0;
+  flex-shrink: 0;
+  overflow: hidden;
+  transition: flex-basis ${import_unitless.MOTION_DURATION_MEDIUM}s ease-in-out,
+    margin ${import_unitless.MOTION_DURATION_MEDIUM}s ease-in-out;
+  flex-basis: ${(props) => props.$isOpen ? `${props.$width}px` : "0px"};
+  margin-${(props) => gapSide(props.$direction)}: ${(props) => props.$isOpen && props.$gap ? `${props.$gap}px` : "0px"};
+  border-radius: ${({ theme }) => theme.radii[800]};
+
+  ${(props) => props.$direction === "bottom" ? import_styled_components.css`
+          width: 100%;
+        ` : import_styled_components.css`
+          height: 100%;
+        `}
+
+  ${import_seeds_react_system_props.COMMON}
+`;
+var PanelInner = import_styled_components.default.div`
+  ${(props) => props.$direction === "bottom" ? import_styled_components.css`
+          min-height: ${props.$width}px;
+          width: 100%;
+        ` : import_styled_components.css`
+          min-width: ${props.$width}px;
+          height: 100%;
+        `}
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+`;
+var Content = (0, import_styled_components.default)(import_seeds_react_box2.default)`
+  overflow-y: auto;
+`;
+var Footer = (0, import_styled_components.default)(import_seeds_react_box2.default)`
+  flex: 0 0 auto;
+  overflow: hidden;
+`;
+
+// src/PanelContent.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PanelContent = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  Content,
+  {
+    flex: "1 1 auto",
+    minHeight: "0",
+    p: 450,
+    color: "text.body",
+    "data-panel-content": "",
+    ...rest,
+    children
+  }
+);
+PanelContent.displayName = "Panel.Content";
+
+// src/PanelFooter.tsx
+var React4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PanelFooter = ({ children, ...rest }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Footer, { p: 450, "data-panel-footer": "", ...rest, children });
+PanelFooter.displayName = "Panel.Footer";
+
+// src/PanelMobileActionsHeader.tsx
+var React5 = require("react");
+var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_button2 = __toESM(require("@sproutsocial/seeds-react-button"));
+var import_seeds_react_drawer = __toESM(require("@sproutsocial/seeds-react-drawer"));
+var import_seeds_react_icon2 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PanelMobileActionsHeader = ({
+  title,
+  titleId,
+  actions
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  import_seeds_react_drawer.default.Header,
+  {
+    render: (ctx) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_seeds_react_box3.default,
+      {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pt: 400,
+        px: 450,
+        flex: "0 0 auto",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_seeds_react_text2.default,
+            {
+              as: "h2",
+              fontSize: 400,
+              fontWeight: "semibold",
+              color: "text.headline",
+              id: titleId,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", gap: 200, children: [
+            actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_seeds_react_button2.default,
+              {
+                appearance: "pill",
+                "aria-label": action["aria-label"],
+                onClick: action.onClick,
+                disabled: action.disabled,
+                children: action.iconName && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: action.iconName })
+              },
+              i
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_seeds_react_button2.default,
+              {
+                appearance: "pill",
+                "aria-label": ctx.closeButtonLabel,
+                onClick: ctx.onClose,
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_seeds_react_icon2.default, { "aria-hidden": true, name: "x-outline" })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  }
+);
+PanelMobileActionsHeader.displayName = "PanelMobileActionsHeader";
+
+// src/Panel.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var PanelComponent = ({
+  children,
+  closeButtonLabel,
+  header,
+  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 = (0, import_seeds_react_hooks.useIsMobile)(mobileBreakpoint);
+  const enrichedValue = React6.useMemo(
+    () => ({ ...panelContext, closeButtonLabel }),
+    [panelContext, closeButtonLabel]
+  );
+  const prevChildrenRef = React6.useRef(null);
+  if (isPanelOpen) {
+    prevChildrenRef.current = children;
+  }
+  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;
+  const effectiveAriaLabelledBy = ariaLabelledByProp ?? (header == null ? titleId : void 0);
+  if (isMobile) {
+    const shouldRenderActionsHeader = header == null && actionsInHeader === true && !!actions && actions.length > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      import_seeds_react_drawer2.default,
+      {
+        ...rest,
+        open: isPanelOpen,
+        onClose: closePanel,
+        direction: "bottom",
+        closeButtonLabel,
+        zIndex,
+        snapPoints,
+        defaultSnapPoint,
+        snapPoint,
+        onSnapPointChange,
+        snapToSequentialPoints,
+        actions,
+        actionsInHeader,
+        "aria-labelledby": effectiveAriaLabelledBy,
+        "aria-label": ariaLabel,
+        children: [
+          header ?? (shouldRenderActionsHeader ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            PanelMobileActionsHeader,
+            {
+              title,
+              titleId,
+              actions
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_drawer2.default.Header, { title, id: titleId })),
+          children,
+          footer
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelContext.Provider, { value: enrichedValue, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    PanelContainer,
+    {
+      ...rest,
+      $isOpen: isPanelOpen,
+      $direction: direction,
+      $width: width,
+      $gap: gap,
+      "data-qa-panel": id,
+      "data-qa-panel-isopen": isPanelOpen,
+      "aria-labelledby": effectiveAriaLabelledBy,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(PanelInner, { $direction: direction, $width: width, children: [
+        header ?? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PanelHeader, { title, id: titleId }),
+        renderedChildren,
+        footer
+      ] })
+    }
+  ) });
+};
+PanelComponent.Header = PanelHeader;
+PanelComponent.Content = PanelContent;
+PanelComponent.CloseButton = PanelCloseButton;
+PanelComponent.Footer = PanelFooter;
+var Panel_default = PanelComponent;
+
+// src/PanelProvider.tsx
+var React7 = __toESM(require("react"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PanelProvider = ({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange
+}) => {
+  const [internalOpen, setInternalOpen] = React7.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isPanelOpen = isControlled ? controlledOpen : internalOpen;
+  const setOpen = React7.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(
+    () => setOpen(!isPanelOpen),
+    [setOpen, isPanelOpen]
+  );
+  const value = React7.useMemo(
+    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),
+    [isPanelOpen, openPanel, closePanel, togglePanel]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PanelContext.Provider, { value, children });
+};
+
+// src/PanelTypes.ts
+var React8 = require("react");
+
+// src/index.ts
+var index_default = Panel_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Panel,
+  PanelCloseButton,
+  PanelContent,
+  PanelContext,
+  PanelFooter,
+  PanelHeader,
+  PanelProvider,
+  usePanelContext
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Panel.tsx","../src/PanelContext.tsx","../src/PanelHeader.tsx","../src/PanelCloseButton.tsx","../src/PanelContent.tsx","../src/styles.ts","../src/PanelFooter.tsx","../src/PanelMobileActionsHeader.tsx","../src/PanelProvider.tsx","../src/PanelTypes.ts"],"sourcesContent":["import Panel from \"./Panel\";\n\nexport default Panel;\nexport { Panel };\nexport { PanelContext, usePanelContext } from \"./PanelContext\";\nexport { PanelProvider } from \"./PanelProvider\";\nexport { PanelHeader } from \"./PanelHeader\";\nexport { PanelContent } from \"./PanelContent\";\nexport { PanelCloseButton } from \"./PanelCloseButton\";\nexport { PanelFooter } from \"./PanelFooter\";\nexport * from \"./PanelTypes\";\n","import * as React from \"react\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport { useIsMobile } from \"@sproutsocial/seeds-react-hooks\";\nimport { usePanelContext, PanelContext } from \"./PanelContext\";\nimport { PanelHeader } from \"./PanelHeader\";\nimport { PanelContent } from \"./PanelContent\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport { PanelFooter } from \"./PanelFooter\";\nimport { PanelMobileActionsHeader } from \"./PanelMobileActionsHeader\";\nimport { PanelContainer, PanelInner } from \"./styles\";\nimport type { TypePanelProps, TypePanelContext } from \"./PanelTypes\";\n\nconst PanelComponent = ({\n  children,\n  closeButtonLabel,\n  header,\n  footer,\n  title,\n  titleId,\n  direction = \"right\",\n  width = 384,\n  gap = 4,\n  mobileBreakpoint,\n  zIndex,\n  id,\n  snapPoints,\n  defaultSnapPoint,\n  snapPoint,\n  onSnapPointChange,\n  snapToSequentialPoints,\n  actions,\n  actionsInHeader,\n  \"aria-labelledby\": ariaLabelledByProp,\n  \"aria-label\": ariaLabel,\n  ...rest\n}: TypePanelProps) => {\n  const panelContext = usePanelContext();\n  const { isPanelOpen, closePanel } = panelContext;\n  const isMobile = useIsMobile(mobileBreakpoint);\n\n  // Expose closeButtonLabel through context so PanelCloseButton can read it\n  // without prop drilling — same pattern as DrawerContext.\n  const enrichedValue = React.useMemo<TypePanelContext>(\n    () => ({ ...panelContext, closeButtonLabel }),\n    [panelContext, closeButtonLabel]\n  );\n\n  // Freeze the last-rendered children during the collapse so consumers that\n  // conditionally render content don't produce an empty panel shell while the\n  // flex-basis animation runs.\n  const prevChildrenRef = React.useRef<React.ReactNode>(null);\n  if (isPanelOpen) {\n    prevChildrenRef.current = children;\n  }\n  const renderedChildren = isPanelOpen ? children : prevChildrenRef.current;\n\n  // When the consumer relies on the default header, its title element renders\n  // with `id={titleId}`. Auto-wire `aria-labelledby` so the dialog/aside has an\n  // accessible name without forcing every caller to repeat the id.\n  const effectiveAriaLabelledBy =\n    ariaLabelledByProp ?? (header == null ? titleId : undefined);\n\n  if (isMobile) {\n    // With `actionsInHeader`, Drawer suppresses the floating rail and expects\n    // the consumer to render the actions inside a custom header. Auto-compose\n    // one (title + action pills + close pill) when the consumer hasn't\n    // supplied their own header; otherwise we'd drop `actions` on the floor.\n    const shouldRenderActionsHeader =\n      header == null &&\n      actionsInHeader === true &&\n      !!actions &&\n      actions.length > 0;\n\n    return (\n      <PanelContext.Provider value={enrichedValue}>\n        <Drawer\n          {...rest}\n          open={isPanelOpen}\n          onClose={closePanel}\n          direction=\"bottom\"\n          closeButtonLabel={closeButtonLabel}\n          zIndex={zIndex}\n          snapPoints={snapPoints}\n          defaultSnapPoint={defaultSnapPoint}\n          snapPoint={snapPoint}\n          onSnapPointChange={onSnapPointChange}\n          snapToSequentialPoints={snapToSequentialPoints}\n          actions={actions}\n          actionsInHeader={actionsInHeader}\n          aria-labelledby={effectiveAriaLabelledBy}\n          aria-label={ariaLabel}\n        >\n          {header ??\n            (shouldRenderActionsHeader ? (\n              <PanelMobileActionsHeader\n                title={title}\n                titleId={titleId}\n                actions={actions!}\n              />\n            ) : (\n              <Drawer.Header title={title} id={titleId} />\n            ))}\n          {children}\n          {footer}\n        </Drawer>\n      </PanelContext.Provider>\n    );\n  }\n\n  return (\n    <PanelContext.Provider value={enrichedValue}>\n      <PanelContainer\n        {...rest}\n        $isOpen={isPanelOpen}\n        $direction={direction}\n        $width={width}\n        $gap={gap}\n        data-qa-panel={id}\n        data-qa-panel-isopen={isPanelOpen}\n        aria-labelledby={effectiveAriaLabelledBy}\n        aria-label={ariaLabel}\n      >\n        <PanelInner $direction={direction} $width={width}>\n          {header ?? <PanelHeader title={title} id={titleId} />}\n          {renderedChildren}\n          {footer}\n        </PanelInner>\n      </PanelContainer>\n    </PanelContext.Provider>\n  );\n};\n\nPanelComponent.Header = PanelHeader;\nPanelComponent.Content = PanelContent;\nPanelComponent.CloseButton = PanelCloseButton;\nPanelComponent.Footer = PanelFooter;\n\nexport const Panel = PanelComponent;\nexport default PanelComponent;\n","import * as React from \"react\";\nimport type { TypePanelContext } from \"./PanelTypes\";\n\nexport const PanelContext = React.createContext<TypePanelContext | null>(null);\n\nexport const usePanelContext = (): TypePanelContext => {\n  const ctx = React.useContext(PanelContext);\n  if (!ctx) {\n    throw new Error(\n      \"usePanelContext must be used within a <PanelProvider>. Wrap the consuming tree in <PanelProvider> to provide isPanelOpen / togglePanel.\"\n    );\n  }\n  return ctx;\n};\n","import Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { usePanelContext } from \"./PanelContext\";\nimport { PanelCloseButton } from \"./PanelCloseButton\";\nimport type { TypePanelHeaderProps } from \"./PanelTypes\";\n\nexport const PanelHeader = ({\n  title = \"\",\n  id = undefined,\n  children,\n  render,\n  ...rest\n}: TypePanelHeaderProps) => {\n  const panelContext = usePanelContext();\n\n  if (render) {\n    return render(panelContext);\n  }\n\n  return (\n    <Box\n      display=\"flex\"\n      flex=\"0 0 auto\"\n      justifyContent=\"space-between\"\n      alignItems=\"center\"\n      p={400}\n      borderBottom=\"1px solid\"\n      borderColor=\"container.border.base\"\n      {...rest}\n    >\n      {children || (\n        <>\n          <Text.Headline id={id}>{title}</Text.Headline>\n          <PanelCloseButton />\n        </>\n      )}\n    </Box>\n  );\n};\n\nPanelHeader.displayName = \"Panel.Header\";\n","import * as React from \"react\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\nimport { usePanelContext } from \"./PanelContext\";\nimport type { TypePanelCloseButtonProps } from \"./PanelTypes\";\n\nexport const PanelCloseButton = (props: TypePanelCloseButtonProps) => {\n  const panelContext = usePanelContext();\n\n  if (props.render) {\n    return props.render(panelContext) ?? null;\n  }\n\n  return (\n    <Button\n      appearance=\"pill\"\n      aria-label={panelContext.closeButtonLabel}\n      onClick={panelContext.closePanel}\n      {...props}\n    >\n      {props.children || <Icon aria-hidden name=\"x-outline\" />}\n    </Button>\n  );\n};\n\nPanelCloseButton.displayName = \"Panel.CloseButton\";\n","import * as React from \"react\";\nimport { Content } from \"./styles\";\nimport type { TypePanelContentProps } from \"./PanelTypes\";\n\nexport const PanelContent = ({ children, ...rest }: TypePanelContentProps) => (\n  <Content\n    flex=\"1 1 auto\"\n    minHeight=\"0\"\n    p={450}\n    color=\"text.body\"\n    data-panel-content=\"\"\n    {...rest}\n  >\n    {children}\n  </Content>\n);\n\nPanelContent.displayName = \"Panel.Content\";\n","import styled, { css } from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeSystemCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport { MOTION_DURATION_MEDIUM } from \"@sproutsocial/seeds-motion/unitless\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport type { PanelDirection } from \"./PanelTypes\";\n\ninterface PanelContainerProps extends TypeSystemCommonProps {\n  $isOpen: boolean;\n  $direction: PanelDirection;\n  $width: number;\n  $gap: number;\n}\n\nconst gapSide = (direction: PanelDirection): \"left\" | \"right\" | \"top\" => {\n  if (direction === \"right\") return \"left\";\n  if (direction === \"left\") return \"right\";\n  return \"top\";\n};\n\nexport const PanelContainer = styled.aside<PanelContainerProps>`\n  background: ${(props) => props.theme.colors.container.background.base};\n  flex-grow: 0;\n  flex-shrink: 0;\n  overflow: hidden;\n  transition: flex-basis ${MOTION_DURATION_MEDIUM}s ease-in-out,\n    margin ${MOTION_DURATION_MEDIUM}s ease-in-out;\n  flex-basis: ${(props) => (props.$isOpen ? `${props.$width}px` : \"0px\")};\n  margin-${(props) => gapSide(props.$direction)}: ${(props) =>\n  props.$isOpen && props.$gap ? `${props.$gap}px` : \"0px\"};\n  border-radius: ${({ theme }) => theme.radii[800]};\n\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          width: 100%;\n        `\n      : css`\n          height: 100%;\n        `}\n\n  ${COMMON}\n`;\n\nexport const PanelInner = styled.div<{\n  $direction: PanelDirection;\n  $width: number;\n}>`\n  ${(props) =>\n    props.$direction === \"bottom\"\n      ? css`\n          min-height: ${props.$width}px;\n          width: 100%;\n        `\n      : css`\n          min-width: ${props.$width}px;\n          height: 100%;\n        `}\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n`;\n\nexport const Content = styled(Box)`\n  overflow-y: auto;\n`;\n\nexport const Footer = styled(Box)`\n  flex: 0 0 auto;\n  overflow: hidden;\n`;\n","import * as React from \"react\";\nimport { Footer } from \"./styles\";\nimport type { TypePanelFooterProps } from \"./PanelTypes\";\n\nexport const PanelFooter = ({ children, ...rest }: TypePanelFooterProps) => (\n  <Footer p={450} data-panel-footer=\"\" {...rest}>\n    {children}\n  </Footer>\n);\n\nPanelFooter.displayName = \"Panel.Footer\";\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Button from \"@sproutsocial/seeds-react-button\";\nimport Drawer from \"@sproutsocial/seeds-react-drawer\";\nimport Icon from \"@sproutsocial/seeds-react-icon\";\n// eslint-disable-next-line import/no-deprecated\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport type { TypeDrawerActionProps } from \"@sproutsocial/seeds-react-drawer\";\n\ninterface TypePanelMobileActionsHeaderProps {\n  title?: string;\n  titleId?: string;\n  actions: TypeDrawerActionProps[];\n}\n\n/**\n * Mobile bottom-sheet header used by Panel when `actionsInHeader` is set and\n * no custom `header` is provided. Renders the title on the left and the\n * forwarded actions plus a close button as pills on the right — mirrors the\n * pattern in `seeds-react-peek-in/PeekIn.tsx`. The Drawer's floating rail is\n * suppressed in this combination (`actionsInHeader` opts out), so without this\n * header the actions would render nowhere.\n */\nexport const PanelMobileActionsHeader = ({\n  title,\n  titleId,\n  actions,\n}: TypePanelMobileActionsHeaderProps) => (\n  <Drawer.Header\n    render={(ctx) => (\n      <Box\n        display=\"flex\"\n        alignItems=\"center\"\n        justifyContent=\"space-between\"\n        pt={400}\n        px={450}\n        flex=\"0 0 auto\"\n      >\n        <Text\n          as=\"h2\"\n          fontSize={400}\n          fontWeight=\"semibold\"\n          color=\"text.headline\"\n          id={titleId}\n        >\n          {title}\n        </Text>\n        <Box display=\"flex\" alignItems=\"center\" gap={200}>\n          {actions.map((action, i) => (\n            <Button\n              key={i}\n              appearance=\"pill\"\n              aria-label={action[\"aria-label\"]}\n              onClick={action.onClick}\n              disabled={action.disabled}\n            >\n              {action.iconName && <Icon aria-hidden name={action.iconName} />}\n            </Button>\n          ))}\n          <Button\n            appearance=\"pill\"\n            aria-label={ctx.closeButtonLabel}\n            onClick={ctx.onClose}\n          >\n            <Icon aria-hidden name=\"x-outline\" />\n          </Button>\n        </Box>\n      </Box>\n    )}\n  />\n);\n\nPanelMobileActionsHeader.displayName = \"PanelMobileActionsHeader\";\n","import * as React from \"react\";\nimport { PanelContext } from \"./PanelContext\";\nimport type { TypePanelContext, TypePanelProviderProps } from \"./PanelTypes\";\n\nexport const PanelProvider = ({\n  children,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n}: TypePanelProviderProps) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);\n  const isControlled = controlledOpen !== undefined;\n  const isPanelOpen = isControlled ? controlledOpen : internalOpen;\n\n  const setOpen = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setInternalOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange]\n  );\n\n  const openPanel = React.useCallback(() => setOpen(true), [setOpen]);\n  const closePanel = React.useCallback(() => setOpen(false), [setOpen]);\n  const togglePanel = React.useCallback(\n    () => setOpen(!isPanelOpen),\n    [setOpen, isPanelOpen]\n  );\n\n  const value = React.useMemo<TypePanelContext>(\n    () => ({ isPanelOpen, openPanel, closePanel, togglePanel }),\n    [isPanelOpen, openPanel, closePanel, togglePanel]\n  );\n\n  return (\n    <PanelContext.Provider value={value}>{children}</PanelContext.Provider>\n  );\n};\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeButtonProps } from \"@sproutsocial/seeds-react-button\";\nimport type {\n  TypeDrawerSnapPoint,\n  TypeDrawerActionProps,\n} from \"@sproutsocial/seeds-react-drawer\";\n\nexport type { TypeDrawerActionProps as TypePanelActionProps };\n\nexport type PanelDirection = \"left\" | \"right\" | \"bottom\";\n\nexport interface TypePanelContext {\n  isPanelOpen: boolean;\n  togglePanel: () => void;\n  openPanel: () => void;\n  closePanel: () => void;\n  closeButtonLabel?: string;\n}\n\nexport interface TypePanelProviderProps {\n  children: React.ReactNode;\n  /** Initial open state for uncontrolled usage. */\n  defaultOpen?: boolean;\n  /** Controlled open state. When provided, the provider becomes controlled. */\n  open?: boolean;\n  /** Called whenever the open state changes. Required for controlled usage. */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypePanelProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    Omit<React.ComponentPropsWithoutRef<\"div\">, \"color\"> {\n  children: React.ReactNode;\n\n  /** Label for the close button. Usually \"Close\". */\n  closeButtonLabel: string;\n\n  /**\n   * Custom header content. When provided, replaces the auto-rendered default\n   * header entirely — `title` and `titleId` are ignored.\n   */\n  header?: React.ReactNode;\n\n  /** Custom footer content. Not rendered when omitted. */\n  footer?: React.ReactNode;\n\n  /** Title shown in the auto-rendered default header. Ignored when `header` is provided. */\n  title?: string;\n\n  /**\n   * Sets the `id` on the title element of the auto-rendered header. When the\n   * default header is used, Panel automatically wires `aria-labelledby` to this\n   * id so the dialog/aside has an accessible name. Pass an explicit\n   * `aria-labelledby` to override (e.g. when pointing at a different element).\n   * Ignored when `header` is provided — supply your own `aria-labelledby` in\n   * that case.\n   */\n  titleId?: string;\n\n  /** Side the panel anchors to on desktop. Defaults to \"right\". */\n  direction?: PanelDirection;\n\n  /**\n   * Width (px) when direction is \"left\" or \"right\", or height (px) when\n   * direction is \"bottom\". Defaults to 384 to match the existing web-app-core\n   * Panel.\n   */\n  width?: number;\n\n  /**\n   * Visual gap (px) between the panel and the adjacent content. Applied as\n   * margin on the side facing the content (left when direction=\"right\",\n   * right when direction=\"left\", top when direction=\"bottom\"). Animates with\n   * the panel's open/close transition and collapses to 0 when closed so the\n   * gap does not remain visible alongside a zero-width panel. Defaults to 0.\n   */\n  gap?: number;\n\n  /**\n   * Forwarded to `useIsMobile`. Accepts a px number or any CSS media-query\n   * length. Below this width, the panel renders as an overlay bottom sheet\n   * (via seeds-react-drawer). Defaults to the theme's `breakpoints.sm`.\n   */\n  mobileBreakpoint?: number | string;\n\n  /** Applies only to the mobile bottom-sheet rendering. */\n  zIndex?: number;\n\n  /** Optional id used for data-qa-panel attributes. */\n  id?: string;\n\n  /**\n   * Snap points the panel can rest at when rendered as a mobile bottom sheet.\n   * Numbers 0–1 are viewport-height fractions; numbers > 1 are pixels; strings\n   * accept `px`/`rem` (e.g. `\"480px\"`, `\"30rem\"`). Order matters — the last\n   * entry is the \"expanded\" state. Ignored on the desktop side-panel rendering.\n   */\n  snapPoints?: TypeDrawerSnapPoint[];\n\n  /** Initial snap point for uncontrolled use. Mobile only. */\n  defaultSnapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Controlled active snap point. Pair with `onSnapPointChange`. Mobile only. */\n  snapPoint?: TypeDrawerSnapPoint | null;\n\n  /** Fires when the active snap point changes. Mobile only. */\n  onSnapPointChange?: (snapPoint: TypeDrawerSnapPoint | null) => void;\n\n  /**\n   * When true, fast swipes can't skip past adjacent snap points. Mobile only.\n   */\n  snapToSequentialPoints?: boolean;\n\n  /**\n   * Action buttons shown in a floating rail above the panel on mobile (the\n   * bottom-sheet rendering). Ignored on desktop side-panel rendering — pass\n   * actions through `header`/`footer` slots there. The rail owns the close\n   * button so the default header omits its built-in close affordance.\n   */\n  actions?: TypeDrawerActionProps[];\n\n  /**\n   * Opt out of the floating mobile rail and render the `actions` inline in the\n   * header as pill buttons instead. Useful for nested bottom sheets and\n   * snap-point layouts where the floating rail would collide with surrounding\n   * UI. Defaults to `false`.\n   *\n   * When `header` is omitted, Panel auto-composes a mobile header that renders\n   * the title, the `actions` as pills, and a close-button pill. When `header`\n   * is provided, the consumer is responsible for rendering the actions inside\n   * their own header — `actions` is forwarded for context only.\n   */\n  actionsInHeader?: boolean;\n}\n\nexport interface TypePanelHeaderProps extends TypeBoxProps {\n  title?: string;\n  /**\n   * When children are provided, `<Panel.CloseButton />` is NOT rendered\n   * automatically. Include it yourself to preserve keyboard accessibility.\n   */\n  children?: React.ReactNode;\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n}\n\nexport interface TypePanelContentProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelFooterProps extends TypeBoxProps {\n  children?: React.ReactNode;\n}\n\nexport interface TypePanelCloseButtonProps\n  extends Omit<TypeButtonProps, \"children\"> {\n  /** Render-prop override that receives the parent panel context. */\n  render?: React.FC<TypePanelContext>;\n  children?: React.ReactNode;\n}\n"],"mappings":"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","names":["React","import_seeds_react_drawer","React","Button","Icon","import_jsx_runtime","Box","Text","React","import_seeds_react_box","styled","Box","import_jsx_runtime","React","import_jsx_runtime","React","import_seeds_react_box","import_seeds_react_button","import_seeds_react_icon","import_seeds_react_text","import_jsx_runtime","Drawer","Box","Text","Button","Icon","import_jsx_runtime","Drawer","React","import_jsx_runtime","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-panel",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@sproutsocial/seeds-react-panel",
+  "version": "0.3.7",
+  "description": "Seeds React Panel",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^4.1.0",
+    "@sproutsocial/seeds-react-system-props": "^3.1.1",
+    "@sproutsocial/seeds-react-box": "^1.1.21",
+    "@sproutsocial/seeds-react-button": "^2.2.1",
+    "@sproutsocial/seeds-react-icon": "^2.4.0",
+    "@sproutsocial/seeds-react-text": "^1.4.3",
+    "@sproutsocial/seeds-motion": "^1.8.2",
+    "@sproutsocial/seeds-react-drawer": "*",
+    "@sproutsocial/seeds-react-hooks": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}