@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.0

package/lib/core/Modal/Modal.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable demo-patterns/literal-default-args */\n/* eslint-disable demo-patterns/literal-args */\nimport { Meta, Story } from '@storybook/react';\nimport { FC, ChangeEvent, ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Flex,\n  Input,\n  Modal,\n  ModalMethods,\n  ModalProps,\n  Text,\n  useModalManager,\n  useModalContext,\n  useToaster,\n  cap\n} from '@pega/cosmos-react-core';\n\nimport { ContentTypes, getContent } 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  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: Story<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: Story<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      <>\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\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: Story<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: Story = () => {\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        }, 3000);\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: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n\n  const MyModal = () => {\n    return (\n      <Modal\n        heading={`Modal #${count}`}\n        autoWidth={args.autoWidth}\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    const { create } = useModalManager();\n\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          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const DockedModal: Story<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: Story<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"]}
+{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { FC, ChangeEvent, ReactNode, useEffect, useMemo, useRef, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Button,\n  Flex,\n  Input,\n  Modal,\n  ModalMethods,\n  ModalProps,\n  Text,\n  useModalManager,\n  useModalContext,\n  useToaster,\n  cap\n} from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nimport { ContentTypes, getContent } 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  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: Story<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: Story<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: Story<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: Story = () => {\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: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n  const [count, setCount] = useState(1);\n\n  const MyModal = () => {\n    return (\n      <Modal\n        heading={`Modal #${count}`}\n        autoWidth={args.autoWidth}\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    const { create } = useModalManager();\n\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          });\n        }}\n      >\n        Open Modal\n      </Button>\n    );\n  };\n\n  return <ModalButton />;\n};\n\nexport const DockedModal: Story<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: Story<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/lib/core/MultiStepForm/MultiStepForm.mocks.d.ts

@@ -1,5 +1,23 @@
 /// <reference types="react" />
