@rolster/react-components 18.12.6 → 18.12.8

package/dist/cjs/assets/{index-r16o2aIF.css → index-7UzJ6VgT.css}

@@ -51,6 +51,25 @@
   line-height: inherit;
 }
 
+.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;
+}
+
 .rls-breadcrumb {
   --pvt-link-font-color: var(--color-theme-300);
   display: -webkit-box;
@@ -933,12 +952,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);
@@ -946,8 +966,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);
@@ -1390,28 +1410,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;
@@ -1431,11 +1444,8 @@
 .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;
 }
 
 .rls-year-picker {

package/dist/cjs/index.js

@@ -7,6 +7,7 @@ var helpersDate = require('@rolster/helpers-date');
 var helpersString = require('@rolster/helpers-string');
 var i18n = require('@rolster/i18n');
 var ReactDOM = require('react-dom');
+var helpersForms = require('@rolster/helpers-forms');
 require('uuid');
 var rxjs = require('rxjs');
 
@@ -42,6 +43,10 @@ function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     return (jsxRuntime.jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
 }
 
+function RlsBadge({ children, rlsTheme }) {
+    return (jsxRuntime.jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+}
+
 function RlsBreadcrumb({ labels }) {
     return (jsxRuntime.jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsxRuntime.jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsxRuntime.jsx("a", { className: "rls-breadcrumb__label__a", children: label }) }, index))) }));
 }
@@ -211,14 +216,14 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     return (jsxRuntime.jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxRuntime.jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsxRuntime.jsx("img", { src: img }), initials && jsxRuntime.jsx("span", { children: initials })] })), jsxRuntime.jsxs("div", { className: "rls-ballot__component", children: [jsxRuntime.jsx("label", { className: "rls-ballot__title", children: jsxRuntime.jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsxRuntime.jsx("label", { className: "rls-ballot__subtitle", children: jsxRuntime.jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
-function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
-    const contentRef = react.useRef(null);
+function RlsButtonToggle({ onAction, options, type, automatic, disabled, rlsTheme }) {
+    const componentRef = react.useRef(null);
     const [firstAction] = options;
     const [action, setAction] = react.useState(firstAction);
     const [visible, setVisible] = react.useState(false);
     react.useEffect(() => {
         function onCloseMenu({ target }) {
-            if (!contentRef?.current?.contains(target)) {
+            if (!componentRef?.current?.contains(target)) {
                 setVisible(false);
             }
         }
@@ -233,17 +238,14 @@ function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
     function onSelectAction(action) {
         setAction(action);
         setVisible(false);
+        if (automatic) {
+            onAction(action.value);
+        }
     }
-    return (jsxRuntime.jsxs("div", { className: "rls-button-toggle", ref: contentRef, "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntime.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntime.jsx(RlsButton, { disabled: disabled, type: type, onClick: () => {
-                                if (onAction) {
-                                    onAction(action.value);
-                                }
-                            }, children: action.label }) })), jsxRuntime.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntime.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
+    return (jsxRuntime.jsxs("div", { className: "rls-button-toggle", ref: componentRef, "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("div", { className: "rls-button-toggle__content", children: [action && (jsxRuntime.jsx("div", { className: "rls-button-toggle__action", children: jsxRuntime.jsx(RlsButton, { disabled: disabled, type: type, onClick: () => onAction(action.value), children: action.label }) })), jsxRuntime.jsx("div", { className: "rls-button-toggle__icon", children: jsxRuntime.jsx(RlsButton, { type: type, prefixIcon: "arrow-ios-down", disabled: disabled, onClick: onClickMenu }) })] }), jsxRuntime.jsx("div", { className: renderClassStatus('rls-button-toggle__list', {
                     visible,
                     hide: !visible
-                }), children: jsxRuntime.jsx("ul", { children: options.map((action, index) => (jsxRuntime.jsx("li", { className: "truncate", onClick: () => {
-                            onSelectAction(action);
-                        }, children: action.label }, index))) }) })] }));
+                }), children: jsxRuntime.jsx("ul", { children: options.map((action, index) => (jsxRuntime.jsx("li", { className: "truncate", onClick: () => onSelectAction(action), children: action.label }, index))) }) })] }));
 }
 
 function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme }) {
@@ -962,7 +964,7 @@ function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme,
 }
 
 function RlsToolbar({ actions, children, subtitle }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-toolbar", children: [jsxRuntime.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntime.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntime.jsx("label", { className: "rls-toolbar__subtitle caption-semibold", children: subtitle }))] }), actions && (jsxRuntime.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntime.jsx("div", { children: action }, index))) }))] }));
+    return (jsxRuntime.jsxs("div", { className: "rls-toolbar", children: [jsxRuntime.jsxs("div", { className: "rls-toolbar__description", children: [children && jsxRuntime.jsx("label", { className: "rls-toolbar__title", children: children }), subtitle && (jsxRuntime.jsx("label", { className: "rls-toolbar__subtitle smalltext-semibold", children: subtitle }))] }), actions && (jsxRuntime.jsx("div", { className: "rls-toolbar__actions", children: actions.map((action, index) => (jsxRuntime.jsx("div", { children: action }, index))) }))] }));
 }
 
 const COUNT_YEAR_RANGE = 4;
