@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.8

package/dist/components/LoadingSpinner/index2.js

@@ -0,0 +1,41 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+/* empty css      */
+import { forwardRef, memo, useImperativeHandle, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/LoadingSpinner/index.tsx
+const LoadingSpinner = forwardRef(function LoadingSpinnerInner({ size = 48, padding = 16, transparent = false, ...props }, ref) {
+	const classNames = useClassNames("charcoal-loading-spinner", props.className);
+	return /* @__PURE__ */ jsx("div", {
+		role: "progressbar",
+		style: {
+			"--charcoal-loading-spinner-size": `${size}px`,
+			"--charcoal-loading-spinner-padding": `${padding}px`
+		},
+		"data-transparent": transparent,
+		className: classNames,
+		ref,
+		children: /* @__PURE__ */ jsx(LoadingSpinnerIcon, {})
+	});
+});
+var LoadingSpinner_default = memo(LoadingSpinner);
+const LoadingSpinnerIcon = forwardRef(function LoadingSpinnerIcon({ once = false }, ref) {
+	const iconRef = useRef(null);
+	useImperativeHandle(ref, () => ({ restart: () => {
+		if (!iconRef.current) return;
+		iconRef.current.dataset.resetAnimation = "true";
+		iconRef.current.offsetWidth;
+		delete iconRef.current.dataset.resetAnimation;
+	} }));
+	return /* @__PURE__ */ jsx("div", {
+		role: "presentation",
+		ref: iconRef,
+		"data-once": once,
+		className: "charcoal-loading-spinner-icon"
+	});
+});
+
+//#endregion
+export { LoadingSpinnerIcon, LoadingSpinner_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/LoadingSpinner/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","useImperativeHandle","useRef","memo","useClassNames","LoadingSpinnerProps","size","padding","transparent","className","LoadingSpinner","HTMLDivElement","LoadingSpinnerInner","props","ref","classNames","Props","once","LoadingSpinnerIconHandler","restart","LoadingSpinnerIcon","iconRef","current","dataset","resetAnimation","offsetWidth"],"sources":["../../../src/components/LoadingSpinner/index.tsx"],"sourcesContent":["import { forwardRef, useImperativeHandle, useRef, memo } from 'react'\nimport { useClassNames } from '../../_lib/useClassNames'\n\nimport './index.css'\n\nexport type LoadingSpinnerProps = {\n  readonly size?: number\n  readonly padding?: number\n  readonly transparent?: boolean\n  readonly className?: string\n}\n\nconst LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(\n  function LoadingSpinnerInner(\n    { size = 48, padding = 16, transparent = false, ...props },\n    ref,\n  ) {\n    const classNames = useClassNames(\n      'charcoal-loading-spinner',\n      props.className,\n    )\n\n    return (\n      <div\n        role=\"progressbar\"\n        style={{\n          '--charcoal-loading-spinner-size': `${size}px`,\n          '--charcoal-loading-spinner-padding': `${padding}px`,\n        }}\n        data-transparent={transparent}\n        className={classNames}\n        ref={ref}\n      >\n        <LoadingSpinnerIcon />\n      </div>\n    )\n  },\n)\n\nexport default memo(LoadingSpinner)\n\ntype Props = {\n  once?: boolean\n}\n\nexport interface LoadingSpinnerIconHandler {\n  restart(): void\n}\n\nexport const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(\n  function LoadingSpinnerIcon({ once = false }, ref) {\n    const iconRef = useRef<HTMLDivElement>(null)\n\n    useImperativeHandle(ref, () => ({\n      restart: () => {\n        if (!iconRef.current) {\n          return\n        }\n        iconRef.current.dataset.resetAnimation = 'true'\n        // Force reflow hack!\n        void iconRef.current.offsetWidth\n        delete iconRef.current.dataset.resetAnimation\n      },\n    }))\n\n    return (\n      <div\n        role=\"presentation\"\n        ref={iconRef}\n        data-once={once}\n        className=\"charcoal-loading-spinner-icon\"\n      />\n    )\n  },\n)\n"],"mappings":";;;;;;;AAYA,MAAMU,iBAAiBV,WACrB,SAASY,oBACP,EAAEN,OAAO,IAAIC,UAAU,IAAIC,cAAc,OAAO,GAAGK,SACnDC,KACA;CACA,MAAMC,aAAaX,cACjB,4BACAS,MAAMJ,UACP;CAED,OACE,oBAAC,OAAD;EACE,MAAK;EACL,OAAO;GACL,mCAAmC,GAAGH,KAAI;GAC1C,sCAAsC,GAAGC,QAAO;GACjD;EACD,oBAAkBC;EAClB,WAAWO;EACND;YAEL,oBAAC,oBAAD,EAAmB;EACf;EAGX;AAED,6BAAeX,KAAKO,eAAe;AAUnC,MAAaU,qBAAqBpB,WAChC,SAASoB,mBAAmB,EAAEH,OAAO,SAASH,KAAK;CACjD,MAAMO,UAAUnB,OAAuB,KAAK;CAE5CD,oBAAoBa,YAAY,EAC9BK,eAAe;EACb,IAAI,CAACE,QAAQC,SACX;EAEFD,QAAQC,QAAQC,QAAQC,iBAAiB;EAEzC,AAAKH,QAAQC,QAAQG;EACrB,OAAOJ,QAAQC,QAAQC,QAAQC;IAElC,EAAE;CAEH,OACE,oBAAC,OAAD;EACE,MAAK;EACL,KAAKH;EACL,aAAWJ;EACX,WAAU;EACV;EAGP"}

package/dist/components/Modal/Dialog/index2.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../../_lib/useClassNames.cjs');
+const require_useForwardedRef = require('../../../_lib/useForwardedRef.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_useDialog = require("react-aria/useDialog");
+
+//#region src/components/Modal/Dialog/index.tsx
+const Dialog = (0, react.forwardRef)(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {
+	const ref = require_useForwardedRef.useForwardedRef(forwardRef);
+	const { dialogProps } = (0, react_aria_useDialog.useDialog)({ role: "dialog" }, ref);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: require_useClassNames.useClassNames("charcoal-modal-dialog", className),
+		role: dialogProps.role,
+		"data-bottom-sheet": bottomSheet,
+		tabIndex: dialogProps.tabIndex,
+		"aria-labelledby": dialogProps["aria-labelledby"],
+		onBlur: dialogProps.onBlur,
+		"data-size": size,
+		ref,
+		...props
+	});
+});
+
+//#endregion
+exports.Dialog = Dialog;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Modal/Dialog/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["forwardRef","React","useDialog","useForwardedRef","Size","BottomSheet","useClassNames","Dialog","HTMLDivElement","ComponentPropsWithoutRef","size","bottomSheet","className","props","ref","dialogProps","role","classNames","tabIndex","onBlur"],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;;;AASA,MAAaO,+BAMX,SAASA,OAAO,EAAEG,MAAMC,aAAaC,WAAW,GAAGC,SAASb,YAAY;CACxE,MAAMc,MAAMX,wCAAgBH,WAAW;CACvC,MAAM,EAAEe,oDACN,EACEC,MAAM,UACP,EACDF,IACD;CAGD,OACE,2CAAC,OAAD;EACE,WAHeR,oCAAc,yBAAyBM,UAGjC;EACrB,MAAMG,YAAYC;EAClB,qBAAmBL;EACnB,UAAUI,YAAYG;EACtB,mBAAiBH,YAAY;EAC7B,QAAQA,YAAYI;EACpB,aAAWT;EACNI;EACL,GAAID;EACJ;EAEJ"}

package/dist/components/Modal/Dialog/index2.js

@@ -0,0 +1,28 @@
+"use client";
+import { useClassNames } from "../../../_lib/useClassNames.js";
+import { useForwardedRef } from "../../../_lib/useForwardedRef.js";
+/* empty css      */
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDialog } from "react-aria/useDialog";
+
+//#region src/components/Modal/Dialog/index.tsx
+const Dialog = forwardRef(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {
+	const ref = useForwardedRef(forwardRef);
+	const { dialogProps } = useDialog({ role: "dialog" }, ref);
+	return /* @__PURE__ */ jsx("div", {
+		className: useClassNames("charcoal-modal-dialog", className),
+		role: dialogProps.role,
+		"data-bottom-sheet": bottomSheet,
+		tabIndex: dialogProps.tabIndex,
+		"aria-labelledby": dialogProps["aria-labelledby"],
+		onBlur: dialogProps.onBlur,
+		"data-size": size,
+		ref,
+		...props
+	});
+});
+
+//#endregion
+export { Dialog };
+//# sourceMappingURL=index2.js.map

package/dist/components/Modal/Dialog/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["forwardRef","React","useDialog","useForwardedRef","Size","BottomSheet","useClassNames","Dialog","HTMLDivElement","ComponentPropsWithoutRef","size","bottomSheet","className","props","ref","dialogProps","role","classNames","tabIndex","onBlur"],"sources":["../../../../src/components/Modal/Dialog/index.tsx"],"sourcesContent":["import { forwardRef } from 'react'\nimport * as React from 'react'\nimport { useDialog } from 'react-aria/useDialog'\nimport { useForwardedRef } from '../../../_lib/useForwardedRef'\nimport { Size, BottomSheet } from '..'\n\nimport './index.css'\nimport { useClassNames } from '../../../_lib/useClassNames'\n\nexport const Dialog = forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'> & {\n    size: Size\n    bottomSheet: BottomSheet\n  }\n>(function Dialog({ size, bottomSheet, className, ...props }, forwardRef) {\n  const ref = useForwardedRef(forwardRef)\n  const { dialogProps } = useDialog(\n    {\n      role: 'dialog',\n    },\n    ref,\n  )\n\n  const classNames = useClassNames('charcoal-modal-dialog', className)\n  return (\n    <div\n      className={classNames}\n      role={dialogProps.role}\n      data-bottom-sheet={bottomSheet}\n      tabIndex={dialogProps.tabIndex}\n      aria-labelledby={dialogProps['aria-labelledby']}\n      onBlur={dialogProps.onBlur}\n      data-size={size}\n      ref={ref}\n      {...props}\n    />\n  )\n})\n"],"mappings":";;;;;;;;;AASA,MAAaO,SAASP,WAMpB,SAASO,OAAO,EAAEG,MAAMC,aAAaC,WAAW,GAAGC,SAASb,YAAY;CACxE,MAAMc,MAAMX,gBAAgBH,WAAW;CACvC,MAAM,EAAEe,gBAAgBb,UACtB,EACEc,MAAM,UACP,EACDF,IACD;CAGD,OACE,oBAAC,OAAD;EACE,WAHeR,cAAc,yBAAyBM,UAGjC;EACrB,MAAMG,YAAYC;EAClB,qBAAmBL;EACnB,UAAUI,YAAYG;EACtB,mBAAiBH,YAAY;EAC7B,QAAQA,YAAYI;EACpB,aAAWT;EACNI;EACL,GAAID;EACJ;EAEJ"}

