Repository: Hacker0x01/react-datepicker (ts)

Issue:
Property naming confusion for class names
**Describe the bug**
some class name properties is named xyzClassName, while others are called xyzClassname, this creates a bit of confusion when trying to override styling.


Examples: 
- calendarIconClassname
- DayClassName



Pull request:
fix: #4558 Rename calendarIconClassname props to calendarIconClassName props
## Description
**Linked issue**: close #4558

**Problem**
See issue #4558

**Changes**
fix props : calendarIconClass`n`ame => calendarIconClass`N`ame

## Screenshots
<!-- If applicable, add screenshots to help explain your improvements -->

## To reviewers
<!-- Additional comments for reviewers -->

## Contribution checklist
- [x] I have followed the [contributing guidelines](https://github.com/Hacker0x01/react-datepicker/blob/main/CONTRIBUTING.md).
- [x] I have added sufficient test coverage for my changes.
- [x] I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.


Patch:
diff --git a/docs/datepicker.md b/docs/datepicker.md
index d31c7e40..b082c4b5 100644
--- a/docs/datepicker.md
+++ b/docs/datepicker.md
@@ -105,6 +105,7 @@ General datepicker component.
 | `yearItemNumber`             | `number`                       | `12`            |                                                                                                                                                                                                                                                                                                                      |
 | `yearDropdownItemNumber`     | `number`                       |                 |                                                                                                                                                                                                                                                                                                                      |
 | `icon`                       | `string` or `element`          |                 | Allows using a custom calendar icon. Accepts a string (icon class name) or a React component (e.g., custom SVG). If a string is passed, an `<i>` element is rendered with that string as its class name. If a React component is passed, it is rendered as-is.                                                       |
+| `calendarIconClassname`      | `string`                       |                 | this props is deprecated. should use calendarIconClassName props.                                                                                                                                                                                                                                                    |
 | `calendarIconClassName`      | `string`                       |                 | Accepts a string that will be added as an additional CSS class to the calendar icon, allowing further styling customization.                                                                                                                                                                                         |
 | `showIcon`                   | `bool`                         | `true`          | Determines whether the calendar icon is displayed. Set to `true` to display the icon, and `false` to hide it. If `icon` prop is also provided, the custom icon will be displayed when `showIcon` is `true`.                                                                                                          |
 | `usePointerEvent`            | `bool`                         | false           | True if Pointer Events (e.g, onPointerEnter, onPointerLeave) are used internally instead of Mouse Events (e.g, onMouseEnter, onMouseLeave).                                                                                                                                                                          |
diff --git a/docs/index.md b/docs/index.md
index 3d376339..31702756 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -14,6 +14,7 @@
 | `calendarClassName`             | `string`                                                                                                                                             |                    |             |
 | `calendarContainer`             | `func`                                                                                                                                               |                    |             |
 | `calendarIconClassname`         | `string`                                                                                                                                             |                    |             |
+| `calendarIconClassName`         | `string`                                                                                                                                             |                    |             |
 | `calendarStartDay`              | `number`                                                                                                                                             | `undefined`        |             |
 | `children`                      | `node`                                                                                                                                               |                    |             |
 | `chooseDayAriaLabelPrefix`      | `string`                                                                                                                                             |                    |             |
diff --git a/src/index.jsx b/src/index.jsx
index 627ae4e8..62d04738 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -205,6 +205,7 @@ export default class DatePicker extends React.Component {
     showIcon: PropTypes.bool,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     calendarIconClassname: PropTypes.string,
+    calendarIconClassName: PropTypes.string,
     locale: PropTypes.oneOfType([
       PropTypes.string,
       PropTypes.shape({ locale: PropTypes.object }),
@@ -1332,10 +1333,21 @@ export default class DatePicker extends React.Component {
   };
 
   renderInputContainer() {
-    const { showIcon, icon, calendarIconClassname, toggleCalendarOnIconClick } =
-      this.props;
+    const {
+      showIcon,
+      icon,
+      calendarIconClassname,
+      calendarIconClassName,
+      toggleCalendarOnIconClick,
+    } = this.props;
     const { open } = this.state;
 
+    if (calendarIconClassname) {
+      console.warn(
+        `calendarIconClassname props is deprecated. should use calendarIconClassName props.`,
+      );
+    }
+
     return (
       <div
         className={`react-datepicker__input-container${
@@ -1345,9 +1357,11 @@ export default class DatePicker extends React.Component {
         {showIcon && (
           <CalendarIcon
             icon={icon}
-            className={`${calendarIconClassname} ${
-              open && "react-datepicker-ignore-onclickoutside"
-            }`}
+            className={clsx(
+              calendarIconClassName,
+              !calendarIconClassName && calendarIconClassname,
+              open && "react-datepicker-ignore-onclickoutside",
+            )}
             {...(toggleCalendarOnIconClick
               ? {
                   onClick: this.toggleCalendar,


Test patch:
diff --git a/test/datepicker_test.test.js b/test/datepicker_test.test.js
index 5bf1d8af..2724ccf8 100644
--- a/test/datepicker_test.test.js
+++ b/test/datepicker_test.test.js
@@ -577,6 +577,63 @@ describe("DatePicker", () => {
     ).toBe(true);
   });
 
+  it("should apply the calendarIconClassName to calendar icon", () => {
+    const customClassName = "customClassName";
+    const { container } = render(
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        calendarIconClassName={customClassName}
+        toggleCalendarOnIconClick
+      />,
+    );
+
+    const calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+
+    expect(calendarIcon.classList.contains(customClassName)).toBe(true);
+  });
+
+  it("should not apply the calendarIconClassname to calendar icon with calendarIconClassName", () => {
+    const customClassName = "customClassName";
+    const customClassname = "customClassname";
+    const { container } = render(
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        calendarIconClassName={customClassName}
+        calendarIconClassname={customClassname}
+        toggleCalendarOnIconClick
+      />,
+    );
+
+    const calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+
+    expect(calendarIcon.classList.contains(customClassName)).toBe(true);
+    expect(calendarIcon.classList.contains(customClassname)).toBe(false);
+  });
+
+  it("should apply the calendarIconClassname to calendar icon without calendarIconClassName", () => {
+    const customClassname = "customClassName";
+    const { container } = render(
+      <DatePicker
+        selected={utils.newDate("2023-12-17")}
+        showIcon
+        calendarIconClassname={customClassname}
+        toggleCalendarOnIconClick
+      />,
+    );
+
+    const calendarIcon = container.querySelector(
+      "svg.react-datepicker__calendar-icon",
+    );
+
+    expect(calendarIcon.classList.contains(customClassname)).toBe(true);
+  });
+
   it("should set the type attribute on the clear button to button", () => {
     const { container } = render(
       <DatePicker selected={utils.newDate("2015-12-15")} isClearable />,