colibri-ui 0.7.126 → 0.7.128

package/Calendar/components/Month/Month.js

@@ -77,7 +77,7 @@ var Month = function Month(props) {
     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) {
+  }, tslib.__spreadArray([], Array(7), true).map(function (_) {
     var rest = [];
     for (var _i = 1; _i < arguments.length; _i++) {
       rest[_i - 1] = arguments[_i];

package/Calendar/index.module.css

@@ -74,10 +74,10 @@
 }
 
 .month-control-next-arrow {
+  color: var(--palette-black);
   position: absolute;
-  top: 16px;
   right: 16px;
-  color: var(--palette-black);
+  top: 16px;
   transform: rotate(360deg);
 }
 

package/Checkbox/Checkbox.module.css

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

package/Chip/Chip.module.css

@@ -1,4 +1,4 @@
-.root {
+.chip {
   cursor: pointer;
   display: inline-block;
 }
@@ -41,18 +41,18 @@
 }
 .inner[data-size=s] {
   border-radius: 32px;
-  font-size: 15px;
-  line-height: 32px;
+  font-size: 0.875rem;
+  line-height: 2.2;
 }
 .inner[data-size=m] {
   border-radius: 36px;
-  font-size: 16px;
-  line-height: 36px;
+  font-size: 1rem;
+  line-height: 2.3;
 }
 .inner[data-size=l] {
   border-radius: 44px;
-  font-size: 18px;
-  line-height: 44px;
+  font-size: 1.15rem;
+  line-height: 2.4;
 }
 
 .content {
@@ -60,7 +60,7 @@
   display: flex;
   justify-content: flex-start;
   max-width: 200px;
-  padding: 0 20px;
+  padding: 0 1rem;
   user-select: none;
 }
 
@@ -72,8 +72,12 @@
 
 .icon-right {
   align-items: center;
+  color: var(--palette-bg-5);
   display: flex;
   justify-content: center;
   margin-left: -11px;
-  padding-right: 18px;
+  padding-right: 0.8rem;
+}
+.icon-right:hover {
+  color: var(--palette-black);
 }

package/Chip/index.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var tslib = require('tslib');
 var React = require('react');
 var classNames = require('classnames/bind');
 var styles = require('./Chip.module.css');
@@ -13,34 +14,40 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var Chip = function Chip(props) {
-  var children = props.children,
-    iconOnRight = props.iconOnRight,
-    isActive = props.isActive,
-    onClick = props.onClick,
-    onIconOnRightClick = props.onIconOnRightClick,
-    _a = props.size,
-    size = _a === void 0 ? "m" : _a,
-    _b = props.testID,
-    testID = _b === void 0 ? "chip" : _b;
-  return /*#__PURE__*/React__default.default.createElement("span", {
-    className: clx("root"),
+var Chip = function Chip(_a) {
+  var children = _a.children,
+    iconEnd = _a.iconEnd,
+    isActive = _a.isActive,
+    onClick = _a.onClick,
+    onClickIcon = _a.onClickIcon,
+    _b = _a.size,
+    size = _b === void 0 ? "m" : _b,
+    _c = _a.testID,
+    testID = _c === void 0 ? "chip" : _c,
+    props = tslib.__rest(_a, ["children", "iconEnd", "isActive", "onClick", "onClickIcon", "size", "testID"]);
+  return /*#__PURE__*/React__default.default.createElement("span", tslib.__assign({
+    className: clx("chip"),
     "data-testid": testID
-  }, /*#__PURE__*/React__default.default.createElement("span", {
+  }, props), /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("inner", {
-      inner_active: isActive,
-      inner_inactive: !isActive
+      inner_active: iconEnd || isActive,
+      inner_inactive: !iconEnd && !isActive
     }),
     "data-size": size
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("content"),
+    "aria-pressed": isActive,
+    role: "button",
+    tabIndex: 0,
     onClick: onClick
   }, /*#__PURE__*/React__default.default.createElement("span", {
     className: clx("content-inner")
-  }, children)), iconOnRight && (/*#__PURE__*/React__default.default.createElement("span", {
+  }, children)), iconEnd && (/*#__PURE__*/React__default.default.createElement("span", {
     className: clx("icon-right"),
-    onClick: onIconOnRightClick || onClick
-  }, iconOnRight))));
+    role: "button",
+    tabIndex: 0,
+    onClick: onClickIcon
+  }, iconEnd))));
 };
 
 exports.default = Chip;

