@difizen/libro-common 0.3.4 → 1.0.0

package/es/react/menu/styles/index.less

@@ -0,0 +1,163 @@
+/* stylelint-disable no-duplicate-selectors */
+
+@import '../../styles/variables.less';
+
+@menu-prefix-cls: ~'@{mana-prefix}-menu';
+
+.@{menu-prefix-cls} {
+  position: relative;
+  display: inline-block;
+  min-width: 160px;
+  min-height: 32px;
+  margin: 0;
+  padding: 4px 0;
+  color: var(--mana-menu-item-color);
+  background-color: var(--mana-color-bg-elevated);
+  outline: 0;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 12%);
+
+  &-submenu-menu {
+    color: var(--mana-menu-item-color);
+    background-color: var(--mana-color-bg-elevated);
+  }
+
+  &-item {
+    position: relative;
+  }
+
+  &-item-active > &-item-button {
+    color: var(--mana-menu-item-active-color);
+    background: var(--mana-menu-item-active-bg);
+  }
+
+  &-item:hover > &-item-button {
+    color: var(--mana-menu-item-hover-color);
+    background: var(--mana-menu-item-hover-bg);
+  }
+
+  &-item-divider {
+    display: block;
+    width: 100%;
+    height: 1px;
+    margin: 4px 0;
+    background: rgba(150, 150, 150, 20%);
+    pointer-events: none;
+  }
+
+  &-item-button {
+    position: relative;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 28px;
+    padding: 0 12px 0 6px;
+    color: var(--mana-menu-item-color);
+    text-align: left;
+    background: transparent;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+
+    > span {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  &-item-hidden {
+    display: none;
+  }
+
+  &-item-disabled > &-item-button,
+  &-item-disabled:hover > &-item-button {
+    color: var(--mana-ant-color-disabled);
+    background-color: transparent;
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    font-size: 13px;
+  }
+
+  &-item-text {
+    padding-right: 56px;
+    overflow: hidden;
+    font-size: 13px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  &-item-hotkey {
+    font-size: 13px;
+    opacity: 0.75;
+  }
+
+  &-submenu-arrow,
+  &-submenu&-item-disabled:hover
+    > .@{menu-prefix-cls}-item-button
+    > .@{menu-prefix-cls}-submenu-arrow {
+    position: absolute;
+    top: 10px;
+    right: 12px;
+    width: 0;
+    height: 0;
+    border-top: 4px solid rgba(0, 0, 0, 0%);
+    border-bottom: 4px solid rgba(0, 0, 0, 0%);
+    border-left: 5px solid #262626;
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  &-submenu-menu,
+  &-submenu&-item-disabled:hover > &-submenu-menu {
+    position: absolute;
+    top: -5px;
+    left: 100%;
+    z-index: 9999;
+    min-width: 200px;
+    margin-left: -4px;
+    padding: 5px 0;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 12%);
+    transform: translateX(-10px);
+    visibility: hidden;
+    opacity: 0;
+    transition: all 0.25s cubic-bezier(0.3, 1.2, 0.2, 1);
+  }
+
+  &-submenu&-item-active,
+  &-submenu:hover {
+    > .@{menu-prefix-cls}-item-button > .@{menu-prefix-cls}-submenu-arrow {
+      opacity: 0.75;
+    }
+  }
+
+  &-submenu&-item-active > &-submenu-menu,
+  &-submenu:hover > &-submenu-menu {
+    transform: translateX(0);
+    visibility: visible;
+    opacity: 1;
+  }
+
+  &.@{menu-prefix-cls}-has-icon &-item-button {
+    padding-left: 30px;
+
+    .@{menu-prefix-cls}-item-icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .@{menu-prefix-cls}-item-text {
+      padding-left: 2px;
+    }
+  }
+}

package/es/react/menu/submenu.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { MenuItemProps } from './item';
+import './styles/index.less';
+export declare const MenuSubMenu: React.FC<MenuItemProps>;
+//# sourceMappingURL=submenu.d.ts.map

package/es/react/menu/submenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"submenu.d.ts","sourceRoot":"","sources":["../../../src/react/menu/submenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAE5C,OAAO,qBAAqB,CAAC;AAM7B,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAgB/C,CAAC"}

package/es/react/menu/submenu.js

@@ -0,0 +1,33 @@
+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); }
+var _excluded = ["hotkey", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import * as React from 'react';
+import { MenuContext } from "./context";
+import { getProps, getContent } from "./item";
+import "./styles/index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var noop = function noop() {
+  //
+};
+export var MenuSubMenu = function MenuSubMenu(props) {
+  var hotkey = props.hotkey,
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
+  var context = React.useContext(MenuContext);
+  var prefixCls = context.prefixCls;
+  var wrapProps = getProps(_objectSpread({}, props), context, "".concat(prefixCls, "-submenu"));
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, wrapProps), {}, {
+    children: getContent(_objectSpread({}, others), context, noop, /*#__PURE__*/_jsx("span", {
+      className: "".concat(prefixCls, "-submenu-arrow")
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(prefixCls, "-submenu-menu"),
+      children: children
+    }))
+  }));
+};