@@ -1112,6 +1114,17 @@ const reactI18n = i18n.i18n({
     }
 });
 
+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]);
+    return { bodyRef, scrolleable };
+}
+
 class ListCollection {
     constructor(value) {
         this.value = value;
@@ -1526,19 +1539,18 @@ function RlsDatatableHeader({ children }) {
     return jsxRuntime.jsx("tr", { className: "rls-datatable__header", children: children });
 }
 function RlsDatatableTitle({ children, className, control }) {
-    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__title', { control }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__title', { control }, className).trim(), children: children }));
 }
 function RlsDatatableData({ children, className, error }) {
-    return (jsxRuntime.jsx("tr", { className: (renderClassStatus('rls-datatable__data', { error }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("tr", { className: renderClassStatus('rls-datatable__data', { error }, className).trim(), children: children }));
 }
 function RlsDatatableCell({ children, className, control, overflow }) {
-    return (jsxRuntime.jsx("th", { className: (renderClassStatus('rls-datatable__cell', { control, overflow }) +
-            ` ${className || ''}`).trim(), children: children }));
+    return (jsxRuntime.jsx("th", { className: renderClassStatus('rls-datatable__cell', { control, overflow }, className).trim(), children: children }));
 }
-function RlsDatatable({ children, footer, header, rlsTheme }) {
-    return (jsxRuntime.jsxs("div", { className: "rls-datatable", "rls-theme": rlsTheme, children: [jsxRuntime.jsxs("table", { children: [header && jsxRuntime.jsx("thead", { className: "rls-datatable__thead", children: header }), jsxRuntime.jsx("tbody", { className: "rls-datatable__tbody", children: children })] }), footer && jsxRuntime.jsx("div", { className: "rls-datatable__tfooter", children: footer })] }));
+function RlsDatatable({ children, datatable, footer, header, rlsTheme }) {
+    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 })] }));
 }
 
 const controlIsValid = (props) => {
@@ -1552,21 +1564,8 @@ const controlIsValid = (props) => {
     }, []);
 };
 
-function instanceOfReactControlProps(props) {
-    return (typeof props === 'object' && ('state' in props || 'validators' in props));
-}
-function createReactControlProps(...argsProps) {
-    if (argsProps.length < 1) {
-        return { state: undefined, validators: undefined };
-    }
-    const [state, validators] = argsProps;
-    if (argsProps.length < 2 && instanceOfReactControlProps(state)) {
-        return state;
-    }
-    return { state: state, validators };
-}
-function useReactControl(controlProps, controlValidators) {
-    const props = createReactControlProps(controlProps, controlValidators);
+function useControl(controlProps, controlValidators) {
+    const props = helpersForms.createFormControlProps(controlProps, controlValidators);
     const [state, setCurrentState] = react.useState(props.state);
     const [value, setValue] = react.useState(props.state);
     const [touched, setTouched] = react.useState(props.touched || false);
@@ -1645,6 +1644,9 @@ function useReactControl(controlProps, controlValidators) {
         value,
         wrong: touched && !valid
     };
+}
+function useReactControl(controlProps, controlValidators) {
+    return useControl(controlProps, controlValidators);
 }
 
 var PickerListenerType;
@@ -2103,6 +2105,7 @@ exports.RlsApplication = RlsApplication;
 exports.RlsAutocompleteField = RlsAutocompleteField;
 exports.RlsAutocompleteFieldTemplate = RlsAutocompleteFieldTemplate;
 exports.RlsAvatar = RlsAvatar;
+exports.RlsBadge = RlsBadge;
 exports.RlsBallot = RlsBallot;
 exports.RlsBreadcrumb = RlsBreadcrumb;
 exports.RlsButton = RlsButton;
@@ -2160,6 +2163,7 @@ exports.RlsToolbar = RlsToolbar;
 exports.RlsYearPicker = RlsYearPicker;
 exports.renderClassStatus = renderClassStatus;
 exports.useConfirmationService = useConfirmationService;
+exports.useDatatable = useDatatable;
 exports.useListControl = useListControl;
 exports.useSnackbarService = useSnackbarService;
 //# sourceMappingURL=index.js.map