Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
export function press(
key: string,
element?: Element | null,
options: KeyboardEventInit = {}
) {
if (element == null) {
element = document.activeElement || document.body;
}
if (!element) return;
// We can't press on elements that aren't focusable
if (!isFocusable(element) && element.tagName !== "BODY") return;
// If element is not focused, we should focus it
if (element.ownerDocument?.activeElement !== element) {
if (element.tagName === "BODY") {
blur();
} else {
focus(element);
}
}
// Track event.preventDefault() calls so we bail out of keydown/keyup effects
const defaultPrevented = subscribeDefaultPrevented(
element,
"keydown",
"keyup"
);
export function type(
text: string,
element?: DirtiableElement | null,
options: InputEventInit = {}
) {
if (element == null) {
element = document.activeElement;
}
if (!element || !isFocusable(element)) return;
if (!isTextField(element)) {
warning(
true,
"[reakit-test-utils/type]",
"You're trying to type on an element that is not able of being typed on a keyboard."
);
return;
}
focus(element);
// Set element dirty so blur() can dispatch a change event
element.dirty = true;
for (const char of text) {
// Move focus onto menu after blurring
if (
document.activeElement === document.body &&
menuRef.current &&
!isTouchDevice()
) {
menuRef.current.focus();
}
},
[menuRef]
);
return {
role: "menuitem",
onMouseOver: useAllCallbacks(onMouseOver, htmlOnMouseOver),
onMouseOut: useAllCallbacks(onMouseOut, htmlOnMouseOut),
...htmlProps
};
}
});
useUpdateEffect(() => {
const dialog = dialogRef.current;
warning(
Boolean(shouldFocus && !dialog),
"[reakit/Dialog]",
"Can't set initial focus on dialog because `ref` wasn't passed to component.",
"See https://reakit.io/docs/dialog"
);
// If there're nested open dialogs, let them handle focus
if (
!shouldFocus ||
!dialog ||
nestedDialogs.find(child =>
Boolean(child.current && !child.current.hidden)
)
) {
return;
}
export function useHiddenState(
initialState: SealedInitialState = {}
): HiddenStateReturn {
const {
unstable_animated: animated = false,
visible: sealedVisible = false,
unstable_isMounted: initialIsMounted = false,
...sealed
} = useSealedState(initialState);
const id = unstable_useIdState(sealed);
const [visible, setVisible] = React.useState(sealedVisible);
const [animating, setAnimating] = React.useState(false);
const [isMounted, setIsMounted] = React.useState(initialIsMounted);
const lastVisible = useLastValue(visible);
if (
animated &&
!animating &&
lastVisible.current != null &&
lastVisible.current !== visible
) {
// Sets animating to true when when visible changes
setAnimating(true);
const [visible, setVisible] = React.useState(sealedVisible);
const [animating, setAnimating] = React.useState(false);
const [isMounted, setIsMounted] = React.useState(initialIsMounted);
const lastVisible = useLastValue(visible);
if (
animated &&
!animating &&
lastVisible.current != null &&
lastVisible.current !== visible
) {
// Sets animating to true when when visible changes
setAnimating(true);
}
useIsomorphicEffect(() => {
if (typeof animated !== "number") return undefined;
// Stops animation after an interval defined by animated
const timeoutId = setTimeout(() => setAnimating(false), animated);
return () => clearTimeout(timeoutId);
}, [animated]);
const show = React.useCallback(() => {
warning(
!isMounted,
"[reakit/Hidden]",
"You're trying to show a hidden element that hasn't been mounted yet.",
"You shouldn't conditionally render a `Hidden` component (or any of its derivatives) as this will make some features not work.",
"If this is intentional, you can omit this warning by passing `unstable_isMounted: true` to `useHiddenState` or just ignore it.",
"See https://reakit.io/docs/hidden/#conditionally-rendering"
);
setVisible(true);
export function createHook(options: CreateHookOptions) {
const composedHooks = toArray(options.compose) as Hook[];
const __useOptions = (hookOptions: O, htmlProps: P) => {
// Call the current hook's useOptions first
if (options.useOptions) {
hookOptions = options.useOptions(hookOptions, htmlProps);
}
// If there's name, call useOptions from the system context
if (options.name) {
hookOptions = useOptions(options.name, hookOptions, htmlProps);
}
return hookOptions;
};
const useHook: Hook = (
hookOptions = {} as O,
htmlProps = {} as P,
export function useFocusOnShow(
dialogRef: React.RefObject,
nestedDialogs: Array>,
options: DialogOptions
) {
const initialFocusRef = options.unstable_initialFocusRef;
const shouldFocus = options.visible && options.unstable_autoFocusOnShow;
useUpdateEffect(() => {
const dialog = dialogRef.current;
warning(
Boolean(shouldFocus && !dialog),
"[reakit/Dialog]",
"Can't set initial focus on dialog because `ref` wasn't passed to component.",
"See https://reakit.io/docs/dialog"
);
// If there're nested open dialogs, let them handle focus
if (
!shouldFocus ||
!dialog ||
nestedDialogs.find(child =>
Boolean(child.current && !child.current.hidden)
)
export function useFocusOnHide(
dialogRef: React.RefObject,
disclosuresRef: React.RefObject,
options: DialogOptions
) {
const shouldFocus = options.unstable_autoFocusOnHide && !options.visible;
useUpdateEffect(() => {
if (!shouldFocus) return;
const dialog = dialogRef.current;
// Hide was triggered by a click/focus on a tabbable element outside
// the dialog or on another dialog. We won't change focus then.
if (
document.activeElement &&
dialog &&
!dialog.contains(document.activeElement) &&
(isTabbable(document.activeElement) ||
document.activeElement.getAttribute("data-dialog") === "true")
) {
return;
}
const finalFocusEl =
export const Demoboard = (props: DemoboardProps = defaultProps) => {
// Each demoboard managed by a single worker needs to have a unique id.
// Given that a worker may be shared over multiple nested demoboards, we'll
// want to scope our generated ids by demoboard id.
const demoboard = (typeof window !== 'undefined' &&
(window as any).demoboard) || {
id: 'demoboard',
}
const defaultId = useId(demoboard.id + '-')
const { id = defaultId, width, height, style, className, ...rest } = props
const project = useDemoboardProject(rest)
const build = useDemoboardBuild(id, project.buildConfig)
const instance = useDemoboardInstance({
build,
history: project.state.view.history,
pause: false,
onChangeHistory: value => {
project.dispatch({
type: 'history.set',
history: value,
})
},
})