colibri-ui 0.8.1 → 0.8.4

package/MultiSelect/index.js

@@ -0,0 +1,169 @@
+'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 index$5 = require('../Chip/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');
+var CrossFill = require('../Icons/CrossFill.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 sortItems = function sortItems(items) {
+  return tslib.__spreadArray([], items, true).sort(function (a, b) {
+    var parseKey = function parseKey(key) {
+      var _a;
+      return ((_a = key.match(/group-(\d+)-option-(\d+)/)) === null || _a === void 0 ? void 0 : _a.slice(1).map(Number)) || [];
+    };
+    var _a = parseKey(a),
+      groupA = _a[0],
+      optionA = _a[1];
+    var _b = parseKey(b),
+      groupB = _b[0],
+      optionB = _b[1];
+    return groupA - groupB || optionA - optionB;
+  });
+};
+var getValue = function getValue(options) {
+  return options.map(function (_a) {
+    var label = _a.label;
+    return label;
+  }).join(", ");
+};
+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,
+    hasError = _a.hasError,
+    _c = _a.size,
+    size = _c === void 0 ? "m" : _c,
+    placeholder = _a.placeholder,
+    name = _a.name,
+    type = _a.type,
+    onChange = _a.onChange;
+  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.includes(index.createGroupOptionString(group.value, option.value))
+          });
+        })
+      });
+    });
+  }, [value, groups]);
+  var handleChange = React.useCallback(function (key) {
+    setValue(function (prev) {
+      var newValue = prev.includes(key) ? prev.filter(function (v) {
+        return v !== key;
+      }) : sortItems(tslib.__spreadArray(tslib.__spreadArray([], prev, true), [key], false));
+      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+      return newValue;
+    });
+  }, [onChange]);
+  var preparedLabel = React.useMemo(function () {
+    return preparedGroups.flatMap(function (_a) {
+      var groupVal = _a.value,
+        options = _a.options;
+      return options.filter(function (_a) {
+        var selected = _a.selected;
+        return selected;
+      }).map(
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      function (_a) {
+        var label = _a.label,
+          optVal = _a.value;
+        return {
+          label: label,
+          key: index.createGroupOptionString(groupVal, optVal)
+        };
+      });
+    });
+  }, [preparedGroups]);
+  return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    className: clx(styles__default.default["form-field"], {
+      "full-width": fullWidth
+    }, className),
+    required: required,
+    label: label,
+    hint: hint,
+    hasError: hasError
+  }, /*#__PURE__*/React__default.default.createElement(index$2.default, {
+    placement: "bottom-start",
+    preventOverflow: true,
+    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, {
+    hasError: hasError,
+    size: size,
+    className: clx(styles__default.default.root, {
+      root_auto: preparedLabel.length
+    }),
+    endIcon: /*#__PURE__*/React__default.default.createElement(Chevron.default, {
+      className: clx(styles__default.default.icon, {
+        icon_isOpen: isOpen
+      })
+    }),
+    disabled: Boolean(disabled)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default["base-input"], styles__default.default[type === "chip" ? "base-input-flex" : "base-input-text"])
+  }, preparedLabel.length ? type === "chip" ?
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  preparedLabel.map(function (_a) {
+    var label = _a.label,
+      key = _a.key;
+    return /*#__PURE__*/React__default.default.createElement(index$5.default, {
+      key: key,
+      size: "s",
+      iconEnd: /*#__PURE__*/React__default.default.createElement(CrossFill.default, null),
+      "data-ignore-click": true,
+      onClickIcon: function onClickIcon() {
+        return handleChange(key);
+      }
+    }, label);
+  }) : getValue(preparedLabel) : (/*#__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.join(",") || ""
+  }))));
+};
+
+exports.default = MultiSelect;

package/{src/components/MultiSelect/index.module.scss → MultiSelect/index.module.css}

@@ -7,10 +7,8 @@
   min-height: 36px;
 }
 
-.icon {
-  &_isOpen {
-    transform: rotate(180deg);
-  }
+.icon_isOpen {
+  transform: rotate(180deg);
 }
 
 .full-width {
@@ -23,10 +21,9 @@
   display: flex;
   flex: 1;
   margin: 7px 0;
-
-  ::placeholder {
-    color: var(--palette-bg-2);
-  }
+}
+.base-input ::placeholder {
+  color: var(--palette-bg-2);
 }
 
 .base-input-text {
@@ -49,4 +46,4 @@
   text-overflow: ellipsis;
   user-select: none;
   white-space: nowrap;
-}
+}

package/MultiSelect/index.props.d.ts

@@ -0,0 +1,32 @@
+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";
+type Type = "chip";
+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;
+    type?: Type;
+    onChange?: (value: string[]) => void;
+}
+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/Portal/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC, PropsWithChildren } from "react";
+declare const Portal: FC<PropsWithChildren<{
+    node?: HTMLElement | null;
+}>>;
+export default Portal;

package/Portal/index.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+
+var Portal = function Portal(_a) {
+  var children = _a.children,
+    node = _a.node;
+  var _b = React.useState(null),
+    mountNode = _b[0],
+    setMountNode = _b[1];
+  React.useEffect(function () {
+    setMountNode(node || document.body);
+  }, [node]);
+  return mountNode ? /*#__PURE__*/ReactDOM__default.default.createPortal(children, mountNode) : mountNode;
+};
+
+exports.default = Portal;

package/Portal/package.json

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

package/RadioGroup/Radio.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import type { ChangeEvent, FC, FocusEvent } from "react";
+type Props = {
+    value: string | number;
+    text: string;
+    id?: string;
+    note?: string;
+    name?: string;
+    checked?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className: string;
+    disabled?: boolean;
+    testId?: string;
+};
+declare const Radio: FC<Props>;
+export default Radio;

package/RadioGroup/Radio.js

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../InputRadio/index.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var Radio = function Radio(_a) {
+  var id = _a.id,
+    value = _a.value,
+    text = _a.text,
+    note = _a.note,
+    name = _a.name,
+    _b = _a.checked,
+    checked = _b === void 0 ? false : _b,
+    onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    onClick = _a.onClick,
+    onMouseEnter = _a.onMouseEnter,
+    className = _a.className,
+    _c = _a.disabled,
+    disabled = _c === void 0 ? false : _c,
+    testId = _a.testId;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    onBlur: onBlur,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    text: text,
+    note: note,
+    name: name,
+    className: className,
+    disabled: disabled,
+    testid: testId
+  });
+};
+
+exports.default = Radio;

