@eduzz/apps-toolbar-react - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

components/Apps/Dropdown/index.js

@@ -33,4 +33,4 @@ "use strict";
         }
-        var _a = dropdown.getBoundingClientRect(), right = _a.right, top = _a.top;
-        setPosition({ top: theme_1.TOOLBAR_HEIGHT + top, right: right - theme_1.DROPDOWN_WIDTH });
+        var top = dropdown.getBoundingClientRect().top;
+        setPosition({ top: theme_1.TOOLBAR_HEIGHT + top, right: 0 });
     }, [dropdown]);
@@ -44,3 +44,3 @@ (0, react_1.useEffect)(function () {
     }, [dropdown, handleCalculatePosition]);
-    return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-apps-dropdown', className, dropdown && '--opened'), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, left: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-apps-dropdown-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
+    return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-apps-dropdown', className, dropdown && '--opened'), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, right: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-apps-dropdown-list-apps' }, { children: applications === null || applications === void 0 ? void 0 : applications.map(function (app) {
                     var isActive = app.application === application;
@@ -47,0 +47,0 @@ return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-apps-dropdown-item', isActive && '--active') }, { children: (0, jsx_runtime_1.jsxs)("a", (0, tslib_1.__assign)({ href: (0, url_1.buildUrl)(app.application, application), rel: 'noopener noreferrer', target: '_blank', onClick: function () { return handleClickApplication(app.application); } }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-icon' }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: app.icon }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-label' }, { children: app.label }), void 0)] }), app.application) }), app.application));

components/Apps/Dropdown/styles.js

@@ -6,3 +6,3 @@ "use strict";
 var theme_1 = require("../../../assets/theme");
-exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: ", "px;\n  position: fixed;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: auto !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"], ["\n  width: ", "px;\n  position: fixed;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: auto !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"])), theme_1.DROPDOWN_WIDTH, function (_a) {
+exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: auto !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"], ["\n  width: ", "px;\n  position: absolute;\n  padding: ", "px ", "px;\n  background: #fff;\n  box-shadow: ", ";\n  top: 0;\n  right: 0;\n  border-radius: 0 0 ", "px ", "px;\n  z-index: 1099;\n  transition: opacity ", ";\n  opacity: 0;\n  visibility: hidden;\n  user-select: none;\n  box-sizing: border-box;\n\n  ", " {\n    width: calc(100% - ", "px);\n    margin: 0 ", "px;\n    left: auto !important;\n  }\n\n  &.--opened {\n    opacity: 1;\n    visibility: visible;\n    user-select: initial;\n  }\n\n  .eduzz-toolbar-apps-dropdown-list-apps {\n    display: flex;\n    flex-wrap: wrap;\n    justify-items: center;\n    box-sizing: border-box;\n\n    .eduzz-toolbar-apps-dropdown-item {\n      width: calc(33% - ", "px);\n      text-align: center;\n      transition: ", ";\n      border-radius: ", "px;\n      margin: ", "px;\n      text-decoration: none;\n      cursor: pointer;\n\n      a {\n        text-decoration: none;\n        padding: ", "px ", "px;\n        display: block;\n\n        .eduzz-toolbar-icon {\n          svg {\n            width: ", "px;\n          }\n        }\n\n        .eduzz-toolbar-label {\n          display: block;\n          font-size: 13px;\n          margin-top: ", "px;\n          color: ", ";\n          font-weight: 500;\n          line-height: 1;\n\n          &::selection {\n            background: none;\n          }\n        }\n      }\n\n      &.--active {\n        background: rgba(0, 0, 0, 0.04);\n\n        a {\n          cursor: no-drop;\n\n          .eduzz-toolbar-label {\n            color: ", ";\n          }\n        }\n      }\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n    }\n  }\n\n  .eduzz-toolbar-apps-dropdown-expand {\n    text-align: center;\n\n    span:not(.houston-icon) {\n      display: flex;\n      align-items: center;\n      font-size: 13px;\n      cursor: pointer;\n      color: ", ";\n      justify-content: center;\n      transition: ", ";\n      border-radius: ", "px;\n      padding: ", "px 0;\n      font-weight: 500;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.04);\n      }\n\n      .houston-icon {\n        margin-right: ", "px;\n      }\n    }\n  }\n"])), theme_1.DROPDOWN_WIDTH, function (_a) {
     var theme = _a.theme;
@@ -9,0 +9,0 @@ return theme.spacing(2);

components/Apps/styles.js

@@ -6,3 +6,3 @@ "use strict";
 var theme_1 = require("../../assets/theme");
-exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"], ["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"])), function (_a) {
+exports.default = (function (Component) { return (0, styled_1.default)(Component)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n      font-weight: 500;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"], ["\n  width: auto;\n  position: relative;\n  box-sizing: border-box;\n\n  .eduzz-toolbar-apps-button {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    padding: 0 ", "px;\n    transition: ", ";\n    height: ", "px;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    .eduzz-toolbar-apps-icon {\n      line-height: 0;\n    }\n\n    .eduzz-toolbar-apps-label {\n      font-size: 14px;\n      margin-left: ", "px;\n      font-weight: 500;\n\n      &::selection {\n        background: transparent;\n      }\n\n      ", " {\n        display: none;\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -9,0 +9,0 @@ return theme.spacing(3);

components/User/index.js

@@ -11,2 +11,3 @@ "use strict";
 var className_1 = (0, tslib_1.__importDefault)(require("../../helpers/className"));
+var truncateText_1 = (0, tslib_1.__importDefault)(require("../../helpers/truncateText"));
 var useEscapeKey_1 = require("../../hooks/useEscapeKey");
@@ -39,5 +40,5 @@ var useOutside_1 = require("../../hooks/useOutside");
     }
-    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: wrapperMenuUser, className: (0, className_1.default)('eduzz-toolbar-user', dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, (0, tslib_1.__assign)({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-avatar' }, { children: firstLetter }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-user-name' }, { children: user === null || user === void 0 ? void 0 : user.name }), void 0), hasMenu && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }, void 0) }), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(UserMenu_1.default, { children: children }, void 0)] }), void 0) }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ ref: wrapperMenuUser, className: (0, className_1.default)('eduzz-toolbar-user', dropdown && '--active', hasMenu && '--has-menu', className) }, { children: (0, jsx_runtime_1.jsxs)(context_2.default.Provider, (0, tslib_1.__assign)({ value: { dropdown: dropdown, handleClickOutside: handleClickOutside } }, { children: [(0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-label', dropdown && '--active'), onClick: handleClickOpenDropdown }, { children: [(0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-avatar', style: { backgroundImage: (user === null || user === void 0 ? void 0 : user.avatar) ? "url(".concat(user === null || user === void 0 ? void 0 : user.avatar) : null } }, { children: !(user === null || user === void 0 ? void 0 : user.avatar) && firstLetter }), void 0), (0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: 'eduzz-toolbar-user-name' }, { children: (0, truncateText_1.default)(user === null || user === void 0 ? void 0 : user.name) }), void 0), hasMenu && ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu-arrow', dropdown && '--open') }, { children: (0, jsx_runtime_1.jsx)(ChevronDown_1.default, { size: 18 }, void 0) }), void 0))] }), void 0), (0, jsx_runtime_1.jsx)(UserMenu_1.default, { children: children }, void 0)] }), void 0) }), void 0));
 };
