colibri-ui 0.7.63 → 0.7.64

package/esm/Tooltip/Tooltip.module.css

@@ -0,0 +1,122 @@
+.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-background-color);
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  content: "";
+  height: 0;
+  position: absolute;
+  width: 0;
+  z-index: 3000;
+}
+
+.overlay {
+  background-color: var(--tooltip-background-color);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-color);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 18px;
+  max-width: 200px;
+  overflow: hidden;
+  padding: 4px 10px;
+  position: relative;
+}

package/esm/Tooltip/index.d.ts

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

package/esm/Tooltip/index.js

@@ -0,0 +1,101 @@
+import { __assign } from 'tslib';
+import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
+import { usePopper } from 'react-popper';
+import classNames from 'classnames/bind';
+import Portal from '../Portal/index.js';
+import { on } from '../helpers/on.js';
+import ClickOutside from '../ClickOutside/index.js';
+import styles from './Tooltip.module.css';
+
+var clx = classNames.bind(styles);
+var Tooltip = function Tooltip(_a) {
+  var children = _a.children,
+    zIndex = _a.zIndex,
+    content = _a.content,
+    _b = _a.withTail,
+    withTail = _b === void 0 ? false : _b,
+    _c = _a.placement,
+    placement = _c === void 0 ? "bottom" : _c,
+    _d = _a.strategy,
+    strategy = _d === void 0 ? "absolute" : _d;
+  var _e = useState(null),
+    controlElement = _e[0],
+    setControlElement = _e[1];
+  var _f = useState(null),
+    popperElement = _f[0],
+    setPopperElement = _f[1];
+  var _g = useState(false),
+    visible = _g[0],
+    setVisible = _g[1];
+  var _h = usePopper(controlElement, popperElement, {
+      placement: placement,
+      strategy: strategy,
+      modifiers: [{
+        name: "flip",
+        enabled: true
+      }, {
+        name: "preventOverflow",
+        enabled: true
+      }]
+    }),
+    styles = _h.styles,
+    attributes = _h.attributes,
+    update = _h.update;
+  var isNotComponent = typeof children === "string";
+  var reference = useMemo(function () {
+    return Children.only(isNotComponent ? /*#__PURE__*/React__default.createElement("button", null, children) : children);
+  }, [children, isNotComponent]);
+  var onToggle = useCallback(function (e) {
+    e.stopPropagation();
+    setVisible(function (state) {
+      return !state;
+    });
+  }, [setVisible]);
+  var onShow = useCallback(function () {
+    setVisible(true);
+  }, [setVisible]);
+  var onHide = useCallback(function () {
+    setVisible(false);
+  }, [setVisible]);
+  var onClickOutside = useCallback(function (e) {
+    if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
+    onHide();
+  }, [onHide, controlElement]);
+  var onClickOverlay = useCallback(function (e) {
+    e.stopPropagation();
+    onHide();
+  }, [onHide]);
+  useEffect(function () {
+    var unsubscribes = [];
+    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));
+    return function () {
+      return unsubscribes.forEach(function (un) {
+        return un();
+      });
+    };
+  }, [controlElement, popperElement, onToggle, onShow, onHide]);
+  useEffect(function () {
+    if (update) update();
+  }, [update, visible]);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(reference.type, __assign({
+    ref: setControlElement
+  }, reference.props)), visible && ( /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
+    onClick: onClickOutside
+  }, /*#__PURE__*/React__default.createElement("div", __assign({
+    className: clx("root", {
+      tail: !!withTail
+    }),
+    ref: setPopperElement,
+    style: __assign(__assign({}, styles.popper), {
+      zIndex: zIndex
+    })
+  }, attributes.popper), /*#__PURE__*/React__default.createElement("div", {
+    className: clx("overlay"),
+    onClick: onClickOverlay
+  }, content))))));
+};
+
+export { Tooltip as default };