package/es/react/menubar/context.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare const MenubarContext: React.Context<MenubarContext.Contexts>;
+export declare namespace MenubarContext {
+    interface Contexts {
+        prefixCls: string;
+        activeMenubar: () => void;
+        menubarActived: boolean;
+        inContent: (element: HTMLElement) => boolean;
+        activeItem?: string | undefined;
+        activeElementRef?: React.MutableRefObject<HTMLDivElement | null> | undefined;
+        setActiveElementRef: (element?: React.MutableRefObject<HTMLDivElement | null>) => void;
+    }
+}
+//# sourceMappingURL=context.d.ts.map

package/es/react/menubar/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/react/menubar/context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,eAAO,MAAM,cAAc,wCAA0D,CAAC;AAEtF,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,QAAQ;QACvB,SAAS,EAAE,MAAM,CAAC;QAClB,aAAa,EAAE,MAAM,IAAI,CAAC;QAC1B,cAAc,EAAE,OAAO,CAAC;QACxB,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,OAAO,CAAC;QAC7C,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;QAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;QAC7E,mBAAmB,EAAE,CACnB,OAAO,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,cAAc,GAAG,IAAI,CAAC,KACpD,IAAI,CAAC;KACX;CACF"}

package/es/react/menubar/context.js

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export var MenubarContext = /*#__PURE__*/React.createContext({});

package/es/react/menubar/index.d.ts

@@ -0,0 +1,2 @@
+export * from './menubar';
+//# sourceMappingURL=index.d.ts.map

package/es/react/menubar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/menubar/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/es/react/menubar/index.js

@@ -0,0 +1 @@
+export * from "./menubar";

package/es/react/menubar/item.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+export declare const MenubarItem: (props: MenubarItemProps) => import("react/jsx-runtime").JSX.Element;
+export interface MenubarItemProps {
+    text: string | React.ReactNode;
+    hidden?: boolean;
+    children?: React.ReactNode | React.ReactNode[];
+}
+//# sourceMappingURL=item.d.ts.map

package/es/react/menubar/item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.d.ts","sourceRoot":"","sources":["../../../src/react/menubar/item.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,WAAW,UAAW,gBAAgB,4CAoFlD,CAAC;AAGF,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAChD"}

package/es/react/menubar/item.js

