scorer-ui-kit 2.6.1 → 2.6.3

package/dist/Global/atoms/NavigationItem.d.ts

@@ -4,12 +4,10 @@ interface IProps {
     item: IMenuItemTop;
     contextKey: number;
     submenuOpen: boolean;
-    loading: boolean;
     menuOpen?: boolean;
     topLevelPath: string;
-    minHeight?: number;
+    mobileMenu?: boolean;
     onClickCallback?: (...args: any[]) => void;
-    readyCallback?: (...args: any[]) => void;
 }
 declare const NavigationItem: React.FC<IProps>;
 export default NavigationItem;

package/dist/Tables/index.d.ts

@@ -48,6 +48,7 @@ export interface IRowHeader {
 }
 export interface IRowData {
     _checked?: boolean;
+    checkboxDisabled?: boolean;
     id?: number | string;
     header?: IRowHeader;
     columns: ICellData[];

package/dist/Tables/molecules/TypeTableHeader.d.ts

@@ -6,8 +6,7 @@ interface ITableHeader {
     hasThumbnail: boolean;
     hasTypeIcon: boolean;
     allChecked: boolean;
-    isEmptyTable: boolean;
-    isLoading: boolean;
+    disableAllChecked: boolean;
     hasHeaderGroups: boolean;
     columnConfig: ITableColumnConfig[];
     defaultAscending: boolean;

package/dist/index.js

@@ -9520,6 +9520,7 @@ var TypeTableRow = function TypeTableRow(_ref2) {
     hideDivider: true
   }, React__default.createElement(Checkbox, {
     checked: rowData._checked,
+    disabled: rowData.checkboxDisabled,
     onChangeCallback: wrappedSelectCallback
   })) : null, hasStatus ? React__default.createElement(TypeTableCell, {
     hideDivider: true
@@ -9670,8 +9671,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
     hasThumbnail = _ref9.hasThumbnail,
     hasTypeIcon = _ref9.hasTypeIcon,
     allChecked = _ref9.allChecked,
-    isEmptyTable = _ref9.isEmptyTable,
-    isLoading = _ref9.isLoading,
+    disableAllChecked = _ref9.disableAllChecked,
     hasHeaderGroups = _ref9.hasHeaderGroups,
     columnConfig = _ref9.columnConfig,
     defaultAscending = _ref9.defaultAscending,
@@ -9718,7 +9718,7 @@ var TypeTableHeader = function TypeTableHeader(_ref9) {
     fixedWidth: 30
   }, React__default.createElement(Checkbox, {
     checked: allChecked,
-    disabled: isEmptyTable || isLoading,
+    disabled: disableAllChecked,
     onChangeCallback: toggleAllCallbackWrapper
   })) : null, hasStatus ? React__default.createElement(HeaderItem, {
     headerStyle: 'header',
@@ -9774,47 +9774,60 @@ var isChecked = function isChecked(_ref2) {
     _checked = _ref2$_checked === void 0 ? false : _ref2$_checked;
   return _checked === true;
 };
-var TypeTable = function TypeTable(_ref3) {
-  var columnConfig = _ref3.columnConfig,
-    selectable = _ref3.selectable,
-    _ref3$rows = _ref3.rows,
-    rows = _ref3$rows === void 0 ? [] : _ref3$rows,
-    closeText = _ref3.closeText,
-    _ref3$hasStatus = _ref3.hasStatus,
-    hasStatus = _ref3$hasStatus === void 0 ? false : _ref3$hasStatus,
-    _ref3$hasThumbnail = _ref3.hasThumbnail,
-    hasThumbnail = _ref3$hasThumbnail === void 0 ? false : _ref3$hasThumbnail,
-    _ref3$hasTypeIcon = _ref3.hasTypeIcon,
-    hasTypeIcon = _ref3$hasTypeIcon === void 0 ? false : _ref3$hasTypeIcon,
-    _ref3$defaultAscendin = _ref3.defaultAscending,
-    defaultAscending = _ref3$defaultAscendin === void 0 ? false : _ref3$defaultAscendin,
-    _ref3$isLoading = _ref3.isLoading,
-    isLoading = _ref3$isLoading === void 0 ? false : _ref3$isLoading,
-    _ref3$loadingText = _ref3.loadingText,
-    loadingText = _ref3$loadingText === void 0 ? 'Loading Data...' : _ref3$loadingText,
-    _ref3$emptyTableTitle = _ref3.emptyTableTitle,
-    emptyTableTitle = _ref3$emptyTableTitle === void 0 ? '' : _ref3$emptyTableTitle,
-    _ref3$emptyTableText = _ref3.emptyTableText,
-    emptyTableText = _ref3$emptyTableText === void 0 ? '' : _ref3$emptyTableText,
-    _ref3$hasHeaderGroups = _ref3.hasHeaderGroups,
-    hasHeaderGroups = _ref3$hasHeaderGroups === void 0 ? false : _ref3$hasHeaderGroups,
-    _ref3$sortCallback = _ref3.sortCallback,
-    sortCallback = _ref3$sortCallback === void 0 ? function () {} : _ref3$sortCallback,
-    _ref3$selectCallback = _ref3.selectCallback,
-    selectCallback = _ref3$selectCallback === void 0 ? function () {} : _ref3$selectCallback,
-    _ref3$toggleAllCallba = _ref3.toggleAllCallback,
-    toggleAllCallback = _ref3$toggleAllCallba === void 0 ? function () {} : _ref3$toggleAllCallba;
+var isCheckBoxDisabled = function isCheckBoxDisabled(_ref3) {
+  var _ref3$checkboxDisable = _ref3.checkboxDisabled,
+    checkboxDisabled = _ref3$checkboxDisable === void 0 ? false : _ref3$checkboxDisable;
+  return checkboxDisabled === true;
+};
+var TypeTable = function TypeTable(_ref4) {
+  var columnConfig = _ref4.columnConfig,
+    selectable = _ref4.selectable,
+    _ref4$rows = _ref4.rows,
+    rows = _ref4$rows === void 0 ? [] : _ref4$rows,
+    closeText = _ref4.closeText,
+    _ref4$hasStatus = _ref4.hasStatus,
+    hasStatus = _ref4$hasStatus === void 0 ? false : _ref4$hasStatus,
+    _ref4$hasThumbnail = _ref4.hasThumbnail,
+    hasThumbnail = _ref4$hasThumbnail === void 0 ? false : _ref4$hasThumbnail,
+    _ref4$hasTypeIcon = _ref4.hasTypeIcon,
+    hasTypeIcon = _ref4$hasTypeIcon === void 0 ? false : _ref4$hasTypeIcon,
+    _ref4$defaultAscendin = _ref4.defaultAscending,
+    defaultAscending = _ref4$defaultAscendin === void 0 ? false : _ref4$defaultAscendin,
+    _ref4$isLoading = _ref4.isLoading,
+    isLoading = _ref4$isLoading === void 0 ? false : _ref4$isLoading,
+    _ref4$loadingText = _ref4.loadingText,
+    loadingText = _ref4$loadingText === void 0 ? 'Loading Data...' : _ref4$loadingText,
+    _ref4$emptyTableTitle = _ref4.emptyTableTitle,
+    emptyTableTitle = _ref4$emptyTableTitle === void 0 ? '' : _ref4$emptyTableTitle,
+    _ref4$emptyTableText = _ref4.emptyTableText,
+    emptyTableText = _ref4$emptyTableText === void 0 ? '' : _ref4$emptyTableText,
+    _ref4$hasHeaderGroups = _ref4.hasHeaderGroups,
+    hasHeaderGroups = _ref4$hasHeaderGroups === void 0 ? false : _ref4$hasHeaderGroups,
+    _ref4$sortCallback = _ref4.sortCallback,
+    sortCallback = _ref4$sortCallback === void 0 ? function () {} : _ref4$sortCallback,
+    _ref4$selectCallback = _ref4.selectCallback,
+    selectCallback = _ref4$selectCallback === void 0 ? function () {} : _ref4$selectCallback,
+    _ref4$toggleAllCallba = _ref4.toggleAllCallback,
+    toggleAllCallback = _ref4$toggleAllCallba === void 0 ? function () {} : _ref4$toggleAllCallba;
   var _useState = React.useState(false),
     allChecked = _useState[0],
     setAllChecked = _useState[1];
+  var _useState2 = React.useState(false),
+    disableAllChecked = _useState2[0],
+    setDisableAllChecked = _useState2[1];
   var isEmptyTable = rows.length === 1 && rows[0].columns.length === 0 && !isLoading;
   React.useEffect(function () {
     var areAllChecked = false;
+    var disableCheckAll = false;
     if (rows.every(isChecked) && rows.length > 0 && !isEmptyTable) {
       areAllChecked = true;
     }
+    if (rows.some(isCheckBoxDisabled) || isEmptyTable || isLoading) {
+      disableCheckAll = true;
+    }
     setAllChecked(areAllChecked);
-  }, [isEmptyTable, rows]);
+    setDisableAllChecked(disableCheckAll);
+  }, [isEmptyTable, isLoading, rows]);
   return React__default.createElement(Container$L, null, React__default.createElement(TableContainer, null, React__default.createElement(TypeTableHeader, Object.assign({}, {
     selectable: selectable,
     hasStatus: hasStatus,
@@ -9822,8 +9835,7 @@ var TypeTable = function TypeTable(_ref3) {
     hasTypeIcon: hasTypeIcon,
     defaultAscending: defaultAscending,
     allChecked: allChecked,
-    isEmptyTable: isEmptyTable,
-    isLoading: isLoading,
+    disableAllChecked: disableAllChecked,
     hasHeaderGroups: hasHeaderGroups,
     columnConfig: columnConfig,
     toggleAllCallback: toggleAllCallback,
@@ -12836,36 +12848,32 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
 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;
 var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n  display: block;\n  position: relative;\n  margin-left: 40px;\n  padding: 0;\n\n"])));
 var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 40px;\n  margin-left: 40px;\n"])));
-var SubmenuItemTitle = styled__default.span(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-family: var(--font-ui);\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n"])));
-var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
-var ExternalIconWrapper$1 = styled__default.div(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
-var SubmenuItemAnchor = styled__default.a(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
-var SubmenuItem = styled__default.li(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
+var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n  overflow: hidden;\n"])));
+var SubmenuItemTitle = styled__default.span(_templateObject4$15 || (_templateObject4$15 = _taggedTemplateLiteralLoose(["\n  display: block;\n  font-family: var(--font-ui);\n  font-size: 14px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.35px;\n  color: var(--grey-11);\n"])));
+var SubmenuItemLink = styled__default(reactRouterDom.Link)(_templateObject5$$ || (_templateObject5$$ = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: block;\n"])), resetButtonStyles);
+var ExternalIconWrapper$1 = styled__default.div(_templateObject6$M || (_templateObject6$M = _taggedTemplateLiteralLoose(["\n  margin-left: 15px;\n"])));
+var SubmenuItemAnchor = styled__default.a(_templateObject7$I || (_templateObject7$I = _taggedTemplateLiteralLoose(["\n  ", ";\n  display: flex;\n  align-items: center;\n"])), resetButtonStyles);
+var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n  display: block;\n  height: 30px;\n  padding-left: 40px;\n  position: relative;\n\n  &::after {\n    display: block;\n    content: '';\n    height: 1px;\n    width: 14px;\n    position: absolute;\n    left: 0;\n    top: 10px;\n    background: var(--dividing-line);\n  }\n\n  ", ", ", "{\n    font-family: var(--font-ui);\n    font-size: 14px;\n    font-weight: 400;\n    text-decoration: none;\n    color: var(--grey-11);\n\n    ", ";\n\n  }\n"])), SubmenuItemLink, SubmenuItemAnchor, function (_ref) {
   var isActive = _ref.isActive;
-  return styled.css(_templateObject8$z || (_templateObject8$z = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
+  return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n    \n      &:hover {\n        color: var(--grey-12);\n      }\n\n      ", "\n\n    "])), isActive && styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n        &, &:hover {\n          color: var(--grey-11);\n          font-weight: 600;\n        }\n      "]))));
 });
-var SubmenuContainer = styled__default.div(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n  position: relative;\n  overflow: hidden;\n\n  transition:\n    max-height var(--speed-normal) var(--easing-primary-in),\n    opacity var(--speed-fast) var(--easing-primary-in);\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"])));
-var ContextContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n  min-height: ", ";\n  width: inherit;\n\n  ", "{\n    max-height: 0;\n    opacity: 0;\n  }\n  ", ";\n\n  ", ";\n\n"])), function (_ref2) {
-  var minHeight = _ref2.minHeight;
-  return minHeight ? minHeight + "px" : "70px";
+var SubmenuContainer = styled__default.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"])));
+var ContextContainer = styled__default.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) {
+  var mobileMenu = _ref2.mobileMenu;
+  return mobileMenu ? '30px' : '70px';
 }, SubmenuContainer, function (_ref3) {
-  var open = _ref3.open,
-    maxHeight = _ref3.maxHeight;
-  return open && styled.css(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n    ", "{\n      transition:\n        max-height var(--speed-normal) var(--easing-primary-in),\n        opacity var(--speed-fast) var(--easing-primary-in);\n      max-height: ", "px !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer, maxHeight);
-}, function (_ref4) {
-  var loading = _ref4.loading;
-  return loading === 'true' && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n    ", "{\n      max-height: none !important;\n      opacity: 1;\n    }\n  "])), SubmenuContainer);
-});
-var NavigationItem = function NavigationItem(_ref5) {
-  var item = _ref5.item,
-    menuOpen = _ref5.menuOpen,
-    submenuOpen = _ref5.submenuOpen,
-    contextKey = _ref5.contextKey,
-    loading = _ref5.loading,
-    topLevelPath = _ref5.topLevelPath,
-    minHeight = _ref5.minHeight,
-    onClickCallback = _ref5.onClickCallback,
-    readyCallback = _ref5.readyCallback;
+  var open = _ref3.open;
+  return open && styled.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);
+});
+var NavigationItem = function NavigationItem(_ref4) {
+  var item = _ref4.item,
+    menuOpen = _ref4.menuOpen,
+    submenuOpen = _ref4.submenuOpen,
+    contextKey = _ref4.contextKey,
+    topLevelPath = _ref4.topLevelPath,
+    _ref4$mobileMenu = _ref4.mobileMenu,
+    mobileMenu = _ref4$mobileMenu === void 0 ? false : _ref4$mobileMenu,
+    onClickCallback = _ref4.onClickCallback;
   var icon = item.icon,
     title = item.title,
     href = item.href,
@@ -12873,25 +12881,13 @@ var NavigationItem = function NavigationItem(_ref5) {
     isExternalLink = item.isExternalLink;
   var isActive = topLevelPath === href;
   var refSubmenu = React.useRef(null);
-  var _useState = React.useState(0),
-    submenuHeight = _useState[0],
-    setSubmenuHeight = _useState[1];
   var submenus = generateSubmenus(submenu, onClickCallback) || [];
   var hasSubmenu = submenus.length > 0;
-  React.useEffect(function () {
-    if (refSubmenu && refSubmenu.current && refSubmenu.current.clientHeight !== 0) {
-      setSubmenuHeight(refSubmenu.current.clientHeight);
-    }
-    if (readyCallback) {
-      readyCallback(contextKey);
-    }
-  }, [refSubmenu, setSubmenuHeight, readyCallback, contextKey]);
-  return React__default.createElement(ContextContainer, {
-    open: submenuOpen,
-    loading: loading ? 'true' : 'false',
-    maxHeight: submenuHeight,
-    minHeight: minHeight
-  }, React__default.createElement(ContextItem, Object.assign({}, {
+  return React__default.createElement(ContextContainer, Object.assign({
+    open: submenuOpen
+  }, {
+    mobileMenu: mobileMenu
+  }), React__default.createElement(ContextItem, Object.assign({}, {
     title: title,
     href: href,
     isActive: isActive,
@@ -12904,7 +12900,7 @@ var NavigationItem = function NavigationItem(_ref5) {
     contextKey: contextKey
   })), hasSubmenu ? React__default.createElement(SubmenuContainer, {
     ref: refSubmenu
-  }, submenus) : null);
+  }, React__default.createElement(SubmenuContainerInner, null, submenus)) : null);
 };
 var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
   if (!submenu) {
@@ -13002,11 +12998,7 @@ var MainMenu = function MainMenu(_ref3) {
   var _useState = React.useState(0),
     focusedContext = _useState[0],
     setFocusedContext = _useState[1];
-  var _useState2 = React.useState(true),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
   var location = reactRouterDom.useLocation();
-  var checkedInItems = 0;
   var autoMenuOpen = React.useCallback(function (e) {
     if (e.pointerType === 'touch') {
       return;
@@ -13031,12 +13023,6 @@ var MainMenu = function MainMenu(_ref3) {
     }
     setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
   }, [setFocusedContext, focusedContext]);
-  var readyCallback = React.useCallback(function () {
-    checkedInItems++;
-    if (checkedInItems === content.items.length) {
-      setLoading(false);
-    }
-  }, [checkedInItems, content]);
   return React__default.createElement(PushContainer, {
     isPinned: menuState.isMenuPinned
   }, ReactDom.createPortal(React__default.createElement(Container$10, {
@@ -13065,9 +13051,7 @@ var MainMenu = function MainMenu(_ref3) {
       onClickCallback: setFocusedContextCb
     }, {
       item: item,
-      loading: loading,
-      focusedContext: focusedContext,
-      readyCallback: readyCallback
+      focusedContext: focusedContext
     }));
   })), React__default.createElement(MenuFooter, null, supportUrl && React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
     compact: true,
@@ -13737,14 +13721,10 @@ var MobileMenu = function MobileMenu(_ref) {
   var content = _ref.content,
     supportUrl = _ref.supportUrl,
     closeId = _ref.closeId;
-  var _useState = React.useState(true),
-    loading = _useState[0],
-    setLoading = _useState[1];
-  var _useState2 = React.useState(0),
-    focusedContext = _useState2[0],
-    setFocusedContext = _useState2[1];
+  var _useState = React.useState(0),
+    focusedContext = _useState[0],
+    setFocusedContext = _useState[1];
   var location = reactRouterDom.useLocation();
-  var checkedInItems = 0;
   var _useContext = React.useContext(TabContext),
     setSelected = _useContext.setSelected;
   var setFocusedContextCb = React.useCallback(function (contextKey) {
@@ -13756,12 +13736,6 @@ var MobileMenu = function MobileMenu(_ref) {
     }
     setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
   }, [closeId, content.items, focusedContext, setSelected]);
-  var readyCallback = React.useCallback(function () {
-    checkedInItems++;
-    if (checkedInItems === content.items.length) {
-      setLoading(false);
-    }
-  }, [checkedInItems, content.items.length]);
   var handleCloseMenu = React.useCallback(function () {
     setSelected(closeId);
   }, [closeId, setSelected]);
@@ -13770,7 +13744,7 @@ var MobileMenu = function MobileMenu(_ref) {
       key: key,
       "data-key": key
     }, React__default.createElement(NavigationItem, Object.assign({
-      minHeight: 30,
+      mobileMenu: true,
       topLevelPath: getTopLevelPath(location.pathname),
       contextKey: key,
       menuOpen: true,
@@ -13778,9 +13752,7 @@ var MobileMenu = function MobileMenu(_ref) {
       onClickCallback: setFocusedContextCb
     }, {
       item: item,
-      loading: loading,
-      focusedContext: focusedContext,
-      readyCallback: readyCallback
+      focusedContext: focusedContext
     })));
   }), supportUrl && React__default.createElement(ItemWrapper, null, React__default.createElement(ContextItem, {
     compact: true,