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

package/dist/index.js

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