@lumx/react 3.20.1-alpha.8 → 3.21.0

package/src/components/radio-button/RadioGroup.stories.tsx

@@ -1,5 +1,5 @@
 import { RadioButton, RadioGroup } from '@lumx/react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default { title: 'LumX components/radio-button/Radio Group' };
 

package/src/components/radio-button/RadioGroup.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render } from '@testing-library/react';

package/src/components/radio-button/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/select/Select.stories.tsx

@@ -3,7 +3,7 @@ import { List, ListItem, Select, Size, TextField } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
 import range from 'lodash/range';
-import { SyntheticEvent, useState } from 'react';
+import React, { SyntheticEvent, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default {

package/src/components/select/Select.test.tsx

@@ -1,4 +1,6 @@
 import { Mock } from 'vitest';
+import React from 'react';
+
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';

package/src/components/select/Select.tsx

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import React, { RefObject } from 'react';
 
 import classNames from 'classnames';
 import lodashIsEmpty from 'lodash/isEmpty';

package/src/components/select/SelectMultiple.stories.tsx

@@ -14,7 +14,7 @@ import {
 } from '@lumx/react';
 import { useBooleanState } from '@lumx/react/hooks/useBooleanState';
 import noop from 'lodash/noop';
-import { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
+import React, { MouseEventHandler, SyntheticEvent, useRef, useState } from 'react';
 import { SelectVariant } from './constants';
 
 export default { title: 'LumX components/select/Select Multiple' };

package/src/components/select/SelectMultiple.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Theme } from '@lumx/core/js/constants';
 import { Chip } from '@lumx/react/components/chip/Chip';
 import { Dropdown } from '@lumx/react/components/dropdown/Dropdown';

package/src/components/select/SelectMultiple.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, RefObject, SyntheticEvent } from 'react';
+import React, { ReactNode, RefObject, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/select/WithSelectContext.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Ref, useCallback, useRef } from 'react';
+import React, { Ref, useCallback, useRef } from 'react';
 
 import { Placement } from '@lumx/react';
 import { Kind, Theme } from '@lumx/core/js/constants';

package/src/components/select/constants.ts

@@ -1,6 +1,6 @@
 import { IconButtonProps } from '@lumx/react';
 import { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';
-import { ReactNode, SyntheticEvent } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';
 
 /**
  * Select variants.

package/src/components/side-navigation/SideNavigation.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { render } from '@testing-library/react';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

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

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 

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

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { getAllByClassName, queryAllByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';

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

@@ -1,4 +1,4 @@
-import { Children, ReactNode } from 'react';
+import React, { Children, ReactNode } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';

package/src/components/skeleton/SkeletonCircle.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonCircle.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GlobalSize, Theme, ColorPalette } from '@lumx/react';

package/src/components/skeleton/SkeletonRectangle.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonRectangle.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { AspectRatio, GlobalSize, Theme, ColorPalette } from '@lumx/react';

package/src/components/skeleton/SkeletonTypography.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { SkeletonTypography, Typography, ColorPalette } from '@lumx/react';
 
 export default { title: 'LumX components/skeleton/Skeleton Typography' };

package/src/components/skeleton/SkeletonTypography.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/skeleton/SkeletonTypography.tsx

@@ -1,4 +1,4 @@
-import { CSSProperties } from 'react';
+import React, { CSSProperties } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/slider/Slider.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/slider/Slider.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import { SyntheticEvent, useMemo, useRef } from 'react';
+import React, { SyntheticEvent, useMemo, useRef } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/slideshow/Slideshow.stories.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import range from 'lodash/range';
 import { AspectRatio, Button, FlexBox, ImageBlock, Slideshow, SlideshowItem, Orientation } from '@lumx/react';
 import { IMAGES, LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/Slideshow.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/slideshow/SlideshowControls.stories.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { AspectRatio, ImageBlock, Slides, SlideshowControls, SlideshowItem } from '@lumx/react';
 import { useFocusWithin } from '@lumx/react/hooks/useFocusWithin';
 import { LANDSCAPE_IMAGES } from '@lumx/react/stories/controls/image';

package/src/components/slideshow/SlideshowItem.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/slideshow/useSlideFocusManagement.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { getFocusableElements } from '@lumx/react/utils/browser/focus/getFocusableElements';
 
 export interface UseSlideFocusManagementProps {

package/src/components/switch/Switch.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { getByClassName, getByTagName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/switch/Switch.tsx

@@ -1,4 +1,4 @@
-import { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
+import React, { Children, InputHTMLAttributes, SyntheticEvent } from 'react';
 
 import classNames from 'classnames';
 import isEmpty from 'lodash/isEmpty';

package/src/components/table/Table.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';
 import { render } from '@testing-library/react';

package/src/components/table/Table.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { Theme } from '@lumx/react';

package/src/components/table/TableBody.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/table/TableBody.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/table/TableCell.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen, within } from '@testing-library/react';

package/src/components/table/TableCell.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { mdiArrowDown, mdiArrowUp } from '@lumx/icons';

package/src/components/table/TableHeader.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render } from '@testing-library/react';
 import { queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/table/TableHeader.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/table/TableRow.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 
 import { render, screen } from '@testing-library/react';

package/src/components/table/TableRow.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { GenericProps } from '@lumx/react/utils/type';

package/src/components/tabs/Tab.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';
 import { getByClassName, queryByClassName } from '@lumx/react/testing/utils/queries';

package/src/components/tabs/Tab.tsx

@@ -1,4 +1,4 @@
-import { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
+import React, { FocusEventHandler, KeyboardEventHandler, ReactNode, useCallback } from 'react';
 
 import classNames from 'classnames';
 

package/src/components/tabs/TabList.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Tab } from '@lumx/react';
 import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { getByClassName } from '@lumx/react/testing/utils/queries';
 import { render, screen } from '@testing-library/react';

package/src/components/tabs/TabPanel.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { forwardRef } from '@lumx/react/utils/react/forwardRef';

package/src/components/tabs/TabProvider.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { Tab, TabList, TabPanel, TabProvider, TabProviderProps } from '@lumx/react';
 import { render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';

package/src/components/tabs/TabProvider.tsx

@@ -1,5 +1,5 @@
 import ReactDOM from 'react-dom';
-import { ReactNode, useEffect, useReducer } from 'react';
+import React, { ReactNode, useEffect, useReducer } from 'react';
 import { INIT_STATE, TabProviderContext, reducer } from './state';
 
 export interface TabProviderProps {

package/src/components/tabs/Tabs.stories.tsx

@@ -8,7 +8,7 @@ import { toFlattenProps } from '@lumx/react/stories/utils/toFlattenProps';
 import { withCategory } from '@lumx/react/stories/utils/withCategory';
 import get from 'lodash/get';
 import times from 'lodash/times';
-import { useState } from 'react';
+import React, { useState } from 'react';
 
 export default {
     title: 'LumX components/tabs',

package/src/components/text/Text.stories.tsx

@@ -1,6 +1,6 @@
+import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import React from 'react';
 
-import { ALL_TYPOGRAPHY, allTypographyArgType } from '@lumx/react/stories/controls/typography';
 import { colorArgType, colorVariantArgType } from '@lumx/react/stories/controls/color';
 import { textElementArgType } from '@lumx/react/stories/controls/element';
 import { withUndefined } from '@lumx/react/stories/controls/withUndefined';

package/src/components/text/Text.test.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { commonTestsSuiteRTL } from '@lumx/react/testing/utils';
 import { mdiEarth } from '@lumx/icons';
 import { Icon } from '@lumx/react';

package/src/components/text/Text.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import classNames from 'classnames';
 
 import { ColorWithVariants, ColorVariant, Typography, WhiteSpace } from '@lumx/react';

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

@@ -0,0 +1,18 @@
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+
+import { RawInputText } from './RawInputText';
+
+export default {
+    title: 'LumX components/text-field/RawInputText',
+    component: RawInputText,
+    decorators: [withValueOnChange(), withWrapper({ style: { border: '1px dashed red' } })],
+};
+
+export const Default = {};
+
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Input placeholder',
+    },
+};

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

@@ -0,0 +1,58 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+
+import { RawInputText, RawInputTextProps } from './RawInputText';
+import { INPUT_NATIVE_CLASSNAME } from './constants';
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<RawInputTextProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: any = { ...propsOverride };
+    render(<RawInputText {...props} />, { wrapper });
+    const input = getByClassName(document.body, INPUT_NATIVE_CLASSNAME);
+    return { props, input };
+};
+
+describe(`<${RawInputText.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { input } = setup();
+            expect(input).toBeInTheDocument();
+            expect(input?.tagName).toBe('INPUT');
+            expect(input).toHaveAttribute('type', 'text');
+        });
+
+        it('should render with custom type', () => {
+            const { input } = setup({ type: 'number' });
+            expect(input).toHaveAttribute('type', 'number');
+        });
+    });
+
+    describe('Events', () => {
+        it('should call onChange with correct value when typing', async () => {
+            const onChange = vi.fn();
+            const name = 'inputName';
+            const { input } = setup({ onChange, name });
+            await userEvent.type(input as Element, 'hello');
+            expect(onChange).toHaveBeenCalledWith('h', name, expect.any(Object));
+            expect(onChange).toHaveBeenCalledWith('hello', name, expect.any(Object));
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: INPUT_NATIVE_CLASSNAME,
+        forwardClassName: 'input',
+        forwardAttributes: 'input',
+        forwardRef: 'input',
+        applyTheme: {
+            affects: [{ element: 'input' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});

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

@@ -0,0 +1,56 @@
+import React, { ComponentProps, ChangeEventHandler, SyntheticEvent, useRef, useCallback } from 'react';
+
+import classNames from 'classnames';
+
+import { Theme, useTheme } from '@lumx/react';
+
+import { forwardRef } from '@lumx/react/utils/react/forwardRef';
+import { useMergeRefs } from '@lumx/react/utils/react/mergeRefs';
+import { HasClassName, HasTheme } from '@lumx/react/utils/type';
+import { handleBasicClasses } from '@lumx/core/js/utils';
+
+import { INPUT_NATIVE_CLASSNAME } from './constants';
+
+type NativeInputProps = Omit<ComponentProps<'input'>, 'value' | 'onChange'>;
+
+/**
+ * Defines the props of the component.
+ */
+export interface RawInputTextProps extends NativeInputProps, HasTheme, HasClassName {
+    value?: string;
+    onChange?: (value: string, name?: string, event?: SyntheticEvent) => void;
+}
+/**
+ * Component default props.
+ */
+export const DEFAULT_PROPS: Partial<RawInputTextProps> = {
+    type: 'text',
+};
+
+/**
+ * Raw input text component
+ * (input element without any decoration)
+ */
+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 textareaRef = useRef<HTMLInputElement>(null);
+
+    const handleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+        (evt) => {
+            onChange?.(evt.target.value, evt.target.name, evt);
+        },
+        [onChange],
+    );
+
+    return (
+        <input
+            {...forwardedProps}
+            type={type}
+            ref={useMergeRefs(ref, textareaRef)}
+            className={classNames(className, handleBasicClasses({ prefix: INPUT_NATIVE_CLASSNAME, theme }))}
+            onChange={handleChange}
+            value={value}
+        />
+    );
+});

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

