@swan-io/lake 2.7.4 → 2.7.6

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 (19) hide show
  1. package/package.json +1 -1
  2. package/src/components/AutoWidthImage.d.ts +3 -3
  3. package/src/components/FixedListViewCells.d.ts +61 -8
  4. package/src/components/FixedListViewCells.js +6 -6
  5. package/src/components/Form.d.ts +3 -3
  6. package/src/components/Heading.d.ts +4 -4
  7. package/src/components/LakeAlert.d.ts +1 -1
  8. package/src/components/LakeAlert.js +8 -2
  9. package/src/components/LakeCombobox.js +6 -2
  10. package/src/components/LakeHeading.d.ts +4 -4
  11. package/src/components/LakeText.d.ts +18 -1
  12. package/src/components/LakeText.js +3 -2
  13. package/src/components/LakeTextInput.d.ts +12 -10
  14. package/src/components/LakeTextInput.js +3 -3
  15. package/src/components/Link.d.ts +4 -4
  16. package/src/components/Pressable.d.ts +11 -11
  17. package/src/components/WithCurrentColor.d.ts +1 -1
  18. package/src/hooks/useDisclosure.d.ts +1 -1
  19. package/src/hooks/useDisclosure.js +5 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swan-io/lake",
3
- "version": "2.7.4",
3
+ "version": "2.7.6",
4
4
  "engines": {
5
5
  "node": ">=18.0.0",
6
6
  "yarn": "^1.22.0"
package/src/components/AutoWidthImage.d.ts CHANGED
@@ -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" | "yes" | "no" | "no-hide-descendants" | undefined;
60
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
61
61
  'aria-hidden'?: boolean | undefined;
62
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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;
package/src/components/FixedListViewCells.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { ReactNode } from "react";
1
+ import { ReactNode, ComponentProps } 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" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
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" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
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" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
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" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
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;
package/src/components/FixedListViewCells.js CHANGED
@@ -109,18 +109,18 @@ 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
118
  const onPress = useCallback((event) => {
119
119
  event.preventDefault();
120
- Clipboard.setString(text);
120
+ Clipboard.setString(textToCopy ?? text);
121
121
  setVisibleState("copied");
122
122
  }, [text]);
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
+ 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
124
  };
125
125
  // TODO: handle `+` sign properly
126
126
  export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
@@ -137,11 +137,11 @@ export const BalanceCell = ({ value, currency, originalValue, formatCurrency, te
137
137
  value < 0 && { color: colors.negative.primary },
138
138
  ], 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
139
  };
140
- export const LinkCell = ({ children, external = false, onPress, variant = "medium", }) => {
140
+ export const LinkCell = ({ children, external = false, onPress, variant = "medium", tooltip, }) => {
141
141
  return (_jsxs(View, { style: styles.cell, children: [_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
142
142
  event.preventDefault();
143
143
  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 })] }));
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, tooltip: tooltip, children: children })] }));
145
145
  };
