ods-component-lib 1.18.150 → 1.18.153

package/dist/components/devextreme/OdsServerSideDatagrid/OdsServerSideDatagrid.Types.d.ts

@@ -28,7 +28,7 @@ interface IExportProps {
 interface IToolbarButton {
     type: string;
     label: string;
-    onClick: () => void;
+    onclick: () => void;
     disabled?: boolean;
 }
 interface IEditingoptions extends IEditingProps {

package/dist/components/devextreme/dataGridHandlers/OnToolbarButtonHandler.d.ts

@@ -1,10 +1,7 @@
-/**
- * Handles the rendering and configuration of the toolbar for ODS DataGrid.
- * This hook prepares the toolbar based on the button configuration provided through props,
- * rendering primary and secondary buttons directly and additional buttons in a dropdown if necessary.
- *
- * @param {Object} props - The properties including configuration for toolbar buttons and the page title.
- * @returns {Function} A memoized function that configures and populates the toolbar with buttons and title.
- *   This function is intended to be used as a callback in the toolbar's preparation phase of the DataGrid component.
- */
-export declare const useOnToolbarButtonHandler: (props: any) => (e: any) => void;
+interface IOnToolbarPreparingOptions {
+    pageTitle?: string;
+    toolbarButtonGroup?: any[];
+    callback?: (e: any) => void;
+}
+export declare const useOnToolbarButtonHandler: ({ pageTitle, toolbarButtonGroup, callback }: IOnToolbarPreparingOptions) => (e: any) => void;
+export {};

package/dist/components/devextreme/dataGridStyle.d.ts

@@ -0,0 +1,3 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    toolbarGrid: import("antd-style").SerializedStyles;
+}>;

package/dist/index.js

@@ -34993,6 +34993,140 @@ var DynamicIcon = function DynamicIcon(_ref) {
   return React__default.createElement(IconComponent, null);
 };
 
+var client = createCommonjsModule(function (module, exports) {
+
+
+if (process.env.NODE_ENV === 'production') {
+  exports.createRoot = reactDom.createRoot;
+  exports.hydrateRoot = reactDom.hydrateRoot;
+} else {
+  var i = reactDom.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+  exports.createRoot = function(c, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.createRoot(c, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+  exports.hydrateRoot = function(c, h, o) {
+    i.usingClientEntryPoint = true;
+    try {
+      return reactDom.hydrateRoot(c, h, o);
+    } finally {
+      i.usingClientEntryPoint = false;
+    }
+  };
+}
+});
+var client_1 = client.createRoot;
+
+var _templateObject$r;
+var useStyles$2 = antdStyle.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    & .toolbar-dropdown-container {\n      margin-left: ", "px;\n    }\n    & .title-container { \n      display: flex;\n      margin: 0;\n    }\n  "])), token.margin, token.marginXXS)
+  };
+});
+
+var useOnToolbarButtonHandler = function useOnToolbarButtonHandler(_ref) {
+  var pageTitle = _ref.pageTitle,
+    toolbarButtonGroup = _ref.toolbarButtonGroup,
+    callback = _ref.callback;
+  var _useStyles = useStyles$2(),
+    styles = _useStyles.styles;
+  var initialPropsRef = React.useRef({
+    pageTitle: pageTitle,
+    toolbarButtonGroup: toolbarButtonGroup,
+    callback: callback
+  });
+  if (!initialPropsRef.current) {
+    initialPropsRef.current = {
+      pageTitle: pageTitle,
+      toolbarButtonGroup: toolbarButtonGroup,
+      callback: callback
+    };
+  }
+  var onToolbarPreparing = React.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__default.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');
+        var rootDropdown = client_1(dropdownContainer);
+        rootDropdown.render(React__default.createElement(OdsDropdown, {
+          key: "dropdown-custom-toolbar",
+          menuItems: additionalButtons.map(function (button) {
+            return {
+              label: button.label,
+              onClick: button.onclick
+            };
+          })
+        }, React__default.createElement(OdsButton, {
+          type: "text",
+          icon: React__default.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__default.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;
+};
+
 var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   var _props$columnResizing, _props$pagerProps$vis, _props$pagerProps, _props$pagerProps$sho, _props$pagerProps2, _props$pagerProps$sho2, _props$pagerProps3, _props$pagerProps$dis, _props$pagerProps4, _props$pagerProps$inf, _props$pagerProps5, _props$exportProps;
   var rowCount = React.useRef(0);
@@ -35115,6 +35249,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       props.sortingProps.onOptionChanged(e);
     }
   }, [props.dataGridRef]);
+  var handleOnToolbarPreparing = useOnToolbarButtonHandler({
+    pageTitle: props.pageTitle,
+    toolbarButtonGroup: props.toolbarButtonGroup,
+    callback: props.onToolbarPreparing
+  });
   React.useEffect(function () {}, [updateTrigger]);
   React.useEffect(function () {
     var loadFilterData = function loadFilterData() {
@@ -35273,29 +35412,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     }
     return React__default.createElement(React__default.Fragment, null, buttonElements);
   }
-  return React__default.createElement("div", null, props.pageTitle && React__default.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "10px"
-    }
-  }, React__default.createElement("h2", null, props.pageTitle), props.toolbarButtonGroup && React__default.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
-  }, props.toolbarButtonGroup.map(function (button, index) {
-    return React__default.createElement(OdsButton, {
-      key: index,
-      type: button.type,
-      onClick: button.onClick,
-      disabled: button.disabled,
-      style: {
-        marginLeft: index > 0 ? "10px" : undefined
-      }
-    }, button.label);
-  }))), React__default.createElement(devextremeReact.DataGrid, Object.assign({
+  return React__default.createElement("div", null, React__default.createElement(devextremeReact.DataGrid, Object.assign({
     dataSource: props.dataSource,
     showBorders: true,
     repaintChangesOnly: true,
@@ -35343,7 +35460,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     onOptionChanged: handleOptionChanged,
     width: "100%",
     language: props.language,
-    onToolbarPreparing: props.onToolbarPreparing,
+    onToolbarPreparing: handleOnToolbarPreparing,
     ref: props.dataGridRef
   }), React__default.createElement(DataGrid.Scrolling, {
     mode: "infinite",
@@ -35432,11 +35549,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   }, React__default.createElement("p", null, renderTotal())));
 };
 
-var _templateObject$r, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
-var useStyles$2 = antdStyle.createStyles(function (_ref) {
+var _templateObject$s, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
+var useStyles$3 = antdStyle.createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    grid: css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
+    grid: css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteralLoose(["\n    & .grid-cell-selected {\n      background-color: lightgreen;\n    }\n    & .grid-cell-disable-text-selection {\n      -webkit-touch-callout: none;\n      -webkit-user-select: none;\n      -khtml-user-select: none;\n      -moz-user-select: none;\n      -ms-user-select: none;\n      user-select: none;\n    }\n    & .grid-cell-disable-colored {\n      background-color: lightgray;\n    }\n    & .grid-summary-row-label {\n      font-weight: 900;\n    }\n\n    & .grid-toolbar-button-item {\n      padding: 0 !important;\n    }\n\n    & .dx-datagrid.dx-gridbase-container.dx-datagrid-borders {\n      border: none !important;\n      border-radius: 16px 16px 0 0;\n    }\n    & .dx-datagrid-borders > .dx-datagrid-filter-panel,\n    & .dx-datagrid-borders > .dx-datagrid-headers {\n      border: 0 !important;\n    }\n    & .dx-datagrid-search-panel {\n      margin-left: 0;\n    }\n    & .dx-toolbar-after .dx-toolbar-item,\n    & .dx-toolbar-after .dx-toolbar-item:last-child {\n      padding: 0;\n    }\n    & .dx-toolbar .dx-toolbar-after {\n      display: inline-flex;\n      gap: 5px;\n    }\n    .dx-datagrid-borders > .dx-datagrid-headers,\n    .dx-datagrid-borders > .dx-datagrid-rowsview,\n    .dx-datagrid-borders > .dx-datagrid-total-footer {\n      border-radius: 0;\n    }\n\n    .dx-datagrid-headers .dx-datagrid-table .dx-row > td {\n      text-align: start !important;\n    }\n\n    & .dx-column-indicators {\n      float: right !important;\n    }\n\n    .dx-header-row .dx-header-filter-indicator.dx-text-content-alignment-right, .dx-header-row .dx-sort-indicator.dx-text-content-alignment-right {\n      margin-right: 3px;\n      margin-left: unset;\n    }\n  "]))),
     gridCustomSummary: css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteralLoose(["\n    background-color: rgb(255, 255, 255);\n    border-radius: 0px 0px 16px 16px;\n    font-size: 13px;\n    text-align: unset;\n    padding: 17px 16px 3px 15px;\n    font-weight: 600;\n    border-top: 1px solid #ededed;\n  "])))
   };
 });
