@pega/cosmos-react-demos 3.0.0-dev.2.1 → 3.0.0-dev.20.0

package/lib/core/FieldGroup/FieldGroupList.mocks.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.mocks.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.mocks.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,SAAS,EAA2B,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAqBpF,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,eAAC,aAAa,OAAK,KAAK,EAAE,GAAG,EAAE,KAAK,CAAC,KAAK,GAAI,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;YACE,OAAO,KAAK,CAAC;KAChB;AACH,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAa,EAAE,EAAE;IAC9D,IAAI,IAAI,KAAK,MAAM,EAAE;QACnB,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,WAAI,CAAC;KAChC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,KAAK,EAAE,WAAW;IAClB,MAAM,EAAE;QACN;YACE,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,gBAAgB;SACxB;KACF;CACF,CAAC","sourcesContent":["import { createUID, FieldGroupListItemProps, Input } 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} />;\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"]}
+{"version":3,"file":"FieldGroupList.mocks.js","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            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"]}

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
-declare const _default: {
-    title: string;
-    component: import("react").FunctionComponent<import("@pega/cosmos-react-core").FieldGroupListProps & import("@pega/cosmos-react-core").ForwardProps>;
-};
+import { Meta, Story } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-export declare const ExpensesDemo: () => JSX.Element;
-export declare const InsuranceDemo: () => JSX.Element;
-export declare const FieldGroupListDemo: () => JSX.Element;
+interface FieldGroupListDemoProps {
+    allowAdd?: boolean;
+    allowDelete?: boolean;
+}
+export declare const ExpensesDemo: Story<FieldGroupListDemoProps>;
+export declare const InsuranceDemo: Story<FieldGroupListDemoProps>;
+export declare const FieldGroupListDemo: Story<FieldGroupListDemoProps>;
 //# sourceMappingURL=FieldGroupList.stories.d.ts.map

package/lib/core/FieldGroup/FieldGroupList.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldGroupList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroupList.stories.tsx"],"names":[],"mappings":";;;;;AAyBA,wBAGE;AAiDF,eAAO,MAAM,YAAY,mBAiDxB,CAAC;AAiCF,eAAO,MAAM,aAAa,mBAkDzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,mBAwB9B,CAAC"}
+{"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,wBAOU;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,CA8DvD,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,uBAAuB,CA+DxD,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAuC7D,CAAC"}

package/lib/core/FieldGroup/FieldGroupList.stories.js

@@ -1,40 +1,17 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useReducer } from 'react';
 import { action } from '@storybook/addon-actions';
-import { Button, createUID, DateInput, FieldGroupList, FileInput, Form, Input, Select, Option, Text, TextArea } from '@pega/cosmos-react-core';
-import { DemoFieldRenderer, demoGroupMeta, fieldGroupReducer } from './FieldGroupList.mocks';
+import { Button, createUID, FieldGroupList, Form, Text, Flex } from '@pega/cosmos-react-core';
+import { DemoFieldRenderer, demoGroupMeta, ExpensesFieldRenderer, expensesGroupMeta, fieldGroupReducer, InsuranceFieldRenderer, insuranceGroupMeta } from './FieldGroupList.mocks';
 export default {
     title: 'Core/FieldGroupList',
-    component: FieldGroupList
-};
-const ExpensesFieldRenderer = ({ label, type }) => {
-    if (type === 'text') {
-        return _jsx(Input, { label: label }, void 0);
-    }
-    if (type === 'select') {
-        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }, void 0), _jsx(Option, { children: "Advertising" }, void 0), _jsx(Option, { children: "Car and truck expenses" }, void 0), _jsx(Option, { children: "Commissions and fees" }, void 0), _jsx(Option, { children: "Contract labor" }, void 0), _jsx(Option, { children: "Legal and professional services" }, void 0), _jsx(Option, { children: "Office expense" }, void 0), _jsx(Option, { children: "Rent or lease" }, void 0), _jsx(Option, { children: "Vehicles, machinery, and equipment" }, void 0), _jsx(Option, { children: "Repairs and maintenance" }, void 0), _jsx(Option, { children: "Travel and meals" }, void 0), _jsx(Option, { children: "Deductible meals" }, void 0), _jsx(Option, { children: "Utilities" }, void 0), _jsx(Option, { children: "Other" }, void 0)] }, void 0));
-    }
-    if (type === 'file') {
-        return _jsx(FileInput, { label: label, multiple: true }, void 0);
-    }
-    if (type === 'textarea') {
-        return _jsx(TextArea, { label: label }, void 0);
-    }
-    if (type === 'date') {
-        return _jsx(DateInput, { label: label }, void 0);
+    component: FieldGroupList,
+    args: {
+        allowAdd: true,
+        allowDelete: true
     }
-    return null;
 };
