@design-edito/tools 0.4.5 → 0.4.6

package/components/Image/index.js

@@ -1,295 +1,68 @@
-// src/components/Image/index.tsx
-import {
-  useState as useState3,
-  useMemo,
-  useCallback
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
-        });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/components/Disclaimer/index.tsx
-import {
-  useState,
-  useEffect,
-  useRef
-} from "react";
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var disclaimer = "dsed-disclaimer";
-var image = "dsed-image";
-var theatre = "dsed-theatre";
-
-// src/components/Disclaimer/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Disclaimer = ({
-  content,
-  togglerContent,
-  isOn: isOnProp,
-  defaultIsOn: defaultIsOnProp,
-  stateHandlers,
-  actionHandlers,
-  children,
-  className
-}) => {
-  const [internalIsOn, setInternalIsOn] = useState(isOnProp ?? defaultIsOnProp ?? true);
-  const isOn = isOnProp ?? internalIsOn;
-  const pIsOn = useRef(isOn);
-  useEffect(() => {
-    if (pIsOn.current === isOn) return;
-    stateHandlers?.toggled?.(isOn);
-    pIsOn.current = isOn;
-  }, [isOn]);
-  const handleDismissClick = () => {
-    actionHandlers?.dismissClick?.(isOn);
-    if (isOnProp !== void 0) return;
-    setInternalIsOn(false);
-  };
-  const c = clss(disclaimer, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      on: isOn,
-      off: !isOn
-    }),
-    className
-  );
-  const panelClss = c("panel");
-  const contentClss = c("content");
-  const btnClss = c("toggler");
-  const sensitiveClss = c("sensitive");
-  return /* @__PURE__ */ jsxs("div", { className: rootClss, children: [
-    /* @__PURE__ */ jsxs("div", { className: panelClss, children: [
-      content !== void 0 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: contentClss,
-          children: content
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { Disclaimer } from '../Disclaimer/index.js';
+import { Theatre } from '../Theatre/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { image as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Image component. Wraps a native `<img>` (or `<picture>`) element with
+ * optional responsive sources, an optional disclaimer gate, and
+ * viewport-driven visibility tracking.
+ *
+ *
+ * ### Child elements
+ * - `__picture` — wrapping `<picture>` element, always rendered. Contains the
+ * `<source>` elements (if any) and the `<img>`.
+ * - `__img` — the native `<img>` element.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A `<figure>` element containing a `<picture>` with the image,
+ * and an optional disclaimer overlay.
+ */
+export const Image = ({ sources, disclaimer, theatre, className, ...intrinsicImgAttributes }) => {
+    // State
+    const [isDisclaimerOn, setIsDisclaimerOn] = useState(disclaimer?.isOn === true
+        || disclaimer?.defaultIsOn === true
+        || (disclaimer !== undefined && disclaimer.defaultIsOn === undefined));
+    let shouldDisclaimerBeOn = isDisclaimerOn;
+    if (disclaimer?.isOn === true)
+        shouldDisclaimerBeOn = true;
+    if (disclaimer?.isOn === false)
+        shouldDisclaimerBeOn = false;
+    const parsedSources = useMemo(() => {
+        if (sources === undefined)
+            return [];
+        if (typeof sources === 'string')
+            return [{ srcSet: sources }];
+        if (Array.isArray(sources)) {
+            if (sources.length === 0)
+                return [];
+            if (typeof sources[0] === 'string')
+                return sources.map(srcSet => ({ srcSet }));
+            return sources;
         }
-      ),
-      togglerContent !== void 0 && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: btnClss,
-          onClick: handleDismissClick,
-          children: togglerContent
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: sensitiveClss, children })
-  ] });
-};
-
-// src/components/Theatre/index.tsx
-import {
-  useEffect as useEffect2,
-  useState as useState2,
-  useRef as useRef2
-} from "react";
-import cssModule2 from "./styles.module.css";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Theatre = ({
-  closeBtnContent,
-  openBtnContent,
-  isOn,
-  defaultIsOn,
-  exitOnEscape,
-  exitOnBgClick,
-  stateHandlers,
-  actionHandlers,
-  children,
-  className
-}) => {
-  const [internalIsOn, setInternalIsOn] = useState2(defaultIsOn ?? false);
-  const stageRef = useRef2(null);
-  const isTheatreOn = isOn ?? internalIsOn;
-  const prevIsTheatreOnRef = useRef2(isTheatreOn);
-  const handleCloseBtnClick = () => {
-    actionHandlers?.toggleClick?.(isTheatreOn);
-    if (isOn === void 0) setInternalIsOn(false);
-  };
-  const handleOpenBtnClick = () => {
-    actionHandlers?.toggleClick?.(isTheatreOn);
-    if (isOn === void 0) setInternalIsOn(true);
-  };
-  const handleStageBgClick = (e) => {
-    if (exitOnBgClick !== true) return;
-    if (e.target !== stageRef.current) return;
-    actionHandlers?.toggleClick?.(isTheatreOn);
-    if (isOn === void 0) setInternalIsOn(false);
-  };
-  useEffect2(() => {
-    if (prevIsTheatreOnRef.current !== isTheatreOn) {
-      stateHandlers?.toggled?.(isTheatreOn);
-      prevIsTheatreOnRef.current = isTheatreOn;
-    }
-  }, [isTheatreOn, stateHandlers]);
-  useEffect2(() => {
-    if (exitOnEscape === true || !isTheatreOn || isOn !== void 0) return;
-    const listener = (e) => {
-      if (e.key !== "Escape") return;
-      actionHandlers?.toggleClick?.(isTheatreOn);
-      setInternalIsOn(false);
-    };
-    window.addEventListener("keydown", listener);
-    return () => window.removeEventListener("keydown", listener);
-  }, [exitOnEscape, isTheatreOn, isOn]);
-  const c = clss(theatre, { cssModule: cssModule2 });
-  const rootClss = mergeClassNames(c(null, {
-    "on": isTheatreOn,
-    "off": !isTheatreOn
-  }), className);
-  const stageClass = c("stage");
-  const openBtnClass = c("open-btn");
-  const closeBtnClass = c("close-btn");
-  return /* @__PURE__ */ jsxs2("div", { className: rootClss, children: [
-    children,
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: stageClass,
-        onClick: handleStageBgClick,
-        ref: stageRef,
-        children: isTheatreOn && children
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: closeBtnClass,
-        onClick: handleCloseBtnClick,
-        children: closeBtnContent
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: openBtnClass,
-        onClick: handleOpenBtnClick,
-        children: openBtnContent
-      }
-    )
-  ] });
-};
-
-// src/components/Image/index.tsx
-import cssModule3 from "./styles.module.css";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Image = ({
-  sources,
-  disclaimer: disclaimer2,
-  theatre: theatre2,
-  className,
-  ...intrinsicImgAttributes
-}) => {
-  const [isDisclaimerOn, setIsDisclaimerOn] = useState3(
-    disclaimer2?.isOn === true || disclaimer2?.defaultIsOn === true || disclaimer2 !== void 0 && disclaimer2.defaultIsOn === void 0
-  );
-  let shouldDisclaimerBeOn = isDisclaimerOn;
-  if (disclaimer2?.isOn === true) shouldDisclaimerBeOn = true;
-  if (disclaimer2?.isOn === false) shouldDisclaimerBeOn = false;
-  const parsedSources = useMemo(() => {
-    if (sources === void 0) return [];
-    if (typeof sources === "string") return [{ srcSet: sources }];
-    if (Array.isArray(sources)) {
-      if (sources.length === 0) return [];
-      if (typeof sources[0] === "string") return sources.map((srcSet) => ({ srcSet }));
-      return sources;
-    }
-    return [];
-  }, [sources]);
-  const handleDisclaimerDismissClick = useCallback(() => {
-    disclaimer2?.actionHandlers?.dismissClick?.(isDisclaimerOn);
-    setIsDisclaimerOn(false);
-  }, []);
-  const c = clss(image, { cssModule: cssModule3 });
-  const rootClss = mergeClassNames(c(), className);
-  const rootAttributes = {};
-  const pictureClss = c("picture");
-  const imgClss = c("image");
-  const sensitiveContent = /* @__PURE__ */ jsxs3("picture", { className: pictureClss, children: [
-    parsedSources.map(
-      (source, index) => /* @__PURE__ */ jsx3(
-        "source",
-        {
-          srcSet: typeof source === "string" ? source : source.srcSet,
-          type: typeof source === "string" ? void 0 : source.type,
-          media: typeof source === "string" ? void 0 : source.media,
-          sizes: typeof source === "string" ? void 0 : source.sizes
-        },
-        index
-      )
-    ),
-    /* @__PURE__ */ jsx3(
-      "img",
-      {
-        className: imgClss,
-        ...intrinsicImgAttributes
-      }
-    )
-  ] });
-  const theatricalContent = theatre2 !== void 0 ? /* @__PURE__ */ jsx3(
-    Theatre,
-    {
-      defaultIsOn: false,
-      ...theatre2,
-      children: sensitiveContent
-    }
-  ) : sensitiveContent;
-  const disclaimedContent = disclaimer2 !== void 0 ? /* @__PURE__ */ jsx3(
-    Disclaimer,
-    {
-      ...disclaimer2,
-      isOn: shouldDisclaimerBeOn,
-      actionHandlers: { dismissClick: handleDisclaimerDismissClick },
-      children: theatricalContent
-    }
-  ) : theatricalContent;
-  return /* @__PURE__ */ jsx3(
-    "figure",
-    {
-      className: rootClss,
-      ...rootAttributes,
-      children: disclaimedContent
-    }
-  );
-};
-export {
-  Image
+        return [];
+    }, [sources]);
+    // User actions handlers
+    const handleDisclaimerDismissClick = useCallback(() => {
+        disclaimer?.actionHandlers?.dismissClick?.(isDisclaimerOn);
+        setIsDisclaimerOn(false);
+    }, []);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    const rootAttributes = {};
+    const pictureClss = c('picture');
+    const imgClss = c('image');
+    const sensitiveContent = _jsxs("picture", { className: pictureClss, children: [parsedSources.map((source, index) => _jsx("source", { srcSet: typeof source === 'string' ? source : source.srcSet, type: typeof source === 'string' ? undefined : source.type, media: typeof source === 'string' ? undefined : source.media, sizes: typeof source === 'string' ? undefined : source.sizes }, index)), _jsx("img", { className: imgClss, ...intrinsicImgAttributes })] });
+    const theatricalContent = theatre !== undefined
+        ? _jsx(Theatre, { defaultIsOn: false, ...theatre, children: sensitiveContent })
+        : sensitiveContent;
+    const disclaimedContent = disclaimer !== undefined
+        ? _jsx(Disclaimer, { ...disclaimer, isOn: shouldDisclaimerBeOn, actionHandlers: { dismissClick: handleDisclaimerDismissClick }, children: theatricalContent })
+        : theatricalContent;
+    return _jsx("figure", { className: rootClss, ...rootAttributes, children: disclaimedContent });
 };

