@fileverse-dev/fortune-react 1.1.0 → 1.1.1

package/lib/components/Toolbar/Combo.js

@@ -0,0 +1,132 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ui = require("@fileverse/ui");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _ = require(".");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var Combo = function Combo(_a) {
+  var tooltip = _a.tooltip,
+    _onClick = _a.onClick,
+    text = _a.text,
+    iconId = _a.iconId,
+    _b = _a.showArrow,
+    showArrow = _b === void 0 ? true : _b,
+    children = _a.children,
+    fillColor = _a.fillColor,
+    triggerRef = _a.triggerRef;
+  var style = {
+    userSelect: "none"
+  };
+  var _c = (0, _react.useState)(false),
+    open = _c[0],
+    setOpen = _c[1];
+  var buttonRef = (0, _react.useRef)(null);
+  var ref = (0, _react.useRef)(null);
+  if (!triggerRef) {
+    triggerRef = ref;
+  }
+  var handleOpenChange = function handleOpenChange(newOpen) {
+    setOpen(newOpen);
+  };
+  var isLucideIcon = (0, _react.useMemo)(function () {
+    return (iconId === null || iconId === void 0 ? void 0 : iconId.startsWith("align-")) || ["text-overflow", "text-wrap", "text-clip", "font-color", "background", "border-all", "merge-all", "format", "conditionFormat", "filter", "comment", "image", "formula-sum", "dune", "template", "font-color", "background", "currency"].includes(iconId);
+  }, [iconId]);
+  var trigger = !isLucideIcon ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-combo-button",
+    onClick: function onClick(e) {
+      if (_onClick) {
+        _onClick(e);
+        if (!showArrow) setOpen(!open);
+      }
+    },
+    tabIndex: 0,
+    role: "button",
+    style: style
+  }, iconId ? (/*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: iconId,
+    width: 16,
+    height: 16
+  })) : (/*#__PURE__*/_react.default.createElement("span", {
+    className: "fortune-toolbar-combo-text"
+  }, text !== undefined ? text : ""))))) : (/*#__PURE__*/_react.default.createElement("span", null, iconId === "font-color" ? (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_ui.Button, {
+    variant: "ghost",
+    onClick: function onClick() {
+      return setOpen(!open);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button !min-w-fit !px-0", {}),
+    style: {
+      width: 30,
+      height: 30
+    }
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.9997 3C12.3784 3 12.7248 3.21402 12.8942 3.55273L20.8942 19.5527L20.9352 19.6465C21.115 20.1204 20.9101 20.663 20.447 20.8945C19.9839 21.1259 19.4272 20.9642 19.1559 20.5361L19.1052 20.4473L16.8815 16H7.11786L4.89422 20.4473C4.64719 20.9412 4.04636 21.1415 3.55243 20.8945C3.05867 20.6475 2.85831 20.0466 3.10516 19.5527L11.1052 3.55273L11.1764 3.43164C11.3613 3.16376 11.6684 3.0001 11.9997 3ZM8.11786 14H15.8815L11.9997 6.23633L8.11786 14Z"
+  }))))) : (/*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement(_ui.IconButton, {
+    icon: (0, _.getLucideIcon)(iconId),
+    variant: "ghost",
+    onClick: function onClick() {
+      setOpen(!open);
+    },
+    className: (0, _ui.cn)("fortune-toolbar-combo-button", {
+      "custom-color-button": iconId === "font-color" && fillColor,
+      "min-w-fit rounded-l-none": iconId === "currency"
+    }),
+    style: {
+      color: iconId === "font-color" ? fillColor : undefined
+    }
+  })))));
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: buttonRef,
+    className: "fortune-toolbar-item",
+    onKeyDown: function onKeyDown(e) {
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ui.Popover, {
+    open: open,
+    onOpenChange: handleOpenChange,
+    modal: true
+  }, /*#__PURE__*/_react.default.createElement(_ui.PopoverTrigger, {
+    ref: triggerRef,
+    asChild: true
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex items-center"
+  }, trigger)), /*#__PURE__*/_react.default.createElement(_ui.PopoverContent, {
+    align: "start",
+    side: "bottom",
+    sideOffset: 4,
+    alignOffset: -16,
+    className: "fortune-toolbar-combo-popup border-none",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onMouseUp: function onMouseUp(e) {
+      return e.stopPropagation();
+    },
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, children === null || children === void 0 ? void 0 : children(setOpen))));
+};
+var _default = exports.default = Combo;

