colibri-ui 0.7.57 → 0.7.59

package/esm/Input/index.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { forwardRef } from 'react';
+import React__default, { forwardRef } from 'react';
 import classNames from 'classnames';
 import FormField from '../base/FormField/index.js';
 import InputRoot from '../base/InputRoot/index.js';
@@ -18,12 +18,12 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "onChange", "variant", "size"]);
-  return /*#__PURE__*/React.createElement(FormField, {
+  return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
     hint: hint,
     error: error
-  }, /*#__PURE__*/React.createElement(InputRoot, {
+  }, /*#__PURE__*/React__default.createElement(InputRoot, {
     ref: ref,
     startIcon: startIcon,
     endIcon: endIcon,
@@ -31,7 +31,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
     size: size,
     disabled: !!props.disabled,
     error: error
-  }, /*#__PURE__*/React.createElement(BaseInput, __assign({
+  }, /*#__PURE__*/React__default.createElement(BaseInput, __assign({
     onChange: onChange,
     type: "text"
   }, props))));

package/esm/InputRadio/InputRadio.module.css

@@ -4,9 +4,7 @@
 }
 
 .text {
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
+  flex: 1 1 auto;
   line-height: 18px;
   margin-inline-start: 8px;
 }
@@ -52,21 +50,21 @@
   padding: 0;
   position: absolute;
 }
-.input:not(.input_disabled):not(.input_error):hover + .icon {
+.input:not(.input_disabled, .input_error):hover + .icon {
   border-color: var(--inputradio-primary-background-color-hovered);
 }
-.input:not(.input_disabled):not(.input_error):focus + .icon {
+.input:not(.input_disabled, .input_error):focus + .icon {
   box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
 }
-.input:not(.input_disabled):not(.input_error):active + .icon {
+.input:not(.input_disabled, .input_error):active + .icon {
   background-color: var(--inputradio-primary-background-color-focused);
   border-color: var(--inputradio-primary-border-color-focused);
   box-shadow: 0 0 0 2px var(--inputradio-primary-box-shadow-focused);
 }
-.input:not(.input_disabled):not(.input_error) .input_checked:hover + .icon {
+.input:not(.input_disabled, .input_error) .input_checked:hover + .icon {
   border-color: var(--inputradio-primary-background-color-hovered);
 }
-.input:not(.input_disabled):not(.input_error) .input_checked:active + .icon {
+.input:not(.input_disabled, .input_error) .input_checked:active + .icon {
   background-color: var(--palette-white);
   border: 4px solid var(--inputradio-primary-background-color-checked);
 }
@@ -79,12 +77,12 @@
 }
 .input_disabled + .icon::after {
   background-color: rgba(246, 246, 246, 0.8);
+  border-radius: 50%;
   content: "";
   display: block;
   inset: 0;
   margin: -1px;
   position: absolute;
-  border-radius: 50%;
 }
 .input_checked:disabled + .icon::after {
   margin: -4px;

package/esm/InputRadio/index.js

@@ -1,5 +1,5 @@
 import { __rest, __assign } from 'tslib';
-import React, { memo } from 'react';
+import React__default, { memo } from 'react';
 import classNames from 'classnames/bind';
 import Typography from '../Typography/index.js';
 import styles from './InputRadio.module.css';
@@ -25,19 +25,19 @@ var InputRadio = /*#__PURE__*/memo(function (_a) {
     value = _a.value,
     testid = _a.testid,
     rest = __rest(_a, ["checked", "children", "className", "containerClassName", "disabled", "error", "id", "name", "note", "onBlur", "onFocus", "onChange", "onClick", "onMouseEnter", "style", "text", "value", "testid"]);
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement("label", {
     className: clx(styles.label, className),
     htmlFor: id,
     style: style,
     onClick: onClick,
     onMouseEnter: onMouseEnter,
     "data-testid": testid
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.container, {
       container_disabled: !!disabled,
       container_error: !!error
     }, containerClassName)
-  }, /*#__PURE__*/React.createElement("input", __assign({
+  }, /*#__PURE__*/React__default.createElement("input", __assign({
     type: "radio",
     id: id,
     value: value,
@@ -52,11 +52,11 @@ var InputRadio = /*#__PURE__*/memo(function (_a) {
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur
-  }, rest)), /*#__PURE__*/React.createElement("span", {
+  }, rest)), /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.icon)
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.text)
-  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React.createElement(Typography, {
+  }, !children && text, !text && children)), !!note && ( /*#__PURE__*/React__default.createElement(Typography, {
     tag: "p",
     size: "s",
     className: clx(styles.note)

package/esm/Menu/Menu.module.css

@@ -1,8 +1,8 @@
 .menu {
+  background: var(--palette-white);
+  color: var(--palette-black);
   margin: 0;
-  text-align: left;
   padding: 0;
+  text-align: left;
   user-select: none;
-  color: var(--palette-black);
-  background: var(--palette-white);
 }

package/esm/Menu/components/MenuItem/MenuItem.module.css

@@ -1,18 +1,19 @@
 .item {
+  align-items: center;
   cursor: pointer;
   display: flex;
-  align-items: center;
-  list-style: none;
-  padding: 8px 6px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 400;
-  font-size: 16px;
+  justify-content: space-between;
   line-height: 22px;
+  list-style: none;
+  padding: 8px 6px;
 }
 .item > * {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .variant_primary {
@@ -29,8 +30,8 @@
 }
 
 .disabled {
+  background-color: var(--palette-white);
+  color: var(--palette-bg-2);
   cursor: not-allowed;
   pointer-events: none;
-  color: var(--palette-bg-2);
-  background-color: var(--palette-white);
 }

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

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import React from "react";
 import type { MenuItemProps } from "./index.props";
-declare const MenuItem: FC<MenuItemProps>;
+declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.RefAttributes<HTMLLIElement>>;
 export default MenuItem;

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

@@ -1,28 +1,28 @@
-import React from 'react';
+import React__default, { forwardRef } from 'react';
 import classNames from 'classnames/bind';
 import styles from './MenuItem.module.css';
 
 var clx = classNames.bind(styles);
-var MenuItem = function MenuItem(_a) {
+var MenuItem = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
-    _c = _a.isSelected,
-    isSelected = _c === void 0 ? false : _c,
-    _d = _a.variant,
-    variant = _d === void 0 ? "primary" : _d,
+    isSelected = _a.isSelected,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
     onClick = _a.onClick,
     children = _a.children;
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React__default.createElement("li", {
+    ref: ref,
+    "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "#B8D2FF" : ""
+      backgroundColor: isSelected ? "var(--palette-primary-1)" : "var(--palette-white)"
     },
-    className: clx((_b = {
-      item: true,
+    className: clx(styles.item, (_b = {
       disabled: disabled
     }, _b["variant_".concat(variant)] = !!variant, _b), className),
     onClick: onClick
   }, children);
-};
+});
 
 export { MenuItem as default };

package/esm/Menu/index.d.ts

@@ -1,3 +1,4 @@
-import type { MenuProps } from "./index.props";
-declare const Menu: MenuProps;
+import React from "react";
+import type { Props } from "./index.props";
+declare const Menu: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLUListElement>>;
 export default Menu;

package/esm/Menu/index.js

@@ -1,9 +1,8 @@
-import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
+import React__default, { forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
 import classNames from 'classnames';
-import MenuItem from './components/MenuItem/index.js';
 import styles from './Menu.module.css';
 
-var Menu = function Menu(_a) {
+var Menu = /*#__PURE__*/forwardRef(function (_a, ref) {
   var selected = _a.selected,
     variant = _a.variant,
     className = _a.className,
@@ -26,10 +25,10 @@ var Menu = function Menu(_a) {
       return child;
     });
   }, [children, selected, onClick]);
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React__default.createElement("ul", {
+    ref: ref,
     className: classNames(styles.menu, className)
   }, renderChild);
-};
-Menu.Item = MenuItem;
+});
 
 export { Menu as default };

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

@@ -1,15 +1,10 @@
-import type { ReactElement, MouseEvent, FC } from "react";
-import type MenuItem from "./components/MenuItem";
+import type { ReactElement, MouseEvent } from "react";
 import type { MenuItemProps } from "./components/MenuItem/index.props";
 export type MenuVariant = "primary";
-type Props = {
+export type Props = {
     selected?: string[];
     variant?: MenuVariant;
     className?: string;
     onClick?: (key: string, e: MouseEvent) => void;
     children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
 };
-export interface MenuProps extends FC<Props> {
-    Item: typeof MenuItem;
-}
-export {};

package/esm/Modal/Modal.module.css

@@ -1,51 +1,51 @@
 .root {
+  bottom: 0;
+  height: 100%;
   position: fixed;
   top: 0;
-  bottom: 0;
   width: 100%;
-  height: 100%;
   z-index: 1000;
 }
 
-.titleWrapper {
-  display: flex;
-  justify-content: space-between;
+.title-wrapper {
   align-items: center;
   border-bottom: 1px solid var(--palette-bg-2);
+  display: flex;
+  justify-content: space-between;
 }
 
-.closeWrapper {
+.close-wrapper {
   display: flex;
   justify-content: flex-end;
 }
 
-.modalOverlay {
+.modal-overlay {
+  background-color: rgba(0, 0, 0, 0.25);
+  bottom: 0;
+  height: 100%;
   position: fixed;
   top: 0;
-  bottom: 0;
   width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.25);
 }
 
-.modalWrapper {
+.modal-wrapper {
+  background-color: var(--palette-white);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
   overflow: hidden;
   position: absolute;
-  left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--palette-white);
 }
-.modalWrapper_mobile {
+.modal-wrapper_mobile {
   height: 100%;
   width: 100%;
 }
-.modalWrapper_desktop {
+.modal-wrapper_desktop {
+  border: solid 1px var(--palette-bg-2);
+  border-radius: 8px;
   max-height: calc(100vh - 100px);
   max-width: calc(100vw - 100px);
   min-width: 515px;
-  border: solid 1px var(--palette-bg-2);
-  border-radius: 8px;
 }

package/esm/Modal/components/Close/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames';
 import '../../../Icons/index.js';
 import styles from './Close.module.css';
@@ -6,7 +6,7 @@ import CloseIcon from '../../../Icons/Close.js';
 
 var Close = function Close(_a) {
   var onClick = _a.onClick;
-  return /*#__PURE__*/React.createElement(CloseIcon, {
+  return /*#__PURE__*/React__default.createElement(CloseIcon, {
     className: classNames(styles.close),
     onClick: onClick
   });

package/esm/Modal/components/Content/Content.module.css

@@ -1,6 +1,6 @@
 .root {
-  overflow-y: auto;
   display: flex;
   min-height: 100%;
+  overflow-y: auto;
   padding: 10px;
 }

package/esm/Modal/components/Content/index.js

@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import React from 'react';
+import React__default from 'react';
 import styles from './Content.module.css';
 
 var Content = function Content(_a) {
   var children = _a.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classNames(styles.root)
   }, children);
 };

package/esm/Modal/components/Title/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import classNames from 'classnames/bind';
 import Typography from '../../../Typography/index.js';
 import styles from './Title.module.css';
@@ -6,11 +6,11 @@ import styles from './Title.module.css';
 var clx = classNames.bind(styles);
 var Title = function Title(_a) {
   var children = _a.children;
-  return /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/React__default.createElement(Typography, {
     tag: "h3",
     size: "h3",
     className: clx(styles.title)
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.wrapper)
   }, children));
 };

package/esm/Modal/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useMemo, useEffect } from 'react';
+import React__default, { useRef, useMemo, useEffect } from 'react';
 import classNames from 'classnames/bind';
 import useScrollLock from '../hooks/useScrollLock/index.js';
 import useTrapFocus from '../hooks/useTrapFocus/index.js';
@@ -36,26 +36,26 @@ var Modal = function Modal(_a) {
       document.removeEventListener("keydown", onEsc);
     };
   }, [onCloseHandler]);
-  return /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.root)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: clx(styles.modalOverlay),
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["modal-overlay"]),
     onClick: onCloseHandler
-  }), /*#__PURE__*/React.createElement("div", {
-    className: clx(styles.modalWrapper, {
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["modal-wrapper"], {
       modalWrapper_desktop: isDesktop ? 1 : 0,
       modalWrapper_mobile: !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
-  }, title ? ( /*#__PURE__*/React.createElement("div", {
-    className: clx(styles.titleWrapper)
-  }, /*#__PURE__*/React.createElement(Title, null, title), /*#__PURE__*/React.createElement(Close, {
+  }, title ? ( /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["title-wrapper"])
+  }, /*#__PURE__*/React__default.createElement(Title, null, title), /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler
-  }))) : ( /*#__PURE__*/React.createElement("div", {
-    className: clx(styles.closeWrapper)
-  }, /*#__PURE__*/React.createElement(Close, {
+  }))) : ( /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["close-wrapper"])
+  }, /*#__PURE__*/React__default.createElement(Close, {
     onClick: onCloseHandler
-  }))), /*#__PURE__*/React.createElement(Content, null, children))));
+  }))), /*#__PURE__*/React__default.createElement(Content, null, children))));
 };
 
 export { Modal as default };

