colibri-ui 0.8.34 → 0.8.36

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 () {
+  };
+  var handleShow = function handleShow() {
+    return setVisible(true);
+  };
+  var handleHide = React.useCallback(function () {
     setVisible(false);
-  }, [setVisible]);
+  }, []);
   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/base/BaseInput/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { Props } from "./index.props";
-declare const BaseInput: ({ className, onChange, ref, ...props }: Props) => React.JSX.Element;
+declare const BaseInput: ({ className, onFocus, onChange, onBlur, onKeyDown, ref, ...props }: Props) => React.JSX.Element;
 export default BaseInput;

package/base/BaseInput/index.js

@@ -15,15 +15,23 @@ var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var BaseInput = function BaseInput(_a) {
   var className = _a.className,
+    onFocus = _a.onFocus,
     onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onKeyDown = _a.onKeyDown,
     ref = _a.ref,
-    props = tslib.__rest(_a, ["className", "onChange", "ref"]);
+    props = tslib.__rest(_a, ["className", "onFocus", "onChange", "onBlur", "onKeyDown", "ref"]);
   var onChangeHandler = function onChangeHandler(e) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.default.createElement("input", Object.assign({
     className: classNames__default.default(styles__default.default["base-input"], className),
     onChange: onChangeHandler,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    autoCorrect: "off",
+    autoCapitalize: "off",
     ref: ref
   }, props));
 };

package/base/BaseInput/index.props.d.ts

@@ -1,5 +1,9 @@
-import type { ChangeEvent, InputHTMLAttributes } from "react";
+import type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, Ref, FormEvent, FocusEvent } from "react";
 export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    ref?: React.Ref<HTMLInputElement>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onInput?: (event: FormEvent<HTMLInputElement>) => void;
+    ref?: Ref<HTMLInputElement>;
 }

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 () {
+  };
+  var handleShow = function handleShow() {
+    return setVisible(true);
+  };
+  var handleHide = useCallback(function () {
     setVisible(false);
-  }, [setVisible]);
+  }, []);
   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/base/BaseInput/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { Props } from "./index.props";
-declare const BaseInput: ({ className, onChange, ref, ...props }: Props) => React.JSX.Element;
+declare const BaseInput: ({ className, onFocus, onChange, onBlur, onKeyDown, ref, ...props }: Props) => React.JSX.Element;
 export default BaseInput;

package/esm/base/BaseInput/index.js

@@ -5,15 +5,23 @@ import styles from './BaseInput.module.css';
 
 var BaseInput = function BaseInput(_a) {
   var className = _a.className,
+    onFocus = _a.onFocus,
     onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onKeyDown = _a.onKeyDown,
     ref = _a.ref,
-    props = __rest(_a, ["className", "onChange", "ref"]);
+    props = __rest(_a, ["className", "onFocus", "onChange", "onBlur", "onKeyDown", "ref"]);
   var onChangeHandler = function onChangeHandler(e) {
     if (onChange) onChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.createElement("input", Object.assign({
     className: classNames(styles["base-input"], className),
     onChange: onChangeHandler,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onKeyDown: onKeyDown,
+    autoCorrect: "off",
+    autoCapitalize: "off",
     ref: ref
   }, props));
 };

package/esm/base/BaseInput/index.props.d.ts

@@ -1,5 +1,9 @@
-import type { ChangeEvent, InputHTMLAttributes } from "react";
+import type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, Ref, FormEvent, FocusEvent } from "react";
 export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    ref?: React.Ref<HTMLInputElement>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    onInput?: (event: FormEvent<HTMLInputElement>) => void;
+    ref?: Ref<HTMLInputElement>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.34",
+  "version": "0.8.36",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},