@adamjanicki/ui-extended 1.1.3 → 1.1.4

package/components/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import Popover from "./Popover";
 import { IconInput } from "@adamjanicki/ui";
-interface Props<T> {
+type Props<T> = {
     /**
      * The value of the input field
      */
@@ -94,6 +94,6 @@ interface Props<T> {
      * @default false
      */
     remainOpenOnSelectOrEnter?: boolean;
-}
+};
 declare const Autocomplete: <T>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default Autocomplete;

package/components/Autocomplete.js

@@ -20,13 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import Popover from "./Popover";
-import ClickOutside from "@adamjanicki/ui/components/ClickOutside";
-import { IconInput } from "@adamjanicki/ui";
+import { Box, ClickOutside, IconInput } from "@adamjanicki/ui";
 import { classNames } from "@adamjanicki/ui/functions";
-var defaultRenderOption = function (option) { return (_jsx("div", { className: "ajui-autocomplete-default-rendering", children: "".concat(option) })); };
+var defaultRenderOption = function (option) { return (_jsx(Box, { className: "aui-pa-m", 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, 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"]);
@@ -66,12 +65,7 @@ var Autocomplete = function (props) {
         if (!remainOpenOnSelectOrEnter)
             closeMenu();
     };
-    var closeMenu = function () {
-        var _a;
-        setOn(undefined);
-        setOpen(false);
-        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-    };
+    var closeMenu = function () { var _a; return (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur(); };
     var openMenu = function () { return setOpen(true); };
     var handleKeys = function (_a) {
         var _b;
@@ -121,7 +115,7 @@ var Autocomplete = function (props) {
         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) {
+    return (_jsx(ClickOutside, { onClickOutside: closeMenu, children: _jsxs(Box, __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);
                             onInputChange(e);
                             if (e.target.value) {
@@ -132,11 +126,14 @@ var Autocomplete = function (props) {
                             else {
                                 focusInput();
                             }
+                        }, onBlur: function () {
+                            setOn(undefined);
+                            setOpen(false);
                         }, onClick: function () {
                             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
+                        }, 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("aui-autocomplete-popover", popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className), children: [_jsx("ul", __assign({}, listProps, { className: classNames("aui-autocomplete-ul aui-pa-m aui-ma-none", listProps.className), children: filteredOptions.length
                                 ? filteredOptions.map(function (option, index) {
                                     var group = groupMap.get(index);
                                     var ref = index === on
@@ -146,11 +143,11 @@ var Autocomplete = function (props) {
                                             : 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"
+                                    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("aui-autocomplete-li", on === index
+                                                    ? "aui-autocomplete-on-option"
                                                     : undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: renderOption(option) }))] }, index));
                                 })
                                 : !freeSolo &&
-                                    (noOptionsNode || defaultRenderOption("No results found")) })), footer && (_jsx("div", { onClick: closeOnFooterClick ? closeMenu : undefined, children: footer }))] }))] })) }));
+                                    (noOptionsNode || defaultRenderOption("No results found")) })), footer && (_jsx(Box, { onClick: closeOnFooterClick ? closeMenu : undefined, children: _jsx(_Fragment, { children: footer }) }))] }))] })) }));
 };
 export default Autocomplete;

package/components/Popover.js

@@ -9,7 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@adamjanicki/ui";
 import { useFloating, autoUpdate, offset, useDismiss, useTransitionStyles, } from "@floating-ui/react";
 var Popover = function (props) {
     var triggerRef = props.triggerRef, open = props.open, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, className = props.className, children = props.children, onClose = props.onClose, _c = props.returnFocusOnEscape, returnFocusOnEscape = _c === void 0 ? false : _c;
@@ -32,9 +33,9 @@ var Popover = function (props) {
         middleware: middleware,
     }), floatingStyles = _d.floatingStyles, context = _d.context, refs = _d.refs;
     var _e = useTransitionStyles(context, {
-        duration: { open: 0, close: 250 }, // default ajui-transition value
+        duration: { open: 0, close: 250 }, // default aui-transition value
     }), isMounted = _e.isMounted, transitionStyles = _e.styles;
     useDismiss(context);
-    return isMounted ? (_jsx("div", { ref: refs.setFloating, style: __assign(__assign(__assign(__assign({}, (style || {})), floatingStyles), transitionStyles), { outline: "none" }), className: className, children: children })) : null;
+    return isMounted ? (_jsx(Box, { ref: refs.setFloating, style: __assign(__assign(__assign({}, (style || {})), floatingStyles), transitionStyles), className: className, children: _jsx(_Fragment, { children: children }) })) : null;
 };
 export default Popover;

