colibri-ui 0.7.110 → 0.7.112

package/Dropdown/index.js

@@ -21,6 +21,7 @@ var clx = classNames__default.default.bind(styles__default.default);
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
     zIndex = _a.zIndex,
+    fontSize = _a.fontSize,
     disabled = _a.disabled,
     onVisibleChange = _a.onVisibleChange,
     overlay = _a.overlay,
@@ -34,19 +35,21 @@ var Dropdown = function Dropdown(_a) {
     visibleProp = _e === void 0 ? true : _e,
     _f = _a.preventOverflow,
     preventOverflow = _f === void 0 ? false : _f,
-    _g = _a.samewidth,
-    samewidth = _g === void 0 ? false : _g;
-  var _h = React.useState(null),
-    controlElement = _h[0],
-    setControlElement = _h[1];
+    _g = _a.preventAutoClose,
+    preventAutoClose = _g === void 0 ? false : _g,
+    _h = _a.samewidth,
+    samewidth = _h === void 0 ? false : _h;
   var _j = React.useState(null),
-    popperElement = _j[0],
-    setPopperElement = _j[1];
-  var _k = React.useState(false),
-    visible = _k[0],
-    setVisible = _k[1];
+    controlElement = _j[0],
+    setControlElement = _j[1];
+  var _k = React.useState(null),
+    popperElement = _k[0],
+    setPopperElement = _k[1];
+  var _l = React.useState(false),
+    visible = _l[0],
+    setVisible = _l[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _l = reactPopper.usePopper(controlElement, popperElement, {
+  var _m = reactPopper.usePopper(controlElement, popperElement, {
       placement: placement,
       strategy: strategy,
       modifiers: [{
@@ -57,9 +60,9 @@ var Dropdown = function Dropdown(_a) {
         enabled: preventOverflow
       }]
     }),
-    styles = _l.styles,
-    attributes = _l.attributes,
-    update = _l.update;
+    styles = _m.styles,
+    attributes = _m.attributes,
+    update = _m.update;
   var isNotComponent = typeof children === "string";
   var reference = React.useMemo(function () {
     return React.Children.only(isNotComponent ? /*#__PURE__*/React__default.default.createElement("button", null, children) : children);
@@ -80,9 +83,11 @@ var Dropdown = function Dropdown(_a) {
     if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
     onHide();
   }, [onHide, controlElement]);
-  var onClickOverlay = React.useCallback(function (e) {
-    e.stopPropagation();
-    onHide();
+  var onClickOverlay = React.useCallback(function (event) {
+    event.stopPropagation();
+    if (!preventAutoClose) {
+      onHide();
+    }
   }, [onHide]);
   React.useEffect(function () {
     var unsubscribes = [];
@@ -129,11 +134,13 @@ var Dropdown = function Dropdown(_a) {
     ref: setPopperElement,
     "data-testid": "popper-container",
     className: clx("popper-container"),
-    style: tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
+    style: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
     }), samewidth && {
       maxWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
+    }), {
+      fontSize: "".concat(fontSize, "px")
     }),
     tabIndex: 0
   }, attributes.popper), /*#__PURE__*/React__default.default.createElement("div", {

package/Dropdown/index.props.d.ts

@@ -5,6 +5,7 @@ export type Placement = Extract<PopperPlacement, "bottom-start" | "bottom" | "bo
 export type Trigger = "click" | "hover" | "focus";
 export type DropdownProps = {
     zIndex?: number;
+    fontSize?: number;
     disabled?: boolean;
     onVisibleChange?: (visible: boolean) => void;
     overlay: ReactNode;
@@ -13,5 +14,6 @@ export type DropdownProps = {
     trigger?: [Trigger, ...Trigger[]];
     visible?: boolean;
     preventOverflow?: boolean;
+    preventAutoClose?: boolean;
     samewidth?: boolean;
 };

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

@@ -2,11 +2,11 @@
   align-items: center;
   cursor: pointer;
   display: flex;
-  font-size: 16px;
+  font-size: 1em;
   font-style: normal;
   font-weight: 400;
   justify-content: space-between;
-  line-height: 22px;
+  line-height: 1.5;
   list-style: none;
   padding: 8px 6px;
 }
@@ -20,13 +20,13 @@
   background-color: var(--palette-white);
 }
 .item_variant_primary:hover {
-  background-color: var(--palette-primary-1);
+  background-color: var(--palette-bg-2);
 }
 .item_variant_primary:active {
-  background-color: var(--palette-primary-1);
+  background-color: var(--palette-bg-2);
 }
 .item_variant_primary:focus, .item_variant_primary:focus-within {
-  background-color: var(--palette-primary-1);
+  background-color: var(--palette-bg-2);
 }
 .item > * {
   overflow: hidden;

package/Menu/components/MenuItem/index.js

@@ -26,7 +26,7 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ref: ref,
     "data-component": "menu-item",
     style: {
-      backgroundColor: isSelected ? "var(--palette-primary-1, rgb(232, 240, 254))" : ""
+      backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
     },
     "data-testid": "menuitem",
     className: clx("item", (_b = {

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

package/Select/index.js

@@ -24,6 +24,7 @@ var Select = function Select(_a) {
     value = _a.value,
     name = _a.name,
     zIndex = _a.zIndex,
+    fontSize = _a.fontSize,
     label = _a.label,
     hint = _a.hint,
     error = _a.error,
@@ -34,6 +35,7 @@ var Select = function Select(_a) {
     size = _c === void 0 ? "m" : _c,
     _d = _a.fullWidth,
     fullWidth = _d === void 0 ? false : _d,
+    customInputRoot = _a.customInputRoot,
     className = _a.className,
     onChange = _a.onChange;
   var _e = React.useState(false),
@@ -72,13 +74,14 @@ var Select = function Select(_a) {
     onVisibleChange: setIsOpen,
     trigger: ["click"],
     zIndex: zIndex,
+    fontSize: fontSize,
     disabled: !!disabled,
     overlay: /*#__PURE__*/React__default.default.createElement(index$2.default, {
       options: preparedOptions,
       onChange: onChange
     }),
     samewidth: true
-  }, /*#__PURE__*/React__default.default.createElement(index$3.default, {
+  }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.default.createElement(index$3.default, {
     error: error,
     size: size,
     className: clx(styles__default.default.root),
@@ -98,7 +101,7 @@ var Select = function Select(_a) {
     name: name,
     tabIndex: -1,
     value: value || ""
-  }))));
+  })))));
 };
 
 exports.default = Select;

package/Select/index.module.css

@@ -13,9 +13,9 @@
 .base-input {
   background: transparent;
   border: none;
+  display: inline-grid;
   flex: 1;
   margin: 7px 0;
-  display: inline-grid;
 }
 .base-input ::placeholder {
   color: var(--palette-bg-2);

package/Select/index.props.d.ts

@@ -10,6 +10,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     options: IOption<T>[];
     value?: T;
     zIndex?: number;
+    fontSize?: number;
     onChange: (value: T) => void;
     disabled?: boolean;
     placeholder?: string;
@@ -17,6 +18,7 @@ export interface SelectProps<T extends string> extends Omit<FormFieldProps, "chi
     required?: boolean;
     size?: Size;
     className?: string;
+    customInputRoot?: ReactNode;
     name?: string;
 }
 export type Coordinates = {

package/TimeSelect/index.d.ts

@@ -1,6 +1,6 @@
 import type { SelectProps } from "../Select/index.props";
 import type { FC } from "react";
-interface TimeSelectProps extends Omit<SelectProps<string>, 'options'> {
+interface TimeSelectProps extends Omit<SelectProps<string>, "options"> {
     interval?: 5 | 10 | 15 | 30;
     currentDate?: Date | null;
     selectedDate?: Date | null;

package/esm/Avatar/Avatar.module.css

@@ -4,9 +4,9 @@
   transition: border-color 0.15s ease;
 }
 .avatar_bordered {
-  padding: 3px;
   background-color: var(--palette-white);
   border: 3px solid var(--palette-bg-2);
+  padding: 3px;
 }
 .avatar_bordered:hover {
   border-color: var(--palette-bg-4);

package/esm/Calendar/components/Month/Month.d.ts

@@ -1,3 +1,4 @@
+import type { CalendarTitleSize } from "../../index.props";
 import type { FunctionComponent } from "react";
 export interface FCWithElements<T = {}> extends FunctionComponent<T> {
 }
@@ -10,6 +11,7 @@ type Props = {
     onDayClick: (date: string) => void;
     offsetLeft: number;
     availableDates?: string[];
+    titleSize?: CalendarTitleSize;
 };
 export declare const Month: FCWithElements<Props>;
 export {};

package/esm/Calendar/components/Month/Month.js

@@ -46,7 +46,7 @@ var Month = function Month(props) {
     className: clx(styles["month-name"])
   }, /*#__PURE__*/React.createElement(Typography, {
     tag: "span",
-    size: "h3"
+    size: props.titleSize
   }, getUpperMonthName(props.startDate))), /*#__PURE__*/React.createElement("div", {
     className: clx(styles.table)
   }, /*#__PURE__*/React.createElement("ul", {

package/esm/Calendar/components/Month/index.module.css

@@ -5,7 +5,7 @@
 }
 
 .month-name {
-  padding: 6px 0 25px;
+  padding: 7px 0 25px;
   text-align: center;
 }
 

package/esm/Calendar/index.d.ts

@@ -1,20 +1,4 @@
 import React from "react";
-import type { Preset } from "./components/Presets";
-type ChangePayload = {
-    date: string;
-    period: number;
-};
-type Props = {
-    today: string;
-    selectedDate?: string;
-    selectedPeriod?: number;
-    canSelectRange?: boolean;
-    activeDates?: string[];
-    datePresets?: Preset[];
-    availableDates?: string[];
-    onChange?: (payload: ChangePayload) => void;
-    onCancel?: () => void;
-    withContinueButton?: boolean;
-};
-declare const Calendar: React.FC<Props>;
+import type { CalendarProps } from "./index.props";
+declare const Calendar: React.FC<CalendarProps>;
 export default Calendar;

package/esm/Calendar/index.js

@@ -26,20 +26,25 @@ var Calendar = function Calendar(_a) {
     canSelectRange = _a.canSelectRange,
     onChange = _a.onChange,
     onCancel = _a.onCancel,
-    _b = _a.withContinueButton,
-    withContinueButton = _b === void 0 ? false : _b;
+    _b = _a.minWidth,
+    minWidth = _b === void 0 ? 360 : _b,
+    _c = _a.withContinueButton,
+    withContinueButton = _c === void 0 ? false : _c,
+    className = _a.className,
+    _d = _a.titleSize,
+    titleSize = _d === void 0 ? "h3" : _d;
   var $root = useRef(null);
   var startMonth = getStartMonth({
     today: today,
     activeDates: activeDates
   });
-  var _c = useState(initialSelectedDate),
-    selectedDate = _c[0],
-    setSelectedDate = _c[1];
-  var _d = useState(initialSelectedPeriod),
-    selectedPeriod = _d[0],
-    setSelectedPeriod = _d[1];
-  var _e = useState(function () {
+  var _e = useState(initialSelectedDate),
+    selectedDate = _e[0],
+    setSelectedDate = _e[1];
+  var _f = useState(initialSelectedPeriod),
+    selectedPeriod = _f[0],
+    setSelectedPeriod = _f[1];
+  var _g = useState(function () {
       if (initialSelectedDate) {
         return getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
       } else if (activeDates && activeDates.length) {
@@ -47,14 +52,14 @@ var Calendar = function Calendar(_a) {
       }
       return 0;
     }),
-    currentMonthOffset = _e[0],
-    setCurrentMonthOffset = _e[1];
-  var _f = useState(0),
-    contentWidth = _f[0],
-    setContentWidth = _f[1];
-  var _g = useState(true),
-    isRangeCompleted = _g[0],
-    setIsRangeCompleted = _g[1];
+    currentMonthOffset = _g[0],
+    setCurrentMonthOffset = _g[1];
+  var _h = useState(0),
+    contentWidth = _h[0],
+    setContentWidth = _h[1];
+  var _j = useState(true),
+    isRangeCompleted = _j[0],
+    setIsRangeCompleted = _j[1];
   useEffect(function () {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
@@ -139,7 +144,10 @@ var Calendar = function Calendar(_a) {
     onDayClick: handleDayClick
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: clx(styles.root),
+    className: clx(styles.root, className),
+    style: {
+      minWidth: "".concat(minWidth, "px")
+    },
     "data-testid": "calendar",
     ref: $root
   }, /*#__PURE__*/React__default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.createElement("div", {
@@ -157,9 +165,11 @@ var Calendar = function Calendar(_a) {
       offsetLeft: index * contentWidth
     });
     return /*#__PURE__*/React__default.createElement(Month, __assign({}, attrs, {
+      titleSize: titleSize,
       key: "month-".concat(index)
     }));
   }))) : (/*#__PURE__*/React__default.createElement(Month, __assign({
+    titleSize: titleSize,
     today: today,
     startDate: getMonthStartDate(currentMonthOffset),
     offsetLeft: 0

package/esm/Calendar/index.module.css

@@ -3,18 +3,13 @@
   flex-direction: column;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
-  gap: 16px;
-  min-width: 300px;
+  gap: 1rem;
+  min-width: 360px;
   overflow: hidden;
   position: relative;
   text-rendering: optimizelegibility;
   text-size-adjust: 100%;
 }
-@media (width >= 360px) {
-  .root {
-    min-width: 360px;
-  }
-}
 
 .month-control {
   background: transparent;

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

@@ -0,0 +1,21 @@
+import type { Preset } from "./components/Presets";
+export type CalendarPayload = {
+    date: string;
+    period: number;
+};
+export type CalendarTitleSize = "xs" | "s" | "m" | "l" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+export type CalendarProps = {
+    today: string;
+    selectedDate?: string;
+    selectedPeriod?: number;
+    canSelectRange?: boolean;
+    activeDates?: string[];
+    datePresets?: Preset[];
+    availableDates?: string[];
+    onChange?: (payload: CalendarPayload) => void;
+    onCancel?: () => void;
+    withContinueButton?: boolean;
+    className?: string;
+    minWidth?: number;
+    titleSize?: CalendarTitleSize;
+};

package/esm/Checkbox/Checkbox.module.css

@@ -57,8 +57,8 @@
   box-shadow: 0 0 0 2px var(--palette-alert);
 }
 .variant_primary_checked::after {
-  border-block-end: 2px solid var(--palette-white);
-  border-inline-end: 2px solid var(--palette-white);
+  border-block-end: 2px solid var(--palette-black);
+  border-inline-end: 2px solid var(--palette-black);
 }
 
 .control {

package/esm/Datepicker/Datepicker.module.css

@@ -0,0 +1,5 @@
+.root {
+  display: flex;
+  flex-shrink: 0;
+  font-size: 14px;
+}

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

@@ -0,0 +1,7 @@
+import React from "react";
+type Props = {
+    className?: string;
+    selectedDate?: string;
+};
+declare const DatePicker: ({ className, selectedDate }: Props) => React.JSX.Element;
+export default DatePicker;

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

@@ -0,0 +1,42 @@
+import React__default, { useState } from 'react';
+import classNames from 'classnames/bind';
+import Dropdown from '../../../Dropdown/index.js';
+import Calendar from '../../../Calendar/index.js';
+import { toISODate, toDMYDate } from '../../../helpers/date/index.js';
+import styles from './index.module.css';
+
+var clx = classNames.bind(styles);
+var DatePicker = function DatePicker(_a) {
+  var className = _a.className,
+    _b = _a.selectedDate,
+    selectedDate = _b === void 0 ? "" : _b;
+  var _c = useState(selectedDate),
+    date = _c[0],
+    setDate = _c[1];
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles.root, className)
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles["date-picker"])
+  }, /*#__PURE__*/React__default.createElement(Dropdown, {
+    placement: "bottom",
+    preventAutoClose: true,
+    fontSize: 14,
+    trigger: ["click"],
+    overlay: /*#__PURE__*/React__default.createElement(Calendar, {
+      minWidth: 260,
+      className: styles.calendar,
+      today: toISODate(new Date()),
+      titleSize: "h5",
+      selectedDate: date,
+      onChange: function onChange(payload) {
+        setDate(payload.date);
+      }
+    })
+  }, /*#__PURE__*/React__default.createElement("input", {
+    className: clx(styles["date-picker-input-control"]),
+    value: toDMYDate(date),
+    readOnly: true
+  }))));
+};
+
+export { DatePicker as default };

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

@@ -0,0 +1,33 @@
+.root {
+  width: 100px;
+}
+.root:focus-within {
+  z-index: 2;
+}
+
+.date-picker {
+  display: inline-block;
+}
+
+.date-picker-input-control {
+  background-color: var(--palette-white);
+  border: 0;
+  border-radius: 0.375rem;
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+  box-shadow: inset 0 0 0 1px var(--palette-bg-3);
+  box-sizing: border-box;
+  color: var(--palette-black);
+  font-size: 14px;
+  height: 36px;
+  outline: 0;
+  padding: 0 10px;
+  width: 100%;
+}
+.date-picker-input-control:focus {
+  box-shadow: inset 0 0 0 1px var(--palette-primary-3), 0 0 0 2px var(--palette-primary-2);
+}
+
+.calendar {
+  max-width: 250px;
+}

package/esm/Datepicker/components/TimePicker/Label/index.d.ts

@@ -0,0 +1,8 @@
+import type { FC } from "react";
+type OptionLabelProps = {
+    time: string;
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+};
+declare const OptionLabel: FC<OptionLabelProps>;
+export default OptionLabel;

package/esm/Datepicker/components/TimePicker/Label/index.js

@@ -0,0 +1,15 @@
+import React__default, { useRef } from 'react';
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = useRef(null);
+  return /*#__PURE__*/React__default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+export { OptionLabel as default };

package/esm/Datepicker/components/TimePicker/helpers.d.ts

@@ -0,0 +1,12 @@
+export type Timestamp = {
+    time: string;
+    disabled?: boolean;
+};
+export declare const DEFAULT_TIME: {
+    index: number;
+    time: string;
+};
+export declare const formatTime: (date: Date) => string;
+export declare const generateSuggest: (interval?: number) => Timestamp[];
+export declare const checkIsBeforeNow: (time: string, currentDate?: Date | null) => boolean;
+export declare const checkIsBeforeSelectedDate: (time: string, interval: number, date?: Date | null) => boolean;

package/esm/Datepicker/components/TimePicker/helpers.js

@@ -0,0 +1,35 @@
+import { format, addMinutes, isBefore, parse } from 'date-fns';
+
+var day = new Date();
+day.setHours(24, 0, 0, 0);
+var DEFAULT_TIME = {
+  index: 24,
+  time: "12:00"
+};
+var formatTime = function formatTime(date) {
+  return format(date, "HH:mm");
+};
+var generateSuggest = function generateSuggest(interval) {
+  if (interval === void 0) {
+    interval = 15;
+  }
+  return new Array(24 * 60 / interval).fill(null).map(function (_, index) {
+    var date = addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
+  return currentDate ? isBefore(parse(time, "HH:mm", currentDate), new Date()) : false;
+};
+var checkIsBeforeSelectedDate = function checkIsBeforeSelectedDate(time, interval, date) {
+  if (date) {
+    var selectedDate = new Date(date);
+    selectedDate.setMinutes(selectedDate.getMinutes() + interval);
+    return isBefore(parse(time, "HH:mm", date), selectedDate);
+  }
+  return false;
+};
+
+export { DEFAULT_TIME, checkIsBeforeNow, checkIsBeforeSelectedDate, formatTime, generateSuggest };

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface TimePickerProps {
+    className?: string;
+    interval?: 5 | 10 | 15 | 30;
+    value?: string;
+    selectedTime?: string;
+}
+declare const _default: React.MemoExoticComponent<({ className, interval, selectedTime, }: TimePickerProps) => React.JSX.Element>;
+export default _default;