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 non-major dependencies #67

Merged
merged 1 commit into from
Jan 20, 2025
Merged

chore(deps): update all non-major dependencies #67

merged 1 commit into from
Jan 20, 2025

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Jan 20, 2025

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mantine/core (source) ^7.15.3 -> ^7.16.1 age adoption passing confidence
@mantine/dates (source) ^7.15.3 -> ^7.16.1 age adoption passing confidence
@mantine/hooks (source) ^7.15.3 -> ^7.16.1 age adoption passing confidence
@storybook/addon-docs (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/addon-essentials (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/addon-interactions (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/addon-storysource (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/addon-themes (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/blocks (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/preview-api (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/react (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/react-vite (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@storybook/test (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
@types/react (source) ^19.0.6 -> ^19.0.7 age adoption passing confidence
pnpm (source) 9.15.3 -> 9.15.4 age adoption passing confidence
postcss (source) ^8.4.49 -> ^8.5.1 age adoption passing confidence
publint (source) ^0.3.1 -> ^0.3.2 age adoption passing confidence
storybook (source) ^8.4.7 -> ^8.5.0 age adoption passing confidence
typescript-eslint (source) ^8.19.1 -> ^8.20.0 age adoption passing confidence

Release Notes

mantinedev/mantine (@​mantine/core)

v7.16.1

Compare Source

What's Changed
  • [@mantine/core] Menu: Add withInitialFocusPlaceholder prop support
  • [@mantine/core] Slider: Fix onChangeEnd being called when disabled prop is set
  • [@mantine/core] Add option to customize chevron color with chevronColor prop in Select and MultiSelect components
  • [@mantine/core] Fix incorrect styles of nested tables (#​7354)
  • [@mantine/core]: NumberInput: Fix onChange being called in onBlur if the value has not been changed (#​7383)
  • [@mantine/core] Menu: Add data-disabled prop handling to Menu.Item component (#​7377)
  • [@mantine/form] Fix incorrect values handling in form.resetDirty (#​7373)
  • [@mantine/chart] AreaChart: Fix gridColor and textColor props being passed as attributes to the DOM node (#​7378)
  • [@mantine/hooks] use-in-viewport: Fix tracking being stopped when used with a dnd library (#​7359)
  • [@mantine/core] MantineProvider: Fix jest tests not running in case there is incorrect window.matchMedia polyfill implementation (#​7360)
  • [@mantine/core] Modal: Fix Escape key not working in old Safari versions (#​7358)
New Contributors

Full Changelog: mantinedev/mantine@7.16.0...7.16.1

v7.16.0: 🌶️

Compare Source

View changelog with demos on mantine.dev website

use-scroll-spy hook

New use-scroll-spy hook tracks scroll position and returns index of the
element that is currently in the viewport. It is useful for creating
table of contents components (like in mantine.dev sidebar on the right side)
and similar features.

import { Text, UnstyledButton } from '@​mantine/core';
import { useScrollSpy } from '@​mantine/hooks';

function Demo() {
  const spy = useScrollSpy({
    selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
  });

  const headings = spy.data.map((heading, index) => (
    <li
      key={heading.id}
      style={{
        listStylePosition: 'inside',
        paddingInlineStart: heading.depth * 20,
        background: index === spy.active ? 'var(--mantine-color-blue-light)' : undefined,
      }}
    >
      <UnstyledButton onClick={() => heading.getNode().scrollIntoView()}>
        {heading.value}
      </UnstyledButton>
    </li>
  ));

  return (
    <div>
      <Text>Scroll to heading:</Text>
      <ul style={{ margin: 0, padding: 0 }}>{headings}</ul>
    </div>
  );
}
TableOfContents component

New TableOfContents component is built on top of use-scroll-spy hook
and can be used to create table of contents components like the one on the right side of mantine.dev
documentation sidebar:

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

function Demo() {
  return (
    <TableOfContents
      variant="filled"
      color="blue"
      size="sm"
      radius="sm"
      scrollSpyOptions={{
        selector: '#mdx :is(h1, h2, h3, h4, h5, h6)',
      }}
      getControlProps={({ data }) => ({
        onClick: () => data.getNode().scrollIntoView(),
        children: data.value,
      })}
    />
  );
}
Input.ClearButton component

New Input.ClearButton component can be used to add clear button to custom inputs
based on Input component. size of the clear button is automatically
inherited from the input:

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

function Demo() {
  const [value, setValue] = useState('clearable');

  return (
    <Input
      placeholder="Clearable input"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
      rightSection={value !== '' ? <Input.ClearButton onClick={() => setValue('')} /> : undefined}
      rightSectionPointerEvents="auto"
      size="sm"
    />
  );
}
Popover with overlay

Popover and other components based on it now support withOverlay prop:

import { Anchor, Avatar, Group, Popover, Stack, Text } from '@&#8203;mantine/core';

function Demo() {
  return (
    <Popover
      width={320}
      shadow="md"
      withArrow
      withOverlay
      overlayProps={{ zIndex: 10000, blur: '8px' }}
      zIndex={10001}
    >
      <Popover.Target>
        <UnstyledButton style={{ zIndex: 10001, position: 'relative' }}>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
        </UnstyledButton>
      </Popover.Target>
      <Popover.Dropdown>
        <Group>
          <Avatar src="https://avatars.githubusercontent.com/u/79146003?s=200&v=4" radius="xl" />
          <Stack gap={5}>
            <Text size="sm" fw={700} style={{ lineHeight: 1 }}>
              Mantine
            </Text>
            <Anchor href="https://x.com/mantinedev" c="dimmed" size="xs" style={{ lineHeight: 1 }}>
              @&#8203;mantinedev
            </Anchor>
          </Stack>
        </Group>

        <Text size="sm" mt="md">
          Customizable React components and hooks library with focus on usability, accessibility and
          developer experience
        </Text>

        <Group mt="md" gap="xl">
          <Text size="sm">
            <b>0</b> Following
          </Text>
          <Text size="sm">
            <b>1,174</b> Followers
          </Text>
        </Group>
      </Popover.Dropdown>
    </Popover>
  );
}
Container queries in Carousel

You can now use container queries
in Carousel component. With container queries, all responsive values
are adjusted based on the container width, not the viewport width.

Example of using container queries. To see how the grid changes, resize the root element
of the demo with the resize handle located at the bottom right corner of the demo:

import { Carousel } from '@&#8203;mantine/carousel';

function Demo() {
  return (
    // Wrapper div is added for demonstration purposes only,
    // It is not required in real projects
    <div
      style={{
        resize: 'horizontal',
        overflow: 'hidden',
        maxWidth: '100%',
        minWidth: 250,
        padding: 10,
      }}
    >
      <Carousel
        withIndicators
        height={200}
        type="container"
        slideSize={{ base: '100%', '300px': '50%', '500px': '33.333333%' }}
        slideGap={{ base: 0, '300px': 'md', '500px': 'lg' }}
        loop
        align="start"
      >
        <Carousel.Slide>1</Carousel.Slide>
        <Carousel.Slide>2</Carousel.Slide>
        <Carousel.Slide>3</Carousel.Slide>
        {/* ...other slides */}
      </Carousel>
    </div>
  );
}
RangeSlider restrictToMarks

RangeSlider component now supports restrictToMarks prop:

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

function Demo() {
  return (
    <Stack>
      <Slider
        restrictToMarks
        defaultValue={25}
        marks={Array.from({ length: 5 }).map((_, index) => ({ value: index * 25 }))}
      />

      <RangeSlider
        restrictToMarks
        defaultValue={[5, 15]}
        marks={[
          { value: 5 },
          { value: 15 },
          { value: 25 },
          { value: 35 },
          { value: 70 },
          { value: 80 },
          { value: 90 },
        ]}
      />
    </Stack>
  );
}
Pagination withPages prop

Pagination component now supports withPages prop which allows hiding pages
controls and displaying only previous and next buttons:

import { useState } from 'react';
import { Group, Pagination, Text } from '@&#8203;mantine/core';

const limit = 10;
const total = 145;
const totalPages = Math.ceil(total / limit);

function Demo() {
  const [page, setPage] = useState(1);
  const message = `Showing ${limit * (page - 1) + 1} – ${Math.min(total, limit * page)} of ${total}`;

  return (
    <Group justify="flex-end">
      <Text size="sm">{message}</Text>
      <Pagination total={totalPages} value={page} onChange={setPage} />
    </Group>
  );
}
useForm touchTrigger option

use-form hook now supports touchTrigger option that allows customizing events that change touched state.
It accepts two options:

  • change (default) – field will be considered touched when its value changes or it has been focused
  • focus – field will be considered touched only when it has been focused

Example of using focus trigger:

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

const form = useForm({
  mode: 'uncontrolled',
  initialValues: { a: 1 },
  touchTrigger: 'focus',
});

form.isTouched('a'); // -> false
form.setFieldValue('a', 2);
form.isTouched('a'); // -> false

// onFocus is called automatically when the user focuses the field
form.getInputProps('a').onFocus();
form.isTouched('a'); // -> true
Help Center updates
Other changes
storybookjs/storybook (@​storybook/addon-docs)

v8.5.0

Compare Source

Storybook 8.5 is packed with powerful features to enhance your development workflow. This release makes it easier than ever to build accessible, well-tested UIs. Here’s what’s new:

  • 🦾 Realtime accessibility tests to help build UIs for everybody
  • 🛡️ Project code coverage to measure the completeness of your tests
  • 🎯 Focused tests for faster test feedback
  • ⚛️ React Native Web Vite framework (experimental) for testing mobile UI⚛️
  • 🎁 Storybook test early access program to level up your testing game
  • 💯 Hundreds more improvements
List of all updates
pnpm/pnpm (pnpm)

v9.15.4: pnpm 9.15.4

Compare Source

Patch Changes

  • Ensure that recursive pnpm update --latest <pkg> updates only the specified package, with dedupe-peer-dependents=true.

Platinum Sponsors

Bit Bit Figma

Gold Sponsors

Discord Prisma
u|screen JetBrains

Configuration

📅 Schedule: Branch creation - "* 0-3 * * 1" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Enabled.

♻ Rebasing: Whenever PR is behind base branch, 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 was generated by Mend Renovate. View the repository job log.

@vercel Vercel
Copy link

vercel bot commented Jan 20, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
mantine-resource-timeline ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 20, 2025 0:56am

@renovate renovate bot merged commit d9b2b1c into dev Jan 20, 2025
6 checks passed
@renovate renovate bot deleted the renovate/all-minor-patch branch January 20, 2025 04:29
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
dependencies
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants