@adamjanicki/ui-extended 1.1.1 → 1.1.3

package/README.md

@@ -8,12 +8,6 @@
 npm install @adamjanicki/ui-extended
 ```
 
-## Usage
-
-```ts
-// Add here
-```
-
 ## Importing CSS
 
 Unfortunately, there was no great way to handle CSS. I often hate how large libraries make it extremely difficult to override CSS without using `!important`, or using inline styles. So, I've decided to just import the CSS directly into your project. Here's an example of how to do it:

package/components/Autocomplete.d.ts

@@ -60,10 +60,6 @@ interface Props<T> {
      * Allow free text input
      */
     freeSolo?: boolean;
-    /**
-     * Focus on the input field after selecting an option
-     */
-    focusOnSelect?: boolean;
     /**
      * Props for the input field
      */
@@ -93,6 +89,11 @@ interface Props<T> {
      * A callback to be called when the user hits the enter key while no option is selected
      */
     onUnselectedEnter?: () => void;
+    /**
+     * Whether or not to leave the popover open after a selection occurs
+     * @default false
+     */
+    remainOpenOnSelectOrEnter?: boolean;
 }
-declare const Autocomplete: <T>(props: Props<T>) => JSX.Element;
+declare const Autocomplete: <T>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

package/components/Autocomplete.js

@@ -29,7 +29,7 @@ import { classNames } from "@adamjanicki/ui/functions";
 var defaultRenderOption = function (option) { return (_jsx("div", { className: "ajui-autocomplete-default-rendering", children: "".concat(option) })); };
 var Autocomplete = function (props) {
     var _a, _b;
-    var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, _g = props.focusOnSelect, focusOnSelect = _g === void 0 ? true : _g, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _h = props.listItemProps, listItemProps = _h === void 0 ? {} : _h, _j = props.listProps, listProps = _j === void 0 ? {} : _j, onUnselectedEnter = props.onUnselectedEnter, _k = props.closeOnFooterClick, closeOnFooterClick = _k === void 0 ? true : _k, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter", "closeOnFooterClick"]);
+    var options = props.options, _c = props.renderOption, renderOption = _c === void 0 ? defaultRenderOption : _c, _d = props.filterOption, filterOption = _d === void 0 ? function () { return true; } : _d, groupBy = props.groupBy, renderGroup = props.renderGroup, noOptionsNode = props.noOptionsNode, _e = props.InputProps, InputProps = _e === void 0 ? {} : _e, _f = props.freeSolo, freeSolo = _f === void 0 ? false : _f, value = props.value, onInputChange = props.onInputChange, onSelect = props.onSelect, popoverProps = props.popoverProps, footer = props.footer, _g = props.listItemProps, listItemProps = _g === void 0 ? {} : _g, _h = props.listProps, listProps = _h === void 0 ? {} : _h, onUnselectedEnter = props.onUnselectedEnter, _j = props.closeOnFooterClick, closeOnFooterClick = _j === void 0 ? true : _j, _k = props.remainOpenOnSelectOrEnter, remainOpenOnSelectOrEnter = _k === void 0 ? false : _k, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter", "closeOnFooterClick", "remainOpenOnSelectOrEnter"]);
     var inputContainerRef = React.useRef(null);
     var inputRef = React.useRef(null);
     var onRef = React.useRef(null);
@@ -60,22 +60,21 @@ var Autocomplete = function (props) {
     if (freeSolo && value.length > 0 && filteredOptions.length === 0) {
         filteredOptions.push(value);
     }
+    var focusInput = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); };
     var handleChange = function (v) {
         onSelect(v);
-        var current = inputRef.current;
-        closeMenu();
-        if (!focusOnSelect)
-            return current === null || current === void 0 ? void 0 : current.focus();
+        if (!remainOpenOnSelectOrEnter)
+            closeMenu();
     };
     var closeMenu = function () {
+        var _a;
         setOn(undefined);
         setOpen(false);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     };
-    var openMenu = function () {
-        setOpen(true);
-    };
+    var openMenu = function () { return setOpen(true); };
     var handleKeys = function (_a) {
-        var _b, _c, _d;
+        var _b;
         var code = _a.code;
         if (code === "Escape") {
             closeMenu();
@@ -90,14 +89,11 @@ var Autocomplete = function (props) {
                 if (child && child.nodeName === "A")
                     (_b = child.click) === null || _b === void 0 ? void 0 : _b.call(child);
                 current.click();
-                if (!focusOnSelect)
-                    return (_c = inputRef.current) === null || _c === void 0 ? void 0 : _c.blur();
             }
             else if (onUnselectedEnter) {
                 onUnselectedEnter();
-                closeMenu();
-                if (!focusOnSelect)
-                    return (_d = inputRef.current) === null || _d === void 0 ? void 0 : _d.blur();
+                if (!remainOpenOnSelectOrEnter)
+                    closeMenu();
             }
         }
         if (modulo > 0 && code === "ArrowDown") {
@@ -129,14 +125,17 @@ var Autocomplete = function (props) {
                             setOn(undefined);
                             onInputChange(e);
                             if (e.target.value) {
-                                !open && openMenu();
+                                if (!open) {
+                                    openMenu();
+                                }
                             }
                             else {
-                                var current = inputRef.current;
-                                current && current.focus();
+                                focusInput();
                             }
                         }, onClick: function () {
-                            !open && openMenu();
+                            if (!open) {
+                                openMenu();
+                            }
                         }, ref: inputRef, autoComplete: "off" }) })), _jsxs(Popover, __assign({}, popoverProps, { open: popoverOpen, triggerRef: inputContainerRef, style: __assign(__assign({ zIndex: 100 }, ((popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.style) || {})), { padding: 0, margin: 0, width: (_b = (_a = inputContainerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) !== null && _b !== void 0 ? _b : 0 }), className: classNames("ajui-autocomplete-popover", popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className), children: [_jsx("ul", __assign({}, listProps, { className: classNames("ajui-autocomplete-ul", listProps.className), children: filteredOptions.length
                                 ? filteredOptions.map(function (option, index) {
                                     var group = groupMap.get(index);

package/components/Popover.d.ts

@@ -8,7 +8,7 @@ type Props = {
     /**
      * The trigger ref for the element to position the popover over.
      */
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerRef: React.RefObject<HTMLElement | null>;
     /**
      * Whether the popover is open.
      */
@@ -42,5 +42,5 @@ type Props = {
      */
     returnFocusOnEscape?: boolean;
 };
-declare const Popover: (props: Props) => JSX.Element | null;
+declare const Popover: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
 export default Popover;

package/components/Tooltip.d.ts

@@ -38,5 +38,5 @@ type Props = {
      */
     disabled?: boolean;
 };
-declare const Tooltip: (props: Props) => JSX.Element;
+declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "More advanced UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -11,34 +11,22 @@
     "url": "git+https://github.com/adamjanicki2/ui-extended.git"
   },
   "scripts": {
-    "build": "tsc; cp src/style.css ./style.css",
     "clean": "./clean.sh",
-    "dev": "nodemon --watch src --ext ts,tsx,css --exec \"npm run build\"",
-    "lint": "eslint --ext .ts,.tsx src",
-    "prepare": "npm run lint; npm run build"
+    "lint": "eslint src --max-warnings=0",
+    "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
+    "prepare": "npm run build"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@adamjanicki/ui": ">=1.3.6",
-    "@floating-ui/react": ">=0.26.17"
+    "@adamjanicki/ui": "^1.5.5",
+    "@floating-ui/react": "^0.26.17"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^6.11.0",
-    "@typescript-eslint/parser": "^6.11.0",
-    "eslint": "^8.53.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "nodemon": "^3.1.4",
-    "typescript": "^5.2.2"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "typescript": "^5.9.2"
   }
 }

package/style.css

@@ -1,7 +1,7 @@
 @media (hover: hover) {
   .ajui-autocomplete-on-option,
   .ajui-autocomplete-option:hover {
-    background-color: var(--ajui-light-gray);
+    background-color: #eee;
   }
   [data-theme="dark"] .ajui-autocomplete-on-option,
   [data-theme="dark"] .ajui-autocomplete-option:hover {