colibri-ui 0.7.126 → 0.7.127

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/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,7 +60,7 @@ var Dropdown = function Dropdown(_a) {
         enabled: preventOverflow
       }]
     }),
-    styles = _m.styles,
+    popperStyles = _m.styles,
     attributes = _m.attributes,
     update = _m.update;
   var isNotComponent = typeof children === "string";
@@ -134,7 +134,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/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, }: MultiSelectProps) => React.JSX.Element;
+export default MultiSelect;

package/MultiSelect/index.js

@@ -0,0 +1,136 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$2 = require('../Dropdown/index.js');
+var index$4 = require('../base/InputRoot/index.js');
+var index$1 = require('../base/FormField/index.js');
+require('../Icons/index.js');
+var styles = require('./index.module.css');
+var index$3 = require('./components/MenuOverlay/index.js');
+var index = require('./utils/index.js');
+var Chevron = require('../Icons/Chevron.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 sortedItems = function sortedItems(items) {
+  return items.sort(function (a, b) {
+    if (!a || !b) return 0;
+    var matchA = a.match(/group-(\d+)-option-(\d+)/);
+    var matchB = b.match(/group-(\d+)-option-(\d+)/);
+    if (!matchA || !matchB) {
+      return 0;
+    }
+    var _a = matchA.map(Number),
+      groupA = _a[1],
+      optionA = _a[2];
+    var _b = matchB.map(Number),
+      groupB = _b[1],
+      optionB = _b[2];
+    return groupA - groupB || optionA - optionB;
+  });
+};
+var MultiSelect = function MultiSelect(_a) {
+  var className = _a.className,
+    groups = _a.groups,
+    zIndex = _a.zIndex,
+    fontSize = _a.fontSize,
+    disabled = _a.disabled,
+    _b = _a.fullWidth,
+    fullWidth = _b === void 0 ? false : _b,
+    required = _a.required,
+    label = _a.label,
+    hint = _a.hint,
+    error = _a.error,
+    _c = _a.size,
+    size = _c === void 0 ? "m" : _c,
+    placeholder = _a.placeholder,
+    name = _a.name;
+  var _d = React.useState(false),
+    isOpen = _d[0],
+    setIsOpen = _d[1];
+  var _e = React.useState([]),
+    value = _e[0],
+    setValue = _e[1];
+  var preparedGroups = React.useMemo(function () {
+    return groups.map(function (group) {
+      return tslib.__assign(tslib.__assign({}, group), {
+        options: group.options.map(function (option) {
+          return tslib.__assign(tslib.__assign({}, option), {
+            selected: (value === null || value === void 0 ? void 0 : value.includes(index.createGroupOptionString(group.value, option.value))) || false
+          });
+        })
+      });
+    });
+  }, [value, groups]);
+  var handleChange = React.useCallback(function (key) {
+    setValue(function (prev) {
+      if (prev.indexOf(key) !== -1) {
+        return prev.filter(function (prevValue) {
+          return prevValue !== key;
+        });
+      } else {
+        return sortedItems(tslib.__spreadArray(tslib.__spreadArray([], prev, true), [key], false));
+      }
+    });
+  }, [sortedItems]);
+  var prepraredLabel = React.useMemo(function () {
+    return preparedGroups.flatMap(function (group) {
+      return group.options.filter(function (option) {
+        return option.selected;
+      }).map(function (option) {
+        return option.label;
+      });
+    });
+  }, [preparedGroups]);
+  return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    className: clx(styles__default.default["form-field"], {
+      "full-width": fullWidth ? 1 : 0
+    }, className),
+    required: required,
+    label: label,
+    hint: hint,
+    error: error
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    placement: "bottom-start",
+    onVisibleChange: setIsOpen,
+    trigger: ["click"],
+    zIndex: zIndex,
+    fontSize: fontSize,
+    disabled: !!disabled,
+    overlay: /*#__PURE__*/React__default.default.createElement(index$3.default, {
+      groups: preparedGroups,
+      onChange: handleChange
+    }),
+    samewidth: true
+  }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
+    error: error,
+    size: size,
+    className: clx(styles__default.default.root),
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+      className: clx(styles__default.default.icon, {
+        icon_isOpen: isOpen ? 1 : 0
+      })
+    }),
+    disabled: !!disabled
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default["base-input"])
+  }, prepraredLabel.length ? prepraredLabel.join(", ") : (/*#__PURE__*/React__default.default.createElement("span", {
+    className: clx(styles__default.default.placeholder)
+  }, placeholder))), /*#__PURE__*/React__default.default.createElement("input", {
+    type: "hidden",
+    name: name,
+    tabIndex: -1,
+    value: value || ""
+  }))));
+};
+
+exports.default = MultiSelect;

package/MultiSelect/index.module.css

@@ -0,0 +1,36 @@
+.root {
+  cursor: pointer;
+}
+
+.icon_isOpen {
+  transform: rotate(180deg);
+}
+
+.full-width {
+  width: 100%;
+}
+
+.base-input {
+  background: transparent;
+  border: none;
+  display: inline-block;
+  flex: 1;
+  margin: 7px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+}
+.base-input ::placeholder {
+  color: var(--palette-bg-2);
+}
+
+.placeholder {
+  color: var(--input-primary-plaseholder-color);
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+}

package/MultiSelect/index.props.d.ts

@@ -0,0 +1,29 @@
+import type { FormFieldProps } from "../base/FormField/index.props";
+export type GroupOptions = {
+    value: string;
+    label: string;
+    disabled?: boolean;
+};
+export type Coordinates = {
+    top: number;
+    height: number;
+};
+export type GroupProps = {
+    value: string;
+    title: string;
+    options: GroupOptions[];
+};
+type Size = "s" | "m" | "l";
+export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
+    groups: GroupProps[];
+    className?: string;
+    zIndex?: number;
+    fontSize?: number;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    required?: boolean;
+    size?: Size;
+    placeholder?: string;
+    name?: string;
+}
+export {};

package/MultiSelect/package.json

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

package/MultiSelect/utils/index.d.ts

@@ -0,0 +1 @@
+export declare function createGroupOptionString(groupValue: string, optionValue: string): string;

package/MultiSelect/utils/index.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function createGroupOptionString(groupValue, optionValue) {
+  return "group-".concat(groupValue, "-option-").concat(optionValue);
+}
+
+exports.createGroupOptionString = createGroupOptionString;

package/Select/index.js

@@ -45,12 +45,12 @@ var Select = function Select(_a) {
     return options.map(function (_a) {
       var lvalue = _a.value,
         llabel = _a.label,
-        disabled = _a.disabled;
+        ldisabled = _a.disabled;
       return {
         value: lvalue,
         label: llabel,
         selected: value === lvalue,
-        disabled: disabled
+        disabled: ldisabled
       };
     });
   }, [value, options]);