-const expensesGroupMeta = {
-    label: 'Expense',
-    fields: [
-        { type: 'select', label: 'Type of expense' },
-        { type: 'date', label: 'Date of expense' },
-        { type: 'file', label: 'Receipts' },
-        { type: 'textarea', label: 'Notes' }
-    ]
-};
-export const ExpensesDemo = () => {
+export const ExpensesDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(expensesGroupMeta, ExpensesFieldRenderer), undefined, () => [
         {
             name: `${expensesGroupMeta.label} 1`,
@@ -44,33 +21,25 @@ export const ExpensesDemo = () => {
     ]);
     return (_jsxs(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
                         action('Click')(`${e.currentTarget.name}:${e.type}`);
-                    }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
+                    }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }), onSubmit: (e) => {
             e.preventDefault();
             action('Submit')(`Form:${e.type}`);
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
-                    dispatch({ action: 'add' });
-                }, onDelete: id => {
-                    dispatch({ action: 'delete', id });
-                } }, void 0)] }, void 0));
-};
-const InsuranceFieldRenderer = ({ label, type }) => {
-    if (type === 'text') {
-        return _jsx(Input, { label: label }, void 0);
-    }
-    if (type === 'select') {
-        return (_jsxs(Select, { label: label, children: [_jsx(Option, { children: "Select" }, void 0), _jsx(Option, { children: "Mother" }, void 0), _jsx(Option, { children: "Father" }, void 0), _jsx(Option, { children: "Guardian" }, void 0), _jsx(Option, { children: "Child" }, void 0), _jsx(Option, { children: "Spouse" }, void 0), _jsx(Option, { children: "Sibling" }, void 0), _jsx(Option, { children: "Other" }, void 0)] }, void 0));
-    }
-    return null;
-};
-const insuranceGroupMeta = {
-    label: 'Entry',
-    fields: [
-        { type: 'text', label: 'First name' },
-        { type: 'text', label: 'Last name' },
-        { type: 'select', label: 'Relationship' }
-    ]
+        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h2', children: "Expense report" }), _jsx(FieldGroupList, { items: state.map(fields => {
+                    return {
+                        ...fields,
+                        children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children })
+                    };
+                }), onAdd: args.allowAdd
+                    ? () => {
+                        dispatch({ action: 'add' });
+                    }
+                    : undefined, onDelete: args.allowDelete
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined })] }));
 };
-export const InsuranceDemo = () => {
+export const InsuranceDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(insuranceGroupMeta, InsuranceFieldRenderer), undefined, () => [
         {
             name: `${insuranceGroupMeta.label} 1`,
@@ -80,16 +49,25 @@ export const InsuranceDemo = () => {
     ]);
     return (_jsxs(Form, { actions: _jsxs(_Fragment, { children: [_jsx(Button, { name: 'Cancel', variant: 'secondary', onClick: (e) => {
                         action('Click')(`${e.currentTarget.name}:${e.type}`);
-                    }, children: "Cancel" }, void 0), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" }, void 0)] }, void 0), onSubmit: (e) => {
+                    }, children: "Cancel" }), _jsx(Button, { name: 'Submit', type: 'submit', variant: 'primary', children: "Submit" })] }), onSubmit: (e) => {
             e.preventDefault();
             action('Submit')(`Form:${e.type}`);
-        }, style: { margin: 'auto', maxWidth: '37.5rem' }, children: [_jsx(Text, { variant: 'h1', children: "Insurance step 1" }, void 0), _jsx(Text, { variant: 'h2', children: "Dependants" }, void 0), _jsx(FieldGroupList, { items: state, onAdd: () => {
-                    dispatch({ action: 'add' });
-                }, onDelete: id => {
-                    dispatch({ action: 'delete', id });
-                } }, void 0)] }, void 0));
+        }, 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.map(fields => {
+                    return {
+                        ...fields,
+                        children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children })
+                    };
+                }), onAdd: args.allowAdd
+                    ? () => {
+                        dispatch({ action: 'add' });
+                    }
+                    : undefined, onDelete: args.allowDelete
+                    ? id => {
+                        dispatch({ action: 'delete', id });
+                    }
+                    : undefined })] }));
 };
