npm - @pega/cosmos-react-demos - Versions diffs - 5.0.0-dev.10.5 → 5.0.0-dev.11.0 - Mend

@pega/cosmos-react-demos 5.0.0-dev.10.5 → 5.0.0-dev.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/jsx/work/Stakeholders/Stakeholders.stories.jsx CHANGED Viewed

@@ -7,7 +7,7 @@ export default {
     title: 'Work/Stakeholders',
     component: Stakeholders
 };
-export const StakeHoldersDemo = () => {
+export const StakeHoldersDemo = (args) => {
     const [loading, setLoading] = useState(true);
     const [mode, setMode] = useState();
     const [editing, setEditing] = useState(null);
@@ -78,14 +78,22 @@ export const StakeHoldersDemo = () => {
     }, [mode]);
     useEffect(() => {
     }, [editing]);
-    return (<Stakeholders loading={loading} items={useMemo(() => addActions(mockStakeholders.slice(0, 3)), [addActions, mockStakeholders])} count={loading ? undefined : mockStakeholders.length} onAddNew={() => {
-            setMode('add');
-            setFormLoading(true);
-            mockNetworkReq().then(() => setFormLoading(false));
-        }} form={form} onViewAll={() => {
+    return (<Stakeholders loading={loading} items={useMemo(() => addActions(mockStakeholders.slice(0, 3)), [addActions, mockStakeholders])} count={loading ? undefined : mockStakeholders.length} onAddNew={args.hideAddNew
+            ? undefined
+            : () => {
+                setMode('add');
+                setFormLoading(true);
+                mockNetworkReq().then(() => setFormLoading(false));
+            }} form={form} onViewAll={() => {
             setMode('viewAll');
             setViewAllLoading(true);
             mockNetworkReq().then(() => setViewAllLoading(false));
         }} viewAll={viewAll}/>);
 };
+StakeHoldersDemo.args = {
+    hideAddNew: false
+};
+StakeHoldersDemo.argTypes = {
+    hideAddNew: { control: { type: 'boolean' }, table: { disable: true } }
+};
 //# sourceMappingURL=Stakeholders.stories.jsx.map

package/jsx/work/Stakeholders/Stakeholders.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Stakeholders.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders } from '@pega/cosmos-react-work';\nimport type { StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n AddAndEditForm,\n mockNetworkReq,\n mockRoles,\n useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n title: 'Work/Stakeholders',\n component: Stakeholders\n} as Meta;\n\nexport const StakeHoldersDemo: StoryFn = () => {\n const [loading, setLoading] = useState(true);\n const [mode, setMode] = useState<undefined \| 'add' \| 'viewAll'>();\n const [editing, setEditing] = useState<Stakeholder['id'] \| null>(null);\n const [formLoading, setFormLoading] = useState(false);\n const [viewAllLoading, setViewAllLoading] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n // Grab some mock data...\n const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n setLoading(false);\n });\n\n const [editData, setEditData] = useState<\n StakeholdersProps['form']['rendererProps'] \| undefined\n >();\n\n // Merges built-in available actions with stakeholder objects.\n const addActions = useCallback(\n (items: Stakeholder[]) => {\n return items.map(stakeholder => {\n return {\n ...stakeholder,\n onEdit: () => {\n setFormLoading(true);\n setEditing(stakeholder.id);\n setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n mockNetworkReq().then(() => setFormLoading(false));\n },\n onRemove: () => {\n setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n }\n };\n });\n },\n [mockStakeholders]\n );\n\n const form: StakeholdersProps['form'] = useMemo(() => {\n return {\n // Set this to true when fetching view metadata for the form or during submit validation.\n loading: formLoading,\n // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n roles: mode === 'add' ? mockRoles : undefined,\n // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n /*\n A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n */\n renderer: AddAndEditForm,\n rendererProps: editData,\n onSubmit: ({ selectedRoleName, closeForm }) => {\n setFormLoading(true);\n action(`The selected role is: ${selectedRoleName}`);\n // Create or update the stakeholder resource.\n mockNetworkReq().then(closeForm);\n },\n onDismiss: ({ closeForm }) => {\n closeForm();\n },\n onAfterClose: () => {\n // Clean up loading state when the form is closed.\n setFormLoading(false);\n setEditing(null);\n setEditData(undefined);\n setMode(undefined);\n }\n };\n }, [mode, formLoading, mockRoles, editing, editData]);\n\n const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n let viewAllItems = mockStakeholders;\n\n // When the user has entered a search value we can filter the array or api request.\n if (viewAllSearchValue) {\n // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n }\n\n return {\n // Set this to true when fetching data for the view all modal.\n loading: viewAllLoading,\n // Even when loading is true this must be an array, empty or not.\n items: addActions(viewAllItems),\n // The search string will be handed back as the arg, pass a state setter and filter off of that.\n onSearch: setViewAllSearchValue,\n onAfterClose: () => {\n // Clean up loading state when the modal is closed.\n if (viewAllLoading) setViewAllLoading(false);\n setViewAllSearchValue('');\n }\n };\n }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n useEffect(() => {\n // Orchestrate based on mode state if needed.\n }, [mode]);\n\n useEffect(() => {\n // Orchestrate based on editing state if needed.\n }, [editing]);\n\n return (\n <Stakeholders\n loading={loading}\n items={useMemo(\n () => addActions(mockStakeholders.slice(0, 3)),\n [addActions, mockStakeholders]\n )}\n count={loading ? undefined : mockStakeholders.length}\n onAddNew={() => {\n setMode('add');\n setFormLoading(true);\n mockNetworkReq().then(() => setFormLoading(false));\n }}\n form={form}\n onViewAll={() => {\n setMode('viewAll');\n setViewAllLoading(true);\n mockNetworkReq().then(() => setViewAllLoading(false));\n }}\n viewAll={viewAll}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"Stakeholders.stories.jsx","sourceRoot":"","sources":["../../../src/work/Stakeholders/Stakeholders.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,EACL,cAAc,EACd,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,sBAAsB,CAAC;AAE9B,eAAe;IACb,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,YAAY;CAChB,CAAC;AAMV,MAAM,CAAC,MAAM,gBAAgB,GAAoC,CAAC,IAA4B,EAAE,EAAE;IAChG,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,EAAiC,CAAC;IAClE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA2B,IAAI,CAAC,CAAC;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAGjE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,mBAAmB,CAAC,GAAG,EAAE;QACvE,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC,CAAC,CAAC;IAEH,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,EAErC,CAAC;IAGJ,MAAM,UAAU,GAAG,WAAW,CAC5B,CAAC,KAAoB,EAAE,EAAE;QACvB,OAAO,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;YAC7B,OAAO;gBACL,GAAG,WAAW;gBACd,MAAM,EAAE,GAAG,EAAE;oBACX,cAAc,CAAC,IAAI,CAAC,CAAC;oBACrB,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;oBAC3B,WAAW,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;oBACzE,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;gBACrD,CAAC;gBACD,QAAQ,EAAE,GAAG,EAAE;oBACb,mBAAmB,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC;gBAC5E,CAAC;aACF,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAC;IAEF,MAAM,IAAI,GAA8B,OAAO,CAAC,GAAG,EAAE;QACnD,OAAO;YAEL,OAAO,EAAE,WAAW;YAEpB,KAAK,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;YAE7C,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS;YAK1F,QAAQ,EAAE,cAAc;YACxB,aAAa,EAAE,QAAQ;YACvB,QAAQ,EAAE,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC5C,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,MAAM,CAAC,yBAAyB,gBAAgB,EAAE,CAAC,CAAC;gBAEpD,cAAc,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACnC,CAAC;YACD,SAAS,EAAE,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC3B,SAAS,EAAE,CAAC;YACd,CAAC;YACD,YAAY,EAAE,GAAG,EAAE;gBAEjB,cAAc,CAAC,KAAK,CAAC,CAAC;gBACtB,UAAU,CAAC,IAAI,CAAC,CAAC;gBACjB,WAAW,CAAC,SAAS,CAAC,CAAC;gBACvB,OAAO,CAAC,SAAS,CAAC,CAAC;YACrB,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtD,MAAM,OAAO,GAAiC,OAAO,CAAC,GAAG,EAAE;QACzD,IAAI,YAAY,GAAG,gBAAgB,CAAC;QAGpC,IAAI,kBAAkB,EAAE;YAEtB,MAAM,WAAW,GAAG,mBAAmB,CAAC,kBAAkB,EAAE,UAAU,CAAC,CAAC;YAExE,YAAY,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,OAAiB,CAAC,CAAC,CAAC;SAC9F;QAED,OAAO;YAEL,OAAO,EAAE,cAAc;YAEvB,KAAK,EAAE,UAAU,CAAC,YAAY,CAAC;YAE/B,QAAQ,EAAE,qBAAqB;YAC/B,YAAY,EAAE,GAAG,EAAE;gBAEjB,IAAI,cAAc;oBAAE,iBAAiB,CAAC,KAAK,CAAC,CAAC;gBAC7C,qBAAqB,CAAC,EAAE,CAAC,CAAC;YAC5B,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,cAAc,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEvE,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,SAAS,CAAC,GAAG,EAAE;IAEf,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,CAAC,YAAY,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,OAAO,CACZ,GAAG,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAC9C,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAC/B,CAAC,CACF,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,CACrD,QAAQ,CAAC,CACP,IAAI,CAAC,UAAU;YACb,CAAC,CAAC,SAAS;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,OAAO,CAAC,KAAK,CAAC,CAAC;gBACf,cAAc,CAAC,IAAI,CAAC,CAAC;gBACrB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC;YACrD,CAAC,CACN,CACD,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,SAAS,CAAC,CAAC,GAAG,EAAE;YACd,OAAO,CAAC,SAAS,CAAC,CAAC;YACnB,iBAAiB,CAAC,IAAI,CAAC,CAAC;YACxB,cAAc,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC,CACF,OAAO,CAAC,CAAC,OAAO,CAAC,EACjB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,IAAI,GAAG;IACtB,UAAU,EAAE,KAAK;CAClB,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACvE,CAAC","sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport { createStringMatcher } from '@pega/cosmos-react-core';\nimport { Stakeholders } from '@pega/cosmos-react-work';\nimport type { StakeholdersProps, Stakeholder } from '@pega/cosmos-react-work';\n\nimport {\n AddAndEditForm,\n mockNetworkReq,\n mockRoles,\n useMockStakeholders\n} from './Stakeholders.mocks';\n\nexport default {\n title: 'Work/Stakeholders',\n component: Stakeholders\n} as Meta;\n\ninterface StakeHoldersStoryProps {\n hideAddNew?: boolean;\n}\n\nexport const StakeHoldersDemo: StoryFn<StakeHoldersStoryProps> = (args: StakeHoldersStoryProps) => {\n const [loading, setLoading] = useState(true);\n const [mode, setMode] = useState<undefined \| 'add' \| 'viewAll'>();\n const [editing, setEditing] = useState<Stakeholder['id'] \| null>(null);\n const [formLoading, setFormLoading] = useState(false);\n const [viewAllLoading, setViewAllLoading] = useState(false);\n const [viewAllSearchValue, setViewAllSearchValue] = useState('');\n\n // Grab some mock data...\n const [mockStakeholders, setMockStakeholders] = useMockStakeholders(() => {\n setLoading(false);\n });\n\n const [editData, setEditData] = useState<\n StakeholdersProps['form']['rendererProps'] \| undefined\n >();\n\n // Merges built-in available actions with stakeholder objects.\n const addActions = useCallback(\n (items: Stakeholder[]) => {\n return items.map(stakeholder => {\n return {\n ...stakeholder,\n onEdit: () => {\n setFormLoading(true);\n setEditing(stakeholder.id);\n setEditData(mockStakeholders.find(ms => ms.id === stakeholder.id)?.data);\n mockNetworkReq().then(() => setFormLoading(false));\n },\n onRemove: () => {\n setMockStakeholders(cur => cur.filter(({ id }) => id !== stakeholder.id));\n }\n };\n });\n },\n [mockStakeholders]\n );\n\n const form: StakeholdersProps['form'] = useMemo(() => {\n return {\n // Set this to true when fetching view metadata for the form or during submit validation.\n loading: formLoading,\n // Represents \"available\" roles for a stakeholder. Set to undefined when choosing not to present them as options.\n roles: mode === 'add' ? mockRoles : undefined,\n // Represents the current role of a stakeholder if they have one. When undefined the first role in the roles array with be selected in the UI.\n currentRole: editing ? mockStakeholders.find(({ id }) => id === editing)?.role : undefined,\n /*\n A function that will be invoked by React's createElement. If only a simple function is needed then an inline arrow is ok.\n * If local state(hooks) is desired best to define a stable component definition outside of the parent component's function body.\n */\n renderer: AddAndEditForm,\n rendererProps: editData,\n onSubmit: ({ selectedRoleName, closeForm }) => {\n setFormLoading(true);\n action(`The selected role is: ${selectedRoleName}`);\n // Create or update the stakeholder resource.\n mockNetworkReq().then(closeForm);\n },\n onDismiss: ({ closeForm }) => {\n closeForm();\n },\n onAfterClose: () => {\n // Clean up loading state when the form is closed.\n setFormLoading(false);\n setEditing(null);\n setEditData(undefined);\n setMode(undefined);\n }\n };\n }, [mode, formLoading, mockRoles, editing, editData]);\n\n const viewAll: StakeholdersProps['viewAll'] = useMemo(() => {\n let viewAllItems = mockStakeholders;\n\n // When the user has entered a search value we can filter the array or api request.\n if (viewAllSearchValue) {\n // For client side searches cosmos offers utils such as createStringMatcher for creating RegExp with params.\n const filterRegex = createStringMatcher(viewAllSearchValue, 'boundary');\n // Asserting as string since, in this demo, primary is a string. But type is a non nullable ReactNode.\n viewAllItems = mockStakeholders.filter(({ primary }) => filterRegex.test(primary as string));\n }\n\n return {\n // Set this to true when fetching data for the view all modal.\n loading: viewAllLoading,\n // Even when loading is true this must be an array, empty or not.\n items: addActions(viewAllItems),\n // The search string will be handed back as the arg, pass a state setter and filter off of that.\n onSearch: setViewAllSearchValue,\n onAfterClose: () => {\n // Clean up loading state when the modal is closed.\n if (viewAllLoading) setViewAllLoading(false);\n setViewAllSearchValue('');\n }\n };\n }, [viewAllLoading, mockStakeholders, viewAllSearchValue, addActions]);\n\n useEffect(() => {\n // Orchestrate based on mode state if needed.\n }, [mode]);\n\n useEffect(() => {\n // Orchestrate based on editing state if needed.\n }, [editing]);\n\n return (\n <Stakeholders\n loading={loading}\n items={useMemo(\n () => addActions(mockStakeholders.slice(0, 3)),\n [addActions, mockStakeholders]\n )}\n count={loading ? undefined : mockStakeholders.length}\n onAddNew={\n args.hideAddNew\n ? undefined\n : () => {\n setMode('add');\n setFormLoading(true);\n mockNetworkReq().then(() => setFormLoading(false));\n }\n }\n form={form}\n onViewAll={() => {\n setMode('viewAll');\n setViewAllLoading(true);\n mockNetworkReq().then(() => setViewAllLoading(false));\n }}\n viewAll={viewAll}\n />\n );\n};\n\nStakeHoldersDemo.args = {\n hideAddNew: false\n};\n\nStakeHoldersDemo.argTypes = {\n hideAddNew: { control: { type: 'boolean' }, table: { disable: true } }\n};\n"]}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts CHANGED Viewed

@@ -1,10 +1,13 @@
 import type { StoryFn } from '@storybook/react';
+import type { FocusEventHandler, MouseEventHandler } from 'react';
 import type { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 interface RadioCheckGroupStoryProps extends RadioCheckGroupProps {
     showAdditionalInfo?: boolean;
     showNestedAdditionalInfo?: boolean;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onClick?: MouseEventHandler<HTMLInputElement>;
 }
 export declare const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;
 export declare const RadioButtonCardGroup: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>>;

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;~~AAUtD~~,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAIhF,wBA6BU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;~~CACpC~~;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,~~CA+E3F~~,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAsF3F,CAAC"}
1	+ {"version":3,"file":"RadioButtonGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAUlE,OAAO,KAAK,EAAE,oBAAoB,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;;AAIhF,wBA6BU;AAEV,UAAU,yBAA0B,SAAQ,oBAAoB;IAC9D,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC7C,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAmF3F,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,EAAE,UAAU,CAAC,CAsF3F,CAAC"}

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js CHANGED Viewed

@@ -36,7 +36,7 @@ export const RadioButtonGroupDemo = (args) => {
             ? {
                 content: 'Some additional info'
             }
-            : undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true, additionalInfo: {
+            : undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, onClick: args.onClick, onBlur: args.onBlur, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true, additionalInfo: {
                     content: 'Some additional info'
                 } }), _jsx(RadioButton, { label: 'Apple', id: 'Apple', additionalInfo: {
                     content: 'Some additional info'
@@ -48,7 +48,7 @@ export const RadioButtonGroupDemo = (args) => {
             ? {
                 content: 'Some additional info'
             }
-            : undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }), _jsx(RadioButton, { label: 'Orange', id: 'Orange' })] }));
+            : undefined, label: args.label, name: 'Fruit', labelHidden: args.labelHidden, inline: args.inline, autoStack: args.autoStack, required: args.required, disabled: args.disabled, readOnly: args.readOnly, status: args.status, info: args.info, onClick: args.onClick, onBlur: args.onBlur, children: [_jsx(RadioButton, { label: 'Banana', id: 'Banana', defaultChecked: true }), _jsx(RadioButton, { label: 'Apple', id: 'Apple' }), _jsx(RadioButton, { label: 'Mango', id: 'Mango' }), _jsx(RadioButton, { label: 'Orange', id: 'Orange' })] }));
 };
 export const RadioButtonCardGroup = (args) => {
     return (_jsxs(RadioButtonGroup, { additionalInfo: args.showAdditionalInfo

package/lib/core/RadioButtonGroup/RadioButtonGroup.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n status={args.status}\n info={args.info}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n status={args.status}\n info={args.info}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </RadioButtonGroup>\n );\n};\n"]}
1	+ {"version":3,"file":"RadioButtonGroup.stories.js","sourceRoot":"","sources":["../../../src/core/RadioButtonGroup/RadioButtonGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport type { FocusEventHandler, MouseEventHandler } from 'react';\n\nimport {\n FieldGroup,\n FieldValueList,\n Flex,\n RadioButton,\n RadioButtonGroup,\n Text\n} from '@pega/cosmos-react-core';\nimport type { RadioCheckGroupProps, OmitStrict } from '@pega/cosmos-react-core';\n\nimport { Paragraph, StyledImage } from './RadioButtonGroup.styles';\n\nexport default {\n title: 'Core/RadioButtonGroup',\n component: RadioButtonGroup,\n args: {\n label: 'What do you want to eat?',\n labelHidden: false,\n inline: false,\n autoStack: true,\n required: false,\n disabled: false,\n readOnly: false,\n showAdditionalInfo: false,\n showNestedAdditionalInfo: false,\n status: undefined,\n info: 'You must select it'\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n inline: { control: { type: 'boolean' } },\n autoStack: { control: { type: 'boolean' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } },\n showAdditionalInfo: { control: { type: 'boolean' } },\n showNestedAdditionalInfo: { control: { type: 'boolean' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n info: { control: { type: 'text', label: 'Helper text' } }\n }\n} as Meta;\n\ninterface RadioCheckGroupStoryProps extends RadioCheckGroupProps {\n showAdditionalInfo?: boolean;\n showNestedAdditionalInfo?: boolean;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n onClick?: MouseEventHandler<HTMLInputElement>;\n}\n\nexport const RadioButtonGroupDemo: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return args.showNestedAdditionalInfo ? (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\n >\n <RadioButton\n label='Banana'\n id='Banana'\n defaultChecked\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Apple'\n id='Apple'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Mango'\n id='Mango'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n <RadioButton\n label='Orange'\n id='Orange'\n additionalInfo={{\n content: 'Some additional info'\n }}\n />\n </RadioButtonGroup>\n ) : (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={args.label}\n name='Fruit'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n status={args.status}\n info={args.info}\n onClick={args.onClick}\n onBlur={args.onBlur}\n >\n <RadioButton label='Banana' id='Banana' defaultChecked />\n <RadioButton label='Apple' id='Apple' />\n <RadioButton label='Mango' id='Mango' />\n <RadioButton label='Orange' id='Orange' />\n </RadioButtonGroup>\n );\n};\n\nexport const RadioButtonCardGroup: StoryFn<OmitStrict<RadioCheckGroupStoryProps, 'children'>> = (\n args: OmitStrict<RadioCheckGroupStoryProps, 'children'>\n) => {\n return (\n <RadioButtonGroup\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n variant='card'\n label='Which visuals appear satisfying?'\n labelHidden={args.labelHidden}\n inline={args.inline}\n autoStack={args.autoStack}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n >\n <RadioButton\n additionalInfo={\n args.showNestedAdditionalInfo\n ? {\n content: 'Some additional info'\n }\n : undefined\n }\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>A paragraph</Text>\n <Paragraph>\n This is a paragraph of text. It is meant to appear visually satisfying amongst the\n other options in this group.\n </Paragraph>\n </Flex>\n }\n id='paragraph'\n defaultChecked\n />\n <RadioButton\n label={\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n </Flex>\n }\n id='space-photo'\n />\n <RadioButton\n label={\n <Flex container={{ gap: 1, alignItems: 'start' }}>\n <StyledImage\n src='https://thumbor.forbes.com/thumbor/960x0/https%3A%2F%2Fspecials-images.forbesimg.com%2Fdam%2Fimageserve%2F765877054%2F960x0.jpg%3Ffit%3Dscale'\n alt='space'\n />\n <Flex container={{ direction: 'column', gap: 1 }}>\n <Text variant='h4'>Space</Text>\n <Paragraph>\n Space is the final frontier. There is so much to discover within Constellation!\n </Paragraph>\n </Flex>\n </Flex>\n }\n id='cosmos'\n />\n <RadioButton\n label={\n <FieldGroup name='Gold service plan' headingTag='h3'>\n <FieldValueList\n fields={[\n { id: 'service', name: 'Service length', value: '1 year' },\n { id: 'monthly-cost', name: 'Monthly cost', value: '$180.00' },\n { id: 'total-cost', name: 'Total cost', value: '$2,160.00' }\n ]}\n />\n </FieldGroup>\n }\n id='phone-plan'\n />\n </RadioButtonGroup>\n );\n};\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,wBAAwB,CAAC;;AAIvE,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAwDhD,CAAC;AA2BF,eAAO,MAAM,eAAe,EAAE,OAmB7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAc/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,OA6BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,~~OAkCpC~~,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,OA8B3C,CAAC"}
1	+ {"version":3,"file":"Editor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAgBtD,OAAO,KAAK,EAAE,WAAW,EAAe,MAAM,wBAAwB,CAAC;;AAIvE,wBAGU;AAEV,UAAU,gBAAiB,SAAQ,WAAW;IAC5C,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAwDhD,CAAC;AA2BF,eAAO,MAAM,eAAe,EAAE,OAmB7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,OAc/B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,OA6BjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAoDpC,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,OA8B3C,CAAC"}

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

@@ -97,7 +97,14 @@ export const RichTextEditorWithLogs = () => {
         else if (type === 'rich_text')
             setContent(editorRef.current?.getRichText());
     };
-    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Editor, { ref: editorRef, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" })] }), _jsx(Text, { children: content })] }));
+    return (_jsxs(Flex, { container: { direction: 'column', gap: 2 }, children: [_jsx(Editor, { ref: editorRef, toolbar: ['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation'], onImageAdded: onImageAdded, label: 'Rich text editor with logs', info: 'Click on the buttons below to show the different formatted outputs of the RTE' }), _jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Button, { onClick: () => editorRef.current?.focus(), children: "Focus" }), _jsx(Button, { onClick: () => showContent('html'), children: "Show HTML" }), _jsx(Button, { onClick: () => showContent('plain_text'), children: "Show plain text" }), _jsx(Button, { onClick: () => showContent('rich_text'), children: "Show rich text" }), _jsx(Button, { onClick: () => editorRef.current?.insertText('Some text'), children: "Insert text" }), _jsx(Button, { onClick: () => editorRef.current?.clear(), children: "Clear" }), _jsx(Button, { onClick: () => {
+                            const clipboardData = new DataTransfer();
+                            clipboardData.setData('text/html', '<img src="https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg" alt="Pega" />');
+                            const clipboardEvent = new ClipboardEvent('paste', {
+                                clipboardData
+                            });
+                            editorRef.current?.getEditor()?.dispatch('paste', clipboardEvent);
+                        }, children: "Paste image" })] }), _jsx(Text, { "data-testid": 'textRegion', children: content })] }));
 };
 export const RichTextEditorHtmlParsingDemo = () => {
     const [html, setHtml] = useState('<p>Hello world!</p>');

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Link,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps, EditorState } from '@pega/cosmos-react-rte';\n\nimport { createPegaCustomElement } from './Editor.mocks';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\ninterface EditorStoryProps extends EditorProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const EditorDemo: StoryFn<EditorStoryProps> = (args: EditorStoryProps) => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage(\n {\n src,\n alt: image.name,\n attachmentId: 'sample-id'\n },\n id\n );\n };\n\n return (\n <Editor\n ref={editorRef}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onChange={action('Editor changed')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"Example alt text\" src=\"http://via.placeholder.com/640x360\"/></body>'\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nEditorDemo.args = {\n showAdditionalInfo: false,\n label: 'Form field label',\n labelHidden: false,\n info: 'Enter some value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nEditorDemo.argTypes = {\n showAdditionalInfo: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const EmptyEditorDemo: StoryFn = () => {\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='Form field 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: StoryFn = () => {\n return (\n <Editor\n label='Form field 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><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></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><</code>\" and \"<code>></code>\".  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><title></code> tag can be written as <code><Title></code>, <code><TITLE></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&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&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\nexport const CustomComponentDemo: StoryFn = () => {\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='Form field label'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ createCustomElement: createPegaCustomElement, 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: StoryFn = () => {\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: StoryFn = () => {\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='Form field label'\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}
1	+ {"version":3,"file":"Editor.stories.js","sourceRoot":"","sources":["../../../src/rte/Editor/Editor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState, useRef } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport type { Editor as TinymceEditor } from 'tinymce';\n\nimport {\n Button,\n Card,\n CardContent,\n CardFooter,\n Flex,\n Link,\n Text,\n TextArea\n} from '@pega/cosmos-react-core';\nimport { Editor } from '@pega/cosmos-react-rte';\nimport type { EditorProps, EditorState } from '@pega/cosmos-react-rte';\n\nimport { createPegaCustomElement } from './Editor.mocks';\n\nexport default {\n title: 'RTE/Editor',\n component: Editor\n} as Meta;\n\ninterface EditorStoryProps extends EditorProps {\n showAdditionalInfo?: boolean;\n}\n\nexport const EditorDemo: StoryFn<EditorStoryProps> = (args: EditorStoryProps) => {\n const editorRef = useRef<EditorState>(null);\n\n const onImageAdded = (image: File, id: string) => {\n const src = URL.createObjectURL(image);\n editorRef.current?.appendImage(\n {\n src,\n alt: image.name,\n attachmentId: 'sample-id'\n },\n id\n );\n };\n\n return (\n <Editor\n ref={editorRef}\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n toolbar={['inline-styling', 'lists', 'indentation', 'images', 'links']}\n onFocus={action('Editor focused')}\n onBlur={action('Editor blurred')}\n onChange={action('Editor changed')}\n onImageAdded={onImageAdded}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><img alt=\"Example alt text\" src=\"http://via.placeholder.com/640x360\"/></body>'\n additionalInfo={\n args.showAdditionalInfo\n ? {\n content: (\n <Flex container={{ direction: 'column', alignItems: 'start', gap: 2 }}>\n <p>\n Lorem ipsum dolor sit amet, consectetur it, sed do tempor incididunt ut labore\n magna aliqua. Nibh praesent tristique magna sit amet. Nec tincidunt praesent\n semper feugiat nibh sed pulvinar proin gravida.\n </p>\n <p>\n Pharetra pharetra massa massa ultricies mi quis hendrerit dolor. Est velit\n egestas dui id ornare arcu odio ut. Varius sit amet mattis vulputate enim nulla\n aliquet porttitor lacus.\n </p>\n <Link href='/' target='_blank'>\n Neque vitae\n </Link>\n </Flex>\n )\n }\n : undefined\n }\n />\n );\n};\n\nEditorDemo.args = {\n showAdditionalInfo: false,\n label: 'Form field label',\n labelHidden: false,\n info: 'Enter some value',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n};\n\nEditorDemo.argTypes = {\n showAdditionalInfo: { control: { type: 'boolean' } },\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: {\n options: [undefined, 'success', 'warning', 'error', 'pending'],\n control: { type: 'select' }\n },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n};\n\nexport const EmptyEditorDemo: StoryFn = () => {\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='Form field 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: StoryFn = () => {\n return (\n <Editor\n label='Form field 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><head></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/title\"><code><title></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/body\"><code><body></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/header\"><code><header></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/footer\"><code><footer></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/article\"><code><article></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/section\"><code><section></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/p\"><code><p></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/div\"><code><div></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/span\"><code><span></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/img\"><code><img></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/aside\"><code><aside></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/audio\"><code><audio></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/datalist\"><code><datalist></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/details\"><code><details></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/embed\"><code><embed></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/nav\"><code><nav></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/output\"><code><output></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/progress\"><code><progress></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/video\"><code><video></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ul\"><code><ul></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/ol\"><code><ol></code></a>, <a href=\"/en-US/docs/Web/HTML/Element/li\"><code><li></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><</code>\" and \"<code>></code>\".  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><title></code> tag can be written as <code><Title></code>, <code><TITLE></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&title=Issue+with+%22HTML%3A+HyperText+Markup+Language%22%3A+%28short+summary+here+please%29&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\nexport const CustomComponentDemo: StoryFn = () => {\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='Form field label'\n toolbar={['inline-styling', 'lists', 'indentation', 'links', 'images']}\n defaultValue='<body><p>Hi mom <a href=\"https://google.com\">link</a></p><p>hi <pega-custom>Hello from custom element.</pega-custom></p></body>'\n customComponents={[{ createCustomElement: createPegaCustomElement, 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: StoryFn = () => {\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={() => editorRef.current?.focus()}>Focus</Button>\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 <Button onClick={() => editorRef.current?.insertText('Some text')}>Insert text</Button>\n <Button onClick={() => editorRef.current?.clear()}>Clear</Button>\n <Button\n onClick={() => {\n const clipboardData = new DataTransfer();\n clipboardData.setData(\n 'text/html',\n '<img src=\"https://www.pega.com/themes/custom/pegawww_theme/images/pega-logo.svg\" alt=\"Pega\" />'\n );\n const clipboardEvent = new ClipboardEvent('paste', {\n clipboardData\n });\n editorRef.current?.getEditor()?.dispatch('paste', clipboardEvent);\n }}\n >\n Paste image\n </Button>\n </Flex>\n\n <Text data-testid='textRegion'>{content}</Text>\n </Flex>\n );\n};\n\nexport const RichTextEditorHtmlParsingDemo: StoryFn = () => {\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='Form field label'\n toolbar={['inline-styling', 'headers', 'tables', 'links', 'images', 'lists', 'indentation']}\n />\n </Flex>\n );\n};\n"]}

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts CHANGED Viewed

@@ -3,4 +3,5 @@ import type { RichTextEditorProps } from '@pega/cosmos-react-rte';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
 export declare const RichTextEditorMDDemo: StoryFn<RichTextEditorProps>;
+export declare const RichTextEditorImperativeHandleDemo: StoryFn;
 //# sourceMappingURL=RichTextEditor.stories.d.ts.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,mBAAmB,~~EAAE~~,MAAM,wBAAwB,CAAC;;~~AAIlE~~,~~wBAqBU~~;AAEV,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,mBAAmB,~~CAsC7D~~,CAAC"}
1	+ {"version":3,"file":"RichTextEditor.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAKtD,OAAO,KAAK,EAAE,mBAAmB,EAAuB,MAAM,wBAAwB,CAAC;;AAKvF,wBAsBU;AAEV,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,mBAAmB,CA6C7D,CAAC;AAEF,eAAO,MAAM,kCAAkC,EAAE,OA0FhD,CAAC"}

package/lib/rte/RichTextEditor/RichTextEditor.stories.js CHANGED Viewed

@@ -1,6 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { Button, Flex } from '@pega/cosmos-react-core';
 import { RichTextEditor } from '@pega/cosmos-react-rte';
+import { MentionButton } from '@pega/cosmos-react-social';
 import { demoUsers } from './RichTextEditor.mocks';
 export default {
     title: 'RTE/RichTextEditor',
@@ -8,7 +10,7 @@ export default {
     args: {
         label: 'Rich text editor',
         labelHidden: false,
-        info: 'The rich text editor can be used in forms, comments, and documents',
+        info: 'The markdown editor offers dynamic rendering of markdown syntax',
         status: undefined,
         required: false,
         disabled: false,
@@ -23,6 +25,7 @@ export default {
         disabled: { control: { type: 'boolean' } },
         readOnly: { control: { type: 'boolean' } }
     }
+    // excludeStories: ['RichTextEditorImperativeHandleDemo']
 };
 export const RichTextEditorMDDemo = (args) => {
     const [users, setUsers] = useState(demoUsers);
@@ -39,8 +42,37 @@ export const RichTextEditorMDDemo = (args) => {
                 return undefined;
             return {
                 markdown: `@${item.id}:${item.primary}:user:`,
-                text: item.primary
+                text: item.primary,
+                component: MentionButton,
+                props: {
+                    id: item.id,
+                    text: item.primary,
+                    type: 'user'
+                }
             };
-        }, menu: users.length ? { items: users } : undefined, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly }));
+        }, menu: users.length ? { items: users } : undefined, markdownOnly: true, label: args.label, labelHidden: args.labelHidden, info: args.info, status: args.status, required: args.required, disabled: args.disabled, readOnly: args.readOnly, autoFocus: true }));
+};
+export const RichTextEditorImperativeHandleDemo = () => {
+    const rteRef = useRef(null);
+    const [textContent, setTextContent] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsx(RichTextEditor, { ref: rteRef, type: 'html', toolbar: ['headers', 'inline-styling', 'indentation', 'lists'], defaultValue: 'Hello, World! ' }), _jsxs(Flex, { container: { gap: 1, pad: 1 }, children: [_jsx(Button, { "data-testid": 'focusHandle', onClick: () => {
+                            rteRef.current?.focus();
+                        }, children: "Focus" }), _jsx(Button, { "data-testid": 'plainTextHandle', onClick: () => {
+                            setTextContent(rteRef.current?.getPlainText() || '');
+                        }, children: "Get plain text" }), _jsx(Button, { "data-testid": 'richTextHandle', onClick: () => {
+                            setTextContent(rteRef.current?.getRichText() || '');
+                        }, children: "Get rich text" }), _jsx(Button, { "data-testid": 'htmlHandle', onClick: () => {
+                            setTextContent(rteRef.current?.getHtml() || '');
+                        }, children: "Get HTML" }), _jsx(Button, { "data-testid": 'clearHandle', onClick: () => {
+                            rteRef.current?.clear();
+                        }, children: "Clear" }), _jsx(Button, { "data-testid": 'insertTextHandle', onClick: () => {
+                            rteRef.current?.insertText('Some text');
+                        }, children: "Insert text" }), _jsx(Button, { "data-testid": 'insertHTMLHandle', onClick: () => {
+                            rteRef.current?.insertHtml('Some text', true);
+                        }, children: "Insert HTML" }), _jsx(Button, { "data-testid": 'appendHTMLHandle', onClick: () => {
+                            rteRef.current?.insertHtml('Some text', false);
+                        }, children: "Append HTML" }), _jsx(Button, { "data-testid": 'insertEmptyHTMLHandle', onClick: () => {
+                            rteRef.current?.insertHtml('', true);
+                        }, children: "Insert empty HTML" })] }), _jsx("div", { "data-testid": 'textRegion', children: textContent })] }));
 };
 //# sourceMappingURL=RichTextEditor.stories.js.map

