colibri-ui 0.7.152 → 0.7.154

package/TextArea/index.js

@@ -29,12 +29,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 = tslib.__rest(_a, ["className", "value", "minRows", "maxRows", "onChange", "label", "required", "error", "hint", "disabled", "inputRef", "ref"]);
+    props = tslib.__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);
   };
@@ -44,10 +44,10 @@ var TextArea = function TextArea(_a) {
     required: required,
     label: label,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(index$1.default, {
     disabled: !!disabled,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.default.createElement(TextareaAutosize__default.default, tslib.__assign({
     ref: inputRef,
     "data-testid": "textarea",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var classNames = require('classnames');
 var index = require('../../Typography/index.js');
 var styles = require('./FormField.module.css');
 
@@ -13,25 +13,23 @@ 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 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.default.createElement("div", {
-    className: clx(styles__default.default.container, className),
+    className: classNames__default.default(styles__default.default.container, className),
     ref: ref
   }, label && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    className: clx(styles__default.default.label, {
-      label_required: !!required
-    }),
+    className: classNames__default.default(styles__default.default.label, (_b = {}, _b[styles__default.default.label_required] = required, _b)),
     tag: "label"
   }, label)), children, hint && (/*#__PURE__*/React__default.default.createElement(index.default, {
-    variant: error ? "alert" : "secondary",
+    variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classNames = require('classnames/bind');
+var classNames = require('classnames');
 var styles = require('./InputRoot.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,7 +12,6 @@ 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 InputRoot = function InputRoot(_a) {
   var _b;
   var className = _a.className,
@@ -22,20 +21,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.default.createElement("div", {
     ref: ref,
     style: style,
-    className: clx(styles__default.default.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__default.default(styles__default.default.root, styles__default.default["variant_".concat(variant)], size && styles__default.default["size_".concat(size)], (_b = {}, _b[styles__default.default["variant_".concat(variant, "_disabled")]] = disabled, _b[styles__default.default["variant_".concat(variant, "_error")]] = hasError, _b), className)
   }, startIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-icon"])
+    className: styles__default.default["base-icon"]
   }, startIcon), children, endIcon && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-icon"])
+    className: styles__default.default["base-icon"]
   }, endIcon), disabled && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default["base-disable-wrapper"])
+    className: styles__default.default["base-disable-wrapper"]
   }));
 };
 

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

@@ -64,16 +64,20 @@ var Calendar = function Calendar(_a) {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
   }, []);
-  var showPrevMonth = useCallback(function () {
+  var showPrevMonth = function showPrevMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
     setCurrentMonthOffset(function (prev) {
       return prev - 1;
     });
-  }, []);
-  var showNextMonth = useCallback(function () {
+  };
+  var showNextMonth = function showNextMonth(event) {
+    event.preventDefault();
+    event.stopPropagation();
     setCurrentMonthOffset(function (prev) {
       return prev + 1;
     });
-  }, []);
+  };
   var selectDate = useCallback(function (date, period, rangeCompleted) {
     setSelectedDate(date);
     setSelectedPeriod(period);

package/esm/Checkbox/Checkbox.module.css

@@ -3,10 +3,6 @@
   flex-direction: column;
 }
 
-.wrapper {
-  display: flex;
-}
-
 .label {
   cursor: pointer;
   display: inline-flex;

package/esm/Checkbox/index.js

@@ -5,7 +5,7 @@ import styles from './Checkbox.module.css';
 
 var clx = classNames.bind(styles);
 var Checkbox = function Checkbox(_a) {
-  var _b, _c;
+  var _b;
   var id = _a.id,
     name = _a.name,
     value = _a.value,
@@ -15,20 +15,18 @@ var Checkbox = function Checkbox(_a) {
     onChange = _a.onChange,
     onFocus = _a.onFocus,
     onBlur = _a.onBlur,
-    _d = _a.variant,
-    variant = _d === void 0 ? "primary" : _d,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
     className = _a.className,
     disabled = _a.disabled,
-    isError = _a.isError;
-  var control =
-  /*#__PURE__*/
-  // eslint-disable-next-line jsx-a11y/label-has-associated-control
-  React__default.createElement("label", {
-    className: clx(styles.label)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.wrapper)
+    hasError = _a.hasError;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles.root)
+  }, /*#__PURE__*/React__default.createElement("label", {
+    className: clx(styles.label),
+    htmlFor: id
   }, /*#__PURE__*/React__default.createElement("input", {
-    className: clx(styles.control, (_b = {}, _b["control_variant_".concat(variant)] = !!variant, _b), className),
+    className: clx(styles.control, styles["control_variant_".concat(variant)], className),
     type: "checkbox",
     id: id,
     name: name,
@@ -39,14 +37,11 @@ var Checkbox = function Checkbox(_a) {
     onBlur: onBlur,
     disabled: disabled
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: clx(styles["fake-checkbox"], (_c = {}, _c["variant_".concat(variant, "_disabled")] = disabled ? 1 : 0, _c["variant_".concat(variant, "_error")] = isError ? 1 : 0, _c["variant_".concat(variant, "_checked")] = checked ? 1 : 0, _c.checked = checked ? 1 : 0, _c["variant_".concat(variant)] = !!variant, _c))
+    className: clx(styles["fake-checkbox"], styles["variant_".concat(variant)], (_b = {}, _b[styles["variant_".concat(variant, "_disabled")]] = disabled, _b[styles["variant_".concat(variant, "_error")]] = hasError, _b[styles["variant_".concat(variant, "_checked")]] = checked, _b[styles.checked] = checked, _b))
   }), /*#__PURE__*/React__default.createElement("span", {
     className: clx(styles.text)
-  }, label)));
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.root)
-  }, control, hint && (/*#__PURE__*/React__default.createElement(Typography, {
-    variant: isError ? "alert" : "secondary",
+  }, label)), hint && (/*#__PURE__*/React__default.createElement(Typography, {
+    variant: hasError ? "alert" : "secondary",
     tag: "span"
   }, hint)));
 };

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

