@adamjanicki/ui 1.3.6 → 1.3.8

package/components/Animated/Animated.js

@@ -34,6 +34,6 @@ var Animated = function (_a) {
         }
         return function () { return clearTimeout(timeoutId); };
     }, [visible, shouldRender, duration, keepMountedOnExit]);
-    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 }));
+    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") }), "aria-hidden": !visible, children: shouldRender && children }));
 };
 export default Animated;

package/components/Layer/Layer.js

@@ -54,11 +54,13 @@ var Layer = function (_a) {
     // Lock and unlock on mount and unmount
     useScrollLock();
     useEffect(function () {
-        var _a;
-        var activeEl = document.activeElement;
-        if (!returnFocusOnEscape) {
-            (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
-        }
+        return function () {
+            var _a;
+            var activeEl = document.activeElement;
+            if (!returnFocusOnEscape) {
+                (_a = activeEl === null || activeEl === void 0 ? void 0 : activeEl.blur) === null || _a === void 0 ? void 0 : _a.call(activeEl);
+            }
+        };
     }, [returnFocusOnEscape]);
     return _jsx(BaseLayer, __assign({}, props, { visible: true }));
 };

package/functions/index.d.ts

@@ -1,2 +1,3 @@
 import classNames from "./classNames";
-export { classNames };
+import scrollToId from "./scrollToId";
+export { classNames, scrollToId };

package/functions/index.js

@@ -1,2 +1,3 @@
 import classNames from "./classNames";
-export { classNames };
+import scrollToId from "./scrollToId";
+export { classNames, scrollToId };

package/functions/scrollToId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Scroll to the element with the given id
+ * @param id the id of the element to scroll to
+ * @param behavior behavior of the scroll
+ */
+export default function scrollToId(id: string, behavior?: ScrollBehavior): void;

package/functions/scrollToId.js

@@ -0,0 +1,17 @@
+/**
+ * Scroll to the element with the given id
+ * @param id the id of the element to scroll to
+ * @param behavior behavior of the scroll
+ */
+export default function scrollToId(id, behavior) {
+    try {
+        // catch cases where hash is not a valid id
+        var element = document.getElementById(id);
+        if (element) {
+            element.scrollIntoView({ behavior: behavior });
+        }
+    }
+    catch (_a) {
+        // do nothing
+    }
+}

package/hooks/useScrollToHash.d.ts

@@ -1,6 +1,15 @@
+type UseScrollToHashConfig = {
+    /**
+     * Whether or not to scroll to the hash
+     */
+    active: boolean;
+    /**
+     * The scroll behavior to use
+     */
+    behavior?: ScrollBehavior;
+};
 /**
  * A hook for scrolling to a hash on the page.
- * @returns a function that scrolls to the hash on the page
  */
-declare const useScrollToHash: () => (behavior?: ScrollBehavior) => void;
+declare const useScrollToHash: ({ active, behavior, }: UseScrollToHashConfig) => void;
 export default useScrollToHash;

package/hooks/useScrollToHash.js

@@ -1,22 +1,18 @@
-import { useCallback } from "react";
+import { useEffect } from "react";
+import scrollToId from "../functions/scrollToId";
 /**
  * A hook for scrolling to a hash on the page.
- * @returns a function that scrolls to the hash on the page
  */
-var useScrollToHash = function () {
-    return useCallback(
-    /**
-     * Scrolls to the hash on the page.
-     * @param behavior the behavior of the scroll
-     */
-    function (behavior) {
+var useScrollToHash = function (_a) {
+    var active = _a.active, _b = _a.behavior, behavior = _b === void 0 ? "smooth" : _b;
+    useEffect(function () {
+        if (!active)
+            return;
         var hash = window.location.hash;
-        if (hash) {
-            var element = document.getElementById(hash.substring(1));
-            if (element) {
-                element.scrollIntoView({ behavior: behavior });
-            }
+        if ((hash === null || hash === void 0 ? void 0 : hash.length) > 1) {
+            var id = hash.substring(1);
+            scrollToId(id, behavior);
         }
-    }, []);
+    }, [active, behavior]);
 };
 export default useScrollToHash;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.3.6",
+  "version": "1.3.8",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -11,7 +11,7 @@
     "url": "git+https://github.com/adamjanicki2/ui.git"
   },
   "scripts": {
-    "build": "tsc; cp src/style.css ./style.css; rm -rf site/src/lib; cp -r src site/src/lib",
+    "build": "tsc; cp src/style.css ./style.css",
     "clean": "./clean.sh",
     "dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
     "test": "jest --config jest.config.js",

package/style.css

@@ -170,11 +170,11 @@ button:not([disabled]):focus-visible {
 
 /* Badge */
 .ajui-badge {
-  padding: 0.125rem 0.375rem;
+  padding: 2px 6px;
   border-style: solid;
   border-width: 1px;
   font-weight: 600;
-  font-size: 0.875rem;
+  font-size: 14px;
   width: fit-content;
 }