@swan-io/lake 2.7.5 → 2.7.7
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/package.json +11 -11
- package/src/components/AutoWidthImage.d.ts +3 -3
- package/src/components/FixedListViewCells.d.ts +61 -8
- package/src/components/FixedListViewCells.js +8 -7
- package/src/components/Form.d.ts +3 -3
- package/src/components/Heading.d.ts +4 -4
- package/src/components/LakeCombobox.js +8 -11
- package/src/components/LakeHeading.d.ts +4 -4
- package/src/components/LakeText.d.ts +18 -1
- package/src/components/LakeText.js +3 -2
- package/src/components/LakeTextInput.d.ts +8 -8
- package/src/components/Link.d.ts +4 -4
- package/src/components/Pressable.d.ts +11 -11
- package/src/components/WithCurrentColor.d.ts +1 -1
- package/src/hooks/useDisclosure.d.ts +1 -1
- package/src/hooks/useDisclosure.js +2 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@swan-io/lake",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.7",
|
|
4
4
|
"engines": {
|
|
5
5
|
"node": ">=18.0.0",
|
|
6
6
|
"yarn": "^1.22.0"
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"license": "MIT",
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@popperjs/core": "^2.11.8",
|
|
30
|
-
"@react-three/drei": "^9.
|
|
31
|
-
"@react-three/fiber": "^8.13.
|
|
32
|
-
"@swan-io/boxed": "^1.0
|
|
30
|
+
"@react-three/drei": "^9.80.1",
|
|
31
|
+
"@react-three/fiber": "^8.13.6",
|
|
32
|
+
"@swan-io/boxed": "^1.1.0",
|
|
33
33
|
"@swan-io/chicane": "^1.4.1",
|
|
34
34
|
"dayjs": "^1.11.9",
|
|
35
35
|
"polished": "^4.2.2",
|
|
@@ -39,21 +39,21 @@
|
|
|
39
39
|
"react-dom": "^18.2.0",
|
|
40
40
|
"react-native-web": "^0.19.7",
|
|
41
41
|
"react-popper": "^2.3.0",
|
|
42
|
-
"react-ux-form": "^1.
|
|
42
|
+
"react-ux-form": "^1.5.0",
|
|
43
43
|
"rifm": "^0.12.1",
|
|
44
|
-
"three": "^0.
|
|
44
|
+
"three": "^0.155.0",
|
|
45
45
|
"ts-dedent": "^2.2.0",
|
|
46
|
-
"ts-pattern": "^5.0.
|
|
47
|
-
"urql": "^4.0.
|
|
46
|
+
"ts-pattern": "^5.0.5",
|
|
47
|
+
"urql": "^4.0.5",
|
|
48
48
|
"uuid": "^9.0.0"
|
|
49
49
|
},
|
|
50
50
|
"devDependencies": {
|
|
51
|
-
"@types/react": "^18.2.
|
|
51
|
+
"@types/react": "^18.2.19",
|
|
52
52
|
"@types/react-dom": "^18.2.7",
|
|
53
53
|
"@types/react-native": "^0.72.2",
|
|
54
|
-
"@types/three": "^0.
|
|
54
|
+
"@types/three": "^0.155.0",
|
|
55
55
|
"@types/uuid": "^9.0.2",
|
|
56
56
|
"jsdom": "^22.1.0",
|
|
57
|
-
"type-fest": "^4.
|
|
57
|
+
"type-fest": "^4.2.0"
|
|
58
58
|
}
|
|
59
59
|
}
|
|
@@ -57,9 +57,9 @@ export declare const AutoWidthImage: import("react").MemoExoticComponent<import(
|
|
|
57
57
|
'aria-valuenow'?: number | undefined;
|
|
58
58
|
'aria-valuetext'?: string | undefined;
|
|
59
59
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
60
|
-
importantForAccessibility?: "auto" | "
|
|
60
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
61
61
|
'aria-hidden'?: boolean | undefined;
|
|
62
|
-
'aria-live'?: "
|
|
62
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
63
63
|
'aria-modal'?: boolean | undefined;
|
|
64
64
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
65
65
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -78,7 +78,7 @@ export declare const AutoWidthImage: import("react").MemoExoticComponent<import(
|
|
|
78
78
|
"aria-colindex"?: number | undefined;
|
|
79
79
|
"aria-colspan"?: number | undefined;
|
|
80
80
|
"aria-controls"?: string | undefined;
|
|
81
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
81
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
82
82
|
"aria-describedby"?: string | undefined;
|
|
83
83
|
"aria-details"?: string | undefined;
|
|
84
84
|
"aria-errormessage"?: string | undefined;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { ReactNode } from "react";
|
|
1
|
+
import { ComponentProps, ReactNode } from "react";
|
|
2
2
|
import { ColorVariants } from "../constants/design";
|
|
3
3
|
import { TextVariant } from "./LakeText";
|
|
4
|
+
import { LakeTooltip } from "./LakeTooltip";
|
|
4
5
|
type Justify = "flex-start" | "center" | "flex-end";
|
|
5
6
|
type SortDirection = "Desc" | "Asc";
|
|
6
7
|
export declare const SimpleHeaderCell: ({ text, sort, justifyContent, onPress, }: {
|
|
@@ -14,21 +15,56 @@ export declare const ColorPatchCell: ({ isHovered, alternativeText, color, }: {
|
|
|
14
15
|
alternativeText?: string | undefined;
|
|
15
16
|
color: ColorVariants;
|
|
16
17
|
}) => import("react/jsx-runtime").JSX.Element | null;
|
|
17
|
-
export declare const SimpleTitleCell: ({ isHighlighted, text, }: {
|
|
18
|
+
export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
|
|
18
19
|
isHighlighted?: boolean | undefined;
|
|
19
20
|
text: string;
|
|
21
|
+
tooltip?: Omit<{
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
content: ReactNode;
|
|
24
|
+
describedBy?: string | undefined;
|
|
25
|
+
matchReferenceWidth?: boolean | undefined;
|
|
26
|
+
hideArrow?: boolean | undefined;
|
|
27
|
+
onHide?: (() => void) | undefined;
|
|
28
|
+
onShow?: (() => void) | undefined;
|
|
29
|
+
placement: "bottom" | "left" | "right" | "top";
|
|
30
|
+
width?: number | undefined;
|
|
31
|
+
togglableOnFocus?: boolean | undefined;
|
|
32
|
+
containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
33
|
+
disabled?: boolean | undefined;
|
|
34
|
+
} & import("react").RefAttributes<{
|
|
35
|
+
show: () => void;
|
|
36
|
+
hide: () => void;
|
|
37
|
+
}>, "children"> | undefined;
|
|
20
38
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
21
39
|
export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
|
|
22
|
-
variant?: "light" | "
|
|
40
|
+
variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
|
|
23
41
|
text: string;
|
|
24
42
|
textAlign?: "left" | "right" | "center" | undefined;
|
|
25
43
|
color?: string | undefined;
|
|
26
44
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
27
|
-
export declare const CopyableRegularTextCell: ({ variant, text, copyWording, copiedWording, }: {
|
|
28
|
-
variant?: "light" | "
|
|
45
|
+
export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copyWording, copiedWording, tooltip, }: {
|
|
46
|
+
variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
|
|
29
47
|
text: string;
|
|
48
|
+
textToCopy?: string | undefined;
|
|
30
49
|
copyWording: string;
|
|
31
50
|
copiedWording: string;
|
|
51
|
+
tooltip?: Omit<{
|
|
52
|
+
children: ReactNode;
|
|
53
|
+
content: ReactNode;
|
|
54
|
+
describedBy?: string | undefined;
|
|
55
|
+
matchReferenceWidth?: boolean | undefined;
|
|
56
|
+
hideArrow?: boolean | undefined;
|
|
57
|
+
onHide?: (() => void) | undefined;
|
|
58
|
+
onShow?: (() => void) | undefined;
|
|
59
|
+
placement: "bottom" | "left" | "right" | "top";
|
|
60
|
+
width?: number | undefined;
|
|
61
|
+
togglableOnFocus?: boolean | undefined;
|
|
62
|
+
containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
63
|
+
disabled?: boolean | undefined;
|
|
64
|
+
} & import("react").RefAttributes<{
|
|
65
|
+
show: () => void;
|
|
66
|
+
hide: () => void;
|
|
67
|
+
}>, "children"> | undefined;
|
|
32
68
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
33
69
|
export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
|
|
34
70
|
value: number;
|
|
@@ -39,13 +75,30 @@ export declare const BalanceCell: ({ value, currency, originalValue, formatCurre
|
|
|
39
75
|
} | undefined;
|
|
40
76
|
formatCurrency: (value: number, currency: string) => string;
|
|
41
77
|
textAlign?: "left" | "right" | "center" | undefined;
|
|
42
|
-
variant?: "light" | "
|
|
78
|
+
variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
|
|
43
79
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
44
|
-
export declare const LinkCell: ({ children, external, onPress, variant, }: {
|
|
80
|
+
export declare const LinkCell: ({ children, external, onPress, variant, tooltip, }: {
|
|
45
81
|
children: ReactNode;
|
|
46
82
|
onPress: () => void;
|
|
47
83
|
external?: boolean | undefined;
|
|
48
|
-
variant?: "light" | "
|
|
84
|
+
variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
|
|
85
|
+
tooltip?: Omit<{
|
|
86
|
+
children: ReactNode;
|
|
87
|
+
content: ReactNode;
|
|
88
|
+
describedBy?: string | undefined;
|
|
89
|
+
matchReferenceWidth?: boolean | undefined;
|
|
90
|
+
hideArrow?: boolean | undefined;
|
|
91
|
+
onHide?: (() => void) | undefined;
|
|
92
|
+
onShow?: (() => void) | undefined;
|
|
93
|
+
placement: "bottom" | "left" | "right" | "top";
|
|
94
|
+
width?: number | undefined;
|
|
95
|
+
togglableOnFocus?: boolean | undefined;
|
|
96
|
+
containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
97
|
+
disabled?: boolean | undefined;
|
|
98
|
+
} & import("react").RefAttributes<{
|
|
99
|
+
show: () => void;
|
|
100
|
+
hide: () => void;
|
|
101
|
+
}>, "children"> | undefined;
|
|
49
102
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
50
103
|
export declare const StartAlignedCell: ({ children }: {
|
|
51
104
|
children: ReactNode;
|
|
@@ -109,18 +109,19 @@ export const SimpleHeaderCell = ({ text, sort, justifyContent = "flex-start", on
|
|
|
109
109
|
export const ColorPatchCell = ({ isHovered, alternativeText, color, }) => {
|
|
110
110
|
return isHovered ? (_jsx(View, { style: [styles.colorPatch, { backgroundColor: colors[color].primary }], children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: styles.alternativeText, children: alternativeText })) : null })) : null;
|
|
111
111
|
};
|
|
112
|
-
export const SimpleTitleCell = ({ isHighlighted = false, text, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: isHighlighted ? colors.current.primary : colors.gray[900], style: styles.regularText, variant: "medium", children: text }) }));
|
|
112
|
+
export const SimpleTitleCell = ({ isHighlighted = false, text, tooltip, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: isHighlighted ? colors.current.primary : colors.gray[900], style: styles.regularText, variant: "medium", tooltip: tooltip, children: text }) }));
|
|
113
113
|
export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "left", color = colors.gray[900], }) => {
|
|
114
114
|
return (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { align: textAlign, color: color, style: styles.regularText, variant: variant, children: text }) }));
|
|
115
115
|
};
|
|
116
|
-
export const CopyableRegularTextCell = ({ variant = "regular", text, copyWording, copiedWording, }) => {
|
|
116
|
+
export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy, copyWording, copiedWording, tooltip, }) => {
|
|
117
117
|
const [visibleState, setVisibleState] = useState("copy");
|
|
118
|
+
const clipboardText = textToCopy ?? text;
|
|
118
119
|
const onPress = useCallback((event) => {
|
|
119
120
|
event.preventDefault();
|
|
120
|
-
Clipboard.setString(
|
|
121
|
+
Clipboard.setString(clipboardText);
|
|
121
122
|
setVisibleState("copied");
|
|
122
|
-
}, [
|
|
123
|
-
return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
|
|
123
|
+
}, [clipboardText]);
|
|
124
|
+
return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "top", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
|
|
124
125
|
};
|
|
125
126
|
// TODO: handle `+` sign properly
|
|
126
127
|
export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
|
|
@@ -137,11 +138,11 @@ export const BalanceCell = ({ value, currency, originalValue, formatCurrency, te
|
|
|
137
138
|
value < 0 && { color: colors.negative.primary },
|
|
138
139
|
], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
|
|
139
140
|
};
|
|
140
|
-
export const LinkCell = ({ children, external = false, onPress, variant = "medium", }) => {
|
|
141
|
+
export const LinkCell = ({ children, external = false, onPress, variant = "medium", tooltip, }) => {
|
|
141
142
|
return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
|
|
142
143
|
event.preventDefault();
|
|
143
144
|
onPress();
|
|
144
|
-
}, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, children: children })] }));
|
|
145
|
+
}, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }), _jsx(Space, { width: 8 }), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, tooltip: tooltip, children: children })] }));
|
|
145
146
|
};
|
|
146
147
|
export const StartAlignedCell = ({ children }) => {
|
|
147
148
|
return _jsx(View, { style: styles.cell, children: children });
|
package/src/components/Form.d.ts
CHANGED
|
@@ -77,9 +77,9 @@ export declare const Form: import("react").MemoExoticComponent<import("react").F
|
|
|
77
77
|
'aria-valuenow'?: number | undefined;
|
|
78
78
|
'aria-valuetext'?: string | undefined;
|
|
79
79
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
80
|
-
importantForAccessibility?: "auto" | "
|
|
80
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
81
81
|
'aria-hidden'?: boolean | undefined;
|
|
82
|
-
'aria-live'?: "
|
|
82
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
83
83
|
'aria-modal'?: boolean | undefined;
|
|
84
84
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
85
85
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -98,7 +98,7 @@ export declare const Form: import("react").MemoExoticComponent<import("react").F
|
|
|
98
98
|
"aria-colindex"?: number | undefined;
|
|
99
99
|
"aria-colspan"?: number | undefined;
|
|
100
100
|
"aria-controls"?: string | undefined;
|
|
101
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
101
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
102
102
|
"aria-describedby"?: string | undefined;
|
|
103
103
|
"aria-details"?: string | undefined;
|
|
104
104
|
"aria-errormessage"?: string | undefined;
|
|
@@ -80,7 +80,7 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
|
|
|
80
80
|
selectable?: boolean | undefined;
|
|
81
81
|
selectionColor?: import("react-native").ColorValue | undefined;
|
|
82
82
|
textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
|
|
83
|
-
dataDetectorType?: "none" | "all" | "link" | "
|
|
83
|
+
dataDetectorType?: "none" | "all" | "link" | "email" | "phoneNumber" | null | undefined;
|
|
84
84
|
android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
|
|
85
85
|
accessible?: boolean | undefined;
|
|
86
86
|
accessibilityActions?: readonly Readonly<{
|
|
@@ -104,9 +104,9 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
|
|
|
104
104
|
'aria-valuenow'?: number | undefined;
|
|
105
105
|
'aria-valuetext'?: string | undefined;
|
|
106
106
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
107
|
-
importantForAccessibility?: "auto" | "
|
|
107
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
108
108
|
'aria-hidden'?: boolean | undefined;
|
|
109
|
-
'aria-live'?: "
|
|
109
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
110
110
|
'aria-modal'?: boolean | undefined;
|
|
111
111
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
112
112
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -125,7 +125,7 @@ export declare const Heading: import("react").ForwardRefExoticComponent<{
|
|
|
125
125
|
"aria-colindex"?: number | undefined;
|
|
126
126
|
"aria-colspan"?: number | undefined;
|
|
127
127
|
"aria-controls"?: string | undefined;
|
|
128
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
128
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
129
129
|
"aria-describedby"?: string | undefined;
|
|
130
130
|
"aria-details"?: string | undefined;
|
|
131
131
|
"aria-errormessage"?: string | undefined;
|
|
@@ -3,7 +3,6 @@ import { forwardRef, useCallback, useId, useImperativeHandle, useRef, useState,
|
|
|
3
3
|
import { FlatList, Pressable, StyleSheet, Text, View, } from "react-native";
|
|
4
4
|
import { backgroundColor, colors, spacings } from "../constants/design";
|
|
5
5
|
import { typography } from "../constants/typography";
|
|
6
|
-
import { useDisclosure } from "../hooks/useDisclosure";
|
|
7
6
|
import { useMergeRefs } from "../hooks/useMergeRefs";
|
|
8
7
|
import { getFocusableElements } from "../utils/a11y";
|
|
9
8
|
import { Box } from "./Box";
|
|
@@ -86,9 +85,10 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
|
|
|
86
85
|
const listRef = useRef(null);
|
|
87
86
|
const listContainerRef = useRef(null);
|
|
88
87
|
const blurTimeoutId = useRef(undefined);
|
|
89
|
-
const [isFocused,
|
|
88
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
90
89
|
const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
|
|
91
|
-
const
|
|
90
|
+
const open = useCallback(() => ref.current?.focus(), []);
|
|
91
|
+
const close = useCallback(() => ref.current?.blur(), []);
|
|
92
92
|
useImperativeHandle(externalRef, () => {
|
|
93
93
|
return {
|
|
94
94
|
open,
|
|
@@ -133,19 +133,16 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
|
|
|
133
133
|
const handleFocus = useCallback(() => {
|
|
134
134
|
window.clearTimeout(blurTimeoutId.current);
|
|
135
135
|
blurTimeoutId.current = window.setTimeout(() => {
|
|
136
|
-
|
|
136
|
+
setIsFocused(true);
|
|
137
137
|
}, 100);
|
|
138
|
-
}, [
|
|
138
|
+
}, []);
|
|
139
139
|
const handleBlur = useCallback(() => {
|
|
140
140
|
window.clearTimeout(blurTimeoutId.current);
|
|
141
141
|
blurTimeoutId.current = window.setTimeout(() => {
|
|
142
|
-
|
|
142
|
+
setIsFocused(false);
|
|
143
143
|
}, 100);
|
|
144
|
-
}, [
|
|
145
|
-
return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange:
|
|
146
|
-
setHasChanged(true);
|
|
147
|
-
onChange?.(event);
|
|
148
|
-
}, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: true, visible: isFocused && !items.isNotAsked() && hasChanged, underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
|
|
144
|
+
}, []);
|
|
145
|
+
return (_jsxs(View, { children: [_jsx(LakeTextInput, { containerRef: inputTextRef, style: styles.input, ariaExpanded: isFocused, ariaControls: isFocused ? suggestionsId : "", enterKeyHint: "search", icon: icon, role: "combobox", placeholder: placeholder, value: value, disabled: disabled, error: error, hideErrors: hideErrors, onChangeText: onValueChange, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, onKeyPress: handleKeyPress, id: id, readOnly: readOnly }), _jsx(Popover, { id: suggestionsId, role: "listbox", matchReferenceWidth: true, onDismiss: close, referenceRef: ref, autoFocus: false, returnFocus: false, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
|
|
149
146
|
NotAsked: () => null,
|
|
150
147
|
Loading: () => _jsx(LoadingView, { style: styles.loader }),
|
|
151
148
|
Done: items => items.match({
|
|
@@ -29,7 +29,7 @@ export declare const LakeHeading: import("react").ForwardRefExoticComponent<{
|
|
|
29
29
|
selectable?: boolean | undefined;
|
|
30
30
|
selectionColor?: import("react-native").ColorValue | undefined;
|
|
31
31
|
textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
|
|
32
|
-
dataDetectorType?: "none" | "all" | "link" | "
|
|
32
|
+
dataDetectorType?: "none" | "all" | "link" | "email" | "phoneNumber" | null | undefined;
|
|
33
33
|
android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
|
|
34
34
|
accessible?: boolean | undefined;
|
|
35
35
|
accessibilityActions?: readonly Readonly<{
|
|
@@ -53,9 +53,9 @@ export declare const LakeHeading: import("react").ForwardRefExoticComponent<{
|
|
|
53
53
|
'aria-valuenow'?: number | undefined;
|
|
54
54
|
'aria-valuetext'?: string | undefined;
|
|
55
55
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
56
|
-
importantForAccessibility?: "auto" | "
|
|
56
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
57
57
|
'aria-hidden'?: boolean | undefined;
|
|
58
|
-
'aria-live'?: "
|
|
58
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
59
59
|
'aria-modal'?: boolean | undefined;
|
|
60
60
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
61
61
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -74,7 +74,7 @@ export declare const LakeHeading: import("react").ForwardRefExoticComponent<{
|
|
|
74
74
|
"aria-colindex"?: number | undefined;
|
|
75
75
|
"aria-colspan"?: number | undefined;
|
|
76
76
|
"aria-controls"?: string | undefined;
|
|
77
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
77
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
78
78
|
"aria-describedby"?: string | undefined;
|
|
79
79
|
"aria-details"?: string | undefined;
|
|
80
80
|
"aria-errormessage"?: string | undefined;
|
|
@@ -15,6 +15,23 @@ export declare const LakeText: import("react").ForwardRefExoticComponent<TextPro
|
|
|
15
15
|
children: ReactNode;
|
|
16
16
|
color?: string | undefined;
|
|
17
17
|
userSelect?: TextStyle["userSelect"];
|
|
18
|
-
variant?: "light" | "
|
|
18
|
+
variant?: "light" | "medium" | "semibold" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
|
|
19
|
+
tooltip?: Omit<{
|
|
20
|
+
children: ReactNode;
|
|
21
|
+
content: ReactNode;
|
|
22
|
+
describedBy?: string | undefined;
|
|
23
|
+
matchReferenceWidth?: boolean | undefined;
|
|
24
|
+
hideArrow?: boolean | undefined;
|
|
25
|
+
onHide?: (() => void) | undefined;
|
|
26
|
+
onShow?: (() => void) | undefined;
|
|
27
|
+
placement: "bottom" | "left" | "right" | "top";
|
|
28
|
+
width?: number | undefined;
|
|
29
|
+
togglableOnFocus?: boolean | undefined;
|
|
30
|
+
containerStyle?: import("react-native").StyleProp<import("react-native").ViewStyle>;
|
|
31
|
+
disabled?: boolean | undefined;
|
|
32
|
+
} & import("react").RefAttributes<{
|
|
33
|
+
show: () => void;
|
|
34
|
+
hide: () => void;
|
|
35
|
+
}>, "children"> | undefined;
|
|
19
36
|
} & import("react").RefAttributes<Text>>;
|
|
20
37
|
export {};
|
|
@@ -3,6 +3,7 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import { StyleSheet, Text } from "react-native";
|
|
4
4
|
import { texts } from "../constants/design";
|
|
5
5
|
import { isNotNullish } from "../utils/nullish";
|
|
6
|
+
import { LakeTooltip } from "./LakeTooltip";
|
|
6
7
|
const alignments = StyleSheet.create({
|
|
7
8
|
center: { textAlign: "center" },
|
|
8
9
|
left: { textAlign: "left" },
|
|
@@ -17,10 +18,10 @@ const variants = StyleSheet.create({
|
|
|
17
18
|
smallMedium: texts.smallMedium,
|
|
18
19
|
smallRegular: texts.smallRegular,
|
|
19
20
|
});
|
|
20
|
-
export const LakeText = forwardRef(({ align = "left", children, color, style, userSelect, variant = "regular", ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [
|
|
21
|
+
export const LakeText = forwardRef(({ align = "left", children, color, style, userSelect, variant = "regular", tooltip, ...props }, forwardedRef) => (_jsx(Text, { ref: forwardedRef, style: [
|
|
21
22
|
variants[variant],
|
|
22
23
|
alignments[align],
|
|
23
24
|
isNotNullish(color) && { color },
|
|
24
25
|
isNotNullish(userSelect) && { userSelect },
|
|
25
26
|
style,
|
|
26
|
-
], ...props, children: children })));
|
|
27
|
+
], ...props, children: tooltip ? (_jsx(LakeTooltip, { ...tooltip, children: _jsx(Text, { children: children }) })) : (children) })));
|
|
@@ -69,7 +69,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
69
69
|
role?: import("react-native").WebRole | undefined;
|
|
70
70
|
lang?: string | undefined;
|
|
71
71
|
initialValue?: string | undefined;
|
|
72
|
-
autoComplete?: "name" | "email" | "
|
|
72
|
+
autoComplete?: "name" | "email" | "tel" | "url" | "on" | "off" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
|
|
73
73
|
enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
|
|
74
74
|
rows?: number | undefined;
|
|
75
75
|
readOnly?: boolean | undefined;
|
|
@@ -147,9 +147,9 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
147
147
|
'aria-valuenow'?: number | undefined;
|
|
148
148
|
'aria-valuetext'?: string | undefined;
|
|
149
149
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
150
|
-
importantForAccessibility?: "auto" | "
|
|
150
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
151
151
|
'aria-hidden'?: boolean | undefined;
|
|
152
|
-
'aria-live'?: "
|
|
152
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
153
153
|
'aria-modal'?: boolean | undefined;
|
|
154
154
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
155
155
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -168,7 +168,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
168
168
|
"aria-colindex"?: number | undefined;
|
|
169
169
|
"aria-colspan"?: number | undefined;
|
|
170
170
|
"aria-controls"?: string | undefined;
|
|
171
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
171
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
172
172
|
"aria-describedby"?: string | undefined;
|
|
173
173
|
"aria-details"?: string | undefined;
|
|
174
174
|
"aria-errormessage"?: string | undefined;
|
|
@@ -192,7 +192,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
192
192
|
"aria-rowspan"?: number | undefined;
|
|
193
193
|
"aria-setsize"?: number | undefined;
|
|
194
194
|
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
195
|
-
clearButtonMode?: "never" | "while-editing" | "unless-editing" |
|
|
195
|
+
clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
|
|
196
196
|
clearTextOnFocus?: boolean | undefined;
|
|
197
197
|
dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
|
|
198
198
|
enablesReturnKeyAutomatically?: boolean | undefined;
|
|
@@ -201,11 +201,11 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
201
201
|
rejectResponderTermination?: boolean | null | undefined;
|
|
202
202
|
selectionState?: import("react-native").DocumentSelectionState | undefined;
|
|
203
203
|
spellCheck?: boolean | undefined;
|
|
204
|
-
textContentType?: "none" | "name" | "location" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "
|
|
204
|
+
textContentType?: "none" | "name" | "password" | "location" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
|
|
205
205
|
scrollEnabled?: boolean | undefined;
|
|
206
206
|
lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
|
|
207
207
|
cursorColor?: import("react-native").ColorValue | null | undefined;
|
|
208
|
-
importantForAutofill?: "auto" | "
|
|
208
|
+
importantForAutofill?: "auto" | "no" | "yes" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
|
|
209
209
|
disableFullscreenUI?: boolean | undefined;
|
|
210
210
|
inlineImageLeft?: string | undefined;
|
|
211
211
|
inlineImagePadding?: number | undefined;
|
|
@@ -224,7 +224,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
|
|
|
224
224
|
validating?: boolean | undefined;
|
|
225
225
|
valid?: boolean | undefined;
|
|
226
226
|
disabled?: boolean | undefined;
|
|
227
|
-
color?: "
|
|
227
|
+
color?: "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
|
|
228
228
|
multiline?: boolean | undefined;
|
|
229
229
|
icon?: "lake-building-bank" | "lake-calendar-arrow-swap" | "lake-card" | "lake-card-filled" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-id-card" | "lake-inbox-empty" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-signature" | "lake-transfer" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "check-filled" | "check-regular" | "checkmark-circle-regular" | "checkmark-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-regular" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
|
|
230
230
|
unit?: string | undefined;
|
package/src/components/Link.d.ts
CHANGED
|
@@ -38,7 +38,7 @@ export declare const Link: import("react").MemoExoticComponent<import("react").F
|
|
|
38
38
|
selectable?: boolean | undefined;
|
|
39
39
|
selectionColor?: import("react-native").ColorValue | undefined;
|
|
40
40
|
textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
|
|
41
|
-
dataDetectorType?: "none" | "all" | "link" | "
|
|
41
|
+
dataDetectorType?: "none" | "all" | "link" | "email" | "phoneNumber" | null | undefined;
|
|
42
42
|
android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
|
|
43
43
|
accessible?: boolean | undefined;
|
|
44
44
|
accessibilityActions?: readonly Readonly<{
|
|
@@ -62,9 +62,9 @@ export declare const Link: import("react").MemoExoticComponent<import("react").F
|
|
|
62
62
|
'aria-valuenow'?: number | undefined;
|
|
63
63
|
'aria-valuetext'?: string | undefined;
|
|
64
64
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
65
|
-
importantForAccessibility?: "auto" | "
|
|
65
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
66
66
|
'aria-hidden'?: boolean | undefined;
|
|
67
|
-
'aria-live'?: "
|
|
67
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
68
68
|
'aria-modal'?: boolean | undefined;
|
|
69
69
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
70
70
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -83,7 +83,7 @@ export declare const Link: import("react").MemoExoticComponent<import("react").F
|
|
|
83
83
|
"aria-colindex"?: number | undefined;
|
|
84
84
|
"aria-colspan"?: number | undefined;
|
|
85
85
|
"aria-controls"?: string | undefined;
|
|
86
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
86
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
87
87
|
"aria-describedby"?: string | undefined;
|
|
88
88
|
"aria-details"?: string | undefined;
|
|
89
89
|
"aria-errormessage"?: string | undefined;
|
|
@@ -63,7 +63,7 @@ export declare const PressableText: FC<{
|
|
|
63
63
|
selectable?: boolean | undefined;
|
|
64
64
|
selectionColor?: import("react-native").ColorValue | undefined;
|
|
65
65
|
textBreakStrategy?: "simple" | "highQuality" | "balanced" | undefined;
|
|
66
|
-
dataDetectorType?: "none" | "all" | "link" | "
|
|
66
|
+
dataDetectorType?: "none" | "all" | "link" | "email" | "phoneNumber" | null | undefined;
|
|
67
67
|
android_hyphenationFrequency?: "normal" | "none" | "full" | undefined;
|
|
68
68
|
accessible?: boolean | undefined;
|
|
69
69
|
accessibilityActions?: readonly Readonly<{
|
|
@@ -87,9 +87,9 @@ export declare const PressableText: FC<{
|
|
|
87
87
|
'aria-valuenow'?: number | undefined;
|
|
88
88
|
'aria-valuetext'?: string | undefined;
|
|
89
89
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
90
|
-
importantForAccessibility?: "auto" | "
|
|
90
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
91
91
|
'aria-hidden'?: boolean | undefined;
|
|
92
|
-
'aria-live'?: "
|
|
92
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
93
93
|
'aria-modal'?: boolean | undefined;
|
|
94
94
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
95
95
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -108,7 +108,7 @@ export declare const PressableText: FC<{
|
|
|
108
108
|
"aria-colindex"?: number | undefined;
|
|
109
109
|
"aria-colspan"?: number | undefined;
|
|
110
110
|
"aria-controls"?: string | undefined;
|
|
111
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
111
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
112
112
|
"aria-describedby"?: string | undefined;
|
|
113
113
|
"aria-details"?: string | undefined;
|
|
114
114
|
"aria-errormessage"?: string | undefined;
|
|
@@ -194,7 +194,7 @@ export declare const PressableTextInput: FC<{
|
|
|
194
194
|
role?: import("react-native").WebRole | undefined;
|
|
195
195
|
lang?: string | undefined;
|
|
196
196
|
initialValue?: string | undefined;
|
|
197
|
-
autoComplete?: "name" | "email" | "
|
|
197
|
+
autoComplete?: "name" | "email" | "tel" | "url" | "on" | "off" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "postal-code" | "sex" | "street-address" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username" | undefined;
|
|
198
198
|
enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
|
|
199
199
|
rows?: number | undefined;
|
|
200
200
|
readOnly?: boolean | undefined;
|
|
@@ -269,9 +269,9 @@ export declare const PressableTextInput: FC<{
|
|
|
269
269
|
'aria-valuenow'?: number | undefined;
|
|
270
270
|
'aria-valuetext'?: string | undefined;
|
|
271
271
|
onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
|
|
272
|
-
importantForAccessibility?: "auto" | "
|
|
272
|
+
importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
|
|
273
273
|
'aria-hidden'?: boolean | undefined;
|
|
274
|
-
'aria-live'?: "
|
|
274
|
+
'aria-live'?: "off" | "polite" | "assertive" | undefined;
|
|
275
275
|
'aria-modal'?: boolean | undefined;
|
|
276
276
|
accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
|
|
277
277
|
accessibilityLabelledBy?: string | string[] | undefined;
|
|
@@ -290,7 +290,7 @@ export declare const PressableTextInput: FC<{
|
|
|
290
290
|
"aria-colindex"?: number | undefined;
|
|
291
291
|
"aria-colspan"?: number | undefined;
|
|
292
292
|
"aria-controls"?: string | undefined;
|
|
293
|
-
"aria-current"?: boolean | "time" | "page" | "
|
|
293
|
+
"aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
|
|
294
294
|
"aria-describedby"?: string | undefined;
|
|
295
295
|
"aria-details"?: string | undefined;
|
|
296
296
|
"aria-errormessage"?: string | undefined;
|
|
@@ -314,7 +314,7 @@ export declare const PressableTextInput: FC<{
|
|
|
314
314
|
"aria-rowspan"?: number | undefined;
|
|
315
315
|
"aria-setsize"?: number | undefined;
|
|
316
316
|
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
|
|
317
|
-
clearButtonMode?: "never" | "while-editing" | "unless-editing" |
|
|
317
|
+
clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
|
|
318
318
|
clearTextOnFocus?: boolean | undefined;
|
|
319
319
|
dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
|
|
320
320
|
enablesReturnKeyAutomatically?: boolean | undefined;
|
|
@@ -323,11 +323,11 @@ export declare const PressableTextInput: FC<{
|
|
|
323
323
|
rejectResponderTermination?: boolean | null | undefined;
|
|
324
324
|
selectionState?: import("react-native").DocumentSelectionState | undefined;
|
|
325
325
|
spellCheck?: boolean | undefined;
|
|
326
|
-
textContentType?: "none" | "name" | "location" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "
|
|
326
|
+
textContentType?: "none" | "name" | "password" | "location" | "nickname" | "username" | "URL" | "addressCity" | "addressCityAndState" | "addressState" | "countryName" | "creditCardNumber" | "emailAddress" | "familyName" | "fullStreetAddress" | "givenName" | "jobTitle" | "middleName" | "namePrefix" | "nameSuffix" | "organizationName" | "postalCode" | "streetAddressLine1" | "streetAddressLine2" | "sublocality" | "telephoneNumber" | "newPassword" | "oneTimeCode" | undefined;
|
|
327
327
|
scrollEnabled?: boolean | undefined;
|
|
328
328
|
lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
|
|
329
329
|
cursorColor?: import("react-native").ColorValue | null | undefined;
|
|
330
|
-
importantForAutofill?: "auto" | "
|
|
330
|
+
importantForAutofill?: "auto" | "no" | "yes" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
|
|
331
331
|
disableFullscreenUI?: boolean | undefined;
|
|
332
332
|
inlineImageLeft?: string | undefined;
|
|
333
333
|
inlineImagePadding?: number | undefined;
|
|
@@ -6,7 +6,7 @@ type Props = {
|
|
|
6
6
|
style?: ViewProps["style"];
|
|
7
7
|
children: ReactElement;
|
|
8
8
|
};
|
|
9
|
-
export declare const CurrentColorContext: import("react").Context<"
|
|
9
|
+
export declare const CurrentColorContext: import("react").Context<"gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
|
|
10
10
|
export declare const useCurrentColor: (containerRef: MutableRefObject<HTMLElement | null>, variant: ColorVariants | undefined) => void;
|
|
11
11
|
export declare const WithCurrentColor: ({ variant, style, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export {};
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { useMemo, useState } from "react";
|
|
2
|
-
export const useDisclosure = (initialValue
|
|
2
|
+
export const useDisclosure = (initialValue) => {
|
|
3
3
|
const [value, setValue] = useState(initialValue);
|
|
4
4
|
return [
|
|
5
5
|
value,
|
|
6
6
|
useMemo(() => ({
|
|
7
7
|
open: () => setValue(true),
|
|
8
|
-
close: () =>
|
|
9
|
-
setValue(false);
|
|
10
|
-
onClose?.();
|
|
11
|
-
},
|
|
8
|
+
close: () => setValue(false),
|
|
12
9
|
toggle: () => setValue(prevValue => !prevValue),
|
|
13
10
|
}), []),
|
|
14
11
|
];
|