@navikt/ds-react/esm/collapsible/Collapsible.js

React components from the Norwegian Labour and Welfare Administration.

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { forwardRef, useCallback } from "react";
import { useControllableState, useId } from "../util/hooks/index.js";
import { CollapsibleContextProvider } from "./Collapsible.context.js";
import CollapsibleContent from "./parts/Collapsible.Content.js";
import CollapsibleTrigger from "./parts/Collapsible.Trigger.js";
/**
 * Collapsible is a component that allows you to toggle visibility of content.
 *
 * @example
 * ```jsx
 * <Collapsible>
 *   <Collapsible.Trigger>Trigger</Collapsible.Trigger>
 *   <Collapsible.Content>
 *     Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae
 *     corporis maxime aliquam, voluptates nobis numquam, non odit optio
 *     architecto iure laborum possimus! Quibusdam sit ullam, consequatur sunt
 *     tempore optio aliquid!
 *   </Collapsible.Content>
 * </Collapsible>
 * ```
 *
 * @example With asChild
 * ```jsx
 * <Collapsible>
 *   <Collapsible.Trigger asChild>
 *     <Button>Button</Button>
 *   </Collapsible.Trigger>
 *   <Collapsible.Content asChild>
 *     <Box padding="4" background="surface-alt-3-subtle">
 *       <div>lorem ipsum</div>
 *     </Box>
 *   </Collapsible.Content>
 * </Collapsible>
 * ```
 */
export const Collapsible = forwardRef((_a, ref) => {
    var { children, open, defaultOpen = false, onOpenChange, lazy = false } = _a, rest = __rest(_a, ["children", "open", "defaultOpen", "onOpenChange", "lazy"]);
    const [_open, setOpen] = useControllableState({
        value: open,
        defaultValue: defaultOpen,
        onChange: onOpenChange,
    });
    const internalId = useId();
    const state = _open ? "open" : "closed";
    return (React.createElement(CollapsibleContextProvider, { open: _open, onOpenToggle: useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]), contentId: `collapsible-content-${internalId}`, triggerId: `collapsible-trigger-${internalId}`, lazy: lazy, state: state },
        React.createElement("div", Object.assign({ ref: ref, "data-state": state }, rest), children)));
});
Collapsible.Trigger = CollapsibleTrigger;
Collapsible.Content = CollapsibleContent;
export default Collapsible;
//# sourceMappingURL=Collapsible.js.map