package/esm/Tooltip/index.props.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import type { PositioningStrategy } from "@popperjs/core";
+import type { Placement as PopperPlacement } from "@popperjs/core";
+export type Trigger = "hover";
+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 {
+    children: ReactNode;
+    content: ReactNode;
+    zIndex?: number;
+    placement?: Placement;
+    strategy?: PositioningStrategy;
+    withTail?: boolean;
+}

package/esm/Typography/index.d.ts

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

package/esm/index.d.ts

@@ -19,6 +19,10 @@ export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES } from "./Theme";
+export { default as Tooltip } from "./Tooltip";
+export { default as TimeSelect } from "./TimeSelect";
 export { default as Typography } from "./Typography";
 export { default as useMediaSizes } from "./hooks/useMediaSizes";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
+export { default as useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";

package/esm/index.js

@@ -19,8 +19,12 @@ export { default as Separator } from './Separator/index.js';
 export { SkeletonRect, SkeletonText } from './Skeleton/index.js';
 export { default as Switch } from './Switch/index.js';
 export { THEMES } from './Theme/index.js';
+export { default as Tooltip } from './Tooltip/index.js';
+export { default as TimeSelect } from './TimeSelect/index.js';
 export { default as Typography } from './Typography/index.js';
 export { default as useMediaSizes } from './hooks/useMediaSizes/index.js';
+export { default as useOnClickOutside } from './hooks/useOnClickOutside/index.js';
+export { default as useScrollLock } from './hooks/useScrollLock/index.js';
 import './Icons/index.js';
 export { default as ArrowNext } from './Icons/ArrowNext.js';
 export { default as Cart } from './Icons/Cart.js';
@@ -33,5 +37,6 @@ export { default as Info } from './Icons/Info.js';
 export { default as Minus } from './Icons/Minus.js';
 export { default as More } from './Icons/More.js';
 export { default as Plus } from './Icons/Plus.js';
+export { default as Setting } from './Icons/Setting.js';
 export { default as Trash } from './Icons/Trash.js';
 export { default as User } from './Icons/User.js';

package/esm/theme_ba_variables.css

@@ -80,20 +80,23 @@
 --input-primary-border-color-error: #ff564e;
 --input-primary-background-color-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-primary-background-color-checked: #ffce31;
---checkbox-primary-background-color-hovered: #ffce31;
---checkbox-primary-box-shadow-focused: #ffe695;
---checkbox-primary-background-color-active: #ffce31;
---checkbox-primary-border-color-active: #ffce31;
---checkbox-primary-box-shadow-active: #ffce31;
---checkbox-primary-background-color-disabled: #ffe695;
---inputradio-primary-background-color-checked: #ffce31;
---inputradio-primary-background-color-hovered: #ffce31;
---inputradio-primary-box-shadow-focused: #ffe695;
---inputradio-primary-background-color-focused: #ffe695;
---inputradio-primary-border-color-focused: #ffe695;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #ffc818;
---switch-primary-border-color-checked: #ffc818;
+--checkbox-background-color-checked: #ffce31;
+--checkbox-background-color-hovered: #ffce31;
+--checkbox-box-shadow-focused: #ffe695;
+--checkbox-background-color-active: #ffce31;
+--checkbox-border-color-active: #ffce31;
+--checkbox-box-shadow-active: #ffce31;
+--checkbox-background-color-disabled: #ffe695;
+--input-radio-background-color-checked: #ffce31;
+--input-radio-background-color-hovered: #ffce31;
+--input-radio-box-shadow-focused: #ffe695;
+--input-radio-background-color-focused: #ffe695;
+--input-radio-border-color-focused: #ffe695;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #ffc818;
+--switch-border-color-checked: #ffc818;
+--tooltip-background-color: #333;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }

package/esm/theme_default_variables.css

@@ -83,20 +83,23 @@
 --input-primary-border-color-error: #ff564e;
 --input-primary-background-color-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-primary-background-color-checked: #067AFF;
---checkbox-primary-background-color-hovered: #067AFF;
---checkbox-primary-box-shadow-focused: #E8F0FE;
---checkbox-primary-background-color-active: #067AFF;
---checkbox-primary-border-color-active: #067AFF;
---checkbox-primary-box-shadow-active: #067AFF;
---checkbox-primary-background-color-disabled: #E8F0FE;
---inputradio-primary-background-color-checked: #067AFF;
---inputradio-primary-background-color-hovered: #067AFF;
---inputradio-primary-box-shadow-focused: #E8F0FE;
---inputradio-primary-background-color-focused: #E8F0FE;
---inputradio-primary-border-color-focused: #E8F0FE;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #0066DC;
---switch-primary-border-color-checked: #0066DC;
+--checkbox-background-color-checked: #067AFF;
+--checkbox-background-color-hovered: #067AFF;
+--checkbox-box-shadow-focused: #E8F0FE;
+--checkbox-background-color-active: #067AFF;
+--checkbox-border-color-active: #067AFF;
+--checkbox-box-shadow-active: #067AFF;
+--checkbox-background-color-disabled: #E8F0FE;
+--input-radio-background-color-checked: #067AFF;
+--input-radio-background-color-hovered: #067AFF;
+--input-radio-box-shadow-focused: #E8F0FE;
+--input-radio-background-color-focused: #E8F0FE;
+--input-radio-border-color-focused: #E8F0FE;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #0066DC;
+--switch-border-color-checked: #0066DC;
+--tooltip-background-color: #000;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }

package/index.d.ts

@@ -19,6 +19,10 @@ export { default as Separator } from "./Separator";
 export { SkeletonText, SkeletonRect } from "./Skeleton";
 export { default as Switch } from "./Switch";
 export { THEMES } from "./Theme";
+export { default as Tooltip } from "./Tooltip";
+export { default as TimeSelect } from "./TimeSelect";
 export { default as Typography } from "./Typography";
 export { default as useMediaSizes } from "./hooks/useMediaSizes";
+export { default as useOnClickOutside } from "./hooks/useOnClickOutside";
+export { default as useScrollLock } from "./hooks/useScrollLock";
 export * from "./Icons";

package/index.js

@@ -21,8 +21,12 @@ var index$h = require('./Separator/index.js');
 var index$i = require('./Skeleton/index.js');
 var index$j = require('./Switch/index.js');
 var index$k = require('./Theme/index.js');
-var index$l = require('./Typography/index.js');
-var index$m = require('./hooks/useMediaSizes/index.js');
+var index$l = require('./Tooltip/index.js');
+var index$m = require('./TimeSelect/index.js');
+var index$n = require('./Typography/index.js');
+var index$o = require('./hooks/useMediaSizes/index.js');
+var index$p = require('./hooks/useOnClickOutside/index.js');
+var index$q = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -35,6 +39,7 @@ var Info = require('./Icons/Info.js');
 var Minus = require('./Icons/Minus.js');
 var More = require('./Icons/More.js');
 var Plus = require('./Icons/Plus.js');
+var Setting = require('./Icons/Setting.js');
 var Trash = require('./Icons/Trash.js');
 var User = require('./Icons/User.js');
 
@@ -62,8 +67,12 @@ exports.SkeletonRect = index$i.SkeletonRect;
 exports.SkeletonText = index$i.SkeletonText;
 exports.Switch = index$j.default;
 exports.THEMES = index$k.THEMES;
-exports.Typography = index$l.default;
-exports.useMediaSizes = index$m.default;
+exports.Tooltip = index$l.default;
+exports.TimeSelect = index$m.default;
+exports.Typography = index$n.default;
+exports.useMediaSizes = index$o.default;
+exports.useOnClickOutside = index$p.default;
+exports.useScrollLock = index$q.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
@@ -75,5 +84,6 @@ exports.Info = Info.default;
 exports.Minus = Minus.default;
 exports.More = More.default;
 exports.Plus = Plus.default;
+exports.Setting = Setting.default;
 exports.Trash = Trash.default;
 exports.User = User.default;

package/package.json

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

package/theme_ba_variables.css

@@ -80,20 +80,23 @@
 --input-primary-border-color-error: #ff564e;
 --input-primary-background-color-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-primary-background-color-checked: #ffce31;
---checkbox-primary-background-color-hovered: #ffce31;
---checkbox-primary-box-shadow-focused: #ffe695;
---checkbox-primary-background-color-active: #ffce31;
---checkbox-primary-border-color-active: #ffce31;
---checkbox-primary-box-shadow-active: #ffce31;
---checkbox-primary-background-color-disabled: #ffe695;
---inputradio-primary-background-color-checked: #ffce31;
---inputradio-primary-background-color-hovered: #ffce31;
---inputradio-primary-box-shadow-focused: #ffe695;
---inputradio-primary-background-color-focused: #ffe695;
---inputradio-primary-border-color-focused: #ffe695;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #ffc818;
---switch-primary-border-color-checked: #ffc818;
+--checkbox-background-color-checked: #ffce31;
+--checkbox-background-color-hovered: #ffce31;
+--checkbox-box-shadow-focused: #ffe695;
+--checkbox-background-color-active: #ffce31;
+--checkbox-border-color-active: #ffce31;
+--checkbox-box-shadow-active: #ffce31;
+--checkbox-background-color-disabled: #ffe695;
+--input-radio-background-color-checked: #ffce31;
+--input-radio-background-color-hovered: #ffce31;
+--input-radio-box-shadow-focused: #ffe695;
+--input-radio-background-color-focused: #ffe695;
+--input-radio-border-color-focused: #ffe695;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #ffc818;
+--switch-border-color-checked: #ffc818;
+--tooltip-background-color: #333;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }

package/theme_default_variables.css

@@ -83,20 +83,23 @@
 --input-primary-border-color-error: #ff564e;
 --input-primary-background-color-error: #FFEAE2;
 --input-primary-box-shadow-color-error: #FFEAE2;
---checkbox-primary-background-color-checked: #067AFF;
---checkbox-primary-background-color-hovered: #067AFF;
---checkbox-primary-box-shadow-focused: #E8F0FE;
---checkbox-primary-background-color-active: #067AFF;
---checkbox-primary-border-color-active: #067AFF;
---checkbox-primary-box-shadow-active: #067AFF;
---checkbox-primary-background-color-disabled: #E8F0FE;
---inputradio-primary-background-color-checked: #067AFF;
---inputradio-primary-background-color-hovered: #067AFF;
---inputradio-primary-box-shadow-focused: #E8F0FE;
---inputradio-primary-background-color-focused: #E8F0FE;
---inputradio-primary-border-color-focused: #E8F0FE;
---switch-primary-background-color: #e6e6e6;
---switch-primary-border-color: #e6e6e6;
---switch-primary-background-color-checked: #0066DC;
---switch-primary-border-color-checked: #0066DC;
+--checkbox-background-color-checked: #067AFF;
+--checkbox-background-color-hovered: #067AFF;
+--checkbox-box-shadow-focused: #E8F0FE;
+--checkbox-background-color-active: #067AFF;
+--checkbox-border-color-active: #067AFF;
+--checkbox-box-shadow-active: #067AFF;
+--checkbox-background-color-disabled: #E8F0FE;
+--input-radio-background-color-checked: #067AFF;
+--input-radio-background-color-hovered: #067AFF;
+--input-radio-box-shadow-focused: #E8F0FE;
+--input-radio-background-color-focused: #E8F0FE;
+--input-radio-border-color-focused: #E8F0FE;
+--switch-background-color: #e6e6e6;
+--switch-border-color: #e6e6e6;
+--switch-background-color-checked: #0066DC;
+--switch-border-color-checked: #0066DC;
+--tooltip-background-color: #000;
+--tooltip-color: #fff;
+--tooltip-border-radius: 4px;
 }