@sproutsocial/seeds-react-collapsible 1.0.12 → 2.0.0

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     5.92 KB
-CJS dist/index.js.map 8.98 KB
-CJS ⚡️ Build success in 294ms
-ESM dist/esm/index.js     3.92 KB
-ESM dist/esm/index.js.map 8.89 KB
-ESM ⚡️ Build success in 279ms
+ESM dist/esm/index.js     1.79 KB
+ESM dist/esm/index.js.map 3.85 KB
+ESM ⚡️ Build success in 174ms
+CJS dist/index.js     3.57 KB
+CJS dist/index.js.map 3.91 KB
+CJS ⚡️ Build success in 174ms
 DTS Build start
-DTS ⚡️ Build success in 27923ms
-DTS dist/index.d.ts  1.28 KB
-DTS dist/index.d.mts 1.28 KB
-Done in 35.71s.
+DTS ⚡️ Build success in 27032ms
+DTS dist/index.d.ts  1.38 KB
+DTS dist/index.d.mts 1.38 KB
+Done in 37.56s.

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @sproutsocial/seeds-react-collapsible
 
+## 2.0.0
+
+### Major Changes
+
+- b9c5376: Migrate Collapsible to Radix Collapsible
+
+  In-place replacement of the custom implementation with `@radix-ui/react-collapsible`. Removes `offset`, `collapsedHeight` (0 usages), and `openHeight` (1 usage in `UserPermissionsDrawer`). Adds `disabled`, `defaultOpen`, `onOpenChange`, and `forceMount` props.
+
+## 1.0.13
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-box@1.1.13
+- @sproutsocial/seeds-react-hooks@3.1.5
+
 ## 1.0.12
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,133 +1,72 @@
 // src/Collapsible.tsx
