@yahoo/uds 3.150.0 → 3.151.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/client/Modal/ManagedModal.cjs +52 -0
- package/dist/components/client/Modal/ManagedModal.d.cts +16 -0
- package/dist/components/client/Modal/ManagedModal.d.ts +17 -0
- package/dist/components/client/Modal/ManagedModal.js +50 -0
- package/dist/components/client/Modal/ModalPortal.cjs +17 -0
- package/dist/components/client/Modal/ModalPortal.d.cts +10 -0
- package/dist/components/client/Modal/ModalPortal.d.ts +11 -0
- package/dist/components/client/Modal/ModalPortal.js +15 -0
- package/dist/components/client/Modal/createModal.cjs +18 -0
- package/dist/components/client/Modal/createModal.d.cts +11 -0
- package/dist/components/client/Modal/createModal.d.ts +12 -0
- package/dist/components/client/Modal/createModal.js +17 -0
- package/dist/components/client/Modal/index.cjs +4 -0
- package/dist/components/client/Modal/index.d.cts +3 -1
- package/dist/components/client/Modal/index.d.ts +3 -1
- package/dist/components/client/Modal/index.js +3 -1
- package/dist/components/client/Modal/modalStore.cjs +254 -0
- package/dist/components/client/Modal/modalStore.d.cts +35 -0
- package/dist/components/client/Modal/modalStore.d.ts +36 -0
- package/dist/components/client/Modal/modalStore.js +248 -0
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.cts +1 -1
- package/dist/components/client/Popover/UDSPopoverConfigProvider.d.ts +1 -1
- package/dist/components/client/index.cjs +4 -0
- package/dist/components/client/index.d.cts +3 -1
- package/dist/components/client/index.d.ts +3 -1
- package/dist/components/client/index.js +3 -1
- package/dist/components/index.cjs +4 -0
- package/dist/components/index.d.cts +3 -1
- package/dist/components/index.d.ts +3 -1
- package/dist/components/index.js +3 -1
- package/dist/index.cjs +4 -0
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +3 -1
- package/dist/uds/generated/componentData.cjs +1500 -1465
- package/dist/uds/generated/componentData.js +1500 -1465
- package/dist/uds/generated/tailwindPurge.cjs +3 -0
- package/dist/uds/generated/tailwindPurge.js +3 -0
- package/generated/componentData.json +2251 -2214
- package/generated/tailwindPurge.ts +3 -3
- package/package.json +1 -1
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
require("../../../_virtual/_rolldown/runtime.cjs");
|
|
5
|
+
const require_components_client_Modal_modalStore = require("./modalStore.cjs");
|
|
6
|
+
const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
|
|
7
|
+
const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
|
|
8
|
+
const require_components_client_Modal_ModalContent = require("./ModalContent.cjs");
|
|
9
|
+
const require_components_client_Modal_ModalDescription = require("./ModalDescription.cjs");
|
|
10
|
+
const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
|
|
11
|
+
const require_components_client_Modal_Modal = require("./Modal.cjs");
|
|
12
|
+
let react = require("react");
|
|
13
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
14
|
+
let motion_react = require("motion/react");
|
|
15
|
+
//#region src/components/client/Modal/ManagedModal.tsx
|
|
16
|
+
const ManagedModal = ({ slot }) => {
|
|
17
|
+
const { animationDuration } = require_components_client_Modal_UDSModalConfigProvider.useModalConfig();
|
|
18
|
+
const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
|
|
19
|
+
const exitDuration = (0, motion_react.useReducedMotion)() || slot.props.reduceMotion ? 0 : durationOut;
|
|
20
|
+
(0, react.useEffect)(() => {
|
|
21
|
+
if (!slot.closing) return;
|
|
22
|
+
const ownerId = slot.ownerId;
|
|
23
|
+
const timer = window.setTimeout(() => require_components_client_Modal_modalStore.removeModalEntry(ownerId), exitDuration);
|
|
24
|
+
return () => window.clearTimeout(timer);
|
|
25
|
+
}, [
|
|
26
|
+
slot.closing,
|
|
27
|
+
slot.ownerId,
|
|
28
|
+
exitDuration
|
|
29
|
+
]);
|
|
30
|
+
const { onClose, title, description, content, actions, ...modalProps } = slot.props;
|
|
31
|
+
const { actionStartContent } = slot.options;
|
|
32
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_components_client_Modal_Modal.Modal, {
|
|
33
|
+
...modalProps,
|
|
34
|
+
open: slot.open,
|
|
35
|
+
onClose: (event) => {
|
|
36
|
+
onClose?.(event);
|
|
37
|
+
require_components_client_Modal_modalStore.closeModalEntry(slot.ownerId);
|
|
38
|
+
},
|
|
39
|
+
children: [
|
|
40
|
+
title != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalTitle.ModalTitle, { children: title }) : null,
|
|
41
|
+
description != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalDescription.ModalDescription, { children: description }) : null,
|
|
42
|
+
content != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalContent.ModalContent, { children: content }) : null,
|
|
43
|
+
actions != null || actionStartContent != null ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ModalActions.ModalActions, {
|
|
44
|
+
startContent: actionStartContent,
|
|
45
|
+
children: actions
|
|
46
|
+
}) : null
|
|
47
|
+
]
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
ManagedModal.displayName = "ManagedModal";
|
|
51
|
+
//#endregion
|
|
52
|
+
exports.ManagedModal = ManagedModal;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
|
|
2
|
+
import { ModalSlotState } from "./modalStore.cjs";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/components/client/Modal/ManagedModal.d.ts
|
|
6
|
+
interface ManagedModalProps {
|
|
7
|
+
slot: ModalSlotState;
|
|
8
|
+
}
|
|
9
|
+
declare const ManagedModal: {
|
|
10
|
+
({
|
|
11
|
+
slot
|
|
12
|
+
}: ManagedModalProps): _$react_jsx_runtime0.JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
export { ManagedModal };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import { ModalSlotState } from "./modalStore.js";
|
|
4
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
|
+
|
|
6
|
+
//#region src/components/client/Modal/ManagedModal.d.ts
|
|
7
|
+
interface ManagedModalProps {
|
|
8
|
+
slot: ModalSlotState;
|
|
9
|
+
}
|
|
10
|
+
declare const ManagedModal: {
|
|
11
|
+
({
|
|
12
|
+
slot
|
|
13
|
+
}: ManagedModalProps): _$react_jsx_runtime0.JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
//#endregion
|
|
17
|
+
export { ManagedModal };
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
import { closeModalEntry, removeModalEntry } from "./modalStore.js";
|
|
4
|
+
import { useModalConfig } from "./UDSModalConfigProvider.js";
|
|
5
|
+
import { ModalActions } from "./ModalActions.js";
|
|
6
|
+
import { ModalContent } from "./ModalContent.js";
|
|
7
|
+
import { ModalDescription } from "./ModalDescription.js";
|
|
8
|
+
import { ModalTitle } from "./ModalTitle.js";
|
|
9
|
+
import { Modal } from "./Modal.js";
|
|
10
|
+
import { useEffect } from "react";
|
|
11
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
+
import { useReducedMotion } from "motion/react";
|
|
13
|
+
//#region src/components/client/Modal/ManagedModal.tsx
|
|
14
|
+
const ManagedModal = ({ slot }) => {
|
|
15
|
+
const { animationDuration } = useModalConfig();
|
|
16
|
+
const durationOut = typeof animationDuration === "number" ? animationDuration : animationDuration.out;
|
|
17
|
+
const exitDuration = useReducedMotion() || slot.props.reduceMotion ? 0 : durationOut;
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
if (!slot.closing) return;
|
|
20
|
+
const ownerId = slot.ownerId;
|
|
21
|
+
const timer = window.setTimeout(() => removeModalEntry(ownerId), exitDuration);
|
|
22
|
+
return () => window.clearTimeout(timer);
|
|
23
|
+
}, [
|
|
24
|
+
slot.closing,
|
|
25
|
+
slot.ownerId,
|
|
26
|
+
exitDuration
|
|
27
|
+
]);
|
|
28
|
+
const { onClose, title, description, content, actions, ...modalProps } = slot.props;
|
|
29
|
+
const { actionStartContent } = slot.options;
|
|
30
|
+
return /* @__PURE__ */ jsxs(Modal, {
|
|
31
|
+
...modalProps,
|
|
32
|
+
open: slot.open,
|
|
33
|
+
onClose: (event) => {
|
|
34
|
+
onClose?.(event);
|
|
35
|
+
closeModalEntry(slot.ownerId);
|
|
36
|
+
},
|
|
37
|
+
children: [
|
|
38
|
+
title != null ? /* @__PURE__ */ jsx(ModalTitle, { children: title }) : null,
|
|
39
|
+
description != null ? /* @__PURE__ */ jsx(ModalDescription, { children: description }) : null,
|
|
40
|
+
content != null ? /* @__PURE__ */ jsx(ModalContent, { children: content }) : null,
|
|
41
|
+
actions != null || actionStartContent != null ? /* @__PURE__ */ jsx(ModalActions, {
|
|
42
|
+
startContent: actionStartContent,
|
|
43
|
+
children: actions
|
|
44
|
+
}) : null
|
|
45
|
+
]
|
|
46
|
+
});
|
|
47
|
+
};
|
|
48
|
+
ManagedModal.displayName = "ManagedModal";
|
|
49
|
+
//#endregion
|
|
50
|
+
export { ManagedModal };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
require("../../../_virtual/_rolldown/runtime.cjs");
|
|
5
|
+
const require_components_client_Modal_modalStore = require("./modalStore.cjs");
|
|
6
|
+
const require_components_client_Modal_ManagedModal = require("./ManagedModal.cjs");
|
|
7
|
+
let react = require("react");
|
|
8
|
+
let react_jsx_runtime = require("react/jsx-runtime");
|
|
9
|
+
//#region src/components/client/Modal/ModalPortal.tsx
|
|
10
|
+
const ModalPortal = () => {
|
|
11
|
+
const slot = (0, react.useSyncExternalStore)(require_components_client_Modal_modalStore.subscribe, require_components_client_Modal_modalStore.getSnapshot, require_components_client_Modal_modalStore.getSnapshot);
|
|
12
|
+
if (!slot) return null;
|
|
13
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_client_Modal_ManagedModal.ManagedModal, { slot }, slot.slotId);
|
|
14
|
+
};
|
|
15
|
+
ModalPortal.displayName = "ModalPortal";
|
|
16
|
+
//#endregion
|
|
17
|
+
exports.ModalPortal = ModalPortal;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
|
|
2
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
|
+
|
|
4
|
+
//#region src/components/client/Modal/ModalPortal.d.ts
|
|
5
|
+
declare const ModalPortal: {
|
|
6
|
+
(): _$react_jsx_runtime0.JSX.Element | null;
|
|
7
|
+
displayName: string;
|
|
8
|
+
};
|
|
9
|
+
//#endregion
|
|
10
|
+
export { ModalPortal };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import * as _$react_jsx_runtime0 from "react/jsx-runtime";
|
|
4
|
+
|
|
5
|
+
//#region src/components/client/Modal/ModalPortal.d.ts
|
|
6
|
+
declare const ModalPortal: {
|
|
7
|
+
(): _$react_jsx_runtime0.JSX.Element | null;
|
|
8
|
+
displayName: string;
|
|
9
|
+
};
|
|
10
|
+
//#endregion
|
|
11
|
+
export { ModalPortal };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
import { getSnapshot, subscribe } from "./modalStore.js";
|
|
4
|
+
import { ManagedModal } from "./ManagedModal.js";
|
|
5
|
+
import { useSyncExternalStore } from "react";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/client/Modal/ModalPortal.tsx
|
|
8
|
+
const ModalPortal = () => {
|
|
9
|
+
const slot = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
|
|
10
|
+
if (!slot) return null;
|
|
11
|
+
return /* @__PURE__ */ jsx(ManagedModal, { slot }, slot.slotId);
|
|
12
|
+
};
|
|
13
|
+
ModalPortal.displayName = "ModalPortal";
|
|
14
|
+
//#endregion
|
|
15
|
+
export { ModalPortal };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const require_components_client_Modal_modalStore = require("./modalStore.cjs");
|
|
5
|
+
//#region src/components/client/Modal/createModal.tsx
|
|
6
|
+
function createModal(args) {
|
|
7
|
+
const id = require_components_client_Modal_modalStore.addModalEntry(args);
|
|
8
|
+
return {
|
|
9
|
+
update(next) {
|
|
10
|
+
require_components_client_Modal_modalStore.updateModalEntry(id, next);
|
|
11
|
+
},
|
|
12
|
+
close() {
|
|
13
|
+
require_components_client_Modal_modalStore.closeModalEntry(id);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
//#endregion
|
|
18
|
+
exports.createModal = createModal;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
|
|
2
|
+
import { CreateModalArgs } from "./modalStore.cjs";
|
|
3
|
+
|
|
4
|
+
//#region src/components/client/Modal/createModal.d.ts
|
|
5
|
+
interface ModalAPI {
|
|
6
|
+
update(args: Partial<CreateModalArgs>): void;
|
|
7
|
+
close(): void;
|
|
8
|
+
}
|
|
9
|
+
declare function createModal(args: CreateModalArgs): ModalAPI;
|
|
10
|
+
//#endregion
|
|
11
|
+
export { type ModalAPI, createModal };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import { CreateModalArgs } from "./modalStore.js";
|
|
4
|
+
|
|
5
|
+
//#region src/components/client/Modal/createModal.d.ts
|
|
6
|
+
interface ModalAPI {
|
|
7
|
+
update(args: Partial<CreateModalArgs>): void;
|
|
8
|
+
close(): void;
|
|
9
|
+
}
|
|
10
|
+
declare function createModal(args: CreateModalArgs): ModalAPI;
|
|
11
|
+
//#endregion
|
|
12
|
+
export { type ModalAPI, createModal };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
import { addModalEntry, closeModalEntry, updateModalEntry } from "./modalStore.js";
|
|
4
|
+
//#region src/components/client/Modal/createModal.tsx
|
|
5
|
+
function createModal(args) {
|
|
6
|
+
const id = addModalEntry(args);
|
|
7
|
+
return {
|
|
8
|
+
update(next) {
|
|
9
|
+
updateModalEntry(id, next);
|
|
10
|
+
},
|
|
11
|
+
close() {
|
|
12
|
+
closeModalEntry(id);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
17
|
+
export { createModal };
|
|
@@ -1,16 +1,20 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
"use client";
|
|
3
3
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
const require_components_client_Modal_createModal = require("./createModal.cjs");
|
|
4
5
|
const require_components_client_Modal_UDSModalConfigProvider = require("./UDSModalConfigProvider.cjs");
|
|
5
6
|
const require_components_client_Modal_ModalActions = require("./ModalActions.cjs");
|
|
6
7
|
const require_components_client_Modal_ModalContent = require("./ModalContent.cjs");
|
|
7
8
|
const require_components_client_Modal_ModalDescription = require("./ModalDescription.cjs");
|
|
8
9
|
const require_components_client_Modal_ModalTitle = require("./ModalTitle.cjs");
|
|
9
10
|
const require_components_client_Modal_Modal = require("./Modal.cjs");
|
|
11
|
+
const require_components_client_Modal_ModalPortal = require("./ModalPortal.cjs");
|
|
10
12
|
exports.Modal = require_components_client_Modal_Modal.Modal;
|
|
11
13
|
exports.ModalActions = require_components_client_Modal_ModalActions.ModalActions;
|
|
12
14
|
exports.ModalContent = require_components_client_Modal_ModalContent.ModalContent;
|
|
13
15
|
exports.ModalDescription = require_components_client_Modal_ModalDescription.ModalDescription;
|
|
16
|
+
exports.ModalPortal = require_components_client_Modal_ModalPortal.ModalPortal;
|
|
14
17
|
exports.ModalTitle = require_components_client_Modal_ModalTitle.ModalTitle;
|
|
15
18
|
exports.UDSModalConfigProvider = require_components_client_Modal_UDSModalConfigProvider.UDSModalConfigProvider;
|
|
19
|
+
exports.createModal = require_components_client_Modal_createModal.createModal;
|
|
16
20
|
exports.useModalConfig = require_components_client_Modal_UDSModalConfigProvider.useModalConfig;
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
|
|
2
|
+
import { ModalAPI, createModal } from "./createModal.cjs";
|
|
2
3
|
import { ModalActions, ModalActionsProps } from "./ModalActions.cjs";
|
|
3
4
|
import { ModalContent, ModalContentProps } from "./ModalContent.cjs";
|
|
4
5
|
import { ModalDescription, ModalDescriptionProps } from "./ModalDescription.cjs";
|
|
6
|
+
import { ModalPortal } from "./ModalPortal.cjs";
|
|
5
7
|
import { ModalTitle, ModalTitleProps } from "./ModalTitle.cjs";
|
|
6
8
|
import { UDSModalConfigProvider, UDSModalConfigProviderProps, useModalConfig } from "./UDSModalConfigProvider.cjs";
|
|
7
9
|
import { Modal, ModalProps } from "./Modal.cjs";
|
|
8
|
-
export { Modal, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, useModalConfig };
|
|
10
|
+
export { Modal, type ModalAPI, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, createModal, useModalConfig };
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
2
|
"use client";
|
|
3
|
+
import { ModalAPI, createModal } from "./createModal.js";
|
|
3
4
|
import { ModalActions, ModalActionsProps } from "./ModalActions.js";
|
|
4
5
|
import { ModalContent, ModalContentProps } from "./ModalContent.js";
|
|
5
6
|
import { ModalDescription, ModalDescriptionProps } from "./ModalDescription.js";
|
|
7
|
+
import { ModalPortal } from "./ModalPortal.js";
|
|
6
8
|
import { ModalTitle, ModalTitleProps } from "./ModalTitle.js";
|
|
7
9
|
import { UDSModalConfigProvider, UDSModalConfigProviderProps, useModalConfig } from "./UDSModalConfigProvider.js";
|
|
8
10
|
import { Modal, ModalProps } from "./Modal.js";
|
|
9
|
-
export { Modal, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, useModalConfig };
|
|
11
|
+
export { Modal, type ModalAPI, ModalActions, type ModalActionsProps, ModalContent, type ModalContentProps, ModalDescription, type ModalDescriptionProps, ModalPortal, type ModalProps, ModalTitle, type ModalTitleProps, UDSModalConfigProvider, type UDSModalConfigProviderProps, createModal, useModalConfig };
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
2
|
"use client";
|
|
3
|
+
import { createModal } from "./createModal.js";
|
|
3
4
|
import { UDSModalConfigProvider, useModalConfig } from "./UDSModalConfigProvider.js";
|
|
4
5
|
import { ModalActions } from "./ModalActions.js";
|
|
5
6
|
import { ModalContent } from "./ModalContent.js";
|
|
6
7
|
import { ModalDescription } from "./ModalDescription.js";
|
|
7
8
|
import { ModalTitle } from "./ModalTitle.js";
|
|
8
9
|
import { Modal } from "./Modal.js";
|
|
9
|
-
|
|
10
|
+
import { ModalPortal } from "./ModalPortal.js";
|
|
11
|
+
export { Modal, ModalActions, ModalContent, ModalDescription, ModalPortal, ModalTitle, UDSModalConfigProvider, createModal, useModalConfig };
|
|
@@ -0,0 +1,254 @@
|
|
|
1
|
+
/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
|
|
2
|
+
"use client";
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
4
|
+
//#region src/components/client/Modal/modalStore.ts
|
|
5
|
+
let nextSlotId = 0;
|
|
6
|
+
let nextOwnerId = 0;
|
|
7
|
+
let slot = null;
|
|
8
|
+
const subscribers = /* @__PURE__ */ new Set();
|
|
9
|
+
const notify = () => {
|
|
10
|
+
for (const fn of subscribers) fn();
|
|
11
|
+
};
|
|
12
|
+
const subscribe = (fn) => {
|
|
13
|
+
subscribers.add(fn);
|
|
14
|
+
return () => {
|
|
15
|
+
subscribers.delete(fn);
|
|
16
|
+
};
|
|
17
|
+
};
|
|
18
|
+
const getSnapshot = () => slot;
|
|
19
|
+
const splitArgs = (args) => {
|
|
20
|
+
const { actionStartContent, replace, ...rest } = args;
|
|
21
|
+
return {
|
|
22
|
+
props: rest,
|
|
23
|
+
options: {
|
|
24
|
+
actionStartContent,
|
|
25
|
+
replace
|
|
26
|
+
}
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
const errorIfNoPortalMounted = () => {
|
|
30
|
+
if (process.env.NODE_ENV === "production") return;
|
|
31
|
+
if (subscribers.size === 0) console.error("[UDS] createModal was called but no <ModalPortal /> is mounted in this React tree. Render <ModalPortal /> inside your UDSConfigProvider for the modal to display. Note: ModalPortal must be in the same React tree (and the same @yahoo/uds module instance) as the createModal caller — multi-tenant apps with isolated React trees need their own ModalPortal in each tree.");
|
|
32
|
+
};
|
|
33
|
+
const scheduleOpen = (slotId, ownerId) => {
|
|
34
|
+
if (typeof window === "undefined") return;
|
|
35
|
+
window.requestAnimationFrame(() => {
|
|
36
|
+
window.requestAnimationFrame(() => {
|
|
37
|
+
if (!slot || slot.slotId !== slotId || slot.ownerId !== ownerId || slot.closing) return;
|
|
38
|
+
slot = {
|
|
39
|
+
...slot,
|
|
40
|
+
open: true
|
|
41
|
+
};
|
|
42
|
+
notify();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
};
|
|
46
|
+
const addModalEntry = (args) => {
|
|
47
|
+
errorIfNoPortalMounted();
|
|
48
|
+
nextOwnerId += 1;
|
|
49
|
+
const ownerId = nextOwnerId;
|
|
50
|
+
const { props, options } = splitArgs(args);
|
|
51
|
+
const newEntry = {
|
|
52
|
+
ownerId,
|
|
53
|
+
props,
|
|
54
|
+
options
|
|
55
|
+
};
|
|
56
|
+
if (!slot) {
|
|
57
|
+
nextSlotId += 1;
|
|
58
|
+
const slotId = nextSlotId;
|
|
59
|
+
slot = {
|
|
60
|
+
slotId,
|
|
61
|
+
ownerId,
|
|
62
|
+
open: false,
|
|
63
|
+
closing: false,
|
|
64
|
+
props,
|
|
65
|
+
options,
|
|
66
|
+
stack: [],
|
|
67
|
+
pending: null,
|
|
68
|
+
preserveOnExit: false
|
|
69
|
+
};
|
|
70
|
+
notify();
|
|
71
|
+
scheduleOpen(slotId, ownerId);
|
|
72
|
+
return ownerId;
|
|
73
|
+
}
|
|
74
|
+
if (options.replace === true) {
|
|
75
|
+
slot = {
|
|
76
|
+
...slot,
|
|
77
|
+
open: false,
|
|
78
|
+
closing: true,
|
|
79
|
+
stack: [],
|
|
80
|
+
pending: newEntry,
|
|
81
|
+
preserveOnExit: false
|
|
82
|
+
};
|
|
83
|
+
notify();
|
|
84
|
+
return ownerId;
|
|
85
|
+
}
|
|
86
|
+
if (slot.closing) {
|
|
87
|
+
slot = {
|
|
88
|
+
...slot,
|
|
89
|
+
pending: newEntry
|
|
90
|
+
};
|
|
91
|
+
notify();
|
|
92
|
+
return ownerId;
|
|
93
|
+
}
|
|
94
|
+
slot = {
|
|
95
|
+
...slot,
|
|
96
|
+
open: false,
|
|
97
|
+
closing: true,
|
|
98
|
+
pending: newEntry,
|
|
99
|
+
preserveOnExit: true
|
|
100
|
+
};
|
|
101
|
+
notify();
|
|
102
|
+
return ownerId;
|
|
103
|
+
};
|
|
104
|
+
const updateModalEntry = (ownerId, next) => {
|
|
105
|
+
if (!slot) return;
|
|
106
|
+
const { props: nextProps, options: nextOptions } = splitArgs(next);
|
|
107
|
+
if (slot.ownerId === ownerId) {
|
|
108
|
+
slot = {
|
|
109
|
+
...slot,
|
|
110
|
+
props: {
|
|
111
|
+
...slot.props,
|
|
112
|
+
...nextProps
|
|
113
|
+
},
|
|
114
|
+
options: {
|
|
115
|
+
...slot.options,
|
|
116
|
+
...nextOptions
|
|
117
|
+
}
|
|
118
|
+
};
|
|
119
|
+
notify();
|
|
120
|
+
return;
|
|
121
|
+
}
|
|
122
|
+
if (slot.pending?.ownerId === ownerId) {
|
|
123
|
+
const updatedPending = {
|
|
124
|
+
ownerId: slot.pending.ownerId,
|
|
125
|
+
props: {
|
|
126
|
+
...slot.pending.props,
|
|
127
|
+
...nextProps
|
|
128
|
+
},
|
|
129
|
+
options: {
|
|
130
|
+
...slot.pending.options,
|
|
131
|
+
...nextOptions
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
slot = {
|
|
135
|
+
...slot,
|
|
136
|
+
pending: updatedPending
|
|
137
|
+
};
|
|
138
|
+
notify();
|
|
139
|
+
return;
|
|
140
|
+
}
|
|
141
|
+
const buriedIndex = slot.stack.findIndex((entry) => entry.ownerId === ownerId);
|
|
142
|
+
if (buriedIndex === -1) return;
|
|
143
|
+
const buried = slot.stack[buriedIndex];
|
|
144
|
+
if (!buried) return;
|
|
145
|
+
const updatedEntry = {
|
|
146
|
+
ownerId: buried.ownerId,
|
|
147
|
+
props: {
|
|
148
|
+
...buried.props,
|
|
149
|
+
...nextProps
|
|
150
|
+
},
|
|
151
|
+
options: {
|
|
152
|
+
...buried.options,
|
|
153
|
+
...nextOptions
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
const nextStack = slot.stack.slice();
|
|
157
|
+
nextStack[buriedIndex] = updatedEntry;
|
|
158
|
+
slot = {
|
|
159
|
+
...slot,
|
|
160
|
+
stack: nextStack
|
|
161
|
+
};
|
|
162
|
+
notify();
|
|
163
|
+
};
|
|
164
|
+
const closeModalEntry = (ownerId) => {
|
|
165
|
+
if (!slot) return;
|
|
166
|
+
if (slot.ownerId === ownerId) {
|
|
167
|
+
slot = {
|
|
168
|
+
...slot,
|
|
169
|
+
open: false,
|
|
170
|
+
closing: true,
|
|
171
|
+
preserveOnExit: false
|
|
172
|
+
};
|
|
173
|
+
notify();
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
176
|
+
if (slot.pending?.ownerId === ownerId) {
|
|
177
|
+
slot = {
|
|
178
|
+
...slot,
|
|
179
|
+
pending: null
|
|
180
|
+
};
|
|
181
|
+
notify();
|
|
182
|
+
return;
|
|
183
|
+
}
|
|
184
|
+
const buriedIndex = slot.stack.findIndex((entry) => entry.ownerId === ownerId);
|
|
185
|
+
if (buriedIndex === -1) return;
|
|
186
|
+
const nextStack = slot.stack.slice();
|
|
187
|
+
nextStack.splice(buriedIndex, 1);
|
|
188
|
+
slot = {
|
|
189
|
+
...slot,
|
|
190
|
+
stack: nextStack
|
|
191
|
+
};
|
|
192
|
+
notify();
|
|
193
|
+
};
|
|
194
|
+
const removeModalEntry = (ownerId) => {
|
|
195
|
+
if (!slot || slot.ownerId !== ownerId) return;
|
|
196
|
+
if (slot.pending) {
|
|
197
|
+
const nextStack = slot.preserveOnExit ? [...slot.stack, {
|
|
198
|
+
ownerId: slot.ownerId,
|
|
199
|
+
props: slot.props,
|
|
200
|
+
options: slot.options
|
|
201
|
+
}] : slot.stack;
|
|
202
|
+
nextSlotId += 1;
|
|
203
|
+
const slotId = nextSlotId;
|
|
204
|
+
const promoted = slot.pending;
|
|
205
|
+
slot = {
|
|
206
|
+
slotId,
|
|
207
|
+
ownerId: promoted.ownerId,
|
|
208
|
+
open: false,
|
|
209
|
+
closing: false,
|
|
210
|
+
props: promoted.props,
|
|
211
|
+
options: promoted.options,
|
|
212
|
+
stack: nextStack,
|
|
213
|
+
pending: null,
|
|
214
|
+
preserveOnExit: false
|
|
215
|
+
};
|
|
216
|
+
notify();
|
|
217
|
+
scheduleOpen(slotId, promoted.ownerId);
|
|
218
|
+
return;
|
|
219
|
+
}
|
|
220
|
+
if (slot.stack.length === 0) {
|
|
221
|
+
slot = null;
|
|
222
|
+
notify();
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
const restored = slot.stack[slot.stack.length - 1];
|
|
226
|
+
if (!restored) {
|
|
227
|
+
slot = null;
|
|
228
|
+
notify();
|
|
229
|
+
return;
|
|
230
|
+
}
|
|
231
|
+
const restoredStack = slot.stack.slice(0, -1);
|
|
232
|
+
nextSlotId += 1;
|
|
233
|
+
const slotId = nextSlotId;
|
|
234
|
+
slot = {
|
|
235
|
+
slotId,
|
|
236
|
+
ownerId: restored.ownerId,
|
|
237
|
+
open: false,
|
|
238
|
+
closing: false,
|
|
239
|
+
props: restored.props,
|
|
240
|
+
options: restored.options,
|
|
241
|
+
stack: restoredStack,
|
|
242
|
+
pending: null,
|
|
243
|
+
preserveOnExit: false
|
|
244
|
+
};
|
|
245
|
+
notify();
|
|
246
|
+
scheduleOpen(slotId, restored.ownerId);
|
|
247
|
+
};
|
|
248
|
+
//#endregion
|
|
249
|
+
exports.addModalEntry = addModalEntry;
|
|
250
|
+
exports.closeModalEntry = closeModalEntry;
|
|
251
|
+
exports.getSnapshot = getSnapshot;
|
|
252
|
+
exports.removeModalEntry = removeModalEntry;
|
|
253
|
+
exports.subscribe = subscribe;
|
|
254
|
+
exports.updateModalEntry = updateModalEntry;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
|
|
2
|
+
import { ModalProps } from "./Modal.cjs";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
|
|
5
|
+
//#region src/components/client/Modal/modalStore.d.ts
|
|
6
|
+
type CreateModalProps = Pick<ModalProps, 'onClose' | 'onOpen' | 'portal' | 'modal' | 'includeScrim' | 'hideDismissButton' | 'reduceMotion' | 'closeIcon' | 'maxWidth' | 'maxHeight' | 'fullWidth' | 'fullHeight' | 'scrollBehavior' | 'title' | 'description' | 'content' | 'actions' | 'closeAriaLabel' | 'className' | 'style'>;
|
|
7
|
+
type CreateModalOptions = {
|
|
8
|
+
actionStartContent?: ReactNode;
|
|
9
|
+
replace?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type CreateModalArgs = CreateModalProps & CreateModalOptions;
|
|
12
|
+
interface ModalEntry {
|
|
13
|
+
ownerId: number;
|
|
14
|
+
props: CreateModalProps;
|
|
15
|
+
options: CreateModalOptions;
|
|
16
|
+
}
|
|
17
|
+
interface ModalSlotState {
|
|
18
|
+
slotId: number;
|
|
19
|
+
ownerId: number;
|
|
20
|
+
open: boolean;
|
|
21
|
+
closing: boolean;
|
|
22
|
+
props: CreateModalProps;
|
|
23
|
+
options: CreateModalOptions;
|
|
24
|
+
stack: ModalEntry[];
|
|
25
|
+
pending: ModalEntry | null;
|
|
26
|
+
preserveOnExit: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare const subscribe: (fn: () => void) => (() => void);
|
|
29
|
+
declare const getSnapshot: () => ModalSlotState | null;
|
|
30
|
+
declare const addModalEntry: (args: CreateModalArgs) => number;
|
|
31
|
+
declare const updateModalEntry: (ownerId: number, next: Partial<CreateModalArgs>) => void;
|
|
32
|
+
declare const closeModalEntry: (ownerId: number) => void;
|
|
33
|
+
declare const removeModalEntry: (ownerId: number) => void;
|
|
34
|
+
//#endregion
|
|
35
|
+
export { type CreateModalArgs, type CreateModalOptions, type CreateModalProps, type ModalSlotState, addModalEntry, closeModalEntry, getSnapshot, removeModalEntry, subscribe, updateModalEntry };
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
|
|
2
|
+
"use client";
|
|
3
|
+
import { ModalProps } from "./Modal.js";
|
|
4
|
+
import { ReactNode } from "react";
|
|
5
|
+
|
|
6
|
+
//#region src/components/client/Modal/modalStore.d.ts
|
|
7
|
+
type CreateModalProps = Pick<ModalProps, 'onClose' | 'onOpen' | 'portal' | 'modal' | 'includeScrim' | 'hideDismissButton' | 'reduceMotion' | 'closeIcon' | 'maxWidth' | 'maxHeight' | 'fullWidth' | 'fullHeight' | 'scrollBehavior' | 'title' | 'description' | 'content' | 'actions' | 'closeAriaLabel' | 'className' | 'style'>;
|
|
8
|
+
type CreateModalOptions = {
|
|
9
|
+
actionStartContent?: ReactNode;
|
|
10
|
+
replace?: boolean;
|
|
11
|
+
};
|
|
12
|
+
type CreateModalArgs = CreateModalProps & CreateModalOptions;
|
|
13
|
+
interface ModalEntry {
|
|
14
|
+
ownerId: number;
|
|
15
|
+
props: CreateModalProps;
|
|
16
|
+
options: CreateModalOptions;
|
|
17
|
+
}
|
|
18
|
+
interface ModalSlotState {
|
|
19
|
+
slotId: number;
|
|
20
|
+
ownerId: number;
|
|
21
|
+
open: boolean;
|
|
22
|
+
closing: boolean;
|
|
23
|
+
props: CreateModalProps;
|
|
24
|
+
options: CreateModalOptions;
|
|
25
|
+
stack: ModalEntry[];
|
|
26
|
+
pending: ModalEntry | null;
|
|
27
|
+
preserveOnExit: boolean;
|
|
28
|
+
}
|
|
29
|
+
declare const subscribe: (fn: () => void) => (() => void);
|
|
30
|
+
declare const getSnapshot: () => ModalSlotState | null;
|
|
31
|
+
declare const addModalEntry: (args: CreateModalArgs) => number;
|
|
32
|
+
declare const updateModalEntry: (ownerId: number, next: Partial<CreateModalArgs>) => void;
|
|
33
|
+
declare const closeModalEntry: (ownerId: number) => void;
|
|
34
|
+
declare const removeModalEntry: (ownerId: number) => void;
|
|
35
|
+
//#endregion
|
|
36
|
+
export { type CreateModalArgs, type CreateModalOptions, type CreateModalProps, type ModalSlotState, addModalEntry, closeModalEntry, getSnapshot, removeModalEntry, subscribe, updateModalEntry };
|