@pega/dx-component-builder-sdk 24.2.14 → 25.1.10

package/tests/assets/sdk-r/components/create/override-sdk/field/DateTime/DateTime.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import dayjs, { Dayjs } from 'dayjs';
-
+import DateFormatter from '@pega/react-sdk-components/lib/components/helpers/formatters/Date';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { dateFormatInfoDefault, getDateFormatInfo } from '@pega/react-sdk-components/lib/components/helpers/date-format-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface DateTimeProps extends PConnFieldProps {
   // If any, enter additional props that only exist on DateTime here
@@ -19,7 +19,10 @@ export default function DateTime(props: DateTimeProps) {
 
   const { getPConnect, label, required, disabled, value = '', validatemessage, status, readOnly, testId, helperText, displayMode, hideLabel } = props;
 
-  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(value) : null);
+  const environmentInfo = PCore.getEnvironmentInfo();
+  const timezone = environmentInfo && environmentInfo.getTimeZone();
+
+  const [dateValue, setDateValue] = useState<Dayjs | null>(value ? dayjs(DateFormatter.convertToTimezone(value, { timezone })) : null);
 
   const pConn = getPConnect();
   const actions = pConn.getActionsApi();
@@ -34,6 +37,10 @@ export default function DateTime(props: DateTimeProps) {
   dateFormatInfo.dateFormatStringLC = theDateFormat.dateFormatStringLC;
   dateFormatInfo.dateFormatMask = theDateFormat.dateFormatMask;
 
+  useEffect(() => {
+    setDateValue(dayjs(DateFormatter.convertToTimezone(value, { timezone })));
+  }, [value]);
+
   if (displayMode === 'DISPLAY_ONLY') {
     const formattedDateTime = format(props.value, 'datetime', {
       format: `${dateFormatInfo.dateFormatString} hh:mm a`
@@ -53,15 +60,12 @@ export default function DateTime(props: DateTimeProps) {
     return <TextInput {...props} value={formattedDateTime} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   const handleChange = date => {
-    setDateValue(date);
-    const changeValue = date && date.isValid() ? date.toISOString() : null;
+    const timeZoneDateTime = (dayjs as any).tz(date.format('YYYY-MM-DDTHH:mm:ss'), timezone);
+    const changeValue = timeZoneDateTime && timeZoneDateTime.isValid() ? timeZoneDateTime.toISOString() : '';
+    setDateValue(timeZoneDateTime);
     handleEvent(actions, 'changeNblur', propName, changeValue);
   };
 
@@ -81,7 +85,6 @@ export default function DateTime(props: DateTimeProps) {
       label={label}
       value={dateValue}
       onChange={handleChange}
-      data-test-id={testId}
       slotProps={{
         textField: {
           variant: 'outlined',
@@ -90,7 +93,7 @@ export default function DateTime(props: DateTimeProps) {
           error: status === 'error',
           helperText: helperTextToDisplay,
           size: 'small',
-          InputProps: { ...testProp }
+          InputProps: { ...testProps }
         }
       }}
     />

package/tests/assets/sdk-r/components/create/override-sdk/field/Decimal/Decimal.tsx

@@ -1,11 +1,11 @@
 import { NumericFormat } from 'react-number-format';
 import { TextField } from '@mui/material';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getCurrencyCharacters, getCurrencyOptions } from '@pega/react-sdk-components/lib/components/field/Currency/currency-utils';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { format } from '@pega/react-sdk-components/lib/components/helpers/formatters';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 /* Using react-number-format component here, since it allows formatting decimal values,
 as per the locale.
@@ -58,6 +58,10 @@ export default function Decimal(props: DecimalProps) {
 
   const theCurrencyOptions = getCurrencyOptions(currencyISOCode);
 
+  useEffect(() => {
+    setValues(value.toString());
+  }, [value]);
+
   let readOnlyProp = {}; // Note: empty if NOT ReadOnly
 
   if (readOnly) {
@@ -68,7 +72,7 @@ export default function Decimal(props: DecimalProps) {
   if (formatter === 'Currency') {
     formattedValue = format(value, formatter.toLowerCase(), theCurrencyOptions);
   } else {
-    formattedValue = format(value, pConn.getComponentName().toLowerCase(), theCurrencyOptions);
+    formattedValue = format(value, pConn.getComponentName()?.toLowerCase(), theCurrencyOptions);
   }
 
   if (displayMode === 'DISPLAY_ONLY') {
@@ -79,9 +83,7 @@ export default function Decimal(props: DecimalProps) {
     return <FieldValueList name={hideLabel ? '' : label} value={formattedValue} variant='stacked' />;
   }
 
-  const testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function decimalOnBlur() {
     handleEvent(actions, 'changeNblur', propName, values);
@@ -109,10 +111,11 @@ export default function Decimal(props: DecimalProps) {
       }}
       onBlur={!readOnly ? decimalOnBlur : undefined}
       prefix={readOnly && formatter === 'Currency' ? theCurrSym : ''}
+      suffix={readOnly && formatter === 'Percentage' ? '%' : ''}
       decimalSeparator={theCurrDec}
       thousandSeparator={showGroupSeparators ? theCurrSep : ''}
       decimalScale={readOnly && formatter === 'Currency' ? undefined : decimalPrecision}
-      InputProps={{ ...readOnlyProp, inputProps: { ...testProp } }}
+      slotProps={{ input: { ...readOnlyProp, inputProps: { ...testProps } } }}
       customInput={TextField}
     />
   );

package/tests/assets/sdk-r/components/create/override-sdk/field/Dropdown/Dropdown.tsx

@@ -6,7 +6,7 @@ import Utils from '@pega/react-sdk-components/lib/components/helpers/utils';
 import { getDataPage } from '@pega/react-sdk-components/lib/components/helpers/data_page';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IOption {
   key: string;
@@ -137,7 +137,7 @@ export default function Dropdown(props: DropdownProps) {
   }, [theDatasource]);
 
   useEffect(() => {
-    if (!displayMode && listType !== 'associated' && typeof datasource === 'string') {
+    if (listType !== 'associated' && typeof datasource === 'string') {
       getDataPage(datasource, parameters, context).then((results: any) => {
         const optionsData: any[] = [];
         const displayColumn = getDisplayFieldsMetaData(columns);
@@ -165,34 +165,38 @@ export default function Dropdown(props: DropdownProps) {
 
   let readOnlyProp = {};
 
-  if (displayMode === 'DISPLAY_ONLY') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-      />
-    );
-  }
+  const displayFn = (displayM, val) => {
+    if (displayM === 'DISPLAY_ONLY') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+        />
+      );
+    }
+
+    if (displayM === 'STACKED_LARGE_VAL') {
+      return (
+        <FieldValueList
+          name={hideLabel ? '' : label}
+          value={thePConn.getLocalizedValue(val, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
+          variant='stacked'
+        />
+      );
+    }
 
-  if (displayMode === 'STACKED_LARGE_VAL') {
-    return (
-      <FieldValueList
-        name={hideLabel ? '' : label}
-        // @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'
-        value={thePConn.getLocalizedValue(value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
-        variant='stacked'
-      />
-    );
+    return null;
+  };
+
+  if (displayMode) {
+    return displayFn(displayMode, options.find(option => option.key === value)?.value || value);
   }
 
   if (readOnly) {
     readOnlyProp = { readOnly: true };
   }
 
-  let testProp = {};
-
-  testProp = {
+  const testProps: any = {
     'data-test-id': testId
   };
 
@@ -220,11 +224,12 @@ export default function Dropdown(props: DropdownProps) {
       label={label}
       value={value === '' && !readOnly ? placeholder : value}
       select
-      InputProps={{ ...readOnlyProp, ...testProp }}
+      slotProps={{
+        input: { ...readOnlyProp, ...testProps }
+      }}
     >
       {options.map((option: any) => (
         <MenuItem key={option.key} value={option.key}>
-          {/* @ts-ignore - Property 'getLocaleRuleNameFromKeys' is private and only accessible within class 'C11nEnv'  */}
           {thePConn.getLocalizedValue(option.value, localePath, thePConn.getLocaleRuleNameFromKeys(localeClass, localeContext, localeName))}
         </MenuItem>
       ))}

package/tests/assets/sdk-r/components/create/override-sdk/field/Email/Email.tsx

@@ -3,7 +3,7 @@ import { InputAdornment, TextField } from '@mui/material';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 
 interface EmailProps extends PConnFieldProps {
@@ -55,11 +55,7 @@ export default function Email(props: EmailProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function handleChange(event) {
     // update internal value
@@ -85,13 +81,15 @@ export default function Email(props: EmailProps) {
       label={label}
       value={inputValue}
       type='email'
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <MailOutlineIcon />
-          </InputAdornment>
-        ),
-        inputProps: { ...testProp }
+      slotProps={{
+        input: {
+          startAdornment: (
+            <InputAdornment position='start'>
+              <MailOutlineIcon />
+            </InputAdornment>
+          ),
+          inputProps: { ...testProps }
+        }
       }}
     />
   );

package/tests/assets/sdk-r/components/create/override-sdk/field/Group/Group.tsx

@@ -1,7 +1,7 @@
-import { ReactElement, useMemo } from 'react';
-import { Grid } from '@mui/material';
-import FieldGroup from '@pega/react-sdk-components/lib/components/designSystemExtension/FieldGroup';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import { type ReactElement, useMemo } from 'react';
+import Grid2 from '@mui/material/Grid2';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface GroupProps extends PConnFieldProps {
   children: ReactElement[];
@@ -13,19 +13,21 @@ interface GroupProps extends PConnFieldProps {
 }
 
 export default function Group(props: GroupProps) {
+  const FieldGroup = getComponentFromMap('FieldGroup');
+
   const { children, heading, showHeading, instructions, collapsible, displayMode, type } = props;
 
   const isReadOnly = displayMode === 'DISPLAY_ONLY';
 
   const content = useMemo(() => {
     return (
-      <Grid container spacing={2}>
+      <Grid2 container spacing={2}>
         {children?.map(child => (
-          <Grid item xs={12} key={child.key}>
+          <Grid2 size={{ xs: 12 }} key={child.key}>
             {child}
-          </Grid>
+          </Grid2>
         ))}
-      </Grid>
+      </Grid2>
     );
   }, [children, type, isReadOnly]);
 

package/tests/assets/sdk-r/components/create/override-sdk/field/Integer/Integer.tsx

@@ -3,7 +3,7 @@ import { TextField } from '@mui/material';
 
 import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
 import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
-import { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
 
 interface IntegerProps extends PConnFieldProps {
   // If any, enter additional props that only exist on Integer here
@@ -54,11 +54,7 @@ export default function Integer(props: IntegerProps) {
     return <TextInput {...props} />;
   }
 
-  let testProp = {};
-
-  testProp = {
-    'data-test-id': testId
-  };
+  const testProps: any = { 'data-test-id': testId };
 
   function intOnChange(event) {
     // console.log(`Integer intOnChange inValue: ${event.target.value}`);
@@ -96,7 +92,9 @@ export default function Integer(props: IntegerProps) {
       label={label}
       value={inputValue}
       type='text'
-      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*', ...testProp }}
+      slotProps={{
+        htmlInput: { inputMode: 'numeric', pattern: '[0-9]*', ...testProps }
+      }}
     />
   );
 }

package/tests/assets/sdk-r/components/create/override-sdk/field/Location/Location.css

@@ -0,0 +1,4 @@
+/* Support for google map autocomplete */
+.pac-container {
+  z-index: 2147483647;
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Location/Location.tsx

@@ -0,0 +1,258 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Box, TextField, Alert } from '@mui/material';
+import AddLocationAltIcon from '@mui/icons-material/AddLocationAlt';
+import InputAdornment from '@mui/material/InputAdornment';
+import IconButton from '@mui/material/IconButton';
+import { GoogleMap, Marker, useLoadScript } from '@react-google-maps/api';
+import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';
+import type { PConnFieldProps } from '@pega/react-sdk-components/lib/types/PConnProps';
+import handleEvent from '@pega/react-sdk-components/lib/components/helpers/event-utils';
+
+import './Location.css';
+
+interface LocationProps extends PConnFieldProps {
+  coordinates?: string;
+  onlyCoordinates?: boolean;
+  showMap?: boolean;
+  showMapReadOnly?: boolean;
+}
+
+const mapContainerStyle = {
+  width: '100%',
+  height: '300px',
+  marginTop: '0px'
+};
+
+const defaultCenter = {
+  lat: 18.5204,
+  lng: 73.8567
+};
+
+const disabledMapOptions = {
+  gestureHandling: 'none',
+  keyboardShortcuts: false,
+  disableDefaultUI: true,
+  clickableIcons: false,
+  zoomControl: false,
+  mapTypeControl: false,
+  scaleControl: false,
+  streetViewControl: false,
+  rotateControl: false,
+  fullscreenControl: false
+};
+
+export default function Location(props: LocationProps) {
+  const TextInput = getComponentFromMap('TextInput');
+  const FieldValueList = getComponentFromMap('FieldValueList');
+
+  const {
+    getPConnect,
+    label,
+    required = false,
+    disabled = false,
+    value = '',
+    validatemessage,
+    status,
+    readOnly = false,
+    testId,
+    displayMode,
+    hideLabel = false,
+    placeholder,
+    helperText,
+    coordinates = '',
+    onlyCoordinates = false,
+    showMap,
+    showMapReadOnly
+  } = props;
+
+  const pConn = getPConnect();
+  const actions = pConn.getActionsApi();
+  const propName = (pConn.getStateProps() as any).value;
+  const coordPropName = (pConn.getStateProps() as any).coordinates;
+
+  const [inputValue, setInputValue] = useState<string>(value ?? '');
+  const [mapCenter, setMapCenter] = useState(defaultCenter);
+  const [markerPosition, setMarkerPosition] = useState<google.maps.LatLngLiteral | null>(null);
+
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const autocompleteRef = useRef<google.maps.places.Autocomplete | null>(null);
+
+  const { isLoaded } = useLoadScript({
+    googleMapsApiKey: pConn.getGoogleMapsAPIKey?.() || '',
+    libraries: ['places', 'geocoding']
+  });
+
+  const hasError = status === 'error' && !!validatemessage && !disabled;
+
+  useEffect(() => {
+    if (onlyCoordinates && coordinates) {
+      setInputValue(coordinates);
+    } else {
+      setInputValue(value ?? '');
+    }
+    if (coordinates) {
+      const [lat, lng] = coordinates.split(',').map(parseFloat);
+
+      if (!isNaN(lat) && !isNaN(lng)) {
+        setMapCenter({ lat, lng });
+        setMarkerPosition({ lat, lng });
+      }
+    }
+  }, [value, coordinates, onlyCoordinates]);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const newValue = event.target.value ?? '';
+      setInputValue(newValue);
+      handleEvent(actions, 'changeNblur', propName, newValue);
+
+      if (newValue === '' && coordPropName) {
+        actions.updateFieldValue(coordPropName, '');
+        setMarkerPosition(null);
+      }
+    },
+    [actions, propName, coordPropName]
+  );
+
+  const handlePlaceChanged = useCallback(() => {
+    if (autocompleteRef.current) {
+      const place = autocompleteRef.current.getPlace();
+      if (place.geometry?.location) {
+        const lat = place.geometry.location.lat();
+        const lng = place.geometry.location.lng();
+        const address = place.formatted_address || place.name || '';
+        const coordinateString = `${lat}, ${lng}`;
+
+        setMapCenter({ lat, lng });
+        setMarkerPosition({ lat, lng });
+
+        if (onlyCoordinates) {
+          setInputValue(coordinateString);
+          handleEvent(actions, 'changeNblur', propName, coordinateString);
+          if (coordPropName) {
+            actions.updateFieldValue(coordPropName, coordinateString);
+          }
+        } else {
+          setInputValue(address);
+          handleEvent(actions, 'changeNblur', propName, address);
+          if (coordPropName) {
+            actions.updateFieldValue(coordPropName, coordinateString);
+          }
+        }
+      }
+    }
+  }, [actions, propName, coordPropName, onlyCoordinates]);
+
+  useEffect(() => {
+    if (isLoaded && inputRef.current && !autocompleteRef.current) {
+      autocompleteRef.current = new google.maps.places.Autocomplete(inputRef.current);
+      autocompleteRef.current.addListener('place_changed', handlePlaceChanged);
+    }
+  }, [isLoaded, handlePlaceChanged]);
+
+  const handleGetCurrentLocation = useCallback(() => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition(
+        position => {
+          const lat = position.coords.latitude;
+          const lng = position.coords.longitude;
+          const coordinateString = `${lat}, ${lng}`;
+
+          setMapCenter({ lat, lng });
+          setMarkerPosition({ lat, lng });
+
+          if (onlyCoordinates) {
+            setInputValue(coordinateString);
+            handleEvent(actions, 'changeNblur', propName, coordinateString);
+            if (coordPropName) {
+              actions.updateFieldValue(coordPropName, coordinateString);
+            }
+          } else {
+            const geocoder = new window.google.maps.Geocoder();
+            geocoder.geocode({ location: { lat, lng } }, (results, responseStatus) => {
+              if (responseStatus === 'OK' && results && results[0]) {
+                const address = results[0].formatted_address;
+                setInputValue(address);
+                handleEvent(actions, 'changeNblur', propName, address);
+                if (coordPropName) {
+                  actions.updateFieldValue(coordPropName, coordinateString);
+                }
+              }
+            });
+          }
+        },
+        error => {
+          console.error('Error getting current location: ', error);
+        }
+      );
+    }
+  }, [actions, propName, coordPropName, onlyCoordinates]);
+
+  if (displayMode === 'DISPLAY_ONLY') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} />;
+  }
+
+  if (displayMode === 'STACKED_LARGE_VAL') {
+    return <FieldValueList name={hideLabel ? '' : label} value={value} variant='stacked' />;
+  }
+
+  const map = (
+    <div style={{ opacity: disabled ? 0.7 : 1 }}>
+      <Box mt={1} style={{ flex: 1 }}>
+        <GoogleMap mapContainerStyle={mapContainerStyle} center={mapCenter} zoom={14} options={disabled ? disabledMapOptions : undefined}>
+          {markerPosition && <Marker position={markerPosition} />}
+        </GoogleMap>
+      </Box>
+    </div>
+  );
+
+  if (readOnly) {
+    return (
+      <div>
+        <TextInput {...props} />
+        {isLoaded && showMapReadOnly && map}
+      </div>
+    );
+  }
+
+  const testProps: any = { 'data-test-id': testId };
+
+  return (
+    <div>
+      {hasError && (
+        <Alert severity='error' sx={{ mb: 1 }}>
+          {validatemessage}
+        </Alert>
+      )}
+
+      {isLoaded && (
+        <TextField
+          fullWidth
+          label={hideLabel ? '' : label}
+          required={required}
+          disabled={disabled}
+          error={hasError}
+          placeholder={placeholder ?? 'Search location'}
+          helperText={helperText}
+          value={inputValue}
+          onChange={handleChange}
+          inputRef={inputRef}
+          slotProps={{
+            input: {
+              endAdornment: (
+                <InputAdornment position='end'>
+                  <IconButton onClick={handleGetCurrentLocation} disabled={disabled} edge='end'>
+                    <AddLocationAltIcon />
+                  </IconButton>
+                </InputAdornment>
+              ),
+              inputProps: { ...testProps }
+            }
+          }}
+        />
+      )}
+
+      {isLoaded && showMap && map}
+    </div>
+  );
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Location/config-ext.json

@@ -0,0 +1,10 @@
+{
+    "label": "Location",
+    "componentKey": "Location",
+    "name": "Location",
+    "description": "Location input field with optional coordinates",
+    "type": "Field",
+    "subtype": "Text-Location",
+    "icon": "images/pz-text-input-active.svg",
+    "properties": []
+}

package/tests/assets/sdk-r/components/create/override-sdk/field/Location/index.tsx

@@ -0,0 +1 @@
+export { default } from './Location';

package/tests/assets/sdk-r/components/create/override-sdk/field/Multiselect/utils.ts

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import equal from 'fast-deep-equal';
-import cloneDeep from 'lodash/cloneDeep';
+import cloneDeep from 'lodash.clonedeep';
 import { updateNewInstuctions, insertInstruction, deleteInstruction } from '@pega/react-sdk-components/lib/components/helpers/instructions-utils';
 
 export const setVisibilityForList = (c11nEnv, visibility) => {