@nohaxito yo tendría algo así:

[plush solstice]

La idea de tenerlo como un hook es buena también

pensé que iba a ser más engorrosa, tener un array de refs es mala idea

esta implementación es parecida a como hace las cosas shadcn en algunos componentes, como el Form

[chilly summit]

pues, no lo veo tan mal

lo del hover={onHover} del BackdropItem estaría aplicado al onMouseEnter, no?

[plush solstice]

si xd lo estaba por editar

[chilly summit]

al hacer el onMouseLeave deberia de ponerse un setHover(null) o algo así

aunque probablemente esto traiga problemitas porque al haber varios items cada que se salga de uno se eliminará el backdrop y volverá a aparecer... ?

por eso sentía que con un hook en vez de hacerlo como componentes era mejor idea

ya que ahi puedo "controlar" cuando no se hace hover (al menos con el mouse y cuando el tipo de backdrop sea detectando el hover) y simplemente desaparecerlo

[plush solstice]

por? sólo debería haber una instancia de backdrop, y se estilaría dependiendo de, por ejemplo, los mouseEnter, yo había implementado esto así:

este hook se usa en cada uno de los items, lo que en mi ejemplo correspondería al <BackdropItem />

la cosa es que acá hago un propDrilling de la ref del backdrop, pero en tu librería se puede manejar con un contexto

[chilly summit]

uhm, yo tenia algo similar pero directamente con los querySelector jajaja pero pues, me habia gustado la idea de hacerlo hook

y ahi pasarle un array con todos los refs no creo que convenga

sería mejor hacerlo con un querySelectorAll y ya

si quisiera hacerlo via componente como lo tienes tu pues ahi si es mucho mejor hacerlo con ref

[plush solstice]

se

vas a hacer el querySelectorAll y guardar todos los elementos en un estado o algo así?

[chilly summit]

todos no xD

[plush solstice]

asignarles un listener de mouseenter y mouseleave para estilar el backdrop entiendo no?

[chilly summit]

#💬╏chat-general message

lo que devolverá el useBackdrop pues será esto:

que no es ni necesario hacerlo con un estado, creo yo

[plush solstice]

y cómo te aseguras de que el left, top, width etc se actualice cuando se le haga hover a uno de los elementos?

con un interval? xd

[chilly summit]

en ese caso pues creo que no queda de otra que un interval

[plush solstice]

AHHH con el click

yo lo estuve pensando todo el tiempo con el hover

igual ta raro xd me parece contraintuitivo

pero decias que radix tiene componentes que funcionan así no?

[chilly summit]

radix-vue

y si

lo hace con un efecto escuchando el cambio del valor del contexto

y segun eso pues obtiene la tab activa y le ajusta el backdrop / mueve el backdrop a la tab activa

[plush solstice]

ta bien tonces

me gusta la api que diste de ejemplo

useBackdrop('#nav-items li [data-active]')

mandale nomas

[chilly summit]

@plush solstice a esto me referia con el tipo "manual"
literalmente especificar el tipo de elemento que debe ser y devolver sus "atributos" ? XD

con el "automatico" pues ya es cosa de ver donde esta parado el mouse DX

y en el parent puedes especificar el padre de los elementos a hacer el queryselector, o lo q sea Xd

[chilly summit]

al final lo dejé asi por ahora:

"use client";

import { useEffect, useState } from "react";

export const useBackdrop = (
  query: string,
  {
    parent = document,
    type = "manual",
  }: { type?: "mouse" | "manual"; parent?: HTMLElement | Document } = {},
) => {
  const [activeTab, setActiveTab] = useState<{
    width: number;
    height: number;
    top: number;
    left: number;
  } | null>({ width: 0, height: 0, top: 0, left: 0 });
  useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") {
      setActiveTab({ width: 0, height: 0, top: 0, left: 0 });
    }
    setInterval(() => {
      if (type === "manual") {
        // this type requires be more specific with the query
        const element = parent.querySelector<HTMLElement>(query);
        if (!element) {
          setActiveTab({ width: 0, height: 0, top: 0, left: 0 });
        }

        setActiveTab({
          width: element?.offsetWidth!,
          height: element?.offsetHeight!,
          top: element?.offsetTop!,
          left: element?.offsetLeft!,
        });
      }
      if (type === "mouse") {
        setActiveTab({ width: 0, height: 0, top: 0, left: 0 });
      }
    }, 100);
  }, []);
  return activeTab;
};

  const { height, width, left, top } = useBackdrop(
    "#nav-items [data-active=true]",
  );

tengo varias cosas que arreglar pero pues meh

[plush solstice]

no te parece mejor hacer la query y iterar los elementos para agregarles los listeners en lugar de tener un interval cada 100ms? me da mucho toc verlo así xd

o exponer una función para hacer un cambio imperativo de la tab 😫 pero me duele así

xdddd

[plush solstice]

igual ahora que lo leo bien no hay un listener para eso xd pero no sé

[chilly summit]

De que forma lo cambiarias? A mí también me da un tick hacerlo así, pero pues actual no se me ocurre ninguno

sería cosa de jugar con el arreglo de dependencias del useEffect y problema resuelto

pero no idea

@meager cave alguna idea? Jajaja

aunque bueno, por mientras haré el commit así XD

[meager cave]

No hace falta que chequees si window o document son undefined dentro del efecto

Puedes darme un ejemplo de uso?

[chilly summit]

xD antes no habia un useEffect xd

asi es como se usaría

[plush solstice]

es que, si igual vas a tener que tener un estado, o un onClick en los elementos hijos, para setear el elemento activo, no sería mejor ofrecer ese onClick en el hook?

y ahorrarte tantos problemas

de última podes volver a hacer la query en el onClick

[meager cave]

Manual = click, mouse = hover/mouseenter no?

[chilly summit]

si, pero el de mouse no lo he hecho todavia jajaja

[chilly summit]

pues, podría, tampoco es tan mala idea

[meager cave]

No has considerado usar listeners?

[chilly summit]

para lo del mouse? si, para este no le veia necesario, al menos en la forma que lo tenia planeado no

[meager cave]

Digo para los dos. El interval me parece hacky

[chilly summit]

pues como lo harias pa ver / guiarme un poco

porque hasta como lo estaba manejando en las tabs pues lo manejaba sin intervalos ni listeners ni nada

solo un querySelector y un useEffect que tenia como dependencia el valor de un contexto y ya

pero para un uso "mas general" como este pues me dificultó

[plush solstice]

che, serviría un MutationObserver para ver los cambios en un data-attribute?

parece hacky tambien, pero capaz es overkill

[chilly summit]

al final me parece que para el tipo manual sería mejor exponer un onClick como dices y pues usar los offsetWidth, offsetHeight, etc. del mismo evento

me ahorraría el querySelector en el tipo manual, ya para el de mouse / hover pues es otra cosita

[meager cave]

Cuando llegue a la casa hago un sandbox

[chilly summit]

dale

[meager cave]

https://codesandbox.io/p/sandbox/blazing-tdd-frx6rh?file=%2Fsrc%2FApp.tsx ahí me puse a inventar un rato para darle estilos a los items activos (aparte de que aparezca el backdrop)

[chilly summit]

A ver, le voy a echar un ojo

[chilly summit]

Good, al final es algo similar a lo que estaba pensando en rehacer

Osea, el hecho de exponer una función que se encargue de hacer el setActive usando los boundingRects del propio evento (onMouseEnter, Leave y onClick)

Me gusta, gracias

[meager cave]

Ahí modifique unas cositas que no funcionaban bien con los classNames