@gumigumih/react-calculator-input-form 1.0.0 → 1.0.1

package/dist/components/organisms/CalculatorInput.d.ts

@@ -10,4 +10,4 @@ export interface CalculatorInputProps {
     numberFormatOptions?: any;
     displayPlaceholder?: string;
 }
-export declare const CalculatorInput: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, }: CalculatorInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CalculatorInput: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, }: CalculatorInputProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/index.esm.js

@@ -6421,7 +6421,13 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
  }) => {
     const [input, setInput] = useState(initialValue || '');
     const [error, setError] = useState('');
+    const [mounted, setMounted] = useState(false);
     const inputRef = useRef(null);
+    // DOM要素の存在確認
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     useEffect(() => {
         if (isOpen) {
             setInput(initialValue || '');
@@ -6543,18 +6549,32 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
         setInput(normalizeNumberString(taxExcluded, decimalPlaces));
         setError('');
     };
-    if (!isOpen)
+    if (!isOpen || !mounted)
         return null;
     const modal = (jsx("div", { className: "calculator-overlay", children: jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxs("div", { className: "calculator-header", children: [jsxs("div", { children: [title && jsx("h2", { className: "calculator-title", children: title }), description && jsx("p", { className: "calculator-subtitle", children: description })] }), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxs("div", { className: "calculator-header", children: [jsx("div", {}), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsx("div", { className: "calculator-display", children: jsx(CalculatorDisplay, { value: input, error: error, inputRef: inputRef, editable: true, onChange: (v) => setInput(v), numberFormatOptions: numberFormatOptions }) }), jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
-    return createPortal(modal, document.body);
+    // DOM要素の存在確認を行ってからポータルを作成
+    if (typeof document !== 'undefined' && document.body) {
+        return createPortal(modal, document.body);
+    }
+    return null;
 };
 
 const CalculatorInput = ({ value, onChange, placeholder = 'クリックして金額を入力', className, title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {}, displayPlaceholder, }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    // DOM要素の存在確認
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     const handleCalculate = (val) => {
         onChange(val);
         setIsOpen(false);
     };
+    // マウント前は何も表示しない
+    if (!mounted) {
+        return null;
+    }
     return (jsxs(Fragment, { children: [jsx(NumericFormat, { value: value, onValueChange: (vals) => onChange(vals.value), placeholder: placeholder, className: className, readOnly: true, onClick: () => setIsOpen(true), ...numberFormatOptions }), jsx(Calculator, { isOpen: isOpen, onClose: () => setIsOpen(false), onCalculate: handleCalculate, initialValue: value, title: title, description: description, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces, numberFormatOptions: numberFormatOptions, placeholder: displayPlaceholder })] }));
 };