package/dist/components/Modal/ModalBackgroundContext.cjs

@@ -0,0 +1,14 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+
+//#region src/components/Modal/ModalBackgroundContext.tsx
+/**
+* ModalBackgroundのElementが入ったコンテキスト
+*/
+const ModalBackgroundContext = react.createContext(null);
+
+//#endregion
+exports.ModalBackgroundContext = ModalBackgroundContext;
+//# sourceMappingURL=ModalBackgroundContext.cjs.map

package/dist/components/Modal/ModalBackgroundContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBackgroundContext.cjs","names":["React","ModalBackgroundContext","createContext","HTMLElement"],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;;;AAKA,MAAaC,yBAAyBD,MAAME,cAC1C,KACD"}

package/dist/components/Modal/ModalBackgroundContext.js

@@ -0,0 +1,12 @@
+"use client";
+import * as React$1 from "react";
+
+//#region src/components/Modal/ModalBackgroundContext.tsx
+/**
+* ModalBackgroundのElementが入ったコンテキスト
+*/
+const ModalBackgroundContext = React$1.createContext(null);
+
+//#endregion
+export { ModalBackgroundContext };
+//# sourceMappingURL=ModalBackgroundContext.js.map

package/dist/components/Modal/ModalBackgroundContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBackgroundContext.js","names":["React","ModalBackgroundContext","createContext","HTMLElement"],"sources":["../../../src/components/Modal/ModalBackgroundContext.tsx"],"sourcesContent":["import * as React from 'react'\n\n/**\n * ModalBackgroundのElementが入ったコンテキスト\n */\nexport const ModalBackgroundContext = React.createContext<HTMLElement | null>(\n  null,\n)\n"],"mappings":";;;;;;;AAKA,MAAaC,yBAAyBD,QAAME,cAC1C,KACD"}

