Shared:Components: fix defaultProps

packages/shared/components/box/Box.tsx

@@ -29,12 +29,15 @@ import { BoxProps } from "./Box.types";
 import { StyledBox } from "./Box.styled";
 
 function Box(props: BoxProps) {
-  const { as } = props;
-  return <StyledBox {...props} as={as || "div"} data-testid="box" />;
+  const { as, displayProp = "block" } = props;
+  return (
+    <StyledBox
+      {...props}
+      displayProp={displayProp}
+      as={as || "div"}
+      data-testid="box"
+    />
+  );
 }
 
-Box.defaultProps = {
-  displayProp: "block",
-};
-
 export { Box };

packages/shared/components/drop-down-item/DropDownItem.tsx

@@ -46,30 +46,27 @@ import { DropDownItemProps } from "./DropDownItem.types";
 
 const DropDownItem = (props: DropDownItemProps) => {
   const {
+    isSeparator = false,
+    isHeader = false,
     withHeaderArrow,
     headerArrowAction,
 
     icon,
     children,
-
+    disabled = false,
     className,
 
+    fillIcon = true,
+    isSubMenu = false,
+    isActive = false,
+    withoutIcon = false,
+    noHover = false,
+
     isSelected,
     isActiveDescendant,
     isBeta,
     additionalElement,
     setOpen,
-
-    isSeparator = false,
-    isHeader = false,
-
-    disabled = false,
-    noHover = false,
-
-    fillIcon = true,
-    isSubMenu = false,
-    isActive = false,
-    withoutIcon = false,
   } = props;
 
   const { t } = useTranslation(["Common"]);
@@ -81,6 +78,9 @@ const DropDownItem = (props: DropDownItemProps) => {
     onClick,
     onClickSelectedItem,
     label = "",
+    tabIndex = -1,
+    textOverflow = false,
+
     ...rest
   } = props;
 
@@ -106,6 +106,8 @@ const DropDownItem = (props: DropDownItemProps) => {
   return (
     <StyledDropdownItem
       {...rest}
+      tabIndex={tabIndex}
+      textOverflow={textOverflow}
       noHover={noHover}
       className={className}
       onClick={onClickAction}
@@ -192,4 +194,9 @@ const DropDownItem = (props: DropDownItemProps) => {
   );
 };
 
+DropDownItem.defaultProps = {
+  height: 32,
+  heightTablet: 36,
+};
+
 export { DropDownItem };

packages/shared/components/drop-down-item/DropDownItem.types.tsx

@@ -75,4 +75,6 @@ export interface DropDownItemProps {
   isBeta?: boolean;
   additionalElement?: React.ReactNode;
   setOpen?: (open: boolean) => void;
+  height?: number;
+  heightTablet?: number;
 }

packages/shared/components/language-combobox/LanguageCombobox.tsx

@@ -23,8 +23,7 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
-import React from "react";
-import { useMemo } from "react";
+import React, { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { mapCulturesToArray } from "../../utils/common";
@@ -58,7 +57,7 @@ const LanguageCombobox = (props: ComboboxProps) => {
     onSelectLanguage(culture);
   };
 
-  if (!currentCulture) return <></>;
+  if (!currentCulture) return null;
 
   return (
     <StyledComboBox

packages/shared/components/language-combobox/index.ts

@@ -23,4 +23,5 @@
 // All the Product's GUI elements, including illustrations and icon sets, as well as technical writing
 // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+
 export { LanguageCombobox } from "./LanguageCombobox";

packages/shared/components/modal-dialog/ModalDialog.tsx

@@ -65,23 +65,28 @@ const ModalDialog = ({
   children,
   visible,
   onClose,
-  isLarge,
-  zIndex,
+
   className,
   displayType = ModalDialogType.modal,
   displayTypeDetailed,
-  isLoading,
+
   autoMaxHeight,
   autoMaxWidth,
-  withBodyScroll,
-  withFooterBorder,
+
   isScrollLocked,
-  containerVisible,
+
   isDoubleFooterLine,
-  isCloseable,
+
   embedded,
   withForm,
   blur,
+  zIndex = 310,
+  isLarge = false,
+  isLoading = false,
+  isCloseable = true,
+  withBodyScroll = false,
+  withFooterBorder = false,
+  containerVisible = false,
 }: ModalDialogProps) => {
   const onCloseEvent = React.useCallback(() => {
     if (embedded) return;
@@ -174,16 +179,6 @@ const ModalDialog = ({
   );
 };
 
-ModalDialog.defaultProps = {
-  zIndex: 310,
-  isLarge: false,
-  isLoading: false,
-  isCloseable: true,
-  withBodyScroll: false,
-  withFooterBorder: false,
-  containerVisible: false,
-};
-
 ModalDialog.Header = Header;
 ModalDialog.Body = Body;
 ModalDialog.Footer = Footer;