scorer-ui-kit 2.6.2 → 2.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Global/atoms/NavigationItem.d.ts +1 -3
- package/dist/index.js +24 -52
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +24 -52
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.modern.js
CHANGED
|
@@ -12842,7 +12842,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
12842
12842
|
};
|
|
12843
12843
|
};
|
|
12844
12844
|
|
|
12845
|
-
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b
|
|
12845
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b;
|
|
12846
12846
|
var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
12847
12847
|
var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
12848
12848
|
var SubmenuContainerInner = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -12855,22 +12855,22 @@ var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedT
|
|
|
12855
12855
|
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
12856
12856
|
});
|
|
12857
12857
|
var SubmenuContainer = styled.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
12858
|
-
var ContextContainer = styled.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height:
|
|
12859
|
-
var
|
|
12858
|
+
var ContextContainer = styled.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
12859
|
+
var mobileMenu = _ref2.mobileMenu;
|
|
12860
|
+
return mobileMenu ? '30px' : '70px';
|
|
12861
|
+
}, SubmenuContainer, function (_ref3) {
|
|
12862
|
+
var open = _ref3.open;
|
|
12860
12863
|
return open && css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n grid-template-rows: 1fr;\n \n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n \n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12861
|
-
}, function (_ref3) {
|
|
12862
|
-
var loading = _ref3.loading;
|
|
12863
|
-
return loading === 'true' && css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12864
12864
|
});
|
|
12865
12865
|
var NavigationItem = function NavigationItem(_ref4) {
|
|
12866
12866
|
var item = _ref4.item,
|
|
12867
12867
|
menuOpen = _ref4.menuOpen,
|
|
12868
12868
|
submenuOpen = _ref4.submenuOpen,
|
|
12869
12869
|
contextKey = _ref4.contextKey,
|
|
12870
|
-
loading = _ref4.loading,
|
|
12871
12870
|
topLevelPath = _ref4.topLevelPath,
|
|
12872
|
-
|
|
12873
|
-
|
|
12871
|
+
_ref4$mobileMenu = _ref4.mobileMenu,
|
|
12872
|
+
mobileMenu = _ref4$mobileMenu === void 0 ? false : _ref4$mobileMenu,
|
|
12873
|
+
onClickCallback = _ref4.onClickCallback;
|
|
12874
12874
|
var icon = item.icon,
|
|
12875
12875
|
title = item.title,
|
|
12876
12876
|
href = item.href,
|
|
@@ -12880,15 +12880,11 @@ var NavigationItem = function NavigationItem(_ref4) {
|
|
|
12880
12880
|
var refSubmenu = useRef(null);
|
|
12881
12881
|
var submenus = generateSubmenus(submenu, onClickCallback) || [];
|
|
12882
12882
|
var hasSubmenu = submenus.length > 0;
|
|
12883
|
-
|
|
12884
|
-
|
|
12885
|
-
|
|
12886
|
-
|
|
12887
|
-
},
|
|
12888
|
-
return React__default.createElement(ContextContainer, {
|
|
12889
|
-
open: submenuOpen,
|
|
12890
|
-
loading: loading ? 'true' : 'false'
|
|
12891
|
-
}, React__default.createElement(ContextItem, Object.assign({}, {
|
|
12883
|
+
return React__default.createElement(ContextContainer, Object.assign({
|
|
12884
|
+
open: submenuOpen
|
|
12885
|
+
}, {
|
|
12886
|
+
mobileMenu: mobileMenu
|
|
12887
|
+
}), React__default.createElement(ContextItem, Object.assign({}, {
|
|
12892
12888
|
title: title,
|
|
12893
12889
|
href: href,
|
|
12894
12890
|
isActive: isActive,
|
|
@@ -12955,7 +12951,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
12955
12951
|
return output;
|
|
12956
12952
|
};
|
|
12957
12953
|
|
|
12958
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$
|
|
12954
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$9;
|
|
12959
12955
|
var Logo = styled(Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
12960
12956
|
var LogoMark = styled.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
|
|
12961
12957
|
var LogoType = styled.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
@@ -12973,7 +12969,7 @@ var Container$10 = styled.div(_templateObject11$g || (_templateObject11$g = _tag
|
|
|
12973
12969
|
desktopSize = _ref2.desktopSize;
|
|
12974
12970
|
return css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
12975
12971
|
});
|
|
12976
|
-
var ContainerInner = styled.div(_templateObject14$
|
|
12972
|
+
var ContainerInner = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
12977
12973
|
var MainMenu = function MainMenu(_ref3) {
|
|
12978
12974
|
var content = _ref3.content,
|
|
12979
12975
|
_ref3$home = _ref3.home,
|
|
@@ -12999,11 +12995,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
12999
12995
|
var _useState = useState(0),
|
|
13000
12996
|
focusedContext = _useState[0],
|
|
13001
12997
|
setFocusedContext = _useState[1];
|
|
13002
|
-
var _useState2 = useState(true),
|
|
13003
|
-
loading = _useState2[0],
|
|
13004
|
-
setLoading = _useState2[1];
|
|
13005
12998
|
var location = useLocation();
|
|
13006
|
-
var checkedInItems = 0;
|
|
13007
12999
|
var autoMenuOpen = useCallback(function (e) {
|
|
13008
13000
|
if (e.pointerType === 'touch') {
|
|
13009
13001
|
return;
|
|
@@ -13028,12 +13020,6 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13028
13020
|
}
|
|
13029
13021
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13030
13022
|
}, [setFocusedContext, focusedContext]);
|
|
13031
|
-
var readyCallback = useCallback(function () {
|
|
13032
|
-
checkedInItems++;
|
|
13033
|
-
if (checkedInItems === content.items.length) {
|
|
13034
|
-
setLoading(false);
|
|
13035
|
-
}
|
|
13036
|
-
}, [checkedInItems, content]);
|
|
13037
13023
|
return React__default.createElement(PushContainer, {
|
|
13038
13024
|
isPinned: menuState.isMenuPinned
|
|
13039
13025
|
}, ReactDom.createPortal(React__default.createElement(Container$10, {
|
|
@@ -13062,9 +13048,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13062
13048
|
onClickCallback: setFocusedContextCb
|
|
13063
13049
|
}, {
|
|
13064
13050
|
item: item,
|
|
13065
|
-
|
|
13066
|
-
focusedContext: focusedContext,
|
|
13067
|
-
readyCallback: readyCallback
|
|
13051
|
+
focusedContext: focusedContext
|
|
13068
13052
|
}));
|
|
13069
13053
|
})), React__default.createElement(MenuFooter, null, supportUrl && React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
|
|
13070
13054
|
compact: true,
|
|
@@ -13177,7 +13161,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13177
13161
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13178
13162
|
};
|
|
13179
13163
|
|
|
13180
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$
|
|
13164
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$a;
|
|
13181
13165
|
var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
|
|
13182
13166
|
var DrawerBottom = styled.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
|
|
13183
13167
|
var DrawerHeader = styled.h2(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
|
|
@@ -13196,7 +13180,7 @@ var FooterMeta = styled.div(_templateObject12$f || (_templateObject12$f = _tagge
|
|
|
13196
13180
|
return icon !== '' ? '31px;' : '21px;';
|
|
13197
13181
|
});
|
|
13198
13182
|
var NavigationContainer$1 = styled.div(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
|
|
13199
|
-
var FooterText = styled.div(_templateObject14$
|
|
13183
|
+
var FooterText = styled.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
|
|
13200
13184
|
var icon = _ref3.icon;
|
|
13201
13185
|
return icon !== '' ? '136px;' : '164px;';
|
|
13202
13186
|
});
|
|
@@ -13734,14 +13718,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13734
13718
|
var content = _ref.content,
|
|
13735
13719
|
supportUrl = _ref.supportUrl,
|
|
13736
13720
|
closeId = _ref.closeId;
|
|
13737
|
-
var _useState = useState(
|
|
13738
|
-
|
|
13739
|
-
|
|
13740
|
-
var _useState2 = useState(0),
|
|
13741
|
-
focusedContext = _useState2[0],
|
|
13742
|
-
setFocusedContext = _useState2[1];
|
|
13721
|
+
var _useState = useState(0),
|
|
13722
|
+
focusedContext = _useState[0],
|
|
13723
|
+
setFocusedContext = _useState[1];
|
|
13743
13724
|
var location = useLocation();
|
|
13744
|
-
var checkedInItems = 0;
|
|
13745
13725
|
var _useContext = useContext(TabContext),
|
|
13746
13726
|
setSelected = _useContext.setSelected;
|
|
13747
13727
|
var setFocusedContextCb = useCallback(function (contextKey) {
|
|
@@ -13753,12 +13733,6 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13753
13733
|
}
|
|
13754
13734
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13755
13735
|
}, [closeId, content.items, focusedContext, setSelected]);
|
|
13756
|
-
var readyCallback = useCallback(function () {
|
|
13757
|
-
checkedInItems++;
|
|
13758
|
-
if (checkedInItems === content.items.length) {
|
|
13759
|
-
setLoading(false);
|
|
13760
|
-
}
|
|
13761
|
-
}, [checkedInItems, content.items.length]);
|
|
13762
13736
|
var handleCloseMenu = useCallback(function () {
|
|
13763
13737
|
setSelected(closeId);
|
|
13764
13738
|
}, [closeId, setSelected]);
|
|
@@ -13767,7 +13741,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13767
13741
|
key: key,
|
|
13768
13742
|
"data-key": key
|
|
13769
13743
|
}, React__default.createElement(NavigationItem, Object.assign({
|
|
13770
|
-
|
|
13744
|
+
mobileMenu: true,
|
|
13771
13745
|
topLevelPath: getTopLevelPath(location.pathname),
|
|
13772
13746
|
contextKey: key,
|
|
13773
13747
|
menuOpen: true,
|
|
@@ -13775,9 +13749,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13775
13749
|
onClickCallback: setFocusedContextCb
|
|
13776
13750
|
}, {
|
|
13777
13751
|
item: item,
|
|
13778
|
-
|
|
13779
|
-
focusedContext: focusedContext,
|
|
13780
|
-
readyCallback: readyCallback
|
|
13752
|
+
focusedContext: focusedContext
|
|
13781
13753
|
})));
|
|
13782
13754
|
}), supportUrl && React__default.createElement(ItemWrapper, null, React__default.createElement(ContextItem, {
|
|
13783
13755
|
compact: true,
|