@rolster/react-components 18.12.4 → 18.12.6

package/dist/es/assets/{index-XotqmUMW.css → index-r16o2aIF.css}

@@ -1066,15 +1066,25 @@
   --pvt-span-nothover-font-color: inherit;
   --pvt-span-background: transparent;
   position: relative;
-  float: left;
+  display: flex;
   width: 100%;
   max-width: 140rem;
+  flex-direction: column;
+  row-gap: var(--sizing-x4);
   box-sizing: border-box;
   user-select: none;
 }
+.rls-day-range-picker__title {
+  color: var(--color-rolster-500);
+  text-align: center;
+  padding: var(--sizing-x4) 0rem;
+  font-size: var(--subtitle-font-size);
+  letter-spacing: var(--subtitle-letter-spacing);
+  line-height: var(--subtitle-line-height);
+  font-weight: var(--font-weight-bold);
+}
 .rls-day-range-picker__header {
   display: flex;
-  margin-bottom: var(--sizing-x4);
   background: var(--background-theme-100);
   color: var(--color-theme-500);
   border-radius: var(--sizing-x2);
@@ -1113,7 +1123,11 @@
   color: var(--color-light-500);
   background: var(--color-rolster-900);
 }
-.rls-day-range-picker__day--selected {
+.rls-day-range-picker__day--end {
+  --pvt-span-nothover-background: var(--color-theme-500);
+  --pvt-span-nothover-font-color: var(--background-theme-500);
+}
+.rls-day-range-picker__day--source {
   --pvt-span-nothover-background: var(--color-rolster-500);
   --pvt-span-nothover-font-color: var(--color-light-500);
 }
@@ -1924,6 +1938,7 @@
   position: relative;
   display: flex;
   flex-direction: column;
+  row-gap: var(--sizing-x4);
   overflow: hidden;
   max-width: 150rem;
 }
@@ -1931,7 +1946,6 @@
   background: var(--color-rolster-100);
   padding: var(--sizing-x4);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-x8);
 }
 .rls-date-range-picker__title {
   color: var(--color-theme-500);
@@ -1967,17 +1981,16 @@
 }
 .rls-date-range-picker__component {
   display: flex;
+  justify-content: center;
   width: 150rem;
   padding: 0rem var(--sizing-x2);
   box-sizing: border-box;
-  margin-bottom: var(--sizing-x4);
 }
 .rls-date-range-picker__component > * {
-  margin: 0rem auto;
   display: none;
 }
 .rls-date-range-picker__component--day .rls-day-range-picker {
-  display: block;
+  display: flex;
 }
 .rls-date-range-picker__component--month .rls-month-picker {
   display: grid;
@@ -1992,7 +2005,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: var(--sizing-x4);
-  padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
+  padding: 0rem var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
   overflow: hidden;
   box-sizing: border-box;
 }

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, assignDay, DAY_LABELS, formatDate, between, DateRange, normalizeMinTime, Month, MONTH_NAMES, before, after, assignYear, assignMonth } from '@rolster/helpers-date';
+import { daysFromMonth, weight, assignDay, DAY_LABELS, formatDate, between, DateRange, normalizeMinTime, before, Month, MONTH_NAMES, after, assignYear, assignMonth } from '@rolster/helpers-date';
 import { hasPattern } from '@rolster/helpers-string';
 import { i18n } from '@rolster/i18n';
 import ReactDOM from 'react-dom';
