colibri-ui 0.7.57 → 0.7.59

package/Select/index.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var classNames = require('classnames/bind');
 var Chevron = require('../Icons/Chevron.js');
 var index$3 = require('../base/InputRoot/index.js');
 var index = require('../base/FormField/index.js');
 var index$1 = require('../Dropdown/index.js');
-var index$2 = require('../Menu/index.js');
-var styles = require('./Select.module.css');
-var classNames = require('classnames/bind');
+var styles = require('./index.module.css');
+var index$2 = require('./components/MenuOverlay/index.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
 var Select = function Select(_a) {
@@ -28,14 +28,12 @@ var Select = function Select(_a) {
     error = _a.error,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
-    _c = _a.listHeight,
-    listHeight = _c === void 0 ? 130 : _c,
-    _d = _a.fullWidth,
-    fullWidth = _d === void 0 ? false : _d,
+    _c = _a.fullWidth,
+    fullWidth = _c === void 0 ? false : _c,
     onChange = _a.onChange;
-  var _e = React.useState(false),
-    isOpen = _e[0],
-    setIsOpen = _e[1];
+  var _d = React.useState(false),
+    isOpen = _d[0],
+    setIsOpen = _d[1];
   var preparedOptions = React.useMemo(function () {
     return options.map(function (_a) {
       var lvalue = _a.value,
@@ -54,13 +52,9 @@ var Select = function Select(_a) {
       return selected;
     })) === null || _a === void 0 ? void 0 : _a.label;
   }, [preparedOptions]);
-  var handleSelect = React.useCallback(function (_a) {
-    var lvalue = _a.value;
-    onChange(lvalue);
-  }, [onChange]);
   return /*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx(styles__default.default.formField, {
-      formField_fullWidth: fullWidth ? 1 : 0
+    className: clx(styles__default.default["form-field"], {
+      "form-field_fullWidth": fullWidth ? 1 : 0
     }),
     label: label,
     hint: hint,
@@ -71,24 +65,14 @@ var Select = function Select(_a) {
     trigger: ["click"],
     zIndex: zIndex,
     disabled: !!disabled,
-    overlay: /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(styles__default.default.menuWrapper),
-      style: {
-        maxHeight: "".concat(listHeight, "px")
-      }
-    }, /*#__PURE__*/React__default.default.createElement(index$2.default, null, preparedOptions.map(function (option, i) {
-      return /*#__PURE__*/React__default.default.createElement(index$2.default.Item, {
-        key: "".concat(option.label, "-").concat(i),
-        onClick: function onClick() {
-          return handleSelect(option);
-        },
-        isSelected: option.selected
-      }, option.label);
-    }))),
+    overlay: /*#__PURE__*/React__default.default.createElement(index$2.default, {
+      options: preparedOptions,
+      onChange: onChange
+    }),
     samewidth: true
   }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
     error: error,
-    className: clx(styles__default.default.inputRoot),
+    className: clx(styles__default.default.root),
     endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
       className: clx(styles__default.default.icon, {
         icon_isOpen: isOpen ? 1 : 0
@@ -96,13 +80,14 @@ var Select = function Select(_a) {
     }),
     disabled: !!disabled
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.baseInput)
+    className: clx(styles__default.default["base-input"]),
+    "data-component": "base-input"
   }, prepraredLabel !== null && prepraredLabel !== void 0 ? prepraredLabel : ( /*#__PURE__*/React__default.default.createElement("span", {
     className: clx(styles__default.default.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
     type: "hidden",
     tabIndex: -1,
-    value: value
+    value: value || ""
   }))));
 };
 

package/Select/{Select.module.css → index.module.css}

