fix: dropdown theme - granular control (#1066)

Co-authored-by: Sebastian Sutu <sebastian.sutu@sensidev.com>

Author: SutuSebastian

src/components/Dropdown/Dropdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { ExtendedRefs, useInteractions } from '@floating-ui/react';
+import type { ExtendedRefs } from '@floating-ui/react';
 import { FloatingFocusManager, FloatingList, useListNavigation, useTypeahead } from '@floating-ui/react';
 import type {
   ComponentProps,
@@ -14,22 +14,19 @@ import type {
   RefCallback,
   SetStateAction,
 } from 'react';
-import { cloneElement, createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { cloneElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { HiOutlineChevronDown, HiOutlineChevronLeft, HiOutlineChevronRight, HiOutlineChevronUp } from 'react-icons/hi';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
 import { useBaseFLoating, useFloatingInteractions } from '../../helpers/use-floating';
 import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
-import type { ButtonProps } from '../Button';
-import { Button } from '../Button';
+import { Button, type ButtonProps } from '../Button';
 import type { FloatingProps, FlowbiteFloatingTheme } from '../Floating';
-import type { FlowbiteDropdownDividerTheme } from './DropdownDivider';
-import { DropdownDivider } from './DropdownDivider';
-import type { FlowbiteDropdownHeaderTheme } from './DropdownHeader';
-import { DropdownHeader } from './DropdownHeader';
-import type { FlowbiteDropdownItemTheme } from './DropdownItem';
-import { DropdownItem } from './DropdownItem';
+import { DropdownContext } from './DropdownContext';
+import { DropdownDivider, type FlowbiteDropdownDividerTheme } from './DropdownDivider';
+import { DropdownHeader, type FlowbiteDropdownHeaderTheme } from './DropdownHeader';
+import { DropdownItem, type FlowbiteDropdownItemTheme } from './DropdownItem';
 
 export interface FlowbiteDropdownFloatingTheme
   extends FlowbiteFloatingTheme,
@@ -117,15 +114,6 @@ const Trigger = ({
   );
 };
 
-interface DropdownContextValue {
-  activeIndex: number | null;
-  dismissOnClick?: boolean;
-  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
-  handleSelect: (index: number | null) => void;
-}
-
-export const DropdownContext = createContext<DropdownContextValue>({} as DropdownContextValue);
-
 const DropdownComponent: FC<DropdownProps> = ({
   children,
   className,
@@ -219,6 +207,7 @@ const DropdownComponent: FC<DropdownProps> = ({
       </Trigger>
       <DropdownContext.Provider
         value={{
+          theme,
           activeIndex,
           dismissOnClick,
           getItemProps,

src/components/Dropdown/DropdownContext.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import type { useInteractions } from '@floating-ui/react';
+import { createContext, useContext } from 'react';
+import type { DeepPartial } from '../../types';
+import type { FlowbiteDropdownTheme } from './Dropdown';
+
+type DropdownContext = {
+  theme?: DeepPartial<FlowbiteDropdownTheme>;
+  activeIndex: number | null;
+  dismissOnClick?: boolean;
+  getItemProps: ReturnType<typeof useInteractions>['getItemProps'];
+  handleSelect: (index: number | null) => void;
+};
+
+export const DropdownContext = createContext<DropdownContext | undefined>(undefined);
+
+export function useDropdownContext(): DropdownContext {
+  const context = useContext(DropdownContext);
+
+  if (!context) {
+    throw new Error('useDropdownContext should be used within the DropdownContext provider!');
+  }
+
+  return context;
+}

src/components/Dropdown/DropdownDivider.tsx

@@ -1,13 +1,22 @@
+'use client';
+
 import type { ComponentProps, FC } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { getTheme } from '../../theme-store';
+import type { DeepPartial } from '../../types';
+import { useDropdownContext } from './DropdownContext';
 
 export interface FlowbiteDropdownDividerTheme {
   divider: string;
 }
 
-export const DropdownDivider: FC<ComponentProps<'div'>> = ({ className, ...props }) => {
-  const theme = getTheme().dropdown.floating.divider;
+export type DropdownDividerProps = {
+  theme?: DeepPartial<FlowbiteDropdownDividerTheme>;
+} & ComponentProps<'div'>;
+
+export const DropdownDivider: FC<DropdownDividerProps> = ({ className, theme: customTheme = {}, ...props }) => {
+  const { theme: dropdownTheme } = useDropdownContext();
+
+  const theme = customTheme.divider ?? dropdownTheme?.floating?.divider;
 
   return <div className={twMerge(theme, className)} {...props} />;
 };

src/components/Dropdown/DropdownHeader.tsx

@@ -1,14 +1,24 @@
+'use client';
+
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 import { twMerge } from 'tailwind-merge';
-import { getTheme } from '../../theme-store';
+import type { DeepPartial } from '../../types';
+import { useDropdownContext } from './DropdownContext';
 import { DropdownDivider } from './DropdownDivider';
 
 export interface FlowbiteDropdownHeaderTheme {
   header: string;
 }
 
-export const DropdownHeader: FC<PropsWithChildren & ComponentProps<'div'>> = ({ children, className, ...props }) => {
-  const theme = getTheme().dropdown.floating.header;
+export type DropdownHeaderProps = {
+  theme?: DeepPartial<FlowbiteDropdownHeaderTheme>;
+} & PropsWithChildren &
+  ComponentProps<'div'>;
+
+export const DropdownHeader: FC<DropdownHeaderProps> = ({ children, className, theme: customTheme = {}, ...props }) => {
+  const { theme: dropdownTheme } = useDropdownContext();
+
+  const theme = customTheme.header ?? dropdownTheme?.floating?.header;
 
   return (
     <>

src/components/Dropdown/DropdownItem.tsx

@@ -2,14 +2,11 @@
 
 import { useListItem } from '@floating-ui/react';
 import type { ComponentProps, ComponentPropsWithoutRef, ElementType, FC, RefCallback } from 'react';
-import { useContext } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { mergeDeep } from '../../helpers/merge-deep';
-import { getTheme } from '../../theme-store';
 import type { DeepPartial } from '../../types';
-import type { ButtonBaseProps } from '../Button/ButtonBase';
-import { ButtonBase } from '../Button/ButtonBase';
-import { DropdownContext } from './Dropdown';
+import { ButtonBase, type ButtonBaseProps } from '../Button/ButtonBase';
+import { useDropdownContext } from './DropdownContext';
 
 export interface FlowbiteDropdownItemTheme {
   container: string;
@@ -34,9 +31,9 @@ export const DropdownItem = <T extends ElementType = 'button'>({
   ...props
 }: DropdownItemProps<T>) => {
   const { ref, index } = useListItem({ label: typeof children === 'string' ? children : undefined });
-  const { activeIndex, dismissOnClick, getItemProps, handleSelect } = useContext(DropdownContext);
+  const { theme: dropdownTheme, activeIndex, dismissOnClick, getItemProps, handleSelect } = useDropdownContext();
   const isActive = activeIndex === index;
-  const theme = mergeDeep(getTheme().dropdown.floating.item, customTheme);
+  const theme = mergeDeep(dropdownTheme?.floating?.item ?? {}, customTheme);
 
   const theirProps = props as ButtonBaseProps<T>;