colibri-ui 0.8.1 → 0.8.3

package/Menu/components/MenuItem/index.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./MenuItem.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 MenuItem = function MenuItem(_a) {
+  var _b;
+  var className = _a.className,
+    isSelected = _a.isSelected,
+    _c = _a.variant,
+    variant = _c === void 0 ? "primary" : _c,
+    disabled = _a.disabled,
+    onClick = _a.onClick,
+    children = _a.children,
+    ref = _a.ref;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.default.createElement("li", {
+      ref: ref,
+      style: {
+        backgroundColor: isSelected ? "var(--palette-bg-2, rgb(232, 240, 254))" : ""
+      },
+      "data-testid": "menuitem",
+      className: clx("item", (_b = {
+        item_disabled: !!disabled
+      }, _b["item_variant_".concat(variant)] = !!variant, _b), className),
+      onClick: onClick
+    }, children)
+  );
+};
+
+exports.default = MenuItem;

package/Menu/components/MenuItem/index.props.d.ts

@@ -0,0 +1,10 @@
+import type { MouseEvent } from "react";
+import type { MenuVariant } from "../../index.props";
+export interface MenuItemProps {
+    className?: string;
+    isSelected?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    variant?: MenuVariant;
+    disabled?: boolean;
+    ref?: React.Ref<HTMLLIElement>;
+}

package/Menu/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { Props } from "./index.props";
+declare const Menu: ({ selected, variant, className, onClick, children, ref, }: Props) => React.JSX.Element;
+export default Menu;

package/Menu/index.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var styles = require('./Menu.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 Menu = function Menu(_a) {
+  var selected = _a.selected,
+    variant = _a.variant,
+    className = _a.className,
+    onClick = _a.onClick,
+    children = _a.children,
+    ref = _a.ref;
+  var renderChild = React.useMemo(function () {
+    return React.Children.map(children, function (child) {
+      if (/*#__PURE__*/React.isValidElement(child)) {
+        var isSelected = selected ? selected.includes(String(child.key)) : undefined;
+        var onClickHandler = function onClickHandler(e) {
+          if (child.props.onClick) child.props.onClick(e);
+          if (onClick && child.key) onClick(child.key.toString(), e);
+        };
+        return /*#__PURE__*/React.cloneElement(child, {
+          isSelected: isSelected,
+          onClick: onClickHandler,
+          variant: variant
+        });
+      }
+      return child;
+    });
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [children, selected, onClick]);
+  return /*#__PURE__*/React__default.default.createElement("ul", {
+    ref: ref,
+    className: clx("menu", className)
+  }, renderChild);
+};
+
+exports.default = Menu;

package/Menu/index.props.d.ts

@@ -0,0 +1,11 @@
+import type { ReactElement, MouseEvent } from "react";
+import type { MenuItemProps } from "./components/MenuItem/index.props";
+export type MenuVariant = "primary";
+export type Props = {
+    selected?: string[];
+    variant?: MenuVariant;
+    className?: string;
+    onClick?: (key: string, e: MouseEvent) => void;
+    children?: ReactElement<MenuItemProps> | ReactElement<MenuItemProps>[];
+    ref?: React.Ref<HTMLUListElement>;
+};

package/Menu/package.json

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

package/{src/components/Modal/Modal.module.scss → Modal/Modal.module.css}

@@ -20,7 +20,7 @@
 }
 
 .modal-overlay {
-  background-color: rgb(0 0 0 / 25%);
+  background-color: rgba(0, 0, 0, 0.25);
   bottom: 0;
   height: 100%;
   position: fixed;
@@ -37,17 +37,15 @@
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
-
-  &_mobile {
-    height: 100%;
-    width: 100%;
-  }
-
-  &_desktop {
-    border: solid 1px var(--palette-bg-2);
-    border-radius: 8px;
-    max-height: calc(100vh - 100px);
-    max-width: calc(100vw - 100px);
-    min-width: 515px;
-  }
 }
+.modal-wrapper_mobile {
+  height: 100%;
+  width: 100%;
+}
+.modal-wrapper_desktop {
+  border: solid 1px var(--palette-bg-2);
+  border-radius: 8px;
+  max-height: calc(100vh - 100px);
+  max-width: calc(100vw - 100px);
+  min-width: 515px;
+}

package/{src/components/Modal/components/Close/Close.module.scss → Modal/components/Close/Close.module.css}

@@ -1,4 +1,4 @@
 .close {
   cursor: pointer;
   margin-right: 16px;
-}
+}

package/Modal/components/Close/index.d.ts

@@ -0,0 +1,5 @@
+import type { FC } from "react";
+declare const Close: FC<{
+    onClick?: () => void;
+}>;
+export default Close;

package/Modal/components/Close/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames');
+require('../../../Icons/index.js');
+var styles = require('./Close.module.css');
+var Close$1 = require('../../../Icons/Close.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 Close = function Close(_a) {
+  var onClick = _a.onClick;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React__default.default.createElement(Close$1.default, {
+      className: classNames__default.default(styles__default.default.close),
+      onClick: onClick
+    })
+  );
+};
+
+exports.default = Close;

package/{src/components/Modal/components/Content/Content.module.scss → Modal/components/Content/Content.module.css}

