@pega/cosmos-react-demos 3.0.0-dev.25.0 → 3.0.0-dev.26.0

package/lib/build/ExpressionBuilder/ExpressionBuilder.stories.js

@@ -1,32 +1,148 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { useState, useEffect, useRef } from 'react';
-import { ExpressionBuilder, ExpressionItem, ExpressionList } from '@pega/cosmos-react-build';
-import { BuildTheme, Configuration, createUID } from '@pega/cosmos-react-core';
-import { errors, items, StyledExpressionBuilderDemo } from './ExpressionBuilder.mocks';
+import { ExpressionBuilder, ExpressionItem, ExpressionList, ExpressionDetails } from '@pega/cosmos-react-build';
+import { createUID, Input } from '@pega/cosmos-react-core';
+import { errors, items, primaryDetails, StyledExpressionBuilderDemo } from './ExpressionBuilder.mocks';
 export default {
     title: 'Build/ExpressionBuilder',
     component: ExpressionBuilder
 };
 export const ExpressionItemDemo = () => {
-    const [isExpanded, setIsExpanded] = useState(false);
-    const onInsert = (id) => {
+    const [expanded, setExpanded] = useState(false);
+    const onAdd = (id) => {
         action(`${id} clicked`);
     };
     const onExpand = (id) => {
-        setIsExpanded(prev => !prev);
-        action(`${id} clicked`);
+        setExpanded(true);
+        action(`${id} expanded`);
+    };
+    const onCollapse = (id) => {
+        setExpanded(false);
+        action(`${id} collapsed`);
+    };
+    const handleChange = (id, field, value) => {
+        action('Input param change')(id, field, value);
     };
-    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(ExpressionItem, { id: createUID(), primary: 'Loan to value validation', type: 'Decision', onInsert: onInsert, expression: '@Decision', isExpanded: isExpanded, onExpand: onExpand }) }));
+    return (_jsx(ExpressionItem, { id: createUID(), primary: 'Loan to value validation', type: 'Decision', onAdd: onAdd, onExpand: onExpand, onCollapse: onCollapse, expanded: expanded, details: {
+            primary: primaryDetails,
+            outputParams: [
+                {
+                    id: 'type',
+                    name: 'Type',
+                    value: 'Text'
+                }
+            ],
+            inputParams: [
+                {
+                    id: 'firstParam',
+                    renderer: Input,
+                    rendererProps: {
+                        onChange: (e) => handleChange('Test Expression Id', 'Test Input Field', e.target.value),
+                        label: 'Test Input'
+                    }
+                },
+                {
+                    id: 'secondParam',
+                    renderer: Input,
+                    rendererProps: {
+                        onChange: (e) => handleChange('Test Expression Id', 'Test Input Field 2', e.target.value),
+                        label: 'Test Input2'
+                    }
+                }
+            ]
+        } }));
+};
+export const ExpressionDetailsDemo = () => {
+    const handleChange = (id, field, value) => {
+        action('Input param change')(id, field, value);
+    };
+    return (_jsx(ExpressionDetails, { primary: primaryDetails, outputParams: [
+            {
+                id: 'type',
+                name: 'Type',
+                value: 'Text'
+            }
+        ], inputParams: [
+            {
+                id: 'firstParam',
+                renderer: Input,
+                rendererProps: {
+                    onChange: (e) => handleChange('Test Expression Id', 'Test Input Field', e.target.value),
+                    label: 'Test Input'
+                }
+            },
+            {
+                id: 'secondParam',
+                renderer: Input,
+                rendererProps: {
+                    onChange: (e) => handleChange('Test Expression Id', 'Test Input Field 2', e.target.value),
+                    label: 'Test Input2'
+                }
+            }
+        ] }));
 };
 export const ExpressionListDemo = () => {
-    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(ExpressionList, { items: items, onItemInsert: action('onItemInsert'), onItemExpand: action('onItemExpand') }) }));
+    const [expressionDetails, setExpressionDetails] = useState({});
+    const onInputParamChange = (id, field, value) => {
+        action('Input param change')(id, field, value);
+    };
+    const onItemExpand = (id) => {
+        action('onItemExpand')(id);
+        const itemDetails = items.find(item => item.id === id)?.details;
+        const fieldValueMapper = ({ field, value }) => {
+            return {
+                id: `${id}-${field}`,
+                name: field,
+                value
+            };
+        };
+        if (itemDetails) {
+            const primary = itemDetails.primary.map(fieldValueMapper);
+            const outputParams = itemDetails.output?.map(fieldValueMapper);
+            const inputParams = itemDetails.input?.map(({ id: fieldId, field, type }) => {
+                const inputParam = {
+                    id: `${id}-${fieldId}`,
+                    renderer: Input,
+                    rendererProps: {
+                        label: field,
+                        onChange: (e) => onInputParamChange(id, fieldId, e.target.value),
+                        type: type
+                    }
+                };
+                return inputParam;
+            });
+            setExpressionDetails(prev => {
+                return {
+                    ...prev,
+                    [id]: {
+                        primary,
+                        outputParams,
+                        inputParams
+                    }
+                };
+            });
+        }
+    };
+    const onItemCollapse = (id) => {
+        action('onItemCollapse')(id);
+        setTimeout(() => {
+            setExpressionDetails(prev => {
+                const newExpressionDetails = { ...prev };
+                delete newExpressionDetails[id];
+                return newExpressionDetails;
+            });
+        }, 500);
+    };
+    return (_jsx(ExpressionList, { items: items, onItemAdd: action('onItemAdd'), onItemExpand: onItemExpand, onItemCollapse: onItemCollapse, details: expressionDetails }));
 };
 export const ExpressionBuilderDemo = (args) => {
     const [searchValue, setSearchValue] = useState('');
     const [searchFilter, setSearchFilter] = useState('');
     const [expressionItems, setExpressionItems] = useState(items);
     const handle = useRef(null);
+    const [expressionDetails, setExpressionDetails] = useState({});
+    const [expressionDetailsValues, setExpressionDetailsValues] = useState({});
     useEffect(() => {
         const lowerSearchFilter = searchFilter.toLowerCase();
         const lowerSearchValue = searchValue.toLowerCase();
@@ -35,27 +151,100 @@ export const ExpressionBuilderDemo = (args) => {
                 item.primary.toLowerCase().includes(lowerSearchValue));
         }));
     }, [searchValue, searchFilter]);
