@rolster/react-components 18.12.6 → 18.12.8

package/dist/es/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/es/index.js

@@ -5,6 +5,7 @@ import { daysFromMonth, weight, assignDay, DAY_LABELS, formatDate, between, Date
 import { hasPattern } from '@rolster/helpers-string';
 import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
+import { createFormControlProps } from '@rolster/helpers-forms';
 import 'uuid';
 import { BehaviorSubject } from 'rxjs';
 
@@ -40,6 +41,10 @@ function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
     return (jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
 }
 
+function RlsBadge({ children, rlsTheme }) {
+    return (jsx("div", { className: "rls-badge", "rls-theme": rlsTheme, children: children }));
+}
+
 function RlsBreadcrumb({ labels }) {
     return (jsx("div", { className: "rls-breadcrumb", children: labels.map(({ label, onClick }, index) => (jsx("label", { className: "rls-breadcrumb__label", onClick: onClick, children: jsx("a", { className: "rls-breadcrumb__label__a", children: label }) }, index))) }));
 }
@@ -209,14 +214,14 @@ function RlsBallot({ bordered, children, img, initials, skeleton, subtitle, rlsT
     return (jsxs("div", { className: renderClassStatus('rls-ballot', { bordered, skeleton }), "rls-theme": rlsTheme, children: [(img || initials) && (jsxs(RlsAvatar, { skeleton: skeleton, children: [img && jsx("img", { src: img }), initials && jsx("span", { children: initials })] })), jsxs("div", { className: "rls-ballot__component", children: [jsx("label", { className: "rls-ballot__title", children: jsx(RlsSkeletonText, { active: skeleton, children: children }) }), subtitle && (jsx("label", { className: "rls-ballot__subtitle", children: jsx(RlsSkeletonText, { active: skeleton, children: subtitle }) }))] })] }));
 }
 
-function RlsButtonToggle({ options, type, disabled, rlsTheme, onAction }) {
-    const contentRef = useRef(null);
+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);
             }
         }
@@ -231,17 +236,14 @@ 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))) }) })] }));
 }
 
 function RlsCheckBoxLabel({ children, disabled, extended, formControl, rlsTheme }) {
@@ -960,7 +962,7 @@ function RlsTextField({ children, disabled, formControl, placeholder, rlsTheme,
 }
 
 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))) }))] }));
 }
 
 const COUNT_YEAR_RANGE = 4;
@@ -1110,6 +1112,17 @@ const reactI18n = i18n({
     }
 });
 
+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 };
+}
+
 class ListCollection {
     constructor(value) {
         this.value = value;
@@ -1524,19 +1537,18 @@ function RlsDatatableHeader({ children }) {
     return jsx("tr", { className: "rls-datatable__header", children: children });
 }
 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 }));
 }
 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 }));
 }
 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 }));
 }
-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 })] }));
+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 })] }));
 }
 
 const controlIsValid = (props) => {
@@ -1550,21 +1562,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 = createFormControlProps(controlProps, controlValidators);
     const [state, setCurrentState] = useState(props.state);
     const [value, setValue] = useState(props.state);
     const [touched, setTouched] = useState(props.touched || false);
@@ -1643,6 +1642,9 @@ function useReactControl(controlProps, controlValidators) {
         value,
         wrong: touched && !valid
     };
+}
+function useReactControl(controlProps, controlValidators) {
+    return useControl(controlProps, controlValidators);
 }
 
 var PickerListenerType;
@@ -2094,5 +2096,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, 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, 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, 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 };
 //# sourceMappingURL=index.js.map