feat: Tile.tsx: add a <div> element wrapper to tileContent to separate it from other nodes and enable passing down className

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ env:
 jobs:
   lint:
     name: Static code analysis
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout
@@ -26,7 +26,7 @@ jobs:
 
   typescript:
     name: Type checking
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout
@@ -61,7 +61,7 @@ jobs:
 
   format:
     name: Formatting
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout
@@ -75,7 +75,7 @@ jobs:
 
   unit:
     name: Unit tests
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout

.github/workflows/close-stale-issues.yml

@@ -8,7 +8,7 @@ on:
 jobs:
   close-issues:
     name: Close stale issues
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Close stale issues

.github/workflows/publish.yml

@@ -13,7 +13,7 @@ permissions:
 jobs:
   publish:
     name: Publish
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-24.04-arm
 
     steps:
       - name: Checkout

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-  "recommendations": ["biomejs.biome", "eamodio.gitlens"],
-  "unwantedRecommendations": ["dbaeumer.jshint"]
+  "recommendations": ["biomejs.biome"],
+  "unwantedRecommendations": ["dbaeumer.jshint", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
 }

packages/react-calendar/package.json

@@ -66,7 +66,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.0",
     "typescript": "^5.5.2",
-    "vitest": "^2.1.1"
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",

packages/react-calendar/src/Calendar.tsx

@@ -399,6 +399,14 @@ export type CalendarProps = {
    * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
    */
   tileContent?: TileContentFunc | React.ReactNode;
+  /**
+   * Class name(s) that will be applied to a given calendar item tileContent wrapper (day on month view, month on year view and so on).
+   *
+   * @example 'class1 class2'
+   * @example ['class1', 'class2 class3']
+   * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
+   */
+  tileContentWrapperClassName?: TileClassNameFunc | ClassName;
   /**
    * Pass a function to determine if a certain day should be displayed as disabled.
    *
@@ -653,6 +661,7 @@ const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttribu
       showWeekNumbers,
       tileClassName,
       tileContent,
+      tileContentWrapperClassName,
       tileDisabled,
       value: valueProps,
       view: viewProps,
@@ -1021,6 +1030,7 @@ const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttribu
         onMouseOver: selectRange ? onMouseOver : undefined,
         tileClassName,
         tileContent,
+        tileContentWrapperClassName,
         tileDisabled,
         value,
         valueType,

packages/react-calendar/src/Tile.tsx

@@ -60,6 +60,15 @@ type TileProps = {
    * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 0 ? <p>It's Sunday!</p> : null
    */
   tileContent?: TileContentFunc | React.ReactNode;
+  /**
+   * Class name(s) that will be applied to a given calendar item tileContent wrapper (day on month view, month on year view and so on).
+   *
+   * @example 'class1 class2'
+   * @example ['class1', 'class2 class3']
+   * @example ({ activeStartDate, date, view }) => view === 'month' && date.getDay() === 3 ? 'wednesday' : null
+   */
+  tileContentWrapperClassName?: TileClassNameFunc | ClassName;
+
   /**
    * Pass a function to determine if a certain day should be displayed as disabled.
    *
@@ -91,6 +100,7 @@ export default function Tile(props: TileProps): React.ReactElement {
     style,
     tileClassName: tileClassNameProps,
     tileContent: tileContentProps,
+    tileContentWrapperClassName: tileContentWrapperClassNameProps,
     tileDisabled,
     view,
   } = props;
@@ -107,6 +117,13 @@ export default function Tile(props: TileProps): React.ReactElement {
     return typeof tileContentProps === 'function' ? tileContentProps(args) : tileContentProps;
   }, [activeStartDate, date, tileContentProps, view]);
 
+  const tileContentWrapperClassName = useMemo(() => {
+    const args = { activeStartDate, date, view };
+
+    return typeof tileContentWrapperClassNameProps === 'function' ? tileContentWrapperClassNameProps(args) : tileContentWrapperClassNameProps;
+  }, [activeStartDate, date, tileContentWrapperClassNameProps, view]);
+
+
   return (
     <button
       className={clsx(classes, tileClassName)}
@@ -122,7 +139,9 @@ export default function Tile(props: TileProps): React.ReactElement {
       type="button"
     >
       {formatAbbr ? <abbr aria-label={formatAbbr(locale, date)}>{children}</abbr> : children}
-      {tileContent}
+      <div className={clsx(tileContentWrapperClassName)}>
+        {tileContent}
+      </div>
     </button>
   );
 }

sample/package.json

@@ -20,8 +20,8 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.0",
+    "@vitejs/plugin-react": "^4.3.4",
     "typescript": "^5.0.0",
-    "vite": "^5.0.0"
+    "vite": "^6.0.0"
   }
 }