package/lib/components/Toolbar/CustomBorder.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import "./index.css";
+type Props = {
+    onPick: (changeColor?: string, changeStyle?: string) => void;
+};
+declare const CustomBorder: React.FC<Props>;
+export default CustomBorder;

package/lib/components/Toolbar/CustomBorder.js

@@ -0,0 +1,220 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+require("./index.css");
+var _fortuneCore = require("@fileverse-dev/fortune-core");
+var _lodash = _interopRequireDefault(require("lodash"));
+var _context = _interopRequireDefault(require("../../context"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+var _CustomColor = require("./CustomColor");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var size = [{
+  Text: "1",
+  value: "Thin",
+  strokeDasharray: "1,0",
+  strokeWidth: "1"
+}, {
+  Text: "2",
+  value: "Hair",
+  strokeDasharray: "1,5",
+  strokeWidth: "1"
+}, {
+  Text: "3",
+  value: "Dotted",
+  strokeDasharray: "2,5",
+  strokeWidth: "2"
+}, {
+  Text: "4",
+  value: "Dashed",
+  strokeDasharray: "5,5",
+  strokeWidth: "2"
+}, {
+  Text: "5",
+  value: "DashDot",
+  strokeDasharray: "20,5,5,10,5,5",
+  strokeWidth: "2"
+}, {
+  Text: "6",
+  value: "DashDotDot",
+  strokeDasharray: "20,5,5,5,5,10,5,5,5,5",
+  strokeWidth: "2"
+}, {
+  Text: "8",
+  value: "Medium",
+  strokeDasharray: "2,0",
+  strokeWidth: "2"
+}, {
+  Text: "9",
+  value: "MediumDashed",
+  strokeDasharray: "3,5",
+  strokeWidth: "3"
+}, {
+  Text: "10",
+  value: "MediumDashDot",
+  strokeDasharray: "20,5,5,10,5,5",
+  strokeWidth: "3"
+}, {
+  Text: "11",
+  value: "MediumDashDotDot",
+  strokeDasharray: "5,5,5,5,20,5,5,5,5,10",
+  strokeWidth: "3"
+}, {
+  Text: "13",
+  value: "Thick",
+  strokeDasharray: "2,0",
+  strokeWidth: "3"
+}];
+var CustomBorder = function CustomBorder(_a) {
+  var onPick = _a.onPick;
+  var _b = (0, _react.useContext)(_context.default),
+    context = _b.context,
+    refs = _b.refs;
+  var border = (0, _fortuneCore.locale)(context).border;
+  var _c = (0, _react.useState)("#000000"),
+    changeColor = _c[0],
+    setchangeColor = _c[1];
+  var _d = (0, _react.useState)("1"),
+    changeStyle = _d[0],
+    setchangeStyle = _d[1];
+  var colorRef = (0, _react.useRef)(null);
+  var styleRef = (0, _react.useRef)(null);
+  var colorPreviewRef = (0, _react.useRef)(null);
+  var _e = (0, _react.useState)(""),
+    previewWith = _e[0],
+    setPreviewWith = _e[1];
+  var _f = (0, _react.useState)(""),
+    previewdasharry = _f[0],
+    setPreviewdasharray = _f[1];
+  var showBorderSubMenu = (0, _react.useCallback)(function (e) {
+    var target = e.target;
+    var menuItemRect = target.getBoundingClientRect();
+    var subMenuItem = target.querySelector(".fortune-border-select-menu");
+    if (_lodash.default.isNil(subMenuItem)) return;
+    subMenuItem.style.display = "block";
+    var workbookContainerRect = refs.workbookContainer.current.getBoundingClientRect();
+    if (workbookContainerRect.width - menuItemRect.right > parseFloat(subMenuItem.style.width.replace("px", ""))) {
+      subMenuItem.style.left = "".concat(menuItemRect === null || menuItemRect === void 0 ? void 0 : menuItemRect.width, "px");
+    } else {
+      subMenuItem.style.left = "-".concat(subMenuItem.style.width);
+    }
+  }, [refs.workbookContainer]);
+  var hideBorderSubMenu = (0, _react.useCallback)(function () {
+    styleRef.current.style.display = "none";
+    colorRef.current.style.display = "none";
+  }, []);
+  var changePreviewStyle = (0, _react.useCallback)(function (width, dasharray) {
+    setPreviewWith(width);
+    setPreviewdasharray(dasharray);
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-border-select-option",
+    key: "borderColor",
+    onMouseEnter: function onMouseEnter(e) {
+      showBorderSubMenu(e);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hideBorderSubMenu();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-menu-line"
+  }, border.borderColor, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "rightArrow",
+    style: {
+      width: "14px"
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    ref: colorPreviewRef,
+    className: "fortune-border-color-preview",
+    style: {
+      backgroundColor: changeColor
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: colorRef,
+    className: "fortune-border-select-menu",
+    style: {
+      display: "none",
+      width: "166px"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomColor.CustomColor, {
+    onCustomPick: function onCustomPick(color) {
+      onPick(color, changeStyle);
+      colorPreviewRef.current.style.backgroundColor = changeColor;
+      setchangeColor(color);
+    },
+    onColorPick: function onColorPick(color) {
+      onPick(color, changeStyle);
+      setchangeColor(color);
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-border-select-option",
+    key: "borderStyle",
+    onMouseEnter: function onMouseEnter(e) {
+      showBorderSubMenu(e);
+    },
+    onMouseLeave: function onMouseLeave() {
+      hideBorderSubMenu();
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-menu-line"
+  }, border.borderStyle, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "rightArrow",
+    style: {
+      width: "14px"
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-border-style-preview"
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "90"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fill: "none",
+    stroke: "black",
+    strokeWidth: previewWith
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    strokeDasharray: previewdasharry,
+    d: "M0 0 l90 0"
+  })))), /*#__PURE__*/_react.default.createElement("div", {
+    ref: styleRef,
+    className: "fortune-border-select-menu fortune-toolbar-select",
+    style: {
+      display: "none",
+      width: "110px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-border-style-picker-menu fortune-border-style-reset",
+    onClick: function onClick() {
+      onPick(changeColor, "1");
+      changePreviewStyle("1", "1,0");
+    },
+    tabIndex: 0
+  }, border.borderDefault), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-boder-style-picker"
+  }, size.map(function (items, i) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      className: "fortune-border-style-picker-menu",
+      onClick: function onClick() {
+        onPick(changeColor, items.Text);
+        setchangeStyle(items.Text);
+        changePreviewStyle(items.strokeWidth, items.strokeDasharray);
+      },
+      tabIndex: 0
+    }, /*#__PURE__*/_react.default.createElement("svg", {
+      height: "10",
+      width: "90"
+    }, /*#__PURE__*/_react.default.createElement("g", {
+      fill: "none",
+      stroke: "black",
+      strokeWidth: items.strokeWidth
+    }, /*#__PURE__*/_react.default.createElement("path", {
+      strokeDasharray: items.strokeDasharray,
+      d: "M0 5 l85 0"
+    }))));
+  })))));
+};
+var _default = exports.default = CustomBorder;

