colibri-ui 0.8.33 → 0.8.35

package/Calendar/index.js

@@ -73,9 +73,9 @@ var Calendar = function Calendar(_ref) {
     contentWidth = _useState8[0],
     setContentWidth = _useState8[1];
   var _useState9 = React.useState(true),
-    _useState10 = _slicedToArray__default.default(_useState9, 2),
-    isRangeCompleted = _useState10[0],
-    setIsRangeCompleted = _useState10[1];
+    _useState0 = _slicedToArray__default.default(_useState9, 2),
+    isRangeCompleted = _useState0[0],
+    setIsRangeCompleted = _useState0[1];
   React.useEffect(function () {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);

package/Dropdown/index.js

@@ -77,7 +77,7 @@ var Dropdown = function Dropdown(_ref) {
     if (!children) return null;
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = React.useCallback(function (event) {
+  var onToggle = function onToggle(event) {
     var _a;
     if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
       return;
@@ -85,47 +85,47 @@ var Dropdown = function Dropdown(_ref) {
     setVisible(function (state) {
       return !state;
     });
-  }, [setVisible]);
-  var onShow = React.useCallback(function () {
-    setVisible(true);
-  }, [setVisible]);
-  var onHide = React.useCallback(function () {
-    setVisible(false);
-  }, [setVisible]);
+  };
+  var handleShow = function handleShow() {
+    return setVisible(true);
+  };
+  var handleHide = function handleHide() {
+    return setVisible(false);
+  };
   var onClickOutside = React.useCallback(function (event) {
     if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
-    onHide();
-  }, [onHide, controlElement]);
+    handleHide();
+  }, [handleHide, controlElement]);
   var onClickOverlay = React.useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      onHide();
+      handleHide();
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onHide]);
+  [handleHide]);
   React.useEffect(function () {
     var unsubscribes = [];
     if (trigger.includes("click")) {
       unsubscribes.push(on.on(controlElement, "click", onToggle, false));
     }
     if (trigger.includes("hover")) {
-      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));
+      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;
-          onHide();
+          handleHide();
         });
       };
-      unsubscribes.push(on.on(controlElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(controlElement, "focusin", handleShow, false));
       unsubscribes.push(on.on(controlElement, "focusout", onFocusOut, false));
-      unsubscribes.push(on.on(popperElement, "focusin", onShow, false));
+      unsubscribes.push(on.on(popperElement, "focusin", handleShow, false));
       unsubscribes.push(on.on(popperElement, "focusout", onFocusOut, false));
     }
     return function () {
@@ -134,7 +134,7 @@ var Dropdown = function Dropdown(_ref) {
       });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  }, [controlElement, popperElement, onToggle, handleShow, handleHide]);
   React.useEffect(function () {
     if (onVisibleChange) onVisibleChange(visible);
   }, [onVisibleChange, visible]);

package/Menu/components/MenuItem/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 import type { MenuItemProps } from "./index.props";
-declare const MenuItem: ({ className, isSelected, variant, disabled, onClick, children, ref, }: PropsWithChildren<MenuItemProps>) => React.JSX.Element;
+declare const MenuItem: ({ className, isSelected, variant, disabled, onClick, children, onMouseEnter, ref, ...props }: PropsWithChildren<MenuItemProps>) => React.JSX.Element;
 export default MenuItem;

package/Menu/components/MenuItem/index.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
 var styles = require('./MenuItem.module.css');