-    const onItemInsert = (id, insertExpression) => {
+    const onItemAdd = (id, addExpression) => {
         const item = items.find(instance => instance.id === id);
-        if (item)
-            insertExpression(item.expression);
+        if (!item)
+            return;
+        if (item.type.toLowerCase() === 'field') {
+            addExpression(item.expression);
+        }
+        else {
+            addExpression(`${item.expression.slice(0, item.expression.length - 1)}${expressionDetailsValues[item.id]
+                ? Object.keys(expressionDetailsValues[item.id])
+                    .map(field => `${expressionDetailsValues[item.id][field]}`)
+                    .join(', ')
+                : ''})`);
+        }
         // Added this action to demonstrate the usage of getExpression
         action('Current expression')(handle.current?.getExpression());
     };
-    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(StyledExpressionBuilderDemo, { children: _jsx(ExpressionBuilder, { list: {
-                    items: expressionItems,
-                    onItemInsert: args.onItemInsert || onItemInsert,
-                    onItemExpand: args.onItemExpand || action('onItemExpand')
-                }, search: {
-                    filters: ['Field', 'Function', 'Decision'],
-                    onFilterChange: args.onFilterChange
-                        ? args.onFilterChange
-                        : value => setSearchFilter(value),
-                    onSearchChange: args.onSearchChange
-                        ? args.onSearchChange
-                        : value => setSearchValue(value),
-                    value: searchValue
-                }, errors: args.showErrors ? args.errors || errors : undefined, defaultValue: args.defaultValue === undefined ? 'testExp(arg1, arg2)' : args.defaultValue, handle: args.handle || handle }) }) }));
+    const onInputParamChange = (id, field, value) => {
+        action('Input param change')(id, field, value);
+        setExpressionDetailsValues(prev => {
+            return {
+                ...prev,
+                [id]: { ...prev[id], [field]: value }
+            };
+        });
+    };
+    const onItemExpand = (id) => {
+        action('onItemExpand')(id);
+        const itemDetails = expressionItems.find(item => item.id === id)?.details;
+        const fieldValueMapper = ({ field, value }) => {
+            return {
+                id: `${id}-${field}`,
+                name: field,
+                value
+            };
+        };
+        if (itemDetails) {
+            const primary = itemDetails.primary.map(fieldValueMapper);
+            const outputParams = itemDetails.output?.map(fieldValueMapper);
+            const inputParams = itemDetails.input?.map(({ id: fieldId, field, type }) => {
+                const inputParam = {
+                    id: `${id}-${fieldId}`,
+                    renderer: Input,
+                    rendererProps: {
+                        label: field,
+                        onChange: (e) => onInputParamChange(id, fieldId, e.target.value),
+                        type: type
+                    }
+                };
+                return inputParam;
+            });
+            setExpressionDetails(prev => {
+                return {
+                    ...prev,
+                    [id]: {
+                        primary,
+                        outputParams,
+                        inputParams
+                    }
+                };
+            });
+        }
+    };
+    const onItemCollapse = (id) => {
+        action('onItemCollapse')(id);
+        setTimeout(() => {
+            setExpressionDetails(prev => {
+                const newExpressionDetails = { ...prev };
+                delete newExpressionDetails[id];
+                return newExpressionDetails;
+            });
+        }, 500);
+        setExpressionDetailsValues(prev => {
+            const newValues = { ...prev };
+            delete newValues[id];
+            return newValues;
+        });
+    };
+    return (_jsx(StyledExpressionBuilderDemo, { children: _jsx(ExpressionBuilder, { list: {
+                items: expressionItems,
+                onItemAdd: args.onItemAdd || onItemAdd,
+                onItemExpand: args.onItemExpand || onItemExpand,
+                onItemCollapse: args.onItemCollapse || onItemCollapse,
+                details: expressionDetails
+            }, search: {
+                filters: ['Field', 'Function', 'Decision'],
+                onFilterChange: args.onFilterChange
+                    ? args.onFilterChange
+                    : value => setSearchFilter(value),
+                onSearchChange: args.onSearchChange
+                    ? args.onSearchChange
+                    : value => setSearchValue(value),
+                value: searchValue
+            }, errors: args.showErrors ? args.errors || errors : undefined, defaultValue: args.defaultValue === undefined ? 'testExp(arg1, arg2)' : args.defaultValue, handle: args.handle || handle }) }));
 };
 ExpressionBuilderDemo.args = {
     showErrors: false

package/lib/build/ExpressionBuilder/ExpressionBuilder.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpressionBuilder.stories.js","sourceRoot":"","sources":["../../../src/build/ExpressionBuilder/ExpressionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useState, useEffect, useRef } from 'react';\n\nimport {\n  ExpressionBuilder,\n  ExpressionItem,\n  ExpressionItemProps,\n  ExpressionList,\n  ExpressionBuilderProps,\n  HandleValue\n} from '@pega/cosmos-react-build';\nimport { BuildTheme, Configuration, createUID } from '@pega/cosmos-react-core';\n\nimport { errors, items, StyledExpressionBuilderDemo } from './ExpressionBuilder.mocks';\n\nexport default {\n  title: 'Build/ExpressionBuilder',\n  component: ExpressionBuilder\n} as Meta;\n\nexport const ExpressionItemDemo: Story = () => {\n  const [isExpanded, setIsExpanded] = useState<ExpressionItemProps['isExpanded']>(false);\n  const onInsert = (id: ExpressionItemProps['id']) => {\n    action(`${id} clicked`);\n  };\n\n  const onExpand = (id: ExpressionItemProps['id']) => {\n    setIsExpanded(prev => !prev);\n    action(`${id} clicked`);\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <ExpressionItem\n        id={createUID()}\n        primary='Loan to value validation'\n        type='Decision'\n        onInsert={onInsert}\n        expression='@Decision'\n        isExpanded={isExpanded}\n        onExpand={onExpand}\n      />\n    </Configuration>\n  );\n};\n\nexport const ExpressionListDemo: Story = () => {\n  return (\n    <Configuration theme={BuildTheme}>\n      <ExpressionList\n        items={items}\n        onItemInsert={action('onItemInsert')}\n        onItemExpand={action('onItemExpand')}\n      />\n    </Configuration>\n  );\n};\ninterface ExpressionBuilderStoryProps {\n  showErrors?: boolean;\n  errors?: ExpressionBuilderProps['errors'];\n  onItemInsert?: ExpressionBuilderProps['list']['onItemInsert'];\n  onItemExpand?: ExpressionBuilderProps['list']['onItemExpand'];\n  onFilterChange?: ExpressionBuilderProps['search']['onFilterChange'];\n  onSearchChange?: ExpressionBuilderProps['search']['onSearchChange'];\n  handle?: ExpressionBuilderProps['handle'];\n  defaultValue?: string;\n}\n\nexport const ExpressionBuilderDemo: Story<ExpressionBuilderStoryProps> = (\n  args: ExpressionBuilderStoryProps\n) => {\n  const [searchValue, setSearchValue] = useState('');\n  const [searchFilter, setSearchFilter] = useState('');\n  const [expressionItems, setExpressionItems] = useState(items);\n  const handle = useRef<HandleValue>(null);\n\n  useEffect(() => {\n    const lowerSearchFilter = searchFilter.toLowerCase();\n    const lowerSearchValue = searchValue.toLowerCase();\n    setExpressionItems(\n      items.filter(item => {\n        return (\n          item.type.toLowerCase().includes(lowerSearchFilter === 'all' ? '' : lowerSearchFilter) &&\n          item.primary.toLowerCase().includes(lowerSearchValue)\n        );\n      })\n    );\n  }, [searchValue, searchFilter]);\n\n  const onItemInsert = (\n    id: ExpressionItemProps['id'],\n    insertExpression: (expression: string) => void\n  ) => {\n    const item = items.find(instance => instance.id === id);\n    if (item) insertExpression(item.expression);\n\n    // Added this action to demonstrate the usage of getExpression\n    action('Current expression')(handle.current?.getExpression());\n  };\n\n  return (\n    <Configuration theme={BuildTheme}>\n      <StyledExpressionBuilderDemo>\n        <ExpressionBuilder\n          list={{\n            items: expressionItems,\n            onItemInsert: args.onItemInsert || onItemInsert,\n            onItemExpand: args.onItemExpand || action('onItemExpand')\n          }}\n          search={{\n            filters: ['Field', 'Function', 'Decision'],\n            onFilterChange: args.onFilterChange\n              ? args.onFilterChange\n              : value => setSearchFilter(value),\n            onSearchChange: args.onSearchChange\n              ? args.onSearchChange\n              : value => setSearchValue(value),\n            value: searchValue\n          }}\n          errors={args.showErrors ? args.errors || errors : undefined}\n          defaultValue={args.defaultValue === undefined ? 'testExp(arg1, arg2)' : args.defaultValue}\n          handle={args.handle || handle}\n        />\n      </StyledExpressionBuilderDemo>\n    </Configuration>\n  );\n};\n\nExpressionBuilderDemo.args = {\n  showErrors: false\n};\n\nExpressionBuilderDemo.argTypes = {\n  showErrors: { control: { type: 'boolean' } }\n};\n"]}
+{"version":3,"file":"ExpressionBuilder.stories.js","sourceRoot":"","sources":["../../../src/build/ExpressionBuilder/ExpressionBuilder.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\nimport { useState, useEffect, useRef, ChangeEvent } from 'react';\n\nimport {\n  ExpressionBuilder,\n  ExpressionItem,\n  ExpressionItemProps,\n  ExpressionList,\n  ExpressionBuilderProps,\n  ExpressionDetails,\n  HandleValue,\n  InputParams\n} from '@pega/cosmos-react-build';\nimport { createUID, ForwardProps, Input, InputProps } from '@pega/cosmos-react-core';\n\nimport {\n  errors,\n  items,\n  primaryDetails,\n  StyledExpressionBuilderDemo\n} from './ExpressionBuilder.mocks';\n\nexport default {\n  title: 'Build/ExpressionBuilder',\n  component: ExpressionBuilder\n} as Meta;\n\nexport const ExpressionItemDemo: Story = () => {\n  const [expanded, setExpanded] = useState<ExpressionItemProps['expanded']>(false);\n  const onAdd = (id: ExpressionItemProps['id']) => {\n    action(`${id} clicked`);\n  };\n\n  const onExpand = (id: ExpressionItemProps['id']) => {\n    setExpanded(true);\n    action(`${id} expanded`);\n  };\n\n  const onCollapse = (id: ExpressionItemProps['id']) => {\n    setExpanded(false);\n    action(`${id} collapsed`);\n  };\n\n  const handleChange = (id: string, field: string, value: any) => {\n    action('Input param change')(id, field, value);\n  };\n\n  return (\n    <ExpressionItem\n      id={createUID()}\n      primary='Loan to value validation'\n      type='Decision'\n      onAdd={onAdd}\n      onExpand={onExpand}\n      onCollapse={onCollapse}\n      expanded={expanded}\n      details={{\n        primary: primaryDetails,\n        outputParams: [\n          {\n            id: 'type',\n            name: 'Type',\n            value: 'Text'\n          }\n        ],\n        inputParams: [\n          {\n            id: 'firstParam',\n            renderer: Input,\n            rendererProps: {\n              onChange: (e: ChangeEvent<HTMLInputElement>) =>\n                handleChange('Test Expression Id', 'Test Input Field', e.target.value),\n              label: 'Test Input'\n            }\n          },\n          {\n            id: 'secondParam',\n            renderer: Input,\n            rendererProps: {\n              onChange: (e: ChangeEvent<HTMLInputElement>) =>\n                handleChange('Test Expression Id', 'Test Input Field 2', e.target.value),\n              label: 'Test Input2'\n            }\n          }\n        ]\n      }}\n    />\n  );\n};\n\nexport const ExpressionDetailsDemo: Story = () => {\n  const handleChange = (id: string, field: string, value: any) => {\n    action('Input param change')(id, field, value);\n  };\n  return (\n    <ExpressionDetails\n      primary={primaryDetails}\n      outputParams={[\n        {\n          id: 'type',\n          name: 'Type',\n          value: 'Text'\n        }\n      ]}\n      inputParams={[\n        {\n          id: 'firstParam',\n          renderer: Input,\n          rendererProps: {\n            onChange: (e: ChangeEvent<HTMLInputElement>) =>\n              handleChange('Test Expression Id', 'Test Input Field', e.target.value),\n            label: 'Test Input'\n          }\n        },\n        {\n          id: 'secondParam',\n          renderer: Input,\n          rendererProps: {\n            onChange: (e: ChangeEvent<HTMLInputElement>) =>\n              handleChange('Test Expression Id', 'Test Input Field 2', e.target.value),\n            label: 'Test Input2'\n          }\n        }\n      ]}\n    />\n  );\n};\n\nexport const ExpressionListDemo: Story = () => {\n  const [expressionDetails, setExpressionDetails] = useState<\n    ExpressionBuilderProps['list']['details']\n  >({});\n  const onInputParamChange = (id: string, field: string, value: any) => {\n    action('Input param change')(id, field, value);\n  };\n\n  const onItemExpand = (id: string) => {\n    action('onItemExpand')(id);\n    const itemDetails = items.find(item => item.id === id)?.details;\n\n    const fieldValueMapper = ({ field, value }: { field: string; value: string }) => {\n      return {\n        id: `${id}-${field}`,\n        name: field,\n        value\n      };\n    };\n\n    if (itemDetails) {\n      const primary = itemDetails.primary.map(fieldValueMapper);\n\n      const outputParams = itemDetails.output?.map(fieldValueMapper);\n\n      const inputParams = itemDetails.input?.map(({ id: fieldId, field, type }) => {\n        const inputParam: InputParams<InputProps & ForwardProps> = {\n          id: `${id}-${fieldId}`,\n          renderer: Input,\n          rendererProps: {\n            label: field,\n            onChange: (e: ChangeEvent<HTMLInputElement>) =>\n              onInputParamChange(id, fieldId, e.target.value),\n            type: type as InputProps['type']\n          }\n        };\n        return inputParam;\n      });\n\n      setExpressionDetails(prev => {\n        return {\n          ...prev,\n          [id]: {\n            primary,\n            outputParams,\n            inputParams\n          }\n        };\n      });\n    }\n  };\n\n  const onItemCollapse = (id: string) => {\n    action('onItemCollapse')(id);\n    setTimeout(() => {\n      setExpressionDetails(prev => {\n        const newExpressionDetails = { ...prev };\n        delete newExpressionDetails[id];\n        return newExpressionDetails;\n      });\n    }, 500);\n  };\n\n  return (\n    <ExpressionList\n      items={items}\n      onItemAdd={action('onItemAdd')}\n      onItemExpand={onItemExpand}\n      onItemCollapse={onItemCollapse}\n      details={expressionDetails}\n    />\n  );\n};\n\ninterface ExpressionBuilderStoryProps {\n  showErrors?: boolean;\n  errors?: ExpressionBuilderProps['errors'];\n  onItemAdd?: ExpressionBuilderProps['list']['onItemAdd'];\n  onItemExpand?: ExpressionBuilderProps['list']['onItemExpand'];\n  onItemCollapse?: ExpressionBuilderProps['list']['onItemCollapse'];\n  onFilterChange?: ExpressionBuilderProps['search']['onFilterChange'];\n  onSearchChange?: ExpressionBuilderProps['search']['onSearchChange'];\n  handle?: ExpressionBuilderProps['handle'];\n  defaultValue?: string;\n}\n\nexport const ExpressionBuilderDemo: Story<ExpressionBuilderStoryProps> = (\n  args: ExpressionBuilderStoryProps\n) => {\n  const [searchValue, setSearchValue] = useState('');\n  const [searchFilter, setSearchFilter] = useState('');\n  const [expressionItems, setExpressionItems] = useState(items);\n  const handle = useRef<HandleValue>(null);\n  const [expressionDetails, setExpressionDetails] = useState<\n    ExpressionBuilderProps['list']['details']\n  >({});\n  const [expressionDetailsValues, setExpressionDetailsValues] = useState<{\n    [id: string]: {\n      [field: string]: any;\n    };\n  }>({});\n\n  useEffect(() => {\n    const lowerSearchFilter = searchFilter.toLowerCase();\n    const lowerSearchValue = searchValue.toLowerCase();\n    setExpressionItems(\n      items.filter(item => {\n        return (\n          item.type.toLowerCase().includes(lowerSearchFilter === 'all' ? '' : lowerSearchFilter) &&\n          item.primary.toLowerCase().includes(lowerSearchValue)\n        );\n      })\n    );\n  }, [searchValue, searchFilter]);\n\n  const onItemAdd = (\n    id: ExpressionItemProps['id'],\n    addExpression: (expression: string) => void\n  ) => {\n    const item = items.find(instance => instance.id === id);\n    if (!item) return;\n    if (item.type.toLowerCase() === 'field') {\n      addExpression(item.expression);\n    } else {\n      addExpression(\n        `${item.expression.slice(0, item.expression.length - 1)}${\n          expressionDetailsValues[item.id]\n            ? Object.keys(expressionDetailsValues[item.id])\n                .map(field => `${expressionDetailsValues[item.id][field]}`)\n                .join(', ')\n            : ''\n        })`\n      );\n    }\n\n    // Added this action to demonstrate the usage of getExpression\n    action('Current expression')(handle.current?.getExpression());\n  };\n\n  const onInputParamChange = (id: string, field: string, value: any) => {\n    action('Input param change')(id, field, value);\n    setExpressionDetailsValues(prev => {\n      return {\n        ...prev,\n        [id]: { ...prev[id], [field]: value }\n      };\n    });\n  };\n\n  const onItemExpand = (id: string) => {\n    action('onItemExpand')(id);\n    const itemDetails = expressionItems.find(item => item.id === id)?.details;\n\n    const fieldValueMapper = ({ field, value }: { field: string; value: string }) => {\n      return {\n        id: `${id}-${field}`,\n        name: field,\n        value\n      };\n    };\n\n    if (itemDetails) {\n      const primary = itemDetails.primary.map(fieldValueMapper);\n\n      const outputParams = itemDetails.output?.map(fieldValueMapper);\n\n      const inputParams = itemDetails.input?.map(({ id: fieldId, field, type }) => {\n        const inputParam: InputParams<InputProps & ForwardProps> = {\n          id: `${id}-${fieldId}`,\n          renderer: Input,\n          rendererProps: {\n            label: field,\n            onChange: (e: ChangeEvent<HTMLInputElement>) =>\n              onInputParamChange(id, fieldId, e.target.value),\n            type: type as InputProps['type']\n          }\n        };\n        return inputParam;\n      });\n\n      setExpressionDetails(prev => {\n        return {\n          ...prev,\n          [id]: {\n            primary,\n            outputParams,\n            inputParams\n          }\n        };\n      });\n    }\n  };\n\n  const onItemCollapse = (id: string) => {\n    action('onItemCollapse')(id);\n    setTimeout(() => {\n      setExpressionDetails(prev => {\n        const newExpressionDetails = { ...prev };\n        delete newExpressionDetails[id];\n        return newExpressionDetails;\n      });\n    }, 500);\n\n    setExpressionDetailsValues(prev => {\n      const newValues = { ...prev };\n      delete newValues[id];\n      return newValues;\n    });\n  };\n\n  return (\n    <StyledExpressionBuilderDemo>\n      <ExpressionBuilder\n        list={{\n          items: expressionItems,\n          onItemAdd: args.onItemAdd || onItemAdd,\n          onItemExpand: args.onItemExpand || onItemExpand,\n          onItemCollapse: args.onItemCollapse || onItemCollapse,\n          details: expressionDetails\n        }}\n        search={{\n          filters: ['Field', 'Function', 'Decision'],\n          onFilterChange: args.onFilterChange\n            ? args.onFilterChange\n            : value => setSearchFilter(value),\n          onSearchChange: args.onSearchChange\n            ? args.onSearchChange\n            : value => setSearchValue(value),\n          value: searchValue\n        }}\n        errors={args.showErrors ? args.errors || errors : undefined}\n        defaultValue={args.defaultValue === undefined ? 'testExp(arg1, arg2)' : args.defaultValue}\n        handle={args.handle || handle}\n      />\n    </StyledExpressionBuilderDemo>\n  );\n};\n\nExpressionBuilderDemo.args = {\n  showErrors: false\n};\n\nExpressionBuilderDemo.argTypes = {\n  showErrors: { control: { type: 'boolean' } }\n};\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAM5C,CAAC"}
+{"version":3,"file":"Link.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAkC,SAAS,EAAE,MAAM,yBAAyB,CAAC;;AAKpF,wBAYU;AAEV,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,SAAS,CAMrC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAoB9B,CAAC;AAMF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,SAAS,CAY5C,CAAC"}

package/lib/core/Link/Link.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
 import { Icon, registerIcon, Flex, Link } from '@pega/cosmos-react-core';
 import * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';
 registerIcon(plusIcon);
@@ -25,6 +26,6 @@ LinkWithIconDemo.argTypes = {
     variant: { table: { disable: true } }
 };
 export const PreviewableLink = (args) => {
-    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, previewable: true, target: '_blank', children: "Visit Pega!" }));
+    return (_jsx(Link, { href: 'http://www.pega.com', variant: args.variant, previewable: true, target: '_blank', onPreview: action('Preview activated'), children: "Visit Pega!" }));
 };
 //# sourceMappingURL=Link.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,4BAEhE,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACrE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,WAAW,QAAC,MAAM,EAAC,QAAQ,4BAE5E,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} previewable target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n"]}
