@adamjanicki/ui 1.0.9 → 1.1.0

package/components/Badge/Badge.d.ts

@@ -20,7 +20,7 @@ type Props = {
     style?: React.CSSProperties;
     /**
      * [Optional] The corner style of the badge.
-     * @default "pill"
+     * @default "rounded"
      */
     corners?: CornerType;
 };

package/components/Layer/Layer.d.ts

@@ -1,9 +1,5 @@
 import React from "react";
 type Props = {
-    /**
-     * Whether the layer is open or not
-     */
-    open: boolean;
     /**
      * Callback that fires when the user clicks outside the layer
      */
@@ -21,6 +17,11 @@ type Props = {
      * [Optional] Additional styles
      */
     backdropStyle?: React.CSSProperties;
+    /**
+     * [Optional] Whether to disable the escape key to close the layer
+     * @default false
+     */
+    disableEscape?: boolean;
 };
-declare const Modal: ({ open, onClose, children, backdropStyle, backdropClassName, }: Props) => JSX.Element | null;
-export default Modal;
+declare const Layer: ({ onClose, children, backdropStyle, backdropClassName, disableEscape, }: Props) => JSX.Element | null;
+export default Layer;

package/components/Layer/Layer.js

@@ -2,34 +2,34 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
 import { classNames } from "../../utils/util";
-var Modal = function (_a) {
-    var open = _a.open, onClose = _a.onClose, children = _a.children, _b = _a.backdropStyle, backdropStyle = _b === void 0 ? {} : _b, backdropClassName = _a.backdropClassName;
-    var _c = useScrollLock(), lock = _c.lock, unlock = _c.unlock;
-    var focusRef = useFocusTrap(open);
+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 focusRef = useFocusTrap(true);
     useEffect(function () {
         var handleEscape = function (event) {
             if (event.key === "Escape") {
                 onClose();
             }
         };
-        document.addEventListener("keydown", handleEscape);
+        if (!disableEscape)
+            document.addEventListener("keydown", handleEscape);
         return function () {
-            document.removeEventListener("keydown", handleEscape);
+            if (!disableEscape)
+                document.removeEventListener("keydown", handleEscape);
         };
-    }, [onClose]);
+    }, [onClose, disableEscape]);
     useEffect(function () {
-        if (open)
-            lock();
-        else
-            unlock();
-    }, [open, lock, unlock]);
-    return open ? (_jsx("div", { className: classNames("ajui-layer-backdrop", backdropClassName), style: backdropStyle, onClick: onClose, children: React.cloneElement(children, {
+        lock();
+        return unlock;
+    }, [lock, unlock]);
+    return (_jsx("div", { className: classNames("ajui-layer-backdrop", backdropClassName), style: backdropStyle, onClick: onClose, children: React.cloneElement(children, {
             ref: focusRef,
             onClick: function (e) {
                 var _a, _b;
                 e.stopPropagation();
                 (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
             },
-        }) })) : null;
+        }) }));
 };
-export default Modal;
+export default Layer;

package/components/Modal/Modal.js

@@ -4,9 +4,9 @@ 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 (_jsx(Layer, { onClose: onClose, open: open, children: _jsxs("div", { className: classNames("ajui-modal", className), role: "dialog", "aria-modal": "true", style: style, children: [_jsx("div", { 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, { name: "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) }));
+                    }, children: _jsx(IconButton, { name: "close", icon: "\u00D7", onClick: onClose, className: "ajui-modal-close" }) }), children] }) })) : null;
 };
 export default Modal;

package/hooks/useFocusTrap.d.ts

@@ -1,7 +1,7 @@
 /**
  * A hook for trapping focus within an element.
  *
- * @param isActive true if an element is active, false otherwise
+ * @param isActive true if the element is active, false otherwise
  * @returns ref object that must be passed to the element that should be trapped
  */
 declare const useFocusTrap: <T extends HTMLElement>(isActive: boolean) => import("react").MutableRefObject<T | null>;

package/hooks/useFocusTrap.js

@@ -3,7 +3,7 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
 /**
  * A hook for trapping focus within an element.
  *
- * @param isActive true if an element is active, false otherwise
+ * @param isActive true if the element is active, false otherwise
  * @returns ref object that must be passed to the element that should be trapped
  */
 var useFocusTrap = function (isActive) {

package/package.json

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

package/style.css

@@ -49,9 +49,9 @@
   --ajui-info-color: #0d47a1;
   --ajui-info-border: #90caf9;
 
-  --ajui-static-background: #f5f5f5;
-  --ajui-static-color: #424242;
-  --ajui-static-border: #bdbdbd;
+  --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);
   /* Link */
@@ -94,9 +94,9 @@
   --ajui-info-color: #d4f1f5;
   --ajui-info-border: #1d8ea4;
 
-  --ajui-static-background: #333333;
-  --ajui-static-color: #e5e5e5;
-  --ajui-static-border: #595959;
+  --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);
   /* Link */