@adamjanicki/ui 1.6.3 → 1.6.5

package/components/Accordion/Accordion.d.ts

@@ -25,13 +25,19 @@ type Drawer = {
      * Content hidden within this accordion drawer
      */
     content: React.ReactNode;
-};
-type DrawerProps = {
+    /**
+     * Whether the drawer is open
+     */
     open: boolean;
+    /**
+     * Callback that fires when the open state changes for this drawer
+     */
     onOpenChange: (open: boolean) => void;
+};
+type DrawerProps = {
     item: Drawer;
     duration?: number;
     showDivider: boolean;
 };
-declare const Drawer: ({ item, open, onOpenChange, duration, showDivider, }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+declare const Drawer: ({ item, duration, showDivider }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 export default Accordion;

package/components/Accordion/Accordion.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useState, useRef, useEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import Box from "../Box/Box";
 import Icon from "../Icon";
 import { UnstyledButton } from "../Button";
@@ -29,25 +29,13 @@ import Animated from "../Animated";
 import { classNames } from "../../functions";
 var Accordion = React.forwardRef(function (_a, ref) {
     var drawers = _a.drawers, className = _a.className, duration = _a.duration, hideDividers = _a.hideDividers, layout = _a.layout, rest = __rest(_a, ["drawers", "className", "duration", "hideDividers", "layout"]);
-    var _b = useState(new Set()), openIndices = _b[0], setOpenIndices = _b[1];
-    return (_jsx(Box, __assign({ layout: __assign({ axis: "y" }, layout) }, rest, { className: classNames("aui-accordion aui-corners--rounded", className), ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, open: openIndices.has(i), onOpenChange: function (open) {
-                return setOpenIndices(function (prev) {
-                    var next = new Set(prev);
-                    if (open) {
-                        next.add(i);
-                    }
-                    else {
-                        next.delete(i);
-                    }
-                    return next;
-                });
-            }, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
+    return (_jsx(Box, __assign({ layout: __assign({ axis: "y" }, layout) }, rest, { className: classNames("aui-accordion aui-corners--rounded", className), ref: ref, children: drawers.map(function (item, i) { return (_jsx(Drawer, { item: item, duration: duration, showDivider: !hideDividers && i < drawers.length - 1 }, i)); }) })));
 });
 var Drawer = function (_a) {
-    var item = _a.item, open = _a.open, onOpenChange = _a.onOpenChange, duration = _a.duration, showDivider = _a.showDivider;
+    var item = _a.item, duration = _a.duration, showDivider = _a.showDivider;
     var boxRef = useRef(null);
     var _b = useState(), height = _b[0], setHeight = _b[1];
-    var children = item.content;
+    var children = item.content, open = item.open, onOpenChange = item.onOpenChange;
     useEffect(function () {
         if (open && children && boxRef.current) {
             setHeight(boxRef.current.offsetHeight);
@@ -55,7 +43,7 @@ var Drawer = function (_a) {
     }, [open, children]);
     // TODO: change this to use calc-size when supported
     // https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size#browser_compatibility
-    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, animated: open, animateFrom: {
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { layout: { axis: "y" }, children: [_jsx(UnstyledButton, { onClick: function () { return onOpenChange(!open); }, children: _jsxs(Box, { layout: { axis: "x", align: "center", gap: "s", padding: "m" }, children: [_jsx(Icon, { size: "xs", icon: open ? "chevron-down" : "chevron-right", className: "aui-accordion-arrow" }), _jsx("span", { className: "aui-accordion-label", children: item.label })] }) }), _jsx(Animated, { style: { overflow: "hidden" }, keepMounted: true, duration: duration, visible: open, animateFrom: {
                             style: {
                                 visibility: "hidden",
                                 height: 0,

package/components/Animated/Animated.d.ts

@@ -3,15 +3,24 @@ import type { Style } from "../../utils/types";
 import { type BoxProps } from "../Box/Box";
 type Props = BoxProps & {
     /**
-     * Whether to begin the animation.
+     * Whether to begin the animation and render the component.
      * Set to true to start animation, false to start the exit animation.
      */
-    animated: boolean;
+    visible: boolean;
     /**
      * Duration of the animation in seconds
      * @default 0.25
      */
-    duration?: number;
+    duration?: number | {
+        /**
+         * Length of the forward direction
+         */
+        forward: number;
+        /**
+         * Length of the reverse direction
+         */
+        reverse: number;
+    };
     /**
      * Whether to keep the component mounted when it is not animated
      * @default false
@@ -40,6 +49,11 @@ type Props = BoxProps & {
          */
         style?: Style;
     };
+    /**
+     * The properties to apply a transition
+     * @default ['all']
+     */
+    transitionProperties?: string[];
 };
 declare const Animated: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default Animated;

package/components/Animated/Animated.js

@@ -25,9 +25,12 @@ import React, { useState, useEffect, useRef } from "react";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
 var Animated = React.forwardRef(function (props, ref) {
-    var animated = props.animated, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, animateTo = props.animateTo, animateFrom = props.animateFrom, className = props.className, style = props.style, rest = __rest(props, ["animated", "duration", "keepMounted", "animateTo", "animateFrom", "className", "style"]);
-    var _c = useState(animated || keepMounted), shouldRender = _c[0], setShouldRender = _c[1];
-    var _d = useState(false), isAnimatingForward = _d[0], setIsAnimatingForward = _d[1];
+    var visible = props.visible, _a = props.duration, duration = _a === void 0 ? 0.25 : _a, _b = props.keepMounted, keepMounted = _b === void 0 ? false : _b, _c = props.transitionProperties, transitionProperties = _c === void 0 ? ["all"] : _c, animateTo = props.animateTo, animateFrom = props.animateFrom, className = props.className, style = props.style, rest = __rest(props, ["visible", "duration", "keepMounted", "transitionProperties", "animateTo", "animateFrom", "className", "style"]);
+    var forwardDuration = typeof duration === "number" ? duration : duration.forward;
+    var reverseDuration = typeof duration === "number" ? duration : duration.reverse;
+    var instantForward = forwardDuration <= 0;
+    var instantReverse = reverseDuration <= 0;
+    var _d = useState("from"), phase = _d[0], setPhase = _d[1];
     var timeoutRef = useRef(null);
     var animationFrameRef = useRef(null);
     var clearRefs = function () {
@@ -41,35 +44,51 @@ var Animated = React.forwardRef(function (props, ref) {
         }
     };
     useEffect(function () {
-        // initiate forward animation
-        if (animated && shouldRender) {
-            clearRefs();
-            animationFrameRef.current = requestAnimationFrame(function () {
-                return setIsAnimatingForward(true);
-            });
-        }
-        return clearRefs;
-    }, [animated, shouldRender]);
-    useEffect(function () {
-        // make container element appear on DOM
-        if (animated) {
-            setShouldRender(true);
-        }
-        // initiate reverse animation
-        else {
-            clearRefs();
-            setIsAnimatingForward(false);
-            timeoutRef.current = window.setTimeout(function () {
-                if (!keepMounted) {
-                    setShouldRender(false);
+        clearRefs();
+        if (visible) {
+            if (phase !== "forward") {
+                if (instantForward) {
+                    setPhase("forward");
                 }
-            }, duration * 1000);
+                else {
+                    animationFrameRef.current = requestAnimationFrame(function () {
+                        return setPhase("forward");
+                    });
+                }
+            }
+        }
+        else if (phase !== "from") {
+            if (instantReverse) {
+                setPhase("from");
+            }
+            else if (phase !== "reverse") {
+                setPhase("reverse");
+            }
+            else if (phase === "reverse") {
+                timeoutRef.current = window.setTimeout(function () { return setPhase("from"); }, reverseDuration * 1000);
+            }
         }
         return clearRefs;
-    }, [animated, duration, keepMounted]);
-    if (!shouldRender)
+    }, [visible, phase, instantForward, instantReverse, reverseDuration]);
+    if (phase === "from" && !keepMounted && !visible)
         return null;
-    var currentAnimation = isAnimatingForward ? animateTo : animateFrom;
-    return (_jsx(Box, __assign({ className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: "all ".concat(duration, "s ease-in-out") }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style) }, rest, { ref: ref })));
+    var currentAnimation = phase === "forward" || (visible && instantForward)
+        ? animateTo
+        : animateFrom;
+    var transition = undefined;
+    if (phase === "forward" && !instantForward) {
+        transition = makeTransition(transitionProperties, forwardDuration);
+    }
+    else if (phase === "reverse" && !instantReverse) {
+        transition = makeTransition(transitionProperties, reverseDuration);
+    }
+    return (_jsx(Box, __assign({ className: classNames(className, currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.className), style: __assign(__assign({ transition: transition }, style), currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.style) }, rest, { ref: ref })));
 });
+var makeTransition = function (transitionProperties, duration) {
+    return transitionProperties.length > 0
+        ? transitionProperties
+            .map(function (prop) { return "".concat(prop, " ").concat(duration, "s ease-in-out"); })
+            .join(", ")
+        : undefined;
+};
 export default Animated;

package/components/ClickOutside/ClickOutside.d.ts

@@ -1,4 +1,9 @@
 import React from "react";
+declare const mouseEvents: {
+    readonly click: "onClick";
+    readonly mousedown: "onMouseDown";
+    readonly mouseup: "onMouseUp";
+};
 type Props = {
     /**
      * The children to render.
@@ -11,6 +16,11 @@ type Props = {
      * @param event - The mouse event object
      */
     onClickOutside: (event: MouseEvent) => void;
+    /**
+     * The mouse event to trigger on
+     * @default "click"
+     */
+    mouseEvent?: keyof typeof mouseEvents;
 };
-declare const ClickOutside: ({ children, onClickOutside, }: Props) => React.JSX.Element;
+declare const ClickOutside: ({ children, onClickOutside, mouseEvent, }: Props) => React.JSX.Element;
 export default ClickOutside;

package/components/ClickOutside/ClickOutside.js

@@ -1,6 +1,13 @@
 import { cloneElement, useCallback, useEffect, useRef } from "react";
+import useMergeRefs from "../../hooks/useMergeRefs";
+var mouseEvents = {
+    click: "onClick",
+    mousedown: "onMouseDown",
+    mouseup: "onMouseUp",
+};
 var ClickOutside = function (_a) {
-    var children = _a.children, onClickOutside = _a.onClickOutside;
+    var _b;
+    var children = _a.children, onClickOutside = _a.onClickOutside, _c = _a.mouseEvent, mouseEvent = _c === void 0 ? "click" : _c;
     var ref = useRef(null);
     var clickWithinChildRef = useRef(false);
     var startedRef = useRef(false);
@@ -14,27 +21,35 @@ var ClickOutside = function (_a) {
         };
     }, []);
     var handleClickOutside = useCallback(function (event) {
+        var _a;
         var clickedWithinChild = clickWithinChildRef.current;
         clickWithinChildRef.current = false;
-        if (!startedRef.current || !ref.current || clickedWithinChild)
+        var childElement = ref.current;
+        if (!startedRef.current || !childElement || clickedWithinChild)
             return;
-        if (!event.composedPath().includes(ref.current)) {
+        var path = ((_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)) || [];
+        var isInside = path.includes(childElement) ||
+            childElement.contains(event.target);
+        if (!isInside) {
             onClickOutside(event);
         }
     }, [onClickOutside]);
     useEffect(function () {
-        document.addEventListener("click", handleClickOutside);
-        return function () { return document.removeEventListener("click", handleClickOutside); };
-    }, [handleClickOutside]);
-    return cloneElement(children, {
-        ref: ref,
-        onClick: function (event) {
+        document.addEventListener(mouseEvent, handleClickOutside);
+        return function () { return document.removeEventListener(mouseEvent, handleClickOutside); };
+    }, [handleClickOutside, mouseEvent]);
+    var mergedRef = useMergeRefs(ref, children.props.ref);
+    var mouseEventPropName = mouseEvents[mouseEvent];
+    return cloneElement(children, (_b = {
+            ref: mergedRef
+        },
+        _b[mouseEventPropName] = function (event) {
             var _a, _b;
             // point of this is to let us know that click originated
             // from the child element, so we can ignore it
             clickWithinChildRef.current = true;
-            (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            (_b = (_a = children.props) === null || _a === void 0 ? void 0 : _a[mouseEventPropName]) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         },
-    });
+        _b));
 };
 export default ClickOutside;

package/components/Layer/Layer.js

@@ -25,6 +25,7 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import classNames from "../../functions/classNames";
 import Box from "../Box/Box";
+import useMergeRefs from "../../hooks/useMergeRefs";
 var Layer = React.forwardRef(function (_a, ref) {
     var returnFocusOnEscape = _a.returnFocusOnEscape, disableScrollLock = _a.disableScrollLock, onClose = _a.onClose, children = _a.children, className = _a.className, onMouseDown = _a.onMouseDown, layout = _a.layout, rest = __rest(_a, ["returnFocusOnEscape", "disableScrollLock", "onClose", "children", "className", "onMouseDown", "layout"]);
     var focusRef = useFocusTrap(true);
@@ -46,11 +47,12 @@ var Layer = React.forwardRef(function (_a, ref) {
             document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, returnFocusOnEscape]);
+    var mergedRef = useMergeRefs(focusRef, children.props.ref);
     return (_jsx(Box, __assign({ layout: __assign({ axis: "y", align: "center", justify: "center" }, layout) }, rest, { className: classNames("aui-layer-backdrop", className), onMouseDown: function (e) {
             onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(e);
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }, ref: ref, children: React.cloneElement(children, {
-            ref: focusRef,
+            ref: mergedRef,
             onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();

package/components/Modal/Modal.js

@@ -28,7 +28,7 @@ import Button, { IconButton } from "../Button";
 import Animated from "../Animated";
 var Modal = React.forwardRef(function (_a, ref) {
     var open = _a.open, onClose = _a.onClose, onConfirm = _a.onConfirm, _b = _a.confirmLabel, confirmLabel = _b === void 0 ? "Ok" : _b, _c = _a.cancelLabel, cancelLabel = _c === void 0 ? "Cancel" : _c, returnFocusOnEscape = _a.returnFocusOnEscape, rest = __rest(_a, ["open", "onClose", "onConfirm", "confirmLabel", "cancelLabel", "returnFocusOnEscape"]);
-    return (_jsx(Animated, { className: "aui-modal-backdrop", animated: open, animateTo: { style: { opacity: 1 } }, animateFrom: { style: { opacity: 0 } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, { role: "dialog", "aria-modal": "true", className: "aui-modal aui-corners--rounded", layout: { axis: "y", padding: "m", gap: "m" }, children: [_jsx(Box, { layout: {
+    return (_jsx(Animated, { className: "aui-modal-backdrop", visible: open, animateTo: { style: { opacity: 1 } }, animateFrom: { style: { opacity: 0 } }, children: _jsx(Layer, { onClose: onClose, returnFocusOnEscape: returnFocusOnEscape, children: _jsxs(Box, { role: "dialog", "aria-modal": "true", className: "aui-modal aui-corners--rounded", layout: { axis: "y", padding: "m", gap: "m" }, children: [_jsx(Box, { layout: {
                             axis: "x",
                             align: "center",
                             justify: "end",

package/hooks/index.d.ts

@@ -4,3 +4,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";
+export { default as useMergeRefs } from "./useMergeRefs";

package/hooks/index.js

@@ -4,3 +4,4 @@ export { default as useScroll } from "./useScroll";
 export { default as useFocusTrap } from "./useFocusTrap";
 export { default as useScrollToHash } from "./useScrollToHash";
 export { default as useWindowResize } from "./useWindowResize";
+export { default as useMergeRefs } from "./useMergeRefs";

package/hooks/useMergeRefs.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+/**
+ * Simple hook that merges N refs into one callback
+ *
+ * @param refs all the refs you want to merge
+ * @returns one combined ref
+ */
+declare const useMergeRefs: <T>(...refs: (React.Ref<T> | null | undefined)[]) => React.Ref<T>;
+export default useMergeRefs;

package/hooks/useMergeRefs.js

@@ -0,0 +1,24 @@
+import { useCallback } from "react";
+/**
+ * Simple hook that merges N refs into one callback
+ *
+ * @param refs all the refs you want to merge
+ * @returns one combined ref
+ */
+var useMergeRefs = function () {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    return useCallback(function (node) {
+        refs.forEach(function (ref) {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object") {
+                ref.current = node;
+            }
+        });
+    }, [refs]);
+};
+export default useMergeRefs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.6.3",
+  "version": "1.6.5",
   "description": "Basic UI components and hooks for React in TypeScript",
   "type": "module",
   "main": "./index.js",