colibri-ui 0.7.23 → 0.7.25

package/esm/Theme/themes/default.d.ts

@@ -1,5 +1,6 @@
 import type { CheckboxVariant } from "../../Checkbox/index.props";
 import type { ButtonBase, ButtonVariant } from "../../Button/index.props";
+import { MenuVariant } from "../../Menu/index.props";
 export declare const ButtonThemeDefault: ButtonVariant & ButtonBase;
 export declare const InputThemeDefault: {
     placeholder: {
@@ -65,9 +66,11 @@ export declare const SwitchThemeDefault: {
         };
     };
 };
+export declare const MenuThemeDefault: MenuVariant;
 export declare const THEME_DEFAULT: {
     breakpoints: import("../breakpoints").BreakpointsTheme;
     button: ButtonVariant & ButtonBase;
+    menu: MenuVariant;
     input: {
         placeholder: {
             color: string;

package/esm/Theme/themes/default.js

@@ -191,9 +191,30 @@ var SwitchThemeDefault = {
     }
   }
 };
+var MenuThemeDefault = {
+  primary: {
+    normal: {
+      backgroundColor: Color.WHITE
+    },
+    hovered: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    focused: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    selected: {
+      backgroundColor: Color.PRIMARY_2
+    },
+    disabled: {
+      color: Color.BG_2,
+      backgroundColor: Color.WHITE
+    }
+  }
+};
 var THEME_DEFAULT = {
   breakpoints: Breakpoints,
   button: ButtonThemeDefault,
+  menu: MenuThemeDefault,
   input: InputThemeDefault,
   checkbox: CheckboxThemeDefault,
   typography: TypographyThemeDefault,
@@ -201,4 +222,4 @@ var THEME_DEFAULT = {
   palette: Color
 };
 
-export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };
+export { ButtonThemeDefault, CheckboxThemeDefault, InputThemeDefault, MenuThemeDefault, SwitchThemeDefault, THEME_DEFAULT, TypographyThemeDefault };

package/esm/helpers/on.d.ts

@@ -0,0 +1 @@
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | null | undefined, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;

package/esm/helpers/on.js

@@ -0,0 +1,8 @@
+var on = function on(element, type, listener, options) {
+  element === null || element === void 0 ? void 0 : element.addEventListener(type, listener, options);
+  return function () {
+    element === null || element === void 0 ? void 0 : element.removeEventListener(type, listener, options);
+  };
+};
+
+export { on };

package/esm/hooks/useOnClickOutside/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject, RefObject } from "react";
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
+export default useOnClickOutside;

package/esm/hooks/useOnClickOutside/index.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+
+var element = {
+  current: undefined
+};
+function useOnClickOutside(ref, handler) {
+  useEffect(function () {
+    var previous = element;
+    element = ref;
+    var listener = function listener(event) {
+      var _a;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
+      if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, false);
+    document.addEventListener("touchstart", listener, false);
+    return function () {
+      document.removeEventListener("mousedown", listener, false);
+      document.removeEventListener("touchstart", listener, false);
+      element = previous;
+    };
+  }, [handler, ref]);
+}
+
+export { useOnClickOutside as default };

package/esm/index.d.ts

@@ -2,10 +2,12 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
+export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";
 export { default as GridItem } from "./Grid/Item";
 export { default as Image } from "./Image";
 export { default as Input } from "./Input";
+export { default as Menu } from "./Menu";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";

package/esm/index.js

@@ -2,10 +2,12 @@ export { default as Button } from './Button/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Counter } from './Counter/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';
+export { default as Dropdown } from './Dropdown/index.js';
 export { default as Grid } from './Grid/index.js';
 export { default as GridItem } from './Grid/Item/index.js';
 export { default as Image } from './Image/index.js';
 export { default as Input } from './Input/index.js';
+export { default as Menu } from './Menu/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
 export { THEMES, ThemeProvider } from './Theme/index.js';

package/helpers/on.d.ts

@@ -0,0 +1 @@
+export declare const on: <K extends keyof HTMLElementEventMap>(element: HTMLElement | null | undefined, type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions) => () => void;

package/helpers/on.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var on = function on(element, type, listener, options) {
+  element === null || element === void 0 ? void 0 : element.addEventListener(type, listener, options);
+  return function () {
+    element === null || element === void 0 ? void 0 : element.removeEventListener(type, listener, options);
+  };
+};
+
+exports.on = on;

package/hooks/useOnClickOutside/index.d.ts

@@ -0,0 +1,3 @@
+import { MutableRefObject, RefObject } from "react";
+declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | MutableRefObject<T | undefined>, handler: (e: MouseEvent | TouchEvent) => void): void;
+export default useOnClickOutside;

