colibri-ui 0.7.152 → 0.7.154

package/esm/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { __assign, __spreadArray } from 'tslib';
+import { __spreadArray, __assign } from 'tslib';
 import React__default, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import Dropdown from '../Dropdown/index.js';
@@ -13,23 +13,27 @@ import Chevron from '../Icons/Chevron.js';
 import CrossFill from '../Icons/CrossFill.js';
 
 var clx = classNames.bind(styles);
-var sortedItems = function sortedItems(items) {
-  return items.sort(function (a, b) {
-    if (!a || !b) return 0;
-    var matchA = a.match(/group-(\d+)-option-(\d+)/);
-    var matchB = b.match(/group-(\d+)-option-(\d+)/);
-    if (!matchA || !matchB) {
-      return 0;
-    }
-    var _a = matchA.map(Number),
-      groupA = _a[1],
-      optionA = _a[2];
-    var _b = matchB.map(Number),
-      groupB = _b[1],
-      optionB = _b[2];
+var sortItems = function sortItems(items) {
+  return __spreadArray([], items, true).sort(function (a, b) {
+    var parseKey = function parseKey(key) {
+      var _a;
+      return ((_a = key.match(/group-(\d+)-option-(\d+)/)) === null || _a === void 0 ? void 0 : _a.slice(1).map(Number)) || [];
+    };
+    var _a = parseKey(a),
+      groupA = _a[0],
+      optionA = _a[1];
+    var _b = parseKey(b),
+      groupB = _b[0],
+      optionB = _b[1];
     return groupA - groupB || optionA - optionB;
   });
 };
+var getValue = function getValue(options) {
+  return options.map(function (_a) {
+    var label = _a.label;
+    return label;
+  }).join(", ");
+};
 var MultiSelect = function MultiSelect(_a) {
   var className = _a.className,
     groups = _a.groups,
@@ -41,7 +45,7 @@ var MultiSelect = function MultiSelect(_a) {
     required = _a.required,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
@@ -59,7 +63,7 @@ var MultiSelect = function MultiSelect(_a) {
       return __assign(__assign({}, group), {
         options: group.options.map(function (option) {
           return __assign(__assign({}, option), {
-            selected: (value === null || value === void 0 ? void 0 : value.includes(createGroupOptionString(group.value, option.value))) || false
+            selected: value.includes(createGroupOptionString(group.value, option.value))
           });
         })
       });
@@ -67,35 +71,40 @@ var MultiSelect = function MultiSelect(_a) {
   }, [value, groups]);
   var handleChange = useCallback(function (key) {
     setValue(function (prev) {
-      var newValue = prev.indexOf(key) !== -1 ? prev.filter(function (prevValue) {
-        return prevValue !== key;
-      }) : sortedItems(__spreadArray(__spreadArray([], prev, true), [key], false));
-      if (onChange) {
-        onChange(newValue);
-      }
+      var newValue = prev.includes(key) ? prev.filter(function (v) {
+        return v !== key;
+      }) : sortItems(__spreadArray(__spreadArray([], prev, true), [key], false));
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
       return newValue;
     });
   }, [onChange]);
-  var prepraredLabel = useMemo(function () {
-    return preparedGroups.flatMap(function (group) {
-      return group.options.filter(function (option) {
-        return option.selected;
-      }).map(function (option) {
+  var preparedLabel = useMemo(function () {
+    return preparedGroups.flatMap(function (_a) {
+      var groupVal = _a.value,
+        options = _a.options;
+      return options.filter(function (_a) {
+        var selected = _a.selected;
+        return selected;
+      }).map(
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      function (_a) {
+        var label = _a.label,
+          optVal = _a.value;
         return {
-          label: option.label,
-          key: createGroupOptionString(group.value, option.value)
+          label: label,
+          key: createGroupOptionString(groupVal, optVal)
         };
       });
     });
   }, [preparedGroups]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: clx(styles["form-field"], {
-      "full-width": fullWidth ? 1 : 0
+      "full-width": fullWidth
     }, className),
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
     placement: "bottom-start",
     preventOverflow: true,
@@ -103,63 +112,48 @@ var MultiSelect = function MultiSelect(_a) {
     trigger: ["click"],
     zIndex: zIndex,
     fontSize: fontSize,
-    disabled: !!disabled,
+    disabled: disabled,
     overlay: /*#__PURE__*/React__default.createElement(MenuOverlay, {
       groups: preparedGroups,
       onChange: handleChange
     }),
     samewidth: true
-  }, type === "chip" ? (/*#__PURE__*/React__default.createElement(InputRoot, {
-    error: error,
+  }, /*#__PURE__*/React__default.createElement(InputRoot, {
+    hasError: hasError,
     size: size,
     className: clx(styles.root, {
-      auto: !!prepraredLabel.length
+      root_auto: preparedLabel.length
     }),
     endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
       className: clx(styles.icon, {
-        icon_isOpen: isOpen ? 1 : 0
+        icon_isOpen: isOpen
       })
     }),
-    disabled: !!disabled
+    disabled: Boolean(disabled)
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-input"], styles["base-input-flex"])
-  }, prepraredLabel.length ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, prepraredLabel.map(function (option, index) {
+    className: clx(styles["base-input"], styles[type === "chip" ? "base-input-flex" : "base-input-text"])
+  }, preparedLabel.length ? type === "chip" ?
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  preparedLabel.map(function (_a) {
+    var label = _a.label,
+      key = _a.key;
     return /*#__PURE__*/React__default.createElement(Chip, {
+      key: key,
       size: "s",
       iconEnd: /*#__PURE__*/React__default.createElement(CrossFill, null),
       "data-ignore-click": true,
-      key: "item-".concat(index),
       onClickIcon: function onClickIcon() {
-        return handleChange(option.key);
+        return handleChange(key);
       }
-    }, option.label);
-  }))) : (/*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles.placeholder)
-  }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
-    type: "hidden",
-    name: name,
-    tabIndex: -1,
-    value: value || ""
-  }))) : (/*#__PURE__*/React__default.createElement(InputRoot, {
-    error: error,
-    size: size,
-    className: clx(styles.root),
-    endIcon: /*#__PURE__*/React__default.createElement(Chevron, {
-      className: clx(styles.icon, {
-        icon_isOpen: isOpen ? 1 : 0
-      })
-    }),
-    disabled: !!disabled
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-input"], styles["base-input-text"])
-  }, prepraredLabel.length ? prepraredLabel.join(", ") : (/*#__PURE__*/React__default.createElement("span", {
+    }, label);
+  }) : getValue(preparedLabel) : (/*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.placeholder)
   }, placeholder))), /*#__PURE__*/React__default.createElement("input", {
     type: "hidden",
     name: name,
     tabIndex: -1,
-    value: value || ""
-  })))));
+    value: value.join(",") || ""
+  }))));
 };
 
 export { MultiSelect as default };

package/esm/MultiSelect/index.module.css

@@ -2,7 +2,7 @@
   cursor: pointer;
 }
 
-.root.auto {
+.root_auto {
   height: auto;
   min-height: 36px;
 }
@@ -18,10 +18,9 @@
 .base-input {
   background: transparent;
   border: none;
-  display: inline-block;
+  display: flex;
   flex: 1;
   margin: 7px 0;
-  width: 100%;
 }
 .base-input ::placeholder {
   color: var(--palette-bg-2);

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>({ options, value, name, zIndex, fontSize, label, hint, error, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
+declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
 export default Select;

package/esm/Select/index.js

@@ -17,7 +17,7 @@ var Select = function Select(_a) {
     fontSize = _a.fontSize,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
     placeholder = _a.placeholder,
     disabled = _a.disabled,
@@ -58,7 +58,7 @@ var Select = function Select(_a) {
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(Dropdown, {
     placement: "bottom-start",
     preventOverflow: true,
@@ -73,7 +73,7 @@ var Select = function Select(_a) {
     }),
     samewidth: true
   }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.createElement(InputRoot, {
-    error: error,
+    hasError: hasError,
     size: size,
     className: clx(styles.root),
     endIcon: /*#__PURE__*/React__default.createElement(Chevron, {

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

@@ -1,28 +1,28 @@
 import type { ReactNode } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 type Size = "s" | "m" | "l";
+export type Coordinates = {
+    height: number;
+    top: number;
+};
 export interface IOption<T extends string> {
-    value: T;
-    label: ReactNode;
     disabled?: boolean;
+    label: ReactNode;
+    value: T;
 }
 export interface SelectProps<T extends string> extends Omit<FormFieldProps, "children"> {
-    options: IOption<T>[];
-    value?: T;
-    zIndex?: number;
+    className?: string;
+    customInputRoot?: ReactNode;
+    disabled?: boolean;
     fontSize?: number;
+    fullWidth?: boolean;
+    name?: string;
     onChange: (value: T) => void;
-    disabled?: boolean;
+    options: IOption<T>[];
     placeholder?: string;
-    fullWidth?: boolean;
     required?: boolean;
     size?: Size;
-    className?: string;
-    customInputRoot?: ReactNode;
-    name?: string;
+    value?: T;
+    zIndex?: number;
 }
-export type Coordinates = {
-    top: number;
-    height: number;
-};
 export {};

package/esm/TextArea/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { ITextAreaProps } from "./index.props";
-declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, error, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
+declare const TextArea: ({ className, value, minRows, maxRows, onChange, label, required, hasError, hint, disabled, inputRef, ref, ...props }: ITextAreaProps) => React.JSX.Element;
 export default TextArea;

package/esm/TextArea/index.js

@@ -18,12 +18,12 @@ var TextArea = function TextArea(_a) {
     onChange = _a.onChange,
     label = _a.label,
     required = _a.required,
-    error = _a.error,
+    hasError = _a.hasError,
     hint = _a.hint,
     disabled = _a.disabled,
     inputRef = _a.inputRef,
     ref = _a.ref,
-    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef", "ref"]);
+    props = __rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "hasError", "hint", "disabled", "inputRef", "ref"]);
   var onChangeHandler = function onChangeHandler(event) {
     if (onChange) onChange(event.target.value, event);
   };
@@ -33,10 +33,10 @@ var TextArea = function TextArea(_a) {
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
     disabled: !!disabled,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(TextareaAutosize, __assign({
     ref: inputRef,
     "data-testid": "textarea",

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

@@ -5,7 +5,7 @@ export interface ITextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextArea
     value?: string;
     label?: ReactNode;
     hint?: ReactNode;
-    error?: boolean;
+    hasError?: boolean;
     required?: boolean;
     onChange?: (value: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
     inputRef?: ForwardedRef<HTMLTextAreaElement>;

package/esm/base/FormField/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { FormFieldProps } from "./index.props";
-declare const FormField: ({ label, hint, children, error, required, ref, className, }: FormFieldProps) => React.JSX.Element;
+declare const FormField: ({ label, hint, children, hasError, required, className, ref, }: FormFieldProps) => React.JSX.Element;
 export default FormField;

package/esm/base/FormField/index.js

@@ -1,27 +1,25 @@
 import React__default from 'react';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import Typography from '../../Typography/index.js';
 import styles from './FormField.module.css';
 
-var clx = classNames.bind(styles);
 var FormField = function FormField(_a) {
+  var _b;
   var label = _a.label,
     hint = _a.hint,
     children = _a.children,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
-    ref = _a.ref,
-    className = _a.className;
+    className = _a.className,
+    ref = _a.ref;
   return /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.container, className),
+    className: classNames(styles.container, className),
     ref: ref
   }, label && (/*#__PURE__*/React__default.createElement(Typography, {
-    className: clx(styles.label, {
-      label_required: !!required
-    }),
+    className: classNames(styles.label, (_b = {}, _b[styles.label_required] = required, _b)),
     tag: "label"
   }, label)), children, hint && (/*#__PURE__*/React__default.createElement(Typography, {
-    variant: error ? "alert" : "secondary",
+    variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };

package/esm/base/FormField/index.props.d.ts

@@ -1,10 +1,10 @@
 import type { ReactNode } from "react";
 import type { PropsWithChildren } from "react";
 export type FormFieldProps = PropsWithChildren<{
-    label?: ReactNode;
-    hint?: ReactNode;
-    error?: boolean;
-    required?: boolean;
     className?: string;
+    hasError?: boolean;
+    hint?: ReactNode;
+    label?: ReactNode;
     ref?: React.Ref<HTMLDivElement>;
+    required?: boolean;
 }>;

package/esm/base/InputRoot/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { InputProps } from "./index.props";
-declare const InputRoot: ({ className, startIcon, endIcon, children, variant, disabled, error, style, size, ref, }: InputProps) => React.JSX.Element;
+declare const InputRoot: ({ className, startIcon, endIcon, children, variant, disabled, hasError, style, size, ref, }: InputProps) => React.JSX.Element;
 export default InputRoot;

package/esm/base/InputRoot/index.js

@@ -1,8 +1,7 @@
 import React__default from 'react';
-import classNames from 'classnames/bind';
+import classNames from 'classnames';
 import styles from './InputRoot.module.css';
 
-var clx = classNames.bind(styles);
 var InputRoot = function InputRoot(_a) {
   var _b;
   var className = _a.className,
@@ -12,20 +11,20 @@ var InputRoot = function InputRoot(_a) {
     _c = _a.variant,
     variant = _c === void 0 ? "primary" : _c,
     disabled = _a.disabled,
-    error = _a.error,
+    hasError = _a.hasError,
     style = _a.style,
     size = _a.size,
     ref = _a.ref;
   return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     style: style,
-    className: clx(styles.root, (_b = {}, _b["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _b["variant_".concat(variant, "_error")] = error ? 1 : 0, _b["size_".concat(size)] = !!size, _b["variant_".concat(variant)] = !!variant, _b), className)
+    className: classNames(styles.root, styles["variant_".concat(variant)], size && styles["size_".concat(size)], (_b = {}, _b[styles["variant_".concat(variant, "_disabled")]] = disabled, _b[styles["variant_".concat(variant, "_error")]] = hasError, _b), className)
   }, startIcon && /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-icon"])
+    className: styles["base-icon"]
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-icon"])
+    className: styles["base-icon"]
   }, endIcon), disabled && /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["base-disable-wrapper"])
+    className: styles["base-disable-wrapper"]
   }));
 };
 

package/esm/base/InputRoot/index.props.d.ts

@@ -5,7 +5,7 @@ export type Variant = "primary";
 export type InputProps = PropsWithChildren<{
     variant?: Variant;
     disabled: boolean;
-    error?: boolean;
+    hasError?: boolean;
     className?: string;
     startIcon?: ReactNode;
     endIcon?: ReactNode;

package/package.json

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