-export const FieldGroupListDemo = () => {
+export const FieldGroupListDemo = (args) => {
     const [state, dispatch] = useReducer(fieldGroupReducer(demoGroupMeta, DemoFieldRenderer), undefined, () => [
         {
             name: `${demoGroupMeta.label} 1`,
@@ -97,10 +75,19 @@ export const FieldGroupListDemo = () => {
             children: demoGroupMeta.fields.map(DemoFieldRenderer)
         }
     ]);
-    return (_jsx(FieldGroupList, { items: state, onAdd: () => {
-            dispatch({ action: 'add' });
-        }, onDelete: id => {
-            dispatch({ action: 'delete', id });
-        } }, void 0));
+    return (_jsx(FieldGroupList, { items: state.map(fields => {
+            return {
+                ...fields,
+                children: _jsx(Flex, { container: { direction: 'column', gap: 2 }, children: fields.children })
+            };
+        }), onAdd: args.allowAdd
+            ? () => {
+                dispatch({ action: 'add' });
+            }
+            : undefined, onDelete: args.allowDelete
+            ? id => {
+                dispatch({ action: 'delete', id });
+            }
+            : undefined }));
 };
 //# sourceMappingURL=FieldGroupList.stories.js.map

package/lib/core/FieldGroup/FieldGroupList.stories.js.map

@@ -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';\n\nimport {\n  Button,\n  createUID,\n  DateInput,\n  FieldGroupList,\n  FileInput,\n  Form,\n  Input,\n  Select,\n  Option,\n  Text,\n  TextArea\n} from '@pega/cosmos-react-core';\n\nimport {\n  DemoFieldRenderer,\n  demoGroupMeta,\n  fieldGroupReducer,\n  FieldMeta,\n  GroupMeta\n} from './FieldGroupList.mocks';\n\nexport default {\n  title: 'Core/FieldGroupList',\n  component: FieldGroupList\n};\n\nconst 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\nconst 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 ExpensesDemo = () => {\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          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nconst 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\nconst 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\nexport const InsuranceDemo = () => {\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          dispatch({ action: 'add' });\n        }}\n        onDelete={id => {\n          dispatch({ action: 'delete', id });\n        }}\n      />\n    </Form>\n  );\n};\n\nexport const FieldGroupListDemo = () => {\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        dispatch({ action: 'add' });\n      }}\n      onDelete={id => {\n        dispatch({ action: 'delete', id });\n      }}\n    />\n  );\n};\n"]}
+{"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, Flex } 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} 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.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\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.map(fields => {\n          return {\n            ...fields,\n            children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n          };\n        })}\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.map(fields => {\n        return {\n          ...fields,\n          children: <Flex container={{ direction: 'column', gap: 2 }}>{fields.children}</Flex>\n        };\n      })}\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"]}

package/lib/core/FieldValueList/FieldValueList.stories.d.ts

@@ -1,8 +1,8 @@
 import { Meta, Story } from '@storybook/react';
-import { FieldValueListProps } from '@pega/cosmos-react-core';
+import { FieldValueListProps, OmitStrict } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
-interface FieldValueListStoryProps extends FieldValueListProps {
+interface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {
     name: string;
     value: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkB,mBAAmB,EAAsB,MAAM,yBAAyB,CAAC;;AAElG,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,mBAAmB;IAC5D,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC"}
+{"version":3,"file":"FieldValueList.stories.d.ts","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAEL,mBAAmB,EAInB,UAAU,EACX,MAAM,yBAAyB,CAAC;;AAEjC,wBAGU;AAEV,UAAU,wBAAyB,SAAQ,UAAU,CAAC,mBAAmB,EAAE,QAAQ,CAAC;IAClF,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CA4C9D,CAAC"}

package/lib/core/FieldValueList/FieldValueList.stories.js

@@ -9,12 +9,12 @@ export const FieldValueListDemo = (args) => {
         {
             id: 'id',
             name: 'ID',
-            value: (_jsx(Text, { variant: 'h1', as: 'span', children: "C-1234" }, void 0))
+            value: (_jsx(Text, { variant: 'h1', as: 'span', children: "C-1234" }))
         },
         {
             id: 'status',
             name: 'Status',
-            value: _jsx(Status, { variant: 'pending', children: "pending" }, void 0)
+            value: _jsx(Status, { variant: 'pending', children: "pending" })
         },
         {
             id: 'dynamic',
@@ -24,7 +24,7 @@ export const FieldValueListDemo = (args) => {
         {
             id: 'link',
             name: 'Link',
-            value: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "C-ABC" }, void 0))
+            value: (_jsx(Link, { href: 'https://www.pega.com', target: '_blank', children: "C-ABC" }))
         },
         {
             id: 'created',
@@ -36,7 +36,7 @@ export const FieldValueListDemo = (args) => {
             name: 'No Value'
         }
     ];
-    return _jsx(FieldValueList, { variant: args.variant, fields: data }, void 0);
+    return _jsx(FieldValueList, { variant: args.variant, fields: data });
 };
 FieldValueListDemo.args = {
     variant: 'inline',

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

@@ -1 +1 @@
-{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAuB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAElG,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,+BAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,gCAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,8BAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,WAAI,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { FieldValueList, FieldValueListProps, Link, Status, Text } from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends FieldValueListProps {\n  name: string;\n  value: string;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const data = [\n    {\n      id: 'id',\n      name: 'ID',\n      value: (\n        <Text variant='h1' as='span'>\n          C-1234\n        </Text>\n      )\n    },\n    {\n      id: 'status',\n      name: 'Status',\n      value: <Status variant='pending'>pending</Status>\n    },\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    },\n    {\n      id: 'link',\n      name: 'Link',\n      value: (\n        <Link href='https://www.pega.com' target='_blank'>\n          C-ABC\n        </Link>\n      )\n    },\n    {\n      id: 'created',\n      name: 'Created',\n      value: new Date().toLocaleDateString()\n    },\n    {\n      id: 'no value',\n      name: 'No Value'\n    }\n  ];\n\n  return <FieldValueList variant={args.variant} fields={data} />;\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: { options: ['inline', 'stacked'], control: { type: 'select' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}
+{"version":3,"file":"FieldValueList.stories.js","sourceRoot":"","sources":["../../../src/core/FieldValueList/FieldValueList.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,cAAc,EAEd,IAAI,EACJ,MAAM,EACN,IAAI,EAEL,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAClB,CAAC;AAOV,MAAM,CAAC,MAAM,kBAAkB,GAAoC,CACjE,IAA8B,EAC9B,EAAE;IACF,MAAM,IAAI,GAAG;QACX;YACE,EAAE,EAAE,IAAI;YACR,IAAI,EAAE,IAAI;YACV,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,uBAErB,CACR;SACF;QACD;YACE,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,wBAAiB;SAClD;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB;QACD;YACE,EAAE,EAAE,MAAM;YACV,IAAI,EAAE,MAAM;YACZ,KAAK,EAAE,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,sBAE1C,CACR;SACF;QACD;YACE,EAAE,EAAE,SAAS;YACb,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,kBAAkB,EAAE;SACvC;QACD;YACE,EAAE,EAAE,UAAU;YACd,IAAI,EAAE,UAAU;SACjB;KACF,CAAC;IAEF,OAAO,KAAC,cAAc,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,GAAI,CAAC;AACjE,CAAC,CAAC;AAEF,kBAAkB,CAAC,IAAI,GAAG;IACxB,OAAO,EAAE,QAAQ;IACjB,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,kBAAkB,CAAC,QAAQ,GAAG;IAC5B,OAAO,EAAE,EAAE,OAAO,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxE,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACnC,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;CACrC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n  FieldValueList,\n  FieldValueListProps,\n  Link,\n  Status,\n  Text,\n  OmitStrict\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/FieldValueList',\n  component: FieldValueList\n} as Meta;\n\ninterface FieldValueListStoryProps extends OmitStrict<FieldValueListProps, 'fields'> {\n  name: string;\n  value: string;\n}\n\nexport const FieldValueListDemo: Story<FieldValueListStoryProps> = (\n  args: FieldValueListStoryProps\n) => {\n  const data = [\n    {\n      id: 'id',\n      name: 'ID',\n      value: (\n        <Text variant='h1' as='span'>\n          C-1234\n        </Text>\n      )\n    },\n    {\n      id: 'status',\n      name: 'Status',\n      value: <Status variant='pending'>pending</Status>\n    },\n    {\n      id: 'dynamic',\n      name: args.name,\n      value: args.value\n    },\n    {\n      id: 'link',\n      name: 'Link',\n      value: (\n        <Link href='https://www.pega.com' target='_blank'>\n          C-ABC\n        </Link>\n      )\n    },\n    {\n      id: 'created',\n      name: 'Created',\n      value: new Date().toLocaleDateString()\n    },\n    {\n      id: 'no value',\n      name: 'No Value'\n    }\n  ];\n\n  return <FieldValueList variant={args.variant} fields={data} />;\n};\n\nFieldValueListDemo.args = {\n  variant: 'inline',\n  name: 'Name',\n  value: 'Value'\n};\n\nFieldValueListDemo.argTypes = {\n  variant: { options: ['inline', 'stacked'], control: { type: 'select' } },\n  name: { control: { type: 'text' } },\n  value: { control: { type: 'text' } }\n};\n"]}

package/lib/core/File/FileDisplay.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAQhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAsC1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CAwC7D,CAAC"}
+{"version":3,"file":"FileDisplay.stories.d.ts","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAEL,gBAAgB,EAIhB,mBAAmB,EAEpB,MAAM,yBAAyB,CAAC;;AAEjC,wBAaU;AAEV,UAAU,oBAAoB;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,oBAAoB,CAmGxD,CAAC;AAUF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,gBAAgB,GAAG,oBAAoB,CAyB1E,CAAC;AAYF,UAAU,uBAAwB,SAAQ,oBAAoB;IAC5D,IAAI,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAClC,IAAI,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,CAAC,UAAU,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,uBAAuB,CA2B7D,CAAC"}

package/lib/core/File/FileDisplay.stories.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useState } from 'react';
-import { FileDisplay, FieldValueList, Image, Popover, ToasterContext, useElement, useOuterEvent, FileUploadItem } from '@pega/cosmos-react-core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FileDisplay, FieldValueList, ToasterContext, FileUploadItem } from '@pega/cosmos-react-core';
 export default {
     title: 'Core/File/Display',
     component: FileDisplay,
@@ -27,40 +27,40 @@ export const FileDisplayTypes = (args) => {
         {
             id: '1',
             name: 'Image file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'image.jpg' : undefined, value: args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '2',
             name: 'Video file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'video.avi' : undefined, value: args.withValue ? 'https://pega.com/media/some-video.avi' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'video.avi' : undefined, value: args.withValue ? 'https://pega.com/media/some-video.avi' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '3',
             name: 'Audio file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'recording.mp3' : undefined, value: args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'recording.mp3' : undefined, value: args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '4',
             name: 'Document file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'document.doc' : undefined, value: args.withValue ? 'https://pega.com/media/document.doc' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'document.doc' : undefined, value: args.withValue ? 'https://pega.com/media/document.doc' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '5',
             name: 'PDF file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'invoice.pdf' : undefined, value: args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'invoice.pdf' : undefined, value: args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '6',
             name: 'Presentation file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'review.pps' : undefined, value: args.withValue ? 'https://pega.com/media/review.pps' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'review.pps' : undefined, value: args.withValue ? 'https://pega.com/media/review.pps' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         },
         {
             id: '7',
             name: 'Spreadsheet file',
-            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'welfare.xlsx' : undefined, value: args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0))
+            value: (_jsx(FileDisplay, { displayText: args.withDisplayText ? 'welfare.xlsx' : undefined, value: args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined, onPreview: handlePreview, onDownload: handleDownload }))
         }
     ];
-    return _jsx(FieldValueList, { fields: fields }, void 0);
+    return _jsx(FieldValueList, { fields: fields });
 };
 FileDisplayTypes.args = {
     withDisplayText: true
@@ -69,21 +69,15 @@ FileDisplayTypes.argTypes = {
     withDisplayText: { control: { type: 'boolean' } }
 };
 export const FileDisplayDemo = (args) => {
-    const [buttonEl, setButtonEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const [showPreview, setShowPreview] = useState(false);
-    useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));
-    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
-    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileDisplay, { ref: setButtonEl, variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: buttonEl, children: _jsx(Image, { src: imageSrc, alt: args.displayText || 'Pega World iNspire' }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileDisplay, { variant: args.variant, displayText: args.displayText, value: args.withValue ? imageSrc : undefined, onPreview: handlePreview, onDownload: handleDownload }));
 };
 FileDisplayDemo.args = {
     variant: 'file',
@@ -94,21 +88,15 @@ FileDisplayDemo.argTypes = {
     displayText: { control: { type: 'text' } }
 };
 export const FileUploadItemDemo = (args) => {
-    const [fileEl, setFileEl] = useElement();
-    const [popoverEl, setPopoverEl] = useElement();
-    const [showPreview, setShowPreview] = useState(false);
-    useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));
-    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
-    const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;
+    const { push } = useContext(ToasterContext);
+    const handlePreview = args.withPreview
+        ? (url) => push({ content: `Previewed ${url}` })
+        : undefined;
     const handleDownload = args.withDownload
-        ? () => {
-            const element = document.createElement('a');
-            element.href = imageSrc;
-            element.download = 'cosmos_file_display_download.jpg';
-            element.click();
-        }
+        ? (url) => push({ content: `Downloaded ${url}` })
         : undefined;
-    return (_jsxs(_Fragment, { children: [_jsx(FileUploadItem, { ref: setFileEl, name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }, void 0), _jsx(Popover, { ref: setPopoverEl, show: showPreview, target: fileEl, strategy: 'fixed', children: _jsx(Image, { src: imageSrc, alt: args.name }, void 0) }, void 0)] }, void 0));
+    const imageSrc = 'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';
+    return (_jsx(FileUploadItem, { name: args.name, meta: args.meta, error: args.error, progress: args.progress, thumbnail: imageSrc, onPreview: handlePreview, onDownload: handleDownload }));
 };
 FileUploadItemDemo.args = {
     name: 'Pega World iNspire',

package/lib/core/File/FileDisplay.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext, useState } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  Image,\n  Popover,\n  ToasterContext,\n  useElement,\n  useOuterEvent,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const [buttonEl, setButtonEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [buttonEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileDisplay\n        ref={setButtonEl}\n        variant={args.variant}\n        displayText={args.displayText}\n        value={args.withValue ? imageSrc : undefined}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={buttonEl}>\n        <Image src={imageSrc} alt={args.displayText || 'Pega World iNspire'} />\n      </Popover>\n    </>\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const [fileEl, setFileEl] = useElement();\n  const [popoverEl, setPopoverEl] = useElement();\n  const [showPreview, setShowPreview] = useState(false);\n\n  useOuterEvent('click', [fileEl, popoverEl], () => setShowPreview(false));\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  const handlePreview = args.withPreview ? () => setShowPreview(true) : undefined;\n\n  const handleDownload = args.withDownload\n    ? () => {\n        const element = document.createElement('a');\n        element.href = imageSrc;\n        element.download = 'cosmos_file_display_download.jpg';\n        element.click();\n      }\n    : undefined;\n\n  return (\n    <>\n      <FileUploadItem\n        ref={setFileEl}\n        name={args.name}\n        meta={args.meta}\n        error={args.error}\n        progress={args.progress}\n        thumbnail={imageSrc}\n        onPreview={handlePreview}\n        onDownload={handleDownload}\n      />\n      <Popover ref={setPopoverEl} show={showPreview} target={fileEl} strategy='fixed'>\n        <Image src={imageSrc} alt={args.name} />\n      </Popover>\n    </>\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}
+{"version":3,"file":"FileDisplay.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileDisplay.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useContext } from 'react';\n\nimport {\n  FileDisplay,\n  FileDisplayProps,\n  FileItemProps,\n  FieldValueList,\n  ToasterContext,\n  FileUploadItemProps,\n  FileUploadItem\n} from '@pega/cosmos-react-core';\n\nexport default {\n  title: 'Core/File/Display',\n  component: FileDisplay,\n  args: {\n    withValue: true,\n    withPreview: true,\n    withDownload: true\n  },\n  argTypes: {\n    withValue: { control: { type: 'boolean' } },\n    withPreview: { control: { type: 'boolean' } },\n    withDownload: { control: { type: 'boolean' } }\n  }\n} as Meta;\n\ninterface FileDisplayDemoProps {\n  withDisplayText?: boolean;\n  withValue?: boolean;\n  withPreview?: boolean;\n  withDownload?: boolean;\n}\n\nexport const FileDisplayTypes: Story<FileDisplayDemoProps> = (args: FileDisplayDemoProps) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const fields = [\n    {\n      id: '1',\n      name: 'Image file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'image.jpg' : undefined}\n          value={args.withValue ? 'https://pbs.twimg.com/media/ENNN5PAXkAE-hag.jpg' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '2',\n      name: 'Video file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'video.avi' : undefined}\n          value={args.withValue ? 'https://pega.com/media/some-video.avi' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '3',\n      name: 'Audio file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'recording.mp3' : undefined}\n          value={args.withValue ? 'https://pega.com/media/sprint-review-recording.mp3' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '4',\n      name: 'Document file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'document.doc' : undefined}\n          value={args.withValue ? 'https://pega.com/media/document.doc' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '5',\n      name: 'PDF file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'invoice.pdf' : undefined}\n          value={args.withValue ? 'https://pega.com/media/invoice.pdf' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '6',\n      name: 'Presentation file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'review.pps' : undefined}\n          value={args.withValue ? 'https://pega.com/media/review.pps' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    },\n    {\n      id: '7',\n      name: 'Spreadsheet file',\n      value: (\n        <FileDisplay\n          displayText={args.withDisplayText ? 'welfare.xlsx' : undefined}\n          value={args.withValue ? 'https://pega.com/media/welfare.xlsx' : undefined}\n          onPreview={handlePreview}\n          onDownload={handleDownload}\n        />\n      )\n    }\n  ];\n\n  return <FieldValueList fields={fields} />;\n};\n\nFileDisplayTypes.args = {\n  withDisplayText: true\n};\n\nFileDisplayTypes.argTypes = {\n  withDisplayText: { control: { type: 'boolean' } }\n};\n\nexport const FileDisplayDemo: Story<FileDisplayProps & FileDisplayDemoProps> = (\n  args: FileDisplayProps & FileDisplayDemoProps\n) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileDisplay\n      variant={args.variant}\n      displayText={args.displayText}\n      value={args.withValue ? imageSrc : undefined}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileDisplayDemo.args = {\n  variant: 'file',\n  displayText: 'Pega World iNspire'\n};\n\nFileDisplayDemo.argTypes = {\n  variant: { options: ['file', 'text', 'link'], control: { type: 'radio' } },\n  displayText: { control: { type: 'text' } }\n};\n\ninterface FileUploadItemDemoProps extends FileDisplayDemoProps {\n  name: FileUploadItemProps['name'];\n  meta?: FileUploadItemProps['meta'];\n  error?: FileUploadItemProps['error'];\n  progress?: FileUploadItemProps['progress'];\n}\n\nexport const FileUploadItemDemo: Story<FileUploadItemDemoProps> = (\n  args: FileUploadItemDemoProps\n) => {\n  const { push } = useContext(ToasterContext);\n\n  const handlePreview = args.withPreview\n    ? (url: FileItemProps['url']) => push({ content: `Previewed ${url}` })\n    : undefined;\n\n  const handleDownload = args.withDownload\n    ? (url: FileItemProps['url']) => push({ content: `Downloaded ${url}` })\n    : undefined;\n\n  const imageSrc =\n    'https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/pwi-2021-prevcard.jpg';\n\n  return (\n    <FileUploadItem\n      name={args.name}\n      meta={args.meta}\n      error={args.error}\n      progress={args.progress}\n      thumbnail={imageSrc}\n      onPreview={handlePreview}\n      onDownload={handleDownload}\n    />\n  );\n};\n\nFileUploadItemDemo.args = {\n  name: 'Pega World iNspire',\n  meta: 'Some additional information',\n  error: false,\n  progress: 100\n};\n\nFileUploadItemDemo.argTypes = {\n  withValue: { table: { disable: true } },\n  name: { control: { type: 'text' } },\n  meta: { control: { type: 'text' } },\n  error: { control: { type: 'boolean' } },\n  progress: { control: { type: 'number' } }\n};\n"]}

package/lib/core/File/FileInput.stories.js

@@ -43,7 +43,7 @@ export const FileInputDemo = (args) => {
     }, [files.length]);
     const info = useMemo(() => {
         return hasError
-            ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }, void 0))
+            ? errCounts.current.invalidSize > 0 && (_jsx("div", { children: `File size must be less than ${sizeLimit}MB` }))
             : null;
     }, [hasError]);
     return (_jsx(FileInput, { label: args.label, labelHidden: args.labelHidden, multiple: args.multiple, status: hasError ? 'error' : undefined, info: info, required: args.required, disabled: args.disabled, onFilesAdded: onFilesAdded, files: files.map(file => {
@@ -57,7 +57,7 @@ export const FileInputDemo = (args) => {
                 }
             };
             return file;
-        }) }, void 0));
+        }) }));
 };
 FileInputDemo.args = {
     multiple: true,

package/lib/core/File/FileInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport {\n  FileInput,\n  FileInputProps,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from '../../work/CaseView/FileService.mock';\n\nexport default {\n  title: 'Core/File/Input',\n  component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n  sizeLimit?: number;\n}\n\nexport const FileInputDemo: Story<FileInputStoryProps> = (args: FileInputStoryProps) => {\n  const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n  const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n  const [hasError, setHasError] = useState(false);\n\n  const sizeLimit = args.sizeLimit || 100;\n\n  // Fires anytime files are added to the input either through selection or drop\n  const onFilesAdded = useCallback(\n    (addedFiles: File[]) => {\n      errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n      const newFiles = addedFiles.filter(f => {\n        let isValidSize = true;\n\n        if (f.size / 1000000 > sizeLimit) {\n          errCounts.current.invalidSize += 1;\n          isValidSize = false;\n        }\n\n        return isValidSize;\n      });\n\n      setHasError(newFiles.length < addedFiles.length);\n\n      newFiles.forEach((File: File) => {\n        const id = createUID();\n        attachFile({\n          id,\n          thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n          name: File.name,\n          category: '',\n          File,\n          onCancel: () => {\n            cancelFile(id);\n          }\n        });\n      });\n    },\n    [attachFile, deleteFile]\n  );\n\n  useAfterInitialEffect(() => {\n    if (files.length === 0) setHasError(false);\n  }, [files.length]);\n\n  const info = useMemo(() => {\n    return hasError\n      ? errCounts.current.invalidSize > 0 && (\n          <div>{`File size must be less than ${sizeLimit}MB`}</div>\n        )\n      : null;\n  }, [hasError]);\n\n  return (\n    <FileInput\n      label={args.label}\n      labelHidden={args.labelHidden}\n      multiple={args.multiple}\n      status={hasError ? 'error' : undefined}\n      info={info}\n      required={args.required}\n      disabled={args.disabled}\n      onFilesAdded={onFilesAdded}\n      files={files.map(file => {\n        return {\n          ...file,\n          onCancel: undefined,\n          onPreview: () => {},\n          onDownload: () => {},\n          onDelete: () => {\n            deleteFile(file.id);\n          }\n        };\n\n        return file;\n      })}\n    />\n  );\n};\n\nFileInputDemo.args = {\n  multiple: true,\n  sizeLimit: 100,\n  label: 'File input label',\n  labelHidden: false,\n  required: false,\n  disabled: false\n};\n\nFileInputDemo.argTypes = {\n  multiple: { control: { type: 'boolean' } },\n  sizeLimit: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"FileInput.stories.js","sourceRoot":"","sources":["../../../src/core/File/FileInput.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE3E,OAAO,EACL,SAAS,EAET,SAAS,EACT,qBAAqB,EACtB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,SAAS;CACb,CAAC;AAMV,MAAM,CAAC,MAAM,aAAa,GAA+B,CAAC,IAAyB,EAAE,EAAE;IACrF,MAAM,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IACrF,MAAM,SAAS,GAAG,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,CAAC;IAC7D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEhD,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,IAAI,GAAG,CAAC;IAExC,8EAA8E;IAC9E,MAAM,YAAY,GAAG,WAAW,CAC9B,CAAC,UAAkB,EAAE,EAAE;QACrB,SAAS,CAAC,OAAO,GAAG,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC;QAEvD,MAAM,QAAQ,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE;YACrC,IAAI,WAAW,GAAG,IAAI,CAAC;YAEvB,IAAI,CAAC,CAAC,IAAI,GAAG,OAAO,GAAG,SAAS,EAAE;gBAChC,SAAS,CAAC,OAAO,CAAC,WAAW,IAAI,CAAC,CAAC;gBACnC,WAAW,GAAG,KAAK,CAAC;aACrB;YAED,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,QAAQ,CAAC,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAEjD,QAAQ,CAAC,OAAO,CAAC,CAAC,IAAU,EAAE,EAAE;YAC9B,MAAM,EAAE,GAAG,SAAS,EAAE,CAAC;YACvB,UAAU,CAAC;gBACT,EAAE;gBACF,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS;gBAChF,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,QAAQ,EAAE,EAAE;gBACZ,IAAI;gBACJ,QAAQ,EAAE,GAAG,EAAE;oBACb,UAAU,CAAC,EAAE,CAAC,CAAC;gBACjB,CAAC;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,UAAU,EAAE,UAAU,CAAC,CACzB,CAAC;IAEF,qBAAqB,CAAC,GAAG,EAAE;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;YAAE,WAAW,CAAC,KAAK,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnB,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,EAAE;QACxB,OAAO,QAAQ;YACb,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,GAAG,CAAC,IAAI,CACnC,wBAAM,+BAA+B,SAAS,IAAI,GAAO,CAC1D;YACH,CAAC,CAAC,IAAI,CAAC;IACX,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,KAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EACtC,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACtB,OAAO;gBACL,GAAG,IAAI;gBACP,QAAQ,EAAE,SAAS;gBACnB,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC;gBACnB,UAAU,EAAE,GAAG,EAAE,GAAE,CAAC;gBACpB,QAAQ,EAAE,GAAG,EAAE;oBACb,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtB,CAAC;aACF,CAAC;YAEF,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,GACF,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,aAAa,CAAC,IAAI,GAAG;IACnB,QAAQ,EAAE,IAAI;IACd,SAAS,EAAE,GAAG;IACd,KAAK,EAAE,kBAAkB;IACzB,WAAW,EAAE,KAAK;IAClB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,aAAa,CAAC,QAAQ,GAAG;IACvB,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAC1C,KAAK,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpC,WAAW,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC7C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC1C,QAAQ,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3C,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useState, useMemo, useCallback, useRef, useContext } from 'react';\n\nimport {\n  FileInput,\n  FileInputProps,\n  createUID,\n  useAfterInitialEffect\n} from '@pega/cosmos-react-core';\n\nimport { FileServiceContext } from '../../work/CaseView/FileService.mock';\n\nexport default {\n  title: 'Core/File/Input',\n  component: FileInput\n} as Meta;\n\ninterface FileInputStoryProps extends FileInputProps {\n  sizeLimit?: number;\n}\n\nexport const FileInputDemo: Story<FileInputStoryProps> = (args: FileInputStoryProps) => {\n  const { files, attachFile, cancelFile, deleteFile } = useContext(FileServiceContext);\n  const errCounts = useRef({ invalidType: 0, invalidSize: 0 });\n  const [hasError, setHasError] = useState(false);\n\n  const sizeLimit = args.sizeLimit || 100;\n\n  // Fires anytime files are added to the input either through selection or drop\n  const onFilesAdded = useCallback(\n    (addedFiles: File[]) => {\n      errCounts.current = { invalidType: 0, invalidSize: 0 };\n\n      const newFiles = addedFiles.filter(f => {\n        let isValidSize = true;\n\n        if (f.size / 1000000 > sizeLimit) {\n          errCounts.current.invalidSize += 1;\n          isValidSize = false;\n        }\n\n        return isValidSize;\n      });\n\n      setHasError(newFiles.length < addedFiles.length);\n\n      newFiles.forEach((File: File) => {\n        const id = createUID();\n        attachFile({\n          id,\n          thumbnail: File.type.startsWith('image') ? URL.createObjectURL(File) : undefined,\n          name: File.name,\n          category: '',\n          File,\n          onCancel: () => {\n            cancelFile(id);\n          }\n        });\n      });\n    },\n    [attachFile, deleteFile]\n  );\n\n  useAfterInitialEffect(() => {\n    if (files.length === 0) setHasError(false);\n  }, [files.length]);\n\n  const info = useMemo(() => {\n    return hasError\n      ? errCounts.current.invalidSize > 0 && (\n          <div>{`File size must be less than ${sizeLimit}MB`}</div>\n        )\n      : null;\n  }, [hasError]);\n\n  return (\n    <FileInput\n      label={args.label}\n      labelHidden={args.labelHidden}\n      multiple={args.multiple}\n      status={hasError ? 'error' : undefined}\n      info={info}\n      required={args.required}\n      disabled={args.disabled}\n      onFilesAdded={onFilesAdded}\n      files={files.map(file => {\n        return {\n          ...file,\n          onCancel: undefined,\n          onPreview: () => {},\n          onDownload: () => {},\n          onDelete: () => {\n            deleteFile(file.id);\n          }\n        };\n\n        return file;\n      })}\n    />\n  );\n};\n\nFileInputDemo.args = {\n  multiple: true,\n  sizeLimit: 100,\n  label: 'File input label',\n  labelHidden: false,\n  required: false,\n  disabled: false\n};\n\nFileInputDemo.argTypes = {\n  multiple: { control: { type: 'boolean' } },\n  sizeLimit: { control: { type: 'number' } },\n  label: { control: { type: 'text' } },\n  labelHidden: { control: { type: 'boolean' } },\n  required: { control: { type: 'boolean' } },\n  disabled: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/Flex/FlexContainer.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Meta, Story } from '@storybook/react';
 import { FlexContainerProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
@@ -18,5 +17,5 @@ export declare const Wrap: Story<FlexStoryProps>;
 export declare const Justify: Story<FlexStoryProps>;
 export declare const AlignItems: Story<FlexStoryProps>;
 export declare const AlignContent: Story<FlexStoryProps>;
-export declare const ResponsiveFlex: () => JSX.Element;
+export declare const ResponsiveFlex: Story;
 //# sourceMappingURL=FlexContainer.stories.d.ts.map