+{"version":3,"file":"Link.stories.js","sourceRoot":"","sources":["../../../src/core/Link/Link.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,EAAa,MAAM,yBAAyB,CAAC;AACpF,OAAO,KAAK,QAAQ,MAAM,6DAA6D,CAAC;AAExF,YAAY,CAAC,QAAQ,CAAC,CAAC;AAEvB,eAAe;IACb,KAAK,EAAE,WAAW;IAClB,SAAS,EAAE,IAAI;IACf,IAAI,EAAE;QACJ,OAAO,EAAE,MAAM;KAChB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC;YAC3D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACM,CAAC;AAEV,MAAM,CAAC,MAAM,QAAQ,GAAqB,CAAC,IAAe,EAAE,EAAE;IAC5D,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,MAAM,EAAC,QAAQ,4BAEhE,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU,GAAG,EAAE;IAC1C,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACrE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACvE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,QAAQ,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YACpE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,EACP,KAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,QAAC,MAAM,EAAC,QAAQ,YAClE,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,GAAG,GACf,IACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,QAAQ,GAAG;IAC1B,OAAO,EAAE,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CACtC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAqB,CAAC,IAAe,EAAE,EAAE;IACnE,OAAO,CACL,KAAC,IAAI,IACH,IAAI,EAAC,qBAAqB,EAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,QACX,MAAM,EAAC,QAAQ,EACf,SAAS,EAAE,MAAM,CAAC,mBAAmB,CAAC,4BAGjC,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { action } from '@storybook/addon-actions';\n\nimport { Icon, registerIcon, Flex, Link, LinkProps } from '@pega/cosmos-react-core';\nimport * as plusIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon';\n\nregisterIcon(plusIcon);\n\nexport default {\n  title: 'Core/Link',\n  component: Link,\n  args: {\n    variant: 'link'\n  },\n  argTypes: {\n    variant: {\n      options: ['link', 'primary', 'secondary', 'simple', 'text'],\n      control: { type: 'select' }\n    }\n  }\n} as Meta;\n\nexport const LinkDemo: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link href='http://www.pega.com' variant={args.variant} target='_blank'>\n      Visit Pega!\n    </Link>\n  );\n};\n\nexport const LinkWithIconDemo: Story = () => {\n  return (\n    <Flex container={{ alignItems: 'center' }}>\n      <Link href='http://www.pega.com' variant='primary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='secondary' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='simple' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='link' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n      <Link href='http://www.pega.com' variant='text' icon target='_blank'>\n        <Icon name='plus' />\n      </Link>\n    </Flex>\n  );\n};\n\nLinkWithIconDemo.argTypes = {\n  variant: { table: { disable: true } }\n};\n\nexport const PreviewableLink: Story<LinkProps> = (args: LinkProps) => {\n  return (\n    <Link\n      href='http://www.pega.com'\n      variant={args.variant}\n      previewable\n      target='_blank'\n      onPreview={action('Preview activated')}\n    >\n      Visit Pega!\n    </Link>\n  );\n};\n"]}

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

