ods-component-lib 1.18.152 → 1.18.153

package/dist/index.modern.js

@@ -35021,7 +35021,7 @@ var useStyles$2 = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    toolbarGrid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n  & .toolbar-primary-button {\n    margin-left: ", "px;\n  }\n\n  & .toolbar-dropdown-container {\n    margin-left: ", "px;\n  }\n  "])), token.margin, token.marginXXS)
+    toolbarGrid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    & .toolbar-primary-button {\n      margin-left: ", "px;\n    }\n    & .toolbar-dropdown-container {\n      margin-left: ", "px;\n    }\n    & .title-container { \n      display: flex;\n      margin: 0;\n    }\n  "])), token.margin, token.marginXXS)
   };
 });
 
@@ -35031,79 +35031,94 @@ var useOnToolbarButtonHandler = function useOnToolbarButtonHandler(_ref) {
     callback = _ref.callback;
   var _useStyles = useStyles$2(),
     styles = _useStyles.styles;
-  var onToolbarPreparing = useMemo(function () {
-    return function (e) {
-      if ((toolbarButtonGroup === null || toolbarButtonGroup === void 0 ? void 0 : toolbarButtonGroup.length) > 0) {
-        var primaryButtons = toolbarButtonGroup.slice(0, 3);
-        var additionalButtons = toolbarButtonGroup.length > 3 ? toolbarButtonGroup.slice(3) : [];
-        primaryButtons.forEach(function (button, index) {
-          var buttonContainer = document.createElement('div');
-          var rootButton = client_1(buttonContainer);
-          rootButton.render(React.createElement(React.Fragment, null, React.createElement(OdsButton, Object.assign({
-            key: index,
-            className: "toolbar-primary-button",
-            type: button.type
-          }, button.onclick && {
-            onClick: button.onclick
-          }, {
-            disabled: button.disabled
-          }), button.label)));
-          e.toolbarOptions.items.push({
-            location: 'before',
-            widget: 'dxTemplate',
-            template: function template(_, __, container) {
-              container.classList.add(styles.toolbarGrid);
-              container.appendChild(buttonContainer);
-            }
-          });
+  var initialPropsRef = useRef({
+    pageTitle: pageTitle,
+    toolbarButtonGroup: toolbarButtonGroup,
+    callback: callback
+  });
+  if (!initialPropsRef.current) {
+    initialPropsRef.current = {
+      pageTitle: pageTitle,
+      toolbarButtonGroup: toolbarButtonGroup,
+      callback: callback
+    };
+  }
+  var onToolbarPreparing = useRef(function (e) {
+    var _initialPropsRef$curr = initialPropsRef.current,
+      pageTitle = _initialPropsRef$curr.pageTitle,
+      toolbarButtonGroup = _initialPropsRef$curr.toolbarButtonGroup,
+      callback = _initialPropsRef$curr.callback;
+    if ((toolbarButtonGroup === null || toolbarButtonGroup === void 0 ? void 0 : toolbarButtonGroup.length) > 0) {
+      var primaryButtons = toolbarButtonGroup.slice(0, 3);
+      var additionalButtons = toolbarButtonGroup.length > 3 ? toolbarButtonGroup.slice(3) : [];
+      primaryButtons.forEach(function (button, index) {
+        var buttonContainer = document.createElement('div');
+        var rootButton = client_1(buttonContainer);
+        rootButton.render(React.createElement(OdsButton, Object.assign({
+          key: index,
+          className: "toolbar-primary-button",
+          type: button.type
+        }, button.onclick && {
+          onClick: button.onclick
+        }, {
+          disabled: button.disabled
+        }), button.label));
+        e.toolbarOptions.items.push({
+          location: 'before',
+          widget: 'dxTemplate',
+          template: function template(_, __, container) {
+            container.classList.add(styles.toolbarGrid);
+            container.appendChild(buttonContainer);
+          }
         });
-        if (additionalButtons.length > 0) {
-          var dropdownContainer = document.createElement('div');
-          dropdownContainer.classList.add('toolbar-dropdown-container');
-          var rootDropdown = client_1(dropdownContainer);
-          rootDropdown.render(React.createElement(React.Fragment, null, React.createElement(OdsDropdown, {
-            key: "dropdown-custom-toolbar",
-            menuItems: additionalButtons.map(function (button) {
-              return {
-                label: button.label,
-                onClick: button.onclick
-              };
-            })
-          }, React.createElement(OdsButton, {
-            type: "text",
-            icon: React.createElement(DynamicIcon, {
-              iconName: "kebabMenu"
-            })
-          }))));
-          e.toolbarOptions.items.push({
-            location: 'before',
-            widget: 'dxTemplate',
-            template: function template(_, __, container) {
-              container.classList.add(styles.toolbarGrid);
-              container.appendChild(dropdownContainer);
-            }
-          });
-        }
-      }
-      if (pageTitle) {
-        var titleContainer = document.createElement('div');
-        var rootTitle = client_1(titleContainer);
-        rootTitle.render(React.createElement(React.Fragment, null, React.createElement(OdsTitle, {
-          level: 5
-        }, pageTitle)));
-        e.toolbarOptions.items.unshift({
+      });
+      if (additionalButtons.length > 0) {
+        var dropdownContainer = document.createElement('div');
+        var rootDropdown = client_1(dropdownContainer);
+        rootDropdown.render(React.createElement(OdsDropdown, {
+          key: "dropdown-custom-toolbar",
+          menuItems: additionalButtons.map(function (button) {
+            return {
+              label: button.label,
+              onClick: button.onclick
+            };
+          })
+        }, React.createElement(OdsButton, {
+          type: "text",
+          icon: React.createElement(DynamicIcon, {
+            iconName: "kebabMenu"
+          })
+        })));
+        e.toolbarOptions.items.push({
           location: 'before',
-          cssClass: 'toolbarTitleItem',
+          widget: 'dxTemplate',
           template: function template(_, __, container) {
-            container.appendChild(titleContainer);
+            container.classList.add(styles.toolbarGrid);
+            container.appendChild(dropdownContainer);
           }
         });
       }
-      if (callback) {
-        callback(e);
-      }
-    };
-  }, [pageTitle, toolbarButtonGroup]);
+    }
+    if (pageTitle) {
+      var titleContainer = document.createElement('div');
+      var rootTitle = client_1(titleContainer);
+      rootTitle.render(React.createElement(OdsTitle, {
+        level: 5,
+        className: "title-container"
+      }, pageTitle));
+      e.toolbarOptions.items.unshift({
+        location: 'before',
+        widget: 'dxTemplate',
+        template: function template(_, __, container) {
+          container.classList.add(styles.toolbarGrid);
+          container.appendChild(titleContainer);
+        }
+      });
+    }
+    if (callback) {
+      callback(e);
+    }
+  }).current;
   return onToolbarPreparing;
 };