@swan-io/lake 4.3.2 → 4.4.0

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 (10) hide show
  1. package/package.json +12 -12
  2. package/src/components/FixedListView.js +2 -2
  3. package/src/components/LakeRadio.d.ts +2 -1
  4. package/src/components/LakeRadio.js +6 -2
  5. package/src/components/LakeSelect.js +1 -2
  6. package/src/components/LakeTagInput.d.ts +1 -1
  7. package/src/components/LakeTextInput.d.ts +1 -1
  8. package/src/components/Pressable.d.ts +1 -1
  9. package/src/components/RadioGroup.d.ts +4 -1
  10. package/src/components/RadioGroup.js +23 -19
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swan-io/lake",
3
- "version": "4.3.2",
3
+ "version": "4.4.0",
4
4
  "engines": {
5
5
  "node": ">=18.0.0",
6
6
  "yarn": "^1.22.0"
@@ -27,33 +27,33 @@
27
27
  "license": "MIT",
28
28
  "dependencies": {
29
29
  "@popperjs/core": "^2.11.8",
30
- "@react-three/drei": "^9.90.0",
31
- "@react-three/fiber": "^8.15.12",
30
+ "@react-three/drei": "^9.93.0",
31
+ "@react-three/fiber": "^8.15.13",
32
32
  "@swan-io/boxed": "^2.0.0",
33
33
  "@swan-io/chicane": "^1.4.1",
34
34
  "dayjs": "^1.11.10",
35
35
  "polished": "^4.2.2",
36
- "prism-react-renderer": "^2.3.0",
36
+ "prism-react-renderer": "^2.3.1",
37
37
  "react": "^18.2.0",
38
- "react-atomic-state": "^1.2.7",
38
+ "react-atomic-state": "^2.0.0",
39
39
  "react-dom": "^18.2.0",
40
- "react-native-web": "^0.19.9",
40
+ "react-native-web": "^0.19.10",
41
41
  "react-popper": "^2.3.0",
42
42
  "react-ux-form": "^1.5.0",
43
43
  "rifm": "^0.12.1",
44
- "three": "^0.159.0",
44
+ "three": "^0.160.0",
45
45
  "ts-dedent": "^2.2.0",
46
46
  "ts-pattern": "^5.0.6",
47
47
  "urql": "^4.0.6",
48
48
  "uuid": "^9.0.1"
49
49
  },
50
50
  "devDependencies": {
51
- "@types/react": "^18.2.42",
52
- "@types/react-dom": "^18.2.17",
51
+ "@types/react": "^18.2.46",
52
+ "@types/react-dom": "^18.2.18",
53
53
  "@types/react-native": "^0.72.8",
54
- "@types/three": "^0.159.0",
54
+ "@types/three": "^0.160.0",
55
55
  "@types/uuid": "^9.0.7",
56
- "jsdom": "^22.1.0",
57
- "type-fest": "^4.8.3"
56
+ "jsdom": "^23.0.1",
57
+ "type-fest": "^4.9.0"
58
58
  }
59
59
  }
package/src/components/FixedListView.js CHANGED
@@ -741,8 +741,8 @@ export const FixedListView = ({ data: originalData, mode = "tile", keyExtractor,
741
741
  },
742
742
  ], children: isLoading
743
743
  ? match(mode)
