@adamjanicki/ui 1.0.3 → 1.0.5

package/components/ClickOutside/ClickOutside.js

@@ -1,37 +1,38 @@
-import { cloneElement, useEffect, useRef } from "react";
+import { cloneElement, useCallback, useEffect, useRef } from "react";
 var ClickOutside = function (_a) {
     var children = _a.children, onClickOutside = _a.onClickOutside;
-    var ref = useRef(null);
+    var ref = useRef();
     var bubbledRef = useRef(false);
     var startedRef = useRef(false);
     useEffect(function () {
-        // Set startedRef after the current synchronous code has executed
-        var timeoutId = setTimeout(function () {
+        setTimeout(function () {
             startedRef.current = true;
         }, 0);
-        var handleClickOutside = function (event) {
-            var bubbledUp = bubbledRef.current;
-            bubbledRef.current = false;
-            if (!startedRef.current || !ref.current || bubbledUp)
-                return;
-            var isOnEventPath = event.composedPath().includes(ref.current);
-            if (!isOnEventPath) {
-                onClickOutside(event);
-            }
-        };
-        document.addEventListener("click", handleClickOutside);
         return function () {
-            clearTimeout(timeoutId);
             startedRef.current = false;
-            document.removeEventListener("click", handleClickOutside);
         };
+    }, []);
+    var handleClickOutside = useCallback(function (event) {
+        var bubbledUp = bubbledRef.current;
+        bubbledRef.current = false;
+        if (!startedRef.current || !ref.current || bubbledUp)
+            return;
+        var isOnEventPath = event.composedPath().includes(ref.current);
+        !isOnEventPath && 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) {
             var _a, _b;
+            // point of this is to let us know that click bubbled up
+            // from the child element, so we can ignore it if it
+            // happens on the element itself
             bubbledRef.current = true;
-            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+            (_b = (_a = children.props).onclick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
         },
     });
 };

package/components/Link/Link.d.ts

@@ -1,9 +1,9 @@
 import React from "react";
-type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href" | "onClick">;
-export type CustomLinkElement = (props: Partial<BuiltinLinkProps & {
+type BuiltinLinkProps = Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "href">;
+export type CustomLinkElement = (props: Partial<BuiltinLinkProps> & {
     to: string;
-}> & {
-    ref?: React.Ref<HTMLAnchorElement>;
+} & {
+    ref?: React.MutableRefObject<HTMLAnchorElement>;
 }) => React.ReactNode;
 type DefaultLinkProps = BuiltinLinkProps & {
     /**
@@ -18,4 +18,5 @@ type DefaultLinkProps = BuiltinLinkProps & {
     LinkElement?: CustomLinkElement;
 };
 export declare const UnstyledLink: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-export {};
+declare const Link: React.ForwardRefExoticComponent<Omit<DefaultLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default Link;

package/components/Link/Link.js

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
+import { classNames } from "../../utils/util";
 var DefaultLinkElement = forwardRef(function (_a, ref) {
     var to = _a.to, props = __rest(_a, ["to"]);
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));
@@ -30,3 +31,8 @@ export var UnstyledLink = forwardRef(function (_a, ref) {
     var _b = _a.LinkElement, LinkElement = _b === void 0 ? DefaultLinkElement : _b, props = __rest(_a, ["LinkElement"]);
     return (_jsx(LinkElement, __assign({}, props, { ref: ref })));
 });
+var Link = forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx(UnstyledLink, __assign({}, props, { className: classNames("ajui-link-default", className), ref: ref })));
+});
+export default Link;

package/components/Link/index.d.ts

@@ -1 +1,3 @@
+import Link from "./Link";
+export default Link;
 export * from "./Link";

package/components/Link/index.js

@@ -1 +1,3 @@
+import Link from "./Link";
+export default Link;
 export * from "./Link";

package/hooks/index.d.ts

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

package/hooks/index.js

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

package/hooks/useScrollToHash.d.ts

@@ -0,0 +1,6 @@
+/**
+ * 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;
+export default useScrollToHash;

package/hooks/useScrollToHash.js

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+/**
+ * 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 hash = window.location.hash;
+        if (hash) {
+            var element = document.getElementById(hash.substring(1));
+            if (element) {
+                element.scrollIntoView({ behavior: behavior });
+            }
+        }
+    }, []);
+};
+export default useScrollToHash;

package/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./components/Button";
 export { default as Button } from "./components/Button";
 export * from "./components/Link";
+export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";

package/index.js

@@ -2,6 +2,7 @@
 export * from "./components/Button";
 export { default as Button } from "./components/Button";
 export * from "./components/Link";
+export { default as Link } from "./components/Link";
 export * from "./components/Input";
 export { default as Input } from "./components/Input";
 export { default as Alert } from "./components/Alert";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -28,24 +28,17 @@
     "@types/jest": "^29.5.8",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "css-loader": "^7.1.2",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-css-modules": "^2.1.0",
     "jest-environment-jsdom": "^29.7.0",
-    "mini-css-extract-plugin": "^2.9.0",
     "nodemon": "^3.1.4",
-    "style-loader": "^4.0.0",
     "ts-jest": "^29.2.2",
-    "ts-loader": "^9.5.1",
-    "typescript": "^5.2.2",
-    "webpack": "^5.93.0",
-    "webpack-cli": "^5.1.4"
+    "typescript": "^5.2.2"
   },
   "eslintConfig": {
     "extends": [

package/style.css

@@ -52,6 +52,8 @@
   --ajui-static-border: #bdbdbd;
   /* Modal */
   --ajui-modal-backdrop-background: rgba(0, 0, 0, 0.5);
+  /* Link */
+  --ajui-link-color: #0070ff;
 }
 
 a:not([disabled]):is(:focus-visible),
@@ -181,9 +183,15 @@ a {
   background-color: var(--ajui-button-secondary-background);
 }
 
+.ajui-link-default {
+  color: var(--ajui-link-color);
+  transition: opacity var(--ajui-default-transition);
+}
+
 @media (hover: hover) {
   .ajui-button--primary:not([disabled]):hover,
-  .ajui-icon-button:not([disabled]):hover {
+  .ajui-icon-button:not([disabled]):hover,
+  .ajui-link-default:hover {
     opacity: var(--ajui-default-opacity-dim);
   }