Grabbed dndbeyond's source code
``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
This commit is contained in:
+213
@@ -0,0 +1,213 @@
|
||||
import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils';
|
||||
// Is a vertical scrollbar displayed?
|
||||
function isOverflowing(container) {
|
||||
const doc = ownerDocument(container);
|
||||
if (doc.body === container) {
|
||||
return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
|
||||
}
|
||||
return container.scrollHeight > container.clientHeight;
|
||||
}
|
||||
export function ariaHidden(element, show) {
|
||||
if (show) {
|
||||
element.setAttribute('aria-hidden', 'true');
|
||||
} else {
|
||||
element.removeAttribute('aria-hidden');
|
||||
}
|
||||
}
|
||||
function getPaddingRight(element) {
|
||||
return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0;
|
||||
}
|
||||
function isAriaHiddenForbiddenOnElement(element) {
|
||||
// The forbidden HTML tags are the ones from ARIA specification that
|
||||
// can be children of body and can't have aria-hidden attribute.
|
||||
// cf. https://www.w3.org/TR/html-aria/#docconformance
|
||||
const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK'];
|
||||
const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1;
|
||||
const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden';
|
||||
return isForbiddenTagName || isInputHidden;
|
||||
}
|
||||
function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) {
|
||||
const blacklist = [mountElement, currentElement, ...elementsToExclude];
|
||||
[].forEach.call(container.children, element => {
|
||||
const isNotExcludedElement = blacklist.indexOf(element) === -1;
|
||||
const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element);
|
||||
if (isNotExcludedElement && isNotForbiddenElement) {
|
||||
ariaHidden(element, show);
|
||||
}
|
||||
});
|
||||
}
|
||||
function findIndexOf(items, callback) {
|
||||
let idx = -1;
|
||||
items.some((item, index) => {
|
||||
if (callback(item)) {
|
||||
idx = index;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
return idx;
|
||||
}
|
||||
function handleContainer(containerInfo, props) {
|
||||
const restoreStyle = [];
|
||||
const container = containerInfo.container;
|
||||
if (!props.disableScrollLock) {
|
||||
if (isOverflowing(container)) {
|
||||
// Compute the size before applying overflow hidden to avoid any scroll jumps.
|
||||
const scrollbarSize = getScrollbarSize(ownerDocument(container));
|
||||
restoreStyle.push({
|
||||
value: container.style.paddingRight,
|
||||
property: 'padding-right',
|
||||
el: container
|
||||
});
|
||||
// Use computed style, here to get the real padding to add our scrollbar width.
|
||||
container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`;
|
||||
|
||||
// .mui-fixed is a global helper.
|
||||
const fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed');
|
||||
[].forEach.call(fixedElements, element => {
|
||||
restoreStyle.push({
|
||||
value: element.style.paddingRight,
|
||||
property: 'padding-right',
|
||||
el: element
|
||||
});
|
||||
element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`;
|
||||
});
|
||||
}
|
||||
let scrollContainer;
|
||||
if (container.parentNode instanceof DocumentFragment) {
|
||||
scrollContainer = ownerDocument(container).body;
|
||||
} else {
|
||||
// Support html overflow-y: auto for scroll stability between pages
|
||||
// https://css-tricks.com/snippets/css/force-vertical-scrollbar/
|
||||
const parent = container.parentElement;
|
||||
const containerWindow = ownerWindow(container);
|
||||
scrollContainer = (parent == null ? void 0 : parent.nodeName) === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container;
|
||||
}
|
||||
|
||||
// Block the scroll even if no scrollbar is visible to account for mobile keyboard
|
||||
// screensize shrink.
|
||||
restoreStyle.push({
|
||||
value: scrollContainer.style.overflow,
|
||||
property: 'overflow',
|
||||
el: scrollContainer
|
||||
}, {
|
||||
value: scrollContainer.style.overflowX,
|
||||
property: 'overflow-x',
|
||||
el: scrollContainer
|
||||
}, {
|
||||
value: scrollContainer.style.overflowY,
|
||||
property: 'overflow-y',
|
||||
el: scrollContainer
|
||||
});
|
||||
scrollContainer.style.overflow = 'hidden';
|
||||
}
|
||||
const restore = () => {
|
||||
restoreStyle.forEach(({
|
||||
value,
|
||||
el,
|
||||
property
|
||||
}) => {
|
||||
if (value) {
|
||||
el.style.setProperty(property, value);
|
||||
} else {
|
||||
el.style.removeProperty(property);
|
||||
}
|
||||
});
|
||||
};
|
||||
return restore;
|
||||
}
|
||||
function getHiddenSiblings(container) {
|
||||
const hiddenSiblings = [];
|
||||
[].forEach.call(container.children, element => {
|
||||
if (element.getAttribute('aria-hidden') === 'true') {
|
||||
hiddenSiblings.push(element);
|
||||
}
|
||||
});
|
||||
return hiddenSiblings;
|
||||
}
|
||||
/**
|
||||
* @ignore - do not document.
|
||||
*
|
||||
* Proper state management for containers and the modals in those containers.
|
||||
* Simplified, but inspired by react-overlay's ModalManager class.
|
||||
* Used by the Modal to ensure proper styling of containers.
|
||||
*/
|
||||
export class ModalManager {
|
||||
constructor() {
|
||||
this.containers = void 0;
|
||||
this.modals = void 0;
|
||||
this.modals = [];
|
||||
this.containers = [];
|
||||
}
|
||||
add(modal, container) {
|
||||
let modalIndex = this.modals.indexOf(modal);
|
||||
if (modalIndex !== -1) {
|
||||
return modalIndex;
|
||||
}
|
||||
modalIndex = this.modals.length;
|
||||
this.modals.push(modal);
|
||||
|
||||
// If the modal we are adding is already in the DOM.
|
||||
if (modal.modalRef) {
|
||||
ariaHidden(modal.modalRef, false);
|
||||
}
|
||||
const hiddenSiblings = getHiddenSiblings(container);
|
||||
ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
|
||||
const containerIndex = findIndexOf(this.containers, item => item.container === container);
|
||||
if (containerIndex !== -1) {
|
||||
this.containers[containerIndex].modals.push(modal);
|
||||
return modalIndex;
|
||||
}
|
||||
this.containers.push({
|
||||
modals: [modal],
|
||||
container,
|
||||
restore: null,
|
||||
hiddenSiblings
|
||||
});
|
||||
return modalIndex;
|
||||
}
|
||||
mount(modal, props) {
|
||||
const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
|
||||
const containerInfo = this.containers[containerIndex];
|
||||
if (!containerInfo.restore) {
|
||||
containerInfo.restore = handleContainer(containerInfo, props);
|
||||
}
|
||||
}
|
||||
remove(modal, ariaHiddenState = true) {
|
||||
const modalIndex = this.modals.indexOf(modal);
|
||||
if (modalIndex === -1) {
|
||||
return modalIndex;
|
||||
}
|
||||
const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1);
|
||||
const containerInfo = this.containers[containerIndex];
|
||||
containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1);
|
||||
this.modals.splice(modalIndex, 1);
|
||||
|
||||
// If that was the last modal in a container, clean up the container.
|
||||
if (containerInfo.modals.length === 0) {
|
||||
// The modal might be closed before it had the chance to be mounted in the DOM.
|
||||
if (containerInfo.restore) {
|
||||
containerInfo.restore();
|
||||
}
|
||||
if (modal.modalRef) {
|
||||
// In case the modal wasn't in the DOM yet.
|
||||
ariaHidden(modal.modalRef, ariaHiddenState);
|
||||
}
|
||||
ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false);
|
||||
this.containers.splice(containerIndex, 1);
|
||||
} else {
|
||||
// Otherwise make sure the next top modal is visible to a screen reader.
|
||||
const nextTop = containerInfo.modals[containerInfo.modals.length - 1];
|
||||
// as soon as a modal is adding its modalRef is undefined. it can't set
|
||||
// aria-hidden because the dom element doesn't exist either
|
||||
// when modal was unmounted before modalRef gets null
|
||||
if (nextTop.modalRef) {
|
||||
ariaHidden(nextTop.modalRef, false);
|
||||
}
|
||||
}
|
||||
return modalIndex;
|
||||
}
|
||||
isTopModal(modal) {
|
||||
return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal;
|
||||
}
|
||||
}
|
||||
+194
@@ -0,0 +1,194 @@
|
||||
'use client';
|
||||
|
||||
import _extends from "@babel/runtime/helpers/esm/extends";
|
||||
import * as React from 'react';
|
||||
import { unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_useEventCallback as useEventCallback, unstable_createChainedFunction as createChainedFunction } from '@mui/utils';
|
||||
import { extractEventHandlers } from '../utils';
|
||||
import { ModalManager, ariaHidden } from './ModalManager';
|
||||
function getContainer(container) {
|
||||
return typeof container === 'function' ? container() : container;
|
||||
}
|
||||
function getHasTransition(children) {
|
||||
return children ? children.props.hasOwnProperty('in') : false;
|
||||
}
|
||||
|
||||
// A modal manager used to track and manage the state of open Modals.
|
||||
// Modals don't open on the server so this won't conflict with concurrent requests.
|
||||
const defaultManager = new ModalManager();
|
||||
/**
|
||||
*
|
||||
* Demos:
|
||||
*
|
||||
* - [Modal](https://mui.com/base-ui/react-modal/#hook)
|
||||
*
|
||||
* API:
|
||||
*
|
||||
* - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal)
|
||||
*/
|
||||
export function useModal(parameters) {
|
||||
const {
|
||||
container,
|
||||
disableEscapeKeyDown = false,
|
||||
disableScrollLock = false,
|
||||
// @ts-ignore internal logic - Base UI supports the manager as a prop too
|
||||
manager = defaultManager,
|
||||
closeAfterTransition = false,
|
||||
onTransitionEnter,
|
||||
onTransitionExited,
|
||||
children,
|
||||
onClose,
|
||||
open,
|
||||
rootRef
|
||||
} = parameters;
|
||||
|
||||
// @ts-ignore internal logic
|
||||
const modal = React.useRef({});
|
||||
const mountNodeRef = React.useRef(null);
|
||||
const modalRef = React.useRef(null);
|
||||
const handleRef = useForkRef(modalRef, rootRef);
|
||||
const [exited, setExited] = React.useState(!open);
|
||||
const hasTransition = getHasTransition(children);
|
||||
let ariaHiddenProp = true;
|
||||
if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) {
|
||||
ariaHiddenProp = false;
|
||||
}
|
||||
const getDoc = () => ownerDocument(mountNodeRef.current);
|
||||
const getModal = () => {
|
||||
modal.current.modalRef = modalRef.current;
|
||||
modal.current.mount = mountNodeRef.current;
|
||||
return modal.current;
|
||||
};
|
||||
const handleMounted = () => {
|
||||
manager.mount(getModal(), {
|
||||
disableScrollLock
|
||||
});
|
||||
|
||||
// Fix a bug on Chrome where the scroll isn't initially 0.
|
||||
if (modalRef.current) {
|
||||
modalRef.current.scrollTop = 0;
|
||||
}
|
||||
};
|
||||
const handleOpen = useEventCallback(() => {
|
||||
const resolvedContainer = getContainer(container) || getDoc().body;
|
||||
manager.add(getModal(), resolvedContainer);
|
||||
|
||||
// The element was already mounted.
|
||||
if (modalRef.current) {
|
||||
handleMounted();
|
||||
}
|
||||
});
|
||||
const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
|
||||
const handlePortalRef = useEventCallback(node => {
|
||||
mountNodeRef.current = node;
|
||||
if (!node) {
|
||||
return;
|
||||
}
|
||||
if (open && isTopModal()) {
|
||||
handleMounted();
|
||||
} else if (modalRef.current) {
|
||||
ariaHidden(modalRef.current, ariaHiddenProp);
|
||||
}
|
||||
});
|
||||
const handleClose = React.useCallback(() => {
|
||||
manager.remove(getModal(), ariaHiddenProp);
|
||||
}, [ariaHiddenProp, manager]);
|
||||
React.useEffect(() => {
|
||||
return () => {
|
||||
handleClose();
|
||||
};
|
||||
}, [handleClose]);
|
||||
React.useEffect(() => {
|
||||
if (open) {
|
||||
handleOpen();
|
||||
} else if (!hasTransition || !closeAfterTransition) {
|
||||
handleClose();
|
||||
}
|
||||
}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
||||
const createHandleKeyDown = otherHandlers => event => {
|
||||
var _otherHandlers$onKeyD;
|
||||
(_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, event);
|
||||
|
||||
// The handler doesn't take event.defaultPrevented into account:
|
||||
//
|
||||
// event.preventDefault() is meant to stop default behaviors like
|
||||
// clicking a checkbox to check it, hitting a button to submit a form,
|
||||
// and hitting left arrow to move the cursor in a text input etc.
|
||||
// Only special HTML elements have these default behaviors.
|
||||
if (event.key !== 'Escape' || event.which === 229 ||
|
||||
// Wait until IME is settled.
|
||||
!isTopModal()) {
|
||||
return;
|
||||
}
|
||||
if (!disableEscapeKeyDown) {
|
||||
// Swallow the event, in case someone is listening for the escape key on the body.
|
||||
event.stopPropagation();
|
||||
if (onClose) {
|
||||
onClose(event, 'escapeKeyDown');
|
||||
}
|
||||
}
|
||||
};
|
||||
const createHandleBackdropClick = otherHandlers => event => {
|
||||
var _otherHandlers$onClic;
|
||||
(_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event);
|
||||
if (event.target !== event.currentTarget) {
|
||||
return;
|
||||
}
|
||||
if (onClose) {
|
||||
onClose(event, 'backdropClick');
|
||||
}
|
||||
};
|
||||
const getRootProps = (otherHandlers = {}) => {
|
||||
const propsEventHandlers = extractEventHandlers(parameters);
|
||||
|
||||
// The custom event handlers shouldn't be spread on the root element
|
||||
delete propsEventHandlers.onTransitionEnter;
|
||||
delete propsEventHandlers.onTransitionExited;
|
||||
const externalEventHandlers = _extends({}, propsEventHandlers, otherHandlers);
|
||||
return _extends({
|
||||
role: 'presentation'
|
||||
}, externalEventHandlers, {
|
||||
onKeyDown: createHandleKeyDown(externalEventHandlers),
|
||||
ref: handleRef
|
||||
});
|
||||
};
|
||||
const getBackdropProps = (otherHandlers = {}) => {
|
||||
const externalEventHandlers = otherHandlers;
|
||||
return _extends({
|
||||
'aria-hidden': true
|
||||
}, externalEventHandlers, {
|
||||
onClick: createHandleBackdropClick(externalEventHandlers),
|
||||
open
|
||||
});
|
||||
};
|
||||
const getTransitionProps = () => {
|
||||
const handleEnter = () => {
|
||||
setExited(false);
|
||||
if (onTransitionEnter) {
|
||||
onTransitionEnter();
|
||||
}
|
||||
};
|
||||
const handleExited = () => {
|
||||
setExited(true);
|
||||
if (onTransitionExited) {
|
||||
onTransitionExited();
|
||||
}
|
||||
if (closeAfterTransition) {
|
||||
handleClose();
|
||||
}
|
||||
};
|
||||
return {
|
||||
onEnter: createChainedFunction(handleEnter, children == null ? void 0 : children.props.onEnter),
|
||||
onExited: createChainedFunction(handleExited, children == null ? void 0 : children.props.onExited)
|
||||
};
|
||||
};
|
||||
return {
|
||||
getRootProps,
|
||||
getBackdropProps,
|
||||
getTransitionProps,
|
||||
rootRef: handleRef,
|
||||
portalRef: handlePortalRef,
|
||||
isTopModal,
|
||||
exited,
|
||||
hasTransition
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user