fix(date-picker): deprecate dateInputClassNames (#4780)

* chore(date-picker): add missing slots comments

* fix(date-picker): remove dateInputClassNames

* fix(date-picker): use classNames instead of dateInputClassNames

* chore(docs): add missing attributes

* fix(date-picker): use classNames instead of dateInputClassNames

* feat(changeset): add changeset

* fix(docs): broken type

.changeset/yellow-years-listen.md

@@ -0,0 +1,5 @@
+---
+"@heroui/date-picker": patch
+---
+
+remove dateInputClassNames for date picker (#4495)

apps/docs/content/docs/components/date-input.mdx

@@ -415,6 +415,12 @@ import {parseZonedDateTime} from "@internationalized/date";
       type: "boolean",
       description: "Whether to disable animations.",
       default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"label\" | \"inputWrapper\" | \"input\" | \"segment\" | \"helperWrapper\" | \"description\" | \"errorMessage\", string>>",
+      description: "Allows to set custom class names for the date-input slots.",
+      default: "-"
     }
   ]}
 />

apps/docs/content/docs/components/date-picker.mdx

@@ -488,7 +488,55 @@ import {I18nProvider} from "@react-aria/i18n";
       type: "boolean",
       description: "Whether to always show leading zeros in the month, day, and hour fields.",
       default: "true"
-    }
+    },
+    {
+      attribute: "CalendarBottomContent",
+      type: "ReactNode",
+      description: "Bottom content to be rendered in the calendar component.",
+      default: "-"
+    },
+    {
+      attribute: "showMonthAndYearPickers",
+      type: "boolean | undefined",
+      description: "Whether the calendar should show month and year pickers.",
+      default: "false"
+    },
+    {
+      attribute: "popoverProps",
+      type: "PopoverProps | undefined",
+      description: "Props to be passed to the popover component.",
+      default: `{ placement: "bottom", triggerScaleOnOpen: false, offset: 13 }`
+    },
+    {
+      attribute: "selectorButtonProps",
+      type: "ButtonProps | undefined",
+      description: "Props to be passed to the selector button component.",
+      default: `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }`
+    },
+    {
+      attribute: "calendarProps",
+      type: "CalendarProps | undefined",
+      description: "Props to be passed to the calendar component.",
+      default: `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }`
+    },
+    {
+      attribute: "timeInputProps",
+      type: "TimeInputProps | undefined",
+      description: "Props to be passed to the time input component.",
+      default: `{ size: "sm", variant: "light", radius: "full", isIconOnly: true }`
+    },
+    {
+      attribute: "disableAnimation",
+      type: "boolean",
+      description: "Whether to disable all animations in the date picker. Including the DateInput, Button, Calendar, and Popover.",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: `Partial<Record<"base" | "selectorButton" | "selectorIcon" | "popoverContent" | "calendar" | "calendarContent" | "timeInputLabel" | "timeInput", string>>`,
+      description: "Allows to set custom class names for the date-picker slots. You can also pass Date Input classNames here.",
+      default: "-"
+    },
   ]}
 />
 

apps/docs/content/docs/components/date-range-picker.mdx

@@ -628,8 +628,8 @@ You can customize the `DateRangePicker` component by passing custom Tailwind CSS
     },
     {
       attribute: "classNames",
-      type: "Partial<Record<\"base\" | \"selectorButton\" | \"selectorIcon\" | \"popoverContent\" | \"calendar\" | \"calendarContent\" | \"timeInputLabel\" | \"timeInput\", string>>",
-      description: "Allows to set custom class names for the date-range-picker slots.",
+      type: "Partial<Record<\"base\" | \"label\" | \"calendar\" | \"selectorButton\" | \"selectorIcon\" | \"popoverContent\" | \"calendarContent\" | \"inputWrapper\" | \"input\" | \"segment\" | \"separator\" | \"bottomContent\" | \"timeInputWrapper\" | \"timeInputLabel\" | \"timeInput\" | \"helperWrapper\" | \"description\" | \"errorMessage\", string>>",
+      description: "Allows to set custom class names for the date-range-picker slots. You can also pass Date Input classNames here.",
       default: "-"
     }
   ]}

packages/components/date-picker/__tests__/date-picker.test.tsx

@@ -242,7 +242,7 @@ describe("DatePicker", () => {
     it("should apply custom dateInput classNames", function () {
       const {getByText} = render(
         <DatePicker
-          dateInputClassNames={{
+          classNames={{
             inputWrapper: "border-green-500",
             label: "text-green-500",
           }}

packages/components/date-picker/src/use-date-picker.ts

@@ -50,13 +50,7 @@ interface Props<T extends DateValue>
   classNames?: SlotsToClasses<DatePickerSlots> & DateInputProps<T>["classNames"];
 }
 
-export type UseDatePickerProps<T extends DateValue> = Props<T> &
-  AriaDatePickerProps<T> & {
-    /**
-     * Classname or List of classes to change the classNames of the date input element.
-     */
-    dateInputClassNames?: DateInputProps<T>["classNames"];
-  };
+export type UseDatePickerProps<T extends DateValue> = Props<T> & AriaDatePickerProps<T>;
 
 export function useDatePicker<T extends DateValue>({
   className,
@@ -143,7 +137,7 @@ export function useDatePicker<T extends DateValue>({
   const getDateInputProps = () => {
     return {
       ...dateInputProps,
-      classNames: {...originalProps?.dateInputClassNames},
+      classNames,
       groupProps,
       labelProps,
       createCalendar,

packages/components/date-picker/src/use-date-range-picker.ts

@@ -46,6 +46,8 @@ interface Props<T extends DateValue>
    *    separator: "separator-classes",
    *    bottomContent: "bottom-content-classes",
    *    timeInputWrapper: "time-input-wrapper-classes",
+   *    timeInputLabel: "time-input-label-classes",
+   *    timeInput: "time-input-classes",
    *    helperWrapper: "helper-wrapper-classes",
    *    description: "description-classes",
    *    errorMessage: "error-message-classes",

packages/components/date-picker/stories/date-picker.stories.tsx

@@ -683,7 +683,7 @@ export const WithDateInputClassNames = {
   render: Template,
   args: {
     ...defaultProps,
-    dateInputClassNames: {
+    classNames: {
       base: "bg-gray-200 p-2 rounded-md",
       label: "text-blue-400 font-semibold",
       inputWrapper: "border-3 border-solid border-blue-400 p-2 rounded-md",