colibri-ui 0.7.110 → 0.7.113

package/esm/Datepicker/index.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import classNames from 'classnames/bind';
+import styles from './Datepicker.module.css';
+import TimePickerInput from './components/TimePicker/index.js';
+import DatePicker from './components/DatePicker/index.js';
+
+var clx = classNames.bind(styles);
+var Datepicker = function Datepicker(_a) {
+  var className = _a.className,
+    selectedTime = _a.selectedTime,
+    selectedDate = _a.selectedDate;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: clx(styles.root, className)
+  }, /*#__PURE__*/React__default.createElement(TimePickerInput, {
+    selectedTime: selectedTime
+  }), /*#__PURE__*/React__default.createElement(DatePicker, {
+    selectedDate: selectedDate
+  }));
+};
+
+export { Datepicker as default };

package/esm/Dropdown/index.js

@@ -11,6 +11,7 @@ var clx = classNames.bind(styles);
 var Dropdown = function Dropdown(_a) {
   var children = _a.children,
     zIndex = _a.zIndex,
+    fontSize = _a.fontSize,
     disabled = _a.disabled,
     onVisibleChange = _a.onVisibleChange,
     overlay = _a.overlay,
@@ -24,19 +25,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 = 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 = useState(null),
-    popperElement = _j[0],
-    setPopperElement = _j[1];
-  var _k = useState(false),
-    visible = _k[0],
-    setVisible = _k[1];
+    controlElement = _j[0],
+    setControlElement = _j[1];
+  var _k = useState(null),
+    popperElement = _k[0],
+    setPopperElement = _k[1];
+  var _l = useState(false),
+    visible = _l[0],
+    setVisible = _l[1];
   var isVisible = visibleProp && visible && !disabled;
-  var _l = usePopper(controlElement, popperElement, {
+  var _m = usePopper(controlElement, popperElement, {
       placement: placement,
       strategy: strategy,
       modifiers: [{
@@ -47,9 +50,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 = useMemo(function () {
     return Children.only(isNotComponent ? /*#__PURE__*/React__default.createElement("button", null, children) : children);
@@ -70,9 +73,11 @@ var Dropdown = function Dropdown(_a) {
     if (controlElement === null || controlElement === void 0 ? void 0 : controlElement.contains(e.target)) return;
     onHide();
   }, [onHide, controlElement]);
-  var onClickOverlay = useCallback(function (e) {
-    e.stopPropagation();
-    onHide();
+  var onClickOverlay = useCallback(function (event) {
+    event.stopPropagation();
+    if (!preventAutoClose) {
+      onHide();
+    }
   }, [onHide]);
   useEffect(function () {
     var unsubscribes = [];
@@ -119,11 +124,13 @@ var Dropdown = function Dropdown(_a) {
     ref: setPopperElement,
     "data-testid": "popper-container",
     className: clx("popper-container"),
-    style: __assign(__assign(__assign({}, styles.popper), {
+    style: __assign(__assign(__assign(__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.createElement("div", {

package/esm/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/esm/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/esm/Menu/components/MenuItem/index.js

@@ -16,7 +16,7 @@ var MenuItem = /*#__PURE__*/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/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, 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/esm/Select/index.js

@@ -14,6 +14,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,
@@ -24,6 +25,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 = useState(false),
@@ -62,13 +64,14 @@ var Select = function Select(_a) {
     onVisibleChange: setIsOpen,
     trigger: ["click"],
     zIndex: zIndex,
+    fontSize: fontSize,
     disabled: !!disabled,
     overlay: /*#__PURE__*/React__default.createElement(MenuOverlay, {
       options: preparedOptions,
       onChange: onChange
     }),
     samewidth: true
-  }, /*#__PURE__*/React__default.createElement(InputRoot, {
+  }, customInputRoot ? customInputRoot : (/*#__PURE__*/React__default.createElement(InputRoot, {
     error: error,
     size: size,
     className: clx(styles.root),
@@ -88,7 +91,7 @@ var Select = function Select(_a) {
     name: name,
     tabIndex: -1,
     value: value || ""
-  }))));
+  })))));
 };
 
 export { Select as default };

package/esm/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/esm/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/esm/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/helpers/date/index.d.ts

@@ -5,6 +5,7 @@ export declare const getShortWeekDayNameByIndex: (index: number) => string;
 export declare const shiftDate: (date: Date, days: number) => Date;
 export declare const isSameMonthAndYear: (date: Date, otherDate: Date) => boolean;
 export declare const toISODate: (date: Date) => string;
+export declare const toDMYDate: (dateISO: string) => string;
 export declare const getPeriodDates: (startDate: DateFormat, period?: number) => string;
 export declare const clearTime: (date: Date) => Date;
 export declare const getDaysDiff: (dateStart: Date, dateEnd: Date) => number;

package/esm/helpers/date/index.js

@@ -42,6 +42,10 @@ var isSameMonthAndYear = function isSameMonthAndYear(date, otherDate) {
 var toISODate = function toISODate(date) {
   return format(date, "yyyy-MM-dd");
 };
+// Convert date to DMY format (dd.MM.yyyy)
+var toDMYDate = function toDMYDate(dateISO) {
+  return dateISO ? format(new Date(dateISO), "dd.MM.yyyy") : "";
+};
 // Get the period dates as a formatted string
 var getPeriodDates = function getPeriodDates(startDate, period) {
   if (period === void 0) {
@@ -66,4 +70,4 @@ var getDaysDiff = function getDaysDiff(dateStart, dateEnd) {
   return Math.round((end - start) / (1000 * 60 * 60 * 24)); // Convert milliseconds to days
 };
 
-export { clearTime, getDaysDiff, getPeriodDates, getShortWeekDayNameByIndex, getUpperMonthName, isSameMonthAndYear, parse, shiftDate, toISODate };
+export { clearTime, getDaysDiff, getPeriodDates, getShortWeekDayNameByIndex, getUpperMonthName, isSameMonthAndYear, parse, shiftDate, toDMYDate, toISODate };

package/esm/index.d.ts

@@ -6,6 +6,7 @@ export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
 export { default as Chip } from "./Chip";
 export { default as Counter } from "./Counter";
+export { default as Datepicker } from "./Datepicker";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";

package/esm/index.js

@@ -6,6 +6,7 @@ export { default as Calendar } from './Calendar/index.js';
 export { default as Checkbox } from './Checkbox/index.js';
 export { default as Chip } from './Chip/index.js';
 export { default as Counter } from './Counter/index.js';
+export { default as Datepicker } from './Datepicker/index.js';
 export { default as DotsLoader } from './DotsLoader/index.js';
 export { default as Dropdown } from './Dropdown/index.js';
 export { default as Grid } from './Grid/index.js';

package/helpers/date/index.d.ts

@@ -5,6 +5,7 @@ export declare const getShortWeekDayNameByIndex: (index: number) => string;
 export declare const shiftDate: (date: Date, days: number) => Date;
 export declare const isSameMonthAndYear: (date: Date, otherDate: Date) => boolean;
 export declare const toISODate: (date: Date) => string;
+export declare const toDMYDate: (dateISO: string) => string;
 export declare const getPeriodDates: (startDate: DateFormat, period?: number) => string;
 export declare const clearTime: (date: Date) => Date;
 export declare const getDaysDiff: (dateStart: Date, dateEnd: Date) => number;

package/helpers/date/index.js

@@ -44,6 +44,10 @@ var isSameMonthAndYear = function isSameMonthAndYear(date, otherDate) {
 var toISODate = function toISODate(date) {
   return dateFns.format(date, "yyyy-MM-dd");
 };
+// Convert date to DMY format (dd.MM.yyyy)
+var toDMYDate = function toDMYDate(dateISO) {
+  return dateISO ? dateFns.format(new Date(dateISO), "dd.MM.yyyy") : "";
+};
 // Get the period dates as a formatted string
 var getPeriodDates = function getPeriodDates(startDate, period) {
   if (period === void 0) {
@@ -76,4 +80,5 @@ exports.getUpperMonthName = getUpperMonthName;
 exports.isSameMonthAndYear = isSameMonthAndYear;
 exports.parse = parse;
 exports.shiftDate = shiftDate;
+exports.toDMYDate = toDMYDate;
 exports.toISODate = toISODate;

package/index.d.ts

@@ -6,6 +6,7 @@ export { default as Calendar } from "./Calendar";
 export { default as Checkbox } from "./Checkbox";
 export { default as Chip } from "./Chip";
 export { default as Counter } from "./Counter";
+export { default as Datepicker } from "./Datepicker";
 export { default as DotsLoader } from "./DotsLoader";
 export { default as Dropdown } from "./Dropdown";
 export { default as Grid } from "./Grid";

package/index.js

@@ -8,32 +8,33 @@ var index$4 = require('./Calendar/index.js');
 var index$5 = require('./Checkbox/index.js');
 var index$6 = require('./Chip/index.js');
 var index$7 = require('./Counter/index.js');
-var index$8 = require('./DotsLoader/index.js');
-var index$9 = require('./Dropdown/index.js');
-var index$a = require('./Grid/index.js');
-var index$b = require('./Grid/Item/index.js');
-var index$c = require('./Image/index.js');
-var index$d = require('./Input/index.js');
-var index$e = require('./Menu/index.js');
-var index$f = require('./Menu/components/MenuItem/index.js');
-var index$g = require('./Modal/index.js');
-var index$h = require('./Portal/index.js');
-var index$i = require('./RadioGroup/index.js');
-var index$j = require('./Select/index.js');
-var index$k = require('./Separator/index.js');
-var index$l = require('./Skeleton/index.js');
-var index$m = require('./Status/index.js');
-var index$n = require('./Switch/index.js');
-var index$o = require('./TabsMenu/index.js');
-var index$p = require('./TabsPanes/index.js');
-var index$q = require('./TextArea/index.js');
-var index$r = require('./Theme/index.js');
-var index$s = require('./Tooltip/index.js');
-var index$t = require('./TimeSelect/index.js');
-var index$u = require('./Typography/index.js');
-var index$v = require('./hooks/useMediaSizes/index.js');
-var index$w = require('./hooks/useOnClickOutside/index.js');
-var index$x = require('./hooks/useScrollLock/index.js');
+var index$8 = require('./Datepicker/index.js');
+var index$9 = require('./DotsLoader/index.js');
+var index$a = require('./Dropdown/index.js');
+var index$b = require('./Grid/index.js');
+var index$c = require('./Grid/Item/index.js');
+var index$d = require('./Image/index.js');
+var index$e = require('./Input/index.js');
+var index$f = require('./Menu/index.js');
+var index$g = require('./Menu/components/MenuItem/index.js');
+var index$h = require('./Modal/index.js');
+var index$i = require('./Portal/index.js');
+var index$j = require('./RadioGroup/index.js');
+var index$k = require('./Select/index.js');
+var index$l = require('./Separator/index.js');
+var index$m = require('./Skeleton/index.js');
+var index$n = require('./Status/index.js');
+var index$o = require('./Switch/index.js');
+var index$p = require('./TabsMenu/index.js');
+var index$q = require('./TabsPanes/index.js');
+var index$r = require('./TextArea/index.js');
+var index$s = require('./Theme/index.js');
+var index$t = require('./Tooltip/index.js');
+var index$u = require('./TimeSelect/index.js');
+var index$v = require('./Typography/index.js');
+var index$w = require('./hooks/useMediaSizes/index.js');
+var index$x = require('./hooks/useOnClickOutside/index.js');
+var index$y = require('./hooks/useScrollLock/index.js');
 require('./Icons/index.js');
 var ArrowNext = require('./Icons/ArrowNext.js');
 var Cart = require('./Icons/Cart.js');
@@ -62,33 +63,34 @@ exports.Calendar = index$4.default;
 exports.Checkbox = index$5.default;
 exports.Chip = index$6.default;
 exports.Counter = index$7.default;
-exports.DotsLoader = index$8.default;
-exports.Dropdown = index$9.default;
-exports.Grid = index$a.default;
-exports.GridItem = index$b.default;
-exports.Image = index$c.default;
-exports.Input = index$d.default;
-exports.Menu = index$e.default;
-exports.MenuItem = index$f.default;
-exports.Modal = index$g.default;
-exports.Portal = index$h.default;
-exports.RadioGroup = index$i.default;
-exports.Select = index$j.default;
-exports.Separator = index$k.default;
-exports.SkeletonRect = index$l.SkeletonRect;
-exports.SkeletonText = index$l.SkeletonText;
-exports.Status = index$m.default;
-exports.Switch = index$n.default;
-exports.TabsMenu = index$o.default;
-exports.TabsPanes = index$p.default;
-exports.TextArea = index$q.default;
-exports.THEMES = index$r.THEMES;
-exports.Tooltip = index$s.default;
-exports.TimeSelect = index$t.default;
-exports.Typography = index$u.default;
-exports.useMediaSizes = index$v.default;
-exports.useOnClickOutside = index$w.default;
-exports.useScrollLock = index$x.default;
+exports.Datepicker = index$8.default;
+exports.DotsLoader = index$9.default;
+exports.Dropdown = index$a.default;
+exports.Grid = index$b.default;
+exports.GridItem = index$c.default;
+exports.Image = index$d.default;
+exports.Input = index$e.default;
+exports.Menu = index$f.default;
+exports.MenuItem = index$g.default;
+exports.Modal = index$h.default;
+exports.Portal = index$i.default;
+exports.RadioGroup = index$j.default;
+exports.Select = index$k.default;
+exports.Separator = index$l.default;
+exports.SkeletonRect = index$m.SkeletonRect;
+exports.SkeletonText = index$m.SkeletonText;
+exports.Status = index$n.default;
+exports.Switch = index$o.default;
+exports.TabsMenu = index$p.default;
+exports.TabsPanes = index$q.default;
+exports.TextArea = index$r.default;
+exports.THEMES = index$s.THEMES;
+exports.Tooltip = index$t.default;
+exports.TimeSelect = index$u.default;
+exports.Typography = index$v.default;
+exports.useMediaSizes = index$w.default;
+exports.useOnClickOutside = index$x.default;
+exports.useScrollLock = index$y.default;
 exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;

package/package.json

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