@adamjanicki/ui-extended 1.1.7 → 1.1.8

package/components/Autocomplete.js

@@ -25,15 +25,13 @@ import React from "react";
 import Popover from "./Popover";
 import { Box, ClickOutside, IconInput } from "@adamjanicki/ui";
 import { classNames } from "@adamjanicki/ui/functions";
-var defaultRenderOption = function (option) { return (_jsx(Box, { className: "aui-pa-m", children: "".concat(option) })); };
+var defaultRenderOption = function (option) { return (_jsx(Box, { layout: { padding: "s" }, 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"]);
     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 _l = React.useState(), on = _l[0], setOn = _l[1];
     var _m = React.useState(false), open = _m[0], setOpen = _m[1];
     var filteredOptions = options.filter(filterOption);
@@ -79,9 +77,12 @@ var Autocomplete = function (props) {
             closeMenu();
         }
         var modulo = filteredOptions.length;
+        if (modulo <= 0) {
+            return;
+        }
         if (code === "Enter") {
             var current = onRef.current;
-            if (modulo > 0 && current) {
+            if (current) {
                 // Horrible heuristic to handle links
                 // It's terrible, but efficient
                 var child = current.firstChild;
@@ -95,30 +96,20 @@ var Autocomplete = function (props) {
                     closeMenu();
             }
         }
-        if (modulo > 0 && code === "ArrowDown") {
-            var newOn = ((on !== undefined ? on : -1) + 1) % modulo;
-            setOn(newOn);
-            if (nextRef.current) {
-                nextRef.current.scrollIntoView({
-                    block: "nearest",
-                    behavior: "smooth",
-                });
-            }
+        if (code === "ArrowDown") {
+            setOn(function (on) { return ((on !== null && on !== void 0 ? on : -1) + 1) % modulo; });
         }
-        else if (modulo > 0 && code === "ArrowUp") {
-            var newOn = ((on !== undefined ? on : 0) - 1 + modulo) % modulo;
-            setOn(newOn);
-            if (prevRef.current) {
-                prevRef.current.scrollIntoView({
-                    block: "nearest",
-                    behavior: "smooth",
-                });
-            }
+        else if (code === "ArrowUp") {
+            setOn(function (on) { return ((on !== null && on !== void 0 ? on : 0) - 1 + modulo) % modulo; });
         }
     };
-    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;
+    React.useEffect(function () {
+        var _a;
+        (_a = onRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+            block: "nearest",
+            behavior: "smooth",
+        });
+    }, [on]);
     var popoverOpen = open && (filteredOptions.length > 0 || value.length > 0);
     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);
@@ -135,21 +126,15 @@ var Autocomplete = function (props) {
                             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("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
+                        }, ref: inputRef, autoComplete: "off" }) })), _jsxs(Popover, __assign({}, popoverProps, { open: popoverOpen, triggerRef: inputContainerRef, layout: { padding: "none", margin: "none" }, style: __assign(__assign({}, popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.style), { 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-s aui-ma-none", listProps.className), children: filteredOptions.length
                                 ? filteredOptions.map(function (option, index) {
                                     var group = groupMap.get(index);
-                                    var ref = index === on
-                                        ? onRef
-                                        : index === prev
-                                            ? prevRef
-                                            : index === next
-                                                ? nextRef
-                                                : undefined;
+                                    var ref = index === on ? onRef : 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("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(Box, { onClick: closeOnFooterClick ? closeMenu : undefined, children: _jsx(_Fragment, { 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.d.ts

@@ -1,10 +1,7 @@
 import React from "react";
+import { BoxProps } from "@adamjanicki/ui/components/Box/Box";
 import { type Placement } from "@floating-ui/react";
-type Props = {
-    /**
-     * Children to render inside the popover.
-     */
-    children: React.ReactNode | React.ReactNode[];
+type Props = BoxProps & {
     /**
      * The trigger ref for the element to position the popover over.
      */
@@ -18,14 +15,6 @@ type Props = {
      * @default "bottom"
      */
     placement?: Placement;
-    /**
-     * Additional styles to apply to the popover container.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Additional classes to apply to the popover container.
-     */
-    className?: string;
     /**
      * The offset of the popover relative to the trigger element.
      * @default 0
@@ -42,5 +31,6 @@ type Props = {
      */
     returnFocusOnEscape?: boolean;
 };
-declare const Popover: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+export declare const UnstyledPopover: (props: Props) => import("react/jsx-runtime").JSX.Element | null;
+declare const Popover: ({ className, layout, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/components/Popover.js

@@ -9,11 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { Box } from "@adamjanicki/ui";
+import Box from "@adamjanicki/ui/components/Box/Box";
 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;
+import { classNames } from "@adamjanicki/ui";
+export var UnstyledPopover = 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, children = props.children, onClose = props.onClose, _c = props.returnFocusOnEscape, returnFocusOnEscape = _c === void 0 ? false : _c, rest = __rest(props, ["triggerRef", "open", "placement", "style", "offset", "children", "onClose", "returnFocusOnEscape"]);
     var handleOnClose = function () {
         var _a, _b;
         if (!returnFocusOnEscape)
@@ -36,6 +48,10 @@ var Popover = function (props) {
         duration: { open: 0, close: 250 }, // default aui-transition value
     }), isMounted = _e.isMounted, transitionStyles = _e.styles;
     useDismiss(context);
-    return isMounted ? (_jsx(Box, { ref: refs.setFloating, style: __assign(__assign(__assign({}, (style || {})), floatingStyles), transitionStyles), className: className, children: _jsx(_Fragment, { children: children }) })) : null;
+    return isMounted ? (_jsx(Box, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), transitionStyles), style) }, rest, { children: _jsx(_Fragment, { children: children }) }))) : null;
+};
+var Popover = function (_a) {
+    var className = _a.className, layout = _a.layout, rest = __rest(_a, ["className", "layout"]);
+    return (_jsx(UnstyledPopover, __assign({ className: classNames("aui-popover", className), layout: __assign({ padding: "s" }, layout) }, rest)));
 };
 export default Popover;

package/components/Tooltip.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
+import { BoxProps } from "@adamjanicki/ui/components/Box/Box";
 import { type Placement } from "@floating-ui/react";
-type Props<T extends React.ElementType> = {
+type Props = Omit<BoxProps, "children" | "onMouseEnter" | "onMouseLeave"> & {
     /**
      * Children to render inside the tooltip container.
      */
@@ -9,20 +10,12 @@ type Props<T extends React.ElementType> = {
      * The element to attach the tooltip to.
      * **IMPORTANT**: This must be able to hold a ref.
      */
-    children: React.ReactElement<React.ComponentPropsWithRef<T>>;
+    children: React.ReactElement<any>;
     /**
      * The placement of the popover relative to the trigger element.
      * @default "bottom"
      */
     placement?: Placement;
-    /**
-     * Additional styles to apply to the tooltip container.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Additional classes to apply to the tooltip container.
-     */
-    className?: string;
     /**
      * The offset of the popover relative to the trigger element.
      * @default 0
@@ -38,5 +31,6 @@ type Props<T extends React.ElementType> = {
      */
     disabled?: boolean;
 };
-declare const Tooltip: <T extends React.ElementType>(props: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const UnstyledTooltip: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ className, layout, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/components/Tooltip.js

@@ -9,12 +9,24 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 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 Box from "@adamjanicki/ui/components/Box/Box";
 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;
+import { classNames } from "@adamjanicki/ui";
+export var UnstyledTooltip = 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, _c = props.disableFlip, disableFlip = _c === void 0 ? false : _c, _d = props.disabled, disabled = _d === void 0 ? false : _d, rest = __rest(props, ["children", "tooltipContent", "placement", "style", "offset", "disableFlip", "disabled"]);
     var _e = useState(false), open = _e[0], setOpen = _e[1];
     var middleware = [offset(placementOffset)];
     if (!disableFlip) {
@@ -38,6 +50,10 @@ var Tooltip = function (props) {
     if (disabled)
         return children;
     var _j = getFloatingProps(), onMouseEnter = _j.onMouseEnter, onMouseLeave = _j.onMouseLeave;
-    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) }, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, { className: className, children: _jsx(_Fragment, { children: content }) })))] }));
+    return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), isMounted && (_jsx(Box, __assign({ ref: refs.setFloating, style: __assign(__assign(__assign({}, floatingStyles), transitionStyles), style) }, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave }, rest, { children: _jsx(_Fragment, { children: content }) })))] }));
+};
+export var Tooltip = function (_a) {
+    var className = _a.className, layout = _a.layout, rest = __rest(_a, ["className", "layout"]);
+    return (_jsx(UnstyledTooltip, __assign({ className: classNames("aui-tooltip", className), layout: __assign({ padding: "s" }, layout) }, rest)));
 };
 export default Tooltip;

