@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,23 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { TooltipPlacement, TooltipProps as TooltipProps$1 } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+import { ReactNode } from "react";
+
+//#region src/components/tooltip/Tooltip.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface TooltipProps extends index_d_exports.GenericProps, TooltipProps$1 {
+  /** Anchor (element on which we activate the tooltip). */
+  children: ReactNode;
+}
+/**
+ * Tooltip component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Tooltip: Comp<TooltipProps, HTMLDivElement>;
+//#endregion
+export { Tooltip, TooltipProps };

package/_internal/components/tooltip/Tooltip.js

@@ -0,0 +1,69 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useMergeRefs } from "../../utils/react/mergeRefs.js";
+import { TooltipContextProvider } from "./context.js";
+import { autoUpdate } from "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { offset, useFloating } from "../../node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js";
+import { DOCUMENT, IS_BROWSER } from "../../constants.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, TooltipPopup } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+import { Portal } from "../../utils/Portal/Portal.js";
+import { useInjectTooltipRef } from "./useInjectTooltipRef.js";
+import { useTooltipOpen } from "./useTooltipOpen.js";
+import { useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tooltip/Tooltip.tsx
+/**
+* Tooltip component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Tooltip = forwardRef((props, ref) => {
+	const { label, children, className, delay, placement = DEFAULT_PROPS.placement, forceOpen, closeMode = DEFAULT_PROPS.closeMode, ariaLinkMode = DEFAULT_PROPS.ariaLinkMode, zIndex = DEFAULT_PROPS.zIndex, ...forwardedProps } = props;
+	if (!DOCUMENT) return /* @__PURE__ */ jsx(Fragment, { children });
+	const id = useId();
+	const [popperElement, setPopperElement] = useState(null);
+	const [anchorElement, setAnchorElement] = useState(null);
+	const { floatingStyles, placement: resolvedPlacement } = useFloating({
+		placement,
+		...IS_BROWSER ? {
+			whileElementsMounted: autoUpdate,
+			elements: {
+				reference: anchorElement,
+				floating: popperElement
+			}
+		} : {},
+		middleware: [offset(8)]
+	});
+	const position = resolvedPlacement ?? placement;
+	const { isOpen: isActivated, onPopperMount } = useTooltipOpen(delay, anchorElement);
+	const isOpen = (isActivated || forceOpen) && !!label;
+	const isMounted = !!label && (isOpen || closeMode === "hide");
+	const isHidden = !isOpen && closeMode === "hide";
+	const wrappedChildren = useInjectTooltipRef({
+		children,
+		setAnchorElement,
+		isMounted,
+		id,
+		label,
+		ariaLinkMode
+	});
+	const tooltipRef = useMergeRefs(ref, setPopperElement, onPopperMount);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipContextProvider, { children: wrappedChildren }), isMounted && /* @__PURE__ */ jsx(Portal, { children: TooltipPopup({
+		ref: tooltipRef,
+		...forwardedProps,
+		id,
+		label,
+		position,
+		isHidden,
+		style: isHidden ? void 0 : floatingStyles,
+		zIndex,
+		className
+	}) })] });
+});
+Tooltip.displayName = COMPONENT_NAME;
+Tooltip.className = CLASSNAME;
+Tooltip.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Tooltip };

package/_internal/components/tooltip/context.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tooltip/context.tsx
+var DEFAULT_VALUE = {};
+/**
+* Tooltip react context simply used as a marker to know when parent react node have a tooltip
+*/
+var TooltipContext = React.createContext(void 0);
+var TooltipContextProvider = ({ children }) => /* @__PURE__ */ jsx(TooltipContext.Provider, {
+	value: DEFAULT_VALUE,
+	children
+});
+var useTooltipContext = () => React.useContext(TooltipContext);
+//#endregion
+export { TooltipContextProvider, useTooltipContext };

package/_internal/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+import { TooltipPlacement } from "../../packages/lumx-core/src/js/components/Tooltip/index.js";
+import { Tooltip, TooltipProps } from "./Tooltip.js";

