@vitrosoftware/common-ui-ts 1.1.49 → 1.1.51

package/dist/index.js

@@ -195,6 +195,8 @@ CTRL.QUOTATION_MARK = '\'';
 CTRL.ZERO = '0';
 CTRL.ASTERISK = '*';
 
+var styles = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-separator":"_breadcrumbs_vitro-separator_3RKZZBc","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
+
 var Item = function Item(props) {
   var onClick = function onClick() {
     if (props.onClick) {
@@ -202,12 +204,15 @@ var Item = function Item(props) {
     }
   };
   return React__default.createElement("li", {
-    onClick: onClick,
     className: props.className || CTRL.EMPTY
-  }, props.text);
+  }, React__default.createElement("div", {
+    onClick: onClick
+  }, props.children), props.isShowSeparator && React__default.createElement("div", {
+    className: styles['vitro-separator']
+  }));
 };
 
-var styles = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3HXSt5u"};
+var styles$1 = {"vitro-scrollbar-content":"_scrollbar_vitro-scrollbar-content_3HXSt5u"};
 
 var w = window;
 var ScrollBar = function ScrollBar(props) {
@@ -247,7 +252,7 @@ var ScrollBar = function ScrollBar(props) {
   return React__default.createElement("div", {
     ref: ref
   }, React__default.createElement("div", {
-    className: styles['vitro-scrollbar-content']
+    className: styles$1['vitro-scrollbar-content']
   }, element && props.children));
 };
 
@@ -265,8 +270,6 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["CONTEXTMENU"] = "contextmenu";
 })(exports.EVENT || (exports.EVENT = {}));
 
-var styles$1 = {"vitro-breadcrumbs":"_breadcrumbs_vitro-breadcrumbs_3r4NcQY","vitro-breadcrumbs-list-wrap":"_breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0","vitro-breadcrumbs-list":"_breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ","vitro-breadcrumbs-button":"_breadcrumbs_vitro-breadcrumbs-button_3fazq3c","vitro-root":"_breadcrumbs_vitro-root_1S5-6AY","vitro-drop-down-list":"_breadcrumbs_vitro-drop-down-list_2PhrR2a"};
-
 var Breadcrumbs = function Breadcrumbs(props) {
   var _useState = React.useState([]),
     displayItemList = _useState[0],
@@ -369,7 +372,7 @@ var Breadcrumbs = function Breadcrumbs(props) {
     setWindowWidth(window.innerWidth);
   };
   var clickOutside = function clickOutside(e) {
-    if (menuRef.current && !menuRef.current.contains(e.target) && e.target.className !== styles$1['vitro-breadcrumbs-button']) {
+    if (menuRef.current && !menuRef.current.contains(e.target) && e.target.className !== styles['vitro-breadcrumbs-button']) {
       setDropDown(false);
     }
   };
@@ -380,43 +383,45 @@ var Breadcrumbs = function Breadcrumbs(props) {
   var showDropdownMenu = function showDropdownMenu() {
     setDropDown(!dropDown);
   };
-  var titleClassName = styles$1['vitro-site-name'] + CTRL.SPACE + (displayItemList.length ? styles$1['opened'] : styles$1['closed']);
+  var titleClassName = styles['vitro-site-name'] + CTRL.SPACE + (displayItemList.length ? styles['opened'] : styles['closed']);
   return React__default.createElement("div", {
-    className: styles$1['vitro-breadcrumbs']
+    className: styles['vitro-breadcrumbs']
   }, props.text ? React__default.createElement("h2", {
     className: titleClassName
   }, props.text) : null, React__default.createElement("div", {
-    className: styles$1['vitro-breadcrumbs-list-wrap']
+    className: styles['vitro-breadcrumbs-list-wrap']
   }, React__default.createElement("ul", {
-    className: styles$1['vitro-breadcrumbs-list']
-  }, displayItemList.map(function (item) {
+    className: styles['vitro-breadcrumbs-list']
+  }, displayItemList.map(function (item, i) {
     return React__default.createElement(Item, {
-      text: item.text,
       id: item.id,
       onClick: function onClick() {
         return onItemClick(item);
-      }
-    });
+      },
+      isShowSeparator: i !== displayItemList.length - 1
+    }, item.text);
   })), dropdownItemList.length ? React__default.createElement("div", {
     onClick: showDropdownMenu,
-    className: styles$1['vitro-breadcrumbs-button']
+    className: styles['vitro-breadcrumbs-button']
   }) : null, !props.wrapRoot && rootItem ? React__default.createElement(Item, {
     id: rootItem.id,
     onClick: function onClick() {
       return onItemClick(rootItem);
     },
-    className: styles$1['vitro-root']
-  }) : null), dropDown && dropdownItemList.length > 0 && React__default.createElement("div", {
-    className: styles$1['vitro-drop-down-list'],
+    isShowSeparator: true
+  }, React__default.createElement("div", {
+    className: styles['vitro-root']
+  })) : null), dropDown && dropdownItemList.length > 0 && React__default.createElement("div", {
+    className: styles['vitro-drop-down-list'],
     ref: menuRef
-  }, React__default.createElement("ul", null, React__default.createElement(ScrollBar, null, dropdownItemList.map(function (item) {
+  }, React__default.createElement("ul", null, React__default.createElement(ScrollBar, null, dropdownItemList.map(function (item, i) {
     return React__default.createElement(Item, {
-      text: item.text,
       id: item.id,
       onClick: function onClick() {
         return onItemClick(item);
-      }
-    });
+      },
+      isShowSeparator: false
+    }, item.text);
   })))));
 };
 
