@trackunit/react-drawer 0.0.1

package/README.md

@@ -0,0 +1,21 @@
+# Trackunit react-drawer
+
+The `@trackunit/react-drawer` package is the home of Trackunits public react components used for...
+
+This library is exposed publicly for use in the the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).
+
+To browse all avaliable components visit our [Public Storybook](https://apps.iris.trackunit.com/storybook/).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.cjs.d.ts

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

package/index.cjs.js

@@ -0,0 +1,443 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var i18nLibraryTranslation = require('@trackunit/i18n-library-translation');
+var react = require('react');
+var usePortal = require('react-useportal');
+var reactComponents = require('@trackunit/react-components');
+var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
+var reactSwipeable = require('react-swipeable');
+
+var defaultTranslations = {
+	
+};
+
+/** The translation namespace for this library */
+const namespace = "react.react-drawer";
+/**
+ * The TranslationResource for this Library.
+ * Holds lazy loaded imports for all languages supported by the library.
+ *
+ * This is used to register the translations for this library before initializing i18next.
+ */
+const translations = {
+    ns: namespace,
+    default: defaultTranslations,
+    languages: {
+        de: () => Promise.resolve().then(function () { return require('./translation.cjs.js'); }),
+        da: () => Promise.resolve().then(function () { return require('./translation.cjs2.js'); }),
+        cs: () => Promise.resolve().then(function () { return require('./translation.cjs3.js'); }),
+        nl: () => Promise.resolve().then(function () { return require('./translation.cjs4.js'); }),
+        fr: () => Promise.resolve().then(function () { return require('./translation.cjs5.js'); }),
+        fi: () => Promise.resolve().then(function () { return require('./translation.cjs6.js'); }),
+        hu: () => Promise.resolve().then(function () { return require('./translation.cjs7.js'); }),
+        it: () => Promise.resolve().then(function () { return require('./translation.cjs8.js'); }),
+        nb: () => Promise.resolve().then(function () { return require('./translation.cjs9.js'); }),
+        pl: () => Promise.resolve().then(function () { return require('./translation.cjs10.js'); }),
+        pt: () => Promise.resolve().then(function () { return require('./translation.cjs11.js'); }),
+        ru: () => Promise.resolve().then(function () { return require('./translation.cjs12.js'); }),
+        ro: () => Promise.resolve().then(function () { return require('./translation.cjs13.js'); }),
+        es: () => Promise.resolve().then(function () { return require('./translation.cjs14.js'); }),
+        sv: () => Promise.resolve().then(function () { return require('./translation.cjs15.js'); }),
+        ja: () => Promise.resolve().then(function () { return require('./translation.cjs16.js'); }),
+        th: () => Promise.resolve().then(function () { return require('./translation.cjs17.js'); }),
+    },
+};
+/**
+ * Registers the translations for this library
+ */
+const setupLibraryTranslations = () => {
+    i18nLibraryTranslation.registerTranslations(translations);
+};
+
+/**
+ * Overlay Component
+ *
+ * @param {object} props - The Overlay component properties
+ * @param {boolean} props.open - Open status of the Overlay
+ * @param {Function} props.onClose - Callback function when Overlay is closed
+ * @returns {JSX.Element|null} The Overlay component
+ */
+const Overlay = ({ open, onClose }) => {
+    react.useEffect(() => {
+        if (!onClose) {
+            return;
+        }
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                onClose();
+            }
+        };
+        if (open) {
+            window.addEventListener("keyup", handleEscape);
+        }
+        return () => {
+            window.removeEventListener("keyup", handleEscape);
+        };
+    }, [open, onClose]);
+    const handleClick = () => {
+        if (onClose) {
+            onClose();
+        }
+    };
+    return (jsxRuntime.jsx("div", { "aria-hidden": open, className: cvaOverlayContainer({ open }), "data-testid": "drawer-overlay", onClick: handleClick }));
+};
+const cvaOverlayContainer = cssClassVarianceUtilities.cvaMerge([
+    "absolute",
+    "flex",
+    "items-center",
+    "justify-center",
+    "inset-0",
+    "bg-black/30",
+    "bg-opacity-50",
+    "transition-opacity",
+    "duration-200",
+    "ease-[cubic-bezier(0.32,0.72,0,1)]",
+    "opacity-0",
+], {
+    variants: {
+        open: {
+            true: "z-popover opacity-100",
+            false: "z-[-1] opacity-0",
+        },
+    },
+});
+
+const cvaDrawer = cssClassVarianceUtilities.cvaMerge([
+    "z-toast",
+    "pointer-events-auto",
+    "absolute",
+    "transform",
+    "flex-col",
+    "transition-transform",
+    "duration-300",
+    "ease-[cubic-bezier(0.32,0.72,0,1)]",
+], {
+    variants: {
+        position: {
+            left: "left-0 top-0 h-full w-fit",
+            right: "right-0 top-0 h-full w-fit",
+            top: "left-0 top-0 h-fit w-full pb-2",
+            bottom: "bottom-0 left-0 right-0 max-h-screen w-full pt-3",
+        },
+        mode: {
+            open: "", // No additional classes needed; position determines translation
+            closed: "", // Translation handled in compoundVariants
+        },
+    },
+    compoundVariants: [
+        {
+            mode: "open",
+            position: "left",
+            className: "translate-x-0",
+        },
+        {
+            mode: "closed",
+            position: "left",
+            className: "-translate-x-full",
+        },
+        {
+            mode: "open",
+            position: "right",
+            className: "translate-x-0",
+        },
+        {
+            mode: "closed",
+            position: "right",
+            className: "translate-x-full",
+        },
+        {
+            mode: "open",
+            position: "top",
+            className: "translate-y-0",
+        },
+        {
+            mode: "closed",
+            position: "top",
+            className: "-translate-y-full",
+        },
+        {
+            mode: "open",
+            position: "bottom",
+            className: "translate-y-0",
+        },
+        {
+            mode: "closed",
+            position: "bottom",
+            className: "translate-y-full",
+        },
+    ],
+    defaultVariants: {
+        position: "left",
+        mode: "closed",
+    },
+});
+const cvaDrawerContent = cssClassVarianceUtilities.cvaMerge(["flex", "h-full", "shadow-lg", "bg-white"], {
+    variants: {
+        position: {
+            left: " rounded-r-lg",
+            right: " rounded-l-lg",
+            top: " flex-col rounded-b-lg",
+            bottom: " max-h-[calc(100vh-10px)] flex-col rounded-t-lg sm:max-h-none",
+        },
+    },
+});
+
+const TRANSITION_DURATION = 100;
+const DEFAULT_POSITION = "left";
+const NOOP$1 = () => void 0;
+/**
+ * Drawers components can be switched between open and closed states.
+ * They start closed but can be temporarily opened, appearing on top of other content until the user chooses a section.
+ * To close the drawer, users can either click outside of it or press the Esc key.
+ *
+ * @param {DrawerProps} props - The props for the Drawer component
+ * @returns {JSX.Element | null} Drawer component
+ */
+const Drawer = react.forwardRef(({ open = false, // Default to closed
+onClose = NOOP$1, hasOverlay = true, position = DEFAULT_POSITION, children, dataTestId, className, renderInPortal = false, keepMountedWhenClosed = false, containerClassName, ...others }, ref) => {
+    const { isSm } = reactComponents.useViewportSize();
+    const { Portal } = usePortal();
+    const shouldUsePortal = !isSm || renderInPortal;
+    const [shouldRender, setShouldRender] = react.useState(open);
+    const [mode, setMode] = react.useState(open ? "open" : "closed");
+    react.useEffect(() => {
+        if (open) {
+            setShouldRender(true);
+            setTimeout(() => setMode("open"), TRANSITION_DURATION);
+        }
+        else {
+            setMode("closed");
+        }
+    }, [open]);
+    const handleAnimationEnd = react.useCallback(() => {
+        if (mode === "closed") {
+            setShouldRender(false);
+        }
+    }, [mode, setShouldRender]);
+    if (!shouldRender && !keepMountedWhenClosed) {
+        return null;
+    }
+    const content = (jsxRuntime.jsxs("div", { className: containerClassName, children: [hasOverlay ? jsxRuntime.jsx(Overlay, { onClose: onClose, open: mode === "open" }) : null, jsxRuntime.jsx("div", { className: cvaDrawer({
+                    mode,
+                    position: position,
+                    className,
+                }), "data-testid": dataTestId, onTransitionEnd: handleAnimationEnd, ref: ref, ...others, children: jsxRuntime.jsx("div", { className: cvaDrawerContent({ position }), children: children }) })] }));
+    return shouldUsePortal ? jsxRuntime.jsx(Portal, { children: content }) : content;
+});
+Drawer.displayName = "Drawer";
+
+const NOOP = () => void 0;
+const getIconName = (open, position) => {
+    switch (position) {
+        case "left":
+            return open ? "ChevronLeft" : "ChevronRight";
+        case "right":
+            return open ? "ChevronRight" : "ChevronLeft";
+        case "top":
+            return open ? "ChevronUp" : "ChevronDown";
+        case "bottom":
+            return open ? "ChevronDown" : "ChevronUp";
+        default:
+            return open ? "ChevronLeft" : "ChevronRight";
+    }
+};
+/**
+ * DrawerToggle is a React functional component that returns a button with a chevron icon.
+ * The direction of the chevron changes depending on the state of the 'open' prop and
+ * the side the button is positioned ('position' prop).
+ * The button might be disabled based on the 'disableButton' prop.
+ *
+ * @param {object} props - The properties passed to the component
+ * @param {boolean} props.open - Indicates if the button is in "open" state
+ * @param {Function} [props.onClick] - Optional callback function for when the button is clicked
+ * @param {DrawerPosition} props.position - The position of the button relative to its container
+ */
+const DrawerToggle = ({ open, position, onClick = NOOP }) => {
+    const name = getIconName(open, position);
+    return (jsxRuntime.jsx("div", { className: cvaToggleContainer({ position }), children: jsxRuntime.jsx("button", { className: cvaDrawerToggle({ position }), "data-testid": "toggle-button", onClick: onClick, children: jsxRuntime.jsx(reactComponents.Icon, { name: name }) }) }));
+};
+const cvaDrawerToggle = cssClassVarianceUtilities.cvaMerge([
+    "flex",
+    "cursor-pointer",
+    "items-center",
+    "justify-center",
+    "border-gray-300",
+    "bg-neutral-50",
+    "bg-center",
+    "bg-no-repeat",
+    "shadow-md",
+], {
+    variants: {
+        position: {
+            left: "h-12 w-6 rounded-r-lg",
+            right: "h-12 w-6 rounded-l-lg",
+            top: "h-6 w-12 rounded-b-lg",
+            bottom: "h-6 w-12 rounded-t-lg",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+});
+const cvaToggleContainer = cssClassVarianceUtilities.cvaMerge(["z-8", "absolute"], {
+    variants: {
+        position: {
+            left: "right-[-24px] top-[calc(50%-24px)]",
+            right: "left-[-24px] top-[calc(50%-24px)]",
+            top: "bottom-[-24px] left-[calc(50%-24px)]",
+            bottom: "left-[calc(50%-24px)] top-[-24px]",
+        },
+    },
+    defaultVariants: {
+        position: "left",
+    },
+});
+
+/**
+ * Retrieves the Y-axis translation value of a given HTML element.
+ *
+ * @param element - The HTML element for which to get the Y translation. If not provided or null, returns 0.
+ * @returns {number} - The Y translation value of the element. Returns 0 if the element is not provided or if the transform style is "none".
+ */
+const getElementYTranslation = (element) => {
+    if (!element) {
+        return 0;
+    }
+    const style = window.getComputedStyle(element);
+    const transform = style.transform;
+    if (transform === "none") {
+        return 0;
+    }
+    const matrix = new DOMMatrix(transform);
+    return matrix.m42;
+};
+/**
+ * Hook for handling swipe events on the drawer.
+ */
+const useSwipeHandlers = ({ ref, closingThreshold, onCloseGesture, onOpenGesture }) => {
+    const [isDragging, setIsDragging] = react.useState(false);
+    const [dragDistance, setDragDistance] = react.useState(0);
+    const currentY = react.useRef(0);
+    const currentHeight = react.useRef(0);
+    const geometry = reactComponents.useGeometry(ref);
+    const handlers = reactSwipeable.useSwipeable({
+        onTouchStartOrOnMouseDown: () => {
+            const y = getElementYTranslation(ref.current);
+            const height = geometry.height;
+            currentY.current = y;
+            currentHeight.current = height;
+            setDragDistance(y);
+            setIsDragging(true);
+        },
+        onSwiping: (e) => {
+            const newY = currentY.current + e.deltaY;
+            if (newY >= 0) {
+                setDragDistance(newY);
+            }
+        },
+        onSwipedDown: (e) => {
+            const threshold = currentHeight.current * closingThreshold;
+            if (e.absY > threshold && onCloseGesture) {
+                onCloseGesture();
+            }
+            setIsDragging(false);
+            setDragDistance(0);
+        },
+        onSwipedUp: (e) => {
+            const threshold = currentHeight.current * closingThreshold;
+            if (e.absY > threshold && onOpenGesture) {
+                onOpenGesture();
+            }
+            setIsDragging(false);
+            setDragDistance(0);
+        },
+        onSwiped: () => void 0,
+        trackMouse: true,
+        trackTouch: true,
+        preventScrollOnSwipe: true,
+    });
+    return { handlers, isDragging, dragDistance };
+};
+
+/**
+ * DrawerPuller is a React component that renders a puller element for a swipeable drawer.
+ *
+ * @param {CommonProps} props - The props for the DrawerPuller component.
+ * @param {string} [props.className] - Additional class names to apply to the puller element.
+ * @param {Ref<HTMLDivElement>} ref - The ref to be forwarded to the root div element.
+ * @returns {JSX.Element} The rendered DrawerPuller component.
+ */
+const DrawerPuller = react.forwardRef(({ className, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { className: cvaPuller({ className }), "data-testid": "drawer-puller", ...props, ref: ref, children: jsxRuntime.jsx("div", { className: cvaPullerIcon() }) }));
+});
+DrawerPuller.displayName = "DrawerPuller";
+const cvaPuller = cssClassVarianceUtilities.cvaMerge(["pt-2", "pb-4", "flex", "items-center", "justify-center"]);
+const cvaPullerIcon = cssClassVarianceUtilities.cvaMerge(["block", "h-1", "w-8", "rounded-full", "bg-gray-400"]);
+
+const CLOSING_THRESHOLD = 0.15;
+/**
+ *
+ * SwipeableDrawer is a component that wraps the Drawer component to add swipeable functionality.
+ * It uses swipe handlers to detect swipe gestures for opening and closing the drawer.
+ * The component manages its docked state based on the open prop and keepMountedWhenClosed prop.
+ * It also applies styles dynamically based on whether the drawer is being dragged.
+ */
+const SwipeableDrawer = ({ open, onClose, onOpenGesture, children, keepMountedWhenClosed, className, position = "bottom", ...others }) => {
+    const drawerRefs = react.useRef(null);
+    const [isDocked, setIsDocked] = react.useState(keepMountedWhenClosed && !open);
+    const { handlers, isDragging, dragDistance } = useSwipeHandlers({
+        ref: drawerRefs,
+        closingThreshold: CLOSING_THRESHOLD,
+        onCloseGesture: onClose,
+        onOpenGesture,
+    });
+    const drawerStyle = react.useMemo(() => isDragging
+        ? {
+            transform: `translateY(${dragDistance}px)`,
+            transition: "none",
+        }
+        : {}, [isDragging, dragDistance]);
+    react.useEffect(() => {
+        if (!keepMountedWhenClosed) {
+            return;
+        }
+        if (isDocked && open) {
+            setIsDocked(false);
+        }
+        else if (!isDocked && !open) {
+            setIsDocked(true);
+        }
+    }, [open, isDocked, keepMountedWhenClosed]);
+    react.useEffect(() => {
+        var _a, _b;
+        if (drawerRefs.current) {
+            drawerRefs.current.style.transform = (_a = drawerStyle.transform) !== null && _a !== void 0 ? _a : "";
+            drawerRefs.current.style.transition = (_b = drawerStyle.transition) !== null && _b !== void 0 ? _b : "";
+        }
+    }, [drawerStyle, drawerRefs]);
+    return (jsxRuntime.jsxs(Drawer, { className: cvaSwipeableDrawer({ docked: isDocked, className }), "data-docked": isDocked, keepMountedWhenClosed: keepMountedWhenClosed, onClose: onClose, open: open, position: position, ref: drawerRefs, ...others, children: [jsxRuntime.jsx(DrawerPuller, { ...handlers }), children] }));
+};
+const cvaSwipeableDrawer = cssClassVarianceUtilities.cvaMerge([], {
+    variants: {
+        docked: {
+            true: "translate-y-[calc(100%-30px)]",
+            false: "",
+        },
+    },
+});
+
+/*
+ * ----------------------------
+ * | SETUP TRANSLATIONS START |
+ * ----------------------------
+ * This import and function call is needed to register translations for this library.
+ * Do not remove this if this library has translations.
+ */
+setupLibraryTranslations();
+
+exports.Drawer = Drawer;
+exports.DrawerToggle = DrawerToggle;
+exports.SwipeableDrawer = SwipeableDrawer;
+exports.TRANSITION_DURATION = TRANSITION_DURATION;
+exports.cvaSwipeableDrawer = cvaSwipeableDrawer;

package/index.esm.d.ts

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