@design-edito/tools 0.4.5 → 0.4.6

package/components/Gallery/index.js

@@ -1,225 +1,150 @@
-// src/components/Gallery/index.tsx
-import {
-  Children,
-  useEffect,
-  useState,
-  useRef
-} 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 gallery = "dsed-gallery";
-
-// src/components/Gallery/utils.ts
-var forceActivateSlot = (div, targetPos, smooth = true) => {
-  if (div === null) return;
-  const children = Array.from(div.children);
-  if (children[targetPos] === void 0) return;
-  const target = children[targetPos];
-  const halfClientWidth = div.clientWidth / 2;
-  const halfOffsetWidth = div.offsetWidth / 2;
-  const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
-  div.scrollTo({ left: offset, behavior: smooth ? "smooth" : "instant" });
-};
-
-// src/components/Gallery/index.tsx
-import cssModule from "./styles.module.css";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Gallery = ({
-  paddingLeft,
-  paddingRight,
-  padding,
-  prevButtonContent,
-  nextButtonContent,
-  paginationContent,
-  initActive,
-  active,
-  noSnap,
-  stateHandlers,
-  actionHandlers,
-  children,
-  className
-}) => {
-  const scrollerRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(0);
-  const [canGoLeft, setCanGoLeft] = useState(false);
-  const [canGoRight, setCanGoRight] = useState(false);
-  const childrenCount = Children.count(children);
-  useEffect(() => {
-    stateHandlers?.slotChanged?.(activeIndex);
-  }, [activeIndex]);
-  const handlePrevClick = () => {
-    actionHandlers?.prevClick?.(activeIndex);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, activeIndex - 1);
-  };
-  const handleNextClick = () => {
-    actionHandlers?.nextClick?.(activeIndex);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, activeIndex + 1);
-  };
-  const handlePaginationClick = (pos) => {
-    actionHandlers?.paginationClick?.(activeIndex, pos);
-    if (active === void 0) forceActivateSlot(scrollerRef.current, pos);
-  };
-  useEffect(() => {
-    const scrollerElt = scrollerRef.current;
-    if (scrollerElt === null) return;
-    scrollerElt.scrollBy(-1, 0);
-    let animationFrame = null;
-    const update = () => {
-      animationFrame = null;
-      const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
-      const center = scrollLeft + clientWidth / 2;
-      const children2 = Array.from(scrollerElt.children);
-      let closestIndex = 0;
-      let closestDistance = Infinity;
-      children2.forEach((child, index) => {
-        const childCenter = child.offsetLeft + child.offsetWidth / 2;
-        const distance = Math.abs(center - childCenter);
-        if (distance < closestDistance) {
-          closestDistance = distance;
-          closestIndex = index;
-        }
-      });
-      setActiveIndex(closestIndex);
-      setCanGoLeft(scrollLeft > 0);
-      setCanGoRight(scrollLeft + clientWidth < scrollWidth);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useState, useRef } from 'react';
+import { clss } from '../../agnostic/css/clss/index.js';
+import { mergeClassNames } from '../utils/index.js';
+import { gallery as publicClassName } from '../public-classnames.js';
+import { forceActivateSlot } from './utils.js';
+import cssModule from './styles.module.css';
+/**
+ * Horizontally scrollable gallery component with navigation controls and pagination.
+ *
+ * Tracks the active slot based on scroll position and exposes state through CSS class names
+ * and a `data-active` attribute on the root element.
+ *
+ * @param props - Component properties.
+ * @see {@link Props}
+ * @returns A container element wrapping:
+ * - A scrollable area containing each child in a slot wrapper,
+ * - Previous/next navigation controls,
+ * - Pagination controls allowing direct slot activation.
+ */
+export const Gallery = ({ paddingLeft, paddingRight, padding, prevButtonContent, nextButtonContent, paginationContent, initActive, active, noSnap, stateHandlers, actionHandlers, children, className }) => {
+    // State & refs
+    const scrollerRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [canGoLeft, setCanGoLeft] = useState(false);
+    const [canGoRight, setCanGoRight] = useState(false);
+    const childrenCount = Children.count(children);
+    // State change handlers
+    useEffect(() => {
+        stateHandlers?.slotChanged?.(activeIndex);
+    }, [activeIndex]);
+    // User actions handlers
+    const handlePrevClick = () => {
+        actionHandlers?.prevClick?.(activeIndex);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, activeIndex - 1);
     };
-    const onScroll = () => {
-      if (animationFrame !== null) return;
-      animationFrame = requestAnimationFrame(update);
+    const handleNextClick = () => {
+        actionHandlers?.nextClick?.(activeIndex);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, activeIndex + 1);
     };
-    scrollerElt.addEventListener("scroll", onScroll, { passive: true });
-    update();
-    return () => {
-      scrollerElt.removeEventListener("scroll", onScroll);
-      if (animationFrame !== null) cancelAnimationFrame(animationFrame);
+    const handlePaginationClick = (pos) => {
+        actionHandlers?.paginationClick?.(activeIndex, pos);
+        if (active === undefined)
+            forceActivateSlot(scrollerRef.current, pos);
     };
-  }, []);
-  useEffect(() => {
-    const toActivate = active ?? initActive;
-    if (toActivate === void 0) return;
-    const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
-    return () => clearTimeout(id);
-  }, []);
-  useEffect(() => {
-    if (active === void 0) return;
-    forceActivateSlot(scrollerRef.current, active);
-  }, [active]);
-  const c = clss(gallery, { cssModule });
-  const rootClss = mergeClassNames(
-    c(null, {
-      "controlled": active !== void 0,
-      "no-snap": noSnap === true,
-      "at-first": activeIndex === 0,
-      "at-last": activeIndex === childrenCount - 1,
-      "can-go-left": canGoLeft,
-      "can-go-right": canGoRight
-    }),
-    className
-  );
-  const scrollerClss = c("scroller");
-  const actionsClss = c("actions");
-  const prevBtnClss = c("prev");
-  const nextBtnClss = c("next");
-  const paginationClss = c("pagination");
-  const dataAttributes = { "data-active": `${activeIndex}` };
-  const actualPaddingLeft = typeof paddingLeft === "number" ? `${paddingLeft}px` : typeof paddingLeft === "string" ? paddingLeft : typeof padding === "number" ? `${padding}px` : padding ?? "0px";
-  const actualPaddingRight = typeof paddingRight === "number" ? `${paddingRight}px` : typeof paddingRight === "string" ? paddingRight : typeof padding === "number" ? `${padding}px` : padding ?? "0px";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: rootClss,
-      ...dataAttributes,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
-          const slotClss = c("slot", { active: pos === activeIndex });
-          const style = {
-            "margin-left": pos === 0 ? actualPaddingLeft : void 0,
-            "margin-right": pos === Children.count(children) - 1 ? actualPaddingRight : void 0
-          };
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `${slotClss}`,
-              style: { ...style },
-              "data-slot": pos,
-              children: child
-            },
-            pos
-          );
-        }) }),
-        /* @__PURE__ */ jsxs("div", { className: actionsClss, children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: prevBtnClss,
-              onClick: handlePrevClick,
-              children: prevButtonContent ?? "prev"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: nextBtnClss,
-              onClick: handleNextClick,
-              children: nextButtonContent ?? "next"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
-          const pageClss = c("page", { active: pos === activeIndex });
-          return /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: pageClss,
-              "data-page": pos,
-              onClick: () => handlePaginationClick(pos),
-              children: typeof paginationContent === "string" ? paginationContent : typeof paginationContent === "function" ? paginationContent(pos) : pos
-            }
-          );
-        }) })
-      ]
-    }
-  );
-};
-export {
-  Gallery
+    // Scroll position calculation
+    useEffect(() => {
+        const scrollerElt = scrollerRef.current;
+        if (scrollerElt === null)
+            return;
+        scrollerElt.scrollBy(-1, 0);
+        let animationFrame = null;
+        const update = () => {
+            animationFrame = null;
+            const { scrollLeft, clientWidth, scrollWidth } = scrollerElt;
+            const center = scrollLeft + clientWidth / 2;
+            const children = Array.from(scrollerElt.children);
+            let closestIndex = 0;
+            let closestDistance = Infinity;
+            children.forEach((child, index) => {
+                const childCenter = child.offsetLeft + child.offsetWidth / 2;
+                const distance = Math.abs(center - childCenter);
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    closestIndex = index;
+                }
+            });
+            setActiveIndex(closestIndex);
+            setCanGoLeft(scrollLeft > 0);
+            setCanGoRight(scrollLeft + clientWidth < scrollWidth);
+        };
+        const onScroll = () => {
+            if (animationFrame !== null)
+                return;
+            animationFrame = requestAnimationFrame(update);
+        };
+        scrollerElt.addEventListener('scroll', onScroll, { passive: true });
+        update();
+        return () => {
+            scrollerElt.removeEventListener('scroll', onScroll);
+            if (animationFrame !== null)
+                cancelAnimationFrame(animationFrame);
+        };
+    }, []);
+    // Sync scroll position to 'active' prop at mount time
+    useEffect(() => {
+        const toActivate = active ?? initActive;
+        if (toActivate === undefined)
+            return;
+        const id = setTimeout(() => forceActivateSlot(scrollerRef.current, toActivate, false), 50);
+        return () => clearTimeout(id);
+    }, []);
+    // Sync scroll position to 'active' prop
+    useEffect(() => {
+        if (active === undefined)
+            return;
+        forceActivateSlot(scrollerRef.current, active);
+    }, [active]);
+    // Rendering
+    const c = clss(publicClassName, { cssModule });
+    const rootClss = mergeClassNames(c(null, {
+        'controlled': active !== undefined,
+        'no-snap': noSnap === true,
+        'at-first': activeIndex === 0,
+        'at-last': activeIndex === childrenCount - 1,
+        'can-go-left': canGoLeft,
+        'can-go-right': canGoRight
+    }), className);
+    const scrollerClss = c('scroller');
+    const actionsClss = c('actions');
+    const prevBtnClss = c('prev');
+    const nextBtnClss = c('next');
+    const paginationClss = c('pagination');
+    const dataAttributes = { 'data-active': `${activeIndex}` };
+    const actualPaddingLeft = typeof paddingLeft === 'number'
+        ? `${paddingLeft}px`
+        : typeof paddingLeft === 'string'
+            ? paddingLeft
+            : typeof padding === 'number'
+                ? `${padding}px`
+                : padding ?? '0px';
+    const actualPaddingRight = typeof paddingRight === 'number'
+        ? `${paddingRight}px`
+        : typeof paddingRight === 'string'
+            ? paddingRight
+            : typeof padding === 'number'
+                ? `${padding}px`
+                : padding ?? '0px';
+    return _jsxs("div", { className: rootClss, ...dataAttributes, children: [_jsx("div", { className: scrollerClss, ref: scrollerRef, children: Children.map(children, (child, pos) => {
+                    const slotClss = c('slot', { active: pos === activeIndex });
+                    const style = {
+                        'margin-left': pos === 0
+                            ? actualPaddingLeft
+                            : undefined,
+                        'margin-right': pos === Children.count(children) - 1
+                            ? actualPaddingRight
+                            : undefined
+                    };
+                    return _jsx("div", { className: `${slotClss}`, style: { ...style }, "data-slot": pos, children: child }, pos);
+                }) }), _jsxs("div", { className: actionsClss, children: [_jsx("div", { className: prevBtnClss, onClick: handlePrevClick, children: prevButtonContent ?? 'prev' }), _jsx("div", { className: nextBtnClss, onClick: handleNextClick, children: nextButtonContent ?? 'next' })] }), _jsx("div", { className: paginationClss, children: Children.map(children, (_, pos) => {
+                    const pageClss = c('page', { active: pos === activeIndex });
+                    return _jsx("div", { className: pageClss, "data-page": pos, onClick: () => handlePaginationClick(pos), children: typeof paginationContent === 'string'
+                            ? paginationContent
+                            : typeof paginationContent === 'function'
+                                ? paginationContent(pos)
+                                : pos });
+                }) })] });
 };

package/components/Gallery/utils.js

@@ -0,0 +1,12 @@
+export const forceActivateSlot = (div, targetPos, smooth = true) => {
+    if (div === null)
+        return;
+    const children = Array.from(div.children);
+    if (children[targetPos] === undefined)
+        return;
+    const target = children[targetPos];
+    const halfClientWidth = div.clientWidth / 2;
+    const halfOffsetWidth = div.offsetWidth / 2;
+    const offset = target.offsetLeft - (halfClientWidth - halfOffsetWidth);
+    div.scrollTo({ left: offset, behavior: smooth ? 'smooth' : 'instant' });
+};