colibri-ui 0.7.57 → 0.7.59

package/Badge/Badge.module.css

@@ -1,30 +1,28 @@
 .root {
-  position: absolute;
-  z-index: 1;
-  user-select: none;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
   align-items: center;
+  background-color: var(--palette-brand-default-1);
+  border-radius: 10px;
   box-sizing: border-box;
-  min-width: 20px;
+  color: var(--palette-white);
+  display: flex;
+  flex-flow: row wrap;
+  font-size: 12px;
   height: 20px;
+  min-width: 20px;
   padding: 0 4px;
-  font-size: 12px;
-  border-radius: 10px;
-  background-color: var(--palette-brand-default-1);
-  color: var(--palette-white);
+  place-content: center center;
+  position: absolute;
+  user-select: none;
+  z-index: 1;
 }
 .root_direction_right {
-  top: 0;
   right: 0;
+  top: 0;
   transform: scale(1) translate(60%, -50%);
 }
 .root_direction_left {
-  top: 0;
   left: 0;
+  top: 0;
   transform: scale(1) translate(-60%, -50%);
 }
 .root_invisible {

package/Badge/Control/Control.module.css

@@ -1,6 +1,6 @@
 .root {
-  position: relative;
   display: inline-flex;
   flex-shrink: 0;
+  position: relative;
   vertical-align: middle;
 }

package/Button/Button.module.css

@@ -1,27 +1,26 @@
 .root {
-  color: var(--palette-black);
-  padding: 0 12px;
-  box-sizing: border-box;
-  display: inline-flex;
   align-items: center;
-  justify-content: center;
+  border: 1px solid;
+  border-radius: var(--button-border-radius);
+  box-sizing: border-box;
+  color: 0.15s linear;
   cursor: pointer;
-  gap: 8px;
+  display: inline-flex;
   flex-shrink: 0;
-  border: 1px solid;
+  font-size: 15px;
   font-style: normal;
   font-weight: 400;
+  gap: 8px;
   height: 36px;
-  font-size: 15px;
+  justify-content: center;
   line-height: 36px;
-  transition: transform 0.1s ease-out;
-  color: 0.15s linear;
-  transform: scale(1);
   overflow: hidden;
-  white-space: nowrap;
+  padding: 0 12px;
   text-overflow: ellipsis;
+  transform: scale(1);
+  transition: transform 0.1s ease-out;
+  white-space: nowrap;
   width: fit-content;
-  border-radius: var(--button-border-radius);
 }
 .root_icon {
   border-radius: 50%;
@@ -43,11 +42,11 @@
   width: 100%;
 }
 .root_disabled {
-  cursor: not-allowed;
-  pointer-events: none;
-  color: var(--button-primary-color-disabled);
   background-color: var(--button-primary-background-color-disabled);
   border-color: var(--button-primary-border-color-disabled);
+  color: var(--button-primary-color-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
 .icon {
@@ -55,75 +54,90 @@
 }
 
 .size_xs {
-  height: 29px;
   font-size: 12px;
+  height: 29px;
   line-height: 29px;
 }
 .size_s {
-  height: 32px;
   font-size: 13px;
+  height: 32px;
   line-height: 32px;
 }
 .size_m {
-  height: 36px;
   font-size: 15px;
+  height: 36px;
   line-height: 36px;
 }
 .size_l {
-  height: 42px;
   font-size: 18px;
+  height: 42px;
   line-height: 42px;
 }
 
 .variant_primary {
-  color: var(--button-primary-color);
   background-color: var(--button-primary-background-color);
   border-color: var(--button-primary-border-color);
+  color: var(--button-primary-color);
 }
 .variant_primary:hover {
-  color: var(--button-primary-color-hovered);
   background-color: var(--button-primary-background-color-hovered);
   border-color: var(--button-primary-border-color-hovered);
+  color: var(--button-primary-color-hovered);
 }
 .variant_primary:active {
-  color: var(--button-primary-color-active);
   background-color: var(--button-primary-background-color-active);
   border-color: var(--button-primary-border-color-active);
+  color: var(--button-primary-color-active);
 }
 .variant_secondary {
-  color: var(--button-secondary-color);
   background-color: var(--button-secondary-background-color);
   border-color: var(--button-secondary-border-color);
+  color: var(--button-secondary-color);
 }
 .variant_secondary:hover {
-  color: var(--button-secondary-color-hovered);
   background-color: var(--button-secondary-background-color-hovered);
   border-color: var(--button-secondary-border-color-hovered);
+  color: var(--button-secondary-color-hovered);
 }
 .variant_secondary:active {
-  color: var(--button-secondary-color-active);
   background-color: var(--button-secondary-background-color-active);
   border-color: var(--button-secondary-border-color-active);
+  color: var(--button-secondary-color-active);
 }
 .variant_pseudo {
-  color: var(--button-pseudo-color);
   background-color: var(--button-pseudo-background-color);
   border-color: var(--button-pseudo-border-color);
+  color: var(--button-pseudo-color);
 }
 .variant_pseudo:hover {
-  color: var(--button-pseudo-color-hovered);
   background-color: var(--button-pseudo-background-color-hovered);
   border-color: var(--button-pseudo-border-color-hovered);
+  color: var(--button-pseudo-color-hovered);
 }
 .variant_pseudo:active {
-  color: var(--button-pseudo-color-active);
   background-color: var(--button-pseudo-background-color-active);
   border-color: var(--button-pseudo-border-color-active);
+  color: var(--button-pseudo-color-active);
+}
+.variant_outline {
+  background-color: var(--button-outline-background-color);
+  border-color: var(--button-outline-border-color);
+  color: var(--button-outline-color);
+}
+.variant_outline:hover {
+  background-color: var(--button-outline-background-color-hovered);
+  border-color: var(--button-outline-border-color-hovered);
+  color: var(--button-outline-color-hovered);
+}
+.variant_outline:active {
+  background-color: var(--button-outline-background-color-active);
+  border-color: var(--button-outline-border-color-active);
+  color: var(--button-outline-color-active);
 }
 .variant_clear {
-  color: var(--button-clear-color);
   background-color: transparent;
   border-color: transparent;
+  color: var(--button-clear-color);
 }
 .variant_clear:hover {
   color: var(--button-clear-color-hovered);

package/Button/index.props.d.ts

@@ -1,5 +1,5 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
-export type ButtonVariant = "primary" | "secondary" | "pseudo" | "clear";
+export type ButtonVariant = "primary" | "secondary" | "outline" | "pseudo" | "clear";
 export type ButtonSize = "xs" | "s" | "m" | "l";
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     variant?: ButtonVariant;

package/Calendar/components/ContinueButton/index.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type Props = {
+    isChanged: boolean;
+    selectedDate?: string;
+    selectedPeriod?: number;
+    onContinue: () => void;
+    onCancel: () => void;
+};
+export declare const ContinueButton: React.FC<Props>;
+export {};

package/Calendar/components/ContinueButton/index.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$2 = require('../../../Button/index.js');
+var index$1 = require('../../../libs/requestIdleCallback/index.js');
+var index = 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 ContinueButton = function ContinueButton(_a) {
+  var selectedDate = _a.selectedDate,
+    selectedPeriod = _a.selectedPeriod,
+    isChanged = _a.isChanged,
+    onContinue = _a.onContinue,
+    onCancel = _a.onCancel;
+  var selectedDates = React.useMemo(function () {
+    if (selectedDate && selectedPeriod) {
+      return index.getPeriodDates(selectedDate, selectedPeriod);
+    }
+    return null;
+  }, [selectedDate, selectedPeriod]);
+  var handleClick = React.useCallback(function () {
+    index$1.requestIdleCallback(function () {
+      return isChanged ? onContinue() : onCancel();
+    }, {
+      timeout: 200
+    });
+  }, [isChanged, onContinue, onCancel]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.root),
+    "data-component": "Calendar__ContinueButton"
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    size: "l",
+    onClick: handleClick
+  }, isChanged && selectedDates ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, "Select ", selectedDates) : /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, "Cancel")));
+};
+
+exports.ContinueButton = ContinueButton;

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

