@rolster/react-components 18.26.20 → 18.26.21

package/dist/cjs/assets/{index-BLQqmL9z.css → index-DLpY_E_c.css}

@@ -461,7 +461,7 @@
   --pvt-button-ripple-background: var(--rls-theme-font-900);
 }
 .rls-button__content--gradient {
-  --rlc-spinner-color: var(--pvt-gradiunt-font-color);
+  --rlc-spinner-color: var(--pvt-gradient-font-color);
   --pvt-button-content-font-color: var(--pvt-gradient-font-color);
   --pvt-button-content-background: var(--pvt-gradient-background);
   --pvt-button-content-border: var(--pvt-gradient-border);
@@ -2498,6 +2498,11 @@
     --rlc-datatable-font-color,
     var(--rls-app-color-900)
   );
+  --pvt-datatable-padding-component: 0rem;
+  --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
+  --pvt-datatable-table-overflow: initial;
+  --pvt-datatable-body-overflow: initial;
+  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
   --pvt-datatable-header-background: var(
     --rlc-datatable-header-background,
     var(--rls-app-color-100)
@@ -2506,9 +2511,6 @@
     --rlc-datatable-record-background,
     transparent
   );
-  --pvt-datatable-padding-component: 0rem;
-  --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
-  --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
   --pvt-datatable-floating-background: var(--rls-app-color-100);
   --rlc-amount-font-size: var(--pvt-datatable-font-size);
   --rlc-amount-width: 100%;
@@ -2538,6 +2540,11 @@
   border-radius: var(--rls-sizing-x4);
   box-sizing: border-box;
 }
+.rls-datatable--resizable {
+  --pvt-datatable-table-overflow: hidden;
+  --pvt-datatable-body-overflow: auto;
+  height: 100%;
+}
 .rls-datatable--scrolleable {
   --pvt-datatable-padding-scroll: var(--rls-sizing-x4);
   --pvt-datatable-header-padding-right: calc(
@@ -2559,7 +2566,7 @@
 .rls-datatable__table {
   display: flex;
   flex: 0 1 auto;
-  overflow: hidden;
+  overflow: var(--pvt-datatable-table-overflow);
 }
 .rls-datatable__table > table {
   display: flex;
@@ -2643,7 +2650,7 @@
   row-gap: var(--rls-sizing-x6);
   padding-right: var(--pvt-datatable-padding-scroll);
   box-sizing: border-box;
-  overflow-y: auto;
+  overflow-y: var(--pvt-datatable-body-overflow);
 }
 .rls-datatable__subheader,
 .rls-datatable__record,

package/dist/cjs/index.js

@@ -2619,13 +2619,14 @@ function useDatatable(table) {
     return { refTable, scrolleable };
 }
 
-function RlsDatatable({ children, footer, header, identifier, rlsTheme, summary, table, toolbar }) {
+function RlsDatatable({ children, footer, header, identifier, rlsTheme, resizable, summary, table, toolbar }) {
     const datatable = useDatatable(table);
     const className = require$$0.useMemo(() => {
         return renderClassStatus('rls-datatable', {
-            scrolleable: datatable?.scrolleable
+            resizable,
+            scrolleable: resizable && datatable?.scrolleable
         });
-    }, [datatable]);
+    }, [resizable, datatable.scrolleable]);
     return (jsxRuntimeExports.jsxs("div", { className: className, "rls-theme": rlsTheme, children: [toolbar && jsxRuntimeExports.jsx("div", { className: "rls-datatable__toolbar", children: toolbar }), jsxRuntimeExports.jsx("div", { className: "rls-datatable__table", children: jsxRuntimeExports.jsxs("table", { id: identifier, children: [header && jsxRuntimeExports.jsx("thead", { className: "rls-datatable__head", children: header }), jsxRuntimeExports.jsx("tbody", { ref: datatable?.refTable, className: "rls-datatable__body", children: children })] }) }), summary && jsxRuntimeExports.jsx("div", { className: "rls-datatable__summary", children: summary }), footer && jsxRuntimeExports.jsx("div", { className: "rls-datatable__footer", children: footer })] }));
 }
 function RlsDatatableHeader({ children, identifier, rlsTheme }) {