@rolster/react-components 18.12.8 → 18.12.9

package/dist/cjs/index.js

@@ -1118,10 +1118,17 @@ function useDatatable() {
     const [scrolleable, setScrolleable] = react.useState(false);
     const bodyRef = react.useRef(null);
     react.useEffect(() => {
-        const scrollHeight = bodyRef?.current?.scrollHeight || 0;
-        const clientHeight = bodyRef?.current?.clientHeight || 0;
-        setScrolleable(scrollHeight > clientHeight);
-    }, [bodyRef]);
+        let observer;
+        if (bodyRef?.current) {
+            observer = new ResizeObserver(() => {
+                const scrollHeight = bodyRef?.current?.scrollHeight || 0;
+                const clientHeight = bodyRef?.current?.clientHeight || 0;
+                setScrolleable(scrollHeight > clientHeight);
+            });
+            observer.observe(bodyRef?.current);
+        }
+        return () => observer?.disconnect();
+    }, []);
     return { bodyRef, scrolleable };
 }
 
@@ -1547,10 +1554,16 @@ function RlsDatatableData({ children, className, error }) {
 function RlsDatatableCell({ children, className, control, overflow }) {
     return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+function RlsDatatableTotals({ children, className, error }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsxRuntime.jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
 const controlIsValid = (props) => {
@@ -2121,7 +2134,9 @@ exports.RlsDatatable = RlsDatatable;
 exports.RlsDatatableCell = RlsDatatableCell;
 exports.RlsDatatableData = RlsDatatableData;
 exports.RlsDatatableHeader = RlsDatatableHeader;
+exports.RlsDatatableInfo = RlsDatatableInfo;
 exports.RlsDatatableTitle = RlsDatatableTitle;
+exports.RlsDatatableTotals = RlsDatatableTotals;
 exports.RlsDateField = RlsDateField;
 exports.RlsDatePicker = RlsDatePicker;
 exports.RlsDateRangeField = RlsDateRangeField;