@agilemotion/oui-react-js 1.8.57 → 1.8.59

package/dist/components/Toolbar.js

@@ -20,6 +20,8 @@ var _MenuList = _interopRequireDefault(require("@mui/material/MenuList"));
 var _Popper = _interopRequireDefault(require("@mui/material/Popper"));
 var _MenuItem = _interopRequireDefault(require("./menu/MenuItem"));
 require("./Button.css");
+var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
 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 (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 (const 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); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -155,6 +157,7 @@ const Toolbar = props => {
     }
     return item.type === 'menuButton' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
       root: sectionContainerRef,
+      id: item.id,
       onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
     }, /*#__PURE__*/_react.default.createElement(_MenuButton.default, {
       config: item,
@@ -163,6 +166,7 @@ const Toolbar = props => {
       viewId: props.viewId
     })) : item.type === 'button' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
       root: sectionContainerRef,
+      id: item.id,
       onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
     }, /*#__PURE__*/_react.default.createElement(_Button.default, {
       config: item,
@@ -171,11 +175,13 @@ const Toolbar = props => {
       viewId: props.viewId
     })) : item.type === 'toolbarSpacer' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
       root: sectionContainerRef,
+      id: item.id,
       onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: classes.spacer
     }, "\xA0")) : item.type === 'icon' ? /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
       root: sectionContainerRef,
+      id: item.id,
       onVisibilityChange: visible => handleVisibilityChange(item.id, visible)
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       id: _Utils.default.getComponentAttribute(item, 'iconId', null)
@@ -254,7 +260,8 @@ const Toolbar = props => {
       className: "row no-margin no-padding flex-nowrap"
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
-        width: 'calc(100% - 40px)'
+        width: 'calc(100% - 40px)',
+        maxHeight: '64px'
       },
       ref: sectionContainerRef
     }, toolbar.sections.map((section, index) => {
@@ -271,22 +278,35 @@ const Toolbar = props => {
         width: '32px',
         height: '44px',
         display: 'flex',
-        alignItems: 'center'
+        alignItems: 'center',
+        justifyContent: 'center'
       }
-    }, !allButtonsVisible && /*#__PURE__*/_react.default.createElement("div", {
-      className: 'col-*-* more-button-wrapper',
+    }, !allButtonsVisible && /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+      ref: anchorRef,
+      size: "small",
+      onClick: handleToggle,
+      "aria-label": "more actions",
+      "aria-haspopup": "menu",
+      "aria-expanded": open ? 'true' : undefined,
       style: {
-        display: 'flex',
-        alignItems: 'center'
+        width: 28,
+        height: 28
       }
-    })), anchorRef.current && /*#__PURE__*/_react.default.createElement(_Popper.default, {
+    }, /*#__PURE__*/_react.default.createElement(_MoreVert.default, {
+      fontSize: "small"
+    }))), anchorRef.current && /*#__PURE__*/_react.default.createElement(_Popper.default, {
       open: open,
       anchorEl: anchorRef.current,
-      keepMounted: true,
+      placement: "bottom-end",
       transition: true,
-      disablePortal: true,
+      modifiers: [{
+        name: 'offset',
+        options: {
+          offset: [0, 8]
+        }
+      }],
       style: {
-        zIndex: 1000
+        zIndex: 1300
       }
     }, _ref => {
       let {
@@ -298,7 +318,15 @@ const Toolbar = props => {
           transformOrigin: placement === 'bottom' ? 'center top' : 'center bottom'
         }
       }), /*#__PURE__*/_react.default.createElement(_Paper.default, {
-        id: "menu-list-grow"
+        id: "menu-list-grow",
+        elevation: 6,
+        sx: {
+          minWidth: 220,
+          borderRadius: 2,
+          boxShadow: "\n                                            0px 4px 12px rgba(0,0,0,0.12),\n                                            0px 2px 4px rgba(0,0,0,0.08)\n                                        ",
+          border: '1px solid rgba(0,0,0,0.08)',
+          overflow: 'hidden'
+        }
       }, /*#__PURE__*/_react.default.createElement(_ClickAwayListener.default, {
         onClickAway: handleClose
       }, /*#__PURE__*/_react.default.createElement(_MenuList.default, {
@@ -323,9 +351,9 @@ const Toolbar = props => {
     id: props.config.id,
     className: 'oui-toolbar',
     style: _Utils.default.mergeStyles({
-      borderBottom: '1px solid #e2e2e2',
       padding: '4px 0',
-      overflow: 'hidden'
+      overflow: 'hidden',
+      maxHeight: '64px'
     }, props.config)
   }, render(props.config));
 };

package/dist/components/WordDocumentViewer.css

@@ -1 +1,7 @@
-
+*:focus {
+    scroll-margin: 0 !important;
+}
+
+.e-control *:focus {
+    scroll-margin: 0 !important;
+}