@dynatrace/strato-components 3.4.1 → 3.5.2

package/esm/forms/calendar/Calendar.css

@@ -1,24 +1,24 @@
-._xm8mdk0-3-4-1 {
+._xm8mdk0-3-5-2 {
   width: 248px;
 }
-._xm8mdk1-3-4-1 {
+._xm8mdk1-3-5-2 {
   cursor: not-allowed;
 }
-._xm8mdk2-3-4-1 {
+._xm8mdk2-3-5-2 {
   color: var(--dt-colors-text-neutral-disabled, #595a7d80);
   cursor: not-allowed;
 }
-._xm8mdk3-3-4-1 {
+._xm8mdk3-3-5-2 {
   all: revert;
   width: 100%;
   border-collapse: collapse;
   border: 0;
   border-spacing: 0;
 }
-._xm8mdk4-3-4-1 {
+._xm8mdk4-3-5-2 {
   pointer-events: none;
 }
-._xm8mdk5-3-4-1 {
+._xm8mdk5-3-5-2 {
   background: revert;
   border: 0;
   display: grid;
@@ -26,16 +26,16 @@
   justify-items: center;
   align-items: center;
 }
-._xm8mdk6-3-4-1 {
+._xm8mdk6-3-5-2 {
   grid-template-columns: repeat(7, minmax(0, 1fr));
 }
-._xm8mdk7-3-4-1 {
+._xm8mdk7-3-5-2 {
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-._xm8mdk8-3-4-1 {
+._xm8mdk8-3-5-2 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-._xm8mdk9-3-4-1 {
+._xm8mdk9-3-5-2 {
   border: 0;
   width: 100%;
   margin-top: var(--dt-spacings-size-2, 2px);
@@ -43,85 +43,85 @@
   padding: 0;
   border-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdka-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
-  --_1jljrbf1-3-4-1: var(--dt-colors-border-primary-accent, #464cce);
+._xm8mdka-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-primary-emphasized, #e1e5f7);
+  --_1jljrbf1-3-5-2: var(--dt-colors-border-primary-accent, #464cce);
 }
-._xm8mdkb-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
-  --_1jljrbf1-3-4-1: var(--dt-colors-text-neutral-default, #2f2f4f);
+._xm8mdkb-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+  --_1jljrbf1-3-5-2: var(--dt-colors-text-neutral-default, #2f2f4f);
 }
-._xm8mdkc-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
-  --_1jljrbf1-3-4-1: var(--dt-colors-border-critical-accent, #bb0731);
+._xm8mdkc-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-critical-emphasized, #f8e1e1);
+  --_1jljrbf1-3-5-2: var(--dt-colors-border-critical-accent, #bb0731);
 }
-._xm8mdkd-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
+._xm8mdkd-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-neutral-emphasized, #e4e5eb);
 }
-._xm8mdkf-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
-  --_1jljrbf1-3-4-1: var(--dt-colors-border-primary-disabled, #dadbe480);
+._xm8mdkf-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-primary-disabled, #e4e5eb80);
+  --_1jljrbf1-3-5-2: var(--dt-colors-border-primary-disabled, #dadbe480);
 }
-._xm8mdkg-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
-  --_1jljrbf1-3-4-1: var(--dt-colors-border-neutral-disabled, #dadbe480);
+._xm8mdkg-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-neutral-disabled, #e4e5eb80);
+  --_1jljrbf1-3-5-2: var(--dt-colors-border-neutral-disabled, #dadbe480);
 }
-._xm8mdkh-3-4-1 {
-  --_1jljrbf0-3-4-1: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
-  --_1jljrbf1-3-4-1: var(--dt-colors-border-critical-disabled, #dadbe480);
+._xm8mdkh-3-5-2 {
+  --_1jljrbf0-3-5-2: var(--dt-colors-background-field-critical-disabled, #e4e5eb80);
+  --_1jljrbf1-3-5-2: var(--dt-colors-border-critical-disabled, #dadbe480);
 }
-._xm8mdki-3-4-1 {
+._xm8mdki-3-5-2 {
   position: relative;
   z-index: 0;
 }
-._xm8mdki-3-4-1::before {
+._xm8mdki-3-5-2::before {
   content: "";
   position: absolute;
   top: 0;
-  background: var(--_1jljrbf0-3-4-1);
+  background: var(--_1jljrbf0-3-5-2);
   height: 100%;
   z-index: -1;
 }
-._xm8mdkj-3-4-1 {
-  background: var(--_1jljrbf0-3-4-1);
+._xm8mdkj-3-5-2 {
+  background: var(--_1jljrbf0-3-5-2);
 }
-._xm8mdkj-3-4-1::before {
+._xm8mdkj-3-5-2::before {
   right: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkj-3-4-1:last-child::before {
+._xm8mdkj-3-5-2:last-child::before {
   background: none;
 }
-._xm8mdkk-3-4-1 {
-  background: var(--_1jljrbf0-3-4-1);
+._xm8mdkk-3-5-2 {
+  background: var(--_1jljrbf0-3-5-2);
 }
-._xm8mdkk-3-4-1::before {
+._xm8mdkk-3-5-2::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(var(--dt-spacings-size-4, 4px) / 2);
 }
-._xm8mdkk-3-4-1:first-child::before {
+._xm8mdkk-3-5-2:first-child::before {
   background: none;
 }
-._xm8mdkl-3-4-1::before {
+._xm8mdkl-3-5-2::before {
   left: calc(var(--dt-spacings-size-4, 4px) / -2);
   width: calc(100% + (var(--dt-spacings-size-4, 4px)));
-  background: var(--_1jljrbf0-3-4-1);
+  background: var(--_1jljrbf0-3-5-2);
 }
-._xm8mdkl-3-4-1:first-child::before {
+._xm8mdkl-3-5-2:first-child::before {
   left: 0;
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-left-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-left-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkl-3-4-1:last-child::before {
+._xm8mdkl-3-5-2:last-child::before {
   width: calc(100% + (var(--dt-spacings-size-4, 4px) / 2));
   border-top-right-radius: var(--dt-borders-radius-field-default, 6px);
   border-bottom-right-radius: var(--dt-borders-radius-field-default, 6px);
 }
-._xm8mdkm-3-4-1 {
+._xm8mdkm-3-5-2 {
   background: none;
 }
-._xm8mdkn-3-4-1 {
+._xm8mdkn-3-5-2 {
   width: 100%;
   border-collapse: collapse;
   border: 0;

package/esm/forms/calendar/Calendar.sty.js

@@ -1,27 +1,27 @@
 import "./Calendar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var calendarBodyCSS = _7a468({ defaultClassName: "_xm8mdk3-3-4-1", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarCSS = _7a468({ defaultClassName: "_xm8mdk0-3-4-1", variantClassNames: { readOnly: { true: "_xm8mdk1-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarClearBgCSS = "_xm8mdkm-3-4-1";
-var calendarDayRowCSS = "_xm8mdk6-3-4-1";
-var calendarDisabledCSS = "_xm8mdk2-3-4-1";
-var calendarFieldCSS = _7a468({ defaultClassName: "_xm8mdk9-3-4-1", variantClassNames: { color: { primary: "_xm8mdka-3-4-1", neutral: "_xm8mdkb-3-4-1", critical: "_xm8mdkc-3-4-1" }, isIncompleteSelection: { true: "_xm8mdkd-3-4-1" }, isDisabled: { true: "_xm8mdke-3-4-1" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-4-1"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-4-1"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-4-1"]] });
-var calendarMonthRowCSS = "_xm8mdk7-3-4-1";
-var calendarRangeFieldCSS = _7a468({ defaultClassName: "_xm8mdki-3-4-1", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-4-1", last: "_xm8mdkk-3-4-1", inbetween: "_xm8mdkl-3-4-1" } }, defaultVariants: {}, compoundVariants: [] });
-var calendarRowCSS = "_xm8mdk5-3-4-1";
-var calendarWeekdaysCSS = "_xm8mdkn-3-4-1";
-var calendarYearRowCSS = "_xm8mdk8-3-4-1";
+var body = _7a468({ defaultClassName: "_xm8mdk3-3-5-2", variantClassNames: { isReadOnly: { true: "_xm8mdk4-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var calendar = _7a468({ defaultClassName: "_xm8mdk0-3-5-2", variantClassNames: { readOnly: { true: "_xm8mdk1-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var clearBackground = "_xm8mdkm-3-5-2";
+var dayRow = "_xm8mdk6-3-5-2";
+var disabled = "_xm8mdk2-3-5-2";
+var field = _7a468({ defaultClassName: "_xm8mdk9-3-5-2", variantClassNames: { color: { primary: "_xm8mdka-3-5-2", neutral: "_xm8mdkb-3-5-2", critical: "_xm8mdkc-3-5-2" }, isIncompleteSelection: { true: "_xm8mdkd-3-5-2" }, isDisabled: { true: "_xm8mdke-3-5-2" } }, defaultVariants: { isDisabled: false, color: "neutral" }, compoundVariants: [[{ color: "primary", isDisabled: true }, "_xm8mdkf-3-5-2"], [{ color: "neutral", isDisabled: true }, "_xm8mdkg-3-5-2"], [{ color: "critical", isDisabled: true }, "_xm8mdkh-3-5-2"]] });
+var monthRow = "_xm8mdk7-3-5-2";
+var rangeField = _7a468({ defaultClassName: "_xm8mdki-3-5-2", variantClassNames: { rangeKind: { first: "_xm8mdkj-3-5-2", last: "_xm8mdkk-3-5-2", inbetween: "_xm8mdkl-3-5-2" } }, defaultVariants: {}, compoundVariants: [] });
+var row = "_xm8mdk5-3-5-2";
+var weekdays = "_xm8mdkn-3-5-2";
+var yearRow = "_xm8mdk8-3-5-2";
 export {
-  calendarBodyCSS,
-  calendarCSS,
-  calendarClearBgCSS,
-  calendarDayRowCSS,
-  calendarDisabledCSS,
-  calendarFieldCSS,
-  calendarMonthRowCSS,
-  calendarRangeFieldCSS,
-  calendarRowCSS,
-  calendarWeekdaysCSS,
-  calendarYearRowCSS
+  body,
+  calendar,
+  clearBackground,
+  dayRow,
+  disabled,
+  field,
+  monthRow,
+  rangeField,
+  row,
+  weekdays,
+  yearRow
 };
 //# sourceMappingURL=Calendar.sty.js.map

package/esm/forms/calendar/Calendar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/Calendar.css.ts"],
-  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var calendarBodyCSS = _7a468({defaultClassName:'_xm8mdk3-3-4-1',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarCSS = _7a468({defaultClassName:'_xm8mdk0-3-4-1',variantClassNames:{readOnly:{true:'_xm8mdk1-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarClearBgCSS = '_xm8mdkm-3-4-1';\nexport var calendarDayRowCSS = '_xm8mdk6-3-4-1';\nexport var calendarDisabledCSS = '_xm8mdk2-3-4-1';\nexport var calendarFieldCSS = _7a468({defaultClassName:'_xm8mdk9-3-4-1',variantClassNames:{color:{primary:'_xm8mdka-3-4-1',neutral:'_xm8mdkb-3-4-1',critical:'_xm8mdkc-3-4-1'},isIncompleteSelection:{true:'_xm8mdkd-3-4-1'},isDisabled:{true:'_xm8mdke-3-4-1'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-4-1'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-4-1'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-4-1']]});\nexport var calendarMonthRowCSS = '_xm8mdk7-3-4-1';\nexport var calendarRangeFieldCSS = _7a468({defaultClassName:'_xm8mdki-3-4-1',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-4-1',last:'_xm8mdkk-3-4-1',inbetween:'_xm8mdkl-3-4-1'}},defaultVariants:{},compoundVariants:[]});\nexport var calendarRowCSS = '_xm8mdk5-3-4-1';\nexport var calendarWeekdaysCSS = '_xm8mdkn-3-4-1';\nexport var calendarYearRowCSS = '_xm8mdk8-3-4-1';"],
-  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,kBAAkB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC9J,IAAI,cAAc,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACxJ,IAAI,qBAAqB;AACzB,IAAI,oBAAoB;AACxB,IAAI,sBAAsB;AAC1B,IAAI,mBAAmB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,GAAE,uBAAsB,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,OAAM,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,YAAW,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AAChe,IAAI,sBAAsB;AAC1B,IAAI,wBAAwB,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,OAAM,kBAAiB,MAAK,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,iBAAiB;AACrB,IAAI,sBAAsB;AAC1B,IAAI,qBAAqB;",
+  "sourcesContent": ["import './Calendar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var body = _7a468({defaultClassName:'_xm8mdk3-3-5-2',variantClassNames:{isReadOnly:{true:'_xm8mdk4-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var calendar = _7a468({defaultClassName:'_xm8mdk0-3-5-2',variantClassNames:{readOnly:{true:'_xm8mdk1-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var clearBackground = '_xm8mdkm-3-5-2';\nexport var dayRow = '_xm8mdk6-3-5-2';\nexport var disabled = '_xm8mdk2-3-5-2';\nexport var field = _7a468({defaultClassName:'_xm8mdk9-3-5-2',variantClassNames:{color:{primary:'_xm8mdka-3-5-2',neutral:'_xm8mdkb-3-5-2',critical:'_xm8mdkc-3-5-2'},isIncompleteSelection:{true:'_xm8mdkd-3-5-2'},isDisabled:{true:'_xm8mdke-3-5-2'}},defaultVariants:{isDisabled:false,color:'neutral'},compoundVariants:[[{color:'primary',isDisabled:true},'_xm8mdkf-3-5-2'],[{color:'neutral',isDisabled:true},'_xm8mdkg-3-5-2'],[{color:'critical',isDisabled:true},'_xm8mdkh-3-5-2']]});\nexport var monthRow = '_xm8mdk7-3-5-2';\nexport var rangeField = _7a468({defaultClassName:'_xm8mdki-3-5-2',variantClassNames:{rangeKind:{first:'_xm8mdkj-3-5-2',last:'_xm8mdkk-3-5-2',inbetween:'_xm8mdkl-3-5-2'}},defaultVariants:{},compoundVariants:[]});\nexport var row = '_xm8mdk5-3-5-2';\nexport var weekdays = '_xm8mdkn-3-5-2';\nexport var yearRow = '_xm8mdk8-3-5-2';"],
+  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,OAAO,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACnJ,IAAI,WAAW,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,UAAS,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrJ,IAAI,kBAAkB;AACtB,IAAI,SAAS;AACb,IAAI,WAAW;AACf,IAAI,QAAQ,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,kBAAiB,SAAQ,kBAAiB,UAAS,iBAAgB,GAAE,uBAAsB,EAAC,MAAK,iBAAgB,GAAE,YAAW,EAAC,MAAK,iBAAgB,EAAC,GAAE,iBAAgB,EAAC,YAAW,OAAM,OAAM,UAAS,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,WAAU,YAAW,KAAI,GAAE,gBAAgB,GAAE,CAAC,EAAC,OAAM,YAAW,YAAW,KAAI,GAAE,gBAAgB,CAAC,EAAC,CAAC;AACrd,IAAI,WAAW;AACf,IAAI,aAAa,OAAO,EAAC,kBAAiB,kBAAiB,mBAAkB,EAAC,WAAU,EAAC,OAAM,kBAAiB,MAAK,kBAAiB,WAAU,iBAAgB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1M,IAAI,MAAM;AACV,IAAI,WAAW;AACf,IAAI,UAAU;",
   "names": []
 }

package/esm/forms/calendar/CalendarRoot.js

@@ -15,11 +15,7 @@ import { validate } from "../../core/time/validation.js";
 import { useFormFieldMessagesContext } from "../forms-core/hooks/useFormFieldMessagesContext.js";
 import { useFormFieldValidation } from "../forms-core/hooks/useFormFieldValidation.js";
 import { FormFieldMessagesAction } from "../forms-core/state/formfield-messages-state-reducer.js";
-import {
-  calendarBodyCSS,
-  calendarCSS,
-  calendarDisabledCSS
-} from "./Calendar.sty.js";
+import * as styles from "./Calendar.sty.js";
 import { CalendarContext } from "./contexts/CalendarContext.js";
 import { useCalendar } from "./hooks/useCalendar.js";
 import { useCalendarNavigation } from "./hooks/useCalendarNavigation.js";
@@ -144,8 +140,8 @@ function CalendarComponent(props, forwardedRef) {
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: clsx(calendarCSS({ readOnly }), consumerClassName, {
-          [calendarDisabledCSS]: disabledOrAriaDisabled
+        className: clsx(styles.calendar({ readOnly }), consumerClassName, {
+          [styles.disabled]: disabledOrAriaDisabled
         }),
         "data-testid": dataTestId,
         ref: calendarRef,
@@ -158,7 +154,7 @@ function CalendarComponent(props, forwardedRef) {
             "table",
             {
               role: "grid",
-              className: calendarBodyCSS({
+              className: styles.body({
                 isReadOnly: !!readOnly
               }),
               children: renderView(state.currentView)

package/esm/forms/calendar/CalendarRoot.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/forms/calendar/CalendarRoot.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Ref,\n} from 'react';\n\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useCalendarStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport {\n  calendarBodyCSS,\n  calendarCSS,\n  calendarDisabledCSS,\n} from './Calendar.sty.js';\nimport type {\n  CalendarStrictValueType,\n  CalendarValueType,\n} from './Calendar.types.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport type { CalendarViewType } from './types/shared-types.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\nimport { isFullTimeframe, isTimeValue } from '../../core/time/helpers.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\n//#region types\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n\n/** @internal */\nexport type CalendarProps<Type extends CalendarType> = FormControlProps<\n  CalendarValueType<Type>,\n  (date: CalendarStrictValueType<Type>) => void\n> &\n  StylingProps &\n  MaskingProps &\n  DataTestId & {\n    /** The earliest selectable date. It will always consider the start of the day as time. */\n    min?: string;\n    /** The latest selectable date. It will always consider the end of the day as time. */\n    max?: string;\n    /** Determines the calendar type. Single allows the selection of one date and range allows a range selection with a from and to value.\n     * @defaultValue 'single'\n     */\n    type?: Type;\n    /**\n     * The precision of the time shown in the display value.\n     * @defaultValue 'minutes'\n     */\n    precision?: 'minutes' | 'seconds' | 'milliseconds';\n  };\n//#endregion\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction CalendarComponent<Type extends CalendarType = 'single'>(\n  props: Omit<CalendarProps<Type>, 'value' | 'defaultValue' | 'onChange'>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    required,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  } = props;\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n  const min = useCalendarStore((state) => state.min);\n  const max = useCalendarStore((state) => state.max);\n  const error = useCalendarStore((state) => state.calendarError);\n  const precision = useCalendarStore((state) => state.precision);\n\n  // Imperative Handle Construction\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    type,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n  const refValidate = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n\n    validate(calendarValue, min, max, {\n      formMessageDispatch,\n      formerError: error,\n      precision,\n      showError: true,\n      checkOrder: false,\n      ref,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate: refValidate,\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: {\n          from: ref?.current,\n          to: refTo?.current,\n        },\n        validate: refValidate,\n      };\n    },\n    [refValidate, type],\n  );\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(\n    ref,\n    {},\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(calendarCSS({ readOnly }), consumerClassName, {\n          [calendarDisabledCSS]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={calendarBodyCSS({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n      </div>\n      <VisuallyHidden>\n        {isTimeValue(calendarValue) ? (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={calendarValue?.absoluteDate ?? ''}\n            tabIndex={-1}\n          />\n        ) : (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isFullTimeframe(calendarValue) && calendarValue?.from?.value\n                  ? calendarValue.from.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={calendarValue?.to?.value ?? ''}\n              id={`${id}-to`}\n              type=\"hidden\"\n            />\n          </>\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nCalendarComponent['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const CalendarRoot = forwardRef(CalendarComponent);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  type Ref,\n} from 'react';\n\nimport { CalendarHeader } from './calendar-header/CalendarHeader.js';\nimport { CALENDAR_ERROR_MESSAGES } from './calendarMessages.js';\nimport { VisuallyHidden } from '../../core/components/visually-hidden/VisuallyHidden.js';\nimport { useCalendarStore } from '../../core/time/timeframeStore/useTimeframeStore.js';\nimport { validate } from '../../core/time/validation.js';\nimport type { FormControlProps } from '../../core/types/form-control-props.js';\nimport { useFormFieldMessagesContext } from '../forms-core/hooks/useFormFieldMessagesContext.js';\nimport { useFormFieldValidation } from '../forms-core/hooks/useFormFieldValidation.js';\nimport { FormFieldMessagesAction } from '../forms-core/state/formfield-messages-state-reducer.js';\nimport type { FormControlRef, TimeRangePickerRef } from '../shared-types.js';\nimport * as styles from './Calendar.sty.js';\nimport type {\n  CalendarStrictValueType,\n  CalendarValueType,\n} from './Calendar.types.js';\nimport { CalendarContext } from './contexts/CalendarContext.js';\nimport { UseCalendarProps, useCalendar } from './hooks/useCalendar.js';\nimport { useCalendarNavigation } from './hooks/useCalendarNavigation.js';\nimport type { CalendarViewType } from './types/shared-types.js';\nimport { SelectDayView } from './views/SelectDayView.js';\nimport { SelectMonthView } from './views/SelectMonthView.js';\nimport { SelectYearView } from './views/SelectYearView.js';\nimport { isFullTimeframe, isTimeValue } from '../../core/time/helpers.js';\nimport { DataTestId } from '../../core/types/data-props.js';\nimport { MaskingProps } from '../../core/types/masking-props.js';\nimport { StylingProps } from '../../core/types/styling-props.js';\n\nconst COMPONENT_NAME = 'Calendar';\n\n//#region types\n/**\n * @internal\n */\nexport type CalendarType = 'single' | 'range';\n\n/** @internal */\nexport type CalendarProps<Type extends CalendarType> = FormControlProps<\n  CalendarValueType<Type>,\n  (date: CalendarStrictValueType<Type>) => void\n> &\n  StylingProps &\n  MaskingProps &\n  DataTestId & {\n    /** The earliest selectable date. It will always consider the start of the day as time. */\n    min?: string;\n    /** The latest selectable date. It will always consider the end of the day as time. */\n    max?: string;\n    /** Determines the calendar type. Single allows the selection of one date and range allows a range selection with a from and to value.\n     * @defaultValue 'single'\n     */\n    type?: Type;\n    /**\n     * The precision of the time shown in the display value.\n     * @defaultValue 'minutes'\n     */\n    precision?: 'minutes' | 'seconds' | 'milliseconds';\n  };\n//#endregion\n\n/** Render the correct view depending on the currentView state. */\nfunction renderView(view: CalendarViewType) {\n  switch (view) {\n    case 'month':\n      return <SelectMonthView />;\n    case 'year':\n      return <SelectYearView />;\n    default:\n      return <SelectDayView />;\n  }\n}\n\nfunction CalendarComponent<Type extends CalendarType = 'single'>(\n  props: Omit<CalendarProps<Type>, 'value' | 'defaultValue' | 'onChange'>,\n  forwardedRef: Ref<\n    | FormControlRef<HTMLDivElement>\n    | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n        Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>)\n  >,\n) {\n  const {\n    className: consumerClassName,\n    style: consumerStyle,\n    'data-testid': dataTestId,\n    id,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    required,\n    name,\n    readOnly = false,\n    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error, @typescript-eslint/ban-ts-comment\n    // @ts-ignore Strict mode transition - needs to be investigated\n    type = 'single',\n    'aria-label': ariaLabelProp,\n    'aria-labelledby': ariaLabelledByProp,\n    'aria-describedby': ariaDescribedByProp,\n    'aria-details': ariaDetailsProp,\n    ...remainingProps\n  } = props;\n\n  const calendarValue = useCalendarStore((state) => state.calendarValue);\n  const min = useCalendarStore((state) => state.min);\n  const max = useCalendarStore((state) => state.max);\n  const error = useCalendarStore((state) => state.calendarError);\n  const precision = useCalendarStore((state) => state.precision);\n\n  // Imperative Handle Construction\n  const calendarRef = useRef<HTMLDivElement>(null);\n  const ref = useRef<HTMLInputElement>(null);\n  const refTo = useRef<HTMLInputElement>(null);\n\n  const { uniqueId, state, dispatch } = useCalendar<Type>({\n    type,\n  } as UseCalendarProps<Type>);\n\n  useCalendarNavigation({\n    calendarRef,\n    view: state.currentView,\n    dispatch,\n  });\n\n  const { dispatch: formMessageDispatch } = useFormFieldMessagesContext();\n\n  const refValidate = useCallback(() => {\n    formMessageDispatch?.({\n      type: FormFieldMessagesAction.SETISTOUCHED,\n      payload: { isTouched: true },\n    });\n\n    validate(calendarValue, min, max, {\n      formMessageDispatch,\n      formerError: error,\n      precision,\n      showError: true,\n      checkOrder: false,\n      ref,\n      errorMessages: CALENDAR_ERROR_MESSAGES,\n    });\n  }, [min, max, formMessageDispatch, error, precision, ref, calendarValue]);\n\n  useImperativeHandle(\n    forwardedRef,\n    ():\n      | FormControlRef<HTMLDivElement>\n      | (Omit<FormControlRef<HTMLDivElement>, 'inputRef'> &\n          Pick<TimeRangePickerRef<HTMLDivElement>, 'inputRef'>) => {\n      if (type === 'single') {\n        return {\n          element: calendarRef.current,\n          inputRef: ref.current,\n          validate: refValidate,\n        };\n      }\n\n      return {\n        element: calendarRef.current,\n        inputRef: {\n          from: ref?.current,\n          to: refTo?.current,\n        },\n        validate: refValidate,\n      };\n    },\n    [refValidate, type],\n  );\n\n  const {\n    ariaProps,\n    onChange: validationOnChange,\n    onBlur,\n    onInvalid,\n  } = useFormFieldValidation(\n    ref,\n    {},\n    {\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledByProp,\n      'aria-describedby': ariaDescribedByProp,\n      'aria-details': ariaDetailsProp,\n    },\n  );\n\n  const labelRef = useRef<string>(`calendar-body-label-${uniqueId}`);\n\n  const disabledOrAriaDisabled = disabled || ariaDisabled || false;\n\n  const getNativeProps = (suffix = '') => ({\n    readOnly: readOnly,\n    required,\n    disabled,\n    'aria-disabled': ariaDisabled,\n    name: name && `${name}${suffix}`,\n    id,\n  });\n\n  const calenderContextValue = useMemo(\n    () => ({ state, dispatch, readOnly }),\n    [state, dispatch, readOnly],\n  );\n\n  return (\n    <CalendarContext.Provider value={calenderContextValue}>\n      <div\n        className={clsx(styles.calendar({ readOnly }), consumerClassName, {\n          [styles.disabled]: disabledOrAriaDisabled,\n        })}\n        data-testid={dataTestId}\n        ref={calendarRef}\n        style={consumerStyle}\n        {...remainingProps}\n        data-dt-component={COMPONENT_NAME}\n      >\n        <CalendarHeader view={state.currentView} labelId={labelRef.current} />\n        <div aria-labelledby={labelRef.current}>\n          <table\n            role=\"grid\"\n            className={styles.body({\n              isReadOnly: !!readOnly,\n            })}\n          >\n            {renderView(state.currentView)}\n          </table>\n        </div>\n      </div>\n      <VisuallyHidden>\n        {isTimeValue(calendarValue) ? (\n          <input\n            onChange={validationOnChange}\n            onBlur={onBlur}\n            onInvalid={onInvalid}\n            {...ariaProps}\n            {...getNativeProps()}\n            ref={ref}\n            value={calendarValue?.absoluteDate ?? ''}\n            tabIndex={-1}\n          />\n        ) : (\n          <>\n            <input\n              onChange={validationOnChange}\n              onBlur={onBlur}\n              onInvalid={onInvalid}\n              {...ariaProps}\n              {...getNativeProps('-from')}\n              ref={ref}\n              // Only set if a complete timeframe is available to rely on the browser validation for required.\n              value={\n                isFullTimeframe(calendarValue) && calendarValue?.from?.value\n                  ? calendarValue.from.value\n                  : ''\n              }\n              tabIndex={-1}\n            />\n            {/* This input is ONLY used for form submission and not for validation. */}\n            <input\n              {...getNativeProps('-to')}\n              ref={refTo}\n              value={calendarValue?.to?.value ?? ''}\n              id={`${id}-to`}\n              type=\"hidden\"\n            />\n          </>\n        )}\n      </VisuallyHidden>\n    </CalendarContext.Provider>\n  );\n}\n\nCalendarComponent['displayName'] = COMPONENT_NAME;\n\n/**\n * Calendar component\n * Renders the calendar header and body depending on the current view\n * @internal\n */\nexport const CalendarRoot = forwardRef(CalendarComponent);\n"],
+  "mappings": "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",
   "names": ["state"]
 }

package/esm/forms/calendar/components/CalendarItem.css

@@ -1,7 +1,7 @@
-._1basjc0-3-4-1 {
+._1basjc0-3-5-2 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._1basjc1-3-4-1::after,._1basjc1-3-4-1::before {
+._1basjc1-3-5-2::after,._1basjc1-3-5-2::before {
   content: "";
   position: absolute;
   width: 4px;
@@ -11,11 +11,11 @@
   left: 50%;
   border-radius: var(--dt-borders-radius-field-emphasized, 9999px);
 }
-._1basjc1-3-4-1::before {
+._1basjc1-3-5-2::before {
   transform: translate(-50%, 50%) scale(2);
   background: var(--dt-colors-background-surface-default, #fff);
 }
-._1basjc2-3-4-1 {
+._1basjc2-3-5-2 {
   padding-left: var(--dt-spacings-size-0, 0);
   padding-right: var(--dt-spacings-size-0, 0);
   margin: var(--dt-spacings-size-0, 0);
@@ -23,9 +23,9 @@
   position: relative;
   z-index: 0;
 }
-._1basjc2-3-4-1::after {
-  background: var(--_1jljrbf1-3-4-1);
+._1basjc2-3-5-2::after {
+  background: var(--_1jljrbf1-3-5-2);
 }
-._1basjc3-3-4-1 {
+._1basjc3-3-5-2 {
   flex-grow: 1;
 }

package/esm/forms/calendar/components/CalendarItem.sty.js

@@ -1,8 +1,8 @@
 import "./CalendarItem.css";
-var calendarButton = "_1basjc2-3-4-1";
-var currentIndicator = "_1basjc1-3-4-1";
-var headerButton = "_1basjc3-3-4-1";
-var outOfScopeDay = "_1basjc0-3-4-1";
+var calendarButton = "_1basjc2-3-5-2";
+var currentIndicator = "_1basjc1-3-5-2";
+var headerButton = "_1basjc3-3-5-2";
+var outOfScopeDay = "_1basjc0-3-5-2";
 export {
   calendarButton,
   currentIndicator,

package/esm/forms/calendar/components/CalendarItem.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarItem.css.ts"],
-  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButton = '_1basjc2-3-4-1';\nexport var currentIndicator = '_1basjc1-3-4-1';\nexport var headerButton = '_1basjc3-3-4-1';\nexport var outOfScopeDay = '_1basjc0-3-4-1';"],
+  "sourcesContent": ["import './CalendarItem.css';\nexport var calendarButton = '_1basjc2-3-5-2';\nexport var currentIndicator = '_1basjc1-3-5-2';\nexport var headerButton = '_1basjc3-3-5-2';\nexport var outOfScopeDay = '_1basjc0-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,mBAAmB;AACvB,IAAI,eAAe;AACnB,IAAI,gBAAgB;",
   "names": []
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.css

@@ -1,24 +1,24 @@
-._1uazq660-3-4-1 {
+._1uazq660-3-5-2 {
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   overflow: visible;
-  fill: var(--_1jljrbf1-3-4-1);
+  fill: var(--_1jljrbf1-3-5-2);
 }
-._1uazq661-3-4-1 {
-  fill: var(--_1jljrbf1-3-4-1);
+._1uazq661-3-5-2 {
+  fill: var(--_1jljrbf1-3-5-2);
 }
-._1uazq662-3-4-1 {
+._1uazq662-3-5-2 {
   fill: var(--dt-colors-background-surface-default, #fff);
 }
-._1uazq663-3-4-1 {
-  fill: var(--_1jljrbf0-3-4-1);
+._1uazq663-3-5-2 {
+  fill: var(--_1jljrbf0-3-5-2);
   transition-timing-function: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1));
   transition-duration: var(--dt-animations-fade-out-duration-base, 250ms);
   opacity: 0;
   transition-property: opacity;
 }
-._1uazq664-3-4-1 {
+._1uazq664-3-5-2 {
   opacity: 1;
 }

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js

@@ -1,9 +1,9 @@
 import "./CalendarOutlineIcon.css";
-var calendarIndicatorBackgroundCSS = "_1uazq662-3-4-1";
-var calendarIndicatorCSS = "_1uazq661-3-4-1";
-var calendarOutlineCSS = "_1uazq660-3-4-1";
-var calendarRangeCornersCSS = "_1uazq663-3-4-1";
-var calendarRangeCornorVisibleCSS = "_1uazq664-3-4-1";
+var calendarIndicatorBackgroundCSS = "_1uazq662-3-5-2";
+var calendarIndicatorCSS = "_1uazq661-3-5-2";
+var calendarOutlineCSS = "_1uazq660-3-5-2";
+var calendarRangeCornersCSS = "_1uazq663-3-5-2";
+var calendarRangeCornorVisibleCSS = "_1uazq664-3-5-2";
 export {
   calendarIndicatorBackgroundCSS,
   calendarIndicatorCSS,

package/esm/forms/calendar/components/CalendarOutlineIcon.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/CalendarOutlineIcon.css.ts"],
-  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-4-1';\nexport var calendarIndicatorCSS = '_1uazq661-3-4-1';\nexport var calendarOutlineCSS = '_1uazq660-3-4-1';\nexport var calendarRangeCornersCSS = '_1uazq663-3-4-1';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-4-1';"],
+  "sourcesContent": ["import './CalendarOutlineIcon.css';\nexport var calendarIndicatorBackgroundCSS = '_1uazq662-3-5-2';\nexport var calendarIndicatorCSS = '_1uazq661-3-5-2';\nexport var calendarOutlineCSS = '_1uazq660-3-5-2';\nexport var calendarRangeCornersCSS = '_1uazq663-3-5-2';\nexport var calendarRangeCornorVisibleCSS = '_1uazq664-3-5-2';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,iCAAiC;AACrC,IAAI,uBAAuB;AAC3B,IAAI,qBAAqB;AACzB,IAAI,0BAA0B;AAC9B,IAAI,gCAAgC;",
   "names": []
 }

package/esm/forms/calendar/components/Day.js

@@ -8,11 +8,7 @@ import { useCalendarStore } from "../../../core/time/timeframeStore/useTimeframe
 import { isOutOfBounds } from "../../../core/time/validation.js";
 import { useFormFieldContext } from "../../forms-core/hooks/useFormFieldContext.js";
 import { useFormFieldMessagesContext } from "../../forms-core/hooks/useFormFieldMessagesContext.js";
-import {
-  calendarClearBgCSS,
-  calendarFieldCSS,
-  calendarRangeFieldCSS
-} from "../Calendar.sty.js";
+import * as styles from "../Calendar.sty.js";
 import { CalendarItem } from "./CalendarItem.js";
 import { CalendarOutlineIcon } from "./CalendarOutlineIcon.js";
 import {
@@ -81,15 +77,15 @@ const Day = ({ date, isCurrentMonthDay = true, position }) => {
   } = useFormFieldMessagesContext();
   const validatedHighlightColor = showError && highlightColor === "primary" ? "critical" : highlightColor;
   const className = clsx(
-    calendarFieldCSS({
+    styles.field({
       color: validatedHighlightColor,
       isDisabled: isDisabled || disabled || ariaDisabled,
       isIncompleteSelection
     }),
-    highlightType && highlightType !== "same" ? calendarRangeFieldCSS({
+    highlightType && highlightType !== "same" ? styles.rangeField({
       rangeKind: highlightType
     }) : "",
-    isSelected ? calendarClearBgCSS : ""
+    isSelected ? styles.clearBackground : ""
   );
   const dayValue = date.getDate();
   return /* @__PURE__ */ jsx("td", { role: "presentation", className, ...rangeInteractionProps, children: /* @__PURE__ */ jsxs(

package/esm/forms/calendar/components/Day.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Day.tsx"],
-  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { endOfDay, isSameDay } from 'date-fns';\nimport { useContext, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isOutOfBounds } from '../../../core/time/validation.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport {\n  calendarClearBgCSS,\n  calendarFieldCSS,\n  calendarRangeFieldCSS,\n} from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { CalendarOutlineIcon } from './CalendarOutlineIcon.js';\nimport {\n  isFullTimeframe,\n  isPartialTimeframe,\n} from '../../../core/time/helpers.js';\nimport { DayViewContext } from '../contexts/DayViewContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { useFocus } from '../hooks/useFocus.js';\nimport { NUMBER_OF_WEEKDAYS } from '../types/calendarConfiguration.js';\nimport { getHighlightingProps } from '../utils/helpers.js';\n\n/** @internal */\ninterface DayProps {\n  /** The day it represents. */\n  date: TZDate;\n  /** Whether the day is part of the current month */\n  isCurrentMonthDay?: boolean;\n  /** Position in the calendar grid 1 is first day and 7 the last */\n  position: number;\n}\n\n/**\n * Day component\n * Renders one single day of a calendar month\n * @internal\n */\nexport const Day = ({ date, isCurrentMonthDay = true, position }: DayProps) => {\n  // Reference of the day button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n  const isLastInRow = position % NUMBER_OF_WEEKDAYS === 0;\n  const isFirstInRow = position % NUMBER_OF_WEEKDAYS === 1;\n  const intl = useIntl();\n\n  const min = useCalendarStore((store) => store.min);\n  const max = useCalendarStore((store) => store.max);\n  const value = useCalendarStore((store) => store.calendarValue ?? null);\n  const setCalendarValue = useCalendarStore((store) => store.setCalendarValue);\n\n  const { state, dispatch } = useCalendarContext();\n  const { hoveredDate, setHoveredDate } = useContext(DayViewContext);\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select day',\n      id: 'UBJSASimMVkN5w7p',\n      description: 'Aria label to add to each day button',\n    });\n    return `${formatMessage} ${formatDate(date, {\n      year: 'numeric',\n      month: 'numeric',\n      day: 'numeric',\n    })}`;\n  }, [date, intl]);\n\n  const isCurrent = isSameDay(date, state.today);\n  const isFocused = isSameDay(date, state.activeDate);\n\n  const isDisabled = useMemo(() =>\n    // A day is disabled if its end is before the min, or if its start is after the max.\n    {\n      return !!(\n        isOutOfBounds(endOfDay(date), min) ||\n        isOutOfBounds(date, undefined, max)\n      );\n    }, [date, min, max]);\n\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  /** Handle click on a day in the select day view. */\n  function onClick() {\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n    setCalendarValue?.(date);\n  }\n\n  const {\n    highlightType,\n    highlightColor,\n    isSelected,\n    selectionVariant,\n    isIncompleteSelection,\n  } = useMemo(\n    () => getHighlightingProps(date, value, state.type, hoveredDate),\n    [date, value, state.type, hoveredDate],\n  );\n\n  const rangeInteractionProps = useMemo(() => {\n    const onMouseLeave =\n      (isFullTimeframe(value) || value === null) && hoveredDate\n        ? () => setHoveredDate?.(null)\n        : undefined;\n\n    const onMouseEnter = isPartialTimeframe(value)\n      ? () => setHoveredDate?.(date)\n      : undefined;\n\n    return {\n      onMouseLeave,\n      onMouseEnter,\n    };\n  }, [value, hoveredDate, date, setHoveredDate]);\n\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n  const className = clsx(\n    calendarFieldCSS({\n      color: validatedHighlightColor,\n      isDisabled: isDisabled || disabled || ariaDisabled,\n      isIncompleteSelection: isIncompleteSelection,\n    }),\n    highlightType && highlightType !== 'same'\n      ? calendarRangeFieldCSS({\n          rangeKind: highlightType,\n        })\n      : '',\n    isSelected ? calendarClearBgCSS : '',\n  );\n  const dayValue = date.getDate();\n\n  return (\n    <td role=\"presentation\" className={className} {...rangeInteractionProps}>\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isDisabled={isDisabled || disabled}\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        highlightColor={validatedHighlightColor}\n        isCurrentMonthDay={isCurrentMonthDay}\n        tabIndex={tabIndex}\n        ariaLabel={ariaLabel}\n        role=\"gridcell\"\n        aria-selected={isSelected}\n        onClick={onClick}\n        view=\"day\"\n        data-dt-name=\"SelectDay\"\n        data-dt-properties={`value:${dayValue}`}\n      >\n        {dayValue}\n        <CalendarOutlineIcon\n          isCurrent={isCurrent}\n          variant={selectionVariant}\n          highlightType={\n            (isFirstInRow && highlightType === 'last') ||\n            (isLastInRow && highlightType === 'first')\n              ? undefined\n              : highlightType\n          }\n        />\n      </CalendarItem>\n    </td>\n  );\n};\n\nDay['displayName'] = 'Day';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { TZDate } from '@date-fns/tz';\nimport clsx from 'clsx';\nimport { endOfDay, isSameDay } from 'date-fns';\nimport { useContext, useMemo, useRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { formatDate } from '@dynatrace-sdk/units';\n\nimport { useCalendarStore } from '../../../core/time/timeframeStore/useTimeframeStore.js';\nimport { isOutOfBounds } from '../../../core/time/validation.js';\nimport { useFormFieldContext } from '../../forms-core/hooks/useFormFieldContext.js';\nimport { useFormFieldMessagesContext } from '../../forms-core/hooks/useFormFieldMessagesContext.js';\nimport * as styles from '../Calendar.sty.js';\nimport { CalendarItem } from './CalendarItem.js';\nimport { CalendarOutlineIcon } from './CalendarOutlineIcon.js';\nimport {\n  isFullTimeframe,\n  isPartialTimeframe,\n} from '../../../core/time/helpers.js';\nimport { DayViewContext } from '../contexts/DayViewContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport { useFocus } from '../hooks/useFocus.js';\nimport { NUMBER_OF_WEEKDAYS } from '../types/calendarConfiguration.js';\nimport { getHighlightingProps } from '../utils/helpers.js';\n\n/** @internal */\ninterface DayProps {\n  /** The day it represents. */\n  date: TZDate;\n  /** Whether the day is part of the current month */\n  isCurrentMonthDay?: boolean;\n  /** Position in the calendar grid 1 is first day and 7 the last */\n  position: number;\n}\n\n/**\n * Day component\n * Renders one single day of a calendar month\n * @internal\n */\nexport const Day = ({ date, isCurrentMonthDay = true, position }: DayProps) => {\n  // Reference of the day button, needed to pass to the hook for proper focus management\n  const itemRef = useRef<HTMLDivElement>(null);\n  const isLastInRow = position % NUMBER_OF_WEEKDAYS === 0;\n  const isFirstInRow = position % NUMBER_OF_WEEKDAYS === 1;\n  const intl = useIntl();\n\n  const min = useCalendarStore((store) => store.min);\n  const max = useCalendarStore((store) => store.max);\n  const value = useCalendarStore((store) => store.calendarValue ?? null);\n  const setCalendarValue = useCalendarStore((store) => store.setCalendarValue);\n\n  const { state, dispatch } = useCalendarContext();\n  const { hoveredDate, setHoveredDate } = useContext(DayViewContext);\n\n  const ariaLabel = useMemo(() => {\n    const formatMessage = intl.formatMessage({\n      defaultMessage: 'Select day',\n      id: 'UBJSASimMVkN5w7p',\n      description: 'Aria label to add to each day button',\n    });\n    return `${formatMessage} ${formatDate(date, {\n      year: 'numeric',\n      month: 'numeric',\n      day: 'numeric',\n    })}`;\n  }, [date, intl]);\n\n  const isCurrent = isSameDay(date, state.today);\n  const isFocused = isSameDay(date, state.activeDate);\n\n  const isDisabled = useMemo(() =>\n    // A day is disabled if its end is before the min, or if its start is after the max.\n    {\n      return !!(\n        isOutOfBounds(endOfDay(date), min) ||\n        isOutOfBounds(date, undefined, max)\n      );\n    }, [date, min, max]);\n\n  const { tabIndex } = useFocus({ isFocused, itemRef });\n\n  /** Handle click on a day in the select day view. */\n  function onClick() {\n    dispatch({ type: 'shouldUpdateFocusFromKeydown', payload: false });\n    setCalendarValue?.(date);\n  }\n\n  const {\n    highlightType,\n    highlightColor,\n    isSelected,\n    selectionVariant,\n    isIncompleteSelection,\n  } = useMemo(\n    () => getHighlightingProps(date, value, state.type, hoveredDate),\n    [date, value, state.type, hoveredDate],\n  );\n\n  const rangeInteractionProps = useMemo(() => {\n    const onMouseLeave =\n      (isFullTimeframe(value) || value === null) && hoveredDate\n        ? () => setHoveredDate?.(null)\n        : undefined;\n\n    const onMouseEnter = isPartialTimeframe(value)\n      ? () => setHoveredDate?.(date)\n      : undefined;\n\n    return {\n      onMouseLeave,\n      onMouseEnter,\n    };\n  }, [value, hoveredDate, date, setHoveredDate]);\n\n  const { disabled, ariaDisabled } = useFormFieldContext();\n  const {\n    state: { showError },\n  } = useFormFieldMessagesContext();\n\n  const validatedHighlightColor =\n    showError && highlightColor === 'primary' ? 'critical' : highlightColor;\n  const className = clsx(\n    styles.field({\n      color: validatedHighlightColor,\n      isDisabled: isDisabled || disabled || ariaDisabled,\n      isIncompleteSelection: isIncompleteSelection,\n    }),\n    highlightType && highlightType !== 'same'\n      ? styles.rangeField({\n          rangeKind: highlightType,\n        })\n      : '',\n    isSelected ? styles.clearBackground : '',\n  );\n  const dayValue = date.getDate();\n\n  return (\n    <td role=\"presentation\" className={className} {...rangeInteractionProps}>\n      <CalendarItem\n        ref={itemRef}\n        className=\"calendar-button calendar-body-button\"\n        isDisabled={isDisabled || disabled}\n        isCurrent={isCurrent}\n        isSelected={isSelected}\n        highlightColor={validatedHighlightColor}\n        isCurrentMonthDay={isCurrentMonthDay}\n        tabIndex={tabIndex}\n        ariaLabel={ariaLabel}\n        role=\"gridcell\"\n        aria-selected={isSelected}\n        onClick={onClick}\n        view=\"day\"\n        data-dt-name=\"SelectDay\"\n        data-dt-properties={`value:${dayValue}`}\n      >\n        {dayValue}\n        <CalendarOutlineIcon\n          isCurrent={isCurrent}\n          variant={selectionVariant}\n          highlightType={\n            (isFirstInRow && highlightType === 'last') ||\n            (isLastInRow && highlightType === 'first')\n              ? undefined\n              : highlightType\n          }\n        />\n      </CalendarItem>\n    </td>\n  );\n};\n\nDay['displayName'] = 'Day';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/forms/calendar/components/Days.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import clsx from "clsx";
 import { useContext, useMemo } from "react";
 import { Day } from "./Day.js";
-import { calendarDayRowCSS, calendarRowCSS } from "../Calendar.sty.js";
+import * as styles from "../Calendar.sty.js";
 import { DayViewContext } from "../contexts/DayViewContext.js";
 import { useCalendarContext } from "../hooks/useCalendarContext.js";
 import {
@@ -26,7 +26,7 @@ function Days({ weekStartsOn }) {
       children: new Array(NUMBER_OF_WEEK_ROWS).fill(0).map((_, index) => /* @__PURE__ */ jsx(
         "tr",
         {
-          className: clsx([calendarRowCSS, calendarDayRowCSS]),
+          className: clsx([styles.row, styles.dayRow]),
           children: days.slice(
             index * NUMBER_OF_WEEKDAYS,
             index * NUMBER_OF_WEEKDAYS + NUMBER_OF_WEEKDAYS

package/esm/forms/calendar/components/Days.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/forms/calendar/components/Days.tsx"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport { useContext, useMemo } from 'react';\nimport { type DayOfWeek } from 'weekstart';\n\nimport { Day } from './Day.js';\nimport { calendarDayRowCSS, calendarRowCSS } from '../Calendar.sty.js';\nimport { DayViewContext } from '../contexts/DayViewContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport {\n  NUMBER_OF_WEEK_ROWS,\n  NUMBER_OF_WEEKDAYS,\n} from '../types/calendarConfiguration.js';\nimport { getDays } from '../utils/helpers.js';\n\n/** @internal */\nexport function Days({ weekStartsOn }: Readonly<{ weekStartsOn: DayOfWeek }>) {\n  const { state } = useCalendarContext();\n  const { setHoveredDate } = useContext(DayViewContext);\n\n  const days = useMemo(\n    () => getDays(state.activeDate, weekStartsOn),\n    [state.activeDate, weekStartsOn],\n  );\n\n  return (\n    <tbody\n      onMouseLeave={() => {\n        setHoveredDate?.(null);\n      }}\n    >\n      {new Array(NUMBER_OF_WEEK_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${days[index].date}-row-${index}`}\n          className={clsx([calendarRowCSS, calendarDayRowCSS])}\n        >\n          {days\n            .slice(\n              index * NUMBER_OF_WEEKDAYS,\n              index * NUMBER_OF_WEEKDAYS + NUMBER_OF_WEEKDAYS,\n            )\n            .map((day, index) => (\n              <Day\n                date={day.date}\n                position={index + 1}\n                isCurrentMonthDay={day.isCurrentMonthDay}\n                key={day.date.toISOString()}\n              />\n            ))}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n"],
-  "mappings": "AAyCc;AAzCd,OAAO,UAAU;AACjB,SAAS,YAAY,eAAe;AAGpC,SAAS,WAAW;AACpB,SAAS,mBAAmB,sBAAsB;AAClD,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAGjB,SAAS,KAAK,EAAE,aAAa,GAA0C;AAC5E,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,IAAI,WAAW,cAAc;AAEpD,QAAM,OAAO;AAAA,IACX,MAAM,QAAQ,MAAM,YAAY,YAAY;AAAA,IAC5C,CAAC,MAAM,YAAY,YAAY;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc,MAAM;AAClB,yBAAiB,IAAI;AAAA,MACvB;AAAA,MAEC,cAAI,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9C;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,KAAK,CAAC,gBAAgB,iBAAiB,CAAC;AAAA,UAElD,eACE;AAAA,YACC,QAAQ;AAAA,YACR,QAAQ,qBAAqB;AAAA,UAC/B,EACC,IAAI,CAAC,KAAKA,WACT;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,IAAI;AAAA,cACV,UAAUA,SAAQ;AAAA,cAClB,mBAAmB,IAAI;AAAA;AAAA,YAClB,IAAI,KAAK,YAAY;AAAA,UAC5B,CACD;AAAA;AAAA,QAfE,GAAG,KAAK,KAAK,EAAE,IAAI,QAAQ,KAAK;AAAA,MAgBvC,CACD;AAAA;AAAA,EACH;AAEJ;",
+  "sourcesContent": ["import clsx from 'clsx';\nimport { useContext, useMemo } from 'react';\nimport { type DayOfWeek } from 'weekstart';\n\nimport { Day } from './Day.js';\nimport * as styles from '../Calendar.sty.js';\nimport { DayViewContext } from '../contexts/DayViewContext.js';\nimport { useCalendarContext } from '../hooks/useCalendarContext.js';\nimport {\n  NUMBER_OF_WEEK_ROWS,\n  NUMBER_OF_WEEKDAYS,\n} from '../types/calendarConfiguration.js';\nimport { getDays } from '../utils/helpers.js';\n\n/** @internal */\nexport function Days({ weekStartsOn }: Readonly<{ weekStartsOn: DayOfWeek }>) {\n  const { state } = useCalendarContext();\n  const { setHoveredDate } = useContext(DayViewContext);\n\n  const days = useMemo(\n    () => getDays(state.activeDate, weekStartsOn),\n    [state.activeDate, weekStartsOn],\n  );\n\n  return (\n    <tbody\n      onMouseLeave={() => {\n        setHoveredDate?.(null);\n      }}\n    >\n      {new Array(NUMBER_OF_WEEK_ROWS).fill(0).map((_, index) => (\n        <tr\n          key={`${days[index].date}-row-${index}`}\n          className={clsx([styles.row, styles.dayRow])}\n        >\n          {days\n            .slice(\n              index * NUMBER_OF_WEEKDAYS,\n              index * NUMBER_OF_WEEKDAYS + NUMBER_OF_WEEKDAYS,\n            )\n            .map((day, index) => (\n              <Day\n                date={day.date}\n                position={index + 1}\n                isCurrentMonthDay={day.isCurrentMonthDay}\n                key={day.date.toISOString()}\n              />\n            ))}\n        </tr>\n      ))}\n    </tbody>\n  );\n}\n"],
+  "mappings": "AAyCc;AAzCd,OAAO,UAAU;AACjB,SAAS,YAAY,eAAe;AAGpC,SAAS,WAAW;AACpB,YAAY,YAAY;AACxB,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AACnC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,eAAe;AAGjB,SAAS,KAAK,EAAE,aAAa,GAA0C;AAC5E,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,eAAe,IAAI,WAAW,cAAc;AAEpD,QAAM,OAAO;AAAA,IACX,MAAM,QAAQ,MAAM,YAAY,YAAY;AAAA,IAC5C,CAAC,MAAM,YAAY,YAAY;AAAA,EACjC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAc,MAAM;AAClB,yBAAiB,IAAI;AAAA,MACvB;AAAA,MAEC,cAAI,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAC9C;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,KAAK,CAAC,OAAO,KAAK,OAAO,MAAM,CAAC;AAAA,UAE1C,eACE;AAAA,YACC,QAAQ;AAAA,YACR,QAAQ,qBAAqB;AAAA,UAC/B,EACC,IAAI,CAAC,KAAKA,WACT;AAAA,YAAC;AAAA;AAAA,cACC,MAAM,IAAI;AAAA,cACV,UAAUA,SAAQ;AAAA,cAClB,mBAAmB,IAAI;AAAA;AAAA,YAClB,IAAI,KAAK,YAAY;AAAA,UAC5B,CACD;AAAA;AAAA,QAfE,GAAG,KAAK,KAAK,EAAE,IAAI,QAAQ,KAAK;AAAA,MAgBvC,CACD;AAAA;AAAA,EACH;AAEJ;",
   "names": ["index"]
 }