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.12.0 to 7.12.2 #3

Closed

Conversation

sam-morin
Copy link
Owner

snyk-top-banner

Snyk has created this PR to upgrade @mantine/hooks from 7.12.0 to 7.12.2.

ℹ️ 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 2 versions ahead of your current version.

  • The recommended version was released on 25 days ago.

Release notes
Package name: @mantine/hooks
  • 7.12.2 - 2024-08-30

    What's Changed

    • [@ mantine/hooks] use-idle: Fix idle countdown not starting if the user did non interact with the page (#6683)
    • [@ mantine/core] ScrollArea: Fix onBottomReached prop not being available in ScrollArea.Autosize component
    • [@ mantine/core] Remove children from Checkbox, Radio and Switch types to avoid accidental errors
    • [@ mantine/core] TypographyStylesProvider: Fix incorrect table styles in dark color scheme
    • [@ mantine/form] Fix error thrown for nullable values dirty status check (#6672)
    • [@ mantine/core] Badge: Fix unexpected change to block layout, fix incorrect alignment when fixed width is set (#6698, #6680)
    • [@ mantine/core] ScrollArea: Fix pointer-events being left as none after interaction with scrollbar (#6681)
    • [@ mantine/core] Tabs: Fix keepMounted prop being added as attribute to Tabs.Panel DOM element (#6711)
    • [@ mantine/core] Tree: Add initialCheckedState support (#6697)
    • [@ mantine/spotlight] Fix SpotlightRoot component not being exported (#6710)
    • [@ mantine/dropzone] Add 7z and rar mime types exports (#6702)
    • [@ mantine/dates] DatePickerInput: Fix incorrect hovered date logic when the component receives value update with partial selected date range (#6718)
    • [@ mantine/dates] Fix valueFormatter prop being added to DateTimePicker types
    • [@ mantine/core] Badge: Fix right/left sections height affecting the alignment of the label
    • [@ mantine/core] Menu: Fix accessibility warning in devtools when the Menu is opened (#6644)

    New Contributors

    Full Changelog: 7.12.1...7.12.2

  • 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.
from @mantine/hooks GitHub release notes

Important

  • Check the changes in this PR to ensure they won't cause issues with your project.
  • This PR was automatically created by Snyk using the credentials of a real user.

Note: You are seeing this because you or someone else with access to this repository has authorized Snyk to open upgrade PRs.

For more information:

Snyk has created this PR to upgrade @mantine/hooks from 7.12.0 to 7.12.2.

See this package in npm:
@mantine/hooks

See this project in Snyk:
https://app.snyk.io/org/sam-morin/project/9fd9e4ed-6ba3-4c48-a884-691d7ff52205?utm_source=github&utm_medium=referral&page=upgrade-pr
@sam-morin sam-morin closed this Sep 25, 2024
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