-export interface DemoFormDataType {
+import { BannerMessage } from '@pega/cosmos-react-core';
+import 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;
@@ -18,8 +36,8 @@ export interface DemoFormDataType {
     finalRecommendation?: string;
     recommendationComments?: string;
 }
-export interface DemoFormErrorsType {
-    [field: string]: string | undefined;
+interface DemoFormErrorsType {
+    [field: string]: BannerMessage;
 }
 interface MockFormArgs {
     formData: DemoFormDataType;
@@ -29,9 +47,24 @@ interface MockFormArgs {
         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) => JSX.Element;
 export declare const InterviewNotesFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
 export declare const NextInterviewFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
 export declare const RecommendationsFields: ({ formData, formErrors, dispatch }: MockFormArgs) => JSX.Element;
+export declare const MultiStepModal: (args: MultiStepFormDemoProps) => JSX.Element;
 export {};
 //# sourceMappingURL=MultiStepForm.mocks.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAeA,MAAM,WAAW,gBAAgB;IAC/B,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,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;CACrC;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,eAAO,MAAM,sBAAsB,uCAAwC,YAAY,gBAuGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBA6BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gBAuBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAkKrF,CAAC"}
+{"version":3,"file":"MultiStepForm.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStepForm/MultiStepForm.mocks.tsx"],"names":[],"mappings":";AAYA,OAAO,EAGL,aAAa,EAgBd,MAAM,yBAAyB,CAAC;AACjC,OAAO,kBAEN,MAAM,0EAA0E,CAAC;AAIlF,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,gBAgGtF,CAAC;AAEF,eAAO,MAAM,oBAAoB,uCAAwC,YAAY,gBA2BpF,CAAC;AAEF,eAAO,MAAM,mBAAmB,uCAAwC,YAAY,gBAsBnF,CAAC;AAEF,eAAO,MAAM,qBAAqB,uCAAwC,YAAY,gBAiKrF,CAAC;AAEF,eAAO,MAAM,cAAc,SAAU,sBAAsB,gBA4K1D,CAAC"}

package/lib/core/MultiStepForm/MultiStepForm.mocks.js

@@ -1,88 +1,326 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Input, Grid, FieldGroup, TextArea, RadioButtonGroup, RadioButton, CurrencyInput, Select, Option, Checkbox } from '@pega/cosmos-react-core';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
+import { Banner, Button, Checkbox, CurrencyInput, FieldGroup, Grid, Input, Modal, MultiStepForm, Option, RadioButton, RadioButtonGroup, Select, TextArea, useModalContext, useToaster } from '@pega/cosmos-react-core';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+export const stepFields = [
+    [
+        { name: 'firstName', label: 'First name' },
+        { name: 'lastName', label: 'Last name' },
+        { name: 'currentTitle', label: 'Current title' },
+        { name: 'currentCompany', label: 'Current company' },
+        { name: 'salaryRequested', label: 'Salary requested' },
+        { name: 'experienceLevel', label: 'Experience level' },
+        { name: 'priorityOne', label: 'First' },
+        { name: 'priorityTwo', label: 'Second' },
+        { name: 'priorityThree', label: 'Third' }
+    ],
+    [
+        { name: 'interviewNotes', label: 'Impressions' },
+        { name: 'additionalInterview', label: 'Request additional interview' }
+    ],
+    [{ name: 'nextInterviewer', label: 'Next interviewer' }],
+    [
+        { name: 'salaryRequestedReview', label: 'Salary requested' },
+        { name: 'salaryRequestReview', label: 'Salary request fit' },
+        { name: 'cultureFit', label: 'Culture fit' },
+        { name: 'finalRecommendation', label: 'Final recommendation' },
+        { name: 'recommendationComments', label: 'Comments' }
+    ]
+];
+export const initialState = {
+    currentStepIndex: 0,
+    cancelled: false,
+    finished: false,
+    numSteps: 3,
+    formData: {
+        firstName: 'Marcus',
+        lastName: 'Kennedy',
+        currentTitle: 'Data Analyst',
+        currentCompany: 'Acme Co.'
+    },
+    formErrors: {}
+};
+const formValidation = {
+    salaryRequested: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    experienceLevel: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    nextInterviewer: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    salaryRequestReview: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    cultureFit: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    },
+    finalRecommendation: {
+        message: 'This field is required.',
+        validator: (value) => value?.length > 0
+    }
+};
+export const reducer = (state, action) => {
+    const type = action.type;
+    const payload = action.payload;
+    switch (type) {
+        case 'restart': {
+            return initialState;
+        }
+        case 'cancel': {
+            return {
+                ...state,
+                cancelled: true
+            };
+        }
+        case 'finish': {
+            return {
+                ...state,
+                finished: true
+            };
+        }
+        case 'setStep': {
+            return {
+                ...state,
+                currentStepIndex: payload,
+                formErrors: {}
+            };
+        }
+        case 'setFieldValue': {
+            const { name: field, label, value } = payload;
+            const formData = {
+                ...state.formData
+            };
+            const formErrors = {
+                ...state.formErrors
+            };
+            formData[field] = value;
+            if (formErrors[field] && Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                const valid = formValidation[field].validator(value);
+                if (valid) {
+                    delete formErrors[field];
+                }
+                else {
+                    formErrors[field] = { label, description: formValidation[field].message };
+                }
+            }
+            return {
+                ...state,
+                formData,
+                formErrors
+            };
+        }
+        case 'submitCurrentStep': {
+            const stepIndex = state.numSteps === 4 || state.currentStepIndex <= 1
+                ? state.currentStepIndex
+                : state.currentStepIndex + 1;
+            const formErrors = { ...state.formErrors };
+            let isValid = true;
+            const validateFields = (fields) => {
+                if (!fields)
+                    return;
+                fields.forEach(({ name: field, label }) => {
+                    if (Object.prototype.hasOwnProperty.call(formValidation, field)) {
+                        const valid = formValidation[field].validator(state.formData[field]);
+                        if (valid) {
+                            delete formErrors[field];
+                        }
+                        else {
+                            isValid = false;
+                            formErrors[field] = { label, description: formValidation[field].message };
+                        }
+                    }
+                });
+            };
+            validateFields(stepFields[stepIndex]);
+            return {
+                ...state,
+                numSteps: state.formData.additionalInterview ? 4 : 3,
+                currentStepIndex: isValid && state.currentStepIndex !== state.numSteps - 1
+                    ? state.currentStepIndex + 1
+                    : state.currentStepIndex,
+                finished: isValid && state.currentStepIndex === state.numSteps - 1,
+                formErrors
+            };
+        }
+        default:
+            return state;
+    }
+};
 export const ApplicantDetailsFields = ({ formData, formErrors, dispatch }) => {
-    return (_jsxs(Grid, { container: { gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'firstName', label: 'First name', value: formData.firstName, readOnly: true }), _jsx(Input, { name: 'lastName', label: 'Last name', value: formData.lastName, readOnly: true }), _jsx(Input, { name: 'currentTitle', label: 'Current title', value: formData.currentTitle, onChange: (e) => dispatch({
+    return (_jsxs(Grid, { container: { gap: 1, cols: 'repeat(2, minmax(0, 1fr))' }, children: [_jsx(Input, { ...stepFields[0][0], value: formData.firstName, readOnly: true }), _jsx(Input, { ...stepFields[0][1], value: formData.lastName, readOnly: true }), _jsx(Input, { ...stepFields[0][2], value: formData.currentTitle, onChange: (e) => dispatch({
                     type: 'setFieldValue',
-                    payload: { field: 'currentTitle', value: e.target.value }
-                }) }), _jsx(Input, { name: 'currentCompany', label: 'Current company', value: formData.currentCompany, onChange: (e) => dispatch({
+                    payload: { ...stepFields[0][2], value: e.target.value }
+                }) }), _jsx(Input, { ...stepFields[0][3], value: formData.currentCompany, onChange: (e) => dispatch({
                     type: 'setFieldValue',
-                    payload: { field: 'currentCompany', value: e.target.value }
-                }) }), _jsx(CurrencyInput, { name: 'salaryRequested', label: 'Salary requested', value: formData.salaryRequested, currencyISOCode: 'USD', onChange: value => dispatch({
+                    payload: { ...stepFields[0][3], value: e.target.value }
+                }) }), _jsx(CurrencyInput, { ...stepFields[0][4], value: formData.salaryRequested, currencyISOCode: 'USD', onChange: value => dispatch({
                     type: 'setFieldValue',
-                    payload: { field: 'salaryRequested', value }
-                }), status: formErrors.salaryRequested ? 'error' : undefined, info: formErrors.salaryRequested ? formErrors.salaryRequested : undefined, required: true }), _jsxs(Select, { id: 'experienceLevel', label: 'Weighted experience', value: formData.experienceLevel, onChange: (e) => {
+                    payload: { ...stepFields[0][4], value }
+                }), status: formErrors.salaryRequested ? 'error' : undefined, info: formErrors.salaryRequested ? formErrors.salaryRequested.description : undefined, required: true }), _jsxs(Select, { ...stepFields[0][5], value: formData.experienceLevel, onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
-                        payload: { field: 'experienceLevel', value: e.target.value }
+                        payload: { ...stepFields[0][5], value: e.target.value }
                     });
-                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { name: 'priorityOne', label: 'First', value: formData.priorityOne, onChange: (e) => {
+                }, status: formErrors.experienceLevel ? 'error' : undefined, info: formErrors.experienceLevel ? formErrors.experienceLevel.description : undefined, required: true, children: [_jsx(Option, { value: '', children: "--" }), _jsx(Option, { value: 'junior', children: "0-3 years (junior)" }), _jsx(Option, { value: 'mid-level', children: "4-6 years (mid)" }), _jsx(Option, { value: 'senior', children: "7-10 years (senior)" }), _jsx(Option, { value: 'expert', children: "10+ years (expert)" })] }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(FieldGroup, { name: 'Work priorities', headingTag: 'h3', children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(3, minmax(0, 1fr))' }, children: [_jsx(Input, { ...stepFields[0][6], value: formData.priorityOne, onChange: (e) => {
                                     dispatch({
                                         type: 'setFieldValue',
-                                        payload: { field: 'priorityOne', value: e.target.value }
+                                        payload: { ...stepFields[0][6], value: e.target.value }
                                     });
-                                } }), _jsx(Input, { name: 'priorityTwo', label: 'Second', value: formData.priorityTwo, onChange: (e) => {
+                                } }), _jsx(Input, { ...stepFields[0][7], value: formData.priorityTwo, onChange: (e) => {
                                     dispatch({
                                         type: 'setFieldValue',
-                                        payload: { field: 'priorityTwo', value: e.target.value }
+                                        payload: { ...stepFields[0][7], value: e.target.value }
                                     });
-                                } }), _jsx(Input, { name: 'priorityThree', label: 'Third', value: formData.priorityThree, onChange: (e) => {
+                                } }), _jsx(Input, { ...stepFields[0][8], value: formData.priorityThree, onChange: (e) => {
                                     dispatch({
                                         type: 'setFieldValue',
-                                        payload: { field: 'priorityThree', value: e.target.value }
+                                        payload: { ...stepFields[0][8], value: e.target.value }
                                     });
                                 } })] }) }) })] }));
 };
 export const InterviewNotesFields = ({ formData, formErrors, dispatch }) => {
-    return (_jsxs(Grid, { container: { gap: 1, cols: '1fr' }, children: [_jsx(TextArea, { name: 'impressions', label: 'Impressions', value: formData.interviewNotes, onChange: (e) => {
+    return (_jsxs(Grid, { container: { gap: 1, cols: '1fr' }, children: [_jsx(TextArea, { ...stepFields[1][0], value: formData.interviewNotes, onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
-                        payload: { field: 'interviewNotes', value: e.target.value }
+                        payload: { ...stepFields[1][0], value: e.target.value }
                     });
-                }, status: formErrors.impressions ? 'error' : undefined, info: formErrors.impressions ? formErrors.impressions : undefined }), _jsx(Checkbox, { name: 'additionalInterview', label: 'Request additional interview', defaultChecked: formData.additionalInterview, onChange: (e) => {
+                }, status: formErrors.impressions ? 'error' : undefined, info: formErrors.impressions ? formErrors.impressions.description : undefined }), _jsx(Checkbox, { ...stepFields[1][1], defaultChecked: formData.additionalInterview, onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
-                        payload: { field: 'additionalInterview', value: e.target.checked }
+                        payload: { ...stepFields[1][1], value: e.target.checked }
                     });
                 } })] }));
 };
 export const NextInterviewFields = ({ formData, formErrors, dispatch }) => {
-    return (_jsxs(Select, { name: 'nextInterviewer', label: 'Next interviewer', value: formData.nextInterviewer, onChange: (e) => {
+    return (_jsxs(Select, { ...stepFields[2][0], value: formData.nextInterviewer, onChange: (e) => {
             dispatch({
                 type: 'setFieldValue',
-                payload: { field: 'nextInterviewer', value: e.target.value }
+                payload: { ...stepFields[2][0], value: e.target.value }
             });
-        }, status: formErrors.nextInterviewer ? 'error' : undefined, info: formErrors.nextInterviewer ? formErrors.nextInterviewer : undefined, required: true, children: [_jsx(Option, { value: '', children: "Choose an option..." }), _jsx(Option, { children: "Myself" }), _jsx(Option, { children: "Cindy Turner " }), _jsx(Option, { children: "Seth DeAngelo" }), _jsx(Option, { children: "Janet Moore" })] }));
+        }, status: formErrors.nextInterviewer ? 'error' : undefined, info: formErrors.nextInterviewer ? formErrors.nextInterviewer.description : undefined, required: true, children: [_jsx(Option, { value: '', children: "Choose an option..." }), _jsx(Option, { children: "Myself" }), _jsx(Option, { children: "Cindy Turner " }), _jsx(Option, { children: "Seth DeAngelo" }), _jsx(Option, { children: "Janet Moore" })] }));
 };
 export const RecommendationsFields = ({ formData, formErrors, dispatch }) => {
-    return (_jsxs(Grid, { container: { gap: 1, cols: '1fr' }, children: [_jsx(CurrencyInput, { name: 'salaryRequestedReview', label: 'Salary requested', value: formData.salaryRequested, onChange: () => { }, currencyISOCode: 'USD', readOnly: true }), _jsx("p", { children: "$99,000 is the recommended salary for this position." }), _jsxs(RadioButtonGroup, { label: 'Salary request fit', name: 'salaryRequestReview', onChange: (e) => {
+    return (_jsxs(Grid, { container: { gap: 1, cols: '1fr' }, children: [_jsx(CurrencyInput, { ...stepFields[3][0], value: formData.salaryRequested, onChange: () => { }, currencyISOCode: 'USD', readOnly: true }), _jsx("p", { children: "$99,000 is the recommended salary for this position." }), _jsxs(RadioButtonGroup, { ...stepFields[3][1], onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
                         payload: {
-                            field: 'salaryRequestReview',
+                            ...stepFields[3][1],
                             value: e.target.value
                         }
                     });
-                }, status: formErrors.salaryRequestReview ? 'error' : undefined, info: formErrors.salaryRequestReview ? formErrors.salaryRequestReview : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Very low', id: 'salaryTargetVeryLow', value: 'salaryTargetVeryLow', checked: formData.salaryRequestReview === 'salaryTargetVeryLow' }), _jsx(RadioButton, { label: 'Low', id: 'salaryTargetLow', value: 'salaryTargetLow', checked: formData.salaryRequestReview === 'salaryTargetLow' }), _jsx(RadioButton, { label: 'On trend', id: 'salaryTargetOnTrend', value: 'salaryTargetOnTrend', checked: formData.salaryRequestReview === 'salaryTargetOnTrend' }), _jsx(RadioButton, { label: 'High', id: 'salaryTargetHigh', value: 'salaryTargetHigh', checked: formData.salaryRequestReview === 'salaryTargetHigh' }), _jsx(RadioButton, { label: 'Very high', id: 'salaryTargetVeryHigh', value: 'salaryTargetVeryHigh', checked: formData.salaryRequestReview === 'salaryTargetVeryHigh' })] }), _jsxs(RadioButtonGroup, { label: 'Culture fit', name: 'cultureFit', onChange: (e) => {
+                }, status: formErrors.salaryRequestReview ? 'error' : undefined, info: formErrors.salaryRequestReview ? formErrors.salaryRequestReview.description : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Very low', id: 'salaryTargetVeryLow', value: 'salaryTargetVeryLow', checked: formData.salaryRequestReview === 'salaryTargetVeryLow' }), _jsx(RadioButton, { label: 'Low', id: 'salaryTargetLow', value: 'salaryTargetLow', checked: formData.salaryRequestReview === 'salaryTargetLow' }), _jsx(RadioButton, { label: 'On trend', id: 'salaryTargetOnTrend', value: 'salaryTargetOnTrend', checked: formData.salaryRequestReview === 'salaryTargetOnTrend' }), _jsx(RadioButton, { label: 'High', id: 'salaryTargetHigh', value: 'salaryTargetHigh', checked: formData.salaryRequestReview === 'salaryTargetHigh' }), _jsx(RadioButton, { label: 'Very high', id: 'salaryTargetVeryHigh', value: 'salaryTargetVeryHigh', checked: formData.salaryRequestReview === 'salaryTargetVeryHigh' })] }), _jsxs(RadioButtonGroup, { ...stepFields[3][2], onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
                         payload: {
-                            field: 'cultureFit',
+                            ...stepFields[3][2],
                             value: e.target.value
                         }
                     });
-                }, status: formErrors.cultureFit ? 'error' : undefined, info: formErrors.cultureFit ? formErrors.cultureFit : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'High risk', id: 'cultureFitHighRisk', value: 'cultureFitHighRisk', checked: formData.cultureFit === 'cultureFitHighRisk' }), _jsx(RadioButton, { label: 'Signs of risk', id: 'cultureFitSomeRisk', value: 'cultureFitSomeRisk', checked: formData.cultureFit === 'cultureFitSomeRisk' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'cultureFitIndeterminate', value: 'cultureFitIndeterminate', checked: formData.cultureFit === 'cultureFitIndeterminate' }), _jsx(RadioButton, { label: 'Good', id: 'cultureFitGood', value: 'cultureFitGood', checked: formData.cultureFit === 'cultureFitGood' }), _jsx(RadioButton, { label: 'Perfect', id: 'cultureFitPerfect', value: 'cultureFitPerfect', checked: formData.cultureFit === 'cultureFitPerfect' })] }), _jsxs(RadioButtonGroup, { label: 'Final recomendation', name: 'finalRecommendation', onChange: (e) => {
+                }, status: formErrors.cultureFit ? 'error' : undefined, info: formErrors.cultureFit ? formErrors.cultureFit.description : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'High risk', id: 'cultureFitHighRisk', value: 'cultureFitHighRisk', checked: formData.cultureFit === 'cultureFitHighRisk' }), _jsx(RadioButton, { label: 'Signs of risk', id: 'cultureFitSomeRisk', value: 'cultureFitSomeRisk', checked: formData.cultureFit === 'cultureFitSomeRisk' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'cultureFitIndeterminate', value: 'cultureFitIndeterminate', checked: formData.cultureFit === 'cultureFitIndeterminate' }), _jsx(RadioButton, { label: 'Good', id: 'cultureFitGood', value: 'cultureFitGood', checked: formData.cultureFit === 'cultureFitGood' }), _jsx(RadioButton, { label: 'Perfect', id: 'cultureFitPerfect', value: 'cultureFitPerfect', checked: formData.cultureFit === 'cultureFitPerfect' })] }), _jsxs(RadioButtonGroup, { ...stepFields[3][3], onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
                         payload: {
-                            field: 'finalRecommendation',
+                            ...stepFields[3][3],
                             value: e.target.value
                         }
                     });
