@patreon/studio/module/components/Collapse/index.jsx

Patreon Studio Design System

'use client';
import React from 'react';
import useMeasure from 'react-use-measure';
import { tokens } from '~/tokens';
import { IS_HAPPO } from '~/utilities/env';
import { wrapResponsive } from '~/utilities/opaque-responsive';
import { Content, Fade, Wrapper } from './index.styled';
// Define a no-op ResizeObserver polyfill if it's not available
const NoopResizeObserverPolyfill = typeof ResizeObserver !== 'undefined'
    ? undefined
    : class ResizeObserverPolyfill {
        observe() {
            // nothing
        }
        unobserve() {
            // nothing
        }
        disconnect() {
            // nothing
        }
    };
/**
 * The `Collapse` component can be used to hide content that is not immediately
 * relevant to the user. Use the `isCollapsed` prop to toggle its visibility.
 */
export function Collapse({ fadeColor = tokens.global.bg.base.default, fadeHeight = 80, collapsedHeight = 0, fadeBottom = false, children, id, isCollapsed, }) {
    const responsiveCollapsedHeight = wrapResponsive(collapsedHeight);
    const [measureRef, { height: measuredHeight }] = useMeasure({
        polyfill: NoopResizeObserverPolyfill,
    });
    return (<Wrapper id={id} isCollapsed={isCollapsed} responsiveCollapsedHeight={responsiveCollapsedHeight} contentHeight={measuredHeight > 0 ? measuredHeight : isCollapsed ? 0 : 'auto'}>
      <Content ref={IS_HAPPO ? null : measureRef} aria-hidden={collapsedHeight === 0 && isCollapsed}>
        {children}
      </Content>

      {fadeBottom && <Fade height={fadeHeight} opacity={isCollapsed ? 1 : 0} fadeColor={fadeColor}/>}
    </Wrapper>);
}
//# sourceMappingURL=index.jsx.map