@zag-js/popover 0.10.5 → 0.11.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.
@@ -1,106 +0,0 @@
1
- import { dataAttr } from '@zag-js/dom-query';
2
- import { getPlacementStyles } from '@zag-js/popper';
3
- import { parts } from './popover.anatomy.mjs';
4
- import { dom } from './popover.dom.mjs';
5
-
6
- function connect(state, send, normalize) {
7
- const isOpen = state.matches("open");
8
- const currentPlacement = state.context.currentPlacement;
9
- const portalled = state.context.currentPortalled;
10
- const rendered = state.context.renderedElements;
11
- const popperStyles = getPlacementStyles({
12
- placement: currentPlacement
13
- });
14
- return {
15
- /**
16
- * Whether the popover is portalled
17
- */
18
- portalled,
19
- /**
20
- * Whether the popover is open
21
- */
22
- isOpen,
23
- /**
24
- * Function to open the popover
25
- */
26
- open() {
27
- send("OPEN");
28
- },
29
- /**
30
- * Function to close the popover
31
- */
32
- close() {
33
- send("CLOSE");
34
- },
35
- /**
36
- * Function to reposition the popover
37
- */
38
- setPositioning(options = {}) {
39
- send({ type: "SET_POSITIONING", options });
40
- },
41
- arrowProps: normalize.element({
42
- id: dom.getArrowId(state.context),
43
- ...parts.arrow.attrs,
44
- style: popperStyles.arrow
45
- }),
46
- arrowTipProps: normalize.element({
47
- ...parts.arrowTip.attrs,
48
- style: popperStyles.arrowTip
49
- }),
50
- anchorProps: normalize.element({
51
- ...parts.anchor.attrs,
52
- id: dom.getAnchorId(state.context)
53
- }),
54
- triggerProps: normalize.button({
55
- ...parts.trigger.attrs,
56
- type: "button",
57
- "data-placement": currentPlacement,
58
- id: dom.getTriggerId(state.context),
59
- "aria-haspopup": "dialog",
60
- "aria-expanded": isOpen,
61
- "data-expanded": dataAttr(isOpen),
62
- "aria-controls": dom.getContentId(state.context),
63
- onClick() {
64
- send("TOGGLE");
65
- },
66
- onBlur(event) {
67
- send({ type: "TRIGGER_BLUR", target: event.relatedTarget });
68
- }
69
- }),
70
- positionerProps: normalize.element({
71
- id: dom.getPositionerId(state.context),
72
- ...parts.positioner.attrs,
73
- style: popperStyles.floating
74
- }),
75
- contentProps: normalize.element({
76
- ...parts.content.attrs,
77
- id: dom.getContentId(state.context),
78
- tabIndex: -1,
79
- role: "dialog",
80
- hidden: !isOpen,
81
- "data-expanded": dataAttr(isOpen),
82
- "aria-labelledby": rendered.title ? dom.getTitleId(state.context) : void 0,
83
- "aria-describedby": rendered.description ? dom.getDescriptionId(state.context) : void 0,
84
- "data-placement": currentPlacement
85
- }),
86
- titleProps: normalize.element({
87
- ...parts.title.attrs,
88
- id: dom.getTitleId(state.context)
89
- }),
90
- descriptionProps: normalize.element({
91
- ...parts.description.attrs,
92
- id: dom.getDescriptionId(state.context)
93
- }),
94
- closeTriggerProps: normalize.button({
95
- ...parts.closeTrigger.attrs,
96
- id: dom.getCloseTriggerId(state.context),
97
- type: "button",
98
- "aria-label": "close",
99
- onClick() {
100
- send("REQUEST_CLOSE");
101
- }
102
- })
103
- };
104
- }
105
-
106
- export { connect };
@@ -1,44 +0,0 @@
1
- import type { MachineContext as Ctx } from "./popover.types";
2
- export declare const dom: {
3
- getRootNode: (ctx: {
4
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
5
- }) => ShadowRoot | Document;
6
- getDoc: (ctx: {
7
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
8
- }) => Document;
9
- getWin: (ctx: {
10
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
11
- }) => Window & typeof globalThis;
12
- getActiveElement: (ctx: {
13
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
14
- }) => HTMLElement | null;
15
- getById: <T extends HTMLElement = HTMLElement>(ctx: {
16
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
17
- }, id: string) => T | null;
18
- queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
19
- getRootNode?: (() => Node | ShadowRoot | Document) | undefined;
20
- }, id: string) => T_1;
21
- } & {
22
- getActiveEl: (ctx: Ctx) => Element | null;
23
- getAnchorId: (ctx: Ctx) => string;
24
- getTriggerId: (ctx: Ctx) => string;
25
- getContentId: (ctx: Ctx) => string;
26
- getPositionerId: (ctx: Ctx) => string;
27
- getArrowId: (ctx: Ctx) => string;
28
- getTitleId: (ctx: Ctx) => string;
29
- getDescriptionId: (ctx: Ctx) => string;
30
- getCloseTriggerId: (ctx: Ctx) => string;
31
- getAnchorEl: (ctx: Ctx) => HTMLElement | null;
32
- getTriggerEl: (ctx: Ctx) => HTMLElement | null;
33
- getContentEl: (ctx: Ctx) => HTMLElement | null;
34
- getPositionerEl: (ctx: Ctx) => HTMLElement | null;
35
- getTitleEl: (ctx: Ctx) => HTMLElement | null;
36
- getDescriptionEl: (ctx: Ctx) => HTMLElement | null;
37
- getFocusableEls: (ctx: Ctx) => HTMLElement[];
38
- getFirstFocusableEl: (ctx: Ctx) => HTMLElement;
39
- getDocTabbableEls: (ctx: Ctx) => HTMLElement[];
40
- getTabbableEls: (ctx: Ctx) => HTMLElement[];
41
- getFirstTabbableEl: (ctx: Ctx) => HTMLElement;
42
- getLastTabbableEl: (ctx: Ctx) => HTMLElement;
43
- getInitialFocusEl: (ctx: Ctx) => HTMLElement | null;
44
- };
@@ -1,41 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const domQuery = require('@zag-js/dom-query');
6
- const tabbable = require('@zag-js/tabbable');
7
- const utils = require('@zag-js/utils');
8
-
9
- const dom = domQuery.createScope({
10
- getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
11
- getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
12
- getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
13
- getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
14
- getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
15
- getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
16
- getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
17
- getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
18
- getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
19
- getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
20
- getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
21
- getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
22
- getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
23
- getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
24
- getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
25
- getFocusableEls: (ctx) => tabbable.getFocusables(dom.getContentEl(ctx)),
26
- getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
27
- getDocTabbableEls: (ctx) => tabbable.getTabbables(dom.getDoc(ctx).body),
28
- getTabbableEls: (ctx) => tabbable.getTabbables(dom.getContentEl(ctx), "if-empty"),
29
- getFirstTabbableEl: (ctx) => tabbable.getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
30
- getLastTabbableEl: (ctx) => tabbable.getLastTabbable(dom.getContentEl(ctx), "if-empty"),
31
- getInitialFocusEl: (ctx) => {
32
- let el = utils.runIfFn(ctx.initialFocusEl);
33
- if (!el && ctx.autoFocus)
34
- el = dom.getFirstFocusableEl(ctx);
35
- if (!el)
36
- el = dom.getContentEl(ctx);
37
- return el;
38
- }
39
- });
40
-
41
- exports.dom = dom;
@@ -1,37 +0,0 @@
1
- import { createScope } from '@zag-js/dom-query';
2
- import { getFocusables, getTabbables, getFirstTabbable, getLastTabbable } from '@zag-js/tabbable';
3
- import { runIfFn } from '@zag-js/utils';
4
-
5
- const dom = createScope({
6
- getActiveEl: (ctx) => dom.getDoc(ctx).activeElement,
7
- getAnchorId: (ctx) => ctx.ids?.anchor ?? `popover:${ctx.id}:anchor`,
8
- getTriggerId: (ctx) => ctx.ids?.trigger ?? `popover:${ctx.id}:trigger`,
9
- getContentId: (ctx) => ctx.ids?.content ?? `popover:${ctx.id}:content`,
10
- getPositionerId: (ctx) => ctx.ids?.positioner ?? `popover:${ctx.id}:popper`,
11
- getArrowId: (ctx) => ctx.ids?.arrow ?? `popover:${ctx.id}:arrow`,
12
- getTitleId: (ctx) => ctx.ids?.title ?? `popover:${ctx.id}:title`,
13
- getDescriptionId: (ctx) => ctx.ids?.description ?? `popover:${ctx.id}:desc`,
14
- getCloseTriggerId: (ctx) => ctx.ids?.closeTrigger ?? `popover:${ctx.id}:close`,
15
- getAnchorEl: (ctx) => dom.getById(ctx, dom.getAnchorId(ctx)),
16
- getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
17
- getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
18
- getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
19
- getTitleEl: (ctx) => dom.getById(ctx, dom.getTitleId(ctx)),
20
- getDescriptionEl: (ctx) => dom.getById(ctx, dom.getDescriptionId(ctx)),
21
- getFocusableEls: (ctx) => getFocusables(dom.getContentEl(ctx)),
22
- getFirstFocusableEl: (ctx) => dom.getFocusableEls(ctx)[0],
23
- getDocTabbableEls: (ctx) => getTabbables(dom.getDoc(ctx).body),
24
- getTabbableEls: (ctx) => getTabbables(dom.getContentEl(ctx), "if-empty"),
25
- getFirstTabbableEl: (ctx) => getFirstTabbable(dom.getContentEl(ctx), "if-empty"),
26
- getLastTabbableEl: (ctx) => getLastTabbable(dom.getContentEl(ctx), "if-empty"),
27
- getInitialFocusEl: (ctx) => {
28
- let el = runIfFn(ctx.initialFocusEl);
29
- if (!el && ctx.autoFocus)
30
- el = dom.getFirstFocusableEl(ctx);
31
- if (!el)
32
- el = dom.getContentEl(ctx);
33
- return el;
34
- }
35
- });
36
-
37
- export { dom };
@@ -1,3 +0,0 @@
1
- import type { Machine, StateMachine } from '@zag-js/core';
2
- import type { MachineContext, MachineState, UserDefinedContext } from "./popover.types";
3
- export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
@@ -1,231 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
-
5
- const ariaHidden = require('@zag-js/aria-hidden');
6
- const core = require('@zag-js/core');
7
- const dismissable = require('@zag-js/dismissable');
8
- const domQuery = require('@zag-js/dom-query');
9
- const popper = require('@zag-js/popper');
10
- const removeScroll = require('@zag-js/remove-scroll');
11
- const tabbable = require('@zag-js/tabbable');
12
- const utils = require('@zag-js/utils');
13
- const focusTrap = require('focus-trap');
14
- const popover_dom = require('./popover.dom.js');
15
-
16
- function machine(userContext) {
17
- const ctx = utils.compact(userContext);
18
- return core.createMachine(
19
- {
20
- id: "popover",
21
- initial: ctx.open ? "open" : "closed",
22
- context: {
23
- closeOnInteractOutside: true,
24
- closeOnEsc: true,
25
- autoFocus: true,
26
- modal: false,
27
- positioning: {
28
- placement: "bottom",
29
- ...ctx.positioning
30
- },
31
- currentPlacement: void 0,
32
- ...ctx,
33
- renderedElements: {
34
- title: true,
35
- description: true
36
- }
37
- },
38
- computed: {
39
- currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
40
- },
41
- watch: {
42
- open: ["toggleVisibility"]
43
- },
44
- entry: ["checkRenderedElements"],
45
- states: {
46
- closed: {
47
- on: {
48
- TOGGLE: {
49
- target: "open",
50
- actions: ["invokeOnOpen"]
51
- },
52
- OPEN: {
53
- target: "open",
54
- actions: ["invokeOnOpen"]
55
- }
56
- }
57
- },
58
- open: {
59
- activities: [
60
- "trapFocus",
61
- "preventScroll",
62
- "hideContentBelow",
63
- "trackPositioning",
64
- "trackDismissableElement",
65
- "proxyTabFocus"
66
- ],
67
- entry: ["setInitialFocus"],
68
- on: {
69
- CLOSE: {
70
- target: "closed",
71
- actions: ["invokeOnClose"]
72
- },
73
- REQUEST_CLOSE: {
74
- target: "closed",
75
- actions: ["restoreFocusIfNeeded", "invokeOnClose"]
76
- },
77
- TOGGLE: {
78
- target: "closed",
79
- actions: ["invokeOnClose"]
80
- },
81
- SET_POSITIONING: {
82
- actions: "setPositioning"
83
- }
84
- }
85
- }
86
- }
87
- },
88
- {
89
- activities: {
90
- trackPositioning(ctx2) {
91
- ctx2.currentPlacement = ctx2.positioning.placement;
92
- const anchorEl = popover_dom.dom.getAnchorEl(ctx2) ?? popover_dom.dom.getTriggerEl(ctx2);
93
- const getPositionerEl = () => popover_dom.dom.getPositionerEl(ctx2);
94
- return popper.getPlacement(anchorEl, getPositionerEl, {
95
- ...ctx2.positioning,
96
- defer: true,
97
- onComplete(data) {
98
- ctx2.currentPlacement = data.placement;
99
- },
100
- onCleanup() {
101
- ctx2.currentPlacement = void 0;
102
- }
103
- });
104
- },
105
- trackDismissableElement(ctx2, _evt, { send }) {
106
- const getContentEl = () => popover_dom.dom.getContentEl(ctx2);
107
- let restoreFocus = true;
108
- return dismissable.trackDismissableElement(getContentEl, {
109
- pointerBlocking: ctx2.modal,
110
- exclude: popover_dom.dom.getTriggerEl(ctx2),
111
- defer: true,
112
- onEscapeKeyDown(event) {
113
- ctx2.onEscapeKeyDown?.(event);
114
- if (ctx2.closeOnEsc)
115
- return;
116
- event.preventDefault();
117
- },
118
- onInteractOutside(event) {
119
- ctx2.onInteractOutside?.(event);
120
- if (event.defaultPrevented)
121
- return;
122
- restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
123
- if (!ctx2.closeOnInteractOutside) {
124
- event.preventDefault();
125
- }
126
- },
127
- onPointerDownOutside(event) {
128
- ctx2.onPointerDownOutside?.(event);
129
- },
130
- onFocusOutside(event) {
131
- ctx2.onFocusOutside?.(event);
132
- },
133
- onDismiss() {
134
- send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
135
- }
136
- });
137
- },
138
- proxyTabFocus(ctx2) {
139
- if (ctx2.modal || !ctx2.portalled)
140
- return;
141
- const getContentEl = () => popover_dom.dom.getContentEl(ctx2);
142
- return tabbable.proxyTabFocus(getContentEl, {
143
- triggerElement: popover_dom.dom.getTriggerEl(ctx2),
144
- defer: true,
145
- onFocus(el) {
146
- el.focus({ preventScroll: true });
147
- }
148
- });
149
- },
150
- hideContentBelow(ctx2) {
151
- if (!ctx2.modal)
152
- return;
153
- const getElements = () => [popover_dom.dom.getContentEl(ctx2), popover_dom.dom.getTriggerEl(ctx2)];
154
- return ariaHidden.ariaHidden(getElements, { defer: true });
155
- },
156
- preventScroll(ctx2) {
157
- if (!ctx2.modal)
158
- return;
159
- return removeScroll.preventBodyScroll(popover_dom.dom.getDoc(ctx2));
160
- },
161
- trapFocus(ctx2) {
162
- if (!ctx2.modal)
163
- return;
164
- let trap;
165
- domQuery.nextTick(() => {
166
- const el = popover_dom.dom.getContentEl(ctx2);
167
- if (!el)
168
- return;
169
- trap = focusTrap.createFocusTrap(el, {
170
- escapeDeactivates: false,
171
- allowOutsideClick: true,
172
- preventScroll: true,
173
- returnFocusOnDeactivate: true,
174
- document: popover_dom.dom.getDoc(ctx2),
175
- fallbackFocus: el,
176
- initialFocus: utils.runIfFn(ctx2.initialFocusEl)
177
- });
178
- try {
179
- trap.activate();
180
- } catch {
181
- }
182
- });
183
- return () => trap?.deactivate();
184
- }
185
- },
186
- actions: {
187
- setPositioning(ctx2, evt) {
188
- const anchorEl = popover_dom.dom.getAnchorEl(ctx2) ?? popover_dom.dom.getTriggerEl(ctx2);
189
- const getPositionerEl = () => popover_dom.dom.getPositionerEl(ctx2);
190
- popper.getPlacement(anchorEl, getPositionerEl, {
191
- ...ctx2.positioning,
192
- ...evt.options,
193
- defer: true,
194
- listeners: false
195
- });
196
- },
197
- checkRenderedElements(ctx2) {
198
- domQuery.raf(() => {
199
- Object.assign(ctx2.renderedElements, {
200
- title: !!popover_dom.dom.getTitleEl(ctx2),
201
- description: !!popover_dom.dom.getDescriptionEl(ctx2)
202
- });
203
- });
204
- },
205
- setInitialFocus(ctx2) {
206
- domQuery.raf(() => {
207
- popover_dom.dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
208
- });
209
- },
210
- restoreFocusIfNeeded(ctx2, evt) {
211
- if (!evt.restoreFocus)
212
- return;
213
- domQuery.raf(() => {
214
- popover_dom.dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
215
- });
216
- },
217
- invokeOnOpen(ctx2) {
218
- ctx2.onOpen?.();
219
- },
220
- invokeOnClose(ctx2) {
221
- ctx2.onClose?.();
222
- },
223
- toggleVisibility(ctx2, _evt, { send }) {
224
- send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
225
- }
226
- }
227
- }
228
- );
229
- }
230
-
231
- exports.machine = machine;
@@ -1,227 +0,0 @@
1
- import { ariaHidden } from '@zag-js/aria-hidden';
2
- import { createMachine } from '@zag-js/core';
3
- import { trackDismissableElement } from '@zag-js/dismissable';
4
- import { nextTick, raf } from '@zag-js/dom-query';
5
- import { getPlacement } from '@zag-js/popper';
6
- import { preventBodyScroll } from '@zag-js/remove-scroll';
7
- import { proxyTabFocus } from '@zag-js/tabbable';
8
- import { compact, runIfFn } from '@zag-js/utils';
9
- import { createFocusTrap } from 'focus-trap';
10
- import { dom } from './popover.dom.mjs';
11
-
12
- function machine(userContext) {
13
- const ctx = compact(userContext);
14
- return createMachine(
15
- {
16
- id: "popover",
17
- initial: ctx.open ? "open" : "closed",
18
- context: {
19
- closeOnInteractOutside: true,
20
- closeOnEsc: true,
21
- autoFocus: true,
22
- modal: false,
23
- positioning: {
24
- placement: "bottom",
25
- ...ctx.positioning
26
- },
27
- currentPlacement: void 0,
28
- ...ctx,
29
- renderedElements: {
30
- title: true,
31
- description: true
32
- }
33
- },
34
- computed: {
35
- currentPortalled: (ctx2) => !!ctx2.modal || !!ctx2.portalled
36
- },
37
- watch: {
38
- open: ["toggleVisibility"]
39
- },
40
- entry: ["checkRenderedElements"],
41
- states: {
42
- closed: {
43
- on: {
44
- TOGGLE: {
45
- target: "open",
46
- actions: ["invokeOnOpen"]
47
- },
48
- OPEN: {
49
- target: "open",
50
- actions: ["invokeOnOpen"]
51
- }
52
- }
53
- },
54
- open: {
55
- activities: [
56
- "trapFocus",
57
- "preventScroll",
58
- "hideContentBelow",
59
- "trackPositioning",
60
- "trackDismissableElement",
61
- "proxyTabFocus"
62
- ],
63
- entry: ["setInitialFocus"],
64
- on: {
65
- CLOSE: {
66
- target: "closed",
67
- actions: ["invokeOnClose"]
68
- },
69
- REQUEST_CLOSE: {
70
- target: "closed",
71
- actions: ["restoreFocusIfNeeded", "invokeOnClose"]
72
- },
73
- TOGGLE: {
74
- target: "closed",
75
- actions: ["invokeOnClose"]
76
- },
77
- SET_POSITIONING: {
78
- actions: "setPositioning"
79
- }
80
- }
81
- }
82
- }
83
- },
84
- {
85
- activities: {
86
- trackPositioning(ctx2) {
87
- ctx2.currentPlacement = ctx2.positioning.placement;
88
- const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
89
- const getPositionerEl = () => dom.getPositionerEl(ctx2);
90
- return getPlacement(anchorEl, getPositionerEl, {
91
- ...ctx2.positioning,
92
- defer: true,
93
- onComplete(data) {
94
- ctx2.currentPlacement = data.placement;
95
- },
96
- onCleanup() {
97
- ctx2.currentPlacement = void 0;
98
- }
99
- });
100
- },
101
- trackDismissableElement(ctx2, _evt, { send }) {
102
- const getContentEl = () => dom.getContentEl(ctx2);
103
- let restoreFocus = true;
104
- return trackDismissableElement(getContentEl, {
105
- pointerBlocking: ctx2.modal,
106
- exclude: dom.getTriggerEl(ctx2),
107
- defer: true,
108
- onEscapeKeyDown(event) {
109
- ctx2.onEscapeKeyDown?.(event);
110
- if (ctx2.closeOnEsc)
111
- return;
112
- event.preventDefault();
113
- },
114
- onInteractOutside(event) {
115
- ctx2.onInteractOutside?.(event);
116
- if (event.defaultPrevented)
117
- return;
118
- restoreFocus = !(event.detail.focusable || event.detail.contextmenu);
119
- if (!ctx2.closeOnInteractOutside) {
120
- event.preventDefault();
121
- }
122
- },
123
- onPointerDownOutside(event) {
124
- ctx2.onPointerDownOutside?.(event);
125
- },
126
- onFocusOutside(event) {
127
- ctx2.onFocusOutside?.(event);
128
- },
129
- onDismiss() {
130
- send({ type: "REQUEST_CLOSE", src: "interact-outside", restoreFocus });
131
- }
132
- });
133
- },
134
- proxyTabFocus(ctx2) {
135
- if (ctx2.modal || !ctx2.portalled)
136
- return;
137
- const getContentEl = () => dom.getContentEl(ctx2);
138
- return proxyTabFocus(getContentEl, {
139
- triggerElement: dom.getTriggerEl(ctx2),
140
- defer: true,
141
- onFocus(el) {
142
- el.focus({ preventScroll: true });
143
- }
144
- });
145
- },
146
- hideContentBelow(ctx2) {
147
- if (!ctx2.modal)
148
- return;
149
- const getElements = () => [dom.getContentEl(ctx2), dom.getTriggerEl(ctx2)];
150
- return ariaHidden(getElements, { defer: true });
151
- },
152
- preventScroll(ctx2) {
153
- if (!ctx2.modal)
154
- return;
155
- return preventBodyScroll(dom.getDoc(ctx2));
156
- },
157
- trapFocus(ctx2) {
158
- if (!ctx2.modal)
159
- return;
160
- let trap;
161
- nextTick(() => {
162
- const el = dom.getContentEl(ctx2);
163
- if (!el)
164
- return;
165
- trap = createFocusTrap(el, {
166
- escapeDeactivates: false,
167
- allowOutsideClick: true,
168
- preventScroll: true,
169
- returnFocusOnDeactivate: true,
170
- document: dom.getDoc(ctx2),
171
- fallbackFocus: el,
172
- initialFocus: runIfFn(ctx2.initialFocusEl)
173
- });
174
- try {
175
- trap.activate();
176
- } catch {
177
- }
178
- });
179
- return () => trap?.deactivate();
180
- }
181
- },
182
- actions: {
183
- setPositioning(ctx2, evt) {
184
- const anchorEl = dom.getAnchorEl(ctx2) ?? dom.getTriggerEl(ctx2);
185
- const getPositionerEl = () => dom.getPositionerEl(ctx2);
186
- getPlacement(anchorEl, getPositionerEl, {
187
- ...ctx2.positioning,
188
- ...evt.options,
189
- defer: true,
190
- listeners: false
191
- });
192
- },
193
- checkRenderedElements(ctx2) {
194
- raf(() => {
195
- Object.assign(ctx2.renderedElements, {
196
- title: !!dom.getTitleEl(ctx2),
197
- description: !!dom.getDescriptionEl(ctx2)
198
- });
199
- });
200
- },
201
- setInitialFocus(ctx2) {
202
- raf(() => {
203
- dom.getInitialFocusEl(ctx2)?.focus({ preventScroll: true });
204
- });
205
- },
206
- restoreFocusIfNeeded(ctx2, evt) {
207
- if (!evt.restoreFocus)
208
- return;
209
- raf(() => {
210
- dom.getTriggerEl(ctx2)?.focus({ preventScroll: true });
211
- });
212
- },
213
- invokeOnOpen(ctx2) {
214
- ctx2.onOpen?.();
215
- },
216
- invokeOnClose(ctx2) {
217
- ctx2.onClose?.();
218
- },
219
- toggleVisibility(ctx2, _evt, { send }) {
220
- send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
221
- }
222
- }
223
- }
224
- );
225
- }
226
-
227
- export { machine };