Shared:Components: fix defaultProps

packages/shared/components/combobox/sub-components/ComboButton.tsx

@@ -49,25 +49,29 @@ import type { ComboButtonProps } from "../Combobox.types";
 
 const ComboButton = (props: ComboButtonProps) => {
   const {
-    noBorder,
     onClick,
-    isDisabled,
+
     innerContainer,
-    innerContainerClassName = "innerContainer",
+
     selectedOption,
     optionsLength = 0,
-    withOptions = true,
-    withAdvancedOptions = false,
-    isOpen,
-    scaled = false,
-    size,
+
     comboIcon,
     fillIcon,
-    modernView = false,
-    tabIndex,
-    isLoading,
+
     type,
     plusBadgeValue,
+    noBorder = false,
+    isDisabled = false,
+    withOptions = true,
+    withAdvancedOptions = false,
+    innerContainerClassName = "innerContainer",
+    isOpen = false,
+    size = ComboBoxSize.content,
+    scaled = false,
+    modernView = false,
+    tabIndex = -1,
+    isLoading = false,
   } = props;
 
   const defaultOption = selectedOption?.default;
@@ -174,18 +178,4 @@ const ComboButton = (props: ComboButtonProps) => {
   );
 };
 
-ComboButton.defaultProps = {
-  noBorder: false,
-  isDisabled: false,
-  withOptions: true,
-  withAdvancedOptions: false,
-  innerContainerClassName: "innerContainer",
-  isOpen: false,
-  size: ComboBoxSize.content,
-  scaled: false,
-  modernView: false,
-  tabIndex: -1,
-  isLoading: false,
-};
-
 export { ComboButton };

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

@@ -46,34 +46,43 @@ import { DropDownItemProps } from "./DropDownItem.types";
 
 const DropDownItem = (props: DropDownItemProps) => {
   const {
-    isSeparator,
-    isHeader,
     withHeaderArrow,
     headerArrowAction,
 
     icon,
     children,
-    disabled,
-    className,
 
-    fillIcon = true,
-    isSubMenu,
-    isActive,
-    withoutIcon,
-    noHover,
+    className,
 
     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"]);
   const theme = useTheme();
 
-  const { withToggle, checked, onClick, onClickSelectedItem, label, ...rest } =
-    props;
+  const {
+    withToggle,
+    checked,
+    onClick,
+    onClickSelectedItem,
+    label = "",
+    ...rest
+  } = props;
 
   const onClickAction = (
     e: React.MouseEvent | React.ChangeEvent<HTMLInputElement>,
@@ -183,20 +192,4 @@ const DropDownItem = (props: DropDownItemProps) => {
   );
 };
 
-DropDownItem.defaultProps = {
-  isSeparator: false,
-  isHeader: false,
-  tabIndex: -1,
-  label: "",
-  disabled: false,
-  noHover: false,
-  textOverflow: false,
-  fillIcon: true,
-  isSubMenu: false,
-  isActive: false,
-  withoutIcon: false,
-  height: 32,
-  heightTablet: 36,
-};
-
 export { DropDownItem };

packages/shared/components/drop-down/index.tsx

@@ -45,6 +45,12 @@ const DropDown = (props: DropDownProps) => {
     eventTypes,
     forceCloseClickOutside,
     withoutBackground,
+
+    showDisabledItems = false,
+    isDefaultMode = true,
+    fixedDirection = false,
+    offsetLeft = 0,
+    enableKeyboardEvents = true,
   } = props;
 
   const toggleDropDown = () => {
@@ -72,17 +78,17 @@ const DropDown = (props: DropDownProps) => {
           withoutBackground={withoutBackground}
         />
       ) : null}
-      <EnhancedComponent {...eventTypesProp} {...props} />
+      <EnhancedComponent
+        {...eventTypesProp}
+        showDisabledItems={showDisabledItems}
+        isDefaultMode={isDefaultMode}
+        fixedDirection={fixedDirection}
+        offsetLeft={offsetLeft}
+        enableKeyboardEvents={enableKeyboardEvents}
+        {...props}
+      />
     </>
   );
 };
-DropDown.defaultProps = {
-  withBackdrop: true,
-  showDisabledItems: false,
-  isDefaultMode: true,
-  fixedDirection: false,
-  offsetLeft: 0,
-  enableKeyboardEvents: true,
-};
 
 export { DropDown };

packages/shared/components/email-input/EmailInput.tsx