@@ -0,0 +1,94 @@
+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); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import classnames from 'classnames';
+import * as React from 'react';
+import { useEffect } from 'react';
+import * as ReactDom from 'react-dom';
+import { MenubarContext } from "./context";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function stopPropagation(e) {
+  e.stopPropagation();
+}
+export var MenubarItem = function MenubarItem(props) {
+  var context = React.useContext(MenubarContext);
+  var menubarItemRef = React.useRef(null);
+  var text = props.text,
+    children = props.children,
+    hidden = props.hidden;
+  var prefixCls = context.prefixCls,
+    menubarActived = context.menubarActived;
+  var active = context.activeElementRef && context.activeElementRef.current && context.activeElementRef.current === menubarItemRef.current;
+  var currentMenuActived = menubarActived && active;
+  var baseCls = "".concat(prefixCls, "-item");
+  var popupClassName = "".concat(context.prefixCls, "-item-dropdown");
+  useEffect(function () {
+    var element = menubarItemRef.current;
+    if (element) {
+      element.addEventListener('mousedown', stopPropagation);
+    }
+    return function () {
+      if (element) {
+        element.removeEventListener('mousedown', stopPropagation);
+      }
+    };
+  }, []);
+  var doActive = function doActive() {
+    context.setActiveElementRef(menubarItemRef);
+  };
+  var doDeactive = function doDeactive() {
+    context.setActiveElementRef();
+  };
+  var onToggleActive = function onToggleActive(e) {
+    e.stopPropagation();
+    if (!currentMenuActived) {
+      context.activeMenubar();
+      doActive();
+    }
+  };
+  var locatable = !!menubarItemRef.current;
+  var getPortalItemStyle = function getPortalItemStyle() {
+    var node = menubarItemRef.current;
+    if (!node) {
+      return {};
+    }
+    var offsetHeight = node.offsetHeight;
+    var _node$getBoundingClie = node.getBoundingClientRect(),
+      top = _node$getBoundingClie.top,
+      left = _node$getBoundingClie.left;
+    return {
+      top: top + offsetHeight,
+      left: left
+    };
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    ref: menubarItemRef,
+    className: classnames(baseCls, _defineProperty(_defineProperty(_defineProperty({}, "".concat(baseCls, "-hidden"), hidden), "".concat(baseCls, "-hover"), menubarActived), "".concat(baseCls, "-active"), currentMenuActived)),
+    onMouseEnter: doActive,
+    onClick: onToggleActive,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classnames("".concat(baseCls, "-text"), _defineProperty({}, "".concat(baseCls, "-text-active"), currentMenuActived))
+      // onClick={onClick}
+      ,
+      children: text
+    }), currentMenuActived && locatable && /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        children: /*#__PURE__*/_jsx("div", {
+          style: getPortalItemStyle(),
+          className: popupClassName,
+          children: children
+        })
+      })
+    }), document.body)]
+  });
+};
+
+// eslint-disable-next-line @typescript-eslint/no-redeclare

