@adamjanicki/ui-extended 1.0.5 → 1.0.7

package/components/Autocomplete.d.ts

@@ -84,6 +84,11 @@ interface Props<T> {
      * Footer node to render at the bottom of the popover
      */
     footer?: React.ReactNode;
+    /**
+     * Close the popover when the footer is clicked
+     * @default true
+     */
+    closeOnFooterClick?: boolean;
     /**
      * A callback to be called when the user hits the enter key while no option is selected
      */

package/components/Autocomplete.js

@@ -29,14 +29,14 @@ 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, onUnselectedEnter = props.onUnselectedEnter, rest = __rest(props, ["options", "renderOption", "filterOption", "groupBy", "renderGroup", "noOptionsNode", "InputProps", "freeSolo", "focusOnSelect", "value", "onInputChange", "onSelect", "popoverProps", "footer", "listItemProps", "listProps", "onUnselectedEnter"]);
+    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 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 _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);
     var groupMap = new Map();
     if (groupBy) {
@@ -152,6 +152,6 @@ var Autocomplete = function (props) {
                                                     : undefined, listItemProps.className), onClick: function () { return handleChange(option); }, children: renderOption(option) }))] }, index));
                                 })
                                 : !freeSolo &&
-                                    (noOptionsNode || defaultRenderOption("No results found")) })), footer] }))] })) }));
+                                    (noOptionsNode || defaultRenderOption("No results found")) })), footer && (_jsx("div", { onClick: closeOnFooterClick ? closeMenu : undefined, children: footer }))] }))] })) }));
 };
 export default Autocomplete;

package/components/Popover.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFloating, autoUpdate, offset, useDismiss, } from "@floating-ui/react";
+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 ? true : _c;
     var handleOnClose = function () {
@@ -31,9 +31,10 @@ var Popover = function (props) {
         whileElementsMounted: autoUpdate,
         middleware: middleware,
     }), floatingStyles = _d.floatingStyles, context = _d.context, refs = _d.refs;
+    var _e = useTransitionStyles(context, {
+        duration: { open: 0, close: 250 }, // default ajui-transition value
+    }), isMounted = _e.isMounted, transitionStyles = _e.styles;
     useDismiss(context);
-    if (!open)
-        return null;
-    return (_jsx("div", { ref: refs.setFloating, style: __assign(__assign(__assign({}, (style || {})), floatingStyles), { outline: "none" }), className: className, children: children }));
+    return isMounted ? (_jsx("div", { ref: refs.setFloating, style: __assign(__assign(__assign(__assign({}, (style || {})), floatingStyles), transitionStyles), { outline: "none" }), className: className, children: children })) : null;
 };
 export default Popover;

package/components/Tooltip.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cloneElement, useState } from "react";
-import { useFloating, useHover, useInteractions, flip, safePolygon, autoUpdate, offset, } from "@floating-ui/react";
+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;
     var _d = useState(false), open = _d[0], setOpen = _d[1];
@@ -27,11 +27,13 @@ var Tooltip = function (props) {
         placement: placement,
     }), refs = _e.refs, floatingStyles = _e.floatingStyles, context = _e.context;
     var hover = useHover(context, {
-        delay: { open: 200, close: 100 },
         handleClose: safePolygon(),
         mouseOnly: true,
     });
-    var _f = useInteractions([hover]), getReferenceProps = _f.getReferenceProps, getFloatingProps = _f.getFloatingProps;
-    return (_jsxs(_Fragment, { children: [cloneElement(children, __assign({ ref: refs.setReference }, getReferenceProps())), open && (_jsx("div", __assign({ ref: refs.setFloating, style: __assign(__assign({}, (style || {})), floatingStyles) }, getFloatingProps(), { className: className, children: content })))] }));
+    var _f = useTransitionStyles(context, {
+        duration: 250, // default ajui-transition value
+    }), isMounted = _f.isMounted, transitionStyles = _f.styles;
+    var _g = useInteractions([hover]), getReferenceProps = _g.getReferenceProps, getFloatingProps = _g.getFloatingProps;
+    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 })))] }));
 };
 export default Tooltip;

package/package.json

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

package/style.css

@@ -23,7 +23,7 @@
   max-height: 300px;
   display: flex;
   flex-direction: column;
-  padding: 0.25rem;
+  padding: 0.5rem;
   margin: 0;
 }
 

package/utils/types.d.ts

@@ -1,8 +0,0 @@
-/**
- * The type of corner to display, controlling the border radius property.
- */
-export type CornerType = "pill" | "rounded" | "sharp";
-/**
- * The type of message associated with a piece of content.
- */
-export type ContentType = "success" | "warning" | "error" | "info" | "static";

package/utils/types.js

@@ -1 +0,0 @@
-export {};