@huin-core/react-dialog 1.0.2 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.d.mts +118 -0
- package/dist/index.d.ts +118 -0
- package/dist/index.js +416 -0
- package/dist/index.js.map +7 -0
- package/dist/index.mjs +384 -0
- package/dist/index.mjs.map +7 -0
- package/package.json +3 -2
package/dist/index.d.mts
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
import { Portal } from '@huin-core/react-portal';
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
6
|
+
import { DismissableLayer } from '@huin-core/react-dismissable-layer';
|
7
|
+
import { FocusScope } from '@huin-core/react-focus-scope';
|
8
|
+
|
9
|
+
type Scope<C = any> = {
|
10
|
+
[scopeName: string]: React.Context<C>[];
|
11
|
+
} | undefined;
|
12
|
+
type ScopeHook = (scope: Scope) => {
|
13
|
+
[__scopeProp: string]: Scope;
|
14
|
+
};
|
15
|
+
interface CreateScope {
|
16
|
+
scopeName: string;
|
17
|
+
(): ScopeHook;
|
18
|
+
}
|
19
|
+
|
20
|
+
interface DialogContentProps extends DialogContentTypeProps {
|
21
|
+
/**
|
22
|
+
* Used to force mounting when more control is needed. Useful when
|
23
|
+
* controlling animation with React animation libraries.
|
24
|
+
*/
|
25
|
+
forceMount?: true;
|
26
|
+
}
|
27
|
+
declare const DialogContent: React__default.ForwardRefExoticComponent<DialogContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
28
|
+
interface DialogContentTypeProps extends Omit<DialogContentImplProps, "trapFocus" | "disableOutsidePointerEvents"> {
|
29
|
+
}
|
30
|
+
type DismissableLayerProps = React__default.ComponentPropsWithoutRef<typeof DismissableLayer>;
|
31
|
+
type FocusScopeProps = React__default.ComponentPropsWithoutRef<typeof FocusScope>;
|
32
|
+
interface DialogContentImplProps extends Omit<DismissableLayerProps, "onDismiss"> {
|
33
|
+
/**
|
34
|
+
* When `true`, focus cannot escape the `Content` via keyboard,
|
35
|
+
* pointer, or a programmatic focus.
|
36
|
+
* @defaultValue false
|
37
|
+
*/
|
38
|
+
trapFocus?: FocusScopeProps["trapped"];
|
39
|
+
/**
|
40
|
+
* Event handler called when auto-focusing on open.
|
41
|
+
* Can be prevented.
|
42
|
+
*/
|
43
|
+
onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
|
44
|
+
/**
|
45
|
+
* Event handler called when auto-focusing on close.
|
46
|
+
* Can be prevented.
|
47
|
+
*/
|
48
|
+
onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
|
49
|
+
}
|
50
|
+
declare const WarningProvider: {
|
51
|
+
(props: {
|
52
|
+
contentName: string;
|
53
|
+
titleName: string;
|
54
|
+
docsSlug: string;
|
55
|
+
} & {
|
56
|
+
children: React__default.ReactNode;
|
57
|
+
}): react_jsx_runtime.JSX.Element;
|
58
|
+
displayName: string;
|
59
|
+
};
|
60
|
+
|
61
|
+
declare const createDialogScope: CreateScope;
|
62
|
+
interface DialogProps {
|
63
|
+
children?: React.ReactNode;
|
64
|
+
open?: boolean;
|
65
|
+
defaultOpen?: boolean;
|
66
|
+
onOpenChange?(open: boolean): void;
|
67
|
+
modal?: boolean;
|
68
|
+
}
|
69
|
+
declare const Dialog: React.FC<DialogProps>;
|
70
|
+
declare const Root: React.FC<DialogProps>;
|
71
|
+
|
72
|
+
type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
|
73
|
+
interface DialogTriggerProps extends PrimitiveButtonProps {
|
74
|
+
}
|
75
|
+
declare const DialogTrigger: React__default.ForwardRefExoticComponent<DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
76
|
+
|
77
|
+
type PortalProps = React__default.ComponentPropsWithoutRef<typeof Portal>;
|
78
|
+
interface DialogPortalProps {
|
79
|
+
children?: React__default.ReactNode;
|
80
|
+
/**
|
81
|
+
* Specify a container element to portal the content into.
|
82
|
+
*/
|
83
|
+
container?: PortalProps["container"];
|
84
|
+
/**
|
85
|
+
* Used to force mounting when more control is needed. Useful when
|
86
|
+
* controlling animation with React animation libraries.
|
87
|
+
*/
|
88
|
+
forceMount?: true;
|
89
|
+
}
|
90
|
+
declare const DialogPortal: React__default.FC<DialogPortalProps>;
|
91
|
+
|
92
|
+
interface DialogOverlayProps extends DialogOverlayImplProps {
|
93
|
+
/**
|
94
|
+
* Used to force mounting when more control is needed. Useful when
|
95
|
+
* controlling animation with React animation libraries.
|
96
|
+
*/
|
97
|
+
forceMount?: true;
|
98
|
+
}
|
99
|
+
declare const DialogOverlay: React__default.ForwardRefExoticComponent<DialogOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
|
100
|
+
type PrimitiveDivProps = React__default.ComponentPropsWithoutRef<typeof Primitive.div>;
|
101
|
+
interface DialogOverlayImplProps extends PrimitiveDivProps {
|
102
|
+
}
|
103
|
+
|
104
|
+
type PrimitiveHeading2Props = React__default.ComponentPropsWithoutRef<typeof Primitive.h2>;
|
105
|
+
interface DialogTitleProps extends PrimitiveHeading2Props {
|
106
|
+
}
|
107
|
+
declare const DialogTitle: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
|
108
|
+
|
109
|
+
type PrimitiveParagraphProps = React__default.ComponentPropsWithoutRef<typeof Primitive.p>;
|
110
|
+
interface DialogDescriptionProps extends PrimitiveParagraphProps {
|
111
|
+
}
|
112
|
+
declare const DialogDescription: React__default.ForwardRefExoticComponent<DialogDescriptionProps & React__default.RefAttributes<HTMLParagraphElement>>;
|
113
|
+
|
114
|
+
interface DialogCloseProps extends PrimitiveButtonProps {
|
115
|
+
}
|
116
|
+
declare const DialogClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
|
117
|
+
|
118
|
+
export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Root, WarningProvider, createDialogScope };
|
package/dist/index.d.ts
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import React__default from 'react';
|
3
|
+
import { Primitive } from '@huin-core/react-primitive';
|
4
|
+
import { Portal } from '@huin-core/react-portal';
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
6
|
+
import { DismissableLayer } from '@huin-core/react-dismissable-layer';
|
7
|
+
import { FocusScope } from '@huin-core/react-focus-scope';
|
8
|
+
|
9
|
+
type Scope<C = any> = {
|
10
|
+
[scopeName: string]: React.Context<C>[];
|
11
|
+
} | undefined;
|
12
|
+
type ScopeHook = (scope: Scope) => {
|
13
|
+
[__scopeProp: string]: Scope;
|
14
|
+
};
|
15
|
+
interface CreateScope {
|
16
|
+
scopeName: string;
|
17
|
+
(): ScopeHook;
|
18
|
+
}
|
19
|
+
|
20
|
+
interface DialogContentProps extends DialogContentTypeProps {
|
21
|
+
/**
|
22
|
+
* Used to force mounting when more control is needed. Useful when
|
23
|
+
* controlling animation with React animation libraries.
|
24
|
+
*/
|
25
|
+
forceMount?: true;
|
26
|
+
}
|
27
|
+
declare const DialogContent: React__default.ForwardRefExoticComponent<DialogContentProps & React__default.RefAttributes<HTMLDivElement>>;
|
28
|
+
interface DialogContentTypeProps extends Omit<DialogContentImplProps, "trapFocus" | "disableOutsidePointerEvents"> {
|
29
|
+
}
|
30
|
+
type DismissableLayerProps = React__default.ComponentPropsWithoutRef<typeof DismissableLayer>;
|
31
|
+
type FocusScopeProps = React__default.ComponentPropsWithoutRef<typeof FocusScope>;
|
32
|
+
interface DialogContentImplProps extends Omit<DismissableLayerProps, "onDismiss"> {
|
33
|
+
/**
|
34
|
+
* When `true`, focus cannot escape the `Content` via keyboard,
|
35
|
+
* pointer, or a programmatic focus.
|
36
|
+
* @defaultValue false
|
37
|
+
*/
|
38
|
+
trapFocus?: FocusScopeProps["trapped"];
|
39
|
+
/**
|
40
|
+
* Event handler called when auto-focusing on open.
|
41
|
+
* Can be prevented.
|
42
|
+
*/
|
43
|
+
onOpenAutoFocus?: FocusScopeProps["onMountAutoFocus"];
|
44
|
+
/**
|
45
|
+
* Event handler called when auto-focusing on close.
|
46
|
+
* Can be prevented.
|
47
|
+
*/
|
48
|
+
onCloseAutoFocus?: FocusScopeProps["onUnmountAutoFocus"];
|
49
|
+
}
|
50
|
+
declare const WarningProvider: {
|
51
|
+
(props: {
|
52
|
+
contentName: string;
|
53
|
+
titleName: string;
|
54
|
+
docsSlug: string;
|
55
|
+
} & {
|
56
|
+
children: React__default.ReactNode;
|
57
|
+
}): react_jsx_runtime.JSX.Element;
|
58
|
+
displayName: string;
|
59
|
+
};
|
60
|
+
|
61
|
+
declare const createDialogScope: CreateScope;
|
62
|
+
interface DialogProps {
|
63
|
+
children?: React.ReactNode;
|
64
|
+
open?: boolean;
|
65
|
+
defaultOpen?: boolean;
|
66
|
+
onOpenChange?(open: boolean): void;
|
67
|
+
modal?: boolean;
|
68
|
+
}
|
69
|
+
declare const Dialog: React.FC<DialogProps>;
|
70
|
+
declare const Root: React.FC<DialogProps>;
|
71
|
+
|
72
|
+
type PrimitiveButtonProps = React__default.ComponentPropsWithoutRef<typeof Primitive.button>;
|
73
|
+
interface DialogTriggerProps extends PrimitiveButtonProps {
|
74
|
+
}
|
75
|
+
declare const DialogTrigger: React__default.ForwardRefExoticComponent<DialogTriggerProps & React__default.RefAttributes<HTMLButtonElement>>;
|
76
|
+
|
77
|
+
type PortalProps = React__default.ComponentPropsWithoutRef<typeof Portal>;
|
78
|
+
interface DialogPortalProps {
|
79
|
+
children?: React__default.ReactNode;
|
80
|
+
/**
|
81
|
+
* Specify a container element to portal the content into.
|
82
|
+
*/
|
83
|
+
container?: PortalProps["container"];
|
84
|
+
/**
|
85
|
+
* Used to force mounting when more control is needed. Useful when
|
86
|
+
* controlling animation with React animation libraries.
|
87
|
+
*/
|
88
|
+
forceMount?: true;
|
89
|
+
}
|
90
|
+
declare const DialogPortal: React__default.FC<DialogPortalProps>;
|
91
|
+
|
92
|
+
interface DialogOverlayProps extends DialogOverlayImplProps {
|
93
|
+
/**
|
94
|
+
* Used to force mounting when more control is needed. Useful when
|
95
|
+
* controlling animation with React animation libraries.
|
96
|
+
*/
|
97
|
+
forceMount?: true;
|
98
|
+
}
|
99
|
+
declare const DialogOverlay: React__default.ForwardRefExoticComponent<DialogOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
|
100
|
+
type PrimitiveDivProps = React__default.ComponentPropsWithoutRef<typeof Primitive.div>;
|
101
|
+
interface DialogOverlayImplProps extends PrimitiveDivProps {
|
102
|
+
}
|
103
|
+
|
104
|
+
type PrimitiveHeading2Props = React__default.ComponentPropsWithoutRef<typeof Primitive.h2>;
|
105
|
+
interface DialogTitleProps extends PrimitiveHeading2Props {
|
106
|
+
}
|
107
|
+
declare const DialogTitle: React__default.ForwardRefExoticComponent<DialogTitleProps & React__default.RefAttributes<HTMLHeadingElement>>;
|
108
|
+
|
109
|
+
type PrimitiveParagraphProps = React__default.ComponentPropsWithoutRef<typeof Primitive.p>;
|
110
|
+
interface DialogDescriptionProps extends PrimitiveParagraphProps {
|
111
|
+
}
|
112
|
+
declare const DialogDescription: React__default.ForwardRefExoticComponent<DialogDescriptionProps & React__default.RefAttributes<HTMLParagraphElement>>;
|
113
|
+
|
114
|
+
interface DialogCloseProps extends PrimitiveButtonProps {
|
115
|
+
}
|
116
|
+
declare const DialogClose: React__default.ForwardRefExoticComponent<DialogCloseProps & React__default.RefAttributes<HTMLButtonElement>>;
|
117
|
+
|
118
|
+
export { Dialog, DialogClose, type DialogCloseProps, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogOverlay, type DialogOverlayProps, DialogPortal, type DialogPortalProps, type DialogProps, DialogTitle, type DialogTitleProps, DialogTrigger, type DialogTriggerProps, Root, WarningProvider, createDialogScope };
|
package/dist/index.js
ADDED
@@ -0,0 +1,416 @@
|
|
1
|
+
"use strict";
|
2
|
+
"use client";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// packages/react/dialog/src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
Dialog: () => Dialog,
|
35
|
+
DialogClose: () => DialogClose,
|
36
|
+
DialogContent: () => DialogContent,
|
37
|
+
DialogDescription: () => DialogDescription,
|
38
|
+
DialogOverlay: () => DialogOverlay,
|
39
|
+
DialogPortal: () => DialogPortal,
|
40
|
+
DialogTitle: () => DialogTitle,
|
41
|
+
DialogTrigger: () => DialogTrigger,
|
42
|
+
Root: () => Root,
|
43
|
+
WarningProvider: () => WarningProvider,
|
44
|
+
createDialogScope: () => createDialogScope
|
45
|
+
});
|
46
|
+
module.exports = __toCommonJS(src_exports);
|
47
|
+
|
48
|
+
// packages/react/dialog/src/Dialog.tsx
|
49
|
+
var React = __toESM(require("react"));
|
50
|
+
var import_react_context = require("@huin-core/react-context");
|
51
|
+
var import_react_id = require("@huin-core/react-id");
|
52
|
+
var import_react_use_controllable_state = require("@huin-core/react-use-controllable-state");
|
53
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
54
|
+
var DIALOG_NAME = "Dialog";
|
55
|
+
var [createDialogContext, createDialogScope] = (0, import_react_context.createContextScope)(DIALOG_NAME);
|
56
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
57
|
+
var Dialog = (props) => {
|
58
|
+
const {
|
59
|
+
__scopeDialog,
|
60
|
+
children,
|
61
|
+
open: openProp,
|
62
|
+
defaultOpen,
|
63
|
+
onOpenChange,
|
64
|
+
modal = true
|
65
|
+
} = props;
|
66
|
+
const triggerRef = React.useRef(null);
|
67
|
+
const contentRef = React.useRef(null);
|
68
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
69
|
+
prop: openProp,
|
70
|
+
defaultProp: defaultOpen,
|
71
|
+
onChange: onOpenChange
|
72
|
+
});
|
73
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
74
|
+
DialogProvider,
|
75
|
+
{
|
76
|
+
scope: __scopeDialog,
|
77
|
+
triggerRef,
|
78
|
+
contentRef,
|
79
|
+
contentId: (0, import_react_id.useId)(),
|
80
|
+
titleId: (0, import_react_id.useId)(),
|
81
|
+
descriptionId: (0, import_react_id.useId)(),
|
82
|
+
open,
|
83
|
+
onOpenChange: setOpen,
|
84
|
+
onOpenToggle: React.useCallback(
|
85
|
+
() => setOpen((prevOpen) => !prevOpen),
|
86
|
+
[setOpen]
|
87
|
+
),
|
88
|
+
modal,
|
89
|
+
children
|
90
|
+
}
|
91
|
+
);
|
92
|
+
};
|
93
|
+
Dialog.displayName = DIALOG_NAME;
|
94
|
+
function getState(open) {
|
95
|
+
return open ? "open" : "closed";
|
96
|
+
}
|
97
|
+
var Root = Dialog;
|
98
|
+
|
99
|
+
// packages/react/dialog/src/DialogTrigger.tsx
|
100
|
+
var import_react = __toESM(require("react"));
|
101
|
+
var import_react_primitive = require("@huin-core/react-primitive");
|
102
|
+
var import_react_compose_refs = require("@huin-core/react-compose-refs");
|
103
|
+
var import_primitive = require("@huin-core/primitive");
|
104
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
105
|
+
var TRIGGER_NAME = "DialogTrigger";
|
106
|
+
var DialogTrigger = import_react.default.forwardRef((props, forwardedRef) => {
|
107
|
+
const { __scopeDialog, ...triggerProps } = props;
|
108
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
109
|
+
const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
111
|
+
import_react_primitive.Primitive.button,
|
112
|
+
{
|
113
|
+
type: "button",
|
114
|
+
"aria-haspopup": "dialog",
|
115
|
+
"aria-expanded": context.open,
|
116
|
+
"aria-controls": context.contentId,
|
117
|
+
"data-state": getState(context.open),
|
118
|
+
...triggerProps,
|
119
|
+
ref: composedTriggerRef,
|
120
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
|
121
|
+
}
|
122
|
+
);
|
123
|
+
});
|
124
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
125
|
+
|
126
|
+
// packages/react/dialog/src/DialogPortal.tsx
|
127
|
+
var import_react2 = __toESM(require("react"));
|
128
|
+
var import_react_context2 = require("@huin-core/react-context");
|
129
|
+
var import_react_portal = require("@huin-core/react-portal");
|
130
|
+
var import_react_presence = require("@huin-core/react-presence");
|
131
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
132
|
+
var PORTAL_NAME = "DialogPortal";
|
133
|
+
var [createDialogContext2] = (0, import_react_context2.createContextScope)(DIALOG_NAME);
|
134
|
+
var [PortalProvider, usePortalContext] = createDialogContext2(PORTAL_NAME, {
|
135
|
+
forceMount: void 0
|
136
|
+
});
|
137
|
+
var DialogPortal = (props) => {
|
138
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
139
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
140
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: import_react2.default.Children.map(children, (child) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_portal.Portal, { asChild: true, container, children: child }) })) });
|
141
|
+
};
|
142
|
+
DialogPortal.displayName = PORTAL_NAME;
|
143
|
+
|
144
|
+
// packages/react/dialog/src/DialogOverlay.tsx
|
145
|
+
var import_react3 = __toESM(require("react"));
|
146
|
+
var import_react_primitive2 = require("@huin-core/react-primitive");
|
147
|
+
var import_react_remove_scroll = require("react-remove-scroll");
|
148
|
+
var import_react_presence2 = require("@huin-core/react-presence");
|
149
|
+
var import_react_slot = require("@huin-core/react-slot");
|
150
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
151
|
+
var OVERLAY_NAME = "DialogOverlay";
|
152
|
+
var DialogOverlay = import_react3.default.forwardRef((props, forwardedRef) => {
|
153
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
154
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
155
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
156
|
+
return context.modal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_presence2.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
157
|
+
});
|
158
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
159
|
+
var DialogOverlayImpl = import_react3.default.forwardRef((props, forwardedRef) => {
|
160
|
+
const { __scopeDialog, ...overlayProps } = props;
|
161
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
162
|
+
return (
|
163
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
164
|
+
// ie. when `Overlay` and `Content` are siblings
|
165
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_remove_scroll.RemoveScroll, { as: import_react_slot.Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
166
|
+
import_react_primitive2.Primitive.div,
|
167
|
+
{
|
168
|
+
"data-state": getState(context.open),
|
169
|
+
...overlayProps,
|
170
|
+
ref: forwardedRef,
|
171
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
172
|
+
}
|
173
|
+
) })
|
174
|
+
);
|
175
|
+
});
|
176
|
+
|
177
|
+
// packages/react/dialog/src/DialogContent.tsx
|
178
|
+
var import_react5 = __toESM(require("react"));
|
179
|
+
var import_react_presence3 = require("@huin-core/react-presence");
|
180
|
+
var import_react_compose_refs2 = require("@huin-core/react-compose-refs");
|
181
|
+
var import_aria_hidden = require("aria-hidden");
|
182
|
+
var import_primitive2 = require("@huin-core/primitive");
|
183
|
+
var import_react_dismissable_layer = require("@huin-core/react-dismissable-layer");
|
184
|
+
var import_react_focus_scope = require("@huin-core/react-focus-scope");
|
185
|
+
var import_react_focus_guards = require("@huin-core/react-focus-guards");
|
186
|
+
var import_react_context3 = require("@huin-core/react-context");
|
187
|
+
|
188
|
+
// packages/react/dialog/src/DialogTitle.tsx
|
189
|
+
var import_react4 = __toESM(require("react"));
|
190
|
+
var import_react_primitive3 = require("@huin-core/react-primitive");
|
191
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
192
|
+
var TITLE_NAME = "DialogTitle";
|
193
|
+
var DialogTitle = import_react4.default.forwardRef(
|
194
|
+
(props, forwardedRef) => {
|
195
|
+
const { __scopeDialog, ...titleProps } = props;
|
196
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_primitive3.Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
198
|
+
}
|
199
|
+
);
|
200
|
+
DialogTitle.displayName = TITLE_NAME;
|
201
|
+
|
202
|
+
// packages/react/dialog/src/DialogContent.tsx
|
203
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
204
|
+
var CONTENT_NAME = "DialogContent";
|
205
|
+
var DialogContent = import_react5.default.forwardRef((props, forwardedRef) => {
|
206
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
207
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
208
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_presence3.Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
210
|
+
});
|
211
|
+
DialogContent.displayName = CONTENT_NAME;
|
212
|
+
var DialogContentModal = import_react5.default.forwardRef((props, forwardedRef) => {
|
213
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
214
|
+
const contentRef = import_react5.default.useRef(null);
|
215
|
+
const composedRefs = (0, import_react_compose_refs2.useComposedRefs)(
|
216
|
+
forwardedRef,
|
217
|
+
context.contentRef,
|
218
|
+
contentRef
|
219
|
+
);
|
220
|
+
import_react5.default.useEffect(() => {
|
221
|
+
const content = contentRef.current;
|
222
|
+
if (content) return (0, import_aria_hidden.hideOthers)(content);
|
223
|
+
}, []);
|
224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
225
|
+
DialogContentImpl,
|
226
|
+
{
|
227
|
+
...props,
|
228
|
+
ref: composedRefs,
|
229
|
+
trapFocus: context.open,
|
230
|
+
disableOutsidePointerEvents: true,
|
231
|
+
onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(
|
232
|
+
props.onCloseAutoFocus,
|
233
|
+
(event) => {
|
234
|
+
event.preventDefault();
|
235
|
+
context.triggerRef.current?.focus();
|
236
|
+
}
|
237
|
+
),
|
238
|
+
onPointerDownOutside: (0, import_primitive2.composeEventHandlers)(
|
239
|
+
props.onPointerDownOutside,
|
240
|
+
(event) => {
|
241
|
+
const originalEvent = event.detail.originalEvent;
|
242
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
243
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
244
|
+
if (isRightClick) event.preventDefault();
|
245
|
+
}
|
246
|
+
),
|
247
|
+
onFocusOutside: (0, import_primitive2.composeEventHandlers)(
|
248
|
+
props.onFocusOutside,
|
249
|
+
(event) => event.preventDefault()
|
250
|
+
)
|
251
|
+
}
|
252
|
+
);
|
253
|
+
});
|
254
|
+
var DialogContentNonModal = import_react5.default.forwardRef((props, forwardedRef) => {
|
255
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
256
|
+
const hasInteractedOutsideRef = import_react5.default.useRef(false);
|
257
|
+
const hasPointerDownOutsideRef = import_react5.default.useRef(false);
|
258
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
259
|
+
DialogContentImpl,
|
260
|
+
{
|
261
|
+
...props,
|
262
|
+
ref: forwardedRef,
|
263
|
+
trapFocus: false,
|
264
|
+
disableOutsidePointerEvents: false,
|
265
|
+
onCloseAutoFocus: (event) => {
|
266
|
+
props.onCloseAutoFocus?.(event);
|
267
|
+
if (!event.defaultPrevented) {
|
268
|
+
if (!hasInteractedOutsideRef.current)
|
269
|
+
context.triggerRef.current?.focus();
|
270
|
+
event.preventDefault();
|
271
|
+
}
|
272
|
+
hasInteractedOutsideRef.current = false;
|
273
|
+
hasPointerDownOutsideRef.current = false;
|
274
|
+
},
|
275
|
+
onInteractOutside: (event) => {
|
276
|
+
props.onInteractOutside?.(event);
|
277
|
+
if (!event.defaultPrevented) {
|
278
|
+
hasInteractedOutsideRef.current = true;
|
279
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
280
|
+
hasPointerDownOutsideRef.current = true;
|
281
|
+
}
|
282
|
+
}
|
283
|
+
const target = event.target;
|
284
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
285
|
+
if (targetIsTrigger) event.preventDefault();
|
286
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
287
|
+
event.preventDefault();
|
288
|
+
}
|
289
|
+
}
|
290
|
+
}
|
291
|
+
);
|
292
|
+
});
|
293
|
+
var DialogContentImpl = import_react5.default.forwardRef((props, forwardedRef) => {
|
294
|
+
const {
|
295
|
+
__scopeDialog,
|
296
|
+
trapFocus,
|
297
|
+
onOpenAutoFocus,
|
298
|
+
onCloseAutoFocus,
|
299
|
+
...contentProps
|
300
|
+
} = props;
|
301
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
302
|
+
const contentRef = import_react5.default.useRef(null);
|
303
|
+
const composedRefs = (0, import_react_compose_refs2.useComposedRefs)(forwardedRef, contentRef);
|
304
|
+
(0, import_react_focus_guards.useFocusGuards)();
|
305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
306
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
307
|
+
import_react_focus_scope.FocusScope,
|
308
|
+
{
|
309
|
+
asChild: true,
|
310
|
+
loop: true,
|
311
|
+
trapped: trapFocus,
|
312
|
+
onMountAutoFocus: onOpenAutoFocus,
|
313
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
314
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
315
|
+
import_react_dismissable_layer.DismissableLayer,
|
316
|
+
{
|
317
|
+
role: "dialog",
|
318
|
+
id: context.contentId,
|
319
|
+
"aria-describedby": context.descriptionId,
|
320
|
+
"aria-labelledby": context.titleId,
|
321
|
+
"data-state": getState(context.open),
|
322
|
+
...contentProps,
|
323
|
+
ref: composedRefs,
|
324
|
+
onDismiss: () => context.onOpenChange(false)
|
325
|
+
}
|
326
|
+
)
|
327
|
+
}
|
328
|
+
),
|
329
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
|
330
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(TitleWarning, { titleId: context.titleId }),
|
331
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
332
|
+
DescriptionWarning,
|
333
|
+
{
|
334
|
+
contentRef,
|
335
|
+
descriptionId: context.descriptionId
|
336
|
+
}
|
337
|
+
)
|
338
|
+
] })
|
339
|
+
] });
|
340
|
+
});
|
341
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
342
|
+
var [WarningProvider, useWarningContext] = (0, import_react_context3.createContext)(TITLE_WARNING_NAME, {
|
343
|
+
contentName: CONTENT_NAME,
|
344
|
+
titleName: TITLE_NAME,
|
345
|
+
docsSlug: "dialog"
|
346
|
+
});
|
347
|
+
var TitleWarning = ({ titleId }) => {
|
348
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
349
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
350
|
+
|
351
|
+
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
352
|
+
|
353
|
+
For more information, see https://huinhub.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
354
|
+
import_react5.default.useEffect(() => {
|
355
|
+
if (titleId) {
|
356
|
+
const hasTitle = document.getElementById(titleId);
|
357
|
+
if (!hasTitle) console.error(MESSAGE);
|
358
|
+
}
|
359
|
+
}, [MESSAGE, titleId]);
|
360
|
+
return null;
|
361
|
+
};
|
362
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
363
|
+
var DescriptionWarning = ({
|
364
|
+
contentRef,
|
365
|
+
descriptionId
|
366
|
+
}) => {
|
367
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
368
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
369
|
+
import_react5.default.useEffect(() => {
|
370
|
+
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
371
|
+
if (descriptionId && describedById) {
|
372
|
+
const hasDescription = document.getElementById(descriptionId);
|
373
|
+
if (!hasDescription) console.warn(MESSAGE);
|
374
|
+
}
|
375
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
376
|
+
return null;
|
377
|
+
};
|
378
|
+
|
379
|
+
// packages/react/dialog/src/DialogDescription.tsx
|
380
|
+
var import_react6 = __toESM(require("react"));
|
381
|
+
var import_react_primitive4 = require("@huin-core/react-primitive");
|
382
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
383
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
384
|
+
var DialogDescription = import_react6.default.forwardRef((props, forwardedRef) => {
|
385
|
+
const { __scopeDialog, className, ...descriptionProps } = props;
|
386
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
387
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react_primitive4.Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
388
|
+
});
|
389
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
390
|
+
|
391
|
+
// packages/react/dialog/src/DialogClose.tsx
|
392
|
+
var import_react7 = __toESM(require("react"));
|
393
|
+
var import_react_primitive5 = require("@huin-core/react-primitive");
|
394
|
+
var import_primitive3 = require("@huin-core/primitive");
|
395
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
396
|
+
var CLOSE_NAME = "DialogClose";
|
397
|
+
var DialogClose = import_react7.default.forwardRef(
|
398
|
+
(props, forwardedRef) => {
|
399
|
+
const { __scopeDialog, ...closeProps } = props;
|
400
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
401
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
402
|
+
import_react_primitive5.Primitive.button,
|
403
|
+
{
|
404
|
+
type: "button",
|
405
|
+
...closeProps,
|
406
|
+
ref: forwardedRef,
|
407
|
+
onClick: (0, import_primitive3.composeEventHandlers)(
|
408
|
+
props.onClick,
|
409
|
+
() => context.onOpenChange(false)
|
410
|
+
)
|
411
|
+
}
|
412
|
+
);
|
413
|
+
}
|
414
|
+
);
|
415
|
+
DialogClose.displayName = CLOSE_NAME;
|
416
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/index.ts", "../src/Dialog.tsx", "../src/DialogTrigger.tsx", "../src/DialogPortal.tsx", "../src/DialogOverlay.tsx", "../src/DialogContent.tsx", "../src/DialogTitle.tsx", "../src/DialogDescription.tsx", "../src/DialogClose.tsx"],
|
4
|
+
"sourcesContent": ["\"use client\";\nexport { createDialogScope, Dialog, Root } from \"./Dialog\";\nexport { DialogTrigger } from \"./DialogTrigger\";\nexport { DialogPortal } from \"./DialogPortal\";\nexport { DialogOverlay } from \"./DialogOverlay\";\nexport { DialogContent, WarningProvider } from \"./DialogContent\";\nexport { DialogTitle } from \"./DialogTitle\";\nexport { DialogDescription } from \"./DialogDescription\";\nexport { DialogClose } from \"./DialogClose\";\n\nexport type { DialogProps } from \"./Dialog\";\nexport type { DialogTriggerProps } from \"./DialogTrigger\";\nexport type { DialogPortalProps } from \"./DialogPortal\";\nexport type { DialogOverlayProps } from \"./DialogOverlay\";\nexport type { DialogContentProps } from \"./DialogContent\";\nexport type { DialogTitleProps } from \"./DialogTitle\";\nexport type { DialogDescriptionProps } from \"./DialogDescription\";\nexport type { DialogCloseProps } from \"./DialogClose\";\n", "import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { useId } from \"@huin-core/react-id\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport type { Scope } from \"@huin-core/react-context\";\nimport { DialogContentElement } from \"./DialogContent\";\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nexport const DIALOG_NAME = \"Dialog\";\n\nexport type ScopedProps<P> = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] =\n createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<DialogContentElement>;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nexport const [DialogProvider, useDialogContext] =\n createDialogContext<DialogContextValue>(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const contentRef = React.useRef<DialogContentElement>(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId()}\n titleId={useId()}\n descriptionId={useId()}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(\n () => setOpen((prevOpen) => !prevOpen),\n [setOpen]\n )}\n modal={modal}\n >\n {children}\n </DialogProvider>\n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport function getState(open: boolean) {\n return open ? \"open\" : \"closed\";\n}\n\nconst Root = Dialog;\n\nexport { createDialogScope, Dialog, Root };\nexport type { DialogProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"DialogTrigger\";\n\ntype DialogTriggerElement = React.ElementRef<typeof Primitive.button>;\nexport type PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef<\n DialogTriggerElement,\n DialogTriggerProps\n>((props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n <Primitive.button\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n});\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\nexport { DialogTrigger };\nexport type { DialogTriggerProps };\n", "import React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { DIALOG_NAME, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { Portal as PortalPrimitive } from \"@huin-core/react-portal\";\nimport { Presence } from \"@huin-core/react-presence\";\n\nconst PORTAL_NAME = \"DialogPortal\";\n\ntype PortalContextValue = { forceMount?: true };\nconst [createDialogContext] =\n createContextScope(DIALOG_NAME);\n\nexport const [PortalProvider, usePortalContext] =\n createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n });\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface DialogPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps[\"container\"];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (\n props: ScopedProps<DialogPortalProps>\n) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n {React.Children.map(children, (child) => (\n <Presence present={forceMount || context.open}>\n <PortalPrimitive asChild container={container}>\n {child}\n </PortalPrimitive>\n </Presence>\n ))}\n </PortalProvider>\n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\nexport { DialogPortal };\nexport type { DialogPortalProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { usePortalContext } from \"./DialogPortal\";\nimport { Slot } from \"@huin-core/react-slot\";\n\nconst OVERLAY_NAME = \"DialogOverlay\";\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef<\n DialogOverlayElement,\n DialogOverlayProps\n>((props: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n <Presence present={forceMount || context.open}>\n <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n </Presence>\n ) : null;\n});\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef<\n DialogOverlayImplElement,\n DialogOverlayImplProps\n>((props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>\n <Primitive.div\n data-state={getState(context.open)}\n {...overlayProps}\n ref={forwardedRef}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n style={{ pointerEvents: \"auto\", ...overlayProps.style }}\n />\n </RemoveScroll>\n );\n});\n\nexport { DialogOverlay };\nexport type { DialogOverlayProps };\n", "import React from \"react\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { usePortalContext } from \"./DialogPortal\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { hideOthers } from \"aria-hidden\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { DismissableLayer } from \"@huin-core/react-dismissable-layer\";\nimport { FocusScope } from \"@huin-core/react-focus-scope\";\nimport { useFocusGuards } from \"@huin-core/react-focus-guards\";\nimport { createContext } from \"@huin-core/react-context\";\nimport { TITLE_NAME } from \"./DialogTitle\";\n\nconst CONTENT_NAME = \"DialogContent\";\n\nexport type DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\nconst DialogContent = React.forwardRef<\n DialogContentElement,\n DialogContentProps\n>((props: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n <Presence present={forceMount || context.open}>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </Presence>\n );\n});\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit<\n DialogContentImplProps,\n \"trapFocus\" | \"disableOutsidePointerEvents\"\n > {}\n\nconst DialogContentModal = React.forwardRef<\n DialogContentTypeElement,\n DialogContentTypeProps\n>((props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(\n forwardedRef,\n context.contentRef,\n contentRef\n );\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(\n props.onCloseAutoFocus,\n (event) => {\n event.preventDefault();\n context.triggerRef.current?.focus();\n }\n )}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<\n DialogContentTypeElement,\n DialogContentTypeProps\n>((props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current)\n context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === \"pointerdown\") {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (\n event.detail.originalEvent.type === \"focusin\" &&\n hasPointerDownOutsideRef.current\n ) {\n event.preventDefault();\n }\n }}\n />\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef<typeof DismissableLayer>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<\n typeof DismissableLayer\n>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\ninterface DialogContentImplProps\n extends Omit<DismissableLayerProps, \"onDismiss\"> {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps[\"trapped\"];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps[\"onMountAutoFocus\"];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps[\"onUnmountAutoFocus\"];\n}\n\nconst DialogContentImpl = React.forwardRef<\n DialogContentImplElement,\n DialogContentImplProps\n>((props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n ...contentProps\n } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (beacuse of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n <FocusScope\n asChild\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <DismissableLayer\n role=\"dialog\"\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n />\n </FocusScope>\n {process.env.NODE_ENV !== \"production\" && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning\n contentRef={contentRef}\n descriptionId={context.descriptionId}\n />\n </>\n )}\n </>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_WARNING_NAME = \"DialogTitleWarning\";\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: \"dialog\",\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://huinhub.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n React.useEffect(() => {\n if (titleId) {\n const hasTitle = document.getElementById(titleId);\n if (!hasTitle) console.error(MESSAGE);\n }\n }, [MESSAGE, titleId]);\n\n return null;\n};\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_WARNING_NAME = \"DialogDescriptionWarning\";\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<DialogContentElement>;\n descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({\n contentRef,\n descriptionId,\n}) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n React.useEffect(() => {\n const describedById = contentRef.current?.getAttribute(\"aria-describedby\");\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId);\n if (!hasDescription) console.warn(MESSAGE);\n }\n }, [MESSAGE, contentRef, descriptionId]);\n\n return null;\n};\n\nexport { DialogContent, WarningProvider };\nexport type { DialogContentProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\n\nexport const TITLE_NAME = \"DialogTitle\";\n\ntype DialogTitleElement = React.ElementRef<typeof Primitive.h2>;\ntype PrimitiveHeading2Props = React.ComponentPropsWithoutRef<\n typeof Primitive.h2\n>;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props;\n const context = useDialogContext(TITLE_NAME, __scopeDialog);\n return (\n <Primitive.h2 id={context.titleId} {...titleProps} ref={forwardedRef} />\n );\n }\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\nexport { DialogTitle };\nexport type { DialogTitleProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\n\nconst DESCRIPTION_NAME = \"DialogDescription\";\n\ntype DialogDescriptionElement = React.ElementRef<typeof Primitive.p>;\ntype PrimitiveParagraphProps = React.ComponentPropsWithoutRef<\n typeof Primitive.p\n>;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef<\n DialogDescriptionElement,\n DialogDescriptionProps\n>((props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, className, ...descriptionProps } = props;\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n return <Primitive.p id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;\n\n});\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\nexport { DialogDescription };\nexport type { DialogDescriptionProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { PrimitiveButtonProps } from \"./DialogTrigger\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst CLOSE_NAME = \"DialogClose\";\n\ntype DialogCloseElement = React.ElementRef<typeof Primitive.button>;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props;\n const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n return (\n <Primitive.button\n type=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () =>\n context.onOpenChange(false)\n )}\n />\n );\n }\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\nexport { DialogClose };\nexport type { DialogCloseProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["import_jsx_runtime", "React", "import_react", "import_react_context", "import_jsx_runtime", "createDialogContext", "React", "PortalPrimitive", "import_react", "import_react_primitive", "import_react_presence", "import_jsx_runtime", "React", "import_react", "import_react_presence", "import_react_compose_refs", "import_primitive", "import_react_context", "import_react", "import_react_primitive", "import_jsx_runtime", "React", "import_jsx_runtime", "React", "import_react", "import_react_primitive", "import_jsx_runtime", "React", "import_react", "import_react_primitive", "import_primitive", "import_jsx_runtime", "React"]
|
7
|
+
}
|
package/dist/index.mjs
ADDED
@@ -0,0 +1,384 @@
|
|
1
|
+
"use client";
|
2
|
+
|
3
|
+
// packages/react/dialog/src/Dialog.tsx
|
4
|
+
import * as React from "react";
|
5
|
+
import { createContextScope } from "@huin-core/react-context";
|
6
|
+
import { useId } from "@huin-core/react-id";
|
7
|
+
import { useControllableState } from "@huin-core/react-use-controllable-state";
|
8
|
+
import { jsx } from "react/jsx-runtime";
|
9
|
+
var DIALOG_NAME = "Dialog";
|
10
|
+
var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
|
11
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
12
|
+
var Dialog = (props) => {
|
13
|
+
const {
|
14
|
+
__scopeDialog,
|
15
|
+
children,
|
16
|
+
open: openProp,
|
17
|
+
defaultOpen,
|
18
|
+
onOpenChange,
|
19
|
+
modal = true
|
20
|
+
} = props;
|
21
|
+
const triggerRef = React.useRef(null);
|
22
|
+
const contentRef = React.useRef(null);
|
23
|
+
const [open = false, setOpen] = useControllableState({
|
24
|
+
prop: openProp,
|
25
|
+
defaultProp: defaultOpen,
|
26
|
+
onChange: onOpenChange
|
27
|
+
});
|
28
|
+
return /* @__PURE__ */ jsx(
|
29
|
+
DialogProvider,
|
30
|
+
{
|
31
|
+
scope: __scopeDialog,
|
32
|
+
triggerRef,
|
33
|
+
contentRef,
|
34
|
+
contentId: useId(),
|
35
|
+
titleId: useId(),
|
36
|
+
descriptionId: useId(),
|
37
|
+
open,
|
38
|
+
onOpenChange: setOpen,
|
39
|
+
onOpenToggle: React.useCallback(
|
40
|
+
() => setOpen((prevOpen) => !prevOpen),
|
41
|
+
[setOpen]
|
42
|
+
),
|
43
|
+
modal,
|
44
|
+
children
|
45
|
+
}
|
46
|
+
);
|
47
|
+
};
|
48
|
+
Dialog.displayName = DIALOG_NAME;
|
49
|
+
function getState(open) {
|
50
|
+
return open ? "open" : "closed";
|
51
|
+
}
|
52
|
+
var Root = Dialog;
|
53
|
+
|
54
|
+
// packages/react/dialog/src/DialogTrigger.tsx
|
55
|
+
import React2 from "react";
|
56
|
+
import { Primitive } from "@huin-core/react-primitive";
|
57
|
+
import { useComposedRefs } from "@huin-core/react-compose-refs";
|
58
|
+
import { composeEventHandlers } from "@huin-core/primitive";
|
59
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
60
|
+
var TRIGGER_NAME = "DialogTrigger";
|
61
|
+
var DialogTrigger = React2.forwardRef((props, forwardedRef) => {
|
62
|
+
const { __scopeDialog, ...triggerProps } = props;
|
63
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
64
|
+
const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
|
65
|
+
return /* @__PURE__ */ jsx2(
|
66
|
+
Primitive.button,
|
67
|
+
{
|
68
|
+
type: "button",
|
69
|
+
"aria-haspopup": "dialog",
|
70
|
+
"aria-expanded": context.open,
|
71
|
+
"aria-controls": context.contentId,
|
72
|
+
"data-state": getState(context.open),
|
73
|
+
...triggerProps,
|
74
|
+
ref: composedTriggerRef,
|
75
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
76
|
+
}
|
77
|
+
);
|
78
|
+
});
|
79
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
80
|
+
|
81
|
+
// packages/react/dialog/src/DialogPortal.tsx
|
82
|
+
import React3 from "react";
|
83
|
+
import { createContextScope as createContextScope2 } from "@huin-core/react-context";
|
84
|
+
import { Portal as PortalPrimitive } from "@huin-core/react-portal";
|
85
|
+
import { Presence } from "@huin-core/react-presence";
|
86
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
87
|
+
var PORTAL_NAME = "DialogPortal";
|
88
|
+
var [createDialogContext2] = createContextScope2(DIALOG_NAME);
|
89
|
+
var [PortalProvider, usePortalContext] = createDialogContext2(PORTAL_NAME, {
|
90
|
+
forceMount: void 0
|
91
|
+
});
|
92
|
+
var DialogPortal = (props) => {
|
93
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
94
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
95
|
+
return /* @__PURE__ */ jsx3(PortalProvider, { scope: __scopeDialog, forceMount, children: React3.Children.map(children, (child) => /* @__PURE__ */ jsx3(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx3(PortalPrimitive, { asChild: true, container, children: child }) })) });
|
96
|
+
};
|
97
|
+
DialogPortal.displayName = PORTAL_NAME;
|
98
|
+
|
99
|
+
// packages/react/dialog/src/DialogOverlay.tsx
|
100
|
+
import React4 from "react";
|
101
|
+
import { Primitive as Primitive2 } from "@huin-core/react-primitive";
|
102
|
+
import { RemoveScroll } from "react-remove-scroll";
|
103
|
+
import { Presence as Presence2 } from "@huin-core/react-presence";
|
104
|
+
import { Slot } from "@huin-core/react-slot";
|
105
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
106
|
+
var OVERLAY_NAME = "DialogOverlay";
|
107
|
+
var DialogOverlay = React4.forwardRef((props, forwardedRef) => {
|
108
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
109
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
110
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
111
|
+
return context.modal ? /* @__PURE__ */ jsx4(Presence2, { present: forceMount || context.open, children: /* @__PURE__ */ jsx4(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
112
|
+
});
|
113
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
114
|
+
var DialogOverlayImpl = React4.forwardRef((props, forwardedRef) => {
|
115
|
+
const { __scopeDialog, ...overlayProps } = props;
|
116
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
117
|
+
return (
|
118
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
119
|
+
// ie. when `Overlay` and `Content` are siblings
|
120
|
+
/* @__PURE__ */ jsx4(RemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx4(
|
121
|
+
Primitive2.div,
|
122
|
+
{
|
123
|
+
"data-state": getState(context.open),
|
124
|
+
...overlayProps,
|
125
|
+
ref: forwardedRef,
|
126
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
127
|
+
}
|
128
|
+
) })
|
129
|
+
);
|
130
|
+
});
|
131
|
+
|
132
|
+
// packages/react/dialog/src/DialogContent.tsx
|
133
|
+
import React6 from "react";
|
134
|
+
import { Presence as Presence3 } from "@huin-core/react-presence";
|
135
|
+
import { useComposedRefs as useComposedRefs2 } from "@huin-core/react-compose-refs";
|
136
|
+
import { hideOthers } from "aria-hidden";
|
137
|
+
import { composeEventHandlers as composeEventHandlers2 } from "@huin-core/primitive";
|
138
|
+
import { DismissableLayer } from "@huin-core/react-dismissable-layer";
|
139
|
+
import { FocusScope } from "@huin-core/react-focus-scope";
|
140
|
+
import { useFocusGuards } from "@huin-core/react-focus-guards";
|
141
|
+
import { createContext } from "@huin-core/react-context";
|
142
|
+
|
143
|
+
// packages/react/dialog/src/DialogTitle.tsx
|
144
|
+
import React5 from "react";
|
145
|
+
import { Primitive as Primitive3 } from "@huin-core/react-primitive";
|
146
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
147
|
+
var TITLE_NAME = "DialogTitle";
|
148
|
+
var DialogTitle = React5.forwardRef(
|
149
|
+
(props, forwardedRef) => {
|
150
|
+
const { __scopeDialog, ...titleProps } = props;
|
151
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
152
|
+
return /* @__PURE__ */ jsx5(Primitive3.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
153
|
+
}
|
154
|
+
);
|
155
|
+
DialogTitle.displayName = TITLE_NAME;
|
156
|
+
|
157
|
+
// packages/react/dialog/src/DialogContent.tsx
|
158
|
+
import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
|
159
|
+
var CONTENT_NAME = "DialogContent";
|
160
|
+
var DialogContent = React6.forwardRef((props, forwardedRef) => {
|
161
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
162
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
163
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
164
|
+
return /* @__PURE__ */ jsx6(Presence3, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx6(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx6(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
165
|
+
});
|
166
|
+
DialogContent.displayName = CONTENT_NAME;
|
167
|
+
var DialogContentModal = React6.forwardRef((props, forwardedRef) => {
|
168
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
169
|
+
const contentRef = React6.useRef(null);
|
170
|
+
const composedRefs = useComposedRefs2(
|
171
|
+
forwardedRef,
|
172
|
+
context.contentRef,
|
173
|
+
contentRef
|
174
|
+
);
|
175
|
+
React6.useEffect(() => {
|
176
|
+
const content = contentRef.current;
|
177
|
+
if (content) return hideOthers(content);
|
178
|
+
}, []);
|
179
|
+
return /* @__PURE__ */ jsx6(
|
180
|
+
DialogContentImpl,
|
181
|
+
{
|
182
|
+
...props,
|
183
|
+
ref: composedRefs,
|
184
|
+
trapFocus: context.open,
|
185
|
+
disableOutsidePointerEvents: true,
|
186
|
+
onCloseAutoFocus: composeEventHandlers2(
|
187
|
+
props.onCloseAutoFocus,
|
188
|
+
(event) => {
|
189
|
+
event.preventDefault();
|
190
|
+
context.triggerRef.current?.focus();
|
191
|
+
}
|
192
|
+
),
|
193
|
+
onPointerDownOutside: composeEventHandlers2(
|
194
|
+
props.onPointerDownOutside,
|
195
|
+
(event) => {
|
196
|
+
const originalEvent = event.detail.originalEvent;
|
197
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
198
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
199
|
+
if (isRightClick) event.preventDefault();
|
200
|
+
}
|
201
|
+
),
|
202
|
+
onFocusOutside: composeEventHandlers2(
|
203
|
+
props.onFocusOutside,
|
204
|
+
(event) => event.preventDefault()
|
205
|
+
)
|
206
|
+
}
|
207
|
+
);
|
208
|
+
});
|
209
|
+
var DialogContentNonModal = React6.forwardRef((props, forwardedRef) => {
|
210
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
211
|
+
const hasInteractedOutsideRef = React6.useRef(false);
|
212
|
+
const hasPointerDownOutsideRef = React6.useRef(false);
|
213
|
+
return /* @__PURE__ */ jsx6(
|
214
|
+
DialogContentImpl,
|
215
|
+
{
|
216
|
+
...props,
|
217
|
+
ref: forwardedRef,
|
218
|
+
trapFocus: false,
|
219
|
+
disableOutsidePointerEvents: false,
|
220
|
+
onCloseAutoFocus: (event) => {
|
221
|
+
props.onCloseAutoFocus?.(event);
|
222
|
+
if (!event.defaultPrevented) {
|
223
|
+
if (!hasInteractedOutsideRef.current)
|
224
|
+
context.triggerRef.current?.focus();
|
225
|
+
event.preventDefault();
|
226
|
+
}
|
227
|
+
hasInteractedOutsideRef.current = false;
|
228
|
+
hasPointerDownOutsideRef.current = false;
|
229
|
+
},
|
230
|
+
onInteractOutside: (event) => {
|
231
|
+
props.onInteractOutside?.(event);
|
232
|
+
if (!event.defaultPrevented) {
|
233
|
+
hasInteractedOutsideRef.current = true;
|
234
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
235
|
+
hasPointerDownOutsideRef.current = true;
|
236
|
+
}
|
237
|
+
}
|
238
|
+
const target = event.target;
|
239
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
240
|
+
if (targetIsTrigger) event.preventDefault();
|
241
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
242
|
+
event.preventDefault();
|
243
|
+
}
|
244
|
+
}
|
245
|
+
}
|
246
|
+
);
|
247
|
+
});
|
248
|
+
var DialogContentImpl = React6.forwardRef((props, forwardedRef) => {
|
249
|
+
const {
|
250
|
+
__scopeDialog,
|
251
|
+
trapFocus,
|
252
|
+
onOpenAutoFocus,
|
253
|
+
onCloseAutoFocus,
|
254
|
+
...contentProps
|
255
|
+
} = props;
|
256
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
257
|
+
const contentRef = React6.useRef(null);
|
258
|
+
const composedRefs = useComposedRefs2(forwardedRef, contentRef);
|
259
|
+
useFocusGuards();
|
260
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
261
|
+
/* @__PURE__ */ jsx6(
|
262
|
+
FocusScope,
|
263
|
+
{
|
264
|
+
asChild: true,
|
265
|
+
loop: true,
|
266
|
+
trapped: trapFocus,
|
267
|
+
onMountAutoFocus: onOpenAutoFocus,
|
268
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
269
|
+
children: /* @__PURE__ */ jsx6(
|
270
|
+
DismissableLayer,
|
271
|
+
{
|
272
|
+
role: "dialog",
|
273
|
+
id: context.contentId,
|
274
|
+
"aria-describedby": context.descriptionId,
|
275
|
+
"aria-labelledby": context.titleId,
|
276
|
+
"data-state": getState(context.open),
|
277
|
+
...contentProps,
|
278
|
+
ref: composedRefs,
|
279
|
+
onDismiss: () => context.onOpenChange(false)
|
280
|
+
}
|
281
|
+
)
|
282
|
+
}
|
283
|
+
),
|
284
|
+
/* @__PURE__ */ jsxs(Fragment, { children: [
|
285
|
+
/* @__PURE__ */ jsx6(TitleWarning, { titleId: context.titleId }),
|
286
|
+
/* @__PURE__ */ jsx6(
|
287
|
+
DescriptionWarning,
|
288
|
+
{
|
289
|
+
contentRef,
|
290
|
+
descriptionId: context.descriptionId
|
291
|
+
}
|
292
|
+
)
|
293
|
+
] })
|
294
|
+
] });
|
295
|
+
});
|
296
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
297
|
+
var [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {
|
298
|
+
contentName: CONTENT_NAME,
|
299
|
+
titleName: TITLE_NAME,
|
300
|
+
docsSlug: "dialog"
|
301
|
+
});
|
302
|
+
var TitleWarning = ({ titleId }) => {
|
303
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
304
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
305
|
+
|
306
|
+
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
307
|
+
|
308
|
+
For more information, see https://huinhub.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
309
|
+
React6.useEffect(() => {
|
310
|
+
if (titleId) {
|
311
|
+
const hasTitle = document.getElementById(titleId);
|
312
|
+
if (!hasTitle) console.error(MESSAGE);
|
313
|
+
}
|
314
|
+
}, [MESSAGE, titleId]);
|
315
|
+
return null;
|
316
|
+
};
|
317
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
318
|
+
var DescriptionWarning = ({
|
319
|
+
contentRef,
|
320
|
+
descriptionId
|
321
|
+
}) => {
|
322
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
323
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
324
|
+
React6.useEffect(() => {
|
325
|
+
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
326
|
+
if (descriptionId && describedById) {
|
327
|
+
const hasDescription = document.getElementById(descriptionId);
|
328
|
+
if (!hasDescription) console.warn(MESSAGE);
|
329
|
+
}
|
330
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
331
|
+
return null;
|
332
|
+
};
|
333
|
+
|
334
|
+
// packages/react/dialog/src/DialogDescription.tsx
|
335
|
+
import React7 from "react";
|
336
|
+
import { Primitive as Primitive4 } from "@huin-core/react-primitive";
|
337
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
338
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
339
|
+
var DialogDescription = React7.forwardRef((props, forwardedRef) => {
|
340
|
+
const { __scopeDialog, className, ...descriptionProps } = props;
|
341
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
342
|
+
return /* @__PURE__ */ jsx7(Primitive4.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
343
|
+
});
|
344
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
345
|
+
|
346
|
+
// packages/react/dialog/src/DialogClose.tsx
|
347
|
+
import React8 from "react";
|
348
|
+
import { Primitive as Primitive5 } from "@huin-core/react-primitive";
|
349
|
+
import { composeEventHandlers as composeEventHandlers3 } from "@huin-core/primitive";
|
350
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
351
|
+
var CLOSE_NAME = "DialogClose";
|
352
|
+
var DialogClose = React8.forwardRef(
|
353
|
+
(props, forwardedRef) => {
|
354
|
+
const { __scopeDialog, ...closeProps } = props;
|
355
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
356
|
+
return /* @__PURE__ */ jsx8(
|
357
|
+
Primitive5.button,
|
358
|
+
{
|
359
|
+
type: "button",
|
360
|
+
...closeProps,
|
361
|
+
ref: forwardedRef,
|
362
|
+
onClick: composeEventHandlers3(
|
363
|
+
props.onClick,
|
364
|
+
() => context.onOpenChange(false)
|
365
|
+
)
|
366
|
+
}
|
367
|
+
);
|
368
|
+
}
|
369
|
+
);
|
370
|
+
DialogClose.displayName = CLOSE_NAME;
|
371
|
+
export {
|
372
|
+
Dialog,
|
373
|
+
DialogClose,
|
374
|
+
DialogContent,
|
375
|
+
DialogDescription,
|
376
|
+
DialogOverlay,
|
377
|
+
DialogPortal,
|
378
|
+
DialogTitle,
|
379
|
+
DialogTrigger,
|
380
|
+
Root,
|
381
|
+
WarningProvider,
|
382
|
+
createDialogScope
|
383
|
+
};
|
384
|
+
//# sourceMappingURL=index.mjs.map
|
@@ -0,0 +1,7 @@
|
|
1
|
+
{
|
2
|
+
"version": 3,
|
3
|
+
"sources": ["../src/Dialog.tsx", "../src/DialogTrigger.tsx", "../src/DialogPortal.tsx", "../src/DialogOverlay.tsx", "../src/DialogContent.tsx", "../src/DialogTitle.tsx", "../src/DialogDescription.tsx", "../src/DialogClose.tsx"],
|
4
|
+
"sourcesContent": ["import * as React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { useId } from \"@huin-core/react-id\";\nimport { useControllableState } from \"@huin-core/react-use-controllable-state\";\nimport type { Scope } from \"@huin-core/react-context\";\nimport { DialogContentElement } from \"./DialogContent\";\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nexport const DIALOG_NAME = \"Dialog\";\n\nexport type ScopedProps<P> = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] =\n createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<DialogContentElement>;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nexport const [DialogProvider, useDialogContext] =\n createDialogContext<DialogContextValue>(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const contentRef = React.useRef<DialogContentElement>(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId()}\n titleId={useId()}\n descriptionId={useId()}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(\n () => setOpen((prevOpen) => !prevOpen),\n [setOpen]\n )}\n modal={modal}\n >\n {children}\n </DialogProvider>\n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport function getState(open: boolean) {\n return open ? \"open\" : \"closed\";\n}\n\nconst Root = Dialog;\n\nexport { createDialogScope, Dialog, Root };\nexport type { DialogProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst TRIGGER_NAME = \"DialogTrigger\";\n\ntype DialogTriggerElement = React.ElementRef<typeof Primitive.button>;\nexport type PrimitiveButtonProps = React.ComponentPropsWithoutRef<\n typeof Primitive.button\n>;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef<\n DialogTriggerElement,\n DialogTriggerProps\n>((props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n <Primitive.button\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n});\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\nexport { DialogTrigger };\nexport type { DialogTriggerProps };\n", "import React from \"react\";\nimport { createContextScope } from \"@huin-core/react-context\";\nimport { DIALOG_NAME, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { Portal as PortalPrimitive } from \"@huin-core/react-portal\";\nimport { Presence } from \"@huin-core/react-presence\";\n\nconst PORTAL_NAME = \"DialogPortal\";\n\ntype PortalContextValue = { forceMount?: true };\nconst [createDialogContext] =\n createContextScope(DIALOG_NAME);\n\nexport const [PortalProvider, usePortalContext] =\n createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n });\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface DialogPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps[\"container\"];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (\n props: ScopedProps<DialogPortalProps>\n) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n {React.Children.map(children, (child) => (\n <Presence present={forceMount || context.open}>\n <PortalPrimitive asChild container={container}>\n {child}\n </PortalPrimitive>\n </Presence>\n ))}\n </PortalProvider>\n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\nexport { DialogPortal };\nexport type { DialogPortalProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { RemoveScroll } from \"react-remove-scroll\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { usePortalContext } from \"./DialogPortal\";\nimport { Slot } from \"@huin-core/react-slot\";\n\nconst OVERLAY_NAME = \"DialogOverlay\";\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef<\n DialogOverlayElement,\n DialogOverlayProps\n>((props: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n <Presence present={forceMount || context.open}>\n <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n </Presence>\n ) : null;\n});\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = React.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef<\n DialogOverlayImplElement,\n DialogOverlayImplProps\n>((props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>\n <Primitive.div\n data-state={getState(context.open)}\n {...overlayProps}\n ref={forwardedRef}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n style={{ pointerEvents: \"auto\", ...overlayProps.style }}\n />\n </RemoveScroll>\n );\n});\n\nexport { DialogOverlay };\nexport type { DialogOverlayProps };\n", "import React from \"react\";\nimport { getState, ScopedProps, useDialogContext } from \"./Dialog\";\nimport { usePortalContext } from \"./DialogPortal\";\nimport { Presence } from \"@huin-core/react-presence\";\nimport { useComposedRefs } from \"@huin-core/react-compose-refs\";\nimport { hideOthers } from \"aria-hidden\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\nimport { DismissableLayer } from \"@huin-core/react-dismissable-layer\";\nimport { FocusScope } from \"@huin-core/react-focus-scope\";\nimport { useFocusGuards } from \"@huin-core/react-focus-guards\";\nimport { createContext } from \"@huin-core/react-context\";\nimport { TITLE_NAME } from \"./DialogTitle\";\n\nconst CONTENT_NAME = \"DialogContent\";\n\nexport type DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\nconst DialogContent = React.forwardRef<\n DialogContentElement,\n DialogContentProps\n>((props: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n <Presence present={forceMount || context.open}>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </Presence>\n );\n});\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit<\n DialogContentImplProps,\n \"trapFocus\" | \"disableOutsidePointerEvents\"\n > {}\n\nconst DialogContentModal = React.forwardRef<\n DialogContentTypeElement,\n DialogContentTypeProps\n>((props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(\n forwardedRef,\n context.contentRef,\n contentRef\n );\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(\n props.onCloseAutoFocus,\n (event) => {\n event.preventDefault();\n context.triggerRef.current?.focus();\n }\n )}\n onPointerDownOutside={composeEventHandlers(\n props.onPointerDownOutside,\n (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick =\n originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n }\n )}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<\n DialogContentTypeElement,\n DialogContentTypeProps\n>((props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current)\n context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === \"pointerdown\") {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (\n event.detail.originalEvent.type === \"focusin\" &&\n hasPointerDownOutsideRef.current\n ) {\n event.preventDefault();\n }\n }}\n />\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef<typeof DismissableLayer>;\ntype DismissableLayerProps = React.ComponentPropsWithoutRef<\n typeof DismissableLayer\n>;\ntype FocusScopeProps = React.ComponentPropsWithoutRef<typeof FocusScope>;\ninterface DialogContentImplProps\n extends Omit<DismissableLayerProps, \"onDismiss\"> {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps[\"trapped\"];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps[\"onMountAutoFocus\"];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps[\"onUnmountAutoFocus\"];\n}\n\nconst DialogContentImpl = React.forwardRef<\n DialogContentImplElement,\n DialogContentImplProps\n>((props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const {\n __scopeDialog,\n trapFocus,\n onOpenAutoFocus,\n onCloseAutoFocus,\n ...contentProps\n } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (beacuse of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n <FocusScope\n asChild\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <DismissableLayer\n role=\"dialog\"\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n />\n </FocusScope>\n {process.env.NODE_ENV !== \"production\" && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning\n contentRef={contentRef}\n descriptionId={context.descriptionId}\n />\n </>\n )}\n </>\n );\n});\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_WARNING_NAME = \"DialogTitleWarning\";\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: \"dialog\",\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://huinhub.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n React.useEffect(() => {\n if (titleId) {\n const hasTitle = document.getElementById(titleId);\n if (!hasTitle) console.error(MESSAGE);\n }\n }, [MESSAGE, titleId]);\n\n return null;\n};\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_WARNING_NAME = \"DialogDescriptionWarning\";\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<DialogContentElement>;\n descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({\n contentRef,\n descriptionId,\n}) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n React.useEffect(() => {\n const describedById = contentRef.current?.getAttribute(\"aria-describedby\");\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId);\n if (!hasDescription) console.warn(MESSAGE);\n }\n }, [MESSAGE, contentRef, descriptionId]);\n\n return null;\n};\n\nexport { DialogContent, WarningProvider };\nexport type { DialogContentProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\n\nexport const TITLE_NAME = \"DialogTitle\";\n\ntype DialogTitleElement = React.ElementRef<typeof Primitive.h2>;\ntype PrimitiveHeading2Props = React.ComponentPropsWithoutRef<\n typeof Primitive.h2\n>;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props;\n const context = useDialogContext(TITLE_NAME, __scopeDialog);\n return (\n <Primitive.h2 id={context.titleId} {...titleProps} ref={forwardedRef} />\n );\n }\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\nexport { DialogTitle };\nexport type { DialogTitleProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\n\nconst DESCRIPTION_NAME = \"DialogDescription\";\n\ntype DialogDescriptionElement = React.ElementRef<typeof Primitive.p>;\ntype PrimitiveParagraphProps = React.ComponentPropsWithoutRef<\n typeof Primitive.p\n>;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef<\n DialogDescriptionElement,\n DialogDescriptionProps\n>((props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, className, ...descriptionProps } = props;\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n return <Primitive.p id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;\n\n});\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\nexport { DialogDescription };\nexport type { DialogDescriptionProps };\n", "import React from \"react\";\nimport { Primitive } from \"@huin-core/react-primitive\";\nimport { PrimitiveButtonProps } from \"./DialogTrigger\";\nimport { ScopedProps, useDialogContext } from \"./Dialog\";\nimport { composeEventHandlers } from \"@huin-core/primitive\";\n\nconst CLOSE_NAME = \"DialogClose\";\n\ntype DialogCloseElement = React.ElementRef<typeof Primitive.button>;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props;\n const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n return (\n <Primitive.button\n type=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () =>\n context.onOpenChange(false)\n )}\n />\n );\n }\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\nexport { DialogClose };\nexport type { DialogCloseProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["React", "jsx", "React", "React", "createContextScope", "jsx", "createDialogContext", "createContextScope", "React", "React", "Primitive", "Presence", "jsx", "React", "Presence", "Primitive", "React", "Presence", "useComposedRefs", "composeEventHandlers", "React", "Primitive", "jsx", "React", "Primitive", "jsx", "React", "Presence", "useComposedRefs", "composeEventHandlers", "React", "Primitive", "jsx", "React", "Primitive", "React", "Primitive", "composeEventHandlers", "jsx", "React", "Primitive"]
|
7
|
+
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@huin-core/react-dialog",
|
3
|
-
"version": "1.0.
|
3
|
+
"version": "1.0.4",
|
4
4
|
"license": "MIT",
|
5
5
|
"exports": {
|
6
6
|
".": {
|
@@ -20,7 +20,8 @@
|
|
20
20
|
"types": "./dist/index.d.ts",
|
21
21
|
"files": [
|
22
22
|
"dist",
|
23
|
-
"README.md"
|
23
|
+
"README.md",
|
24
|
+
"package.json"
|
24
25
|
],
|
25
26
|
"sideEffects": false,
|
26
27
|
"scripts": {
|