@jobber/components-native 0.38.0 → 0.40.0

package/dist/src/Form/context/AtlantisFormContext.js

@@ -0,0 +1,16 @@
+import { createContext, useContext, useRef } from "react";
+export const defaultValues = {
+    useConfirmBeforeBack: () => {
+        const ref = useRef(() => undefined);
+        return ref;
+    },
+    useInternalFormLocalCache: () => ({
+        setLocalCache: () => undefined,
+        removeLocalCache: () => undefined,
+    }),
+    headerHeight: 0,
+};
+export const AtlantisFormContext = createContext(defaultValues);
+export function useAtlantisFormContext() {
+    return useContext(AtlantisFormContext);
+}

package/dist/src/Form/context/index.js

@@ -0,0 +1 @@
+export { AtlantisFormContext, useAtlantisFormContext, } from "./AtlantisFormContext";

package/dist/src/Form/context/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Form/hooks/useFormViewRefs.js

@@ -0,0 +1,14 @@
+import { useCallback, useRef } from "react";
+export function useFormViewRefs() {
+    const scrollViewRef = useRef(null);
+    const bottomViewRef = useRef(null);
+    const scrollToTop = useCallback(() => {
+        var _a;
+        (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollToPosition(0, 0);
+    }, [scrollViewRef]);
+    return {
+        scrollViewRef: scrollViewRef,
+        bottomViewRef,
+        scrollToTop,
+    };
+}

package/dist/src/Form/hooks/useInternalForm.js

@@ -0,0 +1,37 @@
+import { useForm, } from "react-hook-form";
+import { useAtlantisContext } from "../../AtlantisContext";
+import { useAtlantisFormContext } from "../context/AtlantisFormContext";
+export function useInternalForm({ mode, reValidateMode, initialValues, formRef, localCacheKey, localCacheId, scrollViewRef, saveButtonHeight, messageBannerHeight, }) {
+    const { useConfirmBeforeBack, useInternalFormLocalCache } = useAtlantisFormContext();
+    const { isOnline } = useAtlantisContext();
+    const formMethods = useForm({
+        mode,
+        reValidateMode,
+        defaultValues: initialValues,
+        shouldFocusError: false,
+    });
+    const clientSideSaveOn = localCacheKey && localCacheKey !== "INVALID";
+    const { setLocalCache, removeLocalCache } = useInternalFormLocalCache(formMethods, localCacheKey, {
+        id: localCacheId,
+    });
+    const { handleSubmit, formState: { isSubmitting, isDirty }, } = formMethods;
+    if (formRef) {
+        formRef.current = Object.assign(Object.assign({}, formMethods), { saveButtonHeight,
+            messageBannerHeight,
+            scrollViewRef });
+    }
+    const removeListenerRef = useConfirmBeforeBack({
+        alwaysPreventBack: isSubmitting,
+        shouldShowAlert: isDirty,
+        onAcceptEvent: isOnline ? removeLocalCache : undefined,
+        showLostProgressMessage: isOnline || !clientSideSaveOn ? true : false,
+    });
+    return {
+        setLocalCache,
+        formMethods,
+        handleSubmit,
+        isSubmitting,
+        isDirty,
+        removeListenerRef,
+    };
+}

package/dist/src/Form/hooks/useOfflineHandler.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+import { useIntl } from "react-intl";
+import { Alert } from "react-native";
+import { messages } from "../messages";
+export function useOfflineHandler() {
+    const { formatMessage } = useIntl();
+    const handleOfflineSubmit = useCallback((callback, dismiss) => {
+        return () => {
+            Alert.alert(formatMessage(messages.unavailableNetworkTitle), formatMessage(messages.unavailableNetworkMessage), [
+                {
+                    text: formatMessage(messages.dismissAlertButton),
+                    style: "cancel",
+                    onPress: dismiss,
+                },
+                {
+                    text: formatMessage(messages.retryAlertButton),
+                    style: "default",
+                    onPress: callback,
+                },
+            ]);
+        };
+    }, [formatMessage]);
+    return handleOfflineSubmit;
+}

package/dist/src/Form/hooks/useSaveButtonPosition.js

@@ -0,0 +1,25 @@
+import { Platform } from "react-native";
+import { useScreenInformation } from "./useScreenInformation";
+import { tokens } from "../../utils/design";
+export function useSaveButtonPosition({ formContentHeight, isBottomSheetOpen, showStickySaveButton, keyboardHeight, keyboardScreenY, }) {
+    const { headerHeight } = useScreenInformation();
+    if (showStickySaveButton) {
+        return {
+            saveButtonPosition: "sticky",
+        };
+    }
+    if (Platform.OS === "android" || isBottomSheetOpen) {
+        return {
+            saveButtonPosition: "inline",
+        };
+    }
+    const isKeyboardOpen = Boolean(keyboardHeight);
+    // tokens["space-large"] acts like a safe space below the form to avoid
+    // rendering the sticky button above the form elements.
+    const calculatedFormContentHeight = formContentHeight + headerHeight + tokens["space-large"];
+    const isKeyboardOverForm = calculatedFormContentHeight > keyboardScreenY;
+    const showInlineSaveButton = isKeyboardOpen && isKeyboardOverForm;
+    return {
+        saveButtonPosition: showInlineSaveButton ? "inline" : "sticky",
+    };
+}

package/dist/src/Form/hooks/useScreenInformation.js

@@ -0,0 +1,15 @@
+import { useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { KEYBOARD_TOP_PADDING_AUTO_SCROLL } from "../constants";
+import { useAtlantisFormContext } from "../context";
+export function useScreenInformation() {
+    const { headerHeight } = useAtlantisFormContext();
+    const windowHeight = useWindowDimensions().height;
+    const headerHeightWithPadding = headerHeight + KEYBOARD_TOP_PADDING_AUTO_SCROLL;
+    const insets = useSafeAreaInsets();
+    return {
+        windowHeight,
+        headerHeight: headerHeightWithPadding,
+        insets,
+    };
+}

package/dist/src/Form/hooks/useScrollToError/index.js

@@ -0,0 +1 @@
+export * from "./useScrollToError";

package/dist/src/Form/hooks/useScrollToError/useScrollToError.js

@@ -0,0 +1,63 @@
+import { useCallback, useState } from "react";
+import { Keyboard, Platform, } from "react-native";
+import { useIsScreenReaderEnabled } from "../../../hooks/useIsScreenReaderEnabled";
+import { useErrorMessageContext } from "../../../ErrorMessageWrapper";
+export function useScrollToError({ formState: { errors, isValid, submitCount }, refNode, setFocus, scrollToPosition, }) {
+    const [submitCounter, setSubmitCounter] = useState(submitCount);
+    const isScreenReaderEnabled = useIsScreenReaderEnabled();
+    const manuallyScrollToElement = useManuallyScrollToElement(handleScroll, refNode);
+    // Determine if the form has been submitted by checking if the submit count
+    // went up.
+    const hasBeenSubmitted = submitCounter < submitCount;
+    if (!hasBeenSubmitted)
+        return;
+    if (isScreenReaderEnabled) {
+        manuallyScrollToElement();
+        Keyboard.dismiss();
+    }
+    else {
+        defaultAutoScroll();
+    }
+    setSubmitCounter(submitCount);
+    function defaultAutoScroll() {
+        if (isValid)
+            return;
+        try {
+            focusInputWithRHF(errors, setFocus);
+        }
+        catch (_a) {
+            manuallyScrollToElement();
+        }
+    }
+    function handleScroll(...[x, y]) {
+        /**
+         * Disable scroll animation on android when screen reader is active since it
+         * can't accessibility-focus on an offscreen component.
+         */
+        const isAndroidWithScreenReader = isScreenReaderEnabled && Platform.OS === "android";
+        const shouldAnimateScroll = !isAndroidWithScreenReader;
+        scrollToPosition === null || scrollToPosition === void 0 ? void 0 : scrollToPosition(x, y, shouldAnimateScroll);
+    }
+}
+function focusInputWithRHF(errors, setFocus) {
+    const errorMessages = Object.keys(errors);
+    setFocus(errorMessages[0]);
+}
+/**
+ * Manually scroll to the element by checking which elements has an error from
+ * the Error Message Context
+ */
+function useManuallyScrollToElement(callback, refNode) {
+    const { elements } = useErrorMessageContext();
+    return useCallback(() => {
+        const elementWithError = Object.keys(elements).find(el => elements[el].hasErrorMessage);
+        if (elementWithError) {
+            const element = elements[elementWithError];
+            refNode && element.measure(refNode, callback, handleError);
+            element.accessibilityFocus();
+        }
+    }, [callback, elements, refNode]);
+}
+function handleError() {
+    return Error("Couldn't scroll to error");
+}

package/dist/src/Form/index.js

@@ -0,0 +1,4 @@
+export { Form } from "./Form";
+export { FormMessage } from "./components/FormMessage";
+export { FormSubmitErrorType, FormBannerMessageType } from "./types";
+export * from "./context";

package/dist/src/Form/messages.js

@@ -0,0 +1,28 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    loadingA11YLabel: {
+        id: "loadingA11yLabel",
+        defaultMessage: "Loading",
+        description: "Accessibility label for the loading indicator",
+    },
+    dismissAlertButton: {
+        id: "dismiss",
+        defaultMessage: "Dismiss",
+        description: "The label for the button to dismiss the alert ",
+    },
+    retryAlertButton: {
+        id: "retry",
+        defaultMessage: "Try Again",
+        description: "The label for the alert button to try action again",
+    },
+    unavailableNetworkTitle: {
+        id: "unavailableNetworkTitle",
+        defaultMessage: "Network unavailable",
+        description: "The title for alert about network unavailable",
+    },
+    unavailableNetworkMessage: {
+        id: "unavailableNetworkMessage",
+        defaultMessage: "Check your internet connection and try again later.",
+        description: "The message for alert about network unavailable",
+    },
+});

