@rolster/react-components 18.12.9 → 18.13.0

package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css

@@ -3,7 +3,7 @@
   --pvt-control-opacity: 1;
 }
 .rls-autocomplete-field.rls-box-field--selected {
-  --pvt-control-width: calc(100% - var(--sizing-x14));
+  --pvt-control-width: calc(100% - var(--rls-sizing-x14));
 }
 .rls-autocomplete-field.rls-box-field--disabled {
   --pvt-control-opacity: 0.5;
@@ -19,55 +19,55 @@
   display: flex;
   align-items: center;
   width: 100%;
-  margin-top: var(--sizing-x2);
-  margin-bottom: var(--sizing-x6);
-  background: var(--background-theme-300);
-  border-radius: var(--sizing-x4);
-  padding: var(--sizing-x4);
+  margin-top: var(--rls-sizing-x2);
+  margin-bottom: var(--rls-sizing-x6);
+  background: var(--rls-app-background-300);
+  border-radius: var(--rls-sizing-x4);
+  padding: var(--rls-sizing-x4);
   box-sizing: border-box;
 }
 .rls-autocomplete-field .rls-list-field__ul__search button {
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
   background: transparent;
 }
 .rls-autocomplete-field
   .rls-list-field__ul__search
   button:not(:disabled):hover {
-  color: var(--color-rolster-300);
+  color: var(--rls-theme-color-300);
 }
 .rls-autocomplete-field .rls-list-field__ul__search button:disabled {
   opacity: 0.5;
 }
 .rls-autocomplete-field .rls-list-field__ul__control {
   width: 100%;
-  height: var(--sizing-x12);
-  line-height: var(--sizing-x12);
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
   padding: 0rem;
   cursor: text;
   border: none;
   outline: none;
   background: transparent;
-  color: var(--color-theme-500);
-  font-size: var(--input-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--input-letter-spacing);
+  color: var(--rls-app-color-500);
+  font-size: var(--rls-input-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-input-letter-spacing);
 }
 .rls-autocomplete-field .rls-list-field__ul__control::placeholder {
-  color: var(--color-theme-100);
+  color: var(--rls-app-color-100);
 }
 .rls-autocomplete-field .rls-list-field__ul__control::selection {
-  background: var(--color-rolster-700);
-  color: var(--color-light-500);
+  background: var(--rls-theme-color-700);
+  color: var(--rls-light-color-500);
 }
 .rls-autocomplete-field .rls-list-field__ul__control:disabled {
   opacity: 0.5;
 }
 .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
-  margin-bottom: var(--sizing-x8);
+  margin-bottom: var(--rls-sizing-x8);
 }
 .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
-  background: var(--color-rolster-100);
-  color: var(--color-rolster-500);
-  padding: 0rem var(--sizing-x2);
-  border-radius: var(--sizing-x2);
+  background: var(--rls-theme-color-100);
+  color: var(--rls-theme-color-500);
+  padding: 0rem var(--rls-sizing-x2);
+  border-radius: var(--rls-sizing-x2);
 }

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

@@ -1,6 +1,6 @@
+import { AbstractAutocompleteElement as Element, AutocompleteElement } from '@rolster/helpers-components';
 import { ReactControl } from '@rolster/react-forms';
 import { ReactNode } from 'react';
