From 5331a1a92342edabc8d7a88978d1aeff31f004ab Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 14 Jan 2025 13:40:54 +0800 Subject: [PATCH 1/3] refactor: remove unnecessary className passing to tv --- packages/components/autocomplete/src/use-autocomplete.ts | 3 +-- packages/components/breadcrumbs/src/use-breadcrumbs.ts | 3 +-- packages/components/date-input/src/use-date-input.ts | 3 +-- packages/components/date-input/src/use-time-input.ts | 3 +-- .../components/date-picker/src/use-date-range-picker.ts | 3 +-- packages/components/dropdown/src/use-dropdown.ts | 8 ++------ packages/components/listbox/src/use-listbox.ts | 2 +- packages/components/select/src/use-select.ts | 3 +-- packages/components/slider/src/use-slider.ts | 3 +-- packages/components/tabs/src/use-tabs.ts | 3 +-- 10 files changed, 11 insertions(+), 23 deletions(-) diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts index 47ce1dfad4..60094e69a9 100644 --- a/packages/components/autocomplete/src/use-autocomplete.ts +++ b/packages/components/autocomplete/src/use-autocomplete.ts @@ -385,9 +385,8 @@ export function useAutocomplete(originalProps: UseAutocomplete ...variantProps, isClearable, disableAnimation, - className, }), - [objectToDeps(variantProps), isClearable, disableAnimation, className], + [objectToDeps(variantProps), isClearable, disableAnimation], ); const getBaseProps: PropGetter = () => ({ diff --git a/packages/components/breadcrumbs/src/use-breadcrumbs.ts b/packages/components/breadcrumbs/src/use-breadcrumbs.ts index 48cb9ec935..5155d131e9 100644 --- a/packages/components/breadcrumbs/src/use-breadcrumbs.ts +++ b/packages/components/breadcrumbs/src/use-breadcrumbs.ts @@ -150,9 +150,8 @@ export function useBreadcrumbs(originalProps: UseBreadcrumbsProps) { () => breadcrumbs({ ...variantProps, - className, }), - [objectToDeps(variantProps), className], + [objectToDeps(variantProps)], ); const baseStyles = clsx(classNames?.base, className); diff --git a/packages/components/date-input/src/use-date-input.ts b/packages/components/date-input/src/use-date-input.ts index e34065333e..1ef4c4f2f3 100644 --- a/packages/components/date-input/src/use-date-input.ts +++ b/packages/components/date-input/src/use-date-input.ts @@ -210,9 +210,8 @@ export function useDateInput(originalProps: UseDateInputPro ...variantProps, disableAnimation, labelPlacement, - className, }), - [objectToDeps(variantProps), disableAnimation, labelPlacement, className], + [objectToDeps(variantProps), disableAnimation, labelPlacement], ); const getLabelProps: PropGetter = (props) => { diff --git a/packages/components/date-input/src/use-time-input.ts b/packages/components/date-input/src/use-time-input.ts index 7b540a626b..87f630e336 100644 --- a/packages/components/date-input/src/use-time-input.ts +++ b/packages/components/date-input/src/use-time-input.ts @@ -152,9 +152,8 @@ export function useTimeInput(originalProps: UseTimeInputPro ...variantProps, disableAnimation, labelPlacement, - className, }), - [objectToDeps(variantProps), labelPlacement, disableAnimation, className], + [objectToDeps(variantProps), labelPlacement, disableAnimation], ); const getLabelProps: PropGetter = (props) => { diff --git a/packages/components/date-picker/src/use-date-range-picker.ts b/packages/components/date-picker/src/use-date-range-picker.ts index 2dabebb84d..6c958b452c 100644 --- a/packages/components/date-picker/src/use-date-range-picker.ts +++ b/packages/components/date-picker/src/use-date-range-picker.ts @@ -278,9 +278,8 @@ export function useDateRangePicker({ dateInput({ ...variantProps, labelPlacement, - className, }), - [objectToDeps(variantProps), className], + [objectToDeps(variantProps)], ); const getStartDateInputProps = (props: DOMAttributes = {}) => { diff --git a/packages/components/dropdown/src/use-dropdown.ts b/packages/components/dropdown/src/use-dropdown.ts index 4deb06b42b..fe03823b9b 100644 --- a/packages/components/dropdown/src/use-dropdown.ts +++ b/packages/components/dropdown/src/use-dropdown.ts @@ -124,7 +124,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn { menuTriggerRef, ); - const classNames = useMemo( + const styles = useMemo( () => dropdown({ className, @@ -156,7 +156,7 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn { classNames: { ...classNamesProp, ...props.classNames, - content: clsx(classNames, classNamesProp?.content, props.className), + content: clsx(styles, classNamesProp?.content, props.className), }, shouldCloseOnInteractOutside: popoverProps?.shouldCloseOnInteractOutside ? popoverProps.shouldCloseOnInteractOutside @@ -195,7 +195,6 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn { Component, menuRef, menuProps, - classNames, closeOnSelect, onClose: state.close, autoFocus: state.focusStrategy || true, @@ -206,13 +205,10 @@ export function useDropdown(props: UseDropdownProps): UseDropdownReturn { }; } -// export type UseDropdownReturn = ReturnType; - export type UseDropdownReturn = { Component: string | React.ElementType; menuRef: React.RefObject; menuProps: any; - classNames: string; closeOnSelect: boolean; onClose: () => void; autoFocus: any; diff --git a/packages/components/listbox/src/use-listbox.ts b/packages/components/listbox/src/use-listbox.ts index 6a59d6aeb9..e0baf7a114 100644 --- a/packages/components/listbox/src/use-listbox.ts +++ b/packages/components/listbox/src/use-listbox.ts @@ -131,7 +131,7 @@ export function useListbox(props: UseListboxProps) { const {listBoxProps} = useAriaListbox({...props, onAction}, state, domRef); - const slots = useMemo(() => listbox({className}), [className]); + const slots = useMemo(() => listbox(), []); const baseStyles = clsx(classNames?.base, className); diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts index 6000ede2a5..3b16489986 100644 --- a/packages/components/select/src/use-select.ts +++ b/packages/components/select/src/use-select.ts @@ -381,9 +381,8 @@ export function useSelect(originalProps: UseSelectProps) { isInvalid, labelPlacement, disableAnimation, - className, }), - [objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation, className], + [objectToDeps(variantProps), isInvalid, labelPlacement, disableAnimation], ); // scroll the listbox to the selected item diff --git a/packages/components/slider/src/use-slider.ts b/packages/components/slider/src/use-slider.ts index aef600c01e..004dced398 100644 --- a/packages/components/slider/src/use-slider.ts +++ b/packages/components/slider/src/use-slider.ts @@ -244,9 +244,8 @@ export function useSlider(originalProps: UseSliderProps) { disableAnimation, hasSingleThumb, isVertical, - className, }), - [objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks, className], + [objectToDeps(variantProps), isVertical, disableAnimation, hasSingleThumb, hasMarks], ); const [startOffset, endOffset] = [ diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts index beb7de2fd3..2e5fd441fb 100644 --- a/packages/components/tabs/src/use-tabs.ts +++ b/packages/components/tabs/src/use-tabs.ts @@ -124,11 +124,10 @@ export function useTabs(originalProps: UseTabsProps) { () => tabs({ ...variantProps, - className, disableAnimation, ...(isVertical ? {placement: "start"} : {}), }), - [objectToDeps(variantProps), className, disableAnimation, isVertical], + [objectToDeps(variantProps), disableAnimation, isVertical], ); const baseStyles = clsx(classNames?.base, className); From adf2cef90df18f47c1191b65e49544d89aa833a6 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 14 Jan 2025 13:42:08 +0800 Subject: [PATCH 2/3] refactor(button): move styles to getButtonProps --- packages/components/button/src/button.tsx | 3 +-- packages/components/button/src/use-button.ts | 2 ++ 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/button/src/button.tsx b/packages/components/button/src/button.tsx index f70a14574b..c05024d790 100644 --- a/packages/components/button/src/button.tsx +++ b/packages/components/button/src/button.tsx @@ -11,7 +11,6 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => { Component, domRef, children, - styles, spinnerSize, spinner = , spinnerPlacement, @@ -25,7 +24,7 @@ const Button = forwardRef<"button", ButtonProps>((props, ref) => { } = useButton({...props, ref}); return ( - + {startContent} {isLoading && spinnerPlacement === "start" && spinner} {isLoading && isIconOnly ? null : children} diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts index 6bfba1b6df..a34bcb4a4a 100644 --- a/packages/components/button/src/use-button.ts +++ b/packages/components/button/src/use-button.ts @@ -176,6 +176,7 @@ export function useButton(props: UseButtonProps) { }), filterDOMProps(props), ), + className: styles, }), [ isLoading, @@ -189,6 +190,7 @@ export function useButton(props: UseButtonProps) { focusProps, hoverProps, otherProps, + styles, ], ); From d58b37413f6044303a3c9a00c34c7bd93b463d74 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Tue, 14 Jan 2025 13:48:36 +0800 Subject: [PATCH 3/3] refactor: rename classNames to styles to keep the naming consistent --- packages/components/code/src/use-code.ts | 4 ++-- packages/components/link/src/use-link.ts | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/code/src/use-code.ts b/packages/components/code/src/use-code.ts index 7075416aeb..8ece968d46 100644 --- a/packages/components/code/src/use-code.ts +++ b/packages/components/code/src/use-code.ts @@ -21,7 +21,7 @@ export function useCode(originalProps: UseCodeProps) { const Component = as || "code"; - const classNames = useMemo( + const styles = useMemo( () => code({ ...variantProps, @@ -32,7 +32,7 @@ export function useCode(originalProps: UseCodeProps) { const getCodeProps: PropGetter = () => { return { - className: classNames, + className: styles, ...otherProps, }; }; diff --git a/packages/components/link/src/use-link.ts b/packages/components/link/src/use-link.ts index 1cb9b29b1d..442348c716 100644 --- a/packages/components/link/src/use-link.ts +++ b/packages/components/link/src/use-link.ts @@ -98,7 +98,7 @@ export function useLink(originalProps: UseLinkProps) { otherProps.target = otherProps.target ?? "_blank"; } - const classNames = useMemo( + const styles = useMemo( () => link({ ...variantProps, @@ -111,13 +111,13 @@ export function useLink(originalProps: UseLinkProps) { const getLinkProps: PropGetter = useCallback(() => { return { ref: domRef, - className: classNames, + className: styles, "data-focus": dataAttr(isFocused), "data-disabled": dataAttr(originalProps.isDisabled), "data-focus-visible": dataAttr(isFocusVisible), ...mergeProps(focusProps, linkProps, otherProps), }; - }, [classNames, isFocused, isFocusVisible, focusProps, linkProps, otherProps]); + }, [styles, isFocused, isFocusVisible, focusProps, linkProps, otherProps]); return {Component, children, anchorIcon, showAnchorIcon, getLinkProps}; }