@adamjanicki/ui-extended 1.0.0 → 1.0.2

package/components/{Autocomplete/Autocomplete.d.ts → Autocomplete.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import Popover from "../Popover/Popover";
+import Popover from "./Popover";
 import { IconInput } from "@adamjanicki/ui";
 interface Props<T> {
     /**
@@ -84,6 +84,10 @@ interface Props<T> {
      * Footer node to render at the bottom of the popover
      */
     footer?: React.ReactNode;
+    /**
+     * A callback to be called when the user hits the enter key while no option is selected
+     */
+    onUnselectedEnter?: () => void;
 }
 declare const Autocomplete: <T>(props: Props<T>) => JSX.Element;
 export default Autocomplete;

package/components/{Autocomplete/Autocomplete.js → Autocomplete.js}

@@ -22,18 +22,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import Popover from "../Popover/Popover";
+import Popover from "./Popover";
 import ClickOutside from "@adamjanicki/ui/components/ClickOutside";
 import { IconInput } from "@adamjanicki/ui";
 import { classNames } from "@adamjanicki/ui/utils/util";
 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, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps"]);
+    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, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter"]);
+    var inputContainerRef = React.useRef(null);
+    var inputRef = React.useRef(null);
     var onRef = React.useRef(null);
     var nextRef = React.useRef(null);
     var prevRef = React.useRef(null);
     var _k = React.useState(), on = _k[0], setOn = _k[1];
+    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
     var filteredOptions = options.filter(filterOption);
     var groupMap = new Map();
     if (groupBy) {
@@ -82,6 +85,9 @@ var Autocomplete = function (props) {
             if (modulo > 0 && current) {
                 return current.click();
             }
+            else {
+                onUnselectedEnter === null || onUnselectedEnter === void 0 ? void 0 : onUnselectedEnter();
+            }
         }
         if (modulo > 0 && code === "ArrowDown") {
             var newOn = ((on !== undefined ? on : -1) + 1) % modulo;
@@ -104,9 +110,9 @@ var Autocomplete = function (props) {
             }
         }
     };
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
-    var inputContainerRef = React.useRef(null);
-    var inputRef = React.useRef(null);
+    var prev = ((on !== null && on !== void 0 ? on : filteredOptions.length) + filteredOptions.length - 1) %
+        filteredOptions.length;
+    var next = ((on !== null && on !== void 0 ? on : -1) + filteredOptions.length + 1) % filteredOptions.length;
     var popoverOpen = open && (filteredOptions.length > 0 || value.length > 0);
     return (_jsx(ClickOutside, { onClickOutside: closeMenu, children: _jsxs("div", __assign({}, rest, { onKeyUp: function (e) { return handleKeys(e); }, children: [_jsx(IconInput, __assign({}, InputProps, { ref: inputContainerRef, inputProps: __assign(__assign({}, (InputProps.inputProps || {})), { value: value, onChange: function (e) {
                             setOn(undefined);
@@ -120,10 +126,17 @@ var Autocomplete = function (props) {
                             }
                         }, onClick: function () {
                             !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: "ajui-autocomplete-popover", children: [_jsx("ul", __assign({}, listProps, { className: classNames("ajui-autocomplete-ul", listProps.className), children: filteredOptions.length
+                        }, 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);
-                                    return (_jsxs(React.Fragment, { children: [group && ((renderGroup === null || renderGroup === void 0 ? void 0 : renderGroup(group)) || group), _jsx("li", __assign({}, listItemProps, { ref: on === index ? onRef : null, onMouseEnter: function () { return setOn(index); }, className: classNames("ajui-autocomplete-li", on === index
+                                    var ref = index === on
+                                        ? onRef
+                                        : index === prev
+                                            ? prevRef
+                                            : index === next
+                                                ? nextRef
+                                                : undefined;
+                                    return (_jsxs(React.Fragment, { children: [group && ((renderGroup === null || renderGroup === void 0 ? void 0 : renderGroup(group)) || group), _jsx("li", __assign({}, listItemProps, { ref: ref, onMouseEnter: function () { return setOn(index); }, className: classNames("ajui-autocomplete-li", on === index
                                                     ? "ajui-autocomplete-on-option"
                                                     : undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: renderOption(option) }))] }, index));
                                 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "More advanced UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/components/Autocomplete/index.d.ts

@@ -1,2 +0,0 @@
-import Autocomplete from "./Autocomplete";
-export default Autocomplete;

package/components/Autocomplete/index.js

@@ -1,2 +0,0 @@
-import Autocomplete from "./Autocomplete";
-export default Autocomplete;

package/components/Popover/index.d.ts

@@ -1,2 +0,0 @@
-import Popover from "./Popover";
-export default Popover;

package/components/Popover/index.js

@@ -1,2 +0,0 @@
-import Popover from "./Popover";
-export default Popover;

package/components/Tooltip/index.d.ts

@@ -1,2 +0,0 @@
-import Tooltip from "./Tooltip";
-export default Tooltip;

package/components/Tooltip/index.js

@@ -1,2 +0,0 @@
-import Tooltip from "./Tooltip";
-export default Tooltip;

package/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from "./useTheme";

package/hooks/index.js

@@ -1 +0,0 @@
-export * from "./useTheme";

package/hooks/useTheme.d.ts

@@ -1,24 +0,0 @@
-export type Theme = "light" | "dark";
-export type ThemePreference = Theme | "system";
-export type ThemePreferenceStore = {
-    /**
-     * The current theme preference.
-     */
-    preference: ThemePreference;
-    /**
-     * Set the theme preference.
-     *
-     * @param preference the new theme preference
-     */
-    setPreference: (preference: ThemePreference) => void;
-};
-/**
- * A hook for getting and setting the current theme preference.
- */
-export declare const useThemePreference: any;
-/**
- * A hook for getting the current theme
- *
- * @returns The current theme, either "light" or "dark"
- */
-export declare const useTheme: () => Theme;

package/hooks/useTheme.js

@@ -1,27 +0,0 @@
-import { create } from "zustand";
-import { createJSONStorage, persist } from "zustand/middleware";
-import { useMediaQuery } from "@adamjanicki/ui";
-/**
- * A hook for getting and setting the current theme preference.
- */
-export var useThemePreference = create(persist(function (set) { return ({
-    preference: "system",
-    setPreference: function (preference) { return set({ preference: preference }); },
-}); }, {
-    name: "theme-preference-store",
-    storage: createJSONStorage(function () { return localStorage; }),
-}));
-/**
- * A hook for getting the current theme
- *
- * @returns The current theme, either "light" or "dark"
- */
-export var useTheme = function () {
-    var prefersDark = useMediaQuery({ query: "(prefers-color-scheme: dark)" });
-    var preference = useThemePreference().preference;
-    return preference === "system"
-        ? prefersDark
-            ? "dark"
-            : "light"
-        : preference;
-};