@rolster/react-components 18.15.1 → 18.15.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (51) hide show
  1. package/dist/cjs/assets/{index-xOmRdBnF.css → index-Dbh6DUCn.css} +15 -10
  2. package/dist/cjs/index.js +1759 -1574
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-xOmRdBnF.css → index-Dbh6DUCn.css} +15 -10
  5. package/dist/es/index.js +1641 -1456
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/CheckBox/CheckBox.js +2 -2
  8. package/dist/esm/components/atoms/CheckBox/CheckBox.js.map +1 -1
  9. package/dist/esm/components/atoms/Input/Input.js +4 -4
  10. package/dist/esm/components/atoms/InputMoney/InputMoney.js +2 -2
  11. package/dist/esm/components/atoms/InputMoney/InputMoney.js.map +1 -1
  12. package/dist/esm/components/atoms/InputNumber/InputNumber.js +2 -2
  13. package/dist/esm/components/atoms/InputPassword/InputPassword.js +1 -1
  14. package/dist/esm/components/atoms/InputText/InputText.js +2 -2
  15. package/dist/esm/components/atoms/InputText/InputText.js.map +1 -1
  16. package/dist/esm/components/atoms/Switch/Switch.js +2 -2
  17. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.js +4 -4
  18. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.js +4 -4
  19. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.js +4 -4
  20. package/dist/esm/components/molecules/Pagination/Pagination.d.ts +7 -19
  21. package/dist/esm/components/molecules/Pagination/Pagination.js +42 -198
  22. package/dist/esm/components/molecules/Pagination/Pagination.js.map +1 -1
  23. package/dist/esm/components/molecules/PickerDay/PickerDay.css +5 -3
  24. package/dist/esm/components/molecules/PickerDay/PickerDay.js +6 -6
  25. package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js +4 -4
  26. package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js.map +1 -1
  27. package/dist/esm/components/molecules/PickerMonth/PickerMonth.js +6 -6
  28. package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.css +1 -1
  29. package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.js +16 -16
  30. package/dist/esm/components/molecules/PickerYear/PickerYear.css +8 -3
  31. package/dist/esm/components/molecules/PickerYear/PickerYear.js +6 -6
  32. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +5 -5
  33. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +14 -14
  34. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
  35. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteHook.js +6 -6
  36. package/dist/esm/components/organisms/FieldDate/FieldDate.d.ts +3 -2
  37. package/dist/esm/components/organisms/FieldDate/FieldDate.js +15 -14
  38. package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -1
  39. package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js +2 -2
  40. package/dist/esm/components/organisms/FieldSelect/FieldSelect.d.ts +4 -4
  41. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +9 -9
  42. package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
  43. package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.js +4 -4
  44. package/dist/esm/components/organisms/PickerDate/PickerDate.css +1 -3
  45. package/dist/esm/components/organisms/PickerDate/PickerDate.js +23 -23
  46. package/dist/esm/components/organisms/PickerDate/PickerDate.js.map +1 -1
  47. package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js +13 -13
  48. package/dist/esm/hooks/ListControlHook.d.ts +1 -1
  49. package/dist/esm/hooks/ListControlHook.js +23 -23
  50. package/dist/esm/hooks/ListControlHook.js.map +1 -1
  51. package/package.json +13 -15
