colibri-ui 0.7.57 → 0.7.59

package/Grid/Grid.module.css

@@ -1,19 +1,14 @@
-.root {
-  display: grid;
-  grid-gap: 10px;
-}
-
 .root {
   display: flex;
   flex-wrap: wrap;
 }
 
-.root {
-  display: grid;
-  grid-auto-rows: minmax(150px, auto);
-}
-
 @supports (display: grid) {
+  .root {
+    display: grid;
+    grid-auto-rows: minmax(150px, auto);
+    grid-gap: 10px;
+  }
   .root > * {
     margin: 0;
   }

package/Grid/Item/Grid-Item.module.css

@@ -3,7 +3,7 @@
 }
 
 .item {
+  flex: 1 1 250px;
   margin-left: 5px;
   margin-right: 5px;
-  flex: 1 1 250px;
 }

package/Grid/Item/index.js

@@ -17,9 +17,11 @@ var GridItem = function GridItem(_a) {
   var children = _a.children,
     _c = _a.fullWidth,
     fullWidth = _c === void 0 ? false : _c,
-    className = _a.className;
+    className = _a.className,
+    style = _a.style;
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: classNames__default.default(styles__default.default.item, (_b = {}, _b[styles__default.default.full] = fullWidth, _b), className)
+    className: classNames__default.default(styles__default.default.item, (_b = {}, _b[styles__default.default.full] = fullWidth, _b), className),
+    style: style
   }, children);
 };
 

package/Grid/Item/index.props.d.ts

@@ -1,6 +1,7 @@
-import type { ReactNode } from "react";
+import type { CSSProperties, ReactNode } from "react";
 export type GridItemProps = {
     children: ReactNode;
     fullWidth?: boolean;
     className?: string;
+    style?: CSSProperties;
 };

package/Icons/Check.d.ts

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

package/Icons/Check.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Check = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = tslib.__rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    ref: ref
+  }, props, {
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }), /*#__PURE__*/React__default.default.createElement("g", {
+    clipPath: "url(#a)"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: fill,
+    d: "m9.109 15.441-5.23-5.402L2 11.69 9.075 19 21.443 6.682 19.595 5z"
+  })), /*#__PURE__*/React__default.default.createElement("defs", null, /*#__PURE__*/React__default.default.createElement("clipPath", {
+    id: "a"
+  }, /*#__PURE__*/React__default.default.createElement("path", {
+    fill: "#fff",
+    d: "M0 0h24v24H0z"
+  }))));
+});
+
+exports.default = Check;

package/Icons/Setting.d.ts

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

package/Image/Image.module.css

@@ -1,18 +1,17 @@
 .root {
+  height: 100%;
+  left: 0;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
-  height: 100%;
 }
 .root img {
-  width: 100%;
-  height: 100%;
-  visibility: visible;
-  font: 0/0 a;
   border: 0;
+  height: 100%;
   object-fit: cover;
   text-indent: -100rem;
+  visibility: visible;
+  width: 100%;
 }
 .root img :-moz-broken {
   opacity: 0;

package/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/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/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/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/Menu/components/MenuItem/index.js

@@ -13,26 +13,26 @@ 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(_a) {
+var MenuItem = /*#__PURE__*/React.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__default.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__default.default.item, (_b = {
       disabled: disabled
     }, _b["variant_".concat(variant)] = !!variant, _b), className),
     onClick: onClick
   }, children);
-};
+});
 
 exports.default = MenuItem;

package/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/Menu/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classNames = require('classnames');
-var index = require('./components/MenuItem/index.js');
 var styles = require('./Menu.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -13,7 +12,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Menu = function Menu(_a) {
+var Menu = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var selected = _a.selected,
     variant = _a.variant,
     className = _a.className,
@@ -37,9 +36,9 @@ var Menu = function Menu(_a) {
     });
   }, [children, selected, onClick]);
   return /*#__PURE__*/React__default.default.createElement("ul", {
+    ref: ref,
     className: classNames__default.default(styles__default.default.menu, className)
   }, renderChild);
-};
-Menu.Item = index.default;
+});
 
 exports.default = Menu;

package/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/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/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/Modal/index.js

@@ -49,20 +49,20 @@ var Modal = function Modal(_a) {
   return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.root)
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.modalOverlay),
+    className: clx(styles__default.default["modal-overlay"]),
     onClick: onCloseHandler
   }), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.modalWrapper, {
+    className: clx(styles__default.default["modal-wrapper"], {
       modalWrapper_desktop: isDesktop ? 1 : 0,
       modalWrapper_mobile: !isDesktop ? 1 : 0
     }, className),
     ref: modalRef
   }, title ? ( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.titleWrapper)
+    className: clx(styles__default.default["title-wrapper"])
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
   }))) : ( /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.closeWrapper)
+    className: clx(styles__default.default["close-wrapper"])
   }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
     onClick: onCloseHandler
   }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));

package/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/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/Select/components/MenuOverlay/index.js

@@ -0,0 +1,63 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Menu/index.js');
+var index$1 = require('../MenuOverlayItem/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var OFFSET_ITEMS_COUNT = 2;
+var MenuOverlay = function MenuOverlay(_a) {
+  var options = _a.options,
+    onChange = _a.onChange;
+  var _b = React.useState(),
+    selected = _b[0],
+    setSelected = _b[1];
+  var _c = React.useState({
+      top: 0,
+      height: 0
+    }),
+    scrollView = _c[0],
+    setScrollView = _c[1];
+  var listRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var handleSelect = React.useCallback(function (option, key) {
+    onChange(option.value);
+    setSelected(key.split(" "));
+  }, [onChange]);
+  React.useLayoutEffect(function () {
+    if (!rootRef || !rootRef.current) {
+      return;
+    }
+    rootRef.current.scrollTo({
+      top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
+    });
+  }, [scrollView, rootRef]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    ref: rootRef,
+    className: clx(styles__default.default.root)
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    ref: listRef,
+    selected: selected
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+      setScrollView: setScrollView,
+      option: option,
+      key: "item-".concat(index),
+      onClick: function onClick() {
+        return handleSelect(option, "item-".concat(index));
+      }
+    });
+  })));
+};
+
+exports.default = MenuOverlay;

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

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

package/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/Select/components/MenuOverlayItem/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../Menu/components/MenuItem/index.js');
+var Check = require('../../../Icons/Check.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var SelectItem = function SelectItem(_a) {
+  var option = _a.option,
+    onClick = _a.onClick,
+    setScrollView = _a.setScrollView;
+  var ref = React.useRef(null);
+  function scrollToItem() {
+    if (!ref.current) {
+      return;
+    }
+    var _a = ref.current,
+      offsetTop = _a.offsetTop,
+      offsetHeight = _a.offsetHeight;
+    setScrollView({
+      top: offsetTop,
+      height: offsetHeight
+    });
+  }
+  React.useLayoutEffect(function () {
+    if (option.selected) {
+      scrollToItem();
+    }
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    ref: ref,
+    onClick: onClick,
+    isSelected: option.selected
+  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.default, {
+    width: 16,
+    height: 16
+  }));
+};
+
+exports.default = SelectItem;

package/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;