chore(html): resolve defaultProps deprecations

Author: zhpenkov

packages/html/src/action-buttons/action-buttons.spec.tsx

@@ -11,7 +11,7 @@ export type KendoActionButtonsProps = {
     orientation?: 'horizontal' | 'vertical';
 };
 
-const defaultProps = {
+const defaultOptions = {
     alignment: 'start',
     orientation: 'horizontal'
 };
@@ -21,8 +21,8 @@ export const ActionButtons = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        alignment = defaultProps.alignment,
-        orientation = defaultProps.orientation,
+        alignment = defaultOptions.alignment,
+        orientation = defaultOptions.orientation,
         ...other
     } = props;
 
@@ -45,6 +45,6 @@ export const ActionButtons = (
 ActionButtons.states = states;
 ActionButtons.options = options;
 ActionButtons.className = ACTIONBUTTONS_CLASSNAME;
-ActionButtons.defaultProps = defaultProps;
+ActionButtons.defaultOptions = defaultOptions;
 
 export default ActionButtons;

packages/html/src/action-sheet/action-sheet.spec.tsx

@@ -20,7 +20,7 @@ export type KendoActionSheetProps = {
     side?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-const defaultProps = {
+const defaultOptions = {
     side: 'bottom',
     fullscreen: false,
     adaptive: false,
@@ -32,15 +32,15 @@ export const ActionSheet = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
+        side = defaultOptions.side,
+        fullscreen = defaultOptions.fullscreen,
+        adaptive = defaultOptions.adaptive,
+        overlay = defaultOptions.overlay,
         children,
         title,
         header,
         footer,
         actions,
-        side = defaultProps.side,
-        fullscreen = defaultProps.fullscreen,
-        adaptive = defaultProps.adaptive,
-        overlay = defaultProps.overlay,
         ...other
     } = props;
 
@@ -115,6 +115,6 @@ export const ActionSheet = (
 ActionSheet.states = states;
 ActionSheet.options = options;
 ActionSheet.className = ACTIONSHEET_CLASSNAME;
-ActionSheet.defaultProps = defaultProps;
+ActionSheet.defaultOptions = defaultOptions;
 
 export default ActionSheet;

packages/html/src/animation-container/animation-container.spec.tsx

@@ -7,15 +7,15 @@ const states = [];
 const options = {};
 
 export type KendoAnimationContainerProps = {
-    positionMode: "absolute" | "fixed";
+    positionMode?: "absolute" | "fixed";
     offset?: {
         top: number | string;
         left: number | string;
     };
     animationStyle?: React.CSSProperties;
 };
 
-const defaultProps = {
+const defaultOptions = {
     positionMode: "absolute"
 };
 
@@ -25,7 +25,7 @@ export const AnimationContainer = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        positionMode,
+        positionMode = defaultOptions.positionMode,
         animationStyle,
         offset,
         ...other
@@ -54,6 +54,6 @@ export const AnimationContainer = (
 AnimationContainer.states = states;
 AnimationContainer.options = options;
 AnimationContainer.className = ANIMATION_CONTAINER_CLASSNAME;
-AnimationContainer.defaultProps = defaultProps;
+AnimationContainer.defaultOptions = defaultOptions;
 
 export default AnimationContainer;

packages/html/src/appbar/appbar.spec.tsx

@@ -20,7 +20,7 @@ const options = {
         ThemeColor.inverse
     ],
 };
-const defaultProps = {};
+const defaultOptions = {};
 
 export type KendoAppbarOptions = {
   themeColor?: (typeof options.themeColor)[number] | null;
@@ -65,6 +65,6 @@ export const Appbar = (
 Appbar.states = states;
 Appbar.options = options;
 Appbar.className = APPBAR_CLASSNAME;
-Appbar.defaultProps = defaultProps;
+Appbar.defaultOptions = defaultOptions;
 
 export default Appbar;

packages/html/src/autocomplete/autocomplete.spec.tsx

@@ -31,12 +31,6 @@ const options = {
     rounded: [ Roundness.small, Roundness.medium, Roundness.large, Roundness.full ],
     fillMode: [ FillMode.solid, FillMode.flat, FillMode.outline ],
 };
-const defaultProps = {
-    size: Input.defaultProps.size,
-    rounded: Input.defaultProps.rounded,
-    fillMode: Input.defaultProps.fillMode,
-    separators: true
-};
 
 export type KendoAutocompleteOptions = {
     size?: (typeof options.size)[number] | null;
@@ -58,20 +52,27 @@ export type KendoAutocompleteProps = KendoAutocompleteOptions & {
 
 export type KendoAutocompleteState = { [K in (typeof states)[number]]?: boolean };
 
+const defaultOptions = {
+    size: Input.defaultOptions.size,
+    rounded: Input.defaultOptions.rounded,
+    fillMode: Input.defaultOptions.fillMode,
+    separators: true
+};
+
 export const Autocomplete = (
     props: KendoAutocompleteProps &
         KendoAutocompleteState &
         React.HTMLAttributes<HTMLSpanElement>
 ) => {
     const {
+        size = defaultOptions.size,
+        rounded = defaultOptions.rounded,
+        fillMode = defaultOptions.fillMode,
+        separators = defaultOptions.separators,
         prefix,
         suffix,
-        separators = defaultProps.separators,
         value,
         placeholder,
-        size,
-        rounded,
-        fillMode,
         hover,
         focus,
         valid,
@@ -160,6 +161,6 @@ export const Autocomplete = (
 Autocomplete.states = states;
 Autocomplete.options = options;
 Autocomplete.className = AUTOCOMPLETE_CLASSNAME;
-Autocomplete.defaultProps = defaultProps;
+Autocomplete.defaultOptions = defaultOptions;
 
 export default Autocomplete;

packages/html/src/avatar/avatar.spec.tsx

@@ -49,7 +49,7 @@ export type KendoAvatarProps = KendoAvatarOptions & {
 
 export type KendoAvatarState = { [K in (typeof states)[number]]?: boolean };
 
-const defaultProps = {
+const defaultOptions = {
     type: avatarType.TEXT,
     size: Size.medium,
     rounded: Roundness.full,
@@ -64,12 +64,12 @@ export const Avatar = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        size = defaultProps.size,
-        rounded = defaultProps.rounded,
-        fillMode = defaultProps.fillMode,
-        themeColor = defaultProps.themeColor,
-        type = defaultProps.type,
-        border = defaultProps.border,
+        size = defaultOptions.size,
+        rounded = defaultOptions.rounded,
+        fillMode = defaultOptions.fillMode,
+        themeColor = defaultOptions.themeColor,
+        type = defaultOptions.type,
+        border = defaultOptions.border,
         ...other
     } = props;
 
@@ -100,6 +100,6 @@ export const Avatar = (
 Avatar.states = states;
 Avatar.options = options;
 Avatar.className = AVATAR_CLASSNAME;
-Avatar.defaultProps = defaultProps;
+Avatar.defaultOptions = defaultOptions;
 
 export default Avatar;

packages/html/src/badge/badge.spec.tsx

@@ -36,7 +36,7 @@ export type KendoBadgeProps = KendoBadgeOptions & {
     align?: null | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
 };
 
-const defaultProps = {
+const defaultOptions = {
     size: Size.medium,
     fillMode: FillMode.solid,
     themeColor: ThemeColor.primary,
@@ -48,11 +48,11 @@ export const Badge = (
         React.HTMLAttributes<HTMLSpanElement>
 ) => {
     const {
-        size = defaultProps.size,
+        size = defaultOptions.size,
+        fillMode = defaultOptions.fillMode,
+        themeColor = defaultOptions.themeColor,
+        cutoutBorder = defaultOptions.cutoutBorder,
         rounded,
-        fillMode = defaultProps.fillMode,
-        themeColor = defaultProps.themeColor,
-        cutoutBorder = defaultProps.cutoutBorder,
         position,
         align,
         ...other
@@ -85,6 +85,6 @@ export const Badge = (
 Badge.states = states;
 Badge.options = options;
 Badge.className = BADGE_CLASSNAME;
-Badge.defaultProps = defaultProps;
+Badge.defaultOptions = defaultOptions;
 
 export default Badge;

packages/html/src/bottom-nav/bottom-nav-item.tsx

@@ -20,7 +20,7 @@ export type KendoBottomNavItemProps = {
 
 export type KendoBottomNavItemState = { [K in (typeof states)[number]]?: boolean };
 
-const defaultProps = {};
+const defaultOptions = {};
 
 export const BottomNavItem = (
     props: KendoBottomNavItemProps &
@@ -57,6 +57,6 @@ export const BottomNavItem = (
 BottomNavItem.states = states;
 BottomNavItem.options = options;
 BottomNavItem.className = BOTTOM_NAV_ITEM_CLASSNAME;
-BottomNavItem.defaultProps = defaultProps;
+BottomNavItem.defaultOptions = defaultOptions;
 
 export default BottomNavItem;

packages/html/src/bottom-nav/bottom-nav.spec.tsx

@@ -36,7 +36,7 @@ export type KendoBottomNavProps = KendoBottomNavOptions & {
 
 export type KendoBottomNavState = { [K in (typeof states)[number]]?: boolean };
 
-const defaultProps = {
+const defaultOptions = {
     fillMode: FillMode.flat,
     themeColor: ThemeColor.primary,
     flow: 'horizontal',
@@ -50,10 +50,10 @@ export const BottomNav = (
 ) => {
     const {
         disabled,
-        fillMode = defaultProps.fillMode,
-        themeColor = defaultProps.themeColor,
-        flow = defaultProps.flow,
-        border = defaultProps.border,
+        fillMode = defaultOptions.fillMode,
+        themeColor = defaultOptions.themeColor,
+        flow = defaultOptions.flow,
+        border = defaultOptions.border,
         positionMode,
         dir
     } = props;
@@ -83,6 +83,6 @@ export const BottomNav = (
 BottomNav.states = states;
 BottomNav.options = options;
 BottomNav.className = BOTTOM_NAV_CLASSNAME;
-BottomNav.defaultProps = defaultProps;
+BottomNav.defaultOptions = defaultOptions;
 
 export default BottomNav;

packages/html/src/breadcrumb/breadcrumb-container.tsx

@@ -6,7 +6,7 @@ export type KendoBreadcrumbContainerProps = {
     collapsing?: null | 'auto' | 'none' | 'wrap';
 };
 
-const defaultProps = {
+const defaultOptions = {
     collapsing: 'auto'
 };
 
@@ -15,7 +15,7 @@ export const BreadcrumbContainer = (
         React.HTMLAttributes<HTMLElement>
 ) => {
     const {
-        collapsing = defaultProps.collapsing,
+        collapsing = defaultOptions.collapsing,
         ...other
     } = props;
 

packages/html/src/breadcrumb/breadcrumb.spec.tsx

@@ -17,7 +17,7 @@ export type KendoBreadcrumbProps = {
 
 export type KendoBreadcrumbState = { [K in (typeof states)[number]]?: boolean };
 
-const defaultProps = {
+const defaultOptions = {
     collapsing: 'auto',
     size: Size.medium
 };
@@ -28,8 +28,8 @@ export const Breadcrumb = (
         React.HTMLAttributes<HTMLElement>
 ) => {
     const {
-        size = defaultProps.size,
-        collapsing = defaultProps.collapsing,
+        size = defaultOptions.size,
+        collapsing = defaultOptions.collapsing,
         focus,
         ...other
     } = props;
@@ -58,6 +58,6 @@ export const Breadcrumb = (
 Breadcrumb.states = states;
 Breadcrumb.options = options;
 Breadcrumb.className = BREADCRUMB_CLASSNAME;
-Breadcrumb.defaultProps = defaultProps;
+Breadcrumb.defaultOptions = defaultOptions;
 
 export default Breadcrumb;

packages/html/src/button-group/button-group.spec.tsx

@@ -20,7 +20,7 @@ export type KendoButtonGroupProps = KendoButtonGroupOptions & {
 
 export type KendoButtonGroupState = { [K in (typeof states)[number]]?: boolean };
 
-const defaultProps = {
+const defaultOptions = {
     fillMode: FillMode.solid
 };
 
@@ -30,7 +30,7 @@ export const ButtonGroup = (
         React.HTMLAttributes<HTMLDivElement>
 ) => {
     const {
-        fillMode = defaultProps.fillMode,
+        fillMode = defaultOptions.fillMode,
         disabled,
         stretched,
         ...other
@@ -61,6 +61,6 @@ export const ButtonGroup = (
 ButtonGroup.states = states;
 ButtonGroup.options = options;
 ButtonGroup.className = BUTTONGROUP_CLASSNAME;
-ButtonGroup.defaultProps = defaultProps;
+ButtonGroup.defaultOptions = defaultOptions;
 
 export default ButtonGroup;