@@ -15,19 +16,21 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var MenuItem = function MenuItem(_ref) {
-  var className = _ref.className,
-    isSelected = _ref.isSelected,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    ref = _ref.ref;
+var MenuItem = function MenuItem(_a) {
+  var className = _a.className,
+    isSelected = _a.isSelected,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? "primary" : _a$variant,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    children = _a.children,
+    onMouseEnter = _a.onMouseEnter,
+    ref = _a.ref,
+    props = tslib.__rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.default.createElement("li", {
+    React__default.default.createElement("li", Object.assign({
       ref: ref,
       style: {
         backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
@@ -38,8 +41,9 @@ var MenuItem = function MenuItem(_ref) {
       className: clx("item", _defineProperty__default.default({
         item_disabled: !!disabled
       }, "item_variant_".concat(variant), !!variant), className),
-      onClick: !disabled ? onClick : undefined
-    }, children)
+      onClick: !disabled ? onClick : undefined,
+      onMouseEnter: onMouseEnter
+    }, props), children)
   );
 };
 

package/Menu/components/MenuItem/index.props.d.ts

@@ -7,4 +7,5 @@ export interface MenuItemProps {
     variant?: MenuVariant;
     disabled?: boolean;
     ref?: React.Ref<HTMLLIElement>;
+    onMouseEnter?: () => void;
 }

package/esm/Calendar/index.js

@@ -62,9 +62,9 @@ var Calendar = function Calendar(_ref) {
     contentWidth = _useState8[0],
     setContentWidth = _useState8[1];
   var _useState9 = useState(true),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isRangeCompleted = _useState10[0],
-    setIsRangeCompleted = _useState10[1];
+    _useState0 = _slicedToArray(_useState9, 2),
+    isRangeCompleted = _useState0[0],
+    setIsRangeCompleted = _useState0[1];
   useEffect(function () {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);

package/esm/Dropdown/index.js

@@ -66,7 +66,7 @@ var Dropdown = function Dropdown(_ref) {
     if (!children) return null;
     return Children.only(isNotComponent ? /*#__PURE__*/React__default.createElement("button", null, children) : children);
   }, [children, isNotComponent]);
-  var onToggle = useCallback(function (event) {
+  var onToggle = function onToggle(event) {
     var _a;
     if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
       return;
@@ -74,47 +74,47 @@ var Dropdown = function Dropdown(_ref) {
     setVisible(function (state) {
       return !state;
     });
-  }, [setVisible]);
-  var onShow = useCallback(function () {
-    setVisible(true);
-  }, [setVisible]);
-  var onHide = useCallback(function () {
-    setVisible(false);
-  }, [setVisible]);
+  };
+  var handleShow = function handleShow() {
+    return setVisible(true);
+  };
+  var handleHide = function handleHide() {
+    return setVisible(false);
+  };
   var onClickOutside = useCallback(function (event) {
     if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(event.target)) return;
-    onHide();
-  }, [onHide, controlElement]);
+    handleHide();
+  }, [handleHide, controlElement]);
   var onClickOverlay = useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      onHide();
+      handleHide();
     }
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [onHide]);
+  [handleHide]);
   useEffect(function () {
     var unsubscribes = [];
     if (trigger.includes("click")) {
       unsubscribes.push(on(controlElement, "click", onToggle, false));
     }
     if (trigger.includes("hover")) {
-      unsubscribes.push(on(controlElement, "mouseenter", onShow, false));
-      unsubscribes.push(on(controlElement, "mouseleave", onHide, false));
-      unsubscribes.push(on(popperElement, "mouseenter", onShow, false));
-      unsubscribes.push(on(popperElement, "mouseleave", onHide, false));
+      unsubscribes.push(on(controlElement, "mouseenter", handleShow, false));
+      unsubscribes.push(on(controlElement, "mouseleave", handleHide, false));
+      unsubscribes.push(on(popperElement, "mouseenter", handleShow, false));
+      unsubscribes.push(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;
-          onHide();
+          handleHide();
         });
       };
-      unsubscribes.push(on(controlElement, "focusin", onShow, false));
+      unsubscribes.push(on(controlElement, "focusin", handleShow, false));
       unsubscribes.push(on(controlElement, "focusout", onFocusOut, false));
-      unsubscribes.push(on(popperElement, "focusin", onShow, false));
+      unsubscribes.push(on(popperElement, "focusin", handleShow, false));
       unsubscribes.push(on(popperElement, "focusout", onFocusOut, false));
     }
     return function () {
@@ -123,7 +123,7 @@ var Dropdown = function Dropdown(_ref) {
       });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  }, [controlElement, popperElement, onToggle, handleShow, handleHide]);
   useEffect(function () {
     if (onVisibleChange) onVisibleChange(visible);
   }, [onVisibleChange, visible]);

package/esm/Menu/components/MenuItem/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { PropsWithChildren } from "react";
 import type { MenuItemProps } from "./index.props";
-declare const MenuItem: ({ className, isSelected, variant, disabled, onClick, children, ref, }: PropsWithChildren<MenuItemProps>) => React.JSX.Element;
+declare const MenuItem: ({ className, isSelected, variant, disabled, onClick, children, onMouseEnter, ref, ...props }: PropsWithChildren<MenuItemProps>) => React.JSX.Element;
 export default MenuItem;

package/esm/Menu/components/MenuItem/index.js