package/es/react/menubar/menubar.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import './styles/index.less';
+import '../menu/styles/index.less';
+export interface MenubarProps {
+    prefixCls?: string;
+    className?: string;
+    extra?: React.ReactNode;
+    children?: React.ReactNode | React.ReactNode[];
+}
+export declare const defaultMenubarProps: MenubarProps;
+export declare const Menubar: {
+    (props: MenubarProps): import("react/jsx-runtime").JSX.Element;
+    Item: (props: import("./item").MenubarItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=menubar.d.ts.map

package/es/react/menubar/menubar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.d.ts","sourceRoot":"","sources":["../../../src/react/menubar/menubar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,2BAA2B,CAAC;AAKnC,MAAM,WAAW,YAAY;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;CAChD;AACD,eAAO,MAAM,mBAAmB,EAAE,YAEjC,CAAC;AAEF,eAAO,MAAM,OAAO;YAAW,YAAY;;CAqG1C,CAAC"}

package/es/react/menubar/menubar.js

@@ -0,0 +1,119 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classnames from 'classnames';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import * as React from 'react';
+import "./styles/index.less";
+import "../menu/styles/index.less";
+import { MenubarContext } from "./context";
+import { MenubarItem } from "./item";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var defaultMenubarProps = {
+  prefixCls: 'mana'
+};
+export var Menubar = function Menubar(props) {
+  var removeDocEventRef = React.useRef(undefined);
+  var menubarContentRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    active = _React$useState2[0],
+    setActive = _React$useState2[1];
+  var _React$useState3 = React.useState(undefined),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    activeElementRef = _React$useState4[0],
+    setActiveElementRef = _React$useState4[1];
+  var unbindDocEvent = function unbindDocEvent() {
+    if (removeDocEventRef.current) {
+      removeDocEventRef.current();
+      removeDocEventRef.current = undefined;
+    }
+  };
+  React.useEffect(function () {
+    return function () {
+      unbindDocEvent();
+    };
+  }, []);
+  var activeMenubar = function activeMenubar() {
+    setActive(true);
+    if (!removeDocEventRef.current) {
+      var onDocumentMouseDown = function onDocumentMouseDown(e) {
+        var _activeElementRef$cur;
+        if (e.defaultPrevented) {
+          return;
+        }
+        var nativeEvent = e.nativeEvent;
+        if (activeElementRef !== null && activeElementRef !== void 0 && (_activeElementRef$cur = activeElementRef.current) !== null && _activeElementRef$cur !== void 0 && _activeElementRef$cur.contains(nativeEvent.target)) {
+          return;
+        }
+        setActive(false);
+        setActiveElementRef(undefined);
+        unbindDocEvent();
+      };
+      var onDocumentClick = function onDocumentClick(e) {
+        var _activeElementRef$cur2;
+        if (e.defaultPrevented) {
+          return;
+        }
+        var nativeEvent = e.nativeEvent;
+        if (activeElementRef !== null && activeElementRef !== void 0 && (_activeElementRef$cur2 = activeElementRef.current) !== null && _activeElementRef$cur2 !== void 0 && _activeElementRef$cur2.contains(nativeEvent.target)) {
+          return;
+        }
+        setActive(false);
+        setActiveElementRef(undefined);
+        unbindDocEvent();
+      };
+      var _addEventListener = addEventListener(document.documentElement, 'mousedown', onDocumentMouseDown),
+        removeMouseDown = _addEventListener.remove;
+      var _addEventListener2 = addEventListener(document.documentElement, 'click', onDocumentClick),
+        removeClick = _addEventListener2.remove;
+      var remove = function remove() {
+        removeMouseDown();
+        removeClick();
+      };
+      removeDocEventRef.current = remove;
+    }
+  };
+  var inContent = function inContent(element) {
+    if (menubarContentRef && menubarContentRef.current) {
+      return menubarContentRef.current.contains(element);
+    }
+    return false;
+  };
+  var _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? defaultMenubarProps.prefixCls : _props$prefixCls,
+    className = props.className,
+    children = props.children,
+    extra = props.extra;
+  var baseCls = "".concat(prefixCls, "-menubar");
+  var contextValue = {
+    prefixCls: baseCls,
+    activeMenubar: activeMenubar,
+    menubarActived: active === true,
+    inContent: inContent,
+    activeElementRef: activeElementRef,
+    setActiveElementRef: setActiveElementRef
+  };
+  return /*#__PURE__*/_jsx("div", {
+    className: classnames(baseCls, className),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: "".concat(baseCls, "-content"),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "".concat(baseCls, "-content-inner"),
+        ref: menubarContentRef,
+        children: /*#__PURE__*/_jsx(MenubarContext.Provider, {
+          value: contextValue,
+          children: children
+        })
+      }), extra && /*#__PURE__*/_jsx("div", {
+        className: "".concat(baseCls, "-content-extras"),
+        children: extra
+      })]
+    })
+  });
+};
+Menubar.Item = MenubarItem;

package/es/react/menubar/styles/index.less

