@adamjanicki/ui 1.3.0 → 1.3.2

package/components/Animated/Animated.d.ts

@@ -35,7 +35,18 @@ type Props = {
          */
         style?: React.CSSProperties;
     };
-    children: React.ReactNode;
+    /**
+     * Children to render
+     */
+    children: React.ReactNode | React.ReactNode[];
+    /**
+     * [Optional] className to apply to the component always
+     */
+    className?: string;
+    /**
+     * [Optional] Inline styles to apply to the component always
+     */
+    style?: React.CSSProperties;
 };
-declare const Animated: ({ visible, duration, keepMountedOnExit, enter, exit, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Animated: ({ visible, duration, keepMountedOnExit, enter, exit, children, className, style, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Animated;

package/components/Animated/Animated.js

@@ -13,7 +13,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { classNames } from "../../utils/util";
 var Animated = function (_a) {
-    var visible = _a.visible, _b = _a.duration, duration = _b === void 0 ? 250 : _b, _c = _a.keepMountedOnExit, keepMountedOnExit = _c === void 0 ? false : _c, enter = _a.enter, exit = _a.exit, children = _a.children;
+    var visible = _a.visible, _b = _a.duration, duration = _b === void 0 ? 250 : _b, _c = _a.keepMountedOnExit, keepMountedOnExit = _c === void 0 ? false : _c, enter = _a.enter, exit = _a.exit, children = _a.children, className = _a.className, style = _a.style;
     var _d = useState(visible), shouldRender = _d[0], setShouldRender = _d[1];
     var _e = useState(visible ? "entering" : "exiting"), animationState = _e[0], setAnimationState = _e[1];
     useEffect(function () {
@@ -34,6 +34,6 @@ var Animated = function (_a) {
         }
         return function () { return clearTimeout(timeoutId); };
     }, [visible, shouldRender, duration, keepMountedOnExit]);
-    return (_jsx("div", { className: classNames(animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.className : exit === null || exit === void 0 ? void 0 : exit.className), style: __assign(__assign({}, (animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.style : exit === null || exit === void 0 ? void 0 : exit.style)), { transition: "all ".concat(duration, "ms ease-in-out") }), children: shouldRender && children }));
+    return (_jsx("div", { className: classNames(className, animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.className : exit === null || exit === void 0 ? void 0 : exit.className), style: __assign(__assign(__assign({}, style), (animationState === "entering" ? enter === null || enter === void 0 ? void 0 : enter.style : exit === null || exit === void 0 ? void 0 : exit.style)), { transition: "all ".concat(duration, "ms ease-in-out") }), children: shouldRender && children }));
 };
 export default Animated;

package/components/Layer/Layer.js

@@ -29,12 +29,12 @@ var BaseLayer = function (_a) {
                 document.removeEventListener("keydown", handleEscape);
         };
     }, [onClose, disableEscape]);
-    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onMouseDown: onClose, children: React.cloneElement(children, {
             ref: focusRef,
-            onClick: function (e) {
+            onMouseDown: function (e) {
                 var _a, _b;
                 e.stopPropagation();
-                (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                (_b = (_a = children.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
         }) }));
 };

package/hooks/useFocusTrap.js

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 var focusableElementsString = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable]';
 /**
  * A hook for trapping focus within an element.
@@ -8,33 +8,37 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
  */
 var useFocusTrap = function (isActive) {
     var trapRef = useRef(null);
+    var _a = useState(undefined), currentIndex = _a[0], setCurrentIndex = _a[1];
     useEffect(function () {
         if (!isActive || !trapRef.current)
             return;
         var focusableElements = trapRef.current.querySelectorAll(focusableElementsString);
-        var firstFocusableElement = focusableElements[0] || trapRef.current;
-        var lastFocusableElement = focusableElements[focusableElements.length - 1] || trapRef.current;
         var trapFocus = function (event) {
+            var _a;
             if (event.key !== "Tab")
                 return;
+            event.preventDefault();
+            if (focusableElements.length === 0)
+                return;
+            var newIndex = currentIndex;
             if (event.shiftKey) {
                 // Shift + Tab
-                if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
-                }
+                newIndex =
+                    ((currentIndex !== null && currentIndex !== void 0 ? currentIndex : 0) - 1 + focusableElements.length) %
+                        focusableElements.length;
             }
             else {
                 // Tab
-                if (document.activeElement === lastFocusableElement) {
-                    firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
-                }
+                newIndex = ((currentIndex !== null && currentIndex !== void 0 ? currentIndex : -1) + 1) % focusableElements.length;
             }
-            event.preventDefault();
+            (_a = focusableElements[newIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+            setCurrentIndex(newIndex);
         };
-        firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
         document.addEventListener("keydown", trapFocus);
-        return function () { return document.removeEventListener("keydown", trapFocus); };
-    }, [isActive]);
+        return function () {
+            document.removeEventListener("keydown", trapFocus);
+        };
+    }, [isActive, currentIndex]);
     return trapRef;
 };
 export default useFocusTrap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.3.0",
+  "version": "1.3.2",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",