colibri-ui 0.7.110 → 0.7.113

package/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/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/Calendar/components/Month/Month.js

@@ -72,7 +72,7 @@ var Month = function Month(props) {
     className: clx(styles__default.default["month-name"])
   }, /*#__PURE__*/React__namespace.createElement(index.default, {
     tag: "span",
-    size: "h3"
+    size: props.titleSize
   }, index$1.getUpperMonthName(props.startDate))), /*#__PURE__*/React__namespace.createElement("div", {
     className: clx(styles__default.default.table)
   }, /*#__PURE__*/React__namespace.createElement("ul", {

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

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

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

@@ -36,20 +36,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 = React.useRef(null);
   var startMonth = getStartMonth.getStartMonth({
     today: today,
     activeDates: activeDates
   });
-  var _c = React.useState(initialSelectedDate),
-    selectedDate = _c[0],
-    setSelectedDate = _c[1];
-  var _d = React.useState(initialSelectedPeriod),
-    selectedPeriod = _d[0],
-    setSelectedPeriod = _d[1];
-  var _e = React.useState(function () {
+  var _e = React.useState(initialSelectedDate),
+    selectedDate = _e[0],
+    setSelectedDate = _e[1];
+  var _f = React.useState(initialSelectedPeriod),
+    selectedPeriod = _f[0],
+    setSelectedPeriod = _f[1];
+  var _g = React.useState(function () {
       if (initialSelectedDate) {
         return getNumberOfMonthsBetweenDates.getNumberOfMonthsBetweenDates(startMonth, initialSelectedDate);
       } else if (activeDates && activeDates.length) {
@@ -57,14 +62,14 @@ var Calendar = function Calendar(_a) {
       }
       return 0;
     }),
-    currentMonthOffset = _e[0],
-    setCurrentMonthOffset = _e[1];
-  var _f = React.useState(0),
-    contentWidth = _f[0],
-    setContentWidth = _f[1];
-  var _g = React.useState(true),
-    isRangeCompleted = _g[0],
-    setIsRangeCompleted = _g[1];
+    currentMonthOffset = _g[0],
+    setCurrentMonthOffset = _g[1];
+  var _h = React.useState(0),
+    contentWidth = _h[0],
+    setContentWidth = _h[1];
+  var _j = React.useState(true),
+    isRangeCompleted = _j[0],
+    setIsRangeCompleted = _j[1];
   React.useEffect(function () {
     var _a;
     setContentWidth(((_a = $root.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0);
@@ -149,7 +154,10 @@ var Calendar = function Calendar(_a) {
     onDayClick: handleDayClick
   };
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default.root),
+    className: clx(styles__default.default.root, className),
+    style: {
+      minWidth: "".concat(minWidth, "px")
+    },
     "data-testid": "calendar",
     ref: $root
   }, /*#__PURE__*/React__default.default.createElement("div", null, contentWidth ? (/*#__PURE__*/React__default.default.createElement("div", {
@@ -167,9 +175,11 @@ var Calendar = function Calendar(_a) {
       offsetLeft: index * contentWidth
     });
     return /*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({}, attrs, {
+      titleSize: titleSize,
       key: "month-".concat(index)
     }));
   }))) : (/*#__PURE__*/React__default.default.createElement(Month.Month, tslib.__assign({
+    titleSize: titleSize,
     today: today,
     startDate: getMonthStartDate(currentMonthOffset),
     offsetLeft: 0

package/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/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/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/Datepicker/Datepicker.module.css

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

package/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/Datepicker/components/DatePicker/index.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Dropdown/index.js');
+var index$1 = require('../../../Calendar/index.js');
+var index$2 = require('../../../helpers/date/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 DatePicker = function DatePicker(_a) {
+  var className = _a.className,
+    _b = _a.selectedDate,
+    selectedDate = _b === void 0 ? "" : _b;
+  var _c = React.useState(selectedDate),
+    date = _c[0],
+    setDate = _c[1];
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default['input-container'], styles__default.default['input-date'], className)
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    placement: "bottom",
+    preventAutoClose: true,
+    fontSize: 14,
+    trigger: ["click"],
+    overlay: /*#__PURE__*/React__default.default.createElement(index$1.default, {
+      minWidth: 260,
+      className: styles__default.default.calendar,
+      today: index$2.toISODate(new Date()),
+      titleSize: "h5",
+      selectedDate: date,
+      onChange: function onChange(payload) {
+        setDate(payload.date);
+      }
+    })
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clx(styles__default.default['input-field']),
+    tabIndex: 0,
+    "aria-expanded": "false",
+    "aria-haspopup": "true",
+    "aria-invalid": "false",
+    autoComplete: "off",
+    maxLength: 7,
+    readOnly: true,
+    value: index$2.toDMYDate(date)
+  })));
+};
+
+exports.default = DatePicker;

package/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/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/Datepicker/components/TimePicker/Label/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var OptionLabel = function OptionLabel(_a) {
+  var time = _a.time,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter;
+  var ref = React.useRef(null);
+  return /*#__PURE__*/React__default.default.createElement("span", {
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    ref: ref
+  }, time);
+};
+
+exports.default = OptionLabel;

package/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/Datepicker/components/TimePicker/helpers.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var dateFns = require('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 dateFns.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 = dateFns.addMinutes(day, index * interval);
+    return {
+      time: formatTime(date)
+    };
+  });
+};
+var checkIsBeforeNow = function checkIsBeforeNow(time, currentDate) {
+  return currentDate ? dateFns.isBefore(dateFns.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 dateFns.isBefore(dateFns.parse(time, "HH:mm", date), selectedDate);
+  }
+  return false;
+};
+
+exports.DEFAULT_TIME = DEFAULT_TIME;
+exports.checkIsBeforeNow = checkIsBeforeNow;
+exports.checkIsBeforeSelectedDate = checkIsBeforeSelectedDate;
+exports.formatTime = formatTime;
+exports.generateSuggest = generateSuggest;

package/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/Datepicker/components/TimePicker/index.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$1 = require('../../../Select/index.js');
+var styles = require('./index.module.css');
+var helpers = require('./helpers.js');
+var index = require('./Label/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 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 = React.useState(selectedTime),
+    time = _d[0],
+    setTime = _d[1];
+  var baseOptions = React.useMemo(function () {
+    return helpers.generateSuggest(interval).map(function (item) {
+      return {
+        value: item.time,
+        label: /*#__PURE__*/React__default.default.createElement(index.default, {
+          time: item.time
+        })
+      };
+    });
+  }, [interval]);
+  var options = React.useMemo(function () {
+    return baseOptions.map(function (option) {
+      return tslib.__assign(tslib.__assign({}, option), {
+        disabled: false
+      });
+    });
+  }, [baseOptions, interval]);
+  return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    className: className,
+    value: time,
+    options: options,
+    fontSize: 14,
+    customInputRoot: /*#__PURE__*/React__default.default.createElement("div", {
+      className: clx(styles__default.default['input-container'], styles__default.default['input-time'])
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      className: clx(styles__default.default['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__*/React.memo(TimePicker);
+
+exports.default = TimePickerInput;

package/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/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;

package/Datepicker/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Datepicker.module.css');
+var index = require('./components/TimePicker/index.js');
+var index$1 = require('./components/DatePicker/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+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 Datepicker = function Datepicker(_a) {
+  var className = _a.className,
+    selectedTime = _a.selectedTime,
+    selectedDate = _a.selectedDate;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root, className)
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    selectedTime: selectedTime
+  }), /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    selectedDate: selectedDate
+  }));
+};
+
+exports.default = Datepicker;

package/Datepicker/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../esm/Datepicker/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

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", {