@pega/cosmos-react-demos 2.1.1 → 2.1.2

package/jsx/build/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAwJlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CA0JlD,CAAC"}

package/jsx/build/AppShell/AppShell.stories.jsx

@@ -45,10 +45,10 @@ const TabbedPage = (args) => {
         }}/>);
 };
 export const AppShellDemo = (args) => {
-    const [currentNodeId, setCurrentNodeId] = useState('1');
-    const [allNodes, setAllNodes] = useState(treeList);
-    const [currentDrawer, setCurrentDrawer] = useState('');
-    const [currentUtil, setCurrentUtil] = useState('');
+    const [currentNodeId, setCurrentNodeId] = useState('60');
+    const [allNodes, setAllNodes] = useState(treeHelpers.expandTo(appExplorerMenuList, currentNodeId));
+    const [currentDrawer, setCurrentDrawer] = useState('explorer');
+    const [currentUtil, setCurrentUtil] = useState('explorer');
     const [pageContent, setPageContent] = useState(contents[0]);
     const onNodeClick = (nodeId, activeDrawerId) => {
         const clickedNode = treeHelpers.getNode(allNodes, nodeId);

package/jsx/build/AppShell/AppShell.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>('1');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n  const [currentDrawer, setCurrentDrawer] = useState('');\n  const [currentUtil, setCurrentUtil] = useState('');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.jsx","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n    treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n  );\n  const [currentDrawer, setCurrentDrawer] = useState('explorer');\n  const [currentUtil, setCurrentUtil] = useState('explorer');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

package/jsx/core/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiC/C,wBAeU;AAyEV,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC;AAEF,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoC/C,wBAeU;AAyEV,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC;AAEF,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC"}

package/jsx/core/Form/Form.stories.jsx

@@ -1,5 +1,5 @@
 import { useReducer, useRef, useContext, useState } from 'react';
-import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
 import { Banner, Button, Checkbox, CheckboxGroup, Flex, Form, FormField, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
 import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
 import { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';

package/jsx/core/Form/Form.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.jsx","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n  useReducer,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  useRef,\n  useContext,\n  useState\n} from 'react';\n\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport {\n  Banner,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Flex,\n  Form,\n  FormControlProps,\n  FormField,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  includeStories: ['OneColumnForm', 'TwoColumnForm', 'ThreeColumnForm', 'SimpleFormDemo'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Form.stories.jsx","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n  useReducer,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  useRef,\n  useContext,\n  useState\n} from 'react';\n\nimport {\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\nimport {\n  Banner,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Flex,\n  Form,\n  FormControlProps,\n  FormField,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  includeStories: ['OneColumnForm', 'TwoColumnForm', 'ThreeColumnForm', 'SimpleFormDemo'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/rte/Editor/Editor.stories.d.ts

@@ -3,6 +3,7 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const EditorDemo: () => JSX.Element;
+export declare const EmptyEditorDemo: () => JSX.Element;
 export declare const ReadonlyFormField: () => JSX.Element;
 export declare const CustomComponentDemo: () => JSX.Element;
 export declare const RichTextEditorWithLogs: () => JSX.Element;

package/jsx/rte/Editor/Editor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}
+{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}

package/jsx/rte/Editor/Editor.stories.jsx

@@ -14,7 +14,15 @@ export const EditorDemo = () => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onImageAdded={onImageAdded} onFocus={action('Editor has focus')} onBlur={action('Editor has blurred')} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p></body>'/>);
+    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onFocus={action('Editor focused')} onBlur={action('Editor blurred')} onImageAdded={onImageAdded} defaultValue='<body><p>Hi mom <a href="https://google.com">link</a></p></body>'/>);
+};
+export const EmptyEditorDemo = () => {
+    const editorRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (<Editor ref={editorRef} label={label} toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']} onImageAdded={onImageAdded} onFocus={action('Editor has focus')} onBlur={action('Editor has blurred')} placeholder='Type some stuff in here'/>);
 };
 export const ReadonlyFormField = () => {
     return (<Editor label={label} readOnly defaultValue={`<article class="main-page-content" lang="en-US"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</p>

package/jsx/rte/Editor/Editor.stories.jsx.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n    />\n  );\n};\n\nexport const ReadonlyFormField = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nclass PegaCustomElement extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const mountPoint = document.createElement('span');\n    this.appendChild(mountPoint);\n    ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n  }\n}\n\nexport const CustomComponentDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>'\n      customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Editor.stories.jsx","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onFocus={action('Editor focused')}\n      onBlur={action('Editor blurred')}\n      onImageAdded={onImageAdded}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n    />\n  );\n};\n\nexport const EmptyEditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      placeholder='Type some stuff in here'\n    />\n  );\n};\n\nexport const ReadonlyFormField = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nclass PegaCustomElement extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const mountPoint = document.createElement('span');\n    this.appendChild(mountPoint);\n    ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n  }\n}\n\nexport const CustomComponentDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>'\n      customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}

package/lib/build/AppShell/AppShell.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CAwJlD,CAAC"}
+{"version":3,"file":"AppShell.stories.d.ts","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,UAAU,EAAE,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAmB/C,wBAMU;AAEV,MAAM,WAAW,kBAAkB;IACjC,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IACrB,cAAc,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC5D;AAoED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,kBAAkB,CA0JlD,CAAC"}

package/lib/build/AppShell/AppShell.stories.js

@@ -45,10 +45,10 @@ const TabbedPage = (args) => {
         } }, void 0));
 };
 export const AppShellDemo = (args) => {
-    const [currentNodeId, setCurrentNodeId] = useState('1');
-    const [allNodes, setAllNodes] = useState(treeList);
-    const [currentDrawer, setCurrentDrawer] = useState('');
-    const [currentUtil, setCurrentUtil] = useState('');
+    const [currentNodeId, setCurrentNodeId] = useState('60');
+    const [allNodes, setAllNodes] = useState(treeHelpers.expandTo(appExplorerMenuList, currentNodeId));
+    const [currentDrawer, setCurrentDrawer] = useState('explorer');
+    const [currentUtil, setCurrentUtil] = useState('explorer');
     const [pageContent, setPageContent] = useState(contents[0]);
     const onNodeClick = (nodeId, activeDrawerId) => {
         const clickedNode = treeHelpers.getNode(allNodes, nodeId);

package/lib/build/AppShell/AppShell.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string | undefined>('1');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(treeList);\n  const [currentDrawer, setCurrentDrawer] = useState('');\n  const [currentUtil, setCurrentUtil] = useState('');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}
+{"version":3,"file":"AppShell.stories.js","sourceRoot":"","sources":["../../../src/build/AppShell/AppShell.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAc,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,IAAI,EAEJ,WAAW,EACX,UAAU,IAAI,cAAc,EAC7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAEpD,OAAO,EACL,mBAAmB,EACnB,gBAAgB,EAChB,QAAQ,EACR,cAAc,EACd,QAAQ,EACT,MAAM,kBAAkB,CAAC;AAE1B,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,QAAQ;IACnB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;CACM,CAAC;AAkBV,MAAM,OAAO,GAAG,CACd,IAAqF,EACrF,EAAE;IACF,MAAM,EACJ,eAAe,EACf,WAAW,EAAE,EACX,IAAI,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,EACrC,EACF,GAAG,IAAI,CAAC;IAET,IAAI,eAAe,EAAE;QACnB,MAAM,IAAI,GAAG,SAAS,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,eAAe,CAAC;QACjE,OAAO,IAAI;YACT,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAa,EAAE,CAAC,EAAE,EAAE;gBACvC,wGAAwG;gBACxG,OAAO;oBACL,EAAE,EAAE,KAAK;oBACT,OAAO,EAAE,KAAK;oBACd,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,IAAK,KAAa,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;iBACnE,CAAC;YACJ,CAAC,CAAC;YACJ,CAAC,CAAC,EAAE,CAAC;KACR;AACH,CAAC,CAAC;AAEF,MAAM,UAAU,GAAkE,CAChF,IAA4D,EAC5D,EAAE;IACF,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IACtD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC,CAAC;IACxD,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,IAAI,CAAC;IAE9C,OAAO,CACL,KAAC,cAAc,IACb,CAAC,EACC,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,KAAK,YACxB,OAAO,WACH,EAET,IAAI,EAAE,OAAO,CAAC,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC,EAC/C,KAAK,EAAE,WAAW,CAAC,IAAI,CAAC,SAAS,EACjC,IAAI,EAAE;YACJ,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC1C,MAAM,EAAE,GAAG,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;gBACtB,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC;YACtB,CAAC,CAAC;YACF,IAAI,EAAE,YAAY;YAClB,YAAY;YACZ,UAAU,EAAE,EAAE,CAAC,EAAE;gBACf,eAAe,CAAC,EAAE,CAAC,CAAC;gBACpB,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,CAAC;YAClC,CAAC;SACF,WACD,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAA8B,CAAC,IAAwB,EAAE,EAAE;IAClF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAS,IAAI,CAAC,CAAC;IACjE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,WAAW,CAAC,QAAQ,CAAC,mBAAmB,EAAE,aAAa,CAAC,CACzD,CAAC;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC/D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAmB,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9E,MAAM,WAAW,GAAG,CAAC,MAAc,EAAE,cAAsB,EAAE,EAAE;QAC7D,MAAM,WAAW,GAAG,WAAW,CAAC,OAAO,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE1D,IAAI,CAAC,WAAW,EAAE,KAAK,EAAE;YACvB,cAAc,CAAC,cAAc,CAAC,CAAC;YAC/B,gBAAgB,CAAC,MAAM,CAAC,CAAC;YACzB,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,KAAK,WAAW,EAAE,EAAE,CAAE,CAAC,CAAC;YAC1E,OAAO;SACR;QAED,WAAW,CAAC,IAAI,CAAC,EAAE,CACjB,WAAW,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE;YACvC,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;aACzB,CAAC;QACJ,CAAC,CAAC,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG;QAChB,KAAK,EAAE;YACL,IAAI,EAAE,YAAY;SACnB;QACD,KAAK,EAAE;YACL,MAAM,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACxB,MAAM,EAAE;gBACN,WAAW,EAAE,4BAA4B;aAC1C;YACD,UAAU,EAAE,MAAM;YAClB,OAAO,EAAE;gBACP;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE;iBAChD;gBACD;oBACE,OAAO,EAAE,eAAe;oBACxB,EAAE,EAAE,cAAc;oBAClB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE;iBAChD;aACF;YACD,cAAc,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;SACnE;QACD,KAAK,EAAE;YACL;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,cAAc;gBACpB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE;aAChD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,kBAAkB;gBACxB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,0BAA0B,CAAC,EAAE;aACpD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,OAAO;gBACb,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE;aACzC;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,gBAAgB;gBACtB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,wBAAwB,CAAC,EAAE;aAClD;YACD;gBACE,EAAE,EAAE,GAAG;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,gBAAgB,CAAC,EAAE;aAC1C;SACF;KACF,CAAC;IAEF,OAAO,CACL,4BACE,KAAC,QAAQ,IACP,IAAI,EAAE,KAAC,UAAU,OAAK,EAAE,GAAG,IAAI,EAAE,WAAW,EAAE,WAAI,EAClD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,cAAc,EAC5B,OAAO,EAAE;gBACP,IAAI,EAAE,SAAS;gBACf,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,IAAI,EAAE,gBAAgB;wBACtB,OAAO,EAAE,SAAS;qBACnB;iBACF;aACF,EACD,UAAU,EAAE;gBACV,KAAK,EAAE,QAAQ;gBACf,aAAa;gBACb,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,WAAW,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC;gBACjC,CAAC;aACF,EACD,KAAK,EAAE;gBACL,WAAW,EAAE,EAAE,CAAC,EAAE;oBAChB,gBAAgB,CAAC,EAAE,CAAC,CAAC;oBACrB,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,MAAM,cAAc,GAAG,aAAa;4BAClC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,mBAAmB,EAAE,aAAa,CAAC;4BAC1D,CAAC,CAAC,mBAAmB,CAAC;wBACxB,WAAW,CAAC,cAAc,CAAC,CAAC;qBAC7B;oBAED,IAAI,EAAE,KAAK,UAAU,EAAE;wBACrB,MAAM,UAAU,GAAG,aAAa;4BAC9B,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,gBAAgB,EAAE,aAAa,CAAC;4BACvD,CAAC,CAAC,gBAAgB,CAAC;wBACrB,WAAW,CAAC,UAAU,CAAC,CAAC;qBACzB;oBAED,IAAI,EAAE,KAAK,SAAS,EAAE;wBACpB,MAAM,UAAU,GAAG,aAAa;4BAC9B,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,EAAE,aAAa,CAAC;4BACrD,CAAC,CAAC,cAAc,CAAC;wBACnB,WAAW,CAAC,UAAU,CAAC,CAAC;qBACzB;gBACH,CAAC;gBACD,aAAa,EAAE,WAAW;gBAC1B,KAAK,EAAE;oBACL;wBACE,KAAK,EAAE,cAAc;wBACrB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,UAAU;wBACjB,EAAE,EAAE,UAAU;qBACf;oBACD;wBACE,KAAK,EAAE,SAAS;wBAChB,EAAE,EAAE,SAAS;qBACd;iBACF;gBACD,MAAM,EAAE;oBACN,aAAa,EAAE,GAAG,EAAE;wBAClB,gBAAgB,CAAC,EAAE,CAAC,CAAC;wBACrB,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;oBACxF,CAAC;iBACF;gBACD,OAAO,EAAE,IAAI;aACd,WACD,WACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY,CAAC,IAAI,GAAG;IAClB,cAAc,EAAE,KAAK;IACrB,eAAe,EAAE,IAAI;IACrB,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,MAAM,CAAC,wBAAwB,CAAC;CACjD,CAAC;AAEF,YAAY,CAAC,QAAQ,GAAG;IACtB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAChD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACjD,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,cAAc,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC7C,CAAC","sourcesContent":["import { useState, MouseEvent } from 'react';\nimport { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n  Text,\n  StandardTreeProps,\n  treeHelpers,\n  TabbedPage as TabbedPageComp\n} from '@pega/cosmos-react-core';\nimport { AppShell } from '@pega/cosmos-react-build';\n\nimport {\n  appExplorerMenuList,\n  branchesMenuList,\n  contents,\n  recordMenuList,\n  treeList\n} from './AppShell.mocks';\n\nexport default {\n  title: 'Build/AppShell',\n  component: AppShell,\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport interface AppShellStoryProps {\n  hideNavigation: boolean;\n  showBreadcrumbs: boolean;\n  showPreview: boolean;\n  onPreviewClick: (e: MouseEvent<HTMLButtonElement>) => void;\n}\n\ninterface PageContentProps {\n  id: string;\n  data: {\n    pageTitle: string;\n    breadcrumbsPath: string;\n    tabs: string[];\n  };\n}\n\nconst getPath = (\n  args: Pick<AppShellStoryProps, 'showBreadcrumbs'> & { pageContent: PageContentProps }\n) => {\n  const {\n    showBreadcrumbs,\n    pageContent: {\n      data: { pageTitle, breadcrumbsPath }\n    }\n  } = args;\n\n  if (showBreadcrumbs) {\n    const path = pageTitle === 'Overview' ? 'Home' : breadcrumbsPath;\n    return path\n      ? path.split(',').map((crumb: string, i) => {\n          // FIXME: https://stackoverflow.com/questions/63616486/property-replaceall-does-not-exist-on-type-string\n          return {\n            id: crumb,\n            primary: crumb,\n            href: i < 3 ? `#${(crumb as any).replace(/\\s/g, '-')}` : undefined\n          };\n        })\n      : [];\n  }\n};\n\nconst TabbedPage: Story<AppShellStoryProps & { pageContent: PageContentProps }> = (\n  args: AppShellStoryProps & { pageContent: PageContentProps }\n) => {\n  const [currentTabId, setCurrentTabId] = useState('1');\n  const [content, setContent] = useState('Tab 1 content');\n  const { pageContent, showBreadcrumbs } = args;\n\n  return (\n    <TabbedPageComp\n      a={\n        <Text variant='h1' as='div'>\n          {content}\n        </Text>\n      }\n      path={getPath({ showBreadcrumbs, pageContent })}\n      title={pageContent.data.pageTitle}\n      tabs={{\n        tabs: pageContent.data.tabs.map((name, i) => {\n          const id = `${i + 1}`;\n          return { id, name };\n        }),\n        type: 'horizontal',\n        currentTabId,\n        onTabClick: id => {\n          setCurrentTabId(id);\n          setContent(`Tab ${id} content`);\n        }\n      }}\n    />\n  );\n};\n\nexport const AppShellDemo: Story<AppShellStoryProps> = (args: AppShellStoryProps) => {\n  const [currentNodeId, setCurrentNodeId] = useState<string>('60');\n  const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(\n    treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n  );\n  const [currentDrawer, setCurrentDrawer] = useState('explorer');\n  const [currentUtil, setCurrentUtil] = useState('explorer');\n  const [pageContent, setPageContent] = useState<PageContentProps>(contents[0]);\n\n  const onNodeClick = (nodeId: string, activeDrawerId: string) => {\n    const clickedNode = treeHelpers.getNode(allNodes, nodeId);\n\n    if (!clickedNode?.nodes) {\n      setCurrentUtil(activeDrawerId);\n      setCurrentNodeId(nodeId);\n      setPageContent(contents.find(content => content.id === clickedNode?.id)!);\n      return;\n    }\n\n    setAllNodes(tree =>\n      treeHelpers.mapNode(tree, nodeId, node => {\n        return {\n          ...node,\n          expanded: !node.expanded\n        };\n      })\n    );\n  };\n\n  const appHeader = {\n    brand: {\n      name: 'AppStudioX'\n    },\n    utils: {\n      avatar: { name: 'Alan' },\n      search: {\n        placeholder: 'Search anything, anywhere…'\n      },\n      branchName: 'test',\n      actions: [\n        {\n          primary: 'Switch branch',\n          id: 'switchbranch',\n          onClick: () => action('Clicked switchbranch')()\n        },\n        {\n          primary: 'Create branch',\n          id: 'createbranch',\n          onClick: () => action('Clicked createbranch')()\n        }\n      ],\n      onPreviewClick: args.showPreview ? args.onPreviewClick : undefined\n    },\n    links: [\n      {\n        id: '1',\n        name: 'Applications',\n        onClick: () => action('Clicked Applications')()\n      },\n      {\n        id: '2',\n        name: 'Shared resources',\n        onClick: () => action('Clicked Shared resources')()\n      },\n      {\n        id: '3',\n        name: 'Teams',\n        onClick: () => action('Clicked Teams')()\n      },\n      {\n        id: '4',\n        name: 'AI & Analytics',\n        onClick: () => action('Clicked AI & Analytics')()\n      },\n      {\n        id: '5',\n        name: 'Deploy',\n        onClick: () => action('Clicked Deploy')()\n      }\n    ]\n  };\n\n  return (\n    <>\n      <AppShell\n        main={<TabbedPage {...{ ...args, pageContent }} />}\n        appHeader={appHeader}\n        hideNav={args.hideNavigation}\n        appInfo={{\n          text: 'U+ Desk',\n          visual: {\n            icon: {\n              name: 'phone-in-solid',\n              bgColor: '#0ac7c8'\n            }\n          }\n        }}\n        navigation={{\n          nodes: allNodes,\n          currentNodeId,\n          onNodeClick: id => {\n            onNodeClick(id, currentDrawer);\n          }\n        }}\n        utils={{\n          onItemClick: id => {\n            setCurrentDrawer(id);\n            if (id === 'explorer') {\n              const appExploreTree = currentNodeId\n                ? treeHelpers.expandTo(appExplorerMenuList, currentNodeId)\n                : appExplorerMenuList;\n              setAllNodes(appExploreTree);\n            }\n\n            if (id === 'branches') {\n              const branchTree = currentNodeId\n                ? treeHelpers.expandTo(branchesMenuList, currentNodeId)\n                : branchesMenuList;\n              setAllNodes(branchTree);\n            }\n\n            if (id === 'records') {\n              const recordTree = currentNodeId\n                ? treeHelpers.expandTo(recordMenuList, currentNodeId)\n                : recordMenuList;\n              setAllNodes(recordTree);\n            }\n          },\n          currentItemId: currentUtil,\n          items: [\n            {\n              label: 'App Explorer',\n              id: 'explorer'\n            },\n            {\n              label: 'Branches',\n              id: 'branches'\n            },\n            {\n              label: 'Records',\n              id: 'records'\n            }\n          ],\n          drawer: {\n            onBeforeClose: () => {\n              setCurrentDrawer('');\n              setAllNodes(currentNodeId ? treeHelpers.expandTo(treeList, currentNodeId) : treeList);\n            }\n          },\n          devMode: true\n        }}\n      />\n    </>\n  );\n};\n\nAppShellDemo.args = {\n  hideNavigation: false,\n  showBreadcrumbs: true,\n  showPreview: true,\n  onPreviewClick: action('Clicked preview button')\n};\n\nAppShellDemo.argTypes = {\n  hideNavigation: { control: { type: 'boolean' } },\n  showBreadcrumbs: { control: { type: 'boolean' } },\n  showPreview: { control: { type: 'boolean' } },\n  onPreviewClick: { table: { disable: true } }\n};\n"]}

package/lib/core/Form/Form.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAiC/C,wBAeU;AAyEV,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC;AAEF,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC"}
+{"version":3,"file":"Form.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAoC/C,wBAeU;AAyEV,eAAO,MAAM,WAAW;UAMhB,MAAM;iBACC,OAAO;;;wBA8IrB,CAAC;AAEF,UAAU,cAAc;IACtB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CAE/C,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,cAAc,CAEjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,cAAc,GAAG;IAAE,WAAW,CAAC,EAAE,OAAO,CAAA;CAAE,CA+D5E,CAAC"}

package/lib/core/Form/Form.stories.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer, useRef, useContext, useState } from 'react';
-import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { Editor as RichTextEditor } from '@pega/cosmos-react-rte';
 import { Banner, Button, Checkbox, CheckboxGroup, Flex, Form, FormField, Grid, Input, RadioButton, RadioButtonGroup, Select, Option, TextArea, ToasterContext } from '@pega/cosmos-react-core';
 import { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';
 import { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';

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

@@ -1 +1 @@
-{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n  useReducer,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  useRef,\n  useContext,\n  useState\n} from 'react';\n\nimport { RichTextEditor, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport {\n  Banner,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Flex,\n  Form,\n  FormControlProps,\n  FormField,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  includeStories: ['OneColumnForm', 'TwoColumnForm', 'ThreeColumnForm', 'SimpleFormDemo'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"Form.stories.js","sourceRoot":"","sources":["../../../src/core/Form/Form.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n  useReducer,\n  ChangeEvent,\n  FocusEvent,\n  FormEvent,\n  useRef,\n  useContext,\n  useState\n} from 'react';\n\nimport {\n  Editor as RichTextEditor,\n  EditorState as RichTextEditorState\n} from '@pega/cosmos-react-rte';\nimport {\n  Banner,\n  Button,\n  Checkbox,\n  CheckboxGroup,\n  Flex,\n  Form,\n  FormControlProps,\n  FormField,\n  Grid,\n  Input,\n  RadioButton,\n  RadioButtonGroup,\n  Select,\n  Option,\n  TextArea,\n  ToasterContext\n} from '@pega/cosmos-react-core';\nimport { FileInputDemo } from '@pega/cosmos-react-demos/lib/core/File/FileInput.stories';\nimport { FilterableSingleSelect as ComboboxFilterableStory } from '@pega/cosmos-react-demos/lib/core/ComboBox/ComboBox.stories';\n\nexport default {\n  title: 'Core/Form',\n  component: Form,\n  subcomponents: {\n    FormField\n  },\n  includeStories: ['OneColumnForm', 'TwoColumnForm', 'ThreeColumnForm', 'SimpleFormDemo'],\n  args: {\n    heading: 'Form demo',\n    description: ''\n  },\n  argTypes: {\n    heading: { control: { type: 'text' } },\n    description: { control: { type: 'text' } }\n  }\n} as Meta;\n\ninterface Field extends FormControlProps {\n  help?: string;\n  error?: string;\n  validator: (this: Field) => boolean;\n}\n\n// Get initial field properties\nconst initFields = (): Field[] => {\n  const common = { value: undefined, status: undefined };\n  return [\n    {\n      ...common,\n      name: 'name',\n      required: true,\n      error: 'Please enter first and last name',\n      validator() {\n        if (!this.value) return false;\n        return /^[a-z]+\\s[a-z]+$/i.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'email',\n      required: true,\n      error: 'Enter a @pega.com address',\n      validator() {\n        if (!this.value) return false;\n        return /^\\S+@pega\\.com$/.test(this.value);\n      }\n    },\n    {\n      ...common,\n      name: 'notes',\n      required: true,\n      help: 'See how fast you can type 20 characters…go',\n      error: 'You need to tell us more than 20 characters',\n      validator() {\n        if (!this.value) return false;\n        return this.value.length >= 20;\n      }\n    }\n  ];\n};\n\n// Handles setting of state for all fields\nconst fieldReducer = (\n  fields: Field[],\n  {\n    target,\n    type\n  }:\n    | ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n    | FocusEvent<HTMLInputElement | HTMLTextAreaElement>\n) => {\n  return fields.map(field => {\n    if (field.name === target.name) {\n      field.value = target.value;\n      if (type === 'blur' || field.status === 'error') {\n        if ((field.required || field.value) && !field.validator()) {\n          field.status = 'error';\n          field.info = field.error;\n        } else {\n          field.status = undefined;\n          field.info = field.help;\n        }\n      }\n    }\n    return field;\n  });\n};\n\nexport const FormContent = ({\n  cols,\n  heading,\n  description,\n  showActions\n}: {\n  cols: number;\n  showActions: boolean;\n  heading?: string;\n  description?: string;\n}) => {\n  const editorRef = useRef<RichTextEditorState>(null);\n  const [fields, setField] = useReducer(fieldReducer, undefined, initFields);\n  const { push } = useContext(ToasterContext);\n\n  const name = fields.find(field => field.name === 'name');\n  const email = fields.find(field => field.name === 'email');\n  const notes = fields.find(field => field.name === 'notes');\n\n  if (!name || !email || !notes) return null;\n\n  const canSubmit = fields.every(field => field.value && field.validator());\n\n  const actions = (\n    <>\n      <Button\n        name='Cancel'\n        variant='secondary'\n        onClick={() => {\n          push({ content: 'Form cancelled!' });\n        }}\n      >\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary' disabled={!canSubmit}>\n        Submit\n      </Button>\n    </>\n  );\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n  return (\n    <Form\n      actions={showActions ? actions : undefined}\n      description={description}\n      heading={heading}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        push({ content: 'Form submitted!' });\n      }}\n      style={{ margin: 'auto', maxWidth: '37.5rem' }}\n    >\n      <Grid container={{ gap: 1, cols: `repeat(${cols}, minmax(0, 1fr))` }}>\n        <Input\n          name='name'\n          label='Name'\n          value={name.value}\n          required={name.required}\n          status={name.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Input\n          name='email'\n          value={email.value}\n          type='email'\n          label='Email'\n          required={email.required}\n          status={email.status}\n          info='some help text here'\n          onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n          onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          autoComplete='off'\n        />\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <CheckboxGroup name='visited' label='Places you have worked'>\n            {['Cambridge', 'Krakow', 'Hyderabad', 'Bangalore'].map(office => (\n              <Checkbox\n                key={office}\n                label={office}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </CheckboxGroup>\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RadioButtonGroup name='meetings' label='Do you enjoy early morning meetings?'>\n            {['Yes', \"No… no I don't\"].map(option => (\n              <RadioButton\n                key={option}\n                label={option}\n                onChange={(e: ChangeEvent<HTMLInputElement>) => setField({ ...e })}\n              />\n            ))}\n          </RadioButtonGroup>\n        </Grid>\n\n        <Select label='What would you like to eat?' info='FYI: options are limited'>\n          <Option>choose meal…</Option>\n          <Option>Pizza</Option>\n          <Option>Sandwich</Option>\n          <Option>Salad</Option>\n        </Select>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <TextArea\n            name='notes'\n            required={notes.required}\n            label='Meeting Notes'\n            status={notes.status}\n            info={notes.info || notes.help}\n            onChange={(e: ChangeEvent<HTMLTextAreaElement>) => setField({ ...e })}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => setField({ ...e })}\n          />\n        </Grid>\n\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <RichTextEditor\n            label='Detailed meeting notes'\n            info='The rich text editor can be used in forms, comments, and documents'\n            toolbar={[\n              'inline-styling',\n              'headers',\n              'tables',\n              'links',\n              'images',\n              'lists',\n              'cut-copy-paste',\n              'indentation'\n            ]}\n            onImageAdded={onImageAdded}\n            ref={editorRef}\n          />\n        </Grid>\n        <Grid item={{ colStartEnd: '1/-1' }}>\n          <FileInputDemo />\n        </Grid>\n        <ComboboxFilterableStory />\n      </Grid>\n    </Form>\n  );\n};\n\ninterface FormStoryProps {\n  heading?: string;\n  description?: string;\n}\n\nexport const OneColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={1} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const TwoColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={2} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const ThreeColumnForm: Story<FormStoryProps> = (args: FormStoryProps) => {\n  return <FormContent cols={3} heading={args.heading} description={args.description} showActions />;\n};\n\nexport const SimpleFormDemo: Story<FormStoryProps & { withBanners?: boolean }> = (\n  args: FormStoryProps & { withBanners?: boolean }\n) => {\n  const [inputValue, setInputValue] = useState('');\n  const [success, setSuccess] = useState('');\n\n  const actions = (\n    <>\n      <Button name='Cancel' variant='secondary' onClick={() => setInputValue('')}>\n        Cancel\n      </Button>\n      <Button name='Submit' type='submit' variant='primary'>\n        Submit\n      </Button>\n    </>\n  );\n\n  const successBanner = (\n    <Banner\n      id='success'\n      variant='success'\n      heading='Success'\n      messages={['Form submitted', `Input value: ${success}`]}\n    />\n  );\n\n  const errorBanner = (\n    <Banner\n      id='error'\n      variant='urgent'\n      heading='Error'\n      messages={['All required fields in the form must be completed.']}\n    />\n  );\n\n  const banner = success ? successBanner : errorBanner;\n\n  return (\n    <Form\n      banners={args.withBanners ? banner : undefined}\n      actions={actions}\n      heading={args.heading}\n      description={args.description}\n      onSubmit={(e: FormEvent) => {\n        e.preventDefault();\n        setSuccess(inputValue);\n        setInputValue('');\n      }}\n    >\n      <Flex container={{ direction: 'column', itemGap: 2 }}>\n        <Input\n          label='Name'\n          info='Enter your first name'\n          required\n          value={inputValue}\n          onChange={(e: ChangeEvent<HTMLInputElement>) => {\n            setSuccess('');\n            setInputValue(e.target.value);\n          }}\n        />\n      </Flex>\n    </Form>\n  );\n};\n\nSimpleFormDemo.args = {\n  withBanners: false\n};\n\nSimpleFormDemo.argTypes = {\n  withBanners: { control: { type: 'boolean' } }\n};\n"]}

package/lib/rte/Editor/Editor.stories.d.ts

@@ -3,6 +3,7 @@ import { Meta } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 export declare const EditorDemo: () => JSX.Element;
+export declare const EmptyEditorDemo: () => JSX.Element;
 export declare const ReadonlyFormField: () => JSX.Element;
 export declare const CustomComponentDemo: () => JSX.Element;
 export declare const RichTextEditorWithLogs: () => JSX.Element;

package/lib/rte/Editor/Editor.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}
+{"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;AAiBxC,wBAGU;AAIV,eAAO,MAAM,UAAU,mBAmBtB,CAAC;AAEF,eAAO,MAAM,eAAe,mBAmB3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mBAc7B,CAAC;AA4BF,eAAO,MAAM,mBAAmB,mBA6B/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAkClC,CAAC;AAEF,eAAO,MAAM,6BAA6B,mBA8BzC,CAAC"}

package/lib/rte/Editor/Editor.stories.js

@@ -15,7 +15,15 @@ export const EditorDemo = () => {
         const src = URL.createObjectURL(image);
         editorRef.current?.appendImage({ src, alt: image.name }, id);
     };
-    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onImageAdded: onImageAdded, onFocus: action('Editor has focus'), onBlur: action('Editor has blurred'), defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p></body>' }, void 0));
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onFocus: action('Editor focused'), onBlur: action('Editor blurred'), onImageAdded: onImageAdded, defaultValue: '<body><p>Hi mom <a href="https://google.com">link</a></p></body>' }, void 0));
+};
+export const EmptyEditorDemo = () => {
+    const editorRef = useRef(null);
+    const onImageAdded = (image, id) => {
+        const src = URL.createObjectURL(image);
+        editorRef.current?.appendImage({ src, alt: image.name }, id);
+    };
+    return (_jsx(Editor, { ref: editorRef, label: label, toolbar: ['inline-styling', 'lists', 'indentation', 'images', 'links'], onImageAdded: onImageAdded, onFocus: action('Editor has focus'), onBlur: action('Editor has blurred'), placeholder: 'Type some stuff in here' }, void 0));
 };
 export const ReadonlyFormField = () => {
     return (_jsx(Editor, { label: label, readOnly: true, defaultValue: `<article class="main-page-content" lang="en-US"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href="/en-US/docs/Web/CSS">CSS</a>) or functionality/behavior (<a href="/en-US/docs/Web/JavaScript">JavaScript</a>).</p>

package/lib/rte/Editor/Editor.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n    />\n  );\n};\n\nexport const ReadonlyFormField = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nclass PegaCustomElement extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const mountPoint = document.createElement('span');\n    this.appendChild(mountPoint);\n    ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n  }\n}\n\nexport const CustomComponentDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>'\n      customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}
+{"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport ReactDOM from 'react-dom';\nimport { action } from '@storybook/addon-actions';\nimport { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  CardFooter,\n  Flex,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\nimport { EditorState, Editor } from '@pega/cosmos-react-rte';\n\nexport default {\n  title: 'RTE/Editor',\n  component: Editor\n} as Meta;\n\nconst label = 'Form field label';\n\nexport const EditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onFocus={action('Editor focused')}\n      onBlur={action('Editor blurred')}\n      onImageAdded={onImageAdded}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p></body>'\n    />\n  );\n};\n\nexport const EmptyEditorDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n      onImageAdded={onImageAdded}\n      onFocus={action('Editor has focus')}\n      onBlur={action('Editor has blurred')}\n      placeholder='Type some stuff in here'\n    />\n  );\n};\n\nexport const ReadonlyFormField = () => {\n  return (\n    <Editor\n      label={label}\n      readOnly\n      defaultValue={`<article class=\"main-page-content\" lang=\"en-US\"><h1>HTML: HyperText Markup Language</h1><div><p><strong>HTML</strong> (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (<a href=\"/en-US/docs/Web/CSS\">CSS</a>) or functionality/behavior (<a href=\"/en-US/docs/Web/JavaScript\">JavaScript</a>).</p>\n      <p>\"Hypertext\" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.</p>\n      <p>HTML uses \"markup\" to annotate text, images, and other content for display in a Web browser. HTML markup includes special \"elements\" such as <a href=\"/en-US/docs/Web/HTML/Element/head\"><code>&lt;head&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code>&lt;title&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code>&lt;body&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code>&lt;header&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code>&lt;footer&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code>&lt;article&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code>&lt;section&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code>&lt;p&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code>&lt;div&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code>&lt;span&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code>&lt;img&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code>&lt;aside&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code>&lt;audio&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code>&lt;canvas&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code>&lt;datalist&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code>&lt;details&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code>&lt;embed&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code>&lt;nav&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code>&lt;output&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code>&lt;progress&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code>&lt;video&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code>&lt;ul&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code>&lt;ol&gt;</code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code>&lt;li&gt;</code></a> and many others.</p>\n      <p>An HTML element is set off from other text in a document by \"tags\", which consist of the element name surrounded by \"<code>&lt;</code>\" and \"<code>&gt;</code>\".&nbsp; The name of an element inside a tag is case insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the <code>&lt;title&gt;</code> tag can be written as <code>&lt;Title&gt;</code>, <code>&lt;TITLE&gt;</code>, or in any other way.</p>\n\n      <div id=\"on-github\" class=\"on-github\"><h3>Found a problem with this page?</h3><ul><li><a href=\"https://github.com/mdn/content/edit/main/files/en-us/web/html/index.md\" title=\"You're going to need to sign in to GitHub first (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Edit on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/blob/main/files/en-us/web/html/index.md\" title=\"Folder: en-us/web/html (Opens in a new tab)\" target=\"_blank\" rel=\"noopener noreferrer\">Source on <b>GitHub</b></a></li><li><a href=\"https://github.com/mdn/content/issues/new?body=MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A%0A%23%23%23%23+What+information+was+incorrect%2C+unhelpful%2C+or+incomplete%3F%0A%0A%0A%23%23%23%23+Specific+section+or+headline%3F%0A%0A%0A%23%23%23%23+What+did+you+expect+to+see%3F%0A%0A%0A%23%23%23%23+Did+you+test+this%3F+If+so%2C+how%3F%0A%0A%0A%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EMDN+Content+page+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60en-us%2Fweb%2Fhtml%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fblob%2Fmain%2Ffiles%2Fen-us%2Fweb%2Fhtml%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Fcontent%2Fcommit%2F775662998e66813a612e3ff27e02f2ada867bc17%0A*+Document+last+modified%3A+2021-10-03T00%3A01%3A51.000Z%0A%0A%3C%2Fdetails%3E&amp;title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&amp;labels=needs-triage%2CContent%3AHTML\" title=\"This will take you to https://github.com/mdn/content to file a new issue\" target=\"_blank\" rel=\"noopener noreferrer\">Report a problem with this content on <b>GitHub</b></a></li><li>Want to fix the problem yourself? See <a href=\"https://github.com/mdn/content/blob/main/README.md\" target=\"_blank\" rel=\"noopener noreferrer\">our Contribution guide</a>.</li></ul></div>\n      `}\n    />\n  );\n};\n\nconst PegaCustom = ({ children }: { children: string }) => {\n  return (\n    <p\n      style={{ color: 'blue', textTransform: 'uppercase' }}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{ __html: children }}\n    />\n  );\n};\n\nclass PegaCustomElement extends HTMLElement {\n  removeElements() {\n    while (this.firstChild) {\n      this.removeChild(this.firstChild);\n    }\n  }\n\n  connectedCallback() {\n    const inner = this.innerHTML;\n    this.removeElements();\n    const mountPoint = document.createElement('span');\n    this.appendChild(mountPoint);\n    ReactDOM.render(<PegaCustom>{inner}</PegaCustom>, mountPoint);\n  }\n}\n\nexport const CustomComponentDemo = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [editor, setEditor] = useState({} as TinymceEditor);\n\n  const onCustomAction = () => {\n    editor.insertContent('<pega-custom>Inserted from toolbar</pega-custom>');\n  };\n\n  return (\n    <Editor\n      ref={editorRef}\n      label={label}\n      toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n      defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><pega-custom>Hello from custom element.</pega-custom><p>hi</p></body>'\n      customComponents={[{ customElement: PegaCustomElement, name: 'pega-custom' }]}\n      customActions={[\n        {\n          icon: 'pega',\n          text: 'Insert a custom element',\n          onMouseDown: () => {\n            onCustomAction();\n          }\n        }\n      ]}\n      onInit={initializedEditor => {\n        setEditor(initializedEditor);\n      }}\n    />\n  );\n};\n\nexport const RichTextEditorWithLogs = () => {\n  const editorRef = useRef<EditorState>(null);\n  const [content, setContent] = useState<string | undefined>();\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    editorRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  const showContent = (type: 'html' | 'plain_text' | 'rich_text') => {\n    if (type === 'html') setContent(editorRef.current?.getHtml());\n    else if (type === 'plain_text') setContent(editorRef.current?.getPlainText());\n    else if (type === 'rich_text') setContent(editorRef.current?.getRichText());\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Editor\n        ref={editorRef}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n        onImageAdded={onImageAdded}\n        label='Rich text editor with logs'\n        info='Click on the buttons below to show the different formatted outputs of the RTE'\n      />\n\n      <Flex container={{ gap: 1 }}>\n        <Button onClick={() => showContent('html')}>Show HTML</Button>\n        <Button onClick={() => showContent('plain_text')}>Show plain text</Button>\n        <Button onClick={() => showContent('rich_text')}>Show rich text</Button>\n      </Flex>\n\n      <Text>{content}</Text>\n    </Flex>\n  );\n};\n\nexport const RichTextEditorHtmlParsingDemo = () => {\n  const [html, setHtml] = useState('<p>Hello world!</p>');\n  const rteRef = useRef<EditorState>(null);\n\n  const onImageAdded = (image: File, id: string) => {\n    const src = URL.createObjectURL(image);\n    rteRef.current?.appendImage({ src, alt: image.name }, id);\n  };\n\n  return (\n    <Flex container={{ direction: 'column', gap: 2 }}>\n      <Card>\n        <CardContent>\n          <TextArea value={html} onChange={e => setHtml(e.target.value)} />\n        </CardContent>\n        <CardFooter>\n          <Button onClick={() => rteRef.current?.insertHtml(html.trim(), true)}>\n            Overwrite RTE with new HTML\n          </Button>\n        </CardFooter>\n      </Card>\n      <Editor\n        defaultValue={html}\n        onImageAdded={onImageAdded}\n        ref={rteRef}\n        label={label}\n        toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n      />\n    </Flex>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pega/cosmos-react-demos",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "author": "Pegasystems",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -20,14 +20,14 @@
     "build": "tsc -b"
   },
   "dependencies": {
-    "@pega/cosmos-react-build": "2.1.1",
-    "@pega/cosmos-react-condition-builder": "2.1.1",
-    "@pega/cosmos-react-core": "2.1.1",
-    "@pega/cosmos-react-cs": "2.1.1",
-    "@pega/cosmos-react-dnd": "2.1.1",
-    "@pega/cosmos-react-rte": "2.1.1",
-    "@pega/cosmos-react-social": "2.1.1",
-    "@pega/cosmos-react-work": "2.1.1",
+    "@pega/cosmos-react-build": "2.1.2",
+    "@pega/cosmos-react-condition-builder": "2.1.2",
+    "@pega/cosmos-react-core": "2.1.2",
+    "@pega/cosmos-react-cs": "2.1.2",
+    "@pega/cosmos-react-dnd": "2.1.2",
+    "@pega/cosmos-react-rte": "2.1.2",
+    "@pega/cosmos-react-social": "2.1.2",
+    "@pega/cosmos-react-work": "2.1.2",
     "emoji-mart": "^3.0.1",
     "polished": "^4.1.0",
     "react": "^16.14.0 || ^17.0.0",