@pega/cosmos-react-demos 3.0.10 → 3.1.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 (9) hide show
  1. package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts +1 -0
  2. package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts.map +1 -1
  3. package/jsx/core/FieldGroup/FieldGroupList.stories.jsx +37 -8
  4. package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map +1 -1
  5. package/lib/core/FieldGroup/FieldGroupList.stories.d.ts +1 -0
  6. package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map +1 -1
  7. package/lib/core/FieldGroup/FieldGroupList.stories.js +37 -8
  8. package/lib/core/FieldGroup/FieldGroupList.stories.js.map +1 -1
  9. package/package.json +9 -9
package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts CHANGED
@@ -4,6 +4,7 @@ export default _default;
4
4
  interface FieldGroupListDemoProps {
5
5
  allowAdd?: boolean;
6
6
  allowDelete?: boolean;
7
+ itemLevelDelete?: boolean;
7
8
  }
8
9
  export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
9
10
  export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;
package/jsx/core/FieldGroup/FieldGroupList.stories.d.ts.map CHANGED
@@ -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,CA8C7D,CAAC"}
package/jsx/core/FieldGroup/FieldGroupList.stories.jsx CHANGED
@@ -7,11 +7,13 @@ export default {
7
7
  component: FieldGroupList,
8
8
  args: {
9
9
  allowAdd: true,
10
- allowDelete: true
10
+ allowDelete: true,
11
+ itemLevelDelete: false
11
12
  },
12
13
  argTypes: {
13
14
  allowAdd: { control: { type: 'boolean' } },
14
- allowDelete: { control: { type: 'boolean' } }
15
+ allowDelete: { control: { type: 'boolean' } },
16
+ itemLevelDelete: { control: { type: 'boolean' } }
15
17
  }
16
18
  };
17
19
  export const ExpensesDemo = (args) => {
@@ -36,11 +38,20 @@ export const ExpensesDemo = (args) => {
36
38
  action('Submit')(`Form:${e.type}`);
37
39
  }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
38
40
  <Text variant='h2'>Expense report</Text>
39
- <FieldGroupList items={state} onAdd={args.allowAdd
41
+ <FieldGroupList items={args.itemLevelDelete
42
+ ? state.map((item, i) => ({
43
+ ...item,
44
+ onDelete: args.allowDelete && i !== 0
45
+ ? id => {
46
+ dispatch({ action: 'delete', id });
47
+ }
48
+ : undefined
49
+ }))
50
+ : state} onAdd={args.allowAdd
40
51
  ? () => {
41
52
  dispatch({ action: 'add' });
42
53
  }
43
- : undefined} onDelete={args.allowDelete
54
+ : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
44
55
  ? id => {
45
56
  dispatch({ action: 'delete', id });
46
57
  }
@@ -70,11 +81,20 @@ export const InsuranceDemo = (args) => {
70
81
  }} style={{ margin: 'auto', maxWidth: '37.5rem' }}>
71
82
  <Text variant='h1'>Insurance step 1</Text>
72
83
  <Text variant='h2'>Dependants</Text>
73
- <FieldGroupList items={state} onAdd={args.allowAdd
84
+ <FieldGroupList items={args.itemLevelDelete
85
+ ? state.map((item, i) => ({
86
+ ...item,
87
+ onDelete: args.allowDelete && i !== 0
88
+ ? id => {
89
+ dispatch({ action: 'delete', id });
90
+ }
91
+ : undefined
92
+ }))
93
+ : state} onAdd={args.allowAdd
74
94
  ? () => {
75
95
  dispatch({ action: 'add' });
76
96
  }
77
- : undefined} onDelete={args.allowDelete
97
+ : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
78
98
  ? id => {
79
99
  dispatch({ action: 'delete', id });
80
100
  }
@@ -89,11 +109,20 @@ export const FieldGroupListDemo = (args) => {
89
109
  children: demoGroupMeta.fields.map(DemoFieldRenderer)
90
110
  }
91
111
  ]);
92
- return (<FieldGroupList items={state} onAdd={args.allowAdd
112
+ return (<FieldGroupList items={args.itemLevelDelete
113
+ ? state.map((item, i) => ({
114
+ ...item,
115
+ onDelete: args.allowDelete && i !== 0
116
+ ? id => {
117
+ dispatch({ action: 'delete', id });
118
+ }
119
+ : undefined
120
+ }))
121
+ : state} onAdd={args.allowAdd
93
122
  ? () => {
94
123
  dispatch({ action: 'add' });
95
124
  }
96
- : undefined} onDelete={args.allowDelete
125
+ : undefined} onDelete={args.allowDelete && !args.itemLevelDelete
97
126
  ? id => {
98
127
  dispatch({ action: 'delete', id });
99
128
  }
package/jsx/core/FieldGroup/FieldGroupList.stories.jsx.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}
1
+ {"version":3,"file":"FieldGroupList.stories.jsx","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true,\n itemLevelDelete: false\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } },\n itemLevelDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n itemLevelDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}
package/lib/core/FieldGroup/FieldGroupList.stories.d.ts CHANGED
@@ -4,6 +4,7 @@ export default _default;
4
4
  interface FieldGroupListDemoProps {
5
5
  allowAdd?: boolean;
6
6
  allowDelete?: boolean;
7
+ itemLevelDelete?: boolean;
7
8
  }
8
9
  export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
9
10
  export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;
package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map CHANGED
@@ -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,CA8C7D,CAAC"}
package/lib/core/FieldGroup/FieldGroupList.stories.js CHANGED
@@ -8,11 +8,13 @@ export default {
8
8
  component: FieldGroupList,
9
9
  args: {
10
10
  allowAdd: true,
11
- allowDelete: true
11
+ allowDelete: true,
12
+ itemLevelDelete: false
12
13
  },
13
14
  argTypes: {
14
15
  allowAdd: { control: { type: 'boolean' } },
15
- allowDelete: { control: { type: 'boolean' } }
16
+ allowDelete: { control: { type: 'boolean' } },
17
+ itemLevelDelete: { control: { type: 'boolean' } }
16
18
  }
17
19
  };
18
20
  export const ExpensesDemo = (args) => {
@@ -28,11 +30,20 @@ export const ExpensesDemo = (args) => {
28
30
  }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }), onSubmit: (e) => {
29
31
  e.preventDefault();
30
32
  action('Submit')(`Form:${e.type}`);
31
- }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }), _jsx(FieldGroupList, { items: state, onAdd: args.allowAdd
33
+ }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }), _jsx(FieldGroupList, { items: args.itemLevelDelete
34
+ ? state.map((item, i) => ({
35
+ ...item,
36
+ onDelete: args.allowDelete && i !== 0
37
+ ? id => {
38
+ dispatch({ action: 'delete', id });
39
+ }
40
+ : undefined
41
+ }))
42
+ : state, onAdd: args.allowAdd
32
43
  ? () => {
33
44
  dispatch({ action: 'add' });
34
45
  }
35
- : undefined, onDelete: args.allowDelete
46
+ : undefined, onDelete: args.allowDelete && !args.itemLevelDelete
36
47
  ? id => {
37
48
  dispatch({ action: 'delete', id });
38
49
  }
@@ -51,11 +62,20 @@ export const InsuranceDemo = (args) => {
51
62
  }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }), onSubmit: (e) => {
52
63
  e.preventDefault();
53
64
  action('Submit')(`Form:${e.type}`);
54
- }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }), _jsx(Text, { variant: 'h2', children: "Dependants" }), _jsx(FieldGroupList, { items: state, onAdd: args.allowAdd
65
+ }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }), _jsx(Text, { variant: 'h2', children: "Dependants" }), _jsx(FieldGroupList, { items: args.itemLevelDelete
66
+ ? state.map((item, i) => ({
67
+ ...item,
68
+ onDelete: args.allowDelete && i !== 0
69
+ ? id => {
70
+ dispatch({ action: 'delete', id });
71
+ }
72
+ : undefined
73
+ }))
74
+ : state, onAdd: args.allowAdd
55
75
  ? () => {
56
76
  dispatch({ action: 'add' });
57
77
  }
58
- : undefined, onDelete: args.allowDelete
78
+ : undefined, onDelete: args.allowDelete && !args.itemLevelDelete
59
79
  ? id => {
60
80
  dispatch({ action: 'delete', id });
61
81
  }
@@ -69,11 +89,20 @@ export const FieldGroupListDemo = (args) => {
69
89
  children: demoGroupMeta.fields.map(DemoFieldRenderer)
70
90
  }
71
91
  ]);
