@rolster/react-components 18.12.6 → 18.12.8

package/dist/esm/components/atoms/Badge/Badge.css

@@ -0,0 +1,18 @@
+.rls-badge {
+  position: relative;
+  display: inline-block;
+  width: auto;
+  padding: var(--sizing-x2);
+  box-sizing: border-box;
+  font-size: var(--caption-font-size);
+  letter-spacing: var(--caption-letter-spacing);
+  line-height: var(--caption-line-height);
+  color: var(--color-rolster-500);
+  background: var(--color-rolster-100);
+  border-radius: var(--sizing-x2);
+}
+.rls-badge > span {
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}

package/dist/esm/components/atoms/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import { RlsComponent } from '../../definitions';
+import './Badge.css';
+export declare function RlsBadge({ children, rlsTheme }: RlsComponent): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/atoms/Badge/Badge.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Badge.css';
+export function RlsBadge({ children, rlsTheme }) {
+    return (_jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+}
+//# sourceMappingURL=Badge.js.map

package/dist/esm/components/atoms/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../../../src/components/atoms/Badge/Badge.tsx"],"names":[],"mappings":";AACA,OAAO,aAAa,CAAC;AAErB,MAAM,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAgB;IAC3D,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,eAAY,QAAQ,YAC3C,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/atoms/index.d.ts

@@ -1,5 +1,6 @@
 export * from './Amount/Amount';
 export * from './Avatar/Avatar';
+export * from './Badge/Badge';
 export * from './Breadcrumb/Breadcrumb';
 export * from './Button/Button';
 export * from './ButtonAction/ButtonAction';

package/dist/esm/components/atoms/index.js

@@ -1,5 +1,6 @@
 export * from './Amount/Amount';
 export * from './Avatar/Avatar';
+export * from './Badge/Badge';
 export * from './Breadcrumb/Breadcrumb';
 export * from './Button/Button';
 export * from './ButtonAction/ButtonAction';

package/dist/esm/components/atoms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/atoms/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,iBAAiB,CAAC;AAChC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css

@@ -53,12 +53,13 @@
   overflow-x: hidden;
   z-index: var(--z-index-2);
   background: var(--background-theme-500);
-  border: var(--border-3) solid var(--color-rolster-300);
+  border: var(--border-1-rolster-500);
   transform: var(--rls-button-toggle-ul-transform);
   transform-origin: 0% 0%;
   transition: transform 240ms 0ms var(--standard-curve),
     opacity 240ms 0ms var(--standard-curve);
   will-change: opacity, transform;
+  box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
 }
 .rls-button-toggle__list ul li {
   padding: 0rem var(--sizing-x6);
@@ -66,8 +67,8 @@
   height: var(--sizing-x20);
   line-height: var(--sizing-x20);
   cursor: default;
-  font-weight: var(--font-weight-bold);
-  font-size: 6.6rem;
+  font-weight: var(--font-weight-semibold);
+  font-size: 6rem;
   letter-spacing: 0.825px;
   text-transform: uppercase;
   color: var(--color-theme-300);

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.d.ts

@@ -7,10 +7,11 @@ export interface ButtonToggleOption {
     value: string;
 }
 interface ButtonToggleProps extends RlsComponent {
+    onAction: (value: string) => void;
     options: ButtonToggleOption[];
     type: ButtonType;
+    automatic?: boolean;
     disabled?: boolean;
-    onAction?: (value: string) => void;
 }
-export declare function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }: ButtonToggleProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }: ButtonToggleProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js

@@ -3,14 +3,14 @@ import { useEffect, useRef, useState } from 'react';
 import { renderClassStatus } from '../../../helpers/css';
 import { RlsButton } from '../../atoms';
 import './ButtonToggle.css';