package/lib/rte/RichTextEditor/RichTextEditor.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextEditor.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAGjC~~,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;~~AAGxD~~,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAEnD,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,KAAK,EAAE,kBAAkB;QACzB,WAAW,EAAE,KAAK;QAClB,IAAI,EAAE,~~oEAAoE~~;~~QAC1E~~,MAAM,EAAE,SAAS;QACjB,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;QACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE;QACzD,MAAM,EAAE,EAAE,OAAO,EAAE,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC5F,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAC3C;~~CACM~~,CAAC;AAEV,MAAM,CAAC,MAAM,oBAAoB,GAAiC,CAAC,IAAyB,EAAE,EAAE;IAC9F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,SAAS,CAAC,CAAC;IAE/D,MAAM,WAAW,GAAG,CAAC,KAA0C,EAAE,EAAE;QACjE,IAAI,KAAK,CAAC,OAAO,KAAK,GAAG,EAAE;YACzB,QAAQ,CACN,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;gBACtB,OAAO,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;YACzE,CAAC,CAAC,CACH,CAAC;SACH;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,IACb,cAAc,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,0BAA0B,EAAE,CAAC,EACrE,QAAQ,EAAE,WAAW,EACrB,wBAAwB,EAAE,CAAC,EAAU,EAAE,EAAE;YACvC,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,CAAC;YAE/D,IAAI,CAAC,IAAI;gBAAE,OAAO,SAAS,CAAC;YAE5B,OAAO;gBACL,QAAQ,EAAE,IAAI,IAAI,CAAC,EAAE,IAAI,IAAI,CAAC,OAAO,QAAQ;gBAC7C,IAAI,EAAE,IAAI,CAAC,OAAO;~~aACnB~~,CAAC;QACJ,CAAC,EACD,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,EACjD,YAAY,QACZ,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,~~GACvB~~,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport type { MenuItemProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorProps } from '@pega/cosmos-react-rte';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextEditor',\n component: RichTextEditor,\n args: {\n label: 'Rich text editor',\n labelHidden: false,\n info: 'The ~~rich~~ ~~text~~ editor ~~can~~ be ~~used~~ in ~~forms,~~ ~~comments, and documents~~',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const RichTextEditorMDDemo: StoryFn<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <RichTextEditor\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary\n };\n }}\n menu={users.length ? { items: users } : undefined}\n markdownOnly\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n />\n );\n};\n"]}
1	+ {"version":3,"file":"RichTextEditor.stories.js","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextEditor.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useRef, useState } from 'react';\n\nimport { Button, Flex, type MenuItemProps } from '@pega/cosmos-react-core';\nimport { RichTextEditor } from '@pega/cosmos-react-rte';\nimport type { RichTextEditorProps, RichTextEditorState } from '@pega/cosmos-react-rte';\nimport { MentionButton } from '@pega/cosmos-react-social';\n\nimport { demoUsers } from './RichTextEditor.mocks';\n\nexport default {\n title: 'RTE/RichTextEditor',\n component: RichTextEditor,\n args: {\n label: 'Rich text editor',\n labelHidden: false,\n info: 'The markdown editor offers dynamic rendering of markdown syntax',\n status: undefined,\n required: false,\n disabled: false,\n readOnly: false\n },\n argTypes: {\n label: { control: { type: 'text' } },\n labelHidden: { control: { type: 'boolean' } },\n info: { control: { type: 'text', label: 'Helper text' } },\n status: { options: [undefined, 'success', 'warning', 'error'], control: { type: 'select' } },\n required: { control: { type: 'boolean' } },\n disabled: { control: { type: 'boolean' } },\n readOnly: { control: { type: 'boolean' } }\n }\n // excludeStories: ['RichTextEditorImperativeHandleDemo']\n} as Meta;\n\nexport const RichTextEditorMDDemo: StoryFn<RichTextEditorProps> = (args: RichTextEditorProps) => {\n const [users, setUsers] = useState<MenuItemProps[]>(demoUsers);\n\n const searchUsers = (event: { search: string; trigger: string }) => {\n if (event.trigger === '@') {\n setUsers(\n demoUsers.filter(user => {\n return user.primary.toLowerCase().includes(event.search.toLowerCase());\n })\n );\n }\n };\n\n return (\n <RichTextEditor\n searchTriggers={[{ trigger: '@', regex: '[a-zA-Z](?: [a-zA-Z])?' }]}\n onSearch={searchUsers}\n getSearchItemReplacement={(id: string) => {\n const item = demoUsers.find(({ id: itemId }) => itemId === id);\n\n if (!item) return undefined;\n\n return {\n markdown: `@${item.id}:${item.primary}:user:`,\n text: item.primary,\n component: MentionButton,\n props: {\n id: item.id,\n text: item.primary,\n type: 'user'\n }\n };\n }}\n menu={users.length ? { items: users } : undefined}\n markdownOnly\n label={args.label}\n labelHidden={args.labelHidden}\n info={args.info}\n status={args.status}\n required={args.required}\n disabled={args.disabled}\n readOnly={args.readOnly}\n autoFocus\n />\n );\n};\n\nexport const RichTextEditorImperativeHandleDemo: StoryFn = () => {\n const rteRef = useRef<RichTextEditorState>(null);\n\n const [textContent, setTextContent] = useState('');\n\n return (\n <>\n <RichTextEditor\n ref={rteRef}\n type='html'\n toolbar={['headers', 'inline-styling', 'indentation', 'lists']}\n defaultValue='Hello, World! '\n />\n <Flex container={{ gap: 1, pad: 1 }}>\n <Button\n data-testid='focusHandle'\n onClick={() => {\n rteRef.current?.focus();\n }}\n >\n Focus\n </Button>\n <Button\n data-testid='plainTextHandle'\n onClick={() => {\n setTextContent(rteRef.current?.getPlainText() \|\| '');\n }}\n >\n Get plain text\n </Button>\n <Button\n data-testid='richTextHandle'\n onClick={() => {\n setTextContent(rteRef.current?.getRichText() \|\| '');\n }}\n >\n Get rich text\n </Button>\n <Button\n data-testid='htmlHandle'\n onClick={() => {\n setTextContent(rteRef.current?.getHtml() \|\| '');\n }}\n >\n Get HTML\n </Button>\n <Button\n data-testid='clearHandle'\n onClick={() => {\n rteRef.current?.clear();\n }}\n >\n Clear\n </Button>\n <Button\n data-testid='insertTextHandle'\n onClick={() => {\n rteRef.current?.insertText('Some text');\n }}\n >\n Insert text\n </Button>\n <Button\n data-testid='insertHTMLHandle'\n onClick={() => {\n rteRef.current?.insertHtml('Some text', true);\n }}\n >\n Insert HTML\n </Button>\n <Button\n data-testid='appendHTMLHandle'\n onClick={() => {\n rteRef.current?.insertHtml('Some text', false);\n }}\n >\n Append HTML\n </Button>\n <Button\n data-testid='insertEmptyHTMLHandle'\n onClick={() => {\n rteRef.current?.insertHtml('', true);\n }}\n >\n Insert empty HTML\n </Button>\n </Flex>\n <div data-testid='textRegion'>{textContent}</div>\n </>\n );\n};\n"]}

package/lib/rte/RichTextEditor/RichTextViewer.stories.d.ts CHANGED Viewed

@@ -1,8 +1,13 @@
 import type { StoryFn } from '@storybook/react';
+import type { RichTextViewerProps } from '@pega/cosmos-react-rte';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare const RichTextViewerDemo: StoryFn;
-export declare const RichTextViewerHTMLDemo: StoryFn;
+interface RichTextViewerDemoProps {
+    content?: RichTextViewerProps['content'];
+    interactionRenderers?: boolean;
+}
+export declare const RichTextViewerDemo: StoryFn<RichTextViewerDemoProps>;
+export declare const RichTextViewerHTMLDemo: StoryFn<RichTextViewerDemoProps>;
 export declare const RichTextViewerHTMLOverflowDemo: StoryFn;
-export declare const RichTextViewerMDDemo: StoryFn;
+export declare const RichTextViewerMDDemo: StoryFn<RichTextViewerDemoProps>;
 //# sourceMappingURL=RichTextViewer.stories.d.ts.map

package/lib/rte/RichTextEditor/RichTextViewer.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;;~~AAWtD~~,~~wBAGU~~;AAEV,eAAO,MAAM,kBAAkB,EAAE,~~OAuBhC~~,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,~~OAuBpC~~,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,OA0B5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,~~OA2DlC~~,CAAC"}
1	+ {"version":3,"file":"RichTextViewer.stories.d.ts","sourceRoot":"","sources":["../../../src/rte/RichTextEditor/RichTextViewer.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,KAAK,EAAuB,mBAAmB,EAAY,MAAM,wBAAwB,CAAC;;AAIjG,wBAWU;AAEV,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC;AAED,eAAO,MAAM,kBAAkB,EAAE,OAAO,CAAC,uBAAuB,CAyB/D,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,OAAO,CAAC,uBAAuB,CAsCnE,CAAC;AAEF,eAAO,MAAM,8BAA8B,EAAE,OA0B5C,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,OAAO,CAAC,uBAAuB,CAuGjE,CAAC"}