UNPKG

@vhsys-ui/user

Version:

Flexible User Profile Component.

71 lines (68 loc) 1.82 kB
"use client"; // src/use-user.ts import { useMemo, useCallback } from "react"; import { useFocusRing } from "@react-aria/focus"; import { user } from "@vhsys-ui/theme"; import { clsx, dataAttr } from "@vhsys-ui/shared-utils"; import { filterDOMProps } from "@vhsys-ui/react-utils"; import { useDOMRef } from "@vhsys-ui/react-utils"; import { mergeProps } from "@react-aria/utils"; function useUser(props) { const { as, ref, name, description, className, classNames, isFocusable = false, avatarProps: userAvatarProps = {}, ...otherProps } = props; const avatarProps = { isFocusable: false, name: typeof name === "string" ? name : void 0, ...userAvatarProps }; const Component = as || "div"; const shouldFilterDOMProps = typeof Component === "string"; const domRef = useDOMRef(ref); const { isFocusVisible, isFocused, focusProps } = useFocusRing({}); const canBeFocused = useMemo(() => { return isFocusable || as === "button"; }, [isFocusable, as]); const slots = useMemo(() => user(), []); const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className); const getUserProps = useCallback( () => ({ ref: domRef, tabIndex: canBeFocused ? 0 : -1, "data-focus-visible": dataAttr(isFocusVisible), "data-focus": dataAttr(isFocused), className: slots.base({ class: baseStyles }), ...mergeProps( filterDOMProps(otherProps, { enabled: shouldFilterDOMProps }), canBeFocused ? focusProps : {} ) }), [canBeFocused, slots, baseStyles, focusProps, otherProps] ); return { Component, className, slots, name, description, classNames, baseStyles, avatarProps, getUserProps }; } export { useUser };