@charcoal-ui/react 6.1.0 → 8.1.1-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/DropdownSelector/Popover/index.d.ts.map +1 -1
- package/dist/components/DropdownSelector/Popover/index2.cjs +32 -1
- package/dist/components/DropdownSelector/Popover/index2.cjs.map +1 -1
- package/dist/components/DropdownSelector/Popover/index2.js +32 -1
- package/dist/components/DropdownSelector/Popover/index2.js.map +1 -1
- package/dist/index.css +840 -840
- package/dist/layered.css +840 -840
- package/dist/layered.css.map +1 -1
- package/package.json +3 -3
- package/src/components/DropdownSelector/Popover/index.tsx +60 -2
- package/src/components/DropdownSelector/index.browser.test.tsx +78 -3
- package/src/components/DropdownSelector/index.story.tsx +37 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAA;AAEpB,OAAO,EACL,SAAS,EAIT,SAAS,EAEV,MAAM,OAAO,CAAA;AAMd,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAA;IACrC,UAAU,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC7C;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B,CAAA;AAID;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,KAAK,EAAE,YAAY,kDA0HlD"}
|
|
@@ -17,6 +17,9 @@ const _empty = () => null;
|
|
|
17
17
|
*/
|
|
18
18
|
function Popover(props) {
|
|
19
19
|
const defaultPopoverRef = (0, react.useRef)(null);
|
|
20
|
+
const underlayRef = (0, react.useRef)(null);
|
|
21
|
+
const underlayPointerDownRef = (0, react.useRef)(false);
|
|
22
|
+
const underlayPointerTypeRef = (0, react.useRef)("");
|
|
20
23
|
const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
|
|
21
24
|
const { popoverProps, underlayProps } = (0, react_aria_usePopover.usePopover)({
|
|
22
25
|
triggerRef: props.triggerRef,
|
|
@@ -30,6 +33,17 @@ function Popover(props) {
|
|
|
30
33
|
toggle: _empty
|
|
31
34
|
});
|
|
32
35
|
require_usePreventScroll.usePreventScroll((0, react.useContext)(require_ModalBackgroundContext.ModalBackgroundContext), props.isOpen);
|
|
36
|
+
(0, react.useEffect)(() => {
|
|
37
|
+
const underlay = underlayRef.current;
|
|
38
|
+
if (!props.isOpen || !props.inertWorkaround || underlay === null) return;
|
|
39
|
+
const handleTouchStart = (e) => {
|
|
40
|
+
if (underlayPointerTypeRef.current === "pen") e.preventDefault();
|
|
41
|
+
};
|
|
42
|
+
underlay.addEventListener("touchstart", handleTouchStart, { passive: false });
|
|
43
|
+
return () => {
|
|
44
|
+
underlay.removeEventListener("touchstart", handleTouchStart);
|
|
45
|
+
};
|
|
46
|
+
}, [props.isOpen, props.inertWorkaround]);
|
|
33
47
|
const { isOpen, onClose } = props;
|
|
34
48
|
(0, react.useEffect)(() => {
|
|
35
49
|
if (!isOpen) return;
|
|
@@ -48,14 +62,31 @@ function Popover(props) {
|
|
|
48
62
|
onClose,
|
|
49
63
|
finalPopoverRef
|
|
50
64
|
]);
|
|
65
|
+
const handleUnderlayPointerDown = (e) => {
|
|
66
|
+
underlayPointerDownRef.current = true;
|
|
67
|
+
underlayPointerTypeRef.current = e.pointerType;
|
|
68
|
+
};
|
|
69
|
+
const handleUnderlayPointerCancel = () => {
|
|
70
|
+
underlayPointerDownRef.current = false;
|
|
71
|
+
underlayPointerTypeRef.current = "";
|
|
72
|
+
};
|
|
73
|
+
const handleUnderlayClick = () => {
|
|
74
|
+
const startedOnUnderlay = underlayPointerDownRef.current;
|
|
75
|
+
underlayPointerDownRef.current = false;
|
|
76
|
+
underlayPointerTypeRef.current = "";
|
|
77
|
+
if (startedOnUnderlay) props.onClose();
|
|
78
|
+
};
|
|
51
79
|
if (!props.isOpen) return null;
|
|
52
80
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_aria_Overlay.Overlay, {
|
|
53
81
|
portalContainer: document.body,
|
|
54
82
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
55
83
|
...underlayProps,
|
|
84
|
+
ref: underlayRef,
|
|
56
85
|
...props.inertWorkaround ? {
|
|
57
86
|
"data-react-aria-top-layer": true,
|
|
58
|
-
|
|
87
|
+
onPointerDown: handleUnderlayPointerDown,
|
|
88
|
+
onPointerCancel: handleUnderlayPointerCancel,
|
|
89
|
+
onClick: handleUnderlayClick
|
|
59
90
|
} : {},
|
|
60
91
|
style: {
|
|
61
92
|
position: "fixed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {
|
|
1
|
+
{"version":3,"file":"index2.cjs","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n RefObject,\n useContext,\n useEffect,\n useRef,\n ReactNode,\n type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element | null>\n popoverRef?: RefObject<HTMLDivElement | null>\n /**\n * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n *\n * @default false\n */\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/**\n * 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n *\n * triggerRefの付近に画面内に収まるように表示される\n */\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const underlayRef = useRef<HTMLDivElement>(null)\n const underlayPointerDownRef = useRef(false)\n const underlayPointerTypeRef = useRef('')\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // React の touchstart listener は passive なので、ペン由来の互換 click を\n // 抑止するため underlay に non-passive listener を直接登録する。\n useEffect(() => {\n const underlay = underlayRef.current\n if (!props.isOpen || !props.inertWorkaround || underlay === null) return\n\n const handleTouchStart = (e: TouchEvent) => {\n if (underlayPointerTypeRef.current === 'pen') {\n e.preventDefault()\n }\n }\n underlay.addEventListener('touchstart', handleTouchStart, {\n passive: false,\n })\n return () => {\n underlay.removeEventListener('touchstart', handleTouchStart)\n }\n }, [props.isOpen, props.inertWorkaround])\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n const handleUnderlayPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n underlayPointerDownRef.current = true\n underlayPointerTypeRef.current = e.pointerType\n }\n\n const handleUnderlayPointerCancel = () => {\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n }\n\n const handleUnderlayClick = () => {\n const startedOnUnderlay = underlayPointerDownRef.current\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n\n // Android Chrome はペンの pointerup で Popover が開いた後、同じ入力の\n // 互換 click を新しく追加された underlay に送る。この click には\n // underlay 上の pointerdown がないため、外側操作として扱わない。\n if (startedOnUnderlay) {\n props.onClose()\n }\n }\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n ref={underlayRef}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? {\n 'data-react-aria-top-layer': true,\n onPointerDown: handleUnderlayPointerDown,\n onPointerCancel: handleUnderlayPointerCancel,\n onClick: handleUnderlayClick,\n }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/* @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,sCAA2C,IAAI;CACrD,MAAM,gCAAqC,IAAI;CAC/C,MAAM,2CAAgC,KAAK;CAC3C,MAAM,2CAAgC,EAAE;CACxC,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,wDACpB;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,gEADmC,qDAClB,GAAiB,MAAM,MAAM;CAI9C,2BAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,mBAAmB,aAAa,MAAM;EAElE,MAAM,oBAAoB,MAAkB;GAC1C,IAAI,uBAAuB,YAAY,OACrC,EAAE,eAAe;EAErB;EACA,SAAS,iBAAiB,cAAc,kBAAkB,EACxD,SAAS,MACX,CAAC;EACD,aAAa;GACX,SAAS,oBAAoB,cAAc,gBAAgB;EAC7D;CACF,GAAG,CAAC,MAAM,QAAQ,MAAM,eAAe,CAAC;CAMxC,MAAM,EAAE,QAAQ,YAAY;CAC5B,2BAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,MAAM,6BAA6B,MAAyC;EAC1E,uBAAuB,UAAU;EACjC,uBAAuB,UAAU,EAAE;CACrC;CAEA,MAAM,oCAAoC;EACxC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC;CAEA,MAAM,4BAA4B;EAChC,MAAM,oBAAoB,uBAAuB;EACjD,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAKjC,IAAI,mBACF,MAAM,QAAQ;CAElB;CAEA,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,4CAAC,4BAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,2CAAC,OAAD;GACE,GAAI;GACJ,KAAK;GAEL,GAAK,MAAM,kBACP;IACE,6BAA6B;IAC7B,eAAe;IACf,iBAAiB;IACjB,SAAS;GACX,IACA,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,4CAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,2CAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,2CAAC,kCAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}
|
|
@@ -17,6 +17,9 @@ const _empty = () => null;
|
|
|
17
17
|
*/
|
|
18
18
|
function Popover(props) {
|
|
19
19
|
const defaultPopoverRef = useRef(null);
|
|
20
|
+
const underlayRef = useRef(null);
|
|
21
|
+
const underlayPointerDownRef = useRef(false);
|
|
22
|
+
const underlayPointerTypeRef = useRef("");
|
|
20
23
|
const finalPopoverRef = props.popoverRef === void 0 ? defaultPopoverRef : props.popoverRef;
|
|
21
24
|
const { popoverProps, underlayProps } = usePopover({
|
|
22
25
|
triggerRef: props.triggerRef,
|
|
@@ -30,6 +33,17 @@ function Popover(props) {
|
|
|
30
33
|
toggle: _empty
|
|
31
34
|
});
|
|
32
35
|
usePreventScroll(useContext(ModalBackgroundContext), props.isOpen);
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
const underlay = underlayRef.current;
|
|
38
|
+
if (!props.isOpen || !props.inertWorkaround || underlay === null) return;
|
|
39
|
+
const handleTouchStart = (e) => {
|
|
40
|
+
if (underlayPointerTypeRef.current === "pen") e.preventDefault();
|
|
41
|
+
};
|
|
42
|
+
underlay.addEventListener("touchstart", handleTouchStart, { passive: false });
|
|
43
|
+
return () => {
|
|
44
|
+
underlay.removeEventListener("touchstart", handleTouchStart);
|
|
45
|
+
};
|
|
46
|
+
}, [props.isOpen, props.inertWorkaround]);
|
|
33
47
|
const { isOpen, onClose } = props;
|
|
34
48
|
useEffect(() => {
|
|
35
49
|
if (!isOpen) return;
|
|
@@ -48,14 +62,31 @@ function Popover(props) {
|
|
|
48
62
|
onClose,
|
|
49
63
|
finalPopoverRef
|
|
50
64
|
]);
|
|
65
|
+
const handleUnderlayPointerDown = (e) => {
|
|
66
|
+
underlayPointerDownRef.current = true;
|
|
67
|
+
underlayPointerTypeRef.current = e.pointerType;
|
|
68
|
+
};
|
|
69
|
+
const handleUnderlayPointerCancel = () => {
|
|
70
|
+
underlayPointerDownRef.current = false;
|
|
71
|
+
underlayPointerTypeRef.current = "";
|
|
72
|
+
};
|
|
73
|
+
const handleUnderlayClick = () => {
|
|
74
|
+
const startedOnUnderlay = underlayPointerDownRef.current;
|
|
75
|
+
underlayPointerDownRef.current = false;
|
|
76
|
+
underlayPointerTypeRef.current = "";
|
|
77
|
+
if (startedOnUnderlay) props.onClose();
|
|
78
|
+
};
|
|
51
79
|
if (!props.isOpen) return null;
|
|
52
80
|
return /* @__PURE__ */ jsxs(Overlay, {
|
|
53
81
|
portalContainer: document.body,
|
|
54
82
|
children: [/* @__PURE__ */ jsx("div", {
|
|
55
83
|
...underlayProps,
|
|
84
|
+
ref: underlayRef,
|
|
56
85
|
...props.inertWorkaround ? {
|
|
57
86
|
"data-react-aria-top-layer": true,
|
|
58
|
-
|
|
87
|
+
onPointerDown: handleUnderlayPointerDown,
|
|
88
|
+
onPointerCancel: handleUnderlayPointerCancel,
|
|
89
|
+
onClick: handleUnderlayClick
|
|
59
90
|
} : {},
|
|
60
91
|
style: {
|
|
61
92
|
position: "fixed",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {
|
|
1
|
+
{"version":3,"file":"index2.js","names":[],"sources":["../../../../src/components/DropdownSelector/Popover/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n RefObject,\n useContext,\n useEffect,\n useRef,\n ReactNode,\n type PointerEvent as ReactPointerEvent,\n} from 'react'\nimport { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'\nimport { usePreventScroll } from './usePreventScroll'\nimport { DismissButton, Overlay } from 'react-aria/Overlay'\nimport { usePopover } from 'react-aria/usePopover'\n\nexport type PopoverProps = {\n isOpen: boolean\n onClose: () => void\n children: ReactNode\n triggerRef: RefObject<Element | null>\n popoverRef?: RefObject<HTMLDivElement | null>\n /**\n * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.\n * This may become default at next major.\n * https://github.com/adobe/react-spectrum/pull/8796\n * https://github.com/adobe/react-spectrum/issues/8784\n *\n * @default false\n */\n inertWorkaround?: boolean\n}\n\nconst _empty = () => null\n\n/**\n * 画面の全面に動的に開くことができるコンテナ要素\n * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる\n *\n * triggerRefの付近に画面内に収まるように表示される\n */\nexport default function Popover(props: PopoverProps) {\n const defaultPopoverRef = useRef<HTMLDivElement>(null)\n const underlayRef = useRef<HTMLDivElement>(null)\n const underlayPointerDownRef = useRef(false)\n const underlayPointerTypeRef = useRef('')\n const finalPopoverRef =\n props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef\n const { popoverProps, underlayProps } = usePopover(\n {\n triggerRef: props.triggerRef,\n popoverRef: finalPopoverRef,\n containerPadding: 16,\n },\n {\n close: props.onClose,\n isOpen: props.isOpen,\n // never used\n open: _empty,\n setOpen: _empty,\n toggle: _empty,\n },\n )\n\n const modalBackground = useContext(ModalBackgroundContext)\n usePreventScroll(modalBackground, props.isOpen)\n\n // React の touchstart listener は passive なので、ペン由来の互換 click を\n // 抑止するため underlay に non-passive listener を直接登録する。\n useEffect(() => {\n const underlay = underlayRef.current\n if (!props.isOpen || !props.inertWorkaround || underlay === null) return\n\n const handleTouchStart = (e: TouchEvent) => {\n if (underlayPointerTypeRef.current === 'pen') {\n e.preventDefault()\n }\n }\n underlay.addEventListener('touchstart', handleTouchStart, {\n passive: false,\n })\n return () => {\n underlay.removeEventListener('touchstart', handleTouchStart)\n }\n }, [props.isOpen, props.inertWorkaround])\n\n // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、\n // click に依存する react-aria の外側判定ではペンで閉じられない。\n // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので\n // underlay 自身がイベントを受け取らなくなる。\n const { isOpen, onClose } = props\n useEffect(() => {\n if (!isOpen) return\n const handlePointerUp = (e: PointerEvent) => {\n if (e.pointerType !== 'pen') return\n const popover = finalPopoverRef.current\n if (popover !== null && e.composedPath().includes(popover)) return\n onClose()\n }\n document.addEventListener('pointerup', handlePointerUp, true)\n return () => {\n document.removeEventListener('pointerup', handlePointerUp, true)\n }\n }, [isOpen, onClose, finalPopoverRef])\n\n const handleUnderlayPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {\n underlayPointerDownRef.current = true\n underlayPointerTypeRef.current = e.pointerType\n }\n\n const handleUnderlayPointerCancel = () => {\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n }\n\n const handleUnderlayClick = () => {\n const startedOnUnderlay = underlayPointerDownRef.current\n underlayPointerDownRef.current = false\n underlayPointerTypeRef.current = ''\n\n // Android Chrome はペンの pointerup で Popover が開いた後、同じ入力の\n // 互換 click を新しく追加された underlay に送る。この click には\n // underlay 上の pointerdown がないため、外側操作として扱わない。\n if (startedOnUnderlay) {\n props.onClose()\n }\n }\n\n if (!props.isOpen) return null\n\n return (\n <Overlay portalContainer={document.body}>\n <div\n {...underlayProps}\n ref={underlayRef}\n // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154\n {...(props.inertWorkaround\n ? {\n 'data-react-aria-top-layer': true,\n onPointerDown: handleUnderlayPointerDown,\n onPointerCancel: handleUnderlayPointerCancel,\n onClick: handleUnderlayClick,\n }\n : {})}\n style={{\n position: 'fixed',\n zIndex:\n typeof popoverProps.style?.zIndex === 'number'\n ? popoverProps.style.zIndex - 1\n : 99999,\n inset: 0,\n }}\n />\n {/* @ts-expect-error react types we use does not support react 19 types yet */}\n <div {...popoverProps} ref={finalPopoverRef} className=\"charcoal-popover\">\n <DismissButton onDismiss={() => props.onClose()} />\n <div tabIndex={0} onFocus={props.onClose} />\n {props.children}\n <div tabIndex={0} onFocus={props.onClose} />\n <DismissButton onDismiss={() => props.onClose()} />\n </div>\n </Overlay>\n )\n}\n"],"mappings":";;;;;;;;;;AAgCA,MAAM,eAAe;;;;;;;AAQrB,SAAwB,QAAQ,OAAqB;CACnD,MAAM,oBAAoB,OAAuB,IAAI;CACrD,MAAM,cAAc,OAAuB,IAAI;CAC/C,MAAM,yBAAyB,OAAO,KAAK;CAC3C,MAAM,yBAAyB,OAAO,EAAE;CACxC,MAAM,kBACJ,MAAM,eAAe,SAAY,oBAAoB,MAAM;CAC7D,MAAM,EAAE,cAAc,kBAAkB,WACtC;EACE,YAAY,MAAM;EAClB,YAAY;EACZ,kBAAkB;CACpB,GACA;EACE,OAAO,MAAM;EACb,QAAQ,MAAM;EAEd,MAAM;EACN,SAAS;EACT,QAAQ;CACV,CACF;CAGA,iBADwB,WAAW,sBAClB,GAAiB,MAAM,MAAM;CAI9C,gBAAgB;EACd,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,MAAM,UAAU,CAAC,MAAM,mBAAmB,aAAa,MAAM;EAElE,MAAM,oBAAoB,MAAkB;GAC1C,IAAI,uBAAuB,YAAY,OACrC,EAAE,eAAe;EAErB;EACA,SAAS,iBAAiB,cAAc,kBAAkB,EACxD,SAAS,MACX,CAAC;EACD,aAAa;GACX,SAAS,oBAAoB,cAAc,gBAAgB;EAC7D;CACF,GAAG,CAAC,MAAM,QAAQ,MAAM,eAAe,CAAC;CAMxC,MAAM,EAAE,QAAQ,YAAY;CAC5B,gBAAgB;EACd,IAAI,CAAC,QAAQ;EACb,MAAM,mBAAmB,MAAoB;GAC3C,IAAI,EAAE,gBAAgB,OAAO;GAC7B,MAAM,UAAU,gBAAgB;GAChC,IAAI,YAAY,QAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,OAAO,GAAG;GAC5D,QAAQ;EACV;EACA,SAAS,iBAAiB,aAAa,iBAAiB,IAAI;EAC5D,aAAa;GACX,SAAS,oBAAoB,aAAa,iBAAiB,IAAI;EACjE;CACF,GAAG;EAAC;EAAQ;EAAS;CAAe,CAAC;CAErC,MAAM,6BAA6B,MAAyC;EAC1E,uBAAuB,UAAU;EACjC,uBAAuB,UAAU,EAAE;CACrC;CAEA,MAAM,oCAAoC;EACxC,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;CACnC;CAEA,MAAM,4BAA4B;EAChC,MAAM,oBAAoB,uBAAuB;EACjD,uBAAuB,UAAU;EACjC,uBAAuB,UAAU;EAKjC,IAAI,mBACF,MAAM,QAAQ;CAElB;CAEA,IAAI,CAAC,MAAM,QAAQ,OAAO;CAE1B,OACE,qBAAC,SAAD;EAAS,iBAAiB,SAAS;YAAnC,CACE,oBAAC,OAAD;GACE,GAAI;GACJ,KAAK;GAEL,GAAK,MAAM,kBACP;IACE,6BAA6B;IAC7B,eAAe;IACf,iBAAiB;IACjB,SAAS;GACX,IACA,CAAC;GACL,OAAO;IACL,UAAU;IACV,QACE,OAAO,aAAa,OAAO,WAAW,WAClC,aAAa,MAAM,SAAS,IAC5B;IACN,OAAO;GACT;EAAE,IAGJ,qBAAC,OAAD;GAAK,GAAI;GAAc,KAAK;GAAiB,WAAU;aAAvD;IACE,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;IAChD,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACxC,MAAM;IACP,oBAAC,OAAD;KAAK,UAAU;KAAG,SAAS,MAAM;IAAQ;IACzC,oBAAC,eAAD,EAAe,iBAAiB,MAAM,QAAQ,EAAE;GAC7C;IACE;;AAEb"}
|