Remove deprecated defaultProps

src/data/DateFormat/DateFormat.tsx

@@ -65,13 +65,13 @@ export interface DateFormatProps {
 }
 
 export const DateFormat: FC<DateFormatProps> = ({
-  allowToggle,
+  allowToggle = false,
   cacheKey,
   className,
-  format,
-  emptyMessage,
-  includeSeconds,
-  addSuffix,
+  format = 'MM/dd/yy hh:mm:ss a',
+  emptyMessage = 'N/A',
+  includeSeconds = false,
+  addSuffix = true,
   fromNow,
   date,
   theme: customTheme
@@ -163,11 +163,3 @@ export const DateFormat: FC<DateFormatProps> = ({
     </time>
   );
 };
-
-DateFormat.defaultProps = {
-  format: 'MM/dd/yy hh:mm:ss a',
-  includeSeconds: false,
-  allowToggle: false,
-  addSuffix: true,
-  emptyMessage: 'N/A'
-};

src/data/Duration/Duration.tsx

@@ -13,10 +13,6 @@ export interface DurationProps {
   emptyValue?: string;
 }
 
-export const Duration: FC<DurationProps> = ({ value, emptyValue }) => (
+export const Duration: FC<DurationProps> = ({ value, emptyValue = 'N/A' }) => (
   <>{formatDuration(value, emptyValue)}</>
 );
-
-Duration.defaultProps = {
-  emptyValue: 'N/A'
-};

src/data/Ellipsis/Ellipsis.tsx

@@ -44,9 +44,9 @@ export const Ellipsis: FC<EllipsisProps> = ({
   value,
   className,
   title,
-  removeLinebreaks,
-  expandable,
-  limit,
+  removeLinebreaks = true,
+  expandable = true,
+  limit = 256,
   theme: customTheme
 }) => {
   const [expanded, setExpanded] = useState<boolean>(false);
@@ -85,9 +85,3 @@ export const Ellipsis: FC<EllipsisProps> = ({
     </span>
   );
 };
-
-Ellipsis.defaultProps = {
-  removeLinebreaks: true,
-  expandable: true,
-  limit: 256
-};

src/data/InfinityList/InfinityList.tsx

@@ -15,8 +15,8 @@ export interface InfinityListProps extends Omit<InfinityListInputs, 'items'> {
 
 export const InfinityList: FC<InfinityListProps> = ({
   children,
-  size,
-  threshold,
+  size = 10,
+  threshold = 3,
   nextSize,
   buttonClassName
 }) => {
@@ -47,8 +47,3 @@ export const InfinityList: FC<InfinityListProps> = ({
     </>
   );
 };
-
-InfinityList.defaultProps = {
-  size: 10,
-  threshold: 3
-};

src/data/Pager/Pager.tsx

@@ -92,12 +92,12 @@ export const Pager: FC<PagerProps> = ({
   page,
   size,
   total,
-  startArrow,
-  endArrow,
-  previousArrow,
-  nextArrow,
+  startArrow = <StartArrow />,
+  endArrow = <EndArrow />,
+  previousArrow = <PreviousArrow />,
+  nextArrow = <NextArrow />,
   onPageChange,
-  displayMode,
+  displayMode = 'pages',
   theme: customTheme
 }) => {
   const pageCount = Math.ceil(total / size);
@@ -229,11 +229,3 @@ export const Pager: FC<PagerProps> = ({
     </div>
   );
 };
-
-Pager.defaultProps = {
-  previousArrow: <PreviousArrow />,
-  nextArrow: <NextArrow />,
-  startArrow: <StartArrow />,
-  endArrow: <EndArrow />,
-  displayMode: 'pages'
-};

src/data/Redact/Redact.tsx

@@ -42,11 +42,11 @@ export interface RedactProps {
 }
 
 export const Redact: FC<RedactProps> = ({
-  allowToggle,
-  compactLength,
-  tooltipText,
+  allowToggle = true,
+  compactLength = 8,
+  tooltipText = 'Click to toggle sensitive content',
   className,
-  character,
+  character = '*',
   value,
   theme: customTheme
 }) => {
@@ -79,10 +79,3 @@ export const Redact: FC<RedactProps> = ({
     </span>
   );
 };
-
-Redact.defaultProps = {
-  allowToggle: true,
-  character: '*',
-  compactLength: 8,
-  tooltipText: 'Click to toggle sensitive content'
-};

src/data/Sort/Sort.tsx

@@ -58,7 +58,7 @@ export const Sort: FC<SortProps> = ({
   disabled,
   direction,
   iconClassName,
-  icon: Icon,
+  icon: Icon = DownArrowIcon,
   neutralIcon: NeutralIcon,
   neutralIconClassName,
   children,
@@ -142,7 +142,3 @@ export const Sort: FC<SortProps> = ({
     </div>
   );
 };
-
-Sort.defaultProps = {
-  icon: DownArrowIcon
-};

src/elements/Avatar/Avatar.tsx

@@ -57,9 +57,9 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
       name,
       src,
       color,
-      size,
-      variant,
-      rounded,
+      size = 24,
+      variant = 'filled',
+      rounded = true,
       className,
       colorOptions,
       theme: customTheme,
@@ -108,9 +108,3 @@ export const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(
     );
   }
 );
-
-Avatar.defaultProps = {
-  size: 24,
-  rounded: true,
-  variant: 'filled'
-};

src/elements/AvatarGroup/AvatarGroup.tsx

@@ -31,7 +31,7 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     {
       children,
       className,
-      size,
+      size = 10,
       theme: customTheme,
       ...rest
     }: AvatarGroupProps,
@@ -61,7 +61,3 @@ export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
     );
   }
 );
-
-AvatarGroup.defaultProps = {
-  size: 10
-};

src/elements/Badge/Badge.tsx

@@ -38,12 +38,12 @@ export const Badge: FC<BadgeProps & BadgeRef> = forwardRef(
   (
     {
       children,
-      color,
+      color = 'default',
       className,
       disableMargins,
       content,
       hidden,
-      placement,
+      placement = 'top-end',
       theme: customTheme,
       ...rest
     }: BadgeProps,
@@ -81,8 +81,3 @@ export const Badge: FC<BadgeProps & BadgeRef> = forwardRef(
     );
   }
 );
-
-Badge.defaultProps = {
-  color: 'default',
-  placement: 'top-end'
-};

src/elements/Button/Button.tsx

@@ -68,11 +68,11 @@ export interface ButtonRef {
 export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
   (
     {
-      color,
-      variant,
+      color = 'default',
+      variant = 'filled',
       children,
       fullWidth,
-      size,
+      size = 'medium',
       disableAnimation,
       className,
       disableMargins,
@@ -81,6 +81,7 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
       startAdornment,
       endAdornment,
       theme: customTheme,
+      type = 'button',
       ...rest
     }: ButtonProps,
     ref
@@ -95,6 +96,7 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
     return (
       <motion.button
         {...rest}
+        type={type}
         disabled={disabled}
         ref={ref}
         whileTap={{ scale: disabled || disableAnimation ? 1 : 0.9 }}
@@ -140,10 +142,3 @@ export const Button: FC<ButtonProps & ButtonRef> = forwardRef(
     );
   }
 );
-
-Button.defaultProps = {
-  color: 'default',
-  variant: 'filled',
-  size: 'medium',
-  type: 'button'
-};

src/elements/Chip/Chip.tsx

@@ -67,7 +67,7 @@ export const Chip: FC<ChipProps & ChipRef> = forwardRef(
       children,
       color = 'default',
       variant = 'filled',
-      size,
+      size = 'medium',
       selected,
       disabled,
       className,
@@ -135,9 +135,3 @@ export const Chip: FC<ChipProps & ChipRef> = forwardRef(
     );
   }
 );
-
-Chip.defaultProps = {
-  color: 'default',
-  size: 'medium',
-  variant: 'filled'
-};

src/elements/Chip/DeletableChip.tsx

@@ -28,11 +28,12 @@ export const DeletableChip: FC<DeletableChipProps & ChipRef> = forwardRef(
     {
       children,
       disabled,
-      deleteIcon,
+      deleteIcon = <CloseIcon height={12} width={12} />,
       onDelete,
-      size,
-      color,
+      size = 'medium',
+      color = 'default',
       theme: customTheme,
+      variant = 'filled',
       ...rest
     },
     ref
@@ -67,17 +68,11 @@ export const DeletableChip: FC<DeletableChipProps & ChipRef> = forwardRef(
             {deleteIcon}
           </Button>
         }
+        variant={variant}
         {...rest}
       >
         {children}
       </Chip>
     );
   }
 );
-
-DeletableChip.defaultProps = {
-  color: 'default',
-  size: 'medium',
-  variant: 'filled',
-  deleteIcon: <CloseIcon height={12} width={12} />
-};

src/elements/CommandPalette/CommandPalette.tsx

@@ -77,7 +77,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
   placeholder,
   children,
   inputIcon,
-  autoFocus,
+  autoFocus = true,
   emptyMessage,
   onHotkey,
   onSelectedIndexChange,
@@ -149,7 +149,3 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
     </Card>
   );
 };
-
-CommandPalette.defaultProps = {
-  autoFocus: true
-};

src/elements/CommandPalette/CommandPaletteInput/CommandPaletteInput.tsx

@@ -11,7 +11,7 @@ import { SearchIcon } from './SearchIcon';
 import { HotkeyIem } from '@/elements/CommandPalette/useFlattenedTree';
 import { CommandPaletteTheme } from '@/elements/CommandPalette/CommandPaletteTheme';
 import { useComponentTheme } from '@/utils';
-import keys, { Handler } from '@reaviz/ctrl-keys';
+import keys, { Handler } from 'ctrl-keys';
 
 export interface CommandPaletteInputProps {
   /**
@@ -68,7 +68,7 @@ export interface CommandPaletteInputProps {
 export const CommandPaletteInput: FC<CommandPaletteInputProps> = ({
   value,
   autoFocus,
-  icon,
+  icon = <SearchIcon />,
   hotkeys,
   placeholder,
   onHotkey,
@@ -133,7 +133,3 @@ export const CommandPaletteInput: FC<CommandPaletteInputProps> = ({
     </div>
   );
 };
-
-CommandPaletteInput.defaultProps = {
-  icon: <SearchIcon />
-};

src/elements/Loader/DotsLoader.tsx

@@ -13,8 +13,8 @@ export interface DotsLoaderProps {
 
 export const DotsLoader: FC<DotsLoaderProps> = ({
   className,
-  size,
-  speed,
+  size = 'medium',
+  speed = 0.2,
   theme: customTheme
 }) => {
   const theme: DotsLoaderTheme = useComponentTheme('dotsLoader', customTheme);
@@ -42,8 +42,3 @@ export const DotsLoader: FC<DotsLoaderProps> = ({
     </motion.div>
   );
 };
-
-DotsLoader.defaultProps = {
-  speed: 0.2,
-  size: 'medium'
-};