@@ -7,10 +7,19 @@ interface ModalDemoProps {
     autoWidth: ModalProps['autoWidth'];
     center: ModalProps['center'];
     stretch: ModalProps['stretch'];
+    onDismiss?: (id: string) => void;
+    onMinimize?: (id: string) => void;
+    onActivate?: (id: string) => void;
+    onRequestDismiss?: () => boolean;
+    onRequestMinimize?: () => boolean;
+    onRequestActivate?: () => boolean;
+}
+interface AlertModalDemoProps extends ModalDemoProps {
+    onKeyDown?: (e: KeyboardEvent) => void;
 }
 export declare const ModalDemo: Story<ModalDemoProps>;
 export declare const ModalUpdates: Story<ModalDemoProps>;
-export declare const AlertModal: Story<ModalDemoProps>;
+export declare const AlertModal: Story<AlertModalDemoProps>;
 export declare const ProgressState: Story;
 export declare const MinimizableModal: Story<ModalDemoProps>;
 export declare const DockedModal: Story;

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAML,UAAU,EAMX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBAgBU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CA6B3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CA+D9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,cAAc,CAiG5C,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA0F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAgClD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA6DnE,CAAC"}
+{"version":3,"file":"Modal.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAML,UAAU,EAMX,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,YAAY,EAAc,MAAM,eAAe,CAAC;;AAEzD,wBA4BU;AAEV,UAAU,cAAc;IACtB,SAAS,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,EAAE,UAAU,CAAC,QAAQ,CAAC,CAAC;IAC7B,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IAC/B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC;IACjC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;IAClC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC;CACnC;AAED,UAAU,mBAAoB,SAAQ,cAAc;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACxC;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,cAAc,CA6B3C,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,cAAc,CA+D9C,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,mBAAmB,CA0GjD,CAAC;AAUF,eAAO,MAAM,aAAa,EAAE,KA0F3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,cAAc,CAyClD,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KA+BzB,CAAC;AAQF,UAAU,0BAA0B;IAClC,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,YAAY,CAAC;IACtB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;CAChB;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,0BAA0B,CA6DnE,CAAC"}

