@swan-io/lake 10.0.1 → 11.0.0

package/src/components/Filters.d.ts

@@ -1,59 +0,0 @@
-import { DatePickerDate } from "@swan-io/shared-business/src/components/DatePicker";
-import { DateFormat } from "@swan-io/shared-business/src/utils/i18n";
-import { ValidatorResult } from "@swan-io/use-form";
-import { Simplify } from "type-fest";
-type Item<T> = {
-    label: string;
-    value: T;
-};
-export type FilterCheckboxDef<T> = {
-    type: "checkbox";
-    label: string;
-    items: Item<T>[];
-    width?: number;
-    checkAllLabel?: string;
-};
-export type FilterRadioDef<T> = {
-    type: "radio";
-    label: string;
-    items: Item<T>[];
-    width?: number;
-};
-export type FilterDateDef<Values = unknown> = {
-    type: "date";
-    label: string;
-    cancelText: string;
-    submitText: string;
-    noValueText: string;
-    dateFormat: DateFormat;
-    isSelectable?: (date: DatePickerDate, filters: Values) => boolean;
-    validate?: (value: string, filters: Values) => ValidatorResult;
-};
-export type FilterInputDef = {
-    type: "input";
-    label: string;
-    noValueText: string;
-    placeholder?: string;
-    validate?: (value: string) => ValidatorResult;
-};
-type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef;
-type ExtractFilterValue<T extends Filter<unknown>> = T extends {
-    type: "checkbox";
-} ? T["items"][number]["value"][] | undefined : T extends {
-    type: "radio";
-} ? T["items"][number]["value"] | undefined : T extends {
-    type: "boolean";
-} ? boolean | undefined : string | undefined;
-type FiltersDefinition = Record<string, Filter<unknown>>;
-export type FiltersState<T extends FiltersDefinition> = Simplify<{
-    [K in keyof T]: Simplify<ExtractFilterValue<T[K]>>;
-}>;
-type FiltersStackProps<Definition extends FiltersDefinition, State extends FiltersState<Definition> = FiltersState<Definition>> = {
-    definition: Definition;
-    filters: State;
-    openedFilters: (keyof Definition)[];
-    onChangeOpened: (value: (keyof Definition)[]) => void;
-    onChangeFilters: (value: State) => void;
-};
-export declare const FiltersStack: <T extends FiltersDefinition>({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }: FiltersStackProps<T>) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/src/components/Filters.js

