@mantine/core/cjs/components/PinInput/PinInput.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"PinInput.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","useResolvedStylesApi","createPinArray","Group","Input","classes","InputBase"],"sources":["../../../src/components/PinInput/PinInput.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { assignRef, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  BoxProps,\n  createVarsResolver,\n  DataAttributes,\n  ElementProps,\n  Factory,\n  factory,\n  getSize,\n  MantineRadius,\n  MantineSize,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport { Group } from '../Group';\nimport { Input, InputProps } from '../Input';\nimport { InputBase } from '../InputBase';\nimport { createPinArray } from './create-pin-array/create-pin-array';\nimport classes from './PinInput.module.css';\n\nconst regex = {\n  number: /^[0-9]+$/,\n  alphanumeric: /^[a-zA-Z0-9]+$/i,\n};\n\nexport type PinInputStylesNames = 'root' | 'pinInput' | 'input';\n\nexport type PinInputCssVariables = {\n  root: '--pin-input-size';\n};\n\nexport interface PinInputProps\n  extends BoxProps, StylesApiProps<PinInputFactory>, ElementProps<'div', 'onChange' | 'ref'> {\n  ref?: React.Ref<HTMLInputElement>;\n\n  /** Hidden input `name` attribute */\n  name?: string;\n\n  /** Hidden input `form` attribute */\n  form?: string;\n\n  /** Key of `theme.spacing` or any valid CSS value to set `gap` between inputs, numbers are converted to rem @default 'md' */\n  gap?: MantineSpacing;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Controls inputs `width` and `height` @default 'sm' */\n  size?: MantineSize;\n\n  /** If set, the first input is focused when component is mounted @default false */\n  autoFocus?: boolean;\n\n  /** Controlled component value */\n  value?: string;\n\n  /** Uncontrolled component default value */\n  defaultValue?: string;\n\n  /** Called when value changes */\n  onChange?: (value: string) => void;\n\n  /** Called when all inputs have value */\n  onComplete?: (value: string) => void;\n\n  /** Inputs placeholder @default '○' */\n  placeholder?: string;\n\n  /** Determines whether focus should be moved automatically to the next input once filled @default true */\n  manageFocus?: boolean;\n\n  /** Determines whether `autocomplete=\"one-time-code\"` attribute should be set on all inputs @default true */\n  oneTimeCode?: boolean;\n\n  /** Base id used to generate unique ids for inputs */\n  id?: string;\n\n  /** Adds disabled attribute to all inputs */\n  disabled?: boolean;\n\n  /** Sets `aria-invalid` attribute and applies error styles to all inputs */\n  error?: boolean;\n\n  /** Determines which values can be entered @default 'alphanumeric' */\n  type?: 'alphanumeric' | 'number' | RegExp;\n\n  /** Changes input type to `\"password\"` @default false */\n  mask?: boolean;\n\n  /** Number of inputs @default 4 */\n  length?: number;\n\n  /** If set, the user cannot edit the value */\n  readOnly?: boolean;\n\n  /** Inputs `type` attribute, inferred from the `type` prop if not specified */\n  inputType?: React.HTMLInputTypeAttribute;\n\n  /** `inputmode` attribute, inferred from the `type` prop if not specified */\n  inputMode?:\n    | 'none'\n    | 'text'\n    | 'tel'\n    | 'url'\n    | 'email'\n    | 'numeric'\n    | 'decimal'\n    | 'search'\n    | undefined;\n\n  /** `aria-label` attribute */\n  ariaLabel?: string;\n\n  /** Props passed down to the hidden input */\n  hiddenInputProps?: React.ComponentProps<'input'>;\n\n  /** Assigns ref of the root element */\n  rootRef?: React.Ref<HTMLDivElement>;\n\n  /** Props added to the input element depending on its index */\n  getInputProps?: (index: number) => InputProps & ElementProps<'input', 'size'> & DataAttributes;\n}\n\nexport type PinInputFactory = Factory<{\n  props: PinInputProps;\n  ref: HTMLDivElement;\n  stylesNames: PinInputStylesNames;\n  vars: PinInputCssVariables;\n}>;\n\nconst defaultProps = {\n  gap: 'sm',\n  length: 4,\n  manageFocus: true,\n  oneTimeCode: true,\n  placeholder: '○',\n  type: 'alphanumeric',\n  ariaLabel: 'PinInput',\n  size: 'sm',\n} satisfies Partial<PinInputProps>;\n\nconst varsResolver = createVarsResolver<PinInputFactory>((_, { size }) => ({\n  root: {\n    '--pin-input-size': getSize(size ?? 'sm', 'pin-input-size'),\n  },\n}));\n\nexport const PinInput = factory<PinInputFactory>((props) => {\n  const {\n    name,\n    form,\n    className,\n    value,\n    defaultValue,\n    variant,\n    gap,\n    style,\n    size,\n    classNames,\n    styles,\n    unstyled,\n    length,\n    onChange,\n    onComplete,\n    manageFocus,\n    autoFocus,\n    error,\n    radius,\n    disabled,\n    oneTimeCode,\n    placeholder,\n    type,\n    mask,\n    readOnly,\n    inputType,\n    inputMode,\n    ariaLabel,\n    vars,\n    id,\n    hiddenInputProps,\n    rootRef,\n    getInputProps,\n    attributes,\n    ref,\n    ...others\n  } = useProps('PinInput', defaultProps, props);\n\n  const uuid = useId(id);\n\n  const getStyles = useStyles<PinInputFactory>({\n    name: 'PinInput',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<PinInputFactory>({\n    classNames,\n    styles,\n    props,\n  });\n\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n  const inputsRef = useRef<Array<HTMLInputElement>>([]);\n  const currentLength = length ?? 4;\n\n  const completedRef = useRef(false);\n\n  const [_value, setValues] = useUncontrolled<string[]>({\n    value: value !== undefined ? createPinArray(currentLength, value) : undefined,\n    defaultValue: defaultValue?.split('').slice(0, currentLength),\n    finalValue: createPinArray(currentLength, ''),\n    onChange: (val) => {\n      const stringValue = val.join('').trim();\n      onChange?.(stringValue);\n      if (stringValue.length === currentLength && !completedRef.current) {\n        completedRef.current = true;\n        onComplete?.(stringValue);\n      } else if (stringValue.length < currentLength) {\n        completedRef.current = false;\n      }\n    },\n  });\n\n  const currentValue =\n    _value.length !== currentLength ? createPinArray(currentLength, _value.join('')) : _value;\n\n  const _valueToString = currentValue.join('').trim();\n\n  const validate = (code: string) => {\n    const re = type instanceof RegExp ? type : type && type in regex ? regex[type] : null;\n    return re?.test(code);\n  };\n\n  const focusInputField = (dir: 'next' | 'prev', index: number) => {\n    if (!manageFocus) {\n      return;\n    }\n\n    if (dir === 'next') {\n      const nextIndex = index + 1;\n      if (nextIndex < currentLength) {\n        inputsRef.current[nextIndex]?.focus();\n      }\n    } else if (dir === 'prev') {\n      const prevIndex = index - 1;\n      if (prevIndex >= 0) {\n        inputsRef.current[prevIndex]?.focus();\n      }\n    }\n  };\n\n  const setFieldValue = (val: string, index: number) => {\n    const values = [...currentValue];\n    values[index] = val;\n    setValues(values);\n    return values;\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {\n    const inputValue = event.target.value;\n\n    if (inputValue.length > 1) {\n      const isPaste = inputValue.length > 2;\n      if (isPaste) {\n        const isValid = validate(inputValue);\n        if (isValid) {\n          setValues(createPinArray(currentLength, inputValue));\n          const filledCount = Math.min(inputValue.length, currentLength);\n          if (filledCount < currentLength) {\n            focusInputField('next', filledCount - 1);\n          }\n        }\n        return;\n      }\n\n      const newChar = inputValue.split('')[inputValue.length - 1];\n      if (validate(newChar)) {\n        setFieldValue(newChar, index);\n        focusInputField('next', index);\n      }\n      return;\n    }\n\n    if (inputValue.length === 1) {\n      if (validate(inputValue)) {\n        setFieldValue(inputValue, index);\n        focusInputField('next', index);\n      } else {\n        setFieldValue('', index);\n      }\n    } else if (inputValue.length === 0) {\n      setFieldValue('', index);\n    }\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, index: number) => {\n    const { ctrlKey, metaKey, key, shiftKey, target } = event;\n    const inputValue = (target as HTMLInputElement).value;\n\n    if (inputMode === 'numeric') {\n      const allowedKeys = ['Backspace', 'Tab', 'Control', 'Delete', 'ArrowLeft', 'ArrowRight'];\n      const isPasteShortcut = (ctrlKey || metaKey) && key === 'v';\n      const isAllowedKey =\n        allowedKeys.includes(key) || isPasteShortcut || !Number.isNaN(Number(key));\n\n      if (!isAllowedKey) {\n        event.preventDefault();\n        return;\n      }\n    }\n\n    switch (key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        focusInputField('prev', index);\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Tab':\n        if (shiftKey) {\n          if (index > 0 && manageFocus) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      case ' ':\n        event.preventDefault();\n        focusInputField('next', index);\n        break;\n\n      case 'Delete':\n        event.preventDefault();\n        setFieldValue('', index);\n        break;\n\n      case 'Backspace':\n        if (inputValue === '') {\n          event.preventDefault();\n          focusInputField('prev', index);\n        } else {\n          setFieldValue('', index);\n          if (index < currentLength - 1) {\n            event.preventDefault();\n            focusInputField('prev', index);\n          }\n        }\n        break;\n\n      default:\n        if (inputValue.length > 0 && key === currentValue[index]) {\n          event.preventDefault();\n          focusInputField('next', index);\n        }\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n    event.target.select();\n    setFocusedIndex(index);\n  };\n\n  const handleBlur = () => {\n    setFocusedIndex(-1);\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    event.preventDefault();\n    const pasteData = event.clipboardData.getData('text/plain').replace(/[\\n\\r\\s]+/g, '');\n    const isValid = validate(pasteData.trim());\n\n    if (isValid) {\n      const pasteArray = createPinArray(currentLength, pasteData);\n      setValues(pasteArray);\n      const filledCount = pasteArray.filter((val) => val !== '').length;\n      if (filledCount >= currentLength) {\n        inputsRef.current[currentLength - 1]?.focus();\n      } else {\n        inputsRef.current[filledCount]?.focus();\n      }\n    }\n  };\n\n  return (\n    <>\n      <Group\n        {...others}\n        {...getStyles('root')}\n        ref={rootRef}\n        role=\"group\"\n        id={uuid}\n        gap={gap}\n        unstyled={unstyled}\n        wrap=\"nowrap\"\n        variant={variant}\n        __size={size}\n        dir=\"ltr\"\n      >\n        {currentValue.map((char: string, index: number) => (\n          <Input\n            component=\"input\"\n            {...getStyles('pinInput', {\n              style: {\n                '--input-padding': '0',\n                '--input-text-align': 'center',\n              } as React.CSSProperties,\n            })}\n            classNames={resolvedClassNames}\n            styles={resolvedStyles}\n            size={size}\n            __staticSelector=\"PinInput\"\n            id={`${uuid}-${index + 1}`}\n            key={`${uuid}-${index}`}\n            inputMode={inputMode || (type === 'number' ? 'numeric' : 'text')}\n            onChange={(event) => handleChange(event, index)}\n            onKeyDown={(event) => handleKeyDown(event, index)}\n            onFocus={(event) => handleFocus(event, index)}\n            onBlur={handleBlur}\n            onPaste={handlePaste}\n            type={inputType || (mask ? 'password' : type === 'number' ? 'tel' : 'text')}\n            radius={radius}\n            error={error}\n            variant={variant}\n            disabled={disabled}\n            ref={(node) => {\n              if (node) {\n                index === 0 && assignRef(ref, node);\n                inputsRef.current[index] = node;\n              }\n            }}\n            autoComplete={oneTimeCode ? 'one-time-code' : 'off'}\n            placeholder={focusedIndex === index ? '' : placeholder}\n            value={char}\n            autoFocus={autoFocus && index === 0}\n            unstyled={unstyled}\n            aria-label={ariaLabel}\n            readOnly={readOnly}\n            {...getInputProps?.(index)}\n          />\n        ))}\n      </Group>\n\n      <input type=\"hidden\" name={name} form={form} value={_valueToString} {...hiddenInputProps} />\n    </>\n  );\n});\n\nPinInput.classes = { ...classes, ...InputBase.classes };\nPinInput.varsResolver = varsResolver;\nPinInput.displayName = '@mantine/core/PinInput';\n"],"mappings":"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"}