-                }, status: formErrors.finalRecommendation ? 'error' : undefined, info: formErrors.finalRecommendation ? formErrors.finalRecommendation : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Do not recommend', id: 'doNotRecommend', value: 'doNotRecommend', checked: formData.finalRecommendation === 'doNotRecommend' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'noRecommendation', value: 'noRecommendation', checked: formData.finalRecommendation === 'noRecommendation' }), _jsx(RadioButton, { label: 'Recommend', id: 'recommend', value: 'recommend', checked: formData.finalRecommendation === 'recommend' })] }), _jsx(TextArea, { name: 'comments', label: 'Comments', value: formData.recommendationComments, onChange: (e) => {
+                }, status: formErrors.finalRecommendation ? 'error' : undefined, info: formErrors.finalRecommendation ? formErrors.finalRecommendation.description : undefined, inline: true, required: true, children: [_jsx(RadioButton, { label: 'Do not recommend', id: 'doNotRecommend', value: 'doNotRecommend', checked: formData.finalRecommendation === 'doNotRecommend' }), _jsx(RadioButton, { label: 'Indeterminate', id: 'noRecommendation', value: 'noRecommendation', checked: formData.finalRecommendation === 'noRecommendation' }), _jsx(RadioButton, { label: 'Recommend', id: 'recommend', value: 'recommend', checked: formData.finalRecommendation === 'recommend' })] }), _jsx(TextArea, { ...stepFields[3][4], value: formData.recommendationComments, onChange: (e) => {
                     dispatch({
                         type: 'setFieldValue',
-                        payload: { field: 'recommendationComments', value: e.target.value }
+                        payload: { ...stepFields[3][4], value: e.target.value }
                     });
                 } })] }));
 };