package/_internal/components/tooltip/useInjectTooltipRef.js

@@ -0,0 +1,43 @@
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import React, { cloneElement, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tooltip/useInjectTooltipRef.tsx
+/**
+* Add ref and ARIA attribute(s) in tooltip children or wrapped children.
+* Button, IconButton, Icon and React HTML elements don't need to be wrapped but any other kind of children (array, fragment, custom components)
+* will be wrapped in a <span>.
+*/
+var useInjectTooltipRef = (options) => {
+	const { children, setAnchorElement, isMounted, id, label, ariaLinkMode } = options;
+	const linkId = isMounted ? id : void 0;
+	return useMemo(() => {
+		if (!label) return children;
+		if (React.isValidElement(children) && children.props.disabled !== true && children.props.isDisabled !== true) {
+			const ref = mergeRefs(children.ref, setAnchorElement);
+			const props = {
+				...children.props,
+				ref
+			};
+			if (linkId && label !== props["aria-label"]) {
+				if (props[ariaLinkMode]) props[ariaLinkMode] += " ";
+				else props[ariaLinkMode] = "";
+				props[ariaLinkMode] += linkId;
+			}
+			return cloneElement(children, props);
+		}
+		return /* @__PURE__ */ jsx("div", {
+			className: "lumx-tooltip-anchor-wrapper",
+			ref: setAnchorElement,
+			...linkId ? { [ariaLinkMode]: linkId } : void 0,
+			children
+		});
+	}, [
+		label,
+		children,
+		setAnchorElement,
+		linkId,
+		ariaLinkMode
+	]);
+};
+//#endregion
+export { useInjectTooltipRef };

package/_internal/components/tooltip/useTooltipOpen.js

@@ -0,0 +1,36 @@
+import { useCallbackOnEscape } from "../../hooks/useCallbackOnEscape.js";
+import { createTooltipOpenManager } from "../../packages/lumx-core/src/js/components/Tooltip/tooltipOpenManager.js";
+import { useEffect, useRef, useState } from "react";
+//#region src/components/tooltip/useTooltipOpen.tsx
+/**
+* Hook controlling tooltip visibility using mouse hover the anchor and delay.
+*
+* @param  delay         Delay in millisecond to display the tooltip.
+* @param  anchorElement Tooltip anchor element.
+* @return whether or not to show the tooltip.
+*/
+function useTooltipOpen(delay, anchorElement) {
+	const [isOpen, setIsOpen] = useState(false);
+	const onPopperMount = useRef(null);
+	const managerRef = useRef(null);
+	useCallbackOnEscape(isOpen ? () => managerRef.current?.close() : void 0);
+	useEffect(() => {
+		if (!anchorElement) return;
+		const manager = createTooltipOpenManager({
+			delay,
+			onStateChange: setIsOpen
+		});
+		managerRef.current = manager;
+		onPopperMount.current = (el) => manager.attachPopper(el);
+		manager.attachAnchor(anchorElement);
+		return () => {
+			manager.destroy();
+		};
+	}, [anchorElement, delay]);
+	return {
+		isOpen,
+		onPopperMount: onPopperMount.current
+	};
+}
+//#endregion
+export { useTooltipOpen };

package/_internal/components/uploader/Uploader.d.ts

@@ -0,0 +1,29 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { UploaderProps as UploaderProps$1, UploaderPropsToOverride, UploaderSize, UploaderVariant } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+import React, { MouseEventHandler } from "react";
+
+//#region src/components/uploader/Uploader.d.ts
+interface ReactFileInputProps extends Omit<React.ComponentProps<'input'>, 'onChange'> {
+  onChange?(files: File[], evt: React.ChangeEvent<HTMLInputElement>): void;
+}
+/**
+ * Defines the props of the component.
+ */
+interface UploaderProps extends index_d_exports.GenericProps, ReactToJSX<UploaderProps$1, UploaderPropsToOverride> {
+  /** On click callback. */
+  onClick?: MouseEventHandler;
+  /** Handle file selection with a native input file. */
+  fileInputProps?: ReactFileInputProps;
+}
+/**
+ * Uploader component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Uploader: Comp<UploaderProps, HTMLElement>;
+//#endregion
+export { Uploader, UploaderProps };

package/_internal/components/uploader/Uploader.js

@@ -0,0 +1,71 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { useBooleanState } from "../../hooks/useBooleanState.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, Uploader as Uploader$1 } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+//#region src/components/uploader/Uploader.tsx
+/**
+* Uploader component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Uploader = forwardRef((props, ref) => {
+	const { disabledStateProps, otherProps, isAnyDisabled } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { theme = defaultTheme, fileInputProps, onClick, ...forwardedProps } = otherProps;
+	const handleClick = React.useCallback((evt) => {
+		if (isAnyDisabled) evt.preventDefault();
+		else onClick?.(evt);
+	}, [isAnyDisabled, onClick]);
+	const generatedInputId = useId();
+	const inputId = fileInputProps?.id || generatedInputId;
+	const [isDragHovering, unsetDragHovering, setDragHovering] = useBooleanState(false);
+	const wrapper = fileInputProps ? {
+		Component: "label",
+		props: { htmlFor: inputId }
+	} : {
+		Component: "button",
+		props: {
+			type: "button",
+			...disabledStateProps
+		}
+	};
+	const onChange = React.useMemo(() => {
+		if (isAnyDisabled || !fileInputProps?.onChange) return void 0;
+		return (evt) => {
+			const fileList = evt.target.files;
+			const files = fileList ? Array.from(fileList) : [];
+			fileInputProps.onChange?.(files, evt);
+		};
+	}, [isAnyDisabled, fileInputProps]);
+	return Uploader$1({
+		Component: wrapper.Component,
+		ref,
+		inputId,
+		handleClick,
+		handleChange: onChange,
+		isAnyDisabled,
+		isDragHovering,
+		theme,
+		fileInputProps: fileInputProps ? {
+			...fileInputProps,
+			...disabledStateProps,
+			readOnly: isAnyDisabled,
+			onDragEnter: setDragHovering,
+			onDragLeave: unsetDragHovering,
+			onDrop: unsetDragHovering
+		} : void 0,
+		...wrapper.props,
+		...forwardedProps
+	});
+});
+Uploader.displayName = COMPONENT_NAME;
+Uploader.className = CLASSNAME;
+Uploader.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Uploader };

package/_internal/components/uploader/index.d.ts

@@ -0,0 +1,2 @@
+import { UploaderSize, UploaderVariant } from "../../packages/lumx-core/src/js/components/Uploader/index.js";
+import { Uploader, UploaderProps } from "./Uploader.js";

package/_internal/components/user-block/UserBlock.d.ts

@@ -0,0 +1,33 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { ReactToJSX } from "../../utils/type/ReactToJSX.js";
+import { AvatarProps } from "../avatar/Avatar.js";
+import { UserBlockProps as UserBlockProps$1, UserBlockPropsToOverride, UserBlockSize } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+import React from "react";
+
+//#region src/components/user-block/UserBlock.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface UserBlockProps extends index_d_exports.GenericProps, ReactToJSX<UserBlockProps$1, UserBlockPropsToOverride> {
+  /** Props to pass to the avatar. */
+  avatarProps?: Omit<AvatarProps, 'alt'>;
+  /** Props to pass to the link wrapping the avatar thumbnail. */
+  linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
+  /** On click callback. */
+  onClick?(): void;
+  /** On mouse enter callback. */
+  onMouseEnter?(): void;
+  /** On mouse leave callback. */
+  onMouseLeave?(): void;
+}
+/**
+ * UserBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const UserBlock: Comp<UserBlockProps, HTMLDivElement>;
+//#endregion
+export { UserBlock, UserBlockProps };

package/_internal/components/user-block/UserBlock.js

@@ -0,0 +1,88 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { Avatar } from "../avatar/Avatar.js";
+import { Text } from "../text/Text.js";
+import { Link } from "../link/Link.js";
+import { CLASSNAME, COMPONENT_NAME, DEFAULT_PROPS, UserBlock as UserBlock$1, element, isUserBlockClickeable } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import isEmpty from "lodash/isEmpty.js";
+import set from "lodash/set.js";
+//#region src/components/user-block/UserBlock.tsx
+/**
+* UserBlock component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var UserBlock = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { onClick, onMouseEnter, onMouseLeave, theme = defaultTheme, nameProps, avatarProps, name, linkProps, linkAs, children, ...forwardedProps } = props;
+	const isClickable = isUserBlockClickeable({
+		linkAs,
+		linkProps,
+		handleClick: onClick
+	});
+	/**
+	* This logic needs to occur on the wrapper level, since core templates cannot manage
+	* the render of dynamically determined components. So `NameComponent`, if moved to core,
+	* it will return an `undefined`
+	*/
+	const nameBlock = React.useMemo(() => {
+		if (isEmpty(name)) return null;
+		let NameComponent = "span";
+		const nProps = {
+			...nameProps,
+			className: classNames.join(element("name"), linkProps?.className, nameProps?.className)
+		};
+		if (isClickable) {
+			NameComponent = Link;
+			Object.assign(nProps, {
+				...linkProps,
+				onClick,
+				linkAs,
+				color: src_exports.ColorPalette.dark
+			});
+		}
+		if (avatarProps) set(avatarProps, ["thumbnailProps", "tabIndex"], -1);
+		return /* @__PURE__ */ jsx(NameComponent, {
+			...nProps,
+			children: /* @__PURE__ */ jsx(Text, {
+				as: "span",
+				children: name
+			})
+		});
+	}, [
+		avatarProps,
+		isClickable,
+		linkAs,
+		linkProps,
+		name,
+		nameProps,
+		onClick
+	]);
+	return UserBlock$1({
+		Avatar,
+		ref,
+		Text,
+		handleClick: onClick,
+		handleMouseEnter: onMouseEnter,
+		handleMouseLeave: onMouseLeave,
+		theme,
+		nameProps,
+		avatarProps,
+		name,
+		linkProps,
+		linkAs,
+		...forwardedProps,
+		children: children || nameBlock
+	});
+});
+UserBlock.displayName = COMPONENT_NAME;
+UserBlock.className = CLASSNAME;
+UserBlock.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { UserBlock };