package/index.d.ts

@@ -1,3 +1,4 @@
-export { default as Popover } from "./components/Popover";
-export { default as Tooltip } from "./components/Tooltip";
+import Tooltip, { UnstyledTooltip } from "./components/Tooltip";
+import Popover, { UnstyledPopover } from "./components/Popover";
+export { Tooltip, UnstyledTooltip, Popover, UnstyledPopover };
 export { default as Autocomplete } from "./components/Autocomplete";

package/index.js

@@ -1,4 +1,5 @@
 // Components
-export { default as Popover } from "./components/Popover";
-export { default as Tooltip } from "./components/Tooltip";
+import Tooltip, { UnstyledTooltip } from "./components/Tooltip";
+import Popover, { UnstyledPopover } from "./components/Popover";
+export { Tooltip, UnstyledTooltip, Popover, UnstyledPopover };
 export { default as Autocomplete } from "./components/Autocomplete";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "More advanced UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -22,7 +22,7 @@
     "react-dom": ">=18"
   },
   "dependencies": {
-    "@adamjanicki/ui": "^1.6.1",
+    "@adamjanicki/ui": "^1.6.3",
     "@floating-ui/react": "^0.26.17"
   },
   "devDependencies": {

package/style.css

@@ -1,5 +1,4 @@
 :root {
-  --aui-autocomplete-popover-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   --aui-autocomplete-highlighted: #eee;
 }
 
@@ -15,12 +14,9 @@
 }
 
 .aui-autocomplete-popover {
-  background-color: var(--aui-default-background);
   font-weight: 400;
-  box-shadow: 0 0 0 1px var(--aui-default-border) inset,
-    var(--aui-container-box-shadow);
   overflow: hidden;
-  border-radius: var(--aui-rounded-radius);
+  padding: 0;
 }
 
 .aui-autocomplete-ul {
@@ -36,3 +32,12 @@
   cursor: pointer;
   border-radius: var(--aui-rounded-radius);
 }
+
+.aui-tooltip,
+.aui-popover {
+  background-color: var(--aui-default-background);
+  border: 1px solid var(--aui-default-border);
+  box-shadow: var(--aui-floating-box-shadow);
+  border-radius: var(--aui-rounded-radius);
+  z-index: 1000;
+}