-import { AbstractAutocompleteElement as Element, AutocompleteElement } from '../../../models';
 import { RlsComponent } from '../../definitions';
 import './AutocompleteField.css';
 interface AutocompleteFieldProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {

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

@@ -25,7 +25,7 @@ export function RlsAutocompleteFieldTemplate({ suggestions, children, disabled,
                                                 setPattern(value);
                                             }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
                                                 onSearch(pattern);
-                                            }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
+                                            }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-list-field__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (_jsx("li", { className: "rls-list-field__empty", children: _jsxs("div", { className: "rls-list-field__empty__description", children: [_jsx("label", { className: "rls-label-bold truncate", children: reactI18n('listEmptyTitle') }), _jsx("p", { className: "rls-caption-regular", children: reactI18n('listEmptyDescription') })] }) }))] }) }), _jsx("div", { className: "rls-list-field__backdrop", onClick: onClickBackdrop })] })] }));
 }
 export function RlsAutocompleteField(props) {
     return (_jsx(RlsAutocompleteFieldTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));

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

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutocompleteField.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.d.ts

@@ -1,7 +1,7 @@
+import { AbstractAutocompleteElement as Element } from '@rolster/helpers-components';
 import { ReactControl } from '@rolster/react-forms';
 import { KeyboardEvent, KeyboardEventHandler, MouseEventHandler } from 'react';
 import { ListControl } from '../../../hooks';
-import { AbstractAutocompleteElement as Element } from '../../../models';
 export interface AutocompleteControl<T = unknown, E extends Element<T> = Element<T>> {
     coincidences: E[];
     listControl: ListControl<T>;

package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js

@@ -1,5 +1,5 @@
-import { hasPattern } from '@rolster/helpers-string';
-import { useEffect, useState } from 'react';
+import { createStoreAutocomplete } from '@rolster/helpers-components';
+import { useEffect, useRef, useState } from 'react';
 import { useListControl } from '../../../hooks';
 const DURATION_ANIMATION = 240;
 const MAX_ELEMENTS = 6;
@@ -11,39 +11,31 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
         coincidences: [],
         previous: null
     });
-    const listControl = useListControl({
-        suggestions,
-        formControl,
-        higher: true
-    });
+    const listControl = useListControl({ suggestions, formControl });
     const { collection, inputRef, navigationElement, navigationInput, setFocused, setValue, setVisible } = listControl;
