@rolster/react-components 18.11.6 → 18.12.1

package/dist/es/assets/{index-63PMX6Lg.css → index-kN27szIx.css}

@@ -14,16 +14,17 @@
   width: var(--rls-tabulartext-pointer-width);
 }
 
-.rls-amount {
+rls-amount {
   display: flex;
   justify-content: var(--rls-amount-text-align);
   column-gap: var(--sizing-x2);
 }
+
 .rls-amount[rls-theme] {
   color: var(--color-rolster-500);
 }
 
-.rls-avatar {
+rls-avatar {
   position: relative;
   display: flex;
   justify-content: center;
@@ -35,15 +36,18 @@
   color: var(--color-light-500);
   border-radius: var(--rls-avatar-border-radius);
 }
+
 .rls-avatar--skeleton {
   background: var(--color-rolster-100);
 }
 .rls-avatar--skeleton > * {
   display: none;
 }
+
 .rls-avatar--rounded {
   border-radius: 50%;
 }
+
 .rls-avatar span {
   font-size: inherit;
   margin: auto;
@@ -1922,9 +1926,10 @@
 
 .rls-date-range-picker {
   position: relative;
-  float: left;
-  max-width: 150rem;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
+  max-width: 150rem;
 }
 .rls-date-range-picker__header {
   background: var(--color-rolster-100);
@@ -1966,6 +1971,7 @@
 }
 .rls-date-range-picker__component {
   display: flex;
+  width: 150rem;
   padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
   margin-bottom: var(--sizing-x4);
@@ -1987,17 +1993,13 @@
   display: none;
 }
 .rls-date-range-picker__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sizing-x4);
   padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }
-.rls-date-range-picker__actions--cancel {
-  width: 100%;
-}
-.rls-date-range-picker__actions--ok {
-  margin-top: var(--sizing-x4);
-  width: 100%;
-}
 .rls-date-range-picker__actions button {
   width: 100%;
 }

package/dist/es/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect, createContext } from 'react';
 import { currencyFormat, PartialSealed } from '@rolster/helpers-advanced';
-import { daysFromMonth, weight, refactorDay, DAY_LABELS, normalizeMinTime, isBefore, formatDate, isAfter, timeDifference, isBetween, Month, MONTH_NAMES, refactorYear, refactorMonth } from '@rolster/helpers-date';
+import { daysFromMonth, weight, assignDay, DAY_LABELS, formatDate, between, DateRange, normalizeMinTime, Month, MONTH_NAMES, before, after, assignYear, assignMonth } from '@rolster/helpers-date';
 import { hasPattern } from '@rolster/helpers-string';
 import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
@@ -18,7 +18,7 @@ function RlsTabularText({ value }) {
 }
 
 function RlsAmount({ value, decimals, rlsTheme, symbol }) {
-    return (jsxs("div", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsx("span", { children: symbol }), jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
+    return (jsxs("rls-amount", { className: "rls-amount", "rls-theme": rlsTheme, children: [symbol && jsx("span", { children: symbol }), jsx(RlsTabularText, { value: currencyFormat({ value, decimals }) })] }));
 }
 
 function renderClassStatus(base, status = {}, aditionals) {
@@ -37,7 +37,7 @@ function renderClassStatus(base, status = {}, aditionals) {
 }
 
 function RlsAvatar({ children, rounded, skeleton, rlsTheme }) {
-    return (jsx("div", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
+    return (jsx("rls-avatar", { className: renderClassStatus('rls-avatar', { rounded, skeleton }), "rls-theme": rlsTheme, children: children }));
 }
 
 function RlsBreadcrumb({ labels }) {
@@ -333,12 +333,12 @@ class DayPickerFactory {
     }
     minOverflowDay(day) {
         return this.minDate
-            ? weight(refactorDay(this.date, day)) < weight(this.minDate)
+            ? weight(assignDay(this.date, day)) < weight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? weight(refactorDay(this.date, day)) > weight(this.maxDate)
+            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
             : false;
     }
 }
@@ -382,46 +382,7 @@ function RlsDayPicker({ date, disabled: disabledPicker, formControl, maxDate, mi
                         }, children: jsx("span", { className: "rls-day-picker__day__span", children: value || '??' }) }, index))) }, index))) })] }));
 }
 
-const DATE_FORMAT = '{dd}/{mm}/{aa}';
-class ListCollection {
-    constructor(value) {
-        this.value = value;
-    }
-    find(element) {
-        return this.value.find((current) => current.compareTo(element));
-    }
-}
-class DateRange {
-    constructor(minDate, maxDate) {
-        this.minDate = normalizeMinTime(minDate);
-        if (maxDate && isBefore(maxDate, minDate)) {
-            this.maxDate = normalizeMinTime(maxDate);
-        }
-        else {
-            this.maxDate = normalizeMinTime(minDate);
-        }
-        const minFormat = formatDate(this.minDate, DATE_FORMAT);
-        const maxFormat = formatDate(this.maxDate, DATE_FORMAT);
-        this.description = `${minFormat} - ${maxFormat}`;
-    }
-    recalculate(date) {
-        if (isBefore(this.minDate, date)) {
-            return new DateRange(date, this.maxDate);
-        }
-        if (isAfter(this.maxDate, date)) {
-            return new DateRange(this.minDate, date);
-        }
-        const minDifference = timeDifference(date, this.minDate);
-        const maxDifference = timeDifference(this.maxDate, date);
-        return minDifference > maxDifference
-            ? new DateRange(this.minDate, date)
-            : new DateRange(date, this.maxDate);
-    }
-    static now() {
-        return new DateRange(new Date());
-    }
-}
-
+const DATE_FORMAT = '{dd}/{mn}/{aa}';
 class DateRangePickerFactory {
     constructor(props) {
         const { date, range, maxDate, minDate } = props;
@@ -498,22 +459,27 @@ class DateRangePickerFactory {
             day === date.getDate());
     }
     isRangedFromDate(day) {
-        return isBetween(this.range.minDate, this.range.maxDate, refactorDay(this.date, day));
+        return between(this.range.minDate, this.range.maxDate, assignDay(this.date, day));
     }
     overflowDay(day) {
         return this.minOverflowDay(day) || this.maxOverflowDay(day);
     }
     minOverflowDay(day) {
         return this.minDate
-            ? weight(refactorDay(this.date, day)) < weight(this.minDate)
+            ? weight(assignDay(this.date, day)) < weight(this.minDate)
             : false;
     }
     maxOverflowDay(day) {
         return this.maxDate
-            ? weight(refactorDay(this.date, day)) > weight(this.maxDate)
+            ? weight(assignDay(this.date, day)) > weight(this.maxDate)
             : false;
     }
 }