@@ -1,39 +1,34 @@
-.menuWrapper {
-  max-height: 140px;
-  overflow-y: auto;
+.root {
+  cursor: pointer;
 }
 
 .icon_isOpen {
   transform: rotate(180deg);
 }
 
-.inputRoot {
-  cursor: pointer;
-}
-
-.formField_fullWidth {
+.form-field_fullWidth {
   width: 100%;
 }
 
-.baseInput {
-  margin: 7px 0;
+.base-input {
   background: transparent;
   border: none;
-  outline: none;
   flex: 1;
+  margin: 7px 0;
+  outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.baseInput ::placeholder {
+.base-input ::placeholder {
   color: var(--palette-bg-2);
 }
 
 .placeholder {
-  user-select: none;
-  white-space: nowrap;
+  color: var(--input-primary-plaseholder-color);
+  display: block;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 100%;
-  display: block;
-  color: var(--input-primary-plaseholder-color);
+  user-select: none;
+  white-space: nowrap;
 }

package/Select/index.props.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
-export interface IOption<T extends string | number> {
+export interface IOption<T extends string> {
     value: T;
     label: ReactNode;
 }
-export interface SelectProps<T extends string | number> extends Omit<FormFieldProps, "children"> {
+export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
     options: IOption<T>[];
     value?: T;
     zIndex?: number;
@@ -12,5 +12,8 @@ export interface SelectProps<T extends string | number> extends Omit<FormFieldPr
     disabled?: boolean;
     placeholder?: string;
     fullWidth?: boolean;
-    listHeight?: number;
 }
+export type Coordinates = {
+    top: number;
+    height: number;
+};

package/Skeleton/Skeleton.module.css

@@ -1,6 +1,6 @@
 .rect {
-  background-color: var(--palette-bg-2);
   animation: skeleton-loading 1.5s ease-in-out infinite;
+  background-color: var(--palette-bg-2);
 }
 @keyframes skeleton-loading {
   0% {
@@ -15,10 +15,10 @@
 }
 
 .text {
-  height: 12px;
-  border-radius: 6px;
-  background-color: var(--palette-bg-2);
   animation: skeleton-loading 1.5s ease-in-out infinite;
+  background-color: var(--palette-bg-2);
+  border-radius: 6px;
+  height: 12px;
 }
 @keyframes skeleton-loading {
   0% {

package/Switch/Switch.module.css

@@ -1,7 +1,7 @@
 .root {
-  position: relative;
   display: inline-flex;
   padding: 6px;
+  position: relative;
 }
 .root_disabled {
   opacity: 0.7;
@@ -9,48 +9,48 @@
 }
 
 .wrapper {
-  width: 40px;
+  border-radius: 17px;
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
   height: 22px;
   position: relative;
-  box-sizing: border-box;
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 17px;
+  width: 40px;
 }
 .wrapper_variant_primary {
-  border-color: var(--switch-primary-border-color);
   background-color: var(--switch-primary-background-color);
+  border-color: var(--switch-primary-border-color);
 }
 
-.baseSwitch {
-  width: 16px;
-  height: 16px;
+.base-switch {
+  background: var(--palette-white);
   border-radius: 50%;
+  height: 16px;
+  left: 2px;
   position: absolute;
   top: 2px;
-  left: 2px;
   transition: transform 150ms;
-  background: var(--palette-white);
+  width: 16px;
 }
 
 .checkbox {
-  position: absolute;
-  z-index: 1;
-  left: 0px;
-  top: 0px;
-  width: 100%;
-  height: 100%;
+  border: none;
   cursor: pointer;
-  opacity: 0;
+  height: 100%;
+  left: 0;
   margin: 0;
-  border: none;
+  opacity: 0;
   outline: none;
   padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
 }
 .checkbox:checked + .wrapper {
-  border-color: var(--switch-primary-border-color-checked);
   background-color: var(--switch-primary-background-color-checked);
+  border-color: var(--switch-primary-border-color-checked);
 }
-.checkbox:checked + .wrapper .baseSwitch {
+.checkbox:checked + .wrapper .base-switch {
   transform: translateX(18px);
 }

package/Switch/index.js

@@ -32,7 +32,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, props)), /*#__PURE__*/React__default.default.createElement("div", {
     className: clx(styles__default.default.wrapper, (_b = {}, _b["wrapper_variant_".concat(variant)] = variant ? 1 : 0, _b))
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.baseSwitch)
+    className: clx(styles__default.default["base-switch"])
   })));
 });
 

package/Theme/colors/common.d.ts

@@ -0,0 +1,27 @@
+export declare const Common: {
+    WHITE: string;
+    BLACK: string;
+};
+export declare const Backgrounds: {
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+};
+export declare const Accents: {
+    ALERT: string;
+    SUCCESS: string;
+};
+export declare const Color: {
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+    ALERT: string;
+    SUCCESS: string;
+    WHITE: string;
+    BLACK: string;
+};
+export default Color;

package/Theme/colors/common.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+var Common = {
+  WHITE: "#fff",
+  BLACK: "#000"
+};
+var Backgrounds = {
+  BG_1: "#f2f2f2",
+  BG_2: "#e6e6e6",
+  BG_3: "#dbdbdb",
+  BG_4: "#b3b3b3",
+  BG_5: "#999"
+};
+var Accents = {
+  ALERT: "#ff564e",
+  SUCCESS: "#28bc00"
+};
+var Color = tslib.__assign(tslib.__assign(tslib.__assign({}, Common), Accents), Backgrounds);
+
+exports.Accents = Accents;
+exports.Backgrounds = Backgrounds;
+exports.Color = Color;
+exports.Common = Common;
+exports.default = Color;

package/Theme/colors/index.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
+    BG_1: string;
+    BG_2: string;
+    BG_3: string;
+    BG_4: string;
+    BG_5: string;
+    ALERT: string;
+    SUCCESS: string;
+    WHITE: string;
+    BLACK: string;
+};
+export default _default;

package/Theme/colors/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var theme_default = require('./theme_default.js');
+var theme_buenos_aires = require('./theme_buenos_aires.js');
+var common = require('./common.js');
+
+var Color = tslib.__assign(tslib.__assign(tslib.__assign({}, common.Color), theme_buenos_aires.Color), theme_default.Color);
+
+exports.default = Color;

package/Theme/colors/theme_buenos_aires.d.ts

@@ -0,0 +1,47 @@
+export declare const PrimaryBA: {
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
+};
+export declare const SecondaryBA: {
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+};
+export declare const TretiaryBA: {
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+};
+export declare const BrandBA: {
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
+};
+export declare const Color: {
+    TRETIARY_BA_1: string;
+    TRETIARY_BA_2: string;
+    TRETIARY_BA_3: string;
+    TRETIARY_BA_4: string;
+    TRETIARY_BA_5: string;
+    SECONDARY_BA_1: string;
+    SECONDARY_BA_2: string;
+    SECONDARY_BA_3: string;
+    SECONDARY_BA_4: string;
+    SECONDARY_BA_5: string;
+    PRIMARY_BA_1: string;
+    PRIMARY_BA_2: string;
+    PRIMARY_BA_3: string;
+    PRIMARY_BA_4: string;
+    PRIMARY_BA_5: string;
+    BRAND_BA_1: string;
+    BRAND_BA_2: string;
+    BRAND_BA_3: string;
+};
+export default Color;

package/Theme/colors/theme_buenos_aires.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+var PrimaryBA = {
+  PRIMARY_BA_1: "rgba(38, 49, 129, .07)",
+  PRIMARY_BA_2: "rgba(38, 49, 129, .3)",
+  PRIMARY_BA_3: "rgba(38, 49, 129, .4)",
+  PRIMARY_BA_4: "rgba(38, 49, 129, .6)",
+  PRIMARY_BA_5: "rgba(38, 49, 129, .8)"
+};
+var SecondaryBA = {
+  SECONDARY_BA_1: "#d9d9d9",
+  SECONDARY_BA_2: "#bbb",
+  SECONDARY_BA_3: "#636363",
+  SECONDARY_BA_4: "#313131",
+  SECONDARY_BA_5: "#1a1a1a"
+};
+var TretiaryBA = {
+  TRETIARY_BA_1: "#EDF1F5",
+  TRETIARY_BA_2: "#d3dbe3",
+  TRETIARY_BA_3: "#c5cfda",
+  TRETIARY_BA_4: "#b1bcc8",
+  TRETIARY_BA_5: "#87929d"
+};
+var BrandBA = {
+  BRAND_BA_1: "#B54141",
+  BRAND_BA_2: "#fffbe9",
+  BRAND_BA_3: "#D5D500"
+};
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, BrandBA), PrimaryBA), SecondaryBA), TretiaryBA);
+
+exports.BrandBA = BrandBA;
+exports.Color = Color;
+exports.PrimaryBA = PrimaryBA;
+exports.SecondaryBA = SecondaryBA;
+exports.TretiaryBA = TretiaryBA;
+exports.default = Color;