package/RadioGroup/RadioGroup.module.css

@@ -0,0 +1,31 @@
+.radio {
+  line-height: 16px;
+  margin-inline-end: 20px;
+}
+
+.group {
+  display: inline-flex;
+}
+.group_wide {
+  inline-size: 100%;
+}
+.group_column {
+  flex-direction: column;
+}
+.group_column .radio:not(:last-child) {
+  margin-block-end: 16px;
+}
+.group_wrapped {
+  flex-wrap: wrap;
+  /* stylelint-disable-next-line no-descending-specificity */
+}
+.group_wrapped .radio {
+  inline-size: 100%;
+  margin: 8px auto;
+}
+.group_wrapped .radio:first-child {
+  margin-block-start: 0;
+}
+.group_wrapped .radio:last-child {
+  margin-block-end: 0;
+}

package/RadioGroup/index.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+import type { FC } from "react";
+export interface Option {
+    id?: string;
+    val: string | number;
+    text: string;
+    note?: string;
+    name?: string;
+    tooltipContent?: () => React.ReactElement;
+    onClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    onMouseEnter?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
+    className?: string;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    val?: string | number;
+    options: Option[];
+    onChange: (value: string) => void;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    column?: boolean;
+    wrapped?: boolean;
+    className?: string;
+    disabled?: boolean;
+}
+declare const RadioGroup: FC<RadioGroupProps>;
+export default RadioGroup;

