@sproutsocial/seeds-react-collapsible 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-collapsible/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist/esm/index.js     4.68 KB
+ESM dist/esm/index.js.map 17.91 KB
+ESM ⚡️ Build success in 223ms
+CJS dist/index.js     6.58 KB
+CJS dist/index.js.map 17.90 KB
+CJS ⚡️ Build success in 254ms
+DTS Build start
+DTS ⚡️ Build success in 15193ms
+DTS dist/index.d.ts  1.03 KB
+DTS dist/index.d.mts 1.03 KB
+Done in 18.99s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-collapsible
+
+## 1.0.0
+
+### Major Changes
+
+- 9ec95ec: Migrated Collapsible from Racine to seeds-react-collapsible

package/__tests__/features.test.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { useState } from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import { Collapsible } from "../src";
+
+export interface TypeStatefulCollapseTestProps {
+  children: React.ReactNode;
+  isOpen?: boolean;
+}
+
+const StatefulCollapse = ({
+  isOpen = false,
+  children,
+}: TypeStatefulCollapseTestProps) => {
+  const [open, setOpen] = useState(isOpen);
+
+  const toggle = () => setOpen(!open);
+
+  return (
+    <Collapsible isOpen={open}>
+      <Collapsible.Trigger>
+        <Button appearance="secondary" onClick={toggle}>
+          {open ? "Hide" : "Show"}
+        </Button>
+      </Collapsible.Trigger>
+
+      <Collapsible.Panel>{children}</Collapsible.Panel>
+    </Collapsible>
+  );
+};
+
+describe("Collapsible", () => {
+  it("should render properly", async () => {
+    const { container } = render(
+      <StatefulCollapse>
+        <Box />
+      </StatefulCollapse>
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it("should open panel when clicking trigger", async () => {
+    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(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should render open when isOpen is true", async () => {
+    render(<StatefulCollapse isOpen>Panel text</StatefulCollapse>);
+    const trigger = screen.queryByRole("button");
+    const panel = screen.queryByText(/Panel text/);
+    expect(panel).toHaveAttribute("aria-hidden", "false");
+    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/);
+    expect(trigger).toHaveAttribute("aria-controls", panel?.id);
+  });
+});

package/__tests__/types.test.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Box from "@sproutsocial/seeds-react-box";
+import Button from "@sproutsocial/seeds-react-button";
+import { Collapsible } from "../src";
+
+const toggle = jest.fn();
+
+describe.skip("Collapsible/types", () => {
+  it("should render valid props", () => {
+    const contentWithButton = (
+      <Box
+        width="100%"
+        height="200px"
+        bg="container.background.base"
+        p={400}
+        mt="100px"
+      >
+        <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.Trigger>
+            <Button appearance="secondary" onClick={toggle}>
+              Hide
+            </Button>
+          </Collapsible.Trigger>
+          <Collapsible.Panel>{contentWithButton}</Collapsible.Panel>
+        </Collapsible>
+
+        <Collapsible isOpen={false} offset={100}>
+          <Collapsible.Trigger>
+            <Button appearance="secondary" onClick={toggle}>
+              Show
+            </Button>
+          </Collapsible.Trigger>
+          <Collapsible.Panel>{contentWithButton}</Collapsible.Panel>
+        </Collapsible>
+
+        <Collapsible isOpen={false} collapsedHeight={500}>
+          <Collapsible.Panel>{shortContent}</Collapsible.Panel>
+          <Collapsible.Trigger>
+            <Button onClick={toggle}>Show More</Button>
+          </Collapsible.Trigger>
+        </Collapsible>
+
+        {/* @ts-expect-error - test missing required props is rejected */}
+        <Collapsible />
+      </>
+    );
+  });
+});

package/dist/esm/index.js

@@ -0,0 +1,167 @@
+// src/Collapsible.tsx
+import * as React from "react";
+import { useState as useState2, useRef as useRef2, useContext, useEffect as useEffect2 } from "react";
+
+// ../seeds-react-hooks/dist/index.mjs
+import { useState, useLayoutEffect, useCallback, useReducer, useRef, useEffect, useMemo } from "react";
+import { useTheme } from "styled-components";
+var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function q(r) {
+  let [t, e] = useState(v);
+  return useLayoutEffect(() => {
+    if (!r.current || !("ResizeObserver" in window))
+      return;
+    let n = new ResizeObserver(([o]) => {
+      if (!o)
+        return;
+      let { x: u, y: a, width: i, height: f, top: m, right: b, bottom: d, left: y } = o.contentRect;
+      e({ x: u, y: a, width: i, height: f, top: m, right: b, bottom: d, left: y });
+    });
+    return n.observe(r.current), () => {
+      n.disconnect();
+    };
+  }, [r]), t;
+}
+
+// src/Collapsible.tsx
+import Box2 from "@sproutsocial/seeds-react-box";
+
+// 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`};` : ""}
+`;
+
+// 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
+}) => {
+  const [id] = useState2(`Racine-collapsible-${idCounter++}`);
+  return /* @__PURE__ */ jsx(
+    CollapsibleContext.Provider,
+    {
+      value: {
+        isOpen,
+        id,
+        offset,
+        collapsedHeight,
+        openHeight
+      },
+      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
+  }) });
+};
+Trigger.displayName = "Collapsible.Trigger";
+var Panel = ({ children, ...rest }) => {
+  const {
+    isOpen,
+    id,
+    offset = 0,
+    collapsedHeight,
+    openHeight
+  } = useContext(CollapsibleContext);
+  const ref = useRef2(null);
+  const measurement = q(ref);
+  const [isHidden, setIsHidden] = useState2(void 0);
+  const maxHeight = determineMaxHeight(
+    isHidden,
+    openHeight,
+    // Round up to the nearest pixel to prevent subpixel rendering issues
+    Math.ceil(measurement.height + offset)
+  );
+  useEffect2(() => {
+    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
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "Collapsible.Panel";
+Collapsible.Trigger = Trigger;
+Collapsible.Panel = Panel;
+var Collapsible_default = Collapsible;
+
+// src/CollapsibleTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Collapsible_default;
+export {
+  Collapsible_default as Collapsible,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Collapsible.tsx","../../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../../seeds-react-hooks/src/useSelect/useSelect.ts","../../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../../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 { TypeCollapsibleProps } 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 }: { children: React.ReactElement }) => {\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 }: { children: React.ReactNode }) => {\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 { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\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\";\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","import Collapsible from \"./Collapsible\";\n\nexport default Collapsible;\nexport { Collapsible };\nexport * from \"./CollapsibleTypes\";\n"],"mappings":"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","names":["useState","useRef","useEffect","useState","Box","useState","useRef","useEffect","Box"]}

package/dist/index.d.mts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+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;
+}
+
+declare const Collapsible: {
+    ({ children, isOpen, offset, collapsedHeight, openHeight, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
+    Trigger: {
+        ({ children, ...rest }: {
+            children: React.ReactElement;
+        }): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        ({ children, ...rest }: {
+            children: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Collapsible, type TypeCollapsibleProps, Collapsible as default };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+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;
+}
+
+declare const Collapsible: {
+    ({ children, isOpen, offset, collapsedHeight, openHeight, }: TypeCollapsibleProps): react_jsx_runtime.JSX.Element;
+    Trigger: {
+        ({ children, ...rest }: {
+            children: React.ReactElement;
+        }): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        ({ children, ...rest }: {
+            children: React.ReactNode;
+        }): react_jsx_runtime.JSX.Element;
+        displayName: string;
+    };
+};
+
+export { Collapsible, type TypeCollapsibleProps, Collapsible as default };

package/dist/index.js

@@ -0,0 +1,204 @@
+"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 src_exports = {};
+__export(src_exports, {
+  Collapsible: () => Collapsible_default,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Collapsible.tsx
+var React = __toESM(require("react"));
+var import_react2 = require("react");
+
+// ../seeds-react-hooks/dist/index.mjs
+var import_react = require("react");
+var import_styled_components = require("styled-components");
+var v = Object.freeze({ x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0 });
+function q(r) {
+  let [t, e] = (0, import_react.useState)(v);
+  return (0, import_react.useLayoutEffect)(() => {
+    if (!r.current || !("ResizeObserver" in window))
+      return;
+    let n = new ResizeObserver(([o]) => {
+      if (!o)
+        return;
+      let { x: u, y: a, width: i, height: f, top: m, right: b, bottom: d, left: y } = o.contentRect;
+      e({ x: u, y: a, width: i, height: f, top: m, right: b, bottom: d, left: y });
+    });
+    return n.observe(r.current), () => {
+      n.disconnect();
+    };
+  }, [r]), t;
+}
+
+// src/Collapsible.tsx
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/styles.ts
+var import_styled_components2 = __toESM(require("styled-components"));
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+var CollapsingBox = (0, import_styled_components2.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`};` : ""}
+`;
+
+// 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
+}) => {
+  const [id] = (0, import_react2.useState)(`Racine-collapsible-${idCounter++}`);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    CollapsibleContext.Provider,
+    {
+      value: {
+        isOpen,
+        id,
+        offset,
+        collapsedHeight,
+        openHeight
+      },
+      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 } = (0, import_react2.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_react2.useContext)(CollapsibleContext);
+  const ref = (0, import_react2.useRef)(null);
+  const measurement = q(ref);
+  const [isHidden, setIsHidden] = (0, import_react2.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_react2.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
+        }
+      )
+    }
+  );
+};
+Panel.displayName = "Collapsible.Panel";
+Collapsible.Trigger = Trigger;
+Collapsible.Panel = Panel;
+var Collapsible_default = Collapsible;
+
+// src/CollapsibleTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Collapsible_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Collapsible
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Collapsible.tsx","../../seeds-react-hooks/src/useMeasure/useMeasure.ts","../../seeds-react-hooks/src/useSelect/useSelect.ts","../../seeds-react-hooks/src/useMultiselect/useMultiselect.ts","../../seeds-react-hooks/src/useMutationObserver/useMutationObserver.ts","../../seeds-react-hooks/src/useTextContent/useTextContent.ts","../../seeds-react-hooks/src/useWhyDidYouUpdate/useWhyDidYouUpdate.ts","../../seeds-react-hooks/src/useInteractiveColor/useInteractiveColor.ts","../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 { TypeCollapsibleProps } 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 }: { children: React.ReactElement }) => {\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 }: { children: React.ReactNode }) => {\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 { useState, useLayoutEffect, type RefObject } from \"react\";\n\ninterface DOMRectObject {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n  top: number;\n  right: number;\n  bottom: number;\n  left: number;\n}\nconst initialBounds = Object.freeze({\n  x: 0,\n  y: 0,\n  width: 0,\n  height: 0,\n  top: 0,\n  right: 0,\n  bottom: 0,\n  left: 0,\n});\n\nexport function useMeasure<TElement extends Element>(ref: RefObject<TElement>) {\n  const [bounds, setContentRect] =\n    useState<Readonly<DOMRectObject>>(initialBounds);\n\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    if (\n      !element ||\n      // in non-browser environments (e.g. Jest tests) ResizeObserver is not defined\n      !(\"ResizeObserver\" in window)\n    ) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver(([entry]) => {\n      if (!entry) return;\n      const { x, y, width, height, top, right, bottom, left } =\n        entry.contentRect;\n      setContentRect({\n        x,\n        y,\n        width,\n        height,\n        top,\n        right,\n        bottom,\n        left,\n      });\n    });\n    resizeObserver.observe(ref.current);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, [ref]);\n\n  return bounds;\n}\n","import { useState, useCallback } from \"react\";\n\ntype TypeSingleSelectProps<T extends string> = {\n  initialValue?: T | \"\";\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: string | T) => any;\n};\n\nexport const useSelect = <T extends string>(\n  {\n    initialValue = \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeSingleSelectProps<T> = {\n    initialValue: \"\",\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, setValue] = useState<string | T>(initialValue);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      if (newValue !== value) {\n        setValue(newValue);\n        userOnChange(newValue);\n      }\n    },\n    [userOnChange, value]\n  );\n\n  return { value, onChange };\n};\n","import { useCallback, useEffect, useReducer, useRef } from \"react\";\n\ntype TypeMultiSelectProps<T extends string> = {\n  initialValue?: T[];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  onChange?: (value: Array<string | T>) => any;\n};\n\nconst valueReducer = (\n  state: Set<string>,\n  action: { type: string; value?: string }\n): Set<string> => {\n  const newState = new Set(state);\n  switch (action.type) {\n    case \"reset\": {\n      return new Set();\n    }\n    case \"toggle_item\":\n    default: {\n      if (action.value) {\n        if (newState.has(action.value)) {\n          newState.delete(action.value);\n        } else {\n          newState.add(action.value);\n        }\n      }\n      return newState;\n    }\n  }\n};\n\nexport const useMultiselect = <T extends string>(\n  {\n    initialValue = [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: userOnChange = () => {},\n  }: TypeMultiSelectProps<T> = {\n    initialValue: [],\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    onChange: () => {},\n  }\n) => {\n  const [value, dispatch] = useReducer(valueReducer, new Set(initialValue));\n\n  const getArrayValue = (value: Set<string | T>) =>\n    Array.from<string | T>(value);\n\n  const onChange = useCallback(\n    (newValue: string) => {\n      dispatch({ type: \"toggle_item\", value: newValue });\n    },\n    [dispatch]\n  );\n\n  const isFirstRun = useRef(true);\n\n  useEffect(() => {\n    if (isFirstRun.current) {\n      isFirstRun.current = false;\n      return;\n    }\n    userOnChange(getArrayValue(value));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [userOnChange, value]);\n\n  const onClear = useCallback(() => {\n    dispatch({ type: \"reset\" });\n  }, [dispatch]);\n\n  return { value: getArrayValue(value), onChange, onClear };\n};\n","import { canUseDOM } from \"@sproutsocial/seeds-react-utilities\";\nimport { useEffect, useMemo, useState } from \"react\";\n\ntype TypeMutationObserverInitRequired =\n  | {\n      childList: true;\n    }\n  | {\n      attributes: true;\n    }\n  | {\n      characterData: true;\n    };\n\ntype TypeMutationObserverInit = {\n  subtree?: boolean;\n  attributeOldValue?: boolean;\n  characterDataOldValue?: boolean;\n  attributeFilter?: Array<string>;\n} & TypeMutationObserverInitRequired;\n\ntype TypeMutationObserverCallback = (\n  mutationList?: MutationRecord[],\n  observer?: MutationObserver\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n) => any;\n\nconst defaultCallback: TypeMutationObserverCallback = (mutationList) =>\n  mutationList;\n\nexport function useMutationObserver(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback = defaultCallback\n) {\n  if (!canUseDOM()) {\n    return;\n  }\n  /* eslint-disable-next-line */\n  const [value, setValue] = useState(undefined);\n  /* eslint-disable-next-line */\n  const observer = useMemo(\n    () =>\n      new MutationObserver((mutationList, observer) => {\n        const result = callback(mutationList, observer);\n        setValue(result);\n      }),\n    [callback]\n  );\n  /* eslint-disable-next-line */\n  useEffect(() => {\n    if (targetNode) {\n      observer.observe(targetNode, config);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [targetNode, config, observer]);\n\n  return value;\n}\n\nexport function useMutationObserverOnce(\n  targetNode: Node | null,\n  config: TypeMutationObserverInit,\n  callback: TypeMutationObserverCallback\n) {\n  const [isObserving, setObserving] = useState(true);\n  const node = isObserving ? targetNode : null;\n  const value = useMutationObserver(node, config, callback);\n  if (value !== undefined && isObserving) {\n    setObserving(false);\n  }\n  return value;\n}\n","import { useCallback, useState } from \"react\";\n\nexport type textContentRef = ((node: Node) => void) & { current?: string };\nexport function useTextContent(initial: string) {\n  const [textContent, setTextContent] = useState(initial);\n\n  const ref: textContentRef = useCallback((node: Node) => {\n    if (node && node.textContent !== null) {\n      setTextContent(node.textContent);\n    }\n  }, []);\n\n  ref.current = textContent;\n  return ref;\n}\n","import { useRef, useEffect } from \"react\";\n\nexport function useWhyDidYouUpdate(\n  name: string,\n  props: { [key: string]: any }\n) {\n  // Get a mutable ref object where we can store props ...\n  // ... for comparison next time this hook runs.\n  const previousProps = useRef<typeof props>({});\n\n  useEffect(() => {\n    if (previousProps.current) {\n      // Get all keys from previous and current props\n      const allKeys = Object.keys({ ...previousProps.current, ...props });\n      // Use this object to keep track of changed props\n      const changesObj: typeof props = {};\n      // Iterate through keys\n      allKeys.forEach((key) => {\n        // If previous is different from current\n\n        if (previousProps.current[key] !== props[key]) {\n          // Add to changesObj\n\n          changesObj[key] = {\n            from: previousProps.current[key],\n\n            to: props[key],\n          };\n        }\n      });\n\n      // If changesObj not empty then output to console\n      if (Object.keys(changesObj).length) {\n        // eslint-disable-next-line no-console\n        console.log(\"[why-did-you-update]\", name, changesObj);\n      }\n    }\n\n    // Finally update previousProps with current props for next hook call\n    previousProps.current = props;\n  });\n}\n","import { darken, lighten } from \"polished\";\nimport { useTheme } from \"styled-components\";\nimport type { TypeTheme } from \"@sproutsocial/seeds-react-theme\";\n\n/**\n * The useInteractiveColor hook has context of theme mode (light or dark)\n * and can be used to lighten or darken a color dynamically\n *\n * note: colors are limited to our theme colors\n */\nconst useInteractiveColor = (themeColor: string): string => {\n  // Throw error if used outside of a ThemeProvider (styled-components)\n  if (!useTheme()) {\n    throw new Error(\n      \"useInteractiveColor() must be used within a Styled Components ThemeProvider\"\n    );\n  }\n\n  // Get the current theme mode ie. 'light' or 'dark'\n  const theme: TypeTheme = useTheme() as TypeTheme;\n  const themeMode = theme.mode;\n\n  // If the theme mode is dark, return a lightened version of the themeValue\n  if (themeMode === \"dark\") {\n    return lighten(0.2, themeColor);\n  } else {\n    // If the theme mode is light, return a darkened version of the themeValue\n    return darken(0.2, themeColor);\n  }\n};\n\nexport { useInteractiveColor };\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\";\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"],"mappings":"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","names":["import_react","import_seeds_react_box","import_styled_components","styled","Box","Box","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-collapsible",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@sproutsocial/seeds-react-collapsible",
+  "version": "1.0.0",
+  "description": "Seeds React Collapsible",
+  "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-box": "*"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-button": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Collapsible.stories.tsx

@@ -0,0 +1,165 @@
+import React, { useState } from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+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);
+
+  const toggle = () => setOpen(!open);
+
+  return (
+    <Collapsible isOpen={open} offset={offset}>
+      <Collapsible.Trigger>
+        <Button appearance="secondary" onClick={toggle}>
+          {open ? "Hide" : "Show"}
+        </Button>
+      </Collapsible.Trigger>
+
+      <Collapsible.Panel>{children}</Collapsible.Panel>
+    </Collapsible>
+  );
+};
+
+const meta: Meta<typeof Collapsible> = {
+  title: "Components/Collapsible",
+  component: Collapsible,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Collapsible>;
+
+export const DefaultStory: Story = {
+  render: () => (
+    <StatefulCollapse>
+      <Box width="100%" height="200px" bg="container.background.base" p={400}>
+        <Button appearance="secondary">A button</Button>
+      </Box>
+    </StatefulCollapse>
+  ),
+};
+
+export const InitialIsOpen: Story = {
+  render: () => (
+    <StatefulCollapse initialIsOpen>
+      <Box width="100%" height="200px" bg="container.background.base" p={400}>
+        <Button appearance="secondary">A button</Button>
+      </Box>
+    </StatefulCollapse>
+  ),
+};
+
+export const WithOffset: Story = {
+  render: () => (
+    <StatefulCollapse offset={100}>
+      <Box
+        width="100%"
+        height="200px"
+        bg="container.background.base"
+        p={400}
+        mt="100px"
+      >
+        <Button appearance="secondary">A button</Button>
+      </Box>
+    </StatefulCollapse>
+  ),
+};
+
+export const WithShortContent: Story = {
+  render: () => (
+    <StatefulCollapse>
+      <Box width="15%" height="50px" bg="container.background.base" p={400}>
+        Hello.
+      </Box>
+    </StatefulCollapse>
+  ),
+};
+
+export const WithTallContent: Story = {
+  render: () => (
+    <StatefulCollapse>
+      <Box width="15%" height="200vh" bg="container.background.base" p={400}>
+        Hello.
+      </Box>
+    </StatefulCollapse>
+  ),
+};
+
+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 = {
+  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.
+      </Box>
+    </StatefulCollapseWithMinHeight>
+  ),
+};