package/components/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { type Placement } from "@floating-ui/react";
-type Props = {
+type Props<T extends React.ElementType> = {
     /**
      * Children to render inside the tooltip container.
      */
@@ -9,7 +9,7 @@ type Props = {
      * The element to attach the tooltip to.
      * **IMPORTANT**: This must be able to hold a ref.
      */
-    children: React.ReactElement;
+    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
     /**
      * The placement of the popover relative to the trigger element.
      * @default "bottom"
@@ -38,5 +38,5 @@ type Props = {
      */
     disabled?: boolean;
 };
-declare const Tooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+declare const Tooltip: <T extends React.ElementType>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/components/Tooltip.js

@@ -9,8 +9,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState } from "react";
+import { Box } from "@adamjanicki/ui";
 import { useFloating, useHover, useInteractions, flip, safePolygon, autoUpdate, offset, useTransitionStyles, } from "@floating-ui/react";
 var Tooltip = function (props) {
     var children = props.children, content = props.tooltipContent, _a = props.placement, placement = _a === void 0 ? "bottom" : _a, style = props.style, _b = props.offset, placementOffset = _b === void 0 ? 0 : _b, className = props.className, _c = props.disableFlip, disableFlip = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d;
@@ -31,11 +32,11 @@ var Tooltip = function (props) {
         mouseOnly: true,
     });
     var _g = useTransitionStyles(context, {
-        duration: 250, // default ajui-transition value
+        duration: 250, // default aui-transition value
     }), isMounted = _g.isMounted, transitionStyles = _g.styles;
     var _h = useInteractions([hover]), getReferenceProps = _h.getReferenceProps, getFloatingProps = _h.getFloatingProps;
     if (disabled)
         return children;
-    return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), isMounted && (_jsx("div", __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, (style || {})), floatingStyles), transitionStyles) }, getFloatingProps(), { className: className, children: content })))] }));
+    return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), isMounted && (_jsx(Box, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, style), floatingStyles), transitionStyles) }, getFloatingProps(), { className: className, children: _jsx(_Fragment, { children: content }) })))] }));
 };
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "More advanced UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -14,14 +14,15 @@
     "clean": "./clean.sh",
     "lint": "eslint src --max-warnings=0",
     "build": "npm run clean && npm run lint && tsc; cp src/style.css ./style.css",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "dryrun": "npm publish --dry-run"
   },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@adamjanicki/ui": "^1.5.5",
+    "@adamjanicki/ui": "^1.5.8",
     "@floating-ui/react": "^0.26.17"
   },
   "devDependencies": {

package/style.css

@@ -1,38 +1,38 @@
+:root {
+  --aui-autocomplete-popover-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  --aui-autocomplete-highlighted: #eee;
+}
+
+[data-theme="dark"] {
+  --aui-autocomplete-highlighted: var(--aui-darkest-gray);
+}
+
 @media (hover: hover) {
-  .ajui-autocomplete-on-option,
-  .ajui-autocomplete-option:hover {
-    background-color: #eee;
-  }
-  [data-theme="dark"] .ajui-autocomplete-on-option,
-  [data-theme="dark"] .ajui-autocomplete-option:hover {
-    background-color: var(--ajui-darkest-gray);
+  .aui-autocomplete-on-option,
+  .aui-autocomplete-option:hover {
+    background-color: var(--aui-autocomplete-highlighted);
   }
 }
 
-.ajui-autocomplete-popover {
-  background-color: var(--ajui-default-background);
-  font-size: 1rem;
+.aui-autocomplete-popover {
+  background-color: var(--aui-default-background);
   font-weight: 400;
-  border: 1px solid var(--ajui-default-border);
+  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
+    var(--aui-container-box-shadow);
   overflow: hidden;
-  border-radius: var(--ajui-rounded-radius);
+  border-radius: var(--aui-rounded-radius);
 }
 
-.ajui-autocomplete-ul {
+.aui-autocomplete-ul {
   overflow: scroll;
   max-height: 300px;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
-  margin: 0;
-}
-
-.ajui-autocomplete-default-rendering {
-  padding: 0.5rem 1rem;
+  outline: none;
 }
 
-.ajui-autocomplete-li {
+.aui-autocomplete-li {
   display: flex;
   cursor: pointer;
-  border-radius: var(--ajui-rounded-radius);
+  border-radius: var(--aui-rounded-radius);
 }