@adamjanicki/ui 1.2.1 → 1.2.3

package/components/Layer/Layer.d.ts

@@ -3,7 +3,7 @@ type Props = {
     /**
      * Callback that fires when the user clicks outside the layer
      */
-    onClose: () => void;
+    onClose?: () => void;
     /**
      * The child of the layer.
      * IMPORTANT: the child must be able to accept a ref
@@ -12,16 +12,16 @@ type Props = {
     /**
      * [Optional] Additional class name
      */
-    backdropClassName?: string;
+    className?: string;
     /**
      * [Optional] Additional styles
      */
-    backdropStyle?: React.CSSProperties;
+    style?: React.CSSProperties;
     /**
      * [Optional] Whether to disable the escape key to close the layer
      * @default false
      */
     disableEscape?: boolean;
 };
-declare const Layer: ({ onClose, children, backdropStyle, backdropClassName, disableEscape, }: Props) => JSX.Element | null;
+declare const Layer: ({ onClose, children, style, className, disableEscape, }: Props) => JSX.Element | null;
 export default Layer;

package/components/Layer/Layer.js

@@ -3,13 +3,13 @@ import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import { classNames } from "../../utils/util";
 var Layer = function (_a) {
-    var onClose = _a.onClose, children = _a.children, _b = _a.backdropStyle, backdropStyle = _b === void 0 ? {} : _b, backdropClassName = _a.backdropClassName, _c = _a.disableEscape, disableEscape = _c === void 0 ? false : _c;
-    var _d = useScrollLock(), lock = _d.lock, unlock = _d.unlock;
+    var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b;
+    var _c = useScrollLock(), lock = _c.lock, unlock = _c.unlock;
     var focusRef = useFocusTrap(true);
     useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === "Escape") {
-                onClose();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
             }
         };
         if (!disableEscape)
@@ -23,7 +23,7 @@ var Layer = function (_a) {
         lock();
         return unlock;
     }, [lock, unlock]);
