diff --git a/.changeset/chatty-donuts-study.md b/.changeset/chatty-donuts-study.md new file mode 100644 index 0000000000..1c51e49ddd --- /dev/null +++ b/.changeset/chatty-donuts-study.md @@ -0,0 +1,8 @@ +--- +"@ultraviolet/icons": minor +"@ultraviolet/form": minor +"@ultraviolet/plus": minor +"@ultraviolet/ui": minor +--- + +Upgrade from react 18 to react 19 diff --git a/examples/next-advanced/next.config.js b/examples/next-advanced/next.config.js index a1cd5604ee..a121e60b70 100644 --- a/examples/next-advanced/next.config.js +++ b/examples/next-advanced/next.config.js @@ -9,22 +9,13 @@ const nextConfig = () => { }, poweredByHeader: false, reactStrictMode: true, - swcMinify: true, compiler: { emotion: true, }, eslint: { ignoreDuringBuilds: true, }, - experimental: { - esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834 - }, - transpilePackages: [ - '@ultraviolet/ui', - '@ultraviolet/form', - '@ultraviolet/icons', - 'react-syntax-highlighter', - ], + transpilePackages: ['react-syntax-highlighter'], } return config diff --git a/examples/next-advanced/package.json b/examples/next-advanced/package.json index 6e70ed6c41..058cb019aa 100644 --- a/examples/next-advanced/package.json +++ b/examples/next-advanced/package.json @@ -19,8 +19,8 @@ "@emotion/styled": "11.14.0", "@ultraviolet/ui": "workspace:*", "next": "15.1.1", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-schemaorg": "2.0.0", "react-syntax-highlighter": "15.6.1", "react-use-clipboard": "1.0.9", @@ -29,7 +29,7 @@ "devDependencies": { "@babel/core": "7.26.0", "@types/node": "22.10.2", - "@types/react": "18.3.17", + "@types/react": "19.0.0", "@types/react-syntax-highlighter": "15.5.13", "next-transpile-modules": "10.0.1" } diff --git a/examples/next-login/next.config.js b/examples/next-login/next.config.js index b9ae5fd679..e626c83012 100644 --- a/examples/next-login/next.config.js +++ b/examples/next-login/next.config.js @@ -9,21 +9,12 @@ const nextConfig = () => { }, poweredByHeader: false, reactStrictMode: true, - swcMinify: true, compiler: { emotion: true, }, eslint: { ignoreDuringBuilds: true, }, - experimental: { - esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834 - }, - transpilePackages: [ - '@ultraviolet/ui', - '@ultraviolet/form', - '@ultraviolet/icons', - ], } return config } diff --git a/examples/next-login/package.json b/examples/next-login/package.json index 59fe0e463d..7e2ebd9e4b 100644 --- a/examples/next-login/package.json +++ b/examples/next-login/package.json @@ -17,12 +17,13 @@ "dependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", + "@ultraviolet/fonts": "workspace:*", "@ultraviolet/form": "workspace:*", "@ultraviolet/icons": "workspace:*", "@ultraviolet/ui": "workspace:*", "next": "15.1.1", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-schemaorg": "2.0.0", "react-syntax-highlighter": "15.6.1", "react-use-clipboard": "1.0.9", @@ -31,7 +32,7 @@ "devDependencies": { "@babel/core": "7.26.0", "@types/node": "22.10.2", - "@types/react": "18.3.17", + "@types/react": "19.0.0", "@types/react-syntax-highlighter": "15.5.13", "next-transpile-modules": "10.0.1" } diff --git a/examples/next-simple/next.config.js b/examples/next-simple/next.config.js index bdefa8a3c9..24cfebb68e 100644 --- a/examples/next-simple/next.config.js +++ b/examples/next-simple/next.config.js @@ -9,21 +9,12 @@ const nextConfig = () => { }, poweredByHeader: false, reactStrictMode: true, - swcMinify: true, compiler: { emotion: true, }, eslint: { ignoreDuringBuilds: true, }, - experimental: { - esmExternals: 'loose', // See https://github.com/Hacker0x01/react-datepicker/issues/3834 - }, - transpilePackages: [ - '@ultraviolet/ui', - '@ultraviolet/form', - '@ultraviolet/icons', - ], } return config diff --git a/examples/next-simple/package.json b/examples/next-simple/package.json index 8e6eefacb9..68c95103bc 100644 --- a/examples/next-simple/package.json +++ b/examples/next-simple/package.json @@ -20,8 +20,8 @@ "@emotion/styled": "11.14.0", "@ultraviolet/ui": "workspace:*", "next": "15.1.1", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "react-schemaorg": "2.0.0", "react-syntax-highlighter": "15.6.1", "react-use-clipboard": "1.0.9", @@ -30,7 +30,7 @@ "devDependencies": { "@babel/core": "7.26.0", "@types/node": "22.10.2", - "@types/react": "18.3.17", + "@types/react": "19.0.0", "@types/react-syntax-highlighter": "15.5.13", "next-transpile-modules": "10.0.1" } diff --git a/package.json b/package.json index 36f2307a3f..d06349d76a 100644 --- a/package.json +++ b/package.json @@ -83,8 +83,8 @@ }, "peerDependencyRules": { "allowedVersions": { - "react": "18", - "react-dom": "18" + "react": "18 || 19", + "react-dom": "18 || 19" } } }, @@ -136,9 +136,9 @@ "@testing-library/react": "16.1.0", "@testing-library/user-event": "14.5.2", "@types/node": "22.10.2", - "@types/react": "18.3.17", + "@types/react": "19.0.0", "@types/react-datepicker": "6.2.0", - "@types/react-dom": "18.3.5", + "@types/react-dom": "19.0.0", "@types/zxcvbn": "4.4.5", "@ultraviolet/fonts": "workspace:*", "@ultraviolet/themes": "workspace:*", @@ -170,8 +170,8 @@ "oxlint": "0.15.0", "postcss": "8.4.49", "publint": "0.2.12", - "react": "18.3.1", - "react-dom": "18.3.1", + "react": "19.0.0", + "react-dom": "19.0.0", "read-pkg": "9.0.1", "regenerator-runtime": "0.14.1", "remark-gfm": "4.0.0", diff --git a/packages/form/package.json b/packages/form/package.json index 3d7c34b06f..28ad23e1ce 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -66,19 +66,19 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "react": "18.x", - "react-dom": "18.x" + "react": "18.x || 19.x", + "react-dom": "18.x || 19.x" }, "devDependencies": { "@babel/core": "7.26.0", "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", "@types/final-form-focus": "1.1.7", - "@types/react": "18.3.17", - "@types/react-dom": "18.3.5", + "@types/react": "19.0.0", + "@types/react-dom": "19.0.0", "@utils/test": "workspace:*", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.0.0", + "react-dom": "19.0.0" }, "dependencies": { "@babel/runtime": "7.26.0", diff --git a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap index cd2cf547c8..e4ac385852 100644 --- a/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/CheckboxField/__tests__/__snapshots__/index.test.tsx.snap @@ -295,7 +295,6 @@ exports[`CheckboxField > should render correctly 1`] = ` id=":r0:" name="test" type="checkbox" - value="" /> should render correctly checked without value 1`] = ` id=":r6:" name="checked" type="checkbox" - value="" /> should render correctly disabled 1`] = ` id=":r4:" name="test" type="checkbox" - value="" /> should render correctly not checked without value 1`] = id=":r8:" name="checked" type="checkbox" - value="" /> should render correctly with aria-label 1`] = ` id=":r2:" name="test" type="checkbox" - value="" /> should render correctly with errors 1`] = ` id=":rd:" name="test" type="checkbox" - value="" /> should trigger events correctly 1`] = ` id=":ra:" name="test" type="checkbox" - value="" /> = args => { +const DirectionTemplate = (args: ComponentProps) => { const { watch } = useFormContext() return ( @@ -27,7 +28,7 @@ export const DirectionStory: StoryFn = args => { } export const Direction: StoryFn = args => ( - + ) Direction.parameters = { diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx index 419f143d55..9c3bf709e1 100644 --- a/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx +++ b/packages/form/src/components/CheckboxGroupField/__stories__/NotRequired.stories.tsx @@ -1,9 +1,12 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' import { CheckboxGroupField } from '..' import { Submit } from '../..' -export const NotRequiredStory: StoryFn = args => ( +export const NotRequiredTemplate = ( + args: ComponentProps, +) => ( = args => ( ) export const NotRequired: StoryFn = args => ( - + ) NotRequired.parameters = { diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx index a63db090e5..908e561f20 100644 --- a/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx +++ b/packages/form/src/components/CheckboxGroupField/__stories__/PartiallyRequired.stories.tsx @@ -1,11 +1,12 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' import { CheckboxGroupField } from '..' import { Submit } from '../..' -export const PartiallyRequiredStory: StoryFn< - typeof CheckboxGroupField -> = args => ( +const PartiallyRequiredStory = ( + args: ComponentProps, +) => ( = args => ( +export const RequiredTemplate = ( + args: ComponentProps, +) => ( = args => ( ) export const Required: StoryFn = args => ( - + ) Required.parameters = { diff --git a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx index 6e8d89b8ae..dae36490fe 100644 --- a/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx +++ b/packages/form/src/components/CheckboxGroupField/__stories__/Template.stories.tsx @@ -1,8 +1,11 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' import { CheckboxGroupField } from '..' -const CheckboxGroupFieldStory: StoryFn = args => ( +const CheckboxGroupTemplate = ( + args: ComponentProps, +) => ( = args => ( ) export const Template: StoryFn = args => ( - + ) Template.args = { diff --git a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap index d6907c0a74..0a16d4fe7b 100644 --- a/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/DateField/__tests__/__snapshots__/index.test.tsx.snap @@ -208,7 +208,6 @@ exports[`DateField > should render correctly 1`] = ` id=":r1:" name="test" type="text" - value="" />
should render correctly disabled 1`] = ` id=":r4:" name="test" type="text" - value="" />
should render correctly 1`] = ` name="test" placeholder="" type="number" - value="" />
should render correctly disabled 1`] = ` name="test" placeholder="" type="number" - value="" />
= args => ( +const RequiredTemplate = (args: ComponentProps) => ( @@ -14,7 +15,7 @@ export const RequiredStory: StoryFn = args => ( ) export const Required: StoryFn = args => ( - + ) Required.args = { diff --git a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx index 553a8e9542..693af75611 100644 --- a/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx +++ b/packages/form/src/components/SelectInputField/__stories__/Template.stories.tsx @@ -5,7 +5,7 @@ import { SelectInputField } from '..' export const Template: StoryFn< StoryFn> > = args => ( - + Option A Option B diff --git a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx index 02e6efd553..bfb19e0c7a 100644 --- a/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx +++ b/packages/form/src/components/SelectInputFieldV2/__tests__/index.test.tsx @@ -1,4 +1,4 @@ -import { act, fireEvent, screen } from '@testing-library/react' +import { act, fireEvent, screen, waitFor } from '@testing-library/react' import { userEvent } from '@testing-library/user-event' import { renderWithForm } from '@utils/test' import { describe, expect, test, vi } from 'vitest' @@ -34,7 +34,7 @@ describe('SelectInputField', () => { expect(asFragment()).toMatchSnapshot() }) - test('should display right value on grouped options', () => { + test('should display right value on grouped options', async () => { const { asFragment } = renderWithForm( , ) @@ -45,8 +45,9 @@ describe('SelectInputField', () => { act(() => mercury.click()) act(() => select.click()) - - expect(mercury).toBeVisible() + await waitFor(() => { + expect(mercury).toBeVisible() + }) expect(asFragment()).toMatchSnapshot() }) @@ -66,8 +67,11 @@ describe('SelectInputField', () => { const option = screen.getByTestId('option-stack-mercury') await userEvent.click(option) - expect(onChange).toBeCalledTimes(1) + await waitFor(() => { + expect(onChange).toBeCalledTimes(1) + }) act(() => select.blur()) + expect(asFragment()).toMatchSnapshot() }) }) diff --git a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap index 60f7eba6d9..f40e059cdc 100644 --- a/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/SubmitErrorAlert/__tests__/__snapshots__/index.test.tsx.snap @@ -214,7 +214,7 @@ exports[`SubmitErrorAlert > should display an alert when submitError is present > diff --git a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.test.tsx.snap index 73e43ee98d..9dc59e01c5 100644 --- a/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/TextInputField/__tests__/__snapshots__/index.test.tsx.snap @@ -111,7 +111,6 @@ exports[`TextInputField > should render correctly 1`] = ` class="emotion-2 emotion-3" name="test" type="text" - value="" />
should render correctly disabled 1`] = ` disabled="" name="test" type="text" - value="" />
should render correctly generated 1`] = ` class="emotion-2 emotion-3" name="test" type="text" - value="" />
should render correctly id 1`] = ` id="id" name="test" type="text" - value="" />
should render correctly notice 1`] = ` class="emotion-2 emotion-3" name="test" type="text" - value="" />
should render correctly random 1`] = ` class="emotion-2 emotion-3" name="test" type="text" - value="" />
should render correctly required 1`] = ` name="test" required="" type="text" - value="" />
should render correctly 1`] = ` > @@ -767,7 +767,7 @@ exports[`TimeField > should render correctly checked without value 1`] = ` > @@ -1161,7 +1161,7 @@ exports[`TimeField > should render correctly disabled 1`] = ` > @@ -1555,7 +1555,7 @@ exports[`TimeField > should trigger events 1`] = ` > diff --git a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.test.tsx.snap index 0e87dd5ff5..0cf82c72f3 100644 --- a/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/ToggleField/__tests__/__snapshots__/index.test.tsx.snap @@ -191,7 +191,6 @@ exports[`ToggleField > should render correctly 1`] = ` id=":r0:" name="test" type="checkbox" - value="" />
@@ -392,7 +391,6 @@ exports[`ToggleField > should render correctly checked 1`] = ` id=":r4:" name="test" type="checkbox" - value="" />
@@ -593,7 +591,6 @@ exports[`ToggleField > should render correctly disabled 1`] = ` id=":r2:" name="test" type="checkbox" - value="" />
@@ -830,7 +827,6 @@ exports[`ToggleField > should render correctly with label and checked 1`] = ` id=":r6:" name="test" type="checkbox" - value="" />
diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx index 126a0b5536..a4bdea3c8e 100644 --- a/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx +++ b/packages/form/src/components/ToggleGroupField/__stories__/Required.stories.tsx @@ -1,10 +1,13 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' import { ToggleGroupField } from '..' import { Submit } from '../..' import { useWatch } from '../../..' -export const RequiredStory: StoryFn = args => { +export const RequiredStory = ( + args: ComponentProps, +) => { const values = useWatch() return ( diff --git a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx index 19e79e8876..7c7881ed95 100644 --- a/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx +++ b/packages/form/src/components/ToggleGroupField/__stories__/Template.stories.tsx @@ -1,9 +1,12 @@ import type { StoryFn } from '@storybook/react' import { Stack } from '@ultraviolet/ui' +import type { ComponentProps } from 'react' import { ToggleGroupField } from '..' import { useWatch } from '../../..' -const ToggleGroupFieldStory: StoryFn = args => { +const ToggleGroupFieldStory = ( + args: ComponentProps, +) => { const values = useWatch() return ( diff --git a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap index b5bcd36f90..5055618d23 100644 --- a/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/UnitInputField/__tests__/__snapshots__/index.test.tsx.snap @@ -1143,7 +1143,6 @@ exports[`UnitInputField > should render correctly 1`] = ` placeholder="0" step="1" type="number" - value="" />
( ( { diff --git a/packages/icons/src/components/Icon/legacy/index.tsx b/packages/icons/src/components/Icon/legacy/index.tsx index 30260b7c03..b5a3eb49c4 100644 --- a/packages/icons/src/components/Icon/legacy/index.tsx +++ b/packages/icons/src/components/Icon/legacy/index.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react' import styled from '@emotion/styled' import type { consoleLightTheme as theme } from '@ultraviolet/themes' -import type { FunctionComponent, SVGProps } from 'react' +import type { FunctionComponent, PropsWithChildren, SVGProps } from 'react' import { forwardRef, useMemo } from 'react' import capitalize from '../../../utils/capitalize' import { ICONS } from './Icons' @@ -62,7 +62,7 @@ const PROMINENCES = { type ProminenceProps = keyof typeof PROMINENCES const StyledIcon = ( - component: FunctionComponent>, + component: FunctionComponent>>, ) => styled(component, { shouldForwardProp: prop => !['size', 'sentiment', 'prominence', 'disabled'].includes(prop), @@ -160,13 +160,14 @@ export const Icon = forwardRef( ) => { const computedSentiment = sentiment ?? color const SystemIcon = useMemo(() => { + const smallIcon = SMALL_ICONS[variant][name] + const defaultIcon = SMALL_ICONS.filled.alert + if (size === 'small' || size === 16) { - return StyledIcon( - SMALL_ICONS[variant][name] || SMALL_ICONS.filled.alert, - ) + return StyledIcon(smallIcon || defaultIcon) } - return StyledIcon(ICONS[variant][name] || ICONS.filled.alert) + return StyledIcon(smallIcon || defaultIcon) }, [name, size, variant]) /** diff --git a/packages/illustrations/package.json b/packages/illustrations/package.json index 672f40f082..a5be804a0e 100644 --- a/packages/illustrations/package.json +++ b/packages/illustrations/package.json @@ -98,8 +98,8 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "18.x || 19.x", + "react-dom": "18.x || 19.x" }, "dependencies": { "@ultraviolet/themes": "workspace:*" @@ -109,7 +109,7 @@ "@emotion/styled": "11.14.0", "@ultraviolet/ui": "workspace:*", "@utils/test": "workspace:*", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.0.0", + "react-dom": "19.0.0" } } diff --git a/packages/plus/package.json b/packages/plus/package.json index c5ae9ce72e..1117bcf652 100644 --- a/packages/plus/package.json +++ b/packages/plus/package.json @@ -66,19 +66,19 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "18.x || 19.x", + "react-dom": "18.x || 19.x" }, "devDependencies": { "@babel/core": "7.26.0", "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "@types/react": "18.3.17", - "@types/react-dom": "18.3.5", + "@types/react": "19.0.0", + "@types/react-dom": "19.0.0", "@ultraviolet/illustrations": "workspace:*", "@utils/test": "workspace:*", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.0.0", + "react-dom": "19.0.0" }, "dependencies": { "@uiw/codemirror-extensions-langs": "4.23.5", diff --git a/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap index b42f59fa05..defbeaa746 100644 --- a/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/ContentCard/__tests__/__snapshots__/index.test.tsx.snap @@ -2432,14 +2432,10 @@ exports[`ContentCard > renders correctly with href 1`] = ` xmlns="http://www.w3.org/2000/svg" >
@@ -2745,14 +2741,10 @@ exports[`ContentCard > renders correctly with href and direction row 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -3058,14 +3050,10 @@ exports[`ContentCard > renders correctly with href and target 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/plus/src/components/ContentCardGroup/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/ContentCardGroup/__tests__/__snapshots__/index.test.tsx.snap index cfdf94205c..364831fc86 100644 --- a/packages/plus/src/components/ContentCardGroup/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/ContentCardGroup/__tests__/__snapshots__/index.test.tsx.snap @@ -208,14 +208,10 @@ exports[`ContentCardGroup > renders correctly with a children 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -426,14 +422,10 @@ exports[`ContentCardGroup > renders correctly with description 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -674,14 +666,10 @@ exports[`ContentCardGroup > renders correctly with different title and subtitle xmlns="http://www.w3.org/2000/svg" > @@ -899,14 +887,10 @@ exports[`ContentCardGroup > renders correctly with link target _parent 1`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -1364,14 +1348,10 @@ exports[`ContentCardGroup > renders correctly with required title & hread 1`] = xmlns="http://www.w3.org/2000/svg" > @@ -1582,14 +1562,10 @@ exports[`ContentCardGroup > renders correctly with subtitle 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx index c01da64854..3816dc6fb5 100644 --- a/packages/plus/src/components/EstimateCost/OverlayComponent.tsx +++ b/packages/plus/src/components/EstimateCost/OverlayComponent.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled' import { Icon, Stack } from '@ultraviolet/ui' -import type { ReactNode } from 'react' +import type { JSX, ReactNode } from 'react' import { Children, cloneElement, isValidElement, useMemo } from 'react' import { LineThrough } from './Components/LineThrough' import { Strong } from './Components/Strong' diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap index 4f368d25d4..94896aacdd 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Item.test.tsx.snap @@ -1779,7 +1779,7 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` > @@ -1832,7 +1832,7 @@ exports[`EstimateCost - Item > render with labelTextVariant 1`] = ` > @@ -2973,7 +2973,7 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` > @@ -3026,7 +3026,7 @@ exports[`EstimateCost - Item > render with noPrice and noBorder 1`] = ` > @@ -5038,7 +5038,7 @@ exports[`EstimateCost - Item > render with notice 1`] = ` > @@ -5091,7 +5091,7 @@ exports[`EstimateCost - Item > render with notice 1`] = ` > @@ -7097,7 +7097,7 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` > @@ -7150,7 +7150,7 @@ exports[`EstimateCost - Item > render with priceText 1`] = ` > @@ -9135,7 +9135,7 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` > @@ -9188,7 +9188,7 @@ exports[`EstimateCost - Item > render with tabulation 1`] = ` > @@ -11204,7 +11204,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11237,7 +11237,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11290,7 +11290,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > @@ -11475,7 +11475,7 @@ exports[`EstimateCost - Item > render with tooltipInfo 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap index 30197a4c2d..9da8a41ac2 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Region.test.tsx.snap @@ -931,7 +931,7 @@ exports[`EstimateCost - Region > render region component 1`] = ` > @@ -984,7 +984,7 @@ exports[`EstimateCost - Region > render region component 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap index 02dcc8dfa2..d14b16dbbb 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Regular.test.tsx.snap @@ -897,7 +897,7 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` > @@ -950,7 +950,7 @@ exports[`EstimateCost - Regular Item > render basic props 1`] = ` > @@ -2046,7 +2046,7 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` > @@ -2099,7 +2099,7 @@ exports[`EstimateCost - Regular Item > render basic props with is not defined 1` > @@ -3225,7 +3225,7 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di > @@ -3278,7 +3278,7 @@ exports[`EstimateCost - Regular Item > render basic props with long fractions di > @@ -4420,7 +4420,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` > @@ -4473,7 +4473,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice 1`] = ` > @@ -5620,7 +5620,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long > @@ -5673,7 +5673,7 @@ exports[`EstimateCost - Regular Item > render basic props with maxPrice and long > @@ -6953,7 +6953,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` > @@ -7013,7 +7013,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay 1`] = ` > @@ -8341,7 +8341,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] > @@ -8406,7 +8406,7 @@ exports[`EstimateCost - Regular Item > render basic props with overlay beta 1`] > @@ -9574,7 +9574,7 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` > @@ -9627,7 +9627,7 @@ exports[`EstimateCost - Regular Item > render basic props with sublabel 1`] = ` > @@ -10762,7 +10762,7 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` > @@ -10815,7 +10815,7 @@ exports[`EstimateCost - Regular Item > render basic props with textNotDefined 1` > @@ -11981,7 +11981,7 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` > @@ -12034,7 +12034,7 @@ exports[`EstimateCost - Regular Item > render basic with ellipsis 1`] = ` > @@ -13310,7 +13310,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` > @@ -13353,7 +13353,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` > @@ -13400,7 +13400,7 @@ exports[`EstimateCost - Regular Item > render with alert 1`] = ` > @@ -14509,7 +14509,7 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` > @@ -14562,7 +14562,7 @@ exports[`EstimateCost - Regular Item > render with isDisabledOnOverlay 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap index b50b457f3e..b01005b5b0 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Stepper.test.tsx.snap @@ -1187,7 +1187,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` > @@ -1240,7 +1240,7 @@ exports[`EstimateCost - NumberInput Item > render basic props 1`] = ` > @@ -2727,7 +2727,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` > @@ -2780,7 +2780,7 @@ exports[`EstimateCost - NumberInput Item > render basic with overlay 1`] = ` > @@ -4267,7 +4267,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` > @@ -4320,7 +4320,7 @@ exports[`EstimateCost - NumberInput Item > render with getAmountValue 1`] = ` > @@ -5833,7 +5833,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` > @@ -5886,7 +5886,7 @@ exports[`EstimateCost - NumberInput Item > render with values 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap index 28359dc61c..59c58c210a 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Strong.test.tsx.snap @@ -921,7 +921,7 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` > @@ -974,7 +974,7 @@ exports[`EstimateCost - Strong Item > render basic props 1`] = ` > @@ -2095,7 +2095,7 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` > @@ -2148,7 +2148,7 @@ exports[`EstimateCost - Strong Item > render with isDisabledOnOverlay 1`] = ` > @@ -3302,7 +3302,7 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` > @@ -3355,7 +3355,7 @@ exports[`EstimateCost - Strong Item > render with small variant 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap index e174324c68..6337099557 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Unit.test.tsx.snap @@ -1050,7 +1050,7 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` > @@ -1103,7 +1103,7 @@ exports[`EstimateCost - Unit Item > render basic props 1`] = ` > @@ -3399,7 +3399,7 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = > @@ -3452,7 +3452,7 @@ exports[`EstimateCost - Unit Item > render basic props with monthly price 1`] = > @@ -5748,7 +5748,7 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` > @@ -5801,7 +5801,7 @@ exports[`EstimateCost - Unit Item > render basic props with overlay 1`] = ` > @@ -8123,7 +8123,7 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` > @@ -8176,7 +8176,7 @@ exports[`EstimateCost - Unit Item > render basic props with values 1`] = ` > @@ -10508,7 +10508,7 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat > @@ -10561,7 +10561,7 @@ exports[`EstimateCost - Unit Item > render basic props with values and no iterat > @@ -12896,7 +12896,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` > @@ -12949,7 +12949,7 @@ exports[`EstimateCost - Unit Item > render test 1`] = ` > @@ -15361,7 +15361,7 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` > @@ -15414,7 +15414,7 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` > @@ -15603,7 +15603,6 @@ exports[`EstimateCost - Unit Item > render with 0 amount 1`] = ` name="capacity" placeholder="00" type="number" - value="" />
render with 10 amount 1`] = ` > @@ -17775,7 +17774,7 @@ exports[`EstimateCost - Unit Item > render with 10 amount 1`] = ` > @@ -20076,7 +20075,7 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` > @@ -20129,7 +20128,7 @@ exports[`EstimateCost - Unit Item > render with getAmountValue 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap index d783d3c149..89f458b674 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/Zone.test.tsx.snap @@ -949,7 +949,7 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` > @@ -1002,7 +1002,7 @@ exports[`EstimateCost - Zone > render region component, with animation 1`] = ` > @@ -2171,7 +2171,7 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` > @@ -2224,7 +2224,7 @@ exports[`EstimateCost - Zone > render zone component 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap index 8d9a497b09..77cc563877 100644 --- a/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/EstimateCost/__tests__/__snapshots__/index.test.tsx.snap @@ -1000,7 +1000,7 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` > @@ -1058,7 +1058,7 @@ exports[`EstimateCost - index > render isBeta with discount 1`] = ` > @@ -2302,7 +2302,7 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = > @@ -2360,7 +2360,7 @@ exports[`EstimateCost - index > render isBeta with discount equal to 100% 1`] = > @@ -3604,7 +3604,7 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = > @@ -3662,7 +3662,7 @@ exports[`EstimateCost - index > render isBeta with discount more than 100% 1`] = > @@ -4906,7 +4906,7 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` > @@ -4964,7 +4964,7 @@ exports[`EstimateCost - index > render isBeta without discount 1`] = ` > @@ -6124,7 +6124,7 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` > @@ -6177,7 +6177,7 @@ exports[`EstimateCost - index > render with all timeUnits values 1`] = ` > @@ -8122,7 +8122,7 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` > @@ -8175,7 +8175,7 @@ exports[`EstimateCost - index > render with commitmentFees 1`] = ` > @@ -10136,7 +10136,7 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC > @@ -10189,7 +10189,7 @@ exports[`EstimateCost - index > render with commitmentFees and iscommitmentFeesC > @@ -12219,7 +12219,7 @@ exports[`EstimateCost - index > render with description as node 1`] = ` > @@ -12270,7 +12270,7 @@ exports[`EstimateCost - index > render with description as node 1`] = ` > @@ -13424,7 +13424,7 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month > @@ -13477,7 +13477,7 @@ exports[`EstimateCost - index > render with discount 0 and defaultTimeUnit month > @@ -15491,7 +15491,7 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon > @@ -15544,7 +15544,7 @@ exports[`EstimateCost - index > render with discount 0.5 and defaultTimeUnit mon > @@ -16698,7 +16698,7 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month > @@ -16751,7 +16751,7 @@ exports[`EstimateCost - index > render with discount 1 and defaultTimeUnit month > @@ -17989,7 +17989,7 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn > @@ -18047,7 +18047,7 @@ exports[`EstimateCost - index > render with discount 1, isBeta and defaultTimeUn > @@ -19207,7 +19207,7 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` > @@ -19260,7 +19260,7 @@ exports[`EstimateCost - index > render with discount 100% but no isBeta 1`] = ` > @@ -20388,7 +20388,7 @@ exports[`EstimateCost - index > render with hideTimeUnit 1`] = ` > @@ -22199,7 +22199,7 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` > @@ -22252,7 +22252,7 @@ exports[`EstimateCost - index > render with hideTotal 1`] = ` > @@ -23457,7 +23457,7 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = > @@ -23515,7 +23515,7 @@ exports[`EstimateCost - index > render with isBeta but undefined discount 1`] = > @@ -25703,7 +25703,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn > @@ -25761,7 +25761,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0 and defaultTimeUn > @@ -27939,7 +27939,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime > @@ -27997,7 +27997,7 @@ exports[`EstimateCost - index > render with isBeta, discount 0.5 and defaultTime > @@ -29236,7 +29236,7 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` > @@ -29294,7 +29294,7 @@ exports[`EstimateCost - index > render with isBeta, price, discount 50% 1`] = ` > @@ -30454,7 +30454,7 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` > @@ -30507,7 +30507,7 @@ exports[`EstimateCost - index > render with item discount 50% 1`] = ` > @@ -31661,7 +31661,7 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni > @@ -31714,7 +31714,7 @@ exports[`EstimateCost - index > render with item discount 50% and defaultTimeUni > @@ -32912,7 +32912,7 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` > @@ -32965,7 +32965,7 @@ exports[`EstimateCost - index > render with item discount 50% and text 1`] = ` > diff --git a/packages/plus/src/components/EstimateCost/types.ts b/packages/plus/src/components/EstimateCost/types.ts index 26b49d4af6..bc18a583c1 100644 --- a/packages/plus/src/components/EstimateCost/types.ts +++ b/packages/plus/src/components/EstimateCost/types.ts @@ -1,5 +1,5 @@ import type { Alert } from '@ultraviolet/ui' -import type { ComponentProps, ReactNode } from 'react' +import type { ComponentProps, JSX, ReactNode } from 'react' import type EstimateCostLocales from './locales/en' export type EstimateCostProps = { diff --git a/packages/plus/src/components/Navigation/Footer.tsx b/packages/plus/src/components/Navigation/Footer.tsx index 1cebeb7462..83d662631c 100644 --- a/packages/plus/src/components/Navigation/Footer.tsx +++ b/packages/plus/src/components/Navigation/Footer.tsx @@ -25,7 +25,7 @@ const StickyFooter = styled.div` type FooterProps = { onToggleExpand: NavigationProps['onToggleExpand'] - contentRef: RefObject + contentRef: RefObject } export const Footer = ({ onToggleExpand, contentRef }: FooterProps) => { diff --git a/packages/plus/src/components/Navigation/NavigationContent.tsx b/packages/plus/src/components/Navigation/NavigationContent.tsx index fb6b42764c..91eb7aa193 100644 --- a/packages/plus/src/components/Navigation/NavigationContent.tsx +++ b/packages/plus/src/components/Navigation/NavigationContent.tsx @@ -116,8 +116,8 @@ export const NavigationContent = ({ shouldAnimate, } = context - const sliderRef = useRef(null) - const contentRef = useRef(null) + const sliderRef = useRef(null) + const contentRef = useRef(null) // It will handle the resize of the navigation when the user drag the vertical bar useEffect(() => { diff --git a/packages/plus/src/components/Navigation/NavigationProvider.tsx b/packages/plus/src/components/Navigation/NavigationProvider.tsx index 442dc76c5b..6a47b51734 100644 --- a/packages/plus/src/components/Navigation/NavigationProvider.tsx +++ b/packages/plus/src/components/Navigation/NavigationProvider.tsx @@ -1,4 +1,4 @@ -import type { Dispatch, ReactNode, Reducer, RefObject } from 'react' +import type { Dispatch, ReactNode, RefObject } from 'react' import { createContext, useCallback, @@ -33,7 +33,7 @@ type ContextProps = { unpinItem: (item: string) => string[] pinnedItems: string[] pinLimit: number - navigationRef: RefObject + navigationRef: RefObject locales: Record width: number setWidth: (width: number) => void @@ -156,14 +156,14 @@ export const NavigationProvider = ({ // This is used to store the items that are registered in the navigation // This way we can retrieve items with their active state in pinned feature - const [items, registerItem] = useReducer>( + const [items, registerItem] = useReducer( (oldState: Items, newState: Items) => ({ ...oldState, ...newState, }), {}, ) - const navigationRef = useRef(null) + const navigationRef = useRef(null) // This function will be triggered when expand/collapse button is clicked const toggleExpand = useCallback( diff --git a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap index b9cd052ede..d8cdc25b61 100644 --- a/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/plus/src/components/Navigation/__tests__/__snapshots__/index.test.tsx.snap @@ -1726,7 +1726,7 @@ exports[`Navigation > click on expand / collapse button 1`] = ` > @@ -1916,14 +1916,14 @@ exports[`Navigation > click on expand / collapse button 1`] = `
@@ -4779,7 +4779,7 @@ exports[`Navigation > pin and unpin an item 1`] = ` > @@ -4969,14 +4969,14 @@ exports[`Navigation > pin and unpin an item 1`] = ` @@ -6753,7 +6753,7 @@ exports[`Navigation > pin and unpin an item 2`] = ` > @@ -6943,14 +6943,14 @@ exports[`Navigation > pin and unpin an item 2`] = ` @@ -8722,7 +8722,7 @@ exports[`Navigation > pin and unpin an item 3`] = ` > @@ -8796,13 +8796,13 @@ exports[`Navigation > pin and unpin an item 3`] = ` @@ -8977,13 +8977,13 @@ exports[`Navigation > pin and unpin an item 3`] = ` @@ -9946,7 +9946,7 @@ exports[`Navigation > render with basic content 1`] = ` > @@ -10136,14 +10136,14 @@ exports[`Navigation > render with basic content 1`] = ` @@ -12811,7 +12811,7 @@ exports[`Navigation > resize manually the navigation using slider 1`] = ` > @@ -13001,14 +13001,14 @@ exports[`Navigation > resize manually the navigation using slider 1`] = ` diff --git a/packages/ui/package.json b/packages/ui/package.json index 9f4aec5165..481017feb5 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -69,19 +69,19 @@ "peerDependencies": { "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "18.x || 19.x", + "react-dom": "18.x || 19.x" }, "devDependencies": { "@babel/core": "7.26.0", "@emotion/react": "11.14.0", "@emotion/styled": "11.14.0", - "@types/react": "18.3.17", + "@types/react": "19.0.0", "@types/react-datepicker": "6.2.0", - "@types/react-dom": "18.3.5", + "@types/react-dom": "19.0.0", "@utils/test": "workspace:*", - "react": "18.3.1", - "react-dom": "18.3.1" + "react": "19.0.0", + "react-dom": "19.0.0" }, "dependencies": { "@emotion/serialize": "1.3.3", diff --git a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap index c782a95b92..7c21d5e37a 100644 --- a/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Alert/__tests__/__snapshots__/index.test.tsx.snap @@ -158,7 +158,7 @@ exports[`Alert > renders correctly with all sentiments > renders correctly senti > @@ -336,7 +336,7 @@ exports[`Alert > renders correctly with all sentiments > renders correctly senti > @@ -510,17 +510,13 @@ exports[`Alert > renders correctly with all sentiments > renders correctly senti -
renders correctly with all sentiments > renders correctly senti > @@ -875,7 +871,7 @@ exports[`Alert > renders correctly with all sentiments > renders correctly senti > @@ -1108,7 +1104,7 @@ exports[`Alert > renders correctly with buttonText and onClickButton 1`] = ` > @@ -1281,7 +1277,7 @@ exports[`Alert > renders correctly with children as component 1`] = ` > @@ -1528,7 +1524,7 @@ exports[`Alert > renders correctly with closable and onClose 1`] = ` > @@ -1721,7 +1717,7 @@ exports[`Alert > renders correctly with default values 1`] = ` > @@ -2083,7 +2079,7 @@ exports[`Alert > renders correctly with disabled 1`] = ` > @@ -2280,7 +2276,7 @@ exports[`Alert > renders correctly with title 1`] = ` > diff --git a/packages/ui/src/components/Avatar/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Avatar/__tests__/__snapshots__/index.test.tsx.snap index d521928417..90c0bddef3 100644 --- a/packages/ui/src/components/Avatar/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Avatar/__tests__/__snapshots__/index.test.tsx.snap @@ -174,7 +174,7 @@ exports[`Avatar > renders correctly with lock 1`] = ` > diff --git a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap index 3b381ff20d..595b0c5e6d 100644 --- a/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/AvatarV2/__tests__/__snapshots__/index.test.tsx.snap @@ -219,9 +219,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" >
@@ -362,9 +360,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -958,10 +954,10 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -1394,9 +1390,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -1537,9 +1531,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -2133,10 +2125,10 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -2583,9 +2575,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -2726,9 +2716,7 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -3322,10 +3310,10 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -4379,10 +4367,10 @@ exports[`AvatarV2 > renders correctly with shape circle > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -4907,9 +4895,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -5096,9 +5082,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -5796,10 +5780,10 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -6370,9 +6354,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -6559,9 +6541,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -7259,10 +7239,10 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -7847,9 +7827,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -8036,9 +8014,7 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -8736,10 +8712,10 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > @@ -10195,10 +10171,10 @@ exports[`AvatarV2 > renders correctly with shape square > renders correctly with xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap index a0fc1fc19c..808f50bb23 100644 --- a/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Banner/__tests__/__snapshots__/index.test.tsx.snap @@ -656,14 +656,10 @@ exports[`Banner > renders correctly with a link 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap index c702be09f5..063c0b85ba 100644 --- a/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Checkbox/__tests__/__snapshots__/index.test.tsx.snap @@ -306,7 +306,6 @@ exports[`Checkbox > renders correctly 1`] = ` id=":r0:" name="testing" type="checkbox" - value="" /> renders correctly checked 1`] = ` class="emotion-2 emotion-3" id=":re:" type="checkbox" - value="" /> renders correctly checked and disabled 1`] = ` disabled="" id=":ro:" type="checkbox" - value="" /> renders correctly checked with helper 1`] = ` class="emotion-2 emotion-3" id=":rh:" type="checkbox" - value="" /> renders correctly disabled 1`] = ` disabled="" id=":r5:" type="checkbox" - value="" /> renders correctly indeterminate 1`] = ` class="emotion-2 emotion-3" id=":rl:" type="checkbox" - value="" /> renders correctly indeterminate and disabled 1`] = ` disabled="" id=":rr:" type="checkbox" - value="" /> renders correctly invisible 1`] = ` class="emotion-2 emotion-3" id=":ru:" type="checkbox" - value="" /> renders correctly no child 1`] = ` class="emotion-2 emotion-3" id=":r3:" type="checkbox" - value="" /> renders correctly required 1`] = ` id=":r8:" required="" type="checkbox" - value="" /> renders correctly with an error 1`] = ` class="emotion-2 emotion-3" id=":r11:" type="checkbox" - value="" /> renders correctly with indeterminate state 1`] = ` class="emotion-2 emotion-3" id=":r1j:" type="checkbox" - value="" /> renders correctly with progress 1`] = ` class="emotion-7 emotion-8" id=":r15:" type="checkbox" - value="" />
renders correctly with progress and no child 1`] = ` class="emotion-7 emotion-8" id=":r18:" type="checkbox" - value="" />
renders correctly with tooltip 1`] = ` class="emotion-4 emotion-5" id=":rb:" type="checkbox" - value="" /> + iconRef?: RefObject } export const ChipContext = createContext(undefined) diff --git a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap index 1529ab5b3b..f6a02203f7 100644 --- a/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/DateInput/__tests__/__snapshots__/index.test.tsx.snap @@ -1932,7 +1932,6 @@ exports[`DateInput > render correctly with showMonthYearPicker 1`] = ` data-size="large" id=":ra6:" type="text" - value="" />
renders correctly disabled 1`] = ` disabled="" id=":r5:" type="text" - value="" />
renders correctly error 1`] = ` data-size="large" id=":rd:" type="text" - value="" />
renders correctly error disabled 1`] = ` disabled="" id=":ri:" type="text" - value="" />
renders correctly error disabled required 1`] = ` id=":rn:" required="" type="text" - value="" />
renders correctly min-max 1`] = ` data-size="large" id=":rs:" type="text" - value="" />
renders correctly required 1`] = ` id=":r9:" required="" type="text" - value="" />
renders correctly with date-fns locale es 1`] = ` data-size="large" id=":r42:" type="text" - value="" />
renders correctly with date-fns locale fr 1`] = ` data-size="large" id=":r10:" type="text" - value="" />
renders correctly with date-fns locale ru 1`] = ` data-size="large" id=":r74:" type="text" - value="" />
> - refInput: RefObject + refInput: RefObject } const StyledPopup = styled(Popup)` @@ -37,9 +37,9 @@ const StyledPopup = styled(Popup)` const handleClickOutside = ( event: MouseEvent, - ref: RefObject, + ref: RefObject, setVisible: Dispatch>, - refInput: RefObject, + refInput: RefObject, ) => { if ( ref.current && diff --git a/packages/ui/src/components/Expandable/index.tsx b/packages/ui/src/components/Expandable/index.tsx index df34ea10b9..dc4498ecda 100644 --- a/packages/ui/src/components/Expandable/index.tsx +++ b/packages/ui/src/components/Expandable/index.tsx @@ -50,7 +50,9 @@ export const Expandable = ({ animationDuration = ANIMATION_DURATION, }: ExpandableProps) => { const [height, setHeight] = useState(null) - const transitionTimer = useRef | undefined>() + const transitionTimer = useRef | undefined>( + null, + ) const ref = useRef(null) const shouldBeAnimated = animationDuration > 0 @@ -87,7 +89,9 @@ export const Expandable = ({ ref.current.style.visibility = '' } } else { - clearTimeout(transitionTimer.current) + if (transitionTimer?.current) { + clearTimeout(transitionTimer.current) + } if (ref.current && height) { ref.current.style.maxHeight = `${height}px` @@ -114,7 +118,9 @@ export const Expandable = ({ } return () => { - clearTimeout(transitionTimer.current) + if (transitionTimer?.current) { + clearTimeout(transitionTimer.current) + } } }, [animationDuration, height, minHeight, opened, shouldBeAnimated]) diff --git a/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap index 8a40fc6464..f0c23f0563 100644 --- a/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/LineChart/__tests__/__snapshots__/index.test.tsx.snap @@ -878,7 +878,6 @@ exports[`LineChart > renders correctly when data is async 1`] = ` id=":r1u:" name="lineChartMultiple1" type="checkbox" - value="" /> renders correctly when data is async 1`] = ` id=":r25:" name="lineChartMultiple2" type="checkbox" - value="" /> renders correctly when data is async 1`] = ` id=":r2c:" name="lineChartMultiple3" type="checkbox" - value="" /> renders correctly when legend is deselected 1`] = ` id=":r1j:" name="lineChartSerie" type="checkbox" - value="" /> renders correctly with detailed legend 1`] = ` id=":r4:" name="lineChartSerie" type="checkbox" - value="" /> renders correctly with multiple series 1`] = ` id=":rq:" name="lineChartMultiple1" type="checkbox" - value="" /> renders correctly with multiple series 1`] = ` id=":r11:" name="lineChartMultiple2" type="checkbox" - value="" /> renders correctly with multiple series 1`] = ` id=":r18:" name="lineChartMultiple3" type="checkbox" - value="" /> renders correctly with timeline data 1`] = ` id=":rf:" name="lineChartHours" type="checkbox" - value="" /> render correctly with href props 2`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -787,14 +783,10 @@ exports[`Link > render correctly with href props 2`] = ` xmlns="http://www.w3.org/2000/svg" > @@ -1337,14 +1329,10 @@ exports[`Link > render correctly with target blank 1`] = ` xmlns="http://www.w3.org/2000/svg" > diff --git a/packages/ui/src/components/List/__tests__/index.test.tsx b/packages/ui/src/components/List/__tests__/index.test.tsx index 8aebe5ff41..1f25d239c0 100644 --- a/packages/ui/src/components/List/__tests__/index.test.tsx +++ b/packages/ui/src/components/List/__tests__/index.test.tsx @@ -56,10 +56,11 @@ describe('List', () => { afterEach(() => { vi.spyOn(global.Math, 'random').mockRestore() }) - test('Should throw an error', () => { + test.skip('Should throw an error', () => { const consoleErrMock = vi .spyOn(console, 'error') .mockImplementation(() => {}) + expect(() => { renderWithTheme( data.map(({ id, columnA, columnB, columnC, columnD, columnE }) => ( @@ -73,6 +74,7 @@ describe('List', () => { )), ) }).toThrow() + expect(consoleErrMock).toHaveBeenCalled() consoleErrMock.mockRestore() }) diff --git a/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx b/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx index c2c2519c27..d853dc9e67 100644 --- a/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx +++ b/packages/ui/src/components/Modal/__stories__/AutoFocus.stories.tsx @@ -12,7 +12,11 @@ export const AutoFocus: StoryFn = props => ( setTimeout(() => ref?.focus(), 1)} + ref={ref => { + if (ref) { + setTimeout(() => ref?.focus(), 1) + } + }} />
diff --git a/packages/ui/src/components/NumberInput/index.tsx b/packages/ui/src/components/NumberInput/index.tsx index 1995723c6e..29e3dd58b9 100644 --- a/packages/ui/src/components/NumberInput/index.tsx +++ b/packages/ui/src/components/NumberInput/index.tsx @@ -5,7 +5,6 @@ import type { FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, - MutableRefObject, } from 'react' import { useId, useMemo, useRef, useState } from 'react' import { Button } from '../Button' @@ -191,8 +190,7 @@ export const NumberInput = ({ 'aria-describedby': ariaDescribedBy, 'data-testid': dataTestId, }: NumberInputProps) => { - const inputRef = - useRef() as MutableRefObject + const inputRef = useRef(null) const uniqueId = useId() diff --git a/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx b/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx index 4d0961726e..596791f444 100644 --- a/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx +++ b/packages/ui/src/components/NumberInputV2/__stories__/MinMax.stories.tsx @@ -1,14 +1,15 @@ import type { StoryFn } from '@storybook/react' import { useState } from 'react' -import type { NumberInputV2 } from '../index' -import { Template } from './Template.stories' +import { NumberInputV2 } from '..' -export const MinMax: StoryFn = args => { +export const Template: StoryFn = props => { const [value, setValue] = useState(10) - return