colibri-ui 0.7.110 → 0.7.113

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,6 @@
+.root {
+  display: flex;
+  flex-shrink: 0;
+  font-size: 14px;
+  height: 36px;
+}

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,46 @@
+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['input-container'], styles['input-date'], className)
+  }, /*#__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['input-field']),
+    tabIndex: 0,
+    "aria-expanded": "false",
+    "aria-haspopup": "true",
+    "aria-invalid": "false",
+    autoComplete: "off",
+    maxLength: 7,
+    readOnly: true,
+    value: toDMYDate(date)
+  })));
+};
+
+export { DatePicker as default };

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

@@ -0,0 +1,47 @@
+.input-container {
+  border-radius: 6px;
+  border: 1px solid var(--palette-bg-3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-field {
+  height: 100%;
+  padding: 4px;
+  text-align: center;
+  font-size: 1em;
+  outline: none;
+  border: none;
+  width: 100%;
+  background: transparent;
+}
+
+.input-date {
+  position: relative;
+  border-bottom-left-radius: 0;
+  border-left: none;
+  border-top-left-radius: 0;
+  width: 100px;
+}
+
+.input-date:focus-within {
+  border: 1px solid var(--palette-primary-3);
+  border-bottom-left-radius: 0;
+  border-left: none;
+  border-top-left-radius: 0;
+  box-shadow: 0 0 0 2px var(--palette-primary-2);
+}
+
+.input-date:focus-within::before {
+  content: "";
+  position: absolute;
+  height: 100%;
+  width: 1px;
+  background-color: var(--palette-primary-3);
+  left: 0;
+}
+
+.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;

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

@@ -0,0 +1,61 @@
+import { __assign } from 'tslib';
+import React__default, { useState, useMemo, memo } from 'react';
+import classNames from 'classnames/bind';
+import Select from '../../../Select/index.js';
+import styles from './index.module.css';
+import { generateSuggest } from './helpers.js';
+import OptionLabel from './Label/index.js';
+
+var clx = classNames.bind(styles);
+var TimePicker = function TimePicker(_a) {
+  var className = _a.className,
+    _b = _a.interval,
+    interval = _b === void 0 ? 30 : _b,
+    _c = _a.selectedTime,
+    selectedTime = _c === void 0 ? "" : _c;
+  var _d = useState(selectedTime),
+    time = _d[0],
+    setTime = _d[1];
+  var baseOptions = useMemo(function () {
+    return generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.createElement(OptionLabel, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  var options = useMemo(function () {
+    return baseOptions.map(function (option) {
+      return __assign(__assign({}, option), {
+        disabled: false
+      });
+    });
+  }, [baseOptions, interval]);
+  return /*#__PURE__*/React__default.createElement(Select, {
+    className: className,
+    value: time,
+    options: options,
+    fontSize: 14,
+    customInputRoot: /*#__PURE__*/React__default.createElement("div", {
+      className: clx(styles['input-container'], styles['input-time'])
+    }, /*#__PURE__*/React__default.createElement("input", {
+      className: clx(styles['input-field']),
+      tabIndex: 0,
+      "aria-expanded": "false",
+      "aria-haspopup": "true",
+      "aria-invalid": "false",
+      autoComplete: "off",
+      maxLength: 5,
+      readOnly: true,
+      value: time
+    })),
+    onChange: function onChange(time) {
+      return setTime(time);
+    }
+  });
+};
+var TimePickerInput = /*#__PURE__*/memo(TimePicker);
+
+export { TimePickerInput as default };

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

@@ -0,0 +1,34 @@
+.input-container {
+  border-radius: 6px;
+  border: 1px solid var(--palette-bg-3);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.input-field {
+  height: 100%;
+  padding: 4px;
+  text-align: center;
+  font-size: 1em;
+  outline: none;
+  border: none;
+  width: 100%;
+  background: transparent;
+}
+
+.input-time {
+  border-bottom-right-radius: 0;
+  border-right: 1px solid var(--palette-bg-3);
+  border-top-right-radius: 0;
+  width: 89px;
+  height: 100%;
+}
+
+.input-time:focus-within {
+  border: 1px solid var(--palette-primary-3);
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 0 0 2px var(--palette-primary-2);
+  z-index: 3;
+}

package/esm/Datepicker/index.d.ts

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