package/Chip/index.props.d.ts

@@ -3,8 +3,8 @@ export type ChipProps = {
     size?: Size;
     testID?: string;
     isActive?: boolean;
-    iconOnRight?: React.ReactNode;
+    iconEnd?: React.ReactNode;
     onClick?: () => void;
-    onIconOnRightClick?: () => void;
+    onClickIcon?: () => void;
 };
 export {};

package/Datepicker/components/DatePicker/index.js

@@ -39,9 +39,9 @@ var DatePicker = function DatePicker(_a) {
       }
     })
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: clx(styles__default.default['input-container'], styles__default.default['input-date'], className)
+    className: clx(styles__default.default["input-container"], styles__default.default["input-date"], className)
   }, /*#__PURE__*/React__default.default.createElement("input", {
-    className: clx(styles__default.default['input-field']),
+    className: clx(styles__default.default["input-field"]),
     tabIndex: 0,
     "aria-expanded": "false",
     "aria-haspopup": "true",

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

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

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

@@ -2,7 +2,6 @@ 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>;

package/Datepicker/components/TimePicker/index.js

@@ -48,9 +48,9 @@ var TimePicker = function TimePicker(_a) {
     options: options,
     fontSize: 14,
     customInputRoot: /*#__PURE__*/React__default.default.createElement("div", {
-      className: clx(styles__default.default['input-container'], styles__default.default['input-time'])
+      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']),
+      className: clx(styles__default.default["input-field"]),
       tabIndex: 0,
       "aria-expanded": "false",
       "aria-haspopup": "true",
@@ -61,8 +61,8 @@ var TimePicker = function TimePicker(_a) {
       value: time
     })),
     value: time,
-    onChange: function onChange(time) {
-      return setTime(time);
+    onChange: function onChange(value) {
+      return setTime(value);
     }
   });
 };

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

@@ -1,26 +1,26 @@
 .input-container {
-  border-top-left-radius: 0.375rem;
+  align-items: center;
+  border-bottom: 1px solid var(--palette-bg-3);
   border-bottom-left-radius: 0.375rem;
-  border-top: 1px solid var(--palette-bg-3);
   border-left: 1px solid var(--palette-bg-3);
-  border-bottom: 1px solid var(--palette-bg-3);
+  border-top: 1px solid var(--palette-bg-3);
+  border-top-left-radius: 0.375rem;
+  box-sizing: border-box;
   display: flex;
-  justify-content: center;
-  align-items: center;
   height: 36px;
-  box-sizing: border-box;
+  justify-content: center;
 }
 
 .input-field {
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+  font-size: 1em;
   height: 100%;
+  outline: none;
   padding: 4px;
   text-align: center;
-  font-size: 1em;
-  outline: none;
-  border: none;
   width: 100%;
-  background: transparent;
-  box-sizing: border-box;
 }
 
 .input-time {
@@ -28,29 +28,29 @@
 }
 
 .input-time::before {
+  background-color: var(--palette-bg-3);
   content: "";
-  position: absolute;
   height: 100%;
-  width: 1px;
-  background-color: var(--palette-bg-3);
+  position: absolute;
   right: 0;
+  width: 1px;
 }
 
 .input-time:focus-within {
-  border-top: 1px solid var(--palette-primary-3);
-  border-left: 1px solid var(--palette-primary-3);
   border-bottom: 1px solid var(--palette-primary-3);
+  border-left: 1px solid var(--palette-primary-3);
+  border-top: 1px solid var(--palette-primary-3);
   box-shadow: 0 0 0 2px var(--palette-primary-2);
   z-index: 2;
 }
 
 .input-time:focus-within::before {
+  background-color: var(--palette-primary-3);
   content: "";
-  position: absolute;
   height: 100%;
-  width: 1px;
-  background-color: var(--palette-primary-3);
+  position: absolute;
   right: 0;
+  width: 1px;
 }
 
 .select {

package/Dropdown/index.js

@@ -60,15 +60,18 @@ var Dropdown = function Dropdown(_a) {
         enabled: preventOverflow
       }]
     }),
-    styles = _m.styles,
+    popperStyles = _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);
   }, [children, isNotComponent]);