744
- .with("tile", () => (_jsx(FixedListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
745
- .with("plain", () => (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
744
+ .with("tile", () => (_jsx(FixedListViewPlaceholder, { count: loading.count, headerHeight: headerHeight, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
745
+ .with("plain", () => (_jsx(PlainListViewPlaceholder, { count: loading.count, headerHeight: headerHeight, rowHeight: rowHeight, rowVerticalSpacing: rowVerticalSpacing, paddingHorizontal: 0 })))
746
746
  .exhaustive()
747
747
  : null }), _jsx(View, { style: [styles.backgroundRows, { top: headerHeight }], children: backgroundRows }), _jsxs(View, { style: styles.scrollContentContainer, ref: scrollContentsRef, children: [stickedToStartColumns.length > 0 ? (_jsxs(View, { style: [
748
748
  styles.stickyColumn,
package/src/components/LakeRadio.d.ts CHANGED
@@ -3,6 +3,7 @@ type Props = {
3
3
  value: boolean;
4
4
  disabled?: boolean;
5
5
  color?: ColorVariants;
6
+ isError?: boolean;
6
7
  };
7
- export declare const LakeRadio: ({ value, disabled, color }: Props) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const LakeRadio: ({ value, disabled, color, isError, }: Props) => import("react/jsx-runtime").JSX.Element;
8
9
  export {};
package/src/components/LakeRadio.js CHANGED
@@ -14,6 +14,9 @@ const styles = StyleSheet.create({
14
14
  borderWidth: 1,
15
15
  borderColor: colors.gray[500],
16
16
  },
17
+ error: {
18
+ borderColor: colors.negative[500],
19
+ },
17
20
  innerCircle: {
18
21
  justifyContent: "center",
19
22
  alignItems: "center",
@@ -28,13 +31,14 @@ const styles = StyleSheet.create({
28
31
  transform: "scale(1)",
29
32
  },
30
33
  });
31
- export const LakeRadio = ({ value, disabled = false, color = "current" }) => (_jsx(View, { style: [
34
+ export const LakeRadio = ({ value, disabled = false, color = "current", isError = false, }) => (_jsx(View, { style: [
32
35
  styles.outerCircle,
33
36
  value && { borderColor: colors[color].primary },
34
37
  disabled && {
35
38
  borderColor: colors.gray[300],
36
39
  },
37
- ], role: "none", children: _jsx(View, { "aria-hidden": !value, style: [
40
+ isError && styles.error,
41
+ ], role: "none", "aria-invalid": isError, children: _jsx(View, { "aria-hidden": !value, style: [
38
42
  styles.innerCircle,
39
43
  { backgroundColor: colors[color].primary },
40
44
  disabled && {
package/src/components/LakeSelect.js CHANGED
@@ -64,7 +64,6 @@ const styles = StyleSheet.create({
64
64
  },
65
65
  listContent: {
66
66
  paddingVertical: 12,
67
- maxHeight: 300,
68
67
  },
69
68
  item: {
70
69
  display: "flex",
@@ -169,7 +168,7 @@ const LakeSelectWithRef = ({ title, items, valueStyle, size, color = "current",
169
168
  styles.itemText,
170
169
  styles.selectPlaceholder,
171
170
  isSmall && styles.selectSmallPlaceholder,
172
- ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, field: true, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
171
+ ], children: placeholder ?? " " }))] }), _jsx(Fill, { minWidth: 8 }), !disabled && (_jsx(Icon, { color: colors.gray[900], name: visible ? "chevron-up-filled" : "chevron-down-filled", size: 16 }))] })] })) }), !hideErrors && (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], style: styles.errorText, children: error ?? " " })), _jsxs(Popover, { role: "listbox", matchReferenceMinWidth: matchReferenceWidth, onDismiss: close, referenceRef: inputRef, returnFocus: true, visible: visible, children: [isNotNullish(title) && (_jsxs(_Fragment, { children: [_jsx(LakeText, { variant: "semibold", color: colors.gray[900], style: styles.selectListTitle, children: title }), _jsx(Separator, {})] })), _jsx(FlatList, { role: "list", data: items, ref: listRef, contentContainerStyle: styles.listContent, onKeyDown: (event) => {
173
172
  const { key } = event.nativeEvent;
174
173
  if (key === "ArrowDown" || key === "ArrowUp") {
175
174
  event.preventDefault();
package/src/components/LakeTagInput.d.ts CHANGED
@@ -61,7 +61,7 @@ export declare const LakeTagInput: import("react").ForwardRefExoticComponent<{
61
61
  lang?: string | undefined;
62
62
  initialValue?: string | undefined;
63
63
  autoComplete?: "name" | "email" | "off" | "url" | "tel" | "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;
64
- enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
64
+ enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
65
65
  rows?: number | undefined;
66
66
  children?: string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | null | undefined;
67
67
  hitSlop?: import("react-native").Insets | undefined;
package/src/components/LakeTextInput.d.ts CHANGED
@@ -73,7 +73,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
73
73
  lang?: string | undefined;
74
74
  initialValue?: string | undefined;
75
75
  autoComplete?: "name" | "email" | "off" | "url" | "tel" | "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;
76
- enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
76
+ enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
77
77
  rows?: number | undefined;
78
78
  readOnly?: boolean | undefined;
79
79
  children?: ReactNode;
package/src/components/Pressable.d.ts CHANGED
@@ -191,7 +191,7 @@ export declare const PressableTextInput: FC<{
191
191
  lang?: string | undefined;
192
192
  initialValue?: string | undefined;
193
193
  autoComplete?: "name" | "email" | "off" | "url" | "tel" | "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;
194
- enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
194
+ enterKeyHint?: "enter" | "search" | "done" | "next" | "go" | "send" | "previous" | undefined;
195
195
  rows?: number | undefined;
196
196
  readOnly?: boolean | undefined;
197
197
  hitSlop?: import("react-native").Insets | undefined;
package/src/components/RadioGroup.d.ts CHANGED
@@ -10,6 +10,9 @@ export type RadioGroupProps<V> = {
10
10
  color?: ColorVariants;
11
11
  disabled?: boolean;
12
12
  value?: V;
13
+ error?: string;
14
+ help?: string;
15
+ hideErrors?: boolean;
13
16
  onValueChange: (value: V) => void;
14
17
  };
15
- export declare function RadioGroup<V>({ items, direction, color, disabled, value, onValueChange, }: RadioGroupProps<V>): import("react/jsx-runtime").JSX.Element;
18
+ export declare function RadioGroup<V>({ items, direction, color, disabled, hideErrors, error, help, value, onValueChange, }: RadioGroupProps<V>): import("react/jsx-runtime").JSX.Element;
package/src/components/RadioGroup.js CHANGED
@@ -1,8 +1,8 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
2
  import { Fragment } from "react";
3
3
  import { StyleSheet } from "react-native";
4
- import { colors } from "../constants/design";
5
- import { isNullish } from "../utils/nullish";
4
+ import { colors, spacings } from "../constants/design";
5
+ import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
6
6
  import { Box } from "./Box";
7
7
  import { LakeRadio } from "./LakeRadio";
8
8
  import { LakeText } from "./LakeText";
@@ -18,26 +18,30 @@ const styles = StyleSheet.create({
18
18
  },
19
19
  withRightSpace: {
20
20
  // use margin instead of <Space /> to avoid line starting with <Space /> because of flex-wrap
21
- marginRight: 24,
21
+ marginRight: spacings[24],
22
22
  },
23
23
  // We need this bottom margin in case there are too much items and some of them are wrapped to next line
24
24
  withBottomSpace: {
25
25
  // use margin instead of <Space /> to avoid making height bigger than expected
26
- marginBottom: 12,
26
+ marginBottom: spacings[12],
27
+ },
28
+ errorContainer: {
29
+ paddingTop: spacings[4],
27
30
  },
28
31
  });
29
- export function RadioGroup({ items, direction = "column", color = "current", disabled = false, value, onValueChange, }) {
30
- return (_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
31
- const isLast = index === items.length - 1;
32
- const isDisabled = disabled || !isNullish(item.disabled);
33
- return (_jsxs(Fragment, { children: [_jsxs(Pressable, { disabled: isDisabled, onPress: () => {
34
- if (item.value !== value) {
35
- onValueChange(item.value);
36
- }
37
- }, style: [
38
- styles.item,
39
- direction === "row" && styles.withBottomSpace,
40
- direction === "row" && !isLast && styles.withRightSpace,
41
- ], children: [_jsx(LakeRadio, { disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : undefined })] }, index));
42
- }) }));
32
+ export function RadioGroup({ items, direction = "column", color = "current", disabled = false, hideErrors = false, error, help, value, onValueChange, }) {
33
+ const hasError = isNotNullishOrEmpty(error);
34
+ return (_jsxs(_Fragment, { children: [_jsx(Box, { direction: direction, style: styles.container, children: items.map((item, index) => {
35
+ const isLast = index === items.length - 1;
36
+ const isDisabled = disabled || !isNullish(item.disabled);
37
+ return (_jsxs(Fragment, { children: [_jsxs(Pressable, { disabled: isDisabled, onPress: () => {
38
+ if (item.value !== value) {
39
+ onValueChange(item.value);
40
+ }
41
+ }, style: [
42
+ styles.item,
43
+ direction === "row" && styles.withBottomSpace,
44
+ direction === "row" && !isLast && styles.withRightSpace,
45
+ ], children: [_jsx(LakeRadio, { isError: hasError, disabled: isDisabled, color: color, value: item.value === value }), _jsx(Space, { width: 12 }), _jsx(LakeText, { color: isDisabled ? colors.gray[300] : colors.gray[900], children: item.name })] }), !isLast && _jsx(Space, { height: direction === "column" ? 12 : undefined })] }, index));
46
+ }) }), !hideErrors && (_jsx(Box, { direction: "row", style: styles.errorContainer, children: isNotNullishOrEmpty(error) ? (_jsx(LakeText, { variant: "smallRegular", color: colors.negative[500], children: error })) : (_jsx(LakeText, { variant: "smallRegular", color: colors.gray[500], children: help ?? " " })) }))] }));
43
47
  }