146
146
  export const StartAlignedCell = ({ children }) => {
147
147
  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" | "yes" | "no" | "no-hide-descendants" | undefined;
80
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
81
81
  'aria-hidden'?: boolean | undefined;
82
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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;
package/src/components/Heading.d.ts CHANGED
@@ -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" | "phoneNumber" | "email" | null | undefined;
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" | "yes" | "no" | "no-hide-descendants" | undefined;
107
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
108
108
  'aria-hidden'?: boolean | undefined;
109
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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;
package/src/components/LakeAlert.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from "react";
2
2
  import { StyleProp, ViewStyle } from "react-native";
3
- type AlertVariant = "info" | "warning" | "error" | "success";
3
+ type AlertVariant = "info" | "warning" | "error" | "success" | "neutral";
4
4
  type Props = {
5
5
  anchored?: boolean;
6
6
  variant: AlertVariant;
package/src/components/LakeAlert.js CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { StyleSheet, View } from "react-native";
3
3
  import { commonStyles } from "../constants/commonStyles";
4
4
  import { colors, shadows } from "../constants/design";
@@ -38,38 +38,44 @@ const alertIcon = {
38
38
  warning: "warning-regular",
39
39
  error: "dismiss-circle-regular",
40
40
  success: "checkmark-circle-regular",
41
+ neutral: undefined,
41
42
  };
42
43
  const alertColor = {
43
44
  info: colors.shakespear[700],
44
45
  warning: colors.warning[700],
45
46
  error: colors.negative[700],
46
47
  success: colors.positive[700],
48
+ neutral: colors.gray[700],
47
49
  };
48
50
  const alertBackground = {
49
51
  info: colors.shakespear[0],
50
52
  warning: colors.warning[0],
51
53
  error: colors.negative[0],
52
54
  success: colors.positive[0],
55
+ neutral: colors.gray[0],
53
56
  };
54
57
  const alertBorder = {
55
58
  info: colors.shakespear[200],
56
59
  warning: colors.warning[200],
57
60
  error: colors.negative[200],
58
61
  success: colors.positive[200],
62
+ neutral: colors.gray[200],
59
63
  };
60
64
  const alertLeftBorder = {
61
65
  info: colors.shakespear[500],
62
66
  warning: colors.warning[500],
63
67
  error: colors.negative[500],
64
68
  success: colors.positive[500],
69
+ neutral: colors.gray[500],
65
70
  };
66
71
  const isText = (node) => typeof node === "string" || typeof node === "number";
67
72
  export const LakeAlert = ({ anchored = false, variant, title, subtitle, children, style, callToAction, }) => {
68
73
  const color = alertColor[variant];
74
+ const icon = alertIcon[variant];
69
75
  return (_jsxs(View, { style: [
70
76
  styles.base,
71
77
  { backgroundColor: alertBackground[variant], borderColor: alertBorder[variant] },
72
78
  anchored ? styles.anchored : { borderLeftColor: alertLeftBorder[variant] },
73
79
  style,
74
- ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Icon, { name: alertIcon[variant], color: color, size: 20 }), _jsx(Space, { width: 20 }), _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: styles.content, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
80
+ ], children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [icon != null ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: icon, color: color, size: 20 }), _jsx(Space, { width: 20 })] })) : null, _jsxs(View, { style: commonStyles.fill, children: [_jsx(LakeText, { color: color, variant: icon != null ? "regular" : "medium", children: title }), isNotNullishOrEmpty(subtitle) && _jsx(LakeText, { color: color, children: subtitle })] }), isNotNullish(callToAction) && _jsx(View, { style: styles.callToAction, children: callToAction })] }), isNotNullish(children) && (_jsxs(View, { style: icon != null ? styles.content : null, children: [_jsx(Space, { height: 12 }), isText(children) ? _jsx(LakeText, { children: children }) : children] }))] }));
75
81
  };
package/src/components/LakeCombobox.js CHANGED
@@ -86,8 +86,9 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
86
86
  const listRef = useRef(null);
87
87
  const listContainerRef = useRef(null);
88
88
  const blurTimeoutId = useRef(undefined);
89
- const [isFocused, { open, close }] = useDisclosure(false);
89
+ const [isFocused, { open, close }] = useDisclosure(false, () => setHasChanged(false));
90
90
  const [isFetchingAdditionalInfo, setIsFetchingAdditionalInfo] = useState(false);