72
- return (_jsx(FieldGroupList, { items: state, onAdd: args.allowAdd
92
+ return (_jsx(FieldGroupList, { items: args.itemLevelDelete
93
+ ? state.map((item, i) => ({
94
+ ...item,
95
+ onDelete: args.allowDelete && i !== 0
96
+ ? id => {
97
+ dispatch({ action: 'delete', id });
98
+ }
99
+ : undefined
100
+ }))
101
+ : state, onAdd: args.allowAdd
73
102
  ? () => {
74
103
  dispatch({ action: 'add' });
75
104
  }
76
- : undefined, onDelete: args.allowDelete
105
+ : undefined, onDelete: args.allowDelete && !args.itemLevelDelete
77
106
  ? id => {
78
107
  dispatch({ action: 'delete', id });
79
108
  }
package/lib/core/FieldGroup/FieldGroupList.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={state}\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}
1
+ {"version":3,"file":"FieldGroupList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAyB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAExF,OAAO,EACL,iBAAiB,EACjB,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,iBAAiB,EACjB,sBAAsB,EACtB,kBAAkB,EACnB,MAAM,wBAAwB,CAAC;AAEhC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;QACd,WAAW,EAAE,IAAI;QACjB,eAAe,EAAE,KAAK;KACvB;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC1C,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;QAC7C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;KAClD;CACM,CAAC;AAQV,MAAM,CAAC,MAAM,YAAY,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC5F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,iBAAiB,EAAE,qBAAqB,CAAC,EAC3D,SAAS,EACT,GAAG,EAAE,CAAC;QACJ;YACE,IAAI,EAAE,GAAG,iBAAiB,CAAC,KAAK,IAAI;YACpC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,iBAAiB,CAAC,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC;SAC9D;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,+BAAsB,EACxC,KAAC,cAAc,IACb,KAAK,EACH,IAAI,CAAC,eAAe;oBAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;wBACtB,GAAG,IAAI;wBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE;gCACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;4BACrC,CAAC;4BACH,CAAC,CAAC,SAAS;qBAChB,CAAC,CAAC;oBACL,CAAC,CAAC,KAAK,EAEX,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;oBACvC,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAmC,CAAC,IAA6B,EAAE,EAAE;IAC7F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,kBAAkB,EAAE,sBAAsB,CAAC,EAC7D,SAAS,EACT,GAAG,EAAE,CAAC;QACJ;YACE,IAAI,EAAE,GAAG,kBAAkB,CAAC,KAAK,IAAI;YACrC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,sBAAsB,CAAC;SAChE;KACF,CACF,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,OAAO,EACL,8BACE,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;wBAC5C,MAAM,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;oBACvD,CAAC,uBAGM,EACT,KAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,SAAS,uBAE5C,IACR,EAEL,QAAQ,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,MAAM,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC;QACrC,CAAC,EACD,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,aAE9C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,iCAAwB,EAC1C,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,2BAAkB,EACpC,KAAC,cAAc,IACb,KAAK,EACH,IAAI,CAAC,eAAe;oBAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;wBACtB,GAAG,IAAI;wBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;4BACzB,CAAC,CAAC,EAAE,CAAC,EAAE;gCACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;4BACrC,CAAC;4BACH,CAAC,CAAC,SAAS;qBAChB,CAAC,CAAC;oBACL,CAAC,CAAC,KAAK,EAEX,KAAK,EACH,IAAI,CAAC,QAAQ;oBACX,CAAC,CAAC,GAAG,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;oBAC9B,CAAC;oBACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;oBACvC,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS,GAEf,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAmC,CAChE,IAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,UAAU,CAClC,iBAAiB,CAAC,aAAa,EAAE,iBAAiB,CAAC,EACnD,SAAS,EACT,GAAG,EAAE,CAAC;QACJ;YACE,IAAI,EAAE,GAAG,aAAa,CAAC,KAAK,IAAI;YAChC,EAAE,EAAE,SAAS,EAAE;YACf,QAAQ,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,iBAAiB,CAAC;SACtD;KACF,CACF,CAAC;IAEF,OAAO,CACL,KAAC,cAAc,IACb,KAAK,EACH,IAAI,CAAC,eAAe;YAClB,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;gBACtB,GAAG,IAAI;gBACP,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,KAAK,CAAC;oBACzB,CAAC,CAAC,EAAE,CAAC,EAAE;wBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;oBACrC,CAAC;oBACH,CAAC,CAAC,SAAS;aAChB,CAAC,CAAC;YACL,CAAC,CAAC,KAAK,EAEX,KAAK,EACH,IAAI,CAAC,QAAQ;YACX,CAAC,CAAC,GAAG,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;YAC9B,CAAC;YACH,CAAC,CAAC,SAAS,EAEf,QAAQ,EACN,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,eAAe;YACvC,CAAC,CAAC,EAAE,CAAC,EAAE;gBACH,QAAQ,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;YACrC,CAAC;YACH,CAAC,CAAC,SAAS,GAEf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useReducer, MouseEvent, FormEvent } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport { Button, createUID, FieldGroupList, Form, Text } from '@pega/cosmos-react-core';\n\nimport {\n DemoFieldRenderer,\n demoGroupMeta,\n ExpensesFieldRenderer,\n expensesGroupMeta,\n fieldGroupReducer,\n InsuranceFieldRenderer,\n insuranceGroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n title: 'Core/FieldGroupList',\n component: FieldGroupList,\n args: {\n allowAdd: true,\n allowDelete: true,\n itemLevelDelete: false\n },\n argTypes: {\n allowAdd: { control: { type: 'boolean' } },\n allowDelete: { control: { type: 'boolean' } },\n itemLevelDelete: { control: { type: 'boolean' } }\n }\n} as Meta;\n\ninterface FieldGroupListDemoProps {\n allowAdd?: boolean;\n allowDelete?: boolean;\n itemLevelDelete?: boolean;\n}\n\nexport const ExpensesDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer),\n undefined,\n () => [\n {\n name: `${expensesGroupMeta.label} 1`,\n id: createUID(),\n children: expensesGroupMeta.fields.map(ExpensesFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h2'>Expense report</Text>\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const InsuranceDemo: Story<FieldGroupListDemoProps> = (args: FieldGroupListDemoProps) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer),\n undefined,\n () => [\n {\n name: `${insuranceGroupMeta.label} 1`,\n id: createUID(),\n children: insuranceGroupMeta.fields.map(InsuranceFieldRenderer)\n }\n ]\n );\n\n return (\n <Form\n actions={\n <>\n <Button\n name='Cancel'\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n action('Click')(`${e.currentTarget.name}:${e.type}`);\n }}\n >\n Cancel\n </Button>\n <Button name='Submit' type='submit' variant='primary'>\n Submit\n </Button>\n </>\n }\n onSubmit={(e: FormEvent) => {\n e.preventDefault();\n action('Submit')(`Form:${e.type}`);\n }}\n style={{ margin: 'auto', maxWidth: '37.5rem' }}\n >\n <Text variant='h1'>Insurance step 1</Text>\n <Text variant='h2'>Dependants</Text>\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n </Form>\n );\n};\n\nexport const FieldGroupListDemo: Story<FieldGroupListDemoProps> = (\n args: FieldGroupListDemoProps\n) => {\n const [state, dispatch] = useReducer(\n fieldGroupReducer(demoGroupMeta, DemoFieldRenderer),\n undefined,\n () => [\n {\n name: `${demoGroupMeta.label} 1`,\n id: createUID(),\n children: demoGroupMeta.fields.map(DemoFieldRenderer)\n }\n ]\n );\n\n return (\n <FieldGroupList\n items={\n args.itemLevelDelete\n ? state.map((item, i) => ({\n ...item,\n onDelete:\n args.allowDelete && i !== 0\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }))\n : state\n }\n onAdd={\n args.allowAdd\n ? () => {\n dispatch({ action: 'add' });\n }\n : undefined\n }\n onDelete={\n args.allowDelete && !args.itemLevelDelete\n ? id => {\n dispatch({ action: 'delete', id });\n }\n : undefined\n }\n />\n );\n};\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pega/cosmos-react-demos",
3
- "version": "3.0.10",
3
+ "version": "3.1.0",
4
4
  "author": "Pegasystems",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "repository": {
@@ -20,14 +20,14 @@
20
20
  "build": "tsc -b"
21
21
  },
22
22
  "dependencies": {
23
- "@pega/cosmos-react-build": "3.0.10",
24
- "@pega/cosmos-react-condition-builder": "3.0.10",
25
- "@pega/cosmos-react-core": "3.0.10",
26
- "@pega/cosmos-react-cs": "3.0.10",
27
- "@pega/cosmos-react-dnd": "3.0.10",
28
- "@pega/cosmos-react-rte": "3.0.10",
29
- "@pega/cosmos-react-social": "3.0.10",
30
- "@pega/cosmos-react-work": "3.0.10",
23
+ "@pega/cosmos-react-build": "3.1.0",
24
+ "@pega/cosmos-react-condition-builder": "3.1.0",
25
+ "@pega/cosmos-react-core": "3.1.0",
26
+ "@pega/cosmos-react-cs": "3.1.0",
27
+ "@pega/cosmos-react-dnd": "3.1.0",
28
+ "@pega/cosmos-react-rte": "3.1.0",
29
+ "@pega/cosmos-react-social": "3.1.0",
30
+ "@pega/cosmos-react-work": "3.1.0",
31
31
  "@types/emoji-mart": "^3.0.4",
32
32
  "@types/react": "^16.14.24 || ^17.0.38",
33
33
  "@types/react-dom": "^16.9.14 || ^17.0.11",