@pega/custom-dx-components 24.1.11 → 24.2.10

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, fieldMetadata, stateProps } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: Number(configProps.value),

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/event-utils.ts.mustache

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/index.tsx.mustache

@@ -1,4 +1,3 @@
-
 import { useState, useEffect } from 'react';
 import {
   CurrencyInput as CosmosCurrency,
@@ -12,6 +11,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -266,7 +266,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       onBlur={(enteredValue) => {
         const parsedValue = enteredValue !== '' ? Number(enteredValue) : enteredValue;
         if (!readOnly && (!value || value !== parsedValue)) {
-           // @ts-ignore
           handleEvent(actions, 'changeNblur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/src/tasks/create/templates/Constellation/Field/Decimal-Currency/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Currency Sample',
@@ -8,7 +7,6 @@ export const configProps = {
   allowDecimals: true,
   showGroupSeparators: true,
   alwaysShowISOCode: true,
-  placeholder: 'Currency Placeholder',
   helperText: 'Currency Helper Text',
   testId: 'currency-12345678',
   hasSuggestions: false,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/config.json.mustache

@@ -88,6 +88,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/demo.stories.tsx.mustache

@@ -1,6 +1,5 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { configProps, stateProps, fieldMetadata } from './mock';
@@ -16,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/event-utils.ts.mustache

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from './event-utils';
@@ -93,9 +94,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     }
   }, [validatemessage, hasSuggestions, status]);
 
-  let numberOfDecimals = parseInt(decimalPrecision, 10);
+  let numberOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(numberOfDecimals)) {
-    // @ts-ignore
     numberOfDecimals = decimalPrecision === '' ? undefined : 2;
   }
 
@@ -246,7 +246,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         }
         setPercentageValue(enteredValue);
         if (value !== enteredValue) {
-          // @ts-ignore
           handleEvent(actions, 'change', propName, enteredValue);
           hasValueChange.current = true;
         }
@@ -254,7 +253,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       onBlur={() => {
         const parsedValue = percentageValue !== '' ? Number(percentageValue) : '';
         if (!value || hasValueChange.current) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, parsedValue);
           if (hasSuggestions) {
             pConn.ignoreSuggestion("");

package/src/tasks/create/templates/Constellation/Field/Decimal-Percentage/mock.ts.mustache

@@ -1,5 +1,3 @@
-
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Percentage Sample',
@@ -14,7 +12,8 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: ''
 };
 
 export const stateProps = {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/config.json.mustache

@@ -59,6 +59,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/demo.stories.tsx.mustache

@@ -1,10 +1,9 @@
 
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {{COMPONENT_CLASS_NAME}} from './index';
-import { stateProps, configProps } from './mock';
+import { configProps } from './mock';
 
 const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
   title: '{{COMPONENT_CLASS_NAME}}',
@@ -36,34 +35,34 @@ const statelistData = {
   ]
 };
 
-window.PCore.getDataPageUtils = () => {
-  return {
-    getData: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    },
-    getDataAsync: () => {
-      return new Promise(resolve => {
-        resolve(statelistData);
-      });
-    }
-  };
-};
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+  window.PCore.getDataPageUtils = () => {
+    return {
+      getData: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      },
+      getDataAsync: () => {
+        return new Promise(resolve => {
+          resolve(statelistData);
+        });
+      }
+    };
+  };
 
   const props = {
     countryCode: configProps.countryCode,
     getPConnect: () => {
       return {
-        getValue: value => {
+        getValue: (value: any) => {
           return value;
         },
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: value => {
+        getLocalizedValue: (value: any) => {
           return value;
         },
         getActionsApi: () => {

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/index.tsx.mustache

@@ -10,6 +10,7 @@ import {
   URLDisplay
 } from '@pega/cosmos-react-core';
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // IMPORTANT
 // To use Icons, need to individually import the icon file form @pega/cosmos-react-core (see path below)
@@ -120,7 +121,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     if (showTable) {
       PCore.getDataPageUtils()
         .getDataAsync(dataViewName, context, params, null, null)
-        // @ts-ignore
         .then((response: any) => {
           setIsLoading(false);
           // table requires an index or will get setExtraStackFrame error

package/src/tasks/create/templates/Constellation/Field/Icon-Button-URL/mock.ts.mustache

@@ -1,5 +1,4 @@
 
-// @ts-nocheck
 export const configProps = {
   countryCode: 'USA'
 };

package/src/tasks/create/templates/Constellation/Field/Integer/config.json.mustache

@@ -342,6 +342,9 @@
     }
   ],
   "defaultConfig": {
-    "label": "@L $this.label"
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Integer/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Integer/demo.stories.tsx.mustache

@@ -1,5 +1,4 @@
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { stateProps, configProps, fieldMetadata } from './mock';
@@ -15,7 +14,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const props = {
     value: configProps.value,

package/src/tasks/create/templates/Constellation/Field/Integer/event-utils.ts.mustache

@@ -1,4 +1,4 @@
-const handleEvent = (actions: any, eventType: string, propName: string, value: string) => {
+const handleEvent = (actions: any, eventType: string, propName: string, value: string | number) => {
   switch (eventType) {
     case 'change':
       actions.updateFieldValue(propName, value);

package/src/tasks/create/templates/Constellation/Field/Integer/index.tsx.mustache

@@ -3,6 +3,7 @@ import { NumberInput, NumberDisplay, Slider, FieldValueList, CurrencyDisplay, Te
 
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -111,21 +112,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
 
   useEffect(() => {
     if (displayAs === 'slider' && value === '') {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, sliderDefaultValue);
     }
   }, [actions, displayAs, propName, sliderDefaultValue, value]);
 
   const { decimalPrecision, currencyDecimalPrecision = 'auto', currencyISOCode = 'USD' } = props;
-  let noOfDecimals = parseInt(decimalPrecision, 10);
-  // @ts-ignore
+  let noOfDecimals : number | undefined = parseInt(decimalPrecision, 10);
   if (Number.isNaN(noOfDecimals)) noOfDecimals = undefined;
   let noOfFractionDigits = currencyDecimalPrecision === 'auto' ? undefined : parseInt(currencyDecimalPrecision, 10);
   let unit;
-  let unitPlacement;
 
-  // @ts-ignore
-  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode as string)) {
     switch (formatter) {
       case 'Decimal': {
         break;
@@ -133,7 +130,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       case 'Percentage': {
         showGroupSeparators = false;
         unit = '%';
-        unitPlacement = 'after';
         break;
       }
       case 'Decimal-Auto': {
@@ -179,7 +175,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
             notation
           }}
           unit={unit}
-          unitPlacement={unitPlacement}
         />
       );
 
@@ -232,13 +227,11 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     setIntegerValue(enteredValue);
     // const parsedValue = integerValue !== '' ? Number(integerValue) : '';
     if (value !== (enteredValue !== '' ? Number(enteredValue) : '')) {
-      // @ts-ignore
       handleEvent(actions, 'change', propName, enteredValue !== '' ? Number(enteredValue) : '');
       hasValueChange.current = true;
     }
     // In case of stepper variation there is no blur event as component is never focussed unless forced. Need to update redux on change.
     if (displayAs === 'stepper') {
-      // @ts-ignore
       handleEvent(actions, 'changeNblur', propName, enteredValue !== '' ? Number(enteredValue) : '');
     }
   }
@@ -270,7 +263,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       ticks={showTicks && { [min]: `${min}`, [max]: `${max}` }}
       onChange={(selectedValue) => {
         onChangeHandler(selectedValue.toString());
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, selectedValue);
       }}
     />
@@ -297,7 +289,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       }}
       onBlur={() => {
         if (!readOnly && (hasValueChange.current || !value)) {
-          // @ts-ignore
           handleEvent(actions, 'blur', propName, integerValue !== '' ? Number(integerValue) : '');
           if (hasSuggestions) {
             pConn.ignoreSuggestion('');

package/src/tasks/create/templates/Constellation/Field/Integer/mock.ts.mustache

@@ -1,4 +1,3 @@
-// @ts-nocheck
 export const configProps = {
   value: '',
   label: 'Integer Sample',
@@ -12,7 +11,9 @@ export const configProps = {
   required: false,
   disabled: false,
   status: '',
-  validatemessage: ''
+  validatemessage: '',
+  placeholder: '',
+  variant: ''
 };
 
 export const stateProps = {

package/src/tasks/create/templates/Constellation/Field/Picklist/config.json.mustache

@@ -109,6 +109,9 @@
     "label": "@L $this.label",
     "placeholder": "@L Select...",
     "listType": "associated",
-    "datasource": "@ASSOCIATED .$this.name"
+    "datasource": "@ASSOCIATED .$this.name",
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Picklist/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
 
@@ -33,10 +31,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getStateProps: () => {
           return stateProps;
         },
-        getLocalizedValue: val => {
+        getLocalizedValue: (val: any) => {
           return val;
         },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
           return `${localeClass}!${localeContext}!${localeName}`;
         },
         getCaseInfo: () => {
@@ -51,7 +49,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}

package/src/tasks/create/templates/Constellation/Field/Picklist/index.tsx.mustache

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-// @ts-nocheck
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, type Key } from 'react';
 import { Select, Option, FieldValueList, Text, withConfiguration } from '@pega/cosmos-react-core';
 
 import type { PConnFieldProps } from './PConnProps';
+import './create-nonce';
 
 // includes in bundle
 import handleEvent from "./event-utils";
@@ -27,7 +27,7 @@ interface {{COMPONENT_CLASS_NAME}}Props extends PConnFieldProps {
   alwaysShowISOCode: boolean;
   isoCodeSelection: string;
   additionalProps: any;
-  datasource:Array<any>;
+  datasource:any;
   listType: string;
   fieldMetadata: any;
   onRecordChange: Function;
@@ -117,7 +117,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
     label,
     hideLabel = false,
     placeholder,
-    datasource = [],
+    datasource = {},
     listType,
     validatemessage,
     testId,
@@ -168,11 +168,9 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   const configProps = pConnect.getConfigProps();
   const items: Array<any> = [];
   const isDatapage = listType === 'datapage';
-  // @ts-ignore
   let listSourceItems = isDatapage ? configProps.listOutput : datasource;
 
   if (isDatapage && typeof datasource === 'object' && !Array.isArray(listSourceItems)) {
-    // @ts-ignore
     listSourceItems = datasource.source ? datasource.source : [];
   }
 
@@ -192,8 +190,8 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
   // Loop through all of our list source items that make up the values of the dropdown
 
   let selectedLabel = '';
-  // @ts-ignore
-  (listSourceItems || []).forEach((item) => {
+  (listSourceItems || []).forEach(
+    (item: { key: Key | null | undefined; text: string; value: string }) => {
     selectedLabel =
       value !== undefined &&
       value !== null &&
@@ -203,18 +201,17 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
         ? item.text || item.value
         : selectedLabel;
     items.push(
+      // @ts-ignore
       <Option key={item.key} value={item.key}>
         {isDatapage
           ? pConnect.getLocalizedValue(
               item.text,
               localePath,
-              // @ts-ignore
               pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
             )
           : pConnect.getLocalizedValue(
               item.value,
               localePath,
-              // @ts-ignore
               pConnect.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName)
             )}
       </Option>
@@ -317,7 +314,6 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
       required={required}
       readOnly={readOnly}
       onChange={(event) => {
-        // @ts-ignore
         handleEvent(actions, 'changeNblur', propName, event.target.value);
         if (hasSuggestions) {
           pConnect.ignoreSuggestion('');
@@ -327,9 +323,7 @@ function {{COMPONENT_CLASS_NAME}}(props: {{COMPONENT_CLASS_NAME}}Props) {
           onRecordChange(event);
         }
       }}
-      // @ts-ignore
-      onBlur={(event) => {
-        // @ts-ignore
+      onBlur={(event: any) => {
         pConnect.getValidationApi().validate(event.target.value);
       }}
       onResolveSuggestion={onResolveSuggestionHandler}

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/config.json.mustache

@@ -110,6 +110,9 @@
     "placeholder": "@L Select...",
     "listType": "associated",
     "datasource": "@ASSOCIATED .$this.name",
-    "deferDatasource": true
+    "deferDatasource": true,
+    "detailFVLItem": true,
+    "isFormWidth" : false,
+    "isContainerWidth" : false
   }
 }

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/create-nonce.ts.mustache

@@ -0,0 +1,6 @@
+/* eslint-disable camelcase */
+// @ts-ignore
+if (window?.__webpack_nonce__) {
+  // @ts-ignore
+  __webpack_nonce__ = window.__webpack_nonce__;
+}

package/src/tasks/create/templates/Constellation/Field/Picklist-Autocomplete/demo.stories.tsx.mustache

@@ -1,6 +1,4 @@
-
 /* eslint-disable react/jsx-no-useless-fragment */
-// @ts-nocheck
 import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
@@ -17,7 +15,7 @@ const meta: Meta<typeof {{COMPONENT_CLASS_NAME}}> = {
 export default meta;
 type Story = StoryObj<typeof {{COMPONENT_CLASS_NAME}}>;
 
-export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
+export const Base{{COMPONENT_CLASS_NAME}}: Story = (args: any) => {
 
   const [value, setValue] = useState(configProps.value);
   const datasourceMetadata = fieldMetadata;
@@ -40,10 +38,10 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         getContextName: () => {
           return 'app/primary_1';
         },
-        getLocalizedValue: val => {
+        getLocalizedValue: (val: any) => {
           return val;
         },
-        getLocaleRuleNameFromKeys: (localeClass, localeContext, localeName) => {
+        getLocaleRuleNameFromKeys: (localeClass: string, localeContext: string, localeName: string) => {
           return `${localeClass}!${localeContext}!${localeName}`;
         },
         getCaseInfo: () => {
@@ -58,7 +56,7 @@ export const Base{{COMPONENT_CLASS_NAME}}: Story = args => {
         },
         getActionsApi: () => {
           return {
-            updateFieldValue: (propName, theValue) => {
+            updateFieldValue: (propName: string, theValue: any) => {
               setValue(theValue);
             },
             triggerFieldChange: () => {/* nothing */}