ods-component-lib 1.18.148 → 1.18.152

package/dist/index.modern.js

@@ -34988,6 +34988,125 @@ var DynamicIcon = function DynamicIcon(_ref) {
   return React.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 = 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)
+  };
+});
+
+var useOnToolbarButtonHandler = function useOnToolbarButtonHandler(_ref) {
+  var pageTitle = _ref.pageTitle,
+    toolbarButtonGroup = _ref.toolbarButtonGroup,
+    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);
+            }
+          });
+        });
+        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({
+          location: 'before',
+          cssClass: 'toolbarTitleItem',
+          template: function template(_, __, container) {
+            container.appendChild(titleContainer);
+          }
+        });
+      }
+      if (callback) {
+        callback(e);
+      }
+    };
+  }, [pageTitle, toolbarButtonGroup]);
+  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 = useRef(0);
@@ -35110,6 +35229,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
       props.sortingProps.onOptionChanged(e);
     }
   }, [props.dataGridRef]);
+  var handleOnToolbarPreparing = useOnToolbarButtonHandler({
+    pageTitle: props.pageTitle,
+    toolbarButtonGroup: props.toolbarButtonGroup,
+    callback: props.onToolbarPreparing
+  });
   useEffect(function () {}, [updateTrigger]);
   useEffect(function () {
     var loadFilterData = function loadFilterData() {
@@ -35268,29 +35392,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     }
     return React.createElement(React.Fragment, null, buttonElements);
   }
-  return React.createElement("div", null, props.pageTitle && React.createElement("div", {
-    style: {
-      display: "flex",
-      justifyContent: "space-between",
-      alignItems: "center",
-      marginBottom: "10px"
-    }
-  }, React.createElement("h2", null, props.pageTitle), props.toolbarButtonGroup && React.createElement("div", {
-    style: {
-      display: "flex",
-      alignItems: "center"
-    }
-  }, props.toolbarButtonGroup.map(function (button, index) {
-    return React.createElement(OdsButton, {
-      key: index,
-      type: button.type,
-      onClick: button.onClick,
-      disabled: button.disabled,
-      style: {
-        marginLeft: index > 0 ? "10px" : undefined
-      }
-    }, button.label);
-  }))), React.createElement(DataGrid$2, Object.assign({
+  return React.createElement("div", null, React.createElement(DataGrid$2, Object.assign({
     dataSource: props.dataSource,
     showBorders: true,
     repaintChangesOnly: true,
@@ -35338,7 +35440,7 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
     onOptionChanged: handleOptionChanged,
     width: "100%",
     language: props.language,
-    onToolbarPreparing: props.onToolbarPreparing,
+    onToolbarPreparing: handleOnToolbarPreparing,
     ref: props.dataGridRef
   }), React.createElement(Scrolling, {
     mode: "infinite",
@@ -35427,11 +35529,11 @@ var OdsServerSideDatagrid = function OdsServerSideDatagrid(props) {
   }, React.createElement("p", null, renderTotal())));
 };
 
-var _templateObject$r, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
-var useStyles$2 = createStyles(function (_ref) {
+var _templateObject$s, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5;
+var useStyles$3 = 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  "])))
   };
 });
@@ -35709,7 +35811,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 = useState(0),
     currentPage = _useState[0],
@@ -36998,5 +37100,5 @@ var OdsRemoteDataGrid = function OdsRemoteDataGrid(props) {
   })));
 };
 
-export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFilter, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer };
+export { DxTreeList, OdsAlert, OdsAutoComplete, OdsBadge, OdsBadgeRibbon, OdsBannerAlert, OdsBasicDataGrid, OdsBasicTable, OdsButton, OdsCalendar, OdsCard, OdsCheckbox, OdsCheckboxGroup, OdsCollapse, OdsDataGrid, OdsDateRangePicker, OdsDatepicker, OdsDisplayGrid, OdsDivider, OdsDropdown, OdsDropdownButton, OdsFileUpload, OdsFilter, OdsFilterTagView, OdsImage, OdsInlineEditDataGrid, OdsInput, OdsInputNumber, OdsLink, OdsList, OdsModal, OdsModalOld, OdsMultiSelect, OdsNotification, OdsParagraph, OdsPassword, OdsPhoneInput, OdsRadio, OdsRadioGroup, OdsRangeTimepicker, OdsRate, OdsRemoteDataGrid, OdsSearch, OdsSelect, OdsSelectableTable, OdsServerSideDatagrid, OdsSpin, OdsSwitch, OdsTab, OdsBasicTable as OdsTable, OdsTag, OdsText, OdsTextArea, OdsTimeline, OdsTimepicker, OdsTitle, OdsTransfer, useOnToolbarButtonHandler };
 //# sourceMappingURL=index.modern.js.map