@@ -3,4 +3,4 @@
   min-height: 100%;
   overflow-y: auto;
   padding: 10px;
-}
+}

package/Modal/components/Content/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from "react";
+declare const Content: FC<PropsWithChildren<{}>>;
+export default Content;

package/Modal/components/Content/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var classNames = require('classnames');
+var React = require('react');
+var styles = require('./Content.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+var Content = function Content(_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: classNames__default.default(styles__default.default.root)
+  }, children);
+};
+
+exports.default = Content;

package/{src/components/Modal/components/Title/Title.module.scss → Modal/components/Title/Title.module.css}

@@ -6,4 +6,4 @@
 .title {
   margin: 0;
   padding: 0;
-}
+}

package/Modal/components/Title/index.d.ts

@@ -0,0 +1,3 @@
+import type { FC, PropsWithChildren } from "react";
+declare const Title: FC<PropsWithChildren<{}>>;
+export default Title;

package/Modal/components/Title/index.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index = require('../../../Typography/index.js');
+var styles = require('./Title.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);
+// eslint-disable-next-line @typescript-eslint/ban-types
+var Title = function Title(_a) {
+  var children = _a.children;
+  return /*#__PURE__*/React__default.default.createElement(index.default, {
+    tag: "h3",
+    size: "h3",
+    className: clx(styles__default.default.title)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx(styles__default.default.wrapper)
+  }, children));
+};
+
+exports.default = Title;

package/Modal/index.d.ts

@@ -0,0 +1,4 @@
+import type { FC, PropsWithChildren } from "react";
+import type { ModalProps } from "./index.props";
+declare const Modal: FC<PropsWithChildren<ModalProps>>;
+export default Modal;

package/Modal/index.js

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var index$1 = require('../hooks/useScrollLock/index.js');
+var index$2 = require('../hooks/useTrapFocus/index.js');
+var index$3 = require('../Portal/index.js');
+var index = require('../hooks/useMediaSizes/index.js');
+var index$6 = require('./components/Content/index.js');
+var index$5 = require('./components/Close/index.js');
+var index$4 = require('./components/Title/index.js');
+var styles = require('./Modal.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 Modal = function Modal(_a) {
+  var children = _a.children,
+    className = _a.className,
+    onClose = _a.onClose,
+    title = _a.title;
+  var modalRef = React.useRef(null);
+  var isDesktop = index.default(function (bp) {
+    return bp.up("md");
+  });
+  var onCloseHandler = React.useMemo(function () {
+    return onClose || function () {
+      return {};
+    };
+  }, [onClose]);
+  index$1.default();
+  index$2.default(modalRef);
+  React.useEffect(function () {
+    var onEsc = function onEsc(e) {
+      if (!modalRef.current || e.code !== "Escape") return;
+      onCloseHandler();
+    };
+    document.addEventListener("keydown", onEsc);
+    return function () {
+      document.removeEventListener("keydown", onEsc);
+    };
+  }, [onCloseHandler]);
+  return /*#__PURE__*/React__default.default.createElement(index$3.default, null, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("root")
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("modal-overlay"),
+    onClick: onCloseHandler
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("modal-wrapper", {
+      "modal-wrapper_desktop": isDesktop ? 1 : 0,
+      "modal-wrapper_mobile": !isDesktop ? 1 : 0
+    }, className),
+    ref: modalRef
+  }, title ? (/*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("title-wrapper")
+  }, /*#__PURE__*/React__default.default.createElement(index$4.default, null, title), /*#__PURE__*/React__default.default.createElement(index$5.default, {
+    onClick: onCloseHandler
+  }))) : (/*#__PURE__*/React__default.default.createElement("div", {
+    className: clx("close-wrapper")
+  }, /*#__PURE__*/React__default.default.createElement(index$5.default, {
+    onClick: onCloseHandler
+  }))), /*#__PURE__*/React__default.default.createElement(index$6.default, null, children))));
+};
+
+exports.default = Modal;

package/Modal/index.props.d.ts

@@ -0,0 +1,5 @@
+export type ModalProps = {
+    className?: string;
+    onClose?: () => void;
+    title?: string;
+};

package/Modal/package.json

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

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 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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    ref: rootRef,
+    className: clx(styles__default.default.root)
+  }, groups.map(function (group, index$5) {
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      key: "item-".concat(index$5)
+    }, /*#__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: "item-".concat(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/{src/components/MultiSelect/components/MenuOverlay/index.module.scss → MultiSelect/components/MenuOverlay/index.module.css}

@@ -6,4 +6,4 @@
 .title {
   color: var(--palette-bg-4);
   margin: 8px 6px;
-}
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+type SelectItemProps = {
+    option: {
+        value: string;
+        label: React.ReactNode;
+        selected: boolean;
+        disabled?: boolean;
+    };
+    onClick?: () => void;
+    ref?: React.Ref<HTMLLIElement>;
+};
+declare const SelectItem: ({ option, onClick, ref }: SelectItemProps) => React.JSX.Element;
+export default SelectItem;

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) {
+  var option = _a.option,
+    onClick = _a.onClick,
+    ref = _a.ref;
+  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/MultiSelect/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { MultiSelectProps } from "./index.props";
+declare const MultiSelect: React.FC<MultiSelectProps>;
+export default MultiSelect;