@rolster/react-components 18.15.1 → 18.15.3
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.
- package/dist/cjs/assets/{index-xOmRdBnF.css → index-VCzqT0sQ.css} +27 -11
- package/dist/cjs/index.js +1759 -1574
- package/dist/cjs/index.js.map +1 -1
- package/dist/es/assets/{index-xOmRdBnF.css → index-VCzqT0sQ.css} +27 -11
- package/dist/es/index.js +1641 -1456
- package/dist/es/index.js.map +1 -1
- package/dist/esm/components/atoms/CheckBox/CheckBox.js +2 -2
- package/dist/esm/components/atoms/CheckBox/CheckBox.js.map +1 -1
- package/dist/esm/components/atoms/Input/Input.js +4 -4
- package/dist/esm/components/atoms/InputMoney/InputMoney.js +2 -2
- package/dist/esm/components/atoms/InputMoney/InputMoney.js.map +1 -1
- package/dist/esm/components/atoms/InputNumber/InputNumber.js +2 -2
- package/dist/esm/components/atoms/InputPassword/InputPassword.js +1 -1
- package/dist/esm/components/atoms/InputText/InputText.js +2 -2
- package/dist/esm/components/atoms/InputText/InputText.js.map +1 -1
- package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +6 -1
- package/dist/esm/components/atoms/Switch/Switch.js +2 -2
- package/dist/esm/components/molecules/Ballot/Ballot.css +6 -0
- package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.js +4 -4
- package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.js +4 -4
- package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.js +4 -4
- package/dist/esm/components/molecules/Pagination/Pagination.d.ts +7 -19
- package/dist/esm/components/molecules/Pagination/Pagination.js +42 -198
- package/dist/esm/components/molecules/Pagination/Pagination.js.map +1 -1
- package/dist/esm/components/molecules/PickerDay/PickerDay.css +5 -3
- package/dist/esm/components/molecules/PickerDay/PickerDay.js +6 -6
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js +4 -4
- package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.js.map +1 -1
- package/dist/esm/components/molecules/PickerMonth/PickerMonth.js +6 -6
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.css +1 -1
- package/dist/esm/components/molecules/PickerMonthTitle/PickerMonthTitle.js +16 -16
- package/dist/esm/components/molecules/PickerYear/PickerYear.css +8 -3
- package/dist/esm/components/molecules/PickerYear/PickerYear.js +6 -6
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.d.ts +5 -5
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js +14 -14
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.js.map +1 -1
- package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocompleteHook.js +6 -6
- package/dist/esm/components/organisms/FieldDate/FieldDate.d.ts +3 -2
- package/dist/esm/components/organisms/FieldDate/FieldDate.js +15 -14
- package/dist/esm/components/organisms/FieldDate/FieldDate.js.map +1 -1
- package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.js +2 -2
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.d.ts +4 -4
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js +9 -9
- package/dist/esm/components/organisms/FieldSelect/FieldSelect.js.map +1 -1
- package/dist/esm/components/organisms/FieldSelect/FieldSelectHook.js +4 -4
- package/dist/esm/components/organisms/PickerDate/PickerDate.css +1 -3
- package/dist/esm/components/organisms/PickerDate/PickerDate.js +23 -23
- package/dist/esm/components/organisms/PickerDate/PickerDate.js.map +1 -1
- package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.js +13 -13
- package/dist/esm/hooks/ListControlHook.d.ts +1 -1
- package/dist/esm/hooks/ListControlHook.js +23 -23
- package/dist/esm/hooks/ListControlHook.js.map +1 -1
- package/package.json +14 -16
|
@@ -9,10 +9,10 @@ import reactI18n from '../../../i18n';
|
|
|
9
9
|
import { RlsButton } from '../../atoms';
|
|
10
10
|
import { RlsPickerDay, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear } from '../../molecules';
|
|
11
11
|
import './PickerDate.css';
|
|
12
|
-
const
|
|
12
|
+
const FORMAT_TITLE = '{dw}, {mx} {dd} de {aa}';
|
|
13
13
|
export function RlsPickerDate({ automatic, date, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
|
|
14
14
|
const today = new Date(); // Initial current date in component
|
|
15
|
-
const dateInitial = formControl?.
|
|
15
|
+
const dateInitial = formControl?.value || date || today;
|
|
16
16
|
const yearControl = useReactControl(dateInitial.getFullYear());
|
|
17
17
|
const dayControl = useReactControl(dateInitial.getDate());
|
|
18
18
|
const monthControl = useReactControl(dateInitial.getMonth());
|
|
@@ -20,28 +20,28 @@ export function RlsPickerDate({ automatic, date, disabled, formControl, maxDate,
|
|
|
20
20
|
const [visibility, setVisibility] = useState('DAY');
|
|
21
21
|
useEffect(() => {
|
|
22
22
|
const dateCheck = checkDateRange({
|
|
23
|
-
date: formControl?.
|
|
23
|
+
date: formControl?.value || date || today,
|
|
24
24
|
minDate,
|
|
25
25
|
maxDate
|
|
26
26
|
});
|
|
27
27
|
setValue(dateCheck);
|
|
28
|
-
formControl?.
|
|
28
|
+
formControl?.setValue(dateCheck);
|
|
29
29
|
}, []);
|
|
30
30
|
useEffect(() => {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}, [yearControl.
|
|
31
|
+
if (itIsDefined(yearControl.value)) {
|
|
32
|
+
setValue(assignYearInDate(value, yearControl.value));
|
|
33
|
+
}
|
|
34
|
+
}, [yearControl.value]);
|
|
35
35
|
useEffect(() => {
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
}, [monthControl.
|
|
36
|
+
if (itIsDefined(monthControl.value)) {
|
|
37
|
+
setValue(assignMonthInDate(value, monthControl.value));
|
|
38
|
+
}
|
|
39
|
+
}, [monthControl.value]);
|
|
40
40
|
useEffect(() => {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}, [dayControl.
|
|
41
|
+
if (itIsDefined(dayControl.value)) {
|
|
42
|
+
setValue(assignDayInDate(value, dayControl.value));
|
|
43
|
+
}
|
|
44
|
+
}, [dayControl.value]);
|
|
45
45
|
function onVisibilityDay() {
|
|
46
46
|
setVisibility('DAY');
|
|
47
47
|
}
|
|
@@ -57,24 +57,24 @@ export function RlsPickerDate({ automatic, date, disabled, formControl, maxDate,
|
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
59
|
function onToday() {
|
|
60
|
-
yearControl.
|
|
61
|
-
dayControl.
|
|
62
|
-
monthControl.
|
|
63
|
-
formControl?.
|
|
60
|
+
yearControl.setValue(today.getFullYear());
|
|
61
|
+
dayControl.setValue(today.getDate());
|
|
62
|
+
monthControl.setValue(today.getMonth());
|
|
63
|
+
formControl?.setValue(today);
|
|
64
64
|
if (onListener) {
|
|
65
65
|
onListener({ type: PickerListenerType.Now, value: today });
|
|
66
66
|
}
|
|
67
67
|
}
|
|
68
68
|
function onSelect() {
|
|
69
|
-
formControl?.
|
|
69
|
+
formControl?.setValue(value);
|
|
70
70
|
if (onListener) {
|
|
71
71
|
onListener({ type: PickerListenerType.Select, value });
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
|
-
return (_jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date__header", children: [_jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial,
|
|
74
|
+
return (_jsxs("div", { className: "rls-picker-date", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date__header", children: [_jsx("div", { className: "rls-picker-date__title rls-picker-date__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: dateFormatTemplate(dateInitial, FORMAT_TITLE) }) }), _jsx("div", { className: "rls-picker-date__title rls-picker-date__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), _jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: value, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: 'month', onClick: onVisibilityMonth })] }), _jsxs("div", { className: renderClassStatus('rls-picker-date__component', {
|
|
75
75
|
day: visibility === 'DAY',
|
|
76
76
|
month: visibility === 'MONTH',
|
|
77
77
|
year: visibility === 'YEAR'
|
|
78
|
-
}), children: [_jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.
|
|
78
|
+
}), children: [_jsx(RlsPickerDay, { formControl: dayControl, date: dateInitial, month: monthControl.value, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, date: dateInitial, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), _jsx(RlsPickerYear, { formControl: yearControl, date: dateInitial, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), !automatic && (_jsx("div", { className: "rls-picker-date__footer", children: _jsxs("div", { className: "rls-picker-date__actions", children: [_jsx("div", { className: "rls-picker-date__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), _jsx("div", { className: "rls-picker-date__actions--today", children: _jsx(RlsButton, { type: "ghost", onClick: onToday, disabled: dateOutRange({ date: today, maxDate, minDate }), children: reactI18n('dateActionToday') }) }), _jsx("div", { className: "rls-picker-date__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) }))] }));
|
|
79
79
|
}
|
|
80
80
|
//# sourceMappingURL=PickerDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PickerDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/PickerDate/PickerDate.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAEL,kBAAkB,EAClB,cAAc,EACd,YAAY,EACb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EACnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAgB,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,OAAO,EACL,YAAY,EACZ,cAAc,EACd,mBAAmB,EACnB,aAAa,EACd,MAAM,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAE1B,MAAM,
|
|
1
|
+
{"version":3,"file":"PickerDate.js","sourceRoot":"","sources":["../../../../../src/components/organisms/PickerDate/PickerDate.tsx"],"names":[],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ import { RlsPickerDayRange, RlsPickerMonth, RlsPickerMonthTitle, RlsPickerYear }
|
|
|
10
10
|
import './PickerDateRange.css';
|
|
11
11
|
export function RlsPickerDateRange({ automatic, date: datePicker, disabled, formControl, maxDate, minDate, onListener, rlsTheme }) {
|
|
12
12
|
const dateInitial = normalizeMinTime(datePicker || new Date());
|
|
13
|
-
const rangeInitial = formControl?.
|
|
13
|
+
const rangeInitial = formControl?.value || DateRange.now();
|
|
14
14
|
const yearControl = useReactControl(dateInitial.getFullYear());
|
|
15
15
|
const monthControl = useReactControl(dateInitial.getMonth());
|
|
16
16
|
const dayControl = useReactControl(rangeInitial);
|
|
@@ -19,24 +19,24 @@ export function RlsPickerDateRange({ automatic, date: datePicker, disabled, form
|
|
|
19
19
|
const [visibility, setVisibility] = useState('DAY');
|
|
20
20
|
useEffect(() => {
|
|
21
21
|
setDate((prevValue) => {
|
|
22
|
-
return typeof yearControl.
|
|
23
|
-
? assignYearInDate(prevValue, yearControl.
|
|
22
|
+
return typeof yearControl.value === 'number'
|
|
23
|
+
? assignYearInDate(prevValue, yearControl.value)
|
|
24
24
|
: prevValue;
|
|
25
25
|
});
|
|
26
|
-
}, [yearControl.
|
|
26
|
+
}, [yearControl.value]);
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
setDate((prevValue) => {
|
|
29
|
-
return typeof monthControl.
|
|
30
|
-
? assignMonthInDate(prevValue, monthControl.
|
|
29
|
+
return typeof monthControl.value === 'number'
|
|
30
|
+
? assignMonthInDate(prevValue, monthControl.value)
|
|
31
31
|
: prevValue;
|
|
32
32
|
});
|
|
33
|
-
}, [monthControl.
|
|
33
|
+
}, [monthControl.value]);
|
|
34
34
|
useEffect(() => {
|
|
35
|
-
if (dayControl.
|
|
36
|
-
setValue(dayControl.
|
|
35
|
+
if (dayControl.value) {
|
|
36
|
+
setValue(dayControl.value);
|
|
37
37
|
}
|
|
38
38
|
setVisibility('DAY');
|
|
39
|
-
}, [dayControl.
|
|
39
|
+
}, [dayControl.value]);
|
|
40
40
|
function onVisibilityDay() {
|
|
41
41
|
setVisibility('DAY');
|
|
42
42
|
}
|
|
@@ -52,16 +52,16 @@ export function RlsPickerDateRange({ automatic, date: datePicker, disabled, form
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
function onSelect() {
|
|
55
|
-
formControl?.
|
|
55
|
+
formControl?.setValue(value);
|
|
56
56
|
if (onListener) {
|
|
57
57
|
onListener({ type: PickerListenerType.Select, value });
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
return (_jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date-range__header", children: [_jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), _jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.
|
|
60
|
+
return (_jsxs("div", { className: "rls-picker-date-range", "rls-theme": rlsTheme, children: [_jsxs("div", { className: "rls-picker-date-range__header", children: [_jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--description", children: _jsx("span", { onClick: onVisibilityDay, children: rangeFormatTemplate(value) }) }), _jsx("div", { className: "rls-picker-date-range__title rls-picker-date-range__title--year", children: _jsx("span", { onClick: onVisibilityYear, children: yearControl.value }) }), _jsx(RlsPickerMonthTitle, { monthControl: monthControl, yearControl: yearControl, date: date, maxDate: maxDate, minDate: minDate, disabled: visibility === 'YEAR', type: visibility === 'MONTH' ? 'year' : 'month', onClick: onVisibilityMonth })] }), _jsxs("div", { className: renderClassStatus('rls-picker-date-range__component', {
|
|
61
61
|
day: visibility === 'DAY',
|
|
62
62
|
month: visibility === 'MONTH',
|
|
63
63
|
year: visibility === 'YEAR'
|
|
64
|
-
}), children: [_jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.
|
|
64
|
+
}), children: [_jsx(RlsPickerDayRange, { formControl: dayControl, date: date, maxDate: maxDate, minDate: minDate, disabled: disabled }), _jsx(RlsPickerMonth, { formControl: monthControl, year: yearControl.value, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay }), _jsx(RlsPickerYear, { formControl: yearControl, maxDate: maxDate, minDate: minDate, disabled: disabled, onValue: onVisibilityDay })] }), _jsx("div", { className: renderClassStatus('rls-picker-date-range__footer', {
|
|
65
65
|
automatic
|
|
66
66
|
}), children: _jsxs("div", { className: "rls-picker-date-range__actions", children: [_jsx("div", { className: "rls-picker-date-range__actions--cancel", children: _jsx(RlsButton, { type: "ghost", onClick: onCancel, children: reactI18n('dateActionCancel') }) }), _jsx("div", { className: "rls-picker-date-range__actions--ok", children: _jsx(RlsButton, { type: "raised", onClick: onSelect, children: reactI18n('dateActionSelect') }) })] }) })] }));
|
|
67
67
|
}
|
|
@@ -9,7 +9,7 @@ interface ListControlState<T> {
|
|
|
9
9
|
visible: boolean;
|
|
10
10
|
}
|
|
11
11
|
export interface ListControl<T = any> extends ListControlState<T> {
|
|
12
|
-
|
|
12
|
+
contentRef: RefObject<HTMLDivElement>;
|
|
13
13
|
inputRef: RefObject<HTMLInputElement>;
|
|
14
14
|
listRef: RefObject<HTMLUListElement>;
|
|
15
15
|
navigationElement: (event: KeyboardEvent) => void;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { ListCollection,
|
|
1
|
+
import { ListCollection, navigationListFromElement, navigationListFromInput, locationListCanTop } from '@rolster/components';
|
|
2
2
|
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
export function useListControl({ suggestions, formControl }) {
|
|
4
|
-
const
|
|
4
|
+
const contentRef = useRef(null);
|
|
5
5
|
const listRef = useRef(null);
|
|
6
6
|
const inputRef = useRef(null);
|
|
7
|
-
const [
|
|
7
|
+
const [state, setState] = useState({
|
|
8
8
|
collection: new ListCollection([]),
|
|
9
9
|
focused: false,
|
|
10
10
|
higher: false,
|
|
@@ -14,8 +14,8 @@ export function useListControl({ suggestions, formControl }) {
|
|
|
14
14
|
const position = useRef(0);
|
|
15
15
|
useEffect(() => {
|
|
16
16
|
function onCloseSuggestions({ target }) {
|
|
17
|
-
if (!
|
|
18
|
-
|
|
17
|
+
if (!contentRef?.current?.contains(target)) {
|
|
18
|
+
setState((state) => ({ ...state, visible: false }));
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
document.addEventListener('click', onCloseSuggestions);
|
|
@@ -24,51 +24,51 @@ export function useListControl({ suggestions, formControl }) {
|
|
|
24
24
|
};
|
|
25
25
|
}, []);
|
|
26
26
|
useEffect(() => {
|
|
27
|
-
const
|
|
27
|
+
const content = contentRef.current;
|
|
28
28
|
const list = listRef.current;
|
|
29
29
|
formControl?.touch();
|
|
30
|
-
|
|
30
|
+
setState((state) => ({
|
|
31
31
|
...state,
|
|
32
|
-
higher:
|
|
32
|
+
higher: locationListCanTop(content, list)
|
|
33
33
|
}));
|
|
34
|
-
}, [
|
|
34
|
+
}, [state.visible]);
|
|
35
35
|
useEffect(() => {
|
|
36
|
-
|
|
36
|
+
setState((state) => ({
|
|
37
37
|
...state,
|
|
38
38
|
collection: new ListCollection(suggestions)
|
|
39
39
|
}));
|
|
40
40
|
}, [suggestions]);
|
|
41
41
|
function setFocused(focused) {
|
|
42
|
-
|
|
42
|
+
setState((state) => ({ ...state, focused }));
|
|
43
43
|
}
|
|
44
44
|
function setValue(value) {
|
|
45
|
-
|
|
45
|
+
setState((state) => ({ ...state, value }));
|
|
46
46
|
}
|
|
47
47
|
function setVisible(visible) {
|
|
48
|
-
|
|
48
|
+
setState((state) => ({ ...state, visible }));
|
|
49
49
|
}
|
|
50
50
|
function navigationInput(event) {
|
|
51
|
-
if (
|
|
52
|
-
const newPosition =
|
|
53
|
-
|
|
51
|
+
if (state.visible) {
|
|
52
|
+
const newPosition = navigationListFromInput({
|
|
53
|
+
content: contentRef.current,
|
|
54
54
|
event: event,
|
|
55
|
-
|
|
55
|
+
list: listRef.current
|
|
56
56
|
});
|
|
57
57
|
position.current = newPosition || 0;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
60
|
function navigationElement(event) {
|
|
61
|
-
position.current =
|
|
62
|
-
|
|
61
|
+
position.current = navigationListFromElement({
|
|
62
|
+
content: contentRef.current,
|
|
63
63
|
event: event,
|
|
64
|
-
|
|
65
|
-
|
|
64
|
+
input: inputRef.current,
|
|
65
|
+
list: listRef.current,
|
|
66
66
|
position: position.current
|
|
67
67
|
});
|
|
68
68
|
}
|
|
69
69
|
return {
|
|
70
|
-
...
|
|
71
|
-
|
|
70
|
+
...state,
|
|
71
|
+
contentRef,
|
|
72
72
|
inputRef,
|
|
73
73
|
listRef,
|
|
74
74
|
navigationElement,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListControlHook.js","sourceRoot":"","sources":["../../../src/hooks/ListControlHook.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACd,
|
|
1
|
+
{"version":3,"file":"ListControlHook.js","sourceRoot":"","sources":["../../../src/hooks/ListControlHook.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rolster/react-components",
|
|
3
|
-
"version": "18.15.
|
|
3
|
+
"version": "18.15.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Package containing UI components for React Project.",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -34,32 +34,26 @@
|
|
|
34
34
|
"prepublishOnly": "npm run build"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@rolster/commons": "^2.0.
|
|
38
|
-
"@rolster/components": "^0.
|
|
37
|
+
"@rolster/commons": "^2.0.5",
|
|
38
|
+
"@rolster/components": "^0.3.10",
|
|
39
39
|
"@rolster/dates": "^2.0.0",
|
|
40
|
-
"@rolster/forms": "^2.
|
|
41
|
-
"@rolster/strings": "^2.0.0",
|
|
40
|
+
"@rolster/forms": "^2.5.0",
|
|
42
41
|
"@rolster/i18n": "^2.0.0",
|
|
43
|
-
"@rolster/react-forms": "^18.
|
|
42
|
+
"@rolster/react-forms": "^18.6.0",
|
|
43
|
+
"@rolster/strings": "^2.0.0",
|
|
44
44
|
"@rolster/validators": "^1.0.5",
|
|
45
45
|
"lottie-react": "^2.4.0",
|
|
46
|
-
"match-sorter": "^6.3.1",
|
|
47
|
-
"object-path": "^0.11.8",
|
|
48
|
-
"rxjs": "^7.8.0",
|
|
49
|
-
"sass": "^1.62.1",
|
|
50
|
-
"sort-by": "^0.0.2",
|
|
51
|
-
"uuid": "^9.0.1"
|
|
52
|
-
},
|
|
53
|
-
"peerDependencies": {
|
|
54
46
|
"react": "^18.2.0",
|
|
55
|
-
"react-dom": "^18.2.0"
|
|
47
|
+
"react-dom": "^18.2.0",
|
|
48
|
+
"uuid": "^9.0.1"
|
|
56
49
|
},
|
|
57
50
|
"devDependencies": {
|
|
58
51
|
"@babel/plugin-proposal-decorators": "^7.21.0",
|
|
59
52
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
60
53
|
"@rollup/plugin-node-resolve": "^15.2.1",
|
|
61
54
|
"@rollup/plugin-typescript": "^11.1.3",
|
|
62
|
-
"@rolster/
|
|
55
|
+
"@rolster/rollup": "^1.0.6",
|
|
56
|
+
"@rolster/styles-foundations": "^2.3.7",
|
|
63
57
|
"@rolster/types": "^1.0.9",
|
|
64
58
|
"@types/node-sass": "^4.11.4",
|
|
65
59
|
"@types/react": "^18.0.28",
|
|
@@ -72,11 +66,15 @@
|
|
|
72
66
|
"eslint": "^8.38.0",
|
|
73
67
|
"eslint-plugin-react-hooks": "^4.6.0",
|
|
74
68
|
"eslint-plugin-react-refresh": "^0.3.4",
|
|
69
|
+
"match-sorter": "^6.3.1",
|
|
75
70
|
"node-sass": "^9.0.0",
|
|
71
|
+
"object-path": "^0.11.8",
|
|
76
72
|
"prettier": "^2.8.8",
|
|
77
73
|
"rollup-plugin-import-css": "^3.3.1",
|
|
78
74
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
79
75
|
"rollup-plugin-swc": "^0.2.1",
|
|
76
|
+
"sass": "^1.62.1",
|
|
77
|
+
"sort-by": "^0.0.2",
|
|
80
78
|
"typescript": "^5.0.2",
|
|
81
79
|
"vite": "^4.3.2",
|
|
82
80
|
"vite-tsconfig-paths": "^4.2.0"
|