@@ -1,17 +1,17 @@
-import type { ReactNode } from "react";
+import type { FocusEvent, ChangeEvent, ReactNode } from "react";
 export interface CheckboxProps {
-    variant?: "primary";
-    size?: "s" | "m" | "l";
-    id?: string;
-    name?: string;
-    value?: string | number;
-    label?: ReactNode;
-    hint?: ReactNode;
     checked?: boolean;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
     className?: string;
     disabled?: boolean;
-    isError?: boolean;
+    hasError?: boolean;
+    hint?: ReactNode;
+    id?: string;
+    label?: ReactNode;
+    name?: string;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
+    size?: "s" | "m" | "l";
+    value?: string | number;
+    variant?: "primary";
 }

package/esm/Datepicker/components/DatePicker/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { DatePickerProps } from "./index.props";
-declare const DatePicker: ({ className, selectedDate, onChangeDate, }: DatePickerProps) => React.JSX.Element;
+declare const DatePicker: React.FC<DatePickerProps>;
 export default DatePicker;

package/esm/Datepicker/components/DatePicker/index.js

@@ -6,6 +6,20 @@ import { toISODate, toDMYDate } from '../../../helpers/date/index.js';
 import styles from './index.module.css';
 
 var clx = classNames.bind(styles);
+var CalendarIcon = function CalendarIcon() {
+  return /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    className: clx("calendar-icon"),
+    strokeWidth: 1.5,
+    stroke: "currentColor"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5m-9-6h.008v.008H12v-.008ZM12 15h.008v.008H12V15Zm0 2.25h.008v.008H12v-.008ZM9.75 15h.008v.008H9.75V15Zm0 2.25h.008v.008H9.75v-.008ZM7.5 15h.008v.008H7.5V15Zm0 2.25h.008v.008H7.5v-.008Zm6.75-4.5h.008v.008h-.008v-.008Zm0 2.25h.008v.008h-.008V15Zm0 2.25h.008v.008h-.008v-.008Zm2.25-4.5h.008v.008H16.5v-.008Zm0 2.25h.008v.008H16.5V15Z"
+  }));
+};
 var DatePicker = function DatePicker(_a) {
   var className = _a.className,
     _b = _a.selectedDate,
@@ -14,29 +28,28 @@ var DatePicker = function DatePicker(_a) {
   var _c = useState(selectedDate),
     date = _c[0],
     setDate = _c[1];
-  var handleDateChange = function handleDateChange(payload) {
-    var newDate = payload.date;
-    setDate(newDate);
-    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(newDate);
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  var handleDateChange = function handleDateChange(_a) {
+    var date = _a.date;
+    setDate(date);
+    onChangeDate === null || onChangeDate === void 0 ? void 0 : onChangeDate(date);
   };
   return /*#__PURE__*/React__default.createElement(Dropdown, {
     placement: "bottom",
-    preventAutoClose: true,
-    preventOverflow: true,
     fontSize: 14,
     trigger: ["click"],
     overlay: /*#__PURE__*/React__default.createElement(Calendar, {
       minWidth: 260,
-      className: styles.calendar,
+      className: clx("calendar", className),
       today: toISODate(new Date()),
       titleSize: "h5",
       selectedDate: date,
       onChange: handleDateChange
     })
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles["input-container"], styles["input-date"], className)
+    className: clx("input-container", "input-date", className)
   }, /*#__PURE__*/React__default.createElement("input", {
-    className: clx(styles["input-field"]),
+    className: clx("input-field"),
     tabIndex: 0,
     "aria-expanded": "false",
     "aria-haspopup": "true",
@@ -45,7 +58,7 @@ var DatePicker = function DatePicker(_a) {
     maxLength: 7,
     readOnly: true,
     value: toDMYDate(date)
-  })));
+  }), /*#__PURE__*/React__default.createElement(CalendarIcon, null)));
 };
 
 export { DatePicker as default };

