@design-edito/tools 0.4.5 → 0.4.11

package/components/Drawer/index.js

@@ -1,199 +1,84 @@
-// src/components/Drawer/index.tsx
-import {
-  useState as useState2,
-  useRef as useRef2,
-  useEffect as useEffect2
-} 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 drawer = "dsed-drawer";
-var resizeObserver = "dsed-resize-observer";
-
-// src/components/Drawer/index.tsx
-import cssModule2 from "./styles.module.css";
-
-// src/components/ResizeObserver/index.tsx
-import {
-  useRef,
-  useEffect,
-  useState
-} from "react";
-import cssModule from "./style.module.css";
-import { jsx } from "react/jsx-runtime";
-var ResizeObserverComponent = ({
-  className,
-  onResized,
-  children
-}) => {
-  const [roEntry, setRoEntry] = useState();
-  const rootRef = useRef(null);
-  const observerRef = useRef(null);
-  const createObserver = () => {
-    const root = rootRef.current;
-    observerRef.current?.disconnect();
-    if (root === null) return;
-    observerRef.current = new ResizeObserver((entries) => {
-      const firstEntry = entries[0];
-      if (firstEntry !== void 0) {
-        const boundingClientRect = firstEntry.target.getBoundingClientRect();
-        const fullEntry = {
-          entry: firstEntry,
-          boundingClientRect
-        };
-        setRoEntry(fullEntry);
-        if (onResized === void 0) return;
-        onResized(fullEntry);
-      }
-    });
-    observerRef.current.observe(root);
-  };
-  useEffect(() => {
-    createObserver();
-    return () => observerRef.current?.disconnect();
-  }, [onResized]);
-  const {
-    x,
-    y,
-    top,
-    left,
-    bottom,
-    right,
-    width,
-    height
-  } = roEntry?.entry.contentRect ?? {};
-  const contentRect = { x, y, top, left, bottom, right, width, height };
-  const dataAttributes = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return { ...acc, [`data-${key}`]: val.toString() };
-  }, {});
-  const cssCustomProps = Object.entries(contentRect).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return {
-      ...acc,
-      [`--${resizeObserver}-${key}`]: val.toString(),
-      [`--${resizeObserver}-${key}-px`]: `${val.toString()}px`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { drawer as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+import { ResizeObserverComponent } from '../ResizeObserver/index.js';
+/**
+ * Drawer component with optional controlled and uncontrolled behavior.
+ *
+ * @remarks
+ * - In controlled mode (`isOpened` defined), visibility is fully driven by the prop.
+ * - In uncontrolled mode, internal state is initialized from `initialIsOpened`.
+ * - The component measures its content using `ResizeObserverComponent`
+ *   and exposes the dimensions:
+ *   - As CSS custom properties:
+ *     --{prefix}-content-height
+ *     --{prefix}-content-height-px
+ *     --{prefix}-content-width
+ *     --{prefix}-content-width-px
+ *   - As `data-content-width` and `data-content-height` attributes.
+ *
+ * CSS modifier classes:
+ * - `opened` when open
+ * - `closed` when closed
+ */
+export const Drawer = ({ openerContent, closerContent, initialIsOpened = false, isOpened: isOpenedProp, stateHandlers, className, children }) => {
+    // State & handlers
+    const [internalIsOpened, setInternalIsOpened] = useState(isOpenedProp ?? initialIsOpened);
+    const isOpened = isOpenedProp ?? internalIsOpened;
+    const pIsOpened = useRef(isOpened);
+    const [{ width, height }, setContentDimensions] = useState({});
+    // State change handlers
+    useEffect(() => {
+        if (pIsOpened.current === isOpened)
+            return;
+        pIsOpened.current = isOpened;
+        stateHandlers?.toggled?.(isOpened);
+    }, [isOpened]);
+    // User action handlers
+    const handleOpenerClick = () => {
+        if (isOpenedProp !== undefined)
+            return;
+        setInternalIsOpened(true);
     };
-  }, {});
-  const c = clss(resizeObserver, { cssModule });
-  const rootClss = mergeClassNames(c(null), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...dataAttributes,
-      className: rootClss,
-      ref: rootRef,
-      style: { ...cssCustomProps },
-      children
-    }
-  );
-};
-
-// src/components/Drawer/index.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var Drawer = ({
-  openerContent,
-  closerContent,
-  initialIsOpened = false,
-  isOpened: isOpenedProp,
-  stateHandlers,
-  className,
-  children
-}) => {
-  const [internalIsOpened, setInternalIsOpened] = useState2(isOpenedProp ?? initialIsOpened);
-  const isOpened = isOpenedProp ?? internalIsOpened;
-  const pIsOpened = useRef2(isOpened);
-  const [{ width, height }, setContentDimensions] = useState2({});
-  useEffect2(() => {
-    if (pIsOpened.current === isOpened) return;
-    pIsOpened.current = isOpened;
-    stateHandlers?.toggled?.(isOpened);
-  }, [isOpened]);
-  const handleOpenerClick = () => {
-    if (isOpenedProp !== void 0) return;
-    setInternalIsOpened(true);
-  };
-  const handleCloserClick = () => {
-    if (isOpenedProp !== void 0) return;
-    setInternalIsOpened(false);
-  };
-  const handleROCompResize = ({ entry }) => {
-    const { width: width2, height: height2 } = entry?.contentRect ?? {};
-    setContentDimensions({ width: width2, height: height2 });
-  };
-  const c = clss(drawer, { cssModule: cssModule2 });
-  const rootClss = mergeClassNames(c(null, {
-    "opened": isOpened,
-    "closed": !isOpened
-  }), className);
-  const openerClss = c("opener");
-  const closerClss = c("closer");
-  const contentClss = c("content");
-  const dimensions = { width, height };
-  const customCssProps = Object.entries(dimensions).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return {
-      ...acc,
-      [`--${drawer}-content-${key}`]: `${val}`,
-      [`--${drawer}-content-${key}-px`]: `${val}px`
+    const handleCloserClick = () => {
+        if (isOpenedProp !== undefined)
+            return;
+        setInternalIsOpened(false);
     };
-  }, {});
-  const dataAttributes = Object.entries(dimensions).reduce((acc, [key, val]) => {
-    if (val === void 0) return acc;
-    return { ...acc, [`data-content-${key}`]: `${val}` };
-  }, {});
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: rootClss,
-      ...dataAttributes,
-      style: { ...customCssProps },
-      children: [
-        /* @__PURE__ */ jsx2("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }),
-        /* @__PURE__ */ jsx2("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }),
-        /* @__PURE__ */ jsx2("div", { className: contentClss, children: /* @__PURE__ */ jsx2(ResizeObserverComponent, { onResized: handleROCompResize, children }) })
-      ]
-    }
-  );
-};
-export {
-  Drawer
+    const handleROCompResize = ({ entry }) => {
+        const { width, height } = entry?.contentRect ?? {};
+        setContentDimensions({ width, height });
+    };
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        'opened': isOpened,
+        'closed': !isOpened
+    }), className);
+    const openerClss = c('opener');
+    const closerClss = c('closer');
+    const contentClss = c('content');
+    const dimensions = { width, height };
+    const customCssProps = Object
+        .entries(dimensions)
+        .reduce((acc, [key, val]) => {
+        if (val === undefined)
+            return acc;
+        return {
+            ...acc,
+            [`--${publicClassName}-content-${key}`]: `${val}`,
+            [`--${publicClassName}-content-${key}-px`]: `${val}px`
+        };
+    }, {});
+    const dataAttributes = Object
+        .entries(dimensions)
+        .reduce((acc, [key, val]) => {
+        if (val === undefined)
+            return acc;
+        return { ...acc, [`data-content-${key}`]: `${val}` };
+    }, {});
+    return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children: closerContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleROCompResize, children: children }) })] });
 };