-exports.default = (0, styled_1.default)((0, react_1.memo)(User))(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    .eduzz-toolbar-avatar {\n      width: ", "px;\n      height: ", "px;\n      border-radius: 100%;\n      background: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ", ";\n      font-weight: 600;\n      margin-right: ", "px;\n      font-size: 14px;\n      line-height: 0;\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 400;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        margin-left: 0;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    .eduzz-toolbar-avatar {\n      width: ", "px;\n      height: ", "px;\n      border-radius: 100%;\n      background: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ", ";\n      font-weight: 600;\n      margin-right: ", "px;\n      font-size: 14px;\n      line-height: 0;\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 400;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        margin-left: 0;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)((0, react_1.memo)(User))(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    .eduzz-toolbar-avatar {\n      width: ", "px;\n      height: ", "px;\n      border-radius: 100%;\n      background: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ", ";\n      font-weight: 600;\n      margin-right: ", "px;\n      font-size: 14px;\n      line-height: 0;\n      background-size: cover;\n      background-position: center;\n      background-repeat: no-repeat;\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        margin-left: 0;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"], ["\n  position: relative;\n  z-index: 1100;\n\n  &.--has-menu {\n    cursor: pointer;\n\n    &:hover,\n    &.--active {\n      background: rgba(0, 0, 0, 0.15);\n    }\n\n    &:focus {\n      background: none;\n    }\n  }\n\n  .eduzz-toolbar-user-label {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 ", "px;\n    height: ", "px;\n\n    .eduzz-toolbar-avatar {\n      width: ", "px;\n      height: ", "px;\n      border-radius: 100%;\n      background: #fff;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: ", ";\n      font-weight: 600;\n      margin-right: ", "px;\n      font-size: 14px;\n      line-height: 0;\n      background-size: cover;\n      background-position: center;\n      background-repeat: no-repeat;\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-name {\n      font-size: 14px;\n      font-weight: 500;\n\n      ", " {\n        display: none;\n      }\n\n      &::selection {\n        background: none;\n      }\n    }\n\n    .eduzz-toolbar-user-menu-arrow {\n      margin-left: ", "px;\n      transition: ", ";\n\n      ", " {\n        margin-left: 0;\n      }\n\n      &.--open {\n        transform: rotate(-180deg);\n      }\n\n      span.houston-icon {\n        line-height: 0;\n        position: relative;\n        top: 2px;\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -44,0 +45,0 @@ return theme.spacing(3);

components/UserMenu/index.js

@@ -18,4 +18,4 @@ "use strict";
         }
-        var _a = element.getBoundingClientRect(), right = _a.right, top = _a.top;
-        setPosition({ top: theme_1.TOOLBAR_HEIGHT + top, right: right - theme_1.MENU_WIDTH });
+        var top = element.getBoundingClientRect().top;
+        setPosition({ top: theme_1.TOOLBAR_HEIGHT + top, right: 0 });
     }, [element]);
@@ -29,5 +29,5 @@ (0, react_1.useEffect)(function () {
     }, [element, handleCalculatePosition]);
-    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu', element && '--active', className), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, left: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: children }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ className: (0, className_1.default)('eduzz-toolbar-user-menu', element && '--active', className), style: position ? { top: position === null || position === void 0 ? void 0 : position.top, right: position === null || position === void 0 ? void 0 : position.right } : {} }, { children: children }), void 0));
 });
-exports.default = (0, styled_1.default)(UserMenu)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: ", "px;\n  top: ", "px;\n  position: fixed;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"], ["\n  width: ", "px;\n  top: ", "px;\n  position: fixed;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"])), theme_1.MENU_WIDTH, theme_1.TOOLBAR_HEIGHT, function (_a) {
+exports.default = (0, styled_1.default)(UserMenu)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"], ["\n  width: ", "px;\n  top: ", "px;\n  position: absolute;\n  right: ", "px;\n  box-shadow: ", ";\n  padding: ", "px;\n  transition: opacity ", ";\n  box-sizing: border-box;\n  visibility: hidden;\n  opacity: 0;\n  user-select: none;\n  background: white;\n  border-radius: 0 0 ", "px ", "px;\n\n  &.--active {\n    visibility: visible;\n    opacity: 1;\n    user-select: auto;\n  }\n"])), theme_1.MENU_WIDTH, theme_1.TOOLBAR_HEIGHT, function (_a) {
     var theme = _a.theme;
@@ -34,0 +34,0 @@ return theme.spacing(2);

components/UserMenuItem/index.js

@@ -23,3 +23,3 @@ "use strict";
 });