@@ -35714,7 +35831,7 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
     onOptionChangedFromProps = props.onOptionChanged,
     onExportingFromProps = props.onExporting,
     AllGridOptions = _objectWithoutPropertiesLoose(props, _excluded$5);
-  var _useStyles = useStyles$2(),
+  var _useStyles = useStyles$3(),
     gridStyle = _useStyles.styles;
   var _useState = React.useState(0),
     currentPage = _useState[0],
@@ -35870,113 +35987,6 @@ var OdsInlineEditDataGrid = function OdsInlineEditDataGrid(props) {
   }, React__default.createElement("p", null, renderTotal())));
 };
 
-var client = createCommonjsModule(function (module, exports) {
-
-
-if (process.env.NODE_ENV === 'production') {
-  exports.createRoot = reactDom.createRoot;
-  exports.hydrateRoot = reactDom.hydrateRoot;
-} else {
-  var i = reactDom.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  exports.createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return reactDom.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  exports.hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return reactDom.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
-});
-var client_1 = client.createRoot;
-
-var useOnToolbarButtonHandler = function useOnToolbarButtonHandler(props) {
-  var _theme$useToken = antd.theme.useToken(),
-    token = _theme$useToken.token;
-  var onToolbarPreparing = React.useMemo(function () {
-    return function (e) {
-      var toolbarButtonGroup = props.toolbarButtonGroup;
-      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__default.createElement(React__default.StrictMode, null, React__default.createElement(OdsButton, {
-          key: index,
-          style: {
-            marginLeft: token.margin
-          },
-          type: button.type,
-          onClick: function onClick() {
-            return button.onclick();
-          },
-          disabled: button.disabled
-        }, button.label)));
-        e.toolbarOptions.items.push({
-          location: 'before',
-          widget: 'dxTemplate',
-          template: function template(_, __, container) {
-            container.appendChild(buttonContainer);
-          }
-        });
-      });
-      if (additionalButtons.length > 0) {
-        var dropdownContainer = document.createElement('div');
-        dropdownContainer.style.marginLeft = '10px';
-        var rootDropdown = client_1(dropdownContainer);
-        rootDropdown.render(React__default.createElement(React__default.StrictMode, null, React__default.createElement(OdsDropdown, {
-          key: "dropdown-custom-toolbar",
-          menuItems: additionalButtons.map(function (button) {
-            return {
-              label: button.label,
-              onClick: button.onclick
-            };
-          })
-        }, React__default.createElement(OdsButton, {
-          type: "text",
-          icon: React__default.createElement(DynamicIcon, {
-            iconName: "kebabMenu"
-          })
-        }))));
-        e.toolbarOptions.items.push({
-          location: 'before',
-          widget: 'dxTemplate',
-          template: function template(_, __, container) {
-            container.appendChild(dropdownContainer);
-          }
-        });
-      }
-      var titleContainer = document.createElement('div');
-      var rootTitle = client_1(titleContainer);
-      rootTitle.render(React__default.createElement(React__default.StrictMode, null, React__default.createElement(OdsTitle, {
-        level: 5,
-        style: {
-          display: "flex",
-          alignItems: "center",
-          alignSelf: "stretch",
-          margin: 0
-        }
-      }, props.pageTitle)));
-      e.toolbarOptions.items.unshift({
-        location: 'before',
-        cssClass: 'toolbarTitleItem',
-        template: function template(_, __, container) {
-          container.appendChild(titleContainer);
-        }
-      });
-    };
-  }, [props.toolbarButtonGroup, props.pageTitle, token.margin]);
-  return onToolbarPreparing;
-};
-
 var checkCellSelectionConstraints$1 = function checkCellSelectionConstraints(e) {
   return e.rowType == "data" && e.columnIndex > -1 && e.rowIndex > -1;
 };