office-ui-fabric-react/lib/components/Stack/Stack.js

Reusable React components for building experiences for Microsoft 365.

import { __assign, __rest } from "tslib";
/** @jsxRuntime classic */
/** @jsx withSlots */
import * as React from 'react';
import { withSlots, createComponent, getSlots } from '../../Foundation';
import { getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';
import { styles } from './Stack.styles';
import { StackItem } from './StackItem/StackItem';
var StackView = function (props) {
    var _a = props.as, RootType = _a === void 0 ? 'div' : _a, disableShrink = props.disableShrink, wrap = props.wrap, rest = __rest(props, ["as", "disableShrink", "wrap"]);
    warnDeprecations('Stack', props, {
        gap: 'tokens.childrenGap',
        maxHeight: 'tokens.maxHeight',
        maxWidth: 'tokens.maxWidth',
        padding: 'tokens.padding',
    });
    var stackChildren = React.Children.map(props.children, function (child, index) {
        if (!child) {
            return null;
        }
        if (_isStackItem(child)) {
            var defaultItemProps = {
                shrink: !disableShrink,
            };
            return React.cloneElement(child, __assign(__assign({}, defaultItemProps), child.props));
        }
        return child;
    });
    var nativeProps = getNativeProps(rest, htmlElementProperties);
    var Slots = getSlots(props, {
        root: RootType,
        inner: 'div',
    });
    if (wrap) {
        return (withSlots(Slots.root, __assign({}, nativeProps),
            withSlots(Slots.inner, null, stackChildren)));
    }
    return withSlots(Slots.root, __assign({}, nativeProps), stackChildren);
};
function _isStackItem(item) {
    // In theory, we should be able to just check item.type === StackItem.
    // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),
    // the object identity is different despite the function implementation being the same.
    return (!!item &&
        typeof item === 'object' &&
        !!item.type &&
        // StackItem is generated by createComponent, so we need to check its displayName instead of name
        item.type.displayName === StackItem.displayName);
}
var StackStatics = {
    Item: StackItem,
};
export var Stack = createComponent(StackView, {
    displayName: 'Stack',
    styles: styles,
    statics: StackStatics,
});
export default Stack;
//# sourceMappingURL=Stack.js.map