package/esm/RadioGroup/Radio.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import InputRadio from '../InputRadio/index.js';
 
 var Radio = function Radio(_a) {
@@ -17,7 +17,7 @@ var Radio = function Radio(_a) {
     _c = _a.disabled,
     disabled = _c === void 0 ? false : _c,
     testId = _a.testId;
-  return /*#__PURE__*/React.createElement(InputRadio, {
+  return /*#__PURE__*/React__default.createElement(InputRadio, {
     id: id,
     value: value,
     checked: checked,

package/esm/RadioGroup/index.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from "react";
+import React from "react";
+import type { FC } from "react";
 export interface Option {
     id?: string;
     val: string | number;

package/esm/RadioGroup/index.js

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React__default, { memo } from 'react';
 import classNames from 'classnames/bind';
 import Radio from './Radio.js';
 import styles from './RadioGroup.module.css';
@@ -18,7 +18,7 @@ var RadioGroup = /*#__PURE__*/memo(function (_a) {
     disabled = _d === void 0 ? false : _d,
     _e = _a.hasError,
     hasError = _e === void 0 ? false : _e;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: clx(styles.group, {
       column: column,
       wrapped: wrapped,
@@ -34,7 +34,7 @@ var RadioGroup = /*#__PURE__*/memo(function (_a) {
       onMouseEnter = option.onMouseEnter,
       optionClassName = option.className,
       optionDisabled = option.disabled;
-    return /*#__PURE__*/React.createElement(Radio, {
+    return /*#__PURE__*/React__default.createElement(Radio, {
       key: optionVal,
       id: id,
       testId: id,

package/esm/Select/components/MenuOverlay/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface Props<T extends string> {
+    options: {
+        value: T;
+        label: React.ReactNode;
+        selected: boolean;
+    }[];
+    onChange: (value: T) => void;
+}
+declare const MenuOverlay: <T extends string>({ options, onChange }: Props<T>) => React.JSX.Element;
+export default MenuOverlay;

package/esm/Select/components/MenuOverlay/index.js

@@ -0,0 +1,53 @@
+import React__default, { useState, useRef, useCallback, useLayoutEffect } from 'react';
+import classNames from 'classnames/bind';
+import Menu from '../../../Menu/index.js';
+import SelectItem from '../MenuOverlayItem/index.js';
+import styles from './index.module.css';
+
+var clx = classNames.bind(styles);
+var OFFSET_ITEMS_COUNT = 2;
+var MenuOverlay = function MenuOverlay(_a) {
+  var options = _a.options,
+    onChange = _a.onChange;
+  var _b = useState(),
+    selected = _b[0],
+    setSelected = _b[1];
+  var _c = useState({
+      top: 0,
+      height: 0
+    }),
+    scrollView = _c[0],
+    setScrollView = _c[1];
+  var listRef = useRef(null);
+  var rootRef = useRef(null);
+  var handleSelect = useCallback(function (option, key) {
+    onChange(option.value);
+    setSelected(key.split(" "));
+  }, [onChange]);
+  useLayoutEffect(function () {
+    if (!rootRef || !rootRef.current) {
+      return;
+    }
+    rootRef.current.scrollTo({
+      top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
+    });
+  }, [scrollView, rootRef]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    ref: rootRef,
+    className: clx(styles.root)
+  }, /*#__PURE__*/React__default.createElement(Menu, {
+    ref: listRef,
+    selected: selected
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React__default.createElement(SelectItem, {
+      setScrollView: setScrollView,
+      option: option,
+      key: "item-".concat(index),
+      onClick: function onClick() {
+        return handleSelect(option, "item-".concat(index));
+      }
+    });
+  })));
+};
+
+export { MenuOverlay as default };

package/esm/Select/components/MenuOverlay/index.module.css

@@ -0,0 +1,4 @@
+.root {
+  max-height: 140px;
+  overflow-y: auto;
+}

package/esm/Select/components/MenuOverlayItem/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { Coordinates } from "../../index.props";
+type SelectItemProps = {
+    option: {
+        value: string;
+        label: React.ReactNode;
+        selected: boolean;
+    };
+    onClick?: () => void;
+    setScrollView: (value: Coordinates) => void;
+};
+declare const SelectItem: ({ option, onClick, setScrollView }: SelectItemProps) => React.JSX.Element;
+export default SelectItem;

package/esm/Select/components/MenuOverlayItem/index.js

@@ -0,0 +1,37 @@
+import React__default, { useRef, useLayoutEffect } from 'react';
+import MenuItem from '../../../Menu/components/MenuItem/index.js';
+import Check from '../../../Icons/Check.js';
+
+var SelectItem = function SelectItem(_a) {
+  var option = _a.option,
+    onClick = _a.onClick,
+    setScrollView = _a.setScrollView;
+  var ref = useRef(null);
+  function scrollToItem() {
+    if (!ref.current) {
+      return;
+    }
+    var _a = ref.current,
+      offsetTop = _a.offsetTop,
+      offsetHeight = _a.offsetHeight;
+    setScrollView({
+      top: offsetTop,
+      height: offsetHeight
+    });
+  }
+  useLayoutEffect(function () {
+    if (option.selected) {
+      scrollToItem();
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement(MenuItem, {
+    ref: ref,
+    onClick: onClick,
+    isSelected: option.selected
+  }, option.label, option.selected && /*#__PURE__*/React__default.createElement(Check, {
+    width: 16,
+    height: 16
+  }));
+};
+
+export { SelectItem as default };

package/esm/Select/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { SelectProps } from "./index.props";
-declare const Select: <T extends string | number>({ options, value, zIndex, label, hint, error, placeholder, disabled, listHeight, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, zIndex, label, hint, error, placeholder, disabled, fullWidth, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;