package/_internal/components/user-block/index.d.ts

@@ -0,0 +1,2 @@
+import { UserBlockSize } from "../../packages/lumx-core/src/js/components/UserBlock/index.js";
+import { UserBlock, UserBlockProps } from "./UserBlock.js";

package/_internal/constants.js

@@ -0,0 +1,2 @@
+import { DIALOG_TRANSITION_DURATION, DOCUMENT, IS_BROWSER, NOTIFICATION_TRANSITION_DURATION, WINDOW } from "@lumx/core/js/constants";
+export { DIALOG_TRANSITION_DURATION, DOCUMENT, IS_BROWSER, NOTIFICATION_TRANSITION_DURATION, WINDOW };

package/_internal/hooks/useBooleanState.js

@@ -0,0 +1,13 @@
+import { useCallback, useState } from "react";
+//#region src/hooks/useBooleanState.tsx
+var useBooleanState = (defaultValue) => {
+	const [booleanValue, setBoolean] = useState(defaultValue);
+	return [
+		booleanValue,
+		useCallback(() => setBoolean(false), []),
+		useCallback(() => setBoolean(true), []),
+		useCallback(() => setBoolean((previousValue) => !previousValue), [])
+	];
+};
+//#endregion
+export { useBooleanState };

package/_internal/hooks/useCallbackOnEscape.js

