Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore(deps): update all dependencies #113

Merged
merged 1 commit into from
May 1, 2024
Merged

chore(deps): update all dependencies #113

merged 1 commit into from
May 1, 2024

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented May 1, 2024

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@babel/core (source) 7.24.3 -> 7.24.5 age adoption passing confidence
@commitlint/cli (source) 19.2.1 -> 19.3.0 age adoption passing confidence
@commitlint/config-conventional (source) 19.1.0 -> 19.2.2 age adoption passing confidence
@mantine/core (source) 7.7.1 -> 7.8.1 age adoption passing confidence
@mantine/hooks (source) 7.7.1 -> 7.8.1 age adoption passing confidence
@playwright/test (source) 1.42.1 -> 1.43.1 age adoption passing confidence
@tanstack/react-query (source) 5.28.9 -> 5.32.1 age adoption passing confidence
@tanstack/react-query-devtools (source) 5.28.10 -> 5.32.1 age adoption passing confidence
@types/react (source) 18.2.73 -> 18.3.1 age adoption passing confidence
@types/react-dom (source) 18.2.23 -> 18.3.0 age adoption passing confidence
@typescript-eslint/eslint-plugin (source) 7.4.0 -> 7.8.0 age adoption passing confidence
@typescript-eslint/parser (source) 7.4.0 -> 7.8.0 age adoption passing confidence
@vitest/ui (source) 1.4.0 -> 1.5.3 age adoption passing confidence
clsx 2.1.0 -> 2.1.1 age adoption passing confidence
eslint (source) 8.57.0 -> 9.1.1 age adoption passing confidence
eslint-plugin-playwright 1.5.4 -> 1.6.0 age adoption passing confidence
eslint-plugin-react-hooks (source) 4.6.0 -> 4.6.2 age adoption passing confidence
postcss-preset-mantine 1.13.0 -> 1.15.0 age adoption passing confidence
prettier-plugin-tailwindcss 0.5.13 -> 0.5.14 age adoption passing confidence
react (source) 18.2.0 -> 18.3.1 age adoption passing confidence
react-dom (source) 18.2.0 -> 18.3.1 age adoption passing confidence
react-hook-form (source) 7.51.2 -> 7.51.3 age adoption passing confidence
react-redux 9.1.0 -> 9.1.1 age adoption passing confidence
react-router-dom (source) 6.22.3 -> 6.23.0 age adoption passing confidence
type-fest 4.14.0 -> 4.18.0 age adoption passing confidence
typescript (source) 5.4.3 -> 5.4.5 age adoption passing confidence
vite (source) 5.2.7 -> 5.2.10 age adoption passing confidence
vitest (source) 1.4.0 -> 1.5.3 age adoption passing confidence
zod (source) 3.22.4 -> 3.23.5 age adoption passing confidence

Release Notes

babel/babel (@​babel/core)

v7.24.5

Compare Source

🐛 Bug Fix
💅 Polish
🏠 Internal
  • Other
  • babel-parser
  • babel-helper-create-class-features-plugin, babel-helper-member-expression-to-functions, babel-helper-module-transforms, babel-helper-split-export-declaration, babel-helper-wrap-function, babel-helpers, babel-plugin-bugfix-firefox-class-in-computed-class-key, babel-plugin-proposal-explicit-resource-management, babel-plugin-transform-block-scoping, babel-plugin-transform-destructuring, babel-plugin-transform-object-rest-spread, babel-plugin-transform-optional-chaining, babel-plugin-transform-parameters, babel-plugin-transform-private-property-in-object, babel-plugin-transform-react-jsx-self, babel-plugin-transform-typeof-symbol, babel-plugin-transform-typescript, babel-traverse
  • babel-plugin-proposal-partial-application, babel-types
  • babel-plugin-transform-class-properties, babel-preset-env
🏃‍♀️ Performance
  • babel-helpers, babel-preset-env, babel-runtime-corejs3

v7.24.4

Compare Source

👓 Spec Compliance
🐛 Bug Fix
conventional-changelog/commitlint (@​commitlint/cli)

v19.3.0

Compare Source

Note: Version bump only for package @​commitlint/cli

19.2.2 (2024-04-14)

Note: Version bump only for package @​commitlint/cli

19.2.1 (2024-03-19)

Note: Version bump only for package @​commitlint/cli

v19.2.2

Compare Source

Note: Version bump only for package @​commitlint/cli

conventional-changelog/commitlint (@​commitlint/config-conventional)

v19.2.2

Compare Source

Note: Version bump only for package @​commitlint/config-conventional

mantinedev/mantine (@​mantine/core)

