@vitrosoftware/common-ui-ts 1.1.162 → 1.1.164

package/dist/index.js

@@ -547,6 +547,8 @@ var ScrollBar = function ScrollBar(props) {
   EVENT["COMMANDMENU_TOGGLE"] = "vitro.commandmenu.toggle";
   EVENT["PDFVIEWER_PAN_START"] = "vitro.pdfviewer.pan.start";
   EVENT["CHANGE"] = "change";
+  EVENT["TOUCHEND"] = "touchend";
+  EVENT["TOUCHMOVE"] = "touchmove";
 })(exports.EVENT || (exports.EVENT = {}));
 
 (function (MOBILE_VIEW) {
@@ -20737,9 +20739,14 @@ var JsTreeViewContextImpl = /*#__PURE__*/function () {
   return JsTreeViewContextImpl;
 }();
 
-var styles$3 = {"vitro-tree-view":"_tree-view_vitro-tree-view_3oii-CW"};
+var styles$3 = {"vitro-tree-view":"_tree-view_vitro-tree-view_3oii-CW","vitro-arrow-right":"_tree-view_vitro-arrow-right_dVxSsID"};
 
 var CSS_CLASS_JSTREE_NODE = 'jstree-node';
+var CSS_CLASS_TREE_VIEW = 'vitro-tree-view';
+var CSS_CLASS_ARROW_RIGHT = 'vitro-arrow-right';
+var CSS_CLASS_ROOT = 'vitro-root-node';
+var PROP_LI_ATTR = 'li_attr';
+var PROP_STATE = 'state';
 var TreeView = function TreeView(props) {
   var _useState = React.useState(),
     config = _useState[0],
@@ -20784,7 +20791,7 @@ var TreeView = function TreeView(props) {
     }
   }, [jsTreeTreeView]);
   var init = function init() {
-    config.core.data = props.getData;
+    config.core.data = getData;
     jquery(jsTreeRef.current).jstree(config);
     var jsTree = jquery(jsTreeRef.current);
     jsTreeView = new JsTreeViewContextImpl(jsTree);
@@ -20801,6 +20808,30 @@ var TreeView = function TreeView(props) {
       props.onInit(jsTreeView);
     }
   };
+  var getData = function getData(obj, cb) {
+    props.getData(obj, function (childNodes) {
+      callback(obj, childNodes, cb);
+    });
+  };
+  var callback = function callback(obj, childNodes, cb) {
+    if (obj.id === CTRL.SHARP && !props.isRootCanCollapse) {
+      if (childNodes && childNodes.length) {
+        childNodes.forEach(function (item) {
+          if (!item.hasOwnProperty(PROP_LI_ATTR)) {
+            item.li_attr = {};
+          }
+          item.li_attr["class"] = item.li_attr["class"] ? item.li_attr["class"] + CTRL.SPACE + CSS_CLASS_ROOT : CSS_CLASS_ROOT;
+          if (!item.hasOwnProperty(PROP_STATE)) {
+            item.state = {};
+          }
+          item.state.checkbox_disabled = true;
+          item.state.opened = true;
+          item.state.selected = props.isCheckboxSelect ? false : true;
+        });
+      }
+    }
+    cb.call(obj, childNodes);
+  };
   var checkNode = function checkNode(e, treeView) {
     e.preventDefault();
     e.stopPropagation();
@@ -20825,7 +20856,7 @@ var TreeView = function TreeView(props) {
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     ref: jsTreeRef,
     id: props.id,
-    className: styles$3['vitro-tree-view']
+    className: styles$3[CSS_CLASS_TREE_VIEW] + (props.isExpandButtonRight ? CTRL.SPACE + styles$3[CSS_CLASS_ARROW_RIGHT] : CTRL.EMPTY)
   }));
 };
 
@@ -21401,6 +21432,11 @@ var PART_TYPE;
 (function (PART_TYPE) {
   PART_TYPE["SIDE_BUTTON"] = "SideButton";
 })(PART_TYPE || (PART_TYPE = {}));