package/dist/components/Modal/ModalPlumbing2.cjs

@@ -0,0 +1,30 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_createDivComponent = require('../../_lib/createDivComponent.cjs');
+const require_index = require('./index2.cjs');
+require('./ModalPlumbing.cjs');
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/components/Modal/ModalPlumbing.tsx
+function ModalHeader() {
+	const modalCtx = (0, react.useContext)(require_index.ModalContext);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "charcoal-modal-header-root",
+		"data-bottom-sheet": modalCtx.bottomSheet,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "charcoal-modal-header-title",
+			children: modalCtx.title
+		})
+	});
+}
+const ModalAlign = require_createDivComponent.createDivComponent("charcoal-modal-align");
+const ModalBody = require_createDivComponent.createDivComponent("charcoal-modal-body");
+const ModalButtons = require_createDivComponent.createDivComponent("charcoal-modal-buttons");
+
+//#endregion
+exports.ModalAlign = ModalAlign;
+exports.ModalBody = ModalBody;
+exports.ModalButtons = ModalButtons;
+exports.ModalHeader = ModalHeader;
+//# sourceMappingURL=ModalPlumbing2.cjs.map

package/dist/components/Modal/ModalPlumbing2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPlumbing2.cjs","names":["ModalContext","useContext","createDivComponent","ModalHeader","modalCtx","bottomSheet","title","ModalAlign","ModalBody","ModalButtons"],"sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"sourcesContent":["import { ModalContext } from '.'\nimport { useContext } from 'react'\n\nimport './ModalPlumbing.css'\nimport { createDivComponent } from '../../_lib/createDivComponent'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <div\n      className=\"charcoal-modal-header-root\"\n      data-bottom-sheet={modalCtx.bottomSheet}\n    >\n      <div className=\"charcoal-modal-header-title\">{modalCtx.title}</div>\n    </div>\n  )\n}\n\nexport const ModalAlign = createDivComponent('charcoal-modal-align')\n\nexport const ModalBody = createDivComponent('charcoal-modal-body')\n\nexport const ModalButtons = createDivComponent('charcoal-modal-buttons')\n"],"mappings":";;;;;;;;;AAMA,SAAgBG,cAAc;CAC5B,MAAMC,iCAAsBJ,2BAAa;CACzC,OACE,2CAAC,OAAD;EACE,WAAU;EACV,qBAAmBI,SAASC;YAE5B,2CAAC,OAAD;GAAK,WAAU;aAA+BD,SAASE;GAAW;EAC9D;;AAIV,MAAaC,aAAaL,8CAAmB,uBAAuB;AAEpE,MAAaM,YAAYN,8CAAmB,sBAAsB;AAElE,MAAaO,eAAeP,8CAAmB,yBAAyB"}

package/dist/components/Modal/ModalPlumbing2.js

@@ -0,0 +1,26 @@
+"use client";
+import { createDivComponent } from "../../_lib/createDivComponent.js";
+import { ModalContext } from "./index2.js";
+/* empty css              */
+import { useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/Modal/ModalPlumbing.tsx
+function ModalHeader() {
+	const modalCtx = useContext(ModalContext);
+	return /* @__PURE__ */ jsx("div", {
+		className: "charcoal-modal-header-root",
+		"data-bottom-sheet": modalCtx.bottomSheet,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "charcoal-modal-header-title",
+			children: modalCtx.title
+		})
+	});
+}
+const ModalAlign = createDivComponent("charcoal-modal-align");
+const ModalBody = createDivComponent("charcoal-modal-body");
+const ModalButtons = createDivComponent("charcoal-modal-buttons");
+
+//#endregion
+export { ModalAlign, ModalBody, ModalButtons, ModalHeader };
+//# sourceMappingURL=ModalPlumbing2.js.map

package/dist/components/Modal/ModalPlumbing2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPlumbing2.js","names":["ModalContext","useContext","createDivComponent","ModalHeader","modalCtx","bottomSheet","title","ModalAlign","ModalBody","ModalButtons"],"sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"sourcesContent":["import { ModalContext } from '.'\nimport { useContext } from 'react'\n\nimport './ModalPlumbing.css'\nimport { createDivComponent } from '../../_lib/createDivComponent'\n\nexport function ModalHeader() {\n  const modalCtx = useContext(ModalContext)\n  return (\n    <div\n      className=\"charcoal-modal-header-root\"\n      data-bottom-sheet={modalCtx.bottomSheet}\n    >\n      <div className=\"charcoal-modal-header-title\">{modalCtx.title}</div>\n    </div>\n  )\n}\n\nexport const ModalAlign = createDivComponent('charcoal-modal-align')\n\nexport const ModalBody = createDivComponent('charcoal-modal-body')\n\nexport const ModalButtons = createDivComponent('charcoal-modal-buttons')\n"],"mappings":";;;;;;;;AAMA,SAAgBG,cAAc;CAC5B,MAAMC,WAAWH,WAAWD,aAAa;CACzC,OACE,oBAAC,OAAD;EACE,WAAU;EACV,qBAAmBI,SAASC;YAE5B,oBAAC,OAAD;GAAK,WAAU;aAA+BD,SAASE;GAAW;EAC9D;;AAIV,MAAaC,aAAaL,mBAAmB,uBAAuB;AAEpE,MAAaM,YAAYN,mBAAmB,sBAAsB;AAElE,MAAaO,eAAeP,mBAAmB,yBAAyB"}

package/dist/components/Modal/index2.cjs