-  var onToggle = React.useCallback(function (e) {
-    e.stopPropagation();
+  var onToggle = React.useCallback(function (event) {
+    var _a;
+    if ((_a = event.target) === null || _a === void 0 ? void 0 : _a.closest('[data-ignore-click="true"]')) {
+      return;
+    }
     setVisible(function (state) {
       return !state;
     });
@@ -134,7 +137,7 @@ var Dropdown = function Dropdown(_a) {
     ref: setPopperElement,
     "data-testid": "popper-container",
     className: clx("popper-container"),
-    style: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, styles.popper), {
+    style: tslib.__assign(tslib.__assign(tslib.__assign(tslib.__assign({}, popperStyles.popper), {
       zIndex: zIndex,
       minWidth: controlElement === null || controlElement === void 0 ? void 0 : controlElement.offsetWidth
     }), samewidth && {

package/Icons/CrossFill.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/Icons/CrossFill.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var CrossFill = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b = _a.fill,
+    fill = _b === void 0 ? "currentColor" : _b,
+    _c = _a.width,
+    width = _c === void 0 ? 24 : _c,
+    _d = _a.height,
+    height = _d === void 0 ? 24 : _d,
+    props = tslib.__rest(_a, ["fill", "width", "height"]);
+  return /*#__PURE__*/React__default.default.createElement("svg", tslib.__assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: width,
+    height: height,
+    fill: fill,
+    viewBox: "0 0 24 24",
+    ref: ref
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+  }));
+});
+
+exports.default = CrossFill;

package/Icons/index.d.ts

@@ -2,6 +2,7 @@ export { default as ArrowNext } from "./ArrowNext";
 export { default as Cart } from "./Cart";
 export { default as Chevron } from "./Chevron";
 export { default as Close } from "./Close";
+export { default as CrossFill } from "./CrossFill";
 export { default as Edit } from "./Edit";
 export { default as Exit } from "./Exit";
 export { default as EyeOpen } from "./EyeOpen";

package/Icons/index.js

@@ -4,6 +4,7 @@ var ArrowNext = require('./ArrowNext.js');
 var Cart = require('./Cart.js');
 var Chevron = require('./Chevron.js');
 var Close = require('./Close.js');
+var CrossFill = require('./CrossFill.js');
 var Edit = require('./Edit.js');
 var Exit = require('./Exit.js');
 var EyeOpen = require('./EyeOpen.js');
@@ -23,6 +24,7 @@ exports.ArrowNext = ArrowNext.default;
 exports.Cart = Cart.default;
 exports.Chevron = Chevron.default;
 exports.Close = Close.default;
+exports.CrossFill = CrossFill.default;
 exports.Edit = Edit.default;
 exports.Exit = Exit.default;
 exports.EyeOpen = EyeOpen.default;

package/Menu/components/MenuItem/index.js

@@ -24,7 +24,6 @@ var MenuItem = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     children = _a.children;
   return /*#__PURE__*/React__default.default.createElement("li", {
     ref: ref,
-    "data-component": "menu-item",
     style: {
       backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
     },

package/MultiSelect/components/MenuOverlay/index.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ReactNode } from "react";
+import type { GroupProps } from "../../index.props";
+export interface IOption {
+    selected: boolean;
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+}
+type MenuOverlayGroup = Omit<GroupProps, "options" | "value"> & {
+    options: IOption[];
+    value: string;
+};
+type MenuOverlayProps = {
+    groups: MenuOverlayGroup[];
+    onChange: (key: string) => void;
+};
+declare const _default: React.MemoExoticComponent<({ groups, onChange }: MenuOverlayProps) => React.JSX.Element>;
+export default _default;

package/MultiSelect/components/MenuOverlay/index.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$2 = require('../../../Menu/index.js');
+var index$3 = require('../MenuOverlayItem/index.js');
+var generateUniqID = require('../../../helpers/generateUniqID.js');
+var index = require('../../../Typography/index.js');
+var index$1 = require('../../../Separator/index.js');
+var index$4 = require('../../utils/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 OFFSET_ITEMS_COUNT = 2;
+var MenuOverlay = function MenuOverlay(_a) {
+  var groups = _a.groups,
+    onChange = _a.onChange;
+  var refs = React.useRef({});
+  var _b = React.useState({
+      top: 0,
+      height: 0
+    }),
+    scrollView = _b[0],
+    setScrollView = _b[1];
+  var rootRef = React.useRef(null);
+  React.useLayoutEffect(function () {
+    if (!rootRef || !rootRef.current) {
+      return;
+    }
+    if (typeof rootRef.current.scrollTo === "function") {
+      rootRef.current.scrollTo({
+        top: scrollView.top - OFFSET_ITEMS_COUNT * scrollView.height
+      });
+    }
+  }, [scrollView, rootRef]);
+  function scrollToItem(key) {
+    var _a, _b, _c, _d;
+    if (!refs.current && !refs.current[key]) {
+      return;
+    }
+    var offsetTop = (_b = (_a = refs.current[key]) === null || _a === void 0 ? void 0 : _a.offsetTop) !== null && _b !== void 0 ? _b : 0;
+    var offsetHeight = (_d = (_c = refs.current[key]) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0;
+    setScrollView({
+      top: offsetTop,
+      height: offsetHeight
+    });
+  }
+  React.useLayoutEffect(function () {
+    var allOptions = groups.flatMap(function (group) {
+      return group.options.map(function (option) {
+        return {
+          option: option,
+          key: "group-".concat(group.value, "-option-").concat(option.value)
+        };
+      });
+    });
+    var firstSelectedOptionWithKey = allOptions.find(function (_a) {
+      var option = _a.option;
+      return option.selected;
+    });
+    if (firstSelectedOptionWithKey) {
+      var key = firstSelectedOptionWithKey.key;
+      scrollToItem(key);
+    }
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    ref: rootRef,
+    className: clx(styles__default.default.root)
+  }, groups.map(function (group, groupIndex) {
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      key: generateUniqID.default(groupIndex)
+    }, /*#__PURE__*/React__default.default.createElement("div", {
+      className: clx(styles__default.default.title)
+    }, /*#__PURE__*/React__default.default.createElement(index.default, {
+      style: {
+        color: "var(--typography-secondary)"
+      },
+      size: "s"
+    }, group.title)), /*#__PURE__*/React__default.default.createElement(index$1.default, null), /*#__PURE__*/React__default.default.createElement(index$2.default, null, group.options.map(function (option, optionIndex) {
+      return /*#__PURE__*/React__default.default.createElement(index$3.default, {
+        ref: function ref(_ref) {
+          refs.current["group-".concat(group.value, "-option-").concat(option.value)] = _ref;
+        },
+        option: option,
+        key: generateUniqID.default(optionIndex),
+        onClick: function onClick() {
+          return onChange(index$4.createGroupOptionString(group.value, option.value));
+        }
+      });
+    })));
+  }));
+};
+var MenuOverlay$1 = /*#__PURE__*/React.memo(MenuOverlay);
+
+exports.default = MenuOverlay$1;

package/MultiSelect/components/MenuOverlay/index.module.css

@@ -0,0 +1,9 @@
+.root {
+  max-height: 140px;
+  overflow-y: auto;
+}
+
+.title {
+  color: var(--palette-bg-4);
+  margin: 8px 6px;
+}

package/MultiSelect/components/MenuOverlayItem/index.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+type SelectItemProps = {
+    option: {
+        value: string;
+        label: React.ReactNode;
+        selected: boolean;
+        disabled?: boolean;
+    };
+    onClick?: () => void;
+};
+declare const _default: React.ForwardRefExoticComponent<SelectItemProps & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLLIElement>>;
+export default _default;

package/MultiSelect/components/MenuOverlayItem/index.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../../Menu/components/MenuItem/index.js');
+var Check = require('../../../Icons/Check.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var SelectItem = function SelectItem(_a, ref) {
+  var option = _a.option,
+    onClick = _a.onClick;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    ref: ref,
+    onClick: onClick,
+    isSelected: option.selected,
+    disabled: option.disabled
+  }, option.label, option.selected && /*#__PURE__*/React__default.default.createElement(Check.default, {
+    width: 16,
+    height: 16
+  }));
+};
+var SelectItem$1 = /*#__PURE__*/React.forwardRef(SelectItem);
+
+exports.default = SelectItem$1;

package/MultiSelect/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { MultiSelectProps } from "./index.props";
+declare const MultiSelect: ({ className, groups, zIndex, fontSize, disabled, fullWidth, required, label, hint, error, size, placeholder, name, type, }: MultiSelectProps) => React.JSX.Element;
+export default MultiSelect;