package/Theme/colors/theme_default.d.ts

@@ -0,0 +1,47 @@
+export declare const Primary: {
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
+};
+export declare const Secondary: {
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
+};
+export declare const Tretiary: {
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
+};
+export declare const Brand: {
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
+};
+export declare const Color: {
+    TRETIARY_1: string;
+    TRETIARY_2: string;
+    TRETIARY_3: string;
+    TRETIARY_4: string;
+    TRETIARY_5: string;
+    SECONDARY_1: string;
+    SECONDARY_2: string;
+    SECONDARY_3: string;
+    SECONDARY_4: string;
+    SECONDARY_5: string;
+    PRIMARY_1: string;
+    PRIMARY_2: string;
+    PRIMARY_3: string;
+    PRIMARY_4: string;
+    PRIMARY_5: string;
+    BRAND_DEFAULT_1: string;
+    BRAND_DEFAULT_2: string;
+    BRAND_DEFAULT_3: string;
+};
+export default Color;

package/Theme/colors/theme_default.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+
+var Primary = {
+  PRIMARY_1: "#E8F0FE",
+  PRIMARY_2: "#B8D2FF",
+  PRIMARY_3: "#73ABF8",
+  PRIMARY_4: "#067AFF",
+  PRIMARY_5: "#0066DC"
+};
+var Secondary = {
+  SECONDARY_1: "#fff1db",
+  SECONDARY_2: "#ffdaa3",
+  SECONDARY_3: "#ffca79",
+  SECONDARY_4: "#f4b968",
+  SECONDARY_5: "#ffab0f"
+};
+var Tretiary = {
+  TRETIARY_1: "#FFF5F0",
+  TRETIARY_2: "#FFEAE2",
+  TRETIARY_3: "#FFD8CA",
+  TRETIARY_4: "#FFA384 ",
+  TRETIARY_5: "#fc5200"
+};
+var Brand = {
+  BRAND_DEFAULT_1: "#F393D2",
+  BRAND_DEFAULT_2: "#4BDCF8",
+  BRAND_DEFAULT_3: "#D5D500"
+};
+var Color = tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, Brand), Primary), Secondary), Tretiary);
+
+exports.Brand = Brand;
+exports.Color = Color;
+exports.Primary = Primary;
+exports.Secondary = Secondary;
+exports.Tretiary = Tretiary;
+exports.default = Color;