@@ -0,0 +1,113 @@
+@import '../../styles/variables.less';
+
+@menu-prefix-cls: ~'@{mana-prefix}-menu';
+@menubar-prefix-cls: ~'@{mana-prefix}-menubar';
+
+@menubar-menu-item-color: var(--mana-menu-item-color);
+@menubar-menu-item-hover-color: var(--mana-menu-item-hover-color);
+@menubar-menu-item-hover-bg: var(--mana-menu-item-hover-bg);
+@menubar-menu-item-active-color: var(--mana-menu-item-active-color);
+@menubar-menu-item-active-bg: var(--mana-menu-item-active-bg);
+
+@menubar-item-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
+
+.@{menubar-prefix-cls} {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  margin: 0;
+  padding: 2px;
+
+  &-content {
+    display: flex;
+    flex: 1 1;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  &-content-inner,
+  &-content-extras,
+  &-item,
+  &-item-text {
+    position: relative;
+    display: inline-flex;
+    flex-direction: row;
+  }
+
+  &-content-extras {
+    align-content: center;
+    align-items: center;
+  }
+
+  &-item {
+    position: relative;
+  }
+
+  &-item-hidden {
+    display: none;
+  }
+
+  &-item-text {
+    position: relative;
+    align-content: center;
+    align-items: center;
+    padding: 5px 10px;
+    color: @menubar-menu-item-color;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      color: @menubar-menu-item-hover-color;
+      background: @menubar-menu-item-hover-bg;
+    }
+  }
+
+  &-item-text-active,
+  &-item-text-active:hover {
+    color: @menubar-menu-item-active-color;
+    background: @menubar-menu-item-active-bg;
+    box-shadow: @menubar-item-shadow;
+
+    &::after {
+      position: absolute;
+      bottom: 2px;
+      left: 0;
+      z-index: 1000;
+      width: 100%;
+      height: 6px;
+      background: @menubar-menu-item-active-bg;
+      content: ' ';
+    }
+  }
+
+  &-item-dropdown {
+    position: absolute;
+    top: 28px;
+    left: 0;
+    z-index: 9999;
+    min-height: 34px;
+    // transform: translateY(-10px);
+    // visibility: hidden;
+    // opacity: 0;
+    transition: all 0.25s cubic-bezier(0.3, 1.2, 0.2, 1);
+
+    .@{menu-prefix-cls} {
+      min-width: 240px;
+    }
+
+    & > .@{menu-prefix-cls} {
+      border-radius: 0 4px 4px;
+    }
+
+    .@{menu-prefix-cls}-submenu-menu {
+      border-radius: 4px;
+    }
+  }
+
+  &-item-active > &-item-dropdown {
+    transform: translateY(0);
+    visibility: visible;
+    opacity: 1;
+  }
+}

package/es/react/notification/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { NotificationArgsProps } from './protocol';
+import PurePanel from './pure-panel';
+import './style';
+export type { NotificationArgsProps } from './protocol';
+interface BaseMethods {
+    open: (config: NotificationArgsProps) => void;
+    destroy: (key?: React.Key) => void;
+    /** @private Internal Component. Do not use in your production. */
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+}
+type StaticFn = (config: NotificationArgsProps) => void;
+interface NoticeMethods {
+    success: StaticFn;
+    info: StaticFn;
+    warning: StaticFn;
+    error: StaticFn;
+}
+export declare const notification: NoticeMethods & BaseMethods;
+//# sourceMappingURL=index.d.ts.map

package/es/react/notification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/notification/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAIrD,OAAO,KAAK,EACV,qBAAqB,EAGtB,MAAM,YAAY,CAAC;AACpB,OAAO,SAAS,MAAM,cAAc,CAAC;AAGrC,OAAO,SAAS,CAAC;AAEjB,YAAY,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAmKxD,UAAU,WAAW;IACnB,IAAI,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9C,OAAO,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,KAAK,IAAI,CAAC;IACnC,kEAAkE;IAClE,sCAAsC,EAAE,OAAO,SAAS,CAAC;CAC1D;AAED,KAAK,QAAQ,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAExD,UAAU,aAAa;IACrB,OAAO,EAAE,QAAQ,CAAC;IAClB,IAAI,EAAE,QAAQ,CAAC;IACf,OAAO,EAAE,QAAQ,CAAC;IAClB,KAAK,EAAE,QAAQ,CAAC;CACjB;AAgBD,eAAO,MAAM,YAAY,6BAAgB,CAAC"}