Merge branch 'master' into fix/enable-timezone-hidden-input

README.md

@@ -6,15 +6,15 @@
 [![npm](https://img.shields.io/npm/dm/@mantine/hooks)](https://www.npmjs.com/package/@mantine/hooks)
 [![Help wanted](https://img.shields.io/github/labels/mantinedev/mantine/help%20wanted?label=Contribute)](https://github.com/mantinedev/mantine/labels/help%20wanted)
 [![Discord](https://img.shields.io/badge/Chat%20on-Discord-%235865f2)](https://discord.gg/wbH82zuWMN)
-[![Twitter Follow](https://img.shields.io/twitter/follow/mantinedev?style=social)](https://twitter.com/mantinedev)
+[![X Follow](https://img.shields.io/twitter/follow/mantinedev?style=social)](https://x.com/mantinedev)
 
 ## Links
 
 - [Documentation](https://mantine.dev/)
 - [Contribute](https://mantine.dev/contribute)
 - [Ask question or give feedback](https://github.com/mantinedev/mantine/discussions)
 - [Changelog](https://mantine.dev/changelog/all-releases)
-- [Follow on Twitter](https://twitter.com/mantinedev)
+- [Follow on X](https://x.com/mantinedev)
 - [Join Discord community](https://discord.gg/wbH82zuWMN)
 
 ## Packages

apps/help.mantine.dev/package.json

@@ -26,7 +26,7 @@
     "@tabler/icons-react": "^3.3.0",
     "dayjs": "^1.11.10",
     "fuse.js": "7.0.0",
-    "next": "14.2.3",
+    "next": "14.2.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-imask": "^7.1.3",

apps/help.mantine.dev/src/pages/q/roadmap.mdx

@@ -22,7 +22,7 @@ We are constantly working on improving Mantine and adding new features, but we d
 
 ## How can I know what is coming next?
 
-New features are usually announced in the [Discord server](https://discord.gg/wbH82zuWMN) and on [Twitter](https://twitter.com/mantinedev)
+New features are usually announced in the [Discord server](https://discord.gg/wbH82zuWMN) and on [X](https://x.com/mantinedev)
 when they are released. Upcoming features are usually discussed with the community on [Discord](https://discord.gg/wbH82zuWMN).
 
 ## When will the next version be released?

apps/mantine.dev/package.json

@@ -67,7 +67,7 @@
     "github-slugger": "^2.0.0",
     "highlight.js": "^11.9.0",
     "lowlight": "^3.1.0",
-    "next": "14.2.3",
+    "next": "14.2.12",
     "next-sitemap": "^4.2.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

apps/mantine.dev/src/components/Footer/data.ts

@@ -16,7 +16,7 @@ export const FOOTER_LINKS_DATA: LinksGroupProps[] = [
     title: 'Community',
     data: [
       { type: 'link', label: 'Chat on Discord', link: meta.discordLink },
-      { type: 'link', label: 'Follow on Twitter', link: meta.twitterLink },
+      { type: 'link', label: 'Follow on X', link: meta.twitterLink },
       { type: 'link', label: 'Follow on Github', link: 'https://github.com/rtivital' },
       {
         type: 'link',

apps/mantine.dev/src/components/MdxProvider/MdxPackagesInstallation/data.ts

@@ -41,7 +41,7 @@ export const PACKAGES_DATA = [
       '@mantine/hooks',
       '@mantine/core',
       '@mantine/tiptap',
-      '@tabler/icons-react',
+      '@tiptap/pm',
       '@tiptap/react',
       '@tiptap/extension-link',
       '@tiptap/starter-kit',

apps/mantine.dev/src/pages/contribute.mdx

@@ -11,7 +11,7 @@ First of all, thank you for showing interest in contributing to Mantine! All you
 
 - **Improve documentation:** Fix incomplete or missing docs, bad wording, examples or explanations.
 - **Give feedback:** We are constantly working on making Mantine better. Please share how you use Mantine, what features are missing and what is done well via [GitHub Discussions](https://github.com/mantinedev/mantine/discussions/new) or [Discord](https://discord.gg/wbH82zuWMN).
-- **Share Mantine:** Share links to the Mantine docs with everyone who might be interested! [Share Mantine on Twitter here](https://twitter.com/intent/tweet?text=Mantine%20%E2%80%93%20new%20React%20library%20with%20100%2B%20components%20and%20hooks.%20It%20has%20native%20dark%20theme%20support%20and%20focuses%20on%20accessibility%20and%20usability.%0A%0Ahttp%3A%2F%2Fmantine.dev%0A%0A%23reactjs%20).
+- **Share Mantine:** Share links to the Mantine docs with everyone who might be interested! [Share Mantine on X here](https://x.com/intent/tweet?text=Mantine%20%E2%80%93%20new%20React%20library%20with%20100%2B%20components%20and%20hooks.%20It%20has%20native%20dark%20theme%20support%20and%20focuses%20on%20accessibility%20and%20usability.%0A%0Ahttp%3A%2F%2Fmantine.dev%0A%0A%23reactjs%20).
 - **Contribute to the codebase:** Propose new features via [GitHub Issues](https://github.com/mantinedev/mantine/issues/new), or find an [existing issue](https://github.com/mantinedev/mantine/labels/help%20wanted) that you are interested in and work on it!
 - **Give us a code review:** Help us identify problems with the [source code](https://github.com/mantinedev/mantine/tree/master/packages) or make Mantine more performant.
 

apps/mantine.dev/src/pages/hooks/use-state-history.mdx

@@ -21,6 +21,7 @@ interface UseStateHistoryHandlers<T> {
   set: (value: T) => void;
   back: (steps?: number) => void;
   forward: (steps?: number) => void;
+  reset: () => void;
 }
 
 interface StateHistory<T> {

packages/@docs/demos/src/demos/core/HoverCard/HoverCard.demo.profile.tsx

@@ -19,7 +19,7 @@ function Demo() {
                 Mantine
               </Text>
               <Anchor
-                href="https://twitter.com/mantinedev"
+                href="https://x.com/mantinedev"
                 c="dimmed"
                 size="xs"
                 style={{ lineHeight: 1 }}
@@ -60,12 +60,7 @@ export function HoverCardHomePageDemo({ children }: { children: React.ReactNode
             <Text size="sm" fw={700} style={{ lineHeight: 1 }}>
               Mantine
             </Text>
-            <Anchor
-              href="https://twitter.com/mantinedev"
-              c="dimmed"
-              size="xs"
-              style={{ lineHeight: 1 }}
-            >
+            <Anchor href="https://x.com/mantinedev" c="dimmed" size="xs" style={{ lineHeight: 1 }}>
               @mantinedev
             </Anchor>
           </Stack>

packages/@docs/demos/src/demos/dates/TimeInput/TimeInput.demo.configurator.tsx

@@ -10,14 +10,13 @@ function Demo() {
   return (
     <TimeInput
       {{props}}
-      placeholder="Input placeholder"
     />
   );
 }
 `;
 
 function Wrapper(props: any) {
-  return <TimeInput {...props} placeholder="Input placeholder" />;
+  return <TimeInput {...props} />;
 }
 
 export const configurator: MantineDemo = {

packages/@docs/demos/src/demos/hooks/use-favicon.demo.usage.tsx

@@ -10,14 +10,14 @@ import { Group, Button } from '@mantine/core';
 
 function Demo() {
   const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
-  const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
+  const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
   const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
 
   useFavicon(favicon);
 
   return (
     <Group justify="center">
-      <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
+      <Button onClick={setXFavicon}>X favicon</Button>
       <Button onClick={setMantineFavicon}>Mantine favicon</Button>
     </Group>
   );
@@ -26,14 +26,14 @@ function Demo() {
 
 function Demo() {
   const [favicon, setFavicon] = useState('https://mantine.dev/favicon.svg');
-  const setTwitterFavicon = () => setFavicon('https://twitter.com/favicon.ico');
+  const setXFavicon = () => setFavicon('https://x.com/favicon.ico');
   const setMantineFavicon = () => setFavicon('https://mantine.dev/favicon.svg');
 
   useFavicon(favicon);
 
   return (
     <Group justify="center">
-      <Button onClick={setTwitterFavicon}>Twitter favicon</Button>
+      <Button onClick={setXFavicon}>X favicon</Button>
       <Button onClick={setMantineFavicon}>Mantine favicon</Button>
     </Group>
   );

packages/@docs/demos/src/demos/hooks/use-state-history.demo.usage.tsx

@@ -15,6 +15,7 @@ function Demo() {
         <Button onClick={() => handlers.set(Math.ceil(Math.random() * 100) + 1)}>Set value</Button>
         <Button onClick={() => handlers.back()}>Back</Button>
         <Button onClick={() => handlers.forward()}>Forward</Button>
+        <Button onClick={() => handlers.reset()}>Reset</Button>
       </Group>
       <Code block>{JSON.stringify(history, null, 2)}</Code>
     </>
@@ -31,6 +32,7 @@ function Demo() {
         <Button onClick={() => handlers.set(Math.ceil(Math.random() * 100) + 1)}>Set value</Button>
         <Button onClick={() => handlers.back()}>Back</Button>
         <Button onClick={() => handlers.forward()}>Forward</Button>
+        <Button onClick={() => handlers.reset()}>Reset</Button>
       </Group>
       <Code block>{JSON.stringify(history, null, 2)}</Code>
     </>

packages/@mantine/charts/src/BarChart/BarChart.tsx

@@ -123,7 +123,13 @@ const varsResolver = createVarsResolver<BarChartFactory>(
   })
 );
 
-export function BarLabel({ value, valueFormatter, ...others }: Record<string, any>) {
+export function BarLabel({
+  value,
+  valueFormatter,
+  textBreakAll,
+  parentViewBox,
+  ...others
+}: Record<string, any>) {
   return (
     <text
       {...others}

packages/@mantine/charts/src/BubbleChart/BubbleChart.tsx

@@ -107,7 +107,7 @@ export interface BubbleChartProps
   tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
 
   /** Props passed down to the `Scatter` component */
-  scatterProps?: Omit<ScatterProps, 'ref'>;
+  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;
 
   /** Color of the text displayed inside the chart, `'dimmed'` by default */
   textColor?: MantineColor;

packages/@mantine/charts/src/DonutChart/DonutChart.tsx

@@ -54,7 +54,7 @@ export interface DonutChartProps
   tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
 
   /** Props passed down to recharts `Pie` component */
-  pieProps?: Omit<PieProps, 'ref'>;
+  pieProps?: Partial<Omit<PieProps, 'ref'>>;
 
   /** Controls color of the segments stroke, by default depends on color scheme */
   strokeColor?: MantineColor;

packages/@mantine/charts/src/PieChart/PieChart.tsx

@@ -56,7 +56,7 @@ export interface PieChartProps
   tooltipProps?: Omit<TooltipProps<any, any>, 'ref'>;
 
   /** Props passed down to recharts `Pie` component */
-  pieProps?: Omit<PieProps, 'ref'>;
+  pieProps?: Partial<Omit<PieProps, 'ref'>>;
 
   /** Controls color of the segments stroke, by default depends on color scheme */
   strokeColor?: MantineColor;

packages/@mantine/charts/src/RadarChart/RadarChart.tsx

@@ -72,7 +72,9 @@ export interface RadarChartProps
   withPolarRadiusAxis?: boolean;
 
   /** Props passed down to recharts Radar component */
-  radarProps?: ((series: RadarChartSeries) => Omit<RadarProps, 'ref'>) | Omit<RadarProps, 'ref'>;
+  radarProps?:
+    | ((series: RadarChartSeries) => Partial<Omit<RadarProps, 'ref'>>)
+    | Partial<Omit<RadarProps, 'ref'>>;
 
   /** Props passed down to recharts RadarChart component */
   radarChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsRadarChart>;

packages/@mantine/charts/src/ScatterChart/ScatterChart.tsx

@@ -75,7 +75,7 @@ export interface ScatterChartProps
   scatterChartProps?: React.ComponentPropsWithoutRef<typeof ReChartsScatterChart>;
 
   /** Props passed down to recharts `Scatter` component */
-  scatterProps?: Omit<ScatterProps, 'ref'>;
+  scatterProps?: Partial<Omit<ScatterProps, 'ref'>>;
 
   /** If set, displays labels next to points for the given axis */
   pointLabels?: 'x' | 'y';

packages/@mantine/core/src/components/PinInput/PinInput.tsx

@@ -310,13 +310,15 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
     } else if (key === 'Delete') {
       setFieldValue('', index);
     } else if (key === 'Backspace') {
-      setFieldValue('', index);
-      if (length === index + 1) {
-        if ((event.target as HTMLInputElement).value === '') {
+      if (index !== 0) {
+        setFieldValue('', index);
+        if (length === index + 1) {
+          if ((event.target as HTMLInputElement).value === '') {
+            focusInputField('prev', index, event);
+          }
+        } else {
           focusInputField('prev', index, event);
         }
-      } else {
-        focusInputField('prev', index, event);
       }
     } else if (inputValue.length > 0 && key === _value[index]) {
       focusInputField('next', index, event);

packages/@mantine/core/src/components/ScrollArea/ScrollArea.tsx

@@ -213,6 +213,7 @@ export const ScrollAreaAutosize = factory<ScrollAreaFactory>((props, ref) => {
     style,
     vars,
     onBottomReached,
+    onTopReached,
     ...others
   } = useProps('ScrollAreaAutosize', defaultProps, props);
 
@@ -235,6 +236,7 @@ export const ScrollAreaAutosize = factory<ScrollAreaFactory>((props, ref) => {
           vars={vars}
           scrollbars={scrollbars}
           onBottomReached={onBottomReached}
+          onTopReached={onTopReached}
         >
           {children}
         </ScrollArea>

packages/@mantine/form/src/validate/should-validate-on-change.ts

@@ -10,7 +10,7 @@ export function shouldValidateOnChange(path: unknown, validateInputOnChange: boo
   }
 
   if (Array.isArray(validateInputOnChange)) {
-    return validateInputOnChange.includes((path as string).replace(/[.][0-9]/g, `.${FORM_INDEX}`));
+    return validateInputOnChange.includes((path as string).replace(/[.][0-9]+/g, `.${FORM_INDEX}`));
   }
 
   return false;

packages/@mantine/hooks/src/use-state-history/use-state-history.test.ts

@@ -83,4 +83,15 @@ describe('@mantine/hooks/use-state-history', () => {
     expect(hook.result.current[0]).toBe(5);
     expect(hook.result.current[2]).toStrictEqual({ history: [1, 5], current: 1 });
   });
+
+  it('resets history', () => {
+    const hook = renderHook(() => useStateHistory(1));
+    act(() => hook.result.current[1].set(2));
+    act(() => hook.result.current[1].set(3));
+    act(() => hook.result.current[1].set(4));
+    act(() => hook.result.current[1].reset());
+
+    expect(hook.result.current[0]).toBe(1);
+    expect(hook.result.current[2]).toStrictEqual({ history: [1], current: 0 });
+  });
 });

packages/@mantine/hooks/src/use-state-history/use-state-history.ts

@@ -4,6 +4,7 @@ export interface UseStateHistoryHandlers<T> {
   set: (value: T) => void;
   back: (steps?: number) => void;
   forward: (steps?: number) => void;
+  reset: () => void;
 }
 
 export interface StateHistory<T> {
@@ -49,7 +50,11 @@ export function useStateHistory<T>(
     []
   );
 
-  const handlers = useMemo(() => ({ set, forward, back }), []);
+  const reset = useCallback(() => {
+    setState({ history: [initialValue], current: 0 });
+  }, [initialValue]);
+
+  const handlers = useMemo(() => ({ back, forward, reset, set }), [back, forward, reset, set]);
 
   return [state.history[state.current], handlers, state];
 }

packages/@mantinex/mantine-meta/src/meta.ts

@@ -3,7 +3,7 @@ export const meta = {
   uiLink: 'https://ui.mantine.dev/',
 
   discordLink: 'https://discord.gg/wbH82zuWMN',
-  twitterLink: 'https://twitter.com/mantinedev',
+  twitterLink: 'https://x.com/mantinedev',
 
   npmLink: 'https://www.npmjs.com/org/mantine',