react-layered/dist/hooks/useLayerConfig.js

Welcome to react-layered! If you've ever found yourself lost in the jungle of z-index layers, fighting the chaos of overlapping UI elements, then buckle up! This tiny, mighty package is your guide to taming that wild z-index safari in your React projects.

import { useMemo as v } from "react";
function z(u, r) {
  return (s, a) => v(() => {
    var i, d, h;
    let e = ((r == null ? void 0 : r.start) || 1) - 1;
    const o = s.includes(".") ? s.split(".").slice(0, -1).join(".") : s, l = s.includes(".") ? s.split(".").at(-1) : null;
    let p = u.map((t) => typeof t == "string" ? { key: t } : t.parts && (r != null && r.reverse) ? { ...t, parts: [...t.parts].reverse() } : t);
    r != null && r.reverse && (p = p.reverse());
    for (const t of p) {
      if (e += 1, t.key !== o && t.key !== s) {
        (t.slots || t.parts) && (e += (((i = t.parts) == null ? void 0 : i.length) || 1) * (t.slots || 1) - 1);
        continue;
      }
      if (l && t.parts) {
        const n = t.parts.indexOf(l);
        if (n < 0) throw new Error(`Invalid part key: ${l}`);
        e += n;
      }
      if (a) {
        if (!t.slots)
          throw new Error(
            "Cannot use 'slot' without 'slots' in the layer object"
          );
        e += a * (((d = t.parts) == null ? void 0 : d.length) || 1);
      }
      if ((h = t.parts) != null && h.length && !l) {
        const n = {
          style: {},
          zIndex: {}
        };
        return t.parts.forEach((w, I) => {
          n.style[w] = { zIndex: e + I }, n.zIndex[w] = e + I;
        }), n;
      }
      return { style: { zIndex: e }, zIndex: e };
    }
    throw new Error(`Invalid layer key "${o}"`);
  }, [u, r, s, a]);
}
export {
  z as useLayerConfig
};