package/src/Collapsible.tsx

@@ -0,0 +1,136 @@
+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 type { TypeCollapsibleProps } 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,
+}: TypeCollapsibleProps) => {
+  const [id] = useState(`Racine-collapsible-${idCounter++}`);
+  return (
+    <CollapsibleContext.Provider
+      value={{
+        isOpen,
+        id,
+        offset,
+        collapsedHeight,
+        openHeight,
+      }}
+    >
+      {children}
+    </CollapsibleContext.Provider>
+  );
+};
+
+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 }: { children: React.ReactElement }) => {
+  const { isOpen, id } = useContext(CollapsibleContext);
+  return (
+    <React.Fragment>
+      {React.cloneElement(children, {
+        "aria-controls": id,
+        "aria-expanded": !!isOpen,
+        ...rest,
+      })}
+    </React.Fragment>
+  );
+};
+
+Trigger.displayName = "Collapsible.Trigger";
+
+const Panel = ({ children, ...rest }: { children: React.ReactNode }) => {
+  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]);
+
+  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>
+  );
+};
+
+Panel.displayName = "Collapsible.Panel";
+
+Collapsible.Trigger = Trigger;
+Collapsible.Panel = Panel;
+
+export default Collapsible;

package/src/CollapsibleTypes.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+// 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;
+}

package/src/index.ts

@@ -0,0 +1,5 @@
+import Collapsible from "./Collapsible";
+
+export default Collapsible;
+export { Collapsible };
+export * from "./CollapsibleTypes";

package/src/styles.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+import Box from "@sproutsocial/seeds-react-box";
+
+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`};`
+      : ""}
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));