package/dist/src/Form/types.js

@@ -0,0 +1,10 @@
+export var FormSubmitErrorType;
+(function (FormSubmitErrorType) {
+    FormSubmitErrorType["NetworkError"] = "NetworkError";
+    FormSubmitErrorType["UserError"] = "UserErrors";
+})(FormSubmitErrorType || (FormSubmitErrorType = {}));
+export var FormBannerMessageType;
+(function (FormBannerMessageType) {
+    FormBannerMessageType["WarningMessage"] = "WarningMessage";
+    FormBannerMessageType["NoticeMessage"] = "NoticeMessage";
+})(FormBannerMessageType || (FormBannerMessageType = {}));

package/dist/src/InputDate/InputDate.js

@@ -0,0 +1,76 @@
+import React, { useMemo, useState } from "react";
+import DateTimePicker from "react-native-modal-datetime-picker";
+import { Platform } from "react-native";
+import { useIntl } from "react-intl";
+import { utcToZonedTime } from "date-fns-tz";
+import { format as formatDate } from "date-fns";
+import { messages } from "./messages";
+import { FormField } from "../FormField";
+import { InputPressable } from "../InputPressable";
+import { useAtlantisContext } from "../AtlantisContext";
+function formatInvalidState(error, invalid) {
+    if (invalid)
+        return invalid;
+    if (error && error.message) {
+        return error.message;
+    }
+    return Boolean(error);
+}
+const display = Platform.OS === "ios" ? "inline" : "default";
+/**
+ * Allow users to select a date using the device date picker.
+ */
+export function InputDate(props) {
+    if (props.name) {
+        return (React.createElement(FormField, { name: props.name, defaultValue: props.defaultValue, validations: props.validations }, ({ value, onChange, onBlur }, error) => (React.createElement(InternalInputDate, Object.assign({}, props, { value: value, onChange: (newValue) => {
+                var _a;
+                onChange(newValue);
+                onBlur();
+                (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, newValue);
+            }, invalid: formatInvalidState(error, props.invalid) })))));
+    }
+    return React.createElement(InternalInputDate, Object.assign({}, props));
+}
+function InternalInputDate({ clearable = "always", disabled, emptyValueLabel, invalid, maxDate, minDate, placeholder, value, name, onChange, accessibilityLabel, accessibilityHint, }) {
+    const [showPicker, setShowPicker] = useState(false);
+    const { formatMessage } = useIntl();
+    const { timeZone, dateFormat } = useAtlantisContext();
+    const date = useMemo(() => {
+        if (typeof value === "string")
+            return new Date(value);
+        return value;
+    }, [value]);
+    const formattedDate = useMemo(() => {
+        if (date) {
+            const zonedTime = utcToZonedTime(date, timeZone);
+            return formatDate(zonedTime, dateFormat);
+        }
+        return emptyValueLabel;
+    }, [date, emptyValueLabel, timeZone, dateFormat]);
+    const canClearDate = formattedDate === emptyValueLabel ? "never" : clearable;
+    const placeholderLabel = placeholder !== null && placeholder !== void 0 ? placeholder : formatMessage(messages.datePlaceholder);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(InputPressable, { clearable: canClearDate, disabled: disabled, invalid: invalid, placeholder: placeholderLabel, prefix: { icon: "calendar" }, value: formattedDate, onClear: handleClear, onPress: showDatePicker, accessibilityLabel: accessibilityLabel, accessibilityHint: accessibilityHint }),
+        React.createElement(DateTimePicker, { testID: "inputDate-datePicker", date: date || undefined, display: display, isVisible: showPicker, maximumDate: maxDate, minimumDate: minDate, mode: "date", onCancel: handleCancel, onConfirm: handleConfirm })));
+    function showDatePicker() {
+        setShowPicker(true);
+    }
+    function handleConfirm(newVal) {
+        setShowPicker(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newVal);
+    }
+    function handleCancel() {
+        setShowPicker(false);
+        // Ensure a change happens so we trigger the validation of one exists
+        onChange === null || onChange === void 0 ? void 0 : onChange(date);
+    }
+    function handleClear() {
+        // Returns null only for Form controlled scenarios due to a limitation of react-hook-form that doesn't allow passing undefined to form values.
+        if (name) {
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+        }
+    }
+}

