@liveblocks/react-ui/dist/primitives/Collapsible/index.cjs

A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var reactSlot = require('@radix-ui/react-slot');
var react = require('react');
var useControllableState = require('../../utils/use-controllable-state.cjs');

const COLLAPSIBLE_ROOT_NAME = "CollapsibleRoot";
const COLLAPSIBLE_TRIGGER_NAME = "CollapsibleTrigger";
const COLLAPSIBLE_CONTENT_NAME = "CollapsibleContent";
const CollapsibleContext = react.createContext(null);
const CollapsibleRoot = react.forwardRef(
  ({
    open: controlledOpen,
    onOpenChange: controlledOnOpenChange,
    defaultOpen,
    disabled = false,
    asChild,
    ...props
  }, forwardedRef) => {
    const [isOpen, onOpenChange] = useControllableState.useControllableState(
      defaultOpen ?? true,
      controlledOpen,
      controlledOnOpenChange
    );
    const Component = asChild ? reactSlot.Slot : "div";
    const id = react.useId();
    return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, {
      value: { open: isOpen, onOpenChange, disabled, contentId: id },
      children: /* @__PURE__ */ jsxRuntime.jsx(Component, {
        ...props,
        ref: forwardedRef,
        "data-state": isOpen ? "open" : "closed",
        "data-disabled": disabled ? "" : void 0
      })
    });
  }
);
const CollapsibleTrigger = react.forwardRef(
  ({ onClick, asChild, ...props }, forwardedRef) => {
    const Component = asChild ? reactSlot.Slot : "button";
    const context = react.useContext(CollapsibleContext);
    if (!context) {
      throw new Error("Collapsible.Root is missing from the React tree.");
    }
    const { open, disabled, contentId, onOpenChange } = context;
    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
      ...props,
      ref: forwardedRef,
      type: "button",
      "aria-controls": contentId,
      "aria-expanded": open || false,
      "data-state": open ? "open" : "closed",
      "data-disabled": disabled ? "" : void 0,
      disabled,
      onClick: (event) => {
        onClick?.(event);
        if (event.defaultPrevented)
          return;
        if (disabled)
          return;
        onOpenChange(!open);
      }
    });
  }
);
const CollapsibleContent = react.forwardRef(
  ({ asChild, ...props }, forwardedRef) => {
    const Component = asChild ? reactSlot.Slot : "div";
    const context = react.useContext(CollapsibleContext);
    const divRef = react.useRef(null);
    if (!context) {
      throw new Error("Collapsible.Root is missing from the React tree.");
    }
    const { open, onOpenChange, disabled, contentId } = context;
    react.useEffect(() => {
      const element = divRef.current;
      if (element === null)
        return;
      const isHiddenUntilFoundSupported = "onbeforematch" in document.body;
      if (!isHiddenUntilFoundSupported)
        return;
      function handleBeforeMatch() {
        onOpenChange(true);
      }
      element.addEventListener("beforematch", handleBeforeMatch);
      return () => {
        element.removeEventListener("beforematch", handleBeforeMatch);
      };
    }, [onOpenChange]);
    react.useEffect(() => {
      const element = divRef.current;
      if (element === null)
        return;
      if (open)
        return;
      const isHiddenUntilFoundSupported = "onbeforematch" in document.body;
      if (!isHiddenUntilFoundSupported)
        return;
      element.setAttribute("hidden", "until-found");
      return () => {
        element.removeAttribute("hidden");
      };
    }, [open]);
    react.useImperativeHandle(forwardedRef, () => {
      return divRef.current;
    }, []);
    return /* @__PURE__ */ jsxRuntime.jsx(Component, {
      ...props,
      ref: divRef,
      "data-state": open ? "open" : "closed",
      "data-disabled": disabled ? "" : void 0,
      id: contentId,
      hidden: !open
    });
  }
);
if (process.env.NODE_ENV !== "production") {
  CollapsibleContent.displayName = COLLAPSIBLE_CONTENT_NAME;
  CollapsibleRoot.displayName = COLLAPSIBLE_ROOT_NAME;
  CollapsibleTrigger.displayName = COLLAPSIBLE_TRIGGER_NAME;
}

exports.Content = CollapsibleContent;
exports.Root = CollapsibleRoot;
exports.Trigger = CollapsibleTrigger;
//# sourceMappingURL=index.cjs.map