91
+ const [hasChanged, setHasChanged] = useState(false);
91
92
  useImperativeHandle(externalRef, () => {
92
93
  return {
93
94
  open,
@@ -141,7 +142,10 @@ const LakeComboboxWithRef = ({ inputRef, value, items, itemHeight = DEFAULT_ELEM
141
142
  close();
142
143
  }, 100);
143
144
  }, [close]);
144
- return (_jsxs(View, { children: [_jsx(LakeTextInput, { ref: 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: true, visible: isFocused && !items.isNotAsked(), underlay: false, forcedMode: "Dropdown", children: _jsx(View, { style: [styles.list, { maxHeight: itemHeight * nbItemsDisplayed }], children: items.match({
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: event => {
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({
145
149
  NotAsked: () => null,
146
150
  Loading: () => _jsx(LoadingView, { style: styles.loader }),
147
151
  Done: items => items.match({
package/src/components/LakeHeading.d.ts CHANGED
@@ -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" | "phoneNumber" | "email" | null | undefined;
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" | "yes" | "no" | "no-hide-descendants" | undefined;
56
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
57
57
  'aria-hidden'?: boolean | undefined;
58
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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;
package/src/components/LakeText.d.ts CHANGED
@@ -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" | "semibold" | "medium" | "regular" | "smallSemibold" | "smallMedium" | "smallRegular" | undefined;
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 {};
package/src/components/LakeText.js CHANGED
@@ -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) })));
package/src/components/LakeTextInput.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { ChangeEventHandler, ReactNode } from "react";
2
- import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps } from "react-native";
1
+ import { ChangeEventHandler, ReactNode, Ref } from "react";
2
+ import { NativeSyntheticEvent, TextInput, TextInputFocusEventData, TextInputProps, View } from "react-native";
3
3
  import { Except } from "type-fest";
4
4
  import { ColorVariants } from "../constants/design";
5
5
  import { IconName } from "./Icon";
@@ -24,6 +24,7 @@ export type LakeTextInputProps = Except<TextInputProps, "editable" | "keyboardTy
24
24
  maxCharCount?: number;
25
25
  help?: string;
26
26
  renderEnd?: () => ReactNode;
27
+ containerRef?: Ref<View>;
27
28
  };
28
29
  export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
29
30
  allowFontScaling?: boolean | undefined;
@@ -68,7 +69,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
68
69
  role?: import("react-native").WebRole | undefined;
69
70
  lang?: string | undefined;
70
71
  initialValue?: string | undefined;
71
- autoComplete?: "name" | "email" | "off" | "tel" | "url" | "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" | "on" | "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;
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;
72
73
  enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
73
74
  rows?: number | undefined;
74
75
  readOnly?: boolean | undefined;
@@ -146,9 +147,9 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
146
147
  'aria-valuenow'?: number | undefined;
147
148
  'aria-valuetext'?: string | undefined;
148
149
  onAccessibilityAction?: ((event: import("react-native").AccessibilityActionEvent) => void) | undefined;
149
- importantForAccessibility?: "auto" | "yes" | "no" | "no-hide-descendants" | undefined;
150
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
150
151
  'aria-hidden'?: boolean | undefined;
151
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
152
+ 'aria-live'?: "off" | "polite" | "assertive" | undefined;
152
153
  'aria-modal'?: boolean | undefined;
153
154
  accessibilityLiveRegion?: "none" | "polite" | "assertive" | undefined;
154
155
  accessibilityLabelledBy?: string | string[] | undefined;
@@ -167,7 +168,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
167
168
  "aria-colindex"?: number | undefined;
168
169
  "aria-colspan"?: number | undefined;
169
170
  "aria-controls"?: string | undefined;
170
- "aria-current"?: boolean | "time" | "page" | "step" | "location" | "date" | undefined;
171
+ "aria-current"?: boolean | "time" | "page" | "date" | "step" | "location" | undefined;
171
172
  "aria-describedby"?: string | undefined;
172
173
  "aria-details"?: string | undefined;
173
174
  "aria-errormessage"?: string | undefined;
@@ -191,7 +192,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
191
192
  "aria-rowspan"?: number | undefined;
192
193
  "aria-setsize"?: number | undefined;
193
194
  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
194
- clearButtonMode?: "never" | "while-editing" | "unless-editing" | "always" | undefined;
195
+ clearButtonMode?: "always" | "never" | "while-editing" | "unless-editing" | undefined;
195
196
  clearTextOnFocus?: boolean | undefined;
196
197
  dataDetectorTypes?: import("react-native").DataDetectorTypes | import("react-native").DataDetectorTypes[] | undefined;
197
198
  enablesReturnKeyAutomatically?: boolean | undefined;
@@ -200,11 +201,11 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
200
201
  rejectResponderTermination?: boolean | null | undefined;
201
202
  selectionState?: import("react-native").DocumentSelectionState | undefined;
202
203
  spellCheck?: boolean | undefined;
203
- 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" | "password" | "newPassword" | "oneTimeCode" | undefined;
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;
204
205
  scrollEnabled?: boolean | undefined;
205
206
  lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
206
207
  cursorColor?: import("react-native").ColorValue | null | undefined;
207
- importantForAutofill?: "auto" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
208
+ importantForAutofill?: "auto" | "no" | "yes" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
208
209
  disableFullscreenUI?: boolean | undefined;
209
210
  inlineImageLeft?: string | undefined;
210
211
  inlineImagePadding?: number | undefined;
@@ -223,7 +224,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
223
224
  validating?: boolean | undefined;
224
225
  valid?: boolean | undefined;
225
226
  disabled?: boolean | undefined;
226
- color?: "current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
227
+ color?: "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
227
228
  multiline?: boolean | undefined;
228
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;
229
230
  unit?: string | undefined;
@@ -236,4 +237,5 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
236
237
  maxCharCount?: number | undefined;
237
238
  help?: string | undefined;
238
239
  renderEnd?: (() => ReactNode) | undefined;
240
+ containerRef?: Ref<View> | undefined;
239
241
  } & import("react").RefAttributes<TextInput | null>>;
package/src/components/LakeTextInput.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { forwardRef, useCallback, useRef, useState } from "react";
2
+ import { forwardRef, useCallback, useRef, useState, } from "react";
3
3
  import { ActivityIndicator, StyleSheet, TextInput, View, } from "react-native";
4
4
  import { commonStyles } from "../constants/commonStyles";
5
5
  import { backgroundColor, colors, radii, shadows, spacings, texts, } from "../constants/design";
@@ -121,7 +121,7 @@ const styles = StyleSheet.create({
121
121
  paddingTop: spacings[4],
122
122
  },
123
123
  });
124
- export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false,
124
+ export const LakeTextInput = forwardRef(({ ariaExpanded, ariaControls, error, disabled = false, validating = false, valid = false, readOnly = false, icon, children, unit, color = "gray", inputMode = "text", hideErrors = false, onChange, pattern, style: stylesFromProps, onFocus: originalOnFocus, onBlur: originalOnBlur, value, defaultValue, multiline = false, containerRef,
125
125
  //maxCharCount is different from maxLength(props inherited of TextInput)
126
126
  //maxLength truncates the text in the limitation asked,
127
127
  //maxCharCount doesn't have limitation but displays a counter of characters
@@ -158,7 +158,7 @@ maxCharCount, help, renderEnd, ...props }, forwardRef) => {
158
158
  hasError && styles.error,
159
159
  valid && styles.valid,
160
160
  stylesFromProps,
161
- ], children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ref: mergedRef, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, style: [
161
+ ], ref: containerRef, children: [isNotNullish(icon) && (_jsx(Icon, { name: icon, size: 20, color: colors.current.primary, style: styles.icon })), _jsx(TextInput, { "aria-expanded": ariaExpanded, "aria-controls": ariaControls, inputMode: inputMode, ...props, defaultValue: defaultValue, value: isNullish(defaultValue) ? value ?? "" : value, onFocus: onFocus, onBlur: onBlur, readOnly: !isInteractive, onChange: onChange, multiline: multiline, ref: mergedRef, style: [
162
162
  styles.input,
163
163
  multiline && styles.multilineInput,
164
164
  readOnly && hasError && styles.readOnlyError,
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" | "phoneNumber" | "email" | null | undefined;
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" | "yes" | "no" | "no-hide-descendants" | undefined;
65
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
66
66
  'aria-hidden'?: boolean | undefined;
67
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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;
package/src/components/Pressable.d.ts CHANGED
@@ -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" | "phoneNumber" | "email" | null | undefined;
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" | "yes" | "no" | "no-hide-descendants" | undefined;
90
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
91
91
  'aria-hidden'?: boolean | undefined;
92
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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" | "off" | "tel" | "url" | "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" | "on" | "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;
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" | "yes" | "no" | "no-hide-descendants" | undefined;
272
+ importantForAccessibility?: "auto" | "no" | "yes" | "no-hide-descendants" | undefined;
273
273
  'aria-hidden'?: boolean | undefined;
274
- 'aria-live'?: "polite" | "assertive" | "off" | undefined;
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" | "step" | "location" | "date" | undefined;
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" | "always" | undefined;
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" | "password" | "newPassword" | "oneTimeCode" | undefined;
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" | "yes" | "no" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
330
+ importantForAutofill?: "auto" | "no" | "yes" | "noExcludeDescendants" | "yesExcludeDescendants" | undefined;
331
331
  disableFullscreenUI?: boolean | undefined;
332
332
  inlineImageLeft?: string | undefined;
333
333
  inlineImagePadding?: number | undefined;
package/src/components/WithCurrentColor.d.ts CHANGED
@@ -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<"current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
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 {};
package/src/hooks/useDisclosure.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export declare const useDisclosure: (initialValue: boolean) => [
1
+ export declare const useDisclosure: (initialValue: boolean, onClose?: () => void) => [
2
2
  visible: boolean,
3
3
  fns: {
4
4
  open: () => void;
package/src/hooks/useDisclosure.js CHANGED
@@ -1,11 +1,14 @@
1
1
  import { useMemo, useState } from "react";
2
- export const useDisclosure = (initialValue) => {
2
+ export const useDisclosure = (initialValue, onClose) => {
3
3
  const [value, setValue] = useState(initialValue);
4
4
  return [
5
5
  value,
6
6
  useMemo(() => ({
7
7
  open: () => setValue(true),
8
- close: () => setValue(false),
8
+ close: () => {
9
+ setValue(false);
10
+ onClose?.();
11
+ },
9
12
  toggle: () => setValue(prevValue => !prevValue),
10
13
  }), []),
11
14
  ];