@@ -1,22 +1,25 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { __rest } from 'tslib';
 import React__default from 'react';
 import classNames from 'classnames/bind';
 import styles from './MenuItem.module.css';
 
 var clx = classNames.bind(styles);
-var MenuItem = function MenuItem(_ref) {
-  var className = _ref.className,
-    isSelected = _ref.isSelected,
-    _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? "primary" : _ref$variant,
-    disabled = _ref.disabled,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    ref = _ref.ref;
+var MenuItem = function MenuItem(_a) {
+  var className = _a.className,
+    isSelected = _a.isSelected,
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? "primary" : _a$variant,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    children = _a.children,
+    onMouseEnter = _a.onMouseEnter,
+    ref = _a.ref,
+    props = __rest(_a, ["className", "isSelected", "variant", "disabled", "onClick", "children", "onMouseEnter", "ref"]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.createElement("li", {
+    React__default.createElement("li", Object.assign({
       ref: ref,
       style: {
         backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
@@ -27,8 +30,9 @@ var MenuItem = function MenuItem(_ref) {
       className: clx("item", _defineProperty({
         item_disabled: !!disabled
       }, "item_variant_".concat(variant), !!variant), className),
-      onClick: !disabled ? onClick : undefined
-    }, children)
+      onClick: !disabled ? onClick : undefined,
+      onMouseEnter: onMouseEnter
+    }, props), children)
   );
 };
 

package/esm/Menu/components/MenuItem/index.props.d.ts

@@ -7,4 +7,5 @@ export interface MenuItemProps {
     variant?: MenuVariant;
     disabled?: boolean;
     ref?: React.Ref<HTMLLIElement>;
+    onMouseEnter?: () => void;
 }

package/esm/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
 export { default as Chip } from "./Chip";
+export { default as ClickOutside } from "./ClickOutside";
 export { default as Counter } from "./Counter";
 export { default as Datepicker } from "./Datepicker";
 export { default as DotsLoader } from "./DotsLoader";

package/esm/index.js

@@ -5,6 +5,7 @@ export { default as Button } from './Button/index.js';
 export { default as Calendar } from './Calendar/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
+export { default as ClickOutside } from './ClickOutside/index.js';
 export { default as Counter } from './Counter/index.js';
 export { default as Datepicker } from './Datepicker/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';

package/index.d.ts

@@ -5,6 +5,7 @@ export { default as Button } from "./Button";
 export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
 export { default as Chip } from "./Chip";
+export { default as ClickOutside } from "./ClickOutside";
 export { default as Counter } from "./Counter";
 export { default as Datepicker } from "./Datepicker";
 export { default as DotsLoader } from "./DotsLoader";

package/index.js

@@ -7,35 +7,36 @@ var index$3 = require('./Button/index.js');
 var index$4 = require('./Calendar/index.js');
 var index$5 = require('./Checkbox/index.js');
 var index$6 = require('./Chip/index.js');
-var index$7 = require('./Counter/index.js');
-var index$8 = require('./Datepicker/index.js');
-var index$9 = require('./DotsLoader/index.js');
-var index$a = require('./Dropdown/index.js');
-var index$b = require('./Grid/index.js');
-var index$c = require('./Grid/Item/index.js');
-var index$d = require('./Image/index.js');
-var index$e = require('./Input/index.js');
-var index$f = require('./Menu/index.js');
-var index$g = require('./Menu/components/MenuItem/index.js');
-var index$h = require('./Modal/index.js');
-var index$i = require('./MultiSelect/index.js');
-var index$j = require('./Portal/index.js');
-var index$k = require('./RadioGroup/index.js');
-var index$l = require('./Select/index.js');
-var index$m = require('./Separator/index.js');
-var index$n = require('./Skeleton/index.js');
-var index$o = require('./Status/index.js');
-var index$p = require('./Switch/index.js');
-var index$q = require('./TabsMenu/index.js');
-var index$r = require('./TabsPanels/index.js');
-var index$s = require('./TextArea/index.js');
-var index$t = require('./Theme/index.js');
-var index$u = require('./Tooltip/index.js');
-var index$v = require('./TimeSelect/index.js');
-var index$w = require('./Typography/index.js');
-var index$x = require('./hooks/useMediaSizes/index.js');
-var index$y = require('./hooks/useOnClickOutside/index.js');
-var index$z = require('./hooks/useScrollLock/index.js');
+var index$7 = require('./ClickOutside/index.js');
+var index$8 = require('./Counter/index.js');
+var index$9 = require('./Datepicker/index.js');
+var index$a = require('./DotsLoader/index.js');
+var index$b = require('./Dropdown/index.js');
+var index$c = require('./Grid/index.js');
+var index$d = require('./Grid/Item/index.js');
+var index$e = require('./Image/index.js');
+var index$f = require('./Input/index.js');
+var index$g = require('./Menu/index.js');
+var index$h = require('./Menu/components/MenuItem/index.js');
+var index$i = require('./Modal/index.js');
+var index$j = require('./MultiSelect/index.js');
+var index$k = require('./Portal/index.js');
+var index$l = require('./RadioGroup/index.js');
+var index$m = require('./Select/index.js');
+var index$n = require('./Separator/index.js');
+var index$o = require('./Skeleton/index.js');
+var index$p = require('./Status/index.js');
+var index$q = require('./Switch/index.js');
+var index$r = require('./TabsMenu/index.js');
+var index$s = require('./TabsPanels/index.js');
+var index$t = require('./TextArea/index.js');
+var index$u = require('./Theme/index.js');
+var index$v = require('./Tooltip/index.js');
+var index$w = require('./TimeSelect/index.js');
+var index$x = require('./Typography/index.js');
+var index$y = require('./hooks/useMediaSizes/index.js');
+var index$z = require('./hooks/useOnClickOutside/index.js');
+var index$A = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -66,36 +67,37 @@ exports.Button = index$3.default;
 exports.Calendar = index$4.default;
 exports.Checkbox = index$5.default;
 exports.Chip = index$6.default;
-exports.Counter = index$7.default;
-exports.Datepicker = index$8.default;
-exports.DotsLoader = index$9.default;
-exports.Dropdown = index$a.default;
-exports.Grid = index$b.default;
-exports.GridItem = index$c.default;
-exports.Image = index$d.default;
-exports.Input = index$e.default;
-exports.Menu = index$f.default;
-exports.MenuItem = index$g.default;
-exports.Modal = index$h.default;
-exports.MultiSelect = index$i.default;
-exports.Portal = index$j.default;
-exports.RadioGroup = index$k.default;
-exports.Select = index$l.default;
-exports.Separator = index$m.default;
-exports.SkeletonRect = index$n.SkeletonRect;
-exports.SkeletonText = index$n.SkeletonText;
-exports.Status = index$o.default;
-exports.Switch = index$p.default;
-exports.TabsMenu = index$q.default;
-exports.TabsPanels = index$r.default;
-exports.TextArea = index$s.default;
-exports.THEMES = index$t.THEMES;
-exports.Tooltip = index$u.default;
-exports.TimeSelect = index$v.default;
-exports.Typography = index$w.default;
-exports.useMediaSizes = index$x.default;
-exports.useOnClickOutside = index$y.default;
-exports.useScrollLock = index$z.default;
+exports.ClickOutside = index$7.default;
+exports.Counter = index$8.default;
+exports.Datepicker = index$9.default;
+exports.DotsLoader = index$a.default;
+exports.Dropdown = index$b.default;
+exports.Grid = index$c.default;
+exports.GridItem = index$d.default;
+exports.Image = index$e.default;
+exports.Input = index$f.default;
+exports.Menu = index$g.default;
+exports.MenuItem = index$h.default;
+exports.Modal = index$i.default;
+exports.MultiSelect = index$j.default;
+exports.Portal = index$k.default;
+exports.RadioGroup = index$l.default;
+exports.Select = index$m.default;
+exports.Separator = index$n.default;
+exports.SkeletonRect = index$o.SkeletonRect;
+exports.SkeletonText = index$o.SkeletonText;
+exports.Status = index$p.default;
+exports.Switch = index$q.default;
+exports.TabsMenu = index$r.default;
+exports.TabsPanels = index$s.default;
+exports.TextArea = index$t.default;
+exports.THEMES = index$u.THEMES;
+exports.Tooltip = index$v.default;
+exports.TimeSelect = index$w.default;
+exports.Typography = index$x.default;
+exports.useMediaSizes = index$y.default;
+exports.useOnClickOutside = index$z.default;
+exports.useScrollLock = index$A.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.33",
+  "version": "0.8.35",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -29,7 +29,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-popper": "^2.3.0",
-    "react-textarea-autosize": "^8.5.4"
+    "react-textarea-autosize": "^8.5.9"
   },
   "devDependencies": {},
   "peerDependencies": {