aefis-core-ui 2.2.1-rc1 → 2.2.1-rc3

package/dist/index.modern.js

@@ -67,13 +67,13 @@ import 'lodash/camelCase';
 import debounce from 'lodash/debounce';
 import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector';
 import { MuiForm5 } from '@rjsf/material-ui';
+import isEmpty from 'lodash/isEmpty';
 import compose from 'lodash/fp/compose';
 import Chip$2 from '@mui/material/Chip';
 import TextField$2 from '@mui/material/TextField';
 import { useFormControl } from '@mui/material/FormControl';
 import get$1 from 'lodash/get';
 import isPlainObject from 'lodash/isPlainObject';
-import isEmpty from 'lodash/isEmpty';
 import ToggleButton$1 from '@mui/material/ToggleButton';
 import { parse as parse$1, format as format$1, setDate, setMonth } from 'date-fns';
 import { MobileDatePicker as MobileDatePicker$1 } from '@mui/x-date-pickers/MobileDatePicker';
@@ -727,7 +727,7 @@ const DismissableAlert = props => {
   const [open, setOpen] = useState(true);
   const handleClick = () => {
     setOpen(false);
-    props.onDismiss && props.onDismiss();
+    props.onDismiss == null ? void 0 : props.onDismiss();
   };
   return /*#__PURE__*/jsx(Collapse, {
     in: open,
@@ -747,7 +747,12 @@ const DismissableAlert = props => {
       }),
       children: [props.title && /*#__PURE__*/jsx(AlertTitle, {
         children: props.title
-      }), props.description]
+      }), /*#__PURE__*/jsx(Box$1, {
+        sx: {
+          paddingRight: 0.5
+        },
+        children: props.description
+      })]
     }))
   });
 };
@@ -807,7 +812,12 @@ const Alert = /*#__PURE__*/forwardRef(function Alert(props, ref) {
       role: props.role,
       children: [props.title && /*#__PURE__*/jsx(AlertTitle, {
         children: props.title
-      }), props.description]
+      }), /*#__PURE__*/jsx(Box$1, {
+        sx: {
+          paddingRight: 0.5
+        },
+        children: props.description
+      })]
     }))
   });
 });
