@pega/cosmos-react-demos 6.6.0 → 6.6.2

package/jsx/core/Modal/Modal.stories.jsx

@@ -1,332 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { Button, Flex, Input, Modal, Text, useModalManager, useModalContext, useToaster, cap } from '@pega/cosmos-react-core';
-import { loadingTimeoutMS } from '../Progress/Progress.mocks';
-import { getContent } from './Modal.mocks';
-export default {
-    title: 'Core/Modal',
-    component: Modal,
-    parameters: {
-        layout: 'centered'
-    },
-    args: {
-        autoWidth: false,
-        stretch: false,
-        center: false,
-        onDismiss: action('Clicked dismiss button'),
-        onMinimize: action('Clicked minimize button'),
-        onActivate: action('Activates minimized modal'),
-        onRequestDismiss: action('onRequestDismiss called'),
-        onRequestMinimize: action('onRequestMinimize called'),
-        onRequestActivate: action('onRequestActivate called'),
-        onRequestDock: action('onRequestActivate called')
-    },
-    argTypes: {
-        autoWidth: { control: { type: 'boolean' } },
-        stretch: { control: { type: 'boolean' } },
-        center: { control: { type: 'boolean' } },
-        onDismiss: { table: { disable: true } },
-        onMinimize: { table: { disable: true } },
-        onActivate: { table: { disable: true } },
-        onRequestDismiss: { table: { disable: true } },
-        onRequestMinimize: { table: { disable: true } },
-        onRequestActivate: { table: { disable: true } },
-        onRequestDock: { table: { disable: true } }
-    }
-};
-export const ModalDemo = (args) => {
-    const MyModal = () => {
-        return (<Modal heading='This is the Modal heading' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-        <Text>This is the content of the Modal.</Text>
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        return (<Button onClick={() => {
-                create(MyModal);
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-export const ModalUpdates = (args) => {
-    const MyModal = props => {
-        const { update } = useModalContext();
-        const actions = (<Button variant='primary' disabled={props.disableButton} onClick={() => {
-                update({
-                    content: 'This Modal has been updated a second time from within the Modal!'
-                });
-            }}>
-        Update Modal
-      </Button>);
-        return (<Modal heading={props.heading} actions={actions} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-        <Text>{props.content}</Text>
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        const modalMethods = useRef();
-        const openModal = () => {
-            modalMethods.current = create(MyModal, {
-                heading: 'This is the Modal heading',
-                content: 'This Modal will automatically update in a few seconds.',
-                disableButton: true
-            });
-            setTimeout(() => {
-                modalMethods.current?.update({
-                    heading: 'This is the updated Modal heading',
-                    content: 'This Modal has been updated from its parent!',
-                    disableButton: false
-                });
-            }, 2000);
-        };
-        return <Button onClick={openModal}>Open Modal</Button>;
-    };
-    return <ModalButton />;
-};
-export const AlertModal = (args) => {
-    const MyAlert = (props) => {
-        const { dismiss } = useModalContext();
-        const actions = useMemo(() => {
-            return (<>
-          <Button onClick={dismiss}>No</Button>
-          <Button variant='primary' onClick={() => {
-                    dismiss();
-                    props.closeInitialModal();
-                }}>
-            Yes
-          </Button>
-        </>);
-        }, [dismiss]);
-        return (<Modal heading='You have unsaved changes!' actions={actions} center={args.center} stretch={args.stretch}>
-        <Text>Are you sure you want to close without saving?</Text>
-      </Modal>);
-    };
-    const MyModal = () => {
-        const [name, setName] = useState('');
-        const { create } = useModalManager();
-        const { dismiss } = useModalContext();
-        const actions = useMemo(() => {
-            return (<>
-          <Button onClick={() => {
-                    if (name !== '') {
-                        create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
-                    }
-                    else {
-                        dismiss();
-                    }
-                }}>
-            Close
-          </Button>
-          <Button variant='primary' onClick={dismiss} disabled={name === ''}>
-            Save
-          </Button>
-        </>);
-        }, [dismiss, name]);
-        const onNameChange = (e) => {
-            setName(e.target.value);
-        };
-        return (<Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch} onRequestDismiss={() => {
-                if (name !== '') {
-                    create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
-                    return false;
-                }
-            }}>
-        <Input label='Name' name='name' onChange={onNameChange} onKeyDown={args.onKeyDown} value={name} required/>
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        return (<Button onClick={() => {
-                create(MyModal, undefined, {
-                    onDismiss: args.onDismiss
-                });
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-AlertModal.args = {
-    onKeyDown: action("Called input's onKeyDown")
-};
-AlertModal.argTypes = {
-    onKeyDown: { table: { disable: true } }
-};
-export const ProgressState = () => {
-    const LoadingStateModal = () => {
-        const { dismiss } = useModalContext();
-        const [transientState, setTransientState] = useState('loading');
-        const actions = transientState === 'loading' ? null : (<>
-          <Button disabled={!!transientState} onClick={() => {
-                if (transientState !== 'submitting') {
-                    dismiss();
-                }
-            }}>
-            Cancel
-          </Button>
-          <Button disabled={!!transientState} variant='primary' onClick={() => {
-                setTransientState('submitting');
-            }}>
-            Submit
-          </Button>
-        </>);
-        useEffect(() => {
-            let timerID;
-            if (transientState === 'loading' || transientState === 'submitting') {
-                timerID = window.setTimeout(() => {
-                    if (transientState === 'loading') {
-                        setTransientState(null);
-                    }
-                    else {
-                        dismiss();
-                    }
-                }, loadingTimeoutMS);
-            }
-            return () => {
-                window.clearTimeout(timerID);
-            };
-        }, [transientState]);
-        return (<Modal progress={useMemo(() => {
-                if (transientState) {
-                    return {
-                        message: `${cap(transientState)}…`
-                    };
-                }
-            }, [transientState])} heading='Modal progress demo' actions={actions} onRequestDismiss={() => transientState !== 'submitting'}>
-        {transientState !== 'loading' && (<Flex container={{ direction: 'column', gap: 2 }}>
-            {Array.from({ length: 5 }, (_, i) => (<Input key={i} label={`Field-${i + 1}`}/>))}
-          </Flex>)}
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        return (<Button onClick={() => {
-                create(LoadingStateModal);
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-export const MinimizableModal = (args) => {
-    const [count, setCount] = useState(1);
-    const { create } = useModalManager();
-    const NewModal = () => {
-        return (<Modal heading={`Another modal from Modal #${count}`} autoWidth={args.autoWidth}>
-        <Text>
-          This minimizable modal is triggered from an existing open modal - Modal #{count}.
-        </Text>
-      </Modal>);
-    };
-    const MyModal = () => {
-        return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} actions={<Button variant='secondary' onClick={() => {
-                    create(NewModal, undefined, {
-                        minimizable: true,
-                        onDismiss: args.onDismiss,
-                        onMinimize: args.onMinimize,
-                        onActivate: args.onActivate
-                    });
-                }}>
-            Create modal
-          </Button>} center={args.center} stretch={args.stretch} onRequestDismiss={args.onRequestDismiss} onRequestMinimize={args.onRequestMinimize} onRequestActivate={args.onRequestActivate}>
-        <Text>This Modal can be minimized by clicking the minimize button above.</Text>
-      </Modal>);
-    };
-    const ModalButton = () => {
-        return (<Button onClick={() => {
-                setCount(count + 1);
-                create(MyModal, undefined, {
-                    minimizable: true,
-                    id: `Modal #${count}`,
-                    onDismiss: args.onDismiss,
-                    onMinimize: args.onMinimize,
-                    onActivate: args.onActivate,
-                    defaultMinimized: args.defaultMinimized
-                });
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-export const DockedModal = (args) => {
-    const [count, setCount] = useState(1);
-    const MyModal = () => {
-        return (<Modal heading={`Modal #${count}`} onRequestDock={args.onRequestDock}>
-        <Text>This Modal can be minimized by clicking the minimize button above.</Text>
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        return (<Button onClick={() => {
-                setCount(count + 1);
-                create(MyModal, undefined, {
-                    minimizable: true,
-                    maximizable: true,
-                    dockable: true
-                });
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-export const AutoWidthModalContent = (args) => {
-    const { push } = useToaster();
-    const MyModal = ({ content }) => {
-        const { dismiss } = useModalContext();
-        return (<Modal heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`} autoWidth={args.autoWidth} actions={args.content.includes('form') || args.content === 'random' ? (<>
-              <Button name='Cancel' variant='secondary' onClick={() => {
-                    dismiss();
-                    push({ content: 'Form cancelled!' });
-                }}>
-                Cancel
-              </Button>
-              <Button name='Submit' variant='primary' onClick={() => {
-                    dismiss();
-                    push({ content: 'Form submitted!' });
-                }}>
-                Submit
-              </Button>
-            </>) : undefined}>
-        {content}
-      </Modal>);
-    };
-    const ModalButton = () => {
-        const { create } = useModalManager();
-        return (<Button onClick={() => {
-                create(MyModal, {
-                    content: getContent(args.content, args.formColumnWidthFixed)
-                });
-            }}>
-        Open Modal
-      </Button>);
-    };
-    return <ModalButton />;
-};
-AutoWidthModalContent.args = {
-    autoWidth: true,
-    content: 'short text',
-    formColumnWidthFixed: false
-};
-AutoWidthModalContent.argTypes = {
-    stretch: { table: { disable: true } },
-    center: { table: { disable: true } },
-    content: {
-        options: [
-            'short text',
-            'long text',
-            'image',
-            'table',
-            'form (1 column)',
-            'form (2 column)',
-            'form (3 column)',
-            'random'
-        ],
-        control: { type: 'select' }
-    },
-    formColumnWidthFixed: { control: { type: 'boolean' } }
-};
-//# sourceMappingURL=Modal.stories.jsx.map

package/jsx/core/Modal/Modal.stories.jsx.map

@@ -1 +0,0 @@
-{"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,eAAe,EACf,eAAe,EACf,UAAU,EACV,GAAG,EACJ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,eAAe;IACb,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,KAAK;IAChB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,KAAK;QACd,MAAM,EAAE,KAAK;QACb,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC;QAC3C,UAAU,EAAE,MAAM,CAAC,yBAAyB,CAAC;QAC7C,UAAU,EAAE,MAAM,CAAC,2BAA2B,CAAC;QAC/C,gBAAgB,EAAE,MAAM,CAAC,yBAAyB,CAAC;QACnD,iBAAiB,EAAE,MAAM,CAAC,0BAA0B,CAAC;QACrD,iBAAiB,EAAE,MAAM,CAAC,0BAA0B,CAAC;QACrD,aAAa,EAAE,MAAM,CAAC,0BAA0B,CAAC;KAClD;IACD,QAAQ,EAAE;QACR,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC3C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACzC,MAAM,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QACxC,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QACvC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QACxC,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QACxC,gBAAgB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QAC9C,iBAAiB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QAC/C,iBAAiB,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;QAC/C,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;KAC5C;CACM,CAAC;AAoBV,MAAM,CAAC,MAAM,SAAS,GAA4B,CAAC,IAAoB,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,2BAA2B,CACnC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAEtB;QAAA,CAAC,IAAI,CAAC,iCAAiC,EAAE,IAAI,CAC/C;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,CAAC,CAAC;YAClB,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA4B,CAAC,IAAoB,EAAE,EAAE;IAO5E,MAAM,OAAO,GAA0B,KAAK,CAAC,EAAE;QAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,MAAM,OAAO,GAAG,CACd,CAAC,MAAM,CACL,OAAO,CAAC,SAAS,CACjB,QAAQ,CAAC,CAAC,KAAK,CAAC,aAAa,CAAC,CAC9B,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,MAAM,CAAC;oBACL,OAAO,EAAE,kEAAkE;iBAC5E,CAAC,CAAC;YACL,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;QAEF,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CACvB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAEtB;QAAA,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,IAAI,CAC7B;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QACrC,MAAM,YAAY,GAAG,MAAM,EAAmC,CAAC;QAE/D,MAAM,SAAS,GAAG,GAAG,EAAE;YACrB,YAAY,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,EAAE;gBACrC,OAAO,EAAE,2BAA2B;gBACpC,OAAO,EAAE,wDAAwD;gBACjE,aAAa,EAAE,IAAI;aACpB,CAAC,CAAC;YAEH,UAAU,CAAC,GAAG,EAAE;gBACd,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC;oBAC3B,OAAO,EAAE,mCAAmC;oBAC5C,OAAO,EAAE,8CAA8C;oBACvD,aAAa,EAAE,KAAK;iBACrB,CAAC,CAAC;YACL,CAAC,EAAE,IAAI,CAAC,CAAC;QACX,CAAC,CAAC;QAEF,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;IACzD,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAiC,CAAC,IAAyB,EAAE,EAAE;IACpF,MAAM,OAAO,GAAG,CAAC,KAAwC,EAAE,EAAE;QAC3D,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;QAEtC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;YAC3B,OAAO,CACL,EACE;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,MAAM,CACpC;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAC;oBACV,KAAK,CAAC,iBAAiB,EAAE,CAAC;gBAC5B,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CAAC;QACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;QAEd,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,2BAA2B,CACnC,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAEtB;QAAA,CAAC,IAAI,CAAC,8CAA8C,EAAE,IAAI,CAC5D;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;QACrC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QACrC,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;QAEtC,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;YAC3B,OAAO,CACL,EACE;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,IAAI,IAAI,KAAK,EAAE,EAAE;wBACf,MAAM,CAAC,OAAO,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;qBAClE;yBAAM;wBACL,OAAO,EAAE,CAAC;qBACX;gBACH,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,KAAK,EAAE,CAAC,CAChE;;UACF,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CAAC;QACJ,CAAC,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;QAEpB,MAAM,YAAY,GAAG,CAAC,CAAgC,EAAE,EAAE;YACxD,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAC;QAEF,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,6DAA6D,CACrE,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,gBAAgB,CAAC,CAAC,GAAG,EAAE;gBACrB,IAAI,IAAI,KAAK,EAAE,EAAE;oBACf,MAAM,CAAC,OAAO,EAAE,EAAE,iBAAiB,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;oBACjE,OAAO,KAAK,CAAC;iBACd;YACH,CAAC,CAAC,CAEF;QAAA,CAAC,KAAK,CACJ,KAAK,CAAC,MAAM,CACZ,IAAI,CAAC,MAAM,CACX,QAAQ,CAAC,CAAC,YAAY,CAAC,CACvB,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,KAAK,CAAC,CAAC,IAAI,CAAC,CACZ,QAAQ,EAEZ;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE;oBACzB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAC;YACL,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,UAAU,CAAC,IAAI,GAAG;IAChB,SAAS,EAAE,MAAM,CAAC,0BAA0B,CAAC;CAC9C,CAAC;AAEF,UAAU,CAAC,QAAQ,GAAG;IACpB,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACxC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAY,GAAG,EAAE;IACzC,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;QAEtC,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAClD,SAAS,CACV,CAAC;QAEF,MAAM,OAAO,GACX,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpC,EACE;UAAA,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAC3B,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,IAAI,cAAc,KAAK,YAAY,EAAE;oBACnC,OAAO,EAAE,CAAC;iBACX;YACH,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CACL,QAAQ,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAC3B,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,iBAAiB,CAAC,YAAY,CAAC,CAAC;YAClC,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CACV;QAAA,GAAG,CACJ,CAAC;QAEJ,SAAS,CAAC,GAAG,EAAE;YACb,IAAI,OAAe,CAAC;YAEpB,IAAI,cAAc,KAAK,SAAS,IAAI,cAAc,KAAK,YAAY,EAAE;gBACnE,OAAO,GAAG,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE;oBAC/B,IAAI,cAAc,KAAK,SAAS,EAAE;wBAChC,iBAAiB,CAAC,IAAI,CAAC,CAAC;qBACzB;yBAAM;wBACL,OAAO,EAAE,CAAC;qBACX;gBACH,CAAC,EAAE,gBAAgB,CAAC,CAAC;aACtB;YAED,OAAO,GAAG,EAAE;gBACV,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC/B,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;QAErB,OAAO,CACL,CAAC,KAAK,CACJ,QAAQ,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE;gBACrB,IAAI,cAAc,EAAE;oBAClB,OAAO;wBACL,OAAO,EAAE,GAAG,GAAG,CAAC,cAAc,CAAC,GAAG;qBACnC,CAAC;iBACH;YACH,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,CACrB,OAAO,CAAC,qBAAqB,CAC7B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,cAAc,KAAK,YAAY,CAAC,CAExD;QAAA,CAAC,cAAc,KAAK,SAAS,IAAI,CAC/B,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;YAAA,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACnC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,EAAG,CAC3C,CAAC,CACJ;UAAA,EAAE,IAAI,CAAC,CACR,CACH;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,MAAM,CAAC,iBAAiB,CAAC,CAAC;YAC5B,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAA4B,CAAC,IAAoB,EAAE,EAAE;IAChF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;IACrC,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,6BAA6B,KAAK,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC9E;QAAA,CAAC,IAAI,CACH;mFAAyE,CAAC,KAAK,CAAC;QAClF,EAAE,IAAI,CACR;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IACF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CAC3B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CACN,CAAC,MAAM,CACL,OAAO,CAAC,WAAW,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,MAAM,CAAC,QAAQ,EAAE,SAAS,EAAE;wBAC1B,WAAW,EAAE,IAAI;wBACjB,SAAS,EAAE,IAAI,CAAC,SAAS;wBACzB,UAAU,EAAE,IAAI,CAAC,UAAU;wBAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;qBAC5B,CAAC,CAAC;gBACL,CAAC,CAAC,CAEF;;UACF,EAAE,MAAM,CAAC,CACV,CACD,MAAM,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CACpB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,gBAAgB,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CACxC,iBAAiB,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAC1C,iBAAiB,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAE1C;QAAA,CAAC,IAAI,CAAC,kEAAkE,EAAE,IAAI,CAChF;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACpB,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE;oBACzB,WAAW,EAAE,IAAI;oBACjB,EAAE,EAAE,UAAU,KAAK,EAAE;oBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;oBACzB,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;iBACxC,CAAC,CAAC;YACL,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA4B,CAAC,IAAoB,EAAE,EAAE;IAC3E,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEtC,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,OAAO,CACL,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,UAAU,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CACnE;QAAA,CAAC,IAAI,CAAC,kEAAkE,EAAE,IAAI,CAChF;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,QAAQ,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;gBACpB,MAAM,CAAC,OAAO,EAAE,SAAS,EAAE;oBACzB,WAAW,EAAE,IAAI;oBACjB,WAAW,EAAE,IAAI;oBACjB,QAAQ,EAAE,IAAI;iBACf,CAAC,CAAC;YACL,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAUF,MAAM,CAAC,MAAM,qBAAqB,GAAwC,CACxE,IAAgC,EAChC,EAAE;IACF,MAAM,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,CAAC;IAE9B,MAAM,OAAO,GAAG,CAAC,EAAE,OAAO,EAA0B,EAAE,EAAE;QACtD,MAAM,EAAE,OAAO,EAAE,GAAG,eAAe,EAAE,CAAC;QAEtC,OAAO,CACL,CAAC,KAAK,CACJ,OAAO,CAAC,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,YAAY,CAAC,CAClE,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CACN,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3D,EACE;cAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,WAAW,CACnB,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;gBACvC,CAAC,CAAC,CAEF;;cACF,EAAE,MAAM,CACR;cAAA,CAAC,MAAM,CACL,IAAI,CAAC,QAAQ,CACb,OAAO,CAAC,SAAS,CACjB,OAAO,CAAC,CAAC,GAAG,EAAE;oBACZ,OAAO,EAAE,CAAC;oBACV,IAAI,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,CAAC,CAAC;gBACvC,CAAC,CAAC,CAEF;;cACF,EAAE,MAAM,CACV;YAAA,GAAG,CACJ,CAAC,CAAC,CAAC,SAAS,CACd,CAED;QAAA,CAAC,OAAO,CACV;MAAA,EAAE,KAAK,CAAC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAC;QAErC,OAAO,CACL,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,GAAG,EAAE;gBACZ,MAAM,CAAC,OAAO,EAAE;oBACd,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,oBAAoB,CAAC;iBAC7D,CAAC,CAAC;YACL,CAAC,CAAC,CAEF;;MACF,EAAE,MAAM,CAAC,CACV,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CAAC,WAAW,CAAC,AAAD,EAAG,CAAC;AACzB,CAAC,CAAC;AAEF,qBAAqB,CAAC,IAAI,GAAG;IAC3B,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,YAAY;IACrB,oBAAoB,EAAE,KAAK;CAC5B,CAAC;AAEF,qBAAqB,CAAC,QAAQ,GAAG;IAC/B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACrC,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;IACpC,OAAO,EAAE;QACP,OAAO,EAAE;YACP,YAAY;YACZ,WAAW;YACX,OAAO;YACP,OAAO;YACP,iBAAiB;YACjB,iBAAiB;YACjB,iBAAiB;YACjB,QAAQ;SACT;QACD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,oBAAoB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CACvD,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useEffect, useMemo, useRef, useState } from 'react';\nimport type { FC, ChangeEvent, ReactNode } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Flex,\n  Input,\n  Modal,\n  Text,\n  useModalManager,\n  useModalContext,\n  useToaster,\n  cap\n} from '@pega/cosmos-react-core';\nimport type { ModalMethods, ModalProps } from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { getContent } from './Modal.mocks';\nimport type { ContentTypes } from './Modal.mocks';\n\nexport default {\n  title: 'Core/Modal',\n  component: Modal,\n  parameters: {\n    layout: 'centered'\n  },\n  args: {\n    autoWidth: false,\n    stretch: false,\n    center: false,\n    onDismiss: action('Clicked dismiss button'),\n    onMinimize: action('Clicked minimize button'),\n    onActivate: action('Activates minimized modal'),\n    onRequestDismiss: action('onRequestDismiss called'),\n    onRequestMinimize: action('onRequestMinimize called'),\n    onRequestActivate: action('onRequestActivate called'),\n    onRequestDock: action('onRequestActivate called')\n  },\n  argTypes: {\n    autoWidth: { control: { type: 'boolean' } },\n    stretch: { control: { type: 'boolean' } },\n    center: { control: { type: 'boolean' } },\n    onDismiss: { table: { disable: true } },\n    onMinimize: { table: { disable: true } },\n    onActivate: { table: { disable: true } },\n    onRequestDismiss: { table: { disable: true } },\n    onRequestMinimize: { table: { disable: true } },\n    onRequestActivate: { table: { disable: true } },\n    onRequestDock: { table: { disable: true } }\n  }\n} as Meta;\n\ninterface ModalDemoProps {\n  autoWidth: ModalProps['autoWidth'];\n  center: ModalProps['center'];\n  stretch: ModalProps['stretch'];\n  defaultMinimized?: boolean;\n  onDismiss?: (id: string) => void;\n  onMinimize?: (id: string) => void;\n  onActivate?: (id: string) => void;\n  onRequestDismiss?: () => boolean;\n  onRequestMinimize?: () => boolean;\n  onRequestActivate?: () => boolean;\n  onRequestDock?: () => boolean;\n}\n\ninterface AlertModalDemoProps extends ModalDemoProps {\n  onKeyDown?: (e: KeyboardEvent) => void;\n}\n\nexport const ModalDemo: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const MyModal = () => {\n    return (\n      <Modal\n        heading='This is the Modal heading'\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>This is the content of the Modal.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal);\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const ModalUpdates: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  interface ModalUpdatesProps {\n    content: string;\n    disableButton: boolean;\n    heading: string;\n  }\n\n  const MyModal: FC<ModalUpdatesProps> = props => {\n    const { update } = useModalContext();\n\n    const actions = (\n      <Button\n        variant='primary'\n        disabled={props.disableButton}\n        onClick={() => {\n          update({\n            content: 'This Modal has been updated a second time from within the Modal!'\n          });\n        }}\n      >\n        Update Modal\n      </Button>\n    );\n\n    return (\n      <Modal\n        heading={props.heading}\n        actions={actions}\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>{props.content}</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n    const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n    const openModal = () => {\n      modalMethods.current = create(MyModal, {\n        heading: 'This is the Modal heading',\n        content: 'This Modal will automatically update in a few seconds.',\n        disableButton: true\n      });\n\n      setTimeout(() => {\n        modalMethods.current?.update({\n          heading: 'This is the updated Modal heading',\n          content: 'This Modal has been updated from its parent!',\n          disableButton: false\n        });\n      }, 2000);\n    };\n\n    return <Button onClick={openModal}>Open Modal</Button>;\n  };\n\n  return <ModalButton />;\n};\n\nexport const AlertModal: StoryFn<AlertModalDemoProps> = (args: AlertModalDemoProps) => {\n  const MyAlert = (props: { closeInitialModal: () => void }) => {\n    const { dismiss } = useModalContext();\n\n    const actions = useMemo(() => {\n      return (\n        <>\n          <Button onClick={dismiss}>No</Button>\n          <Button\n            variant='primary'\n            onClick={() => {\n              dismiss();\n              props.closeInitialModal();\n            }}\n          >\n            Yes\n          </Button>\n        </>\n      );\n    }, [dismiss]);\n\n    return (\n      <Modal\n        heading='You have unsaved changes!'\n        actions={actions}\n        center={args.center}\n        stretch={args.stretch}\n      >\n        <Text>Are you sure you want to close without saving?</Text>\n      </Modal>\n    );\n  };\n\n  const MyModal = () => {\n    const [name, setName] = useState('');\n    const { create } = useModalManager();\n    const { dismiss } = useModalContext();\n\n    const actions = useMemo(() => {\n      return (\n        <>\n          <Button\n            onClick={() => {\n              if (name !== '') {\n                create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n              } else {\n                dismiss();\n              }\n            }}\n          >\n            Close\n          </Button>\n          <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n            Save\n          </Button>\n        </>\n      );\n    }, [dismiss, name]);\n\n    const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n      setName(e.target.value);\n    };\n\n    return (\n      <Modal\n        actions={actions}\n        heading='Close the Modal without saving any data to invoke the alert'\n        autoWidth={args.autoWidth}\n        center={args.center}\n        stretch={args.stretch}\n        onRequestDismiss={() => {\n          if (name !== '') {\n            create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n            return false;\n          }\n        }}\n      >\n        <Input\n          label='Name'\n          name='name'\n          onChange={onNameChange}\n          onKeyDown={args.onKeyDown}\n          value={name}\n          required\n        />\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal, undefined, {\n            onDismiss: args.onDismiss\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nAlertModal.args = {\n  onKeyDown: action(\"Called input's onKeyDown\")\n};\n\nAlertModal.argTypes = {\n  onKeyDown: { table: { disable: true } }\n};\n\nexport const ProgressState: StoryFn = () => {\n  const LoadingStateModal = () => {\n    const { dismiss } = useModalContext();\n\n    const [transientState, setTransientState] = useState<'loading' | 'submitting' | null>(\n      'loading'\n    );\n\n    const actions =\n      transientState === 'loading' ? null : (\n        <>\n          <Button\n            disabled={!!transientState}\n            onClick={() => {\n              if (transientState !== 'submitting') {\n                dismiss();\n              }\n            }}\n          >\n            Cancel\n          </Button>\n          <Button\n            disabled={!!transientState}\n            variant='primary'\n            onClick={() => {\n              setTransientState('submitting');\n            }}\n          >\n            Submit\n          </Button>\n        </>\n      );\n\n    useEffect(() => {\n      let timerID: number;\n\n      if (transientState === 'loading' || transientState === 'submitting') {\n        timerID = window.setTimeout(() => {\n          if (transientState === 'loading') {\n            setTransientState(null);\n          } else {\n            dismiss();\n          }\n        }, loadingTimeoutMS);\n      }\n\n      return () => {\n        window.clearTimeout(timerID);\n      };\n    }, [transientState]);\n\n    return (\n      <Modal\n        progress={useMemo(() => {\n          if (transientState) {\n            return {\n              message: `${cap(transientState)}…`\n            };\n          }\n        }, [transientState])}\n        heading='Modal progress demo'\n        actions={actions}\n        onRequestDismiss={() => transientState !== 'submitting'}\n      >\n        {transientState !== 'loading' && (\n          <Flex container={{ direction: 'column', gap: 2 }}>\n            {Array.from({ length: 5 }, (_, i) => (\n              <Input key={i} label={`Field-${i + 1}`} />\n            ))}\n          </Flex>\n        )}\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(LoadingStateModal);\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const MinimizableModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n  const { create } = useModalManager();\n  const NewModal = () => {\n    return (\n      <Modal heading={`Another modal from Modal #${count}`} autoWidth={args.autoWidth}>\n        <Text>\n          This minimizable modal is triggered from an existing open modal - Modal #{count}.\n        </Text>\n      </Modal>\n    );\n  };\n  const MyModal = () => {\n    return (\n      <Modal\n        heading={`Modal #${count}`}\n        autoWidth={args.autoWidth}\n        actions={\n          <Button\n            variant='secondary'\n            onClick={() => {\n              create(NewModal, undefined, {\n                minimizable: true,\n                onDismiss: args.onDismiss,\n                onMinimize: args.onMinimize,\n                onActivate: args.onActivate\n              });\n            }}\n          >\n            Create modal\n          </Button>\n        }\n        center={args.center}\n        stretch={args.stretch}\n        onRequestDismiss={args.onRequestDismiss}\n        onRequestMinimize={args.onRequestMinimize}\n        onRequestActivate={args.onRequestActivate}\n      >\n        <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    return (\n      <Button\n        onClick={() => {\n          setCount(count + 1);\n          create(MyModal, undefined, {\n            minimizable: true,\n            id: `Modal #${count}`,\n            onDismiss: args.onDismiss,\n            onMinimize: args.onMinimize,\n            onActivate: args.onActivate,\n            defaultMinimized: args.defaultMinimized\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const DockedModal: StoryFn<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n\n  const MyModal = () => {\n    return (\n      <Modal heading={`Modal #${count}`} onRequestDock={args.onRequestDock}>\n        <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          setCount(count + 1);\n          create(MyModal, undefined, {\n            minimizable: true,\n            maximizable: true,\n            dockable: true\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\ninterface AutoWidthModalContentProps {\n  autoWidth: boolean;\n  content: ContentTypes;\n  formColumnWidthFixed: boolean;\n  stretch?: never;\n  center?: never;\n}\n\nexport const AutoWidthModalContent: StoryFn<AutoWidthModalContentProps> = (\n  args: AutoWidthModalContentProps\n) => {\n  const { push } = useToaster();\n\n  const MyModal = ({ content }: { content: ReactNode }) => {\n    const { dismiss } = useModalContext();\n\n    return (\n      <Modal\n        heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n        autoWidth={args.autoWidth}\n        actions={\n          args.content.includes('form') || args.content === 'random' ? (\n            <>\n              <Button\n                name='Cancel'\n                variant='secondary'\n                onClick={() => {\n                  dismiss();\n                  push({ content: 'Form cancelled!' });\n                }}\n              >\n                Cancel\n              </Button>\n              <Button\n                name='Submit'\n                variant='primary'\n                onClick={() => {\n                  dismiss();\n                  push({ content: 'Form submitted!' });\n                }}\n              >\n                Submit\n              </Button>\n            </>\n          ) : undefined\n        }\n      >\n        {content}\n      </Modal>\n    );\n  };\n\n  const ModalButton = () => {\n    const { create } = useModalManager();\n\n    return (\n      <Button\n        onClick={() => {\n          create(MyModal, {\n            content: getContent(args.content, args.formColumnWidthFixed)\n          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nAutoWidthModalContent.args = {\n  autoWidth: true,\n  content: 'short text',\n  formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n  stretch: { table: { disable: true } },\n  center: { table: { disable: true } },\n  content: {\n    options: [\n      'short text',\n      'long text',\n      'image',\n      'table',\n      'form (1 column)',\n      'form (2 column)',\n      'form (3 column)',\n      'random'\n    ],\n    control: { type: 'select' }\n  },\n  formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts

@@ -1,70 +0,0 @@
-/// <reference types="react" />
-import type { BannerMessage } from '@pega/cosmos-react-core';
-import type MultiStepFormProps from '@pega/cosmos-react-core/lib/components/MultiStepForm/MultiStepForm.types';
-export interface MultiStepFormDemoProps {
-    heading?: MultiStepFormProps['heading'];
-    stepIndicator?: MultiStepFormProps['stepIndicator'];
-}
-export interface ReducerAction {
-    type: string;
-    payload?: any;
-}
-export interface DemoMultiStepState {
-    formData: DemoFormDataType;
-    formErrors: DemoFormErrorsType;
-    currentStepIndex: number;
-    numSteps: number;
-    cancelled: boolean;
-    finished: boolean;
-}
-interface DemoFormDataType {
-    [key: string]: string | boolean | undefined;
-    firstName?: string;
-    lastName?: string;
-    currentTitle?: string;
-    currentCompany?: string;
-    salaryRequested?: string;
-    experienceLevel?: string;
-    priorityOne?: string;
-    priorityTwo?: string;
-    priorityThree?: string;
-    interviewNotes?: string;
-    additionalInterview?: boolean;
-    nextInterviewer?: string;
-    salaryRequestReview?: string;
-    cultureFit?: string;
-    finalRecommendation?: string;
-    recommendationComments?: string;
-}
-interface DemoFormErrorsType {
-    [field: string]: BannerMessage;
-}
-interface MockFormArgs {
-    formData: DemoFormDataType;
-    formErrors: DemoFormErrorsType;
-    dispatch: (value: {
-        type: string;
-        payload?: any;
-    }) => void;
-}
-interface FieldData {
-    name: string;
-    label: string;
-}
-export declare const stepFields: FieldData[][];
-export declare const initialState: DemoMultiStepState;
-export declare const reducer: (state: DemoMultiStepState, action: ReducerAction) => DemoMultiStepState | {
-    currentStepIndex: any;
-    formErrors: {};
-    formData: DemoFormDataType;
-    numSteps: number;
-    cancelled: boolean;
-    finished: boolean;
-};
-export declare const ApplicantDetailsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => import("react").JSX.Element;
-export declare const InterviewNotesFields: ({ formData, formErrors, dispatch }: MockFormArgs) => import("react").JSX.Element;
-export declare const NextInterviewFields: ({ formData, formErrors, dispatch }: MockFormArgs) => import("react").JSX.Element;
-export declare const RecommendationsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => import("react").JSX.Element;
-export declare const MultiStepModal: (args: MultiStepFormDemoProps) => import("react").JSX.Element;
-export {};
-//# sourceMappingURL=MultiStepForm.mocks.d.ts.map

package/jsx/core/MultiStepForm/MultiStepForm.mocks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAqBA,OAAO,KAAK,EAAqB,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAChF,OAAO,KAAK,kBAAkB,MAAM,0EAA0E,CAAC;AAK/G,MAAM,WAAW,sBAAsB;IACrC,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAC;IACxC,aAAa,CAAC,EAAE,kBAAkB,CAAC,eAAe,CAAC,CAAC;CACrD;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAQD,UAAU,gBAAgB;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,UAAU,kBAAkB;IAC1B,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,CAAC;CAChC;AAED,UAAU,YAAY;IACpB,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,UAAU,EAAE,kBAAkB,CAAC;IAC/B,QAAQ,EAAE,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,GAAG,CAAA;KAAE,KAAK,IAAI,CAAC;CAC5D;AAED,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,SAAS,EAAE,EAwBnC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,kBAY1B,CAAC;AA6BF,eAAO,MAAM,OAAO,UAAW,kBAAkB,UAAU,aAAa;;;cApH5D,gBAAgB;cAGhB,MAAM;eACL,OAAO;cACR,OAAO;CA8MlB,CAAC;AAEF,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gCAgGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gCA2BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gCAsBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gCAiKrF,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,sBAAsB,gCA4K1D,CAAC"}