@lumx/react 3.21.0 → 3.21.1

package/package.json

@@ -6,8 +6,8 @@
         "url": "https://github.com/lumapps/design-system/issues"
     },
     "dependencies": {
-        "@lumx/core": "^3.21.0",
-        "@lumx/icons": "^3.21.0",
+        "@lumx/core": "^3.21.1",
+        "@lumx/icons": "^3.21.1",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.3.2",
@@ -103,5 +103,5 @@
         "build:storybook": "storybook build"
     },
     "sideEffects": false,
-    "version": "3.21.0"
+    "version": "3.21.1"
 }

package/src/components/text-field/RawInputText.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

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

@@ -33,22 +33,35 @@ export const DEFAULT_PROPS: Partial<RawInputTextProps> = {
  */
 export const RawInputText = forwardRef<RawInputTextProps, HTMLInputElement>((props, ref) => {
     const defaultTheme = useTheme() || Theme.light;
-    const { className, theme = defaultTheme, value, onChange, type = DEFAULT_PROPS.type, ...forwardedProps } = props;
+    const {
+        className,
+        theme = defaultTheme,
+        value,
+        onChange,
+        type = DEFAULT_PROPS.type,
+        name,
+        ...forwardedProps
+    } = props;
     const textareaRef = useRef<HTMLInputElement>(null);
 
     const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
         (evt) => {
-            onChange?.(evt.target.value, evt.target.name, evt);
+            onChange?.(evt.target.value, name, evt);
         },
-        [onChange],
+        [onChange, name],
     );
 
     return (
         <input
             {...forwardedProps}
+            name={name}
             type={type}
             ref={useMergeRefs(ref, textareaRef)}
-            className={classNames(className, handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }))}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }),
+                `${INPUT_NATIVE_CLASSNAME}--text`,
+            )}
             onChange={handleChange}
             value={value}
         />

package/src/components/text-field/RawInputTextarea.test.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

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

@@ -41,6 +41,7 @@ export const RawInputTextarea = forwardRef<Omit<RawInputTextareaProps, 'type'>,
         theme = defaultTheme,
         minimumRows = DEFAULT_PROPS.minimumRows as number,
         value,
+        name,
         onChange,
         ...forwardedProps
     } = props;
@@ -50,16 +51,21 @@ export const RawInputTextarea = forwardRef<Omit<RawInputTextareaProps, 'type'>,
 
     const handleChange: ChangeEventHandler<HTMLTextAreaElement> = useCallback(
         (evt) => {
-            onChange?.(evt.target.value, evt.target.name, evt);
+            onChange?.(evt.target.value, name, evt);
         },
-        [onChange],
+        [onChange, name],
     );
 
     return (
         <textarea
-            className={classNames(className, handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }))}
-            ref={useMergeRefs(ref, textareaRef)}
             {...forwardedProps}
+            name={name}
+            className={classNames(
+                className,
+                handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }),
+                `${INPUT_NATIVE_CLASSNAME}--textarea`,
+            )}
+            ref={useMergeRefs(ref, textareaRef)}
             onChange={handleChange}
             value={value}
             rows={rows}