@@ -0,0 +1,4 @@
+.root button {
+  display: block;
+  width: 100%;
+}

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

@@ -0,0 +1,15 @@
+import type { FunctionComponent } from "react";
+export interface FCWithElements<T = {}> extends FunctionComponent<T> {
+}
+type Props = {
+    today: string;
+    startDate: Date;
+    activeDays?: string[];
+    selectedDate?: string;
+    selectedPeriod?: number;
+    onDayClick: (date: string) => void;
+    offsetLeft: number;
+    availableDates?: string[];
+};
+export declare const Month: FCWithElements<Props>;
+export {};

package/Calendar/components/Month/Month.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var leadingZeros = require('../../../libs/numbers/leadingZeros.js');
+var index = require('../../../Typography/index.js');
+var index$1 = require('../../../helpers/date/index.js');
+var getMonthWeeks = require('../../utils/getMonthWeeks.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+var Item = function Item(_a) {
+  var isSelected = _a.isSelected,
+    isInSelectedRange = _a.isInSelectedRange,
+    isStartOfSelection = _a.isStartOfSelection,
+    isEndOfSelection = _a.isEndOfSelection,
+    children = _a.children;
+  var noSelection = isStartOfSelection && isEndOfSelection ? styles__default.default["no-selection"] : "";
+  var startClass = isStartOfSelection && !isEndOfSelection ? styles__default.default["start-of-selection"] : "";
+  var endClass = isEndOfSelection && !isStartOfSelection ? styles__default.default["end-of-selection"] : "";
+  var firstChildClass = isEndOfSelection ? styles__default.default["first-child"] : "";
+  var lastChildClass = isStartOfSelection ? styles__default.default["last-child"] : "";
+  if (isSelected) {
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default["selected-range-day"], styles__default.default["selected-day"], noSelection, startClass, endClass, firstChildClass, lastChildClass)
+    }, children);
+  } else if (isInSelectedRange) {
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default["selected-range-day"])
+    }, children);
+  }
+  return /*#__PURE__*/React__namespace.createElement("li", {
+    className: clx(styles__default.default.day)
+  }, children);
+};
+var Month = function Month(props) {
+  var year = props.startDate.getFullYear();
+  var month = leadingZeros.leadingZeros(props.startDate.getMonth() + 1, 2);
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    "data-component": "Month",
+    className: clx(styles__default.default.root),
+    style: {
+      left: props.offsetLeft ? "".concat(props.offsetLeft, "px") : undefined
+    }
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default["month-name"])
+  }, /*#__PURE__*/React__namespace.createElement(index.default, {
+    tag: "span",
+    size: "h3"
+  }, index$1.getUpperMonthName(props.startDate))), /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default.table)
+  }, /*#__PURE__*/React__namespace.createElement("ul", {
+    className: clx(styles__default.default.legend)
+  }, tslib.__spreadArray([], Array(7), true).map(function (empty) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest[_i - 1] = arguments[_i];
+    }
+    var index$2 = rest[0] + 1;
+    return /*#__PURE__*/React__namespace.createElement("li", {
+      className: clx(styles__default.default.day),
+      key: index$2
+    }, /*#__PURE__*/React__namespace.createElement(index.default, {
+      style: {
+        opacity: index$2 > 5 ? 80 : 30,
+        color: index$2 > 5 ? "var(--typography-alert)" : "var(--palette-black)"
+      }
+    }, index$1.getShortWeekDayNameByIndex(index$2)));
+  })), getMonthWeeks.getMonthWeeks(props).map(function (days) {
+    var rest1 = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest1[_i - 1] = arguments[_i];
+    }
+    return /*#__PURE__*/React__namespace.createElement("ul", {
+      key: "week-".concat(rest1[0]),
+      className: clx(styles__default.default.week)
+    }, days.map(function (day) {
+      var rest2 = [];
+      for (var _i = 1; _i < arguments.length; _i++) {
+        rest2[_i - 1] = arguments[_i];
+      }
+      var key = "day-".concat(rest2[0]);
+      if (day.isDummy) {
+        return /*#__PURE__*/React__namespace.createElement("li", {
+          className: clx(styles__default.default.day),
+          key: key
+        });
+      }
+      var attrs = {
+        isStartOfSelection: day.isStartOfSelection,
+        isEndOfSelection: day.isEndOfSelection,
+        isSelected: day.isSelected,
+        isInSelectedRange: day.isInSelectedRange
+      };
+      var dayInnerActive = day.isActive ? styles__default.default["day-inner-active"] : "";
+      return /*#__PURE__*/React__namespace.createElement(Item, tslib.__assign({}, attrs, {
+        key: key
+      }), /*#__PURE__*/React__namespace.createElement("button", {
+        className: clx(styles__default.default["day-inner"], dayInnerActive),
+        style: {
+          background: day.isSelected ? "var(--palette-bg-2)" : "transparent"
+        },
+        onClick: day.isActive ? function () {
+          return props.onDayClick([year, month, leadingZeros.leadingZeros(day.day, 2)].join("-"));
+        } : undefined
+      }, /*#__PURE__*/React__namespace.createElement(index.default, {
+        size: "s",
+        style: {
+          opacity: day.isActive ? 80 : 30,
+          color: day.isActive ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.3)"
+        }
+      }, day.day)));
+    }));
+  })));
+};
+
+exports.Month = Month;

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

