@lumx/react 3.15.1-alpha.1 → 3.15.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.15.1-alpha.1",
-        "@lumx/icons": "^3.15.1-alpha.1",
+        "@lumx/core": "^3.15.1",
+        "@lumx/icons": "^3.15.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -35,6 +35,7 @@
         "@storybook/blocks": "^7.6.3",
         "@storybook/react": "^7.6.3",
         "@storybook/react-vite": "^7.6.3",
+        "@testing-library/dom": "^9.3.4",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^12.1.2",
         "@testing-library/user-event": "^14.4.3",
@@ -110,5 +111,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.15.1-alpha.1"
+    "version": "3.15.1"
 }

package/src/components/alert-dialog/AlertDialog.tsx

@@ -81,8 +81,18 @@ const DEFAULT_PROPS: Partial<DialogProps> = {
  * Children of this component should only be strings, paragraphs or links.
  */
 export const AlertDialog = forwardRef<AlertDialogProps, HTMLDivElement>((props, ref) => {
-    const { id, title, className, cancelProps, confirmProps, kind, size, dialogProps, children, ...forwardedProps } =
-        props;
+    const {
+        id,
+        title,
+        className,
+        cancelProps,
+        confirmProps,
+        kind = DEFAULT_PROPS.kind,
+        size = DEFAULT_PROPS.size,
+        dialogProps,
+        children,
+        ...forwardedProps
+    } = props;
 
     const cancelButtonRef = React.useRef(null);
     const confirmationButtonRef = React.useRef(null);

package/src/components/autocomplete/Autocomplete.tsx

@@ -204,13 +204,13 @@ const DEFAULT_PROPS: Partial<AutocompleteProps> = {
 export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme();
     const {
-        anchorToInput,
+        anchorToInput = DEFAULT_PROPS.anchorToInput,
         children,
         chips,
         className,
-        closeOnClick,
-        closeOnClickAway,
-        closeOnEscape,
+        closeOnClick = DEFAULT_PROPS.closeOnClick,
+        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
         disabled,
         error,
         fitToAnchorWidth,
@@ -233,7 +233,7 @@ export const Autocomplete = forwardRef<AutocompleteProps, HTMLDivElement>((props
         onInfiniteScroll,
         placeholder,
         placement,
-        shouldFocusOnClose,
+        shouldFocusOnClose = DEFAULT_PROPS.shouldFocusOnClose,
         theme = defaultTheme,
         value,
         textFieldProps = {},

package/src/components/autocomplete/AutocompleteMultiple.tsx

@@ -76,8 +76,8 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         chipsAlignment,
         className,
-        closeOnClickAway,
-        closeOnEscape,
+        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
         fitToAnchorWidth,
         hasError,
         helper,
@@ -100,12 +100,12 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
         onKeyDown,
         placeholder,
         placement,
-        selectedChipRender,
+        selectedChipRender = DEFAULT_PROPS.selectedChipRender,
         shouldFocusOnClose,
         theme = defaultTheme,
         type,
         value,
-        values,
+        values = DEFAULT_PROPS.values,
         ...forwardedProps
     } = props;
 
@@ -126,7 +126,7 @@ export const AutocompleteMultiple = forwardRef<AutocompleteMultipleProps, HTMLDi
             helper={helper}
             icon={icon}
             inputRef={inputRef}
-            chips={values && values.map((chip: any, index: number) => selectedChipRender(chip, index, onClear))}
+            chips={values && values.map((chip: any, index: number) => selectedChipRender?.(chip, index, onClear))}
             isDisabled={isDisabled}
             isRequired={isRequired}
             clearButtonProps={clearButtonProps}

package/src/components/avatar/Avatar.tsx

@@ -79,7 +79,7 @@ export const Avatar = forwardRef<AvatarProps, HTMLDivElement>((props, ref) => {
         linkAs,
         onClick,
         onKeyPress,
-        size,
+        size = DEFAULT_PROPS.size,
         theme = defaultTheme,
         thumbnailProps,
         ...forwardedProps

package/src/components/badge/Badge.tsx

@@ -42,7 +42,7 @@ const DEFAULT_PROPS: Partial<BadgeProps> = {
  * @return React element.
  */
 export const Badge = forwardRef<BadgeProps, HTMLDivElement>((props, ref) => {
-    const { children, className, color, ...forwardedProps } = props;
+    const { children, className, color = DEFAULT_PROPS.color, ...forwardedProps } = props;
     return (
         <div
             ref={ref}

package/src/components/badge/BadgeWrapper.tsx

@@ -3,7 +3,6 @@ import React, { ReactElement, ReactNode } from 'react';
 import classNames from 'classnames';
 
 import { getRootClassName } from '@lumx/react/utils/className';
-import { DEFAULT_PROPS } from '@lumx/react/components/select/WithSelectContext';
 import { GenericProps } from '@lumx/react/utils/type';
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';
 
@@ -36,4 +35,3 @@ export const BadgeWrapper = forwardRef<BadgeWrapperProps, HTMLDivElement>((props
 });
 BadgeWrapper.displayName = 'BadgeWrapper';
 BadgeWrapper.className = CLASSNAME;
-BadgeWrapper.defaultProps = DEFAULT_PROPS;

package/src/components/button/Button.tsx

@@ -58,7 +58,16 @@ const DEFAULT_PROPS: Partial<ButtonProps> = {
  */
 export const Button = forwardRef<ButtonProps, HTMLButtonElement | HTMLAnchorElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { children, className, emphasis, leftIcon, rightIcon, size, theme = defaultTheme, ...forwardedProps } = props;
+    const {
+        children,
+        className,
+        emphasis = DEFAULT_PROPS.emphasis,
+        leftIcon,
+        rightIcon,
+        size = DEFAULT_PROPS.size,
+        theme = defaultTheme,
+        ...forwardedProps
+    } = props;
 
     const buttonClassName = classNames(
         className,

package/src/components/button/IconButton.tsx

@@ -59,11 +59,11 @@ const DEFAULT_PROPS: Partial<IconButtonProps> = {
 export const IconButton = forwardRef<IconButtonProps, HTMLButtonElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
-        emphasis,
+        emphasis = DEFAULT_PROPS.emphasis,
         image,
         icon,
         label,
-        size,
+        size = DEFAULT_PROPS.size,
         theme = defaultTheme,
         tooltipProps,
         hideTooltip,

package/src/components/chip/Chip.tsx

@@ -85,7 +85,7 @@ export const Chip = forwardRef<ChipProps, HTMLAnchorElement>((props, ref) => {
         onAfterClick,
         onBeforeClick,
         onClick,
-        size,
+        size = DEFAULT_PROPS.size,
         theme = defaultTheme,
         href,
         onKeyDown,

package/src/components/comment-block/CommentBlock.tsx

@@ -107,7 +107,7 @@ export const CommentBlock = forwardRef<CommentBlockProps, HTMLDivElement>((props
         onMouseLeave,
         text,
         theme = defaultTheme,
-        variant,
+        variant = DEFAULT_PROPS.variant,
         ...forwardedProps
     } = props;
     const hasChildren = Children.count(children) > 0;

package/src/components/dialog/Dialog.tsx

@@ -115,11 +115,11 @@ export const Dialog = forwardRef<DialogProps, HTMLDivElement>((props, ref) => {
         parentElement,
         contentRef,
         preventAutoClose,
-        size,
+        size = DEFAULT_PROPS.size,
         zIndex,
         dialogProps,
         onVisibilityChange,
-        disableBodyScroll,
+        disableBodyScroll = DEFAULT_PROPS.disableBodyScroll,
         preventCloseOnClick,
         preventCloseOnEscape,
         ...forwardedProps

package/src/components/dropdown/Dropdown.tsx

@@ -119,18 +119,18 @@ export const Dropdown = forwardRef<DropdownProps, HTMLDivElement>((props, ref) =
         anchorRef,
         children,
         className,
-        closeOnClick,
-        closeOnClickAway,
-        closeOnEscape,
-        fitToAnchorWidth,
-        fitWithinViewportHeight,
+        closeOnClick = DEFAULT_PROPS.closeOnClick,
+        closeOnClickAway = DEFAULT_PROPS.closeOnClickAway,
+        closeOnEscape = DEFAULT_PROPS.closeOnEscape,
+        fitToAnchorWidth = DEFAULT_PROPS.fitToAnchorWidth,
+        fitWithinViewportHeight = DEFAULT_PROPS.fitWithinViewportHeight,
         isOpen,
         offset,
-        focusAnchorOnClose,
+        focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
         onClose,
         onInfiniteScroll,
-        placement,
-        shouldFocusOnOpen,
+        placement = DEFAULT_PROPS.placement,
+        shouldFocusOnOpen = DEFAULT_PROPS.shouldFocusOnOpen,
         zIndex,
         ...forwardedProps
     } = props;

package/src/components/generic-block/GenericBlock.tsx

@@ -129,8 +129,8 @@ const BaseGenericBlock: BaseGenericBlock = forwardRef((props, ref) => {
         children,
         actions,
         actionsProps,
-        gap,
-        orientation,
+        gap = DEFAULT_PROPS.gap,
+        orientation = DEFAULT_PROPS.orientation,
         contentProps,
         ...forwardedProps
     } = props;

package/src/components/grid/Grid.tsx

@@ -53,7 +53,16 @@ const DEFAULT_PROPS: Partial<GridProps> = {
  * @return React element.
  */
 export const Grid = forwardRef<GridProps, HTMLDivElement>((props, ref) => {
-    const { children, className, gutter, hAlign, orientation, vAlign, wrap, ...forwardedProps } = props;
+    const {
+        children,
+        className,
+        gutter,
+        hAlign,
+        orientation = DEFAULT_PROPS.orientation,
+        vAlign,
+        wrap = DEFAULT_PROPS.wrap,
+        ...forwardedProps
+    } = props;
 
     return (
         <div

package/src/components/image-block/ImageBlock.tsx

@@ -77,9 +77,9 @@ export const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, re
     const defaultTheme = useTheme() || Theme.light;
     const {
         actions,
-        align,
+        align = DEFAULT_PROPS.align,
         alt,
-        captionPosition,
+        captionPosition = DEFAULT_PROPS.captionPosition,
         captionStyle,
         className,
         description,

package/src/components/input-helper/InputHelper.tsx

@@ -46,7 +46,7 @@ const DEFAULT_PROPS: Partial<InputHelperProps> = {
  */
 export const InputHelper = forwardRef<InputHelperProps, HTMLParagraphElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { children, className, kind, theme = defaultTheme, ...forwardedProps } = props;
+    const { children, className, kind = DEFAULT_PROPS.kind, theme = defaultTheme, ...forwardedProps } = props;
     const { color } = INPUT_HELPER_CONFIGURATION[kind as any] || {};
 
     return (

package/src/components/link-preview/LinkPreview.tsx

@@ -74,11 +74,11 @@ export const LinkPreview = forwardRef<LinkPreviewProps, HTMLDivElement>((props,
         link,
         linkAs,
         linkProps,
-        size,
+        size = DEFAULT_PROPS.size,
         theme = defaultTheme,
         thumbnailProps,
         title,
-        titleHeading,
+        titleHeading = DEFAULT_PROPS.titleHeading,
         ...forwardedProps
     } = props;
     // Use title heading as title wrapper (see DEFAULT_PROPS for the default value).

package/src/components/list/List.tsx

@@ -62,7 +62,15 @@ const DEFAULT_PROPS: Partial<ListProps> = {
  * @return React element.
  */
 const InternalList = forwardRef<ListProps, HTMLUListElement>((props, ref) => {
-    const { children, className, isClickable, itemPadding, onListItemSelected, tabIndex, ...forwardedProps } = props;
+    const {
+        children,
+        className,
+        isClickable,
+        itemPadding,
+        onListItemSelected,
+        tabIndex = DEFAULT_PROPS.tabIndex,
+        ...forwardedProps
+    } = props;
     const listElementRef = useRef<HTMLUListElement>(null);
 
     const { items, hasClickableItem } = useInteractiveList({

package/src/components/list/ListItem.tsx

@@ -88,7 +88,7 @@ export const ListItem = forwardRef<ListItemProps, HTMLLIElement>((props, ref) =>
         linkProps = {},
         linkRef,
         onItemSelected,
-        size,
+        size = DEFAULT_PROPS.size,
         ...forwardedProps
     } = props;
 

package/src/components/navigation/Navigation.tsx

@@ -44,7 +44,13 @@ type SubComponents = {
 
 export const Navigation = forwardRef<NavigationProps, HTMLElement, SubComponents>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { children, className, theme = defaultTheme, orientation, ...forwardedProps } = props;
+    const {
+        children,
+        className,
+        theme = defaultTheme,
+        orientation = DEFAULT_PROPS.orientation,
+        ...forwardedProps
+    } = props;
     return (
         <ThemeProvider value={theme}>
             <nav

package/src/components/notification/Notification.tsx

@@ -73,8 +73,8 @@ export const Notification = forwardRef<NotificationProps, HTMLDivElement>((props
         onClick,
         theme = defaultTheme,
         type,
-        zIndex,
-        usePortal,
+        zIndex = DEFAULT_PROPS.zIndex,
+        usePortal = DEFAULT_PROPS.usePortal,
         style,
         ...forwardedProps
     } = props;

package/src/components/popover/Popover.tsx

@@ -107,24 +107,24 @@ const _InnerPopover = forwardRef<PopoverProps, HTMLDivElement>((props, ref) => {
         className,
         closeOnClickAway,
         closeOnEscape,
-        elevation,
+        elevation = DEFAULT_PROPS.elevation,
         focusElement,
         hasArrow,
         isOpen,
         onClose,
         parentElement,
-        usePortal,
-        focusAnchorOnClose,
+        usePortal = DEFAULT_PROPS.usePortal,
+        focusAnchorOnClose = DEFAULT_PROPS.focusAnchorOnClose,
         withFocusTrap,
         boundaryRef,
         fitToAnchorWidth,
         fitWithinViewportHeight,
         focusTrapZoneElement,
         offset,
-        placement,
+        placement = DEFAULT_PROPS.placement,
         style,
         theme,
-        zIndex,
+        zIndex = DEFAULT_PROPS.zIndex,
         ...forwardedProps
     } = props;
     const popoverRef = useRef<HTMLDivElement>(null);

package/src/components/post-block/PostBlock.tsx

@@ -68,7 +68,7 @@ export const PostBlock = forwardRef<PostBlockProps, HTMLDivElement>((props, ref)
         className,
         meta,
         onClick,
-        orientation,
+        orientation = DEFAULT_PROPS.orientation,
         tags,
         text,
         theme = defaultTheme,

package/src/components/progress/Progress.tsx

@@ -52,7 +52,7 @@ const DEFAULT_PROPS: Partial<ProgressProps> = {
  */
 export const Progress = forwardRef<ProgressProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, variant, ...forwardedProps } = props;
+    const { className, theme = defaultTheme, variant = DEFAULT_PROPS.variant, ...forwardedProps } = props;
 
     return (
         <div

package/src/components/progress-tracker/ProgressTrackerProvider.tsx

@@ -40,6 +40,7 @@ export const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (
             dispatch({
                 type: 'update',
                 payload: {
+                    ...DEFAULT_PROPS,
                     ...propState,
                     activeTabIndex: propState.activeStepIndex || INIT_STATE.activeTabIndex,
                 },

package/src/components/select/Select.tsx

@@ -34,6 +34,7 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
 /** The default value of props. */
 const DEFAULT_PROPS: Partial<SelectProps> = {
     selectedValueRender: (choice) => choice,
+    variant: SelectVariant.input,
 };
 
 const stopPropagation = (evt: Event) => evt.stopPropagation();
@@ -176,6 +177,7 @@ export const Select = forwardRef<SelectProps, HTMLDivElement>((props, ref) => {
     return WithSelectContext(
         SelectField,
         {
+            ...DEFAULT_PROPS,
             ...props,
             className: classNames(
                 props.className,

package/src/components/select/SelectMultiple.tsx

@@ -54,6 +54,7 @@ const DEFAULT_PROPS: Partial<SelectMultipleProps> = {
         );
     },
     selectedValueRender: (choice) => choice,
+    variant: SelectVariant.input,
 };
 
 export const SelectMultipleField: React.FC<SelectMultipleProps> = (props) => {
@@ -185,6 +186,7 @@ export const SelectMultiple = forwardRef<SelectMultipleProps, HTMLDivElement>((p
     return WithSelectContext(
         SelectMultipleField,
         {
+            ...DEFAULT_PROPS,
             ...props,
             className: classNames(
                 props.className,

package/src/components/select/WithSelectContext.tsx

@@ -12,7 +12,7 @@ import { mergeRefs } from '@lumx/react/utils/react/mergeRefs';
 
 import { useId } from '@lumx/react/hooks/useId';
 import { useTheme } from '@lumx/react/utils/theme/ThemeContext';
-import { CoreSelectProps, SelectVariant } from './constants';
+import { CoreSelectProps } from './constants';
 
 /** The display name of the component. */
 const COMPONENT_NAME = 'Select';
@@ -20,11 +20,6 @@ const COMPONENT_NAME = 'Select';
 /** The default class name and classes prefix for this component. */
 const CLASSNAME = getRootClassName(COMPONENT_NAME);
 
-/** The default value of props. */
-export const DEFAULT_PROPS: Partial<CoreSelectProps> = {
-    variant: SelectVariant.input,
-};
-
 export const WithSelectContext = (
     SelectElement: React.FC<any>,
     props: CoreSelectProps,
@@ -55,7 +50,7 @@ export const WithSelectContext = (
         placeholder,
         theme = defaultTheme,
         value,
-        variant = DEFAULT_PROPS.variant,
+        variant,
         ...forwardedProps
     } = props;
     const generatedSelectId = useId();

package/src/components/side-navigation/SideNavigationItem.tsx

@@ -70,7 +70,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
     const {
         children,
         className,
-        emphasis,
+        emphasis = DEFAULT_PROPS.emphasis,
         icon,
         isOpen,
         isSelected,
@@ -80,7 +80,7 @@ export const SideNavigationItem = forwardRef<SideNavigationItemProps, HTMLLIElem
         onActionClick,
         onClick,
         toggleButtonProps,
-        closeMode = 'unmount',
+        closeMode = DEFAULT_PROPS.closeMode,
         ...forwardedProps
     } = props;
 

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -53,7 +53,16 @@ const CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 export const SkeletonRectangle = forwardRef<SkeletonRectangleProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { aspectRatio, className, height, theme = defaultTheme, variant, width, color, ...forwardedProps } = props;
+    const {
+        aspectRatio,
+        className,
+        height,
+        theme = defaultTheme,
+        variant = DEFAULT_PROPS.variant,
+        width,
+        color,
+        ...forwardedProps
+    } = props;
 
     return (
         <div

package/src/components/slider/Slider.tsx

@@ -105,8 +105,8 @@ export const Slider = forwardRef<SliderProps, HTMLDivElement>((props, ref) => {
         name,
         onChange,
         onMouseDown,
-        precision,
-        steps,
+        precision = DEFAULT_PROPS.precision,
+        steps = DEFAULT_PROPS.steps,
         theme = defaultTheme,
         value,
         ...forwardedProps

package/src/components/slideshow/Slideshow.tsx

@@ -44,9 +44,7 @@ export interface SlideshowProps
 /**
  * Component default props.
  */
-const DEFAULT_PROPS: Partial<SlideshowProps> = {
-    ...DEFAULT_OPTIONS,
-};
+const DEFAULT_PROPS: Partial<SlideshowProps> = DEFAULT_OPTIONS;
 
 /**
  * Slideshow component.
@@ -59,12 +57,12 @@ export const Slideshow = forwardRef<SlideshowProps, HTMLDivElement>((props, ref)
     const defaultTheme = useTheme() || Theme.light;
     const {
         activeIndex,
-        autoPlay,
+        autoPlay = DEFAULT_PROPS.autoPlay,
         children,
         className,
         fillHeight,
-        groupBy,
-        interval,
+        groupBy = DEFAULT_OPTIONS.groupBy,
+        interval = DEFAULT_PROPS.interval,
         onChange,
         slideshowControlsProps,
         theme = defaultTheme,

package/src/components/slideshow/SlideshowControls.tsx

@@ -84,7 +84,7 @@ const DEFAULT_PROPS: Partial<SlideshowControlsProps> = {
 const InternalSlideshowControls = forwardRef<SlideshowControlsProps, HTMLDivElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
     const {
-        activeIndex,
+        activeIndex = DEFAULT_PROPS.activeIndex,
         className,
         nextButtonProps,
         onNextClick,

package/src/components/switch/Switch.tsx

@@ -71,7 +71,7 @@ export const Switch = forwardRef<SwitchProps, HTMLDivElement>((props, ref) => {
         isDisabled = disabled,
         name,
         onChange,
-        position,
+        position = DEFAULT_PROPS.position,
         theme = defaultTheme,
         value,
         inputProps = {},

package/src/components/table/TableCell.tsx

@@ -63,7 +63,16 @@ const DEFAULT_PROPS: Partial<TableCellProps> = {
  * @return React element.
  */
 export const TableCell = forwardRef<TableCellProps, HTMLTableCellElement>((props, ref) => {
-    const { children, className, icon, isSortable, onHeaderClick, sortOrder, variant, ...forwardedProps } = props;
+    const {
+        children,
+        className,
+        icon,
+        isSortable,
+        onHeaderClick,
+        sortOrder,
+        variant = DEFAULT_PROPS.variant,
+        ...forwardedProps
+    } = props;
 
     // Use button if clickable
     const Wrapper = onHeaderClick ? 'button' : 'div';

package/src/components/tabs/TabList.tsx

@@ -64,8 +64,8 @@ export const TabList = forwardRef<TabListProps, HTMLDivElement>((props, ref) =>
         'aria-label': ariaLabel,
         children,
         className,
-        layout,
-        position,
+        layout = DEFAULT_PROPS.layout,
+        position = DEFAULT_PROPS.position,
         theme = defaultTheme,
         ...forwardedProps
     } = props;

package/src/components/tabs/TabProvider.tsx

@@ -37,7 +37,7 @@ export const TabProvider: React.FC<TabProviderProps> = (props) => {
     // On prop state change => dispatch update.
     useEffect(
         () => {
-            dispatch({ type: 'update', payload: propState });
+            dispatch({ type: 'update', payload: { ...DEFAULT_PROPS, ...propState } });
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [dispatch, ...Object.values(propState)],

package/src/components/text-field/TextField.tsx

@@ -285,7 +285,7 @@ export const TextField = forwardRef<TextFieldProps, HTMLDivElement>((props, ref)
         placeholder,
         textFieldRef,
         theme = defaultTheme,
-        type,
+        type = DEFAULT_PROPS.type,
         value,
         afterElement,
         ...forwardedProps