@dossierhq/design/lib/components/FullscreenContainer/FullscreenContainer.js

The design system for Dossier.

import { jsx as _jsx } from "react/jsx-runtime";
import { toClassName } from '../../utils/ClassNameUtils.js';
import { toFlexContainerClassName, toFlexItemClassName, } from '../../utils/FlexboxUtils.js';
import { extractLayoutProps, toSizeClassName, toSpacingClassName, } from '../../utils/LayoutPropsUtils.js';
import { Scrollable } from '../Scrollable/Scrollable.js';
const COLUMN_WIDTHS = {
    '1/12': 'is-1',
    '2/12': 'is-2',
    '3/12': 'is-3',
    '4/12': 'is-4',
};
export const FullscreenContainer = ({ card, height, children, }) => {
    return (_jsx("div", { className: toClassName('is-flex is-flex-direction-column', toSizeClassName({ height: height ?? '100vh' }), card && 'is-card-container'), children: children }));
};
FullscreenContainer.displayName = 'FullscreenContainer';
FullscreenContainer.Row = ({ id, center, fullWidth, fillHeight, sticky, style, flexDirection = 'column', children, ...props }) => {
    const width = !fullWidth && !center ? '100%' : undefined; // .container centers by default
    const height = fillHeight ? 0 : props.height;
    const addStickyFullWidthWrapper = sticky && !fullWidth;
    const { layoutProps, otherProps } = extractLayoutProps({ ...props, flexDirection });
    const className = toClassName(!fullWidth && 'is-flex-grow-0 container', fillHeight && 'is-flex-grow-1', sticky && !addStickyFullWidthWrapper && 'is-sticky-row', toSizeClassName({ width, height }), toFlexContainerClassName(layoutProps), toSpacingClassName(layoutProps));
    if (addStickyFullWidthWrapper) {
        return (_jsx("div", { id: id, className: "is-sticky-row", ...otherProps, children: _jsx("div", { className: className, style: style, children: children }) }));
    }
    return (_jsx("div", { id: id, className: className, style: style, ...otherProps, children: children }));
};
FullscreenContainer.Row.displayName = 'FullscreenContainer.Row';
FullscreenContainer.ScrollableRow = ({ direction, scrollToTopSignal, shadows, children, }) => {
    return (_jsx(Scrollable, { className: direction !== 'horizontal'
            ? toClassName('is-flex-grow-1', toSizeClassName({ height: 0 }))
            : undefined, direction: direction, shadows: shadows, scrollToTopSignal: scrollToTopSignal, children: children }));
};
FullscreenContainer.ScrollableRow.displayName = 'FullscreenContainer.ScrollableRow';
FullscreenContainer.Columns = ({ fillHeight, children }) => {
    return (_jsx("div", { className: toClassName('columns m-0', fillHeight && 'is-height-0 is-flex-grow-1'), children: children }));
};
FullscreenContainer.Columns.displayName = 'FullscreenContainer.Column';
FullscreenContainer.Column = ({ width, flexDirection = 'column', children, ...props }) => {
    const className = toClassName('column', width && COLUMN_WIDTHS[width], toFlexContainerClassName({ ...props, flexDirection }), toSpacingClassName(props));
    return _jsx("div", { className: className, children: children });
};
FullscreenContainer.Column.displayName = 'FullscreenContainer.Columns';
FullscreenContainer.ScrollableColumn = ({ scrollToId, scrollToIdSignal, width, flexDirection = 'column', children, ...props }) => {
    const className = toClassName('column p-0', width && COLUMN_WIDTHS[width], toFlexContainerClassName({ ...props, flexDirection }), toSpacingClassName(props));
    return (_jsx(Scrollable, { className: className, shadows: "none", scrollToId: scrollToId, scrollToIdSignal: scrollToIdSignal, children: children }));
};
FullscreenContainer.ScrollableColumn.displayName = 'FullscreenContainer.ScrollableColumn';
FullscreenContainer.Item = ({ children, ...props }) => (_jsx("div", { className: toClassName(toFlexItemClassName(props), toSpacingClassName(props)), children: children }));
FullscreenContainer.Item.displayName = 'FullscreenContainer.Item';
//# sourceMappingURL=FullscreenContainer.js.map