v7.8.1

Compare Source

Notes

Note that if you've already started using uncontrolled form mode introduced in 7.8.0, you need to include form.key() as described in the documentation.

What's Changed
  • [@mantine/form] Add defaultValue to form.getInputProps return type
  • [@mantine/form] Replace key spread with form.getInputProps with form.key() function
  • [@mantine/dropzone] Fix keyboard activation not working (#​6095)
  • [@mantine/dates] DatePicker: Fix date range being stuck in incorrect state when controlled state changes to an empty value (#​6092)
  • [@mantine/core] Radio: Allow null to be passed to Radio.Group value to clear the value (#​6102)
  • [@mantine/core] NumberInput: Fix incorrect cursor position when backspace is pressed (#​6072)
  • [@mantine/core] Fix incorrect empty string handling in style props (#​6078)
New Contributors

Full Changelog: mantinedev/mantine@7.8.0...7.8.1

v7.8.0

Compare Source

View changelog with demos on mantine.dev website

Auto convert px to rem in .css files

Start from version 1.14.4 postcss-preset-mantine
supports autoRem option that can be used to automatically convert all px values
to rem units in .css files.

module.exports = {
  plugins: {
    'postcss-preset-mantine': {
      autoRem: true,
    },
  },
};

This option works similar to rem function. The following code:

.demo {
  font-size: 16px;

  @​media (min-width: 320px) {
    font-size: 32px;
  }
}

Will be transformed to:

.demo {
  font-size: calc(1rem * var(--mantine-scale));

  @​media (min-width: 320px) {
    font-size: calc(2rem * var(--mantine-scale));
  }
}

Note that autoRem converts only CSS properties, values in @media queries are
not converted automatically – you still need to use em function to convert them.

autoRem option does not convert values in the following cases:

  • Values in calc(), var(), clamp() and url() functions
  • Values in content property
  • Values that contain rgb(), rgba(), hsl(), hsla() colors

If you want to convert above values to rem units, use rem function manually.

Uncontrolled form mode

useForm hook now supports uncontrolled mode.
Uncontrolled mode provides a significant performance improvement by reducing
the number of re-renders and the amount of state updates almost to 0. Uncontrolled
mode is now the recommended way to use the useForm hook for almost all use cases.

Example of uncontrolled form (form.values are not updated):

import { useState } from 'react';
import { Button, Code, Text, TextInput } from '@​mantine/core';
import { hasLength, isEmail, useForm } from '@​mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: { name: '', email: '' },
    validate: {
      name: hasLength({ min: 3 }, 'Must be at least 3 characters'),
      email: isEmail('Invalid email'),
    },
  });

  const [submittedValues, setSubmittedValues] = useState<typeof form.values | null>(null);

  return (
    <form onSubmit={form.onSubmit(setSubmittedValues)}>
      <TextInput {...form.getInputProps('name')} label="Name" placeholder="Name" />
      <TextInput {...form.getInputProps('email')} mt="md" label="Email" placeholder="Email" />
      <Button type="submit" mt="md">
        Submit
      </Button>

      <Text mt="md">Form values:</Text>
      <Code block>{JSON.stringify(form.values, null, 2)}</Code>

      <Text mt="md">Submitted values:</Text>
      <Code block>{submittedValues ? JSON.stringify(submittedValues, null, 2) : '–'}</Code>
    </form>
  );
}
form.getValues

With uncontrolled mode, you can not access form.values as a state variable,
instead, you can use form.getValues() method to get current form values at any time:

import { useForm } from '@&#8203;mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: 'John Doe' },
});

form.getValues(); // { name: 'John Doe' }

form.setValues({ name: 'John Smith' });
form.getValues(); // { name: 'John Smith' }

form.getValues() always returns the latest form values, it is safe to use it
after state updates:

import { useForm } from '@&#8203;mantine/form';

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { name: 'John Doe' },
});

const handleNameChange = () => {
  form.setFieldValue('name', 'Test Name');

  // ❌ Do not use form.values to get the current form values
  // form.values has stale name value until next rerender in controlled mode
  // and is always outdated in uncontrolled mode
  console.log(form.values); // { name: 'John Doe' }

  // ✅ Use form.getValues to get the current form values
  // form.getValues always returns the latest form values
  console.log(form.getValues()); // { name: 'Test Name' }
};
form.watch

form.watch is an effect function that allows subscribing to changes of a
specific form field. It accepts field path and a callback function that is
called with new value, previous value, touched and dirty field states:

import { TextInput } from '@&#8203;mantine/core';
import { useForm } from '@&#8203;mantine/form';

