npm - @pega/cosmos-react-demos - Versions diffs - 3.0.0-dev.26.0 → 3.0.0-dev.27.2 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useState, useEffect, useRef } from 'react';
-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';
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { ExpressionBuilder, ExpressionItem, ExpressionList, ExpressionDetails, CodeEditor } from '@pega/cosmos-react-build';
+import { BuildTheme, Configuration, createUID, Input } from '@pega/cosmos-react-core';
+import { errors, getFilterRegex, items, primaryDetails, StyledExpressionBuilderDemo, suggestedFields, suggestedFunctions } from './ExpressionBuilder.mocks';
 export default {
     title: 'Build/ExpressionBuilder',
     component: ExpressionBuilder
@@ -143,13 +143,33 @@ export const ExpressionBuilderDemo = (args) => {
     const handle = useRef(null);
     const [expressionDetails, setExpressionDetails] = useState({});
     const [expressionDetailsValues, setExpressionDetailsValues] = useState({});
+    const filterRegex = useMemo(() => getFilterRegex(searchValue), [searchValue]);
+    const detailsFilter = (location, filterValue) => location.find(field => field.value.toLowerCase().includes(filterValue));
     useEffect(() => {
         const lowerSearchFilter = searchFilter.toLowerCase();
         const lowerSearchValue = searchValue.toLowerCase();
-        setExpressionItems(items.filter(item => {
+        const filteredItems = items.filter(item => {
             return (item.type.toLowerCase().includes(lowerSearchFilter === 'all' ? '' : lowerSearchFilter) &&
-                item.primary.toLowerCase().includes(lowerSearchValue));
-        }));
+                (item.primary.toLowerCase().includes(lowerSearchValue) ||
+                    detailsFilter(item.details.primary, lowerSearchValue) ||
+                    detailsFilter(item.details.output, lowerSearchValue)));
+        });
+        const matchedItems = filteredItems.map(item => {
+            if (item.primary.toLowerCase().includes(lowerSearchValue))
+                return item;
+            let matchedField;
+            const primaryField = detailsFilter(item.details.primary, lowerSearchValue);
+            if (primaryField)
+                matchedField = primaryField;
+            const outputField = detailsFilter(item.details.output, lowerSearchValue);
+            if (outputField && !primaryField)
+                matchedField = outputField;
+            return {
+                ...item,
+                matchedField: { name: matchedField?.field, value: matchedField?.value }
+            };
+        });
+        setExpressionItems(matchedItems);
     }, [searchValue, searchFilter]);
     const onItemAdd = (id, addExpression) => {
         const item = items.find(instance => instance.id === id);
@@ -165,8 +185,6 @@ export const ExpressionBuilderDemo = (args) => {
                     .join(', ')
                 : ''})`);
         }
-        // Added this action to demonstrate the usage of getExpression
-        action('Current expression')(handle.current?.getExpression());
     };
     const onInputParamChange = (id, field, value) => {
         action('Input param change')(id, field, value);
@@ -229,6 +247,20 @@ export const ExpressionBuilderDemo = (args) => {
             return newValues;
         });
     };
+    const fetchSuggestions = autoCompleteTrigger => {
+        if (autoCompleteTrigger === '@') {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    resolve(suggestedFunctions);
+                }, 1000);
+            });
+        }
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve(suggestedFields);
+            }, 1000);
+        });
+    };
     return (_jsx(StyledExpressionBuilderDemo, { children: _jsx(ExpressionBuilder, { list: {
                 items: expressionItems,
                 onItemAdd: args.onItemAdd || onItemAdd,
@@ -236,15 +268,16 @@ export const ExpressionBuilderDemo = (args) => {
                 onItemCollapse: args.onItemCollapse || onItemCollapse,
                 details: expressionDetails
             }, search: {
-                filters: ['Field', 'Function', 'Decision'],
+                filters: ['Field', 'Function', 'Decision', 'When'],
                 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 }) }));
+                value: searchValue,
+                accent: filterRegex
+            }, errors: args.showErrors ? args.errors || errors : undefined, defaultValue: args.defaultValue === undefined ? '@testExp(arg1, arg2)' : args.defaultValue, handle: args.handle || handle, fetchSuggestions: fetchSuggestions }) }));
 };
 ExpressionBuilderDemo.args = {
     showErrors: false
@@ -252,4 +285,24 @@ ExpressionBuilderDemo.args = {
 ExpressionBuilderDemo.argTypes = {
     showErrors: { control: { type: 'boolean' } }
 };
+export const CodeEditorDemo = () => {
+    const codeEditorHandle = useRef(null);
+    const fetchSuggestions = autoCompleteTrigger => {
+        if (autoCompleteTrigger === '@') {
+            return new Promise(resolve => {
+                setTimeout(() => {
+                    resolve(suggestedFunctions);
+                }, 1000);
+            });
+        }
+        return new Promise(resolve => {
+            setTimeout(() => {
+                resolve(suggestedFields);
+            }, 1000);
+        });
+    };
+    return (_jsx(Configuration, { theme: BuildTheme, children: _jsx(CodeEditor, { fetchSuggestions: fetchSuggestions, autoCompleteTriggers: ['.', '@'], editorConfigProps: {
+                mode: 'expression'
+            }, codeEditorHandle: codeEditorHandle, defaultValue: '@testing()' }) }));
+};
 //# sourceMappingURL=ExpressionBuilder.stories.js.map

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

	@@ -1 +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, 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"]}
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, ChangeEvent, useMemo } from 'react';\n\nimport {\n ExpressionBuilder,\n ExpressionItem,\n ExpressionItemProps,\n ExpressionList,\n ExpressionBuilderProps,\n ExpressionDetails,\n HandleValue,\n InputParams,\n CodeEditor,\n EditorState\n} from '@pega/cosmos-react-build';\nimport {\n BuildTheme,\n Configuration,\n createUID,\n ForwardProps,\n Input,\n InputProps\n} from '@pega/cosmos-react-core';\n\nimport {\n errors,\n getFilterRegex,\n items,\n primaryDetails,\n StyledExpressionBuilderDemo,\n suggestedFields,\n suggestedFunctions\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 const filterRegex = useMemo(() => getFilterRegex(searchValue), [searchValue]);\n\n const detailsFilter = (location: { field: string; value: string }[], filterValue: string) =>\n location.find(field => field.value.toLowerCase().includes(filterValue));\n\n useEffect(() => {\n const lowerSearchFilter = searchFilter.toLowerCase();\n const lowerSearchValue = searchValue.toLowerCase();\n const filteredItems = items.filter(item => {\n return (\n item.type.toLowerCase().includes(lowerSearchFilter === 'all' ? '' : lowerSearchFilter) &&\n (item.primary.toLowerCase().includes(lowerSearchValue) \|\|\n detailsFilter(item.details.primary, lowerSearchValue) \|\|\n detailsFilter(item.details.output, lowerSearchValue))\n );\n });\n\n const matchedItems = filteredItems.map(item => {\n if (item.primary.toLowerCase().includes(lowerSearchValue)) return item;\n\n let matchedField;\n\n const primaryField = detailsFilter(item.details.primary, lowerSearchValue);\n if (primaryField) matchedField = primaryField;\n\n const outputField = detailsFilter(item.details.output, lowerSearchValue);\n if (outputField && !primaryField) matchedField = outputField;\n\n return {\n ...item,\n matchedField: { name: matchedField?.field, value: matchedField?.value }\n };\n });\n\n setExpressionItems(matchedItems);\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\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 const fetchSuggestions: ExpressionBuilderProps['fetchSuggestions'] = autoCompleteTrigger => {\n if (autoCompleteTrigger === '@') {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(suggestedFunctions);\n }, 1000);\n });\n }\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(suggestedFields);\n }, 1000);\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', 'When'],\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 accent: filterRegex\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 fetchSuggestions={fetchSuggestions}\n />\n </StyledExpressionBuilderDemo>\n );\n};\n\nExpressionBuilderDemo.args = {\n showErrors: false\n};\n\nExpressionBuilderDemo.argTypes = {\n showErrors: { control: { type: 'boolean' } }\n};\n\nexport const CodeEditorDemo: Story = () => {\n const codeEditorHandle = useRef<EditorState \| null>(null);\n\n const fetchSuggestions: ExpressionBuilderProps['fetchSuggestions'] = autoCompleteTrigger => {\n if (autoCompleteTrigger === '@') {\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(suggestedFunctions);\n }, 1000);\n });\n }\n return new Promise(resolve => {\n setTimeout(() => {\n resolve(suggestedFields);\n }, 1000);\n });\n };\n\n return (\n <Configuration theme={BuildTheme}>\n <CodeEditor\n fetchSuggestions={fetchSuggestions}\n autoCompleteTriggers={['.', '@']}\n editorConfigProps={{\n mode: 'expression'\n }}\n codeEditorHandle={codeEditorHandle}\n defaultValue='@testing()'\n />\n </Configuration>\n );\n};\n"]}

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

@@ -5,9 +5,11 @@ interface FieldGroupStoryProps {
     firstGroupName?: string;
     firstGroupCollapsible?: boolean;
     firstGroupDescription?: string;
+    showFirstAdditionalInfo?: boolean;
     secondGroupName?: string;
     secondGroupCollapsible?: boolean;
     secondGroupDescription?: string;
+    showSecondAdditionalInfo?: boolean;
 }
 export declare const FieldGroupDemo: Story<FieldGroupStoryProps>;
 //# sourceMappingURL=FieldGroup.stories.d.ts.map

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

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

package/lib/core/FieldGroup/FieldGroup.stories.js CHANGED Viewed

@@ -5,22 +5,30 @@ export default {
     component: FieldGroup
 };
 export const FieldGroupDemo = (args) => {
-    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }), _jsx(Option, { value: 'B', children: "Option 2B" })] }), _jsx(DateInput, { label: 'Date 2' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' })] }) })] }));
+    return (_jsxs(Grid, { container: { rowGap: 1 }, children: [_jsx(FieldGroup, { name: args.firstGroupName, description: args.firstGroupDescription, collapsible: args.firstGroupCollapsible, additionalInfo: args.showFirstAdditionalInfo
+                    ? { heading: 'Additional Info', content: 'This is a field group' }
+                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 1' }), _jsxs(Select, { label: 'Select 1', children: [_jsx(Option, { value: 'A', children: "Option 1A" }), _jsx(Option, { value: 'B', children: "Option 1B" })] }), _jsx(DateInput, { label: 'Date 1' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 1' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 1' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 1' })] }) }), _jsx(FieldGroup, { name: args.secondGroupName, description: args.secondGroupDescription, collapsible: args.secondGroupCollapsible, additionalInfo: args.showSecondAdditionalInfo
+                    ? { heading: 'Additional Info', content: 'This is another field group' }
+                    : undefined, children: _jsxs(Grid, { container: { gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }, children: [_jsx(Input, { type: 'text', label: 'Text 2' }), _jsxs(Select, { label: 'Select 2', children: [_jsx(Option, { value: 'A', children: "Option 2A" }), _jsx(Option, { value: 'B', children: "Option 2B" })] }), _jsx(DateInput, { label: 'Date 2' }), _jsx(Grid, { item: { colStart: '1', colEnd: '-1' }, children: _jsx(TextArea, { label: 'TextArea 2' }) }), _jsx(Input, { required: true, type: 'text', label: 'Required 2' }), _jsx(Input, { disabled: true, type: 'text', label: 'Disabled 2' })] }) })] }));
 };
 FieldGroupDemo.args = {
     firstGroupName: 'Field group 1',
     firstGroupCollapsible: true,
     firstGroupDescription: '',
+    showFirstAdditionalInfo: true,
     secondGroupName: 'Field group 2',
     secondGroupCollapsible: true,
-    secondGroupDescription: ''
+    secondGroupDescription: '',
+    showSecondAdditionalInfo: true
 };
 FieldGroupDemo.argTypes = {
     firstGroupName: { control: { type: 'text' } },
     firstGroupCollapsible: { control: { type: 'boolean' } },
     firstGroupDescription: { control: { type: 'text' } },
+    showFirstAdditionalInfo: { control: { type: 'boolean' } },
     secondGroupName: { control: { type: 'text' } },
     secondGroupCollapsible: { control: { type: 'boolean' } },
-    secondGroupDescription: { control: { type: 'text' } }
+    secondGroupDescription: { control: { type: 'text' } },
+    showSecondAdditionalInfo: { control: { type: 'boolean' } }
 };
 //# sourceMappingURL=FieldGroup.stories.js.map

package/lib/core/FieldGroup/FieldGroup.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;~~AAWV~~,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,WAAW,EAAE,IAAI,CAAC,qBAAqB,~~YAEvC~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,gDAAgD,EAAE,aACjF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,EACb,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,WAAW,EAAE,IAAI,CAAC,sBAAsB,~~YAExC~~,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iDAAiD,EAAE,aAClF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,eAAe;IAC/B,qBAAqB,EAAE,IAAI;IAC3B,qBAAqB,EAAE,EAAE;IACzB,eAAe,EAAE,eAAe;IAChC,sBAAsB,EAAE,IAAI;IAC5B,sBAAsB,EAAE,EAAE;~~CAC3B~~,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxD,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~CACtD~~,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName?: string;\n firstGroupCollapsible?: boolean;\n firstGroupDescription?: string;\n secondGroupName?: string;\n secondGroupCollapsible?: boolean;\n secondGroupDescription?: string;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n return (\n <Grid container={{ rowGap: 1 }}>\n <FieldGroup\n name={args.firstGroupName}\n description={args.firstGroupDescription}\n collapsible={args.firstGroupCollapsible}\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup\n name={args.secondGroupName}\n description={args.secondGroupDescription}\n collapsible={args.secondGroupCollapsible}\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupCollapsible: true,\n firstGroupDescription: '',\n secondGroupName: 'Field group 2',\n secondGroupCollapsible: true,\n secondGroupDescription: ''\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n firstGroupDescription: { control: { type: 'text' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupDescription: { control: { type: 'text' } }\n};\n"]}
1	+ {"version":3,"file":"FieldGroup.stories.js","sourceRoot":"","sources":["../../../src/core/FieldGroup/FieldGroup.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EACL,SAAS,EACT,UAAU,EACV,IAAI,EACJ,KAAK,EACL,MAAM,EACN,MAAM,EACN,QAAQ,EACT,MAAM,yBAAyB,CAAC;AAEjC,eAAe;IACb,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAU;CACd,CAAC;AAaV,MAAM,CAAC,MAAM,cAAc,GAAgC,CAAC,IAA0B,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,aAC5B,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,WAAW,EAAE,IAAI,CAAC,qBAAqB,EACvC,cAAc,EACZ,IAAI,CAAC,uBAAuB;oBAC1B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,uBAAuB,EAAE;oBAClE,CAAC,CAAC,SAAS,YAGf,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,gDAAgD,EAAE,aACjF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,EACb,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,CAAC,eAAe,EAC1B,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,WAAW,EAAE,IAAI,CAAC,sBAAsB,EACxC,cAAc,EACZ,IAAI,CAAC,wBAAwB;oBAC3B,CAAC,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,6BAA6B,EAAE;oBACxE,CAAC,CAAC,SAAS,YAGf,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,EAAE,iDAAiD,EAAE,aAClF,KAAC,KAAK,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,GAAG,EACpC,MAAC,MAAM,IAAC,KAAK,EAAC,UAAU,aACtB,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,EACpC,KAAC,MAAM,IAAC,KAAK,EAAC,GAAG,0BAAmB,IAC7B,EACT,KAAC,SAAS,IAAC,KAAK,EAAC,QAAQ,GAAG,EAC5B,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,YACzC,KAAC,QAAQ,IAAC,KAAK,EAAC,YAAY,GAAG,GAC1B,EACP,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,EACjD,KAAC,KAAK,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,YAAY,GAAG,IAC5C,GACI,IACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,cAAc,CAAC,IAAI,GAAG;IACpB,cAAc,EAAE,eAAe;IAC/B,qBAAqB,EAAE,IAAI;IAC3B,qBAAqB,EAAE,EAAE;IACzB,uBAAuB,EAAE,IAAI;IAC7B,eAAe,EAAE,eAAe;IAChC,sBAAsB,EAAE,IAAI;IAC5B,sBAAsB,EAAE,EAAE;IAC1B,wBAAwB,EAAE,IAAI;CAC/B,CAAC;AAEF,cAAc,CAAC,QAAQ,GAAG;IACxB,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC7C,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACvD,qBAAqB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACpD,uBAAuB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACzD,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAC9C,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IACxD,sBAAsB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IACrD,wBAAwB,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;CAC3D,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport {\n DateInput,\n FieldGroup,\n Grid,\n Input,\n Select,\n Option,\n TextArea\n} from '@pega/cosmos-react-core';\n\nexport default {\n title: 'Core/FieldGroup',\n component: FieldGroup\n} as Meta;\n\ninterface FieldGroupStoryProps {\n firstGroupName?: string;\n firstGroupCollapsible?: boolean;\n firstGroupDescription?: string;\n showFirstAdditionalInfo?: boolean;\n secondGroupName?: string;\n secondGroupCollapsible?: boolean;\n secondGroupDescription?: string;\n showSecondAdditionalInfo?: boolean;\n}\n\nexport const FieldGroupDemo: Story<FieldGroupStoryProps> = (args: FieldGroupStoryProps) => {\n return (\n <Grid container={{ rowGap: 1 }}>\n <FieldGroup\n name={args.firstGroupName}\n description={args.firstGroupDescription}\n collapsible={args.firstGroupCollapsible}\n additionalInfo={\n args.showFirstAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is a field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fit, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 1' />\n <Select label='Select 1'>\n <Option value='A'>Option 1A</Option>\n <Option value='B'>Option 1B</Option>\n </Select>\n <DateInput label='Date 1' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 1' />\n </Grid>\n <Input required type='text' label='Required 1' />\n <Input disabled type='text' label='Disabled 1' />\n </Grid>\n </FieldGroup>\n <FieldGroup\n name={args.secondGroupName}\n description={args.secondGroupDescription}\n collapsible={args.secondGroupCollapsible}\n additionalInfo={\n args.showSecondAdditionalInfo\n ? { heading: 'Additional Info', content: 'This is another field group' }\n : undefined\n }\n >\n <Grid container={{ gap: 1, cols: 'repeat(auto-fill, minmax(min(40ch, 100%), 1fr))' }}>\n <Input type='text' label='Text 2' />\n <Select label='Select 2'>\n <Option value='A'>Option 2A</Option>\n <Option value='B'>Option 2B</Option>\n </Select>\n <DateInput label='Date 2' />\n <Grid item={{ colStart: '1', colEnd: '-1' }}>\n <TextArea label='TextArea 2' />\n </Grid>\n <Input required type='text' label='Required 2' />\n <Input disabled type='text' label='Disabled 2' />\n </Grid>\n </FieldGroup>\n </Grid>\n );\n};\n\nFieldGroupDemo.args = {\n firstGroupName: 'Field group 1',\n firstGroupCollapsible: true,\n firstGroupDescription: '',\n showFirstAdditionalInfo: true,\n secondGroupName: 'Field group 2',\n secondGroupCollapsible: true,\n secondGroupDescription: '',\n showSecondAdditionalInfo: true\n};\n\nFieldGroupDemo.argTypes = {\n firstGroupName: { control: { type: 'text' } },\n firstGroupCollapsible: { control: { type: 'boolean' } },\n firstGroupDescription: { control: { type: 'text' } },\n showFirstAdditionalInfo: { control: { type: 'boolean' } },\n secondGroupName: { control: { type: 'text' } },\n secondGroupCollapsible: { control: { type: 'boolean' } },\n secondGroupDescription: { control: { type: 'text' } },\n showSecondAdditionalInfo: { control: { type: 'boolean' } }\n};\n"]}

package/lib/core/ListToolbar/ListToolbar.stories.d.ts CHANGED Viewed

@@ -1,10 +1,11 @@
 import { Meta, Story } from '@storybook/react';
-import { ListToolbarProps } from '@pega/cosmos-react-core';
+import { ListToolbarProps, FormControlProps } from '@pega/cosmos-react-core';
 declare const _default: Meta<import("@storybook/react").Args>;
 export default _default;
 interface ListToolbarStoryProps {
     condensed: ListToolbarProps['condensed'];
     createNewLabel: string;
+    required: FormControlProps['required'];
 }
 export declare const ListToolbarDemo: Story<ListToolbarStoryProps>;
 export declare const SimpleToolbarDemo: Story;

package/lib/core/ListToolbar/ListToolbar.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,gBAAgB,~~EAGjB~~,MAAM,yBAAyB,CAAC;;AAWjC,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;~~CACxB~~;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,~~CA2FxD~~,CAAC;~~AAYF~~,eAAO,MAAM,iBAAiB,EAAE,~~KAa~~/B,CAAC"}
1	+ {"version":3,"file":"ListToolbar.stories.d.ts","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAGL,gBAAgB,EAGhB,gBAAgB,EACjB,MAAM,yBAAyB,CAAC;;AAWjC,wBAGU;AAIV,UAAU,qBAAqB;IAC7B,SAAS,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACzC,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,gBAAgB,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,qBAAqB,CA8FxD,CAAC;AAcF,eAAO,MAAM,iBAAiB,EAAE,KAc/B,CAAC"}

package/lib/core/ListToolbar/ListToolbar.stories.js CHANGED Viewed

@@ -67,24 +67,28 @@ export const ListToolbarDemo = (args) => {
                             setViews(cur => {
                                 return cur.map(view => ({ ...view, selected: view.id === id }));
                             });
-                        }
+                        },
+                        defaultId: '1',
+                        appDefaultId: '2'
                     }, createNew: {
                         onClick: action('Clicked Create New'),
                         label: args.createNewLabel
                     }, search: { onSearchSubmit: action('Search submit') }, count: {
                         total: 32,
                         selected: 4
-                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), condensed: args.condensed }) }) }) }));
+                    }, filter: filterProp, sort: sortProp, group: groupProp, actions: actions, additionalActions: _jsx(MenuButton, { text: 'Edit' }), condensed: args.condensed, formControlProps: { required: args.required } }) }) }) }));
 };
 ListToolbarDemo.args = {
     condensed: false,
-    createNewLabel: undefined
+    createNewLabel: undefined,
+    required: false
 };
 ListToolbarDemo.argTypes = {
     condensed: { control: { type: 'boolean' } },
-    createNewLabel: { control: { type: 'text' } }
+    createNewLabel: { control: { type: 'text' } },
+    required: { control: { type: 'boolean' } }
 };
 export const SimpleToolbarDemo = () => {
-    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions }) }) }));
+    return (_jsx(Card, { children: _jsx(CardHeader, { children: _jsx(ListToolbar, { heading: 'Top accounts in California', search: { onSearchSubmit: action('Search submit') }, count: { total: 212, totalHasMore: true }, actions: actions, formControlProps: { required: true } }) }) }));
 };
 //# sourceMappingURL=ListToolbar.stories.js.map

package/lib/core/ListToolbar/ListToolbar.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EACL,IAAI,EACJ,UAAU,EAEV,WAAW,EACX,UAAU,~~EACX~~,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,SAAS,EACT,OAAO,EACP,cAAc,EACd,0BAA0B,EAC1B,aAAa,EACd,MAAM,qBAAqB,CAAC;AAE7B,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,WAAW;CACf,CAAC;~~AASV~~,MAAM,CAAC,MAAM,eAAe,GAAiC,CAAC,IAA2B,EAAE,EAAE;IAC3F,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC1F,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;IAC9C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAoB,IAAI,CAAC,CAAC;IAExE,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,OAAO;YACL,KAAK,EAAE,sBAAsB;YAC7B,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,GAAG,EAAE;gBACb,yBAAyB,CAAC,IAAI,CAAC,CAAC;YAClC,CAAC;YACD,QAAQ,EAAE,GAAG,EAAE;gBACb,yBAAyB,CAAC,GAAG,CAAC,EAAE;oBAC9B,sCAAsC;oBACtC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;oBACnB,OAAO,IAAI,CAAC;gBACd,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,sBAAsB,CAAC,CAAC,CAAC;IAE7B,MAAM,QAAQ,GAAoB,OAAO,CAAC,GAAG,EAAE;QAC7C,OAAO;YACL,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YAClC,KAAK,EAAE;gBACL;oBACE,EAAE,EAAE,KAAK;oBACT,IAAI,EAAE,WAAW;oBACjB,IAAI,EAAE,UAAU;oBAChB,QAAQ,EAAE,WAAW,KAAK,KAAK;iBAChC;gBACD;oBACE,EAAE,EAAE,MAAM;oBACV,IAAI,EAAE,YAAY;oBAClB,IAAI,EAAE,YAAY;oBAClB,QAAQ,EAAE,WAAW,KAAK,MAAM;iBACjC;aACF;YACD,WAAW,EAAE,EAAE,CAAC,EAAE;gBAChB,cAAc,CAAC,GAAG,CAAC,EAAE;oBACnB,OAAO,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,EAAiB,CAAC;gBAChD,CAAC,CAAC,CAAC;YACL,CAAC;SACF,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE;QAC7B,OAAO;YACL,KAAK,EAAE,SAAS;YAChB,QAAQ,EAAE,aAAa;YACvB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;YAClB,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC;SACnB,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,KAAC,IAAI,cACH,KAAC,UAAU,cACT,KAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,yBAAyB,YACnE,KAAC,WAAW,IACV,OAAO,EAAE;wBACP,KAAK;wBACL,YAAY,EAAE,EAAE,CAAC,EAAE;4BACjB,QAAQ,CAAC,GAAG,CAAC,EAAE;gCACb,OAAO,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;4BAClE,CAAC,CAAC,CAAC;wBACL,CAAC;~~qBACF~~,EACD,SAAS,EAAE;wBACT,OAAO,EAAE,MAAM,CAAC,oBAAoB,CAAC;wBACrC,KAAK,EAAE,IAAI,CAAC,cAAc;qBAC3B,EACD,MAAM,EAAE,EAAE,cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EACnD,KAAK,EAAE;wBACL,KAAK,EAAE,EAAE;wBACT,QAAQ,EAAE,CAAC;qBACZ,EACD,MAAM,EAAE,UAAU,EAClB,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO,EAChB,iBAAiB,EAAE,KAAC,UAAU,IAAC,IAAI,EAAC,MAAM,GAAG,EAC7C,SAAS,EAAE,IAAI,CAAC,SAAS,~~GACzB~~,GACkC,GAC3B,GACR,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,CAAC,IAAI,GAAG;IACrB,SAAS,EAAE,KAAK;IAChB,cAAc,EAAE,SAAS;~~CAC1B~~,CAAC;AAEF,eAAe,CAAC,QAAQ,GAAG;IACzB,SAAS,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAC3C,cAAc,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;~~CAC9C~~,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,GAAG,EAAE;IAC3C,OAAO,CACL,KAAC,IAAI,cACH,KAAC,UAAU,cACT,KAAC,WAAW,IACV,OAAO,EAAC,4BAA4B,EACpC,MAAM,EAAE,EAAE,cAAc,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,EACnD,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,EACzC,OAAO,EAAE,OAAO,~~GAChB~~,GACS,GACR,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Card,\n CardHeader,\n ListToolbarProps,\n ListToolbar,\n MenuButton\n} from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n mockViews,\n actions,\n FilterRenderer,\n StagedStateDispatchContext,\n GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n title: 'Core/ListToolbar',\n component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n condensed: ListToolbarProps['condensed'];\n createNewLabel: string;\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object \| null>(null);\n const [views, setViews] = useState(mockViews);\n const [currentSort, setCurrentSort] = useState<SortString \| null>(null);\n\n const filterProp = useMemo(() => {\n return {\n value: stagedQueryOptionState,\n count: undefined,\n renderer: FilterRenderer,\n onCancel: () => {\n setStagedQueryOptionState(null);\n },\n onSubmit: () => {\n setStagedQueryOptionState(cur => {\n // eslint-disable-next-line no-console\n console.table(cur);\n return null;\n });\n }\n };\n }, [stagedQueryOptionState]);\n\n const sortProp: PresetMenuProps = useMemo(() => {\n return {\n mode: 'single-select',\n count: currentSort ? 1 : undefined,\n items: [\n {\n id: 'asc',\n text: 'Ascending',\n icon: 'arrow-up',\n selected: currentSort === 'asc'\n },\n {\n id: 'desc',\n text: 'Descending',\n icon: 'arrow-down',\n selected: currentSort === 'desc'\n }\n ],\n onItemClick: id => {\n setCurrentSort(cur => {\n return cur === id ? null : (id as SortString);\n });\n }\n };\n }, [currentSort]);\n\n const groupProp = useMemo(() => {\n return {\n count: undefined,\n renderer: GroupRenderer,\n onCancel: () => {},\n onSubmit: () => {}\n };\n }, []);\n\n return (\n <Card>\n <CardHeader>\n <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n heading={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return cur.map(view => ({ ...view, selected: view.id === id }));\n });\n }\n }}\n createNew={{\n onClick: action('Clicked Create New'),\n label: args.createNewLabel\n }}\n search={{ onSearchSubmit: action('Search submit') }}\n count={{\n total: 32,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n condensed={args.condensed}\n />\n </StagedStateDispatchContext.Provider>\n </CardHeader>\n </Card>\n );\n};\n\nListToolbarDemo.args = {\n condensed: false,\n createNewLabel: undefined\n};\n\nListToolbarDemo.argTypes = {\n condensed: { control: { type: 'boolean' } },\n createNewLabel: { control: { type: 'text' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n return (\n <Card>\n <CardHeader>\n <ListToolbar\n heading='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n />\n </CardHeader>\n </Card>\n );\n};\n"]}
1	+ {"version":3,"file":"ListToolbar.stories.js","sourceRoot":"","sources":["../../../src/core/ListToolbar/ListToolbar.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\nimport { useMemo, useState } from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport {\n Card,\n CardHeader,\n ListToolbarProps,\n ListToolbar,\n MenuButton,\n FormControlProps\n} from '@pega/cosmos-react-core';\nimport { PresetMenuProps } from '@pega/cosmos-react-core/lib/components/ListToolbar/ListToolbar.types';\n\nimport {\n mockViews,\n actions,\n FilterRenderer,\n StagedStateDispatchContext,\n GroupRenderer\n} from './ListToolbar.mocks';\n\nexport default {\n title: 'Core/ListToolbar',\n component: ListToolbar\n} as Meta;\n\ntype SortString = 'asc' \| 'desc';\n\ninterface ListToolbarStoryProps {\n condensed: ListToolbarProps['condensed'];\n createNewLabel: string;\n required: FormControlProps['required'];\n}\n\nexport const ListToolbarDemo: Story<ListToolbarStoryProps> = (args: ListToolbarStoryProps) => {\n const [stagedQueryOptionState, setStagedQueryOptionState] = useState<object \| null>(null);\n const [views, setViews] = useState(mockViews);\n const [currentSort, setCurrentSort] = useState<SortString \| null>(null);\n\n const filterProp = useMemo(() => {\n return {\n value: stagedQueryOptionState,\n count: undefined,\n renderer: FilterRenderer,\n onCancel: () => {\n setStagedQueryOptionState(null);\n },\n onSubmit: () => {\n setStagedQueryOptionState(cur => {\n // eslint-disable-next-line no-console\n console.table(cur);\n return null;\n });\n }\n };\n }, [stagedQueryOptionState]);\n\n const sortProp: PresetMenuProps = useMemo(() => {\n return {\n mode: 'single-select',\n count: currentSort ? 1 : undefined,\n items: [\n {\n id: 'asc',\n text: 'Ascending',\n icon: 'arrow-up',\n selected: currentSort === 'asc'\n },\n {\n id: 'desc',\n text: 'Descending',\n icon: 'arrow-down',\n selected: currentSort === 'desc'\n }\n ],\n onItemClick: id => {\n setCurrentSort(cur => {\n return cur === id ? null : (id as SortString);\n });\n }\n };\n }, [currentSort]);\n\n const groupProp = useMemo(() => {\n return {\n count: undefined,\n renderer: GroupRenderer,\n onCancel: () => {},\n onSubmit: () => {}\n };\n }, []);\n\n return (\n <Card>\n <CardHeader>\n <StagedStateDispatchContext.Provider value={setStagedQueryOptionState}>\n <ListToolbar\n heading={{\n views,\n onViewSelect: id => {\n setViews(cur => {\n return cur.map(view => ({ ...view, selected: view.id === id }));\n });\n },\n defaultId: '1',\n appDefaultId: '2'\n }}\n createNew={{\n onClick: action('Clicked Create New'),\n label: args.createNewLabel\n }}\n search={{ onSearchSubmit: action('Search submit') }}\n count={{\n total: 32,\n selected: 4\n }}\n filter={filterProp}\n sort={sortProp}\n group={groupProp}\n actions={actions}\n additionalActions={<MenuButton text='Edit' />}\n condensed={args.condensed}\n formControlProps={{ required: args.required }}\n />\n </StagedStateDispatchContext.Provider>\n </CardHeader>\n </Card>\n );\n};\n\nListToolbarDemo.args = {\n condensed: false,\n createNewLabel: undefined,\n required: false\n};\n\nListToolbarDemo.argTypes = {\n condensed: { control: { type: 'boolean' } },\n createNewLabel: { control: { type: 'text' } },\n required: { control: { type: 'boolean' } }\n};\n\nexport const SimpleToolbarDemo: Story = () => {\n return (\n <Card>\n <CardHeader>\n <ListToolbar\n heading='Top accounts in California'\n search={{ onSearchSubmit: action('Search submit') }}\n count={{ total: 212, totalHasMore: true }}\n actions={actions}\n formControlProps={{ required: true }}\n />\n </CardHeader>\n </Card>\n );\n};\n"]}

package/lib/core/Tree/Tree.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,~~CAqFpE~~,CAAC"}
1	+ {"version":3,"file":"Tree.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAGL,iBAAiB,EAMlB,MAAM,yBAAyB,CAAC;;AAKjC,wBAGU;AAEV,eAAO,MAAM,QAAQ,EAAE,KActB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAyGpE,CAAC"}

package/lib/core/Tree/Tree.stories.js CHANGED Viewed

@@ -22,6 +22,7 @@ export const StandardTreeDemo = (args) => {
                 id,
                 label: isParent ? 'Parent' : 'Leaf',
                 icon: isParent ? 'folder-solid' : 'document-solid',
+                secondary: 'This is secondary text',
                 nodes: isParent ? [] : undefined,
                 actions: [
                     { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },
@@ -61,6 +62,21 @@ export const StandardTreeDemo = (args) => {
                     const clickedNode = treeHelpers.getNode(allNodes, id);
                     setCurrentNodeId(id);
                     // If a leaf node, just set to current
+                    if (!clickedNode?.nodes)
+                        return;
+                    setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {
+                        return {
+                            ...node,
+                            loading: node.nodes?.length === 0
+                        };
+                    }));
+                    // If a parent node with children already loaded, we're done.
+                    if (clickedNode?.nodes?.length > 0)
+                        return;
+                    loadChildNodes(id);
+                }, onNodeToggle: id => {
+                    const clickedNode = treeHelpers.getNode(allNodes, id);
+                    // If a leaf node, just set to current
                     if (!clickedNode?.nodes)
                         return;
                     setAllNodes(tree => treeHelpers.mapNode(tree, id, node => {

package/lib/core/Tree/Tree.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n StandardTree,\n StandardTreeProps,\n Tree,\n TreeNode,\n treeHelpers,\n createUID,\n themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n title: 'Core/Tree',\n component: Tree\n} as Meta;\n\nexport const BaseTree: Story = () => {\n return (\n <StyledBaseTree\n nodes={themeToTree(themeDefinition)}\n nodeRenderer={({ id, subTree }) => {\n return (\n <>\n <span>{id}</span>\n {subTree}\n </>\n );\n }}\n />\n );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = (\n args: Pick<StandardTreeProps, 'lined'>\n) => {\n const getMockNodes = ({\n length = 5,\n parent = true\n }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n return Array.from({ length }, (_, i) => {\n const isParent = parent && i !== 2;\n const id = createUID();\n return {\n id,\n label: isParent ? 'Parent' : 'Leaf',\n icon: isParent ? 'folder-solid' : 'document-solid',\n nodes: isParent ? [] : undefined,\n actions: [\n { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n ],\n onClick: isParent\n ? undefined\n : nodeId => {\n action(`Action for node: ${nodeId}`)();\n }\n };\n });\n };\n\n const [currentNodeId, setCurrentNodeId] = useState<string \| undefined>();\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n return getMockNodes({ length: 10 });\n });\n\n const loadChildNodes = (id: string) => {\n setTimeout(() => {\n setAllNodes(tree => {\n return treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n loading: false,\n nodes: [...(node.nodes ?? []), ...getMockNodes()]\n };\n });\n });\n }, 1000);\n };\n\n const expandTo = (id: TreeNode['id']) => {\n setAllNodes(tree => {\n return treeHelpers.expandTo(tree, id);\n });\n };\n\n return (\n <>\n <StandardTree\n lined={args.lined}\n currentNodeId={currentNodeId}\n nodes={allNodes}\n onNodeClick={id => {\n const clickedNode = treeHelpers.getNode(allNodes, id);\n setCurrentNodeId(id);\n // If a leaf node, just set to current\n if (!clickedNode?.nodes) return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n expanded: !node.expanded,\n loading: node.nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if (clickedNode?.nodes?.length > 0) return;\n\n loadChildNodes(id);\n }}\n />\n <Button onClick={() => expandTo('')}>Collapse All</Button>\n <Button onClick={() => expandTo(currentNodeId \|\| '')}>Expand to active item</Button>\n </>\n );\n};\n\nStandardTreeDemo.args = {\n lined: false\n};\n\nStandardTreeDemo.argTypes = {\n lined: { control: { type: 'boolean' } }\n};\n"]}
1	+ {"version":3,"file":"Tree.stories.js","sourceRoot":"","sources":["../../../src/core/Tree/Tree.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from 'react';\nimport { action } from '@storybook/addon-actions';\nimport { Meta, Story } from '@storybook/react';\n\nimport {\n Button,\n StandardTree,\n StandardTreeProps,\n Tree,\n TreeNode,\n treeHelpers,\n createUID,\n themeDefinition\n} from '@pega/cosmos-react-core';\n\nimport { themeToTree } from './Tree.mocks';\nimport { StyledBaseTree } from './Tree.styles';\n\nexport default {\n title: 'Core/Tree',\n component: Tree\n} as Meta;\n\nexport const BaseTree: Story = () => {\n return (\n <StyledBaseTree\n nodes={themeToTree(themeDefinition)}\n nodeRenderer={({ id, subTree }) => {\n return (\n <>\n <span>{id}</span>\n {subTree}\n </>\n );\n }}\n />\n );\n};\n\nexport const StandardTreeDemo: Story<Pick<StandardTreeProps, 'lined'>> = (\n args: Pick<StandardTreeProps, 'lined'>\n) => {\n const getMockNodes = ({\n length = 5,\n parent = true\n }: { length?: number; parent?: boolean } = {}): StandardTreeProps['nodes'] => {\n return Array.from({ length }, (_, i) => {\n const isParent = parent && i !== 2;\n const id = createUID();\n return {\n id,\n label: isParent ? 'Parent' : 'Leaf',\n icon: isParent ? 'folder-solid' : 'document-solid',\n secondary: 'This is secondary text',\n nodes: isParent ? [] : undefined,\n actions: [\n { id: 'star', text: 'Star', icon: 'star', onClick: action(`Star node: ${id}`) },\n { id: 'pin', text: 'Pin', icon: 'pin', onClick: action(`Pin node: ${id}`) }\n ],\n onClick: isParent\n ? undefined\n : nodeId => {\n action(`Action for node: ${nodeId}`)();\n }\n };\n });\n };\n\n const [currentNodeId, setCurrentNodeId] = useState<string \| undefined>();\n const [allNodes, setAllNodes] = useState<StandardTreeProps['nodes']>(() => {\n return getMockNodes({ length: 10 });\n });\n\n const loadChildNodes = (id: string) => {\n setTimeout(() => {\n setAllNodes(tree => {\n return treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n loading: false,\n nodes: [...(node.nodes ?? []), ...getMockNodes()]\n };\n });\n });\n }, 1000);\n };\n\n const expandTo = (id: TreeNode['id']) => {\n setAllNodes(tree => {\n return treeHelpers.expandTo(tree, id);\n });\n };\n\n return (\n <>\n <StandardTree\n lined={args.lined}\n currentNodeId={currentNodeId}\n nodes={allNodes}\n onNodeClick={id => {\n const clickedNode = treeHelpers.getNode(allNodes, id);\n setCurrentNodeId(id);\n // If a leaf node, just set to current\n if (!clickedNode?.nodes) return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n loading: node.nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if (clickedNode?.nodes?.length > 0) return;\n\n loadChildNodes(id);\n }}\n onNodeToggle={id => {\n const clickedNode = treeHelpers.getNode(allNodes, id);\n // If a leaf node, just set to current\n if (!clickedNode?.nodes) return;\n\n setAllNodes(tree =>\n treeHelpers.mapNode(tree, id, node => {\n return {\n ...node,\n expanded: !node.expanded,\n loading: node.nodes?.length === 0\n };\n })\n );\n\n // If a parent node with children already loaded, we're done.\n if (clickedNode?.nodes?.length > 0) return;\n\n loadChildNodes(id);\n }}\n />\n <Button onClick={() => expandTo('')}>Collapse All</Button>\n <Button onClick={() => expandTo(currentNodeId \|\| '')}>Expand to active item</Button>\n </>\n );\n};\n\nStandardTreeDemo.args = {\n lined: false\n};\n\nStandardTreeDemo.argTypes = {\n lined: { control: { type: 'boolean' } }\n};\n"]}

package/lib/cs/CallControlPanel/CallControlPanel.mocks.d.ts CHANGED Viewed

@@ -9,6 +9,10 @@ export declare const transferReasons: {
     id: string;
     label: string;
 }[];
+export declare const interactionOptions: {
+    id: string;
+    label: string;
+}[];
 export declare const userStatusOptions: UserAvailabilityStatusOption[];
 declare type StyleVariableName = '--app-bg-color' | '--header-border-color' | '--text-color' | '--msg-border-radius' | '--msg-you-bg-color' | '--msg-you-text-color' | '--msg-me-bg-color' | '--msg-me-text-color' | '--input-height' | '--input-background-color' | '--input-border-color' | '--input-border-width' | '--input-border-radius' | '--input-focus-border-color' | '--input-focus-box-shadow' | '--input-text-color' | '--button-text-color' | '--button-height' | '--button-bg-color' | '--button-border-color' | '--button-border-radius' | '--button-hover-bg-color' | '--footer-bg-color';
 export declare type ExternalStyles = Partial<Record<StyleVariableName, string>>;

package/lib/cs/CallControlPanel/CallControlPanel.mocks.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;GAmExB,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAa3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,4BAA4B,EA4B3D,CAAC;AAEF,aAAK,iBAAiB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,cAAc,GACd,qBAAqB,GACrB,oBAAoB,GACpB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,gBAAgB,GAChB,0BAA0B,GAC1B,sBAAsB,GACtB,sBAAsB,GACtB,uBAAuB,GACvB,4BAA4B,GAC5B,0BAA0B,GAC1B,oBAAoB,GACpB,qBAAqB,GACrB,iBAAiB,GACjB,mBAAmB,GACnB,uBAAuB,GACvB,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,CAAC;AAExB,oBAAY,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,2BAA2B,YAAY,cAAc,GAAG,SAAS,WA6H7E,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.mocks.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,uBAAuB,CAAC;AAE1E,eAAO,MAAM,YAAY;;;;;GAmExB,CAAC;AAEF,eAAO,MAAM,eAAe;;;GAa3B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;GAa9B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,4BAA4B,EA4B3D,CAAC;AAEF,aAAK,iBAAiB,GAClB,gBAAgB,GAChB,uBAAuB,GACvB,cAAc,GACd,qBAAqB,GACrB,oBAAoB,GACpB,sBAAsB,GACtB,mBAAmB,GACnB,qBAAqB,GACrB,gBAAgB,GAChB,0BAA0B,GAC1B,sBAAsB,GACtB,sBAAsB,GACtB,uBAAuB,GACvB,4BAA4B,GAC5B,0BAA0B,GAC1B,oBAAoB,GACpB,qBAAqB,GACrB,iBAAiB,GACjB,mBAAmB,GACnB,uBAAuB,GACvB,wBAAwB,GACxB,yBAAyB,GACzB,mBAAmB,CAAC;AAExB,oBAAY,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC;AAExE,eAAO,MAAM,2BAA2B,YAAY,cAAc,GAAG,SAAS,WA6H7E,CAAC"}

package/lib/cs/CallControlPanel/CallControlPanel.mocks.js CHANGED Viewed

@@ -80,6 +80,20 @@ export const transferReasons = [
         label: 'On break'
     }
 ];
+export const interactionOptions = [
+    {
+        id: '4545455',
+        label: 'Gregory Rhodes'
+    },
+    {
+        id: '123243434',
+        label: 'Ella Bridges'
+    },
+    {
+        id: '4545455',
+        label: 'Carrie Hanson'
+    }
+];
 export const userStatusOptions = [
     {
         id: 'available',

package/lib/cs/CallControlPanel/CallControlPanel.mocks.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.mocks.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nexport const contactsList = [\n {\n phoneNumber: '343445656',\n primary: 'Gregory Rhodes',\n secondary: 'Supervisor',\n favorite: true\n },\n {\n phoneNumber: '123243434',\n primary: 'Ella Bridges',\n secondary: 'Representative',\n favorite: true\n },\n {\n phoneNumber: '4545455',\n primary: 'Carrie Hanson',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '48436346',\n primary: 'Chris Wallas',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '34455656',\n primary: 'Craig Marsh',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '45565678',\n primary: 'Derrick Sutton',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '54367578',\n primary: 'Lizzie Johnson',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '65345789',\n primary: 'Ivan Fuller',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '764455478',\n primary: 'Sam Smith',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '876464003',\n primary: 'Joe Doe',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '426464003',\n primary: 'Jane Doe',\n secondary: 'Representative',\n favorite: false\n }\n];\n\nexport const transferReasons = [\n {\n id: 'offline',\n label: 'Offline'\n },\n {\n id: 'busy',\n label: 'Busy'\n },\n {\n id: 'on_break',\n label: 'On break'\n }\n];\n\nexport const userStatusOptions: UserAvailabilityStatusOption[] = [\n {\n id: 'available',\n label: 'Available',\n status: 'available'\n },\n {\n id: 'not_available',\n label: 'Not available',\n status: 'busy',\n disabled: true\n },\n {\n id: 'after_call_work',\n label: 'After call work',\n status: 'after_work'\n },\n {\n id: 'reconnecting',\n label: 'Reconnecting',\n status: 'unavailable',\n disabled: true\n },\n {\n id: 'offline',\n label: 'Offline',\n status: 'logout'\n }\n];\n\ntype StyleVariableName =\n \| '--app-bg-color'\n \| '--header-border-color'\n \| '--text-color'\n \| '--msg-border-radius'\n \| '--msg-you-bg-color'\n \| '--msg-you-text-color'\n \| '--msg-me-bg-color'\n \| '--msg-me-text-color'\n \| '--input-height'\n \| '--input-background-color'\n \| '--input-border-color'\n \| '--input-border-width'\n \| '--input-border-radius'\n \| '--input-focus-border-color'\n \| '--input-focus-box-shadow'\n \| '--input-text-color'\n \| '--button-text-color'\n \| '--button-height'\n \| '--button-bg-color'\n \| '--button-border-color'\n \| '--button-border-radius'\n \| '--button-hover-bg-color'\n \| '--footer-bg-color';\n\nexport type ExternalStyles = Partial<Record<StyleVariableName, string>>;\n\nexport const createExternalIframeContent = (styles: ExternalStyles \| undefined = {}) => `\n<!DOCTYPE html>\n<html>\n <head>\n <style>\n :root {\n ${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value};`)\n .join('\\n')}\n }\n </style>\n <style>\n html {\n height: 100vh;\n background-color: var(--app-bg-color, #F5F0EF);\n color: var(--text-color, black);\n }\n body {\n max-width: 100vw;\n height: 100%;\n display: flex;\n flex-direction: column;\n margin: 0;\n }\n header {\n height: 3rem;\n font-size: 10px;\n border-bottom: 2px solid var(--header-border-color, black);\n padding: 0 8px;\n }\n main {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n max-height: calc(100% - 3rem);\n }\n ul {\n flex-grow: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n list-style: none;\n padding-inline: 10px;\n gap: 6px;\n margin-block-end: 0;\n }\n li {\n padding: 8px;\n }\n li.you {\n align-self: start;\n background-color: var(--msg-you-bg-color, lightblue);\n color: var(--msg-you-text-color, black);\n border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.you:before {\n content: \"\\\\00B7\";\n margin-inline-end: 4px;\n }\n li.me {\n align-self: end;\n background-color: var(--msg-me-bg-color, pink);\n color: var(--msg-me-text-color, black);\n border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.me:after {\n content: \"\\\\00B7\";\n margin-inline-start: 4px;\n }\n div {\n display: flex;\n justify-content: stretch;\n align-items: center;\n gap: 8px;\n padding: 8px;\n background-color: var(--footer-bg-color, transparent);\n }\n input {\n outline: none;\n color: var(--input-text-color, black);\n height: var(--input-height, 2rem);\n background-color: var(--input-background-color, white);\n border-color: var(--input-border-color, black);\n border-width: var(--input-border-width, 1px);\n border-radius: var(--input-border-radius, 4px);\n flex-grow: 1;\n }\n input:focus {\n border-color: var(--input-focus-border-color, lightblue);\n box-shadow: var(--input-focus-box-shadow, none);\n }\n button {\n padding: 0 8px;\n color: var(--button-text-color, black);\n height: var(--button-height, 2rem);\n background-color: var(--button-bg-color, white);\n border: 1px solid var(--button-border-color, blue);\n border-radius: var(--button-border-radius, 4px);\n }\n button:hover {\n background-color: var(--button-hover-bg-color, gray);\n }\n </style>\n </head>\n <body>\n <header><h1>Customer: Julian Brewster</h1></header>\n <main>\n <ul>\n <li class=\"you\">Hey!</li>\n <li class=\"you\">I want to check my account balance.</li>\n <li class=\"me\">Hello Mr Brewster.</li>\n <li class=\"me\">You have two accounts open. Which one do you want to check?</li>\n <li class=\"you\">The default one.</li>\n <li class=\"me\">Your account balance is $12345.45.</li>\n <li class=\"me\">Is there anything I can help you, Mr Brewster?</li>\n <li class=\"you\">I want to close the other account.</li>\n <li class=\"me\">Alright. What account the money should be transferred to?</li>\n </ul>\n <div>\n <input name=\"message\" autocomplete=\"off\" />\n <button>Send</button>\n </div>\n </main>\n </body>\n</html>\n`;\n"]}
1	+ {"version":3,"file":"CallControlPanel.mocks.js","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.mocks.ts"],"names":[],"mappings":"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","sourcesContent":["import type { UserAvailabilityStatusOption } from '@pega/cosmos-react-cs';\n\nexport const contactsList = [\n {\n phoneNumber: '343445656',\n primary: 'Gregory Rhodes',\n secondary: 'Supervisor',\n favorite: true\n },\n {\n phoneNumber: '123243434',\n primary: 'Ella Bridges',\n secondary: 'Representative',\n favorite: true\n },\n {\n phoneNumber: '4545455',\n primary: 'Carrie Hanson',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '48436346',\n primary: 'Chris Wallas',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '34455656',\n primary: 'Craig Marsh',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '45565678',\n primary: 'Derrick Sutton',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '54367578',\n primary: 'Lizzie Johnson',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '65345789',\n primary: 'Ivan Fuller',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '764455478',\n primary: 'Sam Smith',\n secondary: 'Supervisor',\n favorite: false\n },\n {\n phoneNumber: '876464003',\n primary: 'Joe Doe',\n secondary: 'Representative',\n favorite: false\n },\n {\n phoneNumber: '426464003',\n primary: 'Jane Doe',\n secondary: 'Representative',\n favorite: false\n }\n];\n\nexport const transferReasons = [\n {\n id: 'offline',\n label: 'Offline'\n },\n {\n id: 'busy',\n label: 'Busy'\n },\n {\n id: 'on_break',\n label: 'On break'\n }\n];\n\nexport const interactionOptions = [\n {\n id: '4545455',\n label: 'Gregory Rhodes'\n },\n {\n id: '123243434',\n label: 'Ella Bridges'\n },\n {\n id: '4545455',\n label: 'Carrie Hanson'\n }\n];\n\nexport const userStatusOptions: UserAvailabilityStatusOption[] = [\n {\n id: 'available',\n label: 'Available',\n status: 'available'\n },\n {\n id: 'not_available',\n label: 'Not available',\n status: 'busy',\n disabled: true\n },\n {\n id: 'after_call_work',\n label: 'After call work',\n status: 'after_work'\n },\n {\n id: 'reconnecting',\n label: 'Reconnecting',\n status: 'unavailable',\n disabled: true\n },\n {\n id: 'offline',\n label: 'Offline',\n status: 'logout'\n }\n];\n\ntype StyleVariableName =\n \| '--app-bg-color'\n \| '--header-border-color'\n \| '--text-color'\n \| '--msg-border-radius'\n \| '--msg-you-bg-color'\n \| '--msg-you-text-color'\n \| '--msg-me-bg-color'\n \| '--msg-me-text-color'\n \| '--input-height'\n \| '--input-background-color'\n \| '--input-border-color'\n \| '--input-border-width'\n \| '--input-border-radius'\n \| '--input-focus-border-color'\n \| '--input-focus-box-shadow'\n \| '--input-text-color'\n \| '--button-text-color'\n \| '--button-height'\n \| '--button-bg-color'\n \| '--button-border-color'\n \| '--button-border-radius'\n \| '--button-hover-bg-color'\n \| '--footer-bg-color';\n\nexport type ExternalStyles = Partial<Record<StyleVariableName, string>>;\n\nexport const createExternalIframeContent = (styles: ExternalStyles \| undefined = {}) => `\n<!DOCTYPE html>\n<html>\n <head>\n <style>\n :root {\n ${Object.entries(styles)\n .map(([key, value]) => `${key}: ${value};`)\n .join('\\n')}\n }\n </style>\n <style>\n html {\n height: 100vh;\n background-color: var(--app-bg-color, #F5F0EF);\n color: var(--text-color, black);\n }\n body {\n max-width: 100vw;\n height: 100%;\n display: flex;\n flex-direction: column;\n margin: 0;\n }\n header {\n height: 3rem;\n font-size: 10px;\n border-bottom: 2px solid var(--header-border-color, black);\n padding: 0 8px;\n }\n main {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n max-height: calc(100% - 3rem);\n }\n ul {\n flex-grow: 1;\n overflow: auto;\n display: flex;\n flex-direction: column;\n list-style: none;\n padding-inline: 10px;\n gap: 6px;\n margin-block-end: 0;\n }\n li {\n padding: 8px;\n }\n li.you {\n align-self: start;\n background-color: var(--msg-you-bg-color, lightblue);\n color: var(--msg-you-text-color, black);\n border-radius: 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.you:before {\n content: \"\\\\00B7\";\n margin-inline-end: 4px;\n }\n li.me {\n align-self: end;\n background-color: var(--msg-me-bg-color, pink);\n color: var(--msg-me-text-color, black);\n border-radius: var(--msg-border-radius, 4px) 0 var(--msg-border-radius, 4px) var(--msg-border-radius, 4px);\n }\n li.me:after {\n content: \"\\\\00B7\";\n margin-inline-start: 4px;\n }\n div {\n display: flex;\n justify-content: stretch;\n align-items: center;\n gap: 8px;\n padding: 8px;\n background-color: var(--footer-bg-color, transparent);\n }\n input {\n outline: none;\n color: var(--input-text-color, black);\n height: var(--input-height, 2rem);\n background-color: var(--input-background-color, white);\n border-color: var(--input-border-color, black);\n border-width: var(--input-border-width, 1px);\n border-radius: var(--input-border-radius, 4px);\n flex-grow: 1;\n }\n input:focus {\n border-color: var(--input-focus-border-color, lightblue);\n box-shadow: var(--input-focus-box-shadow, none);\n }\n button {\n padding: 0 8px;\n color: var(--button-text-color, black);\n height: var(--button-height, 2rem);\n background-color: var(--button-bg-color, white);\n border: 1px solid var(--button-border-color, blue);\n border-radius: var(--button-border-radius, 4px);\n }\n button:hover {\n background-color: var(--button-hover-bg-color, gray);\n }\n </style>\n </head>\n <body>\n <header><h1>Customer: Julian Brewster</h1></header>\n <main>\n <ul>\n <li class=\"you\">Hey!</li>\n <li class=\"you\">I want to check my account balance.</li>\n <li class=\"me\">Hello Mr Brewster.</li>\n <li class=\"me\">You have two accounts open. Which one do you want to check?</li>\n <li class=\"you\">The default one.</li>\n <li class=\"me\">Your account balance is $12345.45.</li>\n <li class=\"me\">Is there anything I can help you, Mr Brewster?</li>\n <li class=\"you\">I want to close the other account.</li>\n <li class=\"me\">Alright. What account the money should be transferred to?</li>\n </ul>\n <div>\n <input name=\"message\" autocomplete=\"off\" />\n <button>Send</button>\n </div>\n </main>\n </body>\n</html>\n`;\n"]}

package/lib/cs/CallControlPanel/CallControlPanel.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,~~EAML~~,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;~~AAU~~/B,wBAWU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,~~CAiNlE~~,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,~~CAmD5F~~,CAAC"}
1	+ {"version":3,"file":"CallControlPanel.stories.d.ts","sourceRoot":"","sources":["../../../src/cs/CallControlPanel/CallControlPanel.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAI/C,OAAO,EAOL,4BAA4B,EAC5B,qBAAqB,EACtB,MAAM,uBAAuB,CAAC;;AAW/B,wBAWU;AAEV,UAAU,0BAA0B;IAClC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,MAAM,CAAC,EAAE,4BAA4B,CAAC,IAAI,CAAC,CAAC;IAC5C,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,4BAA4B,KAAK,IAAI,CAAC;IACnE,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAC;CAC5C;AAED,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,0BAA0B,CAyQlE,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,0BAA0B,GAAG;IAAE,eAAe,EAAE,OAAO,CAAA;CAAE,CA0D5F,CAAC"}