@progress/kendo-themes-html 12.2.0-dev.2 → 12.2.0-dev.4

package/dist/types/multiviewcalendar/templates/multiviewcalendar-century.d.ts

@@ -1 +1 @@
-export declare const MultiViewCalendarCentury: ({ showOtherCentury, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiViewCalendarCentury: ({ showCaptions, showOtherCentury, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/multiviewcalendar/templates/multiviewcalendar-decade.d.ts

@@ -1 +1 @@
-export declare const MultiViewCalendarDecade: ({ showOtherDecade, ...props }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiViewCalendarDecade: ({ showCaptions, showOtherDecade, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/multiviewcalendar/templates/multiviewcalendar-with-weeks.d.ts

@@ -1 +1 @@
-export declare const MultiViewCalendarWithWeeks: ({ showOtherMonth, ...other }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiViewCalendarWithWeeks: ({ showCaptions, showOtherMonth, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/multiviewcalendar/templates/multiviewcalendar-year.d.ts

@@ -1 +1 @@
-export declare const MultiViewCalendarYear: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const MultiViewCalendarYear: ({ showCaptions, ...props }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/multiviewcalendar/tests/multiviewcalendar-captions.d.ts

@@ -0,0 +1,2 @@
+declare const _default: () => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "12.2.0-dev.2",
+  "version": "12.2.0-dev.4",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -61,5 +61,5 @@
     "react-dom": "^19.0.0",
     "ts-jest": "^29.2.0"
   },
-  "gitHead": "918845c4b6e60435531f8b2fef5c0d0110b54c6d"
+  "gitHead": "a283a92613df9104316d448606ec801b4a9628c8"
 }

package/src/grid/tests/grid-filter-menu.tsx

@@ -49,7 +49,7 @@ export default () =>(
                     <form className="k-filter-menu k-popup k-group k-reset">
                         <div className="k-filter-menu-container">
                             <div className="k-filter-help-text">Show items with value that:</div>
-                            <DropdownList value="Is greater than or equal to" />
+                            <DropdownList value="An example of some very very very long filter operator" />
                             <NumericTextbox />
                             <DropdownList value="And" className="k-filter-and" />
                             <DropdownList value="Is equal to" />

package/src/multiviewcalendar/templates/multiviewcalendar-century.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarCentury = ({ showOtherCentury, ...props }: any) => (
+export const MultiViewCalendarCentury = ({ showCaptions ,showOtherCentury, ...props }: any) => (
     <MultiViewCalendar calendarView="century" calendarTitleText="1900 - 2099"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "1900 - 1999"}>
                     <CalendarTableRow>
                         <CalendarCell text="1890 - 1899" empty={!showOtherCentury}/>
                         <CalendarCell text="1900 - 1909" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarCentury = ({ showOtherCentury, ...props }: any) =>
                         <CalendarCell text="2000 - 2009" empty={!showOtherCentury} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2000 - 2099"}>
                     <CalendarTableRow>
                         <CalendarCell text="1990 - 1999" empty={!showOtherCentury}/>
                         <CalendarCell text="2000 - 2009" />

package/src/multiviewcalendar/templates/multiviewcalendar-decade.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarDecade = ({ showOtherDecade, ...props }: any) => (
+export const MultiViewCalendarDecade = ({ showCaptions, showOtherDecade, ...props }: any) => (
     <MultiViewCalendar calendarView="decade" calendarTitleText="2020 - 2039"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2020 - 2029"}>
                     <CalendarTableRow>
                         <CalendarCell text="2019" empty={!showOtherDecade} />
                         <CalendarCell text="2020" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarDecade = ({ showOtherDecade, ...props }: any) => (
                         <CalendarCell text="2030" empty={!showOtherDecade} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2030 - 2039"}>
                     <CalendarTableRow>
                         <CalendarCell text="2029" empty={!showOtherDecade} />
                         <CalendarCell text="2030" />

package/src/multiviewcalendar/templates/multiviewcalendar-with-weeks.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarWithWeeks = ({ showOtherMonth, ...other }: any) => (
+export const MultiViewCalendarWithWeeks = ({ showCaptions, showOtherMonth, ...other }: any) => (
     <MultiViewCalendar calendarView="month" showWeek
         children={
             <>
-                <CalendarTable showTableHead showWeek>
+                <CalendarTable calendarCaption={showCaptions && "October 2021"} showTableHead showWeek>
                     <CalendarTableRow>
                         <CalendarCell text="39" weekCell />
                         <CalendarCell text="26" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />
@@ -67,7 +67,7 @@ export const MultiViewCalendarWithWeeks = ({ showOtherMonth, ...other }: any) =>
                         <CalendarCell text="6" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable showTableHead showWeek>
+                <CalendarTable calendarCaption={showCaptions && "November 2021"} showTableHead showWeek>
                     <CalendarTableRow>
                         <CalendarCell text="45" weekCell />
                         <CalendarCell text="31" showOtherMonth={showOtherMonth} empty={!showOtherMonth} weekend={showOtherMonth} />

package/src/multiviewcalendar/templates/multiviewcalendar-year.tsx

@@ -1,11 +1,11 @@
 import { MultiViewCalendar } from "..";
 import { CalendarTable, CalendarTableRow, CalendarCell } from "../../calendar";
 
-export const MultiViewCalendarYear = (props: any) => (
+export const MultiViewCalendarYear = ({ showCaptions, ...props }: any) => (
     <MultiViewCalendar calendarView="year" calendarTitleText="2021"
         children={
             <>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2021"}>
                     <CalendarTableRow>
                         <CalendarCell text="Jan" />
                         <CalendarCell text="Feb" />
@@ -25,7 +25,7 @@ export const MultiViewCalendarYear = (props: any) => (
                         <CalendarCell text="Dec" />
                     </CalendarTableRow>
                 </CalendarTable>
-                <CalendarTable>
+                <CalendarTable calendarCaption={showCaptions && "2022"}>
                     <CalendarTableRow>
                         <CalendarCell text="Jan" />
                         <CalendarCell text="Feb" />

package/src/multiviewcalendar/tests/multiviewcalendar-captions.tsx

@@ -0,0 +1,46 @@
+import { MultiViewCalendarNormal, MultiViewCalendarYear, MultiViewCalendarDecade, MultiViewCalendarCentury, MultiViewCalendarWithWeeks } from '../../multiviewcalendar';
+
+const styles = `
+    #test-area {
+        max-width: 1240px;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2 k-gap-4">
+
+            <section>
+                <div>Month View</div>
+                <MultiViewCalendarNormal showCaptions />
+            </section>
+
+            <section>
+                <div>Month View with Week Numbers</div>
+                <MultiViewCalendarWithWeeks showCaptions  calendarTitleText="October 2021 - November 2021"/>
+            </section>
+
+            <section>
+                <div>Year View</div>
+                <MultiViewCalendarYear showCaptions />
+            </section>
+
+            <section>
+                <div>Decade View</div>
+                <MultiViewCalendarDecade showCaptions />
+            </section>
+
+            <section>
+                <div>Century View</div>
+                <MultiViewCalendarCentury showCaptions />
+            </section>
+
+            <section>
+                <div>With Footer</div>
+                <MultiViewCalendarNormal showCalendarFooter showCaptions />
+            </section>
+
+        </div>
+    </>
+);