-    const [changeInternal, setChangeInternal] = useState(false);
+    const changeInternal = useRef(false);
     useEffect(() => filterSuggestions(pattern, true), [suggestions]);
     useEffect(() => filterSuggestions(pattern), [pattern]);
     useEffect(() => {
-        changeInternal ? setChangeInternal(false) : resetState(formControl?.state);
+        if (changeInternal.current) {
+            changeInternal.current = false;
+        }
+        else {
+            resetState(formControl?.state);
+        }
     }, [formControl?.state]);
     useEffect(() => resetCollection(collection, formControl?.state), [collection]);
     function setFormState(value) {
-        setChangeInternal(true);
-        formControl?.setState(value);
+        if (formControl) {
+            changeInternal.current = true;
+            formControl.setState(value);
+        }
     }
     function resetCollection(collection, state) {
-        if (state) {
-            const element = collection.find(state);
-            if (element) {
-                setValue(element.description);
-            }
-            else {
-                setValue('');
-            }
-        }
-        else {
-            setValue('');
-        }
+        setValue(state ? collection.find(state)?.description || '' : '');
     }
     function resetState(state) {
-        setValue(state ? collection.find(state)?.description || '' : '');
+        resetCollection(collection, state);
     }
     function onClickControl() {
         if (!disabled) {
@@ -60,8 +52,6 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
     function onKeydownInput(event) {
         switch (event.code) {
             case 'Escape':
-                setVisible(false);
-                break;
             case 'Tab':
                 setVisible(false);
                 break;
@@ -73,9 +63,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
     function onClickAction() {
         setVisible(false);
         setValue('');
-        if (formControl) {
-            setFormState(undefined);
-        }
+        setFormState(undefined);
         if (onValue) {
             onValue(undefined);
         }
@@ -90,14 +78,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
     }
     function onKeydownElement(element) {
         return (event) => {
-            switch (event.code) {
-                case 'Enter':
-                    onChange(element);
-                    break;
-                default:
-                    navigationElement(event);
-                    break;
-            }
+            event.code === 'Enter' ? onChange(element) : navigationElement(event);
         };
     }
     function onChange({ description, value }) {
@@ -106,9 +87,7 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
             onSelect(value);
         }
         else {
-            if (formControl) {
-                setFormState(value);
-            }
+            setFormState(value);
             setValue(description);
         }
         if (onValue) {
@@ -116,47 +95,14 @@ export function useAutocompleteField({ disabled, formControl, onSelect, onValue,
         }
     }
     function filterSuggestions(pattern, reboot = false) {
-        if (pattern) {
-            const store = reboot ? createStoreEmpty() : searchForPattern(pattern);
-            const elements = store?.coincidences || suggestions;
-            const coincidences = elements.filter((element) => element.hasCoincidence(pattern));
-            setCoincidences(coincidences.slice(0, MAX_ELEMENTS));
-            setStore({
-                coincidences,
-                pattern,
-                previous: store
-            });
-        }
-        else {
-            setCoincidences(suggestions.slice(0, MAX_ELEMENTS));
-            rebootStore();
-        }
-    }
-    function searchForPattern(value) {
-        if (!store.pattern) {
-            return null;
-        }
-        let newStore = store;
-        let search = false;
-        while (!search && newStore) {
-            search = hasPattern(value, newStore.pattern, true);
-            if (!search) {
-                newStore = newStore.previous;
-            }
-        }
-        return newStore || rebootStore();
-    }
-    function rebootStore() {
-        const store = createStoreEmpty();
-        setStore(store);
-        return store;
-    }
-    function createStoreEmpty() {
-        return {
-            coincidences: undefined,
-            pattern: '',
-            previous: null
-        };
+        const result = createStoreAutocomplete({
+            pattern,
+            suggestions,
+            reboot,
+            store
+        });
+        setCoincidences(result.collection.slice(0, MAX_ELEMENTS));
+        setStore(result.store);
     }
     return {
         coincidences,

package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteFieldHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteFieldHook.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"AutocompleteFieldHook.js","sourceRoot":"","sources":["../../../../../src/components/organisms/AutocompleteField/AutocompleteFieldHook.ts"],"names":[],"mappings":"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"}

package/dist/esm/components/organisms/Card/Card.css

@@ -1,15 +1,15 @@
 .rls-card {
-  background: var(--background-theme-500);
-  border-radius: var(--sizing-x4);
-  box-shadow: var(--shadow-center-light-8);
+  background: var(--rls-app-background-500);
+  border-radius: var(--rls-sizing-x4);
+  box-shadow: var(--rls-light-shadow-center-8);
 }
 .rls-card--outline {
-  border: var(--border-1-theme-100);
+  border: var(--rls-app-border-1-100);
   box-shadow: none;
 }
 .rls-card__content {
   display: flex;
   flex-direction: column;
-  padding: var(--rls-card-content-padding);
+  padding: var(--rlc-card-content-padding);
   box-sizing: border-box;
 }

package/dist/esm/components/organisms/Confirmation/Confirmation.css

@@ -3,13 +3,13 @@
   --pvt-component-height: 0rem;
   --pvt-component-opacity: 0;
   --pvt-component-visibility: hidden;
-  --pvt-title-font-size: var(--heading5-font-size);
-  --pvt-title-letter-spacing: var(--heading5-letter-spacing);
-  --pvt-title-line-height: var(--heading5-line-height);
+  --pvt-title-font-size: var(--rls-heading5-font-size);
+  --pvt-title-letter-spacing: var(--rls-heading5-letter-spacing);
+  --pvt-title-line-height: var(--rls-heading5-line-height);
   --pvt-title-text-transform: initial;
-  --pvt-subtitle-font-size: var(--body-font-size);
-  --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
-  --pvt-subtitle-line-height: var(--body-line-height);
+  --pvt-subtitle-font-size: var(--rls-body-font-size);
+  --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
+  --pvt-subtitle-line-height: var(--rls-body-line-height);
   --pvt-subtitle-text-transform: initial;
   --pvt-content-font-size: 7.4rem;
   --pvt-content-letter-spacing: 0.05em;
@@ -24,7 +24,7 @@
   left: 0rem;
   width: 100vw;
   height: 100vh;
-  z-index: var(--z-index-24);
+  z-index: var(--rls-z-index-24);
   visibility: hidden;
 }
 .rls-confirmation--visible {
@@ -40,37 +40,37 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-x8);
-  width: calc(100% - var(--sizing-x16));
+  row-gap: var(--rls-sizing-x8);
+  width: calc(100% - var(--rls-sizing-x16));
   max-width: 280rem;
   height: var(--pvt-component-height);
   opacity: var(--pvt-component-opacity);
   visibility: var(--pvt-component-visibility);
-  padding: var(--sizing-x8) 0rem;
+  padding: var(--rls-sizing-x8) 0rem;
   box-sizing: border-box;
-  z-index: var(--z-index-2);
-  border-radius: var(--sizing-x4);
-  background: var(--background-theme-500);
-  box-shadow: var(--shadow-4);
+  z-index: var(--rls-z-index-2);
+  border-radius: var(--rls-sizing-x4);
+  background: var(--rls-app-background-500);
+  box-shadow: var(--rls-app-shadow-4);
   will-change: transform;
   transform: var(--pvt-component-transform);
-  transition: opacity 125ms 0ms var(--deceleration-curve),
-    transform 125ms 0ms var(--deceleration-curve),
-    visibility 125ms 0ms var(--deceleration-curve);
+  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
+    transform 125ms 0ms var(--rls-deceleration-curve),
+    visibility 125ms 0ms var(--rls-deceleration-curve);
 }
 .rls-confirmation__header {
   position: relative;
   display: flex;
   flex-direction: column;
-  row-gap: var(--sizing-x2);
+  row-gap: var(--rls-sizing-x2);
   width: 100%;
-  padding: 0rem var(--sizing-x8);
+  padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__header__title {
   text-align: center;
-  color: var(--color-theme-500);
-  font-weight: var(--font-weight-bold);
+  color: var(--rls-app-color-500);
+  font-weight: var(--rls-font-weight-bold);
   font-size: var(--pvt-title-font-size);
   line-height: var(--pvt-title-line-height);
   letter-spacing: var(--pvt-title-letter-spacing);
@@ -78,8 +78,8 @@
 }
 .rls-confirmation__header__subtitle {
   text-align: center;
-  color: var(--color-rolster-300);
-  font-weight: var(--font-weight-bold);
+  color: var(--rls-theme-color-300);
+  font-weight: var(--rls-font-weight-bold);
   font-size: var(--pvt-subtitle-font-size);
   line-height: var(--pvt-subtitle-line-height);
   letter-spacing: var(--pvt-subtitle-letter-spacing);
@@ -88,15 +88,15 @@
 .rls-confirmation__body {
   position: relative;
   width: 100%;
-  padding: 0rem var(--sizing-x8);
+  padding: 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__body__content {
-  color: var(--color-theme-300);
+  color: var(--rls-app-color-300);
   text-align: center;
 }
 .rls-confirmation__body__content p {
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--rls-font-weight-medium);
   font-size: var(--pvt-content-font-size);
   line-height: var(--pvt-content-line-height);
   letter-spacing: var(--pvt-content-letter-spacing);
@@ -104,7 +104,7 @@
 .rls-confirmation__footer {
   position: relative;
   width: 100%;
-  padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
+  padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
   box-sizing: border-box;
 }
 .rls-confirmation__footer__actions {
@@ -113,7 +113,7 @@
   display: flex;
   flex-direction: row-reverse;
   justify-content: center;
-  column-gap: var(--sizing-x8);
+  column-gap: var(--rls-sizing-x8);
 }
 .rls-confirmation__backdrop {
   position: absolute;
@@ -125,25 +125,25 @@
   opacity: var(--pvt-backdrop-opacity);
   z-index: 1;
   will-change: opacity;
-  background: var(--backdrop-rolster-500);
+  background: var(--rls-theme-backdrop-900);
   backdrop-filter: blur(2px);
-  transition: opacity 120ms 0ms var(--deceleration-curve),
-    bottom 120ms 0ms var(--deceleration-curve);
+  transition: opacity 120ms 0ms var(--rls-deceleration-curve),
+    bottom 120ms 0ms var(--rls-deceleration-curve);
 }
 
 @media screen and (max-width: 480px) {
   .rls-confirmation {
-    --pvt-title-font-size: var(--title-font-size);
-    --pvt-title-letter-spacing: var(--title-letter-spacing);
-    --pvt-title-line-height: var(--title-line-height);
-    --pvt-subtitle-font-size: var(--smalltext-font-size);
-    --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
-    --pvt-subtitle-line-height: var(--smalltext-line-height);
+    --pvt-title-font-size: var(--rls-title-font-size);
+    --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
+    --pvt-title-line-height: var(--rls-title-line-height);
+    --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
+    --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
+    --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
     --pvt-content-font-size: 7.325rem;
   }
   .rls-confirmation__footer__actions {
     flex-direction: column-reverse;
     column-gap: 0rem;
-    row-gap: var(--sizing-x8);
+    row-gap: var(--rls-sizing-x8);
   }
 }

package/dist/esm/components/organisms/DateField/DateField.css

@@ -1,38 +1,38 @@
 .rls-date-field {
-  --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
+  --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
   position: relative;
-  float: left;
   width: 100%;
   box-sizing: border-box;
 }
+.rls-date-field .rls-box-field__body {
+  column-gap: var(--rls-sizing-x2);
+}
 .rls-date-field__control {
   position: relative;
-  float: left;
-  width: calc(100% - var(--sizing-x14));
-  height: var(--sizing-x12);
-  line-height: var(--sizing-x12);
+  width: calc(100% - var(--rls-sizing-x14));
+  height: var(--rls-sizing-x12);
+  line-height: var(--rls-sizing-x12);
   padding: 0rem;
   cursor: default;
   border: none;
   outline: none;
-  color: var(--color-theme-input);
   background: transparent;
-  font-size: var(--input-font-size);
-  font-weight: var(--font-weight-medium);
-  letter-spacing: var(--input-letter-spacing);
+  color: var(--rls-app-color-500);
+  font-size: var(--rls-input-font-size);
+  font-weight: var(--rls-font-weight-medium);
+  letter-spacing: var(--rls-input-letter-spacing);
 }
 .rls-date-field__control::placeholder {
-  color: var(--color-theme-100);
+  color: var(--rls-app-color-100);
 }
 .rls-date-field__control:disabled {
   opacity: 0.5;
 }
 .rls-date-field__action {
-  color: var(--color-theme-300);
-  width: var(--sizing-x12);
-  height: var(--sizing-x12);
+  color: var(--rls-app-color-300);
+  width: var(--rls-sizing-x12);
+  height: var(--rls-sizing-x12);
   padding: 0rem;
-  margin-left: var(--sizing-x2);
   background: transparent;
 }
 .rls-date-field__action:disabled {

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

@@ -7,8 +7,8 @@ interface DateFieldProps extends RlsComponent {
     formControl?: ReactControl<HTMLElement, Date>;
     maxDate?: Date;
     minDate?: Date;
-    placeholder?: string;
     onValue?: (value?: Date) => void;
+    placeholder?: string;
 }
-export declare function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }: DateFieldProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,22 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { formatDate } from '@rolster/helpers-date';
-import { useEffect, useState } from 'react';
-import { renderClassStatus } from '../../../helpers/css';
+import { PickerListenerType, checkDateRange } from '@rolster/helpers-components';
+import { dateFormatTemplate } from '@rolster/helpers-date';
+import { useEffect, useRef, useState } from 'react';
+import { DATE_RANGE_FORMAT } from '../../../constants';
+import { renderClassStatus } from '../../../helpers';
 import { RlsMessageIcon, RlsIcon } from '../../atoms';
 import { RlsDatePicker } from '../DatePicker/DatePicker';
 import { RlsModal } from '../Modal/Modal';
 import './DateField.css';
-import { PickerListenerType } from '../../../types';
-export function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, placeholder, rlsTheme, onValue }) {
-    const dateInitial = formControl?.state || date || new Date();
-    const [value, setValue] = useState(dateInitial);
-    const [show, setShow] = useState(false);
-    const [description, setDescription] = useState('');
+export function RlsDateField({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
+    const today = new Date(); // Initial current date in component
+    const [value, setValue] = useState();
+    const [modalIsVisible, setModalIsVisible] = useState(false);
+    const description = useRef('');
     useEffect(() => {
-        setDescription(value ? formatDate(value, '{dd}/{mx}/{aa}') : '');
+        const dateCheck = checkDateRange({
+            date: formControl?.state || date || today,
+            minDate,
+            maxDate
+        });
+        setValue(dateCheck);
+        formControl?.setState(dateCheck);
+    }, []);
+    useEffect(() => {
+        description.current = value
+            ? dateFormatTemplate(value, DATE_RANGE_FORMAT)
+            : '';
     }, [value]);
     function onClickInput() {
-        setShow(true);
+        setModalIsVisible(true);
     }
     function onChange(value, ignoreControl = false) {
         if (!ignoreControl) {
@@ -35,16 +47,16 @@ export function RlsDateField({ children, date, disabled, formControl, maxDate, m
             }
         }
         else {
-            setShow(true);
+            setModalIsVisible(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, rlsTheme: rlsTheme, 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.current, 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: modalIsVisible, 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);
                         }
-                        setShow(false);
-                        if (formControl && !formControl.touched) {
-                            formControl.touch();
+                        setModalIsVisible(false);
+                        if (!formControl?.touched) {
+                            formControl?.touch();
                         }
                     } }) })] }));
 }