@@ -8085,30 +8095,35 @@ const FilterChips = ({
   if (_filters.length === 0 && _sort.length === 0) return /*#__PURE__*/jsx("div", {
     children: "No filters or sorting criteria selected"
   });
-  const Filters = useMemo(() => /*#__PURE__*/jsx(Fragment, {
-    children: _filters.map(filter => /*#__PURE__*/jsx(Grow, {
-      in: true,
-      children: /*#__PURE__*/jsx("div", {
-        style: {
-          margin: 2,
-          display: "inline-flex"
-        },
-        children: /*#__PURE__*/jsx(BusinessObject, {
-          variant: "chip",
-          size: "small",
-          displayOptions: {
-            hasIcon: filter.type !== "keyword"
+  const Filters = useMemo(() => {
+    return /*#__PURE__*/jsx(Box$1, {
+      sx: {
+        display: "flex"
+      },
+      children: _filters.map(filter => /*#__PURE__*/jsx(Grow, {
+        in: true,
+        children: /*#__PURE__*/jsx("div", {
+          style: {
+            margin: 2,
+            display: "inline-flex"
           },
-          type: filter.type || "businessObject",
-          template: filter.template,
-          data: filter.data,
-          onDelete: () => {
-            onFilterDelete(filter);
-          }
-        }, filter.data.id)
-      })
-    }, `filterPanelFilter-${filter.index}-${filter.id}`))
-  }), [_filters]);
+          children: /*#__PURE__*/jsx(BusinessObject, {
+            variant: "chip",
+            size: "small",
+            displayOptions: {
+              hasIcon: filter.type !== "keyword"
+            },
+            type: "businessObject",
+            template: filter.template,
+            data: filter.data,
+            onDelete: () => {
+              onFilterDelete(filter);
+            }
+          }, filter.data.id)
+        })
+      }, `filterPanelFilter-${filter.index}-${filter.id}`))
+    });
+  }, [_filters]);
   const SortItems = useMemo(() => /*#__PURE__*/jsx(Fragment, {
     children: _sort.map(sortItem => /*#__PURE__*/jsx(Grow, {
       in: true,
@@ -8195,7 +8210,7 @@ const FilterSelection = ({
         children: "Apply All Filters"
       }), /*#__PURE__*/jsx(Button, {
         name: "reset all filters",
-        disabled: !(filters.length > 0),
+        disabled: !(filters.length > 0 || sort.length > 0),
         variant: "contained",
         color: "grey",
         onClick: onResetFilters,
@@ -8377,6 +8392,7 @@ const FilterPanel = props => {
   const [menuPosition, setMenuPosition] = useState(null);
   const [filters, setFilters] = useState([]);
   const [sort, setSort] = useState(sortProp || []);
+  const [panelSearch, setPanelSearch] = useState([]);
   const [pickerFilters, setPickerFilters] = useState([]);
   useEffect(() => {
     const formattedFilters = formatFilters(filtersProp, configuration);
@@ -8408,6 +8424,7 @@ const FilterPanel = props => {
     }
   }, [filters, sort]);
   const removeFilter = filter => {
+    console.log("remove filter ", filter);
     const newFilterArray = filters == null ? void 0 : filters.filter(i => i.index !== filter.index || filter.id !== i.id);
     setFilters(newFilterArray);
     if (!onApplyFilters) {
@@ -8528,6 +8545,8 @@ const FilterPanel = props => {
   const handleResetFilters = () => {
     setPickerFilters([]);
     setFilters([]);
+    setSort([]);
+    setPanelSearch([]);
     if (!onChange && onApplyFilters) {
       onApplyFilters({}, []);
     }
@@ -8536,6 +8555,8 @@ const FilterPanel = props => {
     }
   };
   const handleSearchChange = keyword => {
+    if (panelSearch.includes(keyword)) return;
+    setPanelSearch([...panelSearch, keyword]);
     addFilter({
       index: -1,
       type: "keyword",
@@ -10469,6 +10490,15 @@ const useIsError = status => {
   }, [status]);
   return isError;
 };
+const initialFilterState = {
+  filter: {},
+  searchText: "",
+  filterArray: [],
+  filterCount: 0,
+  sort: [],
+  sortCount: 0,
+  sortQueryParams: null
+};
 const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref) {
   var _props$filterPanelCon, _props$rowActions, _props$dataTableProps, _props$dataTableProps2;
   const didMount = useDidMount();
@@ -10494,15 +10524,8 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
   const [formatDrawerContent, setFormatDrawerContent] = useState(false);
   const [enableTableRowAction, setEnableTableRowAction] = useState(false);
   const [selectedRowCount, setSelectedRowCount] = useState(0);
-  const [filterPanelState, setFilterPanelState] = useState({
-    filter: {},
-    searchText: "",
-    filterArray: [],
-    filterCount: 0,
-    sort: [],
-    sortCount: 0,
-    sortQueryParams: null
-  });
+  const [filterPanelState, setFilterPanelState] = useState(initialFilterState);
+  console.log("filterPanelState ", filterPanelState);
   const {
     info,
     error
@@ -10625,6 +10648,15 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
   };
   const handleFilterChange = (filters, newFilterArray) => {
     props == null ? void 0 : props.onFilterChange == null ? void 0 : props.onFilterChange(filters);
+
+    // TODO: apply better approach by gathering handling of all search and
+    // filter changes with onChange; also send operation type to onChange
+    // events
+    const isReset = newFilterArray.length === 0;
+    if (isReset) {
+      setFilterPanelState(() => _extends({}, initialFilterState));
+      return;
+    }
     setFilterPanelState(prev => _extends({}, prev, {
       filterCount: Object.keys(filters).length,
       filter: filters,
@@ -10719,7 +10751,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       exportOptions: props.exportOptions,
       actions: props.actions && props.actions.length > 0 || props.addAction ? updateActions(props.actions, handleDrawerOpen, enableTableRowAction, selectedRowCount, Add) : undefined,
       onFilterClick: isFilterPanelEnabled ? handleFilterClick : undefined,
-      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0,
+      hasFilters: filterPanelState.filterCount > 0 || filterPanelState.sortCount > 0 || filterPanelState.searchText,
       disableFilterButton: isFetching
     }, props.titleAndActionHeaderProps)), /*#__PURE__*/jsx(DataTable, _extends({}, props, {
       tableRef: DataTableRef,
@@ -11122,6 +11154,7 @@ const BusinessObjectPicker = _ref => {
       pageSize,
       idTemplate,
       shouldResetOnParametersChange,
+      // TODO: replace this implementation with getNextPageParam function prop
       queryParamNames,
       enableInfinteScroll,
       renderAddItemForm,
@@ -11369,7 +11402,12 @@ const BusinessObjectPicker = _ref => {
         loading: status === "loading",
         options: props.data || _flatData,
         onChange: handleChange,
-        onInputChange: (event, value, reason) => reason === "reset" && setQ(""),
+        onInputChange: (event, value, reason) => reason === "reset" && setQ("")
+        // CAVEAT: changing this to getOptionLabel will create
+        // problem when there are items with same label even though
+        // they have different keys (ids).
+        // getOptionLabel={getKey}
+        ,
         getOptionLabel: getOptionLabel || getLabel,
         size: props.size,
         value: value,
@@ -14280,9 +14318,20 @@ TitleAndDescription.propTypes = {
   gutterBottom: PropTypes.bool
 };
 
+/**
+ * Avoid using this hook as it mutates ref during render. using useState might
+ * better option. https://beta.reactjs.org/learn/you-might-not-need-an-effect
+ *
+ * const useComponentWillMount = (callback) => {                                           //
+ *  const [isMounted, setIsMounted] = useState(false);                                     //
+ *  if (!isMounted) { callback(); setIsMounted(true); }                                   //
+ * };                                                                               
+ *
+ * @param {function} callback
+ */
 const useComponentWillMount = callback => {
   const willMount = useRef(true);
-  if (willMount.current) callback == null ? void 0 : callback();
+  if (willMount.current) callback();
   willMount.current = false;
 };
 
@@ -15231,50 +15280,68 @@ RubricDistributionChart.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "h4", "div", "p"])
 };
 
-const moreThan = ruleValue => fieldValue => {
+const moreThan = ruleValue => ({
+  fieldValue
+}) => {
   const isValid = fieldValue > ruleValue;
   if (!isValid) return `should be more than ${ruleValue}`;
 };
-const moreThanOrEqual = ruleValue => fieldValue => {
+const moreThanOrEqual = ruleValue => ({
+  fieldValue
+}) => {
   const isValid = fieldValue >= ruleValue;
   if (!isValid) return `should be more than to ${ruleValue}`;
 };
-const lessThan = ruleValue => fieldValue => {
+const lessThan = ruleValue => ({
+  fieldValue
+}) => {
   const isValid = fieldValue < ruleValue;
   if (!isValid) return `should be less than ${ruleValue}`;
 };
-const lessThanOrEqual = ruleValue => fieldValue => {
+const lessThanOrEqual = ruleValue => ({
+  fieldValue
+}) => {
   const isValid = fieldValue <= ruleValue;
   if (!isValid) return `should be less than or equal to ${ruleValue}`;
 };
-const notEqual = ruleValue => fieldValue => {
+const notEqual = ruleValue => ({
+  fieldValue
+}) => {
   const isValid = ruleValue.toString() !== (fieldValue == null ? void 0 : fieldValue.toString == null ? void 0 : fieldValue.toString());
   if (!isValid) return `should NOT be ${ruleValue}`;
 };
-const url = () => fieldValue => {
+const url = () => ({
+  fieldValue
+}) => {
   const UrlRegEx = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/;
   const isValid = UrlRegEx.test(fieldValue);
   if (!isValid) return `is NOT a valid URL`;
 };
-const email = () => fieldValue => {
+const email = () => ({
+  fieldValue
+}) => {
   const EmailRegEx = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
   const isValid = EmailRegEx.test(fieldValue);
   if (!isValid) return `is NOT a valid email address`;
 };
-const isInvalidDate = () => fieldValue => {
+const isInvalidDate = () => ({
+  fieldValue
+}) => {
   const isValid = fieldValue !== "Invalid Date";
   if (!isValid) return "is invalid date";
 };
-const required = () => fieldValue => {
+const required = () => ({
+  fieldValue,
+  schema
+}) => {
   const message = "is required";
-  if (Array.isArray(fieldValue) && fieldValue.length === 0) {
-    return message;
-  }
-  if (fieldValue == undefined || fieldValue == "") {
-    return message;
-  }
+  if (schema.type.includes("array") && Array.isArray(fieldValue) && fieldValue.length === 0) return message;
+  if (schema.type.includes("object") && isEmpty(fieldValue)) return message;
+  if (fieldValue === null || fieldValue === undefined || fieldValue == "") return message;
 };
-const isNumber = () => fieldValue => {
+const isNumber = () => ({
+  fieldValue
+}) => {
   const message = "should be number";
   const isValid = !isNaN(fieldValue) &&
   // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
@@ -15282,7 +15349,9 @@ const isNumber = () => fieldValue => {
 
   if (!isValid) return message;
 };
-const isNotNegativeNumber = () => fieldValue => {
+const isNotNegativeNumber = () => ({
+  fieldValue
+}) => {
   const isValid = !isNaN(fieldValue) &&
   // use type coercion to parse the _entirety_ of the string (`parseFloat` alone does not do this)...
   !isNaN(parseFloat(fieldValue)); // ...and ensure strings of whitespace fail
@@ -15290,21 +15359,49 @@ const isNotNegativeNumber = () => fieldValue => {
   if (isValid && parseFloat(fieldValue) < 0) return "should be positive number";
   if (!isValid) return "should be number";
 };
-const characterLimitLessThan = ruleValue => fieldValue => {
-  // INFO: fasly values ("", undefined, null) are assumed to be to be 0
-  if (!fieldValue) return;
-  const isValid = fieldValue.length < ruleValue;
-  if (!isValid) return `should not exceed ${ruleValue - 1} characters`;
+const characterLimitLessThan = ruleValue => ({
+  fieldValue
+}) => {
+  // INFO: null and undefined are casted to empty string(""), number
+  // values are casted to string
+  const value = (fieldValue != null ? fieldValue : "").toString();
+  const message = `should not exceed ${ruleValue - 1} characters`;
+  const isValid = value.length < ruleValue;
+  if (!isValid) return message;
+};
+const characterLimitMoreThan = ruleValue => ({
+  fieldValue
+}) => {
+  // INFO: null and undefined are casted to empty string(""), number
+  // values are casted to string
+  const value = (fieldValue != null ? fieldValue : "").toString();
+  const message = `should not be less than ${ruleValue + 1} characters`;
+  const isValid = value.length > ruleValue;
+  if (!isValid) return message;
 };
-const characterLimitMoreThan = ruleValue => fieldValue => {
-  const message = `should be more than ${ruleValue} characters`;
-
-  // INFO: fasly values ("", undefined, null) are assumed to be to be 0
-  if (!fieldValue) return message;
-  const isValid = fieldValue.length > ruleValue;
+const maxLength = ruleValue => ({
+  fieldValue
+}) => {
+  // INFO: null and undefined are casted to empty string(""), number values
+  // are casted to string
+  const value = (fieldValue != null ? fieldValue : "").toString();
+  const message = `should not exceed ${ruleValue} characters`;
+  const isValid = value.length <= ruleValue;
+  if (!isValid) return message;
+};
+const minLength = ruleValue => ({
+  fieldValue
+}) => {
+  // INFO: null and undefined are casted to empty string(""), number values
+  // are casted to string
+  const value = (fieldValue != null ? fieldValue : "").toString();
+  const message = `should not be less than ${ruleValue} characters`;
+  const isValid = value.length >= ruleValue;
   if (!isValid) return message;
 };
 const Rules = {
+  maxLength,
+  minLength,
   moreThan,
   moreThanOrEqual,
   lessThan,
@@ -15334,6 +15431,14 @@ const {
   formData: {}
 });
 
+const useSubmitted = () => {
+  const [submitted, setSubmitted] = useState(false);
+  useSubmitListener(() => {
+    setSubmitted(true);
+  });
+  return submitted;
+};
+
 const useStyles$3 = makeStyles(theme => ({
   button: {
     margin: theme.spacing(1)
@@ -15349,10 +15454,10 @@ const FormButtons = ({
   showCancelButton: _showCancelButton = false,
   showResetButton: _showResetButton = false,
   showDeleteButton: _showDeleteButton = false,
-  saveLabel,
-  cancelLabel,
-  resetLabel,
-  deleteLabel,
+  saveLabel: _saveLabel = "Save",
+  cancelLabel: _cancelLabel = "Cancel",
+  resetLabel: _resetLabel = "Reset",
+  deleteLabel: _deleteLabel = "Delete",
   hidden,
   submitStatus,
   onCancel,
@@ -15361,13 +15466,15 @@ const FormButtons = ({
 }) => {
   const classes = useStyles$3();
   const setFormState = useSetFormState();
+  const customErrorMapping = useSelectFormState(formState => formState.customErrorMapping);
+  const submitted = useSubmitted();
   let renderSaveButton = () => /*#__PURE__*/jsx(Button, {
     variant: "contained",
     color: "primary",
     type: "submit",
-    name: saveLabel,
+    name: _saveLabel,
     className: classes.button,
-    children: saveLabel
+    children: _saveLabel
   });
   if (submitStatus === "loading") {
     renderSaveButton = () => {
@@ -15377,7 +15484,7 @@ const FormButtons = ({
         type: "submit",
         className: classes.button,
         disabled: true,
-        name: saveLabel,
+        name: _saveLabel,
         endIcon: /*#__PURE__*/jsx(CircularProgress, {
           color: "grey",
           size: 15
@@ -15386,18 +15493,19 @@ const FormButtons = ({
       });
     };
   }
-  if (submitStatus === "error") {
+  const submitBlockedByCustomError = Object.values(customErrorMapping).findIndex(Boolean) !== -1;
+  if (submitted && (submitStatus === "error" || submitBlockedByCustomError)) {
     renderSaveButton = () => {
       return /*#__PURE__*/jsx(Button, {
         variant: "contained",
         color: "primary",
         type: "submit",
-        name: saveLabel,
+        name: _saveLabel,
         className: classes.button,
         endIcon: /*#__PURE__*/jsx(Error$1, {
           size: 15
         }),
-        children: saveLabel
+        children: _saveLabel
       });
     };
   }
@@ -15410,7 +15518,7 @@ const FormButtons = ({
   }, {
     children: [_showResetButton && /*#__PURE__*/jsx(Button, {
       className: classes.button,
-      name: resetLabel,
+      name: _resetLabel,
       onClick: () => {
         onReset == null ? void 0 : onReset();
         setFormState(prevState => _extends({}, prevState, {
@@ -15418,26 +15526,20 @@ const FormButtons = ({
           key: +new Date()
         }));
       },
-      children: resetLabel
+      children: _resetLabel
     }), _showCancelButton && /*#__PURE__*/jsx(Button, {
-      name: cancelLabel,
+      name: _cancelLabel,
       onClick: onCancel,
       className: classes.button,
-      children: cancelLabel
+      children: _cancelLabel
     }), _showDeleteButton && /*#__PURE__*/jsx(Button, {
-      name: deleteLabel,
+      name: _deleteLabel,
       onClick: onDelete,
       className: classes.button,
-      children: deleteLabel
+      children: _deleteLabel
     }), !disabled && renderSaveButton()]
   }));
 };
-FormButtons.defaultProps = {
-  saveLabel: "Submit",
-  cancelLabel: "Cancel",
-  resetLabel: "Reset",
-  deleteLabel: "Delete"
-};
 FormButtons.propTypes = {
   cancelLabel: PropTypes.string,
   disabled: PropTypes.any,
@@ -15509,51 +15611,6 @@ const withEmptyValue = Component => {
   });
 };
 
-const windowKeys = Object.keys(window).filter(key => {
-  try {
-    Function.apply(null, [key, "return;"]);
-    return true;
-  } catch (e) {
-    return false;
-  }
-});
-
-/**
- * evaluates
- * @param {string} code
- * @param {object} context
- * @param {object} options
- * @param {function} options.falbback
- *
- * @returns
- */
-const safeEval = (code, context, options) => {
-  const keys = Object.keys(context);
-
-  // TODO: optimize
-  const allParams = keys.concat(windowKeys, [`"use strict"; return ${code}`]);
-  try {
-    const fn = Function.apply(null, allParams);
-    const params = keys.map(key => context[key]);
-    const res = fn.apply(null, params);
-    return res;
-  } catch (e) {
-    (options == null ? void 0 : options.fallback == null ? void 0 : options.fallback(e)) || console.log("Eval Error : ", e, {
-      code,
-      context,
-      options
-    });
-  }
-};
-const lazyEval = (code, context) => {
-  return new Promise((resolve, reject) => {
-    const result = safeEval(code, context, {
-      fallback: reject
-    });
-    resolve(result);
-  });
-};
-
 const {
   useSelectState: useSelectFieldState,
   useSetState: useSetFieldState,
@@ -15672,14 +15729,113 @@ CustomFieldTemplate.propTypes = {
 };
 var CustomFieldTemplate$1 = /*#__PURE__*/React.memo(withFieldStore(CustomFieldTemplate));
 
+/**
+ * Simple memoize function. Check Stackoverflow topic for better implementation:
+ * https://stackoverflow.com/questions/61402804/what-memoization-libraries-are-available-for-javascript
+ * 
+ * @param {functionp} passedFunc
+ * @returns function
+ */
+const memoize = function memoize(passedFunc) {
+  const cache = {};
+  return function (x) {
+    if (x in cache) return cache[x];
+    cache[x] = passedFunc(x);
+    return cache[x];
+  };
+};
+
+const windowKeys = Object.keys(window).filter(key => {
+  try {
+    Function.apply(null, [key, "return;"]);
+    return true;
+  } catch (e) {
+    return false;
+  }
+});
+const createScopedEval = (scopeMap, options) => {
+  const keys = Object.keys(scopeMap);
+  const createFunction = code => {
+    const allParams = keys.concat(windowKeys, [`"use strict"; return ${code}`]);
+    return Function.apply(null, allParams);
+  };
+  const memoizedCreateFunction = memoize(createFunction);
+  const scopedEval = (code, scope) => {
+    try {
+      const fn = memoizedCreateFunction(code);
+      const params = keys.map(key => scope[key]);
+      const res = fn.apply(null, params);
+      return res;
+    } catch (e) {
+      (options == null ? void 0 : options.fallback == null ? void 0 : options.fallback(e)) || console.log("Eval Error : ", e, {
+        code,
+        scope,
+        options
+      });
+    }
+  };
+  return scopedEval;
+};
+
+/**
+ * evaluates
+ * @param {string} code
+ * @param {object} scope
+ * @param {object} options
+ * @param {function} options.falbback
+ *
+ * @returns
+ */
+const scopedEval = (code, scope, options) => {
+  const keys = Object.keys(scope);
+
+  // TODO: optimize
+  const allParams = keys.concat(windowKeys, [`"use strict"; return ${code}`]);
+  try {
+    const fn = Function.apply(null, allParams);
+    const params = keys.map(key => scope[key]);
+    const res = fn.apply(null, params);
+    return res;
+  } catch (e) {
+    (options == null ? void 0 : options.fallback == null ? void 0 : options.fallback(e)) || console.log("Eval Error : ", e, {
+      code,
+      scope,
+      options
+    });
+  }
+};
+const lazyEval = (code, scope) => {
+  return new Promise((resolve, reject) => {
+    const result = safeEval(code, scope, {
+      fallback: reject
+    });
+    resolve(result);
+  });
+};
+const useScopedEval = scopeMap => useMemo(() => createScopedEval(scopeMap), []);
+
 const withValidate = Component => {
   const MemoizedComponent = /*#__PURE__*/React.memo(Component);
   return /*#__PURE__*/forwardRef((props, ref) => {
-    var _props$uiSchema;
-    const rules = ((_props$uiSchema = props.uiSchema) == null ? void 0 : _props$uiSchema["rules"]) || [];
-    const isWidget = !!props.id;
-    const formItemValue = isWidget ? props.value : props.formData;
+    const {
+      id,
+      name,
+      value,
+      formData,
+      uiSchema,
+      schema,
+      formContext
+    } = props;
+    const rules = uiSchema["rules"] || [];
+    const isWidget = !!id;
+    const formItemValue = isWidget ? value : formData;
+
+    // CAVEAT: This cleans the idPrefix if widget (not field). Custom
+    // idPrefix defination might effect here. It should be tested and
+    // updated accordingly
+    const fieldName = isWidget ? id.slice(5) : name;
     const Rules = useSelectFormState(state => state.rules);
+    const scopedEval = useScopedEval(_extends({}, Rules));
     const setFieldState = useSetFieldState();
     const setFormState = useSetFormState();
     const [submitted, setSubmitted] = useState(false);
@@ -15689,13 +15845,13 @@ const withValidate = Component => {
       if (!rules) return [];
       const evaluatedRules = rules.map(rule => {
         const isFunctionCall = rule.slice(-1) === ")";
-        const ruleFn = safeEval(rule, Rules);
+        const ruleFn = scopedEval(rule, Rules);
         return isFunctionCall ? ruleFn : ruleFn();
       });
 
       // TODO: this is bad practise, implementation should be moved to
       // inside widget/field when withValidate replaced with custom hook
-      if (props.uiSchema["ui:widget"] === "DateWidget" || props.uiSchema["ui:field"] === "DateSelect") {
+      if (uiSchema["ui:widget"] === "DateWidget" || uiSchema["ui:field"] === "DateSelect") {
         evaluatedRules.push(Rules.isInvalidDate());
       }
       return evaluatedRules;
@@ -15712,25 +15868,33 @@ const withValidate = Component => {
       if (!rules) return;
       const isEmpty = formItemValue == undefined || formItemValue === "";
       const skipValidationOnEmptyValue = isEmpty && !isRequired;
-      const message = !skipValidationOnEmptyValue && evalRuleArray(formItemValue)(ruleArray);
+      const message = !skipValidationOnEmptyValue && evalRuleArray({
+        fieldValue: formItemValue,
+        formContext,
+        formData,
+        uiSchema,
+        schema
+      })(ruleArray);
       setFieldState(state => _extends({}, state, {
         errorMessage: message
       }));
 
-      // TODO: cleans the idPrefix if widget (not field). Custom idPrefix
-      // defination might effect here. It should be tested and updated
-      // accordingly
-      const fieldName = isWidget ? props.id.slice(5) : props.name;
-
       // INFO: Adding item to array template does not work without
       // setFormState wrapped with setTimeout
       setTimeout(() => {
-        setFormState(state => _extends({}, state, {
-          customErrorMapping: _extends({}, state.customErrorMapping, {
-            [fieldName]: !!message
-          })
-        }));
+        // TODO: This setFormState create so much re-render on top
+        // level. For now, leaving this optimization to React 18
+        // debounced rendering. It can also be solved by creating
+        // seperate state for customErrorMapping.
+        setFormState(state => {
+          return _extends({}, state, {
+            customErrorMapping: _extends({}, state.customErrorMapping, {
+              [fieldName]: message
+            })
+          });
+        });
       });
+      // TODO: add other dependecies
     }, [formItemValue]);
     const handleOnchange = (...args) => {
       setTouched(true);
@@ -15743,13 +15907,31 @@ const withValidate = Component => {
     }));
   });
 };
-const evalRuleArray = fieldValue => rules => {
+const evalRuleArray = ({
+  fieldValue,
+  schema,
+  uiSchema,
+  formContext,
+  formData
+}) => rules => {
   for (let rule of rules) {
-    const message = rule(fieldValue);
+    const message = rule({
+      fieldValue,
+      schema,
+      uiSchema,
+      formContext,
+      formData
+    });
     if (message != undefined) return message;
   }
 };
 
+/**
+ * TODO:
+ * 	- do two version of it seperately for widget and field eg. withValidate (for field) and withValidateWidget
+ *
+ */
+
 const commonWidgetHOCs = [withValidate, withEmptyValue];
 const commonFieldHOCs = [withValidate, withEmptyValue];
 
@@ -16389,12 +16571,7 @@ const ReadOnlyView = ({
         sx: {
           fontStyle: "italic"
         },
-        description: /*#__PURE__*/jsx(Box$2, {
-          sx: {
-            paddingRight: 0.5
-          },
-          children: _emptyViewText
-        }),
+        description: _emptyViewText,
         showIcon: false
       });
     }
@@ -16717,7 +16894,9 @@ const useReadOnly = uiSchema => {
   const selector = useCallback(state => {
     const defaultValue = state.readonly || state.schema.readonly;
     if (!code) return defaultValue;
-    const evaluatedReadyOnly = safeEval(code, state);
+
+    // TODO: change it with useScopedEval
+    const evaluatedReadyOnly = scopedEval(code, state);
     return defaultValue || evaluatedReadyOnly;
   }, [code]);
   const evaluatedReadyOnly = useSelectFormState(selector);
@@ -16806,13 +16985,11 @@ const dateInputStyles = {
 const DateSelect = props => {
   var _useSelector, _useSelector2;
   const {
-    id,
     required,
     schema,
     formData,
     onChange,
     rawErrors,
-    options,
     disabled
   } = props;
   const [selectedDate, setSelectedDate] = useState(null);
@@ -16866,7 +17043,10 @@ const DateSelect = props => {
   const maxDateRaw = (_useSelector2 = useSelector(props.uiSchema["select::maxDate"])) == null ? void 0 : _useSelector2.date;
   const maxDate = maxDateRaw ? parse$1(maxDateRaw, "MM-dd-yyyy", new Date()) : undefined;
   const isReadOnly = useReadOnly(props.uiSchema);
-  if (isReadOnly) return /*#__PURE__*/jsx(DateSelectReadOnly$1, _extends({}, props));
+  if (isReadOnly) return /*#__PURE__*/jsx(DateSelectReadOnly$1, {
+    formData: formData,
+    schema: schema
+  });
   return /*#__PURE__*/jsxs(FormControl, {
     disabled: disabled || schema.disabled,
     required: required,
@@ -16924,7 +17104,6 @@ const DateSelect = props => {
         value: typeof selectedDate === "undefined" ? null : selectedDate,
         onChange: handleDateChange,
         disabled: disabled,
-        inputLabe: true,
         renderInput: params => /*#__PURE__*/jsx(TextField, _extends({}, params, {
           inputProps: _extends({}, params.inputProps, {
             type: "text"
@@ -17540,8 +17719,8 @@ const withEvalDisable = () => Component => {
       const code = (_props$uiSchema = props.uiSchema) == null ? void 0 : _props$uiSchema["ui:disabled"];
       if (!code) return props.disabled;
 
-      // TODO: use lazyEval
-      return safeEval(code, formState);
+      // TODO: replace with useScopedEval
+      return scopedEval(code, formState);
     }, [formState.formData, formState.formContext, props.disabled]);
     return /*#__PURE__*/jsx(MemoizedComponent, _extends({}, props, {
       disabled: isDisabled
@@ -17856,7 +18035,10 @@ var SelectField$1 = compose(HOCs$8)(SelectField);
 // check this topic to catch consistant view with autocmplete
 // https://stackoverflow.com/questions/63047684/material-ui-select-menu-with-end-adornment
 
+const useFormStateScopedEval = () => useScopedEval(formStateScopeMap);
+
 const useProcessCondition = formState => {
+  const safeEval = useFormStateScopedEval();
   const conditions = useMemo(() => {
     const {
       schema,
@@ -17882,47 +18064,48 @@ const useProcessCondition = formState => {
   const newFormState = useMemo(() => {
     const {
       schema,
-      formData
+      formData,
+      customErrorMapping
     } = formState;
-    let changed = false;
-    let newRequired = schema.required ? [...schema.required] : [];
+    let newRequiredItemList = schema.required ? [...schema.required] : [];
     let newProperties = _extends({}, schema.properties);
+    let newCustomErrorMapping = _extends({}, customErrorMapping);
     let newFormData = formData ? _extends({}, formData) : {};
     conditions.forEach(item => {
-      const nextOperation = safeEval(item.condition, formState) ? "added" : "deleted";
-      if (item.lastOperation !== nextOperation) {
-        changed = true;
-      }
-      if (nextOperation === "added") {
-        item.lastOperation = nextOperation;
+      const nextOperation = safeEval(item.condition, formState) ? "add" : "delete";
+      if (nextOperation === "add") {
         if (item.isRequired) {
-          newRequired.indexOf(item.key) === -1 && newRequired.push(item.key);
+          newRequiredItemList.indexOf(item.key) === -1 && newRequired.push(item.key);
         }
         newProperties[item.key] = item.schema;
-      } else {
-        item.lastOperation = nextOperation;
+      }
+      if (nextOperation === "delete") {
         if (item.isRequired) {
-          newRequired = newRequired.filter(key => key !== item.key);
+          newRequiredItemList = newRequiredItemList.filter(key => key !== item.key);
         }
         delete newProperties[item.key];
         delete newFormData[item.key];
+        delete customErrorMapping[item.key];
       }
     });
-    if (changed) {
-      const newSchema = _extends({}, schema, {
-        properties: _extends({}, newProperties),
-        required: [...newRequired]
-      });
-      return _extends({}, formState, {
-        schema: newSchema,
-        formData: newFormData
-      });
-    }
-    return formState;
-  }, [formState.formData]);
+    const newSchema = _extends({}, schema, {
+      properties: _extends({}, newProperties),
+      required: [...newRequiredItemList]
+    });
+    return _extends({}, formState, {
+      schema: newSchema,
+      formData: newFormData,
+      customErrorMapping: newCustomErrorMapping
+    });
+  }, [formState]);
   return newFormState;
 };
 
+/**
+ * TODO:
+ * remove required list field
+ */
+
 const useStyles$1 = makeStyles$1(theme => ({
   fab: {
     margin: theme.spacing(1)
@@ -19467,7 +19650,7 @@ TextWidgetBase.propTypes = {
 };
 
 const _excluded = ["onChange"];
-const TextWidgetReadOnly$1 = props => {
+const TextWidgetReadOnly$1 = function TextWidgetReadOnly(props) {
   const {
     options: {
       prefix = "$",
@@ -19496,7 +19679,15 @@ const TextWidgetReadOnly$1 = props => {
   });
 };
 TextWidgetReadOnly$1.propTypes = {
-  schema: PropTypes.any,
+  options: PropTypes.shape({
+    prefix: PropTypes.string,
+    decimalScale: PropTypes.number,
+    fixedDecimalScale: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    thousandSeparator: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    decimalSeparator: PropTypes.string,
+    allowNegative: PropTypes.bool
+  }),
+  schema: PropTypes.object,
   value: PropTypes.any
 };
 const CurrencyWidget = props => {
@@ -19697,7 +19888,6 @@ SelectWidget.propTypes = {
   id: PropTypes.any,
   onChange: PropTypes.func,
   options: PropTypes.any,
-  rawErrors: PropTypes.array,
   required: PropTypes.any,
   schema: PropTypes.shape({
     disabled: PropTypes.any,
@@ -19881,6 +20071,8 @@ ValidateWidget.propTypes = {
 };
 var ValidateWidget$1 = withReadyOnly(ValidateWidget);
 
+const humanReadableList = a => [a.slice(0, -1).join(", "), a.slice(-1)[0]].join(a.length < 2 ? "" : " and ");
+
 const {
   useDispatcher: useSubmitDispatcher,
   useListener: useSubmitListener,
@@ -19921,27 +20113,43 @@ const defaultFields = {
    */
 };
 
+const useProcessedFormState = () => {
+  const formState = useSelectFormState();
+  return useProcessCondition(formState);
+};
 const defaultTemplates = {
   ArrayFieldTemplate: ArrayFieldTemplate$1
 };
+const fn = () => {};
+const formStateScopeMap = {
+  schema: {},
+  uiSchema: {},
+  initialFormData: {},
+  formData: {},
+  formContext: {},
+  readonly: false,
+  dataSources: {},
+  customErrorMapping: {},
+  rules: {}
+};
 const DynamicForm = ({
-  schema,
-  uiSchema,
-  saveButtonText,
-  cancelButtonText,
-  resetButtonText,
-  deleteButtonText,
-  formData: initialFormData,
+  schema: _schema = {},
+  uiSchema: _uiSchema = {},
+  saveButtonText: _saveButtonText = "Save",
+  cancelButtonText: _cancelButtonText = "Cancel",
+  resetButtonText: _resetButtonText = "Reset",
+  deleteButtonText: _deleteButtonText = "Delete",
+  formData: initialFormData = {},
   widgets: widgetsProp,
   fields: fieldsProp,
   templates: templatesProp,
-  onChange,
-  actionUrls,
+  onChange: _onChange = fn,
+  onError: _onError = fn,
+  onSubmit: _onSubmit = fn,
   dataSources: _dataSources = [],
   formContext: formContextProp,
   initialFormContext,
-  onSubmit,
-  disableSubmit,
+  disableSubmit: _disableSubmit = false,
   readonly,
   formDataStatus,
   submitStatus,
@@ -19958,33 +20166,40 @@ const DynamicForm = ({
   renderBottom
 }) => {
   const setFormState = useSetFormState();
+  const {
+    error
+  } = useNotify();
   useComponentWillMount(() => {
-    setFormState(prev => _extends({}, prev, {
-      schema,
-      uiSchema,
+    const initialState = {
+      schema: _schema,
+      uiSchema: _uiSchema,
       initialFormData: initialFormData,
       formData: initialFormData,
-      actionUrls,
       formContext: initialFormContext || formContextProp,
       readonly,
       dataSources: _dataSources,
       customErrorMapping: {},
       rules: _extends({}, _rules, Rules)
-    }));
+    };
+    setFormState(() => initialState);
   });
-  const formState = useSelectFormState();
+  const formState = useProcessedFormState();
+
+  // useDependencyChange(() => {}, [processedState]);
+
   const widgets = _extends({}, defaultWidgets, widgetsProp);
   const fields = _extends({}, defaultFields, fieldsProp);
   const templates = _extends({}, defaultTemplates, templatesProp);
   const dispatchSubmitEvent = useSubmitDispatcher();
-  const newFormState = useProcessCondition(formState);
   useComponentWillMount(() => {
     const configs = getConfigurationParameters();
     registerDataSources(_dataSources, configs);
   });
-  useEffect(() => {
-    setFormState(prev => _extends({}, prev, newFormState));
-  }, [newFormState]);
+
+  // useEffect(() => {
+  // 	setFormState((prev) => ({ ...prev, ...newFormState }));
+  // }, [newFormState]);
+
   useEffect(() => {
     setFormState(prev => _extends({}, prev, {
       formContext: formContextProp
@@ -20001,19 +20216,35 @@ const DynamicForm = ({
     const [{
       formData
     }] = args;
-    setFormState(prevState => _extends({}, prevState, {
-      formData
-    }));
-    onChange == null ? void 0 : onChange(...args);
+    setFormState(prevState => {
+      return _extends({}, prevState, {
+        formData
+      });
+    });
+    _onChange == null ? void 0 : _onChange(...args);
   };
   const handleSubmit = (...args) => {
-    if (disableSubmit) {
-      return;
-    }
+    if (_disableSubmit) return;
     dispatchSubmitEvent(...args);
     const submitBlockedByCustomError = Object.values(formState.customErrorMapping).findIndex(Boolean) !== -1;
-    if (submitBlockedByCustomError) return;
-    onSubmit(...args);
+    if (submitBlockedByCustomError) {
+      let errorFields = [];
+      for (const [field, _message] of Object.entries(formState.customErrorMapping)) {
+        if (!!_message) {
+          errorFields.push(_schema.properties[field].title);
+        }
+      }
+      const pluralSuffix = errorFields.length > 1 ? "s" : "";
+      const fields = humanReadableList(errorFields);
+      const message = `Please resolve issue${pluralSuffix} on following field${pluralSuffix}: ${fields}`;
+      error(message);
+      _onError({
+        errors: formState.customErrorMapping,
+        message
+      });
+      return;
+    }
+    _onSubmit(...args);
   };
   const handleError = (...args) => {
     dispatchSubmitEvent();
@@ -20043,27 +20274,21 @@ const DynamicForm = ({
     validate: validate,
     transformErrors: transformErrorsProps || transformErrors,
     children: [renderBottom == null ? void 0 : renderBottom(), /*#__PURE__*/jsx(FormButtons, {
-      hidden: readonly || schema.readonly,
-      saveLabel: saveButtonText,
+      hidden: readonly || _schema.readonly,
+      saveLabel: _saveButtonText,
       submitStatus: submitStatus,
       showResetButton: showResetButton,
-      resetLabel: resetButtonText,
+      resetLabel: _resetButtonText,
       onReset: onReset,
       showCancelButton: showCancelButton,
-      cancelLabel: cancelButtonText,
+      cancelLabel: _cancelButtonText,
       onCancel: onCancel,
       showDeleteButton: showDeleteButton,
-      deleteLabel: deleteButtonText,
+      deleteLabel: _deleteButtonText,
       onDelete: onDelete
     })]
   }, formState.key);
 };
-DynamicForm.defaultProps = {
-  saveButtonText: "Submit",
-  cancelButtonText: "Cancel",
-  resetButtonText: "Reset",
-  disableSubmitButton: false
-};
 DynamicForm.propTypes = {
   /** JSON based schema definition for the form. */
   schema: PropTypes.object.isRequired,
@@ -20077,8 +20302,6 @@ DynamicForm.propTypes = {
   onSubmit: PropTypes.func,
   /** Error handler. */
   onError: PropTypes.func,
-  /** Urls to be used for templates of dataSource */
-  actionUrls: PropTypes.object,
   /** Additional data form custom fields can be passed as formContext */
   formContext: PropTypes.object,
   /** Shows reset button */