+var PART;
+(function (PART) {
+  PART["SIDE"] = "Side";
+  PART["CONTENT"] = "Content";
+})(PART || (PART = {}));
 var TARGET;
 (function (TARGET) {
   TARGET["OUTSIDE"] = "Outside";
@@ -21475,6 +21511,7 @@ var TableViewConstants = {
     get BUTTON () { return BUTTON; },
     get MENU_NAME () { return MENU_NAME; },
     get PART_TYPE () { return PART_TYPE; },
+    get PART () { return PART; },
     get TARGET () { return TARGET; },
     get MENU_ALIGN () { return MENU_ALIGN; },
     get DEF_ROW () { return DEF_ROW; },
@@ -21997,12 +22034,24 @@ var TreeGrid = function TreeGrid(props) {
       }
     }
     if (visibleColumnNameList && visibleColumnNameList.length) {
+      initGanttVisibleColumnList(tableView, visibleColumnNameList);
       var visibleColumnNameListJson = JSON.stringify(visibleColumnNameList);
       var _value = "VisibleColumnList='" + visibleColumnNameListJson + "'";
       newData = initData(newData, _value, 'B');
     }
     return newData;
   };
+  var initGanttVisibleColumnList = function initGanttVisibleColumnList(tableView, visibleColumnNameList) {
+    if (tableView.ganttCol) {
+      var ganttColumnList = ["GanttStart", "GanttEnd", "GanttDescendants", "GanttAncestors", "GanttMinStart", "GanttMaxEnd"];
+      for (var _i = 0, _ganttColumnList = ganttColumnList; _i < _ganttColumnList.length; _i++) {
+        var col = _ganttColumnList[_i];
+        if (tableView.ganttCol[col]) {
+          visibleColumnNameList.push(tableView.ganttCol[col]);
+        }
+      }
+    }
+  };
   var onGridLoaded = function onGridLoaded(g, next) {
     g.IsReadOnly = props.readOnly;
     if (props.layout || props.data) {
@@ -61727,7 +61776,8 @@ var DropdownButton = function DropdownButton(props) {
   })), React__default.createElement(BootstrapDropdown.Menu, {
     renderOnMount: false,
     flip: props.isFlip !== false,
-    style: props.menuStyle || {}
+    style: props.menuStyle || {},
+    popperConfig: props.popperConfig || {}
   }, React__default.createElement(ScrollBar, null, itemList.map(function (x) {
     return React__default.createElement(BootstrapDropdown.Item, {
       key: x.key,
@@ -62051,22 +62101,117 @@ var CSS_CLASS_ACTIVE = 'active';
 var CSS_CLASS_TAB_BUTTON_GROUP = 'vitro-tab-button-group';
 var CSS_CLASS_TAB_BUTTON_GROUP_CONTENT = 'vitro-tab-button-group-content';
 var TabButtonGroup = function TabButtonGroup(props) {
-  var _useState = React.useState(),
-    activeItem = _useState[0],
-    setActiveItem = _useState[1];
+  var _useState = React.useState([]),
+    tabList = _useState[0],
+    setTabList = _useState[1];
+  var _useState2 = React.useState(),
+    activeItem = _useState2[0],
+    setActiveItem = _useState2[1];
+  var _useState3 = React.useState(),
+    activeItemTabBtn = _useState3[0],
+    setActiveItemTabBtn = _useState3[1];
+  var _useState4 = React.useState(0),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var ref = React.useRef(null);
+  var overflowTabList = [];
+  var tabMinWidth = 120;
+  var resizeObserver = new window.ResizeObserver(function (entries) {
+    for (var _iterator = _createForOfIteratorHelperLoose(entries), _step; !(_step = _iterator()).done;) {
+      var entry = _step.value;
+      if (ref.current && entry.target === ref.current) {
+        if (!width || props.wrap) {
+          setWidth(ref.current.offsetWidth);
+        }
+      }
+    }
+  });
   React.useEffect(function () {
-    var _props$itemList$;
-    var _activeItem = props.activeItem ? props.activeItem : (_props$itemList$ = props.itemList[0]) === null || _props$itemList$ === void 0 ? void 0 : _props$itemList$.id;
-    setActiveItem(_activeItem);
+    if (ref.current) {
+      resizeObserver.observe(ref.current);
+    }
+  }, [ref]);
+  React.useEffect(function () {
+    return function () {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  React.useEffect(function () {
+    if (props.itemList) {
+      var list = props.itemList.map(function (item, index) {
+        return _extends({}, item, {
+          index: index
+        });
+      });
+      var isActiveItemChanged = props.activeItem != activeItem;
+      setTabList(list);
+      setActiveItem(props.activeItem);
+      if (props.activeItem) {
+        var itemTabBtn = tabList.find(function (item) {
+          return item.id === props.activeItem;
+        });
+        if (itemTabBtn) {
+          if (isActiveItemChanged) {
+            var overflowItem = overflowTabList.find(function (item) {
+              return item.index === itemTabBtn.index;
+            });
+            if (overflowItem) {
+              setActiveItemTabBtn(overflowItem);
+            } else {
+              setActiveItemTabBtn(null);
+            }
+          }
+        } else {
+          setActiveItemTabBtn(null);
+        }
+      } else {
+        setActiveItemTabBtn(null);
+      }
+    }
+  }, [props.itemList]);
+  React.useEffect(function () {
+    var isActiveItemChanged = props.activeItem != activeItem;
+    setActiveItem(props.activeItem);
+    if (props.activeItem) {
+      var itemTabBtn = tabList.find(function (item) {
+        return item.id === props.activeItem;
+      });
+      if (itemTabBtn) {
+        if (isActiveItemChanged) {
+          var overflowItem = overflowTabList.find(function (item) {
+            return item.index === itemTabBtn.index;
+          });
+          if (overflowItem) {
+            setActiveItemTabBtn(overflowItem);
+          } else {
+            setActiveItemTabBtn(null);
+          }
+        }
+      } else {
+        setActiveItemTabBtn(null);
+      }
+    } else {
+      setActiveItemTabBtn(null);
+    }
   }, [props.activeItem]);
   var setButtonActive = function setButtonActive(index) {
-    var _activeItem = props.itemList[index] ? props.itemList[index] : props.itemList[0];
+    var overflowItem = overflowTabList.find(function (item) {
+      return item.index === index;
+    });
+    if (overflowItem) {
+      setActiveItemTabBtn(overflowItem);
+    } else {
+      setActiveItemTabBtn(null);
+    }
+    var _activeItem = tabList.find(function (item) {
+      return item.index === index;
+    });
     setActiveItem(_activeItem.id);
     props.onChange(_activeItem);
   };
   var isTabButtonActive = function isTabButtonActive(index) {
-    var _props$itemList$index;
-    return ((_props$itemList$index = props.itemList[index]) === null || _props$itemList$index === void 0 ? void 0 : _props$itemList$index.id) == activeItem;
+    var _tabList$index;
+    return ((_tabList$index = tabList[index]) === null || _tabList$index === void 0 ? void 0 : _tabList$index.id) == activeItem;
   };
   var getTabButton = function getTabButton(item, index) {
     return React__default.createElement(Button$2, {
@@ -62078,12 +62223,38 @@ var TabButtonGroup = function TabButtonGroup(props) {
       }
     });
   };
+  var getWidth = function getWidth() {
+    var count = tabList.length - overflowTabList.length;
+    var _width = width - count * 16;
+    return _width >= tabMinWidth ? _width : tabMinWidth;
+  };
   return React__default.createElement("div", {
     className: styles$u[CSS_CLASS_TAB_BUTTON_GROUP]
   }, React__default.createElement("div", {
-    className: styles$u[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT]
-  }, props.itemList.map(function (item, index) {
-    return getTabButton(item, index);
+    className: styles$u[CSS_CLASS_TAB_BUTTON_GROUP_CONTENT],
+    ref: ref
+  }, tabList.map(function (item, index) {
+    if ((activeItemTabBtn ? index + 2 : index + 1) * tabMinWidth < getWidth() || !props.wrap) {
+      if (activeItemTabBtn && activeItemTabBtn.index === index) {
+        setActiveItemTabBtn(null);
+      }
+      return getTabButton(item, index);
+    }
+    if (activeItemTabBtn && activeItemTabBtn.index === index) {
+      return null;
+    }
+    overflowTabList.push(item);
+    return null;
+  }), activeItemTabBtn && React__default.createElement(Button$2, {
+    key: activeItemTabBtn.id,
+    className: styles$u[CSS_CLASS_ACTIVE],
+    text: activeItemTabBtn.text,
+    onClick: function onClick() {}
+  }), tabList && props.wrap && React__default.createElement(OverflowButton, {
+    list: overflowTabList,
+    offset: tabList.length - overflowTabList.length,
+    width: width,
+    onSelect: setButtonActive
   })));
 };
 
@@ -63317,7 +63488,7 @@ var Viewer = function Viewer(props) {
 };
 
 var name = "@vitrosoftware/common-ui-ts";
-var version$1 = "1.1.162";
+var version$1 = "1.1.164";
 var description = "vitro software common ui ts";
 var author = "";
 var license = "MIT";
@@ -64167,7 +64338,17 @@ var LABEL_POSITION;
   LABEL_POSITION["LEFT"] = "left";
 })(LABEL_POSITION || (LABEL_POSITION = {}));
 
-var styles$P = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-copy-button":"_date-picker_vitro-copy-button_SvhKTCG","vitro-control-container":"_date-picker_vitro-control-container_2CVwecs","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-message":"_date-picker_vitro-error-message_3VKrJgj"};
+(function (PLACEMENT) {
+  PLACEMENT["TOP"] = "top";
+  PLACEMENT["BOTTOM"] = "bottom";
+  PLACEMENT["LEFT"] = "left";
+  PLACEMENT["RIGHT"] = "right";
+  PLACEMENT["AUTO"] = "auto";
+  PLACEMENT["START"] = "start";
+  PLACEMENT["END"] = "end";
+})(exports.PLACEMENT || (exports.PLACEMENT = {}));
+
+var styles$P = {"vitro-control":"_date-picker_vitro-control_2AYXegb","vitro-display-none":"_date-picker_vitro-display-none_2wJx8XG","vitro-copy-button":"_date-picker_vitro-copy-button_SvhKTCG","vitro-read-only":"_date-picker_vitro-read-only_2NZoMN5","vitro-label":"_date-picker_vitro-label_2jh9qxb","vitro-focus":"_date-picker_vitro-focus_2cJKcKr","vitro-error":"_date-picker_vitro-error_3DkgZiN","vitro-left-label":"_date-picker_vitro-left-label_ZFhZFS9","vitro-error-message":"_date-picker_vitro-error-message_3VKrJgj","vitro-calendar-container":"_date-picker_vitro-calendar-container_-q52RLa"};
 
 var $$4 = window.$;
 var DatePicker = React.forwardRef(function (props, ref) {
@@ -64179,14 +64360,13 @@ var DatePicker = React.forwardRef(function (props, ref) {
     state = _useState2[0],
     setState = _useState2[1];
   var controlRef = React.useRef(null);
-  var containerRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var componentName = 'kendoDatePicker';
   React.useEffect(function () {
-    if (containerRef.current && inputRef.current) {
+    if (inputRef.current) {
       init();
     }
-  }, [inputRef, containerRef]);
+  }, [inputRef]);
   React.useEffect(function () {
     if (ready) {
       if (props.value) {
@@ -64232,6 +64412,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     };
   });
   var init = function init() {
+    var _picker$dateView, _picker$dateView$popu, _picker$dateView$popu2;
     var config = getConfig();
     if (props.minValue) {
       config.min = props.minValue;
@@ -64244,6 +64425,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
     }
     $$4(inputRef.current).kendoDatePicker(config);
     var picker = $$4(inputRef.current).data(componentName);
+    (_picker$dateView = picker.dateView) === null || _picker$dateView === void 0 ? void 0 : (_picker$dateView$popu = _picker$dateView.popup) === null || _picker$dateView$popu === void 0 ? void 0 : (_picker$dateView$popu2 = _picker$dateView$popu.element) === null || _picker$dateView$popu2 === void 0 ? void 0 : _picker$dateView$popu2.addClass(styles$P['vitro-calendar-container']);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
     setReady(true);
@@ -64257,6 +64439,11 @@ var DatePicker = React.forwardRef(function (props, ref) {
       depth: props.depth,
       format: props.format,
       animation: false,
+      popup: {
+        appendTo: props.popupConteiner,
+        position: props.position || exports.PLACEMENT.TOP + CTRL.SPACE + exports.PLACEMENT.RIGHT,
+        origin: props.origin || exports.PLACEMENT.BOTTOM + CTRL.SPACE + exports.PLACEMENT.RIGHT
+      },
       disableDates: function disableDates(date) {
         if (!props.isWorkDay) {
           return false;
@@ -64273,11 +64460,6 @@ var DatePicker = React.forwardRef(function (props, ref) {
         onClose(e);
       }
     };
-    if (props.isFlipDropdown) {
-      config.popup = {
-        appendTo: $$4(containerRef.current)
-      };
-    }
     return config;
   };
   var setOptions = function setOptions(options) {
@@ -64298,7 +64480,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
   var onOpen = function onOpen(e) {
     onFocus(e);
     if (props.onOpen) {
-      props.onOpen(e, $$4(containerRef.current));
+      props.onOpen(e, props.popupConteiner);
     }
   };
   var onClose = function onClose(e) {
@@ -64340,10 +64522,7 @@ var DatePicker = React.forwardRef(function (props, ref) {
   }), props.isReadOnly ? React__default.createElement(CopyButton, {
     className: styles$P['vitro-copy-button'],
     value: ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString()) || CTRL.EMPTY
-  }) : null, React__default.createElement("div", {
-    ref: containerRef,
-    className: styles$P['vitro-control-container']
-  }), props.errorMessage && React__default.createElement(ErrorMessage, {
+  }) : null, props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
     className: styles$P['vitro-error-message']
   }));
@@ -64366,7 +64545,7 @@ var COMPONENT_TYPE;
   COMPONENT_TYPE["MODERN"] = "modern";
 })(COMPONENT_TYPE || (COMPONENT_TYPE = {}));
 
-var styles$Q = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-copy-button":"_time-picker_vitro-copy-button_aJZAh9q","vitro-control-container":"_time-picker_vitro-control-container_3ys3rMN","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-message":"_time-picker_vitro-error-message_1w7ey-y"};
+var styles$Q = {"vitro-control":"_time-picker_vitro-control_1sx07It","vitro-display-none":"_time-picker_vitro-display-none_3GgWh46","vitro-copy-button":"_time-picker_vitro-copy-button_aJZAh9q","vitro-read-only":"_time-picker_vitro-read-only_NlE18Zm","vitro-label":"_time-picker_vitro-label_2b97aCy","vitro-focus":"_time-picker_vitro-focus_wmhPjvE","vitro-error":"_time-picker_vitro-error_2ZmK0I5","vitro-left-label":"_time-picker_vitro-left-label_3NRmFYH","vitro-error-message":"_time-picker_vitro-error-message_1w7ey-y","vitro-timepicker-container":"_time-picker_vitro-timepicker-container_3AoRPvV"};
 
 var $$5 = window.$;
 var TimePicker = React.forwardRef(function (props, ref) {
@@ -64378,11 +64557,10 @@ var TimePicker = React.forwardRef(function (props, ref) {
     state = _useState2[0],
     setState = _useState2[1];
   var controlRef = React.useRef(null);
-  var containerRef = React.useRef(null);
   var inputRef = React.useRef(null);
   var componentName = 'kendoTimePicker';
   React.useEffect(function () {
-    if (containerRef.current && inputRef.current) {
+    if (inputRef.current) {
       init();
     }
   }, [inputRef]);
@@ -64401,9 +64579,11 @@ var TimePicker = React.forwardRef(function (props, ref) {
     };
   });
   var init = function init() {
+    var _picker$timeView, _picker$timeView$popu, _picker$timeView$popu2;
     var config = getConfig();
     $$5(inputRef.current).kendoTimePicker(config);
     var picker = $$5(inputRef.current).data(componentName);
+    (_picker$timeView = picker.timeView) === null || _picker$timeView === void 0 ? void 0 : (_picker$timeView$popu = _picker$timeView.popup) === null || _picker$timeView$popu === void 0 ? void 0 : (_picker$timeView$popu2 = _picker$timeView$popu.element) === null || _picker$timeView$popu2 === void 0 ? void 0 : _picker$timeView$popu2.addClass(styles$Q['vitro-timepicker-container']);
     picker.enable(!props.isDisabled);
     picker.readonly(props.isReadOnly === true);
     setReady(true);
@@ -64416,6 +64596,11 @@ var TimePicker = React.forwardRef(function (props, ref) {
       value: props.value,
       animation: false,
       dateInput: true,
+      popup: {
+        appendTo: props.popupConteiner,
+        position: props.position || exports.PLACEMENT.TOP + CTRL.SPACE + exports.PLACEMENT.RIGHT,
+        origin: props.origin || exports.PLACEMENT.BOTTOM + CTRL.SPACE + exports.PLACEMENT.RIGHT
+      },
       change: function change(e) {
         onChange(e);
       },
@@ -64426,25 +64611,18 @@ var TimePicker = React.forwardRef(function (props, ref) {
         onClose(e);
       }
     };
-    if (props.isFlipDropdown) {
-      config.popup = {
-        appendTo: $$5(containerRef.current)
-      };
-    } else {
-      $$5('.k-animation-container').addClass(styles$Q['vitro-control-container']);
-    }
     return config;
   };
   var onOpen = function onOpen(e) {
     onFocus(e);
     if (props.onOpen) {
-      props.onOpen(e, $$5(containerRef.current));
+      props.onOpen(e, props.popupConteiner);
     }
   };
   var onClose = function onClose(e) {
     onBlur(e);
     if (props.onClose) {
-      props.onClose(e, $$5(containerRef.current));
+      props.onClose(e, props.popupConteiner);
     }
   };
   var onChange = function onChange(e) {
@@ -64491,10 +64669,7 @@ var TimePicker = React.forwardRef(function (props, ref) {
   }), props.isReadOnly ? React__default.createElement(CopyButton, {
     className: styles$Q['vitro-copy-button'],
     value: ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.toString()) || CTRL.EMPTY
-  }) : null, React__default.createElement("div", {
-    ref: containerRef,
-    className: styles$Q['vitro-control-container']
-  }), props.errorMessage && React__default.createElement(ErrorMessage, {
+  }) : null, props.errorMessage && React__default.createElement(ErrorMessage, {
     text: props.errorMessage,
     className: styles$Q['vitro-error-message']
   }));
@@ -64566,16 +64741,6 @@ var ValueListItem = function ValueListItem(props) {
   }));
 };
 
-(function (PLACEMENT) {
-  PLACEMENT["TOP"] = "top";
-  PLACEMENT["BOTTOM"] = "bottom";
-  PLACEMENT["LEFT"] = "left";
-  PLACEMENT["RIGHT"] = "right";
-  PLACEMENT["AUTO"] = "auto";
-  PLACEMENT["START"] = "start";
-  PLACEMENT["END"] = "end";
-})(exports.PLACEMENT || (exports.PLACEMENT = {}));
-
 var FLAG = 'gi';
 var ValueList = function ValueList(props) {
   var _useState = React.useState(null),
@@ -65146,7 +65311,7 @@ var CommandMenuDropdownButton = function CommandMenuDropdownButton(props) {
   }), props.children)));
 };
 
-var styles$X = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-arrow":"_sidebar-item_vitro-arrow_NaAiOHu","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob"};
+var styles$X = {"vitro-item":"_sidebar-item_vitro-item_1BR_7F0","vitro-image":"_sidebar-item_vitro-image_2A82YI0","vitro-item-text":"_sidebar-item_vitro-item-text_1kK_aIZ","vitro-active":"_sidebar-item_vitro-active_7p5iOhY","vitro-hover":"_sidebar-item_vitro-hover_1mECzme","vitro-group-item":"_sidebar-item_vitro-group-item_ZADCctV","vitro-item-list":"_sidebar-item_vitro-item-list_17dWov1","vitro-arrow":"_sidebar-item_vitro-arrow_NaAiOHu","vitro-expanded":"_sidebar-item_vitro-expanded_3qb1vOx","vitro-collapsed":"_sidebar-item_vitro-collapsed_2EhVmXL","vitro-display-none":"_sidebar-item_vitro-display-none_2WwKi5v","vitro-scrollbar":"_sidebar-item_vitro-scrollbar___xylIx","vitro-button-close":"_sidebar-item_vitro-button-close_2Kdf-ob","vitro-sidebar-group-slideup-panel":"_sidebar-item_vitro-sidebar-group-slideup-panel_15tkxuO"};
 
 var Item$2 = function Item(props) {
   var _useState = React.useState(false),
@@ -65360,6 +65525,8 @@ var SlideUpPanel = function SlideUpPanel(props) {
 };
 
 var WIDTH_AUTO$1 = 'auto';
+var CSS_CLASS_SLIDE_UP_PANEL = 'vitro-sidebar-group-slideup-panel';
+var CSS_CLASS_ITEM_LIST_MOBILE = 'vitro-sidebar-item-list-mobile';
 var GroupItem = function GroupItem(props) {
   var _useState = React.useState(false),
     isHover = _useState[0],
@@ -65396,6 +65563,9 @@ var GroupItem = function GroupItem(props) {
     if (props.isMobileView && !getIsActiveChildItem()) {
       props.setActiveItem(!isExpanded ? props.id : CTRL.EMPTY);
     }
+    if (props.isMobileView && !isExpanded && props.onCloseTreeSlideUpPanel) {
+      props.onCloseTreeSlideUpPanel();
+    }
     setIsExpanded(!isExpanded);
   };
   var getIsActiveChildItem = function getIsActiveChildItem() {
@@ -65459,6 +65629,12 @@ var GroupItem = function GroupItem(props) {
       isDisabled: props.isDisabled
     }, i)) : null;
   }));
+  var onCloseSlideUpPanel = function onCloseSlideUpPanel() {
+    setIsExpanded(false);
+    if (props.isMobileView && !getIsActiveChildItem()) {
+      props.setActiveItem(!isExpanded ? props.id : CTRL.EMPTY);
+    }
+  };
   return React__default.createElement(React__default.Fragment, null, React__default.createElement("li", {
     style: {
       width: props.linkItemWidth ? props.linkItemWidth + UNIT.PX : WIDTH_AUTO$1
@@ -65486,12 +65662,13 @@ var GroupItem = function GroupItem(props) {
   })), props.isMobileView ? React__default.createElement(SlideUpPanel, {
     isShow: isExpanded,
     container: props.container,
-    onClose: function onClose() {
-      return props.setActiveItem(CTRL.EMPTY);
-    }
+    onClose: onCloseSlideUpPanel,
+    className: styles$X[CSS_CLASS_SLIDE_UP_PANEL]
   }, React__default.createElement(ScrollBar, {
     className: styles$X['vitro-scrollbar']
-  }, content)) : React__default.createElement("ul", {
+  }, React__default.createElement("ul", {
+    className: styles$X[CSS_CLASS_ITEM_LIST_MOBILE]
+  }, content))) : React__default.createElement("ul", {
     className: styles$X['vitro-item-list'] + CTRL.SPACE + (props.isSidebarExpanded ? !isExpanded ? styles$X['vitro-display-none'] : CTRL.EMPTY : styles$X['vitro-display-none'])
   }, content)));
 };
@@ -65507,7 +65684,7 @@ var CustomItem = function CustomItem(props) {
   React.useEffect(function () {
     var isActive = getIsActive();
     setIsActive(isActive);
-    props.setActiveItem(isActive ? props.id : CTRL.EMPTY);
+    props.setActiveItem(isActive ? props.id : props.activeItem || CTRL.EMPTY);
   }, [props.activeItem, props.currentUrl]);
   var onClick = function onClick(e) {
     if (props.onClick) {
@@ -65589,7 +65766,8 @@ var Section = function Section(props) {
         key: i.text,
         currentUrl: props.currentUrl,
         isMobileView: props.isMobileView,
-        isDisabled: props.isDisabled
+        isDisabled: props.isDisabled,
+        onCloseTreeSlideUpPanel: props.onCloseTreeSlideUpPanel
       }, i));
     }
     return null;
@@ -65614,7 +65792,8 @@ var SectionList = React.forwardRef(function (props, ref) {
       isMobileView: props.isMobileView,
       container: props.container,
       setActiveItem: props.setActiveItem,
-      isDisabled: props.isDisabled
+      isDisabled: props.isDisabled,
+      onCloseTreeSlideUpPanel: props.onCloseTreeSlideUpPanel
     }, section));
   }));
 });
@@ -65744,7 +65923,8 @@ var Sidebar = function Sidebar(props) {
     linkItemWidth: linkItemWidth,
     isExpanded: !props.sidebar,
     isMobileView: isMobileView,
-    isDisabled: props.isDisabled
+    isDisabled: props.isDisabled,
+    onCloseTreeSlideUpPanel: props.onCloseTreeSlideUpPanel
   }), React__default.createElement(Item$2, {
     text: props.logoText,
     imageUrl: props.logo,
@@ -67568,7 +67748,10 @@ var AddFieldButton = React.forwardRef(function (props, ref) {
     ref: addFieldButtonRef,
     text: props.labelAddField,
     onClick: props.onAddField,
-    className: styles$1m['vitro-add-field-button']
+    className: styles$1m['vitro-add-field-button'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY),
+    imageUrl: props.imageUrl,
+    imageHoverUrl: props.imageHoverUrl,
+    imageClassName: props.imageClassName
   }), React__default.createElement(Overlay$2, {
     isShow: props.isShowAddFieldDialog,
     isFlip: props.isMobileView,
@@ -83537,8 +83720,9 @@ var Switch = function Switch(props) {
   }));
 };
 
-var styles$1L = {"vitro-editable-list":"_editable-list_vitro-editable-list_2y8aXbO","vitro-header":"_editable-list_vitro-header_3ilVZhe","vitro-create-button":"_editable-list_vitro-create-button_3E1aQDB","vitro-editable-item":"_editable-list_vitro-editable-item_cWSWi1n","vitro-active":"_editable-list_vitro-active_39PUrSM","vitro-button-container":"_editable-list_vitro-button-container_1okfn08","vitro-dropdown-button":"_editable-list_vitro-dropdown-button_vPtNQxA","vitro-display-none":"_editable-list_vitro-display-none_1nqU_hD"};
+var styles$1L = {"vitro-editable-list":"_editable-list_vitro-editable-list_2y8aXbO","vitro-header":"_editable-list_vitro-header_3ilVZhe","vitro-create-button":"_editable-list_vitro-create-button_3E1aQDB","vitro-editable-item":"_editable-list_vitro-editable-item_cWSWi1n","vitro-active":"_editable-list_vitro-active_39PUrSM","vitro-button-container":"_editable-list_vitro-button-container_1okfn08","vitro-dropdown-button":"_editable-list_vitro-dropdown-button_vPtNQxA","vitro-display-none":"_editable-list_vitro-display-none_1nqU_hD","vitro-mobile":"_editable-list_vitro-mobile_2IDiwft","vitro-editable-item-icon":"_editable-list_vitro-editable-item-icon_29jFw_f","vitro-editable-item-label":"_editable-list_vitro-editable-item-label_3ViAKDq","vitro-header-mobile":"_editable-list_vitro-header-mobile_2EMihKc"};
 
+var CSS_CLASS_MOBILE = 'vitro-mobile';
 var EditableItem = function EditableItem(props) {
   var _useState = React.useState(props.text),
     text = _useState[0],
@@ -83581,15 +83765,31 @@ var EditableItem = function EditableItem(props) {
     onMouseLeave: function onMouseLeave() {
       return setIsHover(false);
     },
-    className: styles$1L['vitro-editable-item'] + (props.isActive ? CTRL.SPACE + styles$1L['vitro-active'] : CTRL.EMPTY)
-  }, props.isEditMode ? React__default.createElement("input", {
+    className: styles$1L['vitro-editable-item'] + (props.isActive ? CTRL.SPACE + styles$1L['vitro-active'] : CTRL.EMPTY) + (props.isMobileView ? CTRL.SPACE + styles$1L[CSS_CLASS_MOBILE] : CTRL.EMPTY)
+  }, props.isMobileView && props.button ? props.button : null, props.isMobileView && props.icon ? React__default.createElement("span", {
+    className: styles$1L['vitro-editable-item-icon']
+  }, React__default.createElement("img", {
+    src: props.icon
+  })) : null, props.isMobileView ? React__default.createElement(Label, {
+    text: props.text || text,
+    className: styles$1L['vitro-editable-item-label']
+  }) : props.isEditMode ? React__default.createElement("input", {
     value: text,
     onChange: onChange,
     onBlur: onBlur,
     autoFocus: true
   }) : React__default.createElement(Label, {
     text: props.text || text
-  }), React__default.createElement("div", {
+  }), props.isMobileView ? React__default.createElement("div", {
+    className: styles$1L['vitro-button-container']
+  }, dropdownItemList && dropdownItemList.length ? React__default.createElement(DropdownButton, {
+    itemList: dropdownItemList,
+    onToggle: onToggleDropdownButton,
+    isShow: props.isDropdownActive,
+    className: styles$1L['vitro-dropdown-button'],
+    isFlip: true,
+    popperConfig: props.popperConfig
+  }) : null) : React__default.createElement("div", {
     className: styles$1L['vitro-button-container']
   }, dropdownItemList && dropdownItemList.length ? React__default.createElement(DropdownButton, {
     itemList: dropdownItemList,
@@ -83639,13 +83839,15 @@ var EditableList = function EditableList(props) {
   React.useEffect(function () {
     changedFieldValueMap.clear();
   }, [props.itemList]);
-  var onClick = function onClick(item) {
-    setActiveItem(item.id);
-    changedFieldValueMap.clear();
+  var onClick = function onClick(item, isTargetDropDownBtn) {
+    if (!props.isMobileView || !isTargetDropDownBtn) {
+      setActiveItem(item.id);
+      changedFieldValueMap.clear();
+    }
     if (item.id !== editedItem && item.id !== activeItem) {
       setEditedItem(null);
       if (props.onClick) {
-        props.onClick(item);
+        props.onClick(item, isTargetDropDownBtn);
       }
     }
   };
@@ -83671,7 +83873,7 @@ var EditableList = function EditableList(props) {
   var _onToggleDropdown = function onToggleDropdown(item, state) {
     if (state) {
       setActiveDropdownItemId(item.id);
-      onClick(item);
+      onClick(item, true);
     } else {
       setActiveDropdownItemId(undefined);
     }
@@ -83679,7 +83881,7 @@ var EditableList = function EditableList(props) {
   return React__default.createElement(FlexBox, {
     className: styles$1L['vitro-editable-list'] + (props.className ? CTRL.SPACE + props.className : CTRL.EMPTY)
   }, React__default.createElement(FlexBox, {
-    className: styles$1L['vitro-header']
+    className: styles$1L['vitro-header'] + (props.isMobileView ? CTRL.SPACE + styles$1L['vitro-header-mobile'] : CTRL.EMPTY)
   }, props.title && React__default.createElement(Heading, {
     tag: TAG.H3,
     text: props.title
@@ -83706,7 +83908,10 @@ var EditableList = function EditableList(props) {
         isEditMode: editedItem === item.id,
         isDropdownActive: activeDropdownItemId === item.id,
         button: props.getItemButton ? props.getItemButton(item) : null,
-        getDropdownItemList: props.getDropdownItemList
+        getDropdownItemList: props.getDropdownItemList,
+        isMobileView: props.isMobileView,
+        icon: props.itemIcon,
+        popperConfig: props.popperConfig
       }));
     },
     onClick: onClick
@@ -83718,7 +83923,9 @@ var EditableList = function EditableList(props) {
       return props.newItem && _onBlur(props.newItem, value);
     },
     isActive: props.isActiveNewItem === false ? false : true,
-    isEditMode: props.isActiveNewItem === false ? false : true
+    isEditMode: props.isActiveNewItem === false ? false : true,
+    isMobileView: props.isMobileView,
+    icon: props.itemIcon
   })));
 };
 
@@ -83762,6 +83969,14 @@ var ReorderableItem = function ReorderableItem(props) {
     }
     props.onMouseDown(e, props.index, width);
   };
+  var onTouchStart = function onTouchStart(e) {
+    var width = 0;
+    if (ref.current && buttonRef.current) {
+      var _ref$current2, _buttonRef$current2;
+      width = ((_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.getBoundingClientRect().width) - ((_buttonRef$current2 = buttonRef.current) === null || _buttonRef$current2 === void 0 ? void 0 : _buttonRef$current2.getBoundingClientRect().width);
+    }
+    props.onTouchStart(e, props.index, width);
+  };
   if (props.isDragged) {
     return null;
   }
@@ -83773,7 +83988,8 @@ var ReorderableItem = function ReorderableItem(props) {
     ref: buttonRef,
     onClick: function onClick() {},
     onMouseDown: onMouseDown,
-    className: styles$1M['vitro-drag-button']
+    className: styles$1M['vitro-drag-button'],
+    onTouchStart: onTouchStart
   }), props.children), props.isDropAllowed !== false && React__default.createElement("div", {
     style: {
       width: props.draggedItemWidth ? props.draggedItemWidth - 16 + UNIT.PX : undefined
@@ -83798,6 +84014,9 @@ var ReorderableList = function ReorderableList(props) {
   var _useState5 = React.useState(0),
     draggedItemWidth = _useState5[0],
     setDraggedItemWidth = _useState5[1];
+  var _useState6 = React.useState(false),
+    isTouchEnd = _useState6[0],
+    setIsTouchEnd = _useState6[1];
   var startPosition = React.useRef([0, 0]);
   var isDragged = React.useRef(false);
   React.useEffect(function () {
@@ -83852,6 +84071,12 @@ var ReorderableList = function ReorderableList(props) {
   React.useEffect(function () {
     setItemList(props.itemList.sort(sort));
   }, [props.itemList]);
+  React.useEffect(function () {
+    if (isTouchEnd) {
+      reorderOnTouchEnd();
+      setIsTouchEnd(false);
+    }
+  }, [isTouchEnd]);
   var sort = function sort(a, b) {
     if (a.index < b.index) {
       return -1;
@@ -83894,6 +84119,45 @@ var ReorderableList = function ReorderableList(props) {
   var reorderList = function reorderList(list, startIndex, endIndex) {
     if (startIndex < endIndex) return reorderForward(list.slice(), startIndex, endIndex);else if (startIndex > endIndex) return reorderBackward(list.slice(), startIndex, endIndex);else return list;
   };
+  var onTouchStart = function onTouchStart(e, index, width) {
+    var _e$target2;
+    isDragged.current = true;
+    var parentRect = (_e$target2 = e.target) === null || _e$target2 === void 0 ? void 0 : _e$target2.offsetParent.getBoundingClientRect();
+    startPosition.current = [parentRect.left, parentRect.top];
+    setPosition([e.touches[0].clientX - startPosition.current[0], e.touches[0].clientY - startPosition.current[1]]);
+    setActiveDropZoneIndex(index);
+    setDraggedIndex(index);
+    setDraggedItemWidth(width);
+    e.changedTouches[0].target.addEventListener(exports.EVENT.TOUCHMOVE, onTouchMove);
+    e.changedTouches[0].target.addEventListener(exports.EVENT.TOUCHEND, onTouchEnd);
+  };
+  var onTouchMove = function onTouchMove(e) {
+    if (isDragged.current) {
+      setPosition([e.touches[0].clientX - startPosition.current[0], e.touches[0].clientY - startPosition.current[1]]);
+    }
+  };
+  var onTouchEnd = function onTouchEnd(e) {
+    if (e.changedTouches[0].target) {
+      e.changedTouches[0].target.removeEventListener(exports.EVENT.TOUCHMOVE, onTouchMove);
+      e.changedTouches[0].target.removeEventListener(exports.EVENT.TOUCHEND, onTouchEnd);
+    }
+    setIsTouchEnd(true);
+  };
+  var reorderOnTouchEnd = function reorderOnTouchEnd() {
+    if (draggedIndex !== null) {
+      isDragged.current = false;
+      setDraggedIndex(null);
+      var reorderedList = reorderList(itemList, draggedIndex, activeDropZoneIndex).map(function (val, index) {
+        return _extends({}, val, {
+          index: index
+        });
+      });
+      setItemList(reorderedList);
+      if (props.onChange) {
+        props.onChange(reorderedList);
+      }
+    }
+  };
   var getItem = function getItem(item, isDropAllowed) {
     if (item) {
       return React__default.createElement(ReorderableItem, Object.assign({}, item, {
@@ -83901,7 +84165,8 @@ var ReorderableList = function ReorderableList(props) {
         onMouseDown: onMouseDown,
         draggedItemWidth: draggedItemWidth,
         isDropZoneActive: !(draggedIndex === null || activeDropZoneIndex !== item.index + 1),
-        isDragged: draggedIndex === item.index
+        isDragged: draggedIndex === item.index,
+        onTouchStart: onTouchStart
       }), React__default.createElement(props.itemTemplate, _extends({}, item)));
     }
     return null;