From ebe8b0e7a0909c0efccdcaa3551e460ed3ada529 Mon Sep 17 00:00:00 2001
From: Vitaly Rtishchev <rtivital@gmail.com>
Date: Wed, 7 Aug 2024 19:55:56 +0400
Subject: [PATCH] [@mantine/core] PinInput: Allow passing props to individual
 input elements depending on index with `getInputProps` (#6588)

---
 .../@mantine/core/src/components/PinInput/PinInput.tsx     | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/@mantine/core/src/components/PinInput/PinInput.tsx b/packages/@mantine/core/src/components/PinInput/PinInput.tsx
index 3742652a8a0..91d313bbbd6 100644
--- a/packages/@mantine/core/src/components/PinInput/PinInput.tsx
+++ b/packages/@mantine/core/src/components/PinInput/PinInput.tsx
@@ -16,7 +16,7 @@ import {
   useStyles,
 } from '../../core';
 import { Group } from '../Group';
-import { Input } from '../Input';
+import { Input, InputProps } from '../Input';
 import { InputBase } from '../InputBase';
 import { createPinArray } from './create-pin-array/create-pin-array';
 import classes from './PinInput.module.css';
@@ -119,6 +119,9 @@ export interface PinInputProps
 
   /** Assigns ref of the root element */
   rootRef?: React.ForwardedRef<HTMLDivElement>;
+
+  /** Props added to the input element depending on its index */
+  getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'>;
 }
 
 export type PinInputFactory = Factory<{
@@ -178,6 +181,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
     id,
     hiddenInputProps,
     rootRef,
+    getInputProps,
     ...others
   } = useProps('PinInput', defaultProps, props);
 
@@ -415,6 +419,7 @@ export const PinInput = factory<PinInputFactory>((props, ref) => {
             unstyled={unstyled}
             aria-label={ariaLabel}
             readOnly={readOnly}
+            {...getInputProps?.(index)}
           />
         ))}
       </Group>