@adamjanicki/ui-extended 1.1.8 → 1.2.0

package/components/Autocomplete.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import Popover from "./Popover";
-import { IconInput } from "@adamjanicki/ui";
+import { IconInput, ui } from "@adamjanicki/ui";
 type Props<T> = {
     /**
      * The value of the input field
@@ -71,11 +71,11 @@ type Props<T> = {
     /**
      * Props for the list element
      */
-    listProps?: React.ComponentProps<"ul">;
+    listProps?: React.ComponentProps<typeof ui.ul>;
     /**
      * Props for the list item elements
      */
-    listItemProps?: React.ComponentProps<"li">;
+    listItemProps?: React.ComponentProps<typeof ui.li>;
     /**
      * Footer node to render at the bottom of the popover
      */

package/components/Autocomplete.js

@@ -20,12 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Popover from "./Popover";
-import { Box, ClickOutside, IconInput } from "@adamjanicki/ui";
+import { Box, ClickOutside, IconInput, ui } from "@adamjanicki/ui";
 import { classNames } from "@adamjanicki/ui/functions";
-var defaultRenderOption = function (option) { return (_jsx(Box, { layout: { padding: "s" }, children: "".concat(option) })); };
+var defaultRenderOption = function (option) { return (_jsx(Box, { vfx: { 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"]);
@@ -126,15 +126,20 @@ var Autocomplete = function (props) {
                             if (!open) {
                                 openMenu();
                             }
-                        }, 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 : 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 }) }))] }))] })) }));
+                        }, ref: inputRef, autoComplete: "off" }) })), _jsxs(Popover, __assign({}, popoverProps, { open: popoverOpen, triggerRef: inputContainerRef, vfx: {
+                        padding: "none",
+                        margin: "none",
+                        overflow: "hidden",
+                        fontWeight: 4,
+                    }, 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 }), children: [_jsx(ui.ul, __assign({}, listProps, { vfx: __assign({ axis: "y", padding: "s", margin: "none", overflow: "scroll" }, listProps.vfx), style: __assign({ maxHeight: 300 }, listProps.style), tabIndex: -1, children: _jsx(_Fragment, { children: filteredOptions.length
+                                    ? filteredOptions.map(function (option, index) {
+                                        var group = groupMap.get(index);
+                                        var ref = index === on ? onRef : undefined;
+                                        return (_jsxs(React.Fragment, { children: [group && ((renderGroup === null || renderGroup === void 0 ? void 0 : renderGroup(group)) || group), _jsx(ui.li, __assign({}, listItemProps, { vfx: __assign({ axis: "x", cursor: "pointer", radius: "rounded" }, listItemProps.vfx), ref: ref, onMouseEnter: function () { return setOn(index); }, className: classNames(on === index
+                                                        ? "aui-autocomplete-on-option"
+                                                        : undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: _jsx(_Fragment, { children: renderOption(option) }) }))] }, index));
+                                    })
+                                    : !freeSolo &&
+                                        (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

@@ -32,5 +32,5 @@ type Props = BoxProps & {
     returnFocusOnEscape?: boolean;
 };
 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;
+declare const Popover: ({ vfx, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Popover;

package/components/Popover.js

@@ -23,7 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import Box from "@adamjanicki/ui/components/Box/Box";
 import { useFloating, autoUpdate, offset, useDismiss, useTransitionStyles, } from "@floating-ui/react";
-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 () {
@@ -51,7 +50,7 @@ export var UnstyledPopover = function (props) {
     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)));
+    var vfx = _a.vfx, rest = __rest(_a, ["vfx"]);
+    return (_jsx(UnstyledPopover, __assign({ vfx: __assign({ padding: "s", backgroundColor: "default", border: true, shadow: "floating", radius: "rounded", z: "floating" }, vfx) }, rest)));
 };
 export default Popover;

package/components/Tooltip.d.ts

@@ -32,5 +32,5 @@ type Props = Omit<BoxProps, "children" | "onMouseEnter" | "onMouseLeave"> & {
     disabled?: boolean;
 };
 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 declare const Tooltip: ({ vfx, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

package/components/Tooltip.js

@@ -24,7 +24,6 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { cloneElement, useState } from "react";
 import Box from "@adamjanicki/ui/components/Box/Box";
 import { useFloating, useHover, useInteractions, flip, safePolygon, autoUpdate, offset, useTransitionStyles, } from "@floating-ui/react";
-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];
@@ -53,7 +52,7 @@ export var UnstyledTooltip = function (props) {
     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)));
+    var vfx = _a.vfx, rest = __rest(_a, ["vfx"]);
+    return (_jsx(UnstyledTooltip, __assign({ vfx: __assign({ padding: "s", backgroundColor: "default", border: true, shadow: "floating", radius: "rounded", z: "floating" }, vfx) }, rest)));
 };
 export default Tooltip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui-extended",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "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.3",
+    "@adamjanicki/ui": "^1.7.6",
     "@floating-ui/react": "^0.26.17"
   },
   "devDependencies": {

package/style.css

@@ -12,32 +12,3 @@
     background-color: var(--aui-autocomplete-highlighted);
   }
 }
-
-.aui-autocomplete-popover {
-  font-weight: 400;
-  overflow: hidden;
-  padding: 0;
-}
-
-.aui-autocomplete-ul {
-  overflow: scroll;
-  max-height: 300px;
-  display: flex;
-  flex-direction: column;
-  outline: none;
-}
-
-.aui-autocomplete-li {
-  display: flex;
-  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;
-}