@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UISection/UISections.js

@@ -1,708 +1,708 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UISections = exports.ANIMATION_TIME = void 0;
-const react_1 = __importDefault(require("react"));
-const UISection_1 = require("./UISection");
-const UISplitter_1 = require("./UISplitter");
-require("./UISections.scss");
-exports.ANIMATION_TIME = 300;
-const SECTIONS_ANIMATION_CLASS = 'sections--animated';
-/**
- * UISections component.
- *
- * @exports
- * @class {UISections}
- * @extends {React.Component<UISectionsProps, UISectionsState>}
- */
-class UISections extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UISectionsProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.resizeSections = [];
-        this.isFullScreen = false;
-        this.rootSize = 0;
-        this.ignoreAnimation = false;
-        this.state = {
-            sizes: undefined
-        };
-        this.onWindowResize = this.onWindowResize.bind(this);
-        this.rootRef = react_1.default.createRef();
-        this.sizeProperty = props.vertical ? 'height' : 'width';
-        this.domSizeProperty = props.vertical ? 'clientHeight' : 'clientWidth';
-        this.startPositionProperty = props.vertical ? 'top' : 'left';
-        this.endPositionProperty = props.vertical ? 'bottom' : 'right';
-        this.sizeProperty = props.vertical ? 'height' : 'width';
-        window.addEventListener('resize', this.onWindowResize);
-    }
-    /**
-     * Updates state sizes.
-     *
-     * @param {number} layoutSize
-     * @param {Array<number | UISectionSize | undefine>} sizes
-     * @returns {UISectionSize[]}
-     */
-    updateStateSizes(layoutSize, sizes) {
-        let uiSizes = sizes;
-        const dynamicSectionIndex = this.getDynamicSectionIndex();
-        // Calculate size for dynamic section
-        let availableSize = 0;
-        sizes.forEach((section, index) => {
-            if (typeof section === 'object' && section.size === undefined) {
-                const position = this.getSectionPosition(section);
-                section.size = Math.abs(this.rootSize - position.end - position.start);
-            }
-            if (index !== dynamicSectionIndex) {
-                availableSize += (typeof section === 'object' ? section.size : section) || 0;
-            }
-        });
-        availableSize = layoutSize - availableSize;
-        // Check if number array is passed as sizes. Convert array of number to array of UISectionSize
-        if (typeof sizes[0] !== 'object') {
-            uiSizes = [];
-            let start = 0;
-            sizes.forEach((size, index) => {
-                size = dynamicSectionIndex !== index ? size : availableSize;
-                uiSizes.push({
-                    percentage: false,
-                    size,
-                    start
-                });
-                start += size || 0;
-            });
-        }
-        // Apply size for dynamic section
-        const dynamicSection = uiSizes[dynamicSectionIndex];
-        if (dynamicSection) {
-            dynamicSection.size = availableSize;
-        }
-        // Recalculate start and end positions
-        this.recalculatePositions(uiSizes);
-        // Validate min sizes
-        this.validateStateMinSizes(uiSizes);
-        return uiSizes;
-    }
-    componentDidMount() {
-        const { sizesAsPercents, sizes } = this.props;
-        this.rootSize = this.getRootSize();
-        if (!sizesAsPercents && sizes) {
-            // Calculate state
-            this.setState({
-                sizes: this.updateStateSizes(this.rootSize, sizes)
-            });
-        }
-    }
-    componentDidUpdate() {
-        this.ignoreAnimation = false;
-    }
-    /**
-     * Gets derived state from properties.
-     *
-     * @param {UISectionProps} nextProps
-     * @param {UISectionsState} prevState
-     * @returns {UISectionsState | null}
-     */
-    static getDerivedStateFromProps(nextProps, prevState) {
-        // Handle property "animation" as array
-        let animate = prevState.animate;
-        let visibleSections;
-        let dynamicSection = 0;
-        if (Array.isArray(nextProps.animation)) {
-            visibleSections = UISections.getVisibleSections(nextProps.children);
-            // Check if there is transition for section with enabled animation
-            let transitionAnimation;
-            for (let i = 0; i < nextProps.animation.length; i++) {
-                if (visibleSections?.includes(i) !== prevState.visibleSections?.includes(i)) {
-                    transitionAnimation = transitionAnimation || nextProps.animation[i];
-                }
-            }
-            if (transitionAnimation !== undefined) {
-                // Visibility of sections changed - apply animation for transition section
-                animate = transitionAnimation;
-            }
-        }
-        else {
-            animate = nextProps.animation;
-        }
-        // Find dynamic section index
-        nextProps.sizes?.forEach((size, index) => {
-            if (size === undefined) {
-                dynamicSection = index;
-            }
-        });
-        return {
-            animate,
-            visibleSections,
-            dynamicSection
-        };
-    }
-    /**
-     * Validates state min sizes.
-     *
-     * @param {UISectionSize[]} sizes
-     */
-    validateStateMinSizes(sizes) {
-        // Prerequisite. Get size infos
-        let minSizesSum = 0;
-        let recalculateSizes = false;
-        const sizesInfo = [];
-        for (let i = 0; i < this.props.children.length; i++) {
-            //const size = this.getSectionCurrentSize(i);
-            const size = sizes[i].size || 0;
-            const minSize = this.getMinSectionSize(i);
-            if (minSize > size) {
-                recalculateSizes = true;
-            }
-            minSizesSum += minSize;
-            // Sizes data
-            sizesInfo.push({
-                size,
-                minSize,
-                spareSize: size - minSize
-            });
-        }
-        // First Part. Check if full screen required
-        const layoutSize = this.getRootSize();
-        // Second Part. Calculate sections which less than min size.
-        if (recalculateSizes && layoutSize >= minSizesSum) {
-            const recalculatedSizes = this.calculateSectionSizes(sizesInfo);
-            for (let i = 0; i < sizes.length; i++) {
-                sizes[i] = recalculatedSizes[i];
-            }
-        }
-        // Check full screen toggle
-        const isFullScreen = layoutSize < minSizesSum;
-        if (isFullScreen !== this.isFullScreen) {
-            this.isFullScreen = isFullScreen;
-            this.props.onToggleFullscreen?.(isFullScreen);
-        }
-    }
-    onWindowResize() {
-        let { sizes } = this.state;
-        // Dynamic section index
-        const layoutSize = this.getRootSize();
-        if (sizes) {
-            // Update sizes after resize
-            sizes = this.updateStateSizes(layoutSize, sizes);
-            // Apply state
-            this.ignoreAnimation = true;
-            this.setState({
-                sizes: sizes
-            });
-        }
-        this.rootSize = layoutSize;
-    }
-    /**
-     * Method returns indices of visible sections.
-     *
-     * @param {React.ReactNodeArray} sections Section elements.
-     * @returns {number[]} Indices of visible sections.
-     */
-    static getVisibleSections(sections) {
-        const visibleSections = [];
-        sections.forEach((child, i) => {
-            if (!UISections.isSectionVisible(child)) {
-                visibleSections.push(i);
-            }
-        });
-        return visibleSections;
-    }
-    /**
-     * Method checks is passed child section visible or not.
-     *
-     * @param {React.ReactElement | undefined} node React child node.
-     * @returns {boolean} True if section visible.
-     */
-    static isSectionVisible(node) {
-        if (node && node.type === UISection_1.UISection) {
-            return !node.props.hidden;
-        }
-        return false;
-    }
-    /**
-     * Method called when resizing of section started.
-     */
-    onSplitterResizeStart() {
-        const rootDom = this.rootRef.current;
-        const resizeSections = [];
-        if (rootDom && rootDom.childNodes) {
-            rootDom.classList.remove(SECTIONS_ANIMATION_CLASS);
-            for (let i = 0; i < rootDom.childNodes.length; i++) {
-                const minSectionSize = this.getMinSectionSize(i);
-                const siblingMinSectionSize = this.getMinSectionSize(i === 0 ? 1 : 0);
-                const sectionDom = rootDom.children[i];
-                const maxSize = Math.max(minSectionSize, rootDom[this.domSizeProperty] - siblingMinSectionSize);
-                resizeSections.push({
-                    size: sectionDom[this.domSizeProperty],
-                    dom: sectionDom,
-                    maxSize,
-                    section: this.resizeSections[i]
-                        ? this.resizeSections[i].section
-                        : {
-                            percentage: false
-                        }
-                });
-            }
-        }
-        this.resizeSections = resizeSections;
-    }
-    /**
-     * Method called when resizing of section is happening.
-     *
-     * @param {number} position Delta position in pixels.
-     * @returns {boolean} If resizing was happened - it can return false when splitter meets resizing limitation.
-     */
-    onSplitterResize(position) {
-        const resizeSections = position !== 0 ? this.resizeSections : [];
-        let left = 0;
-        for (let i = 0; i < resizeSections.length; i++) {
-            const minSectionSize = this.getMinSectionSize(i);
-            const resizeSection = resizeSections[i];
-            let newSize = resizeSection.size + (i === 0 ? position : -position);
-            if (minSectionSize === resizeSection.maxSize) {
-                // Ignore resize - section is not resizable
-                continue;
-            }
-            // Do not allow size exceed min and max boundaries
-            if (newSize < minSectionSize) {
-                position = this.correctBoundaryPosition(position, minSectionSize, newSize, i === 0);
-                newSize = minSectionSize;
-            }
-            else if (newSize > resizeSection.maxSize) {
-                position = this.correctBoundaryPosition(position, resizeSection.maxSize, newSize, i === 0);
-                newSize = resizeSection.maxSize;
-            }
-            const sectionSize = {
-                percentage: false
-            };
-            const nextSession = resizeSections[i + 1];
-            const right = nextSession ? nextSession.size - position : 0;
-            if (i > 0) {
-                sectionSize.size = newSize;
-                sectionSize.start = left;
-                resizeSection.dom.style[this.startPositionProperty] = left + 'px';
-            }
-            else {
-                sectionSize.start = 0;
-                resizeSection.dom.style[this.startPositionProperty] = '0px';
-            }
-            sectionSize.end = right;
-            resizeSection.dom.style[this.endPositionProperty] = right + 'px';
-            resizeSection.section = sectionSize;
-            left += newSize;
-        }
-        return false;
-    }
-    /**
-     * Method returns corrected position based on boundary and size.
-     *
-     * @param {number} position Delta position in pixels.
-     * @param {number} boundary Boundary position.
-     * @param {number} size Section size.
-     * @param {boolean} positive Direction.
-     * @returns {number} Position after correction based on boundary.
-     */
-    correctBoundaryPosition(position, boundary, size, positive) {
-        const diff = boundary - size;
-        return position + (positive ? diff : -diff);
-    }
-    /**
-     * Method called when resizing session ended.
-     */
-    onSplitterResizeEnd() {
-        const rootDom = this.rootRef.current;
-        if (rootDom && this.isAnimationEnabled()) {
-            rootDom.classList.add(SECTIONS_ANIMATION_CLASS);
-        }
-        const sizes = this.resizeSections.map((resizeSection) => resizeSection.section);
-        if (sizes.some((size) => size.end !== undefined || size.start !== undefined || size.size !== undefined)) {
-            this.setState({
-                sizes
-            });
-        }
-        this.props.onResize?.(sizes);
-    }
-    /**
-     * Method called when splitter with type 'Toggle' was toggled.
-     */
-    onSplitterToggle() {
-        if (this.props.onClose) {
-            this.props.onClose();
-        }
-    }
-    /**
-     * Method returns visible children sections count.
-     *
-     * @returns {number} Count of visible children sections.
-     */
-    getVisibleChildrenCount() {
-        return this.props.children.filter((child) => child && UISections.isSectionVisible(child))
-            .length;
-    }
-    /**
-     * Method returns size of section in percents.
-     *
-     * @param {number} index Target section index.
-     * @param {number} childrenCount Count of children.
-     * @param {boolean} [reverse=false] Reverse calculation(width vs right).
-     * @returns {number} Size of section in percents. For example 50% => 0.5.
-     */
-    getSizePercents(index, childrenCount, reverse = false) {
-        const { sizes = [], sizesAsPercents } = this.props;
-        let propSize = sizes[index];
-        if (propSize === undefined && index === this.state.dynamicSection) {
-            // Find available size
-            let newSize = 100;
-            sizes.every((size) => {
-                if (size) {
-                    newSize -= size;
-                }
-            });
-            propSize = newSize;
-        }
-        if (propSize && sizesAsPercents) {
-            return reverse ? 100 - propSize : propSize;
-        }
-        return childrenCount > 0 ? 100 / childrenCount : 0;
-    }
-    /**
-     * Method gets section size when section size is not percent based and 'sizes' prop is passed from outside.
-     *
-     * @param {number} index Section index to look up.
-     * @param {number} childrenCount Count of visible children.
-     * @returns {React.CSSProperties | undefined} CSS Style object or undefined if no style from 'sizes' prop.
-     */
-    getSectionSize(index, childrenCount) {
-        if (this.props.sizesAsPercents ||
-            !this.props.sizes ||
-            childrenCount < 2 ||
-            (index >= this.props.sizes.length && index >= childrenCount)) {
-            return undefined;
-        }
-        const sectionStyle = {
-            [this.sizeProperty]: this.props.sizes[index] ? this.props.sizes[index] + 'px' : this.props.sizes[index]
-        };
-        if (index === 0) {
-            sectionStyle[this.startPositionProperty] = 0;
-        }
-        if (index === this.props.sizes.length - 1) {
-            sectionStyle[this.endPositionProperty] = 0;
-        }
-        else if (this.props.sizes[index + 1]) {
-            sectionStyle[this.endPositionProperty] = this.props.sizes[index + 1] + 'px';
-        }
-        return sectionStyle;
-    }
-    /**
-     * Gets position style value.
-     *
-     * @param {number} childrenCount
-     * @param {string} value
-     * @returns {string}
-     */
-    getPositionStyleValue(childrenCount, value) {
-        return childrenCount === 1 ? '0%' : value;
-    }
-    /**
-     * Method returns style object for passed visible section.
-     * Method calculates size of section depending on several points.
-     * 1. Section - resized or not.
-     * 2. Animation - off or on.
-     *
-     * @param {number} index Index of section.
-     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
-     */
-    getVisibleSectionStyle(index) {
-        const sectionStyle = {
-            visible: true,
-            style: {}
-        };
-        // Use values from state or calculate initial percents
-        const childrenCount = this.getVisibleChildrenCount();
-        const stateSize = this.state.sizes && this.state.sizes[index];
-        if (childrenCount === this.props.children.length && stateSize) {
-            sectionStyle.style = {
-                ...(stateSize.start !== undefined && { [this.startPositionProperty]: stateSize.start + 'px' }),
-                ...(stateSize.end !== undefined && { [this.endPositionProperty]: stateSize.end + 'px' })
-            };
-            if (stateSize.size !== undefined && (stateSize.start === undefined || stateSize.end === undefined)) {
-                // No need to provide size if start and end defined
-                sectionStyle.style[this.sizeProperty] = stateSize.size + 'px';
-            }
-        }
-        else {
-            const toggleSectionSize = this.getSectionSize(index, childrenCount);
-            if (toggleSectionSize) {
-                sectionStyle.style = { ...sectionStyle.style, ...toggleSectionSize };
-            }
-            else {
-                const size = this.getSizePercents(index, childrenCount, true);
-                sectionStyle.style = {
-                    [this.startPositionProperty]: this.getPositionStyleValue(childrenCount, `${index * size}%`),
-                    [this.endPositionProperty]: this.getPositionStyleValue(childrenCount, `${(childrenCount - (index + 1)) * size}%`)
-                };
-            }
-        }
-        return sectionStyle;
-    }
-    /**
-     * Method returns style object for passed hidden section.
-     * Method calculates size of section depending on several points.
-     * 1. Section - resized or not.
-     * 2. Animation - off or on.
-     *
-     * @param {number} index Index of section.
-     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
-     */
-    getHiddenSectionStyle(index) {
-        const sectionStyle = {
-            visible: false
-        };
-        // Hidden section when animation is ON
-        let stateSize = this.state.sizes && this.state.sizes[index];
-        if (!stateSize &&
-            this.props.splitterType === UISplitter_1.UISplitterType.Toggle &&
-            this.props.sizes &&
-            this.props.sizes[index]) {
-            stateSize = {
-                size: this.props.sizes[index],
-                percentage: false
-            };
-        }
-        let unit;
-        let size = 0;
-        if (stateSize) {
-            unit = 'px';
-            if (stateSize.size) {
-                size = stateSize.size;
-            }
-            else if (stateSize?.start !== undefined && stateSize?.end !== undefined) {
-                size = this.getRootSize() - stateSize.end - stateSize.start;
-            }
-        }
-        else {
-            const childrenCount = this.props.children.length;
-            const sectionSize = this.getSectionSize(index, childrenCount);
-            if (sectionSize && sectionSize.width) {
-                size = parseFloat(sectionSize.width.toString());
-                unit = 'px';
-            }
-            else {
-                size = this.getSizePercents(index, childrenCount);
-                unit = '%';
-            }
-        }
-        const hiddenPosition = -size + unit;
-        sectionStyle.style = {
-            [this.endPositionProperty]: index === 0 ? '100%' : hiddenPosition,
-            [this.startPositionProperty]: index === 0 ? hiddenPosition : '100%'
-        };
-        return sectionStyle;
-    }
-    /**
-     * Method returns minimal size for passed section.
-     *
-     * @param {number} index Index of section.
-     * @returns {number} Minimal size of section.
-     */
-    getMinSectionSize(index) {
-        const minSectionSize = this.props.minSectionSize;
-        let minSize = 0;
-        if (minSectionSize) {
-            minSize = Array.isArray(minSectionSize) ? minSectionSize[index] : minSectionSize;
-        }
-        return minSize;
-    }
-    /**
-     * Method returns class names string depending on props and component state.
-     *
-     * @param {boolean} fullSizeMode Is full size mode - only ine sction visible.
-     * @returns {number} Minimal size of section.
-     */
-    getClassNames(fullSizeMode) {
-        let classNames = ` ${this.props.vertical ? 'sections--vertical' : 'sections--horizontal'}`;
-        // Animation
-        const sectionsAnimationClass = ` ${SECTIONS_ANIMATION_CLASS}`;
-        classNames += `${this.isAnimationEnabled() ? sectionsAnimationClass : ''}`;
-        // Full 'screen' mode - only one section visible
-        classNames += `${fullSizeMode ? ' sections--full' : ''}`;
-        return classNames;
-    }
-    /**
-     * Method returns section's react element based on passed section index.
-     *
-     * @param {number} index Section index.
-     * @param {boolean} isSectionHidden Is section hidden.
-     * @returns {React.ReactElement | undefined} Section's react element.
-     */
-    getSection(index, isSectionHidden) {
-        const childNode = this.props.children[index];
-        const sectionStyle = UISections.isSectionVisible(childNode)
-            ? this.getVisibleSectionStyle(index)
-            : this.getHiddenSectionStyle(index);
-        if (!sectionStyle) {
-            return undefined;
-        }
-        const splitterType = this.props.splitterType || UISplitter_1.UISplitterType.Resize;
-        const splitterLayoutType = this.props.splitterLayoutType || UISplitter_1.UISplitterLayoutType.Standard;
-        let isSplitterVisible = this.props.splitter && index > 0;
-        const isSingleSection = this.getVisibleChildrenCount() === 1;
-        if (isSingleSection && !this.isAnimationEnabled()) {
-            isSplitterVisible = false;
-        }
-        return (react_1.default.createElement("div", { key: index, className: `sections__item${isSplitterVisible ? ' sections__item--' + splitterType : ''}${!sectionStyle.visible ? ' sections__item--hidden' : ''}`, style: sectionStyle.style },
-            isSplitterVisible && childNode && (react_1.default.createElement(UISplitter_1.UISplitter, { vertical: this.props.vertical, onResize: this.onSplitterResize.bind(this), onResizeStart: this.onSplitterResizeStart.bind(this), onResizeEnd: this.onSplitterResizeEnd.bind(this), onToggle: this.onSplitterToggle.bind(this), hidden: isSectionHidden || isSingleSection, type: splitterType, title: this.props.splitterTitle, splitterLayoutType: splitterLayoutType })),
-            childNode));
-    }
-    /**
-     * Method checks if animation enabled with current state.
-     *
-     * @returns {boolean} True if animation is enabled.
-     */
-    isAnimationEnabled() {
-        return !this.ignoreAnimation && (this.props.animation === true || this.state.animate);
-    }
-    /**
-     * Method returns index of dynamicly sized section.
-     *
-     * @returns {number} Index of dynamicly sized section.
-     */
-    getDynamicSectionIndex() {
-        return this.state.dynamicSection !== undefined ? this.state.dynamicSection : 0;
-    }
-    /**
-     * Method converts passed positions to section position object.
-     *
-     * @param {UISectionSize} section Section size.
-     * @returns Position object.
-     */
-    getSectionPosition(section) {
-        return { start: section.start || 0, end: section.end || 0 };
-    }
-    /**
-     * Method calculates spare size for passed section.
-     *
-     * @param {SizeCalculationInfo} origin Section size.
-     * @param {SizeCalculationInfo[]} sizes All section sizes.
-     * @returns {number} Spare size.
-     */
-    getSpareSize(origin, sizes) {
-        let increaseSize = 0;
-        let target = origin.minSize - origin.size;
-        for (const info of sizes) {
-            if (info === origin) {
-                continue;
-            }
-            if (info.spareSize > 0) {
-                const useSize = Math.min(info.spareSize, target);
-                // Update targets
-                increaseSize += useSize;
-                info.spareSize -= useSize;
-                info.size -= useSize;
-                target -= useSize;
-            }
-            if (target <= 0) {
-                // Desireable target meet requirement
-                break;
-            }
-        }
-        return increaseSize;
-    }
-    /**
-     * Method converts SizeCalculationInfo into UISectionSize before applying sizes to state.
-     *
-     * @param {SizeCalculationInfo[]} sizes Section sizes.
-     * @returns {UISectionSize[]} Section sizes applyable for state.
-     */
-    calculateSectionSizes(sizes) {
-        // Calculate sizes
-        for (const section of sizes) {
-            if (section.size < section.minSize) {
-                const diff = this.getSpareSize(section, sizes);
-                if (diff) {
-                    section.size += diff;
-                }
-            }
-        }
-        // Apply sizes to state
-        const stateSizes = [];
-        for (let i = 0; i < sizes.length; i++) {
-            const sectionSize = {
-                percentage: false
-            };
-            const current = sizes[i];
-            const next = sizes[i + 1];
-            const right = next ? next.size : 0;
-            if (i > 0) {
-                sectionSize.size = current.size;
-                sectionSize.start = undefined;
-            }
-            else {
-                sectionSize.start = 0;
-            }
-            sectionSize.end = right;
-            stateSizes.push(sectionSize);
-        }
-        return stateSizes;
-    }
-    /**
-     * Method recalculates "start" and "end" position based on size property.
-     *
-     * @param {UISectionSize[]} sizes Section sizes.
-     */
-    recalculatePositions(sizes) {
-        // Recalculate positions - START
-        let start = 0;
-        sizes.forEach((section) => {
-            section.start = start;
-            // Next start
-            start += section.size || 0;
-        });
-        // Recalculate positions - END
-        let end = 0;
-        for (let i = sizes.length - 1; i >= 0; i--) {
-            sizes[i].end = end;
-            // Next start
-            end += sizes[i].size || 0;
-        }
-    }
-    /**
-     * Method returns size of sections container.
-     *
-     * @returns {UISectionSize[]} Size of sections container.
-     */
-    getRootSize() {
-        const rootDom = this.rootRef.current;
-        return rootDom?.getBoundingClientRect()[this.sizeProperty] || 0;
-    }
-    /**
-     * @returns {React.ReactElement}
-     */
-    render() {
-        const sections = [];
-        let visibleSections = 0;
-        for (let i = 0; i < this.props.children.length; i++) {
-            const childNode = this.props.children[i];
-            const isSectionHidden = !UISections.isSectionVisible(childNode);
-            if (!isSectionHidden) {
-                visibleSections++;
-            }
-            const section = this.getSection(i, isSectionHidden);
-            if (section) {
-                sections.push(section);
-            }
-        }
-        return (react_1.default.createElement("div", { ref: this.rootRef, className: `sections ${this.getClassNames(visibleSections === 1)}`, style: {
-                ...(this.props.height && { height: this.props.height })
-            } }, sections));
-    }
-}
-exports.UISections = UISections;
-UISections.Section = UISection_1.UISection;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UISections = exports.ANIMATION_TIME = void 0;
+const react_1 = __importDefault(require("react"));
+const UISection_1 = require("./UISection");
+const UISplitter_1 = require("./UISplitter");
+require("./UISections.scss");
+exports.ANIMATION_TIME = 300;
+const SECTIONS_ANIMATION_CLASS = 'sections--animated';
+/**
+ * UISections component.
+ *
+ * @exports
+ * @class {UISections}
+ * @extends {React.Component<UISectionsProps, UISectionsState>}
+ */
+class UISections extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UISectionsProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.resizeSections = [];
+        this.isFullScreen = false;
+        this.rootSize = 0;
+        this.ignoreAnimation = false;
+        this.state = {
+            sizes: undefined
+        };
+        this.onWindowResize = this.onWindowResize.bind(this);
+        this.rootRef = react_1.default.createRef();
+        this.sizeProperty = props.vertical ? 'height' : 'width';
+        this.domSizeProperty = props.vertical ? 'clientHeight' : 'clientWidth';
+        this.startPositionProperty = props.vertical ? 'top' : 'left';
+        this.endPositionProperty = props.vertical ? 'bottom' : 'right';
+        this.sizeProperty = props.vertical ? 'height' : 'width';
+        window.addEventListener('resize', this.onWindowResize);
+    }
+    /**
+     * Updates state sizes.
+     *
+     * @param {number} layoutSize
+     * @param {Array<number | UISectionSize | undefine>} sizes
+     * @returns {UISectionSize[]}
+     */
+    updateStateSizes(layoutSize, sizes) {
+        let uiSizes = sizes;
+        const dynamicSectionIndex = this.getDynamicSectionIndex();
+        // Calculate size for dynamic section
+        let availableSize = 0;
+        sizes.forEach((section, index) => {
+            if (typeof section === 'object' && section.size === undefined) {
+                const position = this.getSectionPosition(section);
+                section.size = Math.abs(this.rootSize - position.end - position.start);
+            }
+            if (index !== dynamicSectionIndex) {
+                availableSize += (typeof section === 'object' ? section.size : section) || 0;
+            }
+        });
+        availableSize = layoutSize - availableSize;
+        // Check if number array is passed as sizes. Convert array of number to array of UISectionSize
+        if (typeof sizes[0] !== 'object') {
+            uiSizes = [];
+            let start = 0;
+            sizes.forEach((size, index) => {
+                size = dynamicSectionIndex !== index ? size : availableSize;
+                uiSizes.push({
+                    percentage: false,
+                    size,
+                    start
+                });
+                start += size || 0;
+            });
+        }
+        // Apply size for dynamic section
+        const dynamicSection = uiSizes[dynamicSectionIndex];
+        if (dynamicSection) {
+            dynamicSection.size = availableSize;
+        }
+        // Recalculate start and end positions
+        this.recalculatePositions(uiSizes);
+        // Validate min sizes
+        this.validateStateMinSizes(uiSizes);
+        return uiSizes;
+    }
+    componentDidMount() {
+        const { sizesAsPercents, sizes } = this.props;
+        this.rootSize = this.getRootSize();
+        if (!sizesAsPercents && sizes) {
+            // Calculate state
+            this.setState({
+                sizes: this.updateStateSizes(this.rootSize, sizes)
+            });
+        }
+    }
+    componentDidUpdate() {
+        this.ignoreAnimation = false;
+    }
+    /**
+     * Gets derived state from properties.
+     *
+     * @param {UISectionProps} nextProps
+     * @param {UISectionsState} prevState
+     * @returns {UISectionsState | null}
+     */
+    static getDerivedStateFromProps(nextProps, prevState) {
+        // Handle property "animation" as array
+        let animate = prevState.animate;
+        let visibleSections;
+        let dynamicSection = 0;
+        if (Array.isArray(nextProps.animation)) {
+            visibleSections = UISections.getVisibleSections(nextProps.children);
+            // Check if there is transition for section with enabled animation
+            let transitionAnimation;
+            for (let i = 0; i < nextProps.animation.length; i++) {
+                if (visibleSections?.includes(i) !== prevState.visibleSections?.includes(i)) {
+                    transitionAnimation = transitionAnimation || nextProps.animation[i];
+                }
+            }
+            if (transitionAnimation !== undefined) {
+                // Visibility of sections changed - apply animation for transition section
+                animate = transitionAnimation;
+            }
+        }
+        else {
+            animate = nextProps.animation;
+        }
+        // Find dynamic section index
+        nextProps.sizes?.forEach((size, index) => {
+            if (size === undefined) {
+                dynamicSection = index;
+            }
+        });
+        return {
+            animate,
+            visibleSections,
+            dynamicSection
+        };
+    }
+    /**
+     * Validates state min sizes.
+     *
+     * @param {UISectionSize[]} sizes
+     */
+    validateStateMinSizes(sizes) {
+        // Prerequisite. Get size infos
+        let minSizesSum = 0;
+        let recalculateSizes = false;
+        const sizesInfo = [];
+        for (let i = 0; i < this.props.children.length; i++) {
+            //const size = this.getSectionCurrentSize(i);
+            const size = sizes[i].size || 0;
+            const minSize = this.getMinSectionSize(i);
+            if (minSize > size) {
+                recalculateSizes = true;
+            }
+            minSizesSum += minSize;
+            // Sizes data
+            sizesInfo.push({
+                size,
+                minSize,
+                spareSize: size - minSize
+            });
+        }
+        // First Part. Check if full screen required
+        const layoutSize = this.getRootSize();
+        // Second Part. Calculate sections which less than min size.
+        if (recalculateSizes && layoutSize >= minSizesSum) {
+            const recalculatedSizes = this.calculateSectionSizes(sizesInfo);
+            for (let i = 0; i < sizes.length; i++) {
+                sizes[i] = recalculatedSizes[i];
+            }
+        }
+        // Check full screen toggle
+        const isFullScreen = layoutSize < minSizesSum;
+        if (isFullScreen !== this.isFullScreen) {
+            this.isFullScreen = isFullScreen;
+            this.props.onToggleFullscreen?.(isFullScreen);
+        }
+    }
+    onWindowResize() {
+        let { sizes } = this.state;
+        // Dynamic section index
+        const layoutSize = this.getRootSize();
+        if (sizes) {
+            // Update sizes after resize
+            sizes = this.updateStateSizes(layoutSize, sizes);
+            // Apply state
+            this.ignoreAnimation = true;
+            this.setState({
+                sizes: sizes
+            });
+        }
+        this.rootSize = layoutSize;
+    }
+    /**
+     * Method returns indices of visible sections.
+     *
+     * @param {React.ReactNodeArray} sections Section elements.
+     * @returns {number[]} Indices of visible sections.
+     */
+    static getVisibleSections(sections) {
+        const visibleSections = [];
+        sections.forEach((child, i) => {
+            if (!UISections.isSectionVisible(child)) {
+                visibleSections.push(i);
+            }
+        });
+        return visibleSections;
+    }
+    /**
+     * Method checks is passed child section visible or not.
+     *
+     * @param {React.ReactElement | undefined} node React child node.
+     * @returns {boolean} True if section visible.
+     */
+    static isSectionVisible(node) {
+        if (node && node.type === UISection_1.UISection) {
+            return !node.props.hidden;
+        }
+        return false;
+    }
+    /**
+     * Method called when resizing of section started.
+     */
+    onSplitterResizeStart() {
+        const rootDom = this.rootRef.current;
+        const resizeSections = [];
+        if (rootDom && rootDom.childNodes) {
+            rootDom.classList.remove(SECTIONS_ANIMATION_CLASS);
+            for (let i = 0; i < rootDom.childNodes.length; i++) {
+                const minSectionSize = this.getMinSectionSize(i);
+                const siblingMinSectionSize = this.getMinSectionSize(i === 0 ? 1 : 0);
+                const sectionDom = rootDom.children[i];
+                const maxSize = Math.max(minSectionSize, rootDom[this.domSizeProperty] - siblingMinSectionSize);
+                resizeSections.push({
+                    size: sectionDom[this.domSizeProperty],
+                    dom: sectionDom,
+                    maxSize,
+                    section: this.resizeSections[i]
+                        ? this.resizeSections[i].section
+                        : {
+                            percentage: false
+                        }
+                });
+            }
+        }
+        this.resizeSections = resizeSections;
+    }
+    /**
+     * Method called when resizing of section is happening.
+     *
+     * @param {number} position Delta position in pixels.
+     * @returns {boolean} If resizing was happened - it can return false when splitter meets resizing limitation.
+     */
+    onSplitterResize(position) {
+        const resizeSections = position !== 0 ? this.resizeSections : [];
+        let left = 0;
+        for (let i = 0; i < resizeSections.length; i++) {
+            const minSectionSize = this.getMinSectionSize(i);
+            const resizeSection = resizeSections[i];
+            let newSize = resizeSection.size + (i === 0 ? position : -position);
+            if (minSectionSize === resizeSection.maxSize) {
+                // Ignore resize - section is not resizable
+                continue;
+            }
+            // Do not allow size exceed min and max boundaries
+            if (newSize < minSectionSize) {
+                position = this.correctBoundaryPosition(position, minSectionSize, newSize, i === 0);
+                newSize = minSectionSize;
+            }
+            else if (newSize > resizeSection.maxSize) {
+                position = this.correctBoundaryPosition(position, resizeSection.maxSize, newSize, i === 0);
+                newSize = resizeSection.maxSize;
+            }
+            const sectionSize = {
+                percentage: false
+            };
+            const nextSession = resizeSections[i + 1];
+            const right = nextSession ? nextSession.size - position : 0;
+            if (i > 0) {
+                sectionSize.size = newSize;
+                sectionSize.start = left;
+                resizeSection.dom.style[this.startPositionProperty] = left + 'px';
+            }
+            else {
+                sectionSize.start = 0;
+                resizeSection.dom.style[this.startPositionProperty] = '0px';
+            }
+            sectionSize.end = right;
+            resizeSection.dom.style[this.endPositionProperty] = right + 'px';
+            resizeSection.section = sectionSize;
+            left += newSize;
+        }
+        return false;
+    }
+    /**
+     * Method returns corrected position based on boundary and size.
+     *
+     * @param {number} position Delta position in pixels.
+     * @param {number} boundary Boundary position.
+     * @param {number} size Section size.
+     * @param {boolean} positive Direction.
+     * @returns {number} Position after correction based on boundary.
+     */
+    correctBoundaryPosition(position, boundary, size, positive) {
+        const diff = boundary - size;
+        return position + (positive ? diff : -diff);
+    }
+    /**
+     * Method called when resizing session ended.
+     */
+    onSplitterResizeEnd() {
+        const rootDom = this.rootRef.current;
+        if (rootDom && this.isAnimationEnabled()) {
+            rootDom.classList.add(SECTIONS_ANIMATION_CLASS);
+        }
+        const sizes = this.resizeSections.map((resizeSection) => resizeSection.section);
+        if (sizes.some((size) => size.end !== undefined || size.start !== undefined || size.size !== undefined)) {
+            this.setState({
+                sizes
+            });
+        }
+        this.props.onResize?.(sizes);
+    }
+    /**
+     * Method called when splitter with type 'Toggle' was toggled.
+     */
+    onSplitterToggle() {
+        if (this.props.onClose) {
+            this.props.onClose();
+        }
+    }
+    /**
+     * Method returns visible children sections count.
+     *
+     * @returns {number} Count of visible children sections.
+     */
+    getVisibleChildrenCount() {
+        return this.props.children.filter((child) => child && UISections.isSectionVisible(child))
+            .length;
+    }
+    /**
+     * Method returns size of section in percents.
+     *
+     * @param {number} index Target section index.
+     * @param {number} childrenCount Count of children.
+     * @param {boolean} [reverse=false] Reverse calculation(width vs right).
+     * @returns {number} Size of section in percents. For example 50% => 0.5.
+     */
+    getSizePercents(index, childrenCount, reverse = false) {
+        const { sizes = [], sizesAsPercents } = this.props;
+        let propSize = sizes[index];
+        if (propSize === undefined && index === this.state.dynamicSection) {
+            // Find available size
+            let newSize = 100;
+            sizes.every((size) => {
+                if (size) {
+                    newSize -= size;
+                }
+            });
+            propSize = newSize;
+        }
+        if (propSize && sizesAsPercents) {
+            return reverse ? 100 - propSize : propSize;
+        }
+        return childrenCount > 0 ? 100 / childrenCount : 0;
+    }
+    /**
+     * Method gets section size when section size is not percent based and 'sizes' prop is passed from outside.
+     *
+     * @param {number} index Section index to look up.
+     * @param {number} childrenCount Count of visible children.
+     * @returns {React.CSSProperties | undefined} CSS Style object or undefined if no style from 'sizes' prop.
+     */
+    getSectionSize(index, childrenCount) {
+        if (this.props.sizesAsPercents ||
+            !this.props.sizes ||
+            childrenCount < 2 ||
+            (index >= this.props.sizes.length && index >= childrenCount)) {
+            return undefined;
+        }
+        const sectionStyle = {
+            [this.sizeProperty]: this.props.sizes[index] ? this.props.sizes[index] + 'px' : this.props.sizes[index]
+        };
+        if (index === 0) {
+            sectionStyle[this.startPositionProperty] = 0;
+        }
+        if (index === this.props.sizes.length - 1) {
+            sectionStyle[this.endPositionProperty] = 0;
+        }
+        else if (this.props.sizes[index + 1]) {
+            sectionStyle[this.endPositionProperty] = this.props.sizes[index + 1] + 'px';
+        }
+        return sectionStyle;
+    }
+    /**
+     * Gets position style value.
+     *
+     * @param {number} childrenCount
+     * @param {string} value
+     * @returns {string}
+     */
+    getPositionStyleValue(childrenCount, value) {
+        return childrenCount === 1 ? '0%' : value;
+    }
+    /**
+     * Method returns style object for passed visible section.
+     * Method calculates size of section depending on several points.
+     * 1. Section - resized or not.
+     * 2. Animation - off or on.
+     *
+     * @param {number} index Index of section.
+     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
+     */
+    getVisibleSectionStyle(index) {
+        const sectionStyle = {
+            visible: true,
+            style: {}
+        };
+        // Use values from state or calculate initial percents
+        const childrenCount = this.getVisibleChildrenCount();
+        const stateSize = this.state.sizes && this.state.sizes[index];
+        if (childrenCount === this.props.children.length && stateSize) {
+            sectionStyle.style = {
+                ...(stateSize.start !== undefined && { [this.startPositionProperty]: stateSize.start + 'px' }),
+                ...(stateSize.end !== undefined && { [this.endPositionProperty]: stateSize.end + 'px' })
+            };
+            if (stateSize.size !== undefined && (stateSize.start === undefined || stateSize.end === undefined)) {
+                // No need to provide size if start and end defined
+                sectionStyle.style[this.sizeProperty] = stateSize.size + 'px';
+            }
+        }
+        else {
+            const toggleSectionSize = this.getSectionSize(index, childrenCount);
+            if (toggleSectionSize) {
+                sectionStyle.style = { ...sectionStyle.style, ...toggleSectionSize };
+            }
+            else {
+                const size = this.getSizePercents(index, childrenCount, true);
+                sectionStyle.style = {
+                    [this.startPositionProperty]: this.getPositionStyleValue(childrenCount, `${index * size}%`),
+                    [this.endPositionProperty]: this.getPositionStyleValue(childrenCount, `${(childrenCount - (index + 1)) * size}%`)
+                };
+            }
+        }
+        return sectionStyle;
+    }
+    /**
+     * Method returns style object for passed hidden section.
+     * Method calculates size of section depending on several points.
+     * 1. Section - resized or not.
+     * 2. Animation - off or on.
+     *
+     * @param {number} index Index of section.
+     * @returns {SectionStyleCalculation} Object which contains visibility state and styles to apply.
+     */
+    getHiddenSectionStyle(index) {
+        const sectionStyle = {
+            visible: false
+        };
+        // Hidden section when animation is ON
+        let stateSize = this.state.sizes && this.state.sizes[index];
+        if (!stateSize &&
+            this.props.splitterType === UISplitter_1.UISplitterType.Toggle &&
+            this.props.sizes &&
+            this.props.sizes[index]) {
+            stateSize = {
+                size: this.props.sizes[index],
+                percentage: false
+            };
+        }
+        let unit;
+        let size = 0;
+        if (stateSize) {
+            unit = 'px';
+            if (stateSize.size) {
+                size = stateSize.size;
+            }
+            else if (stateSize?.start !== undefined && stateSize?.end !== undefined) {
+                size = this.getRootSize() - stateSize.end - stateSize.start;
+            }
+        }
+        else {
+            const childrenCount = this.props.children.length;
+            const sectionSize = this.getSectionSize(index, childrenCount);
+            if (sectionSize && sectionSize.width) {
+                size = parseFloat(sectionSize.width.toString());
+                unit = 'px';
+            }
+            else {
+                size = this.getSizePercents(index, childrenCount);
+                unit = '%';
+            }
+        }
+        const hiddenPosition = -size + unit;
+        sectionStyle.style = {
+            [this.endPositionProperty]: index === 0 ? '100%' : hiddenPosition,
+            [this.startPositionProperty]: index === 0 ? hiddenPosition : '100%'
+        };
+        return sectionStyle;
+    }
+    /**
+     * Method returns minimal size for passed section.
+     *
+     * @param {number} index Index of section.
+     * @returns {number} Minimal size of section.
+     */
+    getMinSectionSize(index) {
+        const minSectionSize = this.props.minSectionSize;
+        let minSize = 0;
+        if (minSectionSize) {
+            minSize = Array.isArray(minSectionSize) ? minSectionSize[index] : minSectionSize;
+        }
+        return minSize;
+    }
+    /**
+     * Method returns class names string depending on props and component state.
+     *
+     * @param {boolean} fullSizeMode Is full size mode - only ine sction visible.
+     * @returns {number} Minimal size of section.
+     */
+    getClassNames(fullSizeMode) {
+        let classNames = ` ${this.props.vertical ? 'sections--vertical' : 'sections--horizontal'}`;
+        // Animation
+        const sectionsAnimationClass = ` ${SECTIONS_ANIMATION_CLASS}`;
+        classNames += `${this.isAnimationEnabled() ? sectionsAnimationClass : ''}`;
+        // Full 'screen' mode - only one section visible
+        classNames += `${fullSizeMode ? ' sections--full' : ''}`;
+        return classNames;
+    }
+    /**
+     * Method returns section's react element based on passed section index.
+     *
+     * @param {number} index Section index.
+     * @param {boolean} isSectionHidden Is section hidden.
+     * @returns {React.ReactElement | undefined} Section's react element.
+     */
+    getSection(index, isSectionHidden) {
+        const childNode = this.props.children[index];
+        const sectionStyle = UISections.isSectionVisible(childNode)
+            ? this.getVisibleSectionStyle(index)
+            : this.getHiddenSectionStyle(index);
+        if (!sectionStyle) {
+            return undefined;
+        }
+        const splitterType = this.props.splitterType || UISplitter_1.UISplitterType.Resize;
+        const splitterLayoutType = this.props.splitterLayoutType || UISplitter_1.UISplitterLayoutType.Standard;
+        let isSplitterVisible = this.props.splitter && index > 0;
+        const isSingleSection = this.getVisibleChildrenCount() === 1;
+        if (isSingleSection && !this.isAnimationEnabled()) {
+            isSplitterVisible = false;
+        }
+        return (react_1.default.createElement("div", { key: index, className: `sections__item${isSplitterVisible ? ' sections__item--' + splitterType : ''}${!sectionStyle.visible ? ' sections__item--hidden' : ''}`, style: sectionStyle.style },
+            isSplitterVisible && childNode && (react_1.default.createElement(UISplitter_1.UISplitter, { vertical: this.props.vertical, onResize: this.onSplitterResize.bind(this), onResizeStart: this.onSplitterResizeStart.bind(this), onResizeEnd: this.onSplitterResizeEnd.bind(this), onToggle: this.onSplitterToggle.bind(this), hidden: isSectionHidden || isSingleSection, type: splitterType, title: this.props.splitterTitle, splitterLayoutType: splitterLayoutType })),
+            childNode));
+    }
+    /**
+     * Method checks if animation enabled with current state.
+     *
+     * @returns {boolean} True if animation is enabled.
+     */
+    isAnimationEnabled() {
+        return !this.ignoreAnimation && (this.props.animation === true || this.state.animate);
+    }
+    /**
+     * Method returns index of dynamicly sized section.
+     *
+     * @returns {number} Index of dynamicly sized section.
+     */
+    getDynamicSectionIndex() {
+        return this.state.dynamicSection !== undefined ? this.state.dynamicSection : 0;
+    }
+    /**
+     * Method converts passed positions to section position object.
+     *
+     * @param {UISectionSize} section Section size.
+     * @returns Position object.
+     */
+    getSectionPosition(section) {
+        return { start: section.start || 0, end: section.end || 0 };
+    }
+    /**
+     * Method calculates spare size for passed section.
+     *
+     * @param {SizeCalculationInfo} origin Section size.
+     * @param {SizeCalculationInfo[]} sizes All section sizes.
+     * @returns {number} Spare size.
+     */
+    getSpareSize(origin, sizes) {
+        let increaseSize = 0;
+        let target = origin.minSize - origin.size;
+        for (const info of sizes) {
+            if (info === origin) {
+                continue;
+            }
+            if (info.spareSize > 0) {
+                const useSize = Math.min(info.spareSize, target);
+                // Update targets
+                increaseSize += useSize;
+                info.spareSize -= useSize;
+                info.size -= useSize;
+                target -= useSize;
+            }
+            if (target <= 0) {
+                // Desireable target meet requirement
+                break;
+            }
+        }
+        return increaseSize;
+    }
+    /**
+     * Method converts SizeCalculationInfo into UISectionSize before applying sizes to state.
+     *
+     * @param {SizeCalculationInfo[]} sizes Section sizes.
+     * @returns {UISectionSize[]} Section sizes applyable for state.
+     */
+    calculateSectionSizes(sizes) {
+        // Calculate sizes
+        for (const section of sizes) {
+            if (section.size < section.minSize) {
+                const diff = this.getSpareSize(section, sizes);
+                if (diff) {
+                    section.size += diff;
+                }
+            }
+        }
+        // Apply sizes to state
+        const stateSizes = [];
+        for (let i = 0; i < sizes.length; i++) {
+            const sectionSize = {
+                percentage: false
+            };
+            const current = sizes[i];
+            const next = sizes[i + 1];
+            const right = next ? next.size : 0;
+            if (i > 0) {
+                sectionSize.size = current.size;
+                sectionSize.start = undefined;
+            }
+            else {
+                sectionSize.start = 0;
+            }
+            sectionSize.end = right;
+            stateSizes.push(sectionSize);
+        }
+        return stateSizes;
+    }
+    /**
+     * Method recalculates "start" and "end" position based on size property.
+     *
+     * @param {UISectionSize[]} sizes Section sizes.
+     */
+    recalculatePositions(sizes) {
+        // Recalculate positions - START
+        let start = 0;
+        sizes.forEach((section) => {
+            section.start = start;
+            // Next start
+            start += section.size || 0;
+        });
+        // Recalculate positions - END
+        let end = 0;
+        for (let i = sizes.length - 1; i >= 0; i--) {
+            sizes[i].end = end;
+            // Next start
+            end += sizes[i].size || 0;
+        }
+    }
+    /**
+     * Method returns size of sections container.
+     *
+     * @returns {UISectionSize[]} Size of sections container.
+     */
+    getRootSize() {
+        const rootDom = this.rootRef.current;
+        return rootDom?.getBoundingClientRect()[this.sizeProperty] || 0;
+    }
+    /**
+     * @returns {React.ReactElement}
+     */
+    render() {
+        const sections = [];
+        let visibleSections = 0;
+        for (let i = 0; i < this.props.children.length; i++) {
+            const childNode = this.props.children[i];
+            const isSectionHidden = !UISections.isSectionVisible(childNode);
+            if (!isSectionHidden) {
+                visibleSections++;
+            }
+            const section = this.getSection(i, isSectionHidden);
+            if (section) {
+                sections.push(section);
+            }
+        }
+        return (react_1.default.createElement("div", { ref: this.rootRef, className: `sections ${this.getClassNames(visibleSections === 1)}`, style: {
+                ...(this.props.height && { height: this.props.height })
+            } }, sections));
+    }
+}
+exports.UISections = UISections;
+UISections.Section = UISection_1.UISection;
 //# sourceMappingURL=UISections.js.map