function Demo() {
  const form = useForm({
    mode: 'uncontrolled',
    initialValues: {
      name: '',
      email: '',
    },
  });

  form.watch('name', ({ previousValue, value, touched, dirty }) => {
    console.log({ previousValue, value, touched, dirty });
  });

  return (
    <div>
      <TextInput label="Name" placeholder="Name" {...form.getInputProps('name')} />
      <TextInput mt="md" label="Email" placeholder="Email" {...form.getInputProps('email')} />
    </div>
  );
}
Customize Popover middlewares

You can now customize middlewares options in Popover component and
in other components (Menu, Select, Combobox, etc.)
based on Popover.

To customize Floating UI middlewares options, pass them as
an object to the middlewares prop. For example, to change shift
middleware padding to 20px use the following configuration:

import { Popover } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Popover middlewares={{ shift: { padding: 20 } }} position="bottom">
      {/* Popover content */}
    </Popover>
  );
}
use-fetch hook

New use-fetch hook:

import { Box, Button, Code, Group, LoadingOverlay, Text } from '@&#8203;mantine/core';
import { useFetch } from '@&#8203;mantine/hooks';

interface Item {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

function Demo() {
  const { data, loading, error, refetch, abort } = useFetch<Item[]>(
    'https://jsonplaceholder.typicode.com/todos/'
  );

  return (
    <div>
      {error && <Text c="red">{error.message}</Text>}

      <Group>
        <Button onClick={refetch} color="blue">
          Refetch
        </Button>
        <Button onClick={abort} color="red">
          Abort
        </Button>
      </Group>
      <Box pos="relative" mt="md">
        <Code block>{data ? JSON.stringify(data.slice(0, 3), null, 2) : 'Fetching'}</Code>
        <LoadingOverlay visible={loading} />
      </Box>
    </div>
  );
}
use-map hook

New use-map hook:

import { IconPlus, IconTrash } from '@&#8203;tabler/icons-react';
import { ActionIcon, Group, Table } from '@&#8203;mantine/core';
import { useMap } from '@&#8203;mantine/hooks';

function Demo() {
  const map = useMap([
    ['/hooks/use-media-query', 4124],
    ['/hooks/use-clipboard', 8341],
    ['/hooks/use-fetch', 9001],
  ]);

  const rows = Array.from(map.entries()).map(([key, value]) => (
    <Table.Tr key={key}>
      <Table.Td>{key}</Table.Td>
      <Table.Td>{value}</Table.Td>
      <Table.Td>
        <Group>
          <ActionIcon variant="default" onClick={() => map.set(key, value + 1)} fw={500}>
            <IconPlus stroke={1.5} size={18} />
          </ActionIcon>
          <ActionIcon variant="default" onClick={() => map.delete(key)} c="red">
            <IconTrash stroke={1.5} size={18} />
          </ActionIcon>
        </Group>
      </Table.Td>
    </Table.Tr>
  ));

  return (
    <Table layout="fixed">
      <Table.Thead>
        <Table.Tr>
          <Table.Th>Page</Table.Th>
          <Table.Th>Views last month</Table.Th>
          <Table.Th />
        </Table.Tr>
      </Table.Thead>
      <Table.Tbody>{rows}</Table.Tbody>
    </Table>
  );
}
use-set hook

New use-set hook:

import { useState } from 'react';
import { Code, Stack, TextInput } from '@&#8203;mantine/core';
import { useSet } from '@&#8203;mantine/hooks';

function Demo() {
  const [input, setInput] = useState('');
  const scopes = useSet<string>(['@&#8203;mantine', '@&#8203;mantine-tests', '@&#8203;mantinex']);

  const isDuplicate = scopes.has(input.trim().toLowerCase());

  const items = Array.from(scopes).map((scope) => <Code key={scope}>{scope}</Code>);

  return (
    <>
      <TextInput
        label="Add new scope"
        placeholder="Enter scope"
        description="Duplicate scopes are not allowed"
        value={input}
        onChange={(event) => setInput(event.currentTarget.value)}
        error={isDuplicate && 'Scope already exists'}
        onKeyDown={(event) => {
          if (event.nativeEvent.code === 'Enter' && !isDuplicate) {
            scopes.add(input.trim().toLowerCase());
            setInput('');
          }
        }}
      />

      <Stack gap={5} align="flex-start" mt="md">
        {items}
      </Stack>
    </>
  );
}
use-debounced-callback hook

New use-debounced-callback hook:

import { useState } from 'react';
import { Loader, Text, TextInput } from '@&#8203;mantine/core';
import { useDebouncedCallback } from '@&#8203;mantine/hooks';

function getSearchResults(query: string): Promise<{ id: number; title: string }[]> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(
        query.trim() === ''
          ? []
          : Array(5)
              .fill(0)
              .map((_, index) => ({ id: index, title: `${query} ${index + 1}` }))
      );
    }, 1000);
  });
}