-import * as React from "react";
-import { useState, useRef, useContext, useEffect } from "react";
-import { useMeasure } from "@sproutsocial/seeds-react-hooks";
-import Box2 from "@sproutsocial/seeds-react-box";
+import "react";
+import * as RadixCollapsible2 from "@radix-ui/react-collapsible";
 
 // src/styles.ts
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
-var CollapsingBox = styled(Box)`
-  transition: max-height ${(p) => p.theme.duration.medium}
-    ${(p) => p.theme.easing.ease_inout};
-  will-change: max-height;
-  position: relative;
-  overflow: auto;
-  ${({ hasShadow, scrollable }) => hasShadow ? `background:  /* Shadow covers */ linear-gradient(
-        transparent 30%,
-        rgba(255, 255, 255, 0)
-      ),
-      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
-      /* Shadows */
-        radial-gradient(
-          farthest-side at 50% 0,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        ),
-      radial-gradient(
-          farthest-side at 50% 100%,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        )
-        0 100%;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-    background-attachment: local, local, scroll, scroll;
-    ${scrollable ? `overflow: auto` : `overflow: hidden`};` : ""}
+import styled, { css } from "styled-components";
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+var animations = css`
+  @keyframes collapsibleSlideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsibleSlideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+`;
+var StyledCollapsibleContent = styled(RadixCollapsible.Content)`
+  ${animations}
+
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: collapsibleSlideDown 300ms ease-in-out;
+  }
+
+  &[data-state="closed"] {
+    animation: collapsibleSlideUp 300ms ease-in-out;
+  }
 `;
 
 // src/Collapsible.tsx
 import { jsx } from "react/jsx-runtime";
-var idCounter = 0;
-var CollapsibleContext = React.createContext({});
 var Collapsible = ({
   children,
   isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight
+  disabled,
+  defaultOpen,
+  onOpenChange
 }) => {
-  const [id] = useState(`Racine-collapsible-${idCounter++}`);
   return /* @__PURE__ */ jsx(
-    CollapsibleContext.Provider,
+    RadixCollapsible2.Root,
     {
-      value: {
-        isOpen,
-        id,
-        offset,
-        collapsedHeight,
-        openHeight
-      },
+      open: isOpen,
+      disabled,
+      defaultOpen,
+      onOpenChange,
       children
     }
   );
 };
-var determineMaxHeight = (isHidden, openHeight, computedHeight) => {
-  if (isHidden === void 0) return void 0;
-  if (openHeight) return openHeight;
-  return computedHeight;
-};
-var Trigger = ({ children, ...rest }) => {
-  const { isOpen, id } = useContext(CollapsibleContext);
-  return /* @__PURE__ */ jsx(React.Fragment, { children: React.cloneElement(children, {
-    "aria-controls": id,
-    "aria-expanded": !!isOpen,
-    ...rest
-  }) });
+var Trigger2 = ({ children }) => {
+  return /* @__PURE__ */ jsx(RadixCollapsible2.Trigger, { asChild: true, children });
 };
-Trigger.displayName = "Collapsible.Trigger";
-var Panel = ({ children, ...rest }) => {
-  const {
-    isOpen,
-    id,
-    offset = 0,
-    collapsedHeight,
-    openHeight
-  } = useContext(CollapsibleContext);
-  const ref = useRef(null);
-  const measurement = useMeasure(ref);
-  const [isHidden, setIsHidden] = useState(void 0);
-  const maxHeight = determineMaxHeight(
-    isHidden,
-    openHeight,
-    // Round up to the nearest pixel to prevent subpixel rendering issues
-    Math.ceil(measurement.height + offset)
-  );
-  useEffect(() => {
-    if (!isOpen) {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);
-      return () => clearTimeout(timeoutID);
-    } else {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);
-      return () => clearTimeout(timeoutID);
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ jsx(
-    CollapsingBox,
-    {
-      hasShadow: Boolean(collapsedHeight || openHeight && openHeight > 0),
-      scrollable: isOpen,
-      maxHeight: isOpen ? maxHeight : collapsedHeight,
-      minHeight: collapsedHeight,
-      "data-qa-collapsible": "",
-      "data-qa-collapsible-isopen": isOpen === true,
-      ...rest,
-      children: /* @__PURE__ */ jsx(
-        Box2,
-        {
-          width: "100%",
-          hidden: isHidden && collapsedHeight === 0,
-          "aria-hidden": !isOpen,
-          id,
-          ref,
-          children
-        }
-      )
-    }
-  );
+Trigger2.displayName = "Collapsible.Trigger";
+var Panel = ({ children, forceMount }) => {
+  return /* @__PURE__ */ jsx(StyledCollapsibleContent, { forceMount, "data-qa-collapsible": "", children });
 };
 Panel.displayName = "Collapsible.Panel";
-Collapsible.Trigger = Trigger;
+Collapsible.Trigger = Trigger2;
 Collapsible.Panel = Panel;
 var Collapsible_default = Collapsible;
 

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Collapsible.tsx","../../src/styles.ts","../../src/CollapsibleTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { useState, useRef, useContext, useEffect } from \"react\";\nimport { useMeasure } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { CollapsingBox } from \"./styles\";\nimport type {\n  TypeCollapsibleProps,\n  TypeCollapsiblePanelProps,\n  TypeCollapsibleTriggerProps,\n} from \"./CollapsibleTypes\";\n\nlet idCounter = 0;\n\ninterface TypeCollapsibleContext {\n  isOpen?: boolean;\n  id?: string;\n  offset?: number;\n  openHeight?: number;\n  collapsedHeight?: number;\n}\n\nconst CollapsibleContext = React.createContext<TypeCollapsibleContext>({});\n\nconst Collapsible = ({\n  children,\n  isOpen = false,\n  offset = 0,\n  collapsedHeight = 0,\n  openHeight,\n}: TypeCollapsibleProps) => {\n  const [id] = useState(`Racine-collapsible-${idCounter++}`);\n  return (\n    <CollapsibleContext.Provider\n      value={{\n        isOpen,\n        id,\n        offset,\n        collapsedHeight,\n        openHeight,\n      }}\n    >\n      {children}\n    </CollapsibleContext.Provider>\n  );\n};\n\nconst determineMaxHeight = (\n  isHidden?: boolean,\n  openHeight?: number,\n  computedHeight?: number\n): number | undefined => {\n  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added\n  // This is a hack to prevent css from animating if it begins in the open state\n  // css animates when attribute values change (IE from 0 to another number)\n  // css does not animate when simply adding an attribute to an HTML element\n  if (isHidden === undefined) return undefined;\n  // If the user has defined an explicit open height, return that as the max height\n  if (openHeight) return openHeight;\n  // Otherwise, fallback to the computed height\n  return computedHeight;\n};\n\nconst Trigger = ({ children, ...rest }: TypeCollapsibleTriggerProps) => {\n  const { isOpen, id } = useContext(CollapsibleContext);\n  return (\n    <React.Fragment>\n      {React.cloneElement(children, {\n        \"aria-controls\": id,\n        \"aria-expanded\": !!isOpen,\n        ...rest,\n      })}\n    </React.Fragment>\n  );\n};\n\nTrigger.displayName = \"Collapsible.Trigger\";\n\nconst Panel = ({ children, ...rest }: TypeCollapsiblePanelProps) => {\n  const {\n    isOpen,\n    id,\n    offset = 0,\n    collapsedHeight,\n    openHeight,\n  } = useContext(CollapsibleContext);\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const measurement = useMeasure(ref);\n  const [isHidden, setIsHidden] = useState<boolean | undefined>(undefined);\n  const maxHeight = determineMaxHeight(\n    isHidden,\n    openHeight,\n    // Round up to the nearest pixel to prevent subpixel rendering issues\n    Math.ceil(measurement.height + offset)\n  );\n\n  /* We use the \"hidden\" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */\n  useEffect(() => {\n    if (!isOpen) {\n      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);\n      return () => clearTimeout(timeoutID);\n    } else {\n      // Similar to the close animation, we need to delay setting hidden to run slightly async.\n      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.\n      // using this 0 second timeout just allows this component to initially render with an undefined max height,\n      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation\n      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);\n      return () => clearTimeout(timeoutID);\n    }\n  }, [isOpen]);\n\n  return (\n    <CollapsingBox\n      hasShadow={Boolean(collapsedHeight || (openHeight && openHeight > 0))}\n      scrollable={isOpen}\n      maxHeight={isOpen ? maxHeight : collapsedHeight}\n      minHeight={collapsedHeight}\n      data-qa-collapsible=\"\"\n      data-qa-collapsible-isopen={isOpen === true}\n      {...rest}\n    >\n      <Box\n        width=\"100%\"\n        hidden={isHidden && collapsedHeight === 0}\n        aria-hidden={!isOpen}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    </CollapsingBox>\n  );\n};\n\nPanel.displayName = \"Collapsible.Panel\";\n\nCollapsible.Trigger = Trigger;\nCollapsible.Panel = Panel;\n\nexport default Collapsible;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const CollapsingBox = styled(Box)<{\n  hasShadow?: boolean;\n  scrollable?: boolean;\n}>`\n  transition: max-height ${(p) => p.theme.duration.medium}\n    ${(p) => p.theme.easing.ease_inout};\n  will-change: max-height;\n  position: relative;\n  overflow: auto;\n  ${({ hasShadow, scrollable }) =>\n    hasShadow\n      ? `background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    ${scrollable ? `overflow: auto` : `overflow: hidden`};`\n      : \"\"}\n`;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n// The flow type is inexact but the underlying component does not accept any other props.\n// It might be worth extending the box props here for the refactor, but allowing it would provide no functionality right now.\nexport interface TypeCollapsibleProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n\n  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */\n  offset?: number;\n  collapsedHeight?: number;\n  openHeight?: number;\n}\n\nexport interface TypeCollapsibleTriggerProps\n  extends Omit<TypeBoxProps, \"children\"> {\n  // Children is required for the Trigger\n  children: React.ReactElement;\n}\n\nexport interface TypeCollapsiblePanelProps extends TypeBoxProps {}\n","import Collapsible from \"./Collapsible\";\n\nexport default Collapsible;\nexport { Collapsible };\nexport * from \"./CollapsibleTypes\";\n"],"mappings":"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","names":["Box","Box"]}
+{"version":3,"sources":["../../src/Collapsible.tsx","../../src/styles.ts","../../src/CollapsibleTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { StyledCollapsibleContent } from \"./styles\";\nimport type {\n  TypeCollapsibleProps,\n  TypeCollapsiblePanelProps,\n  TypeCollapsibleTriggerProps,\n} from \"./CollapsibleTypes\";\n\nconst Collapsible = ({\n  children,\n  isOpen = false,\n  disabled,\n  defaultOpen,\n  onOpenChange,\n}: TypeCollapsibleProps) => {\n  return (\n    <RadixCollapsible.Root\n      open={isOpen}\n      disabled={disabled}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </RadixCollapsible.Root>\n  );\n};\n\nconst Trigger = ({ children }: TypeCollapsibleTriggerProps) => {\n  return (\n    <RadixCollapsible.Trigger asChild>{children}</RadixCollapsible.Trigger>\n  );\n};\n\nTrigger.displayName = \"Collapsible.Trigger\";\n\nconst Panel = ({ children, forceMount }: TypeCollapsiblePanelProps) => {\n  return (\n    <StyledCollapsibleContent forceMount={forceMount} data-qa-collapsible=\"\">\n      {children}\n    </StyledCollapsibleContent>\n  );\n};\n\nPanel.displayName = \"Collapsible.Panel\";\n\nCollapsible.Trigger = Trigger;\nCollapsible.Panel = Panel;\n\nexport default Collapsible;\n","import styled, { css } from \"styled-components\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\n\nconst animations = css`\n  @keyframes collapsibleSlideDown {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(--radix-collapsible-content-height);\n    }\n  }\n\n  @keyframes collapsibleSlideUp {\n    from {\n      height: var(--radix-collapsible-content-height);\n    }\n    to {\n      height: 0;\n    }\n  }\n`;\n\nexport const StyledCollapsibleContent = styled(RadixCollapsible.Content)`\n  ${animations}\n\n  overflow: hidden;\n\n  &[data-state=\"open\"] {\n    animation: collapsibleSlideDown 300ms ease-in-out;\n  }\n\n  &[data-state=\"closed\"] {\n    animation: collapsibleSlideUp 300ms ease-in-out;\n  }\n`;\n","import * as React from \"react\";\n\nexport interface TypeCollapsibleProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n\n  /** Whether the collapsible is disabled */\n  disabled?: boolean;\n\n  /** The open state when initially rendered. Use when you don't need controlled state. */\n  defaultOpen?: boolean;\n\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypeCollapsibleTriggerProps {\n  /** A single React element that will be used as the trigger via Radix asChild */\n  children: React.ReactElement;\n}\n\nexport interface TypeCollapsiblePanelProps {\n  children?: React.ReactNode;\n\n  /** Force mounting the content when closed. Note: when enabled, content stays in the DOM but animations are not supported. */\n  forceMount?: true;\n}\n","import Collapsible from \"./Collapsible\";\n\nexport default Collapsible;\nexport { Collapsible };\nexport * from \"./CollapsibleTypes\";\n"],"mappings":";AAAA,OAAuB;AACvB,YAAYA,uBAAsB;;;ACDlC,OAAO,UAAU,WAAW;AAC5B,YAAY,sBAAsB;AAElC,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBZ,IAAM,2BAA2B,OAAwB,wBAAO;AAAA,IACnE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADPV;AARJ,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAMC,WAAU,CAAC,EAAE,SAAS,MAAmC;AAC7D,SACE,oBAAkB,2BAAjB,EAAyB,SAAO,MAAE,UAAS;AAEhD;AAEAA,SAAQ,cAAc;AAEtB,IAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,MAAiC;AACrE,SACE,oBAAC,4BAAyB,YAAwB,uBAAoB,IACnE,UACH;AAEJ;AAEA,MAAM,cAAc;AAEpB,YAAY,UAAUA;AACtB,YAAY,QAAQ;AAEpB,IAAO,sBAAQ;;;AEjDf,OAAuB;;;ACEvB,IAAO,gBAAQ;","names":["RadixCollapsible","Trigger"]}

