import { useRef } from 'react';
import { NarrowWidePage } from '@pega/cosmos-react-core';
import { ConfigurableLayout, useTrackWrappedRegions } from '@pega/cosmos-react-work';
import { AppShellDemo as AppShell } from '../../core/AppShell/AppShell.stories';
import { regionAItems, regionBItems } from './ConfigurableLayout.mocks';
export default {
    title: 'Work/ConfigurableLayout',
    component: ConfigurableLayout,
    parameters: {
        layout: 'fullscreen'
    }
};
export const ConfigurableLayoutInPageRegions = () => {
    const regionElArray = useRef(new Array(2).fill(null));
    const { containerRef, regionWrappedStates } = useTrackWrappedRegions(regionElArray.current);
    return (<AppShell main={<NarrowWidePage regionsRef={containerRef} a={<ConfigurableLayout ref={(el) => {
                    if (el)
                        regionElArray.current[0] = el;
                }} arrangement={{ size: 'narrow', hasWrapped: regionWrappedStates[0] }} items={regionAItems}/>} b={<ConfigurableLayout ref={(el) => {
                    if (el)
                        regionElArray.current[1] = el;
                }} arrangement={{ size: 'main', hasWrapped: regionWrappedStates[1] }} items={regionBItems}/>} title='Configurable Layout in Narrow Wide Page'/>}/>);
};
//# sourceMappingURL=ConfigurableLayout.stories.jsx.map