@@ -1 +1 @@
1
- {"version":3,"file":"PickerDayRange.js","sourceRoot":"","sources":["../../../../../src/components/molecules/PickerDayRange/PickerDayRange.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PickerDayRange.js","sourceRoot":"","sources":["../../../../../src/components/molecules/PickerDayRange/PickerDayRange.tsx"],"names":[],"mappings":"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"}
@@ -7,7 +7,7 @@ import './PickerMonth.css';
7
7
  export function RlsPickerMonth({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme, year }) {
8
8
  const currentDate = date || new Date();
9
9
  const [months, setMonths] = useState([]);
10
- const [value, setValue] = useState(formControl?.state || currentDate.getMonth());
10
+ const [value, setValue] = useState(formControl?.value || currentDate.getMonth());
11
11
  useEffect(() => {
12
12
  const props = createPickerProps(); // MonthPickerProps
13
13
  const month = checkMonthPicker(props);
@@ -16,20 +16,20 @@ export function RlsPickerMonth({ date, disabled: disabledPicker, formControl, ma
16
16
  useEffect(() => {
17
17
  const month = checkMonthPicker(createPickerProps());
18
18
  itIsDefined(month)
19
- ? formControl?.setState(month)
20
- : setValue(formControl?.state || currentDate.getMonth());
21
- }, [formControl?.state]);
19
+ ? formControl?.setValue(month)
20
+ : setValue(formControl?.value || currentDate.getMonth());
21
+ }, [formControl?.value]);
22
22
  function createPickerProps() {
23
23
  return {
24
24
  date: currentDate,
25
- month: itIsDefined(formControl?.state) ? formControl?.state : value,
25
+ month: itIsDefined(formControl?.value) ? formControl?.value : value,
26
26
  year: year || currentDate.getFullYear(),
27
27
  minDate,
28
28
  maxDate
29
29
  };
30
30
  }
31
31
  function setMonthValue(value) {
32
- formControl ? formControl.setState(value) : setValue(value);
32
+ formControl ? formControl.setValue(value) : setValue(value);
33
33
  }
34
34
  function onChange(value) {
35
35
  setMonthValue(value);
@@ -1,11 +1,11 @@
1
1
  .rls-picker-month-title {
2
2
  display: flex;
3
3
  justify-content: space-between;
4
+ align-items: center;
4
5
  }
5
6
  .rls-picker-month-title span {
6
7
  color: var(--rls-app-color-300);
7
8
  cursor: default;
8
- margin: auto 0rem;
9
9
  height: var(--rls-sizing-x14);
10
10
  line-height: var(--rls-sizing-x14);
11
11
  font-size: var(--rls-sizing-x10);
@@ -9,42 +9,42 @@ export function RlsPickerMonthTitle({ monthControl, type, yearControl, date, dis
9
9
  date,
10
10
  maxDate,
11
11
  minDate,
12
- month: monthControl.state
12
+ month: monthControl.value
13
13
  });
14
- const monthName = MONTH_NAMES()[monthControl.state || 0];
14
+ const monthName = MONTH_NAMES()[monthControl.value || 0];
15
15
  function onPreviousMonth() {
16
- if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
17
- if (monthControl.state > Month.January) {
18
- monthControl.setState(monthControl.state - 1);
16
+ if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
17
+ if (monthControl.value > Month.January) {
18
+ monthControl.setValue(monthControl.value - 1);
19
19
  }
20
20
  else {
21
- monthControl.setState(Month.December);
22
- yearControl.setState(yearControl.state - 1);
21
+ monthControl.setValue(Month.December);
22
+ yearControl.setValue(yearControl.value - 1);
23
23
  }
24
24
  }
25
25
  }
26
26
  function onPreviousYear() {
27
- if (itIsDefined(yearControl.state)) {
28
- yearControl.setState(yearControl.state - 1);
27
+ if (itIsDefined(yearControl.value)) {
28
+ yearControl.setValue(yearControl.value - 1);
29
29
  }
30
30
  }
31
31
  function onPrevious() {
32
32
  type === 'month' ? onPreviousMonth() : onPreviousYear();
33
33
  }
34
34
  function onNextMonth() {
35
- if (itIsDefined(monthControl.state) && itIsDefined(yearControl.state)) {
36
- if (monthControl.state < Month.December) {
37
- monthControl.setState(monthControl.state + 1);
35
+ if (itIsDefined(monthControl.value) && itIsDefined(yearControl.value)) {
36
+ if (monthControl.value < Month.December) {
37
+ monthControl.setValue(monthControl.value + 1);
38
38
  }
39
39
  else {
40
- monthControl.setState(Month.January);
41
- yearControl.setState(yearControl.state + 1);
40
+ monthControl.setValue(Month.January);
41
+ yearControl.setValue(yearControl.value + 1);
42
42
  }
43
43
  }
44
44
  }
45
45
  function onNextYear() {
46
- if (itIsDefined(yearControl.state)) {
47
- yearControl.setState(yearControl.state + 1);
46
+ if (itIsDefined(yearControl.value)) {
47
+ yearControl.setValue(yearControl.value + 1);
48
48
  }
49
49
  }
50
50
  function onNext() {
@@ -1,6 +1,6 @@
1
1
  .rls-picker-year {
2
2
  --pvt-component-background: transparent;
3
- --pvt-component-font-color: var(--rls-app-color-500);
3
+ --pvt-component-font-color: var(--rls-app-color-300);
4
4
  --pvt-component-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  width: 100%;
@@ -19,6 +19,11 @@
19
19
  background: var(--rls-app-background-100);
20
20
  border-radius: var(--rls-sizing-x4);
21
21
  }
22
+ .rls-picker-year__header > label {
23
+ font-weight: var(--rls-font-weight-semibold);
24
+ font-size: 8.75rem;
25
+ letter-spacing: 0.325rem;
26
+ }
22
27
  .rls-picker-year__action {
23
28
  width: var(--rls-sizing-x16);
24
29
  height: var(--rls-sizing-x16);
@@ -82,8 +87,8 @@
82
87
  pointer-events: none;
83
88
  }
84
89
  .rls-picker-year__year__span {
85
- font-weight: var(--rls-font-weight-semibold);
86
- font-size: var(--rls-sizing-x8);
90
+ font-weight: var(--rls-font-weight-medium);
91
+ font-size: 7.5rem;
87
92
  cursor: default;
88
93
  pointer-events: none;
89
94
  letter-spacing: 0.325rem;
@@ -7,8 +7,8 @@ import { RlsButtonAction } from '../../atoms';
7
7
  import './PickerYear.css';
8
8
  export function RlsPickerYear({ date, disabled: disabledPicker, formControl, maxDate, minDate, onValue, rlsTheme }) {
9
9
  const currentDate = date || new Date();
10
- const [value, setValue] = useState(formControl?.state || currentDate.getFullYear());
11
- const [year, setYear] = useState(formControl?.state || currentDate.getFullYear());
10
+ const [value, setValue] = useState(formControl?.value || currentDate.getFullYear());
11
+ const [year, setYear] = useState(formControl?.value || currentDate.getFullYear());
12
12
  const [template, setTemplate] = useState(createYearPicker(createPickerProps()));
13
13
  useEffect(() => {
14
14
  const props = createPickerProps(); // YearPickerProps
@@ -20,9 +20,9 @@ export function RlsPickerYear({ date, disabled: disabledPicker, formControl, max
20
20
  useEffect(() => {
21
21
  const year = checkYearPicker(createPickerProps());
22
22
  itIsDefined(year)
23
- ? formControl?.setState(year)
24
- : setValue(formControl?.state || currentDate.getFullYear());
25
- }, [formControl?.state]);
23
+ ? formControl?.setValue(year)
24
+ : setValue(formControl?.value || currentDate.getFullYear());
25
+ }, [formControl?.value]);
26
26
  function createPickerProps() {
27
27
  return {
28
28
  date: currentDate,
@@ -32,7 +32,7 @@ export function RlsPickerYear({ date, disabled: disabledPicker, formControl, max
32
32
  };
33
33
  }
34
34
  function setYearValue(value) {
35
- formControl ? formControl.setState(value) : setValue(value);
35
+ formControl ? formControl.setValue(value) : setValue(value);
36
36
  setYear(value);
37
37
  }
38
38
  function onClickPrev() {
@@ -3,20 +3,20 @@ import { ReactControl } from '@rolster/react-forms';
3
3
  import { ReactNode } from 'react';
4
4
  import { RlsComponent } from '../../definitions';
5
5
  import './FieldAutocomplete.css';
6
- interface FieldAutocompleteProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {
6
+ interface FieldAutocompleteProps<T = any, E extends Element<T> = Element<T>> extends RlsComponent {
7
7
  suggestions: E[];
8
8
  disabled?: boolean;
9
9
  formControl?: ReactControl<HTMLElement, T | undefined>;
10
10
  hiddenIcon?: boolean;
11
- placeholder?: string;
12
- searching?: boolean;
13
11
  onSearch?: (pattern: string) => void;
14
12
  onSelect?: (value: T) => void;
15
13
  onValue?: (value?: T) => void;
14
+ placeholder?: string;
15
+ searching?: boolean;
16
16
  }
17
17
  interface FieldAutocompleteTemplateProps<T = any, E extends Element<T> = Element<T>> extends FieldAutocompleteProps<T, E> {
18
18
  render: (element: E) => ReactNode;
19
19
  }
20
- export declare function RlsFieldAutocompleteTemplate<T = any, E extends Element<T> = Element<T>>({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }: FieldAutocompleteTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
21
- export declare function RlsFieldAutocomplete<T = unknown>(props: FieldAutocompleteProps<T, AutocompleteElement<T>>): import("react/jsx-runtime").JSX.Element;
20
+ export declare function RlsFieldAutocompleteTemplate<T = any, E extends Element<T> = Element<T>>({ render, suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, rlsTheme, searching }: FieldAutocompleteTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
21
+ export declare function RlsFieldAutocomplete<T = any>(props: FieldAutocompleteProps<T, AutocompleteElement<T>>): import("react/jsx-runtime").JSX.Element;
22
22
  export {};
@@ -5,27 +5,27 @@ import { RlsIcon, RlsProgressBar } from '../../atoms';
5
5
  import { RlsBallot, RlsMessageFormError } from '../../molecules';
6
6
  import { useFieldAutocomplete } from './FieldAutocompleteHook';
7
7
  import './FieldAutocomplete.css';
8
- export function RlsFieldAutocompleteTemplate({ suggestions, children, disabled, formControl, hiddenIcon, placeholder, searching, rlsTheme, onSearch, onSelect, onValue, render }) {
9
- const { coincidences, listControl, pattern, onBlurInput, onClickAction, onClickBackdrop, onClickControl, onClickElement, onFocusInput, onKeydownElement, onKeydownInput, setPattern } = useFieldAutocomplete({
8
+ export function RlsFieldAutocompleteTemplate({ render, suggestions, children, disabled, formControl, hiddenIcon, onSearch, onSelect, onValue, placeholder, rlsTheme, searching }) {
9
+ const fieldAutocomplete = useFieldAutocomplete({
10
10
  suggestions,
11
11
  disabled,
12
12
  formControl,
13
13
  onSelect,
14
14
  onValue
15
15
  });
16
- return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', {
16
+ return (_jsxs("div", { ref: fieldAutocomplete.listControl.contentRef, className: renderClassStatus('rls-field-box', {
17
17
  disabled,
18
- focused: listControl.focused,
19
- selected: !!listControl.value
20
- }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("label", { className: "rls-field-list__control", onClick: onClickControl, children: listControl.value ? (_jsx("span", { className: "rls-field-list__control__description", children: listControl.value })) : (_jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && listControl.value && (_jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "trash-2" }) }))] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
21
- visible: listControl.visible,
22
- hide: !listControl.visible,
23
- higher: listControl.higher
24
- }), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { ref: listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: pattern, onChange: ({ target: { value } }) => {
25
- setPattern(value);
26
- }, disabled: disabled || searching, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown: onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
27
- onSearch(pattern);
28
- }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), coincidences.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !coincidences.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__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-field-list__backdrop", onClick: onClickBackdrop })] })] }));
18
+ focused: fieldAutocomplete.listControl.focused,
19
+ selected: !!fieldAutocomplete.listControl.value
20
+ }, 'rls-field-list rls-field-autocomplete'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("label", { className: "rls-field-list__control", onClick: fieldAutocomplete.onClickControl, children: fieldAutocomplete.listControl.value ? (_jsx("span", { className: "rls-field-list__control__description", children: fieldAutocomplete.listControl.value })) : (_jsx("span", { className: "rls-field-list__control__placeholder", children: placeholder })) }), !hiddenIcon && fieldAutocomplete.listControl.value && (_jsx("button", { className: "rls-field-list__action", disabled: disabled, onClick: fieldAutocomplete.onClickAction, children: _jsx(RlsIcon, { value: "trash-2" }) }))] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
21
+ visible: fieldAutocomplete.listControl.visible,
22
+ hide: !fieldAutocomplete.listControl.visible,
23
+ higher: fieldAutocomplete.listControl.higher
24
+ }), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: fieldAutocomplete.listControl.listRef, className: "rls-field-list__ul", children: [_jsxs("div", { className: "rls-field-list__ul__search", children: [_jsx("input", { ref: fieldAutocomplete.listControl.inputRef, className: "rls-field-list__ul__control", type: "text", placeholder: reactI18n('listInputPlaceholder'), value: fieldAutocomplete.pattern, onChange: ({ target: { value } }) => {
25
+ fieldAutocomplete.setPattern(value);
26
+ }, disabled: disabled || searching, onFocus: fieldAutocomplete.onFocusInput, onBlur: fieldAutocomplete.onBlurInput, onKeyDown: fieldAutocomplete.onKeydownInput }), onSearch && (_jsx("button", { disabled: disabled || searching, onClick: () => {
27
+ onSearch(fieldAutocomplete.pattern);
28
+ }, children: _jsx(RlsIcon, { value: "search" }) }))] }), searching && _jsx(RlsProgressBar, { indeterminate: true }), fieldAutocomplete.coincidences.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldAutocomplete.onClickElement(element), onKeyDown: fieldAutocomplete.onKeydownElement(element), children: render(element) }, index))), !fieldAutocomplete.coincidences.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__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-field-list__backdrop", onClick: fieldAutocomplete.onClickBackdrop })] })] }));
29
29
  }
30
30
  export function RlsFieldAutocomplete(props) {
31
31
  return (_jsx(RlsFieldAutocompleteTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
@@ -1 +1 @@
1
- {"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FieldAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldAutocomplete/FieldAutocomplete.tsx"],"names":[],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import { createStoreAutocomplete } from '@rolster/components';
1
+ import { createAutocompleteStore } from '@rolster/components';
2
2
  import { useEffect, useRef, useState } from 'react';
3
3
  import { useListControl } from '../../../hooks';
4
4
  const DURATION_ANIMATION = 240;
@@ -31,14 +31,14 @@ export function useFieldAutocomplete({ disabled, formControl, onSelect, onValue,
31
31
  changeInternal.current = false;
32
32
  return;
33
33
  }
34
- refresh(collection, formControl?.state);
35
- }, [formControl?.state]);
34
+ refresh(collection, formControl?.value);
35
+ }, [formControl?.value]);
36
36
  useEffect(() => {
37
37
  if (!initializedCollection.current || !initializedState.current) {
38
38
  initializedCollection.current = true;
39
39
  return;
40
40
  }
41
- refresh(collection, formControl?.state);
41
+ refresh(collection, formControl?.value);
42
42
  }, [collection]);
43
43
  function refresh(collection, state) {
44
44
  if (!state) {
@@ -54,7 +54,7 @@ export function useFieldAutocomplete({ disabled, formControl, onSelect, onValue,
54
54
  function setFormState(value) {
55
55
  if (formControl) {
56
56
  changeInternal.current = true;
57
- formControl.setState(value);
57
+ formControl.setValue(value);
58
58
  }
59
59
  }
60
60
  function onClickControl() {
@@ -117,7 +117,7 @@ export function useFieldAutocomplete({ disabled, formControl, onSelect, onValue,
117
117
  }
118
118
  }
119
119
  function refreshCoincidences(pattern, reboot = false) {
120
- const { collection, store } = createStoreAutocomplete({
120
+ const { collection, store } = createAutocompleteStore({
121
121
  pattern,
122
122
  suggestions,
123
123
  reboot,
@@ -4,11 +4,12 @@ import './FieldDate.css';
4
4
  interface FieldDateProps extends RlsComponent {
5
5
  date?: Date;
6
6
  disabled?: boolean;
7
- formControl?: ReactControl<HTMLElement, Date | undefined>;
7
+ formControl?: ReactControl<HTMLElement, Undefined<Date>>;
8
+ format?: string;
8
9
  maxDate?: Date;
9
10
  minDate?: Date;
10
11
  onValue?: (value?: Date) => void;
11
12
  placeholder?: string;
12
13
  }
13
- export declare function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }: FieldDateProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, onValue, placeholder, rlsTheme }: FieldDateProps): import("react/jsx-runtime").JSX.Element;
14
15
  export {};
@@ -2,40 +2,38 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { PickerListenerType, checkDateRange } from '@rolster/components';
3
3
  import { dateFormatTemplate } from '@rolster/dates';
4
4
  import { useEffect, useState } from 'react';
5
- import { DATE_RANGE_FORMAT } from '../../../constants';
6
5
  import { renderClassStatus } from '../../../helpers';
7
6
  import { RlsIcon } from '../../atoms';
8
7
  import { RlsMessageFormError } from '../../molecules';
9
8
  import { RlsModal } from '../Modal/Modal';
10
9
  import { RlsPickerDate } from '../PickerDate/PickerDate';
11
10
  import './FieldDate.css';
12
- export function RlsFieldDate({ children, date, disabled, formControl, maxDate, minDate, onValue, placeholder, rlsTheme }) {
11
+ const FORMAT_DATE = '{dd}/{mx}/{aa}';
12
+ export function RlsFieldDate({ children, date, disabled, formControl, format, maxDate, minDate, onValue, placeholder, rlsTheme }) {
13
13
  const today = new Date(); // Initial current date in component
14
14
  const [value, setValue] = useState();
15
15
  const [modalIsVisible, setModalIsVisible] = useState(false);
16
16
  useEffect(() => {
17
17
  const dateCheck = checkDateRange({
18
- date: formControl?.state || date || today,
18
+ date: formControl?.value || date || today,
19
19
  minDate,
20
20
  maxDate
21
21
  });
22
22
  setValue(dateCheck);
23
- formControl?.setState(dateCheck);
23
+ formControl?.setValue(dateCheck);
24
24
  }, []);
25
- function onClickInput() {
26
- setModalIsVisible(true);
27
- }
28
- function onChange(value, ignoreControl = false) {
29
- if (!ignoreControl) {
30
- formControl?.setState(value);
31
- }
25
+ function onChange(value) {
32
26
  setValue(value);
33
27
  if (onValue) {
34
28
  onValue(value);
35
29
  }
36
30
  }
37
- function onClean() {
31
+ function onClickInput() {
32
+ setModalIsVisible(true);
33
+ }
34
+ function onClickAction() {
38
35
  if (value) {
36
+ formControl?.setValue(undefined);
39
37
  formControl?.touch();
40
38
  onChange(undefined);
41
39
  }
@@ -43,9 +41,12 @@ export function RlsFieldDate({ children, date, disabled, formControl, maxDate, m
43
41
  setModalIsVisible(true);
44
42
  }
45
43
  }
46
- return (_jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { className: "rls-field-date__control", type: "text", value: value ? dateFormatTemplate(value, DATE_RANGE_FORMAT) : '', readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-field-date__action", onClick: onClean, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
44
+ const valueInput = value
45
+ ? dateFormatTemplate(value, format || FORMAT_DATE)
46
+ : '';
47
+ return (_jsxs("div", { className: "rls-field-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: renderClassStatus('rls-field-box', { disabled }), children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { className: "rls-field-date__control", type: "text", value: valueInput, readOnly: true, placeholder: placeholder, onClick: onClickInput, disabled: disabled }), _jsx("button", { className: "rls-field-date__action", onClick: onClickAction, disabled: disabled, children: _jsx(RlsIcon, { value: value ? 'trash-2' : 'calendar' }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl })] }), _jsx(RlsModal, { visible: modalIsVisible, rlsTheme: rlsTheme, children: _jsx(RlsPickerDate, { formControl: formControl, date: date, disabled: disabled, maxDate: maxDate, minDate: minDate, onListener: ({ value, type }) => {
47
48
  if (type !== PickerListenerType.Cancel) {
48
- onChange(value, true);
49
+ onChange(value);
49
50
  }
50
51
  formControl?.touch();
51
52
  setModalIsVisible(false);
@@ -1 +1 @@
1
- {"version":3,"file":"FieldDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDate/FieldDate.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FieldDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldDate/FieldDate.tsx"],"names":[],"mappings":"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"}
@@ -8,7 +8,7 @@ import { RlsModal } from '../Modal/Modal';
8
8
  import { RlsPickerDateRange } from '../PickerDateRange/PickerDateRange';
9
9
  import './FieldDateRange.css';
10
10
  export function RlsFieldDateRange({ children, date: datePicker, disabled, formControl, maxDate, minDate, placeholder, rlsTheme }) {
11
- const currentRange = formControl?.state || DateRange.now();
11
+ const currentRange = formControl?.value || DateRange.now();
12
12
  const currentDate = datePicker || new Date();
13
13
  const [value, setValue] = useState(currentRange);
14
14
  const [modalIsVisible, setModalIsVisible] = useState(false);
@@ -17,7 +17,7 @@ export function RlsFieldDateRange({ children, date: datePicker, disabled, formCo
17
17
  }
18
18
  function onClickAction() {
19
19
  if (value) {
20
- formControl?.setState(undefined);
20
+ formControl?.setValue(undefined);
21
21
  setValue(undefined);
22
22
  }
23
23
  else {
@@ -3,7 +3,7 @@ import { ReactControl } from '@rolster/react-forms';
3
3
  import { ReactNode } from 'react';
4
4
  import { RlsComponent } from '../../definitions';
5
5
  import './FieldSelect.css';
6
- interface FieldSelectProps<T = unknown, E extends Element<T> = Element<T>> extends RlsComponent {
6
+ interface FieldSelectProps<T = any, E extends Element<T> = Element<T>> extends RlsComponent {
7
7
  suggestions: E[];
8
8
  disabled?: boolean;
9
9
  formControl?: ReactControl<HTMLElement, T | undefined>;
@@ -11,9 +11,9 @@ interface FieldSelectProps<T = unknown, E extends Element<T> = Element<T>> exten
11
11
  onSelect?: (value: T) => void;
12
12
  onValue?: (value?: T) => void;
13
13
  }
14
- interface FieldSelectTemplateProps<T = unknown, E extends Element<T> = Element<T>> extends FieldSelectProps<T, E> {
14
+ interface FieldSelectTemplateProps<T = any, E extends Element<T> = Element<T>> extends FieldSelectProps<T, E> {
15
15
  render: (element: E) => ReactNode;
16
16
  }
17
- export declare function RlsFieldSelectTemplate<T = unknown, E extends Element<T> = Element<T>>({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }: FieldSelectTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
18
- export declare function RlsFieldSelect<T = unknown>(props: FieldSelectProps<T, ListElement<T>>): import("react/jsx-runtime").JSX.Element;
17
+ export declare function RlsFieldSelectTemplate<T = any, E extends Element<T> = Element<T>>({ render, suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }: FieldSelectTemplateProps<T, E>): import("react/jsx-runtime").JSX.Element;
18
+ export declare function RlsFieldSelect<T = any>(props: FieldSelectProps<T, ListElement<T>>): import("react/jsx-runtime").JSX.Element;
19
19
  export {};
@@ -5,21 +5,21 @@ import { RlsIcon } from '../../atoms';
5
5
  import { RlsBallot, RlsMessageFormError } from '../../molecules';
6
6
  import { useFieldSelect } from './FieldSelectHook';
7
7
  import './FieldSelect.css';
8
- export function RlsFieldSelectTemplate({ suggestions, children, disabled, formControl, placeholder, rlsTheme, onSelect, onValue, render }) {
9
- const { listControl, onBlurInput, onClickAction, onClickBackdrop, onClickElement, onClickInput, onFocusInput, onKeydownElement, onKeydownInput } = useFieldSelect({
8
+ export function RlsFieldSelectTemplate({ render, suggestions, children, disabled, formControl, onSelect, onValue, placeholder, rlsTheme }) {
9
+ const fieldSelect = useFieldSelect({
10
10
  suggestions,
11
11
  disabled,
12
12
  formControl,
13
13
  onSelect,
14
14
  onValue
15
15
  });
16
- return (_jsxs("div", { ref: listControl.boxContentRef, className: renderClassStatus('rls-field-box', { focused: listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { ref: listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: listControl.value, onFocus: onFocusInput, onBlur: onBlurInput, onClick: onClickInput, onKeyDown: onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-field-list__action', {
17
- visible: listControl.visible
18
- }), disabled: disabled, onClick: onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
19
- visible: listControl.visible,
20
- hide: !listControl.visible,
21
- higher: listControl.higher
22
- }), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: onClickElement(element), onKeyDown: onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__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-field-list__backdrop", onClick: onClickBackdrop })] })] }));
16
+ return (_jsxs("div", { ref: fieldSelect.listControl.contentRef, className: renderClassStatus('rls-field-box', { focused: fieldSelect.listControl.focused, disabled }, 'rls-field-list rls-field-select'), "rls-theme": rlsTheme, children: [children && _jsx("label", { className: "rls-field-box__label", children: children }), _jsx("div", { className: "rls-field-box__component", children: _jsxs("div", { className: "rls-field-box__body", children: [_jsx("input", { ref: fieldSelect.listControl.inputRef, className: "rls-field-list__control", readOnly: true, disabled: disabled, placeholder: placeholder, value: fieldSelect.listControl.value, onFocus: fieldSelect.onFocusInput, onBlur: fieldSelect.onBlurInput, onClick: fieldSelect.onClickInput, onKeyDown: fieldSelect.onKeydownInput }), _jsx("button", { className: renderClassStatus('rls-field-list__action', {
17
+ visible: fieldSelect.listControl.visible
18
+ }), disabled: disabled, onClick: fieldSelect.onClickAction, children: _jsx(RlsIcon, { value: "arrow-ios-down" }) })] }) }), _jsx(RlsMessageFormError, { className: "rls-field-box__error", formControl: formControl }), _jsxs("div", { className: renderClassStatus('rls-field-list__suggestions', {
19
+ visible: fieldSelect.listControl.visible,
20
+ hide: !fieldSelect.listControl.visible,
21
+ higher: fieldSelect.listControl.higher
22
+ }), children: [_jsx("div", { className: "rls-field-list__suggestions__body", children: _jsxs("ul", { ref: fieldSelect.listControl.listRef, className: "rls-field-list__ul", children: [suggestions.map((element, index) => (_jsx("li", { className: "rls-field-list__element", tabIndex: -1, onClick: fieldSelect.onClickElement(element), onKeyDown: fieldSelect.onKeydownElement(element), children: render(element) }, index))), !suggestions.length && (_jsx("li", { className: "rls-field-list__empty", children: _jsxs("div", { className: "rls-field-list__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-field-list__backdrop", onClick: fieldSelect.onClickBackdrop })] })] }));
23
23
  }
24
24
  export function RlsFieldSelect(props) {
25
25
  return (_jsx(RlsFieldSelectTemplate, { ...props, render: (element) => (_jsx(RlsBallot, { subtitle: element.subtitle, img: element.img, initials: element.initials, children: element.title })) }));
@@ -1 +1 @@
1
- {"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"FieldSelect.js","sourceRoot":"","sources":["../../../../../src/components/organisms/FieldSelect/FieldSelect.tsx"],"names":[],"mappings":"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"}
@@ -15,14 +15,14 @@ export function useFieldSelect({ suggestions, formControl, onSelect, onValue })
15
15
  changeInternal.current = false;
16
16
  return;
17
17
  }
18
- refresh(collection, formControl?.state);
19
- }, [formControl?.state]);
18
+ refresh(collection, formControl?.value);
19
+ }, [formControl?.value]);
20
20
  useEffect(() => {
21
21
  if (!initializedCollection.current || !initializedState.current) {
22
22
  initializedCollection.current = true;
23
23
  return;
24
24
  }
25
- refresh(collection, formControl?.state);
25
+ refresh(collection, formControl?.value);
26
26
  }, [collection]);
27
27
  function refresh(collection, state) {
28
28
  if (!state) {
@@ -38,7 +38,7 @@ export function useFieldSelect({ suggestions, formControl, onSelect, onValue })
38
38
  function setFormState(value) {
39
39
  if (formControl) {
40
40
  changeInternal.current = true;
41
- formControl.setState(value);
41
+ formControl.setValue(value);
42
42
  }
43
43
  }
44
44
  function onFocusInput() {
@@ -13,6 +13,7 @@
13
13
  padding: var(--rls-sizing-x4);
14
14
  box-sizing: border-box;
15
15
  background: var(--rls-theme-color-100);
16
+ border-radius: var(--rls-sizing-x4);
16
17
  }
17
18
  .rls-picker-date__header .rls-picker-month-title {
18
19
  padding: 0rem var(--rls-sizing-x6);
@@ -41,9 +42,6 @@
41
42
  .rls-picker-date__component {
42
43
  display: flex;
43
44
  justify-content: center;
44
- width: 150rem;
45
- padding: 0rem var(--rls-sizing-x2);
46
- box-sizing: border-box;
47
45
  }
48
46
  .rls-picker-date__component > * {
49
47
  display: none;