package/dist/index.d.mts

@@ -1,29 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface TypeCollapsibleProps {
     isOpen: boolean;
     children: React.ReactNode;
-    /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
-    offset?: number;
-    collapsedHeight?: number;
-    openHeight?: number;
+    /** Whether the collapsible is disabled */
+    disabled?: boolean;
+    /** The open state when initially rendered. Use when you don't need controlled state. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
 }
-interface TypeCollapsibleTriggerProps extends Omit<TypeBoxProps, "children"> {
+interface TypeCollapsibleTriggerProps {
+    /** A single React element that will be used as the trigger via Radix asChild */
     children: React.ReactElement;
 }
-interface TypeCollapsiblePanelProps extends TypeBoxProps {
+interface TypeCollapsiblePanelProps {
+    children?: React.ReactNode;
+    /** Force mounting the content when closed. Note: when enabled, content stays in the DOM but animations are not supported. */
+    forceMount?: true;
 }
 
 declare const Collapsible: {
-    ({ children, isOpen, offset, collapsedHeight, openHeight, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
+    ({ children, isOpen, disabled, defaultOpen, onOpenChange, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
     Trigger: {
-        ({ children, ...rest }: TypeCollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+        ({ children }: TypeCollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Panel: {
-        ({ children, ...rest }: TypeCollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+        ({ children, forceMount }: TypeCollapsiblePanelProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.d.ts

@@ -1,29 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypeBoxProps } from '@sproutsocial/seeds-react-box';
 
 interface TypeCollapsibleProps {
     isOpen: boolean;
     children: React.ReactNode;
-    /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
-    offset?: number;
-    collapsedHeight?: number;
-    openHeight?: number;
+    /** Whether the collapsible is disabled */
+    disabled?: boolean;
+    /** The open state when initially rendered. Use when you don't need controlled state. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
 }
-interface TypeCollapsibleTriggerProps extends Omit<TypeBoxProps, "children"> {
+interface TypeCollapsibleTriggerProps {
+    /** A single React element that will be used as the trigger via Radix asChild */
     children: React.ReactElement;
 }
-interface TypeCollapsiblePanelProps extends TypeBoxProps {
+interface TypeCollapsiblePanelProps {
+    children?: React.ReactNode;
+    /** Force mounting the content when closed. Note: when enabled, content stays in the DOM but animations are not supported. */
+    forceMount?: true;
 }
 
 declare const Collapsible: {
-    ({ children, isOpen, offset, collapsedHeight, openHeight, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
+    ({ children, isOpen, disabled, defaultOpen, onOpenChange, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
     Trigger: {
-        ({ children, ...rest }: TypeCollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+        ({ children }: TypeCollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
     Panel: {
-        ({ children, ...rest }: TypeCollapsiblePanelProps): react_jsx_runtime.JSX.Element;
+        ({ children, forceMount }: TypeCollapsiblePanelProps): react_jsx_runtime.JSX.Element;
         displayName: string;
     };
 };

package/dist/index.js

@@ -36,135 +36,74 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Collapsible.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_seeds_react_hooks = require("@sproutsocial/seeds-react-hooks");
-var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var React = require("react");
+var RadixCollapsible2 = __toESM(require("@radix-ui/react-collapsible"));
 
 // src/styles.ts
 var import_styled_components = __toESM(require("styled-components"));
-var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
-var CollapsingBox = (0, import_styled_components.default)(import_seeds_react_box.default)`
-  transition: max-height ${(p) => p.theme.duration.medium}
-    ${(p) => p.theme.easing.ease_inout};
-  will-change: max-height;
-  position: relative;
-  overflow: auto;
-  ${({ hasShadow, scrollable }) => hasShadow ? `background:  /* Shadow covers */ linear-gradient(
-        transparent 30%,
-        rgba(255, 255, 255, 0)
-      ),
-      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
-      /* Shadows */
-        radial-gradient(
-          farthest-side at 50% 0,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        ),
-      radial-gradient(
-          farthest-side at 50% 100%,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        )
-        0 100%;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-    background-attachment: local, local, scroll, scroll;
-    ${scrollable ? `overflow: auto` : `overflow: hidden`};` : ""}
+var RadixCollapsible = __toESM(require("@radix-ui/react-collapsible"));
+var animations = import_styled_components.css`
+  @keyframes collapsibleSlideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsibleSlideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+`;
+var StyledCollapsibleContent = (0, import_styled_components.default)(RadixCollapsible.Content)`
+  ${animations}
+
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: collapsibleSlideDown 300ms ease-in-out;
+  }
+
+  &[data-state="closed"] {
+    animation: collapsibleSlideUp 300ms ease-in-out;
+  }
 `;
 
 // src/Collapsible.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var idCounter = 0;
-var CollapsibleContext = React.createContext({});
 var Collapsible = ({
   children,
   isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight
+  disabled,
+  defaultOpen,
+  onOpenChange
 }) => {
-  const [id] = (0, import_react.useState)(`Racine-collapsible-${idCounter++}`);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    CollapsibleContext.Provider,
+    RadixCollapsible2.Root,
     {
-      value: {
-        isOpen,
-        id,
-        offset,
-        collapsedHeight,
-        openHeight
-      },
+      open: isOpen,
+      disabled,
+      defaultOpen,
+      onOpenChange,
       children
     }
   );
 };
-var determineMaxHeight = (isHidden, openHeight, computedHeight) => {
-  if (isHidden === void 0) return void 0;
-  if (openHeight) return openHeight;
-  return computedHeight;
+var Trigger2 = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixCollapsible2.Trigger, { asChild: true, children });
 };
-var Trigger = ({ children, ...rest }) => {
-  const { isOpen, id } = (0, import_react.useContext)(CollapsibleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(React.Fragment, { children: React.cloneElement(children, {
-    "aria-controls": id,
-    "aria-expanded": !!isOpen,
-    ...rest
-  }) });
-};
-Trigger.displayName = "Collapsible.Trigger";
-var Panel = ({ children, ...rest }) => {
-  const {
-    isOpen,
-    id,
-    offset = 0,
-    collapsedHeight,
-    openHeight
-  } = (0, import_react.useContext)(CollapsibleContext);
-  const ref = (0, import_react.useRef)(null);
-  const measurement = (0, import_seeds_react_hooks.useMeasure)(ref);
-  const [isHidden, setIsHidden] = (0, import_react.useState)(void 0);
-  const maxHeight = determineMaxHeight(
-    isHidden,
-    openHeight,
-    // Round up to the nearest pixel to prevent subpixel rendering issues
-    Math.ceil(measurement.height + offset)
-  );
-  (0, import_react.useEffect)(() => {
-    if (!isOpen) {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);
-      return () => clearTimeout(timeoutID);
-    } else {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);
-      return () => clearTimeout(timeoutID);
-    }
-  }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    CollapsingBox,
-    {
-      hasShadow: Boolean(collapsedHeight || openHeight && openHeight > 0),
-      scrollable: isOpen,
-      maxHeight: isOpen ? maxHeight : collapsedHeight,
-      minHeight: collapsedHeight,
-      "data-qa-collapsible": "",
-      "data-qa-collapsible-isopen": isOpen === true,
-      ...rest,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_seeds_react_box2.default,
-        {
-          width: "100%",
-          hidden: isHidden && collapsedHeight === 0,
-          "aria-hidden": !isOpen,
-          id,
-          ref,
-          children
-        }
-      )
-    }
-  );
+Trigger2.displayName = "Collapsible.Trigger";
+var Panel = ({ children, forceMount }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledCollapsibleContent, { forceMount, "data-qa-collapsible": "", children });
 };
 Panel.displayName = "Collapsible.Panel";
-Collapsible.Trigger = Trigger;
+Collapsible.Trigger = Trigger2;
 Collapsible.Panel = Panel;
 var Collapsible_default = Collapsible;
 

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/Collapsible.tsx","../src/styles.ts","../src/CollapsibleTypes.ts"],"sourcesContent":["import Collapsible from \"./Collapsible\";\n\nexport default Collapsible;\nexport { Collapsible };\nexport * from \"./CollapsibleTypes\";\n","import * as React from \"react\";\nimport { useState, useRef, useContext, useEffect } from \"react\";\nimport { useMeasure } from \"@sproutsocial/seeds-react-hooks\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport { CollapsingBox } from \"./styles\";\nimport type {\n  TypeCollapsibleProps,\n  TypeCollapsiblePanelProps,\n  TypeCollapsibleTriggerProps,\n} from \"./CollapsibleTypes\";\n\nlet idCounter = 0;\n\ninterface TypeCollapsibleContext {\n  isOpen?: boolean;\n  id?: string;\n  offset?: number;\n  openHeight?: number;\n  collapsedHeight?: number;\n}\n\nconst CollapsibleContext = React.createContext<TypeCollapsibleContext>({});\n\nconst Collapsible = ({\n  children,\n  isOpen = false,\n  offset = 0,\n  collapsedHeight = 0,\n  openHeight,\n}: TypeCollapsibleProps) => {\n  const [id] = useState(`Racine-collapsible-${idCounter++}`);\n  return (\n    <CollapsibleContext.Provider\n      value={{\n        isOpen,\n        id,\n        offset,\n        collapsedHeight,\n        openHeight,\n      }}\n    >\n      {children}\n    </CollapsibleContext.Provider>\n  );\n};\n\nconst determineMaxHeight = (\n  isHidden?: boolean,\n  openHeight?: number,\n  computedHeight?: number\n): number | undefined => {\n  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added\n  // This is a hack to prevent css from animating if it begins in the open state\n  // css animates when attribute values change (IE from 0 to another number)\n  // css does not animate when simply adding an attribute to an HTML element\n  if (isHidden === undefined) return undefined;\n  // If the user has defined an explicit open height, return that as the max height\n  if (openHeight) return openHeight;\n  // Otherwise, fallback to the computed height\n  return computedHeight;\n};\n\nconst Trigger = ({ children, ...rest }: TypeCollapsibleTriggerProps) => {\n  const { isOpen, id } = useContext(CollapsibleContext);\n  return (\n    <React.Fragment>\n      {React.cloneElement(children, {\n        \"aria-controls\": id,\n        \"aria-expanded\": !!isOpen,\n        ...rest,\n      })}\n    </React.Fragment>\n  );\n};\n\nTrigger.displayName = \"Collapsible.Trigger\";\n\nconst Panel = ({ children, ...rest }: TypeCollapsiblePanelProps) => {\n  const {\n    isOpen,\n    id,\n    offset = 0,\n    collapsedHeight,\n    openHeight,\n  } = useContext(CollapsibleContext);\n\n  const ref = useRef<HTMLDivElement | null>(null);\n  const measurement = useMeasure(ref);\n  const [isHidden, setIsHidden] = useState<boolean | undefined>(undefined);\n  const maxHeight = determineMaxHeight(\n    isHidden,\n    openHeight,\n    // Round up to the nearest pixel to prevent subpixel rendering issues\n    Math.ceil(measurement.height + offset)\n  );\n\n  /* We use the \"hidden\" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */\n  useEffect(() => {\n    if (!isOpen) {\n      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);\n      return () => clearTimeout(timeoutID);\n    } else {\n      // Similar to the close animation, we need to delay setting hidden to run slightly async.\n      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.\n      // using this 0 second timeout just allows this component to initially render with an undefined max height,\n      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation\n      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);\n      return () => clearTimeout(timeoutID);\n    }\n  }, [isOpen]);\n\n  return (\n    <CollapsingBox\n      hasShadow={Boolean(collapsedHeight || (openHeight && openHeight > 0))}\n      scrollable={isOpen}\n      maxHeight={isOpen ? maxHeight : collapsedHeight}\n      minHeight={collapsedHeight}\n      data-qa-collapsible=\"\"\n      data-qa-collapsible-isopen={isOpen === true}\n      {...rest}\n    >\n      <Box\n        width=\"100%\"\n        hidden={isHidden && collapsedHeight === 0}\n        aria-hidden={!isOpen}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </Box>\n    </CollapsingBox>\n  );\n};\n\nPanel.displayName = \"Collapsible.Panel\";\n\nCollapsible.Trigger = Trigger;\nCollapsible.Panel = Panel;\n\nexport default Collapsible;\n","import styled from \"styled-components\";\nimport Box from \"@sproutsocial/seeds-react-box\";\n\nexport const CollapsingBox = styled(Box)<{\n  hasShadow?: boolean;\n  scrollable?: boolean;\n}>`\n  transition: max-height ${(p) => p.theme.duration.medium}\n    ${(p) => p.theme.easing.ease_inout};\n  will-change: max-height;\n  position: relative;\n  overflow: auto;\n  ${({ hasShadow, scrollable }) =>\n    hasShadow\n      ? `background:  /* Shadow covers */ linear-gradient(\n        transparent 30%,\n        rgba(255, 255, 255, 0)\n      ),\n      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,\n      /* Shadows */\n        radial-gradient(\n          farthest-side at 50% 0,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        ),\n      radial-gradient(\n          farthest-side at 50% 100%,\n          rgb(39 51 51 / 5%),\n          rgba(0, 0, 0, 0)\n        )\n        0 100%;\n    background-repeat: no-repeat;\n    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;\n    background-attachment: local, local, scroll, scroll;\n    ${scrollable ? `overflow: auto` : `overflow: hidden`};`\n      : \"\"}\n`;\n","import * as React from \"react\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\n// The flow type is inexact but the underlying component does not accept any other props.\n// It might be worth extending the box props here for the refactor, but allowing it would provide no functionality right now.\nexport interface TypeCollapsibleProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n\n  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */\n  offset?: number;\n  collapsedHeight?: number;\n  openHeight?: number;\n}\n\nexport interface TypeCollapsibleTriggerProps\n  extends Omit<TypeBoxProps, \"children\"> {\n  // Children is required for the Trigger\n  children: React.ReactElement;\n}\n\nexport interface TypeCollapsiblePanelProps extends TypeBoxProps {}\n"],"mappings":"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","names":["import_seeds_react_box","styled","Box","Box","React"]}
+{"version":3,"sources":["../src/index.ts","../src/Collapsible.tsx","../src/styles.ts","../src/CollapsibleTypes.ts"],"sourcesContent":["import Collapsible from \"./Collapsible\";\n\nexport default Collapsible;\nexport { Collapsible };\nexport * from \"./CollapsibleTypes\";\n","import * as React from \"react\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\nimport { StyledCollapsibleContent } from \"./styles\";\nimport type {\n  TypeCollapsibleProps,\n  TypeCollapsiblePanelProps,\n  TypeCollapsibleTriggerProps,\n} from \"./CollapsibleTypes\";\n\nconst Collapsible = ({\n  children,\n  isOpen = false,\n  disabled,\n  defaultOpen,\n  onOpenChange,\n}: TypeCollapsibleProps) => {\n  return (\n    <RadixCollapsible.Root\n      open={isOpen}\n      disabled={disabled}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n    >\n      {children}\n    </RadixCollapsible.Root>\n  );\n};\n\nconst Trigger = ({ children }: TypeCollapsibleTriggerProps) => {\n  return (\n    <RadixCollapsible.Trigger asChild>{children}</RadixCollapsible.Trigger>\n  );\n};\n\nTrigger.displayName = \"Collapsible.Trigger\";\n\nconst Panel = ({ children, forceMount }: TypeCollapsiblePanelProps) => {\n  return (\n    <StyledCollapsibleContent forceMount={forceMount} data-qa-collapsible=\"\">\n      {children}\n    </StyledCollapsibleContent>\n  );\n};\n\nPanel.displayName = \"Collapsible.Panel\";\n\nCollapsible.Trigger = Trigger;\nCollapsible.Panel = Panel;\n\nexport default Collapsible;\n","import styled, { css } from \"styled-components\";\nimport * as RadixCollapsible from \"@radix-ui/react-collapsible\";\n\nconst animations = css`\n  @keyframes collapsibleSlideDown {\n    from {\n      height: 0;\n    }\n    to {\n      height: var(--radix-collapsible-content-height);\n    }\n  }\n\n  @keyframes collapsibleSlideUp {\n    from {\n      height: var(--radix-collapsible-content-height);\n    }\n    to {\n      height: 0;\n    }\n  }\n`;\n\nexport const StyledCollapsibleContent = styled(RadixCollapsible.Content)`\n  ${animations}\n\n  overflow: hidden;\n\n  &[data-state=\"open\"] {\n    animation: collapsibleSlideDown 300ms ease-in-out;\n  }\n\n  &[data-state=\"closed\"] {\n    animation: collapsibleSlideUp 300ms ease-in-out;\n  }\n`;\n","import * as React from \"react\";\n\nexport interface TypeCollapsibleProps {\n  isOpen: boolean;\n  children: React.ReactNode;\n\n  /** Whether the collapsible is disabled */\n  disabled?: boolean;\n\n  /** The open state when initially rendered. Use when you don't need controlled state. */\n  defaultOpen?: boolean;\n\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport interface TypeCollapsibleTriggerProps {\n  /** A single React element that will be used as the trigger via Radix asChild */\n  children: React.ReactElement;\n}\n\nexport interface TypeCollapsiblePanelProps {\n  children?: React.ReactNode;\n\n  /** Force mounting the content when closed. Note: when enabled, content stays in the DOM but animations are not supported. */\n  forceMount?: true;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,IAAAA,oBAAkC;;;ACDlC,+BAA4B;AAC5B,uBAAkC;AAElC,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBZ,IAAM,+BAA2B,yBAAAC,SAAwB,wBAAO;AAAA,IACnE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADPV;AARJ,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,MAA4B;AAC1B,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAMC,WAAU,CAAC,EAAE,SAAS,MAAmC;AAC7D,SACE,4CAAkB,2BAAjB,EAAyB,SAAO,MAAE,UAAS;AAEhD;AAEAA,SAAQ,cAAc;AAEtB,IAAM,QAAQ,CAAC,EAAE,UAAU,WAAW,MAAiC;AACrE,SACE,4CAAC,4BAAyB,YAAwB,uBAAoB,IACnE,UACH;AAEJ;AAEA,MAAM,cAAc;AAEpB,YAAY,UAAUA;AACtB,YAAY,QAAQ;AAEpB,IAAO,sBAAQ;;;AEjDf,IAAAC,SAAuB;;;AHEvB,IAAO,gBAAQ;","names":["RadixCollapsible","styled","Trigger","React"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-collapsible",
-  "version": "1.0.12",
+  "version": "2.0.0",
   "description": "Seeds React Collapsible",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,8 +18,7 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.12",
-    "@sproutsocial/seeds-react-hooks": "^3.1.4"
+    "@radix-ui/react-collapsible": "^1.1.7"
   },
   "devDependencies": {
     "tsup": "^8.3.4",
@@ -31,7 +30,8 @@
     "@sproutsocial/seeds-tsconfig": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-react-testing-library": "*",
-    "@sproutsocial/seeds-react-button": "^1.3.14"
+    "@sproutsocial/seeds-react-button": "^1.3.18",
+    "@sproutsocial/seeds-react-box": "^1.1.13"
   },
   "peerDependencies": {
     "styled-components": "^5.2.3"

package/src/Collapsible.stories.tsx

@@ -1,18 +1,17 @@
 import React, { useState } from "react";
 import { Box } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { Collapsible } from "./";
 import type { Meta, StoryObj } from "@storybook/react";
 
 export interface TypeStatefulCollapseProps {
   children: React.ReactElement;
-  offset?: number;
   initialIsOpen?: boolean;
 }
 
 const StatefulCollapse = ({
   children,
-  offset = 0,
   initialIsOpen = false,
 }: TypeStatefulCollapseProps) => {
   const [open, setOpen] = useState(initialIsOpen);
@@ -20,7 +19,7 @@ const StatefulCollapse = ({
   const toggle = () => setOpen(!open);
 
   return (
-    <Collapsible isOpen={open} offset={offset}>
+    <Collapsible isOpen={open}>
       <Collapsible.Trigger>
         <Button appearance="secondary" onClick={toggle}>
           {open ? "Hide" : "Show"}
@@ -41,125 +40,102 @@ export default meta;
 
 type Story = StoryObj<typeof Collapsible>;
 
-export const DefaultStory: Story = {
+export const Default: Story = {
   render: () => (
     <StatefulCollapse>
-      <Box width="100%" height="200px" bg="container.background.base" p={400}>
-        <Button appearance="secondary">A button</Button>
+      <Box bg="neutral.100" p={400} mt={300} borderRadius="inner">
+        <Text.BodyCopy as="p">
+          This content is revealed when you click the trigger above. Click
+          "Hide" to collapse it again.
+        </Text.BodyCopy>
       </Box>
     </StatefulCollapse>
   ),
 };
 
-export const InitialIsOpen: Story = {
+export const OpenByDefault: Story = {
   render: () => (
     <StatefulCollapse initialIsOpen>
-      <Box width="100%" height="200px" bg="container.background.base" p={400}>
-        <Button appearance="secondary">A button</Button>
+      <Box bg="neutral.100" p={400} mt={300} borderRadius="inner">
+        <Text.BodyCopy as="p">
+          This panel was open when the page loaded. Click "Hide" to collapse it.
+        </Text.BodyCopy>
       </Box>
     </StatefulCollapse>
   ),
 };
 
-export const WithOffset: Story = {
+export const SmallContent: Story = {
   render: () => (
-    <StatefulCollapse offset={100}>
+    <StatefulCollapse>
       <Box
-        width="100%"
-        height="200px"
-        bg="container.background.base"
-        p={400}
-        mt="100px"
+        display="inline-block"
+        bg="neutral.100"
+        p={300}
+        mt={300}
+        borderRadius="inner"
       >
-        <Button appearance="secondary">A button</Button>
+        <Text.SmallBodyCopy>Short message</Text.SmallBodyCopy>
       </Box>
     </StatefulCollapse>
   ),
 };
 
-export const WithShortContent: Story = {
+export const OverflowingContent: Story = {
   render: () => (
     <StatefulCollapse>
-      <Box width="15%" height="50px" bg="container.background.base" p={400}>
-        Hello.
+      <Box bg="neutral.100" p={400} mt={300} borderRadius="inner">
+        <Text.BodyCopy as="p" mb={400}>
+          This content is intentionally very tall (200vh) to demonstrate how the
+          collapsible handles content that exceeds the viewport height.
+        </Text.BodyCopy>
+        <Box bg="neutral.200" borderRadius="inner" height="200vh" p={400}>
+          <Text.SmallBodyCopy color="text.body">
+            200vh tall region — scroll down to see the full height
+          </Text.SmallBodyCopy>
+        </Box>
       </Box>
     </StatefulCollapse>
   ),
 };
 
-export const WithTallContent: Story = {
+export const RichContent: Story = {
   render: () => (
-    <StatefulCollapse>
-      <Box width="15%" height="200vh" bg="container.background.base" p={400}>
-        Hello.
-      </Box>
-    </StatefulCollapse>
+    <Box bg="neutral.200" p={500} borderRadius="outer" maxWidth="600px">
+      <StatefulCollapse>
+        <Box
+          bg="container.background.base"
+          p={400}
+          mt={300}
+          borderRadius="inner"
+        >
+          <Text.BodyCopy as="p" mb={400}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </Text.BodyCopy>
+          <Text.BodyCopy as="p">
+            Duis aute irure dolor in reprehenderit in voluptate velit esse
+            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+            cupidatat non proident, sunt in culpa qui officia deserunt mollit
+            anim id est laborum.
+          </Text.BodyCopy>
+        </Box>
+      </StatefulCollapse>
+    </Box>
   ),
 };
 
-interface TypeStatefulCollapseMinHeightProps {
-  children: React.ReactElement;
-  offset?: number;
-  collapsedHeight?: number;
-  openHeight?: number;
-}
-
-const StatefulCollapseWithMinHeight = ({
-  children,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
-}: TypeStatefulCollapseMinHeightProps) => {
-  const [open, setOpen] = useState(false);
-
-  const toggle = () => setOpen(!open);
-
-  return (
-    <Collapsible
-      isOpen={open}
-      offset={offset}
-      openHeight={openHeight}
-      collapsedHeight={collapsedHeight}
-    >
-      <Collapsible.Panel>{children}</Collapsible.Panel>
-      <Collapsible.Trigger>
-        <Button onClick={toggle}>{open ? "Show Less" : "Show More"}</Button>
-      </Collapsible.Trigger>
-    </Collapsible>
-  );
-};
-
-export const WithCollapsedHeight: Story = {
+export const ContentWithTopMargin: Story = {
   render: () => (
-    <StatefulCollapseWithMinHeight collapsedHeight={100} openHeight={300}>
-      <Box width="500px" p={400}>
-        Threepio! Come in, Threepio! Threepio! Get to the top! I can’t Where
-        could he be? Threepio! Threepio, will you come in? They aren’t here!
-        Something must have happened to them. See if they’ve been captured.
-        Hurry! One thing’s for sure. We’re all going to be a lot thinner! Get on
-        top of it! I’m trying! Thank goodness, they haven’t found them! Where
-        could they be? Use the comlink? Oh, my! I forgot I turned it off! Are
-        you there, sir? Threepio! We’ve had some problems… Will you shut up and
-        listen to me? Shut down all garbage mashers on the detention level, will
-        you? Do you copy? Shut down all the garbage mashers on the detention
-        level. Shut down all the garbage mashers on the detention level. No.
-        Shut them all down! Hurry! Listen to them! They’re dying, Artoo! Curse
-        my metal body! I wasn’t fast enough. It’s all my fault! My poor master!
-        Threepio, we’re all right! We’re all right. You did great. Threepio!
-        Come in, Threepio! Threepio! Get to the top! I can’t Where could he be?
-        Threepio! Threepio, will you come in? They aren’t here! Something must
-        have happened to them. See if they’ve been captured. Hurry! One thing’s
-        for sure. We’re all going to be a lot thinner! Get on top of it! I’m
-        trying! Thank goodness, they haven’t found them! Where could they be?
-        Use the comlink? Oh, my! I forgot I turned it off! Are you there, sir?
-        Threepio! We’ve had some problems… Will you shut up and listen to me?
-        Shut down all garbage mashers on the detention level, will you? Do you
-        copy? Shut down all the garbage mashers on the detention level. Shut
-        down all the garbage mashers on the detention level. No. Shut them all
-        down! Hurry! Listen to them! They’re dying, Artoo! Curse my metal body!
-        I wasn’t fast enough. It’s all my fault! My poor master! Threepio, we’re
-        all right! We’re all right. You did great.
+    <StatefulCollapse>
+      <Box bg="neutral.100" p={400} mt="100px" borderRadius="inner">
+        <Text.BodyCopy as="p">
+          This content has a large top margin (100px) to verify the collapse
+          animation accounts for margin when calculating height.
+        </Text.BodyCopy>
       </Box>
-    </StatefulCollapseWithMinHeight>
+    </StatefulCollapse>
   ),
 };

package/src/Collapsible.tsx

@@ -1,134 +1,44 @@
 import * as React from "react";
-import { useState, useRef, useContext, useEffect } from "react";
-import { useMeasure } from "@sproutsocial/seeds-react-hooks";
-import Box from "@sproutsocial/seeds-react-box";
-import { CollapsingBox } from "./styles";
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
+import { StyledCollapsibleContent } from "./styles";
 import type {
   TypeCollapsibleProps,
   TypeCollapsiblePanelProps,
   TypeCollapsibleTriggerProps,
 } from "./CollapsibleTypes";
 
-let idCounter = 0;
-
-interface TypeCollapsibleContext {
-  isOpen?: boolean;
-  id?: string;
-  offset?: number;
-  openHeight?: number;
-  collapsedHeight?: number;
-}
-
-const CollapsibleContext = React.createContext<TypeCollapsibleContext>({});
-
 const Collapsible = ({
   children,
   isOpen = false,
-  offset = 0,
-  collapsedHeight = 0,
-  openHeight,
+  disabled,
+  defaultOpen,
+  onOpenChange,
 }: TypeCollapsibleProps) => {
-  const [id] = useState(`Racine-collapsible-${idCounter++}`);
   return (
-    <CollapsibleContext.Provider
-      value={{
-        isOpen,
-        id,
-        offset,
-        collapsedHeight,
-        openHeight,
-      }}
+    <RadixCollapsible.Root
+      open={isOpen}
+      disabled={disabled}
+      defaultOpen={defaultOpen}
+      onOpenChange={onOpenChange}
     >
       {children}
-    </CollapsibleContext.Provider>
+    </RadixCollapsible.Root>
   );
 };
 
-const determineMaxHeight = (
-  isHidden?: boolean,
-  openHeight?: number,
-  computedHeight?: number
-): number | undefined => {
-  // If isHidden is undefined this is the first render.  Return undefined so the max-height prop is not added
-  // This is a hack to prevent css from animating if it begins in the open state
-  // css animates when attribute values change (IE from 0 to another number)
-  // css does not animate when simply adding an attribute to an HTML element
-  if (isHidden === undefined) return undefined;
-  // If the user has defined an explicit open height, return that as the max height
-  if (openHeight) return openHeight;
-  // Otherwise, fallback to the computed height
-  return computedHeight;
-};
-
-const Trigger = ({ children, ...rest }: TypeCollapsibleTriggerProps) => {
-  const { isOpen, id } = useContext(CollapsibleContext);
+const Trigger = ({ children }: TypeCollapsibleTriggerProps) => {
   return (
-    <React.Fragment>
-      {React.cloneElement(children, {
-        "aria-controls": id,
-        "aria-expanded": !!isOpen,
-        ...rest,
-      })}
-    </React.Fragment>
+    <RadixCollapsible.Trigger asChild>{children}</RadixCollapsible.Trigger>
   );
 };
 
 Trigger.displayName = "Collapsible.Trigger";
 
-const Panel = ({ children, ...rest }: TypeCollapsiblePanelProps) => {
-  const {
-    isOpen,
-    id,
-    offset = 0,
-    collapsedHeight,
-    openHeight,
-  } = useContext(CollapsibleContext);
-
-  const ref = useRef<HTMLDivElement | null>(null);
-  const measurement = useMeasure(ref);
-  const [isHidden, setIsHidden] = useState<boolean | undefined>(undefined);
-  const maxHeight = determineMaxHeight(
-    isHidden,
-    openHeight,
-    // Round up to the nearest pixel to prevent subpixel rendering issues
-    Math.ceil(measurement.height + offset)
-  );
-
-  /* We use the "hidden" attribute to remove the contents of the panel from the tab order of the page, but it interferes with the animation. This logic sets a slight timeout on setting the prop so that the animation has time to complete before the attribute is set. */
-  useEffect(() => {
-    if (!isOpen) {
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 300);
-      return () => clearTimeout(timeoutID);
-    } else {
-      // Similar to the close animation, we need to delay setting hidden to run slightly async.
-      // An issue occurs with the initial render isHidden logic that causes the animation to occur sporadically.
-      // using this 0 second timeout just allows this component to initially render with an undefined max height,
-      // Then go directly from undefined to the full max height, without a brief 0 value that triggers an animation
-      const timeoutID = setTimeout(() => setIsHidden(!isOpen), 0);
-      return () => clearTimeout(timeoutID);
-    }
-  }, [isOpen]);
-
+const Panel = ({ children, forceMount }: TypeCollapsiblePanelProps) => {
   return (
-    <CollapsingBox
-      hasShadow={Boolean(collapsedHeight || (openHeight && openHeight > 0))}
-      scrollable={isOpen}
-      maxHeight={isOpen ? maxHeight : collapsedHeight}
-      minHeight={collapsedHeight}
-      data-qa-collapsible=""
-      data-qa-collapsible-isopen={isOpen === true}
-      {...rest}
-    >
-      <Box
-        width="100%"
-        hidden={isHidden && collapsedHeight === 0}
-        aria-hidden={!isOpen}
-        id={id}
-        ref={ref}
-      >
-        {children}
-      </Box>
-    </CollapsingBox>
+    <StyledCollapsibleContent forceMount={forceMount} data-qa-collapsible="">
+      {children}
+    </StyledCollapsibleContent>
   );
 };
 

package/src/CollapsibleTypes.ts

@@ -1,22 +1,27 @@
 import * as React from "react";
-import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
 
-// The flow type is inexact but the underlying component does not accept any other props.
-// It might be worth extending the box props here for the refactor, but allowing it would provide no functionality right now.
 export interface TypeCollapsibleProps {
   isOpen: boolean;
   children: React.ReactNode;
 
-  /** If the children of the collapsible panel have a top or bottom margin, it will throw off the calculations for the height of the content. The total amount of vertical margin (in pixels) can be supplied to this prop to correct this. */
-  offset?: number;
-  collapsedHeight?: number;
-  openHeight?: number;
+  /** Whether the collapsible is disabled */
+  disabled?: boolean;
+
+  /** The open state when initially rendered. Use when you don't need controlled state. */
+  defaultOpen?: boolean;
+
+  /** Called when the open state changes */
+  onOpenChange?: (open: boolean) => void;
 }
 
-export interface TypeCollapsibleTriggerProps
-  extends Omit<TypeBoxProps, "children"> {
-  // Children is required for the Trigger
+export interface TypeCollapsibleTriggerProps {
+  /** A single React element that will be used as the trigger via Radix asChild */
   children: React.ReactElement;
 }
 
-export interface TypeCollapsiblePanelProps extends TypeBoxProps {}
+export interface TypeCollapsiblePanelProps {
+  children?: React.ReactNode;
+
+  /** Force mounting the content when closed. Note: when enabled, content stays in the DOM but animations are not supported. */
+  forceMount?: true;
+}

package/src/__tests__/features.test.tsx

@@ -49,10 +49,14 @@ describe("Collapsible", () => {
     render(<StatefulCollapse>Panel text</StatefulCollapse>);
     const trigger = screen.queryByRole("button");
     expect(trigger).toHaveAttribute("aria-expanded", "false");
-    // TS thinks the trigger might be null even though the previous expect would have failed if it was
+
     trigger && fireEvent.click(trigger);
+
     const panel = screen.queryByText(/Panel text/);
-    expect(panel).toHaveAttribute("aria-hidden", "false");
+    expect(panel?.closest("[data-state]")).toHaveAttribute(
+      "data-state",
+      "open"
+    );
     expect(trigger).toHaveAttribute("aria-expanded", "true");
   });
 
@@ -60,14 +64,17 @@ describe("Collapsible", () => {
     render(<StatefulCollapse isOpen>Panel text</StatefulCollapse>);
     const trigger = screen.queryByRole("button");
     const panel = screen.queryByText(/Panel text/);
-    expect(panel).toHaveAttribute("aria-hidden", "false");
+    expect(panel?.closest("[data-state]")).toHaveAttribute(
+      "data-state",
+      "open"
+    );
     expect(trigger).toHaveAttribute("aria-expanded", "true");
   });
 
   it("trigger should be properly labelled", async () => {
     render(<StatefulCollapse isOpen>Panel text</StatefulCollapse>);
     const trigger = screen.queryByRole("button");
-    const panel = screen.queryByText(/Panel text/);
+    const panel = screen.queryByText(/Panel text/)?.closest("[data-state]");
     expect(trigger).toHaveAttribute("aria-controls", panel?.id);
   });
 });

package/src/__tests__/types.test.tsx

@@ -19,14 +19,9 @@ describe.skip("Collapsible/types", () => {
         <Button appearance="secondary">A button</Button>
       </Box>
     );
-    const shortContent = (
-      <Box width="15%" height="50px" bg="container.background.base" p={400}>
-        Hello.
-      </Box>
-    );
     render(
       <>
-        <Collapsible isOpen={true} offset={0}>
+        <Collapsible isOpen={true}>
           <Collapsible.Trigger>
             <Button appearance="secondary" onClick={toggle}>
               Hide
@@ -35,7 +30,7 @@ describe.skip("Collapsible/types", () => {
           <Collapsible.Panel>{contentWithButton}</Collapsible.Panel>
         </Collapsible>
 
-        <Collapsible isOpen={false} offset={100}>
+        <Collapsible isOpen={false} disabled>
           <Collapsible.Trigger>
             <Button appearance="secondary" onClick={toggle}>
               Show
@@ -44,8 +39,8 @@ describe.skip("Collapsible/types", () => {
           <Collapsible.Panel>{contentWithButton}</Collapsible.Panel>
         </Collapsible>
 
-        <Collapsible isOpen={false} collapsedHeight={500}>
-          <Collapsible.Panel>{shortContent}</Collapsible.Panel>
+        <Collapsible isOpen={false} onOpenChange={toggle}>
+          <Collapsible.Panel forceMount>{contentWithButton}</Collapsible.Panel>
           <Collapsible.Trigger>
             <Button onClick={toggle}>Show More</Button>
           </Collapsible.Trigger>

package/src/styles.ts

@@ -1,37 +1,36 @@
-import styled from "styled-components";
-import Box from "@sproutsocial/seeds-react-box";
+import styled, { css } from "styled-components";
+import * as RadixCollapsible from "@radix-ui/react-collapsible";
 
-export const CollapsingBox = styled(Box)<{
-  hasShadow?: boolean;
-  scrollable?: boolean;
-}>`
-  transition: max-height ${(p) => p.theme.duration.medium}
-    ${(p) => p.theme.easing.ease_inout};
-  will-change: max-height;
-  position: relative;
-  overflow: auto;
-  ${({ hasShadow, scrollable }) =>
-    hasShadow
-      ? `background:  /* Shadow covers */ linear-gradient(
-        transparent 30%,
-        rgba(255, 255, 255, 0)
-      ),
-      linear-gradient(rgba(255, 255, 255, 0), transparent 70%) 0 100%,
-      /* Shadows */
-        radial-gradient(
-          farthest-side at 50% 0,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        ),
-      radial-gradient(
-          farthest-side at 50% 100%,
-          rgb(39 51 51 / 5%),
-          rgba(0, 0, 0, 0)
-        )
-        0 100%;
-    background-repeat: no-repeat;
-    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
-    background-attachment: local, local, scroll, scroll;
-    ${scrollable ? `overflow: auto` : `overflow: hidden`};`
-      : ""}
+const animations = css`
+  @keyframes collapsibleSlideDown {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-collapsible-content-height);
+    }
+  }
+
+  @keyframes collapsibleSlideUp {
+    from {
+      height: var(--radix-collapsible-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+`;
+
+export const StyledCollapsibleContent = styled(RadixCollapsible.Content)`
+  ${animations}
+
+  overflow: hidden;
+
+  &[data-state="open"] {
+    animation: collapsibleSlideDown 300ms ease-in-out;
+  }
+
+  &[data-state="closed"] {
+    animation: collapsibleSlideUp 300ms ease-in-out;
+  }
 `;