package/esm/Datepicker/components/DatePicker/index.module.css

@@ -1,49 +1,56 @@
 .input-container {
-  align-items: center;
-  border-bottom: 1px solid var(--palette-bg-3);
-  border-bottom-right-radius: 0.375rem;
-  border-right: 1px solid var(--palette-bg-3);
-  border-top: 1px solid var(--palette-bg-3);
-  border-top-right-radius: 0.375rem;
-  box-sizing: border-box;
   display: flex;
-  height: 36px;
+  align-items: center;
   justify-content: center;
+  height: 36px;
+  box-sizing: border-box;
+  border: 1px solid var(--palette-bg-3);
+  border-top-right-radius: 0.375rem;
+  border-bottom-right-radius: 0.375rem;
+  border-left: none;
 }
 
 .input-field {
-  background: transparent;
-  border: none;
-  box-sizing: border-box;
-  font-size: 1em;
+  width: 100%;
   height: 100%;
-  outline: none;
   padding: 4px;
   text-align: center;
-  width: 100%;
+  background: transparent;
+  border: none;
+  outline: none;
+  box-sizing: border-box;
 }
 
 .input-date {
+  cursor: pointer;
   flex: 3;
   position: relative;
+  border-top: 1px solid var(--palette-bg-3);
+  border-right: 1px solid var(--palette-bg-3);
+  border-bottom: 1px solid var(--palette-bg-3);
 }
 
 .input-date:focus-within {
-  border-bottom: 1px solid var(--palette-primary-3);
-  border-right: 1px solid var(--palette-primary-3);
-  border-top: 1px solid var(--palette-primary-3);
+  border-color: var(--palette-primary-3);
   box-shadow: 0 0 0 2px var(--palette-primary-2);
 }
 
 .input-date:focus-within::before {
-  background-color: var(--palette-primary-3);
   content: "";
-  height: 100%;
-  left: 0;
   position: absolute;
+  left: 0;
   width: 1px;
+  height: 100%;
+  background-color: var(--palette-primary-3);
 }
 
 .calendar {
   max-width: 250px;
+}
+
+.calendar-icon {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+  cursor: pointer;
 }

package/esm/Input/index.d.ts

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

package/esm/Input/index.js

@@ -11,7 +11,7 @@ var Input = function Input(_a) {
     endIcon = _a.endIcon,
     label = _a.label,
     hint = _a.hint,
-    error = _a.error,
+    hasError = _a.hasError,
     required = _a.required,
     onChange = _a.onChange,
     inputRef = _a.inputRef,
@@ -21,13 +21,13 @@ var Input = function Input(_a) {
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
     ref = _a.ref,
-    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "error", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
+    props = __rest(_a, ["className", "startIcon", "endIcon", "label", "hint", "hasError", "required", "onChange", "inputRef", "disabled", "variant", "size", "ref"]);
   return /*#__PURE__*/React__default.createElement(FormField, {
     className: classNames(className),
     label: label,
     required: required,
     hint: hint,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
     ref: ref,
     startIcon: startIcon,
@@ -35,7 +35,7 @@ var Input = function Input(_a) {
     variant: variant,
     size: size,
     disabled: !!disabled,
-    error: error
+    hasError: hasError
   }, /*#__PURE__*/React__default.createElement(BaseInput, __assign({
     ref: inputRef,
     onChange: onChange,

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

@@ -1,16 +1,16 @@
-import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode } from "react";
+import type { ChangeEvent, ForwardedRef, InputHTMLAttributes, ReactNode, Ref } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 import type { Size, Variant } from "../base/InputRoot/index.props";
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "size">, Omit<FormFieldProps, "children"> {
-    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
-    variant?: Variant;
-    size?: Size;
-    startIcon?: ReactNode;
     endIcon?: ReactNode;
-    label?: ReactNode;
+    hasError?: boolean;
     hint?: ReactNode;
-    error?: boolean;
-    required?: boolean;
     inputRef?: ForwardedRef<HTMLInputElement>;
-    ref?: React.Ref<HTMLInputElement>;
+    label?: ReactNode;
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value: string) => void;
+    ref?: Ref<HTMLInputElement>;
+    required?: boolean;
+    size?: Size;
+    startIcon?: ReactNode;
+    variant?: Variant;
 }

package/esm/MultiSelect/index.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { MultiSelectProps } from "./index.props";
-declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, type, onChange, }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: React.FC<MultiSelectProps>;
 export default MultiSelect;