-exports.default = (0, styled_1.default)(UserMenuItem)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n  }\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n  }\n"])), function (_a) {
+exports.default = (0, styled_1.default)(UserMenuItem)(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"], ["\n  color: ", ";\n  font-weight: 400;\n  font-size: 14px;\n  padding: ", "px;\n  border-radius: ", "px;\n  transition: ", ";\n  display: flex;\n  align-items: center;\n  line-height: 1.2;\n  position: relative;\n\n  &:not(.--disabled):hover {\n    background: rgba(0, 0, 0, 0.04);\n    color: ", ";\n  }\n\n  &.--disabled {\n    color: #b0bec5;\n    cursor: no-drop;\n  }\n\n  & .eduzz-toolbar-user-menu-item-icon {\n    line-height: 0;\n    margin-right: ", "px;\n    font-size: 18px;\n\n    span,\n    i {\n      font-size: 18px;\n    }\n\n    img {\n      width: 28px;\n      height: 28px;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -26,0 +26,0 @@ return theme.colors.text;

interfaces/index.d.ts

@@ -12,2 +12,3 @@ /// <reference types="react" />
     email?: string;
+    avatar?: string;
     belt?: string;
@@ -14,0 +15,0 @@ isSupport?: boolean;

package.json

 {
   "name": "@eduzz/apps-toolbar-react",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "private": false,
@@ -5,0 +5,0 @@ "author": "Eduzz Team",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

120779

increased by1.5%

Number of package files

81

increased by2.53%

Lines of code

1779

increased by2.18%

No dependency changes