@@ -0,0 +1,143 @@
+.root {
+  box-sizing: border-box;
+  padding: 0 16px;
+  width: 100%;
+}
+
+.month-name {
+  padding: 6px 0 25px;
+  text-align: center;
+}
+
+.table {
+  display: table;
+  width: 100%;
+}
+
+.week {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.day {
+  display: block;
+  height: 32px;
+  position: relative;
+  text-align: center;
+  width: 32px;
+}
+
+.legend {
+  align-items: stretch;
+  display: flex;
+  flex-wrap: nowrap;
+  font-size: 14px;
+  justify-content: space-between;
+  line-height: 20px;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.selected-range-day {
+  display: block;
+  height: 32px;
+  position: relative;
+  text-align: center;
+  width: 32px;
+  z-index: 0;
+}
+.selected-range-day:hover {
+  z-index: 1;
+}
+.selected-range-day::before {
+  background: #f5f5f5;
+  content: "";
+  display: block;
+  height: 100%;
+  left: -50%;
+  position: absolute;
+  top: 0;
+  width: 200%;
+}
+.selected-range-day:first-child::before {
+  left: 0;
+  width: 150%;
+}
+.selected-range-day:last-child::before {
+  left: auto;
+  right: 0;
+  width: 150%;
+}
+
+.selected-day {
+  z-index: 2;
+}
+.selected-day::before {
+  display: "block";
+  left: auto;
+  right: auto;
+  width: 90%;
+}
+.selected-day:first-child::before {
+  display: "block";
+  left: 50%;
+  width: 90%;
+}
+.selected-day:last-child::before {
+  display: "block";
+  right: 50%;
+  width: 90%;
+}
+.selected-day + .selected-day, .selected-day + .selected-day:hover {
+  z-index: 4 !important;
+}
+
+.no-selection::before {
+  display: none;
+}
+
+.start-of-selection::before {
+  left: 50%;
+  right: auto;
+}
+
+.end-of-selection::before {
+  left: auto;
+  right: 50%;
+}
+
+.first-child:first-child::before {
+  display: none;
+}
+
+.last-child:last-child::before {
+  display: none;
+}
+
+.day-inner {
+  border: 0;
+  border-radius: 6px;
+  display: inline-block;
+  height: 32px;
+  outline: 0;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  transition: background 0.3s ease;
+  width: 32px;
+}
+
+.day-inner-active {
+  cursor: pointer;
+}
+.day-inner-active:hover {
+  background: var(--palette-bg-2);
+}

package/Calendar/components/Presets/index.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+export declare enum PRESETS {
+    TODAY = "today",
+    TOMORROW = "tomorrow",
+    WEEKENDS = "weekends",
+    CURWEEK = "currWeek",
+    NEXTWEEK = "nextWeek"
+}
+export type Preset = {
+    name: string;
+    date: string;
+    period: number;
+};
+type Props = {
+    presets: Preset[];
+    onPresetSelect(preset: Preset): void;
+};
+export declare const Presets: React.FunctionComponent<Props>;
+export {};

package/Calendar/components/Presets/index.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Button/index.js');
+var styles = require('./index.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var clx = classNames__default.default.bind(styles__default.default);
+exports.PRESETS = void 0;
+(function (PRESETS) {
+  PRESETS["TODAY"] = "today";
+  PRESETS["TOMORROW"] = "tomorrow";
+  PRESETS["WEEKENDS"] = "weekends";
+  PRESETS["CURWEEK"] = "currWeek";
+  PRESETS["NEXTWEEK"] = "nextWeek";
+})(exports.PRESETS || (exports.PRESETS = {}));
+var Presets = function Presets(_a) {
+  var presets = _a.presets,
+    onPresetSelect = _a.onPresetSelect;
+  return /*#__PURE__*/React__namespace.createElement("div", {
+    "data-component": "Calendar_Presets"
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default["native-scroll-inner"])
+  }, /*#__PURE__*/React__namespace.createElement("div", {
+    className: clx(styles__default.default.inner)
+  }, presets.map(function (preset) {
+    var rest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+      rest[_i - 1] = arguments[_i];
+    }
+    return /*#__PURE__*/React__namespace.createElement("div", {
+      className: clx(styles__default.default.item),
+      key: "preset=".concat(rest[0])
+    }, /*#__PURE__*/React__namespace.createElement(index.default, {
+      variant: "outline",
+      onClick: function onClick() {
+        return onPresetSelect(preset);
+      },
+      size: "m"
+    }, preset.name));
+  }))));
+};
+
+exports.Presets = Presets;