@vhsys-ui/user
Version:
Flexible User Profile Component.
71 lines (68 loc) • 1.82 kB
JavaScript
"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
};