+export const MultiStepModal = (args) => {
+    const { dismiss } = useModalContext();
+    const { push: pushToaster } = useToaster();
+    const [loading, setLoading] = useState(false);
+    const [banners, setBanners] = useState();
+    const bannerHandleRef = useRef(null);
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const submitStep = () => {
+        setLoading(true);
+        setTimeout(() => {
+            dispatch({ type: 'submitCurrentStep' });
+            setLoading(false);
+        }, loadingTimeoutMS);
+    };
+    useEffect(() => {
+        if (banners && bannerHandleRef.current)
+            bannerHandleRef.current.focus();
+    }, [banners]);
+    useEffect(() => {
+        const bannerErrors = Object.keys(state.formErrors)
+            .filter(errorField => {
+            return stepFields[state.currentStepIndex].find(field => field.name === errorField);
+        })
+            .map(errorField => state.formErrors[errorField]);
+        if (bannerErrors.length) {
+            setBanners(_jsx(Banner, { messages: bannerErrors, variant: 'urgent', handle: bannerHandleRef }));
+        }
+        else {
+            setBanners(undefined);
+        }
+    }, [state.currentStepIndex, state.formErrors]);
+    const stepActions = useMemo(() => {
+        return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: () => {
+                        dispatch({ type: 'cancel' });
+                        dismiss();
+                    }, disabled: loading, children: "Cancel" }), _jsxs("div", { children: [state.currentStepIndex > 0 && (_jsx(Button, { onClick: () => dispatch({ type: 'setStep', payload: state.currentStepIndex - 1 }), disabled: loading, children: "Previous" })), state.currentStepIndex !== state.numSteps - 1 && (_jsx(Button, { variant: 'primary', onClick: submitStep, disabled: loading, children: "Next" })), state.currentStepIndex === state.numSteps - 1 && (_jsx(Button, { type: 'submit', variant: 'primary', onClick: (e) => {
+                                e.preventDefault();
+                                submitStep();
+                            }, disabled: loading, children: "Finish" }))] })] }));
+    }, [state.currentStepIndex, loading]);
+    const stepData = useMemo(() => {
+        const steps = [
+            {
+                id: 'applicant_details',
+                name: 'Applicant details - personal information',
+                description: 'This applicant has passed initial screening and has been cleared to have an interview scheduled. ' +
+                    'Please confirm their details and have a discussion regarding the open position and the company.',
+                banners,
+                content: (_jsx(ApplicantDetailsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch }))
+            },
+            {
+                id: 'interview_notes',
+                name: 'Interview notes',
+                banners,
+                content: (_jsx(InterviewNotesFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch }))
+            },
+            {
+                id: 'recommendations',
+                name: 'Final recommendations',
+                description: 'Based on your screening call with the applicant please submit your recomendations.',
+                banners,
+                content: (_jsx(RecommendationsFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch }))
+            }
+        ];
+        if (state.numSteps === 4) {
+            steps.splice(2, 0, {
+                id: 'next_interview',
+                name: 'Next interview',
+                description: 'Please select an individual to conduct the next interview.',
+                banners,
+                content: (_jsx(NextInterviewFields, { formData: state.formData, formErrors: state.formErrors, dispatch: dispatch }))
+            });
+        }
+        return steps;
+    }, [state.formData, state.formErrors, state.currentStepIndex, banners, loading]);
+    useEffect(() => {
+        if (state.finished) {
+            dismiss();
+            pushToaster({ content: 'Interview successfully submitted!' });
+        }
+    }, [state.finished]);
+    return (_jsx(Modal, { heading: args.heading, progress: loading
+            ? { message: `Submitting ${stepData[state.currentStepIndex].name.toLowerCase()}...` }
+            : undefined, actions: stepActions, onRequestDismiss: () => !loading, children: _jsx(MultiStepForm, { steps: stepData, currentStepId: stepData[state.currentStepIndex].id, stepIndicator: args.stepIndicator }) }));
+};
 //# sourceMappingURL=MultiStepForm.mocks.js.map