@design-edito/tools 0.5.9 → 0.5.11

package/components/Theatre/index.js

@@ -1,85 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState, useRef } from 'react';
-import { clss } from '../../agnostic/css/clss/index.js';
-import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
-import { theatre as publicClassName } from '../public-classnames.js';
-import cssModule from './styles.module.css';
-/**
- * Theatre mode component. Wraps content in a toggleable fullscreen-like "stage"
- * overlay.
- *
- * ### CSS modifiers
- * - `on` — theatre mode is active.
- * - `off` — theatre mode is inactive.
- *
- * ### CSS elements
- * - `stage` — holds the duplicated `children`, mounted only when `isOn`.
- * - `open-btn`
- * - `close-btn`
- *
- * @param props - Component properties.
- * @see {@link Props}
- * @returns A root `<div>` containing the children in their original position,
- * a stage overlay with the duplicated children when active, and both toggles.
- *
- * @remarks
- * - In controlled mode (`isOn` defined), the state is fully driven by the
- *   parent and internal state is never updated.
- * - The four toggle-source handlers fire in both modes — a controlled parent
- *   needs them to know a toggle was requested at all.
- * - `onIsOnChanged` fires in both modes too, and never on mount.
- */
-export const Theatre = ({ closeBtnContent, openBtnContent, isOn: isOnProp, defaultIsOn = false, exitOnEscape, exitOnBgClick, onOpenButtonClicked, onCloseButtonClicked, onBackgroundClicked, onEscapePressed, onIsOnChanged, children, className }) => {
-    // State & refs
-    const [internalIsOn, setInternalIsOn] = useState(defaultIsOn);
-    const stageRef = useRef(null);
-    const isControlled = isOnProp !== undefined;
-    const isOn = isOnProp ?? internalIsOn;
-    // State dispatch
-    useChangeDispatch(isOn, onIsOnChanged);
-    // User action handlers
-    const requestToggle = (targetIsOn) => {
-        if (isControlled)
-            return;
-        setInternalIsOn(targetIsOn);
-    };
-    const handleOpenButtonClick = () => {
-        onOpenButtonClicked?.(isOn);
-        requestToggle(true);
-    };
-    const handleCloseButtonClick = () => {
-        onCloseButtonClicked?.(isOn);
-        requestToggle(false);
-    };
-    const handleStageBgClick = e => {
-        if (exitOnBgClick !== true)
-            return;
-        if (e.target !== stageRef.current)
-            return;
-        onBackgroundClicked?.(isOn);
-        requestToggle(false);
-    };
-    // Fx. dep. `exitOnEscape`, `isOn` - close the stage on the Escape key
-    useEffect(() => {
-        if (exitOnEscape !== true || !isOn)
-            return;
-        const handleKeyDown = (e) => {
-            if (e.key !== 'Escape')
-                return;
-            onEscapePressed?.(isOn);
-            requestToggle(false);
-        };
-        window.addEventListener('keydown', handleKeyDown);
-        return () => window.removeEventListener('keydown', handleKeyDown);
-    }, [exitOnEscape, isOn, isControlled, onEscapePressed]);
-    // Rendering
-    const c = clss(publicClassName, { cssModule });
-    const rootClss = mergeClassNames(c(null, {
-        'on': isOn,
-        'off': !isOn
-    }), className);
-    const stageClss = c('stage');
-    const openBtnClss = c('open-btn');
-    const closeBtnClss = c('close-btn');
-    return _jsxs("div", { className: rootClss, children: [children, _jsx("div", { className: stageClss, onClick: handleStageBgClick, ref: stageRef, children: isOn && children }), _jsx("div", { className: closeBtnClss, onClick: handleCloseButtonClick, children: closeBtnContent }), _jsx("div", { className: openBtnClss, onClick: handleOpenButtonClick, children: openBtnContent })] });
-};