-export function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
-    const contentRef = useRef(null);
+export function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
+    const componentRef = useRef(null);
     const [firstAction] = options;
     const [action, setAction] = useState(firstAction);
     const [visible, setVisible] = useState(false);
     useEffect(() => {
         function onCloseMenu({ target }) {
-            if (!contentRef?.current?.contains(target)) {
+            if (!componentRef?.current?.contains(target)) {
                 setVisible(false);
             }
         }
@@ -25,16 +25,13 @@ export function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction })
     function onSelectAction(action) {
         setAction(action);
         setVisible(false);
+        if (automatic) {
+            onAction(action.value);
+        }
     }
-    return (_jsxs("div", { className: "rls-button-toggle", ref: contentRef, "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-button-toggle__content", children: [action && (_jsx("div", { className: "rls-button-toggle__action", children: _jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
-                                if (onAction) {
-                                    onAction(action.value);
-                                }
-                            }, children: action.label }) })), _jsx("div", { className: "rls-button-toggle__icon", children: _jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), _jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
+    return (_jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-button-toggle__content", children: [action && (_jsx("div", { className: "rls-button-toggle__action", children: _jsx(RlsButton, { disabled: disabled, type: type, onClick: () => onAction(action.value), children: action.label }) })), _jsx("div", { className: "rls-button-toggle__icon", children: _jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), _jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
                     visible,
                     hide: !visible
-                }), children: _jsx("ul", { children: options.map((action, index) => (_jsx("li", { className: "truncate", onClick: () => {
-                            onSelectAction(action);
-                        }, children: action.label }, index))) }) })] }));
+                }), children: _jsx("ul", { children: options.map((action, index) => (_jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
 }
 //# sourceMappingURL=ButtonToggle.js.map

package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonToggle/ButtonToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAc,SAAS,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAc5B,MAAM,UAAU,eAAe,CAAC,EAC9B,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACU;IAClB,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAE9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,EAAE,MAAM,EAAO;YAClC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC3C,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,WAAW;QAClB,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,cAAc,CAAC,MAA0B;QAChD,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;IACpB,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,UAAU,eAAa,QAAQ,aACrE,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE;gCACZ,IAAI,QAAQ,EAAE,CAAC;oCACb,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gCACzB,CAAC;4BACH,CAAC,YAEA,MAAM,CAAC,KAAK,GACH,GACR,CACP,EAED,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,GACE,IACF,EAEN,cACE,SAAS,EAAE,iBAAiB,CAAC,yBAAyB,EAAE;oBACtD,OAAO;oBACP,IAAI,EAAE,CAAC,OAAO;iBACf,CAAC,YAEF,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aACE,SAAS,EAAC,UAAU,EAEpB,OAAO,EAAE,GAAG,EAAE;4BACZ,cAAc,CAAC,MAAM,CAAC,CAAC;wBACzB,CAAC,YAEA,MAAM,CAAC,KAAK,IALR,KAAK,CAMP,CACN,CAAC,GACC,GACD,IACF,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ButtonToggle.js","sourceRoot":"","sources":["../../../../../src/components/molecules/ButtonToggle/ButtonToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAc,SAAS,EAAE,MAAM,aAAa,CAAC;AAEpD,OAAO,oBAAoB,CAAC;AAe5B,MAAM,UAAU,eAAe,CAAC,EAC9B,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,QAAQ,EACU;IAClB,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,CAAC,WAAW,CAAC,GAAG,OAAO,CAAC;IAE9B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAClD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,WAAW,CAAC,EAAE,MAAM,EAAO;YAClC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC7C,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,CAAC;QAED,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QAEhD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACrD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,WAAW;QAClB,UAAU,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;IACxC,CAAC;IAED,SAAS,cAAc,CAAC,MAA0B;QAChD,SAAS,CAAC,MAAM,CAAC,CAAC;QAClB,UAAU,CAAC,KAAK,CAAC,CAAC;QAElB,IAAI,SAAS,EAAE,CAAC;YACd,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzB,CAAC;IACH,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,YAAY,eAAa,QAAQ,aACvE,eAAK,SAAS,EAAC,4BAA4B,aACxC,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,2BAA2B,YACxC,KAAC,SAAS,IACR,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,YAEpC,MAAM,CAAC,KAAK,GACH,GACR,CACP,EAED,cAAK,SAAS,EAAC,yBAAyB,YACtC,KAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,UAAU,EAAC,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,WAAW,GACpB,GACE,IACF,EAEN,cACE,SAAS,EAAE,iBAAiB,CAAC,yBAAyB,EAAE;oBACtD,OAAO;oBACP,IAAI,EAAE,CAAC,OAAO;iBACf,CAAC,YAEF,uBACG,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,aACE,SAAS,EAAC,UAAU,EAEpB,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,MAAM,CAAC,YAEpC,MAAM,CAAC,KAAK,IAHR,KAAK,CAIP,CACN,CAAC,GACC,GACD,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/molecules/Toolbar/Toolbar.css

@@ -1,28 +1,21 @@
 .rls-toolbar {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   column-gap: var(--sizing-x6);
   height: var(--rls-toolbar-height);
 }
 .rls-toolbar > * {
   width: auto;
 }
-.rls-toolbar__content {
-  display: flex;
-  height: 100%;
-  padding: var(--sizing-x2) var(--sizing-x6);
-  box-sizing: border-box;
-  margin: auto 0rem;
-}
 .rls-toolbar__description {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--sizing-x2);
   overflow: hidden;
-  padding: 0rem var(--sizing-x2);
-  box-sizing: border-box;
-  margin: auto 0rem;
 }
 .rls-toolbar__description > label {
   position: relative;
-  float: left;
   width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -42,9 +35,6 @@
 .rls-toolbar__actions {
   display: flex;
   box-sizing: border-box;
-  margin: auto 0rem;
   column-gap: var(--sizing-x8);
-}
-.rls-toolbar__actions > * {
-  margin: auto 0rem;
+  align-items: center;
 }

package/dist/esm/components/molecules/Toolbar/Toolbar.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import './Toolbar.css';
 export function RlsToolbar({ actions, children, subtitle }) {
-    return (_jsxs("div", { className: "rls-toolbar", children: [_jsxs("div", { className: "rls-toolbar__description", children: [children && _jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (_jsx("label", { className: "rls-toolbar__subtitle caption-semibold", children: subtitle }))] }), actions && (_jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (_jsx("div", { children: action }, index))) }))] }));
+    return (_jsxs("div", { className: "rls-toolbar", children: [_jsxs("div", { className: "rls-toolbar__description", children: [children && _jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (_jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (_jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (_jsx("div", { children: action }, index))) }))] }));
 }
 //# sourceMappingURL=Toolbar.js.map

package/dist/esm/components/molecules/Toolbar/Toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Toolbar/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAOvB,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAgB;IACtE,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,0BAA0B,aACtC,QAAQ,IAAI,gBAAO,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAS,EACpE,QAAQ,IAAI,CACX,gBAAO,SAAS,EAAC,wCAAwC,YACtD,QAAQ,GACH,CACT,IACG,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,wBAAkB,MAAM,IAAd,KAAK,CAAgB,CAChC,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Toolbar.js","sourceRoot":"","sources":["../../../../../src/components/molecules/Toolbar/Toolbar.tsx"],"names":[],"mappings":";AAEA,OAAO,eAAe,CAAC;AAOvB,MAAM,UAAU,UAAU,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAgB;IACtE,OAAO,CACL,eAAK,SAAS,EAAC,aAAa,aAC1B,eAAK,SAAS,EAAC,0BAA0B,aACtC,QAAQ,IAAI,gBAAO,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAS,EACpE,QAAQ,IAAI,CACX,gBAAO,SAAS,EAAC,0CAA0C,YACxD,QAAQ,GACH,CACT,IACG,EACL,OAAO,IAAI,CACV,cAAK,SAAS,EAAC,sBAAsB,YAClC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9B,wBAAkB,MAAM,IAAd,KAAK,CAAgB,CAChC,CAAC,GACE,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/components/organisms/Datatable/Datatable.d.ts

@@ -1,20 +1,22 @@
+import { DatatableHook } from '../../../hooks';
 import { RlsComponent } from '../../definitions';
 interface DatatableCellProps extends RlsComponent {
     className?: string;
     control?: boolean;
     overflow?: boolean;
 }
-interface DatatableDateProps extends RlsComponent {
+interface DatatableDataProps extends RlsComponent {
     className?: string;
     error?: boolean;
 }
 interface DatatableProps extends RlsComponent {
+    datatable?: DatatableHook;
     footer?: JSX.Element;
     header?: JSX.Element;
 }
 export declare function RlsDatatableHeader({ children }: RlsComponent): import("react/jsx-runtime").JSX.Element;
 export declare function RlsDatatableTitle({ children, className, control }: DatatableCellProps): import("react/jsx-runtime").JSX.Element;
-export declare function RlsDatatableData({ children, className, error }: DatatableDateProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsDatatableData({ children, className, error }: DatatableDataProps): import("react/jsx-runtime").JSX.Element;
 export declare function RlsDatatableCell({ children, className, control, overflow }: DatatableCellProps): import("react/jsx-runtime").JSX.Element;
-export declare function RlsDatatable({ children, footer, header, rlsTheme }: DatatableProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsDatatable({ children, datatable, footer, header, rlsTheme }: DatatableProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/organisms/Datatable/Datatable.js

@@ -4,18 +4,17 @@ export function RlsDatatableHeader({ children }) {
     return _jsx("tr", { className: "rls-datatable__header", children: children });
 }
 export function RlsDatatableTitle({ children, className, control }) {
-    return (_jsx("th", { className: (renderClassStatus('rls-datatable__title', { control }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (_jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
 export function RlsDatatableData({ children, className, error }) {
-    return (_jsx("tr", { className: (renderClassStatus('rls-datatable__data', { error }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (_jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
 }
 export function RlsDatatableCell({ children, className, control, overflow }) {
-    return (_jsx("th", { className: (renderClassStatus('rls-datatable__cell', { control, overflow }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (_jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-export function RlsDatatable({ children, footer, header, rlsTheme }) {
-    return (_jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [_jsxs("table", { children: [header && _jsx("thead", { className: "rls-datatable__thead", children: header }), _jsx("tbody", { className: "rls-datatable__tbody", children: children })] }), footer && _jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+export function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+    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 })] }));
 }
 //# sourceMappingURL=Datatable.js.map

package/dist/esm/components/organisms/Datatable/Datatable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datatable.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Datatable/Datatable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAmBzD,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAgB;IAC3D,OAAO,aAAI,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAM,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,OAAO,EACY;IACnB,OAAO,CACL,aACE,SAAS,EAAE,CACT,iBAAiB,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,CAAC;YACtD,IAAI,SAAS,IAAI,EAAE,EAAE,CACtB,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,KAAK,EACc;IACnB,OAAO,CACL,aACE,SAAS,EAAE,CACT,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,KAAK,EAAE,CAAC;YACnD,IAAI,SAAS,IAAI,EAAE,EAAE,CACtB,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACW;IACnB,OAAO,CACL,aACE,SAAS,EAAE,CACT,iBAAiB,CAAC,qBAAqB,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC;YAC/D,IAAI,SAAS,IAAI,EAAE,EAAE,CACtB,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,QAAQ,EACO;IACf,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,eAAY,QAAQ,aAChD,4BACG,MAAM,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,MAAM,GAAS,EAEnE,gBAAO,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAS,IACpD,EAEP,MAAM,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,MAAM,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Datatable.js","sourceRoot":"","sources":["../../../../../src/components/organisms/Datatable/Datatable.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAqBzD,MAAM,UAAU,kBAAkB,CAAC,EAAE,QAAQ,EAAgB;IAC3D,OAAO,aAAI,SAAS,EAAC,uBAAuB,YAAE,QAAQ,GAAM,CAAC;AAC/D,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,EAChC,QAAQ,EACR,SAAS,EACT,OAAO,EACY;IACnB,OAAO,CACL,aACE,SAAS,EAAE,iBAAiB,CAC1B,sBAAsB,EACtB,EAAE,OAAO,EAAE,EACX,SAAS,CACV,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,KAAK,EACc;IACnB,OAAO,CACL,aACE,SAAS,EAAE,iBAAiB,CAC1B,qBAAqB,EACrB,EAAE,KAAK,EAAE,EACT,SAAS,CACV,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAC/B,QAAQ,EACR,SAAS,EACT,OAAO,EACP,QAAQ,EACW;IACnB,OAAO,CACL,aACE,SAAS,EAAE,iBAAiB,CAC1B,qBAAqB,EACrB,EAAE,OAAO,EAAE,QAAQ,EAAE,EACrB,SAAS,CACV,CAAC,IAAI,EAAE,YAEP,QAAQ,GACN,CACN,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAC3B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,MAAM,EACN,QAAQ,EACO;IACf,OAAO,CACL,eACE,SAAS,EAAE,iBAAiB,CAAC,eAAe,EAAE;YAC5C,WAAW,EAAE,SAAS,EAAE,WAAW;SACpC,CAAC,eACS,QAAQ,aAEnB,4BACG,MAAM,IAAI,gBAAO,SAAS,EAAC,sBAAsB,YAAE,MAAM,GAAS,EAEnE,gBAAO,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAC,sBAAsB,YAC7D,QAAQ,GACH,IACF,EAEP,MAAM,IAAI,cAAK,SAAS,EAAC,wBAAwB,YAAE,MAAM,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC"}

package/dist/esm/hooks/DatatableHook.d.ts

@@ -0,0 +1,6 @@
+import { RefObject } from 'react';
+export interface DatatableHook {
+    bodyRef: RefObject<HTMLTableSectionElement>;
+    scrolleable: boolean;
+}
+export declare function useDatatable(): DatatableHook;

package/dist/esm/hooks/DatatableHook.js

@@ -0,0 +1,12 @@
+import { useEffect, useRef, useState } from 'react';
+export 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]);
+    return { bodyRef, scrolleable };
+}
+//# sourceMappingURL=DatatableHook.js.map

package/dist/esm/hooks/DatatableHook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatatableHook.js","sourceRoot":"","sources":["../../../src/hooks/DatatableHook.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAO/D,MAAM,UAAU,YAAY;IAC1B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtD,MAAM,OAAO,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,YAAY,GAAG,OAAO,EAAE,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC;QACzD,MAAM,YAAY,GAAG,OAAO,EAAE,OAAO,EAAE,YAAY,IAAI,CAAC,CAAC;QAEzD,cAAc,CAAC,YAAY,GAAG,YAAY,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC;AAClC,CAAC"}

package/dist/esm/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from './DatatableHook';
 export * from './ListControlHook';

package/dist/esm/hooks/index.js

@@ -1,2 +1,3 @@
+export * from './DatatableHook';
 export * from './ListControlHook';
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rolster/react-components",
-  "version": "18.12.6",
+  "version": "18.12.8",
   "type": "module",
   "description": "Package containing UI components for React Project.",
   "module": "dist/esm/index.js",
@@ -36,10 +36,10 @@
   "dependencies": {
     "@rolster/helpers-advanced": "^1.1.7",
     "@rolster/helpers-date": "^1.3.0",
-    "@rolster/helpers-forms": "^1.10.4",
+    "@rolster/helpers-forms": "^1.10.8",
     "@rolster/helpers-string": "^1.1.3",
     "@rolster/i18n": "^1.3.4",
-    "@rolster/react-forms": "^18.2.2",
+    "@rolster/react-forms": "^18.2.6",
     "@rolster/validators": "^1.0.5",
     "lottie-react": "^2.4.0",
     "match-sorter": "^6.3.1",
@@ -58,7 +58,7 @@
     "@rollup/plugin-commonjs": "^25.0.4",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-typescript": "^11.1.3",
-    "@rolster/styles-foundations": "^1.1.10",
+    "@rolster/styles-foundations": "^1.1.11",
     "@rolster/types": "^1.0.6",
     "@types/node-sass": "^4.11.4",
     "@types/react": "^18.0.28",