npm - @pega/cosmos-react-demos - Versions diffs - 4.0.0-dev.2.0 → 4.0.0-dev.20.0 - Mend

@pega/cosmos-react-demos 4.0.0-dev.2.0 → 4.0.0-dev.20.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 (1187) hide show

package/jsx/core/Dialog/FormDialog.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/FormDialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ChangeEvent, FocusEvent, useEffect, useReducer, useState } from 'react';\n\nimport {\n ComboBox,\n createUID,\n Flex,\n FormDialog,\n FormDialogProps,\n Input,\n SummaryList,\n SummaryListItem,\n Text\n} from '@pega/cosmos-react-core';\n\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nexport type MockCategory = `Category ${number}`;\n\nexport interface MockItem {\n readonly id: string;\n name: string;\n category: MockCategory;\n}\n\nexport type MockReducerPayload =\n | {\n type: 'add';\n item: Pick<MockItem, 'name' | 'category'>;\n }\n | {\n type: 'edit';\n item: MockItem;\n }\n | {\n type: 'remove';\n item: Pick<MockItem, 'id'>;\n };\n\nexport interface MockItemDialogProps extends Pick<FormDialogProps, 'target'> {\n item: MockItem | null;\n dispatch: (fieldValues: Pick<MockItem, 'name' | 'category'>) => void;\n onComplete: () => void;\n}\n\nconst errorText = 'Cannot be blank';\n\nconst categories = Array.from({ length: 5 }, (_, i): MockCategory => `Category ${i + 1}`);\n\nconst initialItems: MockItem[] = Array.from({ length: 3 }, (_, i) => {\n return {\n id: createUID(),\n name: `Editable item ${i + 1}`,\n category: categories[i]\n };\n});\n\nconst itemReducer = (items: MockItem[], payload: MockReducerPayload) => {\n switch (payload.type) {\n case 'add': {\n return [...items, { ...payload.item, id: createUID() }];\n }\n\n case 'edit': {\n return items.map(item => {\n return item.id === payload.item.id\n ? { ...item, name: payload.item.name, category: payload.item.category }\n : item;\n });\n }\n\n case 'remove': {\n const itemIndex = items.findIndex(item => item.id === payload.item.id);\n if (itemIndex === -1) return items;\n items.splice(itemIndex, 1);\n return [...items];\n }\n\n default: {\n return items;\n }\n }\n};\n\nconst progressStates = {\n loading: 'Loading...',\n submitting: 'Submitting...'\n} as const;\n\nexport const useMockItems = () => {\n return useReducer(itemReducer, undefined, () => initialItems);\n};\n\nexport const ItemDialog = ({\n target,\n item: itemProp,\n dispatch,\n onComplete\n}: MockItemDialogProps) => {\n const [nameField, setNameField] = useState<{\n value: string | null;\n error: typeof errorText | null;\n errorOnPriorBlur: boolean;\n }>(() => {\n return {\n value: itemProp?.name ?? null,\n error: null,\n errorOnPriorBlur: false\n };\n });\n\n const [categoryField, setCategoryField] = useState<{\n value: MockCategory | null;\n error: typeof errorText | null;\n }>(() => {\n return {\n value: itemProp?.category ?? null,\n error: null\n };\n });\n\n const [progress, setProgress] = useState<\n (typeof progressStates)[keyof typeof progressStates] | false\n >(progressStates.loading);\n\n useEffect(() => {\n let timerId: number;\n\n if (progress === progressStates.loading) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n }, loadingTimeoutMS);\n } else if (progress === progressStates.submitting) {\n timerId = window.setTimeout(() => {\n setProgress(false);\n dispatch({ name: nameField.value!, category: categoryField.value! });\n onComplete();\n }, loadingTimeoutMS);\n }\n\n return () => {\n window.clearTimeout(timerId);\n };\n }, [progress]);\n\n return (\n <FormDialog\n target={target}\n heading={`${itemProp ? 'Edit' : 'Add'} item`}\n progress={progress}\n onCancel={{\n disabled: progress === progressStates.submitting,\n handler: () => {\n setProgress(false);\n onComplete();\n }\n }}\n onSubmit={{\n disabled:\n !!progress || [nameField, categoryField].some(field => !field.value || field.error),\n handler: () => {\n setProgress(progressStates.submitting);\n }\n }}\n >\n {(!progress || progress !== progressStates.loading) && (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Input\n required\n label='Name'\n value={nameField.value ?? ''}\n onChange={(e: ChangeEvent<HTMLInputElement>) => {\n setNameField(cur => ({\n ...cur,\n value: e.target.value,\n error: !e.target.value && cur.errorOnPriorBlur ? errorText : null\n }));\n }}\n onBlur={(e: FocusEvent<HTMLInputElement>) => {\n if (!e.target.value) {\n setNameField(cur => ({\n ...cur,\n error: errorText,\n errorOnPriorBlur: true\n }));\n } else if (nameField.errorOnPriorBlur) {\n setNameField(cur => ({ ...cur, errorOnPriorBlur: false }));\n }\n }}\n status={nameField.error ? 'error' : undefined}\n info={nameField.error}\n />\n <ComboBox\n required\n label='Category'\n selected={\n categoryField.value\n ? {\n items: {\n id: categoryField.value,\n text: categoryField.value\n }\n }\n : undefined\n }\n menu={{\n mode: 'single-select',\n onItemClick: category => {\n setCategoryField({\n value: category as MockCategory,\n error: null\n });\n },\n items: categories.map(category => {\n return {\n id: category,\n primary: category,\n selected: category === categoryField.value\n };\n })\n }}\n onBlur={selected => {\n if (!selected) {\n setCategoryField(cur => ({ ...cur, error: errorText }));\n }\n }}\n status={categoryField.error ? 'error' : undefined}\n info={categoryField.error}\n />\n </Flex>\n )}\n </FormDialog>\n );\n};\n\nexport const FormDialogMock = () => {\n const [dialogTarget, setDialogTarget] = useState<MockItemDialogProps['target'] | null>(null);\n const [editItem, setEditItem] = useState<MockItem | null>(null);\n const [items, dispatch] = useMockItems();\n\n return (\n <>\n <SummaryList\n name='Editable items'\n icon='list'\n count={items.length}\n actions={[\n {\n id: 'Add',\n text: 'Add',\n icon: 'plus',\n onClick: (_, e) => {\n setDialogTarget(e.currentTarget);\n }\n }\n ]}\n items={items.map<SummaryListItem>(({ id, name, category }) => {\n return {\n id,\n primary: name,\n secondary: <Text variant='secondary'>{category}</Text>,\n actions: [\n {\n id: 'Edit',\n text: 'Edit',\n icon: 'pencil',\n onClick: (_, e, menuButton) => {\n if (menuButton) setDialogTarget(menuButton);\n\n setEditItem({\n id,\n name,\n category\n });\n }\n },\n {\n id: 'Remove',\n text: 'Remove',\n icon: 'trash',\n onClick: () => {\n dispatch({ type: 'remove', item: { id } });\n }\n }\n ]\n };\n })}\n />\n\n {dialogTarget && (\n <ItemDialog\n target={dialogTarget}\n item={editItem}\n // Wrap dispatch so the dialog can only affect the item it creates or updates.\n dispatch={fields => {\n dispatch(\n editItem\n ? { type: 'edit', item: { id: editItem.id, ...fields } }\n : { type: 'add', item: { ...fields } }\n );\n }}\n onComplete={() => {\n setDialogTarget(null);\n setEditItem(null);\n }}\n />\n )}\n </>\n );\n};\n"]}

package/jsx/core/Dialog/InfoDialog.mocks.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InfoDialogMock: () => JSX.Element;
+export declare const InfoDialogProgressMock: () => JSX.Element;
+//# sourceMappingURL=InfoDialog.mocks.d.ts.map

package/jsx/core/Dialog/InfoDialog.mocks.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"InfoDialog.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/Dialog/InfoDialog.mocks.tsx"],"names":[],"mappings":";AAsBA,eAAO,MAAM,cAAc,mBAqB1B,CAAC;AAEF,eAAO,MAAM,sBAAsB,mBAmDlC,CAAC"}

package/jsx/core/Dialog/InfoDialog.mocks.jsx ADDED Viewed

@@ -0,0 +1,64 @@
+import { useState } from 'react';
+import { useElement, useAfterInitialEffect } from '@pega/cosmos-react-core/lib/hooks';
+import { Avatar, Button, Flex, InfoDialog, Text } from '@pega/cosmos-react-core';
+import { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';
+import { loadingTimeoutMS } from '../Progress/Progress.mocks';
+const mockContent = (<Flex container={{ direction: 'column', gap: 2 }}>
+    <Text as='p'>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </Text>
+    <FieldValueListDemo name='Demo field' value='demo value'/>
+  </Flex>);
+export const InfoDialogMock = () => {
+    const [target, setTarget] = useElement(null);
+    return (<>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        Open dialog
+      </Button>
+      {target ? (<InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>
+          {mockContent}
+        </InfoDialog>) : null}
+    </>);
+};
+export const InfoDialogProgressMock = () => {
+    const [target, setTarget] = useElement(null);
+    const [heading, setHeading] = useState();
+    const [content, setContent] = useState(null);
+    useAfterInitialEffect(() => {
+        if (!target) {
+            setHeading(undefined);
+            setContent(null);
+            return;
+        }
+        const timeout = window.setTimeout(() => {
+            setHeading({
+                primary: 'Primary heading',
+                secondary: 'Secondary info',
+                visual: <Avatar name='Info Dialog'/>
+            });
+            setContent(mockContent);
+        }, loadingTimeoutMS);
+        return () => {
+            window.clearTimeout(timeout);
+        };
+    }, [target]);
+    return (<>
+      <Button variant='secondary' onClick={(e) => {
+            setTarget(e.currentTarget);
+        }}>
+        Open dialog
+      </Button>
+      {target && (<InfoDialog heading={heading} target={target} onDismiss={() => setTarget(null)} progress={!content}>
+          {content}
+        </InfoDialog>)}
+    </>);
+};
+//# sourceMappingURL=InfoDialog.mocks.jsx.map

package/jsx/core/Dialog/InfoDialog.mocks.jsx.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"InfoDialog.mocks.jsx","sourceRoot":"","sources":["../../../src/core/Dialog/InfoDialog.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState, MouseEvent } from 'react';\n\nimport { useElement, useAfterInitialEffect } from '@pega/cosmos-react-core/lib/hooks';\nimport { Avatar, Button, Flex, InfoDialog, Text } from '@pega/cosmos-react-core';\nimport { InfoDialogProps } from '@pega/cosmos-react-core/lib/components/Dialog/Dialog.types';\n\nimport { FieldValueListDemo } from '../FieldValueList/FieldValueList.stories';\nimport { loadingTimeoutMS } from '../Progress/Progress.mocks';\n\nconst mockContent = (\n <Flex container={{ direction: 'column', gap: 2 }}>\n <Text as='p'>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat\n non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n </Text>\n <FieldValueListDemo name='Demo field' value='demo value' />\n </Flex>\n);\n\nexport const InfoDialogMock = () => {\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n\n return (\n <>\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n }}\n >\n Open dialog\n </Button>\n\n {target ? (\n <InfoDialog heading='General information' target={target} onDismiss={() => setTarget(null)}>\n {mockContent}\n </InfoDialog>\n ) : null}\n </>\n );\n};\n\nexport const InfoDialogProgressMock = () => {\n const [target, setTarget] = useElement<HTMLButtonElement>(null);\n const [heading, setHeading] = useState<InfoDialogProps['heading']>();\n const [content, setContent] = useState<InfoDialogProps['children']>(null);\n\n useAfterInitialEffect(() => {\n if (!target) {\n setHeading(undefined);\n setContent(null);\n return;\n }\n\n // Mocking a network request to fetch data\n const timeout = window.setTimeout(() => {\n setHeading({\n primary: 'Primary heading',\n secondary: 'Secondary info',\n visual: <Avatar name='Info Dialog' />\n });\n\n setContent(mockContent);\n }, loadingTimeoutMS);\n\n return () => {\n window.clearTimeout(timeout);\n };\n }, [target]);\n\n return (\n <>\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n setTarget(e.currentTarget);\n }}\n >\n Open dialog\n </Button>\n\n {target && (\n <InfoDialog\n heading={heading}\n target={target}\n onDismiss={() => setTarget(null)}\n progress={!content}\n >\n {content}\n </InfoDialog>\n )}\n </>\n );\n};\n"]}

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { DrawerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const ContainedDrawer: Story<DrawerProps>;
 export declare const ViewportDrawer: Story<DrawerProps>;

package/jsx/core/Email/EmailDisplay.stories.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { EmailDisplayProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const EmailDisplayDemo: Story<EmailDisplayProps>;
 //# sourceMappingURL=EmailDisplay.stories.d.ts.map

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { EmojiPickerProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const EmojiPickerDemo: Story<EmojiPickerProps>;
 export declare const EmojiPickerExcludeDemo: Story<EmojiPickerProps>;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAA6B,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;;AAEnG,wBAaU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAkBnD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,gBAAgB,CAmB1D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,gBAAgB,~~CA0BlD~~,CAAC"}
1	+ {"version":3,"file":"EmojiPicker.stories.d.ts","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAA6B,gBAAgB,EAAe,MAAM,yBAAyB,CAAC;;AAEnG,wBAaU;AAEV,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,CAkBnD,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KAAK,CAAC,gBAAgB,CAmB1D,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,gBAAgB,CA8BlD,CAAC"}

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { EmojiPicker, EmojiContext, Flex, Input } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/EmojiPicker',
@@ -39,10 +39,11 @@ export const CustomEmojiSet = (args) => {
     const onEmojiSelect = (emoji) => {
         setValue(curr => `${curr}${emoji.native}`);
     };
-    return (<EmojiContext.Provider value={{
-            set: 'google',
-            spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
-        }}>
+    const ctx = useMemo(() => ({
+        set: 'google',
+        spriteSrcResolver: () => 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'
+    }), []);
+    return (<EmojiContext.Provider value={ctx}>
       <Flex container={{ direction: 'column' }}>
         <Input value={value}/>
         <EmojiPicker showFooter={args.showFooter} emojiSize={args.emojiSize} perLine={args.perLine} onSelect={onEmojiSelect}/>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"EmojiPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;~~AAGjC~~,OAAO,EAAE,WAAW,EAAE,YAAY,EAAoB,IAAI,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAEnG,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,EAAE;QACb,OAAO,EAAE,CAAC;KACX;IACD,QAAQ,EAAE;QACR,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC5C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;QAC1C,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;KACzC;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,eAAe,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACjF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;MAAA,CAAC,WAAW,CACV,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAA4B,CAAC,IAAsB,EAAE,EAAE;IACxF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;MAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;MAAA,CAAC,WAAW,CACV,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC,CAC5D,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAA4B,CAAC,IAAsB,EAAE,EAAE;IAChF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAE/C,MAAM,aAAa,GAAG,CAAC,KAAgB,EAAE,EAAE;QACzC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,~~OAAO~~,~~CACL~~,~~CAAC~~,~~YAAY~~,~~CAAC~~,~~QAAQ~~,~~CACpB~~,~~KAAK~~,CAAC~~,CAAC~~;~~YACL~~,GAAG,EAAE,QAAQ;~~YACb~~,iBAAiB,EAAE,GAAG,EAAE,CACtB,gFAAgF;~~SACnF~~,CAAC,~~CAEF~~;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,CACvC;QAAA,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EACpB;QAAA,CAAC,WAAW,CACV,UAAU,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAC5B,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAC1B,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CACtB,QAAQ,CAAC,CAAC,aAAa,CAAC,EAE5B;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,YAAY,CAAC,QAAQ,CAAC,CACzB,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState } from 'react';\nimport { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, EmojiPickerProps, Flex, Input } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmojiPicker',\n component: EmojiPicker,\n args: {\n showFooter: false,\n emojiSize: 24,\n perLine: 9\n },\n argTypes: {\n showFooter: { control: { type: 'boolean' } },\n emojiSize: { control: { type: 'number' } },\n perLine: { control: { type: 'number' } }\n }\n} as Meta;\n\nexport const EmojiPickerDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const EmojiPickerExcludeDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const CustomEmojiSet: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n ~~return~~ (\n ~~<EmojiContext.Provider\~~n ~~value=~~{{\n set: 'google',\n spriteSrcResolver: () =>\n 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n }}\n >\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n </EmojiContext.Provider>\n );\n};\n"]}
1	+ {"version":3,"file":"EmojiPicker.stories.jsx","sourceRoot":"","sources":["../../../src/core/EmojiPicker/EmojiPicker.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { BaseEmoji } from 'emoji-mart';\n\nimport { EmojiPicker, EmojiContext, EmojiPickerProps, Flex, Input } from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/EmojiPicker',\n component: EmojiPicker,\n args: {\n showFooter: false,\n emojiSize: 24,\n perLine: 9\n },\n argTypes: {\n showFooter: { control: { type: 'boolean' } },\n emojiSize: { control: { type: 'number' } },\n perLine: { control: { type: 'number' } }\n }\n} as Meta;\n\nexport const EmojiPickerDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const EmojiPickerExcludeDemo: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n return (\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n exclude={['recent', 'people', 'foods', 'activity', 'flags']}\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n );\n};\n\nexport const CustomEmojiSet: Story<EmojiPickerProps> = (args: EmojiPickerProps) => {\n const [value, setValue] = useState<string>('');\n\n const onEmojiSelect = (emoji: BaseEmoji) => {\n setValue(curr => `${curr}${emoji.native}`);\n };\n\n const ctx = useMemo(\n () =>\n ({\n set: 'google',\n spriteSrcResolver: () =>\n 'https://unpkg.com/emoji-datasource-google@5.0.1/img/google/sheets-clean/32.png'\n } as const),\n []\n );\n\n return (\n <EmojiContext.Provider value={ctx}>\n <Flex container={{ direction: 'column' }}>\n <Input value={value} />\n <EmojiPicker\n showFooter={args.showFooter}\n emojiSize={args.emojiSize}\n perLine={args.perLine}\n onSelect={onEmojiSelect}\n />\n </Flex>\n </EmojiContext.Provider>\n );\n};\n"]}

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { EmptyStateProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const EmptyStateDemo: Story<EmptyStateProps>;
 //# sourceMappingURL=EmptyState.stories.d.ts.map

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { ErrorStateProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface ErrorStateStoryProps extends ErrorStateProps {
     displayRetry?: boolean;

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

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react';
 import { ExpandCollapseProps } from '@pega/cosmos-react-core';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 export declare const VerticalExpandCollapse: Story<ExpandCollapseProps>;
 export declare const HorizontalExpandCollapse: Story<ExpandCollapseProps>;

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

@@ -1,12 +1,17 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+import { FieldGroupProps } from '@pega/cosmos-react-core';
+declare const _default: Meta;
 export default _default;
 interface FieldGroupStoryProps {
     firstGroupName?: string;
+    firstGroupHeadingTag?: FieldGroupProps['headingTag'];
+    showfirstGroupHeadingTag?: boolean;
     firstGroupCollapsible?: boolean;
     firstGroupDescription?: string;
     showFirstAdditionalInfo?: boolean;
     secondGroupName?: string;
+    secondGroupHeadingTag?: FieldGroupProps['headingTag'];
+    showsecondGroupHeadingTag?: boolean;
     secondGroupCollapsible?: boolean;
     secondGroupDescription?: string;
     showSecondAdditionalInfo?: boolean;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"~~AAAA~~,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC~~;;AAY~~/C,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,~~CAqDtD~~,CAAC"}
1	+ {"version":3,"file":"FieldGroup.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAQL,eAAe,EAChB,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,UAAU,oBAAoB;IAC5B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACrD,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACtD,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,oBAAoB,CAuEtD,CAAC"}

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

@@ -1,11 +1,18 @@
+import { useState } from 'react';
 import { DateInput, FieldGroup, Grid, Input, Select, Option, TextArea } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/FieldGroup',
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (<Grid container={{ rowGap: 1 }}>
-      <FieldGroup name={args.firstGroupName} description={args.firstGroupDescription} collapsible={args.firstGroupCollapsible} additionalInfo={args.showFirstAdditionalInfo
+    const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);
+    const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);
+    return (<Grid container={{ rowGap: 2 }}>
+      <FieldGroup name={args.firstGroupName} headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined} description={args.firstGroupDescription} collapsed={args.firstGroupCollapsible ? firstGroupCollapsed : undefined} onToggleCollapsed={args.firstGroupCollapsible
+            ? () => {
+                setFirstGroupCollapsed(state => !state);
+            }
+            : undefined} additionalInfo={args.showFirstAdditionalInfo
             ? { heading: 'Additional Info', content: 'This is a field group' }
             : undefined}>
         <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>
@@ -22,7 +29,11 @@ export const FieldGroupDemo = (args) => {
           <Input disabled type='text' label='Disabled 1'/>
         </Grid>
       </FieldGroup>
-      <FieldGroup name={args.secondGroupName} description={args.secondGroupDescription} collapsible={args.secondGroupCollapsible} additionalInfo={args.showSecondAdditionalInfo
+      <FieldGroup name={args.secondGroupName} headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined} description={args.secondGroupDescription} collapsed={args.secondGroupCollapsible ? secondGroupCollapsed : undefined} onToggleCollapsed={args.secondGroupCollapsible
+            ? () => {
+                setSecondGroupCollapsed(state => !state);
+            }
+            : undefined} additionalInfo={args.showSecondAdditionalInfo
             ? { heading: 'Additional Info', content: 'This is another field group' }
             : undefined}>
         <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>
@@ -43,20 +54,34 @@ export const FieldGroupDemo = (args) => {
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
+    firstGroupHeadingTag: undefined,
+    showfirstGroupHeadingTag: true,
     firstGroupCollapsible: true,
     firstGroupDescription: '',
     showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
+    secondGroupHeadingTag: undefined,
+    showsecondGroupHeadingTag: true,
     secondGroupCollapsible: true,
     secondGroupDescription: '',
     showSecondAdditionalInfo: true
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
+    firstGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showfirstGroupHeadingTag: { control: { type: 'boolean' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
     firstGroupDescription: { control: { type: 'text' } },
     showFirstAdditionalInfo: { control: { type: 'boolean' } },
     secondGroupName: { control: { type: 'text' } },
+    secondGroupHeadingTag: {
+        options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+        control: { type: 'select' }
+    },
+    showsecondGroupHeadingTag: { control: { type: 'boolean' } },
     secondGroupCollapsible: { control: { type: 'boolean' } },
     secondGroupDescription: { control: { type: 'text' } },
     showSecondAdditionalInfo: { control: { type: 'boolean' } }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"~~AAEA~~,OAAO,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,~~EACT~~,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;~~AAaV~~,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAC7B;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAC1B,WAAW,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,CACxC,~~WAAW~~,CAAC,CAAC,IAAI,CAAC,qBAAqB,CAAC,~~CACxC~~,cAAc,CAAC,CACb,IAAI,CAAC,uBAAuB;YAC1B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,uBAAuB,EAAE;YAClE,CAAC,CAAC,SAAS,CACd,CAED;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,gDAAgD,EAAE,CAAC,CAClF;UAAA,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EACjC;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CACtB;YAAA,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CACnC;YAAA,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CACrC;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,EACzB;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC1C;YAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAC9B;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,EAC9C;UAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,EAChD;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,UAAU,CACT,IAAI,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAC3B,WAAW,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,CACzC,~~WAAW~~,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,~~CACzC~~,cAAc,CAAC,CACb,IAAI,CAAC,wBAAwB;YAC3B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,6BAA6B,EAAE;YACxE,CAAC,CAAC,SAAS,CACd,CAED;QAAA,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iDAAiD,EAAE,CAAC,CACnF;UAAA,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,EACjC;UAAA,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CACtB;YAAA,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CACnC;YAAA,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,SAAS,EAAE,MAAM,CACrC;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,SAAS,CAAC,KAAK,CAAC,QAAQ,EACzB;UAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAC1C;YAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,YAAY,EAC9B;UAAA,EAAE,IAAI,CACN;UAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,EAC9C;UAAA,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,EAChD;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,UAAU,CACd;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,eAAe;IAC/B,qBAAqB,EAAE,IAAI;IAC3B,qBAAqB,EAAE,EAAE;IACzB,uBAAuB,EAAE,IAAI;IAC7B,eAAe,EAAE,eAAe;IAChC,sBAAsB,EAAE,IAAI;IAC5B,sBAAsB,EAAE,EAAE;IAC1B,wBAAwB,EAAE,IAAI;CAC/B,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxD,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName?: string;\n firstGroupCollapsible?: boolean;\n firstGroupDescription?: string;\n showFirstAdditionalInfo?: boolean;\n secondGroupName?: string;\n secondGroupCollapsible?: boolean;\n secondGroupDescription?: string;\n showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n return (\n <Grid container={{ rowGap: 1 }}>\n <FieldGroup\n name={args.firstGroupName}\n description={args.firstGroupDescription}\n ~~collapsible~~={args.firstGroupCollapsible}\n additionalInfo={\n args.showFirstAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is a field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup\n name={args.secondGroupName}\n description={args.secondGroupDescription}\n ~~collapsible~~={args.secondGroupCollapsible}\n additionalInfo={\n args.showSecondAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is another field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupCollapsible: true,\n firstGroupDescription: '',\n showFirstAdditionalInfo: true,\n secondGroupName: 'Field group 2',\n secondGroupCollapsible: true,\n secondGroupDescription: '',\n showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n firstGroupDescription: { control: { type: 'text' } },\n showFirstAdditionalInfo: { control: { type: 'boolean' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupDescription: { control: { type: 'text' } },\n showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"FieldGroup.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea,\n FieldGroupProps\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName?: string;\n firstGroupHeadingTag?: FieldGroupProps['headingTag'];\n showfirstGroupHeadingTag?: boolean;\n firstGroupCollapsible?: boolean;\n firstGroupDescription?: string;\n showFirstAdditionalInfo?: boolean;\n secondGroupName?: string;\n secondGroupHeadingTag?: FieldGroupProps['headingTag'];\n showsecondGroupHeadingTag?: boolean;\n secondGroupCollapsible?: boolean;\n secondGroupDescription?: string;\n showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n const [firstGroupCollapsed, setFirstGroupCollapsed] = useState(false);\n const [secondGroupCollapsed, setSecondGroupCollapsed] = useState(false);\n return (\n <Grid container={{ rowGap: 2 }}>\n <FieldGroup\n name={args.firstGroupName}\n headingTag={args.showfirstGroupHeadingTag ? args.firstGroupHeadingTag : undefined}\n description={args.firstGroupDescription}\n collapsed={args.firstGroupCollapsible ? firstGroupCollapsed : undefined}\n onToggleCollapsed={\n args.firstGroupCollapsible\n ? () => {\n setFirstGroupCollapsed(state => !state);\n }\n : undefined\n }\n additionalInfo={\n args.showFirstAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is a field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup\n name={args.secondGroupName}\n headingTag={args.showsecondGroupHeadingTag ? args.secondGroupHeadingTag : undefined}\n description={args.secondGroupDescription}\n collapsed={args.secondGroupCollapsible ? secondGroupCollapsed : undefined}\n onToggleCollapsed={\n args.secondGroupCollapsible\n ? () => {\n setSecondGroupCollapsed(state => !state);\n }\n : undefined\n }\n additionalInfo={\n args.showSecondAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is another field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupHeadingTag: undefined,\n showfirstGroupHeadingTag: true,\n firstGroupCollapsible: true,\n firstGroupDescription: '',\n showFirstAdditionalInfo: true,\n secondGroupName: 'Field group 2',\n secondGroupHeadingTag: undefined,\n showsecondGroupHeadingTag: true,\n secondGroupCollapsible: true,\n secondGroupDescription: '',\n showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupHeadingTag: {\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n control: { type: 'select' }\n },\n showfirstGroupHeadingTag: { control: { type: 'boolean' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n firstGroupDescription: { control: { type: 'text' } },\n showFirstAdditionalInfo: { control: { type: 'boolean' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupHeadingTag: {\n options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],\n control: { type: 'select' }\n },\n showsecondGroupHeadingTag: { control: { type: 'boolean' } },\n secondGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupDescription: { control: { type: 'text' } },\n showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FieldGroupListItemProps } from '@pega/cosmos-react-core';
-declare type FieldGroupReducerPayload = {
+type FieldGroupReducerPayload = {
     action: 'add';
 } | {
     action: 'delete';

package/jsx/core/FieldGroup/FieldGroupList.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,~~aAAK~~,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,~~EAoBzB~~,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}
1	+ {"version":3,"file":"FieldGroupList.mocks.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,uBAAuB,EAMxB,MAAM,yBAAyB,CAAC;AAEjC,KAAK,wBAAwB,GACzB;IACE,MAAM,EAAE,KAAK,CAAC;CACf,GACD;IACE,MAAM,EAAE,QAAQ,CAAC;IACjB,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEN,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;CACxD;AAED,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,cAChB,SAAS,yBAAyB,SAAS,KAAK,WAAW,GAAG,IAAI,aAErE,uBAAuB,EAAE,WACvB,wBAAwB,KAChC,uBAAuB,EAyBzB,CAAC;AAEJ,eAAO,MAAM,iBAAiB,oBAAqB,SAAS,uBAM3D,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SAQ3B,CAAC;AAEF,eAAO,MAAM,qBAAqB,oBAAqB,SAAS,uBAmC/D,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SAQ/B,CAAC;AAEF,eAAO,MAAM,sBAAsB,oBAAqB,SAAS,uBAoBhE,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,SAOhC,CAAC"}

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx CHANGED Viewed

@@ -6,6 +6,7 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
                 ...items,
                 {
                     name: `${groupMeta.label} ${items.length + 1}`,
+                    headingTag: 'h3',
                     id: createUID(),
                     children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label}/>)
                 }
@@ -13,7 +14,11 @@ export const fieldGroupReducer = (groupMeta, FieldRenderer) => (items, payload)
         case 'delete':
             return items
                 .filter(group => group.id !== payload.id)
-                .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));
+                .map((group, i) => ({
+                ...group,
+                name: `${groupMeta.label} ${i + 1}`,
+                headingTag: 'h3'
+            }));
         default:
             return items;
     }

package/jsx/core/FieldGroup/FieldGroupList.mocks.jsx.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,SAAS,EAET,SAAS,EACT,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAqBjC,MAAM,CAAC,MAAM,iBAAiB,GAC5B,CAAC,SAAoB,EAAE,aAAuD,EAAE,EAAE,CAClF,CACE,KAAgC,EAChC,OAAiC,EACN,EAAE;IAC7B,QAAQ,OAAO,CAAC,MAAM,EAAE;QACtB,KAAK,KAAK;YACR,OAAO;gBACL,GAAG,KAAK;gBACR;oBACE,IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC9C,EAAE,EAAE,SAAS,EAAE;oBACf,QAAQ,EAAE,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,EAAG,CAAC;iBACxF;aACF,CAAC;QAEJ,KAAK,QAAQ;YACX,OAAO,KAAK;iBACT,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,KAAK,OAAO,CAAC,EAAE,CAAC;iBACxC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,~~EAAE,~~GAAG,KAAK,~~EAAE,~~IAAI,EAAE,GAAG,SAAS,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC;~~QAE5E~~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","sourcesContent":["import {\n createUID,\n DateInput,\n FieldGroupListItemProps,\n FileInput,\n Input,\n Option,\n Select,\n TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n \| {\n action: 'add';\n }\n \| {\n action: 'delete';\n id: string;\n };\n\nexport interface FieldMeta {\n label: string;\n type: 'text' \| 'date' \| 'file' \| 'select' \| 'textarea';\n}\n\nexport interface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element \| null) =>\n (\n items: FieldGroupListItemProps[],\n payload: FieldGroupReducerPayload\n ): FieldGroupListItemProps[] => {\n switch (payload.action) {\n case 'add':\n return [\n ...items,\n {\n name: `${groupMeta.label} ${items.length + 1}`,\n id: createUID(),\n children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n }\n ];\n\n case 'delete':\n return items\n .filter(group => group.id !== payload.id)\n .map((group, i) => ({ ...group, name: `${groupMeta.label} ${i + 1}` }));\n\n default:\n return items;\n }\n };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} key={label} />;\n }\n\n return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Advertising</Option>\n <Option>Car and truck expenses</Option>\n <Option>Commissions and fees</Option>\n <Option>Contract labor</Option>\n <Option>Legal and professional services</Option>\n <Option>Office expense</Option>\n <Option>Rent or lease</Option>\n <Option>Vehicles, machinery, and equipment</Option>\n <Option>Repairs and maintenance</Option>\n <Option>Travel and meals</Option>\n <Option>Deductible meals</Option>\n <Option>Utilities</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n if (type === 'file') {\n return <FileInput label={label} multiple />;\n }\n if (type === 'textarea') {\n return <TextArea label={label} />;\n }\n if (type === 'date') {\n return <DateInput label={label} />;\n }\n\n return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n label: 'Expense',\n fields: [\n { type: 'select', label: 'Type of expense' },\n { type: 'date', label: 'Date of expense' },\n { type: 'file', label: 'Receipts' },\n { type: 'textarea', label: 'Notes' }\n ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Mother</Option>\n <Option>Father</Option>\n <Option>Guardian</Option>\n <Option>Child</Option>\n <Option>Spouse</Option>\n <Option>Sibling</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n\n return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n label: 'Entry',\n fields: [\n { type: 'text', label: 'First name' },\n { type: 'text', label: 'Last name' },\n { type: 'select', label: 'Relationship' }\n ]\n};\n"]}
1	+ {"version":3,"file":"FieldGroupList.mocks.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n createUID,\n DateInput,\n FieldGroupListItemProps,\n FileInput,\n Input,\n Option,\n Select,\n TextArea\n} from '@pega/cosmos-react-core';\n\ntype FieldGroupReducerPayload =\n \| {\n action: 'add';\n }\n \| {\n action: 'delete';\n id: string;\n };\n\nexport interface FieldMeta {\n label: string;\n type: 'text' \| 'date' \| 'file' \| 'select' \| 'textarea';\n}\n\nexport interface GroupMeta {\n label: string;\n fields: FieldMeta[];\n}\n\nexport const fieldGroupReducer =\n (groupMeta: GroupMeta, FieldRenderer: (props: FieldMeta) => JSX.Element \| null) =>\n (\n items: FieldGroupListItemProps[],\n payload: FieldGroupReducerPayload\n ): FieldGroupListItemProps[] => {\n switch (payload.action) {\n case 'add':\n return [\n ...items,\n {\n name: `${groupMeta.label} ${items.length + 1}`,\n headingTag: 'h3',\n id: createUID(),\n children: groupMeta.fields.map(props => <FieldRenderer {...props} key={props.label} />)\n }\n ];\n\n case 'delete':\n return items\n .filter(group => group.id !== payload.id)\n .map((group, i) => ({\n ...group,\n name: `${groupMeta.label} ${i + 1}`,\n headingTag: 'h3'\n }));\n\n default:\n return items;\n }\n };\n\nexport const DemoFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} key={label} />;\n }\n\n return null;\n};\n\nexport const demoGroupMeta: GroupMeta = {\n label: 'Applicant',\n fields: [\n {\n type: 'text',\n label: 'Applicant name'\n }\n ]\n};\n\nexport const ExpensesFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Advertising</Option>\n <Option>Car and truck expenses</Option>\n <Option>Commissions and fees</Option>\n <Option>Contract labor</Option>\n <Option>Legal and professional services</Option>\n <Option>Office expense</Option>\n <Option>Rent or lease</Option>\n <Option>Vehicles, machinery, and equipment</Option>\n <Option>Repairs and maintenance</Option>\n <Option>Travel and meals</Option>\n <Option>Deductible meals</Option>\n <Option>Utilities</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n if (type === 'file') {\n return <FileInput label={label} multiple />;\n }\n if (type === 'textarea') {\n return <TextArea label={label} />;\n }\n if (type === 'date') {\n return <DateInput label={label} />;\n }\n\n return null;\n};\n\nexport const expensesGroupMeta: GroupMeta = {\n label: 'Expense',\n fields: [\n { type: 'select', label: 'Type of expense' },\n { type: 'date', label: 'Date of expense' },\n { type: 'file', label: 'Receipts' },\n { type: 'textarea', label: 'Notes' }\n ]\n};\n\nexport const InsuranceFieldRenderer = ({ label, type }: FieldMeta) => {\n if (type === 'text') {\n return <Input label={label} />;\n }\n if (type === 'select') {\n return (\n <Select label={label}>\n <Option>Select</Option>\n <Option>Mother</Option>\n <Option>Father</Option>\n <Option>Guardian</Option>\n <Option>Child</Option>\n <Option>Spouse</Option>\n <Option>Sibling</Option>\n <Option>Other</Option>\n </Select>\n );\n }\n\n return null;\n};\n\nexport const insuranceGroupMeta: GroupMeta = {\n label: 'Entry',\n fields: [\n { type: 'text', label: 'First name' },\n { type: 'text', label: 'Last name' },\n { type: 'select', label: 'Relationship' }\n ]\n};\n"]}

package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts CHANGED Viewed

@@ -1,9 +1,10 @@
 import { Meta, Story } from '@storybook/react';
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: Meta;
 export default _default;
 interface FieldGroupListDemoProps {
     allowAdd?: boolean;
     allowDelete?: boolean;
+    itemLevelDelete?: boolean;
 }
 export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
 export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;

package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,~~wBAWU~~;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;~~CACvB~~;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,~~CAyDvD~~,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,~~CA0DxD~~,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,~~CAkC7D~~,CAAC"}
1	+ {"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAc/C,wBAaU;AAEV,UAAU,uBAAuB;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,uBAAuB,CAqEvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CAsExD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2C7D,CAAC"}

package/jsx/core/FieldGroup/FieldGroupList.stories.jsx CHANGED Viewed

@@ -7,18 +7,21 @@ export default {
     component: FieldGroupList,
     args: {
         allowAdd: true,
-        allowDelete: true
+        allowDelete: true,
+        itemLevelDelete: false
     },
     argTypes: {
         allowAdd: { control: { type: 'boolean' } },
-        allowDelete: { control: { type: 'boolean' } }
+        allowDelete: { control: { type: 'boolean' } },
+        itemLevelDelete: { control: { type: 'boolean' } }
     }
 };
 export const ExpensesDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), [
         {
             name: `${expensesGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)
         }
     ]);
@@ -36,11 +39,20 @@ export const ExpensesDemo = (args) => {
             action('Submit')(`Form:${e.type}`);
         }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
       <Text variant='h2'>Expense report</Text>
-      <FieldGroupList items={state} onAdd={args.allowAdd
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }
@@ -48,10 +60,11 @@ export const ExpensesDemo = (args) => {
     </Form>);
 };
 export const InsuranceDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), [
         {
             name: `${insuranceGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)
         }
     ]);
@@ -70,11 +83,20 @@ export const InsuranceDemo = (args) => {
         }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
       <Text variant='h1'>Insurance step 1</Text>
       <Text variant='h2'>Dependants</Text>
-      <FieldGroupList items={state} onAdd={args.allowAdd
+      <FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }
@@ -82,18 +104,28 @@ export const InsuranceDemo = (args) => {
     </Form>);
 };
 export const FieldGroupListDemo = (args) => {
-    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
+    const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), [
         {
             name: `${demoGroupMeta.label} 1`,
             id: createUID(),
+            headingTag: 'h3',
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);
-    return (<FieldGroupList items={state} onAdd={args.allowAdd
+    return (<FieldGroupList items={args.itemLevelDelete
+            ? state.map((item, i) => ({
+                ...item,
+                onDelete: args.allowDelete && i !== 0
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined
+            }))
+            : state} onAdd={args.allowAdd
             ? () => {
                 dispatch({ action: 'add' });
             }
-            : undefined} onDelete={args.allowDelete
+            : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
             ? id => {
                 dispatch({ action: 'delete', id });
             }