package/components/EventListener/index.js

@@ -1,81 +1,30 @@
-// src/components/EventListener/index.tsx
-import {
-  useRef,
-  useEffect
-} 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 eventListener = "dsed-event-listener";
-
-// src/components/EventListener/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx } from "react/jsx-runtime";
-var EventListenerComponent = ({
-  className,
-  type,
-  targetSelector,
-  onEvent,
-  children
-}) => {
-  const rootRef = useRef(null);
-  useEffect(() => {
-    const root = rootRef.current;
-    if (onEvent === void 0 || type === void 0 || root === null) return;
-    const typeArr = Array.isArray(type) ? type : [type];
-    const elements = Array.from(targetSelector === void 0 ? [root] : root.querySelectorAll(targetSelector));
-    elements.forEach((e) => typeArr.forEach((t) => e.addEventListener(t, onEvent)));
-    return () => elements.forEach((e) => typeArr.forEach((t) => e.removeEventListener(t, onEvent)));
-  }, [targetSelector, type, onEvent]);
-  const c = clss(eventListener, { cssModule });
-  const rootClss = mergeClassNames(c(), className);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: rootClss,
-      ref: rootRef,
-      children
-    }
-  );
-};
-export {
-  EventListenerComponent
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { eventListener as publicClassName } from '../public-classnames.js';
+import cssModule from './styles.module.css';
+/**
+ * Component that attaches one or multiple DOM event listeners to its root element
+ * or to matching descendants.
+ * @param props - Component properties
+ * @see {@link Props}
+ * @returns A span element wrapping `children`, with configured event listeners.
+ */
+export const EventListenerComponent = ({ className, type, targetSelector, onEvent, children }) => {
+    // Effects & refs
+    const rootRef = useRef(null);
+    useEffect(() => {
+        const root = rootRef.current;
+        if (onEvent === undefined || type === undefined || root === null)
+            return;
+        const typeArr = Array.isArray(type) ? type : [type];
+        const elements = Array.from(targetSelector === undefined ? [root] : root.querySelectorAll(targetSelector));
+        elements.forEach(e => typeArr.forEach(t => e.addEventListener(t, onEvent)));
+        return () => elements.forEach(e => typeArr.forEach(t => e.removeEventListener(t, onEvent)));
+    }, [targetSelector, type, onEvent]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(), className);
+    return _jsx("div", { className: rootClss, ref: rootRef, children: children });
 };