package/lib/components/Toolbar/CustomButton.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type Props = {
+    tooltip?: string;
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    selected?: boolean;
+    children?: React.ReactNode;
+    iconName?: string;
+    icon?: React.ReactNode;
+};
+declare const CustomButton: React.FC<Props>;
+export default CustomButton;

package/lib/components/Toolbar/CustomButton.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ui = require("@fileverse/ui");
+var _CustomIcon = _interopRequireDefault(require("./CustomIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var CustomButton = function CustomButton(_a) {
+  var tooltip = _a.tooltip,
+    onClick = _a.onClick,
+    selected = _a.selected,
+    children = _a.children,
+    iconName = _a.iconName,
+    icon = _a.icon;
+  return /*#__PURE__*/_react.default.createElement(_ui.Tooltip, {
+    text: tooltip,
+    placement: "bottom"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-button fortune-toolbar-item",
+    onClick: onClick,
+    tabIndex: 0,
+    role: "button",
+    style: selected ? {
+      backgroundColor: "#FFDF0A"
+    } : {}
+  }, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
+    width: 16,
+    height: 16,
+    iconName: iconName,
+    content: icon
+  }), children));
+};
+var _default = exports.default = CustomButton;

package/lib/components/Toolbar/CustomColor.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import "./index.css";
+type Props = {
+    onCustomPick: (color: string | undefined) => void;
+    onColorPick: (color: string) => void;
+};
+export declare const CustomColor: React.FC<Props>;
+export {};

package/lib/components/Toolbar/CustomColor.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomColor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ColorPicker = _interopRequireDefault(require("../Toolbar/ColorPicker"));
+require("./index.css");
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var CustomColor = exports.CustomColor = function CustomColor(_a) {
+  var onCustomPick = _a.onCustomPick,
+    onColorPick = _a.onColorPick;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: "fortune-custom-color"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "color-reset",
+    onClick: function onClick() {
+      return onCustomPick(undefined);
+    },
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: "reset-color",
+    width: 16,
+    height: 16
+  }), "Reset"), /*#__PURE__*/_react.default.createElement(_ColorPicker.default, {
+    onPick: function onPick(color) {
+      onColorPick(color);
+    }
+  }));
+};