package/hooks/useOnClickOutside/index.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+var element = {
+  current: undefined
+};
+function useOnClickOutside(ref, handler) {
+  React.useEffect(function () {
+    var previous = element;
+    element = ref;
+    var listener = function listener(event) {
+      var _a;
+      if ((ref === null || ref === void 0 ? void 0 : ref.current) !== (element === null || element === void 0 ? void 0 : element.current)) return;
+      if ((_a = element.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
+        return;
+      }
+      handler(event);
+    };
+    document.addEventListener("mousedown", listener, false);
+    document.addEventListener("touchstart", listener, false);
+    return function () {
+      document.removeEventListener("mousedown", listener, false);
+      document.removeEventListener("touchstart", listener, false);
+      element = previous;
+    };
+  }, [handler, ref]);
+}
+
+exports.default = useOnClickOutside;

package/index.d.ts

@@ -2,10 +2,12 @@ export { default as Button } from "./Button";
 export { default as Checkbox } from "./Checkbox";
 export { default as Counter } from "./Counter";
 export { default as DotsLoader } from "./DotsLoader";
+export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";
 export { default as GridItem } from "./Grid/Item";
 export { default as Image } from "./Image";
 export { default as Input } from "./Input";
+export { default as Menu } from "./Menu";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES, ThemeProvider } from "./Theme";

package/index.js

@@ -4,14 +4,16 @@ var index = require('./Button/index.js');
 var index$1 = require('./Checkbox/index.js');
 var index$2 = require('./Counter/index.js');
 var index$3 = require('./DotsLoader/index.js');
-var index$4 = require('./Grid/index.js');
-var index$5 = require('./Grid/Item/index.js');
-var index$6 = require('./Image/index.js');
-var index$7 = require('./Input/index.js');
-var index$8 = require('./Skeleton/index.js');
-var index$9 = require('./Switch/index.js');
-var index$a = require('./Theme/index.js');
-var index$b = require('./Typography/index.js');
+var index$4 = require('./Dropdown/index.js');
+var index$5 = require('./Grid/index.js');
+var index$6 = require('./Grid/Item/index.js');
+var index$7 = require('./Image/index.js');
+var index$8 = require('./Input/index.js');
+var index$9 = require('./Menu/index.js');
+var index$a = require('./Skeleton/index.js');
+var index$b = require('./Switch/index.js');
+var index$c = require('./Theme/index.js');
+var index$d = require('./Typography/index.js');
 require('./Icons/index.js');
 var Chevron = require('./Icons/Chevron.js');
 var Close = require('./Icons/Close.js');
@@ -31,16 +33,18 @@ exports.Button = index.default;
 exports.Checkbox = index$1.default;
 exports.Counter = index$2.default;
 exports.DotsLoader = index$3.default;
-exports.Grid = index$4.default;
-exports.GridItem = index$5.default;
-exports.Image = index$6.default;
-exports.Input = index$7.default;
-exports.SkeletonRect = index$8.SkeletonRect;
-exports.SkeletonText = index$8.SkeletonText;
-exports.Switch = index$9.default;
-exports.THEMES = index$a.THEMES;
-exports.ThemeProvider = index$a.ThemeProvider;
-exports.Typography = index$b.default;
+exports.Dropdown = index$4.default;
+exports.Grid = index$5.default;
+exports.GridItem = index$6.default;
+exports.Image = index$7.default;
+exports.Input = index$8.default;
+exports.Menu = index$9.default;
+exports.SkeletonRect = index$a.SkeletonRect;
+exports.SkeletonText = index$a.SkeletonText;
+exports.Switch = index$b.default;
+exports.THEMES = index$c.THEMES;
+exports.ThemeProvider = index$c.ThemeProvider;
+exports.Typography = index$d.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
 exports.EyeOpen = EyeOpen.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.7.23",
+  "version": "0.7.25",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},
@@ -25,14 +25,15 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
+    "@popperjs/core": "^2.11.8",
     "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0"
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-popper": "^2.3.0"
   },
   "devDependencies": {
     "@babel/plugin-transform-runtime": "7.24.3",
-    "@babel/preset-env": "7.24.5",
-    "@babel/preset-react": "7.24.1",
-    "@babel/preset-typescript": "7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@cypress/code-coverage": "^3.12.39",
     "@emotion/babel-plugin": "11.11.0",
     "@eslint/js": "9.2.0",
     "@rollup/plugin-babel": "6.0.4",
@@ -52,7 +53,12 @@
     "@storybook/test": "8.0.10",
     "@svgr/rollup": "8.1.0",
     "@swc/plugin-emotion": "^3.0.4",
+    "@types/cypress": "^1.1.3",
+    "@types/node": "^20.12.12",
     "@types/react": "18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.1.3",
+    "cypress": "^13.10.0",
     "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -63,6 +69,7 @@
     "prettier": "3.2.5",
     "rollup": "4.17.2",
     "storybook": "8.0.10",
+    "ts-loader": "^9.5.1",
     "ts-node": "10.9.2",
     "typescript": "5.4.5",
     "typescript-eslint": "7.8.0"