@@ -1,208 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DatePickerModal, } from "@swan-io/shared-business/src/components/DatePicker";
-import dayjs from "dayjs";
-import { forwardRef, useCallback, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { P, match } from "ts-pattern";
-import { colors, shadows } from "../constants/design";
-import { useDisclosure } from "../hooks/useDisclosure";
-import { useMergeRefs } from "../hooks/useMergeRefs";
-import { usePreviousValue } from "../hooks/usePreviousValue";
-import { isNotNullish, isNullish } from "../utils/nullish";
-import { Box } from "./Box";
-import { FlatList } from "./FlatList";
-import { Icon } from "./Icon";
-import { LakeCheckbox } from "./LakeCheckbox";
-import { LakeLabel } from "./LakeLabel";
-import { LakeRadio } from "./LakeRadio";
-import { LakeTextInput } from "./LakeTextInput";
-import { Popover } from "./Popover";
-import { Space } from "./Space";
-import { Stack } from "./Stack";
-import { Tag } from "./Tag";
-const styles = StyleSheet.create({
-    container: {
-        paddingRight: 12,
-        paddingBottom: 8,
-    },
-    shadowed: {
-        position: "absolute",
-        opacity: 0,
-        width: "100%",
-        height: "100%",
-        borderRadius: 4,
-        boxShadow: shadows.tile,
-        transitionDuration: "150ms",
-        transitionProperty: "opacity",
-    },
-    hovered: {
-        opacity: 1,
-    },
-    dropdown: {
-        maxHeight: 400,
-        minWidth: 200,
-    },
-    itemHovered: {
-        backgroundColor: colors.gray[50],
-    },
-    content: {
-        paddingVertical: 12,
-    },
-    inputContent: {
-        paddingHorizontal: 24,
-        paddingTop: 24,
-        paddingBottom: 16,
-    },
-    radio: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        height: 32,
-        paddingHorizontal: 24,
-    },
-    itemLabel: {
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-    },
-    input: {
-        width: 250,
-    },
-    value: {
-        maxWidth: 130,
-        whiteSpace: "nowrap",
-    },
-});
-const FilterTag = forwardRef(({ onPress, onPressRemove, label, value = "", isActive }, forwardRef) => {
-    const ref = useRef(null);
-    const mergedRef = useMergeRefs(ref, forwardRef);
-    return (_jsx(Pressable, { ref: mergedRef, onPress: onPress, children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsx(Tag, { label: label, color: "current", onPressRemove: onPressRemove, children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Text, { numberOfLines: 1, style: styles.value, children: value }), _jsx(Space, { width: 4 }), _jsx(Icon, { color: colors.current.primary, name: isActive ? "chevron-up-filled" : "chevron-down-filled", size: 16 })] }) })] })) }));
-});
-function FilterRadio({ label, items, width, value, onValueChange, onPressRemove, autoOpen = false, }) {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const currentValue = useMemo(() => items.find(i => i.value === value), [items, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: items, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                        const isSelected = value === item.value;
-                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
-                                onValueChange(item.value);
-                                close();
-                            }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                    } }) })] }));
-}
-function FilterCheckbox({ label, items, width, checkAllLabel, value, onValueChange, onPressRemove, autoOpen = false, }) {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const valueSet = useMemo(() => new Set(value), [value]);
-    const currentValue = useMemo(() => items.filter(item => valueSet.has(item.value)), [items, valueSet]);
-    const allChecked = checkAllLabel != null && valueSet.size === items.length;
-    const listItems = useMemo(() => {
-        if (checkAllLabel == null) {
-            return items;
-        }
-        const checked = valueSet.size === 0 ? false : valueSet.size === items.length ? true : "mixed";
-        const checkAllItem = {
-            label: checkAllLabel,
-            checked,
-        };
-        return [checkAllItem, ...items];
-    }, [items, checkAllLabel, valueSet]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: listItems, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                        const isSelected = match(item)
-                            .with({ checked: P.any }, ({ checked }) => checked)
-                            .with({ value: P.any }, ({ value }) => valueSet.has(value))
-                            .exhaustive();
-                        const onPress = match(item)
-                            // Check all item
-                            .with({ checked: P.any }, ({ checked }) => () => {
-                            if (checked === true) {
-                                onValueChange(undefined);
-                            }
-                            else {
-                                onValueChange(items.map(item => item.value));
-                            }
-                        })
-                            // Regular item
-                            .with({ value: P.any }, ({ value }) => () => {
-                            const nextValues = new Set([...valueSet]);
-                            if (isSelected === true) {
-                                nextValues.delete(value);
-                            }
-                            else {
-                                nextValues.add(value);
-                            }
-                            if (nextValues.size === 0) {
-                                onValueChange(undefined);
-                            }
-                            else {
-                                onValueChange([...nextValues]);
-                            }
-                        })
-                            .exhaustive();
-                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                    } }) })] }));
-}
-function FilterDate({ label, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onValueChange, onPressRemove, autoOpen = false, }) {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const value = useMemo(() => (isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : ""), [initialValue, dateFormat]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
-                    const formattedValue = dayjs(value, dateFormat, true).toJSON();
-                    onValueChange(formattedValue);
-                }, onDismiss: close })] }));
-}
-function FilterInput({ label, initialValue = "", noValueText, autoOpen = false, placeholder, validate, onValueChange, onPressRemove, }) {
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const tagRef = useRef(null);
-    const getValueState = useCallback((inputValue, isInitialValue) => {
-        var _a;
-        const trimmed = inputValue.trim();
-        const error = (_a = validate === null || validate === void 0 ? void 0 : validate(trimmed)) !== null && _a !== void 0 ? _a : undefined;
-        const validValue = isNullish(error) ? trimmed : undefined;
-        if (!isInitialValue) {
-            onValueChange(validValue);
-        }
-        return {
-            inputValue,
-            validValue,
-            error: isInitialValue ? undefined : error,
-        };
-    }, [validate, onValueChange]);
-    const [{ inputValue, validValue, error }, setState] = useState(() => getValueState(initialValue, true));
-    const onChangeText = useCallback((value) => setState(getValueState(value, false)), [getValueState]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: tagRef, onPressRemove: onPressRemove, isActive: visible, value: validValue !== null && validValue !== void 0 ? validValue : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: tagRef, returnFocus: false, visible: visible, children: _jsx(View, { style: [styles.dropdown, styles.inputContent], children: _jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, value: inputValue, error: error, style: styles.input, placeholder: placeholder, onChangeText: onChangeText })) }) }) })] }));
-}
-const getFilterValue = (_type, filters, name) => filters[name];
-export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }) => {
-    const previousOpened = usePreviousValue(openedFilters);
-    const lastOpenedFilter = openedFilters.length > previousOpened.length
-        ? openedFilters[openedFilters.length - 1]
-        : undefined;
-    if (openedFilters.length === 0) {
-        return null;
-    }
-    return (_jsx(Stack, { direction: "row", wrap: "wrap", children: openedFilters.map(filterName => {
-            const filterDefinition = definition[filterName];
-            if (typeof filterName !== "string" || filterDefinition == null) {
-                return null;
-            }
-            return (_jsx(View, { children: match(filterDefinition)
-                    .with({ type: "radio" }, ({ type, label, items, width }) => (_jsx(FilterRadio, { label: label, items: items, width: width, autoOpen: lastOpenedFilter === filterName, onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    }, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }) })))
-                    .with({ type: "checkbox" }, ({ type, label, items, width, checkAllLabel }) => (_jsx(FilterCheckbox, { label: label, items: items, width: width, checkAllLabel: checkAllLabel, autoOpen: lastOpenedFilter === filterName, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .with({ type: "date" }, ({ type, label, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .with({ type: "input" }, ({ type, label, placeholder, noValueText, validate }) => (_jsx(FilterInput, { label: label, placeholder: placeholder, noValueText: noValueText, autoOpen: lastOpenedFilter === filterName, validate: validate, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .exhaustive() }, filterName));
-        }) }));
-};

package/src/components/Flag.d.ts

@@ -1,8 +0,0 @@
-import { CountryCCA2 } from "@swan-io/shared-business/src/constants/countries";
-export type FlagCode = CountryCCA2 | "EU";
-type Props = {
-    code: FlagCode;
-    width?: number;
-};
-export declare const Flag: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export {};

package/src/components/Flag.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Lazy } from "@swan-io/boxed";
-import { useEffect, useMemo, useState } from "react";
-import { match } from "ts-pattern";
-import { getFlagGlyphName } from "../utils/string";
-import { Svg, Use } from "./Svg";
-const UNICODE_OFFSET = 127462 - 65;
-let svgUrl;
-const svgUrlGetter = Lazy(async () => {
-    const { default: value } = await import("../assets/images/flags.svg");
-    svgUrl = value;
-    return value;
-});
-export const Flag = (props) => {
-    var _a;
-    const { code } = props;
-    const width = (_a = props.width) !== null && _a !== void 0 ? _a : 18;
-    const [url, setUrl] = useState(svgUrl);
-    useEffect(() => {
-        if (svgUrl == null) {
-            void svgUrlGetter.get().then(setUrl);
-        }
-    }, []);
-    const flag = useMemo(() => {
-        return match(code)
-            .with("EU", () => getFlagGlyphName("🇪🇺"))
-            .otherwise(() => {
-            return `${(UNICODE_OFFSET + code.charCodeAt(0)).toString(16)}-${(UNICODE_OFFSET + code.charCodeAt(1)).toString(16)}`;
-        });
-    }, [code]);
-    return (_jsx(Svg, { viewBox: "0 0 18 18", style: { height: width, width }, children: url != null && flag != null ? _jsx(Use, { xlinkHref: `${url}#${flag}` }) : null }));
-};

package/src/components/ToastStack.d.ts

@@ -1 +0,0 @@
-export declare const ToastStack: () => import("react/jsx-runtime").JSX.Element | null;

package/src/components/ToastStack.js

@@ -1,142 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Array, Option } from "@swan-io/boxed";
-import { t } from "@swan-io/shared-business/src/utils/i18n";
-import { memo, useEffect, useRef, useState } from "react";
-import { StyleSheet, View } from "react-native";
-import { P, match } from "ts-pattern";
-import { animations, colors, shadows } from "../constants/design";
-import { getErrorToRequestId, hideToast, useToasts, } from "../state/toasts";
-import { setClipboardText } from "../utils/clipboard";
-import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
-import { Box } from "./Box";
-import { Icon } from "./Icon";
-import { LakeText } from "./LakeText";
-import { LakeTooltip } from "./LakeTooltip";
-import { Portal } from "./Portal";
-import { Pressable } from "./Pressable";
-import { Space } from "./Space";
-import { TransitionGroupView } from "./TransitionGroupView";
-const styles = StyleSheet.create({
-    list: {
-        position: "fixed",
-        right: 0,
-        bottom: 0,
-        maxHeight: "100%",
-        maxWidth: 400,
-        paddingVertical: 8,
-        width: "100%",
-        zIndex: 10,
-        pointerEvents: "none",
-    },
-    toastWrapper: {
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        pointerEvents: "auto",
-    },
-    toast: {
-        padding: 24,
-        borderRadius: 4,
-        borderWidth: 1,
-        borderLeftWidth: 4,
-        overflow: "hidden",
-        boxShadow: shadows.modal,
-    },
-    contentContainer: {
-        paddingRight: 36, // 24 for close button + 12 for spacing
-    },
-    closeButton: {
-        zIndex: 1,
-        position: "absolute",
-        width: 24,
-        height: 24,
-        right: 24,
-        top: 0,
-        bottom: 0,
-        margin: "auto",
-    },
-    progressBar: {
-        height: 2,
-        transformOrigin: "left",
-    },
-    copyTooltip: {
-        alignSelf: "flex-start",
-    },
-    copyButton: {
-        alignItems: "center",
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-    },
-});
-const errorsToArray = (errors) => {
-    const asArray = Array.isArray(errors) ? errors : [errors];
-    return Array.filterMap(asArray, error => error instanceof Error ? Option.Some(error) : Option.None());
-};
-const Toast = memo(({ variant, uid, title, description, error, progress, onClose }) => {
-    const progressBarRef = useRef(null);
-    const [visibleState, setVisibleState] = useState("copy");
-    const hasDescription = isNotNullishOrEmpty(description);
-    const [requestId] = useState(() => {
-        if (error == undefined) {
-            return Option.None();
-        }
-        return Array.findMap(errorsToArray(error), error => Option.fromNullable(getErrorToRequestId().get(error)));
-    });
-    const colorVariation = match(variant)
-        .returnType()
-        .with("success", () => "positive")
-        .with("error", () => "negative")
-        .with("info", () => "shakespear")
-        .with("warning", () => "warning")
-        .exhaustive();
-    useEffect(() => {
-        if (isNullish(progress)) {
-            return;
-        }
-        return progress.subscribe(value => {
-            if (progressBarRef.current instanceof HTMLElement) {
-                progressBarRef.current.style.transform = `scaleX(${value})`;
-            }
-        });
-    }, [progress]);
-    return (_jsx(View, { style: styles.toastWrapper, children: _jsxs(View, { style: [
-                styles.toast,
-                {
-                    borderColor: colors[colorVariation][200],
-                    borderLeftColor: colors[colorVariation][500],
-                    backgroundColor: colors[colorVariation][0],
-                },
-            ], children: [_jsxs(Box, { style: styles.contentContainer, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [match(variant)
-                                    .with("success", () => (_jsx(Icon, { name: "checkmark-circle-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .with("error", () => (_jsx(Icon, { name: "dismiss-circle-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .with("info", () => (_jsx(Icon, { name: "info-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .with("warning", () => (_jsx(Icon, { name: "warning-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), hasDescription && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] })), match(requestId)
-                            .with(Option.P.None, () => null)
-                            .with(Option.P.Some(P.select()), requestId => (_jsxs(_Fragment, { children: [_jsx(Space, { height: hasDescription ? 4 : 8 }), _jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, placement: "center", containerStyle: styles.copyTooltip, content: visibleState === "copy"
-                                        ? t("copyButton.copyTooltip")
-                                        : t("copyButton.copiedTooltip"), children: _jsxs(Pressable, { style: styles.copyButton, onPress: event => {
-                                            event.stopPropagation();
-                                            event.preventDefault();
-                                            setClipboardText(requestId !== null && requestId !== void 0 ? requestId : "");
-                                            setVisibleState("copied");
-                                        }, children: [_jsx(Icon, { color: colors.gray[700], size: 14, name: "copy-regular" }), _jsx(Space, { width: 4 }), _jsxs(LakeText, { numberOfLines: 1, variant: "smallRegular", color: colors.gray[700], children: ["ID: ", requestId] })] }) })] })))
-                            .exhaustive()] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(View, { ref: progressBarRef, role: "progressbar", style: [styles.progressBar, { backgroundColor: colors[colorVariation][500] }] })] }))] }) }));
-});
-export const ToastStack = () => {
-    const toasts = useToasts();
-    const [rootElement, setRootElement] = useState(() => undefined);
-    useEffect(() => {
-        const rootElement = document.createElement("div");
-        document.body.append(rootElement);
-        setRootElement(rootElement);
-        return () => {
-            rootElement.remove();
-            setRootElement(undefined);
-        };
-    }, []);
-    if (rootElement == null) {
-        return null;
-    }
-    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionGroupView, { style: styles.list, enter: animations.fadeAndSlideInFromRight.enter, leave: animations.fadeAndSlideInFromRight.leave, children: toasts.map(toast => (_jsx(Toast, { uid: toast.uid, variant: toast.variant, title: toast.title, description: toast.description, error: toast.error, progress: toast.progress, onClose: hideToast }, toast.uid))) }) }));
-};

package/src/state/toasts.d.ts

@@ -1,31 +0,0 @@
-declare const createProgress: ({ duration, onEnd }: {
-    duration: number;
-    onEnd: () => void;
-}) => {
-    clear: () => void;
-    reset: () => void;
-    subscribe: (callback: (value: number) => void) => () => void;
-};
-export type ToastProgress = ReturnType<typeof createProgress>;
-export type ToastVariant = "success" | "info" | "warning" | "error";
-type ToastContent = {
-    variant: ToastVariant;
-    title: string;
-    description?: string;
-    error?: unknown;
-    autoClose?: boolean;
-};
-type Toast = {
-    uid: string;
-    variant: ToastVariant;
-    title: string;
-    description?: string;
-    error?: unknown;
-    progress?: ToastProgress;
-};
-export declare const useToasts: () => Toast[];
-export declare const hideToast: (uid: string) => void;
-export declare const registerErrorToRequestId: (value: WeakMap<WeakKey, string>) => void;
-export declare const getErrorToRequestId: () => WeakMap<WeakKey, string>;
-export declare const showToast: ({ variant, title, description, error, autoClose }: ToastContent) => string;
-export {};

package/src/state/toasts.js

@@ -1,88 +0,0 @@
-import { atom, useAtom } from "react-atomic-state";
-// based on https://gist.github.com/ncou/3a0a1f89c8e22416d0d607f621a948a9
-const createProgress = ({ duration, onEnd }) => {
-    const callbacks = new Set();
-    let endDate = 0;
-    let timerId = 0;
-    const step = () => {
-        const value = (endDate - Date.now()) / duration;
-        callbacks.forEach(callback => callback(value));
-        animationRequest = window.requestAnimationFrame(step);
-    };
-    let animationRequest = window.requestAnimationFrame(step);
-    const start = () => {
-        endDate = Date.now() + duration;
-        timerId = window.setTimeout(() => {
-            clear();
-            onEnd();
-        }, duration);
-    };
-    const reset = () => {
-        window.clearTimeout(timerId);
-        start();
-    };
-    const subscribe = (callback) => {
-        callbacks.add(callback);
-        return () => {
-            callbacks.delete(callback);
-        };
-    };
-    const clear = () => {
-        document.removeEventListener("visibilitychange", onDocumentVisible);
-        window.clearTimeout(timerId);
-        window.cancelAnimationFrame(animationRequest);
-    };
-    const onDocumentVisible = () => {
-        document.removeEventListener("visibilitychange", onDocumentVisible);
-        reset();
-    };
-    if (document.hidden) {
-        document.addEventListener("visibilitychange", onDocumentVisible);
-    }
-    else {
-        reset();
-    }
-    return {
-        clear,
-        reset,
-        subscribe,
-    };
-};
-const toasts = atom([]);
-export const useToasts = () => useAtom(toasts);
-export const hideToast = (uid) => {
-    var _a;
-    const toast = toasts.get().find(toast => toast.uid === uid);
-    if (toast != null) {
-        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.clear();
-        toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
-    }
-};
-let errorToRequestId = new WeakMap();
-export const registerErrorToRequestId = (value) => {
-    errorToRequestId = value;
-};
-export const getErrorToRequestId = () => {
-    return errorToRequestId;
-};
-export const showToast = ({ variant, title, description, error, autoClose }) => {
-    var _a;
-    const uid = `${variant} - ${title} - ${description !== null && description !== void 0 ? description : ""}`;
-    const toast = toasts.get().find(toast => toast.uid === uid);
-    if (toast != null) {
-        (_a = toast.progress) === null || _a === void 0 ? void 0 : _a.reset();
-        return uid;
-    }
-    // by default, only info and success toasts are auto-closing
-    const shouldAutoClose = autoClose !== null && autoClose !== void 0 ? autoClose : (variant === "info" || variant === "success");
-    const progress = shouldAutoClose
-        ? createProgress({
-            duration: 10000,
-            onEnd: () => {
-                hideToast(uid);
-            },
-        })
-        : undefined;
-    toasts.set(toasts => [{ uid, variant, title, description, error, progress }, ...toasts]);
-    return uid;
-};