-    return (_jsx("div", { className: classNames("ajui-layer-backdrop", backdropClassName), style: backdropStyle, onClick: onClose, children: React.cloneElement(children, {
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", className), style: style, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
                 var _a, _b;

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/useFocusTrap.js

@@ -12,33 +12,28 @@ var useFocusTrap = function (isActive) {
         if (!isActive || !trapRef.current)
             return;
         var focusableElements = trapRef.current.querySelectorAll(focusableElementsString);
-        if (!focusableElements.length)
-            return;
-        var firstFocusableElement = focusableElements[0];
-        var lastFocusableElement = focusableElements[focusableElements.length - 1];
+        var firstFocusableElement = focusableElements[0] || trapRef.current;
+        var lastFocusableElement = focusableElements[focusableElements.length - 1] || trapRef.current;
         var trapFocus = function (event) {
             if (event.key !== "Tab")
                 return;
             if (event.shiftKey) {
                 // Shift + Tab
                 if (document.activeElement === firstFocusableElement) {
-                    lastFocusableElement.focus();
-                    event.preventDefault();
+                    lastFocusableElement === null || lastFocusableElement === void 0 ? void 0 : lastFocusableElement.focus();
                 }
             }
             else {
                 // Tab
                 if (document.activeElement === lastFocusableElement) {
-                    firstFocusableElement.focus();
-                    event.preventDefault();
+                    firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
                 }
             }
+            event.preventDefault();
         };
+        firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
         document.addEventListener("keydown", trapFocus);
-        firstFocusableElement.focus();
-        return function () {
-            document.removeEventListener("keydown", trapFocus);
-        };
+        return function () { return document.removeEventListener("keydown", trapFocus); };
     }, [isActive]);
     return trapRef;
 };

package/hooks/useScrollLock.d.ts

@@ -9,7 +9,7 @@ type ScrollLock = {
     unlock: () => void;
 };
 /**
- * Hook to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position.
  * @returns Object with lock and unlock functions to lock and unlock the scroll position
  */
 declare const useScrollLock: () => ScrollLock;

package/hooks/useScrollLock.js

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 /**
- * Hook to lock and unlock the scroll position
+ * Hook to lock and unlock the scroll position.
  * @returns Object with lock and unlock functions to lock and unlock the scroll position
  */
 var useScrollLock = function () {

package/hooks/useWindowResize.d.ts

@@ -0,0 +1,7 @@
+/**
+ * A hook that listens for window resize events.
+ *
+ * @param callback the callback function fired when the window is resized.
+ */
+declare const useWindowResize: (callback: (event?: UIEvent) => void) => void;
+export default useWindowResize;

package/hooks/useWindowResize.js

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+/**
+ * A hook that listens for window resize events.
+ *
+ * @param callback the callback function fired when the window is resized.
+ */
+var useWindowResize = function (callback) {
+    useEffect(function () {
+        window.addEventListener("resize", callback);
+        return function () { return window.removeEventListener("resize", callback); };
+    }, [callback]);
+};
+export default useWindowResize;

package/index.d.ts

@@ -9,7 +9,6 @@ export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
-export { default as Modal } from "./components/Modal";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 export * from "./hooks";

package/index.js

@@ -10,7 +10,6 @@ export { default as Badge } from "./components/Badge";
 export { default as Banner } from "./components/Banner";
 export { default as Select } from "./components/Select";
 export { default as ClickOutside } from "./components/ClickOutside";
-export { default as Modal } from "./components/Modal";
 export { default as Layer } from "./components/Layer";
 export { default as Spinner } from "./components/Spinner";
 // Hooks

package/package.json

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

package/style.css

@@ -52,8 +52,8 @@
   --ajui-static-background: #e8e8e8;
   --ajui-static-color: var(--ajui-default-color);
   --ajui-static-border: var(--ajui-default-border);
-  /* Modal */
-  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.25);
+  /* Layer */
+  --ajui-layer-backdrop-background: rgba(200, 200, 200, 0.6);
   /* Link */
   --ajui-link-color: #0070ff;
 }
@@ -97,8 +97,8 @@
   --ajui-static-background: var(--ajui-darkest-gray);
   --ajui-static-color: var(--ajui-default-color);
   --ajui-static-border: var(--ajui-default-border);
-  /* Modal */
-  --ajui-layer-backdrop-background: rgba(0, 0, 0, 0.4);
+  /* Layer */
+  --ajui-layer-backdrop-background: rgba(40, 40, 40, 0.6);
   /* Link */
   --ajui-link-color: #009ef3;
 }
@@ -332,7 +332,7 @@ a {
   right: calc(var(--size) - 0.25rem);
 }
 
-/* Modal */
+/* Layer */
 .ajui-layer-backdrop {
   position: fixed;
   top: 0;
@@ -346,19 +346,6 @@ a {
   align-items: center;
 }
 
-.ajui-modal {
-  background: var(--ajui-default-background);
-  box-shadow: inset 0 0 0 1px var(--ajui-default-border);
-  border-radius: var(--ajui-rounded-radius);
-  min-width: 50%;
-  max-width: 90%;
-}
-
-.ajui-modal-close {
-  font-size: 1.5rem;
-  padding: 0 0.25rem;
-}
-
 /* Spinner */
 .ajui-spinner {
   animation: ajui-spinner-animation 1s linear infinite;

package/components/Modal/Modal.d.ts

@@ -1,25 +0,0 @@
-import React from "react";
-type Props = {
-    /**
-     * Whether the modal is open or not
-     */
-    open: boolean;
-    /**
-     * Callback that fires when the user clicks the close button or outside the modal
-     */
-    onClose: () => void;
-    /**
-     * The content of the modal
-     */
-    children: React.ReactNode;
-    /**
-     * [Optional] Additional class name
-     */
-    className?: string;
-    /**
-     * [Optional] Additional styles
-     */
-    style?: React.CSSProperties;
-};
-declare const Modal: ({ open, onClose, children, className, style, }: Props) => JSX.Element | null;
-export default Modal;

package/components/Modal/Modal.js

@@ -1,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconButton } from "../Button";
-import { classNames } from "../../utils/util";
-import Layer from "../Layer";
-var Modal = function (_a) {
-    var open = _a.open, onClose = _a.onClose, children = _a.children, className = _a.className, style = _a.style;
-    return open ? (_jsx(Layer, { onClose: onClose, children: _jsxs("div", { className: classNames("ajui-modal", className), role: "dialog", "aria-modal": "true", style: style, children: [_jsx("div", { style: {
-                        display: "flex",
-                        justifyContent: "flex-end",
-                    }, children: _jsx(IconButton, { "aria-label": "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) })) : null;
-};
-export default Modal;

package/components/Modal/index.d.ts

@@ -1,2 +0,0 @@
-import Modal from "./Modal";
-export default Modal;

package/components/Modal/index.js

@@ -1,2 +0,0 @@
-import Modal from "./Modal";
-export default Modal;