@trilogy-ds/react 0.0.1-beta.34 → 0.0.1-beta.35
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/lib/components/alert/Alert.d.ts +10 -2
- package/lib/components/alert/Alert.js +84 -3
- package/lib/components/alert/Alert.js.map +1 -1
- package/lib/components/alert/Alert.native.d.ts +22 -2
- package/lib/components/alert/Alert.native.js +82 -1
- package/lib/components/alert/Alert.native.js.map +1 -1
- package/lib/components/alert/AlertProps.d.ts +23 -1
- package/lib/components/alert/AlertProps.js +5 -1
- package/lib/components/alert/AlertProps.js.map +1 -1
- package/lib/components/alert/context/ToasterContext.d.ts +7 -0
- package/lib/components/alert/context/ToasterContext.js +5 -0
- package/lib/components/alert/context/ToasterContext.js.map +1 -0
- package/lib/components/alert/context/ToasterContextProps.d.ts +27 -0
- package/lib/components/alert/context/ToasterContextProps.js +2 -0
- package/lib/components/alert/context/ToasterContextProps.js.map +1 -0
- package/lib/components/alert/context/index.d.ts +2 -0
- package/lib/components/alert/context/index.js +3 -0
- package/lib/components/alert/context/index.js.map +1 -0
- package/lib/components/alert/index.d.ts +3 -2
- package/lib/components/alert/index.js +3 -2
- package/lib/components/alert/index.js.map +1 -1
- package/lib/components/index.d.ts +0 -1
- package/lib/components/index.js +0 -1
- package/lib/components/index.js.map +1 -1
- package/lib/components/input/Input.js +2 -0
- package/lib/components/input/Input.js.map +1 -1
- package/lib/components/input/Input.native.js +1 -1
- package/lib/components/input/Input.native.js.map +1 -1
- package/lib/components/input/InputProps.d.ts +1 -0
- package/lib/components/modal/Modal.native.js +4 -1
- package/lib/components/modal/Modal.native.js.map +1 -1
- package/lib/components/select/Select.d.ts +2 -2
- package/lib/components/select/Select.js +6 -18
- package/lib/components/select/Select.js.map +1 -1
- package/lib/components/select/Select.native.d.ts +3 -3
- package/lib/components/select/Select.native.js +116 -79
- package/lib/components/select/Select.native.js.map +1 -1
- package/lib/components/select/SelectProps.d.ts +10 -21
- package/lib/components/select/option/SelectOption.d.ts +2 -3
- package/lib/components/select/option/SelectOption.js +10 -12
- package/lib/components/select/option/SelectOption.js.map +1 -1
- package/lib/components/select/option/SelectOption.native.d.ts +3 -3
- package/lib/components/select/option/SelectOption.native.js +41 -5
- package/lib/components/select/option/SelectOption.native.js.map +1 -1
- package/lib/components/select/web/SelectDynamic.d.ts +3 -3
- package/lib/components/select/web/SelectDynamic.js +186 -49
- package/lib/components/select/web/SelectDynamic.js.map +1 -1
- package/lib/components/select/web/SelectNative.d.ts +2 -2
- package/lib/components/select/web/SelectNative.js +57 -22
- package/lib/components/select/web/SelectNative.js.map +1 -1
- package/package.json +1 -1
- package/lib/components/select/hooks/accessibility.d.ts +0 -11
- package/lib/components/select/hooks/accessibility.js +0 -111
- package/lib/components/select/hooks/accessibility.js.map +0 -1
- package/lib/components/select/hooks/utils.d.ts +0 -30
- package/lib/components/select/hooks/utils.js +0 -94
- package/lib/components/select/hooks/utils.js.map +0 -1
- package/lib/components/select/option/SelectNativeOption.d.ts +0 -4
- package/lib/components/select/option/SelectNativeOption.js +0 -8
- package/lib/components/select/option/SelectNativeOption.js.map +0 -1
- package/lib/components/select/option/SelectNativeOption.native.d.ts +0 -2
- package/lib/components/select/option/SelectNativeOption.native.js +0 -5
- package/lib/components/select/option/SelectNativeOption.native.js.map +0 -1
|
@@ -1,111 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState } from 'react';
|
|
2
|
-
export const useAccessibility = (isOpenSelect, handleChangeSelect, setIsOpenSelect, optionRefs, selectRef, handleFocusCurrentOption) => {
|
|
3
|
-
const selectInputRef = useRef('');
|
|
4
|
-
const [isDebounce, setIsDebounce] = useState(false);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
if (isDebounce) {
|
|
7
|
-
const timeoutId = setTimeout(() => {
|
|
8
|
-
selectInputRef.current = '';
|
|
9
|
-
setIsDebounce(false);
|
|
10
|
-
}, 2000);
|
|
11
|
-
return () => clearTimeout(timeoutId);
|
|
12
|
-
}
|
|
13
|
-
}, [isDebounce]);
|
|
14
|
-
const arrowNavigateOptions = React.useCallback((direction) => {
|
|
15
|
-
var _a, _b, _c;
|
|
16
|
-
if (isOpenSelect && optionRefs.current != null) {
|
|
17
|
-
const currentIndex = optionRefs.current.findIndex((ref) => ref === document.activeElement);
|
|
18
|
-
let newIndex = currentIndex + direction;
|
|
19
|
-
if (((_a = optionRefs.current[newIndex]) === null || _a === void 0 ? void 0 : _a.dataset.isDisabled) && direction === -1)
|
|
20
|
-
newIndex--;
|
|
21
|
-
if (((_b = optionRefs.current[newIndex]) === null || _b === void 0 ? void 0 : _b.dataset.isDisabled) && direction === 1)
|
|
22
|
-
newIndex++;
|
|
23
|
-
if (newIndex >= 0 && newIndex < optionRefs.current.length) {
|
|
24
|
-
(_c = optionRefs.current[newIndex]) === null || _c === void 0 ? void 0 : _c.focus();
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
}, [isOpenSelect, optionRefs]);
|
|
28
|
-
const wordNavigateOptions = React.useCallback((key) => {
|
|
29
|
-
var _a, _b, _c, _d;
|
|
30
|
-
const isValidateString = /^\p{L}+$/u.test(key);
|
|
31
|
-
if (optionRefs.current === null)
|
|
32
|
-
return;
|
|
33
|
-
let focusedIndex = optionRefs.current.findIndex((ref) => ref === document.activeElement);
|
|
34
|
-
const isTextExist = optionRefs.current.findIndex((ref) => { var _a; return ((_a = ref === null || ref === void 0 ? void 0 : ref.dataset.textcontent) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === selectInputRef.current.toLowerCase(); });
|
|
35
|
-
const sameLetters = selectInputRef.current
|
|
36
|
-
.split('')
|
|
37
|
-
.every((letter) => letter.toLowerCase() === selectInputRef.current[0].toLowerCase());
|
|
38
|
-
const setSelectOption = (index) => {
|
|
39
|
-
var _a, _b, _c;
|
|
40
|
-
if (optionRefs.current === null)
|
|
41
|
-
return;
|
|
42
|
-
handleChangeSelect({
|
|
43
|
-
selectValue: (_a = optionRefs.current[index]) === null || _a === void 0 ? void 0 : _a.dataset.index,
|
|
44
|
-
selectName: (_b = optionRefs.current[index]) === null || _b === void 0 ? void 0 : _b.dataset.textcontent,
|
|
45
|
-
selectId: (_c = optionRefs.current[index]) === null || _c === void 0 ? void 0 : _c.dataset.id,
|
|
46
|
-
disabled: false,
|
|
47
|
-
});
|
|
48
|
-
};
|
|
49
|
-
switch (true) {
|
|
50
|
-
case isTextExist !== -1:
|
|
51
|
-
isOpenSelect && ((_a = optionRefs.current[isTextExist]) === null || _a === void 0 ? void 0 : _a.focus());
|
|
52
|
-
!isOpenSelect && setSelectOption(isTextExist);
|
|
53
|
-
break;
|
|
54
|
-
case isValidateString && (selectInputRef.current.length === 1 || sameLetters):
|
|
55
|
-
if (!isOpenSelect)
|
|
56
|
-
focusedIndex = optionRefs.current.findIndex((ref) => { var _a; return ((_a = ref === null || ref === void 0 ? void 0 : ref.dataset) === null || _a === void 0 ? void 0 : _a.isActive) === 'true'; });
|
|
57
|
-
for (let i = 1; i < optionRefs.current.length; i++) {
|
|
58
|
-
const nextIndex = (focusedIndex + i) % optionRefs.current.length;
|
|
59
|
-
if (((_c = (_b = optionRefs.current[nextIndex]) === null || _b === void 0 ? void 0 : _b.dataset.textcontent) === null || _c === void 0 ? void 0 : _c.charAt(0).toLowerCase()) === key.toLowerCase()) {
|
|
60
|
-
isOpenSelect && ((_d = optionRefs.current[nextIndex]) === null || _d === void 0 ? void 0 : _d.focus());
|
|
61
|
-
!isOpenSelect && setSelectOption(nextIndex);
|
|
62
|
-
break;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
break;
|
|
66
|
-
default:
|
|
67
|
-
return;
|
|
68
|
-
}
|
|
69
|
-
}, [optionRefs, isOpenSelect, selectInputRef]);
|
|
70
|
-
const handleKeyDown = React.useCallback((e, child) => {
|
|
71
|
-
var _a;
|
|
72
|
-
switch (e.key) {
|
|
73
|
-
case ' ':
|
|
74
|
-
e.preventDefault();
|
|
75
|
-
if (child) {
|
|
76
|
-
(_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.focus();
|
|
77
|
-
handleChangeSelect({
|
|
78
|
-
selectValue: child.props.value,
|
|
79
|
-
selectName: child.props.children || child.props.label,
|
|
80
|
-
selectId: child.props.id,
|
|
81
|
-
disabled: false,
|
|
82
|
-
});
|
|
83
|
-
}
|
|
84
|
-
else {
|
|
85
|
-
handleFocusCurrentOption();
|
|
86
|
-
}
|
|
87
|
-
setIsOpenSelect((prev) => !prev);
|
|
88
|
-
break;
|
|
89
|
-
case 'ArrowUp':
|
|
90
|
-
e.preventDefault();
|
|
91
|
-
arrowNavigateOptions(-1);
|
|
92
|
-
break;
|
|
93
|
-
case 'ArrowDown':
|
|
94
|
-
e.preventDefault();
|
|
95
|
-
arrowNavigateOptions(1);
|
|
96
|
-
break;
|
|
97
|
-
case 'Enter':
|
|
98
|
-
e.preventDefault();
|
|
99
|
-
break;
|
|
100
|
-
default:
|
|
101
|
-
selectInputRef.current = selectInputRef.current + e.key;
|
|
102
|
-
wordNavigateOptions(e.key);
|
|
103
|
-
setIsDebounce(true);
|
|
104
|
-
break;
|
|
105
|
-
}
|
|
106
|
-
}, [arrowNavigateOptions, selectRef, selectInputRef.current]);
|
|
107
|
-
return {
|
|
108
|
-
handleKeyDown,
|
|
109
|
-
};
|
|
110
|
-
};
|
|
111
|
-
//# sourceMappingURL=accessibility.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"accessibility.js","sourceRoot":"","sources":["../../../../components/select/hooks/accessibility.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React, { FocusEvent } from 'react';
|
|
2
|
-
import { ISelectOption, SelectChangeEvent, SelectChangeEventHandler } from '../SelectProps';
|
|
3
|
-
interface IProps {
|
|
4
|
-
name?: string;
|
|
5
|
-
nullable?: boolean;
|
|
6
|
-
onChange?: SelectChangeEventHandler<SelectChangeEvent>;
|
|
7
|
-
onFocus?: (event: React.FocusEvent | React.BaseSyntheticEvent) => void;
|
|
8
|
-
onBlur?: (event: React.FocusEvent | React.BaseSyntheticEvent | MouseEvent) => void;
|
|
9
|
-
children?: React.ReactNode;
|
|
10
|
-
disabled?: boolean;
|
|
11
|
-
selected?: string | number;
|
|
12
|
-
id?: string;
|
|
13
|
-
}
|
|
14
|
-
export declare const useUtils: ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id }: IProps) => {
|
|
15
|
-
handleChangeSelect: ({ selectValue, selectName, selectId, disabled, }: {
|
|
16
|
-
selectValue: string;
|
|
17
|
-
selectName: string;
|
|
18
|
-
selectId: string;
|
|
19
|
-
disabled: boolean;
|
|
20
|
-
}) => void;
|
|
21
|
-
handleFocusCurrentOption: () => void;
|
|
22
|
-
handleFocusSelect: (e: FocusEvent<HTMLInputElement>) => false | void | undefined;
|
|
23
|
-
handleOpenSelect: (e: React.MouseEvent) => void;
|
|
24
|
-
isOpenSelect: boolean;
|
|
25
|
-
setIsOpenSelect: React.Dispatch<React.SetStateAction<boolean>>;
|
|
26
|
-
optionRefs: React.MutableRefObject<(HTMLDivElement | null)[]>;
|
|
27
|
-
selectRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
28
|
-
selectedOption: ISelectOption | undefined;
|
|
29
|
-
};
|
|
30
|
-
export {};
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export const useUtils = ({ onChange, nullable, disabled, onFocus, onBlur, children, selected, name, id }) => {
|
|
3
|
-
const [isOpenSelect, setIsOpenSelect] = React.useState(false);
|
|
4
|
-
const [selectedOption, setSelectedOption] = React.useState();
|
|
5
|
-
const selectRef = React.useRef(null);
|
|
6
|
-
const optionRefs = React.useRef([]);
|
|
7
|
-
const handleFocusCurrentOption = React.useCallback(() => {
|
|
8
|
-
setTimeout(() => {
|
|
9
|
-
var _a;
|
|
10
|
-
let currentIndex = optionRefs.current.findIndex((ref) => (ref === null || ref === void 0 ? void 0 : ref.dataset.isActive) == 'true');
|
|
11
|
-
if (currentIndex === -1)
|
|
12
|
-
currentIndex = 0;
|
|
13
|
-
(_a = optionRefs.current[currentIndex]) === null || _a === void 0 ? void 0 : _a.focus();
|
|
14
|
-
}, 10);
|
|
15
|
-
}, [optionRefs]);
|
|
16
|
-
const handleChangeSelect = React.useCallback(({ selectValue, selectName, selectId, disabled, }) => {
|
|
17
|
-
if (!disabled) {
|
|
18
|
-
if (onChange) {
|
|
19
|
-
onChange({
|
|
20
|
-
selectValue: nullable && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === selectValue ? undefined : selectValue,
|
|
21
|
-
selectName: nullable && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === selectValue ? undefined : name,
|
|
22
|
-
selectId: nullable && (selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === selectValue ? undefined : id,
|
|
23
|
-
name: name,
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
setSelectedOption((prev) => {
|
|
27
|
-
return {
|
|
28
|
-
value: nullable && (prev === null || prev === void 0 ? void 0 : prev.value) === selectValue ? undefined : selectValue,
|
|
29
|
-
name: nullable && (prev === null || prev === void 0 ? void 0 : prev.value) === selectValue ? undefined : selectName,
|
|
30
|
-
id: nullable && (prev === null || prev === void 0 ? void 0 : prev.value) === selectValue ? undefined : selectId,
|
|
31
|
-
};
|
|
32
|
-
});
|
|
33
|
-
}
|
|
34
|
-
}, [name, nullable, selectedOption, id]);
|
|
35
|
-
const handleFocusSelect = React.useCallback((e) => !disabled && onFocus && onFocus(e), [disabled, onFocus]);
|
|
36
|
-
const handleOpenSelect = React.useCallback((e) => {
|
|
37
|
-
if (!disabled) {
|
|
38
|
-
setIsOpenSelect((prev) => {
|
|
39
|
-
if (prev && onBlur)
|
|
40
|
-
onBlur(e);
|
|
41
|
-
return !prev;
|
|
42
|
-
});
|
|
43
|
-
handleFocusCurrentOption();
|
|
44
|
-
}
|
|
45
|
-
}, [disabled, optionRefs, selectRef]);
|
|
46
|
-
React.useEffect(() => {
|
|
47
|
-
const selectedChild = React.Children.toArray(children).find((child) => {
|
|
48
|
-
return React.isValidElement(child) && (child.props.value === selected || child.props.selected === true);
|
|
49
|
-
});
|
|
50
|
-
if (React.isValidElement(selectedChild)) {
|
|
51
|
-
setSelectedOption({
|
|
52
|
-
value: selectedChild.props.value,
|
|
53
|
-
name: selectedChild.props.children || selectedChild.props.label,
|
|
54
|
-
id: selectedChild.props.id,
|
|
55
|
-
});
|
|
56
|
-
}
|
|
57
|
-
else {
|
|
58
|
-
setSelectedOption({
|
|
59
|
-
value: undefined,
|
|
60
|
-
name: undefined,
|
|
61
|
-
id: undefined,
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
}, [children, selected]);
|
|
65
|
-
React.useEffect(() => {
|
|
66
|
-
const handleClickOutside = (event) => {
|
|
67
|
-
var _a;
|
|
68
|
-
if (isOpenSelect && !((_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
|
|
69
|
-
if (onBlur)
|
|
70
|
-
onBlur(event);
|
|
71
|
-
setIsOpenSelect(false);
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
document.addEventListener('click', handleClickOutside);
|
|
75
|
-
return () => {
|
|
76
|
-
document.removeEventListener('click', handleClickOutside);
|
|
77
|
-
};
|
|
78
|
-
}, [isOpenSelect, selectRef, onBlur]);
|
|
79
|
-
React.useEffect(() => {
|
|
80
|
-
optionRefs.current = optionRefs.current.slice(0, React.Children.toArray(children).length);
|
|
81
|
-
}, [optionRefs]);
|
|
82
|
-
return {
|
|
83
|
-
handleChangeSelect,
|
|
84
|
-
handleFocusCurrentOption,
|
|
85
|
-
handleFocusSelect,
|
|
86
|
-
handleOpenSelect,
|
|
87
|
-
isOpenSelect,
|
|
88
|
-
setIsOpenSelect,
|
|
89
|
-
optionRefs,
|
|
90
|
-
selectRef,
|
|
91
|
-
selectedOption,
|
|
92
|
-
};
|
|
93
|
-
};
|
|
94
|
-
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../components/select/hooks/utils.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
const SelectNativeOption = ({ id, value, disabled, children, onClick, label, testId, ...others }) => {
|
|
3
|
-
return (React.createElement("option", { role: 'option', id: id, value: value, disabled: disabled, "aria-label": label, "data-testid": testId, ...others, onClick: (e) => {
|
|
4
|
-
onClick && onClick(e);
|
|
5
|
-
} }, children || label));
|
|
6
|
-
};
|
|
7
|
-
export default SelectNativeOption;
|
|
8
|
-
//# sourceMappingURL=SelectNativeOption.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectNativeOption.js","sourceRoot":"","sources":["../../../../components/select/option/SelectNativeOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,MAAM,kBAAkB,GAAG,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,MAAM,EACN,GAAG,MAAM,EACS,EAAe,EAAE;IACnC,OAAO,CACL,gCACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,gBACN,KAAK,iBACJ,MAAM,KACf,MAAM,EACV,OAAO,EAAE,CAAC,CAAgC,EAAE,EAAE;YAC5C,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CAAA;QACvB,CAAC,IAEA,QAAQ,IAAI,KAAK,CACX,CACV,CAAA;AACH,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectNativeOption.native.js","sourceRoot":"","sources":["../../../../components/select/option/SelectNativeOption.native.tsx"],"names":[],"mappings":"AAAA,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC9B,OAAM;AACR,CAAC,CAAA;AAED,eAAe,kBAAkB,CAAA"}
|