package/components/IntersectionObserver/index.js

@@ -1,111 +1,63 @@
-// src/components/IntersectionObserver/index.tsx
-import {
-  useState,
-  useRef,
-  useEffect,
-  useCallback
-} from "react";
-
-// src/agnostic/css/clss/index.ts
-function clss(blockNames, options) {
-  const blockNamesArr = Array.isArray(blockNames) ? blockNames : [blockNames];
-  return (eltNames = null, modNames = []) => {
-    const eltNamesArr = Array.isArray(eltNames) ? eltNames : [eltNames];
-    const modNamesArr = (Array.isArray(modNames) ? modNames : [modNames]).map((modName) => {
-      if (typeof modName === "string") return modName;
-      const trueModNames = Object.entries(modName).filter((entry) => entry[1] === true).map(([key]) => key);
-      return trueModNames;
-    }).flat();
-    const outputClassesArr = [];
-    blockNamesArr.forEach((compName) => {
-      eltNamesArr.forEach((eltName) => {
-        const targetPublicClss = eltName === null ? compName : `${compName}__${eltName}`;
-        const targetPrivateClss = eltName === null ? options?.cssModule[options.cssModuleRoot ?? "root"] : options?.cssModule[eltName];
-        outputClassesArr.push(targetPublicClss);
-        if (targetPrivateClss !== void 0) outputClassesArr.push(targetPrivateClss);
-        modNamesArr.forEach((modName) => {
-          const targetModifiedPublicClss = `${targetPublicClss}--${modName}`;
-          const targetModifiedPrivateClss = eltName === null ? options?.cssModule[`${options.cssModuleRoot ?? "root"}--${modName}`] : options?.cssModule[`${eltName}--${modName}`];
-          outputClassesArr.push(targetModifiedPublicClss);
-          if (targetModifiedPrivateClss !== void 0) outputClassesArr.push(targetModifiedPrivateClss);
-        });
-      });
-    });
-    return outputClassesArr.join(" ");
-  };
-}
-
-// src/components/utils/index.tsx
-function mergeClassNames(...names) {
-  return names.map((name) => {
-    if (typeof name !== "string" && !Array.isArray(name)) return false;
-    if (Array.isArray(name)) return mergeClassNames(...name);
-    if (name.trim() === "") return false;
-    return name.trim();
-  }).filter((name) => typeof name === "string").join(" ");
-}
-
-// src/components/public-classnames.ts
-var intersectionObserver = "dsed-intersection-observer";
-
-// src/components/IntersectionObserver/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var IntersectionObserverComponent = ({
-  onIntersected,
-  root,
-  rootMargin,
-  threshold,
-  className,
-  children
-}) => {
-  const [ioEntry, setIoEntry] = useState(null);
-  const rootRef = useRef(null);
-  const observerRef = useRef(null);
-  const observation = useCallback((entries, observer) => {
-    const thisEntry = entries[0];
-    if (thisEntry === void 0) return setIoEntry(null);
-    onIntersected?.({ ioEntry: thisEntry, observer });
-    setIoEntry(thisEntry);
-  }, [onIntersected]);
-  const forceObservation = useCallback(() => {
-    const rootEl = rootRef.current;
-    const observer = observerRef.current;
-    if (rootEl === null || observer === null) return;
-    observer.unobserve(rootEl);
-    observer.observe(rootEl);
-  }, []);
-  useEffect(() => {
-    const rootEl = rootRef.current;
-    if (rootEl === null) return console.warn("rootRef.current should not be null");
-    const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
-    observerRef.current = observer;
-    observer.observe(rootEl);
-    return () => observer.disconnect();
-  }, [root, rootMargin, threshold, observation]);
-  useEffect(() => {
-    const timeout1 = window.setTimeout(forceObservation, 100);
-    const timeout2 = window.setTimeout(forceObservation, 500);
-    return () => {
-      window.clearTimeout(timeout1);
-      window.clearTimeout(timeout2);
-    };
-  }, [forceObservation]);
-  const c = clss(intersectionObserver, { cssModule });
-  const isIntersecting = ioEntry?.isIntersecting ?? false;
-  const rootClss = mergeClassNames(
-    c(null, { "is-intersecting": isIntersecting }),
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
-export {
-  IntersectionObserverComponent
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { intersectionObserver as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that observes its root element using the IntersectionObserver API
+ * and notifies consumers about visibility changes.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ *
+ * @returns A div element wrapping `children`, observed for intersection changes.
+ *
+ * @remarks
+ * - Automatically creates and disconnects the {@link IntersectionObserver} instance.
+ * - Re-observes the element shortly after mount to handle late layout changes.
+ * - Adds an `is-intersecting` modifier class when the element is intersecting.
+ */
+export const IntersectionObserverComponent = ({ onIntersected, root, rootMargin, threshold, className, children }) => {
+    // Refs, handlers and effects
+    const [ioEntry, setIoEntry] = useState(null);
+    const rootRef = useRef(null);
+    const observerRef = useRef(null);
+    const observation = useCallback((entries, observer) => {
+        const thisEntry = entries[0];
+        if (thisEntry === undefined)
+            return setIoEntry(null);
+        onIntersected?.({ ioEntry: thisEntry, observer });
+        setIoEntry(thisEntry);
+    }, [onIntersected]);
+    const forceObservation = useCallback(() => {
+        const rootEl = rootRef.current;
+        const observer = observerRef.current;
+        if (rootEl === null || observer === null)
+            return;
+        observer.unobserve(rootEl);
+        observer.observe(rootEl);
+    }, []);
+    useEffect(() => {
+        const rootEl = rootRef.current;
+        if (rootEl === null)
+            return console.warn('rootRef.current should not be null');
+        const observer = new IntersectionObserver(observation, { root, rootMargin, threshold });
+        observerRef.current = observer;
+        observer.observe(rootEl);
+        return () => observer.disconnect();
+    }, [root, rootMargin, threshold, observation]);
+    useEffect(() => {
+        const timeout1 = window.setTimeout(forceObservation, 100);
+        const timeout2 = window.setTimeout(forceObservation, 500);
+        return () => {
+            window.clearTimeout(timeout1);
+            window.clearTimeout(timeout2);
+        };
+    }, [forceObservation]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const isIntersecting = ioEntry?.isIntersecting ?? false;
+    const rootClss = mergeClassNames(c(null, { 'is-intersecting': isIntersecting }), className);
+    return _jsx("div", { className: rootClss, ref: rootRef, children: children });
 };