@swan-io/lake 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "engines": {
     "node": ">=14.0.0",
     "yarn": "^1.20.0"
@@ -26,10 +26,10 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.7",
+    "@popperjs/core": "^2.11.8",
     "@swan-io/boxed": "^1.0.2",
     "@swan-io/chicane": "^1.4.0",
-    "dayjs": "^1.11.7",
+    "dayjs": "^1.11.8",
     "polished": "^4.2.2",
     "prism-react-renderer": "^2.0.4",
     "react": "^18.2.0",
@@ -41,15 +41,15 @@
     "rifm": "^0.12.1",
     "ts-dedent": "^2.2.0",
     "ts-pattern": "^4.3.0",
-    "urql": "^4.0.2",
+    "urql": "^4.0.3",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.7",
+    "@types/react": "^18.2.8",
     "@types/react-dom": "^18.2.4",
-    "@types/react-native": "^0.72.1",
+    "@types/react-native": "^0.72.2",
     "@types/uuid": "^9.0.1",
-    "jsdom": "^22.0.0",
-    "type-fest": "^3.11.0"
+    "jsdom": "^22.1.0",
+    "type-fest": "^3.11.1"
   }
 }

package/src/components/Accordion.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type Props = {
+    trigger: ReactNode;
+    children: ReactNode;
+};
+export declare const Accordion: ({ trigger, children }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/Accordion.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import { backgroundColor, colors, spacings } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    trigger: {
+        flexDirection: "row",
+        alignItems: "center",
+        backgroundColor: backgroundColor.accented,
+        paddingVertical: spacings[12],
+        paddingHorizontal: spacings[20],
+    },
+    arrow: {
+        transitionProperty: "transform",
+        transitionDuration: "200ms",
+    },
+    arrowOpen: {
+        transform: "rotate(90deg)",
+    },
+    contentContainer: {
+        display: "grid",
+        gridTemplateRows: "0fr",
+        transitionProperty: "grid-template-rows",
+        transitionDuration: "300ms",
+    },
+    contentContainerDisplayed: {
+        gridTemplateRows: "1fr",
+    },
+    contentInner: {
+        overflow: "hidden",
+    },
+    content: {
+        paddingVertical: spacings[12],
+        paddingHorizontal: spacings[20],
+    },
+});
+export const Accordion = ({ trigger, children }) => {
+    const id = useId();
+    const [isOpen, { toggle }] = useDisclosure(false);
+    return (_jsxs(View, { children: [_jsxs(Pressable, { "aria-expanded": isOpen, "aria-controls": id, style: styles.trigger, onPress: toggle, children: [_jsx(Icon, { name: "chevron-right-filled", size: 12, color: colors.gray[500], style: [styles.arrow, isOpen && styles.arrowOpen] }), _jsx(Space, { width: 20 }), typeof trigger === "string" ? (_jsx(LakeText, { variant: "smallMedium", color: colors.gray[900], children: trigger })) : (trigger)] }), _jsx(View, { "aria-labelledby": id, "aria-hidden": !isOpen, role: "region", style: [styles.contentContainer, isOpen && styles.contentContainerDisplayed], children: _jsx(View, { style: styles.contentInner, children: _jsx(View, { style: styles.content, children: children }) }) })] }));
+};

package/src/components/Filters.d.ts

@@ -59,5 +59,5 @@ type FiltersStackProps<Definition extends FiltersDefinition, State extends Filte
     onChangeOpened: (value: (keyof Definition)[]) => void;
     onChangeFilters: (value: State) => void;
 };