function Demo() {
  const [search, setSearch] = useState('');
  const [searchResults, setSearchResults] = useState<{ id: number; title: string }[]>([]);
  const [loading, setLoading] = useState(false);

  const handleSearch = useDebouncedCallback(async (query: string) => {
    setLoading(true);
    setSearchResults(await getSearchResults(query));
    setLoading(false);
  }, 500);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearch(event.currentTarget.value);
    handleSearch(event.currentTarget.value);
  };

  return (
    <>
      <TextInput
        value={search}
        onChange={handleChange}
        placeholder="Search..."
        rightSection={loading && <Loader size={20} />}
      />
      {searchResults.map((result) => (
        <Text key={result.id} size="sm">
          {result.title}
        </Text>
      ))}
    </>
  );
}
use-throttled-state hook

New use-throttled-state hook:

import { Text, TextInput } from '@&#8203;mantine/core';
import { useThrottledState } from '@&#8203;mantine/hooks';

function Demo() {
  const [throttledValue, setThrottledValue] = useThrottledState('', 1000);

  return (
    <>
      <TextInput
        placeholder="Search"
        onChange={(event) => setThrottledValue(event.currentTarget.value)}
      />
      <Text>Throttled value: {throttledValue || '–'}</Text>
    </>
  );
}
use-throttled-value hook

New use-throttled-value hook:

import { Text, TextInput } from '@&#8203;mantine/core';
import { useThrottledValue } from '@&#8203;mantine/hooks';

function Demo() {
  const [value, setValue] = useState('');
  const throttledValue = useThrottledValue(value, 1000);

  return (
    <>
      <TextInput placeholder="Search" onChange={(event) => setValue(event.currentTarget.value)} />
      <Text>Throttled value: {throttledValue || '–'}</Text>
    </>
  );
}
use-throttled-callback hook

New use-throttled-callback hook:

import { Text, TextInput } from '@&#8203;mantine/core';
import { useThrottledCallback } from '@&#8203;mantine/hooks';

function Demo() {
  const [throttledValue, setValue] = useState('');
  const throttledSetValue = useThrottledCallback((value) => setValue(value), 1000);

  return (
    <>
      <TextInput
        placeholder="Search"
        onChange={(event) => throttledSetValue(event.currentTarget.value)}
      />
      <Text>Throttled value: {throttledValue || '–'}</Text>
    </>
  );
}
use-orientation hook

New use-orientation hook:

import { Code, Text } from '@&#8203;mantine/core';
import { useOrientation } from '@&#8203;mantine/hooks';

function Demo() {
  const { angle, type } = useOrientation();
  return (
    <>
      <Text>
        Angle: <Code>{angle}</Code>
      </Text>
      <Text>
        Type: <Code>{type}</Code>
      </Text>
    </>
  );
}
use-is-first-render hook

New use-is-first-render hook:

import { useState } from 'react';
import { Button, Text } from '@&#8203;mantine/core';
import { useIsFirstRender } from '@&#8203;mantine/hooks';

function Demo() {
  const [counter, setCounter] = useState(0);
  const firstRender = useIsFirstRender();
  return (
    <div>
      <Text>
        Is first render:{' '}
        <Text span c={firstRender ? 'teal' : 'red'}>
          {firstRender ? 'Yes' : 'No!'}
        </Text>
      </Text>
      <Button onClick={() => setCounter((c) => c + 1)} mt="sm">
        Rerendered {counter} times, click to rerender
      </Button>
    </div>
  );
}
Documentation updates
Other changes
  • NumberInput now supports withKeyboardEvents={false} to disable up/down arrow keys handling
  • Popover shift middleware now has default padding of 5px to offset dropdown near the edge of the viewport

v7.7.2

Compare Source

