chore: add-class-names-to-target-popovers

Author: tractorss

src/lib/dropdown/cascader/dropdown-container.tsx

@@ -19,6 +19,7 @@ interface IDropdownContainer
     "disabledKeys" | "defaultSelectedKey" | "items" | "callback"
   > {
   isOpen?: boolean;
+  className?: string;
 }
 
 const DropdownContainer: React.FC<IDropdownContainer> = ({
@@ -27,6 +28,7 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
   disabledKeys,
   defaultSelectedKey,
   callback,
+  className,
 }) => {
   const gridRef = useRef<HTMLDivElement>(null);
   const [selectedKey, setSelectedKey] = useState<Key | null>(
@@ -78,17 +80,19 @@ const DropdownContainer: React.FC<IDropdownContainer> = ({
 
   return (
     <Popover
-      className={clsx(
+      className={cn(
         "bg-klerosUIComponentsWhiteBackground rounded-base border-klerosUIComponentsStroke box-border border",
         "shadow-default focus-visible:outline-klerosUIComponentsPrimaryBlue overflow-hidden",
         "w-60 origin-top transform transition lg:w-max lg:max-w-6xl",
         isOpen
           ? "entering:animate-scale-in scale-y-100"
           : "exiting:animate-scale-out scale-y-0",
+        className,
       )}
     >
       <Dialog aria-label="dropdown-dialog">
         <Tree
+          id="dropdown-tree"
           ref={gridRef}
           autoFocus="first"
           items={items}

src/lib/dropdown/cascader/index.tsx

@@ -16,6 +16,7 @@ export interface IDropdownCascader extends AriaSelectProps {
   /** Callback function passes the Item object as argument. */
   callback: (item: IItem) => void;
   label?: string;
+  dropdownClassName?: string;
 }
 
 /** A Dropdown Cascader provides users with a way to navigate nested hierarchical information,
@@ -29,6 +30,7 @@ function DropdownCascader({
   disabledKeys,
   selectedKey,
   defaultSelectedKey,
+  dropdownClassName,
   ...props
 }: Readonly<IDropdownCascader>) {
   return (
@@ -56,6 +58,7 @@ function DropdownCascader({
               defaultSelectedKey: selectedKey ?? defaultSelectedKey,
               disabledKeys,
               callback,
+              className: dropdownClassName,
             }}
           />
         </>

src/lib/dropdown/select/dropdown-container.tsx

@@ -3,30 +3,36 @@ import React from "react";
 import { Collection, ListBox, Popover } from "react-aria-components";
 import Scrollbar from "../../scrollbar";
 import Item, { IItem } from "./item";
+import { cn } from "../../../utils";
 
-const DropdownContainer: React.FC<{ isOpen?: boolean; items: IItem[] }> = ({
-  isOpen,
-  items,
-}) => {
+const DropdownContainer: React.FC<{
+  isOpen?: boolean;
+  items: IItem[];
+  className?: string;
+}> = ({ isOpen, items, className }) => {
   return (
     <Popover
-      className={clsx(
+      className={cn(
         "bg-klerosUIComponentsWhiteBackground rounded-base border-klerosUIComponentsStroke border",
         "shadow-default focus:outline-klerosUIComponentsPrimaryBlue box-border overflow-hidden outline-none",
         "origin-top transform transition",
         isOpen
           ? "entering:animate-scale-in scale-y-100"
           : "exiting:animate-scale-out scale-y-0",
+        className,
       )}
     >
       <Scrollbar className="max-h-87.5 w-59.5">
         <ListBox
+          id="listbox"
           className={clsx(
             "bg-klerosUIComponentsWhiteBackground box-border w-59.5",
             "cols-[repeat(auto-fill,_minmax(0,_45px))] grid grow py-4",
           )}
         >
-          <Collection items={items}>{(item) => <Item {...item} />}</Collection>
+          <Collection items={items}>
+            {(item) => <Item className="listbox-item" {...item} />}
+          </Collection>
         </ListBox>
       </Scrollbar>
     </Popover>

src/lib/dropdown/select/index.tsx

@@ -21,6 +21,7 @@ interface SelectProps extends AriaSelectProps {
   /** When `simpleButton` is `true`, this scales down the dropdown button size. */
   smallButton?: boolean;
   label?: string;
+  dropdownClassName?: string;
 }
 
 /** A select displays a collapsible list of options and allows a user to select one of them. */
@@ -32,6 +33,7 @@ function DropdownSelect({
   callback,
   placeholder,
   className,
+  dropdownClassName,
   ...props
 }: Readonly<SelectProps>) {
   const handleSelection = useCallback(
@@ -64,7 +66,9 @@ function DropdownSelect({
             <DropdownButton {...{ placeholder }} />
           )}
           <FieldError className="text-klerosUIComponentsError text-sm" />
-          <DropdownContainer {...{ isOpen, items }} />
+          <DropdownContainer
+            {...{ isOpen, items, className: dropdownClassName }}
+          />
         </>
       )}
     </AriaSelect>

src/lib/form/datepicker/index.tsx

@@ -25,6 +25,7 @@ interface DatePickerProps
   /** Show time selection if true. */
   time?: boolean;
   label?: string;
+  popoverClassName?: string;
 }
 
 /** A date picker allow users to enter or select a date and time value. */
@@ -34,6 +35,7 @@ function DatePicker({
   minValue,
   defaultValue = now(getLocalTimeZone()),
   shouldCloseOnSelect = false,
+  popoverClassName,
   ...props
 }: Readonly<DatePickerProps>) {
   return (
@@ -62,6 +64,7 @@ function DatePicker({
               "bg-klerosUIComponentsWhiteBackground shadow-default rounded-base overflow-y-scroll",
               "border-klerosUIComponentsStroke ease-ease scrollbar border transition",
               time ? "w-82.5 lg:w-112.5" : "w-82.5",
+              popoverClassName,
             )}
           >
             <Dialog className="flex size-full flex-wrap">