@@ -0,0 +1,22 @@
+import { withValueOnChange } from '@lumx/react/stories/decorators/withValueOnChange';
+import { withWrapper } from '@lumx/react/stories/decorators/withWrapper';
+
+import { RawInputTextarea } from './RawInputTextarea';
+
+export default {
+    title: 'LumX components/text-field/RawInputTextarea',
+    component: RawInputTextarea,
+    decorators: [withValueOnChange(), withWrapper({ style: { border: '1px dashed red' } })],
+};
+
+export const Default = {};
+
+export const WithMinimumRows = {
+    args: { minimumRows: 3 },
+};
+
+export const WithPlaceholder = {
+    args: {
+        placeholder: 'Input placeholder',
+    },
+};

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

@@ -0,0 +1,63 @@
+import { commonTestsSuiteRTL, SetupRenderOptions } from '@lumx/react/testing/utils';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { getByClassName } from '@lumx/react/testing/utils/queries';
+
+import { RawInputTextarea, RawInputTextareaProps, DEFAULT_PROPS } from './RawInputTextarea';
+import { INPUT_NATIVE_CLASSNAME } from './constants';
+
+/**
+ * Mounts the component and returns common DOM elements / data needed in multiple tests further down.
+ */
+const setup = (propsOverride: Partial<RawInputTextareaProps> = {}, { wrapper }: SetupRenderOptions = {}) => {
+    const props: any = { ...propsOverride };
+    render(<RawInputTextarea {...props} />, { wrapper });
+    const textarea = getByClassName(document.body, INPUT_NATIVE_CLASSNAME);
+    return { props, textarea };
+};
+
+describe(`<${RawInputTextarea.displayName}>`, () => {
+    describe('Props', () => {
+        it('should render default', () => {
+            const { textarea } = setup();
+            expect(textarea).toBeInTheDocument();
+            expect(textarea?.tagName).toBe('TEXTAREA');
+            expect(textarea).toHaveAttribute('rows', String(DEFAULT_PROPS.minimumRows));
+        });
+
+        it('should render with custom minimumRows', () => {
+            const { textarea } = setup({ minimumRows: 5 });
+            expect(textarea).toHaveAttribute('rows', '5');
+        });
+
+        it('should render with placeholder', () => {
+            const { textarea } = setup({ placeholder: 'Test placeholder' });
+            expect(textarea).toHaveAttribute('placeholder', 'Test placeholder');
+        });
+    });
+
+    describe('Events', () => {
+        it('should call onChange with correct value when typing', async () => {
+            const onChange = vi.fn();
+            const name = 'textareaName';
+            const { textarea } = setup({ onChange, name });
+            await userEvent.type(textarea as Element, 'hello');
+            expect(onChange).toHaveBeenCalledWith('h', name, expect.any(Object));
+            expect(onChange).toHaveBeenCalledWith('hello', name, expect.any(Object));
+        });
+    });
+
+    // Common tests suite.
+    commonTestsSuiteRTL(setup, {
+        baseClassName: INPUT_NATIVE_CLASSNAME,
+        forwardClassName: 'textarea',
+        forwardAttributes: 'textarea',
+        forwardRef: 'textarea',
+        applyTheme: {
+            affects: [{ element: 'textarea' }],
+            viaProp: true,
+            viaContext: true,
+            defaultTheme: 'light',
+        },
+    });
+});