@@ -39,19 +39,33 @@ const TextInputWrapper = ({
   emailSettings,
   customValidate,
   ...props
-}: EmailInputProps & TextInputProps & { isValidEmail?: boolean }) => (
-  <StyledEmailInput {...props} data-testid="email-input" />
-);
+}: EmailInputProps & TextInputProps & { isValidEmail?: boolean }) => {
+  return <StyledEmailInput {...props} data-testid="email-input" />;
+};
 
 const EmailInput = ({
-  value,
   onValidateInput,
   customValidate,
-  emailSettings,
+
   onBlur,
   onChange,
-  hasError,
+
   isAutoFocussed,
+  autoComplete = "email",
+  className = "",
+  hasError = undefined,
+  id = "",
+  isDisabled = false,
+  isReadOnly = false,
+  maxLength = 255,
+  name = "",
+  placeholder = "",
+  scale = false,
+  size = InputSize.base,
+  title = "",
+  withBorder = true,
+  value = "",
+  emailSettings,
   ...rest
 }: EmailInputProps) => {
   const [inputValue, setInputValue] = React.useState(value);
@@ -65,7 +79,7 @@ const EmailInput = ({
         return customValidate(v);
       }
 
-      const emailObj = parseAddress(v, emailSettings);
+      const emailObj = parseAddress(v, emailSettings ?? new EmailSettings());
       const isValid = emailObj.isValid();
       const parsedErrors = emailObj.parseErrors;
       const errors = parsedErrors
@@ -124,6 +138,18 @@ const EmailInput = ({
   return (
     <TextInputWrapper
       {...rest}
+      className={className}
+      autoComplete={autoComplete}
+      id={id}
+      isDisabled={isDisabled}
+      isReadOnly={isReadOnly}
+      maxLength={maxLength}
+      name={name}
+      placeholder={placeholder}
+      scale={scale}
+      size={size}
+      title={title}
+      withBorder={withBorder}
       isAutoFocussed={isMobile && isIOS ? false : isAutoFocussed}
       hasError={isError}
       value={inputValue}
@@ -135,22 +161,4 @@ const EmailInput = ({
   );
 };
 
-EmailInput.defaultProps = {
-  autoComplete: "email",
-  className: "",
-  hasError: undefined,
-  id: "",
-  isDisabled: false,
-  isReadOnly: false,
-  maxLength: 255,
-  name: "",
-  placeholder: "",
-  scale: false,
-  size: InputSize.base,
-  title: "",
-  value: "",
-  withBorder: true,
-  emailSettings: new EmailSettings(),
-};
-
 export { EmailInput };

packages/shared/components/email-input/EmailInput.types.ts

@@ -72,4 +72,8 @@ export interface EmailInputProps {
   type: InputType;
   /** Used as HTML `tabindex` property */
   tabIndex?: number;
+
+  withBorder?: boolean;
+  maxLength?: number;
+  title?: string;
 }

packages/shared/components/help-button/HelpButton.tsx

@@ -38,9 +38,9 @@ import { HelpButtonProps } from "./HelpButton.types";
 const HelpButton = (props: HelpButtonProps) => {
   const {
     id,
-    className,
+    className = "icon-button",
     iconName,
-    size,
+    size = 12,
     color,
     dataTip,
     getContent,
@@ -65,7 +65,7 @@ const HelpButton = (props: HelpButtonProps) => {
         id={currentId}
         className={classNames([className], "help-icon") || "help-icon"}
         isClickable
-        iconName={iconName || InfoReactSvgUrl}
+        iconName={iconName ?? InfoReactSvgUrl}
         size={size}
         color={color}
         data-for={currentId}
@@ -102,11 +102,4 @@ const HelpButton = (props: HelpButtonProps) => {
   );
 };
 
-HelpButton.defaultProps = {
-  iconName: InfoReactSvgUrl,
-  //   place: "top",
-  className: "icon-button",
-  size: 12,
-};
-
 export { HelpButton };

packages/shared/components/link/Link.tsx

@@ -35,16 +35,34 @@ export { LinkType, LinkTarget };
 const Link = ({
   isTextOverflow,
   children,
-  noHover,
-  enableUserSelect,
+  className = "",
+  fontSize = "13px",
+  href = undefined,
+  isBold = false,
+  isHovered = false,
+  isSemitransparent = false,
+  noHover = false,
+  rel = "noopener noreferrer",
+  tabIndex = -1,
+  type = LinkType.page,
+  enableUserSelect = false,
   ...rest
 }: LinkProps) => {
   return (
     <StyledText
+      className={className}
+      fontSize={fontSize}
+      href={href}
+      isBold={isBold}
+      isHovered={isHovered}
+      isSemitransparent={isSemitransparent}
+      rel={rel}
+      tabIndex={tabIndex}
+      type={type}
       tag="a"
       isTextOverflow={isTextOverflow}
       noHover={noHover}
-      truncate={isTextOverflow || false}
+      truncate={isTextOverflow ?? false}
       enableUserSelect={enableUserSelect}
       data-testid="link"
       {...rest}
@@ -54,19 +72,4 @@ const Link = ({
   );
 };
 
-Link.defaultProps = {
-  className: "",
-  fontSize: "13px",
-  href: undefined,
-  isBold: false,
-  isHovered: false,
-  isSemitransparent: false,
-  isTextOverflow: false,
-  noHover: false,
-  rel: "noopener noreferrer",
-  tabIndex: -1,
-  type: LinkType.page,
-  enableUserSelect: false,
-};
-
 export { Link };