@@ -382,12 +382,13 @@ 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}/{mx}/{aa}';
+const DATE_RANGE_FORMAT = '{dd}/{mx}/{aa}';
 class DateRangePickerFactory {
     constructor(props) {
-        const { date, range, maxDate, minDate } = props;
+        const { date, range, sourceDate, maxDate, minDate } = props;
         this.date = new Date(date.getTime());
         this.range = range;
+        this.sourceDate = sourceDate;
         this.maxDate = maxDate;
         this.minDate = minDate;
         this.date.setDate(1);
@@ -440,16 +441,10 @@ class DateRangePickerFactory {
         }
         return daysPending;
     }
-    createDayRangeState(day) {
-        return {
-            value: day,
-            disabled: this.overflowDay(day || 0),
-            forbidden: !day,
-            ranged: day ? this.isRangedFromDate(day) : false,
-            selected: day ? this.isSelected(day) : false
-        };
+    isSelectedSource(day) {
+        return this.isSelectedForDate(this.sourceDate, day);
     }
-    isSelected(day) {
+    isSelectedEnd(day) {
         return (this.isSelectedForDate(this.range.minDate, day) ||
             this.isSelectedForDate(this.range.maxDate, day));
     }
@@ -474,10 +469,20 @@ class DateRangePickerFactory {
             ? weight(assignDay(this.date, day)) > weight(this.maxDate)
             : false;
     }
+    createDayRangeState(day) {
+        return {
+            value: day,
+            disabled: this.overflowDay(day || 0),
+            forbidden: !day,
+            ranged: day ? this.isRangedFromDate(day) : false,
+            end: day ? this.isSelectedEnd(day) : false,
+            source: day ? this.isSelectedSource(day) : false
+        };
+    }
 }
 function formatRange(range) {
-    const minFormat = formatDate(range.minDate, DATE_FORMAT);
-    const maxFormat = formatDate(range.maxDate, DATE_FORMAT);
+    const minFormat = formatDate(range.minDate, DATE_RANGE_FORMAT);
+    const maxFormat = formatDate(range.maxDate, DATE_RANGE_FORMAT);
     return `${minFormat} - ${maxFormat}`;
 }
 function createRangePicker(props) {
@@ -487,26 +492,33 @@ function createRangePicker(props) {
 function RlsDayRangePicker({ date, disabled: disabledPicker, formControl, maxDate, minDate, rlsTheme }) {
     const initialRange = formControl?.state || DateRange.now();
     const initialDate = normalizeMinTime(date || initialRange.minDate);
+    const sourceDate = useRef(initialRange.minDate);
     const [weeks, setWeeks] = useState([]);
     const [range, setRange] = useState(initialRange);
     useEffect(() => {
         setWeeks(createRangePicker({
             date: initialDate,
             range,
+            sourceDate: sourceDate.current,
             minDate,
             maxDate
         }));
     }, [range, date, minDate, maxDate]);
     function onChange(value) {
-        const newRange = range.recalculate(assignDay(initialDate, value));
+        const newDate = assignDay(initialDate, value);
+        const newRange = before(newDate, sourceDate.current)
+            ? new DateRange(sourceDate.current, newDate)
+            : new DateRange(newDate, sourceDate.current);
+        sourceDate.current = newDate;
         setRange(newRange);
         formControl?.setState(newRange);
     }
-    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ value, disabled, forbidden, ranged, selected }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
+    return (jsxs("div", { className: "rls-day-range-picker", "rls-theme": rlsTheme, children: [jsx("div", { className: "rls-day-range-picker__title", children: formatDate(sourceDate.current, DATE_RANGE_FORMAT) }), jsx("div", { className: "rls-day-range-picker__header", children: DAY_LABELS().map((title, index) => (jsx("label", { className: "rls-day-range-picker__label", children: title }, index))) }), jsx("div", { className: "rls-day-range-picker__component", children: weeks.map(({ days }, index) => (jsx("div", { className: "rls-day-range-picker__week", children: days.map(({ disabled, end, forbidden, source, ranged, value }, index) => (jsx("div", { className: renderClassStatus('rls-day-range-picker__day', {
                             disabled: disabled || disabledPicker,
+                            end,
                             forbidden,
-                            selected,
-                            ranged
+                            ranged,
+                            source
                         }), onClick: () => {
                             if (value && !disabled) {
                                 onChange(value);
@@ -1538,7 +1550,21 @@ const controlIsValid = (props) => {
     }, []);
 };
 
-function useReactControl(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);
     const [state, setCurrentState] = useState(props.state);
     const [value, setValue] = useState(props.state);
     const [touched, setTouched] = useState(props.touched || false);
@@ -1652,9 +1678,9 @@ const VISIBILITY$1 = {
 };
 function RlsDatePicker({ automatic, date, formControl, disabled, maxDate, minDate, rlsTheme, onListener }) {
     const dateInitial = formControl?.state || date || new Date();
-    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
-    const dayControl = useReactControl({ state: dateInitial.getDate() });
-    const monthControl = useReactControl({ state: dateInitial.getMonth() });
+    const yearControl = useReactControl(dateInitial.getFullYear());
+    const dayControl = useReactControl(dateInitial.getDate());
+    const monthControl = useReactControl(dateInitial.getMonth());
     const [value, setValue] = useState(dateInitial);
     const [{ day, month, year }, setVisibility] = useState(VISIBILITY$1.DAY);
     const title = formatDate(value, FORMAT_DESCRIPTION);
@@ -1752,7 +1778,7 @@ function RlsDateField({ children, date, disabled, formControl, maxDate, minDate,
             setShow(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: show, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: renderClassStatus('rls-box-field', { disabled }), children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), jsx("button", { className: "rls-date-field__action", onClick: onClean, disabled: disabled, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), formControl?.touched && formControl?.error && (jsx("div", { className: "rls-box-field__error", children: jsx(RlsMessageIcon, { icon: "alert-triangle", rlsTheme: "danger", children: formControl.error.message }) }))] }), jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsx(RlsDatePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
                         if (type !== PickerListenerType.Cancel) {
                             onChange(value, true);
                         }
@@ -1785,9 +1811,9 @@ const VISIBILITY = {
 function RlsDateRangePicker({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, rlsTheme, onListener }) {
     const dateInitial = normalizeMinTime(datePicker || new Date());
     const rangeInitial = formControl?.state || DateRange.now();
-    const yearControl = useReactControl({ state: dateInitial.getFullYear() });
-    const monthControl = useReactControl({ state: dateInitial.getMonth() });
-    const dayControl = useReactControl({ state: rangeInitial });
+    const yearControl = useReactControl(dateInitial.getFullYear());
+    const monthControl = useReactControl(dateInitial.getMonth());
+    const dayControl = useReactControl(rangeInitial);
     const [value, setValue] = useState(rangeInitial);
     const [date, setDate] = useState(dateInitial);
     const [{ day, month, year }, setVisibility] = useState(VISIBILITY.DAY);
@@ -1862,7 +1888,7 @@ function RlsDateRangeField({ children, date: datePicker, disabled, formControl,
             setShow(true);
         }
     }
-    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-box-field", children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: show, children: jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
+    return (jsxs("div", { className: "rls-date-field", "rls-theme": rlsTheme, children: [jsxs("div", { className: "rls-box-field", children: [children && jsx("label", { className: "rls-box-field__label", children: children }), jsx("div", { className: "rls-box-field__component", children: jsxs("div", { className: "rls-box-field__body", children: [jsx("input", { className: "rls-date-field__control", type: "text", value: description, readOnly: true, placeholder: placeholder, onClick: onClickInput }), jsx("button", { className: "rls-date-field__action", onClick: onClickAction, children: jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) })] }), jsx(RlsModal, { visible: show, rlsTheme: rlsTheme, children: jsx(RlsDateRangePicker, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value }) => {
                         if (value) {
                             setValue(value);
                         }