@adamjanicki/ui 1.3.3 → 1.3.5

package/components/Alert/Alert.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentType, CornerType } from "../../utils/types";
+import { ContentType, CornerType } from "../../types";
 type Props = {
     /**
      * The type of alert to display.

package/components/Alert/Alert.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var Alert = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
     return (_jsx("div", __assign({ className: classNames("ajui-alert content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));

package/components/Animated/Animated.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 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, className = _a.className, style = _a.style;
     var _d = useState(visible), shouldRender = _d[0], setShouldRender = _d[1];

package/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentType, CornerType } from "../../utils/types";
+import { ContentType, CornerType } from "../../types";
 type Props = {
     /**
      * The type of badge to display.

package/components/Badge/Badge.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var Badge = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, rest = __rest(_a, ["type", "className", "corners"]);
     return (_jsx("div", __assign({ className: classNames("ajui-badge content--".concat(type, " corners--").concat(corners), className), ref: ref }, rest)));

package/components/Banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { ContentType } from "../../utils/types";
+import { ContentType } from "../../types";
 type Props = {
     /**
      * The type of badge to display.

package/components/Banner/Banner.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var Banner = React.forwardRef(function (_a, ref) {
     var type = _a.type, className = _a.className, rest = __rest(_a, ["type", "className"]);
     return (_jsx("div", __assign({ className: classNames("content--".concat(type, " ajui-banner"), className), ref: ref }, rest)));

package/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { CustomLinkElement } from "../Link/Link";
-import { CornerType } from "../../utils/types";
+import { CornerType } from "../../types";
 type DefaultButtonProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
     /**
      * [Optional] This can be used as a link if the `to` prop is provided

package/components/Button/Button.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { UnstyledLink } from "../Link/Link";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 export var UnstyledButton = forwardRef(function (_a, ref) {
     var to = _a.to, LinkElement = _a.LinkElement, className = _a.className, props = __rest(_a, ["to", "LinkElement", "className"]);
     className = classNames("ajui-button-base", className);

package/components/Input/IconInput.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { InputProps } from "./Input";
-import { CornerType } from "../../utils/types";
+import { CornerType } from "../../types";
 type IconInputProps = {
     /**
      * [Optional] Icon to display at the start of the input

package/components/Input/IconInput.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var IconInput = forwardRef(function (_a, ref) {
     var startIcon = _a.startIcon, endIcon = _a.endIcon, className = _a.className, style = _a.style, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, inputProps = _a.inputProps;
     return (_jsxs("div", { className: classNames("ajui-input-default ajui-icon-input corners--".concat(corners), className), style: style, ref: ref, children: [startIcon || null, _jsx("input", __assign({}, inputProps, { className: classNames("ajui-input-base corners--".concat(corners), inputProps === null || inputProps === void 0 ? void 0 : inputProps.className) })), endIcon || null] }));

package/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../utils/types";
+import { CornerType } from "../../types";
 type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
     /**
      * Type of corners on the input

package/components/Input/Input.js

@@ -22,7 +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";
+import classNames from "../../functions/classNames";
 var Input = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.corners, corners = _b === void 0 ? "rounded" : _b, props = __rest(_a, ["className", "corners"]);
     return (_jsx("input", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className) })));

package/components/Input/TextArea.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../utils/types";
+import { CornerType } from "../../types";
 type TextAreaProps = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
     /**
      * Type of corners on the text area

package/components/Input/TextArea.js

@@ -22,7 +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";
+import classNames from "../../functions/classNames";
 var TextArea = forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.corners, corners = _c === void 0 ? "rounded" : _c, props = __rest(_a, ["className", "rows", "corners"]);
     return (_jsx("textarea", __assign({}, props, { ref: ref, className: classNames("ajui-input-base ajui-input-default corners--".concat(corners), className), rows: rows })));

package/components/Layer/Layer.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { useFocusTrap, useScrollLock } from "../../hooks";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var BaseLayer = function (_a) {
     var onClose = _a.onClose, children = _a.children, style = _a.style, className = _a.className, _b = _a.disableEscape, disableEscape = _b === void 0 ? false : _b, visible = _a.visible;
     var focusRef = useFocusTrap(visible);

package/components/Link/Link.js

@@ -22,7 +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";
+import classNames from "../../functions/classNames";
 var DefaultLinkElement = forwardRef(function (_a, ref) {
     var to = _a.to, props = __rest(_a, ["to"]);
     return _jsx("a", __assign({}, props, { href: to, ref: ref }));

package/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { CornerType } from "../../utils/types";
+import { CornerType } from "../../types";
 type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "aria-label"> & {
     /**
      * Array of options to display in the select

package/components/Select/Select.js

@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var identity = function (x) { return x; };
 var Select = function (_a, ref) {
     var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, style = _a.style, innerStyle = _a.innerStyle, innerClassName = _a.innerClassName, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "innerStyle", "innerClassName", "disabled"]);

package/components/Spinner/Spinner.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utils/util";
+import classNames from "../../functions/classNames";
 var Spinner = function (_a) {
     var className = _a.className, props = __rest(_a, ["className"]);
     return (

package/functions/classNames.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Reduce a list of classnames into one string
+ *
+ * @param classNames list of class names to concatenate
+ * @returns single aggregated string of classnames
+ */
+export default function classNames(...classNames: Array<string | null | undefined>): string;

package/{utils/util.js → functions/classNames.js}

@@ -2,9 +2,9 @@
  * Reduce a list of classnames into one string
  *
  * @param classNames list of class names to concatenate
- * @returns concatenated class names
+ * @returns single aggregated string of classnames
  */
-export function classNames() {
+export default function classNames() {
     var classNames = [];
     for (var _i = 0; _i < arguments.length; _i++) {
         classNames[_i] = arguments[_i];

package/functions/index.d.ts

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

package/functions/index.js

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

package/hooks/useFocusTrap.js

@@ -1,5 +1,5 @@
-import { useEffect, useRef } 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]';
+import { useEffect, useRef, useCallback } from "react";
+var selector = '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.
  *
@@ -10,42 +10,48 @@ var focusableElementsString = 'a[href], area[href], input:not([disabled]), selec
 var useFocusTrap = function (isActive) {
     if (isActive === void 0) { isActive = true; }
     var trapRef = useRef(null);
+    var focusableElements = useRef(null);
+    var updateFocusableElements = useCallback(function () {
+        if (trapRef.current) {
+            focusableElements.current = trapRef.current.querySelectorAll(selector);
+        }
+    }, []);
     useEffect(function () {
         if (!isActive || !trapRef.current)
             return;
-        var focusableElements = trapRef.current.querySelectorAll(focusableElementsString);
-        var trapFocus = function (event) {
+        updateFocusableElements();
+        var handleKeyDown = function (event) {
             var _a;
             if (event.key !== "Tab")
                 return;
-            if (focusableElements.length === 0)
+            if (!focusableElements.current ||
+                focusableElements.current.length === 0) {
                 return event.preventDefault();
-            var activeEl = document.activeElement;
-            var firstEl = focusableElements[0];
-            var lastEl = focusableElements[focusableElements.length - 1];
-            var focusFirst = function () {
-                firstEl.focus();
-                event.preventDefault();
-            };
-            var focusLast = function () {
+            }
+            var activeElement = document.activeElement;
+            var firstEl = focusableElements.current[0];
+            var lastEl = focusableElements.current[focusableElements.current.length - 1];
+            if (event.shiftKey && activeElement === firstEl) {
                 lastEl.focus();
                 event.preventDefault();
-            };
-            if (activeEl === firstEl && event.shiftKey) {
-                focusLast();
             }
-            else if (activeEl === lastEl && !event.shiftKey) {
-                focusFirst();
+            else if (!event.shiftKey && activeElement === lastEl) {
+                firstEl.focus();
+                event.preventDefault();
             }
-            else if (!activeEl || !((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeEl))) {
-                event.shiftKey ? focusLast() : focusFirst();
+            else if (!((_a = trapRef.current) === null || _a === void 0 ? void 0 : _a.contains(activeElement))) {
+                (event.shiftKey ? lastEl : firstEl).focus();
+                event.preventDefault();
             }
         };
-        document.addEventListener("keydown", trapFocus);
+        var observer = new MutationObserver(updateFocusableElements);
+        observer.observe(trapRef.current, { childList: true, subtree: true });
+        document.addEventListener("keydown", handleKeyDown);
         return function () {
-            document.removeEventListener("keydown", trapFocus);
+            document.removeEventListener("keydown", handleKeyDown);
+            observer.disconnect();
         };
-    }, [isActive]);
+    }, [isActive, updateFocusableElements]);
     return trapRef;
 };
 export default useFocusTrap;

package/package.json

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

package/style.css

@@ -302,7 +302,7 @@ a {
 
 .ajui-select-disabled {
   opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed;
+  cursor: not-allowed !important;
 }
 
 .ajui-select-base {
@@ -310,6 +310,7 @@ a {
   color: inherit;
   outline: 0px solid transparent;
   border: none;
+  cursor: pointer;
   background-color: inherit;
   padding: 0.75rem 1.75rem 0.75rem 0.5rem;
   font-size: 1rem;

package/utils/util.d.ts

@@ -1,7 +0,0 @@
-/**
- * Reduce a list of classnames into one string
- *
- * @param classNames list of class names to concatenate
- * @returns concatenated class names
- */
-export declare function classNames(...classNames: (string | undefined)[]): string;