What's Changed
  • [@mantine/core] CloseButton: Add missing disabled styles (#​6044)
  • [@mantine/core] AppShell: Fix incorrect app safe area handling by AppShell.Footer (#​6060)
  • [@mantine/core] NumberInput: Fix cursor position changing when the value is incremented/decremented (#​6004)
  • [@mantine/core] TagsInput: Fix incorrect IME keyboard input handling for Backspace key (#​6011)
  • [@mantine/charts] Fix incorrect overflow styles of svg element (#​6040)
  • [@mantine/core] PinInput: Add rootRef prop support (#​6032)
  • [@mantine/core] ScrollArea: Fix viewportProps.onScroll not working (#​6055)
  • [@mantine/core] ScrollArea: Fix incorrect inset position of the horizontal scrollbar (#​6059)
  • [@mantine/hooks] use-local-storage: Fix infinite rerendering with object values (#​6022)
New Contributors

Full Changelog: mantinedev/mantine@7.7.1...7.7.2

microsoft/playwright (@​playwright/test)

v1.43.1

Compare Source

Highlights

https://github.com/microsoft/playwright/issues/30300 - [REGRESSION]: UI mode restarts if keep storage statehttps://github.com/microsoft/playwright/issues/303399 - [REGRESSION]: Brand new install of playwright, unable to run chromium with show browser using vscode

Browser Versions
  • Chromium 124.0.6367.29
  • Mozilla Firefox 124.0
  • WebKit 17.4

This version was also tested against the following stable channels:

  • Google Chrome 123
  • Microsoft Edge 123

v1.43.0

Compare Source

New APIs

  • Method browserContext.clearCookies() now supports filters to remove only some cookies.

    // Clear all cookies.
await context.clearCookies();
// New: clear cookies with a particular name.
await context.clearCookies({ name: 'session-id' });
// New: clear cookies for a particular domain.
await context.clearCookies({ domain: 'my-origin.com' });

  • New mode retain-on-first-failure for testOptions.trace. In this mode, trace is recorded for the first run of each test, but not for retires. When test run fails, the trace file is retained, otherwise it is removed.

    import { defineConfig } from '@&#8203;playwright/test';

export default defineConfig({
  use: {
    trace: 'retain-on-first-failure',
  },
});

  • New property testInfo.tags exposes test tags during test execution.

    test('example', async ({ page }) => {
  console.log(test.info().tags);
});

  • New method locator.contentFrame() converts a Locator object to a FrameLocator. This can be useful when you have a Locator object obtained somewhere, and later on would like to interact with the content inside the frame.

    const locator = page.locator('iframe[name="embedded"]');
// ...
const frameLocator = locator.contentFrame();
await frameLocator.getByRole('button').click();

  • New method frameLocator.owner() converts a FrameLocator object to a Locator. This can be useful when you have a FrameLocator object obtained somewhere, and later on would like to interact with the iframe element.

    const frameLocator = page.frameLocator('iframe[name="embedded"]');
// ...
const locator = frameLocator.owner();
await expect(locator).toBeVisible();

UI Mode Updates

Playwright UI Mode

  • See tags in the test list.
  • Filter by tags by typing @fast or clicking on the tag itself.
  • New shortcuts:
    • F5 to run tests.
    • Shift F5 to stop running tests.
    • Ctrl ` to toggle test output.

Browser Versions

  • Chromium 124.0.6367.29
  • Mozilla Firefox 124.0
  • WebKit 17.4

This version was also tested against the following stable channels:

  • Google Chrome 123
  • Microsoft Edge 123
TanStack/query (@​tanstack/react-query)

v5.32.1

Compare Source

Version 5.32.1 - 4/30/2024, 1:38 PM

Changes
Fix
  • trigger release (684ffbf) by Dominik Dorfmeister
  • codemods: Use .cjs extension for CommonJS files (#​7333) (2aca521) by Anton Jeppsson
Docs
  • createSyncStoragePersister: fix typo (#​7348) (6768a9c) by Mackie Underdown
Packages

v5.32.0

Compare Source

Version 5.32.0 - 4/23/2024, 7:31 AM

Changes

Feat
  • core: make observers on Query a public property (#​7326) (e3240f0) by Dominik Dorfmeister
Chore
  • docs: fix prettier (f025a7c) by Dominik Dorfmeister
Docs

Packages

Configuration

📅 Schedule: Branch creation - "before 4am on the first day of the month" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

👻 Immortal: This PR will be recreated if closed unmerged. Get config help if that's undesired.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@netlify Netlify
Copy link

netlify bot commented May 1, 2024 •
edited

✅ Deploy Preview for my-react-template ready!

Name Link
🔨 Latest commit caed585
🔍 Latest deploy log https://app.netlify.com/sites/my-react-template/deploys/66319846743e980008748b22
😎 Deploy Preview https://deploy-preview-113--my-react-template.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@DuckyMomo20012 DuckyMomo20012 merged commit 573ff5e into main May 1, 2024
5 checks passed
@DuckyMomo20012 DuckyMomo20012 deleted the renovate/all branch May 1, 2024 01:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
1 participant
@DuckyMomo20012