colibri-ui 0.8.47 → 0.8.50

package/ClickOutside/index.d.ts

@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from "react";
-declare const ClickOutside: FC<PropsWithChildren<{
+type ClickOutsideProps = {
     onClick: (e: MouseEvent | TouchEvent) => void;
-}>>;
+};
+declare const ClickOutside: FC<PropsWithChildren<ClickOutsideProps>>;
 export default ClickOutside;

package/ClickOutside/index.js

@@ -9,23 +9,20 @@ var index = require('../hooks/useOnClickOutside/index.js');
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var _typeof__default = /*#__PURE__*/_interopDefault(_typeof);
-var React__default = /*#__PURE__*/_interopDefault(React);
 
 var ClickOutside = function ClickOutside(_ref) {
   var children = _ref.children,
     onClick = _ref.onClick;
-  var childRef = React.useRef();
+  var childRef = React.useRef(null);
   index.default(childRef, onClick);
-  if (! /*#__PURE__*/React__default.default.isValidElement(children)) return null;
+  if (! /*#__PURE__*/React.isValidElement(children)) return null;
   var combinedRef = function combinedRef(node) {
     childRef.current = node;
-    if (/*#__PURE__*/React__default.default.isValidElement(children) && "ref" in children.props) {
-      var childRefProp = children.props.ref;
-      if (typeof childRefProp === "function") {
-        childRefProp(node);
-      } else if (childRefProp && _typeof__default.default(childRefProp) === "object") {
-        childRefProp.current = node;
-      }
+    var childRefProp = children.ref;
+    if (typeof childRefProp === "function") {
+      childRefProp(node);
+    } else if (childRefProp && _typeof__default.default(childRefProp) === "object" && "current" in childRefProp) {
+      childRefProp.current = node;
     }
   };
   return /*#__PURE__*/React.cloneElement(children, {

package/Dropdown/Dropdown.module.css

@@ -4,6 +4,14 @@
   z-index: 1001;
 }
 
+.popper-container.placement-top {
+  transform-origin: bottom center;
+}
+
+.popper-container.placement-bottom {
+  transform-origin: top center;
+}
+
 .overlay-container {
   background-color: var(--palette-white);
   border-color: var(--palette-bg-2);

package/Dropdown/index.d.ts

@@ -1,4 +1,4 @@
+import { type FC, type PropsWithChildren } from "react";
 import type { DropdownProps } from "./index.props";
-import type { FC, PropsWithChildren } from "react";
 declare const Dropdown: FC<PropsWithChildren<DropdownProps>>;
 export default Dropdown;

package/Dropdown/index.js

@@ -2,17 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classNames = require('classnames/bind');
-var reactPopper = require('react-popper');
-var index = require('../Portal/index.js');
-var on = require('../helpers/on.js');
-var index$1 = require('../ClickOutside/index.js');
+var react = require('@floating-ui/react');
+var index = require('../ClickOutside/index.js');
 var styles = require('./Dropdown.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
@@ -27,7 +27,7 @@ var Dropdown = function Dropdown(_ref) {
     onVisibleChange = _ref.onVisibleChange,
     overlay = _ref.overlay,
     _ref$placement = _ref.placement,
-    placement = _ref$placement === void 0 ? "bottom-start" : _ref$placement,
+    placement = _ref$placement === void 0 ? "bottom-center" : _ref$placement,
     _ref$strategy = _ref.strategy,
     strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
     _ref$trigger = _ref.trigger,
@@ -39,102 +39,55 @@ var Dropdown = function Dropdown(_ref) {
     _ref$preventAutoClose = _ref.preventAutoClose,
     preventAutoClose = _ref$preventAutoClose === void 0 ? false : _ref$preventAutoClose,
     _ref$flip = _ref.flip,
-    flip = _ref$flip === void 0 ? true : _ref$flip,
+    flipEnabled = _ref$flip === void 0 ? true : _ref$flip,
     _ref$samewidth = _ref.samewidth,
     samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
-  var _useState = React.useState(null),
+  var _a;
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
-    controlElement = _useState2[0],
-    setControlElement = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    popperElement = _useState4[0],
-    setPopperElement = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    visible = _useState6[0],
-    setVisible = _useState6[1];
+    visible = _useState2[0],
+    setVisible = _useState2[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _usePopper = reactPopper.usePopper(controlElement, popperElement, {
+  var _useFloating = react.useFloating({
+      open: isVisible,
+      onOpenChange: setVisible,
       placement: placement,
       strategy: strategy,
-      modifiers: [{
-        name: "flip",
-        enabled: flip,
-        options: {
-          fallbackPlacements: ["top"]
-        }
-      }, {
-        name: "preventOverflow",
-        enabled: preventOverflow
-      }]
+      whileElementsMounted: react.autoUpdate,
+      middleware: [react.offset(6)].concat(_toConsumableArray__default.default(flipEnabled ? [react.flip()] : []), _toConsumableArray__default.default(preventOverflow ? [react.shift()] : []))
     }),
-    popperStyles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    update = _usePopper.update;
+    refs = _useFloating.refs,
+    floatingStyles = _useFloating.floatingStyles,
+    context = _useFloating.context,
+    update = _useFloating.update,
+    finalPlacement = _useFloating.placement;
+  var hover = react.useHover(context, {
+    enabled: trigger.includes("hover")
+  });
+  var click = react.useClick(context, {
+    enabled: trigger.includes("click")
+  });
+  var focus = react.useFocus(context, {
+    enabled: trigger.includes("focus")
+  });
+  var dismiss = react.useDismiss(context);
+  var role = react.useRole(context, {
+    role: "menu"
+  });
+  var _useInteractions = react.useInteractions([hover, click, focus, dismiss, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
   var isNotComponent = typeof children === "string";
   var reference = React.useMemo(function () {
     if (!children) return null;
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = function onToggle(event) {
-    var _a;
-    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
-      return;
-    }
-    setVisible(function (state) {
-      return !state;
-    });
-  };
-  var handleShow = function handleShow() {
-    return setVisible(true);
-  };
-  var handleHide = React.useCallback(function () {
-    setVisible(false);
-  }, []);
-  var onClickOutside = React.useCallback(function (event) {
-    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
-    handleHide();
-  }, [handleHide, controlElement]);
   var onClickOverlay = React.useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      handleHide();
-    }
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [handleHide]);
-  React.useEffect(function () {
-    var unsubscribes = [];
-    if (trigger.includes("click")) {
-      unsubscribes.push(on.on(controlElement, "click", onToggle, false));
+      setVisible(false);
     }
-    if (trigger.includes("hover")) {
-      unsubscribes.push(on.on(controlElement, "mouseenter", handleShow, false));
-      unsubscribes.push(on.on(controlElement, "mouseleave", handleHide, false));
-      unsubscribes.push(on.on(popperElement, "mouseenter", handleShow, false));
-      unsubscribes.push(on.on(popperElement, "mouseleave", handleHide, false));
-    }
-    if (trigger.includes("focus")) {
-      var onFocusOut = function onFocusOut() {
-        requestAnimationFrame(function () {
-          if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(document.activeElement)) return;
-          if (popperElement === null || popperElement === void 0 ? void 0 : popperElement.contains(document.activeElement)) return;
-          handleHide();
-        });
-      };
-      unsubscribes.push(on.on(controlElement, "focusin", handleShow, false));
-      unsubscribes.push(on.on(controlElement, "focusout", onFocusOut, false));
-      unsubscribes.push(on.on(popperElement, "focusin", handleShow, false));
-      unsubscribes.push(on.on(popperElement, "focusout", onFocusOut, false));
-    }
-    return function () {
-      return unsubscribes.forEach(function (un) {
-        return un();
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlElement, popperElement, onToggle, handleShow, handleHide]);
+  }, [preventAutoClose]);
   React.useEffect(function () {
     if (onVisibleChange) onVisibleChange(visible);
   }, [onVisibleChange, visible]);
@@ -142,24 +95,23 @@ var Dropdown = function Dropdown(_ref) {
     if (update) update();
   }, [update, visible]);
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, reference && (/*#__PURE__*/React__default.default.createElement(reference.type, Object.assign({
-    ref: setControlElement,
+    ref: refs.setReference,
     tabIndex: 0
-  }, reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    onClick: onClickOutside
+  }, getReferenceProps(reference.props)))), isVisible && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement(index.default, {
+    onClick: function onClick() {
+      return setVisible(false);
+    }
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
-    ref: setPopperElement,
+    ref: refs.setFloating,
     "data-testid": "popper-container",
-    className: clx("popper-container"),
-    style: Object.assign(Object.assign(Object.assign(Object.assign({}, popperStyles.popper), {
+    className: clx("popper-container", "placement-".concat(finalPlacement)),
+    style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex: zIndex,
-      minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-    }), samewidth && {
-      maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
-    }), {
+      minWidth: samewidth ? "".concat((_a = refs.reference.current) === null || _a === void 0 ? void 0 : _a.offsetWidth, "px") : undefined,
       fontSize: "".concat(fontSize, "px")
     }),
     tabIndex: 0
-  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
+  }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement("div", {
     "data-testid": "overlay-container",
     className: clx("overlay-container"),
     onClick: onClickOverlay

package/Dropdown/index.props.d.ts

@@ -1,7 +1,5 @@
 import type { ReactNode } from "react";
-import type { PositioningStrategy } from "@popperjs/core";
-import type { Placement as PopperPlacement } from "@popperjs/core";
-export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end">;
+import type { Placement, Strategy } from "@floating-ui/react";
 export type Trigger = "click" | "hover" | "focus";
 export type DropdownProps = {
     zIndex?: number;
@@ -10,7 +8,7 @@ export type DropdownProps = {
     onVisibleChange?: (visible: boolean) => void;
     overlay: ReactNode;
     placement?: Placement;
-    strategy?: PositioningStrategy;
+    strategy?: Strategy;
     trigger?: [Trigger, ...Trigger[]];
     visible?: boolean;
     preventOverflow?: boolean;

package/Tooltip/Tooltip.module.css

@@ -1,122 +1,28 @@
-.root[data-popper-placement=bottom-start] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom-start]::before {
-  left: 6px;
-  top: 0;
-}
-.root[data-popper-placement=bottom-end] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom-end]::before {
-  right: 6px;
-  top: 0;
-}
-.root[data-popper-placement=bottom] {
-  padding-top: 4px;
-}
-.root[data-popper-placement=bottom]::before {
-  left: 50%;
-  top: 0;
-  transform: translate(-50%, 0);
-}
-.root[data-popper-placement=right] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right]::before {
-  left: -6px;
-  top: 50%;
-  transform: translate(0, -50%) rotate(-90deg);
-}
-.root[data-popper-placement=right-start] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right-start]::before {
-  left: -6px;
-  top: 6px;
-  transform: rotate(-90deg);
-}
-.root[data-popper-placement=right-end] {
-  padding-left: 4px;
-}
-.root[data-popper-placement=right-end]::before {
-  bottom: 6px;
-  left: -6px;
-  transform: rotate(-90deg);
-}
-.root[data-popper-placement=left] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left]::before {
-  right: -6px;
-  top: 50%;
-  transform: translate(0, -50%) rotate(90deg);
-}
-.root[data-popper-placement=left-start] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left-start]::before {
-  right: -6px;
-  top: 6px;
-  transform: rotate(90deg);
-}
-.root[data-popper-placement=left-end] {
-  padding-right: 4px;
-}
-.root[data-popper-placement=left-end]::before {
-  bottom: 6px;
-  right: -6px;
-  transform: rotate(90deg);
-}
-.root[data-popper-placement=top] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top]::before {
-  bottom: 0;
-  left: 50%;
-  transform: translate(-50%, 0) rotate(180deg);
-}
-.root[data-popper-placement=top-start] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top-start]::before {
-  bottom: 0;
-  left: 6px;
-  transform: rotate(180deg);
-}
-.root[data-popper-placement=top-end] {
-  padding-bottom: 4px;
-}
-.root[data-popper-placement=top-end]::before {
-  bottom: 0;
-  right: 6px;
-  transform: rotate(180deg);
-}
-
-.tail {
-  position: relative;
-}
-.tail::before {
-  border-bottom: 5px solid var(--tooltip-bg);
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  content: "";
-  height: 0;
-  position: absolute;
-  width: 0;
-  z-index: 3000;
-}
-
-.overlay {
+.tooltip {
   background-color: var(--tooltip-bg);
   border-radius: 0.35rem;
-  color: var(--tooltip-color);
+  padding: 4px 10px;
   font-size: 14px;
-  font-style: normal;
   font-weight: 400;
   line-height: 18px;
+  color: var(--tooltip-color);
   max-width: 200px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  position: relative;
+  display: inline-block;
+  box-sizing: border-box;
+}
+
+.content {
+  background-color: inherit;
+  border-radius: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  padding: inherit;
+  max-width: inherit;
   overflow: hidden;
-  padding: 4px 10px;
   position: relative;
 }

package/Tooltip/index.d.ts

@@ -1,4 +1,4 @@
-import type { ITooltipProps } from "./index.props";
-import type { FC, PropsWithChildren } from "react";
-declare const Tooltip: FC<PropsWithChildren<ITooltipProps>>;
+import { type FC, type PropsWithChildren } from "react";
+import type { TooltipProps } from "./index.props";
+declare const Tooltip: FC<PropsWithChildren<TooltipProps>>;
 export default Tooltip;

package/Tooltip/index.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
-var reactPopper = require('react-popper');
 var classNames = require('classnames/bind');
-var index = require('../Portal/index.js');
-var on = require('../helpers/on.js');
-var index$1 = require('../ClickOutside/index.js');
+var react = require('@floating-ui/react');
 var styles = require('./Tooltip.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -21,100 +18,72 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 var clx = classNames__default.default.bind(styles__default.default);
 var Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
-    zIndex = _ref.zIndex,
     content = _ref.content,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
     _ref$withTail = _ref.withTail,
     withTail = _ref$withTail === void 0 ? false : _ref$withTail,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? "bottom" : _ref$placement,
     _ref$strategy = _ref.strategy,
-    strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy;
-  var _useState = React.useState(null),
+    strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
+    className = _ref.className;
+  var _useState = React.useState(false),
     _useState2 = _slicedToArray__default.default(_useState, 2),
-    controlElement = _useState2[0],
-    setControlElement = _useState2[1];
-  var _useState3 = React.useState(null),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    popperElement = _useState4[0],
-    setPopperElement = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    visible = _useState6[0],
-    setVisible = _useState6[1];
-  var _usePopper = reactPopper.usePopper(controlElement, popperElement, {
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var arrowRef = React.useRef(null);
+  var _useFloating = react.useFloating({
       placement: placement,
       strategy: strategy,
-      modifiers: [{
-        name: "flip",
-        enabled: true
-      }, {
-        name: "preventOverflow",
-        enabled: true
-      }]
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      middleware: [react.offset(8), react.flip(), react.shift({
+        padding: 8
+      }), react.arrow({
+        element: arrowRef
+      })]
     }),
-    popperStyles = _usePopper.styles,
-    attributes = _usePopper.attributes,
-    update = _usePopper.update;
+    refs = _useFloating.refs,
+    context = _useFloating.context,
+    floatingStyles = _useFloating.floatingStyles;
+  var hover = react.useHover(context, {
+    move: false,
+    delay: {
+      open: 100,
+      close: 100
+    }
+  });
+  var dismiss = react.useDismiss(context);
+  var role = react.useRole(context, {
+    role: "tooltip"
+  });
+  var _useInteractions = react.useInteractions([hover, dismiss, role]),
+    getReferenceProps = _useInteractions.getReferenceProps,
+    getFloatingProps = _useInteractions.getFloatingProps;
   var reference = React.useMemo(function () {
     if (!children) return null;
     if (typeof children === "string") {
-      return /*#__PURE__*/React__default.default.createElement("button", null, children);
+      return /*#__PURE__*/React__default.default.createElement("span", null, children);
     }
-    return React.Children.only(children);
+    return children;
   }, [children]);
-  var onToggle = React.useCallback(function (event) {
-    event.stopPropagation();
-    setVisible(function (state) {
-      return !state;
-    });
-  }, []);
-  var onShow = React.useCallback(function () {
-    setVisible(true);
-  }, []);
-  var onHide = React.useCallback(function () {
-    setVisible(false);
-  }, []);
-  var onClickOutside = React.useCallback(function (event) {
-    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
-    onHide();
-  }, [onHide, controlElement]);
-  var onClickOverlay = React.useCallback(function (event) {
-    event.stopPropagation();
-    onHide();
-  }, [onHide]);
-  React.useEffect(function () {
-    var unsubscribes = [];
-    unsubscribes.push(on.on(controlElement, "mouseenter", onShow, false));
-    unsubscribes.push(on.on(controlElement, "mouseleave", onHide, false));
-    unsubscribes.push(on.on(popperElement, "mouseenter", onShow, false));
-    unsubscribes.push(on.on(popperElement, "mouseleave", onHide, false));
-    return function () {
-      return unsubscribes.forEach(function (un) {
-        return un();
-      });
-    };
-  }, [controlElement, popperElement, onToggle, onShow, onHide]);
-  React.useEffect(function () {
-    if (update) update();
-  }, [update, visible]);
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, reference && /*#__PURE__*/React__default.default.cloneElement(reference, {
-    ref: setControlElement
-  }), visible && (/*#__PURE__*/React__default.default.createElement(index.default, null, /*#__PURE__*/React__default.default.createElement(index$1.default, {
-    onClick: onClickOutside
-  }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
-    className: clx("root", {
-      tail: !!withTail
-    }),
-    ref: setPopperElement,
-    style: Object.assign(Object.assign({}, popperStyles.popper), {
+  var trigger = reference ? /*#__PURE__*/React.cloneElement(reference, Object.assign({
+    ref: refs.setReference
+  }, getReferenceProps())) : null;
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, trigger, isOpen && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+    ref: refs.setFloating
+  }, getFloatingProps(), {
+    className: clx("tooltip", className),
+    style: Object.assign(Object.assign({}, floatingStyles), {
       zIndex: zIndex
     })
-  }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {
-    role: "button",
-    tabIndex: 0,
-    className: clx("overlay"),
-    onClick: onClickOverlay
-  }, content))))));
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("content")
+  }, content), withTail && (/*#__PURE__*/React__default.default.createElement(react.FloatingArrow, {
+    ref: arrowRef,
+    context: context
+  }))))));
 };
 
 exports.default = Tooltip;

package/Tooltip/index.props.d.ts

@@ -1,11 +1,10 @@
 import type { ReactNode } from "react";
-import type { PositioningStrategy } from "@popperjs/core";
-import type { Placement as PopperPlacement } from "@popperjs/core";
-export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bottom-end" | "top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "left-start" | "left" | "left-end">;
-export interface ITooltipProps {
+import { Placement, Strategy } from "@floating-ui/react";
+export type TooltipProps = {
     content: ReactNode;
     zIndex?: number;
     placement?: Placement;
-    strategy?: PositioningStrategy;
+    strategy?: Strategy;
     withTail?: boolean;
-}
+    className?: string;
+};

package/esm/ClickOutside/index.d.ts

@@ -1,5 +1,6 @@
 import type { FC, PropsWithChildren } from "react";
-declare const ClickOutside: FC<PropsWithChildren<{
+type ClickOutsideProps = {
     onClick: (e: MouseEvent | TouchEvent) => void;
-}>>;
+};
+declare const ClickOutside: FC<PropsWithChildren<ClickOutsideProps>>;
 export default ClickOutside;

package/esm/ClickOutside/index.js

@@ -1,22 +1,20 @@
 import _typeof from '@babel/runtime/helpers/typeof';
-import React__default, { useRef, cloneElement } from 'react';
+import { useRef, isValidElement, cloneElement } from 'react';
 import useOnClickOutside from '../hooks/useOnClickOutside/index.js';
 
 var ClickOutside = function ClickOutside(_ref) {
   var children = _ref.children,
     onClick = _ref.onClick;
-  var childRef = useRef();
+  var childRef = useRef(null);
   useOnClickOutside(childRef, onClick);
-  if (! /*#__PURE__*/React__default.isValidElement(children)) return null;
+  if (! /*#__PURE__*/isValidElement(children)) return null;
   var combinedRef = function combinedRef(node) {
     childRef.current = node;
-    if (/*#__PURE__*/React__default.isValidElement(children) && "ref" in children.props) {
-      var childRefProp = children.props.ref;
-      if (typeof childRefProp === "function") {
-        childRefProp(node);
-      } else if (childRefProp && _typeof(childRefProp) === "object") {
-        childRefProp.current = node;
-      }
+    var childRefProp = children.ref;
+    if (typeof childRefProp === "function") {
+      childRefProp(node);
+    } else if (childRefProp && _typeof(childRefProp) === "object" && "current" in childRefProp) {
+      childRefProp.current = node;
     }
   };
   return /*#__PURE__*/cloneElement(children, {