@@ -0,0 +1,121 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../IconButton/index2.cjs');
+const require_index$1 = require('./Dialog/index2.cjs');
+const require_ModalBackgroundContext = require('./ModalBackgroundContext.cjs');
+const require_useCustomModalOverlay = require('./useCustomModalOverlay.cjs');
+const require_useTransitionPresence = require('./useTransitionPresence.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_aria_Overlay = require("react-aria/Overlay");
+let react_aria_useObjectRef = require("react-aria/useObjectRef");
+
+//#region src/components/Modal/index.tsx
+const DEFAULT_Z_INDEX = 10;
+/**
+* モーダルコンポーネント。
+*
+* @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する
+* ```tsx
+* import {
+*   OverlayProvider,
+*   Modal,
+*   ModalHeader,
+*   ModalBody,
+*   ModalButtons
+* } from '@charcoal-ui/react'
+*
+* <OverlayProvider>
+*   <App>
+*     <Modal title="Title" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+*       <ModalHeader />
+*       <ModalBody>
+*         ...
+*         <ModalButtons>...</ModalButtons>
+*       </ModalBody>
+*     </Modal>
+*   </App>
+* </OverlayProvider>
+* ```
+*/
+const Modal = (0, react.forwardRef)(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+	const { title, size = "M", bottomSheet = false, isDismissable, onClose, className, isOpen = false, closeButtonAriaLabel = "Close" } = props;
+	const ref = (0, react_aria_useObjectRef.useObjectRef)(external);
+	const { modalProps, underlayProps } = require_useCustomModalOverlay.useCharcoalModalOverlay({
+		...props,
+		isKeyboardDismissDisabled: isDismissable === void 0 || isDismissable === false
+	}, {
+		onClose,
+		isOpen
+	}, ref);
+	const isMobile = (require_useCustomModalOverlay.useWindowWidth() ?? Infinity) < 744;
+	const transitionEnabled = isMobile && bottomSheet !== false;
+	const showDismiss = !isMobile || bottomSheet !== true;
+	const bgRef = react.useRef(null);
+	const { isPresent, animationState, handleTransitionEnd } = require_useTransitionPresence.useTransitionPresence(isOpen, transitionEnabled, bgRef, ref);
+	const handleClick = react.useCallback((e) => {
+		if (e.currentTarget === e.target) onClose();
+	}, [onClose]);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_aria_Overlay.Overlay, {
+		portalContainer,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "charcoal-modal-background",
+			ref: bgRef,
+			...underlayProps,
+			style: { zIndex },
+			"data-bottom-sheet": bottomSheet,
+			"data-animation": transitionEnabled ? animationState : void 0,
+			onClick: handleClick,
+			onTransitionEnd: handleTransitionEnd,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ModalBackgroundContext.ModalBackgroundContext.Provider, {
+				value: bgRef.current,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.Dialog, {
+					ref,
+					...modalProps,
+					size,
+					bottomSheet,
+					className,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ModalContext.Provider, {
+						value: {
+							titleProps: {},
+							title,
+							close: onClose,
+							showDismiss,
+							bottomSheet
+						},
+						children: [children, isDismissable === true && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalCloseButton, {
+							"aria-label": closeButtonAriaLabel,
+							onClick: onClose
+						})]
+					})
+				})
+			})
+		})
+	});
+});
+var Modal_default = (0, react.memo)(Modal);
+const ModalContext = react.createContext({
+	titleProps: {},
+	title: "",
+	close: void 0,
+	showDismiss: true,
+	bottomSheet: false
+});
+function ModalCloseButton(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+		className: "charcoal-modal-close-button",
+		size: "S",
+		icon: "24/Close",
+		type: "button",
+		...props
+	});
+}
+
+//#endregion
+exports.ModalCloseButton = ModalCloseButton;
+exports.ModalContext = ModalContext;
+exports.default = Modal_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/Modal/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["useContext","forwardRef","memo","React","AriaDialogProps","Button","ButtonProps","IconButton","IconButtonProps","Dialog","ModalBackgroundContext","CharcoalModalOverlayProps","useCharcoalModalOverlay","useWindowWidth","useTransitionPresence","Overlay","useObjectRef","BottomSheet","Size","ModalProps","children","ReactNode","zIndex","title","size","bottomSheet","isOpen","onClose","className","closeButtonAriaLabel","portalContainer","HTMLElement","DEFAULT_Z_INDEX","Modal","HTMLDivElement","ModalInner","props","external","isDismissable","ref","modalProps","underlayProps","isKeyboardDismissDisabled","undefined","isMobile","Infinity","transitionEnabled","showDismiss","bgRef","useRef","isPresent","animationState","handleTransitionEnd","handleClick","useCallback","e","MouseEvent","currentTarget","target","current","titleProps","close","ModalContext","createContext","HTMLAttributes","ModalCloseButton","Omit","ModalDismissButton"],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyCA,MAAMgC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAMC,8BAA+C,SAASE,WAC5D,EAAEf,UAAUE,SAASU,iBAAiBF,iBAAiB,GAAGM,SAC1DC,UACA;CACA,MAAM,EACJd,OACAC,OAAO,KACPC,cAAc,OACda,eACAX,SACAC,WACAF,SAAS,OACTG,uBAAuB,YACrBO;CAEJ,MAAMG,gDAAmCF,SAAS;CAElD,MAAM,EAAEG,YAAYC,kBAAkB7B,sDACpC;EACE,GAAGwB;EACHM,2BACEJ,kBAAkBK,UAAaL,kBAAkB;EACpD,EACD;EACEX;EACAD;EACD,EACDa,IACD;CAED,MAAMK,YAAY/B,8CAAgB,IAAIgC,YAAY;CAClD,MAAMC,oBAAoBF,YAAYnB,gBAAgB;CACtD,MAAMsB,cAAc,CAACH,YAAYnB,gBAAgB;CAEjD,MAAMuB,QAAQ7C,MAAM8C,OAAuB,KAAK;CAEhD,MAAM,EAAEC,WAAWC,gBAAgBC,wBACjCtC,oDAAsBY,QAAQoB,mBAAmBE,OAAOT,IAAI;CAE9D,MAAMc,cAAclD,MAAMmD,aACvBC,MAAoD;EACnD,IAAIA,EAAEE,kBAAkBF,EAAEG,QACxB/B,SAAS;IAGb,CAACA,QACH,CAAC;CAED,IAAI,CAACuB,WACH,OAAO;CAGT,OACE,2CAAC,4BAAD;EAA0BpB;YACxB,2CAAC,OAAD;GACE,WAAU;GACV,KAAKkB;GACL,GAAIP;GACJ,OAAO,EAAEnB,QAAQ;GACjB,qBAAmBG;GACnB,kBAAgBqB,oBAAoBK,iBAAiBR;GACrD,SAASU;GACT,iBAAiBD;aAEjB,2CAAC,sDAAuB,UAAxB;IAAiC,OAAOJ,MAAMW;cAC5C,2CAAC,wBAAD;KACOpB;KACL,GAAIC;KACEhB;KACOC;KACFG;eAEX,4CAAC,aAAa,UAAd;MACE,OAAO;OACLgC,YAAY,EAAE;OACdrC;OACAsC,OAAOlC;OACPoB;OACAtB;OACD;gBAPH,CASGL,UACAkB,kBAAkB,QACjB,2CAAC,kBAAD;OACE,cAAYT;OACZ,SAASF;OAEZ,EACoB;;KACjB;IACuB;GAC9B;EACG;EAEZ;AAEF,oCAAoBM,MAAM;AAE1B,MAAa6B,eAAe3D,MAAM4D,cAS/B;CACDH,YAAY,EAAE;CACdrC,OAAO;CACPsC,OAAOlB;CACPI,aAAa;CACbtB,aAAa;CACd,CAAC;AAEF,SAAgBwC,iBAAiB7B,OAAsC;CACrE,OACE,2CAAC,uBAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAIA;EACJ"}