@@ -0,0 +1,30 @@
+import { DOCUMENT } from "../constants.js";
+import { makeListenerTowerContext } from "../packages/lumx-core/src/js/utils/function/listenerTower.js";
+import { useEffect } from "react";
+import { onEscapePressed } from "@lumx/core/js/utils";
+//#region src/hooks/useCallbackOnEscape.ts
+var LISTENERS = makeListenerTowerContext();
+/**
+* Register a global listener on 'Escape' key pressed.
+*
+* If multiple listener are registered, only the last one is maintained. When a listener is unregistered, the previous
+* one gets activated again.
+*
+* @param callback      Callback
+* @param closeOnEscape Disables the hook when false
+*/
+function useCallbackOnEscape(callback, closeOnEscape = true) {
+	useEffect(() => {
+		const rootElement = DOCUMENT?.body;
+		if (!closeOnEscape || !callback || !rootElement) return;
+		const onKeyDown = onEscapePressed(callback);
+		const listener = {
+			enable: () => rootElement.addEventListener("keydown", onKeyDown),
+			disable: () => rootElement.removeEventListener("keydown", onKeyDown)
+		};
+		LISTENERS.register(listener);
+		return () => LISTENERS.unregister(listener);
+	}, [callback, closeOnEscape]);
+}
+//#endregion
+export { useCallbackOnEscape };