+function formatRange(range) {
+    const minFormat = formatDate(range.minDate, DATE_FORMAT);
+    const maxFormat = formatDate(range.maxDate, DATE_FORMAT);
+    return `${minFormat} - ${maxFormat}`;
+}
 function createRangePicker(props) {
     return DateRangePickerFactory.execute(props);
 }
@@ -532,7 +498,7 @@ function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDat
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newRange = range.recalculate(refactorDay(initialDate, value));
+        const newRange = range.recalculate(assignDay(initialDate, value));
         setRange(newRange);
         formControl?.setState(newRange);
     }
@@ -1132,6 +1098,15 @@ const reactI18n = i18n({
     }
 });
 
+class ListCollection {
+    constructor(value) {
+        this.value = value;
+    }
+    find(element) {
+        return this.value.find((current) => current.compareTo(element));
+    }
+}
+
 const classElement = '.rls-list-field__element';
 const MAX_POSITION_VISIBLE = 4;
 const LIST_SIZE_REM = 16;
@@ -1652,11 +1627,7 @@ var PickerListenerType;
 })(PickerListenerType || (PickerListenerType = {}));
 
 function verifyDateRange(date, min, max) {
-    return min && isBefore(min, date)
-        ? min
-        : max && isAfter(max, date)
-            ? max
-            : date;
+    return min && before(min, date) ? min : max && after(max, date) ? max : date;
 }
 
 const FORMAT_DESCRIPTION = '{dw}, {mx} {dd} de {aa}';
@@ -1690,21 +1661,21 @@ function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDat
     useEffect(() => {
         setValue((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? verifyDateRange(refactorYear(prevValue, yearControl.state), minDate, maxDate)
+                ? verifyDateRange(assignYear(prevValue, yearControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [yearControl.state]);
     useEffect(() => {
         setValue((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? verifyDateRange(refactorMonth(prevValue, monthControl.state), minDate, maxDate)
+                ? verifyDateRange(assignMonth(prevValue, monthControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [monthControl.state]);
     useEffect(() => {
         setValue((prevValue) => {
             return typeof dayControl.state === 'number'
-                ? verifyDateRange(refactorDay(prevValue, dayControl.state), minDate, maxDate)
+                ? verifyDateRange(assignDay(prevValue, dayControl.state), minDate, maxDate)
                 : prevValue;
         });
     }, [dayControl.state]);
@@ -1823,14 +1794,14 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
     useEffect(() => {
         setDate((prevValue) => {
             return typeof yearControl.state === 'number'
-                ? refactorYear(prevValue, yearControl.state)
+                ? assignYear(prevValue, yearControl.state)
                 : prevValue;
         });
     }, [yearControl.state]);
     useEffect(() => {
         setDate((prevValue) => {
             return typeof monthControl.state === 'number'
-                ? refactorMonth(prevValue, monthControl.state)
+                ? assignMonth(prevValue, monthControl.state)
                 : prevValue;
         });
     }, [monthControl.state]);
@@ -1860,7 +1831,7 @@ function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl
             onListener({ type: PickerListenerType.Select, value });
         }
     }
-    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: value.description }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
+    return (jsxs("div", { className: "rls-date-range-picker", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-date-range-picker__header", children: [jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--description", children: jsx("span", { onClick: onVisibilityDay, children: formatRange(value) }) }), jsx("div", { className: "rls-date-range-picker__title rls-date-range-picker__title--year", children: jsx("span", { onClick: onVisibilityYear, children: yearControl.state }) }), jsx(RlsMonthTitlePicker, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: year, type: month ? 'year' : 'month', onClick: onVisibilityMonth })] }), jsxs("div", { className: renderClassStatus('rls-date-range-picker__component', {
                     year,
                     day,
                     month
@@ -1877,7 +1848,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
     const [show, setShow] = useState(false);
     const [description, setDescription] = useState('');
     useEffect(() => {
-        setDescription(value?.description || '');
+        setDescription(value ? formatRange(value) : '');
     }, [value]);
     function onClickInput() {
         setShow(true);
@@ -2097,5 +2068,5 @@ function RlsApplication({ children }) {
     return (jsxs(RlsContext.Provider, { value: { confirmation, snackbar }, children: [jsx("div", { className: "rls-app__body", children: children }), RlsSnackbar, RlsConfirmation] }));
 }
 
-export { ConfirmationResult, DateRange, 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, 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 };
 //# sourceMappingURL=index.js.map