package/dist/src/InputDate/index.js

@@ -0,0 +1 @@
+export { InputDate } from "./InputDate";

package/dist/src/InputDate/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    datePlaceholder: {
+        id: "datePlaceholder",
+        defaultMessage: "Date",
+        description: "Default input label for the InputDate component",
+    },
+});

package/dist/src/Menu/Menu.js

@@ -0,0 +1,67 @@
+import React, { useCallback, useRef, useState } from "react";
+import { Pressable, View, useWindowDimensions, } from "react-native";
+import { Portal } from "react-native-portalize";
+import { useIntl } from "react-intl";
+import { useSafeAreaFrame } from "react-native-safe-area-context";
+import { styles } from "./Menu.style";
+import { messages } from "./messages";
+import { findViewpoint } from "./utils";
+import { MenuOption } from "./components/MenuOption";
+import { Overlay } from "./components/Overlay";
+import { tokens } from "../utils/design";
+import { Button } from "../Button";
+import { Content } from "../Content";
+import { useAtlantisContext } from "../AtlantisContext";
+export function Menu({ menuOptions, customActivator }) {
+    const [open, setOpen] = useState(false);
+    const [menuPosition, setMenuPosition] = useState();
+    const activatorLayout = useRef();
+    const menuButtonRef = useRef();
+    const screenInfo = useScreenInformation();
+    const { formatMessage } = useIntl();
+    const findMenuLayout = useCallback(() => {
+        if (activatorLayout.current) {
+            setMenuPosition(findViewpoint(screenInfo, activatorLayout.current));
+        }
+    }, [screenInfo, activatorLayout]);
+    const activatorOnPress = (onPress) => {
+        var _a;
+        (_a = menuButtonRef.current) === null || _a === void 0 ? void 0 : _a.measureInWindow((x, y, width, height) => {
+            activatorLayout.current = {
+                x,
+                y,
+                width,
+                height,
+            };
+            findMenuLayout();
+            setOpen(true);
+            onPress && onPress();
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(View, { ref: ref => {
+                menuButtonRef.current = ref;
+            }, collapsable: false },
+            customActivator && (React.createElement(Pressable, { style: ({ pressed }) => [
+                    {
+                        opacity: pressed ? tokens["opacity-pressed"] : 1,
+                    },
+                ], pointerEvents: "box-only", onPress: () => {
+                    activatorOnPress(customActivator.props.onPress);
+                }, onLongPress: customActivator.props.onLongPress }, customActivator)),
+            !customActivator && (React.createElement(Button, { icon: "more", accessibilityLabel: formatMessage(messages.more), variation: "cancel", type: "tertiary", onPress: () => {
+                    activatorOnPress();
+                } }))),
+        React.createElement(Portal, null, open && (React.createElement(React.Fragment, null,
+            React.createElement(Overlay, { setOpen: setOpen }),
+            React.createElement(View, { style: [open && menuPosition, styles.menu] },
+                React.createElement(Content, { spacing: "none", childSpacing: "small" }, menuOptions === null || menuOptions === void 0 ? void 0 : menuOptions.map((menuOption, index) => {
+                    return (React.createElement(MenuOption, Object.assign({}, menuOption, { key: index, setOpen: setOpen })));
+                }))))))));
+}
+function useScreenInformation() {
+    const { headerHeight } = useAtlantisContext();
+    const windowWidth = useWindowDimensions().width;
+    const { height: windowHeight } = useSafeAreaFrame();
+    return { headerHeight, windowWidth, windowHeight };
+}

package/dist/src/Menu/Menu.style.js

@@ -0,0 +1,6 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../utils/design";
+const menuWidth = 208;
+export const styles = StyleSheet.create({
+    menu: Object.assign({ position: "absolute", backgroundColor: tokens["color-surface"], paddingHorizontal: tokens["space-small"], paddingVertical: tokens["space-small"] + tokens["space-smallest"], borderRadius: tokens["radius-larger"], width: menuWidth }, tokens["shadow-high"]),
+});

package/dist/src/Menu/components/MenuOption/MenuOption.js

@@ -0,0 +1,25 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import capitalize from "lodash/capitalize";
+import { styles } from "./MenuOption.style";
+import { tokens } from "../../../utils/design";
+import { Flex } from "../../../Flex";
+import { Typography } from "../../../Typography";
+import { Icon } from "../../../Icon";
+export function MenuOption({ label, icon, iconColor = "heading", textAlign, destructive, textTransform = "capitalize", onPress, setOpen, }) {
+    const destructiveColor = "critical";
+    const textVariation = destructive ? destructiveColor : "heading";
+    return (React.createElement(View, { testID: "ATL-MENU-OPTIONS" },
+        React.createElement(Pressable, { style: ({ pressed }) => [
+                styles.menuOption,
+                { opacity: pressed ? tokens["opacity-pressed"] : 1 },
+            ], onPress: () => {
+                onPress();
+                setOpen(false);
+            }, accessibilityLabel: label },
+            React.createElement(Flex, { template: ["grow", "shrink"], align: "flex-start", gap: "smaller" },
+                React.createElement(Typography, { selectable: false, color: textVariation, fontWeight: "semiBold", lineHeight: "large", align: textAlign }, textTransform === "capitalize"
+                    ? capitalize(label.toLocaleLowerCase())
+                    : label),
+                icon && (React.createElement(Icon, { name: icon, color: destructive ? destructiveColor : iconColor }))))));
+}

package/dist/src/Menu/components/MenuOption/MenuOption.style.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+export const styles = StyleSheet.create({
+    menuOption: {
+        display: "flex",
+        paddingHorizontal: tokens["space-base"],
+        paddingVertical: tokens["space-small"],
+        borderRadius: tokens["radius-large"],
+    },
+});

package/dist/src/Menu/components/MenuOption/index.js

@@ -0,0 +1 @@
+export { MenuOption } from "./MenuOption";

package/dist/src/Menu/components/Overlay/Overlay.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { styles } from "./Overlay.style";
+export function Overlay({ setOpen }) {
+    return (React.createElement(Pressable, { onPressIn: () => {
+            setOpen(false);
+        } },
+        React.createElement(View, { style: styles.overlay })));
+}

package/dist/src/Menu/components/Overlay/Overlay.style.js

@@ -0,0 +1,6 @@
+import { Dimensions, StyleSheet } from "react-native";
+import { tokens } from "../../../utils/design";
+const { height } = Dimensions.get("window");
+export const styles = StyleSheet.create({
+    overlay: Object.assign(Object.assign({}, StyleSheet.absoluteFillObject), { backgroundColor: tokens["color-overlay"], opacity: 0, height }),
+});

package/dist/src/Menu/components/Overlay/index.js

@@ -0,0 +1 @@
+export { Overlay } from "./Overlay";

package/dist/src/Menu/index.js

@@ -0,0 +1 @@
+export { Menu } from "./Menu";

package/dist/src/Menu/messages.js

@@ -0,0 +1,8 @@
+import { defineMessages } from "react-intl";
+export const messages = defineMessages({
+    more: {
+        id: "more",
+        defaultMessage: "Menu",
+        description: "Accessibility label to open the menu",
+    },
+});

package/dist/src/Menu/types.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Menu/utils.js

@@ -0,0 +1,84 @@
+import { styles } from "./Menu.style";
+export function findViewpoint(screenInfo, activatorLayout) {
+    const { windowHeight, windowWidth, headerHeight } = screenInfo;
+    const pos = {};
+    const menuWidth = styles.menu.width;
+    const windowHalf = (windowHeight - headerHeight) / 2 + headerHeight;
+    const menuPositionVertical = activatorLayout.y + activatorLayout.height > windowHalf
+        ? "menuAbove"
+        : "menuBelow";
+    const menuPositionHorizontal = windowWidth / 2 > activatorLayout.width / 2 + activatorLayout.x
+        ? "menuRight"
+        : "menuLeft";
+    const menuPadding = 36;
+    getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical);
+    getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal);
+    return pos;
+}
+function getVerticalPosition(pos, windowHeight, activatorLayout, menuPositionVertical) {
+    if (menuPositionVertical === "menuAbove") {
+        getAbovePosition(pos, windowHeight, activatorLayout);
+    }
+    if (menuPositionVertical === "menuBelow") {
+        getBelowPosition(pos, activatorLayout);
+    }
+}
+function getBelowPosition(pos, activatorLayout) {
+    pos.top = activatorLayout.y + activatorLayout.height;
+}
+function getAbovePosition(pos, windowHeight, activatorLayout) {
+    pos.bottom = windowHeight - activatorLayout.y;
+}
+function getHorizontalPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth, menuPositionHorizontal) {
+    if (menuPositionHorizontal === "menuRight") {
+        getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
+    }
+    if (menuPositionHorizontal === "menuLeft") {
+        getLeftPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth);
+    }
+}
+function getLeftPosition(pos, activatorLayout, windowWidth, menuHorizontalPadding, menuWidth) {
+    const overflowLeft = windowWidth -
+        activatorLayout.x -
+        activatorLayout.width +
+        activatorLayout.width / 2 -
+        menuHorizontalPadding +
+        menuWidth >
+        windowWidth;
+    const overflowRight = windowWidth -
+        activatorLayout.x -
+        activatorLayout.width +
+        activatorLayout.width / 2 -
+        menuHorizontalPadding <
+        0;
+    if (overflowLeft) {
+        pos.right = undefined;
+        pos.left = 0;
+    }
+    else if (overflowRight) {
+        pos.right = 0;
+    }
+    else {
+        pos.right =
+            windowWidth -
+                activatorLayout.x -
+                activatorLayout.width +
+                activatorLayout.width / 2 -
+                menuHorizontalPadding;
+    }
+}
+function getRightPosition(pos, activatorLayout, windowWidth, menuPadding, menuWidth) {
+    const overflowRight = activatorLayout.x + activatorLayout.width / 2 - menuPadding + menuWidth >
+        windowWidth;
+    const overflowLeft = activatorLayout.x + activatorLayout.width / 2 - menuPadding < 0;
+    if (overflowRight) {
+        pos.left = undefined;
+        pos.right = 0;
+    }
+    else if (overflowLeft) {
+        pos.left = 0;
+    }
+    else {
+        pos.left = activatorLayout.x + activatorLayout.width / 2 - menuPadding;
+    }
+}

package/dist/src/index.js

@@ -16,18 +16,21 @@ export * from "./Divider";
 export * from "./EmptyState";
 export * from "./ErrorMessageWrapper";
 export * from "./Flex";
+export * from "./Form";
 export * from "./FormField";
 export * from "./Heading";
 export * from "./Icon";
 export * from "./IconButton";
 export * from "./InputFieldWrapper";
 export * from "./InputCurrency";
+export * from "./InputDate";
 export * from "./InputNumber";
 export * from "./InputPassword";
 export * from "./InputPressable";
 export * from "./InputSearch";
 export * from "./InputTime";
 export * from "./InputText";
+export * from "./Menu";
 export * from "./TextList";
 export * from "./ProgressBar";
 export * from "./Select";