package/_internal/hooks/useChipGroupNavigation.d.ts

@@ -0,0 +1,12 @@
+//#region src/hooks/useChipGroupNavigation.d.ts
+interface UseChipGroupNavigation {
+  /** the current active chip index */
+  activeChip: number;
+  /** callback to be executed when the backspace was pressed */
+  onBackspacePressed(): void;
+  /** function that allows to reset the navigation */
+  resetChipNavigation(): void;
+}
+type useChipGroupNavigationType<C = any> = (chips: C[], onChipDeleted: (chip: C) => void, initialActiveChip?: number) => UseChipGroupNavigation;
+//#endregion
+export { useChipGroupNavigationType };

package/_internal/hooks/useChipGroupNavigation.js

@@ -0,0 +1,49 @@
+import { useState } from "react";
+//#region src/hooks/useChipGroupNavigation.tsx
+var INITIAL_STATE_ACTIVE_CHIP = -1;
+/**
+* Hook that provides the necessary information to manage chips navigation.
+* @param chips             List of chips selected.
+* @param onChipDeleted     Callback executed when a chip must be eliminated.
+* @param initialActiveChip Initial active chip index.
+*
+* @return chip navigation tools.
+*/
+var useChipGroupNavigation = (chips, onChipDeleted, initialActiveChip = INITIAL_STATE_ACTIVE_CHIP) => {
+	const [wasBackspacePressed, setWasBackspacePressed] = useState(false);
+	const [activeChip, setActiveChip] = useState(initialActiveChip);
+	/**
+	* Resets the active index and backspace control to their initial state
+	*/
+	const resetChipNavigation = () => {
+		setWasBackspacePressed(false);
+		setActiveChip(initialActiveChip);
+	};
+	/**
+	* Callback to be executed when the backspace was pressed. If there are no chips
+	* selected, it will return immediately. If there are it will check if the
+	* backspace was already pressed. if it was, it means that the user wants to eliminate
+	* the chip, so we execute the `onChipDeleted` function and reset internal state.
+	*
+	* If it was not pressed before, we set the `wasBackspacePressed` flag to true and
+	* highlight the last chip.
+	*/
+	const onBackspacePressed = () => {
+		if (chips.length === 0) return;
+		if (wasBackspacePressed) {
+			const chipDeleted = chips[chips.length - 1];
+			onChipDeleted(chipDeleted);
+			resetChipNavigation();
+		} else {
+			setActiveChip(chips.length - 1);
+			setWasBackspacePressed(true);
+		}
+	};
+	return {
+		activeChip,
+		onBackspacePressed,
+		resetChipNavigation
+	};
+};
+//#endregion
+export { useChipGroupNavigation };

