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.

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

[Snyk] Upgrade @mantine/hooks from 7.11.1 to 7.12.1 #241

Closed

Conversation

thearyadev
Copy link
Owner

snyk-top-banner

Snyk has created this PR to upgrade @mantine/hooks from 7.11.1 to 7.12.1.

ℹ️ Keep your dependencies up-to-date. This makes it easier to fix existing vulnerabilities and to more quickly identify and fix newly disclosed vulnerabilities when they affect your project.


  • The recommended version is 3 versions ahead of your current version.

  • The recommended version was released on a month ago.

Release notes
Package name: @mantine/hooks
  • 7.12.1 - 2024-08-12

    What's Changed

    • [@ mantine/dates] DateInput: Fix default date being set to the current date when minDate is set to the future (#6646)
    • [@ mantine/core] ScrollArea: Fix incorrect thumb::before styles
    • [@ mantine/core] Fix incorrect active styles of buttons used inside disabled fieldset
    • [@ mantine/form] Fix form.watch callbacks not being fired when form.initialize is called (#6639)
    • [@ mantine/core] Switch: Fix Switch shrinking when large label or description is used (#6531)
    • [@ mantine/core] Combobox: Fix Combobox.Search overflow when ScrollArea is used in the dropdown (#6562)
    • [@ mantine/core] Accordion: Add missing withProps function (#6564)
    • [@ mantine/core] Pill: Fix remove icon overflowing pill container if its background color was changed with Styles API (#6565)
    • [@ mantine/core] PinInput: Allow passing props to individual input elements depending on index with getInputProps (#6588)
    • [@ mantine/charts]: Fix LineChart Legend and Tooltip to support nested names (#6536)
    • [@ mantine/core] Tooltip: Add missing Tooltip.Group.extend function (#6576)
    • [@ mantine/spotlight] Fix limit prop not working correctly with actions groups (#6632)
    • [@ mantine/core] Badge: Fix text overflow not being handled correctly (#6629)
    • [@ mantine/core] SegmentedControl: Add data-disabled attribute to the root element to simplify styling with Styles API (#6625)
    • [@ mantine/core] SegmentedControl: Fix initial position of indicator being broken when the component is used inside other element that has transitions on mount (#6622)
    • [@ mantine/core] TagsInput: Fix onKeyDown prop not working (#6569)
    • [@ mantine/charts] PieChart: Fix valueFormatter not working on outside labels (#6616)
    • [@ mantine/core] Popover: Fix apply function of size middleware not being handled correctly (#6598)
    • [@ mantine/core] Chip: Fix incorrect checked padding for size="xl" (#6586)
    • [@ mantine/dates] TimeInput: Fix incorrect focus styles of am/pm input (#6579)
    • [@ mantine/hook] use-os: Fix incorrect iPadOS detection (#6535)
    • [@ mantine/core] DatePickerInput: Fix incorrect aria-label being set on the input element (#6530)
    • [@ mantine/core] Menu: Fix incorrect Escape key handling inside Modal (#6580)

    New Contributors

    Full Changelog: 7.12.0...7.12.1

  • 7.12.0 - 2024-08-05

    View changelog with demos on mantine.dev website

    Notifications at any position

    It is now possible to display notifications at any position on the screen
    with @ mantine/notifications package:

    import { Button } from '@ mantine/core';
    import { notifications } from '@ mantine/notifications';

    const positions = [
    'top-left',
    'top-right',
    'bottom-left',
    'bottom-right',
    'top-center',
    'bottom-center',
    ] as const;

    function Demo() {
    const buttons = positions.map((position) => (
    <Button
    key={position}
    onClick={() =>
    notifications.show({
    title: Notification at <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">position</span><span class="pl-kos">}</span></span>,
    message: Notification at <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">position</span><span class="pl-kos">}</span></span> message,
    position,
    })
    }
    >
    {position}
    </Button>
    ));

    return <Group>{buttons}</Group>;
    }

    Subscribe to notifications state

    You can now subscribe to notifications state changes with useNotifications hook:

    function Demo() {
    const [counter, { increment }] = useCounter();
    const notificationsStore = useNotifications();

    const showNotification = () => {
    notifications.show({
    title: Notification <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">counter</span><span class="pl-kos">}</span></span>,
    message: 'Most notifications are added to queue',
    });

    <span class="pl-en">increment</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    

    };

    return (
    <>
    <Button onClick={showNotification} mb="md">
    Show notification
    </Button>

      <span class="pl-c1">&lt;</span><span class="pl-smi">Text</span><span class="pl-c1">&gt;</span>Notifications state<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Text</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-smi">Code</span> <span class="pl-c1">block</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">notificationsStore</span><span class="pl-kos">.</span><span class="pl-c1">notifications</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Code</span><span class="pl-c1">&gt;</span>
    
      <span class="pl-c1">&lt;</span><span class="pl-smi">Text</span> <span class="pl-c1">mt</span><span class="pl-c1">=</span><span class="pl-s">"md"</span><span class="pl-c1">&gt;</span>Notifications queue<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Text</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-smi">Code</span> <span class="pl-c1">block</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-smi">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">notificationsStore</span><span class="pl-kos">.</span><span class="pl-c1">queue</span><span class="pl-kos">,</span> <span class="pl-c1">null</span><span class="pl-kos">,</span> <span class="pl-c1">2</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Code</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
    

    );
    }

    SemiCircleProgress component

    New SemiCircleProgress component:

    import { SemiCircleProgress } from '@ mantine/core';

    function Demo() {
    return (
    <SemiCircleProgress
    fillDirection="left-to-right"
    orientation="up"
    filledSegmentColor="blue"
    size={200}
    thickness={12}
    value={40}
    label="Label"
    />
    );
    }

    Tree checked state

    Tree component now supports checked state:

    import { IconChevronDown } from '@ tabler/icons-react';
    import { Checkbox, Group, RenderTreeNodePayload, Tree } from '@ mantine/core';
    import { data } from './data';

    const renderTreeNode = ({
    node,
    expanded,
    hasChildren,
    elementProps,
    tree,
    }: RenderTreeNodePayload) => {
    const checked = tree.isNodeChecked(node.value);
    const indeterminate = tree.isNodeIndeterminate(node.value);

    return (
    <Group gap="xs" {...elementProps}>
    <Checkbox.Indicator
    checked={checked}
    indeterminate={indeterminate}
    onClick={() => (!checked ? tree.checkNode(node.value) : tree.uncheckNode(node.value))}
    />

      <span class="pl-c1">&lt;</span><span class="pl-smi">Group</span> <span class="pl-c1">gap</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">5</span><span class="pl-kos">}</span> <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-s1">tree</span><span class="pl-kos">.</span><span class="pl-en">toggleExpanded</span><span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">)</span><span class="pl-kos">}</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-kos">{</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">label</span><span class="pl-kos">}</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span>
    
        <span class="pl-kos">{</span><span class="pl-s1">hasChildren</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-kos">(</span>
          <span class="pl-c1">&lt;</span><span class="pl-smi">IconChevronDown</span>
            <span class="pl-c1">size</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-c1">14</span><span class="pl-kos">}</span>
            <span class="pl-c1">style</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">{</span> <span class="pl-c1">transform</span>: <span class="pl-s1">expanded</span> ? <span class="pl-s">'rotate(180deg)'</span> : <span class="pl-s">'rotate(0deg)'</span> <span class="pl-kos">}</span><span class="pl-kos">}</span>
          <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-kos">)</span><span class="pl-kos">}</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Group</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-smi">Group</span><span class="pl-c1">&gt;</span>
    

    );
    };

    function Demo() {
    return <Tree data={data} levelOffset={23} expandOnClick={false} renderNode={renderTreeNode} />;
    }

    Disable specific features in postcss-preset-mantine

    You can now disable specific features of the postcss-preset-mantine
    by setting them to false in the configuration object. This feature is available starting from
    postcss-preset-mantine@1.17.0.

    module.exports = {
    'postcss-preset-mantine': {
    features: {
    // Turn off light-dark function
    lightDarkFunction: false,

      <span class="pl-c">// Turn off `postcss-nested` plugin</span>
      <span class="pl-c1">nested</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    
      <span class="pl-c">// Turn off `lighten`, `darken` and `alpha` functions</span>
      <span class="pl-c1">colorMixAlpha</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    
      <span class="pl-c">// Turn off `rem` and `em` functions</span>
      <span class="pl-c1">remEmFunctions</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    
      <span class="pl-c">// Turn off `postcss-mixins` plugin</span>
      <span class="pl-c1">mixins</span>: <span class="pl-c1">false</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">,</span>
    

    },
    };

    Help Center updates

    Other changes

    • use-interval hook now supports autoInvoke option to start the interval automatically when the component mounts.
    • use-form with mode="uncontrolled" now triggers additional rerender when dirty state changes to allow subscribing to form state changes.
    • ScrollArea component now supports onTopReached and onBottomReached props. The functions are called when the user scrolls to the top or bottom of the scroll area.
    • Accordion.Panel component now supports onTransitionEnd prop that is called when the panel animation completes.
  • 7.11.2 - 2024-07-13

    What's Changed

    • [@ mantine/core] Combobox: Fix inconsistent horizontal dropdown padding
    • [@ mantine/core] Drawer: Fix content overflowing horizontally on mobile when offset is set
    • [@ mantine/core] Drawer: Fix double scrollbar appearing when offset and scrollAreaComponent props are set
    • [@ mantine/carousel] Fix responsive slideSize values working differently from other style props
    • [@ mantine/hooks] use-interval: Add autoInvoke option support
    • [@ mantine/hooks] use-interval: Fix updates to the function and interval timeout being ignored
    • [@ mantine/core] Anchor: Fix lineClamp prop not working
    • [@ mantine/core] Anchor: Fix text-decoration styles being inconsistent with variant="gradient"
    • [@ mantine/dates] DateInput: Fix value flickering with custom timezone (#6517)
    • [@ mantine/core] Burger: Fix lineSize being passed to the DOM node (#6520)
    • [@ mantine/charts] Add support for nested properties in dataKey (#5886)
    • [@ mantine/core] Fix Modal/Drawer headers overlaying custom scrollbar (#6175)
    • [@ mantine/charts] Sparkline: Fix incorrect data prop type (#6352)
    • [@ mantine/charts] Fix strokeColor prop being passed to the DOM element (#6507)
    • [@ mantine/core] FocusTrap: Improve compatibility with React 19 (#6492)
    • [@ mantine/hooks] use-os: Fix iOS being reported as MacOS in several cases (#6511)
    • [@ mantine/emotion] Fix incorrect types of createStyles classes (#6490)
    • [@ mantine/core] Tooltip: Fix floatingStrategy="fixed" not working (#6502)

    New Contributors

    Full Changelog: 7.11.1...7.11.2

  • 7.11.1 - 2024-07-02

    What's Changed

    • [@ mantine/core] Add option to display nothingFoundMessage when data is empty in Select and MultiSelect components (#6477)
    • [@ mantine/core] Tooltip: Add defaultOpened prop support (#6466)
    • [@ mantine/core] PinInput: Fix incorrect rtl logic (#6382)
    • [@ mantine/core] Popover: Fix floatingStrategy="fixed" not having position:fixed styles (#6419)
    • [@ mantine/spotlight] Fix spotlight not working correctly with shadow DOM (#6400)
    • [@ mantine/form] Fix onValuesChange using stale values (#6392)
    • [@ mantine/carousel] Fix onSlideChange using stale props values (#6393)
    • [@ mantine/charts] Fix unexpected padding on the right side of the chart in BarChart, AreaChart and LineChart components (#6467)
    • [@ mantine/core] Select: Fix onChange being called with the already selected if it has been picked from the dropdown (#6468)
    • [@ mantine/dates] DatePickerInput: Fix highlightToday not working (#6471)
    • [@ mantine/core] NumberInput: Fix incorrect handling of numbers larger than max safe integer on blur (#6407)
    • [@ mantine/core] Tooltip: Fix tooltip arrow being incompatible with headless mode (#6458)
    • [@ mantine/core] ActionIcon: Fix loading styles inconsistency with Button component (#6460)
    • [@ mantine/charts] PieChart: Fix key error for duplicated name data (#6067)
    • [@ mantine/core] Modal: Fix removeScrollProps.ref not being compatible with React 19 (#6446)
    • [@ mantine/core] TagsInput: Fix selectFirstOptionOnChange prop not working (#6337)
    • [@ mantine/hooks] use-eye-dropper: Fix Opera being incorrectly detected as a supported browser (#6307)
    • [@ mantine/core] Fix :host selector now working correctly in cssVariablesSelector of MantineProvider (#6404)
    • [@ mantine/core] TagsInput: Fix onChange being called twice when Enter key is pressed in some cases (#6416)
    • [@ mantine/modals] Fix Modal overrides type augmentation not working with TypeScript 5.5 (#6443)
    • [@ mantine/core] Tree: Fix levelOffset prop being added to the root DOM element (#6461)

    New Contributors

Snyk has created this PR to upgrade @mantine/hooks from 7.11.1 to 7.12.1.

See this package in npm:
@mantine/hooks

See this project in Snyk:
https://app.snyk.io/org/thearyadev/project/556003a2-23d0-448e-beb7-86dc60c30428?utm_source=github&utm_medium=referral&page=upgrade-pr
Copy link

vercel bot commented Sep 12, 2024

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

Name Status Preview Comments Updated (UTC)
top500-aggregator ❌ Failed (Inspect) Sep 12, 2024 7:52am

@thearyadev thearyadev closed this Sep 12, 2024
@thearyadev thearyadev deleted the snyk-upgrade-06ccfb2e5d3803c2e861ba7d278380f2 branch September 12, 2024 17:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants