@swan-io/lake 2.0.3 → 2.1.1
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
CHANGED
|
@@ -109,12 +109,14 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
|
|
|
109
109
|
const typingTimeoutRef = useRef(undefined);
|
|
110
110
|
const currentlyTypedRef = useRef(undefined);
|
|
111
111
|
const listItemRefs = useRef(Array(items.length));
|
|
112
|
-
const [visible, { close,
|
|
112
|
+
const [visible, { close, open }] = useDisclosure(false);
|
|
113
113
|
const hasValue = isNotNullish(value);
|
|
114
114
|
const isSmall = size === "small";
|
|
115
115
|
const itemValue = items.find(i => i.value === value);
|
|
116
116
|
const onKeyDown = useCallback((event) => {
|
|
117
|
+
// this made a search not visible for user as the native select component
|
|
117
118
|
if (event.nativeEvent.key.length === 1) {
|
|
119
|
+
event.nativeEvent.stopPropagation();
|
|
118
120
|
const currentlyTyped = `${currentlyTypedRef.current ?? ""}${event.nativeEvent.key.toLowerCase()}`;
|
|
119
121
|
currentlyTypedRef.current = currentlyTyped;
|
|
120
122
|
const selectedIndex = items.findIndex(item => item.name.toLowerCase().startsWith(currentlyTyped));
|
|
@@ -148,7 +150,7 @@ export function LakeSelect({ title, items, valueStyle, size, color = "current",
|
|
|
148
150
|
mode !== "borderless" && error != null && styles.errorContainer,
|
|
149
151
|
(disabled || readOnly) && mode === "borderless" && styles.inputBorderlessDisabled,
|
|
150
152
|
style,
|
|
151
|
-
], onPress:
|
|
153
|
+
], onPress: open, onKeyDown: onKeyDown, "aria-errormessage": error, children: ({ hovered }) => (_jsxs(_Fragment, { children: [mode === "normal" && _jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsxs(Box, { direction: "row", justifyContent: "spaceBetween", alignItems: "center", children: [_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [icon && (_jsxs(_Fragment, { children: [_jsx(Icon, { color: colors[color].primary, name: icon, size: isSmall ? 16 : 18 }), _jsx(Space, { width: 8 })] })), hasValue ? (_jsxs(Box, { direction: "row", alignItems: "center", style: commonStyles.fill, children: [isNotNullish(itemValue?.icon) && (_jsxs(_Fragment, { children: [itemValue?.icon, _jsx(Space, { width: 12 })] })), _jsx(LakeText, { color: colors.gray[900], variant: isSmall ? "smallRegular" : "regular", style: [styles.itemText, valueStyle], children: name })] })) : (_jsx(LakeText, { style: [
|
|
152
154
|
styles.itemText,
|
|
153
155
|
styles.selectPlaceholder,
|
|
154
156
|
isSmall && styles.selectSmallPlaceholder,
|