@ozen-ui/kit/__inner__/esm/components/Stack/Stack.js

React component library

import { __assign, __rest } from "tslib";
import './Stack.css';
import React, { Children, Fragment, isValidElement } from 'react';
import { classnames } from '@bem-react/classnames';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { STACK_DEFAULT_TAG } from './constants';
import { generateDirectionCn, generateGapCn } from './utils';
export var cnStack = cn('Stack');
export var Stack = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'Stack',
    });
    var _a = props.as, Tag = _a === void 0 ? STACK_DEFAULT_TAG : _a, _b = props.direction, direction = _b === void 0 ? 'row' : _b, divider = props.divider, _c = props.shouldWrapChildren, shouldWrapChildren = _c === void 0 ? false : _c, fullWidth = props.fullWidth, children = props.children, align = props.align, justify = props.justify, gap = props.gap, wrap = props.wrap, className = props.className, other = __rest(props, ["as", "direction", "divider", "shouldWrapChildren", "fullWidth", "children", "align", "justify", "gap", "wrap", "className"]);
    var childNodes = Children.toArray(children);
    if (!childNodes.length) {
        return null;
    }
    var resolveChildren = function () {
        if (!shouldWrapChildren && !divider) {
            return children;
        }
        return childNodes.map(function (child, i) {
            if (!isValidElement(child))
                return null;
            return (React.createElement(Fragment, { key: child.key },
                shouldWrapChildren ? (React.createElement("div", { className: cnStack('Item') }, child)) : (child),
                divider && childNodes.length - 1 !== i && divider));
        });
    };
    return (React.createElement(Tag, __assign({}, other, { className: classnames(cnStack('', {
            align: align,
            justify: justify,
            fullWidth: fullWidth,
            wrap: wrap,
        }), generateDirectionCn(cnStack, direction), generateGapCn(cnStack, gap), className), ref: ref }), resolveChildren()));
});
Stack.displayName = 'Stack';