package/dist/components/Modal/index2.js

@@ -0,0 +1,118 @@
+"use client";
+import IconButton from "../IconButton/index2.js";
+import { Dialog } from "./Dialog/index2.js";
+import { ModalBackgroundContext } from "./ModalBackgroundContext.js";
+import { useCharcoalModalOverlay, useWindowWidth } from "./useCustomModalOverlay.js";
+import { useTransitionPresence } from "./useTransitionPresence.js";
+/* empty css      */
+import * as React$1 from "react";
+import { forwardRef, memo, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Overlay } from "react-aria/Overlay";
+import { useObjectRef } from "react-aria/useObjectRef";
+
+//#region src/components/Modal/index.tsx
+const DEFAULT_Z_INDEX = 10;
+/**
+* モーダルコンポーネント。
+*
+* @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する
+* ```tsx
+* import {
+*   OverlayProvider,
+*   Modal,
+*   ModalHeader,
+*   ModalBody,
+*   ModalButtons
+* } from '@charcoal-ui/react'
+*
+* <OverlayProvider>
+*   <App>
+*     <Modal title="Title" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+*       <ModalHeader />
+*       <ModalBody>
+*         ...
+*         <ModalButtons>...</ModalButtons>
+*       </ModalBody>
+*     </Modal>
+*   </App>
+* </OverlayProvider>
+* ```
+*/
+const Modal = forwardRef(function ModalInner({ children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props }, external) {
+	const { title, size = "M", bottomSheet = false, isDismissable, onClose, className, isOpen = false, closeButtonAriaLabel = "Close" } = props;
+	const ref = useObjectRef(external);
+	const { modalProps, underlayProps } = useCharcoalModalOverlay({
+		...props,
+		isKeyboardDismissDisabled: isDismissable === void 0 || isDismissable === false
+	}, {
+		onClose,
+		isOpen
+	}, ref);
+	const isMobile = (useWindowWidth() ?? Infinity) < 744;
+	const transitionEnabled = isMobile && bottomSheet !== false;
+	const showDismiss = !isMobile || bottomSheet !== true;
+	const bgRef = React$1.useRef(null);
+	const { isPresent, animationState, handleTransitionEnd } = useTransitionPresence(isOpen, transitionEnabled, bgRef, ref);
+	const handleClick = React$1.useCallback((e) => {
+		if (e.currentTarget === e.target) onClose();
+	}, [onClose]);
+	if (!isPresent) return null;
+	return /* @__PURE__ */ jsx(Overlay, {
+		portalContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "charcoal-modal-background",
+			ref: bgRef,
+			...underlayProps,
+			style: { zIndex },
+			"data-bottom-sheet": bottomSheet,
+			"data-animation": transitionEnabled ? animationState : void 0,
+			onClick: handleClick,
+			onTransitionEnd: handleTransitionEnd,
+			children: /* @__PURE__ */ jsx(ModalBackgroundContext.Provider, {
+				value: bgRef.current,
+				children: /* @__PURE__ */ jsx(Dialog, {
+					ref,
+					...modalProps,
+					size,
+					bottomSheet,
+					className,
+					children: /* @__PURE__ */ jsxs(ModalContext.Provider, {
+						value: {
+							titleProps: {},
+							title,
+							close: onClose,
+							showDismiss,
+							bottomSheet
+						},
+						children: [children, isDismissable === true && /* @__PURE__ */ jsx(ModalCloseButton, {
+							"aria-label": closeButtonAriaLabel,
+							onClick: onClose
+						})]
+					})
+				})
+			})
+		})
+	});
+});
+var Modal_default = memo(Modal);
+const ModalContext = React$1.createContext({
+	titleProps: {},
+	title: "",
+	close: void 0,
+	showDismiss: true,
+	bottomSheet: false
+});
+function ModalCloseButton(props) {
+	return /* @__PURE__ */ jsx(IconButton, {
+		className: "charcoal-modal-close-button",
+		size: "S",
+		icon: "24/Close",
+		type: "button",
+		...props
+	});
+}
+
+//#endregion
+export { ModalCloseButton, ModalContext, Modal_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/Modal/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["useContext","forwardRef","memo","React","AriaDialogProps","Button","ButtonProps","IconButton","IconButtonProps","Dialog","ModalBackgroundContext","CharcoalModalOverlayProps","useCharcoalModalOverlay","useWindowWidth","useTransitionPresence","Overlay","useObjectRef","BottomSheet","Size","ModalProps","children","ReactNode","zIndex","title","size","bottomSheet","isOpen","onClose","className","closeButtonAriaLabel","portalContainer","HTMLElement","DEFAULT_Z_INDEX","Modal","HTMLDivElement","ModalInner","props","external","isDismissable","ref","modalProps","underlayProps","isKeyboardDismissDisabled","undefined","isMobile","Infinity","transitionEnabled","showDismiss","bgRef","useRef","isPresent","animationState","handleTransitionEnd","handleClick","useCallback","e","MouseEvent","currentTarget","target","current","titleProps","close","ModalContext","createContext","HTMLAttributes","ModalCloseButton","Omit","ModalDismissButton"],"sources":["../../../src/components/Modal/index.tsx"],"sourcesContent":["import { useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport type { AriaDialogProps } from 'react-aria/useDialog'\nimport Button, { ButtonProps } from '../Button'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport { Dialog } from './Dialog'\nimport { ModalBackgroundContext } from './ModalBackgroundContext'\nimport {\n  CharcoalModalOverlayProps,\n  useCharcoalModalOverlay,\n  useWindowWidth,\n} from './useCustomModalOverlay'\nimport { useTransitionPresence } from './useTransitionPresence'\n\nimport './index.css'\n\nimport { Overlay } from 'react-aria/Overlay'\nimport { useObjectRef } from 'react-aria/useObjectRef'\n\nexport type BottomSheet = boolean | 'full'\nexport type Size = 'S' | 'M' | 'L'\n\nexport type ModalProps = CharcoalModalOverlayProps &\n  AriaDialogProps & {\n    children: React.ReactNode\n    zIndex?: number\n    title: string\n    size?: Size\n    bottomSheet?: BottomSheet\n    isOpen: boolean\n    onClose: () => void\n    className?: string\n    closeButtonAriaLabel?: string\n\n    /**\n     * https://github.com/adobe/react-spectrum/issues/3787\n     * Next.jsで使用する際に発生するエラーの一時的な回避策でdocument.bodyを指定する必要がある\n     */\n    portalContainer?: HTMLElement\n  }\n\nconst DEFAULT_Z_INDEX = 10\n\n/**\n * モーダルコンポーネント。\n *\n * @example アプリケーションルートで `<OverlayProvider>` ないし `<CharcoalProvider>` で囲った上で利用する\n * ```tsx\n * import {\n *   OverlayProvider,\n *   Modal,\n *   ModalHeader,\n *   ModalBody,\n *   ModalButtons\n * } from '@charcoal-ui/react'\n *\n * <OverlayProvider>\n *   <App>\n *     <Modal title=\"Title\" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>\n *       <ModalHeader />\n *       <ModalBody>\n *         ...\n *         <ModalButtons>...</ModalButtons>\n *       </ModalBody>\n *     </Modal>\n *   </App>\n * </OverlayProvider>\n * ```\n */\nconst Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(\n  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },\n  external,\n) {\n  const {\n    title,\n    size = 'M',\n    bottomSheet = false,\n    isDismissable,\n    onClose,\n    className,\n    isOpen = false,\n    closeButtonAriaLabel = 'Close',\n  } = props\n\n  const ref = useObjectRef<HTMLDivElement>(external)\n\n  const { modalProps, underlayProps } = useCharcoalModalOverlay(\n    {\n      ...props,\n      isKeyboardDismissDisabled:\n        isDismissable === undefined || isDismissable === false,\n    },\n    {\n      onClose,\n      isOpen,\n    },\n    ref,\n  )\n\n  const isMobile = (useWindowWidth() ?? Infinity) < 744\n  const transitionEnabled = isMobile && bottomSheet !== false\n  const showDismiss = !isMobile || bottomSheet !== true\n\n  const bgRef = React.useRef<HTMLDivElement>(null)\n\n  const { isPresent, animationState, handleTransitionEnd } =\n    useTransitionPresence(isOpen, transitionEnabled, bgRef, ref)\n\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {\n      if (e.currentTarget === e.target) {\n        onClose()\n      }\n    },\n    [onClose],\n  )\n\n  if (!isPresent) {\n    return null\n  }\n\n  return (\n    <Overlay portalContainer={portalContainer}>\n      <div\n        className=\"charcoal-modal-background\"\n        ref={bgRef}\n        {...underlayProps}\n        style={{ zIndex }}\n        data-bottom-sheet={bottomSheet}\n        data-animation={transitionEnabled ? animationState : undefined}\n        onClick={handleClick}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <ModalBackgroundContext.Provider value={bgRef.current}>\n          <Dialog\n            ref={ref}\n            {...modalProps}\n            size={size}\n            bottomSheet={bottomSheet}\n            className={className}\n          >\n            <ModalContext.Provider\n              value={{\n                titleProps: {},\n                title,\n                close: onClose,\n                showDismiss,\n                bottomSheet,\n              }}\n            >\n              {children}\n              {isDismissable === true && (\n                <ModalCloseButton\n                  aria-label={closeButtonAriaLabel}\n                  onClick={onClose}\n                />\n              )}\n            </ModalContext.Provider>\n          </Dialog>\n        </ModalBackgroundContext.Provider>\n      </div>\n    </Overlay>\n  )\n})\n\nexport default memo(Modal)\n\nexport const ModalContext = React.createContext<{\n  /**\n   * @deprecated\n   */\n  titleProps: React.HTMLAttributes<HTMLElement>\n  title: string\n  close?: () => void\n  showDismiss: boolean\n  bottomSheet: BottomSheet\n}>({\n  titleProps: {},\n  title: '',\n  close: undefined,\n  showDismiss: true,\n  bottomSheet: false,\n})\n\nexport function ModalCloseButton(props: Omit<IconButtonProps, 'icon'>) {\n  return (\n    <IconButton\n      className=\"charcoal-modal-close-button\"\n      size=\"S\"\n      icon=\"24/Close\"\n      type=\"button\"\n      {...props}\n    />\n  )\n}\n\nexport function ModalDismissButton({ children, ...props }: ButtonProps) {\n  const { close, showDismiss } = useContext(ModalContext)\n\n  if (!showDismiss) {\n    return null\n  }\n\n  return (\n    <Button {...props} onClick={close} fullWidth>\n      {children}\n    </Button>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AAyCA,MAAMgC,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BxB,MAAMC,QAAQhC,WAAuC,SAASkC,WAC5D,EAAEf,UAAUE,SAASU,iBAAiBF,iBAAiB,GAAGM,SAC1DC,UACA;CACA,MAAM,EACJd,OACAC,OAAO,KACPC,cAAc,OACda,eACAX,SACAC,WACAF,SAAS,OACTG,uBAAuB,YACrBO;CAEJ,MAAMG,MAAMvB,aAA6BqB,SAAS;CAElD,MAAM,EAAEG,YAAYC,kBAAkB7B,wBACpC;EACE,GAAGwB;EACHM,2BACEJ,kBAAkBK,UAAaL,kBAAkB;EACpD,EACD;EACEX;EACAD;EACD,EACDa,IACD;CAED,MAAMK,YAAY/B,gBAAgB,IAAIgC,YAAY;CAClD,MAAMC,oBAAoBF,YAAYnB,gBAAgB;CACtD,MAAMsB,cAAc,CAACH,YAAYnB,gBAAgB;CAEjD,MAAMuB,QAAQ7C,QAAM8C,OAAuB,KAAK;CAEhD,MAAM,EAAEC,WAAWC,gBAAgBC,wBACjCtC,sBAAsBY,QAAQoB,mBAAmBE,OAAOT,IAAI;CAE9D,MAAMc,cAAclD,QAAMmD,aACvBC,MAAoD;EACnD,IAAIA,EAAEE,kBAAkBF,EAAEG,QACxB/B,SAAS;IAGb,CAACA,QACH,CAAC;CAED,IAAI,CAACuB,WACH,OAAO;CAGT,OACE,oBAAC,SAAD;EAA0BpB;YACxB,oBAAC,OAAD;GACE,WAAU;GACV,KAAKkB;GACL,GAAIP;GACJ,OAAO,EAAEnB,QAAQ;GACjB,qBAAmBG;GACnB,kBAAgBqB,oBAAoBK,iBAAiBR;GACrD,SAASU;GACT,iBAAiBD;aAEjB,oBAAC,uBAAuB,UAAxB;IAAiC,OAAOJ,MAAMW;cAC5C,oBAAC,QAAD;KACOpB;KACL,GAAIC;KACEhB;KACOC;KACFG;eAEX,qBAAC,aAAa,UAAd;MACE,OAAO;OACLgC,YAAY,EAAE;OACdrC;OACAsC,OAAOlC;OACPoB;OACAtB;OACD;gBAPH,CASGL,UACAkB,kBAAkB,QACjB,oBAAC,kBAAD;OACE,cAAYT;OACZ,SAASF;OAEZ,EACoB;;KACjB;IACuB;GAC9B;EACG;EAEZ;AAEF,oBAAezB,KAAK+B,MAAM;AAE1B,MAAa6B,eAAe3D,QAAM4D,cAS/B;CACDH,YAAY,EAAE;CACdrC,OAAO;CACPsC,OAAOlB;CACPI,aAAa;CACbtB,aAAa;CACd,CAAC;AAEF,SAAgBwC,iBAAiB7B,OAAsC;CACrE,OACE,oBAAC,YAAD;EACE,WAAU;EACV,MAAK;EACL,MAAK;EACL,MAAK;EACL,GAAIA;EACJ"}

package/dist/components/Modal/useCustomModalOverlay.cjs

@@ -0,0 +1,48 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_usePreventScroll = require('../DropdownSelector/Popover/usePreventScroll.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_aria_private_overlays_ariaHideOutside = require("react-aria/private/overlays/ariaHideOutside");
+let react_aria_private_overlays_Overlay = require("react-aria/private/overlays/Overlay");
+let react_aria_useOverlay = require("react-aria/useOverlay");
+
+//#region src/components/Modal/useCustomModalOverlay.tsx
+function useCharcoalModalOverlay(props, state, ref) {
+	const { overlayProps, underlayProps } = (0, react_aria_useOverlay.useOverlay)({
+		...props,
+		isOpen: state.isOpen,
+		onClose: state.onClose,
+		shouldCloseOnInteractOutside: () => false
+	}, ref);
+	require_usePreventScroll.usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen, props.overflowClip);
+	(0, react_aria_private_overlays_Overlay.useOverlayFocusContain)();
+	react.useEffect(() => {
+		if (state.isOpen && ref.current) return (0, react_aria_private_overlays_ariaHideOutside.ariaHideOutside)([ref.current]);
+	}, [state.isOpen, ref]);
+	return {
+		modalProps: overlayProps,
+		underlayProps
+	};
+}
+function isWindowDefined() {
+	return typeof window !== "undefined";
+}
+function useWindowWidth() {
+	const [width, setWidth] = react.useState(isWindowDefined() ? window.innerWidth : null);
+	react.useEffect(() => {
+		const handleResize = () => {
+			setWidth(window.innerWidth);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	});
+	return width;
+}
+
+//#endregion
+exports.useCharcoalModalOverlay = useCharcoalModalOverlay;
+exports.useWindowWidth = useWindowWidth;
+//# sourceMappingURL=useCustomModalOverlay.cjs.map

package/dist/components/Modal/useCustomModalOverlay.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomModalOverlay.cjs","names":["React","ariaHideOutside","useOverlayFocusContain","usePreventScroll","AriaModalOverlayProps","ModalOverlayAria","useOverlay","CharcoalModalOverlayProps","overflowClip","useCharcoalModalOverlay","props","state","isOpen","onClose","ref","RefObject","HTMLElement","overlayProps","underlayProps","shouldCloseOnInteractOutside","document","body","useEffect","current","modalProps","isWindowDefined","window","useWindowWidth","width","setWidth","useState","innerWidth","handleResize","addEventListener","removeEventListener"],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgBS,wBACdC,OACAC,OACAG,KACkB;CAClB,MAAM,EAAEG,cAAcC,wDACpB;EACE,GAAGR;EACHE,QAAQD,MAAMC;EACdC,SAASF,MAAME;EACfM,oCAAoC;EACrC,EACDL,IACD;CAEDX,0CACE,OAAOiB,aAAa,cAAcA,SAASC,OAAO,MAClDV,MAAMC,QACNF,MAAMF,aACP;CAEDN,iEAAwB;CAExBF,MAAMsB,gBAAgB;EACpB,IAAIX,MAAMC,UAAUE,IAAIS,SACtB,wEAAuB,CAACT,IAAIS,QAAQ,CAAC;IAEtC,CAACZ,MAAMC,QAAQE,IAAI,CAAC;CAEvB,OAAO;EACLU,YAAYP;EACZC;EACD;;AAGH,SAASO,kBAAkB;CACzB,OAAO,OAAOC,WAAW;;AAG3B,SAAgBC,iBAAiB;CAC/B,MAAM,CAACC,OAAOC,YAAY7B,MAAM8B,SAC9BL,iBAAiB,GAAGC,OAAOK,aAAa,KACzC;CACD/B,MAAMsB,gBAAgB;EACpB,MAAMU,qBAAqB;GACzBH,SAASH,OAAOK,WAAW;;EAE7BL,OAAOO,iBAAiB,UAAUD,aAAa;EAC/C,aAAa;GACXN,OAAOQ,oBAAoB,UAAUF,aAAa;;GAEpD;CACF,OAAOJ"}

package/dist/components/Modal/useCustomModalOverlay.js

@@ -0,0 +1,45 @@
+"use client";
+import { usePreventScroll } from "../DropdownSelector/Popover/usePreventScroll.js";
+import * as React$1 from "react";
+import { ariaHideOutside } from "react-aria/private/overlays/ariaHideOutside";
+import { useOverlayFocusContain } from "react-aria/private/overlays/Overlay";
+import { useOverlay } from "react-aria/useOverlay";
+
+//#region src/components/Modal/useCustomModalOverlay.tsx
+function useCharcoalModalOverlay(props, state, ref) {
+	const { overlayProps, underlayProps } = useOverlay({
+		...props,
+		isOpen: state.isOpen,
+		onClose: state.onClose,
+		shouldCloseOnInteractOutside: () => false
+	}, ref);
+	usePreventScroll(typeof document !== "undefined" ? document.body : null, state.isOpen, props.overflowClip);
+	useOverlayFocusContain();
+	React$1.useEffect(() => {
+		if (state.isOpen && ref.current) return ariaHideOutside([ref.current]);
+	}, [state.isOpen, ref]);
+	return {
+		modalProps: overlayProps,
+		underlayProps
+	};
+}
+function isWindowDefined() {
+	return typeof window !== "undefined";
+}
+function useWindowWidth() {
+	const [width, setWidth] = React$1.useState(isWindowDefined() ? window.innerWidth : null);
+	React$1.useEffect(() => {
+		const handleResize = () => {
+			setWidth(window.innerWidth);
+		};
+		window.addEventListener("resize", handleResize);
+		return () => {
+			window.removeEventListener("resize", handleResize);
+		};
+	});
+	return width;
+}
+
+//#endregion
+export { useCharcoalModalOverlay, useWindowWidth };
+//# sourceMappingURL=useCustomModalOverlay.js.map

package/dist/components/Modal/useCustomModalOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCustomModalOverlay.js","names":["React","ariaHideOutside","useOverlayFocusContain","usePreventScroll","AriaModalOverlayProps","ModalOverlayAria","useOverlay","CharcoalModalOverlayProps","overflowClip","useCharcoalModalOverlay","props","state","isOpen","onClose","ref","RefObject","HTMLElement","overlayProps","underlayProps","shouldCloseOnInteractOutside","document","body","useEffect","current","modalProps","isWindowDefined","window","useWindowWidth","width","setWidth","useState","innerWidth","handleResize","addEventListener","removeEventListener"],"sources":["../../../src/components/Modal/useCustomModalOverlay.tsx"],"sourcesContent":["import * as React from 'react'\nimport { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'\nimport { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'\nimport { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'\n\nimport {\n  AriaModalOverlayProps,\n  ModalOverlayAria,\n} from 'react-aria/useModalOverlay'\nimport { useOverlay } from 'react-aria/useOverlay'\n\n/**\n * We want to enable scrolling on the modal background,\n * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.\n * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.\n */\nexport type CharcoalModalOverlayProps = AriaModalOverlayProps & {\n  overflowClip?: boolean\n}\nexport function useCharcoalModalOverlay(\n  props: CharcoalModalOverlayProps,\n  state: { isOpen: boolean; onClose: () => void },\n  ref: React.RefObject<HTMLElement | null>,\n): ModalOverlayAria {\n  const { overlayProps, underlayProps } = useOverlay(\n    {\n      ...props,\n      isOpen: state.isOpen,\n      onClose: state.onClose,\n      shouldCloseOnInteractOutside: () => false,\n    },\n    ref,\n  )\n\n  usePreventScroll(\n    typeof document !== 'undefined' ? document.body : null,\n    state.isOpen,\n    props.overflowClip,\n  )\n\n  useOverlayFocusContain()\n\n  React.useEffect(() => {\n    if (state.isOpen && ref.current) {\n      return ariaHideOutside([ref.current])\n    }\n  }, [state.isOpen, ref])\n\n  return {\n    modalProps: overlayProps,\n    underlayProps,\n  }\n}\n\nfunction isWindowDefined() {\n  return typeof window !== 'undefined'\n}\n\nexport function useWindowWidth() {\n  const [width, setWidth] = React.useState(\n    isWindowDefined() ? window.innerWidth : null,\n  )\n  React.useEffect(() => {\n    const handleResize = () => {\n      setWidth(window.innerWidth)\n    }\n    window.addEventListener('resize', handleResize)\n    return () => {\n      window.removeEventListener('resize', handleResize)\n    }\n  })\n  return width\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgBS,wBACdC,OACAC,OACAG,KACkB;CAClB,MAAM,EAAEG,cAAcC,kBAAkBZ,WACtC;EACE,GAAGI;EACHE,QAAQD,MAAMC;EACdC,SAASF,MAAME;EACfM,oCAAoC;EACrC,EACDL,IACD;CAEDX,iBACE,OAAOiB,aAAa,cAAcA,SAASC,OAAO,MAClDV,MAAMC,QACNF,MAAMF,aACP;CAEDN,wBAAwB;CAExBF,QAAMsB,gBAAgB;EACpB,IAAIX,MAAMC,UAAUE,IAAIS,SACtB,OAAOtB,gBAAgB,CAACa,IAAIS,QAAQ,CAAC;IAEtC,CAACZ,MAAMC,QAAQE,IAAI,CAAC;CAEvB,OAAO;EACLU,YAAYP;EACZC;EACD;;AAGH,SAASO,kBAAkB;CACzB,OAAO,OAAOC,WAAW;;AAG3B,SAAgBC,iBAAiB;CAC/B,MAAM,CAACC,OAAOC,YAAY7B,QAAM8B,SAC9BL,iBAAiB,GAAGC,OAAOK,aAAa,KACzC;CACD/B,QAAMsB,gBAAgB;EACpB,MAAMU,qBAAqB;GACzBH,SAASH,OAAOK,WAAW;;EAE7BL,OAAOO,iBAAiB,UAAUD,aAAa;EAC/C,aAAa;GACXN,OAAOQ,oBAAoB,UAAUF,aAAa;;GAEpD;CACF,OAAOJ"}