package/lib/components/Toolbar/CustomIcon.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+type Props = {
+    iconName?: string;
+    width?: number;
+    height?: number;
+    content?: React.ReactNode;
+};
+declare const CustomIcon: React.FC<Props>;
+export default CustomIcon;

package/lib/components/Toolbar/CustomIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var CustomIcon = function CustomIcon(_a) {
+  var iconName = _a.iconName,
+    _b = _a.width,
+    width = _b === void 0 ? 24 : _b,
+    _c = _a.height,
+    height = _c === void 0 ? 24 : _c,
+    content = _a.content;
+  var innrContent = (0, _react.useMemo)(function () {
+    if (iconName) {
+      return /*#__PURE__*/_react.default.createElement("svg", {
+        width: width,
+        height: height
+      }, /*#__PURE__*/_react.default.createElement("use", {
+        xlinkHref: "#".concat(iconName)
+      }));
+    }
+    if (content) {
+      return content;
+    }
+    return /*#__PURE__*/_react.default.createElement("svg", {
+      width: width,
+      height: width
+    }, /*#__PURE__*/_react.default.createElement("use", {
+      xlinkHref: "#default"
+    }));
+  }, [content, height, iconName, width]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: width,
+      height: height,
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center"
+    }
+  }, innrContent);
+};
+var _default = exports.default = CustomIcon;

package/lib/components/Toolbar/Divider.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+declare const Divider: React.FC;
+export declare const MenuDivider: React.FC;
+export default Divider;

package/lib/components/Toolbar/Divider.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MenuDivider = void 0;
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Divider = function Divider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-divider fortune-toolbar-item"
+  });
+};
+var MenuDivider = exports.MenuDivider = function MenuDivider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-menu-divider"
+  });
+};
+var _default = exports.default = Divider;

package/lib/components/Toolbar/MoreItemsContainer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const MoreItemsContaier: React.FC<{
+    onClose?: () => void;
+    children?: React.ReactNode;
+}>;
+export default MoreItemsContaier;

package/lib/components/Toolbar/MoreItemsContainer.js

@@ -0,0 +1,25 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useOutsideClick = require("../../hooks/useOutsideClick");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var MoreItemsContaier = function MoreItemsContaier(_a) {
+  var onClose = _a.onClose,
+    children = _a.children;
+  var containerRef = (0, _react.useRef)(null);
+  (0, _useOutsideClick.useOutsideClick)(containerRef, function () {
+    setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, 100);
+  }, [containerRef, onClose]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: containerRef,
+    className: "fortune-toolbar-more-container"
+  }, children);
+};
+var _default = exports.default = MoreItemsContaier;

package/lib/components/Toolbar/Select.d.ts

@@ -0,0 +1,14 @@
+import React, { CSSProperties } from "react";
+declare const Select: React.FC<{
+    children?: React.ReactNode;
+    style?: CSSProperties;
+}>;
+type OptionProps = {
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    iconId?: string;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+};
+declare const Option: React.FC<React.PropsWithChildren<OptionProps>>;
+export { Option };
+export default Select;

package/lib/components/Toolbar/Select.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Option = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _SVGIcon = _interopRequireDefault(require("../SVGIcon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var Select = function Select(_a) {
+  var children = _a.children,
+    style = _a.style;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortune-toolbar-select",
+    style: style
+  }, children);
+};
+var Option = exports.Option = function Option(_a) {
+  var iconId = _a.iconId,
+    onClick = _a.onClick,
+    children = _a.children,
+    _onMouseLeave = _a.onMouseLeave,
+    _onMouseEnter = _a.onMouseEnter;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onClick: onClick,
+    tabIndex: 0,
+    className: "fortune-toolbar-select-option",
+    onMouseLeave: function onMouseLeave(e) {
+      return _onMouseLeave === null || _onMouseLeave === void 0 ? void 0 : _onMouseLeave(e);
+    },
+    onMouseEnter: function onMouseEnter(e) {
+      return _onMouseEnter === null || _onMouseEnter === void 0 ? void 0 : _onMouseEnter(e);
+    }
+  }, iconId && /*#__PURE__*/_react.default.createElement(_SVGIcon.default, {
+    name: iconId
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "fortuen-toolbar-text color-text-default text-body-sm"
+  }, children));
+};
+var _default = exports.default = Select;