smarthr-ui 20.1.2 → 20.2.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [20.2.0](https://github.com/kufu/smarthr-ui/compare/v20.1.2...v20.2.0) (2022-04-12)
+
+
+### Features
+
+* string to ReactNode ([#2400](https://github.com/kufu/smarthr-ui/issues/2400)) ([200947d](https://github.com/kufu/smarthr-ui/commit/200947dd4483e6171c61c35c1753763d3828a12f))
+
+
+### Bug Fixes
+
+* ダイアログのポータルが DOM に追加される前に子のライフサイクルが開始されないように修正 ([#2403](https://github.com/kufu/smarthr-ui/issues/2403)) ([062a564](https://github.com/kufu/smarthr-ui/commit/062a5645cbebccf25f0de7ef4e1113e764379066))
+
 ### [20.1.2](https://github.com/kufu/smarthr-ui/compare/v20.1.1...v20.1.2) (2022-04-06)
 
 

package/esm/components/Dialog/ActionDialog.d.ts

@@ -1,9 +1,9 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 import { ActionDialogContentInnerProps } from './ActionDialogContentInner';
 declare type Props = Omit<ActionDialogContentInnerProps, 'titleId'> & {
     onClickClose: () => void;
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 } & Pick<DialogContentInnerProps, 'isOpen' | 'onClickOverlay' | 'onPressEscape' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'id'>;
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const ActionDialog: React.VFC<Props & ElementProps>;

package/esm/components/Dialog/ActionDialog.js

@@ -1,19 +1,11 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useCallback } from 'react';
 import { useId } from '../../hooks/useId';
+import { useDialogPortal } from './useDialogPortal';
 import { DialogContentInner } from './DialogContentInner';
 import { ActionDialogContentInner } from './ActionDialogContentInner';
 export const ActionDialog = ({ children, title, subtitle, closeText, actionText, actionTheme, onClickAction, onClickClose, responseMessage, actionDisabled = false, closeDisabled, className = '', portalParent, ...props }) => {
-    const portalContainer = useRef(document.createElement('div')).current;
+    const { Portal } = useDialogPortal(portalParent);
     const titleId = useId();
-    useEffect(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
     const handleClickClose = useCallback(() => {
         if (!props.isOpen) {
             return;
@@ -26,7 +18,8 @@ export const ActionDialog = ({ children, title, subtitle, closeText, actionText,
         }
         onClickAction(onClickClose);
     }, [onClickAction, onClickClose, props.isOpen]);
-    return createPortal(React.createElement(DialogContentInner, { ariaLabelledby: titleId, className: className, ...props },
-        React.createElement(ActionDialogContentInner, { title: title, titleId: titleId, subtitle: subtitle, closeText: closeText, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: handleClickClose, onClickAction: handleClickAction, responseMessage: responseMessage }, children)), portalContainer);
+    return (React.createElement(Portal, null,
+        React.createElement(DialogContentInner, { ariaLabelledby: titleId, className: className, ...props },
+            React.createElement(ActionDialogContentInner, { title: title, titleId: titleId, subtitle: subtitle, closeText: closeText, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: handleClickClose, onClickAction: handleClickAction, responseMessage: responseMessage }, children))));
 };
 //# sourceMappingURL=ActionDialog.js.map

package/esm/components/Dialog/ActionDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ActionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAClF,OAAO,EAAE,wBAAwB,EAAiC,MAAM,4BAA4B,CAAA;AAmBpG,MAAM,CAAC,MAAM,YAAY,GAAoC,CAAC,EAC5D,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,GAAG,KAAK,EACtB,aAAa,EACb,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IACrE,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,aAAa,CAAC,YAAY,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,YAAY,CACjB,oBAAC,kBAAkB,IAAC,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK;QAC1E,oBAAC,wBAAwB,IACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,iBAAiB,EAChC,eAAe,EAAE,eAAe,IAE/B,QAAQ,CACgB,CACR,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ActionDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ActionDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAClF,OAAO,EAAE,wBAAwB,EAAiC,MAAM,4BAA4B,CAAA;AAmBpG,MAAM,CAAC,MAAM,YAAY,GAAoC,CAAC,EAC5D,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,GAAG,KAAK,EACtB,aAAa,EACb,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,KAAK,EAAE,CAAA;IAEvB,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,aAAa,CAAC,YAAY,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,kBAAkB,IAAC,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK;YAC1E,oBAAC,wBAAwB,IACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,iBAAiB,EAChC,eAAe,EAAE,eAAe,IAE/B,QAAQ,CACgB,CACR,CACd,CACV,CAAA;AACH,CAAC,CAAA"}

package/esm/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 declare type Props = DialogContentInnerProps & {
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const Dialog: React.VFC<Props & ElementProps>;

package/esm/components/Dialog/Dialog.js

@@ -1,16 +1,9 @@
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import React from 'react';
+import { useDialogPortal } from './useDialogPortal';
 import { DialogContentInner } from './DialogContentInner';
 export const Dialog = ({ children, className = '', portalParent, ...props }) => {
-    const portalContainer = useRef(document.createElement('div')).current;
-    useEffect(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
-    return createPortal(React.createElement(DialogContentInner, { className: className, ...props }, children), portalContainer);
+    const { Portal } = useDialogPortal(portalParent);
+    return (React.createElement(Portal, null,
+        React.createElement(DialogContentInner, { className: className, ...props }, children)));
 };
 //# sourceMappingURL=Dialog.js.map

package/esm/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAKlF,MAAM,CAAC,MAAM,MAAM,GAAoC,CAAC,EACtD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,OAAO,YAAY,CACjB,oBAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,IAChD,QAAQ,CACU,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAKlF,MAAM,CAAC,MAAM,MAAM,GAAoC,CAAC,EACtD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAEhD,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,kBAAkB,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,IAChD,QAAQ,CACU,CACd,CACV,CAAA;AACH,CAAC,CAAA"}

package/esm/components/Dialog/DialogWrapper.js

@@ -1,5 +1,5 @@
-import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import React, { createContext, useMemo, useState } from 'react';
+import { useDialogPortal } from './useDialogPortal';
 export const DialogContext = createContext({
     onClickTrigger: () => {
         /* noop */
@@ -12,17 +12,11 @@ export const DialogContext = createContext({
 });
 export const DialogWrapper = ({ children }) => {
     const [active, setActive] = useState(false);
-    const element = useRef(document.createElement('div')).current;
-    useEffect(() => {
-        document.body.appendChild(element);
-        return () => {
-            document.body.removeChild(element);
-        };
-    }, [element]);
+    const { Portal } = useDialogPortal();
     // This is the root container of a dialog content located in outside the DOM tree
     const DialogContentRoot = useMemo(() => (props) => {
-        return createPortal(props.children, element);
-    }, [element]);
+        return React.createElement(Portal, null, props.children);
+    }, [Portal]);
     // set the displayName explicit for DevTools
     DialogContentRoot.displayName = 'DialogContentRoot';
     return (React.createElement(DialogContext.Provider, { value: {

package/esm/components/Dialog/DialogWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AASxC,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,cAAc,EAAE,GAAG,EAAE;QACnB,UAAU;IACZ,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,UAAU;IACZ,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI;IAC7B,MAAM,EAAE,KAAK;CACd,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,aAAa,GAA8C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,OAAO,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAElC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,iFAAiF;IACjF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;QACd,OAAO,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAC9C,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,4CAA4C;IAC5C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;IAEnD,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YACrC,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;YACpC,iBAAiB;YACjB,MAAM;SACP,IAEA,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AASnD,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAoB;IAC5D,cAAc,EAAE,GAAG,EAAE;QACnB,UAAU;IACZ,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,UAAU;IACZ,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI;IAC7B,MAAM,EAAE,KAAK;CACd,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,aAAa,GAA8C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,EAAE,CAAA;IAEpC,iFAAiF;IACjF,MAAM,iBAAiB,GAAG,OAAO,CAC/B,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;QACd,OAAO,oBAAC,MAAM,QAAE,KAAK,CAAC,QAAQ,CAAU,CAAA;IAC1C,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,4CAA4C;IAC5C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;IAEnD,OAAO,CACL,oBAAC,aAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YACrC,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;YACpC,iBAAiB;YACjB,MAAM;SACP,IAEA,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC,CAAA"}

package/esm/components/Dialog/MessageDialog.d.ts

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 import { MessageDialogContentInnerProps } from './MessageDialogContentInner';
 declare type Props = MessageDialogContentInnerProps & Pick<DialogContentInnerProps, 'isOpen' | 'onClickOverlay' | 'onPressEscape' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'id'> & {
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const MessageDialog: React.VFC<Props & ElementProps>;

package/esm/components/Dialog/MessageDialog.js

@@ -1,24 +1,17 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import React, { useCallback } from 'react';
+import { useDialogPortal } from './useDialogPortal';
 import { DialogContentInner } from './DialogContentInner';
 import { MessageDialogContentInner, } from './MessageDialogContentInner';
 export const MessageDialog = ({ title, subtitle, description, closeText, onClickClose, className = '', portalParent, ...props }) => {
-    const portalContainer = useRef(document.createElement('div')).current;
-    useEffect(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
+    const { Portal } = useDialogPortal(portalParent);
     const handleClickClose = useCallback(() => {
         if (!props.isOpen) {
             return;
         }
         onClickClose();
     }, [onClickClose, props.isOpen]);
-    return createPortal(React.createElement(DialogContentInner, { ariaLabel: subtitle ? `${subtitle} ${title}` : title, className: className, ...props },
-        React.createElement(MessageDialogContentInner, { title: title, subtitle: subtitle, description: description, closeText: closeText, onClickClose: handleClickClose })), portalContainer);
+    return (React.createElement(Portal, null,
+        React.createElement(DialogContentInner, { ariaLabel: subtitle ? `${subtitle} ${title}` : title, className: className, ...props },
+            React.createElement(MessageDialogContentInner, { title: title, subtitle: subtitle, description: description, closeText: closeText, onClickClose: handleClickClose }))));
 };
 //# sourceMappingURL=MessageDialog.js.map

package/esm/components/Dialog/MessageDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/MessageDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAClF,OAAO,EACL,yBAAyB,GAE1B,MAAM,6BAA6B,CAAA;AAiBpC,MAAM,CAAC,MAAM,aAAa,GAAoC,CAAC,EAC7D,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAErE,SAAS,CAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,OAAO,YAAY,CACjB,oBAAC,kBAAkB,IACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EACpD,SAAS,EAAE,SAAS,KAChB,KAAK;QAET,oBAAC,yBAAyB,IACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,gBAAgB,GAC9B,CACiB,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/MessageDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAA6B,WAAW,EAAE,MAAM,OAAO,CAAA;AAErE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,kBAAkB,EAA2B,MAAM,sBAAsB,CAAA;AAClF,OAAO,EACL,yBAAyB,GAE1B,MAAM,6BAA6B,CAAA;AAiBpC,MAAM,CAAC,MAAM,aAAa,GAAoC,CAAC,EAC7D,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,eAAe,CAAC,YAAY,CAAC,CAAA;IAChD,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,kBAAkB,IACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EACpD,SAAS,EAAE,SAAS,KAChB,KAAK;YAET,oBAAC,yBAAyB,IACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,gBAAgB,GAC9B,CACiB,CACd,CACV,CAAA;AACH,CAAC,CAAA"}

package/esm/components/Dialog/ModelessDialog.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, RefObject } from 'react';
 import { BaseElementProps } from '../Base';
 declare type Props = {
     /**
@@ -52,7 +52,7 @@ declare type Props = {
     /**
      * ポータルの container となる DOM 要素を追加する親要素
      */
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 export declare const ModelessDialog: React.VFC<Props & BaseElementProps>;
 export {};

package/esm/components/Dialog/ModelessDialog.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState, } from 'react';
-import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
 import Draggable from 'react-draggable';
 import { useTheme } from '../../hooks/useTheme';
@@ -8,10 +7,11 @@ import { useHandleEscape } from '../../hooks/useHandleEscape';
 import { Base } from '../Base';
 import { SecondaryButton } from '../Button';
 import { FaGripHorizontalIcon, FaTimesIcon } from '../Icon';
+import { useDialogPortal } from './useDialogPortal';
 import { DialogOverlap } from './DialogOverlap';
 import { useClassNames } from './useClassNames';
 export const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPressEscape, width, height, top, left, right, bottom, portalParent, className = '', ...props }) => {
-    const portalContainer = useRef(document.createElement('div')).current;
+    const { Portal, isReady } = useDialogPortal(portalParent);
     const wrapperRef = useRef(null);
     const focusTargetRef = useRef(null);
     const [wrapperPosition, setWrapperPosition] = useState(undefined);
@@ -21,14 +21,6 @@ export const ModelessDialog = ({ header, children, footer, isOpen, onClickClose,
         y: 0,
     });
     const theme = useTheme();
-    useEffect(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
     useEffect(() => {
         if (wrapperRef.current instanceof Element) {
             setWrapperPosition(wrapperRef.current.getBoundingClientRect());
@@ -40,14 +32,14 @@ export const ModelessDialog = ({ header, children, footer, isOpen, onClickClose,
         }
     }, [isOpen, onPressEscape]));
     useLayoutEffect(() => {
-        if (isOpen) {
+        if (isOpen && isReady) {
             setPosition({ x: 0, y: 0 });
             focusTargetRef.current?.focus();
         }
-    }, [isOpen]);
+    }, [isOpen, isReady]);
     useEffect(() => {
         // 中央寄せの座標計算を行う
-        if (!wrapperRef.current || !isOpen) {
+        if (!wrapperRef.current || !isOpen || !isReady) {
             return;
         }
         const isXCenter = left === undefined && right === undefined;
@@ -59,7 +51,7 @@ export const ModelessDialog = ({ header, children, footer, isOpen, onClickClose,
                 left: isXCenter ? window.innerWidth / 2 - rect.width / 2 : undefined,
             });
         }
-    }, [bottom, isOpen, left, right, top]);
+    }, [bottom, isOpen, isReady, left, right, top]);
     const handleArrowKey = useCallback((e) => {
         if (!isOpen || document.activeElement !== e.currentTarget) {
             return;
@@ -98,36 +90,37 @@ export const ModelessDialog = ({ header, children, footer, isOpen, onClickClose,
     }, [isOpen]);
     const labelId = useId();
     const classNames = useClassNames().modelessDialog;
-    return createPortal(React.createElement(DialogOverlap, { isOpen: isOpen },
-        React.createElement(Draggable, { handle: `.${classNames.handle}`, onStart: (_, data) => setPosition({ x: data.x, y: data.y }), onDrag: (_, data) => {
-                setPosition((prev) => {
-                    return {
-                        x: prev.x + data.deltaX,
-                        y: prev.y + data.deltaY,
-                    };
-                });
-            }, position: position },
-            React.createElement(Layout, { className: `${className} ${classNames.wrapper}`, style: {
-                    top: centering.top !== undefined ? centering.top : top,
-                    left: centering.left !== undefined ? centering.left : left,
-                    right,
-                    bottom,
-                    width,
-                    height,
-                }, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, ...props },
-                React.createElement(Box, { isWidthAuto: width === undefined, left: left, right: right, themes: theme, className: classNames.box },
-                    React.createElement("div", { tabIndex: -1, ref: focusTargetRef }),
-                    React.createElement(Header, { className: classNames.header, themes: theme },
-                        React.createElement(Title, { id: labelId, themes: theme }, header),
-                        React.createElement(DialogHandler, { className: classNames.handle, themes: theme, tabIndex: 0, role: "slider", "aria-label": "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u4F4D\u7F6E", "aria-valuetext": wrapperPosition &&
-                                `上から${Math.trunc(wrapperPosition.top)}px、
+    return (React.createElement(Portal, null,
+        React.createElement(DialogOverlap, { isOpen: isOpen },
+            React.createElement(Draggable, { handle: `.${classNames.handle}`, onStart: (_, data) => setPosition({ x: data.x, y: data.y }), onDrag: (_, data) => {
+                    setPosition((prev) => {
+                        return {
+                            x: prev.x + data.deltaX,
+                            y: prev.y + data.deltaY,
+                        };
+                    });
+                }, position: position },
+                React.createElement(Layout, { className: `${className} ${classNames.wrapper}`, style: {
+                        top: centering.top !== undefined ? centering.top : top,
+                        left: centering.left !== undefined ? centering.left : left,
+                        right,
+                        bottom,
+                        width,
+                        height,
+                    }, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, ...props },
+                    React.createElement(Box, { isWidthAuto: width === undefined, left: left, right: right, themes: theme, className: classNames.box },
+                        React.createElement("div", { tabIndex: -1, ref: focusTargetRef }),
+                        React.createElement(Header, { className: classNames.header, themes: theme },
+                            React.createElement(Title, { id: labelId, themes: theme }, header),
+                            React.createElement(DialogHandler, { className: classNames.handle, themes: theme, tabIndex: 0, role: "slider", "aria-label": "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u4F4D\u7F6E", "aria-valuetext": wrapperPosition &&
+                                    `上から${Math.trunc(wrapperPosition.top)}px、
                   左から${Math.trunc(wrapperPosition.left)}px`, onKeyDown: handleArrowKey },
-                            React.createElement(FaGripHorizontalIcon, null)),
-                        React.createElement(CloseButtonLayout, null,
-                            React.createElement(SecondaryButton, { type: "button", size: "s", square: true, onClick: onClickClose, className: classNames.closeButton },
-                                React.createElement(FaTimesIcon, { visuallyHiddenText: "\u9589\u3058\u308B" })))),
-                    React.createElement(Content, { className: classNames.content }, children),
-                    footer && (React.createElement(Footer, { className: classNames.footer, themes: theme }, footer)))))), portalContainer);
+                                React.createElement(FaGripHorizontalIcon, null)),
+                            React.createElement(CloseButtonLayout, null,
+                                React.createElement(SecondaryButton, { type: "button", size: "s", square: true, onClick: onClickClose, className: classNames.closeButton },
+                                    React.createElement(FaTimesIcon, { visuallyHiddenText: "\u9589\u3058\u308B" })))),
+                        React.createElement(Content, { className: classNames.content }, children),
+                        footer && (React.createElement(Footer, { className: classNames.footer, themes: theme }, footer))))))));
 };
 const Layout = styled.div `
   position: fixed;

package/esm/components/Dialog/ModelessDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelessDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ModelessDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelessDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ModelessDialog.tsx"],"names":[],"mappings":"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"}

package/esm/components/Dialog/useDialogPortal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, RefObject, VFC } from 'react';
+export declare function useDialogPortal(parent?: HTMLElement | RefObject<HTMLElement>): {
+    Portal: VFC<{
+        children: ReactNode;
+    }>;
+    isReady: boolean;
+};

package/esm/components/Dialog/useDialogPortal.js

@@ -0,0 +1,32 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+export function useDialogPortal(parent) {
+    const portalContainer = useRef(document.createElement('div')).current;
+    const [isReady, setIsReady] = useState(false);
+    useEffect(() => {
+        const parentElement = parent != null && 'current' in parent ? parent.current : parent;
+        // SSR を考慮し、useEffect 内で初期値 document.body を指定
+        const actualParent = parentElement || document.body;
+        // 前状態のクリンナップと同ループで処理しないようにタイミングを遅らせる
+        setTimeout(() => {
+            actualParent.appendChild(portalContainer);
+            setIsReady(true);
+        });
+        return () => {
+            setIsReady(false);
+            actualParent.removeChild(portalContainer);
+        };
+    }, [portalContainer, parent]);
+    const Portal = useCallback(({ children }) => {
+        if (!isReady) {
+            // コンテナの append が完了するまでは子のライフサイクルを開始させない
+            return null;
+        }
+        return createPortal(children, portalContainer);
+    }, [isReady, portalContainer]);
+    return {
+        Portal,
+        isReady,
+    };
+}
+//# sourceMappingURL=useDialogPortal.js.map

package/esm/components/Dialog/useDialogPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogPortal.js","sourceRoot":"","sources":["../../../src/components/Dialog/useDialogPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA6B,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAExC,MAAM,UAAU,eAAe,CAAC,MAA6C;IAC3E,MAAM,eAAe,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7C,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,MAAM,IAAI,IAAI,IAAI,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;QACrF,6CAA6C;QAC7C,MAAM,YAAY,GAAG,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAA;QACnD,qCAAqC;QACrC,UAAU,CAAC,GAAG,EAAE;YACd,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;YACzC,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC3C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7B,MAAM,MAAM,GAAiC,WAAW,CACtD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;QACf,IAAI,CAAC,OAAO,EAAE;YACZ,wCAAwC;YACxC,OAAO,IAAI,CAAA;SACZ;QACD,OAAO,YAAY,CAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAChD,CAAC,EACD,CAAC,OAAO,EAAE,eAAe,CAAC,CAC3B,CAAA;IAED,OAAO;QACL,MAAM;QACN,OAAO;KACR,CAAA;AACH,CAAC"}

package/esm/components/InformationPanel/InformationPanel.d.ts

@@ -3,7 +3,7 @@ import { BaseElementProps } from '../Base';
 import { HeadingTagTypes } from '../Heading';
 declare type Props = {
     /** パネルのタイトル */
-    title: string;
+    title: React.ReactNode;
     /** タイトル部分の HTML タグ */
     titleTag?: HeadingTagTypes;
     /** 表示する情報のタイプ */
@@ -11,9 +11,9 @@ declare type Props = {
     /** `true` のとき、開閉ボタンを表示する */
     togglable?: boolean;
     /** 開くボタンのラベル */
-    openButtonLabel?: string;
+    openButtonLabel?: React.ReactNode;
     /** 閉じるボタンのラベル */
-    closeButtonLabel?: string;
+    closeButtonLabel?: React.ReactNode;
     /** パネルの開閉の状態 */
     active?: boolean;
     /** コンポーネントに適用するクラス名 */

package/lib/components/Dialog/ActionDialog.d.ts

@@ -1,9 +1,9 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 import { ActionDialogContentInnerProps } from './ActionDialogContentInner';
 declare type Props = Omit<ActionDialogContentInnerProps, 'titleId'> & {
     onClickClose: () => void;
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 } & Pick<DialogContentInnerProps, 'isOpen' | 'onClickOverlay' | 'onPressEscape' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'id'>;
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const ActionDialog: React.VFC<Props & ElementProps>;

package/lib/components/Dialog/ActionDialog.js

@@ -25,21 +25,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ActionDialog = void 0;
 const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const useId_1 = require("../../hooks/useId");
+const useDialogPortal_1 = require("./useDialogPortal");
 const DialogContentInner_1 = require("./DialogContentInner");
 const ActionDialogContentInner_1 = require("./ActionDialogContentInner");
 const ActionDialog = ({ children, title, subtitle, closeText, actionText, actionTheme, onClickAction, onClickClose, responseMessage, actionDisabled = false, closeDisabled, className = '', portalParent, ...props }) => {
-    const portalContainer = (0, react_1.useRef)(document.createElement('div')).current;
+    const { Portal } = (0, useDialogPortal_1.useDialogPortal)(portalParent);
     const titleId = (0, useId_1.useId)();
-    (0, react_1.useEffect)(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
     const handleClickClose = (0, react_1.useCallback)(() => {
         if (!props.isOpen) {
             return;
@@ -52,8 +44,9 @@ const ActionDialog = ({ children, title, subtitle, closeText, actionText, action
         }
         onClickAction(onClickClose);
     }, [onClickAction, onClickClose, props.isOpen]);
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(DialogContentInner_1.DialogContentInner, { ariaLabelledby: titleId, className: className, ...props },
-        react_1.default.createElement(ActionDialogContentInner_1.ActionDialogContentInner, { title: title, titleId: titleId, subtitle: subtitle, closeText: closeText, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: handleClickClose, onClickAction: handleClickAction, responseMessage: responseMessage }, children)), portalContainer);
+    return (react_1.default.createElement(Portal, null,
+        react_1.default.createElement(DialogContentInner_1.DialogContentInner, { ariaLabelledby: titleId, className: className, ...props },
+            react_1.default.createElement(ActionDialogContentInner_1.ActionDialogContentInner, { title: title, titleId: titleId, subtitle: subtitle, closeText: closeText, actionText: actionText, actionTheme: actionTheme, actionDisabled: actionDisabled, closeDisabled: closeDisabled, onClickClose: handleClickClose, onClickAction: handleClickAction, responseMessage: responseMessage }, children))));
 };
 exports.ActionDialog = ActionDialog;
 //# sourceMappingURL=ActionDialog.js.map

package/lib/components/Dialog/ActionDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ActionDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,yCAAwC;AAExC,6CAAyC;AACzC,6DAAkF;AAClF,yEAAoG;AAmB7F,MAAM,YAAY,GAAoC,CAAC,EAC5D,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,GAAG,KAAK,EACtB,aAAa,EACb,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IACrE,MAAM,OAAO,GAAG,IAAA,aAAK,GAAE,CAAA;IAEvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,aAAa,CAAC,YAAY,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,IAAA,wBAAY,EACjB,8BAAC,uCAAkB,IAAC,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK;QAC1E,8BAAC,mDAAwB,IACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,iBAAiB,EAChC,eAAe,EAAE,eAAe,IAE/B,QAAQ,CACgB,CACR,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AA9DY,QAAA,YAAY,gBA8DxB"}
+{"version":3,"file":"ActionDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ActionDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AAErE,6CAAyC;AACzC,uDAAmD;AACnD,6DAAkF;AAClF,yEAAoG;AAmB7F,MAAM,YAAY,GAAoC,CAAC,EAC5D,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,YAAY,EACZ,eAAe,EACf,cAAc,GAAG,KAAK,EACtB,aAAa,EACb,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,iCAAe,EAAC,YAAY,CAAC,CAAA;IAChD,MAAM,OAAO,GAAG,IAAA,aAAK,GAAE,CAAA;IAEvB,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,MAAM,iBAAiB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACzC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,aAAa,CAAC,YAAY,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,aAAa,EAAE,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAE/C,OAAO,CACL,8BAAC,MAAM;QACL,8BAAC,uCAAkB,IAAC,cAAc,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,KAAM,KAAK;YAC1E,8BAAC,mDAAwB,IACvB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,YAAY,EAAE,gBAAgB,EAC9B,aAAa,EAAE,iBAAiB,EAChC,eAAe,EAAE,eAAe,IAE/B,QAAQ,CACgB,CACR,CACd,CACV,CAAA;AACH,CAAC,CAAA;AAtDY,QAAA,YAAY,gBAsDxB"}

package/lib/components/Dialog/Dialog.d.ts

@@ -1,7 +1,7 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 declare type Props = DialogContentInnerProps & {
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const Dialog: React.VFC<Props & ElementProps>;

package/lib/components/Dialog/Dialog.js

@@ -1,43 +1,16 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dialog = void 0;
-const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
+const react_1 = __importDefault(require("react"));
+const useDialogPortal_1 = require("./useDialogPortal");
 const DialogContentInner_1 = require("./DialogContentInner");
 const Dialog = ({ children, className = '', portalParent, ...props }) => {
-    const portalContainer = (0, react_1.useRef)(document.createElement('div')).current;
-    (0, react_1.useEffect)(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(DialogContentInner_1.DialogContentInner, { className: className, ...props }, children), portalContainer);
+    const { Portal } = (0, useDialogPortal_1.useDialogPortal)(portalParent);
+    return (react_1.default.createElement(Portal, null,
+        react_1.default.createElement(DialogContentInner_1.DialogContentInner, { className: className, ...props }, children)));
 };
 exports.Dialog = Dialog;
 //# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAgE;AAChE,yCAAwC;AACxC,6DAAkF;AAK3E,MAAM,MAAM,GAAoC,CAAC,EACtD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAErE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,OAAO,IAAA,wBAAY,EACjB,8BAAC,uCAAkB,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,IAChD,QAAQ,CACU,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAvBY,QAAA,MAAM,UAuBlB"}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAwD;AAExD,uDAAmD;AACnD,6DAAkF;AAK3E,MAAM,MAAM,GAAoC,CAAC,EACtD,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,iCAAe,EAAC,YAAY,CAAC,CAAA;IAEhD,OAAO,CACL,8BAAC,MAAM;QACL,8BAAC,uCAAkB,IAAC,SAAS,EAAE,SAAS,KAAM,KAAK,IAChD,QAAQ,CACU,CACd,CACV,CAAA;AACH,CAAC,CAAA;AAfY,QAAA,MAAM,UAelB"}

package/lib/components/Dialog/DialogWrapper.js

@@ -25,7 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialogWrapper = exports.DialogContext = void 0;
 const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
+const useDialogPortal_1 = require("./useDialogPortal");
 exports.DialogContext = (0, react_1.createContext)({
     onClickTrigger: () => {
         /* noop */
@@ -38,17 +38,11 @@ exports.DialogContext = (0, react_1.createContext)({
 });
 const DialogWrapper = ({ children }) => {
     const [active, setActive] = (0, react_1.useState)(false);
-    const element = (0, react_1.useRef)(document.createElement('div')).current;
-    (0, react_1.useEffect)(() => {
-        document.body.appendChild(element);
-        return () => {
-            document.body.removeChild(element);
-        };
-    }, [element]);
+    const { Portal } = (0, useDialogPortal_1.useDialogPortal)();
     // This is the root container of a dialog content located in outside the DOM tree
     const DialogContentRoot = (0, react_1.useMemo)(() => (props) => {
-        return (0, react_dom_1.createPortal)(props.children, element);
-    }, [element]);
+        return react_1.default.createElement(Portal, null, props.children);
+    }, [Portal]);
     // set the displayName explicit for DevTools
     DialogContentRoot.displayName = 'DialogContentRoot';
     return (react_1.default.createElement(exports.DialogContext.Provider, { value: {

package/lib/components/Dialog/DialogWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAkF;AAClF,yCAAwC;AAS3B,QAAA,aAAa,GAAG,IAAA,qBAAa,EAAoB;IAC5D,cAAc,EAAE,GAAG,EAAE;QACnB,UAAU;IACZ,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,UAAU;IACZ,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI;IAC7B,MAAM,EAAE,KAAK;CACd,CAAC,CAAA;AAEK,MAAM,aAAa,GAA8C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,OAAO,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAE7D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QAElC,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAA;QACpC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;IAEb,iFAAiF;IACjF,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAC/B,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;QACd,OAAO,IAAA,wBAAY,EAAC,KAAK,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;IAC9C,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAA;IACD,4CAA4C;IAC5C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;IAEnD,OAAO,CACL,8BAAC,qBAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YACrC,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;YACpC,iBAAiB;YACjB,MAAM;SACP,IAEA,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC,CAAA;AAlCY,QAAA,aAAa,iBAkCzB"}
+{"version":3,"file":"DialogWrapper.js","sourceRoot":"","sources":["../../../src/components/Dialog/DialogWrapper.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+D;AAE/D,uDAAmD;AAStC,QAAA,aAAa,GAAG,IAAA,qBAAa,EAAoB;IAC5D,cAAc,EAAE,GAAG,EAAE;QACnB,UAAU;IACZ,CAAC;IACD,YAAY,EAAE,GAAG,EAAE;QACjB,UAAU;IACZ,CAAC;IACD,iBAAiB,EAAE,GAAG,EAAE,CAAC,IAAI;IAC7B,MAAM,EAAE,KAAK;CACd,CAAC,CAAA;AAEK,MAAM,aAAa,GAA8C,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IACvF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,iCAAe,GAAE,CAAA;IAEpC,iFAAiF;IACjF,MAAM,iBAAiB,GAAG,IAAA,eAAO,EAC/B,GAAG,EAAE,CAAC,CAAC,KAAK,EAAE,EAAE;QACd,OAAO,8BAAC,MAAM,QAAE,KAAK,CAAC,QAAQ,CAAU,CAAA;IAC1C,CAAC,EACD,CAAC,MAAM,CAAC,CACT,CAAA;IACD,4CAA4C;IAC5C,iBAAiB,CAAC,WAAW,GAAG,mBAAmB,CAAA;IAEnD,OAAO,CACL,8BAAC,qBAAa,CAAC,QAAQ,IACrB,KAAK,EAAE;YACL,cAAc,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC;YACrC,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC;YACpC,iBAAiB;YACjB,MAAM;SACP,IAEA,QAAQ,CACc,CAC1B,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,aAAa,iBA0BzB"}

package/lib/components/Dialog/MessageDialog.d.ts

@@ -1,8 +1,8 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import { DialogContentInnerProps } from './DialogContentInner';
 import { MessageDialogContentInnerProps } from './MessageDialogContentInner';
 declare type Props = MessageDialogContentInnerProps & Pick<DialogContentInnerProps, 'isOpen' | 'onClickOverlay' | 'onPressEscape' | 'width' | 'top' | 'right' | 'bottom' | 'left' | 'id'> & {
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 declare type ElementProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Props>;
 export declare const MessageDialog: React.VFC<Props & ElementProps>;

package/lib/components/Dialog/MessageDialog.js

@@ -25,27 +25,20 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MessageDialog = void 0;
 const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
+const useDialogPortal_1 = require("./useDialogPortal");
 const DialogContentInner_1 = require("./DialogContentInner");
 const MessageDialogContentInner_1 = require("./MessageDialogContentInner");
 const MessageDialog = ({ title, subtitle, description, closeText, onClickClose, className = '', portalParent, ...props }) => {
-    const portalContainer = (0, react_1.useRef)(document.createElement('div')).current;
-    (0, react_1.useEffect)(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
+    const { Portal } = (0, useDialogPortal_1.useDialogPortal)(portalParent);
     const handleClickClose = (0, react_1.useCallback)(() => {
         if (!props.isOpen) {
             return;
         }
         onClickClose();
     }, [onClickClose, props.isOpen]);
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(DialogContentInner_1.DialogContentInner, { ariaLabel: subtitle ? `${subtitle} ${title}` : title, className: className, ...props },
-        react_1.default.createElement(MessageDialogContentInner_1.MessageDialogContentInner, { title: title, subtitle: subtitle, description: description, closeText: closeText, onClickClose: handleClickClose })), portalContainer);
+    return (react_1.default.createElement(Portal, null,
+        react_1.default.createElement(DialogContentInner_1.DialogContentInner, { ariaLabel: subtitle ? `${subtitle} ${title}` : title, className: className, ...props },
+            react_1.default.createElement(MessageDialogContentInner_1.MessageDialogContentInner, { title: title, subtitle: subtitle, description: description, closeText: closeText, onClickClose: handleClickClose }))));
 };
 exports.MessageDialog = MessageDialog;
 //# sourceMappingURL=MessageDialog.js.map

package/lib/components/Dialog/MessageDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/MessageDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA6E;AAC7E,yCAAwC;AAExC,6DAAkF;AAClF,2EAGoC;AAiB7B,MAAM,aAAa,GAAoC,CAAC,EAC7D,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IAErE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,6CAA6C;QAC7C,MAAM,EAAE,GAAG,YAAY,IAAI,QAAQ,CAAC,IAAI,CAAA;QACxC,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC/B,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QACjC,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAEnC,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,OAAO,IAAA,wBAAY,EACjB,8BAAC,uCAAkB,IACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EACpD,SAAS,EAAE,SAAS,KAChB,KAAK;QAET,8BAAC,qDAAyB,IACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,gBAAgB,GAC9B,CACiB,EACrB,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AA5CY,QAAA,aAAa,iBA4CzB"}
+{"version":3,"file":"MessageDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/MessageDialog.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqE;AAErE,uDAAmD;AACnD,6DAAkF;AAClF,2EAGoC;AAiB7B,MAAM,aAAa,GAAoC,CAAC,EAC7D,KAAK,EACL,QAAQ,EACR,WAAW,EACX,SAAS,EACT,YAAY,EACZ,SAAS,GAAG,EAAE,EACd,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,iCAAe,EAAC,YAAY,CAAC,CAAA;IAChD,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACxC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;YACjB,OAAM;SACP;QACD,YAAY,EAAE,CAAA;IAChB,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAA;IAEhC,OAAO,CACL,8BAAC,MAAM;QACL,8BAAC,uCAAkB,IACjB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,KAAK,EACpD,SAAS,EAAE,SAAS,KAChB,KAAK;YAET,8BAAC,qDAAyB,IACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,gBAAgB,GAC9B,CACiB,CACd,CACV,CAAA;AACH,CAAC,CAAA;AAnCY,QAAA,aAAa,iBAmCzB"}

package/lib/components/Dialog/ModelessDialog.d.ts

@@ -1,4 +1,4 @@
-import React, { MouseEvent, ReactNode } from 'react';
+import React, { MouseEvent, ReactNode, RefObject } from 'react';
 import { BaseElementProps } from '../Base';
 declare type Props = {
     /**
@@ -52,7 +52,7 @@ declare type Props = {
     /**
      * ポータルの container となる DOM 要素を追加する親要素
      */
-    portalParent?: HTMLElement;
+    portalParent?: HTMLElement | RefObject<HTMLElement>;
 };
 export declare const ModelessDialog: React.VFC<Props & BaseElementProps>;
 export {};

package/lib/components/Dialog/ModelessDialog.js

@@ -28,7 +28,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModelessDialog = void 0;
 const react_1 = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const styled_components_1 = __importStar(require("styled-components"));
 const react_draggable_1 = __importDefault(require("react-draggable"));
 const useTheme_1 = require("../../hooks/useTheme");
@@ -37,10 +36,11 @@ const useHandleEscape_1 = require("../../hooks/useHandleEscape");
 const Base_1 = require("../Base");
 const Button_1 = require("../Button");
 const Icon_1 = require("../Icon");
+const useDialogPortal_1 = require("./useDialogPortal");
 const DialogOverlap_1 = require("./DialogOverlap");
 const useClassNames_1 = require("./useClassNames");
 const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPressEscape, width, height, top, left, right, bottom, portalParent, className = '', ...props }) => {
-    const portalContainer = (0, react_1.useRef)(document.createElement('div')).current;
+    const { Portal, isReady } = (0, useDialogPortal_1.useDialogPortal)(portalParent);
     const wrapperRef = (0, react_1.useRef)(null);
     const focusTargetRef = (0, react_1.useRef)(null);
     const [wrapperPosition, setWrapperPosition] = (0, react_1.useState)(undefined);
@@ -50,14 +50,6 @@ const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPres
         y: 0,
     });
     const theme = (0, useTheme_1.useTheme)();
-    (0, react_1.useEffect)(() => {
-        // SSR を考慮し、useEffect 内で初期値 document.body を指定
-        const pp = portalParent || document.body;
-        pp.appendChild(portalContainer);
-        return () => {
-            pp.removeChild(portalContainer);
-        };
-    }, [portalContainer, portalParent]);
     (0, react_1.useEffect)(() => {
         if (wrapperRef.current instanceof Element) {
             setWrapperPosition(wrapperRef.current.getBoundingClientRect());
@@ -69,14 +61,14 @@ const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPres
         }
     }, [isOpen, onPressEscape]));
     (0, react_1.useLayoutEffect)(() => {
-        if (isOpen) {
+        if (isOpen && isReady) {
             setPosition({ x: 0, y: 0 });
             focusTargetRef.current?.focus();
         }
-    }, [isOpen]);
+    }, [isOpen, isReady]);
     (0, react_1.useEffect)(() => {
         // 中央寄せの座標計算を行う
-        if (!wrapperRef.current || !isOpen) {
+        if (!wrapperRef.current || !isOpen || !isReady) {
             return;
         }
         const isXCenter = left === undefined && right === undefined;
@@ -88,7 +80,7 @@ const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPres
                 left: isXCenter ? window.innerWidth / 2 - rect.width / 2 : undefined,
             });
         }
-    }, [bottom, isOpen, left, right, top]);
+    }, [bottom, isOpen, isReady, left, right, top]);
     const handleArrowKey = (0, react_1.useCallback)((e) => {
         if (!isOpen || document.activeElement !== e.currentTarget) {
             return;
@@ -127,36 +119,37 @@ const ModelessDialog = ({ header, children, footer, isOpen, onClickClose, onPres
     }, [isOpen]);
     const labelId = (0, useId_1.useId)();
     const classNames = (0, useClassNames_1.useClassNames)().modelessDialog;
-    return (0, react_dom_1.createPortal)(react_1.default.createElement(DialogOverlap_1.DialogOverlap, { isOpen: isOpen },
-        react_1.default.createElement(react_draggable_1.default, { handle: `.${classNames.handle}`, onStart: (_, data) => setPosition({ x: data.x, y: data.y }), onDrag: (_, data) => {
-                setPosition((prev) => {
-                    return {
-                        x: prev.x + data.deltaX,
-                        y: prev.y + data.deltaY,
-                    };
-                });
-            }, position: position },
-            react_1.default.createElement(Layout, { className: `${className} ${classNames.wrapper}`, style: {
-                    top: centering.top !== undefined ? centering.top : top,
-                    left: centering.left !== undefined ? centering.left : left,
-                    right,
-                    bottom,
-                    width,
-                    height,
-                }, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, ...props },
-                react_1.default.createElement(Box, { isWidthAuto: width === undefined, left: left, right: right, themes: theme, className: classNames.box },
-                    react_1.default.createElement("div", { tabIndex: -1, ref: focusTargetRef }),
-                    react_1.default.createElement(Header, { className: classNames.header, themes: theme },
-                        react_1.default.createElement(Title, { id: labelId, themes: theme }, header),
-                        react_1.default.createElement(DialogHandler, { className: classNames.handle, themes: theme, tabIndex: 0, role: "slider", "aria-label": "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u4F4D\u7F6E", "aria-valuetext": wrapperPosition &&
-                                `上から${Math.trunc(wrapperPosition.top)}px、
+    return (react_1.default.createElement(Portal, null,
+        react_1.default.createElement(DialogOverlap_1.DialogOverlap, { isOpen: isOpen },
+            react_1.default.createElement(react_draggable_1.default, { handle: `.${classNames.handle}`, onStart: (_, data) => setPosition({ x: data.x, y: data.y }), onDrag: (_, data) => {
+                    setPosition((prev) => {
+                        return {
+                            x: prev.x + data.deltaX,
+                            y: prev.y + data.deltaY,
+                        };
+                    });
+                }, position: position },
+                react_1.default.createElement(Layout, { className: `${className} ${classNames.wrapper}`, style: {
+                        top: centering.top !== undefined ? centering.top : top,
+                        left: centering.left !== undefined ? centering.left : left,
+                        right,
+                        bottom,
+                        width,
+                        height,
+                    }, ref: wrapperRef, role: "dialog", "aria-labelledby": labelId, ...props },
+                    react_1.default.createElement(Box, { isWidthAuto: width === undefined, left: left, right: right, themes: theme, className: classNames.box },
+                        react_1.default.createElement("div", { tabIndex: -1, ref: focusTargetRef }),
+                        react_1.default.createElement(Header, { className: classNames.header, themes: theme },
+                            react_1.default.createElement(Title, { id: labelId, themes: theme }, header),
+                            react_1.default.createElement(DialogHandler, { className: classNames.handle, themes: theme, tabIndex: 0, role: "slider", "aria-label": "\u30C0\u30A4\u30A2\u30ED\u30B0\u306E\u4F4D\u7F6E", "aria-valuetext": wrapperPosition &&
+                                    `上から${Math.trunc(wrapperPosition.top)}px、
                   左から${Math.trunc(wrapperPosition.left)}px`, onKeyDown: handleArrowKey },
-                            react_1.default.createElement(Icon_1.FaGripHorizontalIcon, null)),
-                        react_1.default.createElement(CloseButtonLayout, null,
-                            react_1.default.createElement(Button_1.SecondaryButton, { type: "button", size: "s", square: true, onClick: onClickClose, className: classNames.closeButton },
-                                react_1.default.createElement(Icon_1.FaTimesIcon, { visuallyHiddenText: "\u9589\u3058\u308B" })))),
-                    react_1.default.createElement(Content, { className: classNames.content }, children),
-                    footer && (react_1.default.createElement(Footer, { className: classNames.footer, themes: theme }, footer)))))), portalContainer);
+                                react_1.default.createElement(Icon_1.FaGripHorizontalIcon, null)),
+                            react_1.default.createElement(CloseButtonLayout, null,
+                                react_1.default.createElement(Button_1.SecondaryButton, { type: "button", size: "s", square: true, onClick: onClickClose, className: classNames.closeButton },
+                                    react_1.default.createElement(Icon_1.FaTimesIcon, { visuallyHiddenText: "\u9589\u3058\u308B" })))),
+                        react_1.default.createElement(Content, { className: classNames.content }, children),
+                        footer && (react_1.default.createElement(Footer, { className: classNames.footer, themes: theme }, footer))))))));
 };
 exports.ModelessDialog = ModelessDialog;
 const Layout = styled_components_1.default.div `

package/lib/components/Dialog/ModelessDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModelessDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ModelessDialog.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ModelessDialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/ModelessDialog.tsx"],"names":[],"mappings":"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"}

package/lib/components/Dialog/useDialogPortal.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode, RefObject, VFC } from 'react';
+export declare function useDialogPortal(parent?: HTMLElement | RefObject<HTMLElement>): {
+    Portal: VFC<{
+        children: ReactNode;
+    }>;
+    isReady: boolean;
+};

package/lib/components/Dialog/useDialogPortal.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDialogPortal = void 0;
+const react_1 = require("react");
+const react_dom_1 = require("react-dom");
+function useDialogPortal(parent) {
+    const portalContainer = (0, react_1.useRef)(document.createElement('div')).current;
+    const [isReady, setIsReady] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const parentElement = parent != null && 'current' in parent ? parent.current : parent;
+        // SSR を考慮し、useEffect 内で初期値 document.body を指定
+        const actualParent = parentElement || document.body;
+        // 前状態のクリンナップと同ループで処理しないようにタイミングを遅らせる
+        setTimeout(() => {
+            actualParent.appendChild(portalContainer);
+            setIsReady(true);
+        });
+        return () => {
+            setIsReady(false);
+            actualParent.removeChild(portalContainer);
+        };
+    }, [portalContainer, parent]);
+    const Portal = (0, react_1.useCallback)(({ children }) => {
+        if (!isReady) {
+            // コンテナの append が完了するまでは子のライフサイクルを開始させない
+            return null;
+        }
+        return (0, react_dom_1.createPortal)(children, portalContainer);
+    }, [isReady, portalContainer]);
+    return {
+        Portal,
+        isReady,
+    };
+}
+exports.useDialogPortal = useDialogPortal;
+//# sourceMappingURL=useDialogPortal.js.map

package/lib/components/Dialog/useDialogPortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialogPortal.js","sourceRoot":"","sources":["../../../src/components/Dialog/useDialogPortal.tsx"],"names":[],"mappings":";;;AAAA,iCAA2F;AAC3F,yCAAwC;AAExC,SAAgB,eAAe,CAAC,MAA6C;IAC3E,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAA;IACrE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAE7C,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,aAAa,GAAG,MAAM,IAAI,IAAI,IAAI,SAAS,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAA;QACrF,6CAA6C;QAC7C,MAAM,YAAY,GAAG,aAAa,IAAI,QAAQ,CAAC,IAAI,CAAA;QACnD,qCAAqC;QACrC,UAAU,CAAC,GAAG,EAAE;YACd,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;YACzC,UAAU,CAAC,IAAI,CAAC,CAAA;QAClB,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,CAAC,CAAA;YACjB,YAAY,CAAC,WAAW,CAAC,eAAe,CAAC,CAAA;QAC3C,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7B,MAAM,MAAM,GAAiC,IAAA,mBAAW,EACtD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;QACf,IAAI,CAAC,OAAO,EAAE;YACZ,wCAAwC;YACxC,OAAO,IAAI,CAAA;SACZ;QACD,OAAO,IAAA,wBAAY,EAAC,QAAQ,EAAE,eAAe,CAAC,CAAA;IAChD,CAAC,EACD,CAAC,OAAO,EAAE,eAAe,CAAC,CAC3B,CAAA;IAED,OAAO;QACL,MAAM;QACN,OAAO;KACR,CAAA;AACH,CAAC;AAlCD,0CAkCC"}

package/lib/components/InformationPanel/InformationPanel.d.ts

@@ -3,7 +3,7 @@ import { BaseElementProps } from '../Base';
 import { HeadingTagTypes } from '../Heading';
 declare type Props = {
     /** パネルのタイトル */
-    title: string;
+    title: React.ReactNode;
     /** タイトル部分の HTML タグ */
     titleTag?: HeadingTagTypes;
     /** 表示する情報のタイプ */
@@ -11,9 +11,9 @@ declare type Props = {
     /** `true` のとき、開閉ボタンを表示する */
     togglable?: boolean;
     /** 開くボタンのラベル */
-    openButtonLabel?: string;
+    openButtonLabel?: React.ReactNode;
     /** 閉じるボタンのラベル */
-    closeButtonLabel?: string;
+    closeButtonLabel?: React.ReactNode;
     /** パネルの開閉の状態 */
     active?: boolean;
     /** コンポーネントに適用するクラス名 */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "smarthr-ui",
   "description": "SmartHR ui components built with React.",
-  "version": "20.1.2",
+  "version": "20.2.0",
   "author": "SmartHR-UI Team",
   "dependencies": {
     "dayjs": "^1.11.0",
@@ -13,7 +13,7 @@
     "react-transition-group": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.8",
+    "@babel/core": "^7.17.9",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
     "@storybook/addon-a11y": "^6.4.19",
@@ -22,17 +22,17 @@
     "@storybook/cli": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@storybook/theming": "^6.4.19",
-    "@swc/core": "^1.2.160",
+    "@swc/core": "^1.2.165",
     "@swc/jest": "^0.2.20",
     "@types/jest": "^27.4.1",
     "@types/lodash.merge": "^4.6.6",
     "@types/lodash.range": "^3.2.6",
     "@types/node": "^14.18.10",
-    "@types/react": "^17.0.43",
-    "@types/react-dom": "^17.0.14",
+    "@types/react": "^17.0.44",
+    "@types/react-dom": "^17.0.15",
     "@types/react-test-renderer": "^17.0.1",
     "@types/react-transition-group": "^4.4.4",
-    "@types/styled-components": "^5.1.24",
+    "@types/styled-components": "^5.1.25",
     "babel-loader": "^8.2.4",
     "ecma-version-validator-webpack-plugin": "^1.2.1",
     "eslint": "^8.12.0",
@@ -47,9 +47,9 @@
     "npm-run-all": "^4.1.5",
     "postcss-jsx": "^0.36.4",
     "postcss-syntax": "^0.36.2",
-    "prettier": "^2.6.1",
+    "prettier": "^2.6.2",
     "prettier-config-smarthr": "^1.0.0",
-    "puppeteer": "^13.5.1",
+    "puppeteer": "^13.5.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",
@@ -59,7 +59,7 @@
     "reg-suit": "^0.11.1",
     "standard-version": "^9.3.2",
     "storybook-readme": "^5.0.9",
-    "storycap": "^3.1.6",
+    "storycap": "^3.1.7",
     "styled-components": "^5.3.5",
     "styled-reset": "^4.3.4",
     "stylelint": "^14.6.1",
@@ -147,7 +147,7 @@
     "minimist": "1.2.6",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "@types/react": "^17.0.43",
+    "@types/react": "^17.0.44",
     "@babel/helper-compilation-targets": "^7.17.7"
   }
 }