@@ -60591,7 +60596,7 @@ var REGEXP;
 var styles$f = {"vitro-control":"_input_vitro-control_1DmPFkF","vitro-focus":"_input_vitro-focus_1txynr8","vitro-label":"_input_vitro-label_2XBESiY","vitro-read-only":"_input_vitro-read-only_3f-cBbK","vitro-error":"_input_vitro-error_1T3dLzB","vitro-left-label":"_input_vitro-left-label_D9Fpvpd","vitro-error-text":"_input_vitro-error-text_QpZK56k","vitro-button-copy":"_input_vitro-button-copy_jjyktjx"};
 
 var PX_UNIT$2 = 'px';
-var Input = function Input(props) {
+var Input = React.forwardRef(function (props, ref) {
   var control;
   var localeSeparator = 1.1.toLocaleString()[1];
   var secondLocaleSeparator = localeSeparator === CTRL.COMMA ? CTRL.DOT : CTRL.COMMA;
@@ -60608,7 +60613,7 @@ var Input = function Input(props) {
   var _useState4 = React.useState(CTRL.EMPTY),
     state = _useState4[0],
     setState = _useState4[1];
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   React.useEffect(function () {
     if (props.value) {
       updateValue(props.value, true);
@@ -60628,6 +60633,15 @@ var Input = function Input(props) {
     if (props.maxHeight) jsonStyle.maxHeight = props.maxHeight + PX_UNIT$2;
     setStyle(jsonStyle);
   }, [props.height, props.minHeight, props.maxHeight]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var updateValue = function updateValue(value, isInit) {
     var newValue = sourceValue;
     if (!props.number) {
@@ -60682,15 +60696,24 @@ var Input = function Input(props) {
   var copyValue = function copyValue() {
     navigator.clipboard.writeText(inputValue);
   };
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 13 && !e.shiftKey) {
+      e.preventDefault();
+      e.target.blur();
+    }
+    if (props.onKeyDown) {
+      props.onKeyDown(e);
+    }
+  };
   var remainHeight = function remainHeight() {
-    if (ref && ref.current && props.onChangeSize) {
-      props.onChangeSize(ref.current.offsetHeight);
+    if (inputRef && inputRef.current && props.onChangeSize) {
+      props.onChangeSize(inputRef.current.offsetHeight);
     }
     window.removeEventListener(exports.EVENT.MOUSEUP, remainHeight);
   };
   if (props.isMultiline) {
     control = React__default.createElement("textarea", {
-      ref: ref,
+      ref: inputRef,
       readOnly: props.isReadOnly,
       disabled: props.isDisabled,
       name: props.name,
@@ -60699,7 +60722,7 @@ var Input = function Input(props) {
       required: props.isRequired,
       value: inputValue ? inputValue : CTRL.EMPTY,
       onKeyPress: props.onKeyPress,
-      onKeyDown: props.onKeyDown,
+      onKeyDown: onKeyDown,
       onChange: onChange,
       onMouseDown: onResize,
       onBlur: onBlur,
@@ -60708,7 +60731,7 @@ var Input = function Input(props) {
     });
   } else {
     var input = React__default.createElement("input", {
-      ref: ref,
+      ref: inputRef,
       readOnly: props.isReadOnly,
       disabled: props.isDisabled,
       type: props.type,
@@ -60719,7 +60742,7 @@ var Input = function Input(props) {
       required: props.isRequired,
       onBlur: onBlur,
       onKeyPress: props.onKeyPress,
-      onKeyDown: props.onKeyDown,
+      onKeyDown: onKeyDown,
       onFocus: onFocus,
       autoComplete: props.isAutoComplete ? AUTOCOMPLETE.ON : AUTOCOMPLETE.OFF
     });
@@ -60755,7 +60778,7 @@ var Input = function Input(props) {
   }) : null, props.children, props.errorMessage && React__default.createElement("span", {
     className: styles$f['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$g = {"vitro-issue-tile-footer":"_issue-tile-footer_vitro-issue-tile-footer_KtHOieL","vitro-issue-tile-status":"_issue-tile-footer_vitro-issue-tile-status_3OjC56L","vitro-status-color":"_issue-tile-footer_vitro-status-color_hhLb22J","vitro-button-more":"_issue-tile-footer_vitro-button-more_1RyVAeR"};
 
@@ -61259,12 +61282,12 @@ var LABEL_POSITION;
 var styles$m = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-button-copy":"_date-picker_vitro-button-copy_1cGY1Uu","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-text":"_date-picker_vitro-error-text_15CdrRj"};
 
 var $$3 = window.$;
-var DatePicker = function DatePicker(props) {
+var DatePicker = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
     state = _useState[0],
     setState = _useState[1];
   var container = React.useRef(null);
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   var componentName = 'kendoDatePicker';
   React.useEffect(function () {
     var config = {
@@ -61310,27 +61333,78 @@ var DatePicker = function DatePicker(props) {
     if (config.value) {
       config.value = new Date(config.value);
     }
-    $$3(ref.current).kendoDatePicker(config);
-    var picker = $$3(ref.current).data(componentName);
+    $$3(inputRef.current).kendoDatePicker(config);
+    var picker = $$3(inputRef.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
-  }, [ref]);
+  }, [inputRef]);
   React.useEffect(function () {
     if (props.value) {
-      $$3(ref.current).data(componentName).value(new Date(props.value));
+      $$3(inputRef.current).data(componentName).value(new Date(props.value));
     } else {
-      $$3(ref.current).data(componentName).value(props.value);
+      $$3(inputRef.current).data(componentName).value(null);
+      $$3(inputRef.current).data(componentName).setOptions({
+        dateInput: true
+      });
     }
   }, [props.value]);
   React.useEffect(function () {
-    if (props.minValue) $$3(ref.current).data(componentName).min(props.minValue);
+    $$3(inputRef.current).data(componentName).setOptions({
+      change: function change(e) {
+        if (props.onChange) {
+          props.onChange(e.sender.value(), props.name);
+        }
+      }
+    });
+  }, [props.onChange]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      disableDates: function disableDates(date) {
+        if (!props.isWorkDay) {
+          return false;
+        }
+        return props.isWorkDay(date);
+      }
+    });
+  }, [props.isWorkDay]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      open: function open(e) {
+        onFocus();
+        if (props.onOpen) {
+          props.onOpen(e, $$3(container.current));
+        }
+      }
+    });
+  }, [props.onOpen]);
+  React.useEffect(function () {
+    $$3(inputRef.current).data(componentName).setOptions({
+      close: function close(e) {
+        onBlur();
+        if (props.onClose) {
+          props.onClose(e.sender.value(), props.name);
+        }
+      }
+    });
+  }, [props.onClose]);
+  React.useEffect(function () {
+    if (props.minValue) $$3(inputRef.current).data(componentName).min(props.minValue);
   }, [props.minValue]);
   React.useEffect(function () {
-    if (props.maxValue) $$3(ref.current).data(componentName).max(props.maxValue);
+    if (props.maxValue) $$3(inputRef.current).data(componentName).max(props.maxValue);
   }, [props.maxValue]);
   React.useEffect(function () {
     props.errorMessage ? setState(styles$m['vitro-error']) : setState(CTRL.EMPTY);
   }, [props.errorMessage]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var onFocus = function onFocus() {
     setState(styles$m['vitro-focus']);
   };
@@ -61359,7 +61433,7 @@ var DatePicker = function DatePicker(props) {
     width: props.labelWidth,
     className: styles$m['vitro-label']
   }), React__default.createElement("input", {
-    ref: ref,
+    ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
@@ -61372,7 +61446,7 @@ var DatePicker = function DatePicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$m['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var FORMAT;
 (function (FORMAT) {
@@ -61394,15 +61468,15 @@ var COMPONENT_TYPE;
 var styles$n = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-button-copy":"_time-picker_vitro-button-copy_QZg3bTW","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-text":"_time-picker_vitro-error-text_2BNoBKW"};
 
 var $$4 = window.$;
-var TimePicker = function TimePicker(props) {
+var TimePicker = React.forwardRef(function (props, ref) {
   var _useState = React.useState(CTRL.EMPTY),
     state = _useState[0],
     setState = _useState[1];
   var container = React.useRef(null);
-  var ref = React.useRef(null);
+  var inputRef = React.useRef(null);
   var componentName = 'kendoTimePicker';
   React.useEffect(function () {
-    $$4(ref.current).kendoTimePicker({
+    $$4(inputRef.current).kendoTimePicker({
       format: props.format || FORMAT.HH_MM,
       componentType: COMPONENT_TYPE.MODERN,
       culture: props.culture || CULTURE$1.RU,
@@ -61429,13 +61503,22 @@ var TimePicker = function TimePicker(props) {
         appendTo: $$4(container.current)
       }
     });
-    var picker = $$4(ref.current).data(componentName);
+    var picker = $$4(inputRef.current).data(componentName);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
-  }, [ref]);
+  }, [inputRef]);
   React.useEffect(function () {
-    $$4(ref.current).data(componentName).value(props.value);
+    $$4(inputRef.current).data(componentName).value(props.value);
   }, [props.value]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var onFocus = function onFocus() {
     setState(styles$n['vitro-focus']);
   };
@@ -61464,7 +61547,7 @@ var TimePicker = function TimePicker(props) {
     width: props.labelWidth,
     className: styles$n['vitro-label']
   }), React__default.createElement("input", {
-    ref: ref,
+    ref: inputRef,
     placeholder: props.placeholder,
     onFocus: onFocus,
     onBlur: onBlur
@@ -61477,7 +61560,7 @@ var TimePicker = function TimePicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$n['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$o = {"vitro-selected-item-multi":"_lookup-picker-selected-item_vitro-selected-item-multi_bzL7ugZ","vitro-selected-item":"_lookup-picker-selected-item_vitro-selected-item_hw-euth","vitro-button-close":"_lookup-picker-selected-item_vitro-button-close_1SRnr_0"};
 
@@ -61570,7 +61653,7 @@ var LOCALE$4;
 var styles$q = {"vitro-lookup-picker":"_lookup-picker_vitro-lookup-picker_1aXYQEG","vitro-content":"_lookup-picker_vitro-content_37L0slb","vitro-focus":"_lookup-picker_vitro-focus_2UGpxXD","vitro-label":"_lookup-picker_vitro-label_2QoJkUz","vitro-read-only":"_lookup-picker_vitro-read-only_32NOdGB","vitro-error":"_lookup-picker_vitro-error_dF7iopC","vitro-error-text":"_lookup-picker_vitro-error-text_273lqvD","vitro-button-copy":"_lookup-picker_vitro-button-copy_2UIHHZD","vitro-right":"_lookup-picker_vitro-right_1XFsL1w","vitro-button-close":"_lookup-picker_vitro-button-close_3_Qndrj","vitro-button-collapse-up":"_lookup-picker_vitro-button-collapse-up_3i0OJub","vitro-button-collapse-bottom":"_lookup-picker_vitro-button-collapse-bottom_3o0Pl83"};
 
 var $$5 = window.$;
-var LookupPicker = function LookupPicker(props) {
+var LookupPicker = React.forwardRef(function (props, ref) {
   var createDefaultSelectedValueList = props.selectedValueList ? props.selectedValueList : props.selectedValue ? [props.selectedValue] : [];
   var _useState = React.useState(true),
     pending = _useState[0],
@@ -61639,6 +61722,15 @@ var LookupPicker = function LookupPicker(props) {
       setSelectedValueList([]);
     }
   }, [props.selectedValue]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      }
+    };
+  });
   var onInputValueUpdated = function onInputValueUpdated() {
     if ((inputValue || inputValue === CTRL.EMPTY) && inputValue.length >= props.filterMinLength) {
       if (props.valueList) {
@@ -61843,7 +61935,7 @@ var LookupPicker = function LookupPicker(props) {
   }), props.errorMessage && React__default.createElement("span", {
     className: styles$q['vitro-error-text']
   }, props.errorMessage));
-};
+});
 
 var styles$r = {"vitro-command-menu":"_command-menu_vitro-command-menu_l82vtIh"};
 
@@ -64036,7 +64128,8 @@ var UserProfile = function UserProfile(props) {
 
 var styles$E = {"vitro-avatar":"_user-lookup-picker_vitro-avatar_2vI-SeH"};
 
-var UserLookupPicker = function UserLookupPicker(props) {
+var UserLookupPicker = React.forwardRef(function (props, ref) {
+  var lookupPickerRef = React.useRef(null);
   var getHtmlValueTemplateProps = function getHtmlValueTemplateProps(item) {
     var prop = props.getHtmlValueTemplateProps(item);
     if (props.isMultiSelect) {
@@ -64046,11 +64139,21 @@ var UserLookupPicker = function UserLookupPicker(props) {
     }
     return prop;
   };
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        if (lookupPickerRef.current) {
+          lookupPickerRef.current.focus();
+        }
+      }
+    };
+  });
   return React__default.createElement(LookupPicker, Object.assign({}, props, {
     htmlValueTemplate: Avatar,
-    getHtmlValueTemplateProps: getHtmlValueTemplateProps
+    getHtmlValueTemplateProps: getHtmlValueTemplateProps,
+    ref: lookupPickerRef
   }));
-};
+});
 
 var styles$F = {"vitro-title":"_activity_vitro-title_1rdvvaa","vitro-dropdown-button":"_activity_vitro-dropdown-button_12258nJ","vitro-activity":"_activity_vitro-activity_1u7YeF3"};
 
@@ -64651,13 +64754,18 @@ var Input$1 = function Input(props) {
   }))));
 };
 
-var FieldIterator = function FieldIterator(props) {
+var FieldIterator = React.forwardRef(function (props, ref) {
   var _useState = React.useState([]),
     controlList = _useState[0],
     setControlList = _useState[1];
   var changedFieldValueMap = React.useMemo(function () {
     return new Map();
   }, []);
+  var focusStatus = React.useMemo(function () {
+    return {
+      focus: false
+    };
+  }, []);
   var saveStatus = React.useMemo(function () {
     return {
       isSaving: false
@@ -64688,6 +64796,31 @@ var FieldIterator = function FieldIterator(props) {
   React.useEffect(function () {
     setErrorMessage();
   }, [props.errorControlList]);
+  React.useEffect(function () {
+    if (focusStatus.focus) {
+      var firstActiveControl = getFirstActiveControl();
+      if (firstActiveControl && firstActiveControl.ref && firstActiveControl.ref.current) {
+        if (firstActiveControl.ref.current.focus) {
+          firstActiveControl.ref.current.focus();
+        }
+        focusStatus.focus = false;
+      }
+    }
+  });
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var firstActiveControl = getFirstActiveControl();
+        if (firstActiveControl && firstActiveControl.ref && firstActiveControl.ref.current) {
+          if (firstActiveControl.ref.current.focus) {
+            firstActiveControl.ref.current.focus();
+          }
+        } else {
+          focusStatus.focus = true;
+        }
+      }
+    };
+  });
   var updateControlList = function updateControlList() {
     if (props.fieldValueMap) {
       var _loop = function _loop() {
@@ -64707,6 +64840,14 @@ var FieldIterator = function FieldIterator(props) {
       }
     }
   };
+  var getFirstActiveControl = function getFirstActiveControl() {
+    if (controlList && controlList.length) {
+      return controlList.find(function (x) {
+        return !x.isReadOnly && !x.isDisabled;
+      });
+    }
+    return null;
+  };
   var isControlRow = function isControlRow(controlName) {
     if (props.rowFieldList) {
       return props.rowFieldList.includes(controlName);
@@ -64732,7 +64873,8 @@ var FieldIterator = function FieldIterator(props) {
         return onChangeControl(value, name);
       },
       isRow: isControlRow(field.internalName),
-      field: field
+      field: field,
+      ref: React.createRef()
     };
     return control;
   };
@@ -64792,7 +64934,7 @@ var FieldIterator = function FieldIterator(props) {
     }
     return null;
   })));
-};
+});
 
 var styles$N = {"vitro-search":"_search_vitro-search_QkJksC_","vitro-settings-dialog":"_search_vitro-settings-dialog_1_c5bIg","vitro-filter":"_search_vitro-filter_2n-Y-mS","vitro-add-field":"_search_vitro-add-field_2hHt1Z2","vitro-add-field-button":"_search_vitro-add-field-button_30hdXYn","vitro-add-field-dialog":"_search_vitro-add-field-dialog_3gC92SF","vitro-footer":"_search_vitro-footer_1-ya4xk","vitro-button-cancel":"_search_vitro-button-cancel_1M8UkMM"};