-export declare const FiltersStack: <T extends FiltersDefinition>({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }: FiltersStackProps<T, { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_2 ? { [KeyType_2 in keyof T_2]: ExtractFilterValue<T[K]>[KeyType_2]; } : never; } extends infer T_1 ? { [KeyType_1 in keyof T_1]: { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_2 ? { [KeyType_2 in keyof T_2]: ExtractFilterValue<T[K]>[KeyType_2]; } : never; }[KeyType_1]; } : never>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const FiltersStack: <T extends FiltersDefinition>({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }: FiltersStackProps<T, { [KeyType_2 in keyof { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_1 ? { [KeyType_1 in keyof T_1]: ExtractFilterValue<T[K]>[KeyType_1]; } : never; }]: { [K in keyof T]: ExtractFilterValue<T[K]> extends infer T_1 ? { [KeyType_1 in keyof T_1]: ExtractFilterValue<T[K]>[KeyType_1]; } : never; }[KeyType_2]; }>) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/components/LakeTextInput.d.ts

@@ -67,7 +67,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     role?: import("react-native").WebRole | undefined;
     lang?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "off" | "name" | "email" | "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;
+    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;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
     readOnly?: boolean | undefined;
@@ -199,7 +199,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
     spellCheck?: boolean | undefined;
-    textContentType?: "none" | "location" | "name" | "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;
+    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;
     scrollEnabled?: boolean | undefined;
     lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
     cursorColor?: import("react-native").ColorValue | null | undefined;
@@ -222,7 +222,7 @@ export declare const LakeTextInput: import("react").ForwardRefExoticComponent<{
     validating?: boolean | undefined;
     valid?: boolean | undefined;
     disabled?: boolean | undefined;
-    color?: "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
+    color?: "current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined;
     multiline?: boolean | undefined;
     icon?: "lake-calendar-arrow-swap" | "lake-card" | "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" | "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;
     unit?: string | undefined;

package/src/components/LakeTooltip.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { ViewStyle } from "react-native";
+import { ViewProps } from "react-native";
 type Props = {
     children: ReactNode;
     content: ReactNode;
@@ -11,7 +11,7 @@ type Props = {
     placement: "left" | "top" | "bottom" | "right";
     width?: number;
     togglableOnFocus?: boolean;
-    containerStyle?: ViewStyle;
+    containerStyle?: ViewProps["style"];
     disabled?: boolean;
 };
 type TooltipRef = {

package/src/components/MultiSelect.d.ts

@@ -22,6 +22,4 @@ export type MultiSelectProps<I> = {
     values: string[];
     id?: string;
 };
-export declare const MultiSelect: (<I extends MultiSelectItem>(props: MultiSelectProps<I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
+export declare const MultiSelect: import("react").NamedExoticComponent<MultiSelectProps<MultiSelectItem>>;

package/src/components/MultiSelect.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Array, Dict, Option } from "@swan-io/boxed";
-import { memo as reactMemo, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { FlatList, Pressable, SectionList, StyleSheet, Text, View, } from "react-native";
 import { backgroundColor, colors, radii, shadows, texts } from "../constants/design";
 import { useDisclosure } from "../hooks/useDisclosure";
@@ -134,7 +134,6 @@ const styles = StyleSheet.create({
         color: colors.gray.primary,
     },
 });
-const memo = reactMemo;
 export const MultiSelect = memo(({ color = "gray", disabled = false, emptyResultText, enableGroups = true, filterPlaceholder, items, onValueChange, placeholder, renderTagGroup, error, style, values, id, }) => {
     const [filter, setFilter] = useState("");
     const shouldScrollToBottomRef = useRef(false);

package/src/components/Pressable.d.ts

@@ -194,7 +194,7 @@ export declare const PressableTextInput: FC<{
     role?: import("react-native").WebRole | undefined;
     lang?: string | undefined;
     initialValue?: string | undefined;
-    autoComplete?: "off" | "name" | "email" | "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;
+    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;
     enterKeyHint?: "enter" | "search" | "done" | "go" | "next" | "send" | "previous" | undefined;
     rows?: number | undefined;
     readOnly?: boolean | undefined;
@@ -323,7 +323,7 @@ export declare const PressableTextInput: FC<{
     rejectResponderTermination?: boolean | null | undefined;
     selectionState?: import("react-native").DocumentSelectionState | undefined;
     spellCheck?: boolean | undefined;
-    textContentType?: "none" | "location" | "name" | "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;
+    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;
     scrollEnabled?: boolean | undefined;
     lineBreakStrategyIOS?: "none" | "standard" | "hangul-word" | "push-out" | undefined;
     cursorColor?: import("react-native").ColorValue | null | undefined;

package/src/components/QuickActions.js

@@ -12,6 +12,7 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         alignItems: "flex-start",
         justifyContent: "center",
+        flexWrap: "wrap",
     },
     icon: {
         borderColor: colors.gray[300],
@@ -21,15 +22,16 @@ const styles = StyleSheet.create({
         paddingVertical: spacings[12],
         borderRadius: 32,
     },
+    actionContainer: {
+        flex: 1,
+        minWidth: 100,
+    },
     action: {
         alignItems: "center",
         paddingHorizontal: spacings[12],
-        flexBasis: "30%",
+        paddingVertical: spacings[8],
     },
     disabled: {
-        alignItems: "center",
-        paddingHorizontal: spacings[12],
-        flexBasis: "30%",
         opacity: 0.4,
     },
     label: {
@@ -37,7 +39,7 @@ const styles = StyleSheet.create({
     },
 });
 export const QuickActions = ({ actions, tooltipDisabled = false, tooltipText }) => {
-    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => (_jsx(LakeTooltip, { content: tooltipText, placement: "top", disabled: tooltipDisabled || isNullishOrEmpty(tooltipText), children: _jsxs(Pressable, { onPress: action.onPress, style: tooltipDisabled ? styles.action : styles.disabled, disabled: action.isLoading === true || !tooltipDisabled, children: [_jsx(View, { style: [
+    return (_jsx(View, { style: styles.container, children: actions.map((action, index) => (_jsx(LakeTooltip, { content: tooltipText, placement: "top", disabled: tooltipDisabled || isNullishOrEmpty(tooltipText), containerStyle: styles.actionContainer, children: _jsxs(Pressable, { onPress: action.onPress, style: [styles.action, !tooltipDisabled && styles.disabled], disabled: action.isLoading === true || !tooltipDisabled, children: [_jsx(View, { style: [
                             styles.icon,
                             action.backgroundColor != null
                                 ? { backgroundColor: action.backgroundColor, borderColor: action.backgroundColor }

package/src/components/Stack.d.ts

@@ -7,6 +7,6 @@ export declare const Stack: import("react").ForwardRefExoticComponent<import("re
     justifyContent?: ("end" | "start" | "normal" | "center" | "spaceBetween" | "spaceAround" | "spaceEvenly") | undefined;
     style?: import("react-native").StyleProp<import("react-native").ViewStyle>;
 } & {
-    space?: 4 | 8 | 12 | 16 | 20 | 32 | 24 | 40 | 48 | 72 | 96 | undefined;
+    space?: 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 48 | 72 | 96 | undefined;
     wrap?: boolean | undefined;
 } & import("react").RefAttributes<View>>;

package/src/components/WithCurrentColor.d.ts

@@ -6,7 +6,7 @@ type Props = {
     style?: ViewProps["style"];
     children: ReactElement;
 };
-export declare const CurrentColorContext: import("react").Context<"gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "current" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
+export declare const CurrentColorContext: import("react").Context<"current" | "gray" | "live" | "sandbox" | "positive" | "warning" | "negative" | "partner" | "swan" | "shakespear" | "darkPink" | "sunglow" | "mediumSladeBlue" | undefined>;
 export declare const useCurrentColor: (containerRef: MutableRefObject<HTMLElement | null>, variant: ColorVariants | undefined) => void;
 export declare const WithCurrentColor: ({ variant, style, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};