package/Theme/global.css

@@ -10,14 +10,16 @@
   background: none;
 }
 [data-page=colibri-ui] * {
-  box-sizing: border-box;
   border: none;
-  outline: none;
-  text-decoration: none;
+  box-sizing: border-box;
   margin: 0;
+  outline: none;
   padding: 0;
+  text-decoration: none;
 }
-[data-page=colibri-ui] *, [data-page=colibri-ui] *::before, [data-page=colibri-ui] *::after {
+[data-page=colibri-ui] *,
+[data-page=colibri-ui] *::before,
+[data-page=colibri-ui] *::after {
   box-sizing: inherit;
 }
 [data-page=colibri-ui] input,
@@ -34,6 +36,6 @@
 [data-page=colibri-ui] h4,
 [data-page=colibri-ui] h5,
 [data-page=colibri-ui] h6 {
-  margin: 0;
   color: inherit;
+  margin: 0;
 }

package/Theme/index.d.ts

@@ -61,6 +61,18 @@ export declare const THEMES: {
         "button-pseudo-color-disabled": string;
         "button-pseudo-background-color-disabled": string;
         "button-pseudo-border-color-disabled": string;
+        "button-outline-color": string;
+        "button-outline-background-color": string;
+        "button-outline-border-color": string;
+        "button-outline-color-hovered": string;
+        "button-outline-background-color-hovered": string;
+        "button-outline-border-color-hovered": string;
+        "button-outline-color-active": string;
+        "button-outline-background-color-active": string;
+        "button-outline-border-color-active": string;
+        "button-outline-color-disabled": string;
+        "button-outline-background-color-disabled": string;
+        "button-outline-border-color-disabled": string;
         "button-clear-color": string;
         "button-clear-color-hovered": string;
         "button-clear-color-active": string;

package/Theme/themes/buenos_aires.js

@@ -2,15 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var color = require('../color.js');
+var index = require('../colors/index.js');
 
 var THEME_BA = {
-  "palette-bg-3": color.Color.BG_3,
-  "palette-black": color.Color.BLACK,
-  "palette-white": color.Color.WHITE,
-  "palette-brand-ba-1": color.Color.BRAND_BA_1,
-  "palette-brand-ba-2": color.Color.BRAND_BA_2,
-  "palette-brand-ba-3": color.Color.BRAND_BA_3
+  "palette-bg-3": index.default.BG_3,
+  "palette-black": index.default.BLACK,
+  "palette-white": index.default.WHITE,
+  "palette-brand-ba-1": index.default.BRAND_BA_1,
+  "palette-brand-ba-2": index.default.BRAND_BA_2,
+  "palette-brand-ba-3": index.default.BRAND_BA_3
 };
 
 exports.default = THEME_BA;

package/Theme/themes/default.d.ts

@@ -60,6 +60,18 @@ declare const _default: {
     "button-pseudo-color-disabled": string;
     "button-pseudo-background-color-disabled": string;
     "button-pseudo-border-color-disabled": string;
+    "button-outline-color": string;
+    "button-outline-background-color": string;
+    "button-outline-border-color": string;
+    "button-outline-color-hovered": string;
+    "button-outline-background-color-hovered": string;
+    "button-outline-border-color-hovered": string;
+    "button-outline-color-active": string;
+    "button-outline-background-color-active": string;
+    "button-outline-border-color-active": string;
+    "button-outline-color-disabled": string;
+    "button-outline-background-color-disabled": string;
+    "button-outline-border-color-disabled": string;
     "button-clear-color": string;
     "button-clear-color-hovered": string;
     "button-clear-color-active": string;