package/_internal/hooks/useClickAway.d.ts

@@ -0,0 +1,16 @@
+import { index_d_exports } from "../utils/type/index.js";
+import { RefObject } from "react";
+
+//#region src/hooks/useClickAway.d.ts
+interface ClickAwayParameters {
+  /**
+   * A callback function to call when the user clicks away from the elements.
+   */
+  callback: EventListener | index_d_exports.Falsy;
+  /**
+   * Elements considered within the click away context (clicking outside them will trigger the click away callback).
+   */
+  childrenRefs: RefObject<Array<RefObject<HTMLElement>>>;
+}
+//#endregion
+export { ClickAwayParameters };

package/_internal/hooks/useClickAway.js

@@ -0,0 +1,20 @@
+import { setupClickAway } from "../packages/lumx-core/src/js/utils/ClickAway/index.js";
+import { useEffect } from "react";
+//#region src/hooks/useClickAway.tsx
+/**
+* Listen to clicks away from the given elements and callback the passed in function.
+*
+* Warning: If you need to detect click away on nested React portals, please use the `ClickAwayProvider` component.
+*/
+function useClickAway({ callback, childrenRefs }) {
+	useEffect(() => {
+		const getElements = () => {
+			const refs = childrenRefs.current;
+			if (!refs) return [];
+			return refs.map((ref) => ref?.current).filter(Boolean);
+		};
+		return setupClickAway(getElements, callback);
+	}, [callback, childrenRefs]);
+}
+//#endregion
+export { useClickAway };

package/_internal/hooks/useDisableBodyScroll.js

@@ -0,0 +1,25 @@
+import { disableBodyScroll, enableBodyScroll } from "../node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js";
+import { useEffect } from "react";
+//#region src/hooks/useDisableBodyScroll.ts
+/**
+* Disables the scroll on the body to make it only usable in the current modal element.
+* When the modal element is not provided anymore, the scroll is restored.
+*
+* @param modalElement The modal element.
+*/
+var useDisableBodyScroll = (modalElement) => {
+	useEffect(() => {
+		if (!modalElement) return;
+		const previousDocumentOverflow = document.documentElement.style.overflow;
+		document.documentElement.style.overflow = "visible";
+		disableBodyScroll(modalElement);
+		return () => {
+			enableBodyScroll(modalElement);
+			requestAnimationFrame(() => {
+				document.documentElement.style.overflow = previousDocumentOverflow;
+			});
+		};
+	}, [modalElement]);
+};
+//#endregion
+export { useDisableBodyScroll };

package/_internal/hooks/useEventCallback.js

@@ -0,0 +1,21 @@
+import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect.js";
+import React from "react";
+//#region src/hooks/useEventCallback.tsx
+/**
+* Returns a stable callback that always calls the latest version of `fn`.
+* Useful to avoid re-running effects when a callback prop changes reference.
+*
+* https://github.com/facebook/react/issues/14099#issuecomment-440013892
+*
+* @param fn A function to stabilize.
+* @return A stable function with the same signature.
+*/
+function useEventCallback(fn) {
+	const ref = React.useRef(fn);
+	useIsomorphicLayoutEffect(() => {
+		ref.current = fn;
+	});
+	return React.useCallback((...args) => ref.current?.(...args), []);
+}
+//#endregion
+export { useEventCallback };

package/_internal/hooks/useFocus.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+//#region src/hooks/useFocus.tsx
+/**
+* Hook focusing an element when defined and `focus` boolean `true`.
+*
+* @param element       Element to focus.
+* @param shouldFocus   Boolean flag to trigger the focus
+*/
+function useFocus(element, shouldFocus = true) {
+	const [wasFocus, setWasFocus] = useState(false);
+	useEffect(() => {
+		if (shouldFocus && wasFocus !== shouldFocus && element) {
+			element.focus();
+			setWasFocus(shouldFocus);
+		}
+	}, [element, shouldFocus]);
+}
+//#endregion
+export { useFocus };