7 14 0

import { AngleSliderDemos, BarChartDemos, FunnelChartDemos, ModalDemos, RadialBarChartDemos, SliderDemos, } from '@docs/demos'; import { Layout } from '@/layout'; import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.Changelog7140);

AngleSlider component

New AngleSlider component:

RadialBarChart component

New RadialBarChart component:

FunnelChart component

New FunnelChart component:

Modal.Stack and Drawer.Stack components

New Modal.Stack and Drawer.Stack components simplify usage of multiple modals/drawers at the same time.

Use Modal.Stack component to render multiple modals at the same time. Modal.Stack keeps track of opened modals, manages z-index values, focus trapping and closeOnEscape behavior. Modal.Stack is designed to be used with useModalsStack hook.

Differences from using multiple Modal components:

• Modal.Stack manages z-index values – modals that are opened later will always have higher z-index value disregarding their order in the DOM
• Modal.Stack disables focus trap and Escape key handling for all modals except the one that is currently opened
• Modals that are not currently opened are present in the DOM but are hidden with opacity: 0 and pointer-events: none
• Only one overlay is rendered at a time

useModalsStack/useDrawersStack hooks

useModalsStack hook provides an easy way to control multiple modals at the same time. It accepts an array of unique modals ids and returns an object with the following properties:

interface ModalStackReturnType<T extends string> {
  // Current opened state of each modal
  state: Record<T, boolean>;

  // Opens modal with the given id
  open: (id: T) => void;

  // Closes modal with the given id
  close: (id: T) => void;

  // Toggles modal with the given id
  toggle: (id: T) => void;

  // Closes all modals within the stack
  closeAll: () => void;

  // Returns props for modal with the given id
  register: (id: T) => {
    opened: boolean;
    onClose: () => void;
    stackId: T;
  };
}

Example of using useModalsStack with Modal component:

import { Modal, useModalsStack } from '@mantine/core';

function Demo() {
  const stack = useModalsStack(['first', 'second']);

  return (
    <>
      <Modal {...stack.register('first')}>First</Modal>
      <Modal {...stack.register('second')}>Second</Modal>
      <Button onClick={() => stack.open('first')}>Open first</Button>
    </>
  );
}

Restrict Slider selection to marks

Slider component now supports restrictToMarks prop that restricts slider value to marks only. Note that in this case step prop is ignored:

BarChart SVG pattern fill

BarChart now can be used with SVG pattern fill:

Help center updates

• New Can I use nested inline styles with Mantine components? question
• New Can I use PostCSS function in inline styles? question
• New Why my Carousel slides are in vertical orientation? question
• New My buttons are transparent and the background is visible only on hover, what is wrong? question
• New Can I have different primary color for light and dark color schemes? question
• New How can I change body background color? question
• New My Popover dropdown closes when I click on the dropdown of nested Popover question

Other changes

• useTree hook now accepts onNodeExpand and onNodeCollapse callbacks
• useTree hook now returns additional checkAllNodes, uncheckAllNodes and setCheckedState handlers
• Tree component now includes getTreeExpandedState to generate expanded state based on the tree data
• use-form now supports form.replaceListItem handler to replace list item at given index