npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.1.0 → 3.0.0-dev.11.0 - Mend

@pega/cosmos-react-demos 3.0.0-dev.1.0 → 3.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 (1184) hide show

package/jsx/core/Modal/Modal.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;~~AACrD~~,OAAO,EAAE,SAAS,EAAE,MAAM,~~uDAAuD~~,CAAC;~~AAClF~~,OAAO,EAAE,SAAS,EAAE,MAAM,~~uDAAuD~~,CAAC;~~AAClF~~,OAAO,EAAE,WAAW,EAAE,MAAM,~~mDAAmD~~,CAAC;~~AAchF~~,MAAM,oBAAoB,GAAG,CAAC,WAA4B,EAAgB,EAAE;IAC1E,MAAM,UAAU,GAA4C;QAC1D,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;QACjC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QACxB,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;KAChE,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAyB,EAAE,oBAA6B,EAAE,EAAE;IACrF,QAAQ,WAAW,EAAE;QACnB,KAAK,QAAQ;YACX,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC,CACjE;QAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,WAAW;YACd,OAAO,CACL,CAAC,IAAI,CACH;;;;;QAIF,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,YAAY,CAAC;QAClB;YACE,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,IAAI,CAAC,CAAC;KACnD;AACH,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\nimport { ImageDemo } from '~~@pega/cosmos-react-demos/lib/core/~~Image/Image.stories';\nimport { TableDemo } from '~~@pega/cosmos-react-demos/lib/core/~~Table/Table.stories';\nimport { FormContent } from '~~@pega/cosmos-react-demos/lib/core/~~Form/Form.mocks';\n\ntype ContentSections = 'text' \| 'meta' \| 'form';\n\nexport type ContentTypes =\n \| 'short text'\n \| 'long text'\n \| 'image'\n \| 'table'\n \| 'form (1 column)'\n \| 'form (2 column)'\n \| 'form (3 column)'\n \| 'random';\n\nconst getRandomContentType = (contentType: ContentSections): ContentTypes => {\n const contentMap: Record<ContentSections, ContentTypes[]> = {\n text: ['short text', 'long text'],\n meta: ['image', 'table'],\n form: ['form (1 column)', 'form (2 column)', 'form (3 column)']\n };\n const options = contentMap[contentType];\n\n return options[Math.floor(Math.random() * options.length)];\n};\n\nexport const getContent = (contentType: ContentTypes, formColumnWidthFixed: boolean) => {\n switch (contentType) {\n case 'random':\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n {getContent(getRandomContentType('text'), false)}\n {getContent(getRandomContentType('meta'), false)}\n {getContent(getRandomContentType('form'), formColumnWidthFixed)}\n </Flex>\n );\n case 'image':\n return <ImageDemo />;\n case 'table':\n return <TableDemo />;\n case 'form (1 column)':\n return <FormContent cols={1} showActions={false} />;\n case 'form (2 column)':\n return <FormContent cols={2} showActions={false} />;\n case 'form (3 column)':\n return <FormContent cols={3} showActions={false} />;\n case 'long text':\n return (\n <Text>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec\n sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis\n venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec\n malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.\n </Text>\n );\n case 'short text':\n default:\n return <Text>Lorem ipsum dolor sit amet.</Text>;\n }\n};\n"]}
1	+ {"version":3,"file":"Modal.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAErD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAcjD,MAAM,oBAAoB,GAAG,CAAC,WAA4B,EAAgB,EAAE;IAC1E,MAAM,UAAU,GAA4C;QAC1D,IAAI,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;QACjC,IAAI,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QACxB,IAAI,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,iBAAiB,CAAC;KAChE,CAAC;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAExC,OAAO,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,WAAyB,EAAE,oBAA6B,EAAE,EAAE;IACrF,QAAQ,WAAW,EAAE;QACnB,KAAK,QAAQ;YACX,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC/C;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,KAAK,CAAC,CAChD;UAAA,CAAC,UAAU,CAAC,oBAAoB,CAAC,MAAM,CAAC,EAAE,oBAAoB,CAAC,CACjE;QAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,CAAC,SAAS,CAAC,AAAD,EAAG,CAAC;QACvB,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,iBAAiB;YACpB,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC;QACtD,KAAK,WAAW;YACd,OAAO,CACL,CAAC,IAAI,CACH;;;;;QAIF,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,KAAK,YAAY,CAAC;QAClB;YACE,OAAO,CAAC,IAAI,CAAC,2BAA2B,EAAE,IAAI,CAAC,CAAC;KACnD;AACH,CAAC,CAAC","sourcesContent":["import { Flex, Text } from '@pega/cosmos-react-core';\n\nimport { ImageDemo } from '../Image/Image.stories';\nimport { TableDemo } from '../Table/Table.stories';\nimport { FormContent } from '../Form/Form.mocks';\n\ntype ContentSections = 'text' \| 'meta' \| 'form';\n\nexport type ContentTypes =\n \| 'short text'\n \| 'long text'\n \| 'image'\n \| 'table'\n \| 'form (1 column)'\n \| 'form (2 column)'\n \| 'form (3 column)'\n \| 'random';\n\nconst getRandomContentType = (contentType: ContentSections): ContentTypes => {\n const contentMap: Record<ContentSections, ContentTypes[]> = {\n text: ['short text', 'long text'],\n meta: ['image', 'table'],\n form: ['form (1 column)', 'form (2 column)', 'form (3 column)']\n };\n const options = contentMap[contentType];\n\n return options[Math.floor(Math.random() * options.length)];\n};\n\nexport const getContent = (contentType: ContentTypes, formColumnWidthFixed: boolean) => {\n switch (contentType) {\n case 'random':\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n {getContent(getRandomContentType('text'), false)}\n {getContent(getRandomContentType('meta'), false)}\n {getContent(getRandomContentType('form'), formColumnWidthFixed)}\n </Flex>\n );\n case 'image':\n return <ImageDemo />;\n case 'table':\n return <TableDemo />;\n case 'form (1 column)':\n return <FormContent cols={1} showActions={false} />;\n case 'form (2 column)':\n return <FormContent cols={2} showActions={false} />;\n case 'form (3 column)':\n return <FormContent cols={3} showActions={false} />;\n case 'long text':\n return (\n <Text>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum ipsum ipsum, nec\n sodales risus finibus eget. Proin ornare, ante ac convallis sollicitudin, elit turpis\n venenatis lorem, vitae viverra eros magna non lectus. Duis ac auctor sapien. Donec\n malesuada eros ut libero sodales, malesuada ullamcorper lacus eleifend.\n </Text>\n );\n case 'short text':\n default:\n return <Text>Lorem ipsum dolor sit amet.</Text>;\n }\n};\n"]}

package/jsx/core/Modal/Modal.stories.d.ts CHANGED Viewed

@@ -3,11 +3,16 @@ import { ModalProps } from '@pega/cosmos-react-core';
 import { ContentTypes } from './Modal.mocks';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ModalDemo: Story<ModalProps>;
-export declare const ModalUpdates: Story<ModalProps>;
-export declare const AlertModal: Story<ModalProps>;
-export declare const ProgressState: Story<ModalProps>;
-export declare const MinimizableModal: Story<ModalProps>;
+interface ModalDemoProps {
+    autoWidth: ModalProps['autoWidth'];
+    center: ModalProps['center'];
+    stretch: ModalProps['stretch'];
+}
+export declare const ModalDemo: Story<ModalDemoProps>;
+export declare const ModalUpdates: Story<ModalDemoProps>;
+export declare const AlertModal: Story<ModalDemoProps>;
+export declare const ProgressState: Story;
+export declare const MinimizableModal: Story<ModalDemoProps>;
 export declare const DockedModal: Story;
 interface AutoWidthModalContentProps {
     autoWidth: boolean;

package/jsx/core/Modal/Modal.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAY/C,OAAO,~~EAQL~~,UAAU,~~EAKX~~,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBAgBU;AAEV,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,~~UAAU~~,~~CA+BvC~~,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,~~UAAU~~,~~CAkE1C~~,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,~~UAAU~~,~~CAgGxC~~,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,~~KAAK~~,CAAC~~,UAAU,CA2F3C,CAAC~~;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,~~UAAU~~,~~CAkC9C~~,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,~~KAiCzB~~,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,~~CAgEnE~~,CAAC"}
1	+ {"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAY/C,OAAO,EAOL,UAAU,EAIX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBAgBU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CA6B3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CAgE9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAkG5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA2F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAgClD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA8DnE,CAAC"}

package/jsx/core/Modal/Modal.stories.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Button, Configuration, Flex, Input, Modal, ModalManagerContext, Text, ToasterContext, WorkTheme, cap } from '@pega/cosmos-react-core';
+import { Button, Flex, Input, Modal, ModalManagerContext, Text, ToasterContext, cap } from '@pega/cosmos-react-core';
 import { getContent } from './Modal.mocks';
 export default {
     title: 'Core/Modal',
@@ -20,11 +20,9 @@ export default {
 };
 export const ModalDemo = (args) => {
     const MyModal = () => {
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading='This is the Modal heading' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-          <Text>This is the content of the Modal.</Text>
-        </Modal>
-      </Configuration>);
+        return (<Modal heading='This is the Modal heading' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
+        <Text>This is the content of the Modal.</Text>
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);
@@ -49,11 +47,9 @@ export const ModalUpdates = (args) => {
           Update Modal
         </Button>
       </>);
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading={props.heading} actions={actions} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-          <Text>{props.content}</Text>
-        </Modal>
-      </Configuration>);
+        return (<Modal heading={props.heading} actions={actions} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
+        <Text>{props.content}</Text>
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);
@@ -91,11 +87,9 @@ export const AlertModal = (args) => {
           </Button>
         </>);
         }, [dismiss]);
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading='You have unsaved changes!' actions={actions} center={args.center} stretch={args.stretch}>
-          <Text>Are you sure you want to close without saving?</Text>
-        </Modal>
-      </Configuration>);
+        return (<Modal heading='You have unsaved changes!' actions={actions} center={args.center} stretch={args.stretch}>
+        <Text>Are you sure you want to close without saving?</Text>
+      </Modal>);
     };
     const MyModal = () => {
         const [name, setName] = useState('');
@@ -121,11 +115,14 @@ export const AlertModal = (args) => {
         const onNameChange = (e) => {
             setName(e.target.value);
         };
-        return (<Configuration theme={WorkTheme}>
-        <Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-          <Input label='Name' name='name' onChange={onNameChange} value={name} required/>
-        </Modal>
-      </Configuration>);
+        return (<Modal actions={actions} heading='Close the Modal without saving any data to invoke the alert' autoWidth={args.autoWidth} center={args.center} stretch={args.stretch} onRequestDismiss={() => {
+                if (name !== '') {
+                    create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
+                    return false;
+                }
+            }}>
+        <Input label='Name' name='name' onChange={onNameChange} value={name} required/>
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);
@@ -197,11 +194,9 @@ export const ProgressState = () => {
 export const MinimizableModal = (args) => {
     const [count, setCount] = useState(1);
     const MyModal = () => {
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
-          <Text>This Modal can be minimized by clicking the minimize button above.</Text>
-        </Modal>
-      </Configuration>);
+        return (<Modal heading={`Modal #${count}`} autoWidth={args.autoWidth} center={args.center} stretch={args.stretch}>
+        <Text>This Modal can be minimized by clicking the minimize button above.</Text>
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);
@@ -217,11 +212,9 @@ export const MinimizableModal = (args) => {
 export const DockedModal = () => {
     const [count, setCount] = useState(1);
     const MyModal = () => {
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading={`Modal #${count}`}>
-          <Text>This Modal can be minimized by clicking the minimize button above.</Text>
-        </Modal>
-      </Configuration>);
+        return (<Modal heading={`Modal #${count}`}>
+        <Text>This Modal can be minimized by clicking the minimize button above.</Text>
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);
@@ -248,24 +241,22 @@ export const AutoWidthModalContent = (args) => {
     const MyModal = ({ content }) => {
         const { ModalContext } = useContext(ModalManagerContext);
         const { dismiss } = useContext(ModalContext);
-        return (<Configuration theme={WorkTheme}>
-        <Modal heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`} autoWidth={args.autoWidth} actions={args.content.includes('form') || args.content === 'random' ? (<>
-                <Button name='Cancel' variant='secondary' onClick={() => {
+        return (<Modal heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`} autoWidth={args.autoWidth} actions={args.content.includes('form') || args.content === 'random' ? (<>
+              <Button name='Cancel' variant='secondary' onClick={() => {
                     dismiss();
                     push({ content: 'Form cancelled!' });
                 }}>
-                  Cancel
-                </Button>
-                <Button name='Submit' variant='primary' onClick={() => {
+                Cancel
+              </Button>
+              <Button name='Submit' variant='primary' onClick={() => {
                     dismiss();
                     push({ content: 'Form submitted!' });
                 }}>
-                  Submit
-                </Button>
-              </>) : undefined}>
-          {content}
-        </Modal>
-      </Configuration>);
+                Submit
+              </Button>
+            </>) : undefined}>
+        {content}
+      </Modal>);
     };
     const ModalButton = () => {
         const { create } = useContext(ModalManagerContext);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n FC,\n ChangeEvent,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n Button,\n Configuration,\n Flex,\n Input,\n Modal,\n ModalManagerContext,\n ModalMethods,\n ModalProps,\n Text,\n ToasterContext,\n WorkTheme,\n cap\n} from '@pega/cosmos-react-core';\n\nimport { ContentTypes, getContent } from './Modal.mocks';\n\nexport default {\n title: 'Core/Modal',\n component: Modal,\n parameters: {\n layout: 'centered'\n },\n args: {\n autoWidth: false,\n stretch: false,\n center: false\n },\n argTypes: {\n autoWidth: { control: { type: 'boolean' } },\n stretch: { control: { type: 'boolean' } },\n center: { control: { type: 'boolean' } }\n }\n} as Meta;\n\nexport const ModalDemo: Story<ModalProps> = (args: ModalProps) => {\n const MyModal = () => {\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n heading='This is the Modal heading'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This is the content of the Modal.</Text>\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ModalUpdates: Story<ModalProps> = (args: ModalProps) => {\n interface ModalUpdatesProps {\n content: string;\n disableButton: boolean;\n heading: string;\n }\n\n const MyModal: FC<ModalUpdatesProps> = props => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { update } = useContext(ModalContext);\n\n const actions = (\n <>\n <Button\n variant='primary'\n disabled={props.disableButton}\n onClick={() => {\n update({\n content: 'This Modal has been updated a second time from within the Modal!'\n });\n }}\n >\n Update Modal\n </Button>\n </>\n );\n\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n heading={props.heading}\n actions={actions}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>{props.content}</Text>\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n const openModal = () => {\n modalMethods.current = create(MyModal, {\n heading: 'This is the Modal heading',\n content: 'This Modal will automatically update in a few seconds.',\n disableButton: true\n });\n\n setTimeout(() => {\n modalMethods.current?.update({\n heading: 'This is the updated Modal heading',\n content: 'This Modal has been updated from its parent!',\n disableButton: false\n });\n }, 2000);\n };\n\n return <Button onClick={openModal}>Open Modal</Button>;\n };\n\n return <ModalButton />;\n};\n\nexport const AlertModal: Story<ModalProps> = (args: ModalProps) => {\n const MyAlert = (props: { closeInitialModal: () => void }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const actions = useMemo(() => {\n return (\n <>\n <Button onClick={dismiss}>No</Button>\n <Button\n variant='primary'\n onClick={() => {\n dismiss();\n props.closeInitialModal();\n }}\n >\n Yes\n </Button>\n </>\n );\n }, [dismiss]);\n\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n heading='You have unsaved changes!'\n actions={actions}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>Are you sure you want to close without saving?</Text>\n </Modal>\n </Configuration>\n );\n };\n\n const MyModal = () => {\n const [name, setName] = useState('');\n const { ModalContext, create } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const actions = useMemo(() => {\n return (\n <>\n <Button\n onClick={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n } else {\n dismiss();\n }\n }}\n >\n Close\n </Button>\n <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n Save\n </Button>\n </>\n );\n }, [dismiss, name]);\n\n const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n setName(e.target.value);\n };\n\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n actions={actions}\n heading='Close the Modal without saving any data to invoke the alert'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Input label='Name' name='name' onChange={onNameChange} value={name} required />\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ProgressState: Story<ModalProps> = () => {\n const LoadingStateModal = () => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const [transientState, setTransientState] = useState<'loading' \| 'submitting' \| null>(\n 'loading'\n );\n\n const actions =\n transientState === 'loading' ? null : (\n <>\n <Button\n disabled={!!transientState}\n onClick={() => {\n if (transientState !== 'submitting') {\n dismiss();\n }\n }}\n >\n Cancel\n </Button>\n <Button\n disabled={!!transientState}\n variant='primary'\n onClick={() => {\n setTransientState('submitting');\n }}\n >\n Submit\n </Button>\n </>\n );\n\n useEffect(() => {\n let timerID: number;\n\n if (transientState === 'loading' \|\| transientState === 'submitting') {\n timerID = window.setTimeout(() => {\n if (transientState === 'loading') {\n setTransientState(null);\n } else {\n dismiss();\n }\n }, 3000);\n }\n\n return () => {\n window.clearTimeout(timerID);\n };\n }, [transientState]);\n\n return (\n <Modal\n progress={useMemo(() => {\n if (transientState) {\n return {\n message: `${cap(transientState)}…`\n };\n }\n }, [transientState])}\n heading='Modal progress demo'\n actions={actions}\n onRequestDismiss={() => transientState !== 'submitting'}\n >\n {transientState !== 'loading' && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {Array.from({ length: 5 }, (_, i) => (\n <Input key={i} label={`Field-${i + 1}`} />\n ))}\n </Flex>\n )}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(LoadingStateModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const MinimizableModal: Story<ModalProps> = (args: ModalProps) => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n heading={`Modal #${count}`}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, { minimizable: true });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const DockedModal: Story = () => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Configuration theme={WorkTheme}>\n <Modal heading={`Modal #${count}`}>\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n maximizable: true,\n dockable: true\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nDockedModal.argTypes = {\n autoWidth: { table: { disable: true } },\n stretch: { table: { disable: true } },\n center: { table: { disable: true } }\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: Story<AutoWidthModalContentProps> = (\n args: AutoWidthModalContentProps\n) => {\n const { push } = useContext(ToasterContext);\n\n const MyModal = ({ content }: { content: ReactNode }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n return (\n <Configuration theme={WorkTheme}>\n <Modal\n heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n autoWidth={args.autoWidth}\n actions={\n args.content.includes('form') \|\| args.content === 'random' ? (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n dismiss();\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n dismiss();\n push({ content: 'Form submitted!' });\n }}\n >\n Submit\n </Button>\n </>\n ) : undefined\n }\n >\n {content}\n </Modal>\n </Configuration>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal, {\n content: getContent(args.content, args.formColumnWidthFixed)\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAutoWidthModalContent.args = {\n autoWidth: true,\n content: 'short text',\n formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n stretch: { table: { disable: true } },\n center: { table: { disable: true } },\n content: {\n options: [\n 'short text',\n 'long text',\n 'image',\n 'table',\n 'form (1 column)',\n 'form (2 column)',\n 'form (3 column)',\n 'random'\n ],\n control: { type: 'select' }\n },\n formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Modal.stories.jsx","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport {\n FC,\n ChangeEvent,\n ReactNode,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState\n} from 'react';\n\nimport {\n Button,\n Flex,\n Input,\n Modal,\n ModalManagerContext,\n ModalMethods,\n ModalProps,\n Text,\n ToasterContext,\n cap\n} from '@pega/cosmos-react-core';\n\nimport { ContentTypes, getContent } from './Modal.mocks';\n\nexport default {\n title: 'Core/Modal',\n component: Modal,\n parameters: {\n layout: 'centered'\n },\n args: {\n autoWidth: false,\n stretch: false,\n center: false\n },\n argTypes: {\n autoWidth: { control: { type: 'boolean' } },\n stretch: { control: { type: 'boolean' } },\n center: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface ModalDemoProps {\n autoWidth: ModalProps['autoWidth'];\n center: ModalProps['center'];\n stretch: ModalProps['stretch'];\n}\n\nexport const ModalDemo: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n const MyModal = () => {\n return (\n <Modal\n heading='This is the Modal heading'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This is the content of the Modal.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ModalUpdates: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n interface ModalUpdatesProps {\n content: string;\n disableButton: boolean;\n heading: string;\n }\n\n const MyModal: FC<ModalUpdatesProps> = props => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { update } = useContext(ModalContext);\n\n const actions = (\n <>\n <Button\n variant='primary'\n disabled={props.disableButton}\n onClick={() => {\n update({\n content: 'This Modal has been updated a second time from within the Modal!'\n });\n }}\n >\n Update Modal\n </Button>\n </>\n );\n\n return (\n <Modal\n heading={props.heading}\n actions={actions}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>{props.content}</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n const modalMethods = useRef<ModalMethods<ModalUpdatesProps>>();\n\n const openModal = () => {\n modalMethods.current = create(MyModal, {\n heading: 'This is the Modal heading',\n content: 'This Modal will automatically update in a few seconds.',\n disableButton: true\n });\n\n setTimeout(() => {\n modalMethods.current?.update({\n heading: 'This is the updated Modal heading',\n content: 'This Modal has been updated from its parent!',\n disableButton: false\n });\n }, 2000);\n };\n\n return <Button onClick={openModal}>Open Modal</Button>;\n };\n\n return <ModalButton />;\n};\n\nexport const AlertModal: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n const MyAlert = (props: { closeInitialModal: () => void }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const actions = useMemo(() => {\n return (\n <>\n <Button onClick={dismiss}>No</Button>\n <Button\n variant='primary'\n onClick={() => {\n dismiss();\n props.closeInitialModal();\n }}\n >\n Yes\n </Button>\n </>\n );\n }, [dismiss]);\n\n return (\n <Modal\n heading='You have unsaved changes!'\n actions={actions}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>Are you sure you want to close without saving?</Text>\n </Modal>\n );\n };\n\n const MyModal = () => {\n const [name, setName] = useState('');\n const { ModalContext, create } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const actions = useMemo(() => {\n return (\n <>\n <Button\n onClick={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n } else {\n dismiss();\n }\n }}\n >\n Close\n </Button>\n <Button variant='primary' onClick={dismiss} disabled={name === ''}>\n Save\n </Button>\n </>\n );\n }, [dismiss, name]);\n\n const onNameChange = (e: ChangeEvent<HTMLInputElement>) => {\n setName(e.target.value);\n };\n\n return (\n <Modal\n actions={actions}\n heading='Close the Modal without saving any data to invoke the alert'\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n onRequestDismiss={() => {\n if (name !== '') {\n create(MyAlert, { closeInitialModal: dismiss }, { alert: true });\n return false;\n }\n }}\n >\n <Input label='Name' name='name' onChange={onNameChange} value={name} required />\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const ProgressState: Story = () => {\n const LoadingStateModal = () => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n const [transientState, setTransientState] = useState<'loading' \| 'submitting' \| null>(\n 'loading'\n );\n\n const actions =\n transientState === 'loading' ? null : (\n <>\n <Button\n disabled={!!transientState}\n onClick={() => {\n if (transientState !== 'submitting') {\n dismiss();\n }\n }}\n >\n Cancel\n </Button>\n <Button\n disabled={!!transientState}\n variant='primary'\n onClick={() => {\n setTransientState('submitting');\n }}\n >\n Submit\n </Button>\n </>\n );\n\n useEffect(() => {\n let timerID: number;\n\n if (transientState === 'loading' \|\| transientState === 'submitting') {\n timerID = window.setTimeout(() => {\n if (transientState === 'loading') {\n setTransientState(null);\n } else {\n dismiss();\n }\n }, 3000);\n }\n\n return () => {\n window.clearTimeout(timerID);\n };\n }, [transientState]);\n\n return (\n <Modal\n progress={useMemo(() => {\n if (transientState) {\n return {\n message: `${cap(transientState)}…`\n };\n }\n }, [transientState])}\n heading='Modal progress demo'\n actions={actions}\n onRequestDismiss={() => transientState !== 'submitting'}\n >\n {transientState !== 'loading' && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n {Array.from({ length: 5 }, (_, i) => (\n <Input key={i} label={`Field-${i + 1}`} />\n ))}\n </Flex>\n )}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(LoadingStateModal);\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const MinimizableModal: Story<ModalDemoProps> = (args: ModalDemoProps) => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal\n heading={`Modal #${count}`}\n autoWidth={args.autoWidth}\n center={args.center}\n stretch={args.stretch}\n >\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, { minimizable: true });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nexport const DockedModal: Story = () => {\n const [count, setCount] = useState(1);\n\n const MyModal = () => {\n return (\n <Modal heading={`Modal #${count}`}>\n <Text>This Modal can be minimized by clicking the minimize button above.</Text>\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n setCount(count + 1);\n create(MyModal, undefined, {\n minimizable: true,\n maximizable: true,\n dockable: true\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nDockedModal.argTypes = {\n autoWidth: { table: { disable: true } },\n stretch: { table: { disable: true } },\n center: { table: { disable: true } }\n};\n\ninterface AutoWidthModalContentProps {\n autoWidth: boolean;\n content: ContentTypes;\n formColumnWidthFixed: boolean;\n stretch?: never;\n center?: never;\n}\n\nexport const AutoWidthModalContent: Story<AutoWidthModalContentProps> = (\n args: AutoWidthModalContentProps\n) => {\n const { push } = useContext(ToasterContext);\n\n const MyModal = ({ content }: { content: ReactNode }) => {\n const { ModalContext } = useContext(ModalManagerContext);\n const { dismiss } = useContext(ModalContext);\n\n return (\n <Modal\n heading={`Modal ${args.autoWidth ? 'with' : 'without'} autoWidth`}\n autoWidth={args.autoWidth}\n actions={\n args.content.includes('form') \|\| args.content === 'random' ? (\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={() => {\n dismiss();\n push({ content: 'Form cancelled!' });\n }}\n >\n Cancel\n </Button>\n <Button\n name='Submit'\n variant='primary'\n onClick={() => {\n dismiss();\n push({ content: 'Form submitted!' });\n }}\n >\n Submit\n </Button>\n </>\n ) : undefined\n }\n >\n {content}\n </Modal>\n );\n };\n\n const ModalButton = () => {\n const { create } = useContext(ModalManagerContext);\n\n return (\n <Button\n onClick={() => {\n create(MyModal, {\n content: getContent(args.content, args.formColumnWidthFixed)\n });\n }}\n >\n Open Modal\n </Button>\n );\n };\n\n return <ModalButton />;\n};\n\nAutoWidthModalContent.args = {\n autoWidth: true,\n content: 'short text',\n formColumnWidthFixed: false\n};\n\nAutoWidthModalContent.argTypes = {\n stretch: { table: { disable: true } },\n center: { table: { disable: true } },\n content: {\n options: [\n 'short text',\n 'long text',\n 'image',\n 'table',\n 'form (1 column)',\n 'form (2 column)',\n 'form (3 column)',\n 'random'\n ],\n control: { type: 'select' }\n },\n formColumnWidthFixed: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/MultiStep/MultiStep.stories.d.ts CHANGED Viewed

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { Meta } from '@storybook/react';
+import { Meta, Story } from '@storybook/react';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const MultiStepDemo: () => JSX.Element;
+export declare const MultiStepDemo: Story;
 //# sourceMappingURL=MultiStep.stories.d.ts.map

package/jsx/core/MultiStep/MultiStep.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;;~~AAKxC~~,wBAGU;AAEV,eAAO,MAAM,aAAa,~~mBAoEzB~~,CAAC"}
1	+ {"version":3,"file":"MultiStep.stories.d.ts","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAK/C,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAoE3B,CAAC"}

package/jsx/core/MultiStep/MultiStep.stories.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiStep.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAQ,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAE9E,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,SAAS;CACb,CAAC;AAEV,MAAM,CAAC,MAAM,aAAa,~~GAAG~~,GAAG,EAAE;~~IAChC~~,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACrD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,QAAQ,GAAG,CAAC,CAAC;IAEnB,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,WAAW,CAAC,KAAK,CAAC,CAAC;QACnB,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,OAAe,EAAa,EAAE;QAChD,OAAO,CACL,EACE;QAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,EAAE,MAAM,CACzD;QAAA,CAAC,GAAG,CACF;UAAA,CAAC,OAAO,GAAG,CAAC,IAAI,CACd,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,OAAO,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAC9E,CACD;UAAA,CAAC,OAAO,KAAK,QAAQ,IAAI,CACvB,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,QAAQ,OAAO,GAAG,CAAC,EAAE,CAAC,CAAC,CAC3E;;YACF,EAAE,MAAM,CAAC,CACV,CACD;UAAA,CAAC,OAAO,KAAK,QAAQ,IAAI,CACvB,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CACvE;;YACF,EAAE,MAAM,CAAC,CACV,CACH;QAAA,EAAE,GAAG,CACP;MAAA,GAAG,CACJ,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE;QACjE,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAU,CAAC;QACzC,MAAM,EAAE,GAAG,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC;QAC/B,MAAM,IAAI,GAAS;YACjB,IAAI,EAAE,aAAa,EAAE,EAAE;YACvB,EAAE;YACF,KAAK;YACL,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/B,OAAO,EAAE,UAAU,CAAC,KAAK,GAAG,CAAC,CAAC;SAC/B,CAAC;QAEF,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC;QAE7C,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,EACE;MAAA,CAAC,SAAS,IAAI,CACZ,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAC5C;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAC3C;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,QAAQ,IAAI,CACX,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,CAC1B;UAAA,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAC3C;UAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,MAAM,CAC3C;QAAA,EAAE,IAAI,CAAC,CACR,CACD;MAAA,CAAC,CAAC,SAAS,IAAI,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,EAAG,CAClF;IAAA,GAAG,CACJ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { Button, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/MultiStep',\n component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo = () => {\n const [currentId, setCurrentId] = useState('Step-1');\n const [cancelled, setCancelled] = useState(false);\n const [finished, setFinished] = useState(false);\n const numSteps = 6;\n\n const restart = () => {\n setCancelled(false);\n setFinished(false);\n setCurrentId('Step-1');\n };\n\n const getActions = (stepNum: number): ReactNode => {\n return (\n <>\n <Button onClick={() => setCancelled(true)}>Cancel</Button>\n <div>\n {stepNum > 1 && (\n <Button onClick={() => setCurrentId(`Step-${stepNum - 1}`)}>Previous</Button>\n )}\n {stepNum !== numSteps && (\n <Button variant='primary' onClick={() => setCurrentId(`Step-${stepNum + 1}`)}>\n Next\n </Button>\n )}\n {stepNum === numSteps && (\n <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n Finish\n </Button>\n )}\n </div>\n </>\n );\n };\n\n const stepData = Array.from({ length: numSteps }).map((_, index) => {\n const depth = ((index / 1) % 2) as 0 \| 1;\n const id = `Step-${index + 1}`;\n const step: Step = {\n name: `Label for ${id}`,\n id,\n depth,\n onClick: () => setCurrentId(id),\n actions: getActions(index + 1)\n };\n\n step.content = <Text>Content for {id}</Text>;\n\n return step;\n });\n\n return (\n <>\n {cancelled && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep cancelled</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {finished && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep finished</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {!cancelled && !finished && <MultiStep steps={stepData} currentId={currentId} />}\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"MultiStep.stories.jsx","sourceRoot":"","sources":["../../../src/core/MultiStep/MultiStep.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { ReactNode, useState } from 'react';\n\nimport { Button, Flex, MultiStep, Step, Text } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/MultiStep',\n component: MultiStep\n} as Meta;\n\nexport const MultiStepDemo: Story = () => {\n const [currentId, setCurrentId] = useState('Step-1');\n const [cancelled, setCancelled] = useState(false);\n const [finished, setFinished] = useState(false);\n const numSteps = 6;\n\n const restart = () => {\n setCancelled(false);\n setFinished(false);\n setCurrentId('Step-1');\n };\n\n const getActions = (stepNum: number): ReactNode => {\n return (\n <>\n <Button onClick={() => setCancelled(true)}>Cancel</Button>\n <div>\n {stepNum > 1 && (\n <Button onClick={() => setCurrentId(`Step-${stepNum - 1}`)}>Previous</Button>\n )}\n {stepNum !== numSteps && (\n <Button variant='primary' onClick={() => setCurrentId(`Step-${stepNum + 1}`)}>\n Next\n </Button>\n )}\n {stepNum === numSteps && (\n <Button type='submit' variant='primary' onClick={() => setFinished(true)}>\n Finish\n </Button>\n )}\n </div>\n </>\n );\n };\n\n const stepData = Array.from({ length: numSteps }).map((_, index) => {\n const depth = ((index / 1) % 2) as 0 \| 1;\n const id = `Step-${index + 1}`;\n const step: Step = {\n name: `Label for ${id}`,\n id,\n depth,\n onClick: () => setCurrentId(id),\n actions: getActions(index + 1)\n };\n\n step.content = <Text>Content for {id}</Text>;\n\n return step;\n });\n\n return (\n <>\n {cancelled && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep cancelled</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {finished && (\n <Flex container={{ gap: 2 }}>\n <Text variant='h1'>MultiStep finished</Text>\n <Button onClick={restart}>Restart</Button>\n </Flex>\n )}\n {!cancelled && !finished && <MultiStep steps={stepData} currentId={currentId} />}\n </>\n );\n};\n"]}

package/jsx/core/Number/Number.stories.d.ts CHANGED Viewed

@@ -1,13 +1,17 @@
 import { Meta, Story } from '@storybook/react';
-import { NumberDisplayProps, NumberInputProps } from '@pega/cosmos-react-core';
+import { NumberDisplayProps, NumberInputProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const NumberInputDemo: Story<NumberInputProps>;
-export declare const StepperDemo: Story<NumberInputProps>;
+export declare type NumberInputStory = OmitStrict<NumberInputProps, 'value' | 'onChange'> & {
+    value?: number | string;
+    onChange?: (value: string) => void;
+};
+export declare const NumberInputDemo: Story<NumberInputStory>;
+export declare const StepperDemo: Story<NumberInputStory>;
 interface NumberDisplayStoryProps extends NumberDisplayProps {
-    numberOfDecimals: number;
-    showGroupSeparators: boolean;
-    showDecimal: boolean;
+    fractionDigits: number;
+    groupSeparators: boolean;
+    notation: 'standard' | 'compact';
 }
 export declare const NumberDisplayDemo: Story<NumberDisplayStoryProps>;
 //# sourceMappingURL=Number.stories.d.ts.map

package/jsx/core/Number/Number.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,~~EACjB~~,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,~~CA8BnD~~,CAAC;~~AAkCF~~,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,~~CA+B~~/C,CAAC;~~AAkCF~~,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,~~gBAAgB~~,EAAE,MAAM,CAAC;~~IACzB~~,~~mBAAmB~~,EAAE,OAAO,CAAC;~~IAC7B~~,~~WAAW~~,EAAE,~~OAAO~~,CAAC;~~CACtB~~;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAe5D,CAAC"}
1	+ {"version":3,"file":"Number.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Number/Number.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,kBAAkB,EAElB,gBAAgB,EAChB,UAAU,EAEX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,oBAAY,gBAAgB,GAAG,UAAU,CAAC,gBAAgB,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAsCnD,CAAC;AAyEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAuC/C,CAAC;AAmCF,UAAU,uBAAwB,SAAQ,kBAAkB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,UAAU,GAAG,SAAS,CAAC;CAClC;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,uBAAuB,CAe5D,CAAC"}

package/jsx/core/Number/Number.stories.jsx CHANGED Viewed

@@ -1,26 +1,32 @@
-import { useState } from 'react';
-import { NumberDisplay, NumberInput } from '@pega/cosmos-react-core';
+import { useEffect, useState } from 'react';
+import { NumberDisplay, NumberInput, usePrevious } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/Number',
     component: NumberInput
 };
 export const NumberInputDemo = (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState(args.value ? args.value.toString() : undefined);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value ? args.value.toString() : undefined);
+    }, [prev, args.value]);
     return (<NumberInput {...args} value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
         }} onBlur={inputValue => {
-            setValue(inputValue);
             args.onBlur?.(inputValue);
-        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} unitPlacement={args.unitPlacement} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 NumberInputDemo.args = {
-    numberOfDecimals: 100,
+    value: undefined,
+    numberOfDecimals: 20,
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: '',
     label: 'Number input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -30,12 +36,51 @@ NumberInputDemo.args = {
     readOnly: false
 };
 NumberInputDemo.argTypes = {
+    value: { control: { type: 'number' } },
     numberOfDecimals: { control: { type: 'number' } },
     showDecimal: { control: { type: 'boolean' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
-    unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
+    unit: {
+        options: [
+            undefined,
+            'acre',
+            'byte',
+            'celsius',
+            'centimeter',
+            'day',
+            'degree',
+            'fahrenheit',
+            'foot',
+            'gigabyte',
+            'gram',
+            'hectare',
+            'hour',
+            'inch',
+            'kilobyte',
+            'kilogram',
+            'kilometer',
+            'kilometer-per-hour',
+            'liter',
+            'liter-per-meter',
+            'megabyte',
+            'meter',
+            'meter-per-second',
+            'mile',
+            'millimeter',
+            'millisecond',
+            'minute',
+            'month',
+            'percent',
+            'pound',
+            'second',
+            'terabyte',
+            'week',
+            'year',
+            'token'
+        ],
+        control: { type: 'select' }
+    },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
     info: { control: { type: 'text' } },
@@ -45,22 +90,28 @@ NumberInputDemo.argTypes = {
     readOnly: { control: { type: 'boolean' } }
 };
 export const StepperDemo = (args) => {
-    const [value, setValue] = useState();
+    const [value, setValue] = useState(args.value ? args.value.toString() : undefined);
+    const prev = usePrevious(args.value);
+    useEffect(() => {
+        if (prev !== args.value)
+            setValue(args.value ? args.value.toString() : undefined);
+    }, [prev, args.value]);
     return (<NumberInput {...args} variant='stepper' value={value} onChange={inputValue => {
             setValue(inputValue);
             args.onChange?.(inputValue);
         }} onBlur={inputValue => {
-            setValue(inputValue);
             args.onBlur?.(inputValue);
-        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} unitPlacement={args.unitPlacement} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
+        }} onFocus={inputValue => {
+            args.onFocus?.(inputValue);
+        }} numberOfDecimals={args.numberOfDecimals} showDecimal={args.showDecimal} showGroupSeparators={args.showGroupSeparators} step={args.step} unit={args.unit} label={args.label} labelHidden={args.labelHidden} info={args.info} status={args.status} required={args.required} disabled={args.disabled} readOnly={args.readOnly}/>);
 };
 StepperDemo.args = {
-    numberOfDecimals: 100,
+    value: undefined,
+    numberOfDecimals: 20,
     showDecimal: true,
     showGroupSeparators: true,
     step: 1,
-    unit: 'ml',
-    unitPlacement: 'after',
+    unit: '',
     label: 'Stepper input',
     labelHidden: false,
     info: 'Enter a numerical value',
@@ -70,12 +121,12 @@ StepperDemo.args = {
     readOnly: false
 };
 StepperDemo.argTypes = {
+    value: { control: { type: 'number' } },
     numberOfDecimals: { control: { type: 'number' } },
     showDecimal: { control: { type: 'boolean' } },
     showGroupSeparators: { control: { type: 'boolean' } },
     step: { control: { type: 'number' } },
     unit: { control: { type: 'text' } },
-    unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
     label: { control: { type: 'text' } },
     labelHidden: { control: { type: 'boolean' } },
     info: { control: { type: 'text' } },
@@ -86,25 +137,28 @@ StepperDemo.argTypes = {
 };
 export const NumberDisplayDemo = (args) => {
     return (<NumberDisplay value={args.value} unit={args.unit} unitPlacement={args.unitPlacement} formattingOptions={{
-            numberOfDecimals: args.numberOfDecimals,
-            showGroupSeparators: args.showGroupSeparators,
-            showDecimal: args.showDecimal
+            fractionDigits: args.fractionDigits,
+            groupSeparators: args.groupSeparators,
+            notation: args.notation
         }}/>);
 };
 NumberDisplayDemo.args = {
-    value: '12345.6789',
+    value: undefined,
     unit: 'ml',
     unitPlacement: 'after',
-    numberOfDecimals: 100,
-    showGroupSeparators: true,
-    showDecimal: true
+    fractionDigits: undefined,
+    notation: undefined,
+    groupSeparators: true
 };
 NumberDisplayDemo.argTypes = {
-    value: { control: { type: 'text' } },
+    value: { control: { type: 'number' } },
     unit: { control: { type: 'text' } },
     unitPlacement: { options: ['before', 'after'], control: { type: 'select' } },
-    numberOfDecimals: { control: { type: 'number' } },
-    showGroupSeparators: { control: { type: 'boolean' } },
-    showDecimal: { control: { type: 'boolean' } }
+    fractionDigits: { control: { type: 'number', min: 0, max: 20, step: 1 } },
+    groupSeparators: { control: { type: 'boolean' } },
+    notation: {
+        control: { type: 'inline-radio' },
+        options: ['standard', 'compact']
+    }
 };
 //# sourceMappingURL=Number.stories.jsx.map