package/lib/core/Modal/Modal.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { action } from '@storybook/addon-actions';
 import { Button, Flex, Input, Modal, Text, useModalManager, useModalContext, useToaster, cap } from '@pega/cosmos-react-core';
 import { getContent } from './Modal.mocks';
 export default {
@@ -11,12 +12,24 @@ export default {
     args: {
         autoWidth: false,
         stretch: false,
-        center: false
+        center: false,
+        onDismiss: action('Clicked dismiss button'),
+        onMinimize: action('Clicked minimize button'),
+        onActivate: action('Activates minimized modal'),
+        onRequestDismiss: action('onRequestDismiss called'),
+        onRequestMinimize: action('onRequestMinimize called'),
+        onRequestActivate: action('onRequestActivate called')
     },
     argTypes: {
         autoWidth: { control: { type: 'boolean' } },
         stretch: { control: { type: 'boolean' } },
-        center: { control: { type: 'boolean' } }
+        center: { control: { type: 'boolean' } },
+        onDismiss: { table: { disable: true } },
+        onMinimize: { table: { disable: true } },
+        onActivate: { table: { disable: true } },
+        onRequestDismiss: { table: { disable: true } },
+        onRequestMinimize: { table: { disable: true } },
+        onRequestActivate: { table: { disable: true } }
     }
 };
 export const ModalDemo = (args) => {
@@ -95,16 +108,24 @@ export const AlertModal = (args) => {
                     create(MyAlert, { closeInitialModal: dismiss }, { alert: true });
                     return false;
                 }
-            }, children: _jsx(Input, { label: 'Name', name: 'name', onChange: onNameChange, value: name, required: true }) }));
+            }, children: _jsx(Input, { label: 'Name', name: 'name', onChange: onNameChange, onKeyDown: args.onKeyDown, value: name, required: true }) }));
     };
     const ModalButton = () => {
         const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
-                create(MyModal);
+                create(MyModal, undefined, {
+                    onDismiss: args.onDismiss
+                });
             }, children: "Open Modal" }));
     };
     return _jsx(ModalButton, {});
 };
