@rolster/react-components 18.12.8 → 18.12.9

package/dist/es/index.js

@@ -1116,10 +1116,17 @@ function useDatatable() {
     const [scrolleable, setScrolleable] = useState(false);
     const bodyRef = useRef(null);
     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 };
 }
 
@@ -1545,10 +1552,16 @@ function RlsDatatableData({ children, className, error }) {
 function RlsDatatableCell({ children, className, control, overflow }) {
     return (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 (jsx("div", { className: renderClassStatus('rls-datatable__totals', { error }, className).trim(), children: children }));
+}
+function RlsDatatableInfo({ children, className, control, overflow }) {
+    return (jsx("div", { className: renderClassStatus('rls-datatable__info', { control, overflow }, className).trim(), children: children }));
+}
+function RlsDatatable({ children, datatable, footer, header, rlsTheme, summary }) {
     return (jsxs("div", { className: renderClassStatus('rls-datatable', {
             scrolleable: datatable?.scrolleable
-        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+        }), "rls-theme": rlsTheme, children: [jsxs("table", { children: [header && jsx("thead", { className: "rls-datatable__thead", children: header }), jsx("tbody", { ref: datatable?.bodyRef, className: "rls-datatable__tbody", children: children })] }), summary && jsx("div", { className: "rls-datatable__tsummary", children: summary }), footer && jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
 }
 
 const controlIsValid = (props) => {
@@ -2096,5 +2109,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableTitle, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
+export { ConfirmationResult, ListCollection, RlsAmount, RlsApplication, RlsAutocompleteField, RlsAutocompleteFieldTemplate, RlsAvatar, RlsBadge, RlsBallot, RlsBreadcrumb, RlsButton, RlsButtonAction, RlsButtonToggle, RlsCard, RlsCheckBox, RlsCheckBoxControl, RlsCheckBoxLabel, RlsConfirmation, RlsContext, RlsDatatable, RlsDatatableCell, RlsDatatableData, RlsDatatableHeader, RlsDatatableInfo, RlsDatatableTitle, RlsDatatableTotals, RlsDateField, RlsDatePicker, RlsDateRangeField, RlsDateRangePicker, RlsDayPicker, RlsDayRangePicker, RlsFormNavigation, RlsIcon, RlsInput, RlsInputMoney, RlsInputNumber, RlsInputPassword, RlsInputText, RlsLabel, RlsMessageIcon, RlsModal, RlsMoneyField, RlsMonthPicker, RlsMonthTitlePicker, RlsNumberField, RlsPagination, RlsPasswordField, RlsPoster, RlsProgressBar, RlsRadioButton, RlsRadioButtonLabel, RlsSearchInput, RlsSelectField, RlsSelectFieldTemplate, RlsSkeleton, RlsSkeletonText, RlsSnackbar, RlsSwitch, RlsSwitchControl, RlsSwitchLabel, RlsTabularText, RlsTextField, RlsToolbar, RlsYearPicker, renderClassStatus, useConfirmationService, useDatatable, useListControl, useSnackbarService };
 //# sourceMappingURL=index.js.map