package/RadioGroup/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var Radio = require('./Radio.js');
+var styles = require('./RadioGroup.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 RadioGroup = /*#__PURE__*/React.memo(function (_a) {
+  var val = _a.val,
+    options = _a.options,
+    _onChange = _a.onChange,
+    onBlur = _a.onBlur,
+    _b = _a.column,
+    column = _b === void 0 ? false : _b,
+    _c = _a.wrapped,
+    wrapped = _c === void 0 ? false : _c,
+    className = _a.className,
+    _d = _a.disabled,
+    disabled = _d === void 0 ? false : _d;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.group, {
+      group_column: !!column,
+      group_wrapped: !!wrapped
+    }, className)
+  }, options.map(function (option) {
+    var id = option.id,
+      optionVal = option.val,
+      text = option.text,
+      note = option.note,
+      name = option.name,
+      onClick = option.onClick,
+      onMouseEnter = option.onMouseEnter,
+      optionClassName = option.className,
+      optionDisabled = option.disabled;
+    return /*#__PURE__*/React__default.default.createElement(Radio.default, {
+      key: optionVal,
+      id: id,
+      testId: id,
+      value: optionVal,
+      text: text,
+      note: note,
+      name: name,
+      className: clx(styles__default.default.radio, optionClassName),
+      checked: val === optionVal,
+      onChange: function onChange(e) {
+        return _onChange(e.target.value);
+      },
+      onBlur: onBlur,
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      disabled: disabled || optionDisabled
+    });
+  }));
+});
+
+exports.default = RadioGroup;

package/RadioGroup/package.json

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

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface Props<T extends string> {
+    options: {
+        value: T;
+        label: React.ReactNode;
+        selected: boolean;
+    }[];
+    onChange: (value: T) => void;
+}
+declare const MenuOverlay: <T extends string>({ options, onChange }: Props<T>) => React.JSX.Element;
+export default MenuOverlay;

package/Select/components/MenuOverlay/index.js

@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Menu/index.js');
+var index$1 = require('../MenuOverlayItem/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 options = _a.options,
+    onChange = _a.onChange;
+  var _b = React.useState(),
+    selected = _b[0],
+    setSelected = _b[1];
+  var _c = React.useState({
+      top: 0,
+      height: 0
+    }),
+    scrollView = _c[0],
+    setScrollView = _c[1];
+  var listRef = React.useRef(null);
+  var rootRef = React.useRef(null);
+  var handleSelect = React.useCallback(function (option, key) {
+    onChange(option.value);
+    setSelected(key.split(" "));
+  }, [onChange]);
+  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]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    ref: rootRef,
+    className: clx(styles__default.default.root)
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    ref: listRef,
+    selected: selected
+  }, options.map(function (option, index) {
+    return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+      setScrollView: setScrollView,
+      option: option,
+      key: index,
+      onClick: function onClick() {
+        return handleSelect(option, "item-".concat(index));
+      }
+    });
+  })));
+};
+
+exports.default = MenuOverlay;

package/{src/components/Select/components/MenuOverlay/index.module.scss → Select/components/MenuOverlay/index.module.css}

@@ -1,4 +1,4 @@
 .root {
   max-height: 220px;
   overflow-y: auto;
-}
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import type { Coordinates } from "../../index.props";
+type SelectItemProps = {
+    option: {
+        value: string;
+        label: React.ReactNode;
+        selected: boolean;
+        disabled?: boolean;
+    };
+    onClick?: () => void;
+    setScrollView: (value: Coordinates) => void;
+};
+declare const SelectItem: ({ option, onClick, setScrollView }: SelectItemProps) => React.JSX.Element;
+export default SelectItem;

package/Select/components/MenuOverlayItem/index.js

@@ -0,0 +1,47 @@
+'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) {
+  var option = _a.option,
+    onClick = _a.onClick,
+    setScrollView = _a.setScrollView;
+  var ref = React.useRef(null);
+  function scrollToItem() {
+    if (!ref.current) {
+      return;
+    }
+    var _a = ref.current,
+      offsetTop = _a.offsetTop,
+      offsetHeight = _a.offsetHeight;
+    setScrollView({
+      top: offsetTop,
+      height: offsetHeight
+    });
+  }
+  React.useLayoutEffect(function () {
+    if (option.selected) {
+      scrollToItem();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  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
+  }));
+};
+
+exports.default = SelectItem;

package/Select/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SelectProps } from "./index.props";
+declare const Select: <T extends string>({ options, value, name, zIndex, fontSize, label, hint, hasError, required, placeholder, disabled, size, fullWidth, customInputRoot, className, onChange, }: SelectProps<T>) => React.JSX.Element;
+export default Select;