+AlertModal.args = {
+    onKeyDown: action("Called input's onKeyDown")
+};
+AlertModal.argTypes = {
+    onKeyDown: { table: { disable: true } }
+};
 export const ProgressState = () => {
     const LoadingStateModal = () => {
         const { dismiss } = useModalContext();
@@ -151,13 +172,19 @@ export const ProgressState = () => {
 export const MinimizableModal = (args) => {
     const [count, setCount] = useState(1);
     const MyModal = () => {
-        return (_jsx(Modal, { heading: `Modal #${count}`, autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
+        return (_jsx(Modal, { heading: `Modal #${count}`, autoWidth: args.autoWidth, center: args.center, stretch: args.stretch, onRequestDismiss: args.onRequestDismiss, onRequestMinimize: args.onRequestMinimize, onRequestActivate: args.onRequestActivate, children: _jsx(Text, { children: "This Modal can be minimized by clicking the minimize button above." }) }));
     };
     const ModalButton = () => {
         const { create } = useModalManager();
         return (_jsx(Button, { onClick: () => {
                 setCount(count + 1);
-                create(MyModal, undefined, { minimizable: true });
+                create(MyModal, undefined, {
+                    minimizable: true,
+                    id: `Modal #${count}`,
+                    onDismiss: args.onDismiss,
+                    onMinimize: args.onMinimize,
+                    onActivate: args.onActivate
+                });
             }, children: "Open Modal" }));
     };
     return _jsx(ModalButton, {});

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.stories.d.ts","sourceRoot":"","sources":["../../../src/core/SkipLinks/SkipLinks.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAa,cAAc,EAAE,MAAM,yBAAyB,CAAC;;AAIpE,wBAGU;AAEV,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,cAAc,CA0B/C,CAAC"}