{"version":3,"file":"CurrencyInput.cjs","sources":["../../../../src/components/Input/CurrencyInput/CurrencyInput.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentProps,\n  type FocusEvent,\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from 'react'\n\nimport { Input } from '../Input'\n\nimport { formatCurrency } from './currencyInputHelper'\n\ntype Props = Omit<ComponentProps<typeof Input>, 'type' | 'value' | 'defaultValue'> & {\n  /** 通貨の値 */\n  value?: string\n  /** デフォルトで表示する通貨の値 */\n  defaultValue?: string\n  /** 入力値がフォーマットされたときに発火するコールバック関数 */\n  onFormatValue?: (value: string) => void\n}\n\nexport const CurrencyInput = forwardRef<HTMLInputElement, Props>(\n  ({ onFormatValue, onFocus, onBlur, value, defaultValue, className = '', ...rest }, ref) => {\n    const innerRef = useRef<HTMLInputElement>(null)\n    const [isFocused, setIsFocused] = useState(false)\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => innerRef.current,\n    )\n\n    const formatValue = useCallback(\n      (formatted = '') => {\n        if (innerRef.current && formatted !== innerRef.current.value) {\n          innerRef.current.value = formatted\n          onFormatValue?.(formatted)\n        }\n      },\n      [onFormatValue],\n    )\n\n    useEffect(() => {\n      if (value === undefined && defaultValue !== undefined) {\n        formatValue(formatCurrency(defaultValue))\n      }\n      // when component did mount\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [])\n\n    useEffect(() => {\n      if (!isFocused) {\n        if (value !== undefined) {\n          // for controlled component\n          formatValue(formatCurrency(value))\n        } else if (innerRef.current) {\n          // for uncontrolled component\n          formatValue(formatCurrency(innerRef.current.value))\n        }\n      }\n    }, [isFocused, value, formatValue])\n\n    const handleFocus = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        setIsFocused(true)\n\n        if (innerRef.current) {\n          const commaExcluded = innerRef.current.value.replace(/,/g, '')\n          formatValue(commaExcluded)\n        }\n\n        onFocus?.(e)\n      },\n      [formatValue, onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (e: FocusEvent<HTMLInputElement>) => {\n        setIsFocused(false)\n\n        onBlur?.(e)\n      },\n      [onBlur],\n    )\n\n    return (\n      <Input\n        {...rest}\n        type=\"text\"\n        value={value}\n        defaultValue={defaultValue}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        ref={innerRef}\n        className={`smarthr-ui-CurrencyInput${className ? ` ${className}` : ''}`}\n      />\n    )\n  },\n)\n"],"names":[],"mappings":";;;;;;;;AA0BO;AAEH;;;;AAUI;AACE;AACA;;AAEJ;;;AAME;;;;;;;AAQA;;AAEE;;AACK